feat(certificates): add certification page

CHANGELOG.md

@@ -51,6 +51,10 @@
   - Change the payload data as per backend logic
 - App Subscription
   - Add and Edit Tenant URL functionality in detail overlay
+- Certificates
+  - Created New page under User profile
+  - Fetch Certificates and connected to UI
+- Data Space
 - Static Pages
   - Data Space
   - Catena-X Participant

src/assets/locales/de/main.json

@@ -59,6 +59,7 @@
     "servicedetail": "Service Details",
     "company-role": "Config - Company Role",
     "usecase-participation": "Config - Use Case Participation",
+    "certificate-credential": "Config - Certificates",
     "about": "About",
     "dataspace": "Data Space"
   },
@@ -1440,6 +1441,47 @@
         "description": "To be able to participate in the data exchange of the use case {use case name} please download the use case frame agreement {placeholder until download is available} and upload the signed document in the upload window below.After submission, the platform owner will validate the uploaded document you will be informed as soon as the validation is successfully finished",
         "checkboxLabel": "Yes, I confirm that I have uploaded the signed use case frameagreement"
       }
+    },
+    "certificates": {
+      "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",
+      "tabs": {
+        "uploadedCertificates": "Uploaded Certificates",
+        "pending": "Pending",
+        "active": " Active",
+        "declined": "Declined",
+        "expired": "Expired"
+      },
+      "sort": {
+        "name": "Name",
+        "date": "Date"
+      },
+      "uploadCertificate": "Upload Certificate",
+      "updateCertificate": {
+        "title": "Upload new certificate for {company name}",
+        "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",
+        "uploadDocumentTitle": "Please upload your certificate proof:",
+        "note": "Please upload only pdf files with maximum 1 MB.",
+        "descriptionLabel": "Description for verification"
+      },
+      "successCertificate": {
+        "title": "Certificate successfully uploaded.",
+        "fileUpload": "File Upload",
+        "completed": "Completed",
+        "nextSteps": "Next Steps",
+        "verification": "Verification",
+        "pending": "Pending",
+        "queryDescription": "For any queries regarding these change(s), please contact the Catena-X helpdesk:",
+        "email": "email_address@catena_support.com"
+      },
+      "certificateCard": {
+        "type": "Type: [ISO 9001]",
+        "valid": "Valid until: ",
+        "status": "Status: "
+      }
     }
   },
   "navigation": {

src/assets/locales/en/main.json

@@ -58,6 +58,7 @@
     "servicedetail": "Service Details",
     "company-role": "Config - Company Role",
     "usecase-participation": "Config - Use Case Participation",
+    "certificate-credential": "Config - Certificates",
     "about": "About",
     "dataspace": "Data Space"
   },
@@ -1402,6 +1403,47 @@
         "description": "To be able to participate in the data exchange of the use case {use case name} please download the use case frame agreement {placeholder until download is available} and upload the signed document in the upload window below.After submission, the platform owner will validate the uploaded document you will be informed as soon as the validation is successfully finished",
         "checkboxLabel": "Yes, I confirm that I have uploaded the signed use case frameagreement"
       }
