[P2PS] / Ameerul / P2PS-2143 Replace website_status/p2p_config API ca…

…ll with p2p_settings (binary-com#14157)

* feat: added p2p settings provider

* chore: replaced p2p_config checks from order and my-ads

* chore: added p2p_settings in hooks and in socket

* chore: fixed failing test cases

* fix: cashier taking too long to load on tab switch

* chore: moved cookie to isP2PEnabled hook

* fix: localhost not showing cookies

* fix: failing build

* chore: moved subscribe to routes, set is_p2p_enabled in store from hook

* fix: added setIsP2PEnabled inside mockStore

* chore: added suggestions

* chore: remove computed is_p2p_enabled

* fix: subtasks

* fix: sonar cloud issues

* chore: empty commit

* chore: empty commit

* chore: empty commit

* fix: remove dropdown stylelint issue

* chore: skip failing test case

* fix: subtasks

* fix: withdrawal crypto not showing, review_period not updating

* fix: hide modal for either Cancel or Ill do this later

* chore: replaced is_authorise with isSuccess, fix deposit issue

* chore: return null if currency_config is undefined

* chore: show empty string if currency_config is undefined

* chore: added ? check for currency_config

* chore: test check if issue is from deposit-crypto

* chore: uncomment uncommented code

packages/cashier/src/app.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
 import AppContent from './app-content';
 import CashierProviders from './cashier-providers';
-import { ExchangeRatesProvider } from '@deriv/stores';
+import { ExchangeRatesProvider, P2PSettingsProvider } from '@deriv/stores';
 
 type TProps = { passthrough: { root_store: React.ComponentProps<typeof CashierProviders>['store'] } };
 
 const App: React.FC<TProps> = ({ passthrough: { root_store } }) => {
     return (
         <CashierProviders store={root_store}>
             <ExchangeRatesProvider>
-                <AppContent />
+                <P2PSettingsProvider>
+                    <AppContent />
+                </P2PSettingsProvider>
             </ExchangeRatesProvider>
         </CashierProviders>
     );

packages/cashier/src/containers/cashier/__tests__/cashier.spec.tsx

@@ -5,7 +5,7 @@ import { Router } from 'react-router';
 import { isMobile } from '@deriv/shared';
 import getRoutesConfig from 'Constants/routes-config';
 import Cashier from '../cashier';
-import { mockStore } from '@deriv/stores';
+import { P2PSettingsProvider, mockStore } from '@deriv/stores';
 import CashierProviders from '../../../cashier-providers';
 
 jest.mock('@deriv/hooks', () => {
@@ -16,7 +16,11 @@ jest.mock('@deriv/hooks', () => {
             isLoading: false,
             isSuccess: true,
         })),
-        useIsP2PEnabled: jest.fn(() => ({ data: true, isLoading: false, isSuccess: true })),
+        useIsP2PEnabled: jest.fn(() => ({
+            is_p2p_enabled: true,
+            is_p2p_enabled_loading: false,
+            is_p2p_enabled_success: true,
+        })),
     };
 });
 
@@ -53,7 +57,11 @@ describe('<Cashier />', () => {
         history = createBrowserHistory();
         return {
             ...render(<Router history={history}>{component}</Router>, {
-                wrapper: ({ children }) => <CashierProviders store={mock_root_store}>{children}</CashierProviders>,
+                wrapper: ({ children }) => (
+                    <CashierProviders store={mock_root_store}>
+                        <P2PSettingsProvider>{children}</P2PSettingsProvider>
+                    </CashierProviders>
+                ),
             }),
         };
     };

packages/cashier/src/containers/cashier/cashier.tsx

@@ -12,11 +12,13 @@ import {
     Loading,
 } from '@deriv/components';
 import {
+    useAuthorize,
     useOnrampVisible,
     useAccountTransferVisible,
     useIsP2PEnabled,
     usePaymentAgentTransferVisible,
     useP2PNotificationCount,
+    useP2PSettings,
 } from '@deriv/hooks';
 import { getSelectedRoute, getStaticUrl, routes, WS } from '@deriv/shared';
 import ErrorDialog from '../../components/error-dialog';
@@ -74,10 +76,12 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
     const is_onramp_visible = useOnrampVisible();
     const p2p_notification_count = useP2PNotificationCount();
     const {
-        data: is_p2p_enabled,
-        isSuccess: is_p2p_enabled_success,
-        isLoading: is_p2p_enabled_loading,
-    } = useIsP2PEnabled();
+        subscribe,
+        p2p_settings,
+        rest: { isSubscribed },
+    } = useP2PSettings();
+    const { is_p2p_enabled, is_p2p_enabled_success, is_p2p_enabled_loading } = useIsP2PEnabled();
+    const { isSuccess } = useAuthorize();
 
     const onClickClose = () => history.push(routes.traders_hub);
     const getMenuOptions = useMemo(() => {
@@ -182,6 +186,12 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
         })();
     }, [is_logged_in, onMount, setAccountSwitchListener]);
 
