diff --git a/packages/cashier/src/components/email-verification-empty-state/__tests__/email-verification-empty-state.test.tsx b/packages/cashier/src/components/email-verification-empty-state/__tests__/email-verification-empty-state.test.tsx index 7dfd6b4a24e2..87a157bc470a 100644 --- a/packages/cashier/src/components/email-verification-empty-state/__tests__/email-verification-empty-state.test.tsx +++ b/packages/cashier/src/components/email-verification-empty-state/__tests__/email-verification-empty-state.test.tsx @@ -2,8 +2,6 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import EmailVerificationEmptyState from '../email-verification-empty-state'; import { TRootStore } from 'Types'; -import { useVerifyEmail } from '@deriv/hooks'; -import { VerifyEmail } from '@deriv/api-types'; import CashierProviders from '../../../cashier-providers'; const mock_store: DeepPartial = { @@ -13,18 +11,8 @@ const mock_store: DeepPartial = { }; describe('EmailVerificationEmptyState', () => { - const verify: ReturnType = { - is_loading: false, - error: '', - data: {} as VerifyEmail, - counter: 58, - is_counter_running: true, - sent_count: 2, - has_been_sent: true, - send: jest.fn(), - }; test('should disable resend button after sending the request', () => { - render(, { + render(, { wrapper: ({ children }) => {children}, }); diff --git a/packages/cashier/src/components/email-verification-empty-state/email-verification-empty-state.tsx b/packages/cashier/src/components/email-verification-empty-state/email-verification-empty-state.tsx index 9494cc8b8bda..479417cee08a 100644 --- a/packages/cashier/src/components/email-verification-empty-state/email-verification-empty-state.tsx +++ b/packages/cashier/src/components/email-verification-empty-state/email-verification-empty-state.tsx @@ -1,15 +1,17 @@ import React from 'react'; -import { useVerifyEmail } from '@deriv/hooks'; +import { useVerifyEmail, TEmailVerificationType } from '@deriv/hooks'; import { localize } from '@deriv/translations'; import EmptyState from 'Components/empty-state'; import EmailVerificationResendEmptyState from './email-verification-resend-empty-state'; import './email-verification-empty-state.scss'; type TEmailVerificationEmptyStateProps = { - verify: ReturnType; + type: TEmailVerificationType; }; -const EmailVerificationEmptyState = ({ verify }: TEmailVerificationEmptyStateProps) => { +const EmailVerificationEmptyState = ({ type }: TEmailVerificationEmptyStateProps) => { + const verify = useVerifyEmail(type); + const action = { label: localize("Didn't receive the email?"), onClick: verify.send, diff --git a/packages/cashier/src/pages/payment-agent/payment-agent-list/withdrawal-tab.tsx b/packages/cashier/src/pages/payment-agent/payment-agent-list/withdrawal-tab.tsx index 2de771ef96a2..265e2f567265 100644 --- a/packages/cashier/src/pages/payment-agent/payment-agent-list/withdrawal-tab.tsx +++ b/packages/cashier/src/pages/payment-agent/payment-agent-list/withdrawal-tab.tsx @@ -23,7 +23,8 @@ const WithdrawalTab = observer(() => { // match the behavior of the `Withdrawal` page and first inform the user. if (verify.error && 'code' in verify.error) return ; - if (!verify.is_loading && verify.has_been_sent) return ; + if (!verify.is_loading && verify.has_been_sent) + return ; if (verification_code || payment_agent.is_withdraw) return ; diff --git a/packages/cashier/src/pages/withdrawal/withdrawal-verification-email/withdrawal-verification-email.tsx b/packages/cashier/src/pages/withdrawal/withdrawal-verification-email/withdrawal-verification-email.tsx index 58342dcc63bf..678cca20fc09 100644 --- a/packages/cashier/src/pages/withdrawal/withdrawal-verification-email/withdrawal-verification-email.tsx +++ b/packages/cashier/src/pages/withdrawal/withdrawal-verification-email/withdrawal-verification-email.tsx @@ -21,7 +21,7 @@ const WithdrawalVerificationEmail = observer(() => { if (verify.error) return ; - if (verify.has_been_sent) return ; + if (verify.has_been_sent) return ; return ( <> diff --git a/packages/core/src/Stores/client-store.js b/packages/core/src/Stores/client-store.js index 582c36599507..5883e396cb79 100644 --- a/packages/core/src/Stores/client-store.js +++ b/packages/core/src/Stores/client-store.js @@ -129,7 +129,6 @@ export default class ClientStore extends BaseStore { account_limits = {}; self_exclusion = {}; - sent_verify_emails_data = {}; local_currency_config = { currency: '', @@ -205,7 +204,6 @@ export default class ClientStore extends BaseStore { new_email: observable, account_limits: observable, self_exclusion: observable, - sent_verify_emails_data: observable, local_currency_config: observable, has_cookie_account: observable, financial_assessment: observable, @@ -309,7 +307,6 @@ export default class ClientStore extends BaseStore { setPreferredLanguage: action.bound, setCookieAccount: action.bound, setCFDScore: action.bound, - setSentVerifyEmailsData: action.bound, updateSelfExclusion: action.bound, responsePayoutCurrencies: action.bound, responseAuthorize: action.bound, @@ -1180,11 +1177,6 @@ export default class ClientStore extends BaseStore { LocalStore.setObject(LANGUAGE_KEY, lang); }; - setSentVerifyEmailsData(sent_verify_emails_data) { - this.sent_verify_emails_data = sent_verify_emails_data; - LocalStore.setObject('sent_verify_emails_data', sent_verify_emails_data); - } - setCookieAccount() { const domain = /deriv\.(com|me)/.test(window.location.hostname) ? deriv_urls.DERIV_HOST_NAME : 'binary.sx'; @@ -1591,7 +1583,6 @@ export default class ClientStore extends BaseStore { this.setLoginId(LocalStore.get('active_loginid')); this.setAccounts(LocalStore.getObject(storage_key)); - this.setSentVerifyEmailsData(LocalStore.getObject('sent_verify_emails_data')); this.setSwitched(''); const client = this.accounts[this.loginid]; // If there is an authorize_response, it means it was the first login diff --git a/packages/hooks/src/useVerifyEmail.ts b/packages/hooks/src/useVerifyEmail.ts index abac330c47b1..2116418a4089 100644 --- a/packages/hooks/src/useVerifyEmail.ts +++ b/packages/hooks/src/useVerifyEmail.ts @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { useWS } from '@deriv/api'; import { useStore } from '@deriv/stores'; import type { TSocketEndpoints } from '@deriv/api/types'; @@ -9,19 +10,9 @@ export type TEmailVerificationType = TSocketEndpoints['verify_email']['request'] const useVerifyEmail = (type: TEmailVerificationType) => { const WS = useWS('verify_email'); + const counter = useCountdown({ from: RESEND_COUNTDOWN }); const { client } = useStore(); - const { setSentVerifyEmailsData, sent_verify_emails_data } = client; - const { last_time_sent_seconds = 0, sent_count = 0 } = sent_verify_emails_data[type] || {}; - const time_now_seconds = Math.floor(Date.now() / 1000); - const seconds_left = last_time_sent_seconds + RESEND_COUNTDOWN - time_now_seconds; - const should_not_allow_resend = - last_time_sent_seconds && time_now_seconds < last_time_sent_seconds + RESEND_COUNTDOWN; - const countdown = should_not_allow_resend ? seconds_left : RESEND_COUNTDOWN; - const counter = useCountdown({ from: countdown }); - - if (!counter.is_running && should_not_allow_resend) { - counter.start(); - } + const [sent_count, setSentCount] = useState(0); const send = () => { if (!client.email) return; @@ -29,11 +20,8 @@ const useVerifyEmail = (type: TEmailVerificationType) => { counter.reset(); counter.start(); - const sent_emails_data = { - ...sent_verify_emails_data, - [type]: { last_time_sent_seconds: time_now_seconds, sent_count: sent_count + 1 }, - }; - setSentVerifyEmailsData(sent_emails_data); + + setSentCount(old => old + 1); WS.send({ verify_email: client.email, type }); }; diff --git a/packages/stores/src/mockStore.ts b/packages/stores/src/mockStore.ts index ac6cf4013c3e..e23b94e293c3 100644 --- a/packages/stores/src/mockStore.ts +++ b/packages/stores/src/mockStore.ts @@ -152,8 +152,6 @@ const mock = (): TRootStore => { residence: '', responseMt5LoginList: jest.fn(), responseTradingPlatformAccountsList: jest.fn(), - sent_verify_emails_data: {}, - setSentVerifyEmailsData: jest.fn(), standpoint: { iom: '', }, diff --git a/packages/stores/types.ts b/packages/stores/types.ts index 653e9d94e4b8..66dedaa0511f 100644 --- a/packages/stores/types.ts +++ b/packages/stores/types.ts @@ -1,5 +1,4 @@ import type { GetAccountStatus, Authorize, DetailsOfEachMT5Loginid, LogOutResponse, GetLimits } from '@deriv/api-types'; -import type { TEmailVerificationType } from '@deriv/hooks'; import type { RouteComponentProps } from 'react-router'; type TAccount = NonNullable[0]; @@ -166,9 +165,7 @@ type TClientStore = { trading_platform_dxtrade_password_reset: string; trading_platform_mt5_password_reset: string; }; - sent_verify_emails_data: TSentVerifyEmailsData; email: string; - setSentVerifyEmailsData: (sent_verify_emails_data: TSentVerifyEmailsData) => void; setVerificationCode: (code: string, action: string) => void; updateAccountStatus: () => Promise; is_authentication_needed: boolean; @@ -180,16 +177,6 @@ type TClientStore = { is_crypto: boolean; }; -type TSentVerifyEmailsData = Partial< - Record< - TEmailVerificationType, - { - last_time_sent_seconds: number; - sent_count: number; - } - > ->; - type TCommonStoreError = { header: string | JSX.Element; message: string | JSX.Element;