From 8623b8a7632168f23ea0b38969a63b30a860ab27 Mon Sep 17 00:00:00 2001 From: Hamid Date: Fri, 21 Jul 2023 11:23:08 +0330 Subject: [PATCH] hamid/WALL-250/withdraw-hooks-refactor (#8776) * feat: add useaccountplatformdetails hook * feat: add useneedpoi hook * fix: fix failed test --------- Co-authored-by: Bahar --- .../__tests__/crypto-withdraw-form.spec.tsx | 10 ++++- .../crypto-withdraw-form.tsx | 5 ++- .../stores/__tests__/withdraw-store.spec.ts | 4 -- packages/cashier/src/stores/withdraw-store.ts | 8 ---- .../useCurrentAccountDetails.spec.tsx | 35 +++++++++++++++ .../hooks/src/__tests__/useNeedPOI.spec.tsx | 44 +++++++++++++++++++ packages/hooks/src/index.ts | 4 +- .../hooks/src/useCurrentAccountDetails.ts | 10 +++++ packages/hooks/src/useNeedPOI.ts | 10 +++++ 9 files changed, 114 insertions(+), 16 deletions(-) create mode 100644 packages/hooks/src/__tests__/useCurrentAccountDetails.spec.tsx create mode 100644 packages/hooks/src/__tests__/useNeedPOI.spec.tsx create mode 100644 packages/hooks/src/useCurrentAccountDetails.ts create mode 100644 packages/hooks/src/useNeedPOI.ts diff --git a/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/__tests__/crypto-withdraw-form.spec.tsx b/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/__tests__/crypto-withdraw-form.spec.tsx index 7789c9d325c8..3f0a30d4845f 100644 --- a/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/__tests__/crypto-withdraw-form.spec.tsx +++ b/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('', () => { + (useCurrentAccountDetails as jest.Mock).mockReturnValue({ icon: 'icon' }); let mockRootStore: ReturnType; beforeEach(() => { mockRootStore = mockStore({ @@ -27,7 +36,6 @@ describe('', () => { onMount: jest.fn(), }, withdraw: { - account_platform_icon: 'icon', blockchain_address: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt', onMountCryptoWithdraw: jest.fn(), requestWithdraw: jest.fn(), diff --git a/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/crypto-withdraw-form.tsx b/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/crypto-withdraw-form.tsx index 41c9942bd215..1c362a4c90d0 100644 --- a/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/crypto-withdraw-form.tsx +++ b/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(() => {
{!isMobile() &&
}
- +
{isMobile() &&
} { withdraw_store.validateWithdrawToAmount(); expect(setConverterToError).toHaveBeenCalledWith(error_message); }); - - it('should get account_platform_icon', () => { - expect(withdraw_store.account_platform_icon).toBe('icon'); - }); }); diff --git a/packages/cashier/src/stores/withdraw-store.ts b/packages/cashier/src/stores/withdraw-store.ts index 57115d19b350..93acb20ef962 100644 --- a/packages/cashier/src/stores/withdraw-store.ts +++ b/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; - } } diff --git a/packages/hooks/src/__tests__/useCurrentAccountDetails.spec.tsx b/packages/hooks/src/__tests__/useCurrentAccountDetails.spec.tsx new file mode 100644 index 000000000000..527907ca49c6 --- /dev/null +++ b/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 }) => ( + {children} + ); + const { result } = renderHook(() => useCurrentAccountDetails(), { wrapper }); + + expect(result.current).toStrictEqual(mockRootStore.client.account_list[0]); + }); +}); diff --git a/packages/hooks/src/__tests__/useNeedPOI.spec.tsx b/packages/hooks/src/__tests__/useNeedPOI.spec.tsx new file mode 100644 index 000000000000..8156f3ddf0a8 --- /dev/null +++ b/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 }) => ( + {children} + ); + 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 }) => ( + {children} + ); + const { result } = renderHook(() => useNeedPOI(), { wrapper }); + + expect(result.current).toBe(false); + }); +}); diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts index 438f66bed0b9..4442969638f9 100644 --- a/packages/hooks/src/index.ts +++ b/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'; diff --git a/packages/hooks/src/useCurrentAccountDetails.ts b/packages/hooks/src/useCurrentAccountDetails.ts new file mode 100644 index 000000000000..eaff8de26d2e --- /dev/null +++ b/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; diff --git a/packages/hooks/src/useNeedPOI.ts b/packages/hooks/src/useNeedPOI.ts new file mode 100644 index 000000000000..f55c2239654c --- /dev/null +++ b/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;