fix(account-creation): add siren field in account creation

ref: #MANAGER-20005

Signed-off-by: achraf hafedh <[email protected]>

Author: achraf hafedh

packages/manager/apps/account-creation/public/translations/account-details/Messages_de_DE.json

@@ -12,6 +12,7 @@
   "account_details_field_name": "Name",
   "account_details_field_corporation_name": "Firmenname",
   "account_details_field_siret": "SIRET",
+  "account_details_field_siren": "SIREN",
   "account_details_field_vat": "USt - IdNr.",
   "account_details_field_country": "Land des Wohnsitzes",
   "account_details_field_address": "Adresse",

packages/manager/apps/account-creation/public/translations/account-details/Messages_en_GB.json

@@ -12,6 +12,7 @@
   "account_details_field_name": "Name",
   "account_details_field_corporation_name": "Name of company",
   "account_details_field_siret": "SIRET",
+  "account_details_field_siren": "SIREN",
   "account_details_field_vat": "VAT number",
   "account_details_field_country": "Country of residence",
   "account_details_field_address": "Address ",

packages/manager/apps/account-creation/public/translations/account-details/Messages_es_ES.json

@@ -12,6 +12,7 @@
   "account_details_field_name": "Nombre",
   "account_details_field_corporation_name": "Razón social",
   "account_details_field_siret": "SIRET",
+  "account_details_field_siren": "SIREN",
   "account_details_field_vat": "Número de IVA",
   "account_details_field_country": "País de residencia",
   "account_details_field_address": "Dirección",

packages/manager/apps/account-creation/public/translations/account-details/Messages_fr_CA.json

@@ -12,6 +12,7 @@
   "account_details_field_name": "Nom",
   "account_details_field_corporation_name": "Raison sociale",
   "account_details_field_siret": "SIRET",
+  "account_details_field_siren": "SIREN",
   "account_details_field_vat": "Numéro de TVA",
   "account_details_field_country": "Pays de résidence",
   "account_details_field_address": "Adresse",

packages/manager/apps/account-creation/public/translations/account-details/Messages_fr_FR.json

@@ -19,6 +19,7 @@
   "account_details_field_name": "Nom",
   "account_details_field_corporation_name": "Raison sociale",
   "account_details_field_siret": "SIRET",
+  "account_details_field_siren": "SIREN",
   "account_details_field_vat": "Numéro de TVA",
   "account_details_field_country": "Pays de résidence",
   "account_details_field_address": "Adresse",

packages/manager/apps/account-creation/public/translations/account-details/Messages_it_IT.json

@@ -12,6 +12,7 @@
   "account_details_field_name": "Nome",
   "account_details_field_corporation_name": "Ragione sociale",
   "account_details_field_siret": "SIRET",
+  "account_details_field_siren": "SIREN",
   "account_details_field_vat": "Numero di P. IVA",
   "account_details_field_country": "Paese di residenza",
   "account_details_field_address": "Indirizzo",

packages/manager/apps/account-creation/public/translations/account-details/Messages_pl_PL.json

@@ -12,6 +12,7 @@
   "account_details_field_name": "Nazwa",
   "account_details_field_corporation_name": "Nazwa firmy",
   "account_details_field_siret": "SIRET",
+  "account_details_field_siren": "SIREN",
   "account_details_field_vat": "Numer NIP",
   "account_details_field_country": "Kraj",
   "account_details_field_address": "Adres siedziby/zamieszkania i pobytu",

packages/manager/apps/account-creation/public/translations/account-details/Messages_pt_PT.json

@@ -12,6 +12,7 @@
   "account_details_field_name": "Nome",
   "account_details_field_corporation_name": "Razão social",
   "account_details_field_siret": "SIRET",
+  "account_details_field_siren": "SIREN",
   "account_details_field_vat": "Número de IVA",
   "account_details_field_country": "País de residência",
   "account_details_field_address": "Morada",

packages/manager/apps/account-creation/src/helpers/flowHelper.ts

@@ -1,6 +1,20 @@
 import { Country, LegalForm } from '@ovh-ux/manager-config';
 
-export const shouldAccessCompanySearch = (
+export const shouldAccessOrganizationSearch = (
   country?: Country,
   legalForm?: LegalForm,
 ) => country === 'FR' && legalForm && legalForm !== 'individual';
+
+export const shouldEnableSIRENDisplay = (
+  country?: Country,
+  legalForm?: LegalForm,
+) => country === 'FR' && legalForm === 'corporation';
+
+export const getSirenFromSiret = (
+  siret?: string,
+  pattern?: string | null,
+): string | null => {
+  if (!siret || !pattern) return null;
+
+  return new RegExp(pattern).test(siret) ? siret.substring(0, 9) : null;
+};

packages/manager/apps/account-creation/src/pages/accountDetails/accountDetails.page.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Controller, SubmitHandler, useForm } from 'react-hook-form';
+import { Controller, SubmitHandler, useForm, useWatch } from 'react-hook-form';
 import { useMutation } from '@tanstack/react-query';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -44,7 +44,11 @@ import {
 } from '@/hooks/zod/useZod';
 import { putMe } from '@/data/api/me';
 import { urls } from '@/routes/routes.constant';
