[WALL] Aizad / WALL-3703 / Fix email verification for MT5 Password Mo…

…dal (deriv-com#14469) * chore: Fix email verification onclick forgot password * chore: Added error and success block and added icon from quill-icons
heorhi-deriv · Apr 4, 2024 · 223daba · 223daba
1 parent 65672fc
commit 223daba
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 34 deletions.
diff --git a/packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx b/packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx
@@ -2,9 +2,9 @@ import React, { FC, Fragment, useEffect, useState } from 'react';
 import { Trans } from 'react-i18next';
 import { useCountdown } from 'usehooks-ts';
 import { useActiveWalletAccount, useSettings, useVerifyEmail } from '@deriv/api-v2';
+import { DerivLightIcEmailSentIcon } from '@deriv/quill-icons';
 import { PlatformDetails } from '../../features/cfd/constants';
 import useDevice from '../../hooks/useDevice';
-import ChangePassword from '../../public/images/change-password-email.svg';
 import { TPlatforms } from '../../types';
 import { platformPasswordResetRedirectLink } from '../../utils/cfd';
 import { WalletButton } from '../Base';
@@ -48,7 +48,7 @@ const SentEmailContent: FC<SentEmailContentProps> = ({ description, isInvestorPa
             <WalletsActionScreen
                 description={description ?? `Please click on the link in the email to change your ${title} password.`}
                 descriptionSize={descriptionSize}
-                icon={<ChangePassword />}
+                icon={<DerivLightIcEmailSentIcon width={133} />}
                 renderButtons={() =>
                     shouldShowResendEmailReasons && isInvestorPassword ? null : (
                         <WalletButton

diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
@@ -6,14 +6,16 @@ import {
     useCreateMT5Account,
     useSettings,
     useTradingPlatformPasswordChange,
+    useVerifyEmail,
 } from '@deriv/api-v2';
 import { SentEmailContent, WalletError, WalletSuccessResetMT5Password } from '../../../../components';
 import { ModalStepWrapper, ModalWrapper, WalletButton } from '../../../../components/Base';
 import { useModal } from '../../../../components/ModalProvider';
 import useDevice from '../../../../hooks/useDevice';
 import { TMarketTypes, TPlatforms } from '../../../../types';
+import { platformPasswordResetRedirectLink } from '../../../../utils/cfd';
 import { validPassword, validPasswordMT5 } from '../../../../utils/password-validation';
-import { PlatformDetails } from '../../constants';
+import { CFD_PLATFORMS, PlatformDetails } from '../../constants';
 import { CreatePassword, EnterPassword, MT5ResetPasswordModal } from '../../screens';
 import MT5AccountAdded from '../MT5AccountAdded/MT5AccountAdded';
 import { MT5PasswordModalFooter, SuccessModalFooter } from './MT5PasswordModalFooters';
@@ -46,11 +48,18 @@ const MT5PasswordModal: React.FC<TProps> = ({ marketType, platform }) => {
     const { data: accountStatusData } = useAccountStatus();
     const { data: activeWalletData } = useActiveWalletAccount();
     const { data: availableMT5AccountsData } = useAvailableMT5Accounts();
+    const {
+        error: emailVerificationError,
+        mutate: emailVerificationMutate,
+        status: emailVerificationStatus,
+    } = useVerifyEmail();
     const { data: accountStatus } = useAccountStatus();
     const { isMobile } = useDevice();
     const { getModalState, hide, show } = useModal();
     const { data: settingsData } = useSettings();
 
+    const { email } = settingsData;
+
     const [password, setPassword] = useState('');
 
     const isMT5PasswordNotSet = accountStatusData?.is_mt5_password_not_set;
@@ -128,16 +137,17 @@ const MT5PasswordModal: React.FC<TProps> = ({ marketType, platform }) => {
         tradingPasswordChangeMutateAsync,
     ]);
 
-    const sendEmailVerification = useCallback(
-        (platform: TPlatforms.All) => {
-            show(
-                <ModalStepWrapper>
-                    <SentEmailContent platform={platform} />
-                </ModalStepWrapper>
-            );
-        },
-        [show]
-    );
+    const sendEmailVerification = useCallback(() => {
+        if (email) {
+            emailVerificationMutate({
+                type: 'trading_platform_mt5_password_reset',
+                url_parameters: {
+                    redirect_to: platformPasswordResetRedirectLink(CFD_PLATFORMS.MT5, activeWalletData?.is_virtual),
+                },
+                verify_email: email,
+            });
+        }
+    }, [activeWalletData?.is_virtual, email, emailVerificationMutate]);
 
     const onSubmitPasswordChange = useCallback(
         ({ currentPassword, newPassword }: TPlatformPasswordChange) => {
@@ -191,7 +201,7 @@ const MT5PasswordModal: React.FC<TProps> = ({ marketType, platform }) => {
                 }
                 isLoading={tradingPlatformPasswordChangeLoading || createMT5AccountLoading}
                 onPrimaryClick={onSubmit}
-                onSecondaryClick={() => sendEmailVerification(platform)}
+                onSecondaryClick={() => sendEmailVerification()}
             />
         );
     }, [
@@ -202,7 +212,6 @@ const MT5PasswordModal: React.FC<TProps> = ({ marketType, platform }) => {
         mt5Title,
         onSubmit,
         password,
-        platform,
         sendEmailVerification,
         tradingPlatformPasswordChangeLoading,
     ]);
@@ -225,7 +234,7 @@ const MT5PasswordModal: React.FC<TProps> = ({ marketType, platform }) => {
                     formError={tradingPasswordChangeError}
                     isLoading={tradingPlatformPasswordChangeLoading}
                     onClickSubmitPasswordChange={onSubmitPasswordChange}
-                    sendEmailVerification={() => sendEmailVerification(platform)}
+                    sendEmailVerification={() => sendEmailVerification()}
                 />
             );
 
@@ -235,7 +244,7 @@ const MT5PasswordModal: React.FC<TProps> = ({ marketType, platform }) => {
                 marketType={marketType}
                 onPasswordChange={e => setPassword(e.target.value)}
                 onPrimaryClick={onSubmit}
-                onSecondaryClick={() => sendEmailVerification(platform)}
+                onSecondaryClick={() => sendEmailVerification()}
                 password={password}
                 passwordError={createMT5AccountError?.error?.code === 'PasswordError'}
                 platform={mt5Platform}
@@ -250,13 +259,30 @@ const MT5PasswordModal: React.FC<TProps> = ({ marketType, platform }) => {
         onSubmit,
         onSubmitPasswordChange,
         password,
-        platform,
         sendEmailVerification,
         updateMT5Password,
         tradingPasswordChangeError,
         tradingPlatformPasswordChangeLoading,
     ]);
 
+    if (emailVerificationStatus === 'error') {
+        return (
+            <WalletError
+                errorMessage={emailVerificationError?.error?.message ?? ''}
+                onClick={hide}
+                title={emailVerificationError?.error?.code ?? 'Error'}
+            />
+        );
+    }
+
+    if (emailVerificationStatus === 'success') {
+        return (
+            <ModalStepWrapper>
+                <SentEmailContent platform={CFD_PLATFORMS.MT5} />
+            </ModalStepWrapper>
+        );
+    }
+
     if (
         createMT5AccountStatus === 'error' &&
         createMT5AccountError?.error?.code !== 'PasswordError' &&

diff --git a/packages/wallets/src/public/images/change-password-email.svg b/packages/wallets/src/public/images/change-password-email.svg