[WALL] aum / WALL-4029 / fix-CFDs-password-flows (#15122)

* fix: fix issues with CFDs password flows - Fix height of success modal in mobile - Fix the title of the modal screens based on selected account - Added WalletErrorMT5Password screen for investor password error - Tried to fix most errors for MT5, MT5Investor, DerivX password issues * fix: fix more issues with footer * fix: sonar issues * chore: add header back for success popup MT5 * fix: header for mt5 investor password reset error and success
deriv-com · May 23, 2024 · 699f41d · 699f41d
1 parent dc6aa1c
commit 699f41d
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 39 deletions.
diff --git a/packages/wallets/src/components/WalletsResetMT5Password/WalletSuccessResetMT5Password.tsx b/packages/wallets/src/components/WalletsResetMT5Password/WalletSuccessResetMT5Password.tsx
@@ -1,9 +1,8 @@
 import React, { FC, useCallback } from 'react';
 import { Trans } from 'react-i18next';
 import { DerivLightIcMt5PasswordUpdatedIcon, DerivLightMt5SuccessPasswordResetIcon } from '@deriv/quill-icons';
-import { PlatformDetails } from '../../features/cfd/constants';
 import useDevice from '../../hooks/useDevice';
-import { ModalWrapper, WalletButton, WalletText } from '../Base';
+import { ModalStepWrapper, WalletButton } from '../Base';
 import { useModal } from '../ModalProvider';
 import { WalletsActionScreen } from '../WalletsActionScreen';
 
@@ -28,20 +27,19 @@ const WalletSuccessResetMT5Password: FC<WalletSuccessResetMT5PasswordProps> = ({
 
     const renderButtons = useCallback(() => {
         return (
-            <WalletButton onClick={handleSuccess} size='lg'>
+            <WalletButton isFullWidth={isMobile} onClick={handleSuccess} size='lg'>
                 {isInvestorPassword ? <Trans defaults='Ok' /> : <Trans defaults='Done' />}
             </WalletButton>
         );
-    }, [handleSuccess, isInvestorPassword]);
+    }, [handleSuccess, isInvestorPassword, isMobile]);
 
     return (
-        <ModalWrapper hideCloseButton={isMobile || !isInvestorPassword}>
+        <ModalStepWrapper
+            renderFooter={isMobile ? renderButtons : undefined}
+            shouldHideFooter={!isMobile}
+            title={isInvestorPassword ? `Reset ${title} password` : `Manage ${title} password`}
+        >
             <div className='wallets-reset-mt5-password'>
-                {isInvestorPassword && (
-                    <WalletText size='md' weight='bold'>
-                        Reset {PlatformDetails.mt5.title} investor password
-                    </WalletText>
-                )}
                 <WalletsActionScreen
                     description={
                         isInvestorPassword
@@ -56,11 +54,11 @@ const WalletSuccessResetMT5Password: FC<WalletSuccessResetMT5PasswordProps> = ({
                             <DerivLightMt5SuccessPasswordResetIcon height={100} width={100} />
                         )
                     }
-                    renderButtons={renderButtons}
+                    renderButtons={isMobile ? undefined : renderButtons}
                     title={isInvestorPassword ? 'Password saved' : 'Success'}
                 />
             </div>
-        </ModalWrapper>
+        </ModalStepWrapper>
     );
 };
 

diff --git a/packages/wallets/src/components/WalletsResetMT5Password/WalletsErrorMT5InvestorPassword.scss b/packages/wallets/src/components/WalletsResetMT5Password/WalletsErrorMT5InvestorPassword.scss
@@ -0,0 +1,7 @@
+.wallets-error-mt5-investor-password {
+    padding: 2.4rem 0;
+
+    @include desktop {
+        max-width: 44rem;
+    }
+}
diff --git a/packages/wallets/src/components/WalletsResetMT5Password/WalletsErrorMT5InvestorPassword.tsx b/packages/wallets/src/components/WalletsResetMT5Password/WalletsErrorMT5InvestorPassword.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { DerivLightIcDxtradePasswordIcon } from '@deriv/quill-icons';
+import useDevice from '../../hooks/useDevice';
+import { ModalStepWrapper } from '../Base';
+import { WalletsActionScreen } from '../WalletsActionScreen';
+import './WalletsErrorMT5InvestorPassword.scss';
+
+type TProps = {
+    errorMessage: string;
+    renderButtons?: React.ComponentProps<typeof WalletsActionScreen>['renderButtons'];
+    title: string;
+};
+
+const WalletsErrorMT5InvestorPassword: React.FC<TProps> = ({ errorMessage, renderButtons, title }) => {
+    const { isMobile } = useDevice();
+
+    return (
+        <ModalStepWrapper
+            renderFooter={isMobile ? renderButtons : undefined}
+            shouldHideFooter={!isMobile}
+            title={`Reset ${title} password`}
+        >
+            <div className='wallets-error-mt5-investor-password'>
+                <WalletsActionScreen
+                    description={errorMessage}
+                    icon={<DerivLightIcDxtradePasswordIcon height={100} width={100} />}
+                    renderButtons={!isMobile ? renderButtons : undefined}
+                />
+            </div>
+        </ModalStepWrapper>
+    );
+};
+
+export default WalletsErrorMT5InvestorPassword;
diff --git a/packages/wallets/src/components/WalletsResetMT5Password/WalletsResetMT5Password.scss b/packages/wallets/src/components/WalletsResetMT5Password/WalletsResetMT5Password.scss
@@ -13,9 +13,14 @@
         gap: 1.6rem;
     }
 
