@@ -66,4 +63,4 @@ const SignupWizard = () => {
);
};
-export default SignupWizard;
+export default RealAccountCreation;
diff --git a/packages/tradershub/src/flows/RealAccountSIgnup/SignupWizard/Actions/index.tsx b/packages/tradershub/src/flows/RealAccountCreation/WizardScreenActions/WizardScreenActions.tsx
similarity index 79%
rename from packages/tradershub/src/flows/RealAccountSIgnup/SignupWizard/Actions/index.tsx
rename to packages/tradershub/src/flows/RealAccountCreation/WizardScreenActions/WizardScreenActions.tsx
index d38ce76daf4e..ec55aa3002e5 100644
--- a/packages/tradershub/src/flows/RealAccountSIgnup/SignupWizard/Actions/index.tsx
+++ b/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 (
- *
{
};
const AccountOpeningSuccessModal = () => {
- const { isSuccessModalOpen, reset } = useSignupWizardContext();
+ const { isSuccessModalOpen, reset } = useRealAccountCreationContext();
const { isDesktop } = useDevice();
- const { state } = useSignupWizardContext();
+ const { state } = useRealAccountCreationContext();
const history = useHistory();
const handleNavigateToDeposit = () => {
diff --git a/packages/tradershub/src/modals/AccountOpeningSuccessModal/index.ts b/packages/tradershub/src/modals/AccountOpeningSuccessModal/index.ts
new file mode 100644
index 000000000000..43f6fa58415e
--- /dev/null
+++ b/packages/tradershub/src/modals/AccountOpeningSuccessModal/index.ts
@@ -0,0 +1 @@
+export { default as AccountOpeningSuccessModal } from './AccountOpeningSuccessModal';
diff --git a/packages/tradershub/src/flows/RealAccountSIgnup/ExitConfirmationDialog/index.tsx b/packages/tradershub/src/modals/ExitConfirmationDialog/ExitConfirmationDialog.tsx
similarity index 85%
rename from packages/tradershub/src/flows/RealAccountSIgnup/ExitConfirmationDialog/index.tsx
rename to packages/tradershub/src/modals/ExitConfirmationDialog/ExitConfirmationDialog.tsx
index d356c8129d22..1d66dd3df80d 100644
--- a/packages/tradershub/src/flows/RealAccountSIgnup/ExitConfirmationDialog/index.tsx
+++ b/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();
diff --git a/packages/tradershub/src/modals/ExitConfirmationDialog/index.ts b/packages/tradershub/src/modals/ExitConfirmationDialog/index.ts
new file mode 100644
index 000000000000..92da84656c18
--- /dev/null
+++ b/packages/tradershub/src/modals/ExitConfirmationDialog/index.ts
@@ -0,0 +1 @@
+export { default as ExitConfirmationDialog } from './ExitConfirmationDialog';
diff --git a/packages/tradershub/src/modals/index.ts b/packages/tradershub/src/modals/index.ts
index 498310f7221d..756d5c240622 100644
--- a/packages/tradershub/src/modals/index.ts
+++ b/packages/tradershub/src/modals/index.ts
@@ -1 +1,3 @@
+export * from './AccountOpeningSuccessModal';
+export * from './ExitConfirmationDialog';
export * from './RegulationModal';
diff --git a/packages/tradershub/src/providers/SignupWizardProvider/SignupWizardContext.tsx b/packages/tradershub/src/providers/RealAccountCreationProvider/RealAccountCreationContext.tsx
similarity index 69%
rename from packages/tradershub/src/providers/SignupWizardProvider/SignupWizardContext.tsx
rename to packages/tradershub/src/providers/RealAccountCreationProvider/RealAccountCreationContext.tsx
index a9f118f0ef59..666c2c4a7e8c 100644
--- a/packages/tradershub/src/providers/SignupWizardProvider/SignupWizardContext.tsx
+++ b/packages/tradershub/src/providers/RealAccountCreationProvider/RealAccountCreationContext.tsx
@@ -1,6 +1,6 @@
import React, { createContext, useCallback, useContext, useMemo, useReducer, useState } from 'react';
import { useStep } from 'usehooks-ts';
-import { Helpers, TSignupWizardContext, TSignupWizardProvider } from './types';
+import { Helpers, TRealAccountCreationContext, TRealAccountCreationProvider } from './types';
import { valuesReducer } from './ValuesReducer';
export const ACTION_TYPES = {
@@ -27,7 +27,7 @@ const initialHelpers: Helpers = {
}) as React.Dispatch>,
};
-export const SignupWizardContext = createContext({
+export const RealAccountCreationContext = createContext({
currentStep: 0,
dispatch: /* noop */ () => {
/* noop */
@@ -49,20 +49,22 @@ export const SignupWizardContext = createContext({
},
});
-export const useSignupWizardContext = () => {
- const context = useContext(SignupWizardContext);
+export const useRealAccountCreationContext = () => {
+ const context = useContext(RealAccountCreationContext);
if (!context)
- throw new Error('useSignupWizardContext() must be called within a component wrapped in SignupWizardProvider.');
+ throw new Error(
+ 'useRealAccountCreationContext() must be called within a component wrapped in RealAccountCreationProvider.'
+ );
return context;
};
/**
- * @name SignupWizardProvider
- * @description The SignupWizardProvider component is used to wrap the components that need access to the SignupWizardContext.
+ * @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 SignupWizardProvider = ({ children }: TSignupWizardProvider) => {
+export const RealAccountCreationProvider = ({ children }: TRealAccountCreationProvider) => {
const [isWizardOpen, setIsWizardOpen] = useState(false);
const [isSuccessModalOpen, setIsSuccessModalOpen] = useState(false);
const [currentStep, helpers] = useStep(4);
@@ -79,7 +81,7 @@ export const SignupWizardProvider = ({ children }: TSignupWizardProvider) => {
helpers.setStep(1);
}, [helpers]);
- const contextState: TSignupWizardContext = useMemo(
+ const contextState: TRealAccountCreationContext = useMemo(
() => ({
currentStep,
dispatch,
@@ -94,5 +96,5 @@ export const SignupWizardProvider = ({ children }: TSignupWizardProvider) => {
[currentStep, helpers, isSuccessModalOpen, isWizardOpen, reset, state]
);
- return {children} ;
+ return {children} ;
};
diff --git a/packages/tradershub/src/providers/SignupWizardProvider/ValuesReducer.ts b/packages/tradershub/src/providers/RealAccountCreationProvider/ValuesReducer.ts
similarity index 92%
rename from packages/tradershub/src/providers/SignupWizardProvider/ValuesReducer.ts
rename to packages/tradershub/src/providers/RealAccountCreationProvider/ValuesReducer.ts
index 86c075f9a4bc..4da80af3e158 100644
--- a/packages/tradershub/src/providers/SignupWizardProvider/ValuesReducer.ts
+++ b/packages/tradershub/src/providers/RealAccountCreationProvider/ValuesReducer.ts
@@ -1,4 +1,4 @@
-import { ACTION_TYPES } from './SignupWizardContext';
+import { ACTION_TYPES } from './RealAccountCreationContext';
import { TActions, TState } from './types';
export function valuesReducer(state: TState, action: TActions) {
diff --git a/packages/tradershub/src/providers/RealAccountCreationProvider/index.ts b/packages/tradershub/src/providers/RealAccountCreationProvider/index.ts
new file mode 100644
index 000000000000..ab18f8c41767
--- /dev/null
+++ b/packages/tradershub/src/providers/RealAccountCreationProvider/index.ts
@@ -0,0 +1,2 @@
+export * from './RealAccountCreationContext';
+export * from './types';
diff --git a/packages/tradershub/src/providers/SignupWizardProvider/types.ts b/packages/tradershub/src/providers/RealAccountCreationProvider/types.ts
similarity index 82%
rename from packages/tradershub/src/providers/SignupWizardProvider/types.ts
rename to packages/tradershub/src/providers/RealAccountCreationProvider/types.ts
index 4ec6c3d14136..23e919d927b7 100644
--- a/packages/tradershub/src/providers/SignupWizardProvider/types.ts
+++ b/packages/tradershub/src/providers/RealAccountCreationProvider/types.ts
@@ -1,9 +1,9 @@
import { useStep } from 'usehooks-ts';
-import { ACTION_TYPES } from './SignupWizardContext';
+import { ACTION_TYPES } from './RealAccountCreationContext';
export type Helpers = ReturnType[1];
-export type TSignupWizardContext = {
+export type TRealAccountCreationContext = {
currentStep: number;
dispatch: React.Dispatch;
helpers: Helpers;
@@ -19,6 +19,7 @@ export type TState = {
accountOpeningReason?: string;
currency?: string;
dateOfBirth?: string;
+ detailsConfirmation?: boolean;
firstLineAddress?: string;
firstName?: string;
lastName?: string;
@@ -27,12 +28,13 @@ export type TState = {
secondLineAddress?: string;
stateProvince?: string;
taxIdentificationNumber?: string;
+ taxInfoConfirmation?: boolean;
taxResidence?: string;
townCity?: string;
zipCode?: string;
};
-export type TSignupWizardProvider = {
+export type TRealAccountCreationProvider = {
children: React.ReactNode;
};
diff --git a/packages/tradershub/src/providers/SignupWizardProvider/index.ts b/packages/tradershub/src/providers/SignupWizardProvider/index.ts
deleted file mode 100644
index 042f41e79bca..000000000000
--- a/packages/tradershub/src/providers/SignupWizardProvider/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './SignupWizardContext';
-export * from './types';
diff --git a/packages/tradershub/src/providers/index.ts b/packages/tradershub/src/providers/index.ts
new file mode 100644
index 000000000000..47f4bebc895a
--- /dev/null
+++ b/packages/tradershub/src/providers/index.ts
@@ -0,0 +1 @@
+export * from './RealAccountCreationProvider';
diff --git a/packages/tradershub/src/screens/Address/Address.tsx b/packages/tradershub/src/screens/Address/Address.tsx
index 5d821295ceea..d5c375ef3f24 100644
--- a/packages/tradershub/src/screens/Address/Address.tsx
+++ b/packages/tradershub/src/screens/Address/Address.tsx
@@ -1,13 +1,15 @@
import React from 'react';
import { Form, Formik, FormikValues } from 'formik';
+import { WizardScreenActions, WizardScreenWrapper } from '@/flows';
import { ScrollToFieldError } from '@/helpers';
import { address } from '@/utils';
import { useSettings, useStatesList } from '@deriv/api';
import { LabelPairedChevronDownMdRegularIcon } from '@deriv/quill-icons';
-import { Dropdown, Input, Text } from '@deriv-com/ui';
-import Actions from '../../flows/RealAccountSIgnup/SignupWizard/Actions';
-import WizardScreenWrapper from '../../flows/RealAccountSIgnup/SignupWizard/WizardScreenWrapper';
-import { ACTION_TYPES, useSignupWizardContext } from '../../providers/SignupWizardProvider/SignupWizardContext';
+import { Dropdown, Input, Text, useDevice } from '@deriv-com/ui';
+import {
+ ACTION_TYPES,
+ useRealAccountCreationContext,
+} from '../../providers/RealAccountCreationProvider/RealAccountCreationContext';
/**
* @name Address
@@ -19,7 +21,8 @@ const Address = () => {
const { data: getSettings } = useSettings();
const country = getSettings?.country_code ?? '';
const { data: statesList } = useStatesList(country);
- const { dispatch, helpers, state } = useSignupWizardContext();
+ const { dispatch, helpers, state } = useRealAccountCreationContext();
+ const { isDesktop } = useDevice();
const handleSubmit = (values: FormikValues) => {
dispatch({
@@ -70,6 +73,7 @@ const Address = () => {