+    React.useEffect(() => {
+        if (isSuccess && !isSubscribed) {
+            subscribe();
+        }
+    }, [isSuccess, p2p_settings, subscribe, isSubscribed]);
+
     useEffect(() => {
         if (
             is_payment_agent_transfer_visible_is_success &&
@@ -234,7 +244,7 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
         ((!is_logged_in || is_mobile) && is_logging_in) ||
         !is_account_setting_loaded ||
         is_payment_agent_checking ||
-        is_p2p_enabled_loading
+        (is_p2p_enabled_loading && !is_p2p_enabled_success)
     ) {
         return <Loading is_fullscreen />;
     }

packages/cashier/src/modules/cashier-onboarding/components/cashier-onboarding-account-identifier-message/cashier-onboarding-account-identifier-message.tsx

@@ -16,7 +16,7 @@ const CashierOnboardingAccountIdentifierMessage: React.FC = observer(() => {
             message={
                 <Localize
                     i18n_default_text='This is your <0>{{currency}}</0> account {{loginid}}.'
-                    values={{ currency: currency_config.display_code, loginid }}
+                    values={{ currency: currency_config?.display_code, loginid }}
                     components={[<strong key={0} />]}
                 />
             }

packages/cashier/src/modules/cashier-onboarding/components/cashier-onboarding-fiat-card/cashier-onboarding-fiat-card.tsx

@@ -21,15 +21,15 @@ const CashierOnboardingFiatCard: React.FC = observer(() => {
     const { setDepositTarget, setIsDeposit } = general_store;
     const currency_config = useCurrentCurrencyConfig();
     const has_fiat_currency = useHasFiatCurrency();
-    const can_switch_to_fiat_account = currency_config.is_crypto && has_fiat_currency;
+    const can_switch_to_fiat_account = currency_config?.is_crypto && has_fiat_currency;
     const [is_dialog_visible, setIsDialogVisible] = useState(false);
 
     const onClick = () => {
         setDepositTarget('/cashier/deposit');
 
         if (can_switch_to_fiat_account) {
             setIsDialogVisible(true);
-        } else if (currency_config.is_crypto) {
+        } else if (currency_config?.is_crypto) {
             openRealAccountSignup('add_fiat');
         } else {
             setIsDeposit(true);

packages/cashier/src/modules/cashier-onboarding/components/cashier-onboarding-onramp-card/cashier-onboarding-onramp-card.tsx

@@ -18,7 +18,7 @@ const CashierOnboardingOnrampCard: React.FC = observer(() => {
 
     const onClick = () => {
         setDepositTarget('/cashier/on-ramp');
-        if (currency_config.is_crypto || has_crypto_account) {
+        if (currency_config?.is_crypto || has_crypto_account) {
             openRealAccountSignup('choose');
             shouldNavigateAfterChooseCrypto('/cashier/on-ramp');
         } else {
@@ -29,7 +29,7 @@ const CashierOnboardingOnrampCard: React.FC = observer(() => {
     return (
         <CashierOnboardingCard
             title={
-                currency_config.is_crypto
+                currency_config?.is_crypto
                     ? localize('Buy cryptocurrencies')
                     : localize('Buy cryptocurrencies via fiat onramp')
             }

packages/cashier/src/modules/cashier-onboarding/components/cashier-onboarding-p2p-card/__test__/cashier-onboarding-p2p-card.test.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
 import { mockStore } from '@deriv/stores';
 import { fireEvent, render, screen } from '@testing-library/react';
+import {
+    useCurrentCurrencyConfig,
+    useHasFiatCurrency,
+    useHasP2PSupportedCurrencies,
+    useIsP2PEnabled,
+} from '@deriv/hooks';
 import CashierProviders from '../../../../../cashier-providers';
 import CashierOnboardingP2PCard from '../cashier-onboarding-p2p-card';
 
@@ -19,12 +25,20 @@ jest.mock('@deriv/api', () => ({
                     AUD: { type: 'fiat', name: 'Australian Dollar' },
                     BTC: { type: 'crypto', name: 'Bitcoin' },
                 },
-                p2p_config: { supported_currencies: ['usd'] },
             },
         },
     })),
 }));
 
+jest.mock('@deriv/hooks');
+
+const MockUseCurrentCurrencyConfig = useCurrentCurrencyConfig as jest.MockedFunction<typeof useCurrentCurrencyConfig>;
+const MockUseHasFiatCurrency = useHasFiatCurrency as jest.MockedFunction<typeof useHasFiatCurrency>;
+const MockUseHasP2PSupportedCurrencies = useHasP2PSupportedCurrencies as jest.MockedFunction<
+    typeof useHasP2PSupportedCurrencies
+>;
+const MockUseIsP2PEnabled = useIsP2PEnabled as jest.MockedFunction<typeof useIsP2PEnabled>;
+
 describe('CashierOnboardingP2PCard', () => {
     test('should call the onClick callback when clicked', () => {
         const mock = mockStore({
@@ -43,6 +57,16 @@ describe('CashierOnboardingP2PCard', () => {
             },
         });
 
+        // @ts-expect-error need to come up with a way to mock the return type
+        MockUseIsP2PEnabled.mockReturnValue({
+            is_p2p_enabled: true,
+        });
+
+        // @ts-expect-error ne  ed to come up with a way to mock the return type
+        MockUseHasP2PSupportedCurrencies.mockReturnValue({
+            data: true,
+        });
+
         const wrapper = ({ children }: { children: JSX.Element }) => (
             <CashierProviders store={mock}>{children}</CashierProviders>
         );
@@ -74,6 +98,23 @@ describe('CashierOnboardingP2PCard', () => {
             },
         });
 
+        // @ts-expect-error need to come up with a way to mock the return type
+        MockUseIsP2PEnabled.mockReturnValue({
+            is_p2p_enabled: false,
+        });
+
+        // @ts-expect-error need to come up with a way to mock the return type
+        MockUseHasP2PSupportedCurrencies.mockReturnValue({
+            data: true,
+        });
+
+        // @ts-expect-error need to come up with a way to mock the return type
+        MockUseCurrentCurrencyConfig.mockReturnValue({
+            is_crypto: true,
+        });
+
+        MockUseHasFiatCurrency.mockReturnValue(false);
+
         const wrapper = ({ children }: { children: JSX.Element }) => (
             <CashierProviders store={mock}>{children}</CashierProviders>
         );
@@ -103,6 +144,16 @@ describe('CashierOnboardingP2PCard', () => {
             },
         });
 
+        // @ts-expect-error need to come up with a way to mock the return type
+        MockUseIsP2PEnabled.mockReturnValue({
+            is_p2p_enabled: true,
+        });
+
+        // @ts-expect-error need to come up with a way to mock the return type
+        MockUseHasP2PSupportedCurrencies.mockReturnValue({
+            data: true,
+        });
+
         const wrapper = ({ children }: { children: JSX.Element }) => (
             <CashierProviders store={mock}>{children}</CashierProviders>
         );
@@ -132,6 +183,16 @@ describe('CashierOnboardingP2PCard', () => {
             },
         });
 
+        // @ts-expect-error need to come up with a way to mock the return type
+        MockUseIsP2PEnabled.mockReturnValue({
+            is_p2p_enabled: false,
+        });
+
+        // @ts-expect-error need to come up with a way to mock the return type
+        MockUseHasP2PSupportedCurrencies.mockReturnValue({
+            data: false,
+        });
+
         const wrapper = ({ children }: { children: JSX.Element }) => (
             <CashierProviders store={mock}>{children}</CashierProviders>
         );

packages/cashier/src/modules/cashier-onboarding/components/cashier-onboarding-p2p-card/cashier-onboarding-p2p-card.tsx

@@ -19,10 +19,10 @@ const CashierOnboardingP2PCard: React.FC = observer(() => {
     const { setDepositTarget } = general_store;
     const history = useHistory();
     const { data: has_p2p_supported_currencies } = useHasP2PSupportedCurrencies();
-    const { data: is_p2p_enabled } = useIsP2PEnabled();
+    const { is_p2p_enabled } = useIsP2PEnabled();
     const has_fiat_currency = useHasFiatCurrency();
     const currency_config = useCurrentCurrencyConfig();
-    const can_switch_to_fiat_account = currency_config.is_crypto && has_fiat_currency;
+    const can_switch_to_fiat_account = currency_config?.is_crypto && has_fiat_currency;
     const [is_dialog_visible, setIsDialogVisible] = useState(false);
     const should_show_p2p_card = is_p2p_enabled || has_p2p_supported_currencies;
 
@@ -31,7 +31,7 @@ const CashierOnboardingP2PCard: React.FC = observer(() => {
 
         if (can_switch_to_fiat_account) {
             setIsDialogVisible(true);
-        } else if (currency_config.is_crypto) {
+        } else if (currency_config?.is_crypto) {
             openRealAccountSignup('add_fiat');
         } else {
             history.push('/cashier/p2p');

packages/cashier/src/modules/cashier-onboarding/components/cashier-onboarding-side-notes/cashier-onboarding-side-notes.tsx

@@ -10,8 +10,8 @@ const CashierOnboardingSideNotes: React.FC = observer(() => {
 
     return (
         <>
-            {currency_config.is_crypto && <CashierOnboardingSideNoteCrypto />}
-            {currency_config.is_fiat && <CashierOnboardingSideNoteFiat />}
+            {currency_config?.is_crypto && <CashierOnboardingSideNoteCrypto />}
+            {currency_config?.is_fiat && <CashierOnboardingSideNoteFiat />}
             <SideNotePaymentMethodsLearnMore />
         </>
     );

packages/cashier/src/modules/deposit-crypto/components/deposit-crypto-currency-details/deposit-crypto-currency-details.tsx

@@ -12,8 +12,8 @@ const DepositCryptoCurrencyDetails: React.FC = observer(() => {
     return (
         <Text align='center' size={is_mobile ? 'xs' : 's'} weight='bold'>
             {localize('Send only {{currency_name}} ({{currency_code}}) to this address.', {
-                currency_name: currency_config.name,
-                currency_code: currency_config.display_code,
+                currency_name: currency_config?.name || '',
+                currency_code: currency_config?.display_code || '',
             })}
         </Text>
     );

packages/cashier/src/modules/deposit-crypto/components/deposit-crypto-disclaimers/deposit-crypto-disclaimers.tsx

@@ -22,7 +22,7 @@ const DepositCryptoDisclaimers: React.FC = observer(() => {
     const { is_mobile } = ui;
     const currency_config = useCurrentCurrencyConfig();
 
-    const minimum_deposit_disclaimer = currency_config.is_tUSDT ? (
+    const minimum_deposit_disclaimer = currency_config?.is_tUSDT ? (
         <Localize
             i18n_default_text='A minimum deposit value of <0>{{minimum_deposit}}</0> {{currency}} is required. Otherwise, a fee is applied.'
             values={{
@@ -35,8 +35,8 @@ const DepositCryptoDisclaimers: React.FC = observer(() => {
         <Localize
             i18n_default_text='A minimum deposit value of <0>{{minimum_deposit}}</0> {{currency}} is required. Otherwise, the funds will be lost and cannot be recovered.'
             values={{
-                minimum_deposit: formatMoney(currency_config.code, currency_config.minimum_deposit ?? 0, true),
-                currency: currency_config.display_code,
+                minimum_deposit: formatMoney(currency_config?.code, currency_config?.minimum_deposit ?? 0, true),
+                currency: currency_config?.display_code,
             }}
             components={[<strong key={0} />]}
         />
@@ -47,15 +47,15 @@ const DepositCryptoDisclaimers: React.FC = observer(() => {
             <InlineMessage title={localize('To avoid loss of funds:')}>
                 <br />
                 <ul className='deposit-crypto-disclaimers__list'>
-                    {currency_config.minimum_deposit && <li>{minimum_deposit_disclaimer}</li>}
+                    {currency_config?.minimum_deposit && <li>{minimum_deposit_disclaimer}</li>}
                     <li>{localize('Do not send other currencies to this address.')}</li>
                     <li>
                         {localize('Make sure to copy your Deriv account address correctly into your crypto wallet.')}
                     </li>
                     <li>
                         <Localize
                             i18n_default_text='In your cryptocurrency wallet, make sure to select the <0>{{network_name}} network</0> when you transfer funds to Deriv.'
-                            values={{ network_name: crypto_currency_to_network_mapper[currency_config.code] }}
+                            values={{ network_name: crypto_currency_to_network_mapper[currency_config?.code] }}
                             components={[<strong key={0} />]}
                         />
                     </li>

packages/cashier/src/modules/deposit-crypto/components/deposit-crypto-side-notes/deposit-crypto-side-notes.tsx

@@ -11,8 +11,8 @@ const DepositCryptoSideNotes: React.FC = observer(() => {
     return (
         <>
             <TransactionsCryptoTransactionStatusSideNote />
-            {currency_config.is_USDT && <DepositCryptoSideNoteUSDT currency='USDT' />}
-            {currency_config.is_eUSDT && <DepositCryptoSideNoteUSDT currency='eUSDT' />}
+            {currency_config?.is_USDT && <DepositCryptoSideNoteUSDT currency='USDT' />}
+            {currency_config?.is_eUSDT && <DepositCryptoSideNoteUSDT currency='eUSDT' />}
         </>
     );
 });

packages/cashier/src/modules/transactions-crypto/components/transactions-crypto-transaction-status-side-note/transactions-crypto-transaction-status-side-note.tsx

@@ -35,8 +35,8 @@ const TransactionsCryptoTransactionStatusSideNote: React.FC = observer(() => {
                 <div className='transactions-crypto-transaction-status-side-note__content'>
                     <Text size={'xxs'}>
                         {is_deposit
-                            ? localize('Deposit {{currency}}', { currency: currency_config.display_code })
-                            : localize('Withdrawal {{currency}}', { currency: currency_config.display_code })}
+                            ? localize('Deposit {{currency}}', { currency: currency_config?.display_code })
+                            : localize('Withdrawal {{currency}}', { currency: currency_config?.display_code })}
                     </Text>
                     <Text
                         size={'xxxs'}
@@ -45,7 +45,7 @@ const TransactionsCryptoTransactionStatusSideNote: React.FC = observer(() => {
                     >
                         {localize('{{amount}} {{currency}} on {{date}}', {
                             amount,
-                            currency: currency_config.display_code,
+                            currency: currency_config?.display_code,
                             date: submit_date_display,
                         })}
                     </Text>
@@ -92,7 +92,7 @@ const TransactionsCryptoTransactionStatusSideNote: React.FC = observer(() => {
                 />
             </>
         );
-    }, [currency_config.display_code, last_transaction, setIsTransactionsCryptoVisible]);
+    }, [currency_config?.display_code, last_transaction, setIsTransactionsCryptoVisible]);
 
     const LoadingState = useCallback(() => <Loading is_fullscreen={false} />, []);