From 03827b06d6cfd426342e646bc2ec91a3f6535fe1 Mon Sep 17 00:00:00 2001
From: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com>
Date: Mon, 20 May 2024 22:48:52 +0800
Subject: [PATCH] [WALL] Jim/WALL-4121/Split modals and move modal titles to
 the header (#15251)

* chore: move title to the header section

* chore: retrieve markettype from prop

* chore: remove unnecessary prop and make it optional in the host component
---
 .../CreatePasswordModal.tsx                   |  57 +++++
 .../cfd/modals/CreatePasswordModal/index.ts   |   1 +
 .../DxtradeEnterPasswordModal.tsx             | 211 ++++--------------
 .../EnterPasswordModal/EnterPasswordModal.tsx |  87 ++++++++
 .../cfd/modals/EnterPasswordModal/index.ts    |   1 +
 .../cfd/modals/SuccessModal/SuccessModal.tsx  |  75 +++++++
 .../features/cfd/modals/SuccessModal/index.ts |   1 +
 .../screens/EnterPassword/EnterPassword.tsx   |  10 +-
 8 files changed, 274 insertions(+), 169 deletions(-)
 create mode 100644 packages/wallets/src/features/cfd/modals/CreatePasswordModal/CreatePasswordModal.tsx
 create mode 100644 packages/wallets/src/features/cfd/modals/CreatePasswordModal/index.ts
 create mode 100644 packages/wallets/src/features/cfd/modals/EnterPasswordModal/EnterPasswordModal.tsx
 create mode 100644 packages/wallets/src/features/cfd/modals/EnterPasswordModal/index.ts
 create mode 100644 packages/wallets/src/features/cfd/modals/SuccessModal/SuccessModal.tsx
 create mode 100644 packages/wallets/src/features/cfd/modals/SuccessModal/index.ts

diff --git a/packages/wallets/src/features/cfd/modals/CreatePasswordModal/CreatePasswordModal.tsx b/packages/wallets/src/features/cfd/modals/CreatePasswordModal/CreatePasswordModal.tsx
new file mode 100644
index 000000000000..c4ca633dca25
--- /dev/null
+++ b/packages/wallets/src/features/cfd/modals/CreatePasswordModal/CreatePasswordModal.tsx
@@ -0,0 +1,57 @@
+import React, { ComponentProps, FC } from 'react';
+import { ModalStepWrapper, ModalWrapper, WalletButton } from '../../../../components';
+import useDevice from '../../../../hooks/useDevice';
+import { PlatformDetails } from '../../constants';
+import { CreatePassword } from '../../screens';
+
+const CreatePasswordModal: FC<ComponentProps<typeof CreatePassword>> = ({
+    isLoading,
+    onPasswordChange,
+    onPrimaryClick,
+    password,
+    platform,
+}) => {
+    const { isMobile } = useDevice();
+    if (isMobile) {
+        return (
+            <ModalStepWrapper
+                renderFooter={() => {
+                    return (
+                        <WalletButton
+                            disabled={!password || isLoading}
+                            isFullWidth
+                            isLoading={isLoading}
+                            onClick={onPrimaryClick}
+                            size={isMobile ? 'lg' : 'md'}
+                        >
+                            {`Create ${PlatformDetails[platform].title} password`}
+                        </WalletButton>
+                    );
+                }}
+                title={''}
+            >
+                <CreatePassword
+                    isLoading={isLoading}
+                    onPasswordChange={onPasswordChange}
+                    onPrimaryClick={onPrimaryClick}
+                    password={password}
+                    platform={platform}
+                />
+            </ModalStepWrapper>
+        );
+    }
+
+    return (
+        <ModalWrapper>
+            <CreatePassword
+                isLoading={isLoading}
+                onPasswordChange={onPasswordChange}
+                onPrimaryClick={onPrimaryClick}
+                password={password}
+                platform={platform}
+            />
+        </ModalWrapper>
+    );
+};
+
+export default CreatePasswordModal;
diff --git a/packages/wallets/src/features/cfd/modals/CreatePasswordModal/index.ts b/packages/wallets/src/features/cfd/modals/CreatePasswordModal/index.ts
new file mode 100644
index 000000000000..07b5ed417b41
--- /dev/null
+++ b/packages/wallets/src/features/cfd/modals/CreatePasswordModal/index.ts
@@ -0,0 +1 @@
+export { default as CreatePasswordModal } from './CreatePasswordModal';
diff --git a/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx b/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx
index 3ffad4d2cac1..c75ee0abe5d9 100644
--- a/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx
+++ b/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx
@@ -7,13 +7,15 @@ import {
     useDxtradeAccountsList,
 } from '@deriv/api-v2';
 import { SentEmailContent, WalletError } from '../../../../components';
-import { ModalStepWrapper, ModalWrapper, WalletButton, WalletButtonGroup } from '../../../../components/Base';
+import { ModalStepWrapper, ModalWrapper } from '../../../../components/Base';
 import { useModal } from '../../../../components/ModalProvider';
 import useDevice from '../../../../hooks/useDevice';
 import useSendPasswordResetEmail from '../../../../hooks/useSendPasswordResetEmail';
 import { PlatformDetails } from '../../constants';
-import { CFDSuccess, CreatePassword, EnterPassword } from '../../screens';
+import { CreatePasswordModal } from '../CreatePasswordModal';
+import { EnterPasswordModal } from '../EnterPasswordModal';
 import { PasswordLimitExceededModal } from '../PasswordLimitExceededModal';
+import { SuccessModal } from '../SuccessModal';
 import './DxtradeEnterPasswordModal.scss';
 
 const DxtradeEnterPasswordModal = () => {
@@ -81,158 +83,6 @@ const DxtradeEnterPasswordModal = () => {
         }
     }, [dxtradePlatform, hide, isDxtradePasswordNotSet, isMobile, isResetPasswordSuccessful, show]);
 
