Skip to content

Commit

Permalink
feat(procedures): rgpd add legal notice component
Browse files Browse the repository at this point in the history
ref: MANAGER-15376

Signed-off-by: Omar ALKABOUSS MOUSSANA <omar.alkabouss-moussana.ext@corp.ovh.com>
  • Loading branch information
Omar ALKABOUSS MOUSSANA committed Oct 16, 2024
1 parent 7140bc0 commit 285787b
Showing 7 changed files with 131 additions and 42 deletions.
Original file line number Diff line number Diff line change
@@ -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,
}),
}}
Original file line number Diff line number Diff line change
@@ -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,
);
},
);
});
Original file line number Diff line number Diff line change
@@ -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>
);
}
Original file line number Diff line number Diff line change
@@ -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();
});
});
Original file line number Diff line number Diff line change
@@ -7,11 +7,18 @@ vi.mock('./rgdpIntroduction/RGDPIntroduction.component', () => ({
RGDPIntroduction: () => <div>RGDPIntroduction</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 legalElement = screen.getByText('RGDPLegalInformations');

expect(introductionElement).toBeInTheDocument();
expect(legalElement).toBeInTheDocument();
});
});
6 changes: 6 additions & 0 deletions packages/manager/apps/procedures/src/pages/rgdp/RGDP.page.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
import React from 'react';
import { PageLayout } from '@/components/PageLayout/PageLayout.component';
import { RGDPIntroduction } from './rgdpIntroduction/RGDPIntroduction.component';
import { LegalInformations } from '@/components/legalInformations/LegalInformations.component';

export default function RGDP() {
return (
<PageLayout>
<RGDPIntroduction />
<LegalInformations
translationNamespace="rgdp"
informationTranslationKey="rgdp_legal_information"
policyTanslationKey="rgdp_legal_information_policy"
/>
</PageLayout>
);
}
Original file line number Diff line number Diff line change
@@ -3,5 +3,7 @@
"rgdp_introduction_content_purpose": "Ce formulaire a pour but de faciliter l'exercice de vos droits sur les données à caractère personnel vous concernant traitées par OVHcloud et ses sociétés affiliées.",
"rgdp_introduction_content_identity_verification": "Dans l'hypothèse d'une incertitude relative à l'identité du demandeur, OVHcloud pourra vous demander des informations complémentaires relatives à votre identité ou copie d'une pièce d'identité.",
"rgdp_introduction_content_client_area": "Vous pouvez également exercer vos droits directement via votre espace client.",
"rgdp_introduction_please_note": "<strong>Attention</strong>, ce formulaire ne concerne pas les traitements réalisés par des tiers utilisant des services d'OVHcloud (ex. un site internet hébergé par OVHcloud). Dans ce cas, il convient de prendre contact directement auprès du tiers. Vous pouvez également utiliser le formulaire de contact « Abuse » d'OVHcloud."
"rgdp_introduction_please_note": "<strong>Attention</strong>, ce formulaire ne concerne pas les traitements réalisés par des tiers utilisant des services d'OVHcloud (ex. un site internet hébergé par OVHcloud). Dans ce cas, il convient de prendre contact directement auprès du tiers. Vous pouvez également utiliser le formulaire de contact « Abuse » d'OVHcloud.",
"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>"
}

0 comments on commit 285787b

Please sign in to comment.