-    &__button-group {
+    &__footer {
         display: flex;
         justify-content: flex-end;
         gap: 0.8rem;
+
+        @include mobile {
+            width: 100%;
+            justify-content: center;
+        }
     }
 }
diff --git a/packages/wallets/src/components/WalletsResetMT5Password/WalletsResetMT5Password.tsx b/packages/wallets/src/components/WalletsResetMT5Password/WalletsResetMT5Password.tsx
@@ -2,11 +2,13 @@ import React, { useEffect, useState } from 'react';
 import { Trans } from 'react-i18next';
 import { useTradingPlatformInvestorPasswordReset, useTradingPlatformPasswordReset } from '@deriv/api-v2';
 import { CFD_PLATFORMS, PlatformDetails } from '../../features/cfd/constants';
+import useDevice from '../../hooks/useDevice';
 import { TPlatforms } from '../../types';
 import { validPassword, validPasswordMT5 } from '../../utils/password-validation';
-import { ModalWrapper, WalletButton, WalletPasswordFieldLazy, WalletText } from '../Base';
+import { ModalStepWrapper, WalletButton, WalletPasswordFieldLazy, WalletText } from '../Base';
 import { useModal } from '../ModalProvider';
 import { WalletError } from '../WalletError';
+import WalletsErrorMT5InvestorPassword from './WalletsErrorMT5InvestorPassword';
 import WalletSuccessResetMT5Password from './WalletSuccessResetMT5Password';
 import './WalletsResetMT5Password.scss';
 
