feat(company certificate): api integration (#528)

CHANGELOG.md

@@ -8,6 +8,8 @@
   - added button in overlay to logout deom portal
 - Dataspace
   - Updated dataspace provider links with quick links
+- Company Certificate
+  - Connect listing page, upload certificate and details page to back end api
 - Delete ownuser Redirect URL
   - fixed logout redirect url issue
 

src/assets/locales/de/main.json

@@ -1722,8 +1722,10 @@
         "all": "All"
       },
       "sort": {
-        "name": "Name",
-        "date": "Date"
+        "nameasc": "Certificate Asc",
+        "namedsc": "Certificate Dsc",
+        "dateasc": "Expiry Date Asc",
+        "datedsc": "Expiry Date Dsc"
       },
       "details": {
         "type": "Type",

src/assets/locales/en/main.json

@@ -1663,8 +1663,10 @@
         "all": "All"
       },
       "sort": {
-        "name": "Name",
-        "date": "Date"
+        "nameasc": "Certificate Asc",
+        "namedsc": "Certificate Dsc",
+        "dateasc": "Expiry Date Asc",
+        "datedsc": "Expiry Date Dsc"
       },
       "details": {
         "type": "Type",

src/components/overlays/CompanyCertificateDetails/DeleteCompanyCertificateConfirmationOverlay.tsx

@@ -32,8 +32,10 @@ import { useDeleteCompanyCertificateMutation } from 'features/companyCertificati
 
 export default function DeleteCompanyCertificateConfirmationOverlay({
   id,
+  title,
 }: {
   readonly id: string
+  readonly title: string
 }) {
   const { t } = useTranslation()
   const dispatch = useDispatch()
@@ -67,13 +69,18 @@ export default function DeleteCompanyCertificateConfirmationOverlay({
           },
         }}
       >
-        <DialogHeader title={t('content.companyCertificate.confirm.title')} />
+        <DialogHeader
+          title={t('content.companyCertificate.confirm.title').replace(
+            '{{name}}',
+            title
+          )}
+        />
         <DialogContent>
           {!success &&
             !error &&
             t('content.companyCertificate.confirm.description')}
           {success && t('content.companyCertificate.confirm.success')}
-          {error && t('content.companyCertificate.confirm.descerrorription')}
+          {error && t('content.companyCertificate.confirm.error')}
         </DialogContent>
         <DialogActions>
           <Button variant="outlined" onClick={close}>

src/components/overlays/CompanyCertificateDetails/index.tsx

@@ -29,9 +29,8 @@ import {
 import { closeOverlay, show } from 'features/control/overlay'
 import './style.scss'
 import {
-  type ComapnyCertificateData,
-  useFetchCertificatesQuery,
   useFetchDocumentQuery,
+  useFetchCompanyCertificateQuery,
 } from 'features/companyCertification/companyCertificateApiSlice'
 import { Box } from '@mui/material'
 import DeleteIcon from '@mui/icons-material/DeleteOutlineOutlined'
@@ -44,6 +43,9 @@ import {
 } from 'features/admin/applicationRequestApiSlice'
 import { useEffect, useState } from 'react'
 import { OVERLAYS } from 'types/Constants'
+import dayjs from 'dayjs'
+import LoadingProgress from 'components/shared/basic/LoadingProgress'
+import { useFetchOwnCompanyDetailsQuery } from 'features/admin/userApiSlice'
 
 export enum StatusTag {
   PENDING = 'Pending',
@@ -61,21 +63,20 @@ export default function CompanyCertificateDetails({
   const close = () => {
     dispatch(closeOverlay())
   }
+  const { data: document } = useFetchDocumentQuery(id)
+  const { data: companyDetails, isFetching } = useFetchOwnCompanyDetailsQuery()
+  const { data } = useFetchCompanyCertificateQuery(companyDetails?.bpn ?? '')
 
-  const { data } = useFetchCertificatesQuery()
-  const { data: document } = useFetchDocumentQuery(id ?? '')
-
-  const companyData = data?.content.filter((cert) => cert.documentId === id)
-  const [selected, setSelected] = useState<ComapnyCertificateData>()
+  const companyData = data?.filter((cert) => cert.documentId === id)
+  const selected = companyData?.[0]
   const [pdf, setPdf] = useState<string>()
 
-  if (companyData && companyData?.length > 0) {
-    setSelected(companyData[0])
-  }
-
   useEffect(() => {
-    //set file here
-    setPdf('')
+    if (document) {
+      const file = document.data
+      const fileURL = URL.createObjectURL(file)
+      setPdf(fileURL)
+    }
   }, [document])
 
   const flag = selected?.companyCertificateStatus === StatusTag.PENDING
@@ -101,20 +102,20 @@ export default function CompanyCertificateDetails({
   const button: ProgressButtonsType = {
     statusId,
     typeId: '',
-    backgroundColor: flag ? '#F5F9EE' : '#EAF1FE',
+    backgroundColor: flag ? '#EAF1FE' : '#F5F9EE',
     icon: flag ? (
-      <CheckCircleOutlineIcon
+      <PendingActionsIcon
         style={{
-          color: '#00AA55',
-          height: '30px',
+          color: '#0F71CB',
+          height: '20px',
           width: '20px',
         }}
       />
     ) : (
-      <PendingActionsIcon
+      <CheckCircleOutlineIcon
         style={{
-          color: '#0F71CB',
-          height: '20px',
+          color: '#00AA55',
+          height: '30px',
           width: '20px',
         }}
       />
@@ -123,9 +124,25 @@ export default function CompanyCertificateDetails({
       ? t('content.companyCertificate.details.fileUpload')
       : t('content.companyCertificate.details.verification'),
     statusTag: getButtonStatusTag(
-      flag ? ProgressStatus.DONE : ProgressStatus.IN_PROGRESS
+      flag ? ProgressStatus.IN_PROGRESS : ProgressStatus.DONE
     ),
-    statusLabel: flag ? StatusTag.COMPLETED : StatusTag.PENDING,
+    statusLabel: flag ? StatusTag.PENDING : StatusTag.COMPLETED,
+  }
+
+  const showLoader = () => {
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          alignContent: 'center',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '50px 0px',
+        }}
+      >
+        <LoadingProgress />
+      </Box>
+    )
   }
 
   return (
@@ -137,63 +154,65 @@ export default function CompanyCertificateDetails({
         },
       }}
     >
-      <DialogContent>
-        {selected ? (
-          <>
-            <Box className="box-container">
-              <Box className="header-container">
-                <Box className="flex-container">
-                  <Typography variant="label3">
-                    {t('content.companyCertificate.details.type')} :{' '}
-                    {selected.companyCertificateType}
-                  </Typography>
-                  <Typography variant="h5">{selected.documentId}</Typography>
-                  <Typography variant="label4">
-                    {t('content.companyCertificate.details.validtill')} :{' '}
-                    {selected.validTill}
-                  </Typography>
-                  <Typography variant="label4">
-                    {t('content.companyCertificate.details.status')} :{' '}
-                    {selected.companyCertificateStatus}
-                  </Typography>
-                </Box>
-                <Box>
-                  <Button
-                    startIcon={<DeleteIcon />}
-                    variant="outlined"
-                    size="small"
-                    onClick={() => {
-                      dispatch(closeOverlay())
-                      dispatch(
-                        show(OVERLAYS.COMPANY_CERTIFICATE_CONFIRM_DELETE, id)
+      {!isFetching && selected ? (
+        <DialogContent>
+          <Box className="box-container">
+            <Box className="header-container">
+              <Box className="flex-container">
+                <Typography variant="label3">
+                  {t('content.companyCertificate.details.type')} :{' '}
+                  {selected.companyCertificateType}
+                </Typography>
+                <Typography variant="h5">{selected.documentId}</Typography>
+                <Typography variant="label4">
+                  {t('content.companyCertificate.details.validtill')} :{' '}
+                  {dayjs(selected.validTill).format('YYYY-MM-DD')}
+                </Typography>
+                <Typography variant="label4">
+                  {t('content.companyCertificate.details.status')} :{' '}
+                  {selected.companyCertificateStatus}
+                </Typography>
+              </Box>
+              <Box>
+                <Button
+                  startIcon={<DeleteIcon />}
+                  variant="outlined"
+                  size="small"
+                  onClick={() => {
+                    dispatch(closeOverlay())
+                    dispatch(
+                      show(
+                        OVERLAYS.COMPANY_CERTIFICATE_CONFIRM_DELETE,
+                        id,
+                        selected.companyCertificateType
                       )
-                    }}
-                  >
-                    {t('content.companyCertificate.details.deletebutton')}
-                  </Button>
-                </Box>
+                    )
+                  }}
+                >
+                  {t('content.companyCertificate.details.deletebutton')}
+                </Button>
               </Box>
             </Box>
-            <Box className="iframe-container">
-              <Box className="verification-container">
-                <ProgressVerificationButton {...button} />
-              </Box>
-              {pdf && (
-                <iframe
-                  title="certificate document"
-                  src={pdf}
-                  width="100%"
-                  height="500px"
-                />
-              )}
+          </Box>
+          <Box className="iframe-container">
+            <Box className="verification-container">
+              <ProgressVerificationButton {...button} />
             </Box>
-          </>
-        ) : (
-          <Typography variant="body1">
-            {t('content.companyCertificate.noData')}
-          </Typography>
-        )}
-      </DialogContent>
+            {pdf ? (
+              <iframe
+                title="certificate document"
+                src={pdf}
+                width="100%"
+                height="500px"
+              />
+            ) : (
+              showLoader()
+            )}
+          </Box>
+        </DialogContent>
+      ) : (
+        showLoader()
+      )}
 
       <DialogActions>
         <Button variant="outlined" onClick={close}>

src/components/pages/CompanyCertificates/CompanyCertificateCard.tsx

@@ -27,6 +27,7 @@ import MoreVertIcon from '@mui/icons-material/MoreVert'
 import { useDispatch } from 'react-redux'
 import { OVERLAYS } from 'types/Constants'
 import { show } from 'features/control/overlay'
+import dayjs from 'dayjs'
 
 export default function CompanyCertificateCard({
   item,
@@ -40,7 +41,13 @@ export default function CompanyCertificateCard({
   const handleView = (): unknown =>
     dispatch(show(OVERLAYS.COMPANY_CERTIFICATE_DETAILS, item.documentId))
   const handleDelete = (): unknown =>
-    dispatch(show(OVERLAYS.COMPANY_CERTIFICATE_CONFIRM_DELETE, item.documentId))
+    dispatch(
+      show(
+        OVERLAYS.COMPANY_CERTIFICATE_CONFIRM_DELETE,
+        item.documentId,
+        item.companyCertificateType
+      )
+    )
   return (
     <Box className="card-container">
       <Box className="first-container">
@@ -70,7 +77,8 @@ export default function CompanyCertificateCard({
         </Box>
         <Box className="bottom-container">
           <Typography variant="label3">
-            {t('content.companyCertificate.validtill')} : {item.validTill}
+            {t('content.companyCertificate.validtill')} :{' '}
+            {dayjs(item.validTill).format('YYYY-MM-DD')}
           </Typography>
           <Box className="link" onClick={handleView}>
             <Typography variant="label3">

src/components/pages/CompanyCertificates/CompanyCertificateElements.tsx

@@ -17,38 +17,25 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { useTranslation } from 'react-i18next'
 import { Grid } from '@mui/material'
-import { Typography } from '@catena-x/portal-shared-components'
 import './CompanyCertificate.scss'
 import { type ComapnyCertificateData } from 'features/companyCertification/companyCertificateApiSlice'
 import CompanyCertificateCard from './CompanyCertificateCard'
-
 export default function CompanyCertificateElements({
   data,
 }: Readonly<{
   data: ComapnyCertificateData[]
 }>): JSX.Element {
-  const { t } = useTranslation()
-
-  if (data?.length === 0) {
-    return (
-      <Typography variant="body1" className="noData">
-        {t('content.companyCertificate.noData')}
-      </Typography>
-    )
-  }
-
   return (
     <Grid container spacing={2} className="company-certificate-section">
-      {data?.map((item: ComapnyCertificateData) => (
+      {data?.map((item: ComapnyCertificateData, index) => (
         <Grid
           item
           xs={12}
           sm={6}
           md={6}
           className="company-certificate-card"
-          key={item.companyCertificateType}
+          key={item.companyCertificateType + index}
         >
           <CompanyCertificateCard item={item} />
         </Grid>

src/components/pages/CompanyCertificates/UploadCompanyCerificate.tsx

@@ -53,6 +53,7 @@ export default function UploadCompanyCertificate({
   const [uploadedFile, setUploadedFile] = useState<File>()
   const [selectedCertificateType, setSelectedCertificateType] =
     useState<CertificateTypes>()
+  const [date, setDate] = useState<DateType>(null)
   const [loading, setLoading] = useState<boolean>(false)
   const [dateError, setDateError] = useState<boolean>(false)
   const [uploadCertificate] = useUploadCertificateMutation()
@@ -73,12 +74,9 @@ export default function UploadCompanyCertificate({
     try {
       if (uploadedFile != null) {
         const data = {
-          certificateType:
-            selectedCertificateType != null
-              ? selectedCertificateType.certificateType
-              : '',
+          certificateType: selectedCertificateType?.certificateType ?? '',
           document: uploadedFile,
-          id: '',
+          expiryDate: date?.toISOString(),
         }
         await uploadCertificate(data).unwrap()
         handleClose()
@@ -189,6 +187,7 @@ export default function UploadCompanyCertificate({
               if (items != null && items < new Date()) {
                 setDateError(true)
               } else {
+                setDate(items)
                 setDateError(false)
               }
             }}