diff --git a/src/api/organization.ts b/src/api/organization.ts index 56c2948dd..236e7450e 100644 --- a/src/api/organization.ts +++ b/src/api/organization.ts @@ -328,3 +328,27 @@ export const getPublicOrganizations = async (pageNumber: number, pageSize: numbe } } +export const getPublicOrgDetails = async (orgSlug: string) => { + + const url = `${apiRoutes.Public.organizationDetails}/${orgSlug}` + + const config = { + headers: { + 'Content-Type': 'application/json', + } + } + const axiosPayload = { + url, + config + } + + try { + return await axiosPublicOrganisationGet(axiosPayload); + } + catch (error) { + const err = error as Error + return err?.message + } +} + + diff --git a/src/components/organization/PublicOrganizationDetails.tsx b/src/components/organization/PublicOrganizationDetails.tsx new file mode 100644 index 000000000..afba7323a --- /dev/null +++ b/src/components/organization/PublicOrganizationDetails.tsx @@ -0,0 +1,94 @@ +import React, { useEffect, useState } from "react" +import type { AxiosResponse } from 'axios'; +import { getPublicOrgDetails } from '../../api/organization' +import { apiStatusCodes } from "../../config/CommonConstant"; +import ProfilesDesign from "../publicProfile/ProfilesDesign"; +import OrgWalletDetails from "../publicProfile/OrgWalletDetails"; +import OrgUserInfo from "../publicProfile/OrgUserInfo"; +import { AlertComponent } from "../AlertComponent"; +import CustomSpinner from "../CustomSpinner"; +import { OrgInterface } from "./interfaces"; +import { Roles } from "../../utils/enums/roles"; + + +const PublicOrganizationDetails = ({ orgSlug }: { orgSlug: string }) => { + + const [orgData, setOrgData] = useState(null); + const [orgUsersData, setOrgUsersData] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + const getOrganizationData = async () => { + setLoading(true); + const response = await getPublicOrgDetails(orgSlug); + + const { data } = response as AxiosResponse + + if (data?.statusCode === apiStatusCodes?.API_STATUS_SUCCESS) { + + setOrgData(data?.data); + + const orgUsersFilterByRole = data?.data?.userOrgRoles?.filter( + (users: { orgRole: { name: string }; }) => { + return users?.orgRole.name === Roles.OWNER + }, + ); + + const usersData = orgUsersFilterByRole?.map( + (users: { user: { firstName: string } }) => { + return users?.user; + }, + ); + + setOrgUsersData(usersData); + } else { + setError(response as string); + } + setLoading(false); + }; + + useEffect(() => { + + getOrganizationData() + + }, []) + + + return ( +
+ {(error) && ( + { + setError(null); + }} + /> + )} + { + loading ?
+ +
+ :
+
+ { + orgData && + } + +
+
+ +
+

Users

+ +
+
+
+ } + +
+ ); +} + + +export default PublicOrganizationDetails diff --git a/src/components/organization/interfaces/index.ts b/src/components/organization/interfaces/index.ts index 6ed124adb..45a533425 100644 --- a/src/components/organization/interfaces/index.ts +++ b/src/components/organization/interfaces/index.ts @@ -113,3 +113,38 @@ export interface Connection { membersCount: number endorsementsCount: number } + + +export interface OrgInterface { + name: string; + website: string; + logoUrl: string; + description: string; +} + +export interface OrgDataInterface { + orgData: OrgInterface +} + +export interface OrgWalletDetailsObject { + orgDid:string + ledgers:{ + name:string + networkType:string + } + networkType:string + walletName:string + createDateTime:string +} + +export interface UserDetails { + profileImg: string; + lastName: string; + firstName: string; + email: string; + publicProfile: boolean; + id: number; + username: string; +} + + diff --git a/src/components/publicProfile/OrgUserInfo.tsx b/src/components/publicProfile/OrgUserInfo.tsx new file mode 100644 index 000000000..056d98ba3 --- /dev/null +++ b/src/components/publicProfile/OrgUserInfo.tsx @@ -0,0 +1,64 @@ +import React from "react" +import CustomAvatar from "../../components/Avatar" +import { UserDetails } from "../organization/interfaces"; + + +const OrgUserInfo = ({orgUsersData}) => { + + return ( + <> + {orgUsersData && +
+
+ { + orgUsersData && + orgUsersData?.map((orgUser: UserDetails) => { + return ( + <> +
+ {orgUser.firstName && + + <> + {orgUser?.profileImg ? ( + + ) : ( + + )} +
+ {orgUser.firstName} {orgUser.lastName} +
+ } +
+ +
+ {orgUser.email && + <>

{orgUser.email}

+ } +
+ + ); + }) + } +
+
} + + ) + +} + +export default OrgUserInfo \ No newline at end of file diff --git a/src/components/publicProfile/OrgUserInfoLayout.astro b/src/components/publicProfile/OrgUserInfoLayout.astro deleted file mode 100644 index 169294fbf..000000000 --- a/src/components/publicProfile/OrgUserInfoLayout.astro +++ /dev/null @@ -1,65 +0,0 @@ ---- -interface UserDetails { - profileImg: string; - lastName: string; - firstName: string; - email: string; - publicProfile: boolean; - id: number; - username: string; -} -import CustomAvatar from "../../components/Avatar" -const { orgUsersData } = Astro.props; ---- -{orgUsersData && -
-
- { - orgUsersData && - orgUsersData?.map((orgUser: UserDetails) => { - return ( - <> -
- {orgUser.firstName && - - - { orgUser?.profileImg ? ( - - ) : ( - - )} - -
- {orgUser.firstName} {orgUser.lastName} -
- } -
- -
- {orgUser.email && - -

{orgUser.email}

- } -
- - ); - }) - } -
-
} diff --git a/src/components/publicProfile/OrgWalletDetails.tsx b/src/components/publicProfile/OrgWalletDetails.tsx new file mode 100644 index 000000000..eb793ec90 --- /dev/null +++ b/src/components/publicProfile/OrgWalletDetails.tsx @@ -0,0 +1,114 @@ + + +import React, { useEffect, useState } from "react" +import { EmptyListMessage } from "../EmptyListComponent"; +import CustomQRCode from "../../commonComponents/QRcode"; +import DateTooltip from '../Tooltip'; +import { dateConversion } from '../../utils/DateConversion'; +import { OrgWalletDetailsObject } from "../organization/interfaces"; + +const OrgWalletDetails = ({orgData}) => { + + const [connectionInvitation, setConnectionInvitation] = useState(null); + const [error, setError] = useState(null); + + useEffect(()=>{ + + if(orgData && orgData?.org_agents?.length > 0){ + const agents = orgData?.org_agents[0] + if(agents?.agent_invitations?.length > 0){ + const connection = agents?.agent_invitations[0].connectionInvitation; + setConnectionInvitation(connection) + } + + } + + },[orgData]) + + + return ( +
+
+

Wallet Details

+ + { orgData?.org_agents.length > 0 ? +
+
    + {orgData?.org_agents ? + orgData?.org_agents?.map((agentData:OrgWalletDetailsObject) => ( + <>
  • + DID + : + + {agentData?.orgDid && `${agentData?.orgDid.substring(0, 25)}...`} + + +
  • + Ledger + : + {agentData?.ledgers?.name} +
  • + Network + : + {agentData?.ledgers?.networkType} +
  • + WalletName + : + {agentData?.walletName} +
  • + CreationDate + : +

    + { + agentData?.createDateTime ? + { dateConversion(agentData?.createDateTime) } : + { dateConversion(new Date().toISOString()) } + } +

    +
    • + )) + : +
      + Wallet details are not avilable. Need to create wallet. +
    + + } +
+
: +
+ +
+ } +
+ { + connectionInvitation + &&
+
+
+ +
+ +
+
+ } + +
+ ); +} + + +export default OrgWalletDetails diff --git a/src/components/publicProfile/ProfileDesign.astro b/src/components/publicProfile/ProfileDesign.astro deleted file mode 100644 index 21f4038eb..000000000 --- a/src/components/publicProfile/ProfileDesign.astro +++ /dev/null @@ -1,29 +0,0 @@ ---- -const {orgData} = Astro.props -import CustomAvatar from "../../components/Avatar" ---- - - -
-
-
- - {orgData?.logoUrl ? ( - - ) : ( - - )} - -

