diff --git a/packages/wallets/src/components/SentEmailContent/SentEmailContent.scss b/packages/wallets/src/components/SentEmailContent/SentEmailContent.scss index 6734ef392429..92db26ffd36f 100644 --- a/packages/wallets/src/components/SentEmailContent/SentEmailContent.scss +++ b/packages/wallets/src/components/SentEmailContent/SentEmailContent.scss @@ -12,4 +12,17 @@ @include mobile { width: 100%; } + + &__reasons { + align-items: center; + display: flex; + flex-direction: column; + gap: 1.6rem; + + &-item { + display: grid; + grid-template-columns: 3.2rem auto; + grid-gap: 0.8rem; + } + } } diff --git a/packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx b/packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx index a719dc57f4ce..3f81b1c2646e 100644 --- a/packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx +++ b/packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx @@ -1,9 +1,15 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; +import { useCountdown } from 'usehooks-ts'; +import { useSettings, useVerifyEmail } from '@deriv/api'; import { PlatformDetails } from '../../features/cfd/constants'; import useDevice from '../../hooks/useDevice'; import ChangePassword from '../../public/images/change-password-email.svg'; +import EmailIcon from '../../public/images/ic-email.svg'; +import EmailFirewallIcon from '../../public/images/ic-email-firewall.svg'; +import EmailSpamIcon from '../../public/images/ic-email-spam.svg'; +import EmailTypoIcon from '../../public/images/ic-email-typo.svg'; import { TPlatforms } from '../../types'; -import { WalletButton } from '../Base'; +import { WalletButton, WalletText } from '../Base'; import { WalletsActionScreen } from '../WalletsActionScreen'; import './SentEmailContent.scss'; @@ -12,9 +18,22 @@ type TProps = { }; const SentEmailContent: React.FC = ({ platform }) => { + const [shouldShowResendEmailReasons, setShouldShowResendEmailReasons] = useState(false); + const [hasCountdownStarted, setHasCountdownStarted] = useState(false); + const { data } = useSettings(); + const { mutate: verifyEmail } = useVerifyEmail(); const { isMobile } = useDevice(); const title = PlatformDetails[platform || 'mt5'].title; const deviceSize = isMobile ? 'lg' : 'md'; + const [count, { resetCountdown, startCountdown }] = useCountdown({ + countStart: 60, + intervalMs: 1000, + }); + + useEffect(() => { + if (count === 0) setHasCountdownStarted(false); + }, [count]); + return (
= ({ platform }) => { descriptionSize={deviceSize} icon={} renderButtons={() => ( - + { + setShouldShowResendEmailReasons(true); + }} + size={deviceSize} + text="Didn't receive the email?" + variant='ghost' + /> )} title='We’ve sent you an email' titleSize={deviceSize} /> + {shouldShowResendEmailReasons && ( +
+
+ + + The email is in your spam folder (Sometimes things get lost there). + +
+
+ + + You accidentally gave us another email address (Usually a work or a personal one instead of + the one you meant). + +
+
+ + + The email address you entered had a mistake or typo (happens to the best of us). + +
+
+ + + We can’t deliver the email to this address (Usually because of firewalls or filtering). + +
+ { + if (data?.email) { + verifyEmail({ + type: + platform === 'mt5' + ? 'trading_platform_mt5_password_reset' + : 'trading_platform_dxtrade_password_reset', + verify_email: data?.email, + }); + resetCountdown(); + startCountdown(); + setHasCountdownStarted(true); + } + }} + text={hasCountdownStarted ? `Resend email in ${count}` : 'Resend email'} + /> +
+ )}
); }; diff --git a/packages/wallets/src/public/images/ic-email-firewall.svg b/packages/wallets/src/public/images/ic-email-firewall.svg new file mode 100644 index 000000000000..29a950f83881 --- /dev/null +++ b/packages/wallets/src/public/images/ic-email-firewall.svg @@ -0,0 +1 @@ + diff --git a/packages/wallets/src/public/images/ic-email-spam.svg b/packages/wallets/src/public/images/ic-email-spam.svg new file mode 100644 index 000000000000..b8f63157c84c --- /dev/null +++ b/packages/wallets/src/public/images/ic-email-spam.svg @@ -0,0 +1 @@ + diff --git a/packages/wallets/src/public/images/ic-email-typo.svg b/packages/wallets/src/public/images/ic-email-typo.svg new file mode 100644 index 000000000000..404fc7f01b05 --- /dev/null +++ b/packages/wallets/src/public/images/ic-email-typo.svg @@ -0,0 +1 @@ + diff --git a/packages/wallets/src/public/images/ic-email.svg b/packages/wallets/src/public/images/ic-email.svg new file mode 100644 index 000000000000..be957a47261a --- /dev/null +++ b/packages/wallets/src/public/images/ic-email.svg @@ -0,0 +1 @@ +