-    const renderFooter = useMemo(() => {
-        if (isCreateAccountSuccessful) {
-            if (accountType === 'demo') {
-                return (
-                    <div className='wallets-success-btn'>
-                        <WalletButton isFullWidth onClick={hide} size={isMobile ? 'lg' : 'md'}>
-                            OK
-                        </WalletButton>
-                    </div>
-                );
-            }
-            return (
-                <WalletButtonGroup isFlex isFullWidth>
-                    <WalletButton onClick={() => hide()} size={isMobile ? 'lg' : 'md'} variant='outlined'>
-                        Maybe later
-                    </WalletButton>
-                    <WalletButton
-                        onClick={() => {
-                            hide();
-                            history.push('/wallets/cashier/transfer', { toAccountLoginId: createdAccount?.account_id });
-                        }}
-                        size={isMobile ? 'lg' : 'md'}
-                    >
-                        Transfer funds
-                    </WalletButton>
-                </WalletButtonGroup>
-            );
-        }
-
-        if (!isDxtradePasswordNotSet) {
-            return (
-                <WalletButtonGroup isFullWidth>
-                    <WalletButton
-                        isFullWidth
-                        isLoading={isResetPasswordLoading}
-                        onClick={() => {
-                            sendEmail({
-                                platform: dxtradePlatform,
-                            });
-                        }}
-                        size={isMobile ? 'lg' : 'md'}
-                        variant='outlined'
-                    >
-                        Forgot password?
-                    </WalletButton>
-                    <WalletButton
-                        disabled={!password || isLoading}
-                        isFullWidth
-                        isLoading={isLoading}
-                        onClick={onSubmit}
-                        size={isMobile ? 'lg' : 'md'}
-                    >
-                        Add account
-                    </WalletButton>
-                </WalletButtonGroup>
-            );
-        }
-
-        return (
-            <WalletButton
-                disabled={!password || isLoading}
-                isFullWidth
-                isLoading={isLoading}
-                onClick={onSubmit}
-                size={isMobile ? 'lg' : 'md'}
-            >
-                {`Create ${PlatformDetails.dxtrade.title} password`}
-            </WalletButton>
-        );
-    }, [
-        accountType,
-        createdAccount?.account_id,
-        dxtradePlatform,
-        hide,
-        history,
-        isCreateAccountSuccessful,
-        isDxtradePasswordNotSet,
-        isLoading,
-        isMobile,
-        isResetPasswordLoading,
-        onSubmit,
-        password,
-        sendEmail,
-    ]);
-
-    const successComponent = useMemo(() => {
-        if (isCreateAccountSuccessful && dxtradeAccountListSuccess) {
-            return (
-                <CFDSuccess
-                    description={successDescription}
-                    displayBalance={dxtradeBalance ?? ''}
-                    marketType='all'
-                    platform={dxtradePlatform}
-                    renderButton={() => renderFooter}
-                    title={`Your ${PlatformDetails.dxtrade.title}${
-                        accountType === 'demo' ? ` ${accountType}` : ''
-                    } account is ready`}
-                />
-            );
-        }
-    }, [
-        isCreateAccountSuccessful,
-        dxtradeAccountListSuccess,
-        successDescription,
-        dxtradeBalance,
-        dxtradePlatform,
-        accountType,
-        renderFooter,
-    ]);
-
-    const passwordComponent = useMemo(() => {
-        if (!isCreateAccountSuccessful && accountStatusSuccess) {
-            return isDxtradePasswordNotSet ? (
-                <CreatePassword
-                    isLoading={isLoading}
-                    onPasswordChange={e => setPassword(e.target.value)}
-                    onPrimaryClick={onSubmit}
-                    password={password}
-                    platform={dxtradePlatform}
-                />
-            ) : (
-                <EnterPassword
-                    isForgotPasswordLoading={isResetPasswordLoading}
-                    isLoading={isLoading}
-                    marketType='all'
-                    onPasswordChange={e => setPassword(e.target.value)}
-                    onPrimaryClick={onSubmit}
-                    onSecondaryClick={() => {
-                        sendEmail({
-                            platform: dxtradePlatform,
-                        });
-                    }}
-                    password={password}
-                    passwordError={error?.error?.code === 'PasswordError'}
-                    platform={dxtradePlatform}
-                    setPassword={setPassword}
-                />
-            );
-        }
-    }, [
-        isCreateAccountSuccessful,
-        accountStatusSuccess,
-        isDxtradePasswordNotSet,
-        isLoading,
-        onSubmit,
-        password,
-        dxtradePlatform,
-        isResetPasswordLoading,
-        error?.error?.code,
-        sendEmail,
-    ]);
-
     if (status === 'error' && error?.error?.code === 'PasswordReset') {
         return (
             <PasswordLimitExceededModal
@@ -245,7 +95,6 @@ const DxtradeEnterPasswordModal = () => {
             />
         );
     }
-
     if (status === 'error' && error?.error?.code !== 'PasswordError') {
         return <WalletError errorMessage={error?.error.message} onClick={hide} title={error?.error?.code} />;
     }
@@ -260,20 +109,50 @@ const DxtradeEnterPasswordModal = () => {
         );
     }
 
