hamid/WALL-250/withdraw-hooks-refactor (#8776)

* feat: add useaccountplatformdetails hook

* feat: add useneedpoi hook

* fix: fix failed test

---------

Co-authored-by: Bahar <bahar@regentmarkets.com>

packages/cashier/src/pages/withdrawal/crypto-withdraw-form/__tests__/crypto-withdraw-form.spec.tsx

@@ -1,11 +1,20 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { useCurrentAccountDetails } from '@deriv/hooks';
 import CryptoWithdrawForm from '../crypto-withdraw-form';
 import CashierProviders from '../../../../cashier-providers';
 import { mockStore } from '@deriv/stores';
 
+jest.mock('@deriv/hooks', () => ({
+    ...jest.requireActual('@deriv/hooks'),
+    useCurrentAccountDetails: jest.fn(() => {
+        'icon';
+    }),
+}));
+
 describe('<CryptoWithdrawForm />', () => {
+    (useCurrentAccountDetails as jest.Mock).mockReturnValue({ icon: 'icon' });
     let mockRootStore: ReturnType<typeof mockStore>;
     beforeEach(() => {
         mockRootStore = mockStore({
@@ -27,7 +36,6 @@ describe('<CryptoWithdrawForm />', () => {
                         onMount: jest.fn(),
                     },
                     withdraw: {
-                        account_platform_icon: 'icon',
                         blockchain_address: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt',
                         onMountCryptoWithdraw: jest.fn(),
                         requestWithdraw: jest.fn(),

packages/cashier/src/pages/withdrawal/crypto-withdraw-form/crypto-withdraw-form.tsx

@@ -5,6 +5,7 @@ import { Button, Icon, Input, Loading, MobileWrapper, Text } from '@deriv/compon
 import { CryptoConfig, getCurrencyName, isCryptocurrency, isMobile } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { useStore, observer } from '@deriv/stores';
+import { useCurrentAccountDetails } from '@deriv/hooks';
 import CryptoFiatConverter from '../../../components/crypto-fiat-converter';
 import PercentageSelector from '../../../components/percentage-selector';
 import RecentTransaction from '../../../components/recent-transaction';
@@ -58,7 +59,6 @@ const CryptoWithdrawForm = observer(() => {
     const { crypto_fiat_converter, general_store, transaction_history, withdraw } = useCashierStore();
     const crypto_currency = currency;
     const {
-        account_platform_icon,
         blockchain_address,
         onMountCryptoWithdraw: onMountWithdraw,
         requestWithdraw,
@@ -77,6 +77,7 @@ const CryptoWithdrawForm = observer(() => {
     } = crypto_fiat_converter;
     const { is_loading, percentage, percentageSelectorSelectionStatus, should_percentage_reset } = general_store;
     const { crypto_transactions, onMount: recentTransactionOnMount } = transaction_history;
+    const account_details = useCurrentAccountDetails();
 
     React.useEffect(() => {
         recentTransactionOnMount();
@@ -108,7 +109,7 @@ const CryptoWithdrawForm = observer(() => {
         <div className='cashier__wrapper' data-testid='dt_crypto_withdraw_form'>
             {!isMobile() && <Header currency={currency} />}
             <div className={classNames({ 'crypto-withdraw-form__icon': isMobile() })}>
-                <Icon icon={`IcCurrency-${account_platform_icon?.toLowerCase()}`} size={isMobile() ? 64 : 128} />
+                <Icon icon={`IcCurrency-${account_details?.icon?.toLowerCase()}`} size={isMobile() ? 64 : 128} />
             </div>
             {isMobile() && <Header currency={currency} />}
             <Formik

packages/cashier/src/stores/__tests__/withdraw-store.spec.ts

@@ -328,8 +328,4 @@ describe('WithdrawStore', () => {
         withdraw_store.validateWithdrawToAmount();
         expect(setConverterToError).toHaveBeenCalledWith(error_message);
     });
-
-    it('should get account_platform_icon', () => {
-        expect(withdraw_store.account_platform_icon).toBe('icon');
-    });
 });

packages/cashier/src/stores/withdraw-store.ts

@@ -34,7 +34,6 @@ export default class WithdrawStore {
             setWithdrawPercentageSelectorResult: action.bound,
             validateWithdrawFromAmount: action.bound,
             validateWithdrawToAmount: action.bound,
-            account_platform_icon: computed,
         });
 
         this.root_store = root_store;
@@ -385,11 +384,4 @@ export default class WithdrawStore {
 
         setConverterToError(error_message);
     }
-
-    get account_platform_icon() {
-        const { account_list, loginid } = this.root_store.client;
-        const platform_icon = account_list.find(acc => loginid === acc.loginid)?.icon;
-
-        return platform_icon;
-    }
 }

packages/hooks/src/__tests__/useCurrentAccountDetails.spec.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import { renderHook } from '@testing-library/react-hooks';
+import useCurrentAccountDetails from '../useCurrentAccountDetails';
+
+describe('useCurrentAccountDetails', () => {
+    test('should return the account info of the current loginid', async () => {
+        const mockRootStore = mockStore({
+            client: {
+                account_list: [
+                    {
+                        account: {
+                            balance: 10000,
+                            currency: 'USD',
+                            disabled: false,
+                            is_crypto: false,
+                        },
+                        icon: 'icon',
+                        is_dark_mode_on: false,
+                        loginid: 'loginid',
+                        title: 'title',
+                    },
+                ],
+                loginid: 'loginid',
+            },
+        });
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mockRootStore}>{children}</StoreProvider>
+        );
+        const { result } = renderHook(() => useCurrentAccountDetails(), { wrapper });
+
+        expect(result.current).toStrictEqual(mockRootStore.client.account_list[0]);
+    });
+});

packages/hooks/src/__tests__/useNeedPOI.spec.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import { renderHook } from '@testing-library/react-hooks';
+import useNeedPOI from '../useNeedPOI';
+
+describe('useNeedPOI', () => {
+    test('should be true if authentication?.needs_verification includes identity', async () => {
+        const mockRootStore = mockStore({
+            client: {
+                account_status: {
+                    authentication: {
+                        needs_verification: ['identity'],
+                    },
+                },
+            },
+        });
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mockRootStore}>{children}</StoreProvider>
+        );
+        const { result } = renderHook(() => useNeedPOI(), { wrapper });
+
+        expect(result.current).toBe(true);
+    });
+
+    test("should be false if authentication?.needs_verification doesn't include identity", async () => {
+        const mockRootStore = mockStore({
+            client: {
+                account_status: {
+                    authentication: {
+                        needs_verification: [],
+                    },
+                },
+            },
+        });
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mockRootStore}>{children}</StoreProvider>
+        );
+        const { result } = renderHook(() => useNeedPOI(), { wrapper });
+
+        expect(result.current).toBe(false);
+    });
+});

packages/hooks/src/index.ts

@@ -1,10 +1,11 @@
 export { default as useAccountTransferVisible } from './useAccountTransferVisible';
+export { default as useCashierLocked } from './useCashierLocked';
 export { default as useCFDAccounts } from './useCFDAccounts';
 export { default as useCFDAllAccounts } from './useCFDAllAccounts';
 export { default as useCFDDemoAccounts } from './useCFDDemoAccounts';
 export { default as useCFDRealAccounts } from './useCFDRealAccounts';
-export { default as useCashierLocked } from './useCashierLocked';
 export { default as useCountdown } from './useCountdown';
+export { default as useCurrentAccountDetails } from './useCurrentAccountDetails';
 export { default as useCurrencyConfig } from './useCurrencyConfig';
 export { default as useCurrentCurrencyConfig } from './useCurrentCurrencyConfig';
 export { default as useDepositCryptoAddress } from './useDepositCryptoAddress';
@@ -29,6 +30,7 @@ export { default as useIsRealAccountNeededForCashier } from './useIsRealAccountN
 export { default as useIsSystemMaintenance } from './useIsSystemMaintenance';
 export { default as useNeedAuthentication } from './useNeedAuthentication';
 export { default as useNeedFinancialAssessment } from './useNeedFinancialAssessment';
+export { default as useNeedPOI } from './useNeedPOI';
 export { default as useNeedTNC } from './useNeedTNC';
 export { default as useOnrampVisible } from './useOnrampVisible';
 export { default as useP2PNotificationCount } from './useP2PNotificationCount';

packages/hooks/src/useCurrentAccountDetails.ts

@@ -0,0 +1,10 @@
+import { useStore } from '@deriv/stores';
+
+const useCurrentAccountDetails = () => {
+    const { client } = useStore();
+    const { account_list, loginid } = client;
+
+    return account_list.find(account => loginid === account.loginid);
+};
+
+export default useCurrentAccountDetails;

packages/hooks/src/useNeedPOI.ts

@@ -0,0 +1,10 @@
+import { useStore } from '@deriv/stores';
+
+const useNeedPOI = () => {
+    const { client } = useStore();
+    const authentication = client.account_status?.authentication;
+
+    return authentication?.needs_verification.includes('identity');
+};
+
+export default useNeedPOI;