-import { shouldAccessCompanySearch } from '@/helpers/flowHelper';
+import {
+  getSirenFromSiret,
+  shouldAccessOrganizationSearch,
+  shouldEnableSIRENDisplay,
+} from '@/helpers/flowHelper';
 
 type AccountDetailsFormProps = {
   rules: Record<RuleField, Rule>;
@@ -113,6 +117,28 @@ function AccountDetailsForm({
     resolver: zodResolver(zodSchema),
   });
 
+  const shouldDisplaySIREN = useMemo(
+    () => shouldEnableSIRENDisplay(currentUser.country, legalForm),
+    [currentUser.country, legalForm],
+  );
+
+  const corporationIdValue = useWatch({
+    control,
+    name: 'companyNationalIdentificationNumber',
+  });
+
+  const sirenValue = useMemo(
+    () =>
+      getSirenFromSiret(
+        corporationIdValue,
+        rules?.companyNationalIdentificationNumber?.regularExpression,
+      ),
+    [
+      corporationIdValue,
+      rules?.companyNationalIdentificationNumber?.regularExpression,
+    ],
+  );
+
   const phoneCountry = watch('phoneCountry');
 
   useEffect(() => {
@@ -291,41 +317,63 @@ function AccountDetailsForm({
                 control={control}
                 name="companyNationalIdentificationNumber"
                 render={({ field: { name, value, onChange, onBlur } }) => (
-                  <OdsFormField>
-                    <label
-                      htmlFor={name}
-                      slot="label"
-                      aria-label={t('account_details_field_siret')}
-                    >
-                      <OdsText preset="caption">
-                        {t('account_details_field_siret')}
-                      </OdsText>
-                    </label>
-                    <OdsInput
-                      isReadonly={Boolean(companyNationalIdentificationNumber)}
-                      name="companyNationalIdentificationNumber"
-                      value={value}
-                      maxlength={
-                        rules?.companyNationalIdentificationNumber.maxLength ||
-                        undefined
-                      }
-                      hasError={!!errors[name]}
-                      onOdsChange={onChange}
-                      onOdsBlur={onBlur}
-                    />
-                    {errors[name] &&
-                      rules?.companyNationalIdentificationNumber && (
-                        <OdsText
-                          className="text-critical leading-[0.8]"
-                          preset="caption"
-                        >
-                          {renderTranslatedZodError(
-                            errors[name].message,
-                            rules?.companyNationalIdentificationNumber,
-                          )}
+                  <>
+                    <OdsFormField>
+                      <label
+                        htmlFor={name}
+                        slot="label"
+                        aria-label={t('account_details_field_siret')}
+                      >
+                        <OdsText preset="caption">
+                          {t('account_details_field_siret')}
                         </OdsText>
-                      )}
-                  </OdsFormField>
+                      </label>
+                      <OdsInput
+                        isReadonly={Boolean(
+                          companyNationalIdentificationNumber,
+                        )}
+                        name="companyNationalIdentificationNumber"
+                        value={value}
+                        maxlength={
+                          rules?.companyNationalIdentificationNumber
+                            .maxLength || undefined
+                        }
+                        hasError={!!errors[name]}
+                        onOdsChange={onChange}
+                        onOdsBlur={onBlur}
+                      />
+                      {errors[name] &&
+                        rules?.companyNationalIdentificationNumber && (
+                          <OdsText
+                            className="text-critical leading-[0.8]"
+                            preset="caption"
+                          >
+                            {renderTranslatedZodError(
+                              errors[name].message,
+                              rules?.companyNationalIdentificationNumber,
+                            )}
+                          </OdsText>
+                        )}
+                    </OdsFormField>
+                    {shouldDisplaySIREN && (
+                      <OdsFormField>
+                        <label
+                          htmlFor="companyNationalRegistrationNumber"
+                          slot="label"
+                          aria-label={t('account_details_field_siren')}
+                        >
+                          <OdsText preset="caption">
+                            {t('account_details_field_siren')}
+                          </OdsText>
+                        </label>
+                        <OdsInput
+                          isReadonly
+                          name="companyNationalRegistrationNumber"
+                          value={sirenValue}
+                        />
+                      </OdsFormField>
+                    )}
+                  </>
                 )}
               />
             )}
@@ -695,7 +743,7 @@ export default function AccountDetailsPage() {
   const { t: tAction } = useTranslation(NAMESPACES.ACTIONS);
   const { legalForm, organisation } = useUserContext();
   const { data: currentUser } = useMe();
-  const wentThroughCompanySearch = shouldAccessCompanySearch(
+  const wentThroughOrganizationSearch = shouldAccessOrganizationSearch(
     currentUser?.country,
     legalForm,
   );
@@ -740,11 +788,13 @@ export default function AccountDetailsPage() {
       <OdsLink
         icon={ODS_ICON_NAME.arrowLeft}
         iconAlignment={ODS_LINK_ICON_ALIGNMENT.left}
-        href={`#${wentThroughCompanySearch ? urls.company : urls.accountType}`}
+        href={`#${
+          wentThroughOrganizationSearch ? urls.company : urls.accountType
+        }`}
         label={tAction('back')}
         className="flex mb-6"
       />
-      {wentThroughCompanySearch && (
+      {wentThroughOrganizationSearch && (
         <OdsText preset={ODS_TEXT_PRESET.caption}>
           {tCommon('step', { current: 2, total: 2 })}
         </OdsText>