feat: remove redux and create custom state management

templates/frontOffice/modern/assets/js/state/checkout.ts

@@ -0,0 +1,55 @@
+import { createGlobalState } from 'react-use';
+
+const initialState: {
+  mode: string | null;
+  phoneNumberValid: boolean;
+  checkoutStep: number;
+  deliveryAddressId?: number;
+  deliveryModuleId?: number;
+  deliveryModuleOption?: string;
+} = {
+  mode: null,
+  phoneNumberValid: false,
+  checkoutStep: 1
+};
+
+export const globalCheckoutState = createGlobalState(initialState);
+
+export const useGlobalCheckout = () => {
+  const [checkoutState, setCheckout] = globalCheckoutState();
+
+  const setMode = (mode: string) => {
+    let checkout = { ...checkoutState };
+
+    checkout.mode = mode;
+
+    checkout.deliveryAddressId = initialState.deliveryAddressId;
+    checkout.deliveryModuleId = initialState.deliveryModuleId;
+    checkout.deliveryModuleOption = initialState.deliveryModuleOption;
+
+    setCheckout(checkout);
+  };
+
+  const setPhoneNumberValid = (value: boolean) => {
+    let checkout = { ...checkoutState };
+
+    checkout.phoneNumberValid = value;
+    setCheckout(checkout);
+  };
+
+  const setCheckoutStep = (step: number) => {
+    let checkout = { ...checkoutState };
+
+    checkout.checkoutStep = step;
+    setCheckout(checkout);
+  };
+
+  return {
+    checkoutState: checkoutState,
+    actions: {
+      setMode: setMode,
+      setPhoneNumberValid: setPhoneNumberValid,
+      setCheckoutStep: setCheckoutStep
+    }
+  };
+};

templates/frontOffice/modern/assets/js/state/visibility.ts

@@ -0,0 +1,74 @@
+import { createGlobalState } from 'react-use';
+
+const initialState: {
+  cart: boolean;
+  login: boolean;
+  redirectionToCheckout: boolean;
+} = {
+  cart: false,
+  login: false,
+  redirectionToCheckout: false
+};
+
+export const globalVisibility = createGlobalState(initialState);
+
+export const useGlobalVisibility = () => {
+  const [visibilityState, setVisibility] = globalVisibility();
+
+  const hideCart = () => {
+    let visibility = { ...visibilityState };
+
+    visibility.cart = false;
+    setVisibility(visibility);
+  };
+  const showCart = () => {
+    let visibility = { ...visibilityState };
+
+    visibility.cart = true;
+    setVisibility(visibility);
+  };
+  const toggleCart = () => {
+    let visibility = { ...visibilityState };
+
+    visibility.cart = !visibility.cart;
+    setVisibility(visibility);
+  };
+
+  const showLogin = (redirectionToCheckout: boolean) => {
+    let visibility = { ...visibilityState };
+
+    visibility.login = true;
+    visibility.redirectionToCheckout = redirectionToCheckout || false;
+    console.log('show');
+    setVisibility(visibility);
+  };
+
+  const hideLogin = (redirectionToCheckout: boolean) => {
+    let visibility = { ...visibilityState };
+
+    visibility.login = false;
+    visibility.redirectionToCheckout = redirectionToCheckout || false;
+    console.log('hide');
+    setVisibility(visibility);
+  };
+
+  const toggleLogin = () => {
+    let visibility = { ...visibilityState };
+
+    visibility.login = !visibility.login;
+    console.log('toggle', visibility);
+    setVisibility(visibility);
+  };
+
+  return {
+    visibilityState: visibilityState,
+    actions: {
+      hideCart: hideCart,
+      showCart: showCart,
+      toggleCart: toggleCart,
+      showLogin: showLogin,
+      hideLogin: hideLogin,
+      toggleLogin: toggleLogin
+    }
+  };
+};

templates/frontOffice/modern/components/React/Checkout/CheckoutBtn.tsx