{orgData?.name}

-
- {orgData?.website && - - {orgData?.website} - } -
-

{orgData?.description}

-
-
-
diff --git a/src/components/publicProfile/ProfilesDesign.tsx b/src/components/publicProfile/ProfilesDesign.tsx new file mode 100644 index 000000000..ad4b346e6 --- /dev/null +++ b/src/components/publicProfile/ProfilesDesign.tsx @@ -0,0 +1,37 @@ +import React from "react" +import CustomAvatar from "../../components/Avatar" +import { OrgDataInterface } from "../organization/interfaces" + + +const ProfilesDesign = ({ orgData }: OrgDataInterface) => { + + return ( + <> +
+
+
+ + {orgData?.logoUrl ? ( + + ) : ( + + )} + +

{orgData?.name}

+
+ {orgData?.website && + <> {orgData?.website} + } +
+

{orgData?.description}

+
+
+
+ + ) + +} + +export default ProfilesDesign \ No newline at end of file diff --git a/src/components/publicProfile/WalletDetailQRLayout.astro b/src/components/publicProfile/WalletDetailQRLayout.astro deleted file mode 100644 index c44893c49..000000000 --- a/src/components/publicProfile/WalletDetailQRLayout.astro +++ /dev/null @@ -1,95 +0,0 @@ ---- -import CustomQRCode from "../../commonComponents/QRcode"; -import { EmptyListMessage } from "../EmptyListComponent"; -const {orgData} = Astro.props -interface UserObject { - orgDid:string - ledgers:{ - name:string - networkType:string - } - networkType:string - walletName:string - createDateTime:string -} ---- - -
-
-

