Merge pull request #320 from ReseauEntourage/feature/EN-7350-Inscript…

…ion-Case-Newsletter [EN-7350] Onboarding - Add newsletter optin checkbox
ReseauEntourage · Aug 2, 2024 · ac19d9f · ac19d9f
2 parents 4913b58 + 456c230
commit ac19d9f
Show file tree

Hide file tree

Showing 12 changed files with 94 additions and 12 deletions.
diff --git a/src/components/backoffice/onboarding/Onboarding.utils.ts b/src/components/backoffice/onboarding/Onboarding.utils.ts
@@ -5,7 +5,7 @@ import {
 } from 'src/utils';
 import { FlattenedOnboardingFormData } from './Onboarding.types';
 
-export const parseOnboadingFields = (
+export const parseOnboadingProfileFields = (
   fields: Partial<FlattenedOnboardingFormData>
 ): Partial<UserProfile> => {
   return {

diff --git a/...mponents/backoffice/onboarding/Onboarding/forms/schemas/formOnboardingCandidateProfile.ts b/...mponents/backoffice/onboarding/Onboarding/forms/schemas/formOnboardingCandidateProfile.ts
@@ -2,6 +2,7 @@ import { FormSchema } from 'src/components/forms/FormSchema';
 
 export const formOnboardingCandidateProfile: FormSchema<{
   description: string;
+  optinNewsletter: boolean;
 }> = {
   id: 'form-onboarding-profile',
   fields: [
@@ -16,5 +17,13 @@ export const formOnboardingCandidateProfile: FormSchema<{
       rows: 14,
       maxLines: { lines: 5, width: 655 },
     },
+    {
+      id: 'optinNewsletter',
+      name: 'optinNewsletter',
+      component: 'checkbox-alert',
+      title:
+        'En cochant cette case, j’accepte de recevoir des informations et des actualités sur le programme entourage pro',
+      showLabel: true,
+    },
   ],
 };
diff --git a/src/components/backoffice/onboarding/Onboarding/forms/schemas/formOnboardingCoachProfile.ts b/src/components/backoffice/onboarding/Onboarding/forms/schemas/formOnboardingCoachProfile.ts
@@ -1,6 +1,9 @@
 import { FormSchema } from 'src/components/forms/FormSchema';
 
-export const formOnboardingCoachProfile: FormSchema<{ description: string }> = {
+export const formOnboardingCoachProfile: FormSchema<{
+  description: string;
+  optinNewsletter: boolean;
+}> = {
   id: 'form-onboarding-profile',
   fields: [
     {
@@ -14,5 +17,13 @@ export const formOnboardingCoachProfile: FormSchema<{ description: string }> = {
       rows: 14,
       maxLines: { lines: 5, width: 655 },
     },
+    {
+      id: 'optinNewsletter',
+      name: 'optinNewsletter',
+      component: 'checkbox-alert',
+      title:
+        'En cochant cette case, j’accepte de recevoir des informations et des actualités sur le programme entourage pro',
+      showLabel: true,
+    },
   ],
 };
diff --git a/src/components/backoffice/onboarding/useOnboarding.ts b/src/components/backoffice/onboarding/useOnboarding.ts
@@ -8,7 +8,7 @@ import {
   validateLastStepOnboardingSelectors,
 } from 'src/use-cases/onboarding';
 import { FlattenedOnboardingFormData } from './Onboarding.types';
-import { parseOnboadingFields } from './Onboarding.utils';
+import { parseOnboadingProfileFields } from './Onboarding.utils';
 
 export const useOnboarding = () => {
   const dispatch = useDispatch();
@@ -21,17 +21,20 @@ export const useOnboarding = () => {
 
   const onSubmitLastStepOnboarding = useCallback(
     (fields: Partial<FlattenedOnboardingFormData>) => {
-      const fieldsToSend = parseOnboadingFields(fields);
+      const profileFieldsToSend = parseOnboadingProfileFields(fields);
       dispatch(
-        onboardingActions.validateLastStepOnboardingRequested(fieldsToSend)
+        onboardingActions.validateLastStepOnboardingRequested({
+          userProfile: profileFieldsToSend,
+          optinNewsletter: fields.optinNewsletter || false,
+        })
       );
     },
     [dispatch]
   );
 
   const onSubmitFirstSecondStepOnboarding = useCallback(
     (fields: Partial<FlattenedOnboardingFormData>) => {
-      const fieldsToSend = parseOnboadingFields(fields);
+      const fieldsToSend = parseOnboadingProfileFields(fields);
       dispatch(
         onboardingActions.validateFirstSecondStepOnboardingRequested(
           fieldsToSend

diff --git a/src/components/forms/FormSchema/FormSchema.types.ts b/src/components/forms/FormSchema/FormSchema.types.ts
@@ -10,6 +10,7 @@ export const FormComponents = {
   TEL_INPUT: 'tel-input',
   TEXTAREA: 'textarea',
   CHECKBOX: 'checkbox',
+  CHECKBOX_ALERT: 'checkbox-alert',
   SELECT_SIMPLE: 'select-simple',
   SELECT: 'select',
   SELECT_CREATABLE: 'select-creatable',
@@ -45,6 +46,7 @@ export interface FormComponentValues<M extends boolean> {
   [FormComponents.TEL_INPUT]: string;
   [FormComponents.TEXTAREA]: string;
   [FormComponents.CHECKBOX]: boolean;
+  [FormComponents.CHECKBOX_ALERT]: boolean;
   [FormComponents.SELECT_SIMPLE]: string | number;
   [FormComponents.SELECT]: MultiFilterConstant<M>;
   [FormComponents.SELECT_CREATABLE]: MultiFilterConstant<M>;
@@ -79,6 +81,11 @@ export type TextInputComponent = (typeof TextInputComponents)[number];
 export const CheckBoxComponents = [FormComponents.CHECKBOX] as const;
 
 export type CheckBoxComponent = (typeof CheckBoxComponents)[number];
+
+export const CheckBoxAlertComponents = [FormComponents.CHECKBOX_ALERT] as const;
+
+export type CheckBoxAlertComponent = (typeof CheckBoxAlertComponents)[number];
+
 export const SelectRequestComponents = [
   FormComponents.SELECT,
   FormComponents.SELECT_CREATABLE,
@@ -125,6 +132,7 @@ export type MultipleComponent = (typeof MultipleComponents)[number];
 export type InputComponent =
   | TextInputComponent
   | CheckBoxComponent
+  | CheckBoxAlertComponent
   | SelectComponent
   | SelectRequestComponent
   | SelectGraphicComponent
@@ -185,6 +193,11 @@ export interface FormFieldCheckBox<V extends FormSchemaValidation>
   component: CheckBoxComponent;
 }
 
+export interface FormFieldCheckBoxAlert<V extends FormSchemaValidation>
+  extends FormFieldInputCommonProperties<V, CheckBoxAlertComponent> {
+  component: CheckBoxAlertComponent;
+}
+
 export interface FormFieldSelect<V extends FormSchemaValidation>
   extends FormFieldInputCommonProperties<V, SelectComponent> {
   component: SelectComponent;
@@ -262,6 +275,7 @@ export type FormFieldSelectRequest<V extends FormSchemaValidation> =
 export type FormFieldInput<V extends FormSchemaValidation> = StrictUnion<
   | FormFieldTextInput<V>
   | FormFieldCheckBox<V>
+  | FormFieldCheckBoxAlert<V>
   | FormFieldRadio<V>
   | FormFieldSelectGraphic<V>
   | FormFieldSelect<V>

diff --git a/src/components/forms/FormSchema/FormSchema.utils.ts b/src/components/forms/FormSchema/FormSchema.utils.ts
@@ -3,11 +3,14 @@ import { AnyCantFix } from 'src/utils/Types';
 import {
   CheckBoxComponent,
   CheckBoxComponents,
+  CheckBoxAlertComponents,
+  CheckBoxAlertComponent,
   ExtractFormSchemaValidation,
   FormComponent,
   FormComponentValues,
   FormField,
   FormFieldCheckBox,
+  FormFieldCheckBoxAlert,
   FormFieldGroup,
   FormFieldMultiple,
   FormFieldRadio,
@@ -96,6 +99,14 @@ export function isFormFieldCheckbox<S extends FormSchemaValidation>(
   return CheckBoxComponents.includes(field.component as CheckBoxComponent);
 }
 
+export function isFormFieldCheckboxAlert<S extends FormSchemaValidation>(
+  field: FormField<S>
+): field is FormFieldCheckBoxAlert<S> {
+  return CheckBoxAlertComponents.includes(
+    field.component as CheckBoxAlertComponent
+  );
+}
+
 export function isFormFieldSelect<S extends FormSchemaValidation>(
   field: FormField<S>
 ): field is FormFieldSelect<S> {
@@ -130,12 +141,14 @@ export function isFormFieldInput<S extends FormSchemaValidation>(
   | FormFieldRadio<S>
   | FormFieldTextInput<S>
   | FormFieldCheckBox<S>
+  | FormFieldCheckBoxAlert<S>
   | FormFieldSelect<S>
   | FormFieldSelectRequest<S>
   | FormFieldSelectGraphic<S> {
   return (
     isFormFieldTextInput(field) ||
     isFormFieldCheckbox(field) ||
+    isFormFieldCheckboxAlert(field) ||
     isFormFieldRadio(field) ||
     isFormFieldSelect(field) ||
     isFormFieldSelectRequest(field) ||

diff --git a/src/components/forms/fields/GenericField.tsx b/src/components/forms/fields/GenericField.tsx
@@ -21,6 +21,7 @@ import {
   mapFieldRules,
   Rule,
 } from '../FormSchema';
+import { Alert } from 'src/components/utils/Alert';
 import {
   CheckBox,
   DatePicker,
@@ -208,6 +209,14 @@ export function GenericField<S extends FormSchema<AnyCantFix>>({
     return <CheckBox {...commonProps} />;
   }
 
+  if (field.component === 'checkbox-alert') {
+    return (
+      <Alert icon={null}>
+        <CheckBox {...commonProps} />
+      </Alert>
+    );
+  }
+
   if (field.component === 'select-simple') {
     const { options } = field;
 

diff --git a/src/components/utils/Alert/Alert.tsx b/src/components/utils/Alert/Alert.tsx
@@ -19,10 +19,11 @@ export const Alert = ({
   closable = false,
   visible = true,
   onClose = () => {},
+  icon = <AlertIcon variant={variant} />,
 }: AlertProps) => {
   return (
     <StyledAlert variant={variant} visible={visible}>
-      <AlertIcon variant={variant} />
+      {icon}
       {children}
       {closable && <ButtonIcon icon={<CloseIcon />} onClick={onClose} />}
     </StyledAlert>

diff --git a/src/components/utils/Alert/Alert.types.ts b/src/components/utils/Alert/Alert.types.ts
@@ -6,4 +6,5 @@ export interface AlertProps {
   closable?: boolean;
   visible?: boolean;
   onClose?: () => void;
+  icon?: React.ReactNode;
 }
diff --git a/src/components/utils/Inputs/CheckBox/CheckBox.tsx b/src/components/utils/Inputs/CheckBox/CheckBox.tsx
@@ -50,7 +50,7 @@ export function CheckBox({
         <span className="checkmark" />
         {title && <span className="label">{title}</span>}
       </label>
-      {!useOutsideOfForm && <FieldErrorMessage error={error} />}
+      {!useOutsideOfForm && error && <FieldErrorMessage error={error} />}
     </StyledCheckbox>
   );
 }
diff --git a/src/use-cases/onboarding/onboarding.adapters.ts b/src/use-cases/onboarding/onboarding.adapters.ts
@@ -7,4 +7,11 @@ export const validateFirstSecondStepOnboardingAdapter = createRequestAdapter(
 
 export const validateLastStepOnboardingAdapter = createRequestAdapter(
   'validateLastStepOnboarding'
-).withPayloads<Partial<UserProfile>, void, void>();
+).withPayloads<
+  {
+    userProfile: Partial<UserProfile>;
+    optinNewsletter: boolean;
+  },
+  void,
+  void
+>();
diff --git a/src/use-cases/onboarding/onboarding.saga.ts b/src/use-cases/onboarding/onboarding.saga.ts
@@ -78,10 +78,24 @@ export function* validateFirstSecondStepOnboardingSaga(
 export function* validateLastStepOnboardingSaga(
   action: ReturnType<typeof validateLastStepOnboardingRequested>
 ) {
-  const userId = yield* select(selectCurrentUserId);
-  const userProfile = action.payload;
+  const user = yield* select(selectAuthenticatedUser);
+  const { userProfile, optinNewsletter } = action.payload;
+
   try {
-    yield* call(() => Api.putUserProfile(userId, userProfile));
+    // Update user profile with new data
+    yield* call(() => Api.putUserProfile(user.id, userProfile));
+
+    // If user optin for newsletter, call api to set OK to receive newsletter
+    if (optinNewsletter) {
+      // Call api to set OK to receive newsletter
+      yield* call(() => {
+        Api.postNewsletter({
+          email: user.email,
+          zone: user.zone,
+          status: user.candidat ? 'CANDIDAT' : 'PARTICULIER',
+        });
+      });
+    }
     yield* put(validateLastStepOnboardingSucceeded());
     yield* put(currentUserActions.fetchUserRequested());
     yield* put(endOnboarding());