feat(procedures): implement gdpr form introduction (#13491)

ref: MANAGER-15315

Signed-off-by: Omar ALKABOUSS MOUSSANA <[email protected]>

packages/manager/apps/procedures/src/pages/rgdp/RGDP.page.page.test.tsx

@@ -1,33 +1,17 @@
 import { render, screen } from '@testing-library/react';
 import { describe, it, vi } from 'vitest';
-import { useTranslation } from 'react-i18next';
-import { MemoryRouter } from 'react-router-dom';
 import React from 'react';
 import RGDP from './RGDP.page';
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: vi.fn((key) => key),
-  }),
-}));
-
-vi.mock('@ovhcloud/ods-components/react', () => ({
-  OsdsText: ({ children, color, level, size, className }: any) => (
-    <div data-testid="osds-text" color={color} className={className}>
-      {children}
-    </div>
-  ),
+vi.mock('./rgdpIntroduction/RGDPIntroduction.component', () => ({
+  RGDPIntroduction: () => <div>RGDPIntroduction</div>,
 }));
 
 describe('RGDP Component', () => {
   it('renders the component correctly', () => {
-    render(
-      <MemoryRouter>
-        <RGDP />
-      </MemoryRouter>,
-    );
+    render(<RGDP />);
 
-    const titleElement = screen.getByText('rgdp-title');
-    expect(titleElement).toBeInTheDocument();
+    const introductionElement = screen.getByText('RGDPIntroduction');
+    expect(introductionElement).toBeInTheDocument();
   });
 });

packages/manager/apps/procedures/src/pages/rgdp/RGDP.page.tsx

@@ -1,28 +1,11 @@
-import {
-  ODS_THEME_COLOR_INTENT,
-  ODS_THEME_TYPOGRAPHY_LEVEL,
-} from '@ovhcloud/ods-common-theming';
-import { OsdsText } from '@ovhcloud/ods-components/react';
-import { ODS_TEXT_SIZE } from '@ovhcloud/ods-components';
-import { useTranslation } from 'react-i18next';
-import { Outlet } from 'react-router-dom';
 import React from 'react';
 import { PageLayout } from '@/components/PageLayout/PageLayout.component';
+import { RGDPIntroduction } from './rgdpIntroduction/RGDPIntroduction.component';
 
 export default function RGDP() {
-  const { t } = useTranslation('rgdp');
-
   return (
     <PageLayout>
-      <OsdsText
-        color={ODS_THEME_COLOR_INTENT.info}
-        level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
-        className="block mb-6 text-center"
-        size={ODS_TEXT_SIZE._500}
-      >
-        {t('rgdp-title')}
-      </OsdsText>
-      <Outlet />
+      <RGDPIntroduction />
     </PageLayout>
   );
 }

packages/manager/apps/procedures/src/pages/rgdp/rgdpIntroduction/RGDPIntroduction.component.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, vi } from 'vitest';
+import React from 'react';
+import { RGDPIntroduction } from './RGDPIntroduction.component';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: vi.fn((key) => key),
+  }),
+  Trans: ({ i18nKey }: any) => <div>{i18nKey}</div>,
+}));
+
+vi.mock('@ovhcloud/ods-components/react', () => ({
+  OsdsText: ({ children, color, level, size, className }: any) => (
+    <div data-testid="osds-text" color={color} className={className}>
+      {children}
+    </div>
+  ),
+}));
+
+describe('RGDPIntroduction Component', () => {
+  it('renders the component correctly', () => {
+    render(<RGDPIntroduction />);
+
+    const titleElement = screen.getByText('rgdp_introduction_title');
+    expect(titleElement).toBeInTheDocument();
+
+    const purposeElement = screen.getByText(
+      'rgdp_introduction_content_purpose',
+    );
+    expect(purposeElement).toBeInTheDocument();
+
+    const identityVerificationElement = screen.getByText(
+      'rgdp_introduction_content_identity_verification',
+    );
+    expect(identityVerificationElement).toBeInTheDocument();
+
+    const clientAreaElement = screen.getByText(
+      'rgdp_introduction_content_client_area',
+    );
+    expect(clientAreaElement).toBeInTheDocument();
+
+    const noteElement = screen.getByText('rgdp_introduction_please_note');
+    expect(noteElement).toBeInTheDocument();
+  });
+});

packages/manager/apps/procedures/src/pages/rgdp/rgdpIntroduction/RGDPIntroduction.component.tsx

@@ -0,0 +1,57 @@
+import { OsdsText } from '@ovhcloud/ods-components/react';
+import { ODS_TEXT_SIZE } from '@ovhcloud/ods-components';
+import { Trans, useTranslation } from 'react-i18next';
+import React, { FunctionComponent } from 'react';
+import {
+  ODS_THEME_COLOR_INTENT,
+  ODS_THEME_TYPOGRAPHY_LEVEL,
+} from '@ovhcloud/ods-common-theming';
+
+export const RGDPIntroduction: FunctionComponent = () => {
+  const { t } = useTranslation('rgdp');
+
+  return (
+    <>
+      <OsdsText
+        color={ODS_THEME_COLOR_INTENT.info}
+        level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
+        className="block mb-6 text-center"
+        size={ODS_TEXT_SIZE._500}
+      >
+        {t('rgdp_introduction_title')}
+      </OsdsText>
+
+      <div className="flex flex-col gap-4">
+        <OsdsText
+          color={ODS_THEME_COLOR_INTENT.text}
+          size={ODS_TEXT_SIZE._500}
+          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
+        >
+          {t('rgdp_introduction_content_purpose')}
+        </OsdsText>
+        <OsdsText
+          color={ODS_THEME_COLOR_INTENT.text}
+          size={ODS_TEXT_SIZE._500}
+          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
+        >
+          {t('rgdp_introduction_content_identity_verification')}
+        </OsdsText>
+        <OsdsText
+          color={ODS_THEME_COLOR_INTENT.text}
+          size={ODS_TEXT_SIZE._500}
+          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
+        >
+          {t('rgdp_introduction_content_client_area')}
+        </OsdsText>
+        <OsdsText
+          class="mt-2"
+          color={ODS_THEME_COLOR_INTENT.text}
+          size={ODS_TEXT_SIZE._500}
+          level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
+        >
+          <Trans t={t} i18nKey={'rgdp_introduction_please_note'}></Trans>
+        </OsdsText>
+      </div>
+    </>
+  );
+};

packages/manager/apps/procedures/src/public/translations/rgdp/Messages_fr_FR.json

@@ -1,3 +1,7 @@
 {
-  "rgdp-title": "Comment exercer vos droits ou contacter le DPO"
+  "rgdp_introduction_title": "Comment exercer vos droits ou contacter le DPO",
+  "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."
 }