-    if (isMobile) {
+    if (!isCreateAccountSuccessful && accountStatusSuccess) {
+        return isDxtradePasswordNotSet ? (
+            <CreatePasswordModal
+                isLoading={isLoading}
+                onPasswordChange={e => setPassword(e.target.value)}
+                onPrimaryClick={onSubmit}
+                password={password}
+                platform={dxtradePlatform}
+            />
+        ) : (
+            <EnterPasswordModal
+                isForgotPasswordLoading={isResetPasswordLoading}
+                isLoading={isLoading}
+                marketType='all'
+                onPasswordChange={e => setPassword(e.target.value)}
+                onPrimaryClick={onSubmit}
+                onSecondaryClick={() => {
+                    sendEmail({
+                        platform: dxtradePlatform,
+                    });
+                }}
+                password={password}
+                passwordError={error?.error?.code === 'PasswordError'}
+                platform={dxtradePlatform}
+                setPassword={setPassword}
+            />
+        );
+    }
+    if (isCreateAccountSuccessful && dxtradeAccountListSuccess) {
         return (
-            <ModalStepWrapper renderFooter={() => renderFooter} title={' '}>
-                {successComponent}
-                {passwordComponent}
-            </ModalStepWrapper>
+            <SuccessModal
+                description={successDescription}
+                displayBalance={dxtradeBalance ?? ''}
+                marketType='all'
+                onPrimaryClick={() => {
+                    hide();
+                    history.push('/wallets/cashier/transfer', { toAccountLoginId: createdAccount?.account_id });
+                }}
+                onSecondaryClick={hide}
+                platform={dxtradePlatform}
+            />
         );
     }
-    return (
-        <ModalWrapper hideCloseButton={isCreateAccountSuccessful}>
-            {successComponent}
-            {passwordComponent}
-        </ModalWrapper>
-    );
+    return null;
 };
 
 export default DxtradeEnterPasswordModal;
