feat(cr-fe-onBoarding): updates 20240229

teamdigitale · Feb 29, 2024 · 325e5fd · 325e5fd
1 parent 3763395
commit 325e5fd
Show file tree

Hide file tree

Showing 14 changed files with 81 additions and 97 deletions.
diff --git a/fe-piattaforma/src/components/Footer/footer.tsx b/fe-piattaforma/src/components/Footer/footer.tsx
@@ -141,6 +141,7 @@ const Footer: React.FC = () => {
             <div className='col-12'>
               <a
                 href='/informativa-privacy-e-cookie'
+                target='_blank'
                 className='link_common link_style'
               >
                 Informativa privacy e cookie

diff --git a/fe-piattaforma/src/components/Form/form.tsx b/fe-piattaforma/src/components/Form/form.tsx
@@ -12,6 +12,7 @@ interface FormI {
   showMandatory?: boolean;
   marginShowMandatory?: boolean;
   customMargin?: string;
+  showCampoObbligatorio?: boolean;
 }
 
 const Form = (props: FormI) => {
@@ -26,6 +27,7 @@ const Form = (props: FormI) => {
     showMandatory = true,
     marginShowMandatory = true,
     customMargin = '',
+    showCampoObbligatorio,
   } = props;
 
   return (
@@ -45,7 +47,9 @@ const Form = (props: FormI) => {
               customMargin ? customMargin : 'mb-5'
             )}
           >
-            {customMandatoryText || '*Campo obbligatorio'}
+            {customMandatoryText || showCampoObbligatorio
+              ? '*Campo obbligatorio'
+              : ''}
           </div>
         )}
         {React.Children.map(children, (child) => {

diff --git a/fe-piattaforma/src/components/Header/header.tsx b/fe-piattaforma/src/components/Header/header.tsx
@@ -2,12 +2,12 @@ import React, { memo, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useAppSelector } from '../../redux/hooks';
 import {
-  selectUserNotificationToRead,
-  selectUser,
-  UserStateI,
   selectProfile,
-  UserProfileI,
+  selectUser,
   selectUserChatToRead,
+  selectUserNotificationToRead,
+  UserProfileI,
+  UserStateI,
 } from '../../redux/features/user/userSlice';
 import { selectDevice } from '../../redux/features/app/appSlice';
 import HeaderMobile from './view/headerMobile';
@@ -150,7 +150,7 @@ const Header: React.FC<HeaderProp> = (props) => {
       ) : (
         <HeaderMobile {...componentProps} />
       )}
-      <SwitchProfileModal isOnboarding={!isLogged} />
+      <SwitchProfileModal isRegistrazione={!isLogged} />
       {hasUserPermission(['btn.chat']) ? <RocketChatModal /> : null}
     </>
   );

diff --git a/fe-piattaforma/src/components/Modals/SwitchProfileModal/switchProfileModal.tsx b/fe-piattaforma/src/components/Modals/SwitchProfileModal/switchProfileModal.tsx
@@ -21,12 +21,12 @@ const id = 'switchProfileModal';
 
 interface SwitchProfileModalI {
   isRoleManaging?: boolean;
-  isOnboarding?: boolean;
+  isRegistrazione?: boolean;
   profilePicture?: string;
 }
 
 const SwitchProfileModal: React.FC<SwitchProfileModalI> = ({
-  isOnboarding = false,
+  isRegistrazione = false,
   profilePicture = '',
 }) => {
   const dispatch = useDispatch();
@@ -120,7 +120,7 @@ const SwitchProfileModal: React.FC<SwitchProfileModalI> = ({
         disabled: !Object.keys(profileSelected)?.length,
       }}
       secondaryCTA={
-        isOnboarding
+        isRegistrazione
           ? undefined
           : {
               label: 'Annulla',
@@ -131,7 +131,7 @@ const SwitchProfileModal: React.FC<SwitchProfileModalI> = ({
       noSpaceAfterTitle
       centerButtons
       isRoleManaging
-      closableKey={isOnboarding ? 'unclosable' : undefined}
+      closableKey={isRegistrazione ? 'unclosable' : undefined}
     >
       <div
         className={clsx(

diff --git a/fe-piattaforma/src/pages/administrator/AdministrativeArea/Entities/modals/manageProfile.tsx b/fe-piattaforma/src/pages/administrator/AdministrativeArea/Entities/modals/manageProfile.tsx
@@ -7,7 +7,7 @@ import {
   EditUser,
 } from '../../../../../redux/features/user/userThunk';
 import { formFieldI, FormHelper, FormI } from '../../../../../utils/formHelper';
-import FormOnboarding from '../../../../facilitator/Onboarding/formOnboarding';
+import FormRegistrazione from '../../../../facilitator/Registrazione/formRegistrazione';
 import { formTypes } from '../utils';
 
 const id = formTypes.PROFILE;
@@ -46,7 +46,7 @@ const ManageProfile: React.FC = () => {
         onClick: () => dispatch(closeModal()),
       }}
     >
-      <FormOnboarding
+      <FormRegistrazione
         sendNewForm={(newForm: FormI) =>
           setNewFormValues(FormHelper.getFormValues(newForm))
         }

diff --git a/fe-piattaforma/src/pages/common/Auth/auth.tsx b/fe-piattaforma/src/pages/common/Auth/auth.tsx
@@ -47,7 +47,7 @@ const Auth: React.FC<withFormHandlerProps> = ({
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     if (validUser) {
-      navigate('/onboarding');
+      navigate('/registrazione');
     } else {
       console.log('manage context error', validUser);
       navigate(

diff --git a/fe-piattaforma/src/pages/common/UserProfile/userProfile.tsx b/fe-piattaforma/src/pages/common/UserProfile/userProfile.tsx
@@ -3,7 +3,6 @@ import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import clsx from 'clsx';
 import DetailLayout from '../../../components/DetailLayout/detailLayout';
-import FormOnboarding from '../../facilitator/Onboarding/formOnboarding';
 import { ButtonInButtonsBar } from '../../../components/ButtonsBar/buttonsBar';
 import { openModal } from '../../../redux/features/modal/modalSlice';
 import {
@@ -20,6 +19,7 @@ import { CardStatusAction } from '../../../components';
 import { getSessionValues } from '../../../utils/sessionHelper';
 import { GetUserDetails } from '../../../redux/features/administrativeArea/user/userThunk';
 import { selectUsers } from '../../../redux/features/administrativeArea/administrativeAreaSlice';
+import FormRegistrazione from '../../facilitator/Registrazione/formRegistrazione';
 
 interface RoleI {
   id: string;
@@ -109,7 +109,7 @@ const UserProfile = () => {
         formButtons={correctButtons}
         profilePicture={user?.immagineProfilo}
       >
-        <FormOnboarding isProfile formDisabled />
+        <FormRegistrazione isProfile formDisabled />
       </DetailLayout>
       {userRoleList?.length ? (
         <div className='my-5 container'>

diff --git a/...facilitator/Onboarding/formOnboarding.tsx → ...ilitator/Onboarding/formRegistrazione.tsx b/...facilitator/Onboarding/formOnboarding.tsx → ...ilitator/Onboarding/formRegistrazione.tsx
@@ -16,7 +16,7 @@ import { Form, Input } from '../../../components';
 import { selectUser } from '../../../redux/features/user/userSlice';
 import { contractTypes } from '../../administrator/AdministrativeArea/Entities/utils';
 
-export interface FormOnboardingI {
+export interface FormRegistrazioneI {
   onInputChange?: withFormHandlerProps['onInputChange'];
   onSubmitForm?: () => void;
   optionsSelect?: OptionType[];
@@ -27,8 +27,9 @@ export interface FormOnboardingI {
   isProfile?: boolean;
 }
 
-interface FormProfileI extends withFormHandlerProps, FormOnboardingI {}
-const FormOnboarding: React.FC<FormProfileI> = (props) => {
+interface FormProfileI extends withFormHandlerProps, FormRegistrazioneI {}
+
+const FormRegistrazione: React.FC<FormProfileI> = (props) => {
   const {
     setFormValues = () => ({}),
     updateFormField = () => ({}),
@@ -101,28 +102,26 @@ const FormOnboarding: React.FC<FormProfileI> = (props) => {
       );
   }, [showTipoContratto]);
 
-  /* const bootClass = 'justify-content-between px-0 px-lg-5 mx-2'; */
-
   return (
     <div className={clsx(device.mediaIsPhone ? 'mx-4 mt-5' : 'mt-5 container')}>
       <Form
-        id='form-onboarding'
+        id='form-registrazione'
         className={clsx(
           formDisabled ? 'mt-3 pt-3' : '',
           'mb-5',
-          'onboarding__form-container'
+          'registrazione__form-container'
         )}
         formDisabled={formDisabled}
+        showCampoObbligatorio={false}
         marginShowMandatory={false}
         customMargin='mb-3 pb-3'
       >
-        <Form.Row /* className={bootClass} */>
+        <Form.Row>
           <Input
             {...form?.nome}
             disabled
             label='Nome'
             required
-            //placeholder='Inserisci nome'
             col='col-12 col-md-6'
             onInputChange={onInputChange}
           />
@@ -159,15 +158,13 @@ const FormOnboarding: React.FC<FormProfileI> = (props) => {
             {...form?.email}
             required
             label='Email'
-            //placeholder='Inserisci email'
             col='col-12 col-md-6'
             onInputChange={onInputChange}
           />
           <Input
             {...form?.telefono}
             required
             label='Telefono'
-            //placeholder='Inserisci telefono'
             col='col-12 col-md-6'
             onInputChange={onInputChange}
           />
@@ -176,7 +173,6 @@ const FormOnboarding: React.FC<FormProfileI> = (props) => {
               {...form?.bio}
               required
               label='Posizione Lavorativa'
-              //placeholder='Posizione Lavorativa'
               col='col-12 col-md-6'
               onInputChange={onInputChange}
             />
@@ -189,7 +185,6 @@ const FormOnboarding: React.FC<FormProfileI> = (props) => {
                 {...form?.tipoContratto}
                 label='Tipo di Contratto'
                 col='col-12 col-lg-6'
-                // placeholder='Tipologia di contratto'
                 onInputChange={onInputChange}
               />
             ) : (
@@ -210,6 +205,14 @@ const FormOnboarding: React.FC<FormProfileI> = (props) => {
             <span />
           )}
         </Form.Row>
+        <div
+          className={clsx(
+            'mandatory-fields',
+            'form-row justify-content-between px-0 mx-2'
+          )}
+        >
+          *Campo obbligatorio
+        </div>
       </Form>
     </div>
   );
@@ -258,4 +261,4 @@ const form: FormI = newForm([
   }),
 ]);
 
-export default withFormHandler({ form }, FormOnboarding);
+export default withFormHandler({ form }, FormRegistrazione);
diff --git a/...es/facilitator/Onboarding/onboarding.scss → ...facilitator/Onboarding/registrazione.scss b/...es/facilitator/Onboarding/onboarding.scss → ...facilitator/Onboarding/registrazione.scss
@@ -1,4 +1,4 @@
-.onboarding {
+.registrazione {
   &__img-profile {
     width: 174px;
     height: 174px;
@@ -12,7 +12,7 @@
   }
 
   &__icon {
-    left:6px;
+    left: 6px;
     top: 6px;
   }
 }

diff --git a/...ges/facilitator/Onboarding/onboarding.tsx → .../facilitator/Onboarding/registrazione.tsx b/...ges/facilitator/Onboarding/onboarding.tsx → .../facilitator/Onboarding/registrazione.tsx
@@ -7,7 +7,6 @@ import {
   hideBreadCrumb,
   selectDevice,
 } from '../../../redux/features/app/appSlice';
-import Profile from '/public/assets/img/change-profile.png';
 import {
   CommonFields,
   FormI,
@@ -30,31 +29,28 @@ import {
   SelectUserRole,
 } from '../../../redux/features/user/userThunk';
 import { openModal } from '../../../redux/features/modal/modalSlice';
-import FormOnboarding from './formOnboarding';
 import { defaultRedirectUrl } from '../../../routes';
-import '../../../../src/pages/facilitator/Onboarding/onboarding.scss';
+import './registrazione.scss';
+import FormRegistrazione from './formRegistrazione';
 
 interface ProfilePicI {
   image?: boolean;
 }
 
-interface OnboardingI extends ProfilePicI, withFormHandlerProps {}
+interface RegistrazioneI extends ProfilePicI, withFormHandlerProps {}
 
-const Onboarding: React.FC<OnboardingI> = (props) => {
+const Registrazione: React.FC<RegistrazioneI> = (props) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const device = useAppSelector(selectDevice);
   const user = useAppSelector(selectUser);
-  const image = user?.immagineProfilo || Profile;
   const [isValidForm, setIsValidForm] = useState<boolean>(false);
-  const {
-    form,
-    getFormValues = () => ({}),
-    onInputChange = () => ({}),
-    updateForm = () => ({}),
-  } = props;
+  const { getFormValues = () => ({}), updateForm = () => ({}) } = props;
+  const [ruolo, setRuolo] = useState<string>('');
 
   useEffect(() => {
+    const userRuolo: any = user;
+    setRuolo(userRuolo.ruoli[0].nomeRuolo.toLowerCase() as string);
     if (user?.integrazione) {
       selectUserRole();
       dispatch(hideBreadCrumb());
@@ -127,10 +123,10 @@ const Onboarding: React.FC<OnboardingI> = (props) => {
       </h1>
       <div className='col-12  mt-4'>
         <p className='h6 complementary-1-color-b8 font-weight-normal'>
-          Per completare il tuo profilo da facilitatore abbiamo bisogno di
-          alcuni tuoi dati. <br /> Completa i campi obbligatori per procedere.
+          Per completare il tuo profilo da {ruolo} abbiamo bisogno di alcuni
+          tuoi dati. <br /> Completa i campi obbligatori per procedere.
         </p>
-        <FormOnboarding
+        <FormRegistrazione
           sendNewForm={updateForm}
           setIsFormValid={(isValid: boolean) => setIsValidForm(isValid)}
         />
@@ -142,7 +138,8 @@ const Onboarding: React.FC<OnboardingI> = (props) => {
             device.mediaIsPhone && 'flex-column align-items-center '
           )}
         >
-          <a href='/'>
+          {/* eslint-disable-next-line react/no-unescaped-entities */}
+          <a href='/informativa-privacy-e-cookie' target='_blank'>
             Leggi l'informativa sul trattamento dei dati personali
           </a>
           <Button
@@ -157,30 +154,6 @@ const Onboarding: React.FC<OnboardingI> = (props) => {
             Completa Registrazione
           </Button>
         </div>
-        {/* <Form
-          id='form-onboarding'
-          className={clsx('mt-5', 'mb-5', 'onboarding__form-container')}
-          showMandatory={false}
-        >
-          <div>
-            <a href='/'>Leggi l&nbsp;informativa sul trattamento dei dati personali</a>
-            <Button
-              disabled={!isValidForm}
-              color='primary'
-              onClick={onSubmitForm}
-              className={clsx(
-                'd-flex mb-3 mt-5',
-                device.mediaIsPhone && 'justify-content-center',
-                'justify-content-end'
-              )}
-            >
-              Completa Registrazione
-            </Button>
-          </div>
-          {/* <p className={clsx('primary-color-a12', 'mt-5', 'mb-1', 'pb-2')}>
-            *Campo obbligatorio
-          </p> */}
-        {/*</Form>*/}
       </div>
     </div>
   );
@@ -229,4 +202,4 @@ const form: FormI = newForm([
   }),
 ]);
 
-export default withFormHandler({ form }, Onboarding);
+export default withFormHandler({ form }, Registrazione);
diff --git a/fe-piattaforma/src/pages/facilitator/Survey/survey.tsx b/fe-piattaforma/src/pages/facilitator/Survey/survey.tsx
@@ -34,8 +34,8 @@ const arrayBreadcrumb = [
     url: '/',
   },
   {
-    label: 'Onboarding',
-    url: '/onboarding',
+    label: 'Registrazione',
+    url: '/registrazione',
   },
   {
     label: 'Survey',