[WALL] Jim/WALL-4121/Split modals and move modal titles to the header (…

…binary-com#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

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;

packages/wallets/src/features/cfd/modals/CreatePasswordModal/index.ts

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

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;

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;

packages/wallets/src/features/cfd/modals/EnterPasswordModal/index.ts

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