feat(procedures): rgpd add legal notice component (#13611)

ref: MANAGER-15376 Signed-off-by: Omar ALKABOUSS MOUSSANA <[email protected]>
ovh · Oct 17, 2024 · 9d112ef · 9d112ef
1 parent 6916a19
commit 9d112ef
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 43 deletions.
diff --git a/...s/disableMFA/create/LegalInformations.tsx → ...ormations/LegalInformations.component.tsx b/...s/disableMFA/create/LegalInformations.tsx → ...ormations/LegalInformations.component.tsx
@@ -1,20 +1,31 @@
-import React, { FunctionComponent } from 'react';
-import { OsdsText } from '@ovhcloud/ods-components/react';
-import { useTranslation } from 'react-i18next';
 import {
   ODS_THEME_COLOR_INTENT,
   ODS_THEME_TYPOGRAPHY_LEVEL,
 } from '@ovhcloud/ods-common-theming';
 import { ODS_TEXT_SIZE } from '@ovhcloud/ods-components';
+import { OsdsText } from '@ovhcloud/ods-components/react';
+import React, { FunctionComponent } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { CanadianPolicyLinks } from '@/types/links.type';
 import useUser from '@/context/User/useUser';
 import { LegalPolicyLinkByLanguage } from '@/constants';
-import { CanadianPolicyLinks } from '@/types/links.type';
 
-export const LegalInformations: FunctionComponent = () => {
+type Props = {
+  translationNamespace: string;
+  informationTranslationKey: string;
+  policyTanslationKey: string;
+};
+
+export const LegalInformations: FunctionComponent<Props> = ({
+  translationNamespace,
+  informationTranslationKey,
+  policyTanslationKey,
+}) => {
   const {
     t,
     i18n: { language },
-  } = useTranslation('account-disable-2fa');
+  } = useTranslation(translationNamespace);
+
   const {
     user: { subsidiary },
   } = useUser();
@@ -26,27 +37,28 @@ export const LegalInformations: FunctionComponent = () => {
         LegalPolicyLinkByLanguage.CA.en
       : LegalPolicyLinkByLanguage[subsidiary] ||
         LegalPolicyLinkByLanguage.DEFAULT;
+
   return (
-    <div className="pt-6" data-testid="legal_information">
+    <div className="pt-6">
       <OsdsText
         color={ODS_THEME_COLOR_INTENT.text}
         level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
         className="block"
         size={ODS_TEXT_SIZE._100}
       >
-        {t('account-disable-2fa-create-form-legal-info')}
+        {t(informationTranslationKey)}
       </OsdsText>
 
       <OsdsText
         color={ODS_THEME_COLOR_INTENT.text}
         level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
-        className="block"
+        className="block mt-3"
         size={ODS_TEXT_SIZE._100}
       >
         <span
-          data-testid="legal_information_content"
+          data-testid="legal_information_policy_content"
           dangerouslySetInnerHTML={{
-            __html: t('account-disable-2fa-create-form-legal-info-policy', {
+            __html: t(policyTanslationKey, {
               legalPolicyLink,
             }),
           }}

diff --git a/packages/manager/apps/procedures/src/components/legalInformations/LegalInformations.test.tsx b/packages/manager/apps/procedures/src/components/legalInformations/LegalInformations.test.tsx
@@ -0,0 +1,76 @@
+import { render } from '@testing-library/react';
+import { describe, it, vi } from 'vitest';
+import React from 'react';
+import { LegalInformations } from './LegalInformations.component';
+import { LegalPolicyLinkByLanguage } from '@/constants';
+
+const faketTranslationNamespace = 'tkey';
+const faketpolicyTanslationKey = 'policyKey';
+const faketinformationTranslationKey = 'informationKey';
+
+const user = {
+  legalForm: 'other',
+  subsidiary: 'FR',
+  language: 'en_CA',
+};
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (translationKey: string, args: any) =>
+      args ? `${translationKey} ${JSON.stringify(args)}` : translationKey,
+    i18n: {
+      language: user.language,
+    },
+  }),
+}));
+
+vi.mock('@/context/User/useUser', () => ({
+  default: () => ({
+    user,
+  }),
+}));
+
+describe('LegalInformations.component', () => {
+  it('should renders the legal information', () => {
+    const { getByText } = render(
+      <LegalInformations
+        translationNamespace={faketTranslationNamespace}
+        policyTanslationKey={faketpolicyTanslationKey}
+        informationTranslationKey={faketinformationTranslationKey}
+      />,
+    );
+
+    const legalInfoElement = getByText(faketinformationTranslationKey);
+    expect(legalInfoElement).toBeInTheDocument();
+  });
+
+  it.each([
+    ['FR', 'anything', LegalPolicyLinkByLanguage.FR],
+    ['CA', 'en_CA', LegalPolicyLinkByLanguage.CA.en],
+    ['CA', 'fr_CA', LegalPolicyLinkByLanguage.CA.fr],
+    ['CA', 'fr_FR', LegalPolicyLinkByLanguage.CA.fr],
+    ['CA', 'en_IN', LegalPolicyLinkByLanguage.CA.en],
+    ['unknown', 'anything', LegalPolicyLinkByLanguage.DEFAULT],
+  ])(
+    'should have the correct link for %s user speaking %s',
+    async (sub, locale, result) => {
+      user.subsidiary = sub;
+      user.language = locale;
+
+      const { getByTestId } = render(
+        <LegalInformations
+          translationNamespace={faketTranslationNamespace}
+          policyTanslationKey={faketpolicyTanslationKey}
+          informationTranslationKey={faketinformationTranslationKey}
+        />,
+      );
+
+      const legalInformationPolicyContent = getByTestId(
+        'legal_information_policy_content',
+      );
+      expect(legalInformationPolicyContent.innerHTML.includes(result)).toBe(
+        true,
+      );
+    },
+  );
+});
diff --git a/packages/manager/apps/procedures/src/pages/disableMFA/create/Create.page.tsx b/packages/manager/apps/procedures/src/pages/disableMFA/create/Create.page.tsx
@@ -8,7 +8,7 @@ import {
 } from '@ovhcloud/ods-common-theming';
 import { ODS_TEXT_SIZE } from '@ovhcloud/ods-components';
 import useUser from '@/context/User/useUser';
-import { LegalInformations } from './LegalInformations';
+import { LegalInformations } from '@/components/legalInformations/LegalInformations.component';
 
 export default function CreateRequest() {
   const { t } = useTranslation('account-disable-2fa');
@@ -68,7 +68,11 @@ export default function CreateRequest() {
 
       <Outlet />
 
-      <LegalInformations />
+      <LegalInformations
+        translationNamespace="account-disable-2fa"
+        informationTranslationKey="account-disable-2fa-create-form-legal-info"
+        policyTanslationKey="account-disable-2fa-create-form-legal-info-policy"
+      />
     </div>
   );
 }
diff --git a/packages/manager/apps/procedures/src/pages/disableMFA/create/Create.spec.tsx b/packages/manager/apps/procedures/src/pages/disableMFA/create/Create.spec.tsx
@@ -2,47 +2,29 @@ import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { render } from '@testing-library/react';
 import Create from '@/pages/disableMFA/create/Create.page';
-import { LegalPolicyLinkByLanguage } from '@/constants';
 
 const user = {
   legalForm: 'other',
   subsidiary: 'FR',
   language: 'en_CA',
 };
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (translationKey: string, args: any) =>
-      `${translationKey} ${JSON.stringify(args)}`,
-    i18n: {
-      language: user.language,
-    },
-  }),
-}));
-
 vi.mock('@/context/User/useUser', () => ({
   default: () => ({
     user,
   }),
 }));
 