diff --git a/packages/wallets/src/features/cfd/modals/EnterPasswordModal/EnterPasswordModal.tsx b/packages/wallets/src/features/cfd/modals/EnterPasswordModal/EnterPasswordModal.tsx
new file mode 100644
index 000000000000..cafb7d2fe4cd
--- /dev/null
+++ b/packages/wallets/src/features/cfd/modals/EnterPasswordModal/EnterPasswordModal.tsx
@@ -0,0 +1,87 @@
+import React, { ComponentProps, FC } from 'react';
+import { ModalStepWrapper, ModalWrapper, WalletButton, WalletButtonGroup } from '../../../../components';
+import useDevice from '../../../../hooks/useDevice';
+import { PlatformDetails } from '../../constants';
+import { EnterPassword } from '../../screens';
+
+const EnterPasswordModal: FC<ComponentProps<typeof EnterPassword>> = ({
+    isForgotPasswordLoading,
+    isLoading,
+    marketType,
+    onPasswordChange,
+    onPrimaryClick,
+    onSecondaryClick,
+    password,
+    passwordError,
+    platform,
+    setPassword,
+}) => {
+    const { isMobile } = useDevice();
+
+    const title = `Enter your ${PlatformDetails[platform].title} password`;
+
+    if (isMobile) {
+        return (
+            <ModalStepWrapper
+                renderFooter={() => {
+                    return (
+                        <WalletButtonGroup isFullWidth>
+                            <WalletButton
+                                isFullWidth
+                                isLoading={isForgotPasswordLoading}
+                                onClick={onSecondaryClick}
+                                size={isMobile ? 'lg' : 'md'}
+                                variant='outlined'
+                            >
+                                Forgot password?
+                            </WalletButton>
+                            <WalletButton
+                                disabled={!password || isLoading}
+                                isFullWidth
+                                isLoading={isLoading}
+                                onClick={onPrimaryClick}
+                                size={isMobile ? 'lg' : 'md'}
+                            >
+                                Add account
+                            </WalletButton>
+                        </WalletButtonGroup>
+                    );
+                }}
+                title={title}
+            >
+                <EnterPassword
+                    isForgotPasswordLoading={isForgotPasswordLoading}
+                    isLoading={isLoading}
+                    marketType={marketType}
+                    onPasswordChange={onPasswordChange}
+                    onPrimaryClick={onPrimaryClick}
+                    onSecondaryClick={onSecondaryClick}
+                    password={password}
+                    passwordError={passwordError}
+                    platform={platform}
+                    setPassword={setPassword}
+                />
+            </ModalStepWrapper>
+        );
+    }
+
+    return (
+        <ModalWrapper>
+            <EnterPassword
+                isForgotPasswordLoading={isForgotPasswordLoading}
+                isLoading={isLoading}
+                marketType={marketType}
+                modalTitle={title}
+                onPasswordChange={onPasswordChange}
+                onPrimaryClick={onPrimaryClick}
+                onSecondaryClick={onSecondaryClick}
+                password={password}
+                passwordError={passwordError}
+                platform={platform}
+                setPassword={setPassword}
+            />
+        </ModalWrapper>
+    );
+};
+
+export default EnterPasswordModal;
diff --git a/packages/wallets/src/features/cfd/modals/EnterPasswordModal/index.ts b/packages/wallets/src/features/cfd/modals/EnterPasswordModal/index.ts
new file mode 100644
index 000000000000..f765028f7a42
--- /dev/null
+++ b/packages/wallets/src/features/cfd/modals/EnterPasswordModal/index.ts
@@ -0,0 +1 @@
+export { default as EnterPasswordModal } from './EnterPasswordModal';
diff --git a/packages/wallets/src/features/cfd/modals/SuccessModal/SuccessModal.tsx b/packages/wallets/src/features/cfd/modals/SuccessModal/SuccessModal.tsx
new file mode 100644
index 000000000000..0ec10b805f79
--- /dev/null
+++ b/packages/wallets/src/features/cfd/modals/SuccessModal/SuccessModal.tsx
@@ -0,0 +1,75 @@
+import React, { ComponentProps, FC } from 'react';
+import { useActiveWalletAccount } from '@deriv/api-v2';
+import { ModalStepWrapper, ModalWrapper, WalletButton, WalletButtonGroup } from '../../../../components';
+import useDevice from '../../../../hooks/useDevice';
+import { PlatformDetails } from '../../constants';
+import { CFDSuccess } from '../../screens';
+
+type TProps = Omit<ComponentProps<typeof CFDSuccess>, 'title'> & {
+    onPrimaryClick?: () => void;
+    onSecondaryClick?: () => void;
+};
+
+const SuccessModal: FC<TProps> = ({
+    description,
+    displayBalance = '',
+    marketType = 'all',
+    onPrimaryClick,
+    onSecondaryClick,
+    platform = 'dxtrade',
+}) => {
+    const { isMobile } = useDevice();
+    const { data: activeWallet } = useActiveWalletAccount();
+    const accountType = activeWallet?.is_virtual ? 'demo' : 'real';
+    const title = `Your ${PlatformDetails[platform].title}${
+        accountType === 'demo' ? ` ${accountType}` : ''
+    } account is ready`;
+
+    const renderButton = () => {
+        return accountType === 'demo' ? (
+            <div className='wallets-success-btn'>
+                <WalletButton isFullWidth onClick={onSecondaryClick} size={isMobile ? 'lg' : 'md'}>
+                    OK
+                </WalletButton>
+            </div>
+        ) : (
+            <WalletButtonGroup isFlex isFullWidth>
+                <WalletButton onClick={onSecondaryClick} size={isMobile ? 'lg' : 'md'} variant='outlined'>
+                    Maybe later
+                </WalletButton>
+                <WalletButton onClick={onPrimaryClick} size={isMobile ? 'lg' : 'md'}>
+                    Transfer funds
+                </WalletButton>
+            </WalletButtonGroup>
+        );
+    };
+
+    if (isMobile) {
+        return (
+            <ModalStepWrapper renderFooter={renderButton} title={' '}>
+                <CFDSuccess
+                    description={description}
+                    displayBalance={displayBalance}
+                    marketType={marketType}
+                    platform={platform}
+                    title={title}
+                />
+            </ModalStepWrapper>
+        );
+    }
+
+    return (
+        <ModalWrapper hideCloseButton>
+            <CFDSuccess
+                description={description}
+                displayBalance={displayBalance}
+                marketType={marketType}
+                platform={platform}
+                renderButton={renderButton}
+                title={title}
+            />
+        </ModalWrapper>
+    );
+};
+
+export default SuccessModal;
diff --git a/packages/wallets/src/features/cfd/modals/SuccessModal/index.ts b/packages/wallets/src/features/cfd/modals/SuccessModal/index.ts
new file mode 100644
index 000000000000..259dad886e14
--- /dev/null
+++ b/packages/wallets/src/features/cfd/modals/SuccessModal/index.ts
@@ -0,0 +1 @@
+export { default as SuccessModal } from './SuccessModal';
diff --git a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx b/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx
index 2b06e82fa7b5..2ea3fcca6c85 100644
--- a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx
+++ b/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx
@@ -11,6 +11,7 @@ type TProps = {
     isForgotPasswordLoading?: boolean;
     isLoading?: boolean;
     marketType: TMarketTypes.CreateOtherCFDAccount;
+    modalTitle?: string;
     onPasswordChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onPrimaryClick?: () => void;
     onSecondaryClick?: () => void;
@@ -24,6 +25,7 @@ const EnterPassword: React.FC<TProps> = ({
     isForgotPasswordLoading,
     isLoading,
     marketType,
+    modalTitle,
     onPasswordChange,
     onPrimaryClick,
     onSecondaryClick,
@@ -49,9 +51,11 @@ const EnterPassword: React.FC<TProps> = ({
     return (
         <div className='wallets-enter-password'>
             <div className='wallets-enter-password__container'>
-                <WalletText lineHeight='xl' weight='bold'>
-                    Enter your {title} password
-                </WalletText>
+                {isDesktop && (
+                    <WalletText lineHeight='xl' weight='bold'>
+                        {modalTitle}
+                    </WalletText>
+                )}
                 <div className='wallets-enter-password__content'>
                     <WalletText size='sm'>
                         Enter your {title} password to add a{' '}