From 223daba73a3cb7daab817a6ff9245d77420bcf47 Mon Sep 17 00:00:00 2001
From: Aizad Ridzo <103104395+aizad-deriv@users.noreply.github.com>
Date: Thu, 4 Apr 2024 20:36:05 +0800
Subject: [PATCH] [WALL] Aizad / WALL-3703 / Fix email verification for MT5
 Password Modal (#14469)

* chore: Fix email verification onclick forgot password

* chore: Added error and success block and added icon from quill-icons
---
 .../SentEmailContent/SentEmailContent.tsx     |  4 +-
 .../MT5PasswordModal/MT5PasswordModal.tsx     | 58 ++++++++++++++-----
 .../public/images/change-password-email.svg   | 16 -----
 3 files changed, 44 insertions(+), 34 deletions(-)
 delete mode 100644 packages/wallets/src/public/images/change-password-email.svg

diff --git a/packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx b/packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx
index 675ef213a2bc..4c696d769dab 100644
--- 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
index 755b6e371b19..ef8423df0761 100644
--- 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
deleted file mode 100644
index 08d233c56ed5..000000000000
--- a/packages/wallets/src/public/images/change-password-email.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" fill="none">
-  <g clip-path="url(#clip0_8489_6907)">
-    <path d="M99.9809 88.74H0.0185547V39.8347L42.7906 2.40814C43.1783 2.05481 43.6079 1.75039 44.0698 1.5017C47.778 -0.466712 52.2214 -0.466712 55.9297 1.5017C56.3886 1.75098 56.8153 2.05538 57.2004 2.40814L99.9809 39.8347V88.74Z" fill="#84ABAE"/>
-    <path d="M15.3943 83.7587C10.9581 83.754 7.36045 80.1639 7.34646 75.7278L7.23633 15.2675C7.24097 10.8314 10.8311 7.23372 15.2672 7.21973H70.5938L92.9075 29.347V75.677C92.8795 80.1585 89.2311 83.7728 84.7495 83.7587H15.3943Z" fill="white"/>
-    <path d="M70.4245 7.64304L92.4501 29.5162V75.6767C92.4082 79.913 88.9522 83.3198 84.7157 83.3011H15.3944C11.1836 83.3011 7.77011 79.8875 7.77011 75.6767L7.64304 15.2673C7.64304 11.0565 11.0565 7.64304 15.2673 7.64304H70.4245ZM70.7718 6.7959H15.2673C10.5887 6.7959 6.7959 10.5887 6.7959 15.2673L6.90603 75.7106C6.90603 80.3892 10.6988 84.1821 15.3774 84.1821H84.7326C89.437 84.2008 93.2722 80.4148 93.3142 75.7106V29.1688L70.7718 6.7959Z" fill="#F2F2F2"/>
-    <path d="M79.2351 29.245H93.323L70.7637 6.87207V20.7736C70.7637 25.4522 74.5564 29.245 79.2351 29.245Z" fill="#E3E4E3"/>
-    <path d="M60.8516 60.5388H49.7117C36.3015 60.5388 28.457 51.7793 28.457 39.0638C28.457 26.3482 36.615 17.2754 49.7117 17.2754C61.9105 17.2754 70.0433 24.8996 70.0433 36.7596C70.0769 45.0615 66.2055 50.0004 60.1654 50.0004C56.3533 50.0004 53.7526 48.018 53.5408 45.1039H53.2782C52.7802 48.0326 50.1423 50.1063 47.1788 49.8987C42.5111 49.8987 39.0124 46.1967 39.0124 39.1062C39.0124 32.0156 42.5111 28.3136 47.1788 28.3136C49.7285 28.2196 52.0008 29.9106 52.6428 32.3799H52.9055V28.7456H58.8354V42.7658C58.8354 44.4601 59.6826 45.375 61.1651 45.375C63.554 45.375 65.1974 42.8336 65.1974 37.5559V36.0903C65.1974 27.1784 58.7761 21.8161 49.7626 21.8161C39.8002 21.8161 33.4382 28.5932 33.4382 38.0726V40.0549C33.3874 49.5429 39.7494 55.9303 49.7117 55.9303H60.8516V60.5388ZM52.897 41.9017V35.8362C52.897 34.2182 51.2027 33.0152 49.3475 33.0152C48.2134 32.9658 47.1113 33.3976 46.3127 34.2043C45.5141 35.011 45.0933 36.1174 45.1541 37.2509V40.792C45.0906 41.9262 45.5105 43.0342 46.3097 43.8415C47.1089 44.6488 48.2127 45.0798 49.3475 45.0277C51.1434 45.1124 52.897 43.4435 52.897 41.8763V41.9017Z" fill="#BBCCCE"/>
-    <path d="M92.1703 99.9811H7.82917C5.76665 99.99 3.78503 99.1793 2.32025 97.7273C0.855467 96.2752 0.0275221 94.3007 0.0185547 92.2382V40.3086L49.9997 70.1448L99.9809 40.3086V92.2382C99.9719 94.3007 99.144 96.2752 97.6792 97.7273C96.2144 99.1793 94.2328 99.99 92.1703 99.9811Z" fill="#E0F0F0"/>
-    <path d="M0.0185547 92.577L45.9165 64.6807C48.4251 63.1559 51.5743 63.1559 54.0829 64.6807L99.9809 92.577C99.9719 94.5496 99.1797 96.4379 97.7785 97.8264C96.3772 99.215 94.4818 99.99 92.5091 99.981H7.49032C5.51766 99.99 3.62223 99.215 2.221 97.8264C0.819765 96.4379 0.0275212 94.5496 0.0185547 92.577Z" fill="#C6E4E4"/>
-  </g>
-  <defs>
-    <clipPath id="clip0_8489_6907">
-      <rect width="100" height="100" fill="white"/>
-    </clipPath>
-  </defs>
-</svg>