fix(consentOSP): fix VAT ID/identifier in the OSP Consent Form

src/components/pages/OSPConsent/CompanyDetails.tsx

@@ -42,6 +42,13 @@ import UserService from 'services/UserService'
 import { download } from 'utils/downloadUtils'
 import './style.scss'
 
+enum uniqueIdTypeText {
+  COMMERCIAL_REG_NUMBER = 'Commercial Registration Number',
+  VAT_ID = 'VAT ID',
+  LEI_CODE = 'LEI CODE',
+  VIES = 'VIES',
+  EORI = 'EORI',
+}
 interface CompanyDetailsProps {
   applicationId: string
   loading: boolean
@@ -58,7 +65,7 @@ export const CompanyDetails = ({
   updateConsents,
 }: CompanyDetailsProps) => {
   const tm = useTranslation().t
-  const { t } = useTranslation('registration')
+  const { t, i18n } = useTranslation('registration')
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('md'), {
     defaultMatches: true,
@@ -216,6 +223,9 @@ export const CompanyDetails = ({
     )
   }
 
+  const checkUniqueIdType = (type: string): string =>
+    uniqueIdTypeText[type as keyof typeof uniqueIdTypeText] ??
+    uniqueIdTypeText.VAT_ID
   const tableData: TableType = {
     head: [t('osp.companyName'), companyDetails?.name ?? ''],
     body: [
@@ -227,6 +237,10 @@ export const CompanyDetails = ({
       [t('osp.city'), companyDetails?.city ?? ''],
       [t('osp.region'), companyDetails?.region ?? ''],
       [t('osp.country'), companyDetails?.countryAlpha2Code ?? ''],
+      ...(companyDetails?.uniqueIds?.map((id) => [
+        checkUniqueIdType(id.type as string),
+        id.value,
+      ]) ?? []),
     ],
   }
 
@@ -279,7 +293,7 @@ export const CompanyDetails = ({
                     <Typography variant={isMobile ? 'body3' : 'body2'}>
                       {
                         role.descriptions[
-                          'en' as keyof typeof role.descriptions
+                          i18n.language as keyof typeof role.descriptions
                         ]
                       }
                     </Typography>

src/components/pages/OSPConsent/style.scss

@@ -63,6 +63,7 @@
 
     .retryBtn {
       display: inline-grid;
+
       .backBtn {
         margin-top: 20px;
       }
@@ -104,10 +105,12 @@
             list-style: none;
             font-size: 1rem;
             display: flex;
+
             .agreement-text {
               display: flex;
               margin-top: 10px;
             }
+
             .agreement-check {
               margin-right: 10px;
             }
@@ -117,6 +120,7 @@
             color: #0d6efd;
             cursor: pointer;
             text-decoration: underline;
+            padding: 0 5px;
           }
         }
       }
@@ -125,16 +129,20 @@
     .registration-confirmation {
       text-align: center;
       margin: 50px 0 0;
+
       .description {
         margin: 30px 0 30px;
       }
+
       .statusDetails {
         width: 60%;
         margin: 0 auto;
+
         .stepTitle {
           text-align: left;
         }
       }
+
       .homeBtn {
         margin-top: 50px;
       }
@@ -143,6 +151,7 @@
     .registration-error {
       text-align: center;
       margin: 50px 0 0;
+
       .description {
         margin: 30px 0 30px;
       }
@@ -153,28 +162,36 @@
         margin: 75px 0 0;
         text-align: left;
       }
+
       .heading::after {
         display: none;
       }
+
       .agreement-text {
         display: inline !important;
       }
+
       .registration-confirmation {
         text-align: left;
         margin: 0;
+
         .statusDetails {
           width: 100%;
+
           .stepTitle {
             text-align: center;
           }
         }
+
         .homeBtn {
           text-align: center;
         }
       }
+
       .registration-error {
         text-align: left;
         margin: 0;
+
         .retryBtn {
           text-align: center;
           display: block;