Merge branch 'refactor-redux' into 'dev'

chore(redux): move customPopupModal from global state to modal state

See merge request !901

src/components/Home/ConsumptionView.spec.tsx

@@ -7,6 +7,7 @@ import React from 'react'
 import * as reactRedux from 'react-redux'
 import { Provider } from 'react-redux'
 import * as chartActions from 'store/chart/chart.slice'
+import { mockCustomPopup } from '../../../tests/__mocks__/customPopup.mock'
 import { mockTestProfile1 } from '../../../tests/__mocks__/profileType.mock'
 import {
   createMockEcolyoStore,
@@ -314,7 +315,10 @@ describe('ConsumptionView component', () => {
         fluidStatus: updatedStatus,
         releaseNotes: mockInitialEcolyoState.global.releaseNotes,
       },
-      modal: { partnersIssueModal: mockedPartnersIssueModal },
+      modal: {
+        partnersIssueModal: mockedPartnersIssueModal,
+        customPopupModal: mockCustomPopup,
+      },
     })
     useDispatchSpy.mockReturnValue(jest.fn())
     mockUpdateProfile.mockResolvedValue(mockTestProfile1)

src/components/Home/ConsumptionView.tsx

@@ -21,8 +21,8 @@ import { useNavigate } from 'react-router-dom'
 import ProfileService from 'services/profile.service'
 import { AppActionsTypes, AppStore } from 'store'
 import { setCurrentTimeStep, setShowOfflineData } from 'store/chart/chart.slice'
