feat(certificate): add certificate type

src/assets/locales/de/main.json

@@ -1575,6 +1575,7 @@
       "heading": "Zertifikate",
       "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .",
       "search": "Search",
+      "noUploadMessage": "No certificates available. All supported certificates are requested or active for your company.",
       "tabs": {
         "uploadedCertificates": "Uploaded Certificates",
         "pending": "Pending",
@@ -1592,6 +1593,8 @@
         "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
         "selectLabel": "Type of certificate",
         "placeholder": "Please select",
+        "certificateTypeError": "Please select a value",
+        "noOptionsMessage": "No other options available",
         "uploadDocumentTitle": "Please upload your certificate proof:",
         "note": "Please upload only pdf files with maximum 1 MB.",
         "descriptionLabel": "Description for verification",

src/assets/locales/en/main.json

@@ -1514,6 +1514,7 @@
       "heading": "Company Certificates",
       "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .",
       "search": "Search",
+      "noUploadMessage": "No certificates available. All supported certificates are requested or active for your company.",
       "tabs": {
         "uploadedCertificates": "Uploaded Certificates",
         "pending": "Pending",
@@ -1531,6 +1532,8 @@
         "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
         "selectLabel": "Type of certificate",
         "placeholder": "Please select",
+        "certificateTypeError": "Please select a value",
+        "noOptionsMessage": "No other options available",
         "uploadDocumentTitle": "Please upload your certificate proof:",
         "note": "Please upload only pdf files with maximum 1 MB.",
         "descriptionLabel": "Description for verification",

src/components/overlays/UpdateCertificate/index.tsx

@@ -17,7 +17,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch } from 'react-redux'
 import {
@@ -30,6 +30,8 @@ import {
   DropAreaProps,
   LoadingButton,
   Typography,
+  SelectList,
+  Tooltips,
 } from '@catena-x/portal-shared-components'
 import { Box, Dialog } from '@mui/material'
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
@@ -39,17 +41,40 @@ import { closeOverlay, show } from 'features/control/overlay'
 import { store } from 'features/store'
 import { Dropzone } from '../../shared/basic/Dropzone'
 import { error } from 'services/NotifyService'
-import { useAddCertificateMutation } from 'features/certification/certificationApiSlice'
+import {
+  useAddCertificateMutation,
+  useFetchCertificateTypesQuery,
+} from 'features/certification/certificationApiSlice'
 import './style.scss'
 
+export type CertificateType = {
+  title: string
+}
+
 export default function UpdateCertificate({ id }: { id: string }) {
   const { t } = useTranslation()
   const dispatch = useDispatch<typeof store.dispatch>()
   const [uploadedFile, setUploadedFile] = useState<File>()
   const [submitClicked, setSubmitClicked] = useState<boolean>(false)
   const [loading, setLoading] = useState<boolean>(false)
+  const [certificatetypesArr, setCertificatetypesArr] = useState<
+    CertificateType[]
+  >([])
+  const [selectedCertificate, setSelectedCertificate] = useState<string>('')
 
   const [addCertificate] = useAddCertificateMutation()
+  const { data: certificateTypes } = useFetchCertificateTypesQuery()
+
+  useEffect(() => {
+    certificateTypes?.map((item) =>
+      setCertificatetypesArr((oldArray: CertificateType[]) => [
+        ...oldArray,
+        { title: item },
+      ])
+    )
+    certificateTypes?.length === 1 &&
+      setSelectedCertificate(certificateTypes?.[0] ?? '')
+  }, [certificateTypes])
 
   const renderDropArea = (props: DropAreaProps) => {
     return <DropArea {...props} size="small" />
@@ -200,6 +225,43 @@ export default function UpdateCertificate({ id }: { id: string }) {
 
           <DialogContent>
             <div className="update-certificate">
+              {certificatetypesArr?.length && (
+                <Tooltips
+                  additionalStyles={{
+                    display:
+                      certificatetypesArr.length === 1 ? 'block' : 'none',
+                  }}
+                  tooltipPlacement="bottom-start"
+                  tooltipText={t(
+                    'content.certificates.updateCertificate.noOptionsMessage'
+                  )}
+                  children={
+                    <div>
+                      <SelectList
+                        error={!selectedCertificate}
+                        helperText={t(
+                          'content.certificates.updateCertificate.certificateTypeError'
+                        )}
+                        defaultValue={certificatetypesArr[0]}
+                        items={certificatetypesArr}
+                        label={t(
+                          'content.certificates.updateCertificate.selectLabel'
+                        )}
+                        placeholder={
+                          certificatetypesArr.length === 1
+                            ? certificatetypesArr[0].title
+                            : t(
+                                'content.certificates.updateCertificate.placeholder'
+                              )
+                        }
+                        onChangeItem={(e) => setSelectedCertificate(e.title)}
+                        keyTitle={'title'}
+                        disabled={certificatetypesArr.length === 1}
+                      />
+                    </div>
+                  }
+                />
+              )}
               <Typography variant="h4" className="uploadDocumentTitle">
                 {t(
                   'content.certificates.updateCertificate.uploadDocumentTitle'
@@ -243,7 +305,7 @@ export default function UpdateCertificate({ id }: { id: string }) {
               <Button
                 variant="contained"
                 onClick={handleSubmit}
-                disabled={uploadedFile === undefined}
+                disabled={uploadedFile === undefined || !selectedCertificate}
               >
                 {t('global.actions.submit')}
               </Button>

src/components/pages/CertificateCredentials/index.tsx

@@ -27,11 +27,15 @@ import {
   ViewSelector,
   SortOption,
   Button,
+  Tooltips,
 } from '@catena-x/portal-shared-components'
 import SortImage from 'components/shared/frame/SortImage'
 import './CertificateCredentials.scss'
 import { OVERLAYS } from 'types/Constants'
-import { useFetchCertificatesQuery } from 'features/certification/certificationApiSlice'
+import {
+  useFetchCertificateTypesQuery,
+  useFetchCertificatesQuery,
+} from 'features/certification/certificationApiSlice'
 import CertificateElements from './CertificateElements'
 
 enum FilterType {
@@ -105,6 +109,7 @@ export default function CertificateCredentials() {
   const { t } = useTranslation()
 
   const { data } = useFetchCertificatesQuery()
+  const { data: certificateTypes } = useFetchCertificateTypesQuery()
 
   const [{ searchExpr, showModal, selected, sortOption }, setState] =
     useReducer(reducer, initialState)
@@ -221,14 +226,29 @@ export default function CertificateCredentials() {
               </div>
             </div>
             <div className="uploadBtn">
-              <Button
-                size="small"
-                onClick={() =>
-                  dispatch(show(OVERLAYS.UPDATE_CERTIFICATE, 'userId'))
-                }
-              >
-                {t('content.certificates.uploadCertificate')}
-              </Button>
+              {certificateTypes && (
+                <Tooltips
+                  additionalStyles={{
+                    cursor: 'pointer',
+                    display: certificateTypes.length >= 0 ? 'none' : 'block',
+                  }}
+                  tooltipPlacement="top-start"
+                  tooltipText={t('content.certificates.noUploadMessage')}
+                  children={
+                    <div>
+                      <Button
+                        size="small"
+                        onClick={() =>
+                          dispatch(show(OVERLAYS.UPDATE_CERTIFICATE, 'userId'))
+                        }
+                        disabled={certificateTypes.length <= 0}
+                      >
+                        {t('content.certificates.uploadCertificate')}
+                      </Button>
+                    </div>
+                  }
+                />
+              )}
             </div>
             <CertificateElements data={data} />
           </div>

src/features/certification/certificationApiSlice.tsx

@@ -125,6 +125,9 @@ export const apiSlice = createApi({
         method: 'PUT',
       }),
     }),
+    fetchCertificateTypes: builder.query<string[], void>({
+      query: () => '/api/administration/companydata/certificateTypes',
+    }),
   }),
 })
 
@@ -134,4 +137,5 @@ export const {
   useFetchCredentialsSearchQuery,
   useApproveCredentialMutation,
   useDeclineCredentialMutation,
+  useFetchCertificateTypesQuery,
 } = apiSlice