Account v2 real account signup base (#12836)

* chore: real account signup base modal setup

* chore: signup modal actions

* chore: update package-lock

---------

Co-authored-by: Likhith Kolayari <[email protected]>

Author: shahzaib-deriv

package-lock.json

@@ -23,6 +23,7 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-i18next": "^11.11.0",
+        "react-modal": "^3.16.1",
         "react-router-dom": "^5.2.0",
         "react-transition-group": "4.4.2",
         "usehooks-ts": "^2.7.0",
@@ -33,6 +34,7 @@
         "@testing-library/user-event": "^13.5.0",
         "@types/css-modules": "^1.0.2",
         "@types/react-dom": "^18.0.0",
+        "@types/react-modal": "^3.16.3",
         "@types/webpack": "^5.28.5",
         "@typescript-eslint/eslint-plugin": "5.45.0",
         "@typescript-eslint/parser": "5.45.0",

packages/account-v2/package.json

@@ -1,22 +1,32 @@
 import React from 'react';
 import { APIProvider } from '@deriv/api';
-import { BrandDerivLogoCoralIcon } from '@deriv/quill-icons';
-import './index.scss';
 import { BreakpointProvider } from '@deriv/quill-design';
 import { FormProgress } from './components/form-progress';
+import SignupWizard from './components/SignupWizard';
+import { SignupWizardProvider, useSignupWizardContext } from './context/SignupWizardContext';
 import { stepProgress } from './mocks/form-progress.mock';
+import './index.scss';
+
+const TriggerSignupWizardModal: React.FC = () => {
+    const { setIsWizardOpen } = useSignupWizardContext();
+
+    return <button onClick={() => setIsWizardOpen(true)}>Show SignupWizardModal</button>;
+};
 
-const App: React.FC = () => (
-    <APIProvider standalone>
-        <BreakpointProvider>
-            <div className='text-heading-h1 text-solid-slate-500'>Account V2</div>
-            <div className='p-300'>
-                <BrandDerivLogoCoralIcon height='120px' width='120px' />
-            </div>
-            {/* [TODO]:Mock - Remove hardcoded initial value once isActive comes from Modal */}
-            <FormProgress activeStep={1} steps={stepProgress} />
-        </BreakpointProvider>
-    </APIProvider>
-);
+const App: React.FC = () => {
+    return (
+        <APIProvider standalone>
+            <BreakpointProvider>
+                <div className=' text-solid-slate-500 text-heading-h1'>Account V2</div>
+                <SignupWizardProvider>
+                    <SignupWizard />
+                    <TriggerSignupWizardModal />
+                    {/* [TODO]:Mock - Remove hardcoded initial value once isActive comes from Modal */}
+                    <FormProgress activeStep={1} steps={stepProgress} />
+                </SignupWizardProvider>
+            </BreakpointProvider>
+        </APIProvider>
+    );
+};
 
 export default App;

packages/account-v2/src/App.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Button } from '@deriv/quill-design';
+import { useSignupWizardContext } from '../../../context/SignupWizardContext';
+
+type TActions = {
+    onSubmit: () => void;
+};
+
+/**
+ * @name Actions
+ * @description The Actions component is used to navigate between steps in the SignupWizard component.
+ * @param {Function} onSubmit - A function that is called when the Next button is clicked.
+ * @example
+ * const onSubmit = () => {
+ *     // do something
+ * };
+ * return (
+ *     <Actions onSubmit={onSubmit} />
+ * );
+ */
+
+const Actions: React.FC<TActions> = ({ onSubmit }) => {
+    const {
+        helpers: { canGoToPrevStep, goToPrevStep },
+    } = useSignupWizardContext();
+
+    return (
+        <div className='flex justify-end divide-y-75'>
+            {canGoToPrevStep && (
+                <Button
+                    className='btn btn--primary btn--medium mr-8 rounded-200 mr-400'
+                    colorStyle='black'
+                    onClick={goToPrevStep}
+                    size='md'
+                    variant='secondary'
+                >
+                    Previous
+                </Button>
+            )}
+            <Button className='btn btn--primary btn--medium mr-8 rounded-200' onClick={onSubmit} size='md'>
+                Next
+            </Button>
+        </div>
+    );
+};
+
+export default Actions;

packages/account-v2/src/components/.gitkeep