+    },
+    "certificates": {
+      "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",
+      "tabs": {
+        "uploadedCertificates": "Uploaded Certificates",
+        "pending": "Pending",
+        "active": " Active",
+        "declined": "Declined",
+        "expired": "Expired"
+      },
+      "sort": {
+        "name": "Name",
+        "date": "Date"
+      },
+      "uploadCertificate": "Upload Certificate",
+      "updateCertificate": {
+        "title": "Upload new certificate for {company name}",
+        "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",
+        "uploadDocumentTitle": "Please upload your certificate proof:",
+        "note": "Please upload only pdf files with maximum 1 MB.",
+        "descriptionLabel": "Description for verification"
+      },
+      "successCertificate": {
+        "title": "Certificate successfully uploaded.",
+        "fileUpload": "File Upload",
+        "completed": "Completed",
+        "nextSteps": "Next Steps",
+        "verification": "Verification",
+        "pending": "Pending",
+        "queryDescription": "For any queries regarding these change(s), please contact the Catena-X helpdesk:",
+        "email": "email_address@catena_support.com"
+      },
+      "certificateCard": {
+        "type": "Type: [ISO 9001]",
+        "valid": "Valid until: ",
+        "status": "Status: "
+      }
     }
   },
   "navigation": {

src/components/overlays/UpdateCertificate/index.tsx

@@ -0,0 +1,222 @@
+/********************************************************************************
+ * Copyright (c) 2021, 2023 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import {
+  Button,
+  Chip,
+  DialogActions,
+  DialogContent,
+  DialogHeader,
+  DropArea,
+  DropAreaProps,
+  Typography,
+} from '@catena-x/portal-shared-components'
+import { useTranslation } from 'react-i18next'
+import { fetchAny } from 'features/admin/userOwn/actions'
+import { useEffect, useState } from 'react'
+import { useDispatch } from 'react-redux'
+import { Box, Dialog } from '@mui/material'
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
+import PendingOutlinedIcon from '@mui/icons-material/PendingOutlined'
+import { OVERLAYS } from 'types/Constants'
+import { closeOverlay, show } from 'features/control/overlay'
+import { store } from 'features/store'
+import { Dropzone } from '../../shared/basic/Dropzone'
+import './style.scss'
+
+export default function UpdateCertificate({ id }: { id: string }) {
+  const { t } = useTranslation()
+  const dispatch = useDispatch<typeof store.dispatch>()
+  const [uploadedFile, setUploadedFile] = useState<any>()
+  const [submitClicked, setSubmitClicked] = useState<boolean>(false)
+
+  useEffect(() => {
+    dispatch(fetchAny(id))
+  }, [dispatch, id])
+
+  const renderDropArea = (props: DropAreaProps) => {
+    return <DropArea {...props} size="small" />
+  }
+
+  const handleSubmit = () => {
+    setSubmitClicked(true)
+  }
+
+  return (
+    <>
+      {submitClicked ? (
+        <Dialog open={true} maxWidth="md">
+          <DialogHeader
+            {...{
+              title: t('content.certificates.successCertificate.title'),
+              intro: '',
+              closeWithIcon: true,
+              onCloseWithIcon: () => dispatch(show(OVERLAYS.NONE, '')),
+            }}
+          />
+
+          <DialogContent>
+            <div className="success-certificate">
+              <Box
+                sx={{
+                  display: 'flex',
+                  backgroundColor: '#f5f9ee',
+                  padding: '5px 20px',
+                  marginBottom: '10px',
+                }}
+              >
+                <CheckCircleOutlineIcon
+                  sx={{
+                    color: '#00aa55',
+                    margin: '2px 20px 0 0',
+                  }}
+                />
+                <Typography
+                  variant="body3"
+                  sx={{
+                    lineHeight: '20px',
+                    height: '18px',
+                    margin: '2px 0',
+                  }}
+                >
+                  {t('content.certificates.successCertificate.fileUpload')}
+                </Typography>
+                <Chip
+                  color="success"
+                  variant="filled"
+                  label={t('content.certificates.successCertificate.completed')}
+                  size="small"
+                  withIcon={false}
+                  sx={{
+                    marginRight: '0 !important',
+                    margin: '0 auto',
+                  }}
+                />
+              </Box>
+              <Typography variant="h5" className="nextStep">
+                {t('content.certificates.successCertificate.nextSteps')}
+              </Typography>
+              <Box
+                sx={{
+                  display: 'flex',
+                  backgroundColor: '#fff7ec',
+                  padding: '5px 20px',
+                  marginBottom: '10px',
+                }}
+              >
+                <PendingOutlinedIcon
+                  sx={{
+                    color: '#b18258',
+                    margin: '2px 20px 0 0',
+                  }}
+                />
+                <Typography
+                  variant="body3"
+                  sx={{
+                    lineHeight: '20px',
+                    height: '18px',
+                    margin: '2px 0',
+                  }}
+                >
+                  {t('content.certificates.successCertificate.verification')}
+                </Typography>
+                <Chip
+                  color="warning"
+                  variant="filled"
+                  label={t('content.certificates.successCertificate.pending')}
+                  size="small"
+                  withIcon={false}
+                  sx={{
+                    marginRight: '0 !important',
+                    margin: '0 auto',
+                  }}
+                />
+              </Box>
+              <Typography variant="caption3" className="queryDescription">
+                {t('content.certificates.successCertificate.queryDescription')}
+              </Typography>
+              <Typography
+                variant="caption3"
+                sx={{
+                  lineHeight: '20px',
+                  margin: '2px 0',
+                }}
+              >
+                {t('content.certificates.successCertificate.email')}
+              </Typography>
+            </div>
+          </DialogContent>
+          <DialogActions>
+            <Button variant="outlined" onClick={() => dispatch(closeOverlay())}>
+              {t('global.actions.cancel')}
+            </Button>
+          </DialogActions>
+        </Dialog>
+      ) : (
+        <>
+          <DialogHeader
+            {...{
+              title: t('content.certificates.updateCertificate.title'),
+              intro: t('content.certificates.updateCertificate.description'),
+              closeWithIcon: true,
+              onCloseWithIcon: () => dispatch(show(OVERLAYS.NONE, '')),
+            }}
+          />
+
+          <DialogContent>
+            <div className="update-certificate">
+              <Typography variant="h4" className="uploadDocumentTitle">
+                {t(
+                  'content.certificates.updateCertificate.uploadDocumentTitle'
+                )}
+              </Typography>
+              <Dropzone
+                acceptFormat={{ 'application/pdf': [] }}
+                maxFilesToUpload={1}
+                onChange={([file]) => {
+                  setUploadedFile(file)
+                }}
+                errorText={'helperText'}
+                DropStatusHeader={false}
+                DropArea={renderDropArea}
+              />
+              <div className="note">
+                <Typography variant="label2">
+                  {t('content.certificates.updateCertificate.note')}
+                </Typography>
+              </div>
+            </div>
+          </DialogContent>
+          <DialogActions>
+            <Button variant="outlined" onClick={() => dispatch(closeOverlay())}>
+              {t('global.actions.cancel')}
+            </Button>
+            <Button
+              variant="contained"
+              onClick={handleSubmit}
+              disabled={uploadedFile === undefined}
+            >
+              {t('global.actions.submit')}
+            </Button>
+          </DialogActions>
+        </>
+      )}
+    </>
+  )
+}

src/components/overlays/UpdateCertificate/style.scss

@@ -0,0 +1,43 @@
+/********************************************************************************
+ * Copyright (c) 2021, 2023 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+.update-certificate {
+  padding: 0 50px 0 50px;
+  .uploadDocumentTitle {
+    margin: 30px 0;
+    text-align: center;
+  }
+  .descriptionTitle {
+    margin-bottom: 30px;
+  }
+  .descriptionText {
+    margin-top: 10px;
+    border-radius: 20px;
+  }
+}
+
+.success-certificate {
+  .nextStep {
+    margin: 30px 0 20px;
+  }
+  .queryDescription {
+    margin: 20px 0 0;
+    display: inherit;
+  }
+}