[WALL] george / WALL-4850 / Password change and account creation success message are not shown when changing password

packages/wallets/src/components/ModalProvider/ModalProvider.tsx

@@ -25,6 +25,7 @@ type TModalContext = {
 type TModalOptions = {
     defaultRootId?: 'wallets_modal_root' | 'wallets_modal_show_header_root';
     rootRef?: React.RefObject<HTMLElement>;
+    shouldCloseOnClickOutside?: boolean;
     shouldHideDerivAppHeader?: boolean;
 };
 
@@ -84,7 +85,10 @@ const ModalProvider = ({ children }: React.PropsWithChildren<unknown>) => {
         }));
     };
 
-    useOnClickOutside(modalRef, isDesktop ? hide : () => undefined);
+    const onClickOutsideHandler = () =>
+        modalOptions?.shouldCloseOnClickOutside === false || !isDesktop ? () => undefined : hide;
+
+    useOnClickOutside(modalRef, onClickOutsideHandler);
 
     const modalRootRef = useMemo(() => {
         // if they specify their own root, prioritize this first

packages/wallets/src/components/WalletsChangeMT5Password/WalletSuccessChangeMT5Password.tsx

@@ -0,0 +1,63 @@
+import React, { FC } from 'react';
+import { DerivLightMt5SuccessPasswordResetIcon } from '@deriv/quill-icons';
+import { useTranslations } from '@deriv-com/translations';
+import { ActionScreen, Button, useDevice } from '@deriv-com/ui';
+import { PlatformDetails } from '../../features/cfd/constants';
+import { ModalStepWrapper, ModalWrapper } from '../Base';
+import './WalletsChangeMT5Password.scss';
+
+type TWalletSuccessChangeMT5Password = {
+    onClick: () => void;
+};
+
+const WalletSuccessChangeMT5Password: FC<TWalletSuccessChangeMT5Password> = ({ onClick }) => {
+    const { isDesktop } = useDevice();
+    const { localize } = useTranslations();
+
+    const title = localize('Success');
+    const description = localize(
+        'You have a new {{title}} password to log in to your {{title}} accounts on the web and mobile apps.',
+        { title: PlatformDetails.mt5.title }
+    );
+    const renderButtons = (
+        <Button isFullWidth={!isDesktop} onClick={onClick} size='lg' textSize='sm'>
+            {localize('Next')}
+        </Button>
+    );
+
+    if (isDesktop) {
+        return (
+            <ModalWrapper hideCloseButton shouldPreventCloseOnEscape>
+                <div className='wallets-change-mt5-password'>
+                    <ActionScreen
+                        actionButtons={renderButtons}
+                        description={description}
+                        descriptionSize='sm'
+                        icon={<DerivLightMt5SuccessPasswordResetIcon height={100} width={100} />}
+                        title={title}
+                    />
+                </div>
+            </ModalWrapper>
+        );
+    }
+
+    return (
+        <ModalStepWrapper
+            renderFooter={() => renderButtons}
+            shouldHideFooter={isDesktop}
+            shouldHideHeader
+            shouldPreventCloseOnEscape
+        >
+            <div className='wallets-change-mt5-password'>
+                <ActionScreen
+                    description={description}
+                    descriptionSize='sm'
+                    icon={<DerivLightMt5SuccessPasswordResetIcon height={100} width={100} />}
+                    title={title}
+                />
+            </div>
+        </ModalStepWrapper>
+    );
+};
+
+export default WalletSuccessChangeMT5Password;

packages/wallets/src/components/WalletsChangeMT5Password/WalletsChangeMT5Password.scss

@@ -0,0 +1,30 @@
+.wallets-change-mt5-password {
+    width: 44rem;
+    padding: 2.4rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2.4rem;
+    background-color: var(--general-main-1, #ffffff);
+    border-radius: 0.8rem;
+
+    @include mobile-or-tablet-screen {
+        width: 100%;
+        padding-inline: 1.6rem;
+        gap: 1.6rem;
+        margin: 0 auto;
+        max-width: 60rem;
+    }
+
+    &__footer {
+        display: flex;
+        justify-content: flex-end;
+        gap: 0.8rem;
+
+        @include mobile-or-tablet-screen {
+            width: 100%;
+            justify-content: center;
+            margin: 0 auto;
+            max-width: 60rem;
+        }
+    }
+}

packages/wallets/src/components/WalletsChangeMT5Password/index.ts

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

packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx

@@ -14,6 +14,7 @@ import { Button, useDevice, Loader } from '@deriv-com/ui';
 import { SentEmailContent, WalletError } from '../../../../components';
 import { ModalStepWrapper, ModalWrapper } from '../../../../components/Base';
 import { useModal } from '../../../../components/ModalProvider';
+import { WalletSuccessChangeMT5Password } from '../../../../components/WalletsChangeMT5Password';
 import { THooks, TMarketTypes, TPlatforms } from '../../../../types';
 import { platformPasswordResetRedirectLink } from '../../../../utils/cfd';
 import { validPassword, validPasswordMT5 } from '../../../../utils/password-validation';
@@ -61,13 +62,14 @@ const MT5PasswordModal: React.FC<TProps> = ({ isVirtual, marketType, platform, p
     } = useVerifyEmail();
     const { data: mt5AccountsData } = useMT5AccountsList();
     const { isDesktop } = useDevice();
-    const { getModalState, hide } = useModal();
+    const { getModalState, hide, setModalOptions } = useModal();
     const { data: settingsData } = useSettings();
     const { localize } = useTranslations();
 
     const { email } = settingsData;
 
     const [password, setPassword] = useState('');
+    const [isPasswordChanged, setIsPasswordChanged] = useState(false);
 
     const isMT5PasswordNotSet = accountStatusData?.is_mt5_password_not_set;
     const hasMT5Account = mt5AccountsData?.find(account => account.login);
@@ -82,22 +84,10 @@ const MT5PasswordModal: React.FC<TProps> = ({ isVirtual, marketType, platform, p
         (createMT5AccountError?.error?.code === 'InvalidTradingPlatformPasswordFormat' ||
             createMT5AccountError?.error?.code === 'IncorrectMT5PasswordFormat');
 
-    const onSubmit = useCallback(async () => {
-        // ====== Create MT5 Account ======
-        // In order to create account, we need to set a password through trading_platform_password_change endpoint first,
-        // then only mt5_create_account can be called, otherwise it will response an error for password required.
-        // =================================
-
+    const createMT5Account = useCallback(() => {
         const accountType = marketType === MARKET_TYPE.SYNTHETIC ? 'gaming' : marketType;
         const categoryAccountType = isDemo ? 'demo' : accountType;
 
-        if (isMT5PasswordNotSet) {
-            await tradingPasswordChangeMutateAsync({
-                new_password: password,
-                platform: mt5Platform,
-            });
-        }
-
         createMT5AccountMutate({
             payload: {
                 account_type: categoryAccountType,
@@ -132,10 +122,10 @@ const MT5PasswordModal: React.FC<TProps> = ({ isVirtual, marketType, platform, p
         availableMT5AccountsData,
         createMT5AccountMutate,
         isDemo,
-        isMT5PasswordNotSet,
         marketType,
-        mt5Platform,
         password,
+        product,
+        selectedJurisdiction,
         settingsData?.address_city,
         settingsData?.address_line_1,
         settingsData?.address_postcode,
@@ -144,11 +134,24 @@ const MT5PasswordModal: React.FC<TProps> = ({ isVirtual, marketType, platform, p
         settingsData?.email,
         settingsData?.first_name,
         settingsData?.phone,
-        tradingPasswordChangeMutateAsync,
-        selectedJurisdiction,
-        product,
     ]);
 
+    const onSubmit = useCallback(async () => {
+        // ====== Create MT5 Account ======
+        // In order to create account, we need to set a password through trading_platform_password_change endpoint first,
+        // then only mt5_create_account can be called, otherwise it will response an error for password required.
+        // =================================
+
+        if (isMT5PasswordNotSet) {
+            await tradingPasswordChangeMutateAsync({
+                new_password: password,
+                platform: mt5Platform,
+            });
+        }
+
+        createMT5Account();
+    }, [createMT5Account, isMT5PasswordNotSet, mt5Platform, password, tradingPasswordChangeMutateAsync]);
+
     const sendEmailVerification = useCallback(() => {
         if (email) {
             emailVerificationMutate({
@@ -167,10 +170,13 @@ const MT5PasswordModal: React.FC<TProps> = ({ isVirtual, marketType, platform, p
                 new_password: newPassword,
                 old_password: currentPassword,
                 platform: mt5Platform,
+            }).then(() => {
+                setPassword(newPassword);
+                setModalOptions(prev => ({ ...prev, shouldCloseOnClickOutside: false }));
+                setIsPasswordChanged(true);
             });
-            setPassword(newPassword);
         },
-        [mt5Platform, tradingPasswordChangeMutateAsync]
+        [mt5Platform, setModalOptions, tradingPasswordChangeMutateAsync]
     );
 
     const renderTitle = useCallback(() => {
@@ -346,6 +352,18 @@ const MT5PasswordModal: React.FC<TProps> = ({ isVirtual, marketType, platform, p
         );
     }
 
+    if (isPasswordChanged) {
+        return (
+            <WalletSuccessChangeMT5Password
+                onClick={() => {
+                    createMT5Account();
+                    setIsPasswordChanged(false);
+                    setModalOptions(prev => ({ ...prev, shouldCloseOnClickOutside: true }));
+                }}
+            />
+        );
+    }
+
     if (createMT5AccountSuccess && !isMT5PasswordNotSet) {
         return (
             <MT5AccountAdded