@@ -1,3 +1,4 @@
+import { useGlobalCheckout } from '@js/state/checkout';
 import {
   useFinalCheckout,
   useGetCheckout,
@@ -9,14 +10,16 @@ import { useRef } from 'react';
 import React from 'react';
 
 import { useIntl } from 'react-intl';
-import { useSelector } from 'react-redux';
 
 export default function CheckoutButton() {
   const intl = useIntl();
   const { mutate } = useFinalCheckout();
   const { mutate: setCheckout } = useSetCheckout();
   const { data: checkout } = useGetCheckout();
-  const { phoneNumberValid } = useSelector((state: any) => state.checkout);
+
+  const { checkoutState } = useGlobalCheckout();
+  const { phoneNumberValid } = checkoutState;
+
   const ButtonRef = useRef<HTMLInputElement>(null);
   return (
     <div className="">

templates/frontOffice/modern/components/React/Checkout/CheckoutFooter.tsx

@@ -1,13 +1,13 @@
 import { useIntl } from 'react-intl';
 import React, { useState, useEffect } from 'react';
 import useEnableCta from './hooks/useEnableCta';
-import { useDispatch } from 'react-redux';
-import { setCheckoutStep } from '@js/redux/modules/checkout';
+
 import { CHECKOUT_STEP } from './constants';
 import { useFinalCheckout } from '@openstudio/thelia-api-utils';
 import Loader from '../Loader';
 import { CheckoutRequest } from './type';
 import { Checkout } from '@js/types/checkout.types';
+import { useGlobalCheckout } from '@js/state/checkout';
 
 export function CheckoutFooter({
   step,
@@ -19,7 +19,8 @@ export function CheckoutFooter({
   const intl = useIntl();
   const enabledCta = useEnableCta(step, checkout);
   const { mutate: final, isLoading } = useFinalCheckout();
-  const dispatch = useDispatch();
+
+  const { actions } = useGlobalCheckout();
   const [currentStep, setCurrentStep] = useState(
     Object.values(CHECKOUT_STEP).find((s) => s.id === step)
   );
@@ -36,7 +37,7 @@ export function CheckoutFooter({
         console.error(error);
       }
     } else {
-      dispatch(setCheckoutStep(step + 1));
+      actions.setCheckoutStep(step + 1);
       window.scrollTo({ behavior: 'smooth' });
     }
   };

templates/frontOffice/modern/components/React/Checkout/DeliveryModes.tsx

@@ -1,7 +1,3 @@
-import { useDispatch, useSelector } from 'react-redux';
-
-import React from 'react';
-import { setMode } from '@redux/modules/checkout';
 import {
   useDeliveryModes,
   useSetCheckout,
@@ -10,11 +6,14 @@ import {
 import { useIntl } from 'react-intl';
 import Alert from '../Alert';
 import Loader from '../Loader';
+import { useGlobalCheckout } from '@js/state/checkout';
 
 function DeliveryModes() {
-  const dispatch = useDispatch();
   const intl = useIntl();
-  const selectedMode = useSelector((state: any) => state.checkout.mode);
+
+  const { checkoutState, actions } = useGlobalCheckout();
+  const selectedMode = checkoutState.mode;
+
   const { data: checkout } = useGetCheckout();
   const { mutate } = useSetCheckout();
   const { data: modes = [], isLoading } = useDeliveryModes();
@@ -37,7 +36,7 @@ function DeliveryModes() {
               mode === selectedMode ? 'bg-main-light' : 'bg-gray-100'
             }`}
             onClick={() => {
-              dispatch(setMode(mode));
+              actions.setMode(mode);
               mutate({
                 ...checkout,
                 deliveryAddressId: null,

templates/frontOffice/modern/components/React/Checkout/DeliveryModules.tsx

@@ -1,6 +1,3 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-
 import Alert from '../Alert';
 import Loader from '../Loader';
 import priceFormat from '@utils/priceFormat';
@@ -14,6 +11,7 @@ import {
 } from '@openstudio/thelia-api-utils';
 import Title from '../Title';
 import { DeliveryModule, Option } from '@js/types/common';
+import { useGlobalCheckout } from '@js/state/checkout';
 
 function getModuleValidOptions(module: DeliveryModule) {
   return module?.options?.filter((o) => o.valid) || [];
@@ -77,9 +75,13 @@ function ModuleOption({
 export default function DeliveryModules() {
   const intl = useIntl();
 
-  const selectedMode = useSelector((state: any) => state.checkout.mode);
+  const { checkoutState } = useGlobalCheckout();
+  const selectedMode = checkoutState.mode;
+
   const { data: checkout } = useGetCheckout();
-  const { data: modules, isLoading } = useValidDeliveryModules(selectedMode);
+  const { data: modules, isLoading } = useValidDeliveryModules(
+    selectedMode as string
+  );
 
   return (
     <>

templates/frontOffice/modern/components/React/Checkout/Pages/Delivery.tsx

@@ -1,5 +1,5 @@
 import React, { Suspense } from 'react';
-import { useSelector } from 'react-redux';
+
 import Title from '../../Title';
 import DeliveryModules from '../DeliveryModules';
 import DeliveryModes from '../DeliveryModes';
@@ -8,6 +8,7 @@ import AddressBook from '../AddressBook';
 import Map from '../../PickupMap';
 import { useAddressQuery } from '@openstudio/thelia-api-utils';
 import { CheckoutPageType, CheckoutResponse } from '@js/types/checkout.types';
+import { useGlobalCheckout } from '@js/state/checkout';
 
 export default function Delivery({
   isVisible,
@@ -18,7 +19,9 @@ export default function Delivery({
   checkout?: CheckoutResponse;
   page?: CheckoutPageType;
 }) {
-  const { mode: selectedMode } = useSelector((state: any) => state.checkout);
+  const { checkoutState } = useGlobalCheckout();
+  const { mode: selectedMode } = checkoutState;
+
   const { data: addresses = [] } = useAddressQuery();
   const title = page ? page.title : '';