From 3d58a99f5146e4c561e2235ad4f3f8cfd9935ed2 Mon Sep 17 00:00:00 2001 From: nidhi garg Date: Thu, 29 Jun 2023 17:34:43 +0530 Subject: [PATCH 01/11] feat(certification): created new page --- src/assets/locales/de/main.json | 1 + src/assets/locales/en/main.json | 1 + .../CertificateCredentials.scss | 89 ++++++++++++++ .../pages/CertificateCredentials/index.tsx | 109 ++++++++++++++++++ src/types/Config.tsx | 9 +- src/types/Constants.ts | 2 + 6 files changed, 210 insertions(+), 1 deletion(-) create mode 100644 src/components/pages/CertificateCredentials/CertificateCredentials.scss create mode 100644 src/components/pages/CertificateCredentials/index.tsx diff --git a/src/assets/locales/de/main.json b/src/assets/locales/de/main.json index c15162f62..3c36407cf 100644 --- a/src/assets/locales/de/main.json +++ b/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" }, "overlays": { diff --git a/src/assets/locales/en/main.json b/src/assets/locales/en/main.json index 9ee596329..b534f01b4 100644 --- a/src/assets/locales/en/main.json +++ b/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" }, "overlays": { diff --git a/src/components/pages/CertificateCredentials/CertificateCredentials.scss b/src/components/pages/CertificateCredentials/CertificateCredentials.scss new file mode 100644 index 000000000..054ba4e56 --- /dev/null +++ b/src/components/pages/CertificateCredentials/CertificateCredentials.scss @@ -0,0 +1,89 @@ +/******************************************************************************** + * 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 + ********************************************************************************/ + +.usecase-participation { + .usecase-main { + margin-top: 72px; + } + .container { + max-width: 1140px; + margin: 0 auto; + padding: 0 15px; + } + .heading { + text-align: center; + } + .description { + text-align: center; + margin: 34px 0 64px; + } + .step1 { + max-width: 416px; + text-align: left; + border: 1px solid #ffa600; + border-radius: 10px; + padding: 15px; + margin: 0 auto 12px; + display: flex; + .number { + background: #ffa600; + color: #ffff; + flex: 0; + width: 16px; + height: 16px; + border-radius: 50%; + min-width: 16px; + text-align: center; + line-height: 16px; + margin-right: 20px; + position: relative; + top: 4px; + } + .detail { + flex: 1; + } + } + .notes { + max-width: 705px; + width: 100%; + margin: 50px auto; + border-top: 1px solid #dcdcdc; + border-bottom: 1px solid #dcdcdc; + padding: 30px; + } + .usecase-list { + max-width: 720px; + width: 100%; + margin: 0 auto 50px; + ul { + list-style: none; + .seperation { + border: 0; + border-top: 1px solid #dcdcdc; + } + li { + margin-bottom: 20px; + display: flex; + .usecase-detail { + width: 80%; + } + } + } + } +} diff --git a/src/components/pages/CertificateCredentials/index.tsx b/src/components/pages/CertificateCredentials/index.tsx new file mode 100644 index 000000000..330e06347 --- /dev/null +++ b/src/components/pages/CertificateCredentials/index.tsx @@ -0,0 +1,109 @@ +/******************************************************************************** + * 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 { useDispatch } from 'react-redux' +import { useTranslation, Trans } from 'react-i18next' +import { show } from 'features/control/overlay' +import { OVERLAYS } from 'types/Constants' +import { + Chip, + PageHeader, + Typography, +} from '@catena-x/portal-shared-components' +import { PageBreadcrumb } from 'components/shared/frame/PageBreadcrumb/PageBreadcrumb' +import './CertificateCredentials.scss' + +export default function CertificateCredentials() { + const { t } = useTranslation() + const dispatch = useDispatch() + + return ( +
+
+
+ + {t('content.usecaseParticipation.heading')} + + + + {t('content.usecasePagitrticipation.description')} + + +
+
+ + 1 + + + {t('content.usecaseParticipation.step1')} + +
+
+
+ + 2 + + + {t('content.usecaseParticipation.step2')} + +
+
+ + {t('content.usecaseParticipation.note')} + + + {t('content.usecaseParticipation.noteDetail')} + +
+
+
    +
  • +
    + 'Ise Case Title' + + 'Use case desctption' + +
    + 'Status' +
    • +
    +
  • +
    + 'Ise Case Title' + + 'Use case desctption' + +
    + + dispatch(show(OVERLAYS.EDIT_USECASE, 'userId')) + } + withIcon={false} + type="plain" + /> +
    • +
+
+
+
+
+ ) +} diff --git a/src/types/Config.tsx b/src/types/Config.tsx index 6a9cd5969..87d22eaaa 100644 --- a/src/types/Config.tsx +++ b/src/types/Config.tsx @@ -76,6 +76,7 @@ import CompanyRoleUpdate from 'components/pages/CompanyRoleUpdate' import UsecaseParticipation from 'components/pages/UsecaseParticipation' import AboutPage from 'components/pages/AboutPage' import ChangeImage from 'components/pages/AppOverview/ChangeImage' +import CertificateCredentials from 'components/pages/CertificateCredentials' /** * ALL_PAGES @@ -460,9 +461,14 @@ export const ALL_PAGES: IPage[] = [ }, { name: PAGES.USECASE_PARTICIPATION, - //role: ROLES.USECASE_PARTICIPATION, + role: ROLES.USECASE_PARTICIPATION, element: , }, + { + name: PAGES.CERTIFICATE_CREDENTIAL, + role: ROLES.MANAGE_COMPANY_CREDENTIALS, + element: , + }, ] export const ALL_OVERLAYS: IOverlay[] = [ @@ -680,6 +686,7 @@ export const userMenuFull = [ PAGES.INVITE, PAGES.COMPANY_ROLE, PAGES.USECASE_PARTICIPATION, + PAGES.CERTIFICATE_CREDENTIAL, PAGES.LOGOUT, ] diff --git a/src/types/Constants.ts b/src/types/Constants.ts index 8c3282f67..d3f39db98 100644 --- a/src/types/Constants.ts +++ b/src/types/Constants.ts @@ -93,6 +93,7 @@ export enum PAGES { COMPANY_ROLE = 'company-role', USECASE_PARTICIPATION = 'usecase-participation', ABOUTPAGE = 'about', + CERTIFICATE_CREDENTIAL = 'certificate-credential', } export enum OVERLAYS { @@ -202,6 +203,7 @@ export enum ROLES { UPDATE_COMPANY_ROLE = 'update_company_role', USECASE_PARTICIPATION = 'add_use_case_participation', SUBMITTED_APPLICATION = 'view_submitted_applications', + MANAGE_COMPANY_CREDENTIALS = 'manage_company_credentials' } export enum HINTS { From 5efa614a8b3b6c48e126c40bff2a14aa03de20d8 Mon Sep 17 00:00:00 2001 From: nidhi garg Date: Mon, 3 Jul 2023 14:40:03 +0530 Subject: [PATCH 02/11] feat(certification): add certification in user menu --- src/types/Config.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/types/Config.tsx b/src/types/Config.tsx index 87d22eaaa..5f70eba26 100644 --- a/src/types/Config.tsx +++ b/src/types/Config.tsx @@ -466,7 +466,7 @@ export const ALL_PAGES: IPage[] = [ }, { name: PAGES.CERTIFICATE_CREDENTIAL, - role: ROLES.MANAGE_COMPANY_CREDENTIALS, + //role: ROLES.MANAGE_COMPANY_CREDENTIALS, element: , }, ] From 24842c96f48f879891bc0c2c0c5d910de3b47dd8 Mon Sep 17 00:00:00 2001 From: nidhi garg Date: Wed, 5 Jul 2023 18:11:20 +0530 Subject: [PATCH 03/11] feat(certificate): added new page of certificate --- src/assets/locales/en/main.json | 36 +++ .../overlays/UpdateCertificate/index.tsx | 261 ++++++++++++++++ .../overlays/UpdateCertificate/style.scss | 43 +++ .../CertificateCredentials.scss | 125 ++++---- .../CertificateElements.tsx | 144 +++++++++ .../pages/CertificateCredentials/index.tsx | 294 ++++++++++++++---- src/services/AccessService.tsx | 3 + src/types/Config.tsx | 3 + src/types/Constants.ts | 1 + 9 files changed, 786 insertions(+), 124 deletions(-) create mode 100644 src/components/overlays/UpdateCertificate/index.tsx create mode 100644 src/components/overlays/UpdateCertificate/style.scss create mode 100644 src/components/pages/CertificateCredentials/CertificateElements.tsx diff --git a/src/assets/locales/en/main.json b/src/assets/locales/en/main.json index b534f01b4..606a6f6d7 100644 --- a/src/assets/locales/en/main.json +++ b/src/assets/locales/en/main.json @@ -1394,6 +1394,42 @@ "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": "Use Case Participation", + "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:", + "descriptionTitle": "Please add description /message to support auditor during verification: (optional)", + "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" + } } }, "navigation": { diff --git a/src/components/overlays/UpdateCertificate/index.tsx b/src/components/overlays/UpdateCertificate/index.tsx new file mode 100644 index 000000000..56bbc7ff7 --- /dev/null +++ b/src/components/overlays/UpdateCertificate/index.tsx @@ -0,0 +1,261 @@ +/******************************************************************************** + * 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, + SelectList, + Textarea, + 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 { 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() + const [uploadedFile, setUploadedFile] = useState() + const [submitClicked, setSubmitClicked] = useState(false) + + useEffect(() => { + dispatch(fetchAny(id)) + }, [dispatch, id]) + + const renderDropArea = (props: DropAreaProps) => { + return + } + + const handleSubmit = () => { + setSubmitClicked(true) + } + + return ( + <> + { + submitClicked ? + + dispatch(show(OVERLAYS.NONE, '')), + }} + /> + + +
+ + + + {t('content.certificates.successCertificate.fileUpload')} + + + + + {t('content.certificates.successCertificate.nextSteps')} + + + + + {t('content.certificates.successCertificate.verification')} + + + + + {t('content.certificates.successCertificate.queryDescription')} + + + {t('content.certificates.successCertificate.email')} + +
+ + + + + + : + <> + dispatch(show(OVERLAYS.NONE, '')), + }} + /> + + +
+ console.log('e', e)} + keyTitle={'fullName'} + /> + + {t('content.certificates.updateCertificate.uploadDocumentTitle')} + + { + setUploadedFile(file) + }} + errorText={'helperText'} + DropStatusHeader={false} + DropArea={renderDropArea} + /> +
+ + {t('content.certificates.updateCertificate.descriptionTitle')} + +
+