Feat/US769 equipments choice in profile settings

src/components/EcogestureForm/EcogestureFormEquipment.tsx

@@ -11,15 +11,20 @@ import { newProfileEcogestureEntry } from 'store/profileEcogesture/profileEcoges
 import { useDispatch } from 'react-redux'
 import { updateProfile } from 'store/profile/profile.actions'
 import { useHistory } from 'react-router-dom'
+import { ProfileTypeStepForm } from 'enum/profileType.enum'
 
 interface EcogestureFormEquipmentProps {
   profileEcogesture: ProfileEcogesture
   setPreviousStep: Function
+  setNextStep?: Function
+  step: ProfileTypeStepForm | EcogestureStepForm
 }
 
 const EcogestureFormEquipment: React.FC<EcogestureFormEquipmentProps> = ({
   profileEcogesture,
   setPreviousStep,
+  setNextStep,
+  step,
 }: EcogestureFormEquipmentProps) => {
   const { t } = useI18n()
   const dispatch = useDispatch()
@@ -30,12 +35,13 @@ const EcogestureFormEquipment: React.FC<EcogestureFormEquipmentProps> = ({
     setPreviousStep(profileEcogesture)
   }, [profileEcogesture, setPreviousStep])
 
-  const handleFinish = useCallback(() => {
+  const handleNext = useCallback(() => {
     profileEcogesture.equipments = answer as EquipmentType[]
     dispatch(newProfileEcogestureEntry(profileEcogesture))
     dispatch(updateProfile({ isProfileEcogestureCompleted: true }))
-    history.push('/ecogesture-selection')
-  }, [profileEcogesture, answer, dispatch, history])
+    // Check if gestureForm is used from Big profile or small profile
+    setNextStep ? setNextStep() : history.push('/ecogesture-selection')
+  }, [profileEcogesture, setNextStep, answer, dispatch, history])
 
   const isChecked = useCallback(
     (value: string): boolean => {
@@ -103,9 +109,9 @@ const EcogestureFormEquipment: React.FC<EcogestureFormEquipmentProps> = ({
         </div>
       </div>
       <FormNavigation
-        step={EcogestureStepForm.EQUIPMENTS}
+        step={step}
         handlePrevious={handlePrevious}
-        handleNext={handleFinish}
+        handleNext={handleNext}
         disableNextButton={answer === []}
         isEcogesture={true}
       />

src/components/EcogestureForm/EcogestureFormView.tsx

@@ -128,6 +128,7 @@ const EcogestureFormView: React.FC = () => {
       <Content height={headerHeight}>
         {step === EcogestureStepForm.EQUIPMENTS && (
           <EcogestureFormEquipment
+            step={EcogestureStepForm.EQUIPMENTS}
             profileEcogesture={profileEcogesture}
             setPreviousStep={setPreviousStep}
           />

src/components/EcogestureForm/__snapshots__/EcogestureFormEquipment.spec.tsx.snap

@@ -305,7 +305,6 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
         handleNext={[Function]}
         handlePrevious={[Function]}
         isEcogesture={true}
-        step={3}
       >
         <div
           className="profile-navigation"
@@ -448,7 +447,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
             </ForwardRef(Button)>
           </WithStyles(ForwardRef(Button))>
           <WithStyles(ForwardRef(Button))
-            aria-label="profile_type.accessibility.button_end"
+            aria-label="profile_type.accessibility.button_next"
             className="profile-navigation-button"
             classes={
               Object {
@@ -460,7 +459,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
             onClick={[Function]}
           >
             <ForwardRef(Button)
-              aria-label="profile_type.accessibility.button_end"
+              aria-label="profile_type.accessibility.button_next"
               className="profile-navigation-button"
               classes={
                 Object {
@@ -499,7 +498,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
               onClick={[Function]}
             >
               <WithStyles(ForwardRef(ButtonBase))
-                aria-label="profile_type.accessibility.button_end"
+                aria-label="profile_type.accessibility.button_next"
                 className="MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button"
                 component="button"
                 disabled={false}
@@ -509,7 +508,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
                 type="button"
               >
                 <ForwardRef(ButtonBase)
-                  aria-label="profile_type.accessibility.button_end"
+                  aria-label="profile_type.accessibility.button_next"
                   className="MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button"
                   classes={
                     Object {
@@ -526,7 +525,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
                   type="button"
                 >
                   <button
-                    aria-label="profile_type.accessibility.button_end"
+                    aria-label="profile_type.accessibility.button_next"
                     className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text profile-navigation-button"
                     disabled={false}
                     onBlur={[Function]}
@@ -547,7 +546,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
                     <span
                       className="MuiButton-label text-16-normal"
                     >
-                      profile_type.form.button_end
+                      profile_type.form.button_next &gt;
                     </span>
                     <NoSsr>
                       <WithStyles(memo)

src/components/ProfileType/ProfileTypeView.tsx

@@ -29,12 +29,18 @@ import { AppStore } from 'store'
 import { DateTime } from 'luxon'
 import ProfileTypeFormService from 'services/profileTypeForm.service'
 import ProfileTypeFormDateSelection from './ProfileTypeFormDateSelection'
+import EcogestureFormEquipment from 'components/EcogestureForm/EcogestureFormEquipment'
+import { ProfileEcogesture } from 'models/profileEcogesture.model'
 
 const ProfileTypeView = () => {
   const profile = useSelector((state: AppStore) => state.ecolyo.profile)
   const curProfileType = useSelector(
     (state: AppStore) => state.ecolyo.profileType
   )
+  const curProfileEcogesture: ProfileEcogesture = useSelector(
+    (state: AppStore) => state.ecolyo.profileEcogesture
+  )
+
   const [headerHeight, setHeaderHeight] = useState<number>(0)
   const [profileType, setProfileType] = useState<ProfileType>({
     updateDate: DateTime.local()
@@ -58,6 +64,7 @@ const ProfileTypeView = () => {
     warmingFluid: WarmingType.ELECTRICITY,
     hotWaterFluid: FluidType.ELECTRICITY,
     cookingFluid: FluidType.ELECTRICITY,
+    equipments: '',
   })
   const [step, setStep] = useState<ProfileTypeStepForm>(
     ProfileTypeStepForm.HOUSING_TYPE
@@ -76,9 +83,17 @@ const ProfileTypeView = () => {
   }, [])
 
   const setNextStep = useCallback(
-    (_profileType: ProfileType) => {
-      setProfileType(_profileType)
-      const profileTypeFormService = new ProfileTypeFormService(_profileType)
+    (_profileType?: ProfileType) => {
+      let profileTypeFormService: ProfileTypeFormService
+      if (_profileType) {
+        setProfileType(_profileType)
+        profileTypeFormService = new ProfileTypeFormService(_profileType)
+      } else {
+        // if equipments are updated, keep profileType as it is
+        profileTypeFormService = new ProfileTypeFormService({
+          ...profileType,
+        })
+      }
       const nextStep: ProfileTypeStepForm = profileTypeFormService.getNextFormStep(
         step,
         !profile.isProfileTypeCompleted
@@ -89,10 +104,10 @@ const ProfileTypeView = () => {
       }
       setStep(nextStep)
     },
-    [profile.isProfileTypeCompleted, step, viewedStep]
+    [profile.isProfileTypeCompleted, profileType, step, viewedStep]
   )
 
-  const setPrevioustStep = useCallback(
+  const setPreviousStep = useCallback(
     (_profileType: ProfileType) => {
       setProfileType(_profileType)
       const profileTypeFormService = new ProfileTypeFormService(_profileType)
@@ -115,7 +130,7 @@ const ProfileTypeView = () => {
           answerType={answerType}
           setNextStep={setNextStep}
           isProfileTypeComplete={profile.isProfileTypeCompleted}
-          setPrevioustStep={setPrevioustStep}
+          setPrevioustStep={setPreviousStep}
         />
       )
     } else if (answerType.type === ProfileTypeFormType.MULTI_CHOICE) {
@@ -126,7 +141,7 @@ const ProfileTypeView = () => {
           profileType={profileType}
           answerType={answerType}
           setNextStep={setNextStep}
-          setPrevioustStep={setPrevioustStep}
+          setPrevioustStep={setPreviousStep}
           isProfileTypeComplete={profile.isProfileTypeCompleted}
         />
       )
@@ -139,7 +154,7 @@ const ProfileTypeView = () => {
           answerType={answerType}
           setNextStep={setNextStep}
           isProfileTypeComplete={profile.isProfileTypeCompleted}
-          setPrevioustStep={setPrevioustStep}
+          setPrevioustStep={setPreviousStep}
         />
       )
     } else if (answerType.type === ProfileTypeFormType.NUMBER_SELECTION) {
@@ -151,7 +166,7 @@ const ProfileTypeView = () => {
           answerType={answerType}
           setNextStep={setNextStep}
           isProfileTypeComplete={profile.isProfileTypeCompleted}
-          setPrevioustStep={setPrevioustStep}
+          setPrevioustStep={setPreviousStep}
         />
       )
     } else if (answerType.type === ProfileTypeFormType.DATE_SELECTION) {
@@ -163,7 +178,18 @@ const ProfileTypeView = () => {
           answerType={answerType}
           setNextStep={setNextStep}
           isProfileTypeComplete={profile.isProfileTypeCompleted}
-          setPrevioustStep={setPrevioustStep}
+          setPrevioustStep={setPreviousStep}
+        />
+      )
+    } else if (answerType.type === ProfileTypeFormType.EQUIPMENT_SELECTION) {
+      return (
+        <EcogestureFormEquipment
+          step={step}
+          // viewedStep={viewedStep}
+          // answerType={answerType}
+          profileEcogesture={curProfileEcogesture}
+          setNextStep={setNextStep}
+          setPreviousStep={setPreviousStep}
         />
       )
     }

src/enum/profileType.enum.ts

@@ -73,8 +73,9 @@ export enum ProfileTypeStepForm {
   HOT_WATER_FLUID = 13,
   HOT_WATER_EQUIPMENT = 14,
   COOKING_FLUID = 15,
-  UPDATE_DATE = 16,
-  END = 17,
+  EQUIPMENTS = 16,
+  UPDATE_DATE = 17,
+  END = 18,
 }
 
 export enum ProfileTypeFormType {
@@ -83,4 +84,5 @@ export enum ProfileTypeFormType {
   NUMBER_SELECTION = 2,
   NUMBER = 3,
   DATE_SELECTION = 4,
+  EQUIPMENT_SELECTION = 5,
 }

src/models/profileType.model.ts

@@ -48,6 +48,7 @@ export interface ProfileType extends ProfileTypeIndexableTypes {
   hotWaterFluid: FluidType | null
   cookingFluid: FluidType
   updateDate: DateTime
+  equipments: string
 }
 
 export interface MonthlyForecast {

src/services/profileType.service.spec.ts

@@ -331,6 +331,11 @@ describe('ProfileType service', () => {
         ProfileTypeStepForm.COOKING_FLUID,
         false
       )
+      expect(nextStep).toEqual(ProfileTypeStepForm.EQUIPMENTS)
+      nextStep = profileTypeFormService.getNextFormStep(
+        ProfileTypeStepForm.EQUIPMENTS,
+        false
+      )
       expect(nextStep).toEqual(ProfileTypeStepForm.UPDATE_DATE)
       nextStep = profileTypeFormService.getNextFormStep(
         ProfileTypeStepForm.UPDATE_DATE,

src/services/profileTypeForm.service.ts

+import { EquipmentType } from 'enum/ecogesture.enum'
 import { FluidType } from 'enum/fluid.enum'
 import {
   ConstructionYear,
@@ -72,6 +73,8 @@ export default class ProfileTypeFormService {
       case ProfileTypeStepForm.HOT_WATER_EQUIPMENT:
         return ProfileTypeStepForm.COOKING_FLUID
       case ProfileTypeStepForm.COOKING_FLUID:
+        return ProfileTypeStepForm.EQUIPMENTS
+      case ProfileTypeStepForm.EQUIPMENTS:
         return firstProfileType
           ? ProfileTypeStepForm.END
           : ProfileTypeStepForm.UPDATE_DATE
@@ -129,8 +132,10 @@ export default class ProfileTypeFormService {
         return this.profileType.hotWater === IndividualOrCollective.INDIVIDUAL
           ? ProfileTypeStepForm.HOT_WATER_EQUIPMENT
           : ProfileTypeStepForm.HOT_WATER
-      case ProfileTypeStepForm.UPDATE_DATE:
+      case ProfileTypeStepForm.EQUIPMENTS:
         return ProfileTypeStepForm.COOKING_FLUID
+      case ProfileTypeStepForm.UPDATE_DATE:
+        return ProfileTypeStepForm.EQUIPMENTS
       default:
         return ProfileTypeStepForm.HOUSING_TYPE
     }
@@ -244,6 +249,12 @@ export default class ProfileTypeFormService {
           attribute: 'cookingFluid',
           choices: [FluidType.ELECTRICITY, FluidType.GAS],
         }
+      case ProfileTypeStepForm.EQUIPMENTS:
+        return {
+          type: ProfileTypeFormType.EQUIPMENT_SELECTION,
+          attribute: 'equipments',
+          choices: Object.keys(EquipmentType),
+        }
       case ProfileTypeStepForm.UPDATE_DATE:
         return {
           type: ProfileTypeFormType.DATE_SELECTION,