fix: bugs (#744)

* refactor: parameter name Signed-off-by: bhavanakarwade <[email protected]> * refactor: added query parameter Signed-off-by: bhavanakarwade <[email protected]> * fix: remove unnecessary code Signed-off-by: bhavanakarwade <[email protected]> * fix: query param issue Signed-off-by: bhavanakarwade <[email protected]> * fix: css issues Signed-off-by: bhavanakarwade <[email protected]> * fix: create did button restrictions Signed-off-by: bhavanakarwade <[email protected]> * fix: popup card fixes Signed-off-by: bhavanakarwade <[email protected]> * fix: remove click on card Signed-off-by: bhavanakarwade <[email protected]> --------- Signed-off-by: bhavanakarwade <[email protected]>
credebl · Aug 28, 2024 · 58a7fec · 58a7fec
1 parent a27d698
commit 58a7fec
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 65 deletions.
diff --git a/src/commonComponents/SchemaCard.tsx b/src/commonComponents/SchemaCard.tsx
@@ -68,7 +68,7 @@ const handleCheckboxChange = (checked: boolean, schemaData?: ISchemaData) => {
   return (
     <Card onClick={() => {
 
-      if (!props.w3cSchema) {
+      if (!props.w3cSchema && !props.isVerificationUsingEmail) {
         props.onClickCallback(props.schemaId, props.attributes, props.issuerDid, props.created)
       }
 

diff --git a/src/components/Issuance/EmailIssuance.tsx b/src/components/Issuance/EmailIssuance.tsx
@@ -210,8 +210,8 @@ const EmailIssuance = () => {
 				transformedData.credentialOffer.push(transformedEntry);
 			});
 			transformedData.credentialDefinitionId = credDefId;
+			transformedData.isReuseConnection = true;
 
-
     } else if (schemaType=== SchemaTypes.schema_W3C) {
 
         existingData.formData.forEach((entry: { email: string; credentialData: IEmailCredentialData; attributes:IIssueAttributes[] }) => {
@@ -253,6 +253,7 @@ const EmailIssuance = () => {
         });
 
         transformedData.protocolVersion = "v2";
+		transformedData.isReuseConnection = true;
         transformedData.credentialType = CredentialType.JSONLD;
     }
 

diff --git a/src/components/Issuance/interface.ts b/src/components/Issuance/interface.ts
@@ -187,5 +187,6 @@ export interface ICredentialOffer {
 	credentialOffer: ICredentialOffer[];
 	credentialDefinitionId?: string;
 	protocolVersion?: string;
+	isReuseConnection?: boolean;
 	credentialType?: string;
   }
diff --git a/src/components/Verification/AttributesListData.tsx b/src/components/Verification/AttributesListData.tsx
@@ -2,45 +2,101 @@ import { Card } from 'flowbite-react';
 import CopyDid from '../../commonComponents/CopyDid';
 
 interface AttributesListProps {
-    attributeDataList: { [key: string]: any }[] 
+	attributeDataList: { [key: string]: any }[];
 }
 
+const groupAndMergeAttributes = (data: { [key: string]: any }[], key: string): { [key: string]: any }[] => {
+	const grouped = data.reduce((result, item) => {
+		const groupKey = item[key] || item['schemaId'];
+		if (!result[groupKey]) {
+			result[groupKey] = {};
+		}
+		// Merge attributes into a single object
+		result[groupKey] = { ...result[groupKey], ...item };
+		return result;
+	}, {} as { [key: string]: any });
+
+	// Convert the grouped object back to an array
+	return Object.values(grouped);
+};
+
 const AttributesListData = ({ attributeDataList }: AttributesListProps): JSX.Element => {
 
-    return (
-        <>
-            {attributeDataList?.map((item, index) => (
-                <Card key={index} className="mb-4">
-                    <div className="flex flex-col justify-start gap-2 p-4">
-					<div className="flex justify-start text-xl font-semibold text-gray-900 dark:text-white mb-2">
-                            {`Credential ${index + 1}`}
-                        </div>
+	const mergedData = groupAndMergeAttributes(attributeDataList, 'credDefId');
 
+	return (
+		<>
+			{mergedData?.map((item, index) => (
+				<Card key={index} className="mb-4">
+					<div className="flex flex-col justify-start gap-2 p-4">
+						<div className="flex justify-start text-xl font-semibold text-gray-900 dark:text-white mb-2">
+							{`Credential ${index + 1}`}
+						</div>
 
-						{Object.entries(item).map(([key, value], idx) => (
-							<div key={idx} className="flex w-full text-lg items-center">
-								<div className="w-3/12 font-semibold text-primary-700 dark:bg-gray-800 m-1 p-1 flex justify-start items-center text-start">
-									{key}
+						<div className="flex h-full flex-col justify-center gap-0 sm:p-0 mb-4">
+							<div className="flex border-b">
+								<div className="w-5/12 font-semibold flex truncate md:pl-1 sm:mr-8 md:mr-0 text-primary-700 dark:bg-gray-800 text-lg">
+									Attributes
+								</div>
+								<div className="w-1/12 font-semibold flex justify-start truncate md:pl-1 sm:mr-8 md:mr-0 text-primary-700 dark:bg-gray-800 text-xl"></div>
+								<div className="w-6/12 font-semibold flex truncate sm:pl-4 text-primary-700 dark:bg-gray-800 text-lg">
+									{' '}
+									Values
 								</div>
-								<div className="flex items-center p-1 m-1">
-									:
+							</div>
+
+							{Object.entries(item)
+								.filter(([key]) => key !== 'credDefId' && key !== 'schemaId')
+								.map(([key, value], idx) => (
+									<div key={idx} className="flex w-full text-lg items-center">
+										<div className="w-3/12 font-semibold text-primary-700 dark:bg-gray-800 m-1 p-1 flex justify-start items-center text-start">
+
+											{key}
+										</div>
+										<div className="w-1/12 m-1 p-1 flex items-center text-gray-700 dark:text-white text-lg">
+											:
+										</div>
+										<div className="w-9/12 m-1 text-start text-gray-600 dark:text-white items-center cursor-pointer overflow-auto">
+											{value}
+										</div>
+									</div>
+								))}
+						</div>
+
+						<div className="">
+							<div className="flex w-full text-lg items-center">
+								<div className="w-3/12 font-semibold text-primary-700 dark:bg-gray-800 m-1 p-1 flex justify-start items-center text-start">
+									schemaId
 								</div>
+								<div className="flex items-center p-1 m-1">:</div>
 								<div className="w-9/12 m-1 text-start text-gray-600 dark:text-white items-center cursor-pointer overflow-auto">
-									{key === 'schemaId' || key === 'credDefId' ? (
+									<div className="flex items-center">
+										<CopyDid value={item.schemaId} className="truncate font-courier mt-2" />
+									</div>
+								</div>
+							</div>
+						</div>
+
+						{item.credDefId && (
+							<div className="mb-4">
+								<div className="flex w-full text-lg items-center">
+									<div className="w-3/12 font-semibold text-primary-700 dark:bg-gray-800 m-1 p-1 flex justify-start items-center text-start">
+										credDefId
+									</div>
+									<div className="flex items-center p-1 m-1">:</div>
+									<div className="w-9/12 m-1 text-start text-gray-600 dark:text-white items-center cursor-pointer overflow-auto">
 										<div className="flex items-center">
-											<CopyDid value={value} className="truncate font-courier mt-2" />
+											<CopyDid value={item.credDefId} className="truncate font-courier mt-2" />
 										</div>
-									) : (
-										<span className="truncate font-courier">{value}</span>
-									)}
+									</div>
 								</div>
 							</div>
-						))}
+						)}
 					</div>
 				</Card>
 			))}
-        </>
-    );
-}
+		</>
+	);
+};
 
 export default AttributesListData;
diff --git a/src/components/Verification/EmailCredDefSelection.tsx b/src/components/Verification/EmailCredDefSelection.tsx
@@ -110,43 +110,42 @@ const EmailCredDefSelection = () => {
     };
 
     const selectConnection = async (credDefId: string, checked: boolean) => {
-        if (credDefId) {
-            const getRawCredDefs = await getFromLocalStorage(storageKeys.SCHEMA_CRED_DEFS);
-            const parsedRawCredDefs = JSON.parse(getRawCredDefs);
-
-            const selectedCredDef = parsedRawCredDefs.find((credDef: CredDefData) => credDef.credentialDefinitionId === credDefId);
-
-            if (selectedCredDef) {
-                setSelectedCredDefs((prevSelected) => {
+        if (!credDefId) return;
+
+        const getRawCredDefs = await getFromLocalStorage(storageKeys.SCHEMA_CRED_DEFS);
+        const parsedRawCredDefs = JSON.parse(getRawCredDefs);
+
+        const selectedCredDef = parsedRawCredDefs.find(
+            (credDef: CredDefData) => credDef.credentialDefinitionId === credDefId
+        );
+
+        if (selectedCredDef) {
+            setSelectedCredDefs((prevSelected) => {
+                if (checked) {
                     const isAlreadySelected = prevSelected.some(
                         (credDef) => credDef.credentialDefinitionId === selectedCredDef.credentialDefinitionId
                     );
-
+    
                     if (!isAlreadySelected) {
                         const newSelected = [...prevSelected, selectedCredDef];
-
                         setToLocalStorage(storageKeys.CRED_DEF_DATA, JSON.stringify(newSelected));
-
                         return newSelected;
                     }
-                    return prevSelected;
-                });
-            }
-        } 
-        else if (!checked) {
-            setSelectedCredDefs((prevSelected) => {
-                const newSelected = prevSelected.filter(
-                    (credDef) => credDef.credentialDefinitionId !== credDefId
-                );
-
-                setToLocalStorage(storageKeys.CRED_DEF_DATA, JSON.stringify(newSelected));
-
-                return newSelected;
+                } else {
+                    const newSelected = prevSelected.filter(
+                        (credDef) => credDef.credentialDefinitionId !== selectedCredDef.credentialDefinitionId
+                    );
+                    setToLocalStorage(storageKeys.CRED_DEF_DATA, JSON.stringify(newSelected));
+                    return newSelected;
+                }
+
+                return prevSelected;
             });
         }
     };
 
 
+
     return (
         <div className="px-4 pt-2">
             <div className="mb-4 col-span-full xl:mb-2">

diff --git a/src/components/Verification/ProofRequestPopup.tsx b/src/components/Verification/ProofRequestPopup.tsx
@@ -87,21 +87,7 @@ const ProofRequest = (props: IProofRrquestDetails) => {
 								{' '}
 								Verification Details
 							</p>
-							{props.verifyLoading ? (
-								<div className="flex items-center justify-center m-4">
-									<CustomSpinner />
-								</div>
-							) : (
-								<div className=" text-gray-500 dark:text-gray-300 w-full">
-									<div className="mt-1 ">
-
-											<AttributesListData attributeDataList={props?.userData} />
-
-									</div>
-								</div>
-							)}
-						</div>
-						{succesMsg && (
+							{succesMsg && (
 							<div
 								className="p-4 mb-4 text-sm text-green-800 rounded-lg bg-green-100 border-green-500 dark:bg-green-200 dark:text-green-800"
 								role="alert"
@@ -118,6 +104,20 @@ const ProofRequest = (props: IProofRrquestDetails) => {
 							</div>
 						)}
 
+							{props.verifyLoading ? (
+								<div className="flex items-center justify-center m-4">
+									<CustomSpinner />
+								</div>
+							) : (
+								<div className=" text-gray-500 dark:text-gray-300 w-full">
+									<div className="mt-1 ">
+
+											<AttributesListData attributeDataList={props?.userData} />
+
+									</div>
+								</div>
+							)}
+						</div>
 						<div className="flex justify-center items-center space-x-4">
 							<button
 								onClick={() => {