From 715a48af7bd2557edf04dbea6440ffc9195fa52c Mon Sep 17 00:00:00 2001
From: lubega-deriv <lubega@deriv.com>
Date: Wed, 13 Nov 2024 14:09:02 +0800
Subject: [PATCH 1/3] chore: enter existing mt5 password modal

---
 .../WalletPasswordField.tsx                   | 35 ++++++---
 .../WalletPasswordFieldLazy.tsx               |  1 +
 .../MT5PasswordModal/MT5PasswordModal.tsx     | 78 ++++++++++++-------
 .../MT5PasswordModalFooters.tsx               |  2 +-
 .../__tests__/MT5PasswordModal.spec.tsx       | 18 ++++-
 .../MT5PasswordModalFooters.spec.tsx          |  4 +-
 .../screens/EnterPassword/EnterPassword.tsx   | 19 ++---
 .../__test__/EnterPassword.spec.tsx           | 47 ++++++-----
 8 files changed, 125 insertions(+), 79 deletions(-)

diff --git a/packages/wallets/src/components/Base/WalletPasswordField/WalletPasswordField.tsx b/packages/wallets/src/components/Base/WalletPasswordField/WalletPasswordField.tsx
index 5be9cba5668a..5abf2317772a 100644
--- a/packages/wallets/src/components/Base/WalletPasswordField/WalletPasswordField.tsx
+++ b/packages/wallets/src/components/Base/WalletPasswordField/WalletPasswordField.tsx
@@ -50,6 +50,7 @@ export const validatePassword = (
 
 const WalletPasswordField: React.FC<WalletPasswordFieldProps> = ({
     autoComplete,
+    hideValidation = false,
     label,
     mt5Policy = false,
     name = 'walletPasswordField',
@@ -67,10 +68,17 @@ const WalletPasswordField: React.FC<WalletPasswordFieldProps> = ({
     const [errorMessage, setErrorMessage] = useState('');
 
     const { score, validationErrorMessage } = useMemo(
-        () => validatePassword(password, mt5Policy, localize),
-        [password, mt5Policy, localize]
+        () =>
+            hideValidation ? { score: 0, validationErrorMessage: '' } : validatePassword(password, mt5Policy, localize),
+        [password, mt5Policy, localize, hideValidation]
     );
     const passwordValidation = mt5Policy ? !validPasswordMT5(password) : !validPassword(password);
+    const getErrorMessage = () => {
+        if (hideValidation) {
+            return passwordError ? getPasswordErrorMessage(localize).PasswordError : '';
+        }
+        return isTouched && (serverErrorMessage || errorMessage);
+    };
 
     const handleChange = useCallback(
         (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -90,18 +98,27 @@ const WalletPasswordField: React.FC<WalletPasswordFieldProps> = ({
     }, [isTouched]);
 
     useEffect(() => {
-        setShowErrorMessage(!!passwordError);
-        setErrorMessage(passwordError ? getPasswordErrorMessage(localize).PasswordError : validationErrorMessage);
-    }, [passwordError, validationErrorMessage, localize]);
+        if (!hideValidation) {
+            setShowErrorMessage(!!passwordError);
+            setErrorMessage(passwordError ? getPasswordErrorMessage(localize).PasswordError : validationErrorMessage);
+        } else {
+            setShowErrorMessage(!!passwordError);
+            setErrorMessage(passwordError ? getPasswordErrorMessage(localize).PasswordError : '');
+        }
+    }, [passwordError, validationErrorMessage, localize, hideValidation]);
 
     return (
         <div className='wallets-password'>
             <WalletTextField
                 autoComplete={autoComplete}
-                errorMessage={isTouched && (serverErrorMessage || errorMessage)}
-                isInvalid={(passwordValidation && isTouched) || showErrorMessage || !!passwordError}
+                errorMessage={getErrorMessage()}
+                isInvalid={
+                    hideValidation
+                        ? !!passwordError
+                        : (passwordValidation && isTouched) || showErrorMessage || !!passwordError || false
+                }
                 label={label}
-                messageVariant={validationErrorMessage ? 'warning' : undefined}
+                messageVariant={!hideValidation && validationErrorMessage ? 'warning' : undefined}
                 name={name}
                 onBlur={handleBlur}
                 onChange={handleChange}
@@ -112,7 +129,7 @@ const WalletPasswordField: React.FC<WalletPasswordFieldProps> = ({
                 type={isPasswordVisible ? 'text' : 'password'}
                 value={password}
             />
-            {!shouldDisablePasswordMeter && <PasswordMeter score={score as Score} />}
+            {!hideValidation && !shouldDisablePasswordMeter && <PasswordMeter score={score as Score} />}
         </div>
     );
 };
diff --git a/packages/wallets/src/components/Base/WalletPasswordFieldLazy/WalletPasswordFieldLazy.tsx b/packages/wallets/src/components/Base/WalletPasswordFieldLazy/WalletPasswordFieldLazy.tsx
index 722ca5a7798c..f0c681d0b20a 100644
--- a/packages/wallets/src/components/Base/WalletPasswordFieldLazy/WalletPasswordFieldLazy.tsx
+++ b/packages/wallets/src/components/Base/WalletPasswordFieldLazy/WalletPasswordFieldLazy.tsx
@@ -3,6 +3,7 @@ import { Loader } from '@deriv-com/ui';
 import { WalletTextFieldProps } from '../WalletTextField/WalletTextField';
 
 export interface WalletPasswordFieldProps extends WalletTextFieldProps {
+    hideValidation?: boolean;
     mt5Policy?: boolean; // This prop is used to utilize the new password validation for MT5.
     password: string;
     passwordError?: boolean;
diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
index ecf769d71019..0c07acfbe831 100644
--- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
+++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
@@ -13,8 +13,8 @@ import { SentEmailContent } from '../../../../components';
 import { ModalStepWrapper, ModalWrapper } from '../../../../components/Base';
 import { useModal } from '../../../../components/ModalProvider';
 import { platformPasswordResetRedirectLink } from '../../../../utils/cfd';
-import { validPassword, validPasswordMT5 } from '../../../../utils/password-validation';
-import { CFD_PLATFORMS, JURISDICTION, MARKET_TYPE, PlatformDetails } from '../../constants';
+import { validPasswordMT5 } from '../../../../utils/password-validation';
+import { CFD_PLATFORMS, getMarketTypeDetails, JURISDICTION, MARKET_TYPE, PlatformDetails } from '../../constants';
 import { CreatePassword, CreatePasswordMT5, EnterPassword, MT5ResetPasswordModal } from '../../screens';
 import { TAvailableMT5Account } from '../../types';
 import { MT5AccountAdded } from '../MT5AccountAdded';
@@ -79,6 +79,7 @@ const MT5PasswordModal: React.FC<TProps> = ({ account, isVirtual = false }) => {
     const marketType = account.market_type ?? 'synthetic';
     const platform = account.platform;
     const product = account.product;
+    const marketTypeTitle = getMarketTypeDetails(localize, product)[marketType].title;
 
     const isMT5PasswordNotSet = accountStatusData?.is_mt5_password_not_set;
     const { platform: mt5Platform, title } = PlatformDetails.mt5;
@@ -90,6 +91,10 @@ const MT5PasswordModal: React.FC<TProps> = ({ account, isVirtual = false }) => {
         createMT5AccountStatus === 'error' &&
         (createMT5AccountError?.error?.code === 'InvalidTradingPlatformPasswordFormat' ||
             createMT5AccountError?.error?.code === 'IncorrectMT5PasswordFormat');
+    const hasCreateMT5AccountError = !updateMT5Password && createMT5AccountStatus === 'error';
+    const isPasswordError = createMT5AccountError?.error?.code === 'PasswordError';
+    const isPasswordResetError = createMT5AccountError?.error?.code === 'PasswordReset';
+    const isInputValidationError = createMT5AccountError?.error?.code === 'InputValidationFailed';
 
     const onSubmit = useCallback(async () => {
         // ====== Create MT5 Account ======
@@ -183,16 +188,28 @@ const MT5PasswordModal: React.FC<TProps> = ({ account, isVirtual = false }) => {
     );
 
     const renderTitle = useCallback(() => {
-        const accountAction = isMT5PasswordNotSet ? localize('Create a') : localize('Enter your');
-        const accountTitle = isVirtual ? localize('demo {{title}}', { title }) : title;
+        let modalTitle;
 
-        return updateMT5Password
-            ? localize('{{title}} latest password requirements', { title })
-            : localize('{{accountAction}} {{accountTitle}} password', {
-                  accountAction,
-                  accountTitle,
-              });
-    }, [isMT5PasswordNotSet, isVirtual, localize, title, updateMT5Password]);
+        if (updateMT5Password) {
+            modalTitle = localize('{{title}} latest password requirements', { title });
+        } else if (isMT5PasswordNotSet) {
+            modalTitle = isVirtual
+                ? localize('Create a demo {{title}} password', { title })
+                : localize('Create a {{title}} password', { title });
+        } else {
+            modalTitle = isVirtual
+                ? localize('Add an {{title}} {{marketTypeTitle}} demo account', {
+                      marketTypeTitle,
+                      title: CFD_PLATFORMS.MT5.toLocaleUpperCase(),
+                  })
+                : localize('Add an {{title}} {{marketTypeTitle}} account', {
+                      marketTypeTitle,
+                      title: CFD_PLATFORMS.MT5.toLocaleUpperCase(),
+                  });
+        }
+
+        return modalTitle;
+    }, [isMT5PasswordNotSet, isVirtual, localize, marketTypeTitle, title, updateMT5Password]);
 
     const renderFooter = useCallback(() => {
         if (isMT5PasswordNotSet)
@@ -221,11 +238,7 @@ const MT5PasswordModal: React.FC<TProps> = ({ account, isVirtual = false }) => {
             <div className='wallets-mt5-password-modal__footer'>
                 <MT5PasswordModalFooter
                     disabled={
-                        !password ||
-                        createMT5AccountLoading ||
-                        tradingPlatformPasswordChangeLoading ||
-                        !validPassword(password) ||
-                        !isTncChecked
+                        !password || createMT5AccountLoading || tradingPlatformPasswordChangeLoading || !isTncChecked
                     }
                     isLoading={tradingPlatformPasswordChangeLoading || createMT5AccountLoading}
                     onPrimaryClick={onSubmit}
@@ -295,15 +308,24 @@ const MT5PasswordModal: React.FC<TProps> = ({ account, isVirtual = false }) => {
                 marketType={marketType}
                 modalTitle={
                     isVirtual
-                        ? localize('Enter your demo {{title}} password', { title })
-                        : localize('Enter your {{title}} password', { title })
+                        ? localize('Add an {{title}} {{marketTypeTitle}} demo account', {
+                              marketTypeTitle,
+                              title: CFD_PLATFORMS.MT5.toLocaleUpperCase(),
+                          })
+                        : localize('Add an {{title}} {{marketTypeTitle}} account', {
+                              marketTypeTitle,
+                              title: CFD_PLATFORMS.MT5.toLocaleUpperCase(),
+                          })
                 }
                 onPasswordChange={e => setPassword(e.target.value)}
                 onPrimaryClick={onSubmit}
                 onSecondaryClick={() => sendEmailVerification()}
                 onTncChange={() => setIsTncChecked(prev => !prev)}
                 password={password}
-                passwordError={createMT5AccountError?.error?.code === 'PasswordError'}
+                passwordError={
+                    createMT5AccountError?.error?.code === 'PasswordError' ||
+                    createMT5AccountError?.error?.code === 'InputValidationFailed'
+                }
                 platform={mt5Platform}
                 product={product}
                 setPassword={setPassword}
@@ -321,14 +343,14 @@ const MT5PasswordModal: React.FC<TProps> = ({ account, isVirtual = false }) => {
         account,
         isTncChecked,
         isVirtual,
-        product,
         updateMT5Password,
         tradingPasswordChangeError,
         onSubmitPasswordChange,
         marketType,
         localize,
-        title,
+        marketTypeTitle,
         createMT5AccountError?.error?.code,
+        product,
         sendEmailVerification,
     ]);
 
@@ -358,18 +380,16 @@ const MT5PasswordModal: React.FC<TProps> = ({ account, isVirtual = false }) => {
             />
         );
     }
-    if (
-        createMT5AccountStatus === 'error' &&
-        createMT5AccountError?.error?.code === 'PasswordReset' &&
-        !updateMT5Password
-    ) {
+
+    if (hasCreateMT5AccountError && isPasswordResetError) {
         return <PasswordLimitExceededModal onPrimaryClick={hide} onSecondaryClick={() => sendEmailVerification()} />;
     }
     if (
-        createMT5AccountStatus === 'error' &&
-        createMT5AccountError?.error?.code !== 'PasswordError' &&
-        !updateMT5Password
+        isMT5PasswordNotSet
+            ? hasCreateMT5AccountError && !isPasswordError
+            : hasCreateMT5AccountError && !isPasswordError && !isInputValidationError
     ) {
+        if (!createMT5AccountError?.error) return null;
         return <MT5ErrorModal error={createMT5AccountError?.error} onClickHandler={hide} />;
     }
 
diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModalFooters.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModalFooters.tsx
index 03504c77d111..a0e6442b3ae2 100644
--- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModalFooters.tsx
+++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModalFooters.tsx
@@ -25,7 +25,7 @@ export const MT5PasswordModalFooter = ({ disabled, isLoading, onPrimaryClick, on
                 textSize='sm'
                 variant='outlined'
             >
-                <Localize i18n_default_text='Forgot password?' />
+                <Localize i18n_default_text='Forgot password' />
             </Button>
             <Button
                 disabled={disabled}
diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/__tests__/MT5PasswordModal.spec.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/__tests__/MT5PasswordModal.spec.tsx
index 9340b529f6e9..f080f17b98ec 100644
--- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/__tests__/MT5PasswordModal.spec.tsx
+++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/__tests__/MT5PasswordModal.spec.tsx
@@ -231,7 +231,7 @@ describe('MT5PasswordModal', () => {
 
         expect(screen.getByText('EnterPassword')).toBeInTheDocument();
         expect(screen.getByText('MT5PasswordModalFooter')).toBeInTheDocument();
-        expect(screen.getByText('Enter your Deriv MT5 password')).toBeInTheDocument();
+        expect(screen.getByText('Add an MT5 Standard account')).toBeInTheDocument();
     });
 
     it('renders default content for demo account', () => {
@@ -242,7 +242,7 @@ describe('MT5PasswordModal', () => {
 
         expect(screen.getByText('EnterPassword')).toBeInTheDocument();
         expect(screen.getByText('MT5PasswordModalFooter')).toBeInTheDocument();
-        expect(screen.getByText('Enter your demo Deriv MT5 password')).toBeInTheDocument();
+        expect(screen.getByText('Add an MT5 Standard demo account')).toBeInTheDocument();
     });
 
     it('renders WalletError for account creation errors', () => {
@@ -257,6 +257,20 @@ describe('MT5PasswordModal', () => {
         expect(screen.getByText('WalletError')).toBeInTheDocument();
     });
 
+    it('returns null when createMT5AccountError is undefined', () => {
+        (useCreateMT5Account as jest.Mock).mockReturnValue({
+            error: undefined,
+            status: 'error',
+        });
+
+        const { container } = render(
+            //@ts-expect-error since this is a mock, we only need partial properties of the account
+            <MT5PasswordModal account={mockAccount} />
+        );
+
+        expect(container).toBeEmptyDOMElement();
+    });
+
     it('renders WalletError when email verification fails', () => {
         (useVerifyEmail as jest.Mock).mockReturnValue({
             error: { error: { message: 'Error' } },
diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/__tests__/MT5PasswordModalFooters.spec.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/__tests__/MT5PasswordModalFooters.spec.tsx
index f575d5edb64a..ace6e2bd0e04 100644
--- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/__tests__/MT5PasswordModalFooters.spec.tsx
+++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/__tests__/MT5PasswordModalFooters.spec.tsx
@@ -21,7 +21,7 @@ describe('MT5PasswordModalFooter', () => {
                 onSecondaryClick={jest.fn()}
             />
         );
-        expect(screen.getByText('Forgot password?')).toBeInTheDocument();
+        expect(screen.getByText('Forgot password')).toBeInTheDocument();
         expect(screen.getByText('Add account')).toBeInTheDocument();
     });
 
@@ -37,7 +37,7 @@ describe('MT5PasswordModalFooter', () => {
                 onSecondaryClick={mockSecondaryClick}
             />
         );
-        await userEvent.click(screen.getByText('Forgot password?'));
+        await userEvent.click(screen.getByText('Forgot password'));
         expect(mockSecondaryClick).toHaveBeenCalled();
     });
 
diff --git a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx b/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx
index 8c909b9a44d6..3499532021f5 100644
--- a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx
+++ b/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx
@@ -4,7 +4,6 @@ import { Localize, useTranslations } from '@deriv-com/translations';
 import { Button, Text, useDevice } from '@deriv-com/ui';
 import { WalletPasswordFieldLazy } from '../../../../components/Base';
 import { THooks, TMarketTypes, TPlatforms } from '../../../../types';
-import { validPassword, validPasswordMT5 } from '../../../../utils/password-validation';
 import { CFD_PLATFORMS, getMarketTypeDetails, JURISDICTION, PlatformDetails } from '../../constants';
 import { TAvailableMT5Account } from '../../types';
 import { MT5LicenceMessage, MT5PasswordModalTnc } from '../components';
@@ -52,8 +51,6 @@ const EnterPassword: React.FC<TProps> = ({
     const { localize } = useTranslations();
     const { data } = useActiveWalletAccount();
 
-    const isMT5 = platform === CFD_PLATFORMS.MT5;
-    const disableButton = isMT5 ? !validPasswordMT5(password) : !validPassword(password);
     const accountType = data?.is_virtual ? localize('Demo') : localize('Real');
     const title = PlatformDetails[platform].title;
     const marketTypeTitle =
@@ -81,18 +78,18 @@ const EnterPassword: React.FC<TProps> = ({
             <div className='wallets-enter-password__content'>
                 <Text align='start' className='wallets-enter-password__description' size={isDesktop ? 'sm' : 'md'}>
                     <Localize
-                        i18n_default_text='Enter your {{title}} password to add a {{accountTitle}} {{marketTypeTitle}} account'
+                        i18n_default_text='Enter your {{title}} password to add an {{accountTitle}} {{marketTypeTitle}} account'
                         values={{
-                            accountTitle:
-                                platform === CFD_PLATFORMS.MT5 && accountType === 'Demo'
-                                    ? `${accountType.toLocaleLowerCase()} ${CFD_PLATFORMS.MT5.toLocaleUpperCase()}`
-                                    : title,
-                            marketTypeTitle,
+                            accountTitle: CFD_PLATFORMS.MT5.toLocaleUpperCase(),
+                            marketTypeTitle: isVirtual
+                                ? `${marketTypeTitle} ${accountType.toLocaleLowerCase()}`
+                                : marketTypeTitle,
                             title,
                         }}
                     />
                 </Text>
                 <WalletPasswordFieldLazy
+                    hideValidation
                     label={localize('{{title}} password', { title })}
                     onChange={onPasswordChange}
                     password={password}
@@ -119,10 +116,10 @@ const EnterPassword: React.FC<TProps> = ({
                         textSize='sm'
                         variant='outlined'
                     >
-                        <Localize i18n_default_text='Forgot password?' />
+                        <Localize i18n_default_text='Forgot password' />
                     </Button>
                     <Button
-                        disabled={!password || isLoading || disableButton || !isTncChecked}
+                        disabled={!password || isLoading || !isTncChecked}
                         isLoading={isLoading}
                         onClick={onPrimaryClick}
                         size='lg'
diff --git a/packages/wallets/src/features/cfd/screens/EnterPassword/__test__/EnterPassword.spec.tsx b/packages/wallets/src/features/cfd/screens/EnterPassword/__test__/EnterPassword.spec.tsx
index c5fe094d0dda..44358e6ed6b1 100644
--- a/packages/wallets/src/features/cfd/screens/EnterPassword/__test__/EnterPassword.spec.tsx
+++ b/packages/wallets/src/features/cfd/screens/EnterPassword/__test__/EnterPassword.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useActiveWalletAccount } from '@deriv/api-v2';
-import { cleanup, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { MARKET_TYPE, PlatformDetails } from '../../../constants';
 import EnterPassword from '../EnterPassword';
@@ -10,7 +10,12 @@ jest.mock('@deriv/api-v2');
 jest.mock('../../components', () => ({
     ...jest.requireActual('../../components'),
     MT5LicenceMessage: jest.fn(() => <div>MT5LicenceMessage</div>),
-    MT5PasswordModalTnc: jest.fn(() => <div>MT5PasswordModalTnc</div>),
+    MT5PasswordModalTnc: ({ onChange }: { onChange: () => void }) => (
+        <div>
+            <input data-testid='dt_mt5_password_modal_tnc' onChange={() => onChange()} type='checkbox' />
+            MT5PasswordModalTnc
+        </div>
+    ),
 }));
 
 describe('EnterPassword', () => {
@@ -20,10 +25,11 @@ describe('EnterPassword', () => {
         mockUseActiveWalletAccount.mockReturnValue({ data: { is_virtual: false } });
     });
 
-    afterEach(cleanup);
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
 
     const title = `Enter your ${PlatformDetails.mt5.title} password`;
-    const shortPassword = 'abcd';
     const validPassword = 'Abcd1234!';
 
     const defaultProps = {
@@ -34,6 +40,7 @@ describe('EnterPassword', () => {
         onPasswordChange: jest.fn(),
         onPrimaryClick: jest.fn(),
         onSecondaryClick: jest.fn(),
+        onTncChange: jest.fn(),
         password: '',
         passwordError: false,
         platform: PlatformDetails.mt5.platform,
@@ -41,25 +48,14 @@ describe('EnterPassword', () => {
     };
 
     const renderComponent = (props = {}) => {
-        return render(
-            <EnterPassword
-                isTncChecked={true}
-                onTncChange={function (): void {
-                    throw new Error('Function not implemented.');
-                }}
-                {...defaultProps}
-                {...props}
-            />
-        );
+        return render(<EnterPassword {...defaultProps} {...props} />);
     };
 
     it('renders the component correctly', () => {
         renderComponent();
         expect(screen.getByText(title)).toBeInTheDocument();
         expect(
-            screen.getByText(
-                `Enter your ${PlatformDetails.mt5.title} password to add a ${PlatformDetails.mt5.title} Financial account`
-            )
+            screen.getByText(`Enter your ${PlatformDetails.mt5.title} password to add an MT5 Financial account`)
         ).toBeInTheDocument();
     });
 
@@ -70,9 +66,9 @@ describe('EnterPassword', () => {
         expect(defaultProps.onPasswordChange).toHaveBeenCalled();
     });
 
-    it('calls onSecondaryClick when clicking the "Forgot password?" button', async () => {
+    it('calls onSecondaryClick when clicking the "Forgot password" button', async () => {
         renderComponent();
-        const forgotPasswordButton = screen.getByRole('button', { name: 'Forgot password?' });
+        const forgotPasswordButton = screen.getByRole('button', { name: 'Forgot password' });
         await userEvent.click(forgotPasswordButton);
         expect(defaultProps.onSecondaryClick).toHaveBeenCalled();
     });
@@ -84,12 +80,6 @@ describe('EnterPassword', () => {
         expect(defaultProps.onPrimaryClick).toHaveBeenCalled();
     });
 
-    it('disables the "Add account" button when password is invalid', () => {
-        renderComponent({ password: shortPassword });
-        const addAccountButton = screen.getByRole('button', { name: 'Add account' });
-        expect(addAccountButton).toBeDisabled();
-    });
-
     it('disables the "Add account" button when tnc is not checked', () => {
         renderComponent({ isTncChecked: false });
         const addAccountButton = screen.getByRole('button', { name: 'Add account' });
@@ -124,6 +114,13 @@ describe('EnterPassword', () => {
         expect(screen.getByText('MT5PasswordModalTnc')).toBeInTheDocument();
     });
 
+    it('calls onTncChange when checking the tnc checkbox', async () => {
+        renderComponent({ account: { shortcode: 'bvi' } });
+        const tncCheckbox = screen.getByTestId('dt_mt5_password_modal_tnc');
+        await userEvent.click(tncCheckbox);
+        expect(defaultProps.onTncChange).toHaveBeenCalled();
+    });
+
     it('hides the mt5 tnc checkbox for non-regulated real accounts', () => {
         renderComponent({ account: { shortcode: 'svg' } });
 

From 89ade25c84414f29996cb4257fdbbf9405bacde5 Mon Sep 17 00:00:00 2001
From: lubega-deriv <lubega@deriv.com>
Date: Wed, 13 Nov 2024 14:33:23 +0800
Subject: [PATCH 2/3] fix: clean up

---
 .../Base/WalletPasswordField/WalletPasswordField.tsx      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/wallets/src/components/Base/WalletPasswordField/WalletPasswordField.tsx b/packages/wallets/src/components/Base/WalletPasswordField/WalletPasswordField.tsx
index 5abf2317772a..bc69ba7b4e20 100644
--- a/packages/wallets/src/components/Base/WalletPasswordField/WalletPasswordField.tsx
+++ b/packages/wallets/src/components/Base/WalletPasswordField/WalletPasswordField.tsx
@@ -98,12 +98,12 @@ const WalletPasswordField: React.FC<WalletPasswordFieldProps> = ({
     }, [isTouched]);
 
     useEffect(() => {
-        if (!hideValidation) {
+        if (hideValidation) {
             setShowErrorMessage(!!passwordError);
-            setErrorMessage(passwordError ? getPasswordErrorMessage(localize).PasswordError : validationErrorMessage);
+            setErrorMessage(passwordError ? getPasswordErrorMessage(localize).PasswordError : '');
         } else {
             setShowErrorMessage(!!passwordError);
-            setErrorMessage(passwordError ? getPasswordErrorMessage(localize).PasswordError : '');
+            setErrorMessage(passwordError ? getPasswordErrorMessage(localize).PasswordError : validationErrorMessage);
         }
     }, [passwordError, validationErrorMessage, localize, hideValidation]);
 
@@ -115,7 +115,7 @@ const WalletPasswordField: React.FC<WalletPasswordFieldProps> = ({
                 isInvalid={
                     hideValidation
                         ? !!passwordError
-                        : (passwordValidation && isTouched) || showErrorMessage || !!passwordError || false
+                        : (passwordValidation && isTouched) || showErrorMessage || !!passwordError
                 }
                 label={label}
                 messageVariant={!hideValidation && validationErrorMessage ? 'warning' : undefined}

From 451e13d3a8936b40135a59d58b6368f89e84bdd6 Mon Sep 17 00:00:00 2001
From: lubega-deriv <lubega@deriv.com>
Date: Thu, 14 Nov 2024 14:38:10 +0800
Subject: [PATCH 3/3] fix: update validation logic

---
 .../WalletPasswordField.tsx                   | 41 ++++++-----------
 .../WalletPasswordFieldLazy.tsx               |  2 +-
 .../MT5PasswordModal/MT5PasswordModal.tsx     | 44 ++++++++++--------
 .../__tests__/MT5PasswordModal.spec.tsx       | 14 ------
 .../screens/EnterPassword/EnterPassword.tsx   | 45 ++++++++++++++-----
 .../__test__/EnterPassword.spec.tsx           |  7 +++
 6 files changed, 79 insertions(+), 74 deletions(-)

diff --git a/packages/wallets/src/components/Base/WalletPasswordField/WalletPasswordField.tsx b/packages/wallets/src/components/Base/WalletPasswordField/WalletPasswordField.tsx
index bc69ba7b4e20..e755e32f28a4 100644
--- a/packages/wallets/src/components/Base/WalletPasswordField/WalletPasswordField.tsx
+++ b/packages/wallets/src/components/Base/WalletPasswordField/WalletPasswordField.tsx
@@ -23,7 +23,8 @@ import './WalletPasswordField.scss';
 export const validatePassword = (
     password: string,
     mt5Policy: boolean,
-    localize: ReturnType<typeof useTranslations>['localize']
+    localize: ReturnType<typeof useTranslations>['localize'],
+    hideWarning?: boolean
 ) => {
     const score = mt5Policy ? calculateScoreMT5(password) : calculateScoreCFD(password);
     let validationErrorMessage = '';
@@ -38,7 +39,7 @@ export const validatePassword = (
         } else {
             cfdSchema(localize).validateSync(password);
         }
-        validationErrorMessage = getWarningMessages(localize)[feedback.warning as passwordKeys] ?? '';
+        validationErrorMessage = hideWarning ? '' : getWarningMessages(localize)[feedback.warning as passwordKeys];
     } catch (err) {
         if (err instanceof ValidationError) {
             validationErrorMessage = err?.message;
@@ -50,7 +51,7 @@ export const validatePassword = (
 
 const WalletPasswordField: React.FC<WalletPasswordFieldProps> = ({
     autoComplete,
-    hideValidation = false,
+    hideWarning,
     label,
     mt5Policy = false,
     name = 'walletPasswordField',
@@ -68,17 +69,10 @@ const WalletPasswordField: React.FC<WalletPasswordFieldProps> = ({
     const [errorMessage, setErrorMessage] = useState('');
 
     const { score, validationErrorMessage } = useMemo(
-        () =>
-            hideValidation ? { score: 0, validationErrorMessage: '' } : validatePassword(password, mt5Policy, localize),
-        [password, mt5Policy, localize, hideValidation]
+        () => validatePassword(password, mt5Policy, localize, hideWarning),
+        [hideWarning, password, mt5Policy, localize]
     );
     const passwordValidation = mt5Policy ? !validPasswordMT5(password) : !validPassword(password);
-    const getErrorMessage = () => {
-        if (hideValidation) {
-            return passwordError ? getPasswordErrorMessage(localize).PasswordError : '';
-        }
-        return isTouched && (serverErrorMessage || errorMessage);
-    };
 
     const handleChange = useCallback(
         (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -98,27 +92,18 @@ const WalletPasswordField: React.FC<WalletPasswordFieldProps> = ({
     }, [isTouched]);
 
     useEffect(() => {
-        if (hideValidation) {
-            setShowErrorMessage(!!passwordError);
-            setErrorMessage(passwordError ? getPasswordErrorMessage(localize).PasswordError : '');
-        } else {
-            setShowErrorMessage(!!passwordError);
-            setErrorMessage(passwordError ? getPasswordErrorMessage(localize).PasswordError : validationErrorMessage);
-        }
-    }, [passwordError, validationErrorMessage, localize, hideValidation]);
+        setShowErrorMessage(!!passwordError);
+        setErrorMessage(passwordError ? getPasswordErrorMessage(localize).PasswordError : validationErrorMessage);
+    }, [passwordError, validationErrorMessage, localize]);
 
     return (
         <div className='wallets-password'>
             <WalletTextField
                 autoComplete={autoComplete}
-                errorMessage={getErrorMessage()}
-                isInvalid={
-                    hideValidation
-                        ? !!passwordError
-                        : (passwordValidation && isTouched) || showErrorMessage || !!passwordError
-                }
+                errorMessage={(isTouched || passwordError) && (serverErrorMessage || errorMessage)}
+                isInvalid={(passwordValidation && isTouched) || showErrorMessage || !!passwordError}
                 label={label}
-                messageVariant={!hideValidation && validationErrorMessage ? 'warning' : undefined}
+                messageVariant={validationErrorMessage ? 'warning' : undefined}
                 name={name}
                 onBlur={handleBlur}
                 onChange={handleChange}
@@ -129,7 +114,7 @@ const WalletPasswordField: React.FC<WalletPasswordFieldProps> = ({
                 type={isPasswordVisible ? 'text' : 'password'}
                 value={password}
             />
-            {!hideValidation && !shouldDisablePasswordMeter && <PasswordMeter score={score as Score} />}
+            {!shouldDisablePasswordMeter && <PasswordMeter score={score as Score} />}
         </div>
     );
 };
diff --git a/packages/wallets/src/components/Base/WalletPasswordFieldLazy/WalletPasswordFieldLazy.tsx b/packages/wallets/src/components/Base/WalletPasswordFieldLazy/WalletPasswordFieldLazy.tsx
index f0c681d0b20a..4e496bf32f15 100644
--- a/packages/wallets/src/components/Base/WalletPasswordFieldLazy/WalletPasswordFieldLazy.tsx
+++ b/packages/wallets/src/components/Base/WalletPasswordFieldLazy/WalletPasswordFieldLazy.tsx
@@ -3,7 +3,7 @@ import { Loader } from '@deriv-com/ui';
 import { WalletTextFieldProps } from '../WalletTextField/WalletTextField';
 
 export interface WalletPasswordFieldProps extends WalletTextFieldProps {
-    hideValidation?: boolean;
+    hideWarning?: boolean;
     mt5Policy?: boolean; // This prop is used to utilize the new password validation for MT5.
     password: string;
     passwordError?: boolean;
diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
index 0c07acfbe831..e0c9b4dd937d 100644
--- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
+++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
@@ -11,7 +11,9 @@ import { Localize, useTranslations } from '@deriv-com/translations';
 import { Button, Loader, useDevice } from '@deriv-com/ui';
 import { SentEmailContent } from '../../../../components';
 import { ModalStepWrapper, ModalWrapper } from '../../../../components/Base';
+import { validatePassword } from '../../../../components/Base/WalletPasswordField/WalletPasswordField';
 import { useModal } from '../../../../components/ModalProvider';
+import { getPasswordErrorMessage } from '../../../../constants/password';
 import { platformPasswordResetRedirectLink } from '../../../../utils/cfd';
 import { validPasswordMT5 } from '../../../../utils/password-validation';
 import { CFD_PLATFORMS, getMarketTypeDetails, JURISDICTION, MARKET_TYPE, PlatformDetails } from '../../constants';
@@ -84,6 +86,7 @@ const MT5PasswordModal: React.FC<TProps> = ({ account, isVirtual = false }) => {
     const isMT5PasswordNotSet = accountStatusData?.is_mt5_password_not_set;
     const { platform: mt5Platform, title } = PlatformDetails.mt5;
     const selectedJurisdiction = isVirtual ? JURISDICTION.SVG : getModalState('selectedJurisdiction');
+    const { validationErrorMessage: validateMT5ErrorMessage } = validatePassword(password, true, localize);
 
     const isLoading = accountStatusLoading || createMT5AccountLoading || tradingPlatformPasswordChangeLoading;
 
@@ -91,10 +94,6 @@ const MT5PasswordModal: React.FC<TProps> = ({ account, isVirtual = false }) => {
         createMT5AccountStatus === 'error' &&
         (createMT5AccountError?.error?.code === 'InvalidTradingPlatformPasswordFormat' ||
             createMT5AccountError?.error?.code === 'IncorrectMT5PasswordFormat');
-    const hasCreateMT5AccountError = !updateMT5Password && createMT5AccountStatus === 'error';
-    const isPasswordError = createMT5AccountError?.error?.code === 'PasswordError';
-    const isPasswordResetError = createMT5AccountError?.error?.code === 'PasswordReset';
-    const isInputValidationError = createMT5AccountError?.error?.code === 'InputValidationFailed';
 
     const onSubmit = useCallback(async () => {
         // ====== Create MT5 Account ======
@@ -238,7 +237,12 @@ const MT5PasswordModal: React.FC<TProps> = ({ account, isVirtual = false }) => {
             <div className='wallets-mt5-password-modal__footer'>
                 <MT5PasswordModalFooter
                     disabled={
-                        !password || createMT5AccountLoading || tradingPlatformPasswordChangeLoading || !isTncChecked
+                        !password ||
+                        createMT5AccountLoading ||
+                        tradingPlatformPasswordChangeLoading ||
+                        (!validPasswordMT5(password) &&
+                            validateMT5ErrorMessage !== getPasswordErrorMessage(localize).missingCharacterMT5) ||
+                        !isTncChecked
                     }
                     isLoading={tradingPlatformPasswordChangeLoading || createMT5AccountLoading}
                     onPrimaryClick={onSubmit}
@@ -247,15 +251,17 @@ const MT5PasswordModal: React.FC<TProps> = ({ account, isVirtual = false }) => {
             </div>
         );
     }, [
-        createMT5AccountLoading,
-        isDesktop,
         isMT5PasswordNotSet,
-        title,
-        onSubmit,
         password,
-        sendEmailVerification,
+        createMT5AccountLoading,
         tradingPlatformPasswordChangeLoading,
         isTncChecked,
+        onSubmit,
+        isDesktop,
+        title,
+        validateMT5ErrorMessage,
+        localize,
+        sendEmailVerification,
     ]);
 
     const PasswordComponent = useMemo(() => {
@@ -322,10 +328,7 @@ const MT5PasswordModal: React.FC<TProps> = ({ account, isVirtual = false }) => {
                 onSecondaryClick={() => sendEmailVerification()}
                 onTncChange={() => setIsTncChecked(prev => !prev)}
                 password={password}
-                passwordError={
-                    createMT5AccountError?.error?.code === 'PasswordError' ||
-                    createMT5AccountError?.error?.code === 'InputValidationFailed'
-                }
+                passwordError={createMT5AccountError?.error?.code === 'PasswordError'}
                 platform={mt5Platform}
                 product={product}
                 setPassword={setPassword}
@@ -381,15 +384,18 @@ const MT5PasswordModal: React.FC<TProps> = ({ account, isVirtual = false }) => {
         );
     }
 
-    if (hasCreateMT5AccountError && isPasswordResetError) {
+    if (
+        createMT5AccountStatus === 'error' &&
+        createMT5AccountError?.error?.code === 'PasswordReset' &&
+        !updateMT5Password
+    ) {
         return <PasswordLimitExceededModal onPrimaryClick={hide} onSecondaryClick={() => sendEmailVerification()} />;
     }
     if (
-        isMT5PasswordNotSet
-            ? hasCreateMT5AccountError && !isPasswordError
-            : hasCreateMT5AccountError && !isPasswordError && !isInputValidationError
+        createMT5AccountStatus === 'error' &&
+        createMT5AccountError?.error?.code !== 'PasswordError' &&
+        !updateMT5Password
     ) {
-        if (!createMT5AccountError?.error) return null;
         return <MT5ErrorModal error={createMT5AccountError?.error} onClickHandler={hide} />;
     }
 
diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/__tests__/MT5PasswordModal.spec.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/__tests__/MT5PasswordModal.spec.tsx
index f080f17b98ec..3c1677c47516 100644
--- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/__tests__/MT5PasswordModal.spec.tsx
+++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/__tests__/MT5PasswordModal.spec.tsx
@@ -257,20 +257,6 @@ describe('MT5PasswordModal', () => {
         expect(screen.getByText('WalletError')).toBeInTheDocument();
     });
 
-    it('returns null when createMT5AccountError is undefined', () => {
-        (useCreateMT5Account as jest.Mock).mockReturnValue({
-            error: undefined,
-            status: 'error',
-        });
-
-        const { container } = render(
-            //@ts-expect-error since this is a mock, we only need partial properties of the account
-            <MT5PasswordModal account={mockAccount} />
-        );
-
-        expect(container).toBeEmptyDOMElement();
-    });
-
     it('renders WalletError when email verification fails', () => {
         (useVerifyEmail as jest.Mock).mockReturnValue({
             error: { error: { message: 'Error' } },
diff --git a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx b/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx
index 3499532021f5..93a93fee9eb6 100644
--- a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx
+++ b/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx
@@ -3,7 +3,10 @@ import { useActiveWalletAccount } from '@deriv/api-v2';
 import { Localize, useTranslations } from '@deriv-com/translations';
 import { Button, Text, useDevice } from '@deriv-com/ui';
 import { WalletPasswordFieldLazy } from '../../../../components/Base';
+import { validatePassword } from '../../../../components/Base/WalletPasswordField/WalletPasswordField';
+import { getPasswordErrorMessage } from '../../../../constants/password';
 import { THooks, TMarketTypes, TPlatforms } from '../../../../types';
+import { validPassword, validPasswordMT5 } from '../../../../utils/password-validation';
 import { CFD_PLATFORMS, getMarketTypeDetails, JURISDICTION, PlatformDetails } from '../../constants';
 import { TAvailableMT5Account } from '../../types';
 import { MT5LicenceMessage, MT5PasswordModalTnc } from '../components';
@@ -51,6 +54,12 @@ const EnterPassword: React.FC<TProps> = ({
     const { localize } = useTranslations();
     const { data } = useActiveWalletAccount();
 
+    const isMT5 = platform === CFD_PLATFORMS.MT5;
+    const { validationErrorMessage } = validatePassword(password, isMT5, localize);
+    const disableButton = isMT5
+        ? !validPasswordMT5(password) &&
+          validationErrorMessage !== getPasswordErrorMessage(localize).missingCharacterMT5
+        : !validPassword(password);
     const accountType = data?.is_virtual ? localize('Demo') : localize('Real');
     const title = PlatformDetails[platform].title;
     const marketTypeTitle =
@@ -77,19 +86,31 @@ const EnterPassword: React.FC<TProps> = ({
             )}
             <div className='wallets-enter-password__content'>
                 <Text align='start' className='wallets-enter-password__description' size={isDesktop ? 'sm' : 'md'}>
-                    <Localize
-                        i18n_default_text='Enter your {{title}} password to add an {{accountTitle}} {{marketTypeTitle}} account'
-                        values={{
-                            accountTitle: CFD_PLATFORMS.MT5.toLocaleUpperCase(),
-                            marketTypeTitle: isVirtual
-                                ? `${marketTypeTitle} ${accountType.toLocaleLowerCase()}`
-                                : marketTypeTitle,
-                            title,
-                        }}
-                    />
+                    {isMT5 ? (
+                        <Localize
+                            i18n_default_text='Enter your {{title}} password to add an {{accountTitle}} {{marketTypeTitle}} account'
+                            values={{
+                                accountTitle: CFD_PLATFORMS.MT5.toLocaleUpperCase(),
+                                marketTypeTitle: isVirtual
+                                    ? `${marketTypeTitle} ${accountType.toLocaleLowerCase()}`
+                                    : marketTypeTitle,
+                                title,
+                            }}
+                        />
+                    ) : (
+                        <Localize
+                            i18n_default_text='Enter your {{title}} password to add a {{title}} {{marketTypeTitle}} account'
+                            values={{
+                                marketTypeTitle: isVirtual
+                                    ? `${marketTypeTitle} ${accountType.toLocaleLowerCase()}`
+                                    : marketTypeTitle,
+                                title,
+                            }}
+                        />
+                    )}
                 </Text>
                 <WalletPasswordFieldLazy
-                    hideValidation
+                    hideWarning
                     label={localize('{{title}} password', { title })}
                     onChange={onPasswordChange}
                     password={password}
@@ -119,7 +140,7 @@ const EnterPassword: React.FC<TProps> = ({
                         <Localize i18n_default_text='Forgot password' />
                     </Button>
                     <Button
-                        disabled={!password || isLoading || !isTncChecked}
+                        disabled={!password || isLoading || disableButton || !isTncChecked}
                         isLoading={isLoading}
                         onClick={onPrimaryClick}
                         size='lg'
diff --git a/packages/wallets/src/features/cfd/screens/EnterPassword/__test__/EnterPassword.spec.tsx b/packages/wallets/src/features/cfd/screens/EnterPassword/__test__/EnterPassword.spec.tsx
index 44358e6ed6b1..628d93d0b3ff 100644
--- a/packages/wallets/src/features/cfd/screens/EnterPassword/__test__/EnterPassword.spec.tsx
+++ b/packages/wallets/src/features/cfd/screens/EnterPassword/__test__/EnterPassword.spec.tsx
@@ -30,6 +30,7 @@ describe('EnterPassword', () => {
     });
 
     const title = `Enter your ${PlatformDetails.mt5.title} password`;
+    const shortPassword = 'abcd';
     const validPassword = 'Abcd1234!';
 
     const defaultProps = {
@@ -80,6 +81,12 @@ describe('EnterPassword', () => {
         expect(defaultProps.onPrimaryClick).toHaveBeenCalled();
     });
 
+    it('disables the "Add account" button when password is invalid', () => {
+        renderComponent({ password: shortPassword });
+        const addAccountButton = screen.getByRole('button', { name: 'Add account' });
+        expect(addAccountButton).toBeDisabled();
+    });
+
     it('disables the "Add account" button when tnc is not checked', () => {
         renderComponent({ isTncChecked: false });
         const addAccountButton = screen.getByRole('button', { name: 'Add account' });