@@ -30,7 +32,8 @@ const WalletsResetMT5Password = ({
     platform,
     verificationCode,
 }: WalletsResetMT5PasswordProps) => {
-    const { title } = PlatformDetails[platform];
+    const { isMobile } = useDevice();
+    const { title } = isInvestorPassword ? PlatformDetails.mt5Investor : PlatformDetails[platform];
     const {
         error: changePasswordError,
         isError: isChangePasswordError,
@@ -93,21 +96,48 @@ const WalletsResetMT5Password = ({
             });
         } else if (isChangeInvestorPasswordError) {
             show(
-                <WalletError
+                <WalletsErrorMT5InvestorPassword
                     errorMessage={changeInvestorPasswordError?.error?.message}
-                    onClick={hide}
-                    title={changeInvestorPasswordError?.error?.code}
+                    renderButtons={() => (
+                        <WalletButton isFullWidth={isMobile} onClick={hide}>
+                            Ok
+                        </WalletButton>
+                    )}
+                    title={title}
                 />
             );
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [platform, title, actionParams, isChangeInvestorPasswordSuccess, isChangeInvestorPasswordError]);
 
+    const renderButtons = () => (
+        <div className={'wallets-reset-mt5-password__footer'}>
+            <WalletButton isFullWidth={isMobile} onClick={() => hide()} size='lg' variant='outlined'>
+                <Trans defaults='Cancel' />
+            </WalletButton>
+            <WalletButton
+                disabled={isMT5 ? !validPasswordMT5(password) : !validPassword(password)}
+                isFullWidth={isMobile}
+                isLoading={isChangeInvestorPasswordLoading || isChangePasswordLoading}
+                onClick={handleSubmit}
+                size='lg'
+                variant='contained'
+            >
+                <Trans defaults='Create' />
+            </WalletButton>
+        </div>
+    );
+
     return (
-        <ModalWrapper>
+        <ModalStepWrapper
+            renderFooter={isMobile ? renderButtons : undefined}
+            shouldHideFooter={!isMobile}
+            shouldHideHeader={!isMobile}
+            title={`Manage ${title} password`}
+        >
             <div className='wallets-reset-mt5-password'>
-                <WalletText weight='bold'>
-                    {isInvestorPassword ? `Reset ${title} investor password` : `Create a new ${title} password`}
+                <WalletText align={isMobile ? 'center' : 'left'} weight='bold'>
+                    {`Create a new ${title} password`}
                 </WalletText>
                 {isMT5 && !isInvestorPassword && (
                     <WalletText size='sm'>You can use this password for all your {title} accounts.</WalletText>
@@ -119,22 +149,9 @@ const WalletsResetMT5Password = ({
                     password={password}
                 />
                 <WalletText size='sm'>{modalDescription[platform]}</WalletText>
-                <div className='wallets-reset-mt5-password__button-group'>
-                    <WalletButton onClick={() => hide()} size='lg' variant='outlined'>
-                        <Trans defaults='Cancel' />
-                    </WalletButton>
-                    <WalletButton
-                        disabled={isMT5 ? !validPasswordMT5(password) : !validPassword(password)}
-                        isLoading={isChangeInvestorPasswordLoading || isChangePasswordLoading}
-                        onClick={handleSubmit}
-                        size='lg'
-                        variant='contained'
-                    >
-                        <Trans defaults='Create' />
-                    </WalletButton>
-                </div>
+                {!isMobile && renderButtons()}
             </div>
-        </ModalWrapper>
+        </ModalStepWrapper>
     );
 };
 

diff --git a/packages/wallets/src/components/WalletsResetMT5Password/index.ts b/packages/wallets/src/components/WalletsResetMT5Password/index.ts
@@ -1,4 +1,5 @@
+import WalletsErrorMT5InvestorPassword from './WalletsErrorMT5InvestorPassword';
 import WalletsResetMT5Password from './WalletsResetMT5Password';
 import WalletSuccessResetMT5Password from './WalletSuccessResetMT5Password';
 
-export { WalletsResetMT5Password, WalletSuccessResetMT5Password };
+export { WalletsErrorMT5InvestorPassword, WalletsResetMT5Password, WalletSuccessResetMT5Password };
diff --git a/packages/wallets/src/features/cfd/constants.tsx b/packages/wallets/src/features/cfd/constants.tsx
@@ -52,6 +52,12 @@ export const PlatformDetails = {
         platform: i18n.t('mt5') as TPlatforms.MT5,
         title: i18n.t('Deriv MT5'),
     },
+    mt5Investor: {
+        icon: <AccountsDmt5DerivedIcon height={48} width={48} />,
+        link: 'https://onelink.to/grmtyx',
+        platform: i18n.t('mt5') as TPlatforms.MT5,
+        title: i18n.t('Deriv MT5 investor'),
+    },
 } as const;
 
 export const companyNamesAndUrls = {

diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/MT5ChangePasswordScreens.tsx b/packages/wallets/src/features/cfd/screens/ChangePassword/MT5ChangePasswordScreens.tsx
@@ -1,6 +1,6 @@
 import React, { Fragment, useState } from 'react';
 import { Trans } from 'react-i18next';
-import { LegacyArrowRight2pxIcon } from '@deriv/quill-icons';
+import { LegacyArrowLeft2pxIcon } from '@deriv/quill-icons';
 import { SentEmailContent } from '../../../../components';
 import { Tab, Tabs, WalletText } from '../../../../components/Base';
 import useDevice from '../../../../hooks/useDevice';
@@ -31,7 +31,7 @@ const MT5ChangePasswordScreens = () => {
                     }
                 }}
             >
-                <LegacyArrowRight2pxIcon iconSize='xs' />
+                <LegacyArrowLeft2pxIcon iconSize='xs' />
                 <WalletText weight='bold'>
                     <Trans defaults='Back' />
                 </WalletText>