Merge pull request #307 from credebl/refactor-public-profile

Refactor public profile

src/api/organization.ts

@@ -1,4 +1,4 @@
-import { axiosGet, axiosPost, axiosPut } from "../services/apiRequests"
+import { axiosGet, axiosPost, axiosPublicOrganisationGet, axiosPut } from "../services/apiRequests"
 
 import { apiRoutes } from "../config/apiRoutes";
 import { getFromLocalStorage } from "./Auth";
@@ -305,23 +305,6 @@ export const createConnection = async (orgName: string) => {
 
 // public profile
 
-export const getPublicUsers = async (pageNumber: number, pageSize: number, search :string) => {
-
-	const url = `${apiRoutes.public.users}?pageNumber=${pageNumber}&pageSize=${pageSize}&search=${search}`
-
-	const axiosPayload = {
-			url,
-	}
-
-	try {
-			return await axiosPublicUserGet(axiosPayload);
-	}
-	catch (error) {
-			const err = error as Error
-			return err?.message
-	}
-}
-
 export const getPublicOrganizations = async (pageNumber: number, pageSize: number, search :string) => {
 
 	const url = `${apiRoutes.public.organizations}?pageNumber=${pageNumber}&pageSize=${pageSize}&search=${search}`
@@ -337,7 +320,7 @@ export const getPublicOrganizations = async (pageNumber: number, pageSize: numbe
 	}
 
 	try {
-			return await axiosGet(axiosPayload);
+			return await axiosPublicOrganisationGet(axiosPayload);
 	}
 	catch (error) {
 			const err = error as Error

src/components/Resources/Schema/SchemasList.tsx

@@ -17,6 +17,7 @@ import type { SchemaDetails } from '../../Verification/interface';
 import SearchInput from '../../SearchInput';
 import { getFromLocalStorage } from '../../../api/Auth';
 import { pathRoutes } from '../../../config/pathRoutes';
+import { getOrganizationById } from '../../../api/organization';
 
 const SchemaList = (props: { schemaSelectionCallback: (schemaId: string, schemaDetails: SchemaDetails) => void; }) => {
 	const [schemaList, setSchemaList] = useState([])
@@ -33,6 +34,7 @@ const SchemaList = (props: { schemaSelectionCallback: (schemaId: string, schemaD
 		allSearch: ""
 
 	})
+  const [walletStatus, setWalletStatus]=useState(false)
 	const [totalItem, setTotalItem] = useState(0)
 	const getSchemaList = async (schemaListAPIParameter: GetAllSchemaListParameter, flag: boolean) => {
 		try {
@@ -122,6 +124,23 @@ const SchemaList = (props: { schemaSelectionCallback: (schemaId: string, schemaD
 		}
 	};
 
+	const fetchOrganizationDetails = async () => {
+		setLoading(true)
+		const orgId = await getFromLocalStorage(storageKeys.ORG_ID)
+		const response = await getOrganizationById(orgId);
+		const { data } = response as AxiosResponse
+		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+				if (data?.data?.org_agents && data?.data?.org_agents?.length > 0) {
+						setWalletStatus(true)
+				}
+		}
+		setLoading(false)
+}
+
+useEffect(()=>{
+	fetchOrganizationDetails()
+},[])
+
 	return (
 		<div className="px-4 pt-6">
 			<div className="mb-4 col-span-full xl:mb-2">
@@ -154,7 +173,7 @@ const SchemaList = (props: { schemaSelectionCallback: (schemaId: string, schemaD
 							</select>
 						</div>
 						<div className='flex space-x-2'>							
-							<RoleViewButton
+							{walletStatus ? <RoleViewButton
 								buttonTitle='Create'
 								feature={Features.CRETAE_SCHEMA}
 								svgComponent={
@@ -168,6 +187,21 @@ const SchemaList = (props: { schemaSelectionCallback: (schemaId: string, schemaD
 									window.location.href = `${pathRoutes.organizations.createSchema}?OrgId=${orgId}`
 								}}
 							/>
+							:
+							<RoleViewButton
+							buttonTitle='Create'
+							feature={Features.CRETAE_SCHEMA}
+							svgComponent={
+								<div className='pr-3'>
+									<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24">
+										<path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
+									</svg>
+								</div>
+							}
+							onClickEvent={() => {
+								window.location.href = `${pathRoutes.organizations.dashboard}?OrgId=${orgId}`
+							}}
+						/>}
 						</div>
 					</div>
 				</div>
@@ -214,7 +248,10 @@ const SchemaList = (props: { schemaSelectionCallback: (schemaId: string, schemaD
 									totalPages={Math.ceil(totalItem / schemaListAPIParameter?.itemPerPage)}
 								/>)}
 							</div>
-						</div>) : (<EmptyListMessage
+						</div>) : (
+						<div>
+						{walletStatus ?
+						 <EmptyListMessage
 							message={'No Schemas'}
 							description={'Get started by creating a new Schema'}
 							buttonContent={'Create Schema'}
@@ -224,7 +261,22 @@ const SchemaList = (props: { schemaSelectionCallback: (schemaId: string, schemaD
 							onClick={() => {
 								window.location.href = `${pathRoutes.organizations.createSchema}?OrgId=${orgId}`
 							}}
-						/>)
+						/> 
+						:
+						<EmptyListMessage
+						message={'No Wallet'}
+						description={'Get started by creating a Wallet'}
+						buttonContent={'Create Wallet'}
+						svgComponent={<svg className='pr-2 mr-1' xmlns="http://www.w3.org/2000/svg" width="24" height="15" fill="none" viewBox="0 0 24 24">
+							<path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
+						</svg>}
+						onClick={() => {
+							window.location.href = `${pathRoutes.organizations.dashboard}?OrgId=${orgId}`
+						}}
+					/>}
+
+						</div>
+						)
 				}
 			</div>
 		</div>

src/components/Verification/ProofRequestPopup.tsx

@@ -91,7 +91,7 @@ const ProofRequest = (props: {
 							<span className="sr-only">Close modal</span>
 						</button>
 						<div className="sm:p-2 lg:p-6 m-4">
-							<p className="text-xl text-gray-700 pb-2 dark:bg-gray-800 font-semibold flex flex-start">
+							<p className="text-xl text-gray-700 pb-2 dark:bg-gray-800 dark:text-white font-semibold flex flex-start">
 								{' '}
 								Verification Details
 							</p>

src/components/Verification/SchemaCredDefDetails.tsx

@@ -7,16 +7,16 @@ const SchemaCredDefDetails = ({ schemaCredDefList }: SchemaCredDefProps) => {
 
     return (
         <>
-            {schemaCredDefList.map((item, index) => (
+            {schemaCredDefList.map((item) => (
                 <div key={Object.values(item)[2]} className="flex justify-start ml-2 w-full mt-6">
                     <div className="w-full">
                         <div className="flex flex-start mb-2 w-full ">
                             <div className=" w-3/12 font-semibold text-primary-700 dark:bg-gray-800 m-1 p-1 flex justify-start items-center">
                                 Schema Id
                             </div>
                             <div className=" flex items-center p-1 m-1 ">:</div>{' '}
-                            <div className="w-9/12 m-1 flex justify-start truncate text-gray-600 dark:text-white items-center cursor-pointer overflow:hidden overflow:ellipsis"
-                                 style={{overflow: 'auto'}}>
+                            <div className="w-9/12 m-1 flex justify-start text-gray-600 dark:text-white items-center cursor-pointer overflow-auto"
+                              >
                                 {Object.values(item)[2]}
                             </div>
                         </div>
@@ -29,9 +29,9 @@ const SchemaCredDefDetails = ({ schemaCredDefList }: SchemaCredDefProps) => {
                                     {' '}
                                     :
                                 </div>{' '}
-                                <div className="w-9/12 m-1 flex justify-start truncate text-gray-600 dark:text-white items-center">
+                                <div className="w-9/12 m-1 flex justify-start text-gray-600 dark:text-white items-center cursor-pointer overflow-auto">
                                     {Object.values(item)[1]
-                                        ? Object.values(item)[1].slice(0, 36)
+                                        ? Object.values(item)[1]
                                         : ''}
                                 </div>
                             </div>

src/components/Verification/Verification.tsx

@@ -28,7 +28,7 @@ interface VerifyCredentialPayload {
 	connectionId: string;
 	attributes: Array<{
 		attributeName: string;
-		credDefId: string;
+		credDefId?: string  ;
 	}>;
 	comment: string;
 	orgId: number;
@@ -56,7 +56,7 @@ const VerificationCred = () => {
 				const schemaAttributes = await getFromLocalStorage(storageKeys.SCHEMA_ATTR)
 				const parsedSchemaDetails = JSON.parse(schemaAttributes) || [];
 				const attributes = parsedSchemaDetails.attribute.map((ele: any) => {
-					const attributes = ele.attributeName ? ele.attributeName : 'Not available';
+					const attributes = ele.displayName ? ele.displayName : 'Not available';
 					return {
 						data: [
 							{

src/components/organization/EditOrgdetailsModal.tsx

@@ -223,8 +223,8 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps) => {
                                 .trim(),
                             description: yup
                                 .string()
-                                .min(2, 'Organization description must be at least 2 characters')
-                                .max(255, 'Organization description must be at most 255 characters')
+                                .min(2, 'Description must be at least 2 characters')
+                                .max(255, 'Description must be at most 255 characters')
                                 .required('Description is required')
                         })}
                     validateOnBlur

src/components/organization/WalletSpinup.tsx

@@ -305,7 +305,9 @@ const WalletSpinup = (props: {
 				.matches(
 						/^[A-Za-z0-9-][^ !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]*$/,
 						'Wallet label must be alphanumeric only',
-				),
+				)
+				.min(2, 'Wallet label must be at least 2 characters')
+				.max(25, 'Wallet label must be at most 25 characters'),
 			})}
 			validateOnBlur
 			validateOnChange

src/components/publicProfile/OrgUserInfoLayout.astro

@@ -1,12 +1,14 @@
 ---
 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 &&
@@ -19,46 +21,26 @@ const { orgUsersData } = Astro.props;
 				orgUsersData?.map((orgUser: UserDetails) => {
 					return (
 						<>
-							<div class=" flex">
+							<div class=" flex items-center">
 							{orgUser.firstName &&
-									<svg
-									class="w-6 h-6 text-gray-800 dark:text-white"
-									aria-hidden="true"
-									xmlns="http://www.w3.org/2000/svg"
-									fill="none"
-									viewBox="0 0 20 20"
-								>
-									<path
-										stroke="currentColor"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M10 19a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 0a8.949 8.949 0 0 0 4.951-1.488A3.987 3.987 0 0 0 11 14H9a3.987 3.987 0 0 0-3.951 3.512A8.948 8.948 0 0 0 10 19Zm3-11a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-									/>
-								</svg>
-
-
-
-
-
-
-
-
-
-
-
-
-
 
+      <span>
+         {	orgUser?.profileImg ? (
+					<CustomAvatar className="mb-2 rounded-full shadow-lg" size="30" src={orgUser?.profileImg} client:load />
+				  ) : (
+					<CustomAvatar className="mb-2 rounded-full shadow-lg" size="30" name={orgUser?.firstName} client:load />
+				 )}
+	    </span>
 								<div class="font-bold text-xl pl-2 mb-2">
 									{orgUser.firstName} {orgUser.lastName}
-								</div>}
+								</div>
+							}
 							</div>
 
-							<div class="flex">
+							<div class="flex items-center">
 							{orgUser.email &&	
 								<svg
-									class="w-6 h-6 text-gray-800 dark:text-white m-0.5"
+									class="w-6 h-6 text-gray-800 dark:text-white m-1"
 									aria-hidden="true"
 									xmlns="http://www.w3.org/2000/svg"
 									fill="none"
@@ -72,7 +54,7 @@ const { orgUsersData } = Astro.props;
 										d="m19 2-8.4 7.05a1 1 0 0 1-1.2 0L1 2m18 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1m18 0v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2"
 									/>
 								</svg>
-								<p class="text-gray-700 text-xl mb-1.5 pl-1">{orgUser.email}</p>
+								<p class="text-gray-700 text-xl mb-1.5 pl-2">{orgUser.email}</p>
 								}
 							</div>
 						</>

src/components/publicProfile/OrganisationPublicProfile.tsx

@@ -5,7 +5,7 @@ import { getPublicOrganizations } from '../../api/organization';
 import type { AxiosResponse } from 'axios';
 import { apiStatusCodes } from '../../config/CommonConstant';
 import SearchInput from '../SearchInput';
-import { Button, Card, Pagination } from 'flowbite-react';
+import { Card, Pagination } from 'flowbite-react';
 import CustomSpinner from '../CustomSpinner';
 import CustomAvatar from '../Avatar';
 import { EmptyListMessage } from '../EmptyListComponent';
@@ -132,14 +132,16 @@ const OrganisationPublicProfile = () => {
 						)}
 					</div>
 				) : (
-					organizationsList && (
+					<div className="flex justify-center items-center">
+					{organizationsList && (
 						<div className="flex justify-center items-center">
 							<EmptyListMessage
 								message={'No Matching Organization'}
 								description={''}
 							/>
 						</div>
-					)
+					)}
+					</div>
 				)}
 
 				<div className="flex items-center justify-end mb-4">

src/components/publicProfile/ProfileDesign.astro

@@ -20,7 +20,7 @@ import CustomAvatar from "../../components/Avatar"
 					<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 19">
 						<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.013 7.962a3.519 3.519 0 0 0-4.975 0l-3.554 3.554a3.518 3.518 0 0 0 4.975 4.975l.461-.46m-.461-4.515a3.518 3.518 0 0 0 4.975 0l3.553-3.554a3.518 3.518 0 0 0-4.974-4.975L10.3 3.7"/>
 					</svg>
-				<a href={orgData?.website}>	<span class="text-2xl text-gray-500 dark:text-gray-400 pl-2 ">{orgData?.website}</span></a>
+				<a href={orgData?.website} target="_blank">	<span class="text-2xl text-gray-500 dark:text-gray-400 pl-2 ">{orgData?.website}</span></a>
 					 }
 				</div>
 				<p class="pt-2 p-4 flex items-center justify-center flex-wrap">{orgData?.description}</p>

src/components/publicProfile/PublicProfiles.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import PublicUserList from './PublicUserList';
 import OrganisationPublicProfile from './OrganisationPublicProfile';
 
 const PublicProfile = () => {
@@ -27,19 +26,6 @@ const PublicProfile = () => {
 								Organisations
 							</button>
 						</li>
-						<li className="mr-2" role="presentation">
-							<button
-								className="text-xl inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
-								id="dashboard-tab"
-								data-tabs-target="#dashboard"
-								type="button"
-								role="tab"
-								aria-controls="dashboard"
-								aria-selected="false"
-							>
-								Users
-							</button>
-						</li>
 					</ul>
 				</div>
 				<div id="myTabContent">
@@ -51,14 +37,6 @@ const PublicProfile = () => {
 					>
 						<OrganisationPublicProfile />
 					</div>
-					<div
-						className="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800"
-						id="dashboard"
-						role="tabpanel"
-						aria-labelledby="dashboard-tab"
-					>
-						<PublicUserList />
-					</div>
 				</div>
 			</div>
 		</div>

src/config/apiRoutes.ts

@@ -67,7 +67,6 @@ export const apiRoutes = {
 			getAllSchemaFromPlatform: '/platform/schemas',
 	},
 		public:{
-			organizations: '/organization/public-profiles',
-			users:'/users/public-profiles',
+			organizations: '/orgs/public-profile',
 		}
 }