From 2f4c2a879c46521f2b638816ba4bb67dfba0ae16 Mon Sep 17 00:00:00 2001 From: nidhigarg-bmw <101316912+nidhigarg-bmw@users.noreply.github.com> Date: Mon, 3 Jun 2024 20:16:52 +0530 Subject: [PATCH] fix(registration detail): add data and ui changes (#862) --- CHANGELOG.md | 3 + src/assets/locales/de/main.json | 48 ++++- src/assets/locales/en/main.json | 48 ++++- .../CompanyDetailsHelper.tsx | 87 +++++--- .../CompanyDetailOverlay/index.tsx | 35 +++- .../registrationTableColumns.tsx | 196 ++++++++++-------- .../ProgressVerificationButton/index.tsx | 30 ++- .../RegistrationReview.scss | 2 +- src/features/admin/registration/types.ts | 1 + 9 files changed, 311 insertions(+), 139 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 056dfbd78..05fe18192 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,9 @@ - fetch details using api, added permissions and fixed error messages - App Release Process - Integrated role deletion with BE api reponse +- Company Application Registraion Detail Overlay + - UI improvements + - Add correct registration application checklist items ### Feature diff --git a/src/assets/locales/de/main.json b/src/assets/locales/de/main.json index 08b661541..60c1e3632 100644 --- a/src/assets/locales/de/main.json +++ b/src/assets/locales/de/main.json @@ -213,9 +213,9 @@ "tab1": "Company Data", "tab2": "Registration Process", "tab1Title": "Company Data", - "tab1SubTitle": "Registration Status: {{status}}", "tab2Title": "Confirmation {{status}}", - "statusComplete": "[complete]", + "tab2SubTitle": "Registration Status: {{status}}", + "lastDate": "Last process update: {{date}}", "statusIncomplete": "[incomplete]", "approvedButton": "approved", "failedButton": "falied" @@ -1596,6 +1596,8 @@ "REGISTRATION_VERIFICATION": "Data Validation", "BUSINESS_PARTNER_NUMBER": "BPN Creation", "IDENTITY_WALLET": "Identity Wallet Creation", + "BPNL_CREDENTIAL": "BPNL Credential", + "MEMBERSHIP_CREDENTIAL": "Membership Credential", "CLEARING_HOUSE": "Clearing House", "SELF_DESCRIPTION_LP": "Self Description" }, @@ -1679,6 +1681,48 @@ "description": "Die Identity-Wallet-Erstellung ist fehlgeschlagen. Sie können den Job erneut auslösen oder die Firmenregistrierung schließen/ablehnen." } }, + "BPNL_CREDENTIAL": { + "stepName": "BPNL Credential", + "stepDescription": "Manual validation of the company registration by the operator. Please check the company details as well as uploaded documents and 'accept' / 'decline' the application; depending on the validation results", + "additionalText": "", + "TO_DO": { + "title": "Your action is needed to resolve the issue", + "description": "The process gets auto triggered with the next automation run." + }, + "IN_PROGRESS": { + "title": "No action needed from your side", + "description": "The process is ongoing." + }, + "DONE": { + "title": "No action needed from your side", + "description": "The process is successfully completed." + }, + "FAILED": { + "title": "No action needed from your side", + "description": "The BPNL Credential creation failed. You can retrigger the endpoint or close/reject the company registration." + } + }, + "MEMBERSHIP_CREDENTIAL": { + "stepName": "Membership Credential", + "stepDescription": "Manual validation of the company registration by the operator. Please check the company details as well as uploaded documents and 'accept' / 'decline' the application; depending on the validation results", + "additionalText": "", + "TO_DO": { + "title": "Your action is needed to resolve the issue", + "description": "The process gets auto triggered with the next automation run." + }, + "IN_PROGRESS": { + "title": "No action needed from your side", + "description": "The process is ongoing." + }, + "DONE": { + "title": "No action needed from your side", + "description": "The process is successfully completed." + }, + "FAILED": { + "title": "No action needed from your side", + "description": "The Membership Credential creation failed. You can retrigger the endpoint or close/reject the company registration." + } + }, "CLEARING_HOUSE": { "stepName": "Clearing House", "stepDescription": "Gaia-X Clearinghouse provider is validating the company registration form (company name; address and unique identifier) and after successful validation verified credentials are added to the managed wallet of the customer.", diff --git a/src/assets/locales/en/main.json b/src/assets/locales/en/main.json index cfb952748..0aa9a72ab 100644 --- a/src/assets/locales/en/main.json +++ b/src/assets/locales/en/main.json @@ -212,9 +212,9 @@ "tab1": "Company Data", "tab2": "Registration Process", "tab1Title": "Company Data", - "tab1SubTitle": "Registration Status: {{status}}", "tab2Title": "Confirmation {{status}}", - "statusComplete": "[complete]", + "tab2SubTitle": "Registration Status: {{status}}", + "lastDate": "Last process update: {{date}}", "statusIncomplete": "[incomplete]", "approvedButton": "approved", "failedButton": "falied" @@ -1563,6 +1563,8 @@ "REGISTRATION_VERIFICATION": "Data Validation", "BUSINESS_PARTNER_NUMBER": "BPN Creation", "IDENTITY_WALLET": "Identity Wallet Creation", + "BPNL_CREDENTIAL": "BPNL Credential", + "MEMBERSHIP_CREDENTIAL": "Membership Credential", "CLEARING_HOUSE": "Clearing House", "SELF_DESCRIPTION_LP": "Self Description" }, @@ -1646,6 +1648,48 @@ "description": "The Identity Wallet creation failed. You can retrigger the endpoint or close/reject the company registration." } }, + "BPNL_CREDENTIAL": { + "stepName": "BPNL Credential", + "stepDescription": "Manual validation of the company registration by the operator. Please check the company details as well as uploaded documents and 'accept' / 'decline' the application; depending on the validation results", + "additionalText": "", + "TO_DO": { + "title": "Your action is needed to resolve the issue", + "description": "The process gets auto triggered with the next automation run." + }, + "IN_PROGRESS": { + "title": "No action needed from your side", + "description": "The process is ongoing." + }, + "DONE": { + "title": "No action needed from your side", + "description": "The process is successfully completed." + }, + "FAILED": { + "title": "No action needed from your side", + "description": "The BPNL Credential creation failed. You can retrigger the endpoint or close/reject the company registration." + } + }, + "MEMBERSHIP_CREDENTIAL": { + "stepName": "Membership Credential", + "stepDescription": "Manual validation of the company registration by the operator. Please check the company details as well as uploaded documents and 'accept' / 'decline' the application; depending on the validation results", + "additionalText": "", + "TO_DO": { + "title": "Your action is needed to resolve the issue", + "description": "The process gets auto triggered with the next automation run." + }, + "IN_PROGRESS": { + "title": "No action needed from your side", + "description": "The process is ongoing." + }, + "DONE": { + "title": "No action needed from your side", + "description": "The process is successfully completed." + }, + "FAILED": { + "title": "No action needed from your side", + "description": "The Membership Credential creation failed. You can retrigger the endpoint or close/reject the company registration." + } + }, "CLEARING_HOUSE": { "stepName": "Clearing House", "stepDescription": "Gaia-X Clearinghouse provider is validating the company registration form (company name; address and unique identifier) and after successful validation verified credentials are added to the managed wallet of the customer.", diff --git a/src/components/pages/Admin/components/RegistrationRequests/CompanyDetailOverlay/CompanyDetailsHelper.tsx b/src/components/pages/Admin/components/RegistrationRequests/CompanyDetailOverlay/CompanyDetailsHelper.tsx index b797c7821..3834eda6f 100644 --- a/src/components/pages/Admin/components/RegistrationRequests/CompanyDetailOverlay/CompanyDetailsHelper.tsx +++ b/src/components/pages/Admin/components/RegistrationRequests/CompanyDetailOverlay/CompanyDetailsHelper.tsx @@ -19,46 +19,83 @@ ********************************************************************************/ import { - type ProgressButtonsType, ProgressStatus, + ApplicationRequestStatus, + type ApplicationRequest, } from 'features/admin/applicationRequestApiSlice' import { Trans } from 'react-i18next' import type i18next from 'i18next' - -export const isComplete = (applicationChecklist: ProgressButtonsType[]) => - applicationChecklist.reduce( - (a, b) => a && b.statusId === ProgressStatus.DONE, - true - ) +import dayjs from 'dayjs' +import { Typography } from '@catena-x/portal-shared-components' +import { type CompanyDetail } from 'features/admin/registration/types' export const getTitle = ( activeTab: number, - applicationChecklist: ProgressButtonsType[], - t: typeof i18next.t + t: typeof i18next.t, + selectedRequest?: ApplicationRequest ) => { + const getStatus = () => { + if ( + selectedRequest?.applicationStatus === ApplicationRequestStatus.SUBMITTED + ) { + const failedItems = selectedRequest.applicationChecklist.filter( + (checklist) => checklist.statusId === ProgressStatus.FAILED + ) + return t( + `content.admin.registration-requests.${failedItems.length ? 'buttonerror' : 'buttonprogress'}` + ) + } else if ( + selectedRequest?.applicationStatus === + ApplicationRequestStatus.DECLINED || + selectedRequest?.applicationStatus === + ApplicationRequestStatus.CANCELLED_BY_CUSTOMER + ) { + return t('content.admin.registration-requests.buttonrejected') + } else if ( + selectedRequest?.applicationStatus === ApplicationRequestStatus.CONFIRMED + ) { + return t('content.admin.registration-requests.buttoncompleted') + } + } + if (activeTab === 0) { return t('content.admin.registration-requests.overlay.tab1Title') + } else { + return ( + <> + + {t('content.admin.registration-requests.overlay.tab1Title')} + + + + {t('content.admin.registration-requests.overlay.tab2SubTitle')} + + + + ) } - if (isComplete(applicationChecklist)) { +} + +export const getIntro = ( + activeTab: number, + selectedCompany: CompanyDetail, + t: typeof i18next.t +) => { + if (activeTab === 1) { return ( + > + + {t('content.admin.registration-requests.overlay.lastDate')} + + ) } - return ( - - ) } diff --git a/src/components/pages/Admin/components/RegistrationRequests/CompanyDetailOverlay/index.tsx b/src/components/pages/Admin/components/RegistrationRequests/CompanyDetailOverlay/index.tsx index e95c003d7..801520989 100644 --- a/src/components/pages/Admin/components/RegistrationRequests/CompanyDetailOverlay/index.tsx +++ b/src/components/pages/Admin/components/RegistrationRequests/CompanyDetailOverlay/index.tsx @@ -44,10 +44,11 @@ import { } from 'features/admin/applicationRequestApiSlice' import { download } from 'utils/downloadUtils' import CheckListFullButtons from '../components/CheckList/CheckListFullButtons' -import { getTitle } from './CompanyDetailsHelper' +import { getIntro, getTitle } from './CompanyDetailsHelper' import { useFetchNewDocumentByIdMutation } from 'features/appManagement/apiSlice' import { KeyValueView } from 'components/shared/basic/KeyValueView' import { type UniqueIdType } from 'features/admin/registration/types' +import { StatusProgress } from '../registrationTableColumns' interface CompanyDetailOverlayProps { openDialog?: boolean @@ -269,7 +270,8 @@ const CompanyDetailOverlay = ({ > @@ -285,8 +288,10 @@ const CompanyDetailOverlay = ({ icon={getStepIcon('1')} iconPosition="start" sx={{ - fontSize: '18px', + fontSize: '14px', width: '50%', + textTransform: 'capitalize', + color: '#111 !important', '&.Mui-selected': { borderBottom: '3px solid #0f71cb', }, @@ -299,7 +304,10 @@ const CompanyDetailOverlay = ({ icon={getStepIcon('2')} iconPosition="start" sx={{ - fontSize: '18px', + fontSize: '14px', + width: '50%', + textTransform: 'capitalize', + color: '#111 !important', '&.Mui-selected': { borderBottom: '3px solid #0f71cb', }, @@ -340,7 +348,7 @@ const CompanyDetailOverlay = ({ }} > - + + {selectedRequest && ( +
+ +
+ )} void, +interface StatusProgressProps { + application: ApplicationRequest + trans: typeof i18next.t + type?: boolean onConfirmationCancel?: (applicationId: string, name: string) => void -): Array => { - const getStatusProgress = (row: ApplicationRequest) => { - const groupedItems = _.chain(row.applicationChecklist) - .groupBy('statusId') - .map((value, key) => ({ [key]: value.length })) - .value() +} - const items: ProgressType = { - ...initialProgressValue, - ...Object.assign({}, ...groupedItems), - } +export const StatusProgress = ({ + application, + trans, + type = true, + onConfirmationCancel, +}: StatusProgressProps) => { + const t = trans + const groupedItems = _.chain(application.applicationChecklist) + .groupBy('statusId') + .map((value, key) => ({ [key]: value.length })) + .value() - const getProgressStatus = ( - style: React.CSSProperties, - row: ApplicationRequest, - statusText: string - ) => { - return ( -
{ + return ( +
+ + - - - {statusText} - -
- ) - } + {statusText} + +
+ ) + } - if (row.applicationStatus === ApplicationRequestStatus.SUBMITTED) { - const style = { - border: items.FAILED ? '#d91e18' : '#EAF1FE', - color: items.FAILED ? '#d91e18' : '#000', - } - return ( -
- {getProgressStatus( - style, - row, - t( - `content.admin.registration-requests.${items.FAILED ? 'buttonerror' : 'buttonprogress'}` - ) - )} + if (application.applicationStatus === ApplicationRequestStatus.SUBMITTED) { + const style = { + border: items.FAILED ? '#d91e18' : '#EAF1FE', + color: items.FAILED ? '#d91e18' : '#000', + } + return ( +
+ {getProgressStatus( + style, + application, + t( + `content.admin.registration-requests.${items.FAILED ? 'buttonerror' : 'buttonprogress'}` + ) + )} + {type && ( { e.stopPropagation() - onConfirmationCancel?.(row.applicationId, row.companyName) + onConfirmationCancel?.( + application.applicationId, + application.companyName + ) }} > {t('content.admin.registration-requests.cancel')} -
- ) - } else if ( - row.applicationStatus === ApplicationRequestStatus.DECLINED || - row.applicationStatus === ApplicationRequestStatus.CANCELLED_BY_CUSTOMER - ) { - const style = { - border: '#d91e18', - color: '#d91e18', - background: '#fee7e2', - } - return getProgressStatus( - style, - row, - t('content.admin.registration-requests.buttonrejected') - ) - } else if (row.applicationStatus === ApplicationRequestStatus.CONFIRMED) { - const style = { - border: '#00AA55', - color: '#00AA55', - background: '#e2f6c7', - } - return getProgressStatus( - style, - row, - t('content.admin.registration-requests.buttoncompleted') - ) + )} +
+ ) + } else if ( + application.applicationStatus === ApplicationRequestStatus.DECLINED || + application.applicationStatus === + ApplicationRequestStatus.CANCELLED_BY_CUSTOMER + ) { + const style = { + border: '#d91e18', + color: '#d91e18', + background: '#fee7e2', } + return getProgressStatus( + style, + application, + t('content.admin.registration-requests.buttonrejected') + ) + } else if ( + application.applicationStatus === ApplicationRequestStatus.CONFIRMED + ) { + const style = { + border: '#00AA55', + color: '#00AA55', + background: '#e2f6c7', + } + return getProgressStatus( + style, + application, + t('content.admin.registration-requests.buttoncompleted') + ) } +} +// Columns definitions of Registration Request page Data Grid +export const RegistrationRequestsTableColumns = ( + t: typeof i18next.t, + showConfirmOverlay?: (applicationId: string) => void, + onConfirmationCancel?: (applicationId: string, name: string) => void +): Array => { return [ { field: 'companyInfo', @@ -229,8 +250,13 @@ export const RegistrationRequestsTableColumns = ( disableColumnMenu: true, flex: 2, sortable: false, - renderCell: ({ row }: { row: ApplicationRequest }) => - getStatusProgress(row), + renderCell: ({ row }: { row: ApplicationRequest }) => ( + + ), }, ] } diff --git a/src/components/shared/basic/ProgressVerificationButton/index.tsx b/src/components/shared/basic/ProgressVerificationButton/index.tsx index 031073bb8..85485a6c8 100644 --- a/src/components/shared/basic/ProgressVerificationButton/index.tsx +++ b/src/components/shared/basic/ProgressVerificationButton/index.tsx @@ -313,7 +313,7 @@ export const ProgressVerificationButton = ({ sx={{ paddingLeft: '15px', }} - variant="h4" + variant="label3" > {' '} {props.label} @@ -334,7 +334,7 @@ export const ProgressVerificationButton = ({
{getStepName()} @@ -351,7 +351,7 @@ export const ProgressVerificationButton = ({ paddingBottom: getAdditionalText() !== '' ? '30px' : '10px', }} - variant="body2" + variant="caption3" > {getStpeDescription()} @@ -360,7 +360,7 @@ export const ProgressVerificationButton = ({ sx={{ paddingBottom: '10px', }} - variant="body2" + variant="caption3" > {getAdditionalText()} @@ -376,9 +376,7 @@ export const ProgressVerificationButton = ({
{t('content.checklistOverlay.comments')} @@ -400,7 +398,7 @@ export const ProgressVerificationButton = ({ WebkitBoxOrient: 'vertical', height: '70px', }} - variant="body2" + variant="caption3" > {props.details ? props.details @@ -417,9 +415,7 @@ export const ProgressVerificationButton = ({
{getTitle()} @@ -435,7 +431,7 @@ export const ProgressVerificationButton = ({ sx={{ paddingBottom: '10px', }} - variant="body2" + variant="caption3" > {getDescription()} @@ -467,9 +463,7 @@ export const ProgressVerificationButton = ({
{props.retriggerableProcessSteps && diff --git a/src/components/shared/frame/Header/RegistrationReviewOverlay/RegistrationReview.scss b/src/components/shared/frame/Header/RegistrationReviewOverlay/RegistrationReview.scss index c4f6a4c95..4b15a119c 100644 --- a/src/components/shared/frame/Header/RegistrationReviewOverlay/RegistrationReview.scss +++ b/src/components/shared/frame/Header/RegistrationReviewOverlay/RegistrationReview.scss @@ -17,7 +17,7 @@ * SPDX-License-Identifier: Apache-2.0 ********************************************************************************/ .dialog-header-main { - padding: 56px 30px !important; + padding: 56px 30px 0 !important; } .actions-main { padding: 32px 30px !important; diff --git a/src/features/admin/registration/types.ts b/src/features/admin/registration/types.ts index 916a494d0..121480d0e 100644 --- a/src/features/admin/registration/types.ts +++ b/src/features/admin/registration/types.ts @@ -52,6 +52,7 @@ export type CompanyDetail = { companyId: string name: string bpn: string + lastChanged: string taxId: string streetName: string streetNumber: string