@@ -0,0 +1,25 @@
+type TCustomStyles = {
+    content: ReactModal.Styles['content'];
+    overlay: ReactModal.Styles['overlay'];
+};
+
+export const CUSTOM_STYLES: TCustomStyles = {
+    content: {
+        background: 'none',
+        border: 'none',
+        borderRadius: 0,
+        bottom: 'auto',
+        left: '50%',
+        margin: 0,
+        marginRight: '-50%',
+        padding: 0,
+        right: 'auto',
+        top: '50%',
+        transform: 'translate(-50%, -50%)',
+        transition: 'all 0.35s ease-in-out',
+    },
+    overlay: {
+        backgroundColor: 'rgba(0, 0, 0, 0.72)',
+        zIndex: 9999,
+    },
+};

packages/account-v2/src/components/SignupWizard/Actions/index.tsx

@@ -0,0 +1,27 @@
+.ReactModal__Overlay {
+    background-color: rgba(0, 0, 0, 0.72);
+    z-index: 9999;
+}
+
+.ReactModal__Content {
+    opacity: 0;
+    transition: all 350ms ease-in-out;
+
+    &--after-open {
+        opacity: 1;
+        bottom: auto;
+        left: 50%;
+        right: auto;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        border-radius: 0;
+        border: none;
+        padding: 0;
+        margin: 0;
+        background: none;
+    }
+
+    &--before-close {
+        opacity: 0;
+    }
+}

packages/account-v2/src/components/SignupWizard/helpers.ts

@@ -0,0 +1,42 @@
+import React, { useEffect } from 'react';
+import ReactModal from 'react-modal';
+import { StandaloneXmarkBoldIcon } from '@deriv/quill-icons';
+import { useSignupWizardContext } from '../../context/SignupWizardContext';
+import Actions from './Actions';
+import { CUSTOM_STYLES } from './helpers';
+import './index.scss';
+
+const SignupWizard: React.FC = () => {
+    const {
+        currentStep,
+        helpers: { goToNextStep },
+        isWizardOpen,
+        setIsWizardOpen,
+    } = useSignupWizardContext();
+    useEffect(() => {
+        ReactModal.setAppElement('#v2_modal_root');
+    }, []);
+    return (
+        <ReactModal
+            isOpen={isWizardOpen}
+            onRequestClose={() => setIsWizardOpen(false)}
+            shouldCloseOnOverlayClick
+            style={CUSTOM_STYLES}
+        >
+            <div className='bg-background-primary-base h-[71.7rem] w-[104rem] rounded-800 flex overflow-hidden'>
+                <div className='min-w-[25.6rem] bg-[#f2f3f4] p-800'>Timeline</div>
+                <div className='flex flex-col p-800 w-[100%] justify-between'>
+                    <StandaloneXmarkBoldIcon
+                        className='cursor-pointer absolute right-1200 top-1200'
+                        fill='#000000'
+                        onClick={() => setIsWizardOpen(false)}
+                    />
+                    Current step: {currentStep}
+                    <Actions onSubmit={goToNextStep} />
+                </div>
+            </div>
+        </ReactModal>
+    );
+};
+
+export default SignupWizard;

packages/account-v2/src/components/SignupWizard/index.scss

@@ -0,0 +1,65 @@
+import React, { createContext, useContext, useMemo, useState } from 'react';
+import { useStep } from 'usehooks-ts';
+
+type Helpers = ReturnType<typeof useStep>[1];
+
+type TSignupWizardContext = {
+    currentStep: number;
+    helpers: Helpers;
+    isWizardOpen: boolean;
+    setIsWizardOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+type TSignupWizardProvider = {
+    children: React.ReactNode;
+};
+
+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 SignupWizardContext = createContext<TSignupWizardContext>({
+    currentStep: 0,
+    helpers: initialHelpers,
+    isWizardOpen: false,
+    setIsWizardOpen: /* noop */ () => {
+        /* noop */
+    },
+});
+
+export const useSignupWizardContext = () => {
+    const context = useContext<TSignupWizardContext>(SignupWizardContext);
+    if (!context)
+        throw new Error('useSignupWizardContext() must be called within a component wrapped in SignupWizardProvider.');
+
+    return context;
+};
+
+export const SignupWizardProvider = ({ children }: TSignupWizardProvider) => {
+    const [isWizardOpen, setIsWizardOpen] = useState(false);
+    const [currentStep, helpers] = useStep(5);
+
+    const contextState = useMemo(
+        () => ({
+            currentStep,
+            helpers,
+            isWizardOpen,
+            setIsWizardOpen,
+        }),
+        [currentStep, helpers, isWizardOpen]
+    );
+
+    return <SignupWizardContext.Provider value={contextState}>{children}</SignupWizardContext.Provider>;
+};