Wallet Details

- - { orgData?.org_agents.length > 0 ? -
-
    - {orgData?.org_agents ? - orgData?.org_agents?.map((agentData:UserObject) => ( -
  • - DID - : - {agentData?.orgDid} - -
    • -
  • - Ledger - : - {agentData?.ledgers?.name} -
    • -
  • - Network - : - {agentData?.ledgers?.networkType} -
    • -
  • - WalletName - : - {agentData?.walletName} -
    • -
  • - CreationDate - : - {agentData?.createDateTime} -
    • - )) - : -
      - Wallet details are not avilable. Need to create wallet. -
    - - } -
-
: -
- -
- } -
-{orgData?.org_agents.length > 0 ? -
-
- { orgData?.org_agents && -
- -
- } -
-
- : - '' - } -
- - diff --git a/src/config/apiRoutes.ts b/src/config/apiRoutes.ts index a58a16acc..7450b6552 100644 --- a/src/config/apiRoutes.ts +++ b/src/config/apiRoutes.ts @@ -66,6 +66,7 @@ export const apiRoutes = { }, Public: { organizations: '/orgs/public-profile', + organizationDetails: '/orgs/public-profiles', }, Ecosystem: { root: '/ecosystem', diff --git a/src/pages/org/[org].astro b/src/pages/org/[org].astro index 615e3c04e..396b8dbfa 100644 --- a/src/pages/org/[org].astro +++ b/src/pages/org/[org].astro @@ -1,29 +1,14 @@ --- import { pathRoutes } from '../../config/pathRoutes'; -import ProfileDesign from '../../components/publicProfile/ProfileDesign.astro'; -import WalletDetailQRLayout from '../../components/publicProfile/WalletDetailQRLayout.astro'; -import OrgUserInfoLayout from '../../components/publicProfile/OrgUserInfoLayout.astro'; +import LayoutCommon from "../../app/LayoutCommon.astro"; -const { org } = Astro.params; -const baseUrl = process.env.PUBLIC_BASE_URL || import.meta.env.PUBLIC_BASE_URL -const response = await fetch( - `${baseUrl}/orgs/public-profiles/${org}`, -); -const data = await response?.json(); -const orgData = data?.data; -const orgUsersFilterByRole = orgData?.userOrgRoles?.filter( - (users: { orgRole: {name:string}; }) => { - return users?.orgRole.name === "owner" - }, -); +import PublicOrganizationDetails from '../../components/organization/PublicOrganizationDetails'; -const orgUsersData = orgUsersFilterByRole?.map( - (users: { user: { firstName: string } }) => { - return users?.user; - }, -); +const { org } = Astro.params; --- + +
@@ -43,17 +28,9 @@ const orgUsersData = orgUsersFilterByRole?.map(
-
-
- -
+ { + org && + } -
- -
-

Users

- -
-
-
+