feat(procedures): implemented gdpr form

ref:MANAGER-15317

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

packages/manager/apps/procedures/src/pages/rgdp/rgdpForm/RGDPForm.component.tsx

@@ -40,7 +40,6 @@ export const RGDPForm: FunctionComponent = () => {
     }
   }, [email]);
 
-  console.log(isSubmitting);
   return (
     <form onSubmit={handleSubmit(onSubmit)} noValidate>
       <div className="my-10">

packages/manager/apps/procedures/src/pages/rgdp/rgdpForm/RGDPForm.test.tsx

@@ -9,12 +9,6 @@ import { GDPRFormValues } from '@/types/gdpr.type';
 const getOsdsElementByFormName = <T,>(fieldName: keyof GDPRFormValues) =>
   (screen.queryByTestId(`field_id_${fieldName}`) as unknown) as T;
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}));
-
 vi.mock('@ovhcloud/ods-components/react', async (importOriginal) => {
   const module: typeof OdsComponentModule = await importOriginal();
   return {

packages/manager/apps/procedures/src/pages/rgdp/rgdpForm/SelectField/SelectField.component.tsx

@@ -1,8 +1,22 @@
+import {
+  OsdsFormField,
+  OsdsSelect,
+  OsdsSelectOption,
+  OsdsText,
+} from '@ovhcloud/ods-components/react';
+import {
+  ODS_THEME_COLOR_INTENT,
+  ODS_THEME_TYPOGRAPHY_LEVEL,
+} from '@ovhcloud/ods-common-theming';
 import { Control, Controller, Validate, ValidationRule } from 'react-hook-form';
 import React, { FunctionComponent } from 'react';
-import { Select, SelectOption } from '@/components/Select/Select.component';
 import { GDPRFormValues } from '@/types/gdpr.type';
 
+export type SelectOption = {
+  label: string;
+  value: string;
+};
+
 type Props = {
   name: keyof GDPRFormValues;
   label?: string;
@@ -27,6 +41,8 @@ export const SelectField: FunctionComponent<Props> = ({
   options,
   placeholder,
 }) => {
+  const id = `field_id_${name}`;
+
   return (
     <div>
       <Controller
@@ -41,18 +57,34 @@ export const SelectField: FunctionComponent<Props> = ({
           field: { onChange, onBlur, value, name: _name },
           fieldState: { error },
         }) => (
-          <Select
-            label={label}
-            name={_name}
-            required={Boolean(required)}
-            id={`field_id_${_name}`}
-            onBlur={onBlur}
-            onChange={onChange}
-            value={value}
-            options={options}
-            placeholder={placeholder}
-            error={error?.message}
-          />
+          <OsdsFormField error={error?.message}>
+            {label && (
+              <label htmlFor={id} slot="label">
+                <OsdsText
+                  level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
+                  color={ODS_THEME_COLOR_INTENT.primary}
+                >
+                  {label}:
+                </OsdsText>
+              </label>
+            )}
+            <OsdsSelect
+              onOdsValueChange={onChange}
+              onBlur={onBlur}
+              value={value}
+              name={name}
+              required={Boolean(required)}
+              id={id}
+              inline
+            >
+              {placeholder && <span slot="placeholder">{placeholder}</span>}
+              {options.map((option, index) => (
+                <OsdsSelectOption value={option.value} key={index}>
+                  {option.label}
+                </OsdsSelectOption>
+              ))}
+            </OsdsSelect>
+          </OsdsFormField>
         )}
       />
     </div>

packages/manager/apps/procedures/src/pages/rgdp/rgdpForm/TextAreaField/TextAreaField.component.tsx

@@ -1,6 +1,14 @@
+import {
+  ODS_THEME_COLOR_INTENT,
+  ODS_THEME_TYPOGRAPHY_LEVEL,
+} from '@ovhcloud/ods-common-theming';
+import {
+  OsdsFormField,
+  OsdsText,
+  OsdsTextarea,
+} from '@ovhcloud/ods-components/react';
 import { Control, Controller, Validate, ValidationRule } from 'react-hook-form';
 import React, { FunctionComponent } from 'react';
-import { TextArea } from '@/components/TextArea/TextArea.component';
 import { GDPRFormValues } from '@/types/gdpr.type';
 
 type Props = {
@@ -23,6 +31,8 @@ export const TextAreaField: FunctionComponent<Props> = ({
   pattern,
   validate,
 }) => {
+  const id = `field_id_${name}`;
+
   return (
     <div className="mb-8">
       <Controller
@@ -37,16 +47,27 @@ export const TextAreaField: FunctionComponent<Props> = ({
           field: { onChange, onBlur, value, name: _name },
           fieldState: { error },
         }) => (
-          <TextArea
-            label={label}
-            name={_name}
-            required={Boolean(required)}
-            id={`field_id_${_name}`}
-            onBlur={onBlur}
-            onChange={onChange}
-            value={value}
-            error={error?.message}
-          />
+          <OsdsFormField error={error?.message}>
+            {label && (
+              <label htmlFor={id} slot="label">
+                <OsdsText
+                  level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
+                  color={ODS_THEME_COLOR_INTENT.primary}
+                >
+                  {label}:
+                </OsdsText>
+              </label>
+            )}
+            <OsdsTextarea
+              onOdsValueChange={onChange}
+              required={Boolean(required)}
+              name={name}
+              onOdsBlur={onBlur}
+              id={id}
+              value={value}
+              color={ODS_THEME_COLOR_INTENT.primary}
+            />
+          </OsdsFormField>
         )}
       />
     </div>