-import { setCustomPopup, showReleaseNotes } from 'store/global/global.actions'
-import { openPartnersModal } from 'store/modal/modal.slice'
+import { showReleaseNotes } from 'store/global/global.actions'
+import { openPartnersModal, setCustomPopup } from 'store/modal/modal.slice'
 import {
   getKonnectorUpdateError,
   getTodayDate,
@@ -43,8 +43,8 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
   const isMulti = fluidType === FluidType.MULTIFLUID
   const {
     chart: { currentTimeStep, loading, showOfflineData },
-    global: { fluidStatus, releaseNotes, customPopupModal },
-    modal: { partnersIssueModal },
+    global: { fluidStatus, releaseNotes },
+    modal: { partnersIssueModal, customPopupModal },
   } = useSelector((state: AppStore) => state.ecolyo)
 
   const [openReleaseNoteModal, setOpenReleaseNoteModal] = useState<boolean>(

src/components/Splash/SplashRoot.tsx

@@ -44,7 +44,6 @@ import {
 } from 'store/challenge/challenge.actions'
 import { setSelectedDate } from 'store/chart/chart.slice'
 import {
-  setCustomPopup,
   setFluidStatus,
   showReleaseNotes,
   toggleAnalysisNotification,
@@ -53,7 +52,7 @@ import {
   toggleChallengeExplorationNotification,
   updateTermValidation,
 } from 'store/global/global.actions'
-import { openPartnersModal } from 'store/modal/modal.slice'
+import { openPartnersModal, setCustomPopup } from 'store/modal/modal.slice'
 import { updateProfile } from 'store/profile/profile.actions'
 import { updateProfileEcogestureSuccess } from 'store/profileEcogesture/profileEcogesture.actions'
 import { updateProfileType } from 'store/profileType/profileType.actions'

src/models/global.model.ts

 import { FluidType } from 'enum/fluid.enum'
 import { ScreenType } from 'enum/screen.enum'
 import { TermsStatus } from 'models'
-import { CustomPopup } from './customPopup.model'
 import { FluidStatus } from './fluid.model'
 import { PartnersInfo } from './partnersInfo.model'
 import { ReleaseNotes } from './releaseNotes.model'
@@ -17,7 +16,6 @@ export interface GlobalState {
   termsStatus: TermsStatus
   fluidStatus: FluidStatus[]
   fluidTypes: FluidType[]
-  customPopupModal: CustomPopup
   shouldRefreshConsent: boolean
   sgeConnect: SgeStore
   partnersInfo: PartnersInfo

src/models/modal.model.ts

+import { CustomPopup } from 'models/customPopup.model'
+
 export interface ModalState {
+  customPopupModal: CustomPopup
   isConnectionModalOpen: boolean
   isFeedbacksOpen: boolean
   partnersIssueModal: {

src/store/global/global.action.spec.ts

 import { ScreenType } from 'enum/screen.enum'
-import { mockCustomPopup } from '../../../tests/__mocks__/customPopup.mock'
 import { mockInitialGlobalState } from '../../../tests/__mocks__/store'
 import {
-  changeScreenType,
   CHANGE_SCREEN_TYPE,
   GlobalActionTypes,
-  setCustomPopup,
-  setFluidStatus,
-  SET_CUSTOM_POPUP,
   SET_FLUID_STATUS,
-  toggleAnalysisNotification,
-  toggleChallengeActionNotification,
-  toggleChallengeDuelNotification,
-  toggleChallengeExplorationNotification,
   TOGGLE_ANALYSIS_NOTIFICATION,
   TOGGLE_CHALLENGE_ACTION_NOTIFICATION,
   TOGGLE_CHALLENGE_DUEL_NOTIFICATION,
   TOGGLE_CHALLENGE_EXPLORATION_NOTIFICATION,
+  changeScreenType,
+  setFluidStatus,
+  toggleAnalysisNotification,
+  toggleChallengeActionNotification,
+  toggleChallengeDuelNotification,
+  toggleChallengeExplorationNotification,
 } from './global.actions'
 
 describe('global actions', () => {
@@ -79,13 +76,4 @@ describe('global actions', () => {
     }
     expect(setFluidStatus(fluidStatus)).toEqual(expectedAction)
   })
-
-  it('should set customPopup', () => {
-    const payload = mockCustomPopup
-    const expectedAction: GlobalActionTypes = {
-      type: SET_CUSTOM_POPUP,
-      payload,
-    }
-    expect(setCustomPopup(payload)).toEqual(expectedAction)
-  })
 })

src/store/global/global.actions.ts

 import { FluidType } from 'enum/fluid.enum'
 import { ScreenType } from 'enum/screen.enum'
 import { FluidConnection, FluidStatus, TermsStatus } from 'models'
-import { CustomPopup } from 'models/customPopup.model'
 import { PartnersInfo } from 'models/partnersInfo.model'
 import { Notes } from 'models/releaseNotes.model'
 import { SgeStore } from 'models/sgeStore.model'
 import { defaultAction } from 'store'
 
 export const CHANGE_SCREEN_TYPE = 'CHANGE_SCREEN_TYPE'
-export const SET_CUSTOM_POPUP = 'SET_CUSTOM_POPUP'
 export const SET_FLUID_STATUS = 'SET_FLUID_STATUS'
 export const SET_PARTNERS_INFO = 'SET_PARTNERS_INFO'
 export const SET_SHOULD_REFRESH_CONSENT = 'SET_SHOULD_REFRESH_CONSENT'
@@ -78,10 +76,6 @@ interface ShowReleaseNotes {
   type: typeof SHOW_RELEASE_NOTES
   payload?: { show: boolean; notes: Notes[]; redirectLink?: string }
 }
-interface SetCustomPopup {
-  type: typeof SET_CUSTOM_POPUP
-  payload: CustomPopup
-}
 
 interface SetShouldRefreshConsent {
   type: typeof SET_SHOULD_REFRESH_CONSENT
@@ -178,13 +172,6 @@ export function setPartnersInfo(partnersInfo: PartnersInfo): SetPartnersInfo {
   }
 }
 
-export function setCustomPopup(customPopupModal: CustomPopup): SetCustomPopup {
-  return {
-    type: SET_CUSTOM_POPUP,
-    payload: customPopupModal,
-  }
-}
-
 export function setShouldRefreshConsent(
   shouldRefreshConsent: boolean
 ): SetShouldRefreshConsent {
@@ -211,7 +198,6 @@ export type GlobalActionTypes =
   | UpdatedFluidConnection
   | UpdateTermValidation
   | ShowReleaseNotes
-  | SetCustomPopup
   | SetShouldRefreshConsent
   | UpdateSGEConnect
   | SetPartnersInfo

src/store/global/global.reducer.spec.ts

@@ -5,13 +5,11 @@ import { DateTime } from 'luxon'
 import { FluidStatus } from 'models'
 import { defaultAction } from 'store'
 import { accountsData } from '../../../tests/__mocks__/accountsData.mock'
-import { mockCustomPopup } from '../../../tests/__mocks__/customPopup.mock'
 import { konnectorsData } from '../../../tests/__mocks__/konnectorsData.mock'
 import { mockInitialGlobalState } from '../../../tests/__mocks__/store'
 import { triggersData } from '../../../tests/__mocks__/triggersData.mock'
 import {
   CHANGE_SCREEN_TYPE,
-  SET_CUSTOM_POPUP,
   SET_FLUID_STATUS,
   TOGGLE_ANALYSIS_NOTIFICATION,
   TOGGLE_CHALLENGE_ACTION_NOTIFICATION,
@@ -212,17 +210,4 @@ describe('global reducer', () => {
     })
     expect(state).toEqual(mockInitialGlobalState)
   })
-
-  it('should handle SET_CUSTOM_POPUP with payload', () => {
-    const state = {
-      ...mockInitialGlobalState,
-      customPopupModal: mockCustomPopup,
-    }
-    expect(
-      globalReducer(mockInitialGlobalState, {
-        type: SET_CUSTOM_POPUP,
-        payload: mockCustomPopup,
-      }).customPopupModal
-    ).toBe(state.customPopupModal)
-  })
 })

src/store/global/global.reducer.ts

@@ -7,7 +7,6 @@ import { Reducer } from 'redux'
 import {
   CHANGE_SCREEN_TYPE,
   GlobalActionTypes,
-  SET_CUSTOM_POPUP,
   SET_FLUID_STATUS,
   SET_PARTNERS_INFO,
   SET_SHOULD_REFRESH_CONSENT,
@@ -109,12 +108,6 @@ const initialState: GlobalState = {
     },
   ],
   fluidTypes: [],
-  customPopupModal: {
-    popupEnabled: false,
-    title: '',
-    description: '',
-    endDate: '',
-  },
   partnersInfo: {
     egl_failure: false,
     enedis_failure: false,
@@ -195,9 +188,6 @@ export const globalReducer: Reducer<GlobalState, GlobalActionTypes> = (
     case SET_PARTNERS_INFO:
       return updateState({ partnersInfo: action.payload })
 
-    case SET_CUSTOM_POPUP:
-      return updateState({ customPopupModal: action.payload })
-
     case SET_SHOULD_REFRESH_CONSENT:
       return updateState({ shouldRefreshConsent: action.payload })
 

src/store/modal/modal.slice.spec.ts

 import { ModalState } from 'models'
+import { mockCustomPopup } from '../../../tests/__mocks__/customPopup.mock'
 import { mockInitialModalState } from '../../../tests/__mocks__/store'
 import {
   modalSlice,
   openConnectionModal,
   openFeedbackModal,
   openPartnersModal,
+  setCustomPopup,
 } from './modal.slice'
 
 describe('modal reducer', () => {
@@ -13,8 +15,8 @@ describe('modal reducer', () => {
     expect(initialState).toEqual(mockInitialModalState)
   })
 
-  describe('Feedback Modal', () => {
-    it('should handle openFeedbackModal with payload', () => {
+  describe('openFeedbackModal', () => {
+    it('should handle openFeedbackModal', () => {
       const state = modalSlice.reducer(
         mockInitialModalState,
         openFeedbackModal(true)
@@ -26,7 +28,7 @@ describe('modal reducer', () => {
     })
   })
 
-  describe('PartnersInfo', () => {
+  describe('openPartnersModal', () => {
     const partnersModalAllTrue = {
       egl: true,
       enedis: true,
@@ -90,4 +92,17 @@ describe('modal reducer', () => {
       })
     })
   })
+
+  describe('customPopup', () => {
+    it('should handle setCustomPopup', () => {
+      const state = modalSlice.reducer(
+        mockInitialModalState,
+        setCustomPopup(mockCustomPopup)
+      )
+      expect(state).toEqual({
+        ...mockInitialModalState,
+        customPopupModal: mockCustomPopup,
+      })
+    })
+  })
 })

src/store/modal/modal.slice.ts

 import { PayloadAction, createSlice } from '@reduxjs/toolkit'
-import { ModalState } from 'models'
+import { CustomPopup, ModalState } from 'models'
 
 const initialState: ModalState = {
+  customPopupModal: {
+    popupEnabled: false,
+    title: '',
+    description: '',
+    endDate: '',
+  },
   isConnectionModalOpen: false,
   isFeedbacksOpen: false,
   partnersIssueModal: {
@@ -18,8 +24,12 @@ type OpenPartnersModalAction = PayloadAction<{
   enedis: boolean
   grdf: boolean
 }>
+type SetCustomPopup = PayloadAction<CustomPopup>
 
-export type ModalActionTypes = OpenFeedbackModalAction | OpenPartnersModalAction
+export type ModalActionTypes =
+  | OpenFeedbackModalAction
+  | OpenPartnersModalAction
+  | SetCustomPopup
 
 export const modalSlice = createSlice({
   name: 'modal',
@@ -34,8 +44,15 @@ export const modalSlice = createSlice({
     openConnectionModal: (state, action: OpenConnectionModalAction) => {
       state.isConnectionModalOpen = action.payload
     },
+    setCustomPopup: (state, action: SetCustomPopup) => {
+      state.customPopupModal = action.payload
+    },
   },
 })
 
-export const { openFeedbackModal, openPartnersModal, openConnectionModal } =
-  modalSlice.actions
+export const {
+  openFeedbackModal,
+  openPartnersModal,
+  setCustomPopup,
+  openConnectionModal,
+} = modalSlice.actions

tests/__mocks__/store.ts

@@ -43,12 +43,6 @@ export const mockInitialGlobalState: GlobalState = {
     accepted: true,
     versionType: 'init',
   },
-  customPopupModal: {
-    popupEnabled: false,
-    title: '',
-    description: '',
-    endDate: '',
-  },
   partnersInfo: {
     egl_failure: false,
     enedis_failure: false,
@@ -283,6 +277,12 @@ export const mockInitialChartState: ChartState = {
 }
 
 export const mockInitialModalState: ModalState = {
+  customPopupModal: {
+    popupEnabled: false,
+    title: '',
+    description: '',
+    endDate: '',
+  },
   isConnectionModalOpen: false,
   isFeedbacksOpen: false,
   partnersIssueModal: {