Suisin/chore: implement timer from BE Timestamp

packages/account/package.json

@@ -39,6 +39,7 @@
         "@deriv/hooks": "^1.0.0",
         "@deriv/integration": "1.0.0",
         "@deriv/quill-icons": "^1.22.10",
+        "dayjs": "^1.11.10",
         "@deriv/shared": "^1.0.0",
         "@deriv/stores": "^1.0.0",
         "@deriv/translations": "^1.0.0",

packages/account/src/Sections/Profile/PersonalDetails/verify-button.tsx

@@ -6,6 +6,7 @@ import { useHistory } from 'react-router';
 import { routes } from '@deriv/shared';
 import { Popover, Text } from '@deriv/components';
 import { Localize } from '@deriv/translations';
+import { useVerifyEmail } from '@deriv/hooks';
 
 export const VerifyButton = observer(() => {
     const [open_popover, setOpenPopover] = React.useState(false);
@@ -15,8 +16,10 @@ export const VerifyButton = observer(() => {
     const { phone_number_verification } = account_settings;
     const { verified: phone_number_verified } = phone_number_verification;
     const history = useHistory();
+    const { send } = useVerifyEmail('phone_number_verification');
 
     const redirectToPhoneVerification = () => {
+        send();
         history.push(routes.phone_verification);
     };
 

packages/account/src/Sections/Profile/PhoneVerification/__test__/didnt-get-the-code-modal.spec.tsx

@@ -1,5 +1,5 @@
-import { render, screen } from '@testing-library/react';
 import React from 'react';
+import { render, screen } from '@testing-library/react';
 import DidntGetTheCodeModal from '../didnt-get-the-code-modal';
 import { StoreProvider, mockStore } from '@deriv/stores';
 import userEvent from '@testing-library/user-event';
@@ -11,24 +11,27 @@ jest.mock('@deriv/hooks', () => ({
     useRequestPhoneNumberOTP: jest.fn(() => ({
         requestOnWhatsApp: jest.fn(),
         requestOnSMS: jest.fn(),
+        email_otp_error: null,
     })),
 }));
 
 describe('DidntGetTheCodeModal', () => {
     const mock_store = mockStore({});
     const mockSetShouldShowDidntGetTheCodeModal = jest.fn();
-    const mockSetStartTimer = jest.fn();
     const mockSetOtpVerification = jest.fn();
+    const mockReInitializeGetSettings = jest.fn();
+    const mockSetIsButtonDisabled = jest.fn();
     const resend_code_text = /Resend code/;
 
     const renderComponent = (phone_verification_type: string) => {
         render(
             <StoreProvider store={mock_store}>
                 <DidntGetTheCodeModal
+                    setIsButtonDisabled={mockSetIsButtonDisabled}
+                    reInitializeGetSettings={mockReInitializeGetSettings}
                     should_show_didnt_get_the_code_modal={true}
                     phone_verification_type={phone_verification_type}
                     setShouldShowDidntGetTheCodeModal={mockSetShouldShowDidntGetTheCodeModal}
-                    setStartTimer={mockSetStartTimer}
                     setOtpVerification={mockSetOtpVerification}
                 />
             </StoreProvider>
@@ -37,7 +40,6 @@ describe('DidntGetTheCodeModal', () => {
 
     beforeEach(() => {
         mockSetShouldShowDidntGetTheCodeModal.mockClear();
-        mockSetStartTimer.mockClear();
         mockSetOtpVerification.mockClear();
     });
 
@@ -55,21 +57,19 @@ describe('DidntGetTheCodeModal', () => {
         expect(screen.getByRole('button', { name: /Send code via SMS/ })).toBeInTheDocument();
     });
 
-    it('should render setOtpVerification and setShouldShowDidintGetTheCodeModal when Change phone number is clicked, should not render setStartTimer', () => {
+    it('should render setOtpVerification and setShouldShowDidintGetTheCodeModal when Change phone number is clicked, should not render mockSetTimer', () => {
         renderComponent(VERIFICATION_SERVICES.SMS);
         const change_phone_number_button = screen.getByRole('button', { name: /Change phone number/ });
         userEvent.click(change_phone_number_button);
         expect(mockSetShouldShowDidntGetTheCodeModal).toHaveBeenCalledTimes(1);
         expect(mockSetOtpVerification).toHaveBeenCalledTimes(1);
-        expect(mockSetStartTimer).not.toBeCalled();
     });
 
-    it('should render setStartTimer and setShouldShowDidintGetTheCodeModal when Resend code is clicked', () => {
+    it('should render setShouldShowDidintGetTheCodeModal when Resend code is clicked', () => {
         renderComponent(VERIFICATION_SERVICES.SMS);
         const resend_code_button = screen.getByRole('button', { name: resend_code_text });
         userEvent.click(resend_code_button);
         expect(mockSetShouldShowDidntGetTheCodeModal).toHaveBeenCalledTimes(1);
-        expect(mockSetStartTimer).toHaveBeenCalledTimes(1);
     });
 
     it('should render mockRequestOnSMS and setOtpVerification with phone_verification_type: sms when Resend code is clicked, phone_verification_type is sms', () => {

packages/account/src/Sections/Profile/PhoneVerification/__test__/otp-verification.spec.tsx

@@ -2,14 +2,12 @@ import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { StoreProvider, mockStore } from '@deriv/stores';
 import OTPVerification from '../otp-verification';
-import { useSendOTPVerificationCode, useVerifyEmail } from '@deriv/hooks';
+import { useSendOTPVerificationCode, useSettings } from '@deriv/hooks';
 import userEvent from '@testing-library/user-event';
 
 jest.mock('@deriv/hooks', () => ({
     ...jest.requireActual('@deriv/hooks'),
-    useVerifyEmail: jest.fn(() => ({
-        send: jest.fn(),
-    })),
+    useSettings: jest.fn(),
     useSendOTPVerificationCode: jest.fn(),
 }));
 
@@ -26,7 +24,6 @@ describe('OTPVerification', () => {
     });
     let phone_verification_type = 'sms';
     const mockSetOtpVerification = jest.fn();
-    const mockSend = jest.fn();
     const mockSendPhoneOTPVerification = jest.fn();
     const mockSetPhoneOtpErrorMessage = jest.fn();
     const renderComponent = () => {
@@ -40,13 +37,19 @@ describe('OTPVerification', () => {
         );
     };
 
-    it('should render ConfirmYourEmail in OTP Verification', () => {
-        (useVerifyEmail as jest.Mock).mockReturnValueOnce({
-            send: mockSend,
+    beforeEach(() => {
+        (useSettings as jest.Mock).mockReturnValue({
+            data: {
+                email: 'johndoe@regentmarkets.com',
+            },
+            invalidate: jest.fn(() => Promise.resolve()),
         });
         (useSendOTPVerificationCode as jest.Mock).mockReturnValue({
             sendPhoneOTPVerification: jest.fn(),
         });
+    });
+
+    it('should render ConfirmYourEmail in OTP Verification', () => {
         renderComponent();
         expect(screen.getByText(/Confirm it's you/)).toBeInTheDocument();
         expect(screen.getByText(/We've sent a verification code to/)).toBeInTheDocument();
@@ -56,24 +59,17 @@ describe('OTPVerification', () => {
         ).toBeInTheDocument();
         expect(screen.getByRole('textbox', { name: /OTP code/ })).toBeInTheDocument();
         expect(screen.getByRole('button', { name: /Resend code/ })).toBeInTheDocument();
-        expect(mockSend).toHaveBeenCalled();
     });
 
     it('should render Verify your number in OTP Verification', () => {
         store.ui.should_show_phone_number_otp = true;
-        (useSendOTPVerificationCode as jest.Mock).mockReturnValue({
-            sendPhoneOTPVerification: jest.fn(),
-        });
         renderComponent();
         expect(screen.getByText(/Verify your number/)).toBeInTheDocument();
         expect(screen.getByText(/Enter the 6-digit code sent to you via SMS at :/)).toBeInTheDocument();
     });
 
     it('should render whatsapp when phone_verification_type is whatsapp', () => {
         store.ui.should_show_phone_number_otp = true;
-        (useSendOTPVerificationCode as jest.Mock).mockReturnValue({
-            sendPhoneOTPVerification: jest.fn(),
-        });
         phone_verification_type = 'whatsapp';
         renderComponent();
         expect(screen.getByText(/WhatsApp/)).toBeInTheDocument();