From a330351b70b62e9701d194faf56d729191d84a53 Mon Sep 17 00:00:00 2001
From: George J Padayatti <george.padayatti@igrant.io>
Date: Tue, 9 Apr 2024 01:46:55 +0530
Subject: [PATCH] Fix: Display added credential as card

Signed-off-by: George J Padayatti <george.padayatti@igrant.io>
---
 src/component/Drawer/style.scss               |  2 +-
 .../OrgDetailsContainer.tsx                   |  4 +-
 src/container/AddCredential/Confirm.tsx       |  7 +-
 .../dataAttributeCardCredentials.tsx          | 64 +++++++++++++++++++
 src/container/AddCredential/style.scss        |  3 +-
 5 files changed, 74 insertions(+), 6 deletions(-)
 create mode 100644 src/container/AddCredential/dataAttributeCardCredentials.tsx

diff --git a/src/component/Drawer/style.scss b/src/component/Drawer/style.scss
index 23d1a88..d37fab7 100644
--- a/src/component/Drawer/style.scss
+++ b/src/component/Drawer/style.scss
@@ -9,7 +9,7 @@
     height: 100%;
 
     .businessInfo {
-        padding: 10px 0;
+        padding: 10px;
     }
 
     .walletContainer {
diff --git a/src/component/OrganisationDetails/OrgDetailsContainer.tsx b/src/component/OrganisationDetails/OrgDetailsContainer.tsx
index a894e10..cc57dfd 100644
--- a/src/component/OrganisationDetails/OrgDetailsContainer.tsx
+++ b/src/component/OrganisationDetails/OrgDetailsContainer.tsx
@@ -82,10 +82,10 @@ const OrganisationDetailsContainer = (props: Props) => {
     (state) => state?.gettingStart?.data
   );
   
-  const isVerify = verifyConnectionObj?.verification?.presentationState == 'verified';
+  const isVerify = verifyConnectionObj?.verification?.presentationState === 'verified';
 
   const callRightSideDrawer = () => {
-    isVerify && setOpenRightSideDrawer(!openRightSideDrawer)
+    setOpenRightSideDrawer(!openRightSideDrawer)
 }
 
 const handleChange = (e) => {
diff --git a/src/container/AddCredential/Confirm.tsx b/src/container/AddCredential/Confirm.tsx
index 03f0aad..3a4ed66 100644
--- a/src/container/AddCredential/Confirm.tsx
+++ b/src/container/AddCredential/Confirm.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAppSelector } from '../../customHooks';
 import { defaultCoverImage, defaultLogoImg } from '../../utils/defalultImages';
+import { DataAttributeCardForDDA } from './dataAttributeCardCredentials';
 
 
 const ConfirmComponent = ({ callRightSideDrawer }) => {
@@ -78,13 +79,15 @@ const ConfirmComponent = ({ callRightSideDrawer }) => {
                                 {t('common.certificateOfRegistration')}
                             </Typography>
 
+                            <DataAttributeCardForDDA  selectedData={tableData}/>
+
                             <Box className='confirmTable'>
-                                <BasicTable 
+                                {/* <BasicTable 
                                     isColumnWise={true} 
                                     tableData={tableData}
                                     customTableHeadClass={"mui-table-bordered"}
                                     customTableBodyClass={"mui-table-bordered"}
-                                />
+                                /> */}
                             </Box>
                         </Box>
                     </Box>
diff --git a/src/container/AddCredential/dataAttributeCardCredentials.tsx b/src/container/AddCredential/dataAttributeCardCredentials.tsx
new file mode 100644
index 0000000..1ca27ab
--- /dev/null
+++ b/src/container/AddCredential/dataAttributeCardCredentials.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+import { Box, Typography } from "@mui/material";
+
+const titleAttrRestrictionStyle = (isLastAttribute: boolean) => ({
+  fontWeight: "normal",
+  margin: "10px 10px 5px 10px",
+  borderBottom: isLastAttribute ? "none" : "solid 1px #dee2e6",
+  lineHeight: "1.5rem",
+});
+
+const tableAttrAdditionalInfoStyle = {
+  border: 0,
+  width: "100%",
+  maxWidth: "100%",
+  marginBottom: "0rem",
+  backgroundColor: "#FFFF",
+};
+
+interface Props {
+  selectedData: any;
+}
+
+export const DataAttributeCardForDDA = (props: Props) => {
+  const { selectedData } = props;
+
+  return (
+    <Box
+      style={{
+        marginTop: "10px",
+        border: "1px solid #DFE0E1",
+        borderRadius: 5,
+        paddingTop: 10,
+        paddingBottom: 10,
+      }}
+    >
+      {selectedData?.map((attribute: any, index: number) => {
+        const isLastAttribute = index === (selectedData?.length || 0) - 1;
+
+        return (
+          <Box key={index} style={titleAttrRestrictionStyle(isLastAttribute)}>
+            <table style={tableAttrAdditionalInfoStyle}>
+              <tbody>
+                <tr
+                  style={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                  }}
+                >
+                  <Typography variant="subtitle2">
+                    {attribute.attribute}
+                  </Typography>
+                  <Typography variant="subtitle2">
+                    {attribute.value}
+                  </Typography>
+                </tr>
+              </tbody>
+            </table>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};
diff --git a/src/container/AddCredential/style.scss b/src/container/AddCredential/style.scss
index 4d559bb..df7b2a0 100644
--- a/src/container/AddCredential/style.scss
+++ b/src/container/AddCredential/style.scss
@@ -1,5 +1,6 @@
 .drawerContent {
     position: relative;
+    overflow: auto;
     .MuiFormLabel-root, .MuiTypography-root {
         font-size: 14px;
     }
@@ -117,6 +118,6 @@
     }
 
     .modal-footer {
-        width: 480px;
+        // width: 480px;
     }
 }
\ No newline at end of file