From 9d112efd052399cf7352ef4836a4fc2922b4bdd9 Mon Sep 17 00:00:00 2001 From: Omar Date: Thu, 17 Oct 2024 10:41:07 +0200 Subject: [PATCH] feat(procedures): rgpd add legal notice component (#13611) ref: MANAGER-15376 Signed-off-by: Omar ALKABOUSS MOUSSANA --- .../LegalInformations.component.tsx} | 34 ++++++--- .../LegalInformations.test.tsx | 76 +++++++++++++++++++ .../pages/disableMFA/create/Create.page.tsx | 8 +- .../pages/disableMFA/create/Create.spec.tsx | 38 +++------- .../src/pages/rgdp/RGDP.page.page.test.tsx | 8 +- .../procedures/src/pages/rgdp/RGDP.page.tsx | 6 ++ .../translations/rgdp/Messages_fr_FR.json | 4 +- 7 files changed, 131 insertions(+), 43 deletions(-) rename packages/manager/apps/procedures/src/{pages/disableMFA/create/LegalInformations.tsx => components/legalInformations/LegalInformations.component.tsx} (70%) create mode 100644 packages/manager/apps/procedures/src/components/legalInformations/LegalInformations.test.tsx diff --git a/packages/manager/apps/procedures/src/pages/disableMFA/create/LegalInformations.tsx b/packages/manager/apps/procedures/src/components/legalInformations/LegalInformations.component.tsx similarity index 70% rename from packages/manager/apps/procedures/src/pages/disableMFA/create/LegalInformations.tsx rename to packages/manager/apps/procedures/src/components/legalInformations/LegalInformations.component.tsx index 85c348b190da..aabe03955d40 100644 --- a/packages/manager/apps/procedures/src/pages/disableMFA/create/LegalInformations.tsx +++ b/packages/manager/apps/procedures/src/components/legalInformations/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 = ({ + 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 ( -
+
- {t('account-disable-2fa-create-form-legal-info')} + {t(informationTranslationKey)} ({ + 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( + , + ); + + 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( + , + ); + + 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 index 715958a107b2..f382501d25b2 100644 --- 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() { - +
); } 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 index 9f726520fc6a..2e452dba21fa 100644 --- 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,7 +2,6 @@ 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', @@ -10,39 +9,22 @@ const user = { 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: () =>
2FALegalInformations
, +})); + 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(); + it('renders the component correctly', () => { + const { getByText } = render(); + + 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 index ae484b8d8abf..83b3958ac39e 100644 --- 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: () =>
RGDPForm
, })); +vi.mock('@/components/legalInformations/LegalInformations.component', () => ({ + LegalInformations: () =>
RGDPLegalInformations
, +})); + describe('RGDP Component', () => { it('renders the component correctly', () => { render(); 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 index 8fbee22e59c9..9cc7428f2838 100644 --- 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 ( + ); } 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 index 5efc802dfdc4..9c5886bdbbff 100644 --- 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 Politique d'utilisation de données à caractère personnel OVHcloud." }