feat: implement withdraw verification reques

packages/appstore/src/components/modals/wallet-modal/provider.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import React from 'react';
 import { localize } from '@deriv/translations';
-import { isMobile } from '@deriv/shared';
 import FiatTransactionList from 'Components/fiat-transaction-list';
 import WalletTransfer from 'Components/wallet-transfer';
+import WalletWithdrawal from '../../wallet-withdrawal';
 
 export type TWalletType = 'real' | 'demo' | 'p2p' | 'payment_agent';
 
@@ -14,7 +14,7 @@ export const getCashierOptions = (type: TWalletType) => {
                 {
                     icon: 'IcAdd',
                     label: localize('Deposit'),
-                    //Remove Lorem ipsum text after QA testing (testing scroll behaviour)
+                    //Remove Lorem ipsum text after QA testing (testing scroll behavior)
                     content: () => (
                         <div style={{ textAlign: 'justify' }}>
                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas euismod lectus odio, sed
@@ -72,7 +72,7 @@ export const getCashierOptions = (type: TWalletType) => {
                         </div>
                     ),
                 },
-                { icon: 'IcMinus', label: localize('Withdraw'), content: () => <p>Withdraw Real</p> },
+                { icon: 'IcMinus', label: localize('Withdraw'), content: () => <WalletWithdrawal /> },
                 {
                     icon: 'IcAccountTransfer',
                     label: localize('Transfer'),

packages/appstore/src/components/wallet-withdrawal/__tests__/wallet-withdrawal.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import WalletWithdrawal from '../wallet-withdrawal';
+import { mockStore } from '@deriv/stores';
+import CashierProviders from '@deriv/cashier/src/cashier-providers';
+import { useRequest } from '@deriv/api';
+
+jest.mock('@deriv/api', () => ({
+    ...jest.requireActual('@deriv/api'),
+    useRequest: jest.fn(),
+}));
+
+// @ts-expect-error ignore this until find a way to make arguments as partial
+const mockUseRequest = useRequest as jest.MockedFunction<typeof useRequest<'verify_email'>>;
+
+const mock_store = mockStore({
+    client: {
+        email: 'john@company.com',
+    },
+    modules: { cashier: { transaction_history: { onMount: jest.fn() } } },
+});
+
+describe('WalletWithdrawal', () => {
+    test('should render the component', () => {
+        // @ts-expect-error ignore this until find a way to make arguments as partial
+        mockUseRequest.mockReturnValue({});
+
+        render(<WalletWithdrawal />, {
+            wrapper: ({ children }) => <CashierProviders store={mock_store}>{children}</CashierProviders>,
+        });
+
+        expect(screen.queryByTestId('dt_empty_state_icon')).toBeInTheDocument();
+        expect(screen.queryByTestId('dt_empty_state_title')).toBeInTheDocument();
+        expect(screen.queryByTestId('dt_empty_state_description')).toBeInTheDocument();
+        expect(screen.queryByTestId('dt_empty_state_action')).toHaveTextContent('Send email');
+    });
+});

packages/appstore/src/components/wallet-withdrawal/index.ts

@@ -0,0 +1,3 @@
+import WalletWithdrawal from './wallet-withdrawal';
+
+export default WalletWithdrawal;

packages/appstore/src/components/wallet-withdrawal/wallet-withdrawal.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import WithdrawalVerificationEmail from '@deriv/cashier/src/pages/withdrawal/withdrawal-verification-email';
+
+const WalletWithdrawal = () => {
+    return <WithdrawalVerificationEmail />;
+};
+
+export default WalletWithdrawal;

packages/cashier/src/components/email-verification-empty-state/email-verification-empty-state.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useVerifyEmail } from '@deriv/hooks';
 import { localize } from '@deriv/translations';
-import EmptyState from 'Components/empty-state';
+import EmptyState from '../empty-state';
 import EmailVerificationResendEmptyState from './email-verification-resend-empty-state';
 import './email-verification-empty-state.scss';
 
@@ -21,7 +21,7 @@ const EmailVerificationEmptyState = ({ type }: TEmailVerificationEmptyStateProps
     return (
         <div className='email-verification-empty-state'>
             <EmptyState
-                icon='IcEmailSent'
+                icon='IcWithdrawRequestVerificationSent'
                 title={localize("We've sent you an email.")}
                 description={localize('Please check your email for the verification link to complete the process.')}
                 action={verify.has_been_sent ? undefined : action}

packages/cashier/src/components/email-verification-empty-state/email-verification-resend-empty-state.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { localize } from '@deriv/translations';
-import EmptyState from 'Components/empty-state';
+import EmptyState from '../empty-state';
 
 type TEmailVerificationResendEmptyStateProps = {
     is_counter_running: boolean;

packages/cashier/src/pages/withdrawal/withdrawal-verification-email/__tests__/withdrawal-verification-email.test.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import WithdrawalVerificationEmail from '../withdrawal-verification-email';
+import { mockStore } from '@deriv/stores';
+import CashierProviders from '../../../../cashier-providers';
+import { useRequest } from '@deriv/api';
+
+jest.mock('@deriv/api', () => ({
+    ...jest.requireActual('@deriv/api'),
+    useRequest: jest.fn(),
+}));
+
+// @ts-expect-error ignore this until find a way to make arguments as partial
+const mockUseRequest = useRequest as jest.MockedFunction<typeof useRequest<'verify_email'>>;
+
+const mock_store = mockStore({
+    client: {
+        email: 'john@company.com',
+    },
+    modules: { cashier: { transaction_history: { onMount: jest.fn() } } },
+});
+
+describe('WithdrawalVerificationEmail', () => {
+    test('should render the component', () => {
+        // @ts-expect-error ignore this until find a way to make arguments as partial
+        mockUseRequest.mockReturnValue({});
+
+        render(<WithdrawalVerificationEmail />, {
+            wrapper: ({ children }) => <CashierProviders store={mock_store}>{children}</CashierProviders>,
+        });
+
+        expect(screen.queryByTestId('dt_empty_state_icon')).toBeInTheDocument();
+        expect(screen.queryByTestId('dt_empty_state_title')).toBeInTheDocument();
+        expect(screen.queryByTestId('dt_empty_state_description')).toBeInTheDocument();
+        expect(screen.queryByTestId('dt_empty_state_action')).toHaveTextContent('Send email');
+    });
+
+    test('should show the error component when `error` is provided', () => {
+        // @ts-expect-error ignore this until find a way to make arguments as partial
+        mockUseRequest.mockReturnValue({ error: { code: 'CODE', message: 'foo' } });
+
+        render(<WithdrawalVerificationEmail />, {
+            wrapper: ({ children }) => <CashierProviders store={mock_store}>{children}</CashierProviders>,
+        });
+
+        expect(screen.getByText('foo')).toBeInTheDocument();
+    });
+
+    test('should show the proper message when email has been sent.', () => {
+        // @ts-expect-error ignore this until find a way to make arguments as partial
+        mockUseRequest.mockReturnValue({ mutate: jest.fn() });
+
+        render(<WithdrawalVerificationEmail />, {
+            wrapper: ({ children }) => <CashierProviders store={mock_store}>{children}</CashierProviders>,
+        });
+
+        const send_button = screen.getByText('Send email');
+        fireEvent.click(send_button);
+
+        expect(screen.getByText("We've sent you an email.")).toBeInTheDocument();
+    });
+});

packages/cashier/src/pages/withdrawal/withdrawal-verification-email/withdrawal-verification-email.tsx

@@ -27,7 +27,7 @@ const WithdrawalVerificationEmail = observer(() => {
     return (
         <>
             <EmptyState
-                icon='IcCashierAuthenticate'
+                icon='IcWithdrawRequestVerification'
                 title={localize('Please help us verify your withdrawal request.')}
                 description={
                     <>

packages/components/src/components/icon/icons.js

@@ -603,6 +603,8 @@ import './common/ic-whats-app.svg';
 import './common/ic-windows-logo.svg';
 import './common/ic-windows.svg';
 import './common/ic-wip.svg';
+import './common/ic-withdraw-request-verification-sent.svg';
+import './common/ic-withdraw-request-verification.svg';
 import './common/ic-zingpay.svg';
 import './common/ic-zoom-in.svg';
 import './common/ic-zoom-out.svg';

packages/components/stories/icon/icons.js

@@ -612,6 +612,8 @@ export const icons =
         'IcWindowsLogo',
         'IcWindows',
         'IcWip',
+        'IcWithdrawRequestVerificationSent',
+        'IcWithdrawRequestVerification',
         'IcZingpay',
         'IcZoomIn',
         'IcZoomOut',

packages/stores/src/mockStore.ts

@@ -395,7 +395,6 @@ const mock = (): TStores & { is_mock: boolean } => {
             is_tour_open: false,
             selected_platform_type: '',
             available_platforms: [],
-            CFDs_restricted_countries: false,
             is_demo_low_risk: false,
             selected_region: 'All',
             getExistingAccounts: jest.fn(),