[TRAH-2979] shahzaib / restructure real account creation flow

packages/tradershub/package.json

@@ -14,38 +14,27 @@
     },
     "dependencies": {
         "@deriv/api": "^1.0.0",
-        "@deriv/integration": "^1.0.0",
         "@deriv/library": "^1.0.0",
         "@deriv/quill-icons": "^1.18.3",
         "@deriv-com/ui": "1.8.2",
         "@deriv/react-joyride": "^2.6.2",
-        "@deriv/utils": "^1.0.0",
-        "@tanstack/react-table": "^8.10.3",
-        "@zxcvbn-ts/core": "^3.0.4",
-        "@zxcvbn-ts/language-common": "^3.0.4",
         "class-variance-authority": "^0.7.0",
-        "classnames": "^2.2.6",
-        "downshift": "^8.2.2",
         "embla-carousel-react": "8.0.0-rc12",
         "formik": "^2.1.4",
         "i18next": "^22.4.6",
-        "moment": "^2.29.2",
         "qrcode.react": "^3.1.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-modal": "^3.16.1",
-        "react-dropzone": "11.0.1",
         "react-i18next": "^11.11.0",
         "react-router-dom": "^5.2.0",
-        "react-transition-group": "4.4.2",
         "tailwind-merge": "^1.14.0",
         "usehooks-ts": "^2.7.0",
         "yup": "^0.32.11"
     },
     "devDependencies": {
         "@testing-library/react": "^12.0.0",
         "@testing-library/user-event": "^13.5.0",
-        "@types/css-modules": "^1.0.2",
         "@types/react-dom": "^18.0.0",
         "@typescript-eslint/eslint-plugin": "5.45.0",
         "@typescript-eslint/parser": "5.45.0",

packages/tradershub/src/App.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { UIProvider } from '@/components';
+import { RealAccountCreationProvider } from '@/providers';
 import { APIProvider } from '@deriv/api';
 import { Provider } from '@deriv/library';
-import { SignupWizardProvider } from './providers/SignupWizardProvider';
 import AppContent from './AppContent';
 import './index.scss';
 
@@ -11,9 +11,9 @@ const App = () => (
         <APIProvider standalone>
             <Provider.CFDProvider>
                 <Provider.ModalProvider>
-                    <SignupWizardProvider>
+                    <RealAccountCreationProvider>
                         <AppContent />
-                    </SignupWizardProvider>
+                    </RealAccountCreationProvider>
                 </Provider.ModalProvider>
             </Provider.CFDProvider>
         </APIProvider>

packages/tradershub/src/AppContent.tsx

@@ -1,8 +1,8 @@
 import React, { Fragment } from 'react';
 import { AppContainer, EUDisclaimerMessage } from '@/components';
+import { RealAccountCreation } from '@/flows';
 import { useRegulationFlags } from '@/hooks';
 import { Router } from '@/routes';
-import SignupWizard from './flows/RealAccountSIgnup/SignupWizard';
 
 const AppContent = () => {
     const { isEU } = useRegulationFlags();
@@ -14,7 +14,7 @@ const AppContent = () => {
                 <Router />
                 {isEU && <EUDisclaimerMessage />}
             </AppContainer>
-            <SignupWizard />
+            <RealAccountCreation />
         </Fragment>
     );
 };

packages/tradershub/src/components/GetADerivAccountBanner/GetADerivAccountBanner.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, Text } from '@deriv-com/ui';
-import { useSignupWizardContext } from '../../providers/SignupWizardProvider';
+import { useRealAccountCreationContext } from '../../providers/RealAccountCreationProvider';
 
 /**
  * `GetADerivAccountBanner` is a functional component that displays a banner message
@@ -10,7 +10,7 @@ import { useSignupWizardContext } from '../../providers/SignupWizardProvider';
  * @returns {React.ReactElement} A `div` element containing the banner message and the button.
  */
 const GetADerivAccountBanner = () => {
-    const { setIsWizardOpen } = useSignupWizardContext();
+    const { setIsWizardOpen } = useRealAccountCreationContext();
     return (
         <div className='flex items-center justify-center w-full gap-16 p-16 rounded-xs bg-system-light-secondary-background'>
             <Text weight='bold'>You need a Deriv account to create a CFD account.</Text>

packages/tradershub/src/components/GetADerivAccountBanner/GetADerivAccountDialog.tsx

@@ -3,7 +3,7 @@ import ReactModal from 'react-modal';
 import { ButtonGroup } from '@/components';
 import { CUSTOM_STYLES } from '@/helpers';
 import { Button, Text } from '@deriv-com/ui';
-import { useSignupWizardContext } from '../../providers/SignupWizardProvider';
+import { useRealAccountCreationContext } from '../../providers/RealAccountCreationProvider';
 
 type TGetADerivAccountDialog = {
     isOpen: boolean;
@@ -17,7 +17,7 @@ type TGetADerivAccountDialog = {
  * @returns {React.ReactElement} A `<Dialog>` component containing the dialog message and action button.
  */
 const GetADerivAccountDialog = ({ isOpen, onClose }: TGetADerivAccountDialog) => {
-    const { setIsWizardOpen } = useSignupWizardContext();
+    const { setIsWizardOpen } = useRealAccountCreationContext();
 
     return (
         <ReactModal ariaHideApp={false} isOpen={isOpen} shouldCloseOnOverlayClick={false} style={CUSTOM_STYLES}>

packages/tradershub/src/components/GetDerivAccount/GetDerivAccount.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { useSignupWizardContext } from '../../providers/SignupWizardProvider';
+import { useRealAccountCreationContext } from '../../providers/RealAccountCreationProvider';
 import { IconComponent } from '../IconComponent';
 import { TradingAccountCard, TradingAccountCardContent, TradingAccountCardLightButton } from '../TradingAccountCard';
 
 const TrailingButton = () => {
-    const { setIsWizardOpen } = useSignupWizardContext();
+    const { setIsWizardOpen } = useRealAccountCreationContext();
     return <TradingAccountCardLightButton onSubmit={() => setIsWizardOpen(true)} />;
 };
 

packages/tradershub/src/components/ProgressBar/index.tsx

@@ -1,4 +1,5 @@
-import DesktopProgressBar from './DesktopProgressBar';
-import MobileProgressBar from './MobileProgressBar';
+import type { TSteps } from './Stepper';
 
-export { DesktopProgressBar, MobileProgressBar };
+export { default as DesktopProgressBar } from './DesktopProgressBar';
+export { default as MobileProgressBar } from './MobileProgressBar';
+export { TSteps };

packages/tradershub/src/components/index.ts

@@ -13,6 +13,7 @@ export * from './IconComponent';
 export * from './Loaders';
 export * from './Modal';
 export * from './OptionsAndMultipliersSection';
+export * from './ProgressBar';
 export * from './RegulationSwitcher';
 export * from './SentEmailContent';
 export * from './StaticLink';

packages/tradershub/src/flows/RealAccountSIgnup/SignupWizard/index.tsx → packages/tradershub/src/flows/RealAccountCreation/RealAccountCreation.tsx

@@ -1,29 +1,26 @@
 import React, { Fragment, useState } from 'react';
 import ReactModal from 'react-modal';
+import { DesktopProgressBar, MobileProgressBar, TSteps } from '@/components';
+import { CUSTOM_STYLES } from '@/helpers';
+import { AccountOpeningSuccessModal, ExitConfirmationDialog } from '@/modals';
+import { useRealAccountCreationContext } from '@/providers';
 import { StandaloneXmarkBoldIcon } from '@deriv/quill-icons';
 import { Text } from '@deriv-com/ui';
-import { DesktopProgressBar, MobileProgressBar } from '../../../components/ProgressBar';
-import { TSteps } from '../../../components/ProgressBar/Stepper';
-import { CUSTOM_STYLES } from '../../../helpers/signupModalHelpers';
-import { useSignupWizardContext } from '../../../providers/SignupWizardProvider';
-import AccountOpeningSuccessModal from '../AccountOpeningSuccessModal/AccountOpeningSuccessModal';
-import ExitConfirmationDialog from '../ExitConfirmationDialog';
-import WizardScreens from './WizardScreens';
-import './index.scss';
+import WizardScreens from './WizardScreens/WizardScreens';
 
 const FORM_PROGRESS_STEPS: TSteps = ['Account currency', 'Personal details', 'Address', 'Terms of use'];
 
 /**
- * @name SignupWizard
- * @description The SignupWizard component is used to render the signup wizard modal.
+ * @name RealAccountCreation
+ * @description The RealAccountCreation component is used to render the signup wizard modal.
  * @example
  * return (
- *  <SignupWizard />
+ *  <RealAccountCreation />
  * );
  */
-const SignupWizard = () => {
+const RealAccountCreation = () => {
     const [isConfirmationDialogOpen, setIsConfirmationDialogOpen] = useState(false);
-    const { currentStep, isWizardOpen } = useSignupWizardContext();
+    const { currentStep, isWizardOpen } = useRealAccountCreationContext();
 
     return (
         <Fragment>
@@ -66,4 +63,4 @@ const SignupWizard = () => {
     );
 };
 
-export default SignupWizard;
+export default RealAccountCreation;

packages/tradershub/src/flows/RealAccountSIgnup/SignupWizard/Actions/index.tsx → packages/tradershub/src/flows/RealAccountCreation/WizardScreenActions/WizardScreenActions.tsx

@@ -1,31 +1,31 @@
 import React from 'react';
 import { useFormikContext } from 'formik';
 import { ButtonGroup } from '@/components';
+import { useRealAccountCreationContext } from '@/providers';
 import { Button, Divider, useDevice } from '@deriv-com/ui';
-import { useSignupWizardContext } from '../../../../providers/SignupWizardProvider';
 
-type TActions = {
+type TWizardScreenActions = {
     isSubmitBtnLoading?: boolean;
     submitDisabled?: boolean;
 };
 
 /**
- * @name Actions
- * @description The Actions component is used to navigate between steps in the SignupWizard component.
+ * @name WizardScreenActions
+ * @description The WizardScreenActions component is used to navigate between steps in the RealAccountCreation component.
  * Intended to be used as a child component of the Formik component.
  * @param {Object} props - React props object
  * @param {boolean} [props.submitDisabled] - A boolean that determines whether the Next button is disabled
  * @param {boolean} [props.isSubmitBtnLoading] - A boolean that determines whether the Next button is in a loading state
  * @example
  * return (
- *     <Actions submitDisabled />
+ *     <WizardScreenActions submitDisabled />
  * );
  */
 
-const Actions = ({ submitDisabled = false, isSubmitBtnLoading = false }: TActions) => {
+const WizardScreenActions = ({ submitDisabled = false, isSubmitBtnLoading = false }: TWizardScreenActions) => {
     const {
         helpers: { canGoToNextStep, canGoToPrevStep, goToPrevStep },
-    } = useSignupWizardContext();
+    } = useRealAccountCreationContext();
     const { isSubmitting } = useFormikContext();
     const { isDesktop } = useDevice();
 
@@ -59,4 +59,4 @@ const Actions = ({ submitDisabled = false, isSubmitBtnLoading = false }: TAction
     );
 };
 
-export default Actions;
+export default WizardScreenActions;

packages/tradershub/src/flows/RealAccountCreation/WizardScreenActions/index.ts

@@ -0,0 +1 @@
+export { default as WizardScreenActions } from './WizardScreenActions';

packages/tradershub/src/flows/RealAccountSIgnup/SignupWizard/WizardScreenWrapper/WizardScreenWrapper.tsx → packages/tradershub/src/flows/RealAccountCreation/WizardScreenWrapper/WizardScreenWrapper.tsx

@@ -5,7 +5,7 @@ type TWizardScreenWrapper = { children: React.ReactNode; heading: ReactNode };
 
 /**
  * @name WizardScreenWrapper
- * @description The WizardScreenWrapper component is used to wrap the screens in the SignupWizard component.
+ * @description The WizardScreenWrapper component is used to wrap the screens in the RealAccountCreation component.
  * @param {Object} props - React props object
  * @param {React.ReactNode} props.children - The content to be wrapped.
  * @param {React.ReactNode} props.heading - The heading of the screen.

packages/tradershub/src/flows/RealAccountCreation/WizardScreenWrapper/index.ts

@@ -0,0 +1 @@
+export { default as WizardScreenWrapper } from './WizardScreenWrapper';

packages/tradershub/src/flows/RealAccountSIgnup/SignupWizard/WizardScreens/index.tsx → packages/tradershub/src/flows/RealAccountCreation/WizardScreens/WizardScreens.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
-import { useSignupWizardContext } from '../../../../providers/SignupWizardProvider';
-import { Address, CurrencySelector, PersonalDetails, TermsOfUse } from '../../../../screens';
+import { useRealAccountCreationContext } from '@/providers';
+import { Address, CurrencySelector, PersonalDetails, TermsOfUse } from '@/screens';
 
 /**
  * @name WizardScreens
- * @description The WizardScreens component is used to render the screens in the SignupWizard component based on the active step from `SignupWizardContext`.
+ * @description The WizardScreens component is used to render the screens in the RealAccountCreation component based on the active step from `RealAccountCreationContext`.
  * @example
  * return (
  *   <WizardScreens />
  * );
  */
 const WizardScreens = () => {
-    const { currentStep } = useSignupWizardContext();
+    const { currentStep } = useRealAccountCreationContext();
 
     switch (currentStep) {
         case 1:

packages/tradershub/src/flows/RealAccountCreation/WizardScreens/index.ts

@@ -0,0 +1 @@
+export { default as WizardScreens } from './WizardScreens';

packages/tradershub/src/flows/RealAccountCreation/index.ts

@@ -0,0 +1,4 @@
+export { default as RealAccountCreation } from './RealAccountCreation';
+export * from './WizardScreenActions';
+export * from './WizardScreens';
+export * from './WizardScreenWrapper';

packages/tradershub/src/flows/index.ts

@@ -0,0 +1 @@
+export * from './RealAccountCreation';

packages/tradershub/src/hooks/useNewCRRealAccount.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import { useSignupWizardContext } from '@/providers/SignupWizardProvider';
+import { useRealAccountCreationContext } from '@/providers/RealAccountCreationProvider';
 import { useAuthorize, useCreateNewRealAccount, useSettings } from '@deriv/api';
 import useSyncLocalStorageClientAccounts from './useSyncLocalStorageClientAccounts';
 
@@ -9,7 +9,7 @@ import useSyncLocalStorageClientAccounts from './useSyncLocalStorageClientAccoun
  * @returns {Object} Submit handler function, the new real CR account data and the status of the request.
  */
 const useNewCRRealAccount = () => {
-    const { setIsWizardOpen, state, setIsSuccessModalOpen } = useSignupWizardContext();
+    const { setIsWizardOpen, state, setIsSuccessModalOpen } = useRealAccountCreationContext();
 
     const { data: newTradingAccountData, mutate: createAccount, status, ...rest } = useCreateNewRealAccount();
     const { data: settingsData } = useSettings();

packages/tradershub/src/flows/RealAccountSIgnup/AccountOpeningSuccessModal/AccountOpeningSuccessModal.tsx → packages/tradershub/src/modals/AccountOpeningSuccessModal/AccountOpeningSuccessModal.tsx

@@ -4,11 +4,11 @@ import { useHistory } from 'react-router-dom';
 import Checkmark from '@/assets/svgs/checkmark.svg';
 import { ActionScreen, ButtonGroup, IconComponent } from '@/components';
 import { CUSTOM_STYLES } from '@/helpers';
-import { useSignupWizardContext } from '@/providers/SignupWizardProvider';
+import { useRealAccountCreationContext } from '@/providers';
 import { Button, Text, useDevice } from '@deriv-com/ui';
 
 const SelectedCurrencyIcon = () => {
-    const { state } = useSignupWizardContext();
+    const { state } = useRealAccountCreationContext();
     return (
         <div className='relative'>
             <IconComponent
@@ -23,9 +23,9 @@ const SelectedCurrencyIcon = () => {
 };
 
 const AccountOpeningSuccessModal = () => {
-    const { isSuccessModalOpen, reset } = useSignupWizardContext();
+    const { isSuccessModalOpen, reset } = useRealAccountCreationContext();
     const { isDesktop } = useDevice();
-    const { state } = useSignupWizardContext();
+    const { state } = useRealAccountCreationContext();
     const history = useHistory();
 
     const handleNavigateToDeposit = () => {

packages/tradershub/src/modals/AccountOpeningSuccessModal/index.ts

@@ -0,0 +1 @@
+export { default as AccountOpeningSuccessModal } from './AccountOpeningSuccessModal';

packages/tradershub/src/flows/RealAccountSIgnup/ExitConfirmationDialog/index.tsx → packages/tradershub/src/modals/ExitConfirmationDialog/ExitConfirmationDialog.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import ReactModal from 'react-modal';
+import { CUSTOM_STYLES } from '@/helpers';
+import { useRealAccountCreationContext } from '@/providers';
 import { Button, Text } from '@deriv-com/ui';
-import { CUSTOM_STYLES } from '../../../helpers/signupModalHelpers';
-import { useSignupWizardContext } from '../../../providers/SignupWizardProvider';
 
 const ExitConfirmationDialog = ({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) => {
-    const { reset } = useSignupWizardContext();
+    const { reset } = useRealAccountCreationContext();
 
     const handleClose = () => {
         onClose();

packages/tradershub/src/modals/ExitConfirmationDialog/index.ts

@@ -0,0 +1 @@
+export { default as ExitConfirmationDialog } from './ExitConfirmationDialog';