+vi.mock('@/components/legalInformations/LegalInformations.component', () => ({
+  LegalInformations: () => <div>2FALegalInformations</div>,
+}));
+
 describe('Create.page', () => {
-  it.each([
-    ['FR', 'anything', LegalPolicyLinkByLanguage.FR],
-    ['CA', 'en_CA', LegalPolicyLinkByLanguage.CA.en],
-    ['CA', 'fr_CA', LegalPolicyLinkByLanguage.CA.fr],
-    ['CA', 'fr_FR', LegalPolicyLinkByLanguage.CA.fr],
-    ['CA', 'en_IN', LegalPolicyLinkByLanguage.CA.en],
-    ['unknown', 'anything', LegalPolicyLinkByLanguage.DEFAULT],
-  ])(
-    'should have the correct link for %s user speaking %s',
-    async (sub, locale, result) => {
-      user.subsidiary = sub;
-      user.language = locale;
-      const { getByTestId } = render(<Create />);
+  it('renders the component correctly', () => {
+    const { getByText } = render(<Create />);
+
+    const legalElement = getByText('2FALegalInformations');
 
-      const legalInformationContent = getByTestId('legal_information_content');
-      expect(legalInformationContent.innerHTML.includes(result)).toBe(true);
-    },
-  );
+    expect(legalElement).toBeInTheDocument();
+  });
 });
