Thisyahlenchore: add providers

package.json

@@ -21,7 +21,8 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.22.3",
-        "tailwind-merge": "^2.2.1"
+        "tailwind-merge": "^2.2.1",
+        "usehooks-ts": "^3.0.2"
     },
     "devDependencies": {
         "@babel/plugin-proposal-class-properties": "^7.18.6",

src/providers/CFDProvider/CFDProvider.tsx

@@ -0,0 +1,40 @@
+import { createContext, PropsWithChildren, useCallback, useContext, useMemo, useState } from 'react';
+
+type TCFDState = {
+    // Add your CFD states here
+};
+
+type TCFDContext = {
+    cfdState: TCFDState;
+    setCfdState: (newState: TCFDState) => void;
+};
+
+const CFDContext = createContext<TCFDContext | null>(null);
+
+export const useCFDContext = () => {
+    const context = useContext(CFDContext);
+
+    if (!context) {
+        throw new Error('useCFDContext must be used within a CFDProvider. Please import Provider from CFDProvider');
+    }
+
+    return context;
+};
+
+export const CFDProvider = ({ children }: PropsWithChildren) => {
+    const [cfdState, setCfdState] = useState<TCFDState>({});
+
+    const updateCFDState = useCallback((newState: TCFDState) => {
+        setCfdState(prevState => ({ ...prevState, ...newState }));
+    }, []);
+
+    const providerValue = useMemo(
+        () => ({
+            setCfdState: updateCFDState,
+            cfdState,
+        }),
+        [cfdState, updateCFDState]
+    );
+
+    return <CFDContext.Provider value={providerValue}>{children}</CFDContext.Provider>;
+};

src/providers/CFDProvider/index.ts

@@ -0,0 +1 @@
+export { CFDProvider, useCFDContext } from './CFDProvider';

src/providers/RealAccountCreationProvider/RealAccountCreationContext.tsx

@@ -0,0 +1,108 @@
+import React, { createContext, useCallback, useContext, useMemo, useReducer, useState } from 'react';
+import { useStep } from 'usehooks-ts';
+
+import { Helpers, TRealAccountCreationContext, TRealAccountCreationProvider } from './types';
+import { valuesReducer } from './ValuesReducer';
+
+export const ACTION_TYPES = {
+    RESET: 'RESET',
+    SET_ADDRESS: 'SET_ADDRESS',
+    SET_CURRENCY: 'SET_CURRENCY',
+    SET_PERSONAL_DETAILS: 'SET_PERSONAL_DETAILS',
+} as const;
+
+const initialHelpers: Helpers = {
+    canGoToNextStep: false,
+    canGoToPrevStep: false,
+    goToNextStep: /* noop */ () => {
+        /* noop */
+    },
+    goToPrevStep: /* noop */ () => {
+        /* noop */
+    },
+    reset: /* noop */ () => {
+        /* noop */
+    },
+    setStep: /* noop */ (() => {
+        /* noop */
+    }) as React.Dispatch<React.SetStateAction<number>>,
+};
+
+export const RealAccountCreationContext = createContext<TRealAccountCreationContext>({
+    currentStep: 0,
+    dispatch: /* noop */ () => {
+        /* noop */
+    },
+    helpers: initialHelpers,
+    isSuccessModalOpen: false,
+    isWizardOpen: false,
+    setIsSuccessModalOpen: /* noop */ () => {
+        /* noop */
+    },
+    setIsWizardOpen: /* noop */ () => {
+        /* noop */
+    },
+    setTotalSteps: /* noop */ () => {
+        /* noop */
+    },
+    state: {
+        currency: '',
+    },
+    reset: /* noop */ () => {
+        /* noop */
+    },
+    totalSteps: 0,
+});
+
+export const useRealAccountCreationContext = () => {
+    const context = useContext<TRealAccountCreationContext>(RealAccountCreationContext);
+    if (!context)
+        throw new Error(
+            'useRealAccountCreationContext() must be called within a component wrapped in RealAccountCreationProvider.'
+        );
+
+    return context;
+};
+
+/**
+ * @name RealAccountCreationProvider
+ * @description The RealAccountCreationProvider component is used to wrap the components that need access to the RealAccountCreationContext.
+ * @param {React.ReactNode} children - The content to be wrapped.
+ */
+export const RealAccountCreationProvider = ({ children }: TRealAccountCreationProvider) => {
+    const [isWizardOpen, setIsWizardOpen] = useState(false);
+    const [isSuccessModalOpen, setIsSuccessModalOpen] = useState(false);
+    const [totalSteps, setTotalSteps] = useState(0);
+    const [currentStep, helpers] = useStep(totalSteps);
+    const [state, dispatch] = useReducer(valuesReducer, {
+        currency: '',
+    });
+
+    const reset = useCallback(() => {
+        dispatch({
+            type: ACTION_TYPES.RESET,
+        });
+        setIsSuccessModalOpen(false);
+        setIsWizardOpen(false);
+        helpers.setStep(1);
+    }, [helpers]);
+
+    const contextState: TRealAccountCreationContext = useMemo(
+        () => ({
+            currentStep,
+            dispatch,
+            helpers,
+            isSuccessModalOpen,
+            isWizardOpen,
+            setIsSuccessModalOpen,
+            setIsWizardOpen,
+            state,
+            reset,
+            setTotalSteps,
+            totalSteps,
+        }),
+        [currentStep, helpers, isSuccessModalOpen, isWizardOpen, reset, state, totalSteps]
+    );
+
+    return <RealAccountCreationContext.Provider value={contextState}>{children}</RealAccountCreationContext.Provider>;
+};

src/providers/RealAccountCreationProvider/ValuesReducer.ts

@@ -0,0 +1,27 @@
+import { ACTION_TYPES } from './RealAccountCreationContext';
+import { TActions, TState } from './types';
+
+export function valuesReducer(state: TState, action: TActions) {
+    if (action.type === ACTION_TYPES.RESET) return { currency: '' };
+
+    const { payload, type } = action;
+    switch (type) {
+        case ACTION_TYPES.SET_CURRENCY:
+            return {
+                ...state,
+                currency: payload.currency,
+            };
+        case ACTION_TYPES.SET_PERSONAL_DETAILS:
+            return {
+                ...state,
+                ...payload,
+            };
+        case ACTION_TYPES.SET_ADDRESS:
+            return {
+                ...state,
+                ...payload,
+            };
+        default:
+            return state;
+    }
+}

src/providers/RealAccountCreationProvider/index.ts

@@ -0,0 +1,2 @@
+export * from './RealAccountCreationContext';
+export * from './types';

src/providers/RealAccountCreationProvider/types.ts

@@ -0,0 +1,51 @@
+import { useStep } from 'usehooks-ts';
+
+import { ACTION_TYPES } from './RealAccountCreationContext';
+
+export type Helpers = ReturnType<typeof useStep>[1];
+
+export type TRealAccountCreationContext = {
+    currentStep: number;
+    dispatch: React.Dispatch<TActions>;
+    helpers: Helpers;
+    isSuccessModalOpen: boolean;
+    isWizardOpen: boolean;
+    reset: VoidFunction;
+    setIsSuccessModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    setIsWizardOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    setTotalSteps: React.Dispatch<React.SetStateAction<number>>;
+    state: TState;
+    totalSteps: number;
+};
+
+export type TState = {
+    accountOpeningReason?: string;
+    currency?: string;
+    dateOfBirth?: string;
+    detailsConfirmation?: boolean;
+    firstLineAddress?: string;
+    firstName?: string;
+    lastName?: string;
+    phoneNumber?: string;
+    placeOfBirth?: string;
+    secondLineAddress?: string;
+    stateProvince?: string;
+    taxIdentificationNumber?: string;
+    taxInfoConfirmation?: boolean;
+    taxResidence?: string;
+    townCity?: string;
+    zipCode?: string;
+};
+
+export type TRealAccountCreationProvider = {
+    children: React.ReactNode;
+};
+
+export type TActions =
+    | {
+          payload: TState;
+          type: Exclude<keyof typeof ACTION_TYPES, 'RESET'>;
+      }
+    | {
+          type: typeof ACTION_TYPES.RESET;
+      };

src/providers/UIProvider/UIProvider.tsx

@@ -0,0 +1,37 @@
+import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
+
+type TUIState = {
+    // Add other UI states here
+    accountType?: string;
+    isSignupWizardOpen?: boolean;
+    regulation?: string;
+};
+
+type TUIContext = {
+    setUIState: (newState: TUIState) => void;
+    uiState: TUIState;
+};
+
+const UIContext = createContext<TUIContext | null>(null);
+
+export const useUIContext = () => {
+    const context = useContext(UIContext);
+
+    if (!context) {
+        throw new Error('useUIContext must be used within a UIProvider');
+    }
+
+    return context;
+};
+
+export const UIProvider = ({ children }: { children: React.ReactNode }) => {
+    const [uiState, setUIState] = useState<TUIState>({});
+
+    const updateUIState = useCallback((newState: TUIState) => {
+        setUIState(prevState => ({ ...prevState, ...newState }));
+    }, []);
+
+    const providerValue = useMemo(() => ({ setUIState: updateUIState, uiState }), [uiState, updateUIState]);
+
+    return <UIContext.Provider value={providerValue}>{children}</UIContext.Provider>;
+};

src/providers/UIProvider/index.ts

@@ -0,0 +1 @@
+export { UIProvider, useUIContext } from './UIProvider';

src/providers/index.ts

@@ -0,0 +1,2 @@
+export * from './CFDProvider';
+export * from './UIProvider';