diff --git a/packages/manager/apps/procedures/src/pages/rgdp/RGDP.page.page.test.tsx b/packages/manager/apps/procedures/src/pages/rgdp/RGDP.page.page.test.tsx
@@ -11,14 +11,20 @@ vi.mock('./rgdpForm/RGDPForm.component', () => ({
   RGDPForm: () => <div>RGDPForm</div>,
 }));
 
+vi.mock('@/components/legalInformations/LegalInformations.component', () => ({
+  LegalInformations: () => <div>RGDPLegalInformations</div>,
+}));
+
 describe('RGDP Component', () => {
   it('renders the component correctly', () => {
     render(<RGDP />);
 
     const introductionElement = screen.getByText('RGDPIntroduction');
     const formElement = screen.getByText('RGDPForm');
+    const legalElement = screen.getByText('RGDPLegalInformations');
 
-    expect(introductionElement).toBeInTheDocument();
     expect(formElement).toBeInTheDocument();
+    expect(introductionElement).toBeInTheDocument();
+    expect(legalElement).toBeInTheDocument();
   });
 });
diff --git a/packages/manager/apps/procedures/src/pages/rgdp/RGDP.page.tsx b/packages/manager/apps/procedures/src/pages/rgdp/RGDP.page.tsx
@@ -2,12 +2,18 @@ import React from 'react';
 import { PageLayout } from '@/components/PageLayout/PageLayout.component';
 import { RGDPIntroduction } from './rgdpIntroduction/RGDPIntroduction.component';
 import { RGDPForm } from './rgdpForm/RGDPForm.component';
+import { LegalInformations } from '@/components/legalInformations/LegalInformations.component';
 
 export default function RGDP() {
   return (
     <PageLayout>
       <RGDPIntroduction />
       <RGDPForm />
+      <LegalInformations
+        translationNamespace="rgdp"
+        informationTranslationKey="rgdp_legal_information"
+        policyTanslationKey="rgdp_legal_information_policy"
+      />
     </PageLayout>
   );
 }
diff --git a/packages/manager/apps/procedures/src/public/translations/rgdp/Messages_fr_FR.json b/packages/manager/apps/procedures/src/public/translations/rgdp/Messages_fr_FR.json
@@ -26,5 +26,7 @@
   "rgdp_form_subject_limitation_right": "Droit à la limitation du traitement",
   "rgdp_form_subject_portability_right": "Droit à la portabilité des données",
   "rgdp_form_subject_payment_method_remove": "Suppression des informations de paiement",
-  "rgdp_form_subject_other_request": "Autre demande"
+  "rgdp_form_subject_other_request": "Autre demande",
+  "rgdp_legal_information": "Les données collectées ci-dessus sont nécessaires au traitement de votre demande. Elles seront conservées pour une durée de 5 ans. Dans l'hypothèse où une copie de votre pièce d'identité viendrait à vous être demandé, celle-ci sera conservée pour une durée maximale de 15 jours.",
+  "rgdp_legal_information_policy": "Pour en savoir plus, sur le traitement de vos données personnelles et connaître vos droits, vous pouvez consulter notre <a style='color:#2563eb; font-weight: 700;' href='{{legalPolicyLink}}' target='_blank'>Politique d'utilisation de données à caractère personnel OVHcloud.</a>"
 }