[P2PS] / Ameerul / P2PS-4586 Remove p2p package from deriv-app

package.json

@@ -79,10 +79,10 @@
         "bootstrap:dev": "npm install --strict-peer-deps --verbose",
         "build:publish": "npm run build:publish --workspace=@deriv/* --",
         "build:local": "f () { nx run-many --target=build --projects=@deriv/bot-web-ui,@deriv/trader --parallel=2 ;}; f",
-        "build:travis": "nx run-many --projects=@deriv/shared,@deriv/components,@deriv/translations,@deriv/cashier,@deriv/account,@deriv/p2p,@deriv/cfd,@deriv/reports --target=build:travis",
+        "build:travis": "nx run-many --projects=@deriv/shared,@deriv/components,@deriv/translations,@deriv/cashier,@deriv/account,@deriv/cfd,@deriv/reports --target=build:travis",
         "build:prod": "export NODE_ENV=staging && npm run build:all && export NODE_ENV=",
         "build:storybook": "cd packages/components && sb build --output-dir .out",
-        "build:gh-pages": "f () { nx run-many --target=build --projects=@deriv/components,@deriv/p2p && nx run-many --target=build --projects=@deriv/cashier,@deriv/account,@deriv/cfd,@deriv/reports && npm run build:local $1 ;}; f",
+        "build:gh-pages": "f () { nx run-many --target=build --projects=@deriv/components && nx run-many --target=build --projects=@deriv/cashier,@deriv/account,@deriv/cfd,@deriv/reports && npm run build:local $1 ;}; f",
         "check-imports": "node ./scripts/check-imports.js",
         "clean": "echo \"Remove $(git rev-parse --show-toplevel)/node_modules\" && lerna clean && rm -rf \"$(git rev-parse --show-toplevel)/node_modules\"",
         "deploy": "f () { export NODE_ENV=staging && npm run build:all && npm exec --workspace=@deriv/core -- npm run deploy $@ && export NODE_ENV= ;}; f",

packages/cashier/build/webpack.config.js

@@ -47,13 +47,11 @@ module.exports = function (env) {
                 'react-router-dom': 'react-router-dom',
                 'react-router': 'react-router',
                 mobx: 'mobx',
-                '@deriv/p2p': '@deriv/p2p',
                 '@deriv/shared': '@deriv/shared',
                 '@deriv/components': '@deriv/components',
                 '@deriv/translations': '@deriv/translations',
                 '@deriv-com/analytics': '@deriv-com/analytics',
             },
-            /^@deriv\/p2p\/.+$/,
             /^@deriv\/shared\/.+$/,
             /^@deriv\/components\/.+$/,
             /^@deriv\/translations\/.+$/,

packages/cashier/package.json

@@ -44,7 +44,6 @@
         "@deriv/components": "^1.0.0",
         "@deriv/deriv-api": "^1.0.15",
         "@deriv/hooks": "^1.0.0",
-        "@deriv/p2p": "^0.7.3",
         "@deriv/shared": "^1.0.0",
         "@deriv/stores": "^1.0.0",
         "@deriv/translations": "^1.0.0",

packages/cashier/src/app.tsx

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

packages/cashier/src/constants/routes-config.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import P2P from '@deriv/p2p';
-import { routes, moduleLoader } from '@deriv/shared';
+
+import { moduleLoader, routes } from '@deriv/shared';
 import { localize } from '@deriv/translations';
+
+import { CashierLockedChecker } from '../components/cashier-locked-checker';
 import { Cashier } from '../containers';
 import { AccountTransfer, Deposit, OnRamp, PaymentAgent, PaymentAgentTransfer, Withdrawal } from '../pages';
-import { TRouteConfig, TRoute } from '../types';
-import { CashierLockedChecker } from '../components/cashier-locked-checker';
+import { TRoute, TRouteConfig } from '../types';
 
 // Error Routes
 const Page404 = React.lazy(() => moduleLoader(() => import(/* webpackChunkName: "404" */ '../components/page-404')));
@@ -62,17 +63,13 @@ const initRoutesConfig = (): TRouteConfig[] => [
             },
             {
                 path: routes.cashier_p2p,
-                component: P2P,
+                component: () => {
+                    window.location.href = 'https://p2p.deriv.com';
+                    return null;
+                },
                 getTitle: () => localize('Deriv P2P'),
                 icon_component: 'IcDp2p',
             },
-            {
-                path: routes.p2p_verification,
-                component: P2P,
-                getTitle: () => localize('P2P verification'),
-                icon_component: 'IcDp2p',
-                is_invisible: true,
-            },
             {
                 id: 'gtm-onramp-tab',
                 path: routes.cashier_onramp,

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

@@ -4,7 +4,7 @@ import { BrowserHistory, createBrowserHistory } from 'history';
 import { Router } from 'react-router';
 import getRoutesConfig from 'Constants/routes-config';
 import Cashier from '../cashier';
-import { P2PSettingsProvider, mockStore } from '@deriv/stores';
+import { mockStore } from '@deriv/stores';
 import CashierProviders from '../../../cashier-providers';
 import { routes } from '@deriv/shared';
 import { APIProvider } from '@deriv/api';
@@ -14,8 +14,6 @@ jest.mock('@deriv-com/ui', () => ({
     useDevice: jest.fn(() => ({ isDesktop: true })),
 }));
 
-jest.mock('@deriv/p2p', () => jest.fn(() => <div>P2P</div>));
-
 jest.mock('@deriv/hooks', () => {
     return {
         ...jest.requireActual('@deriv/hooks'),
@@ -56,11 +54,6 @@ jest.mock('@deriv/hooks', () => {
             isLoading: false,
             isSuccess: true,
         })),
-        useIsP2PEnabled: jest.fn(() => ({
-            is_p2p_enabled: true,
-            is_p2p_enabled_loading: false,
-            is_p2p_enabled_success: true,
-        })),
     };
 });
 
@@ -151,9 +144,7 @@ describe('<Cashier />', () => {
             ...render(<Router history={history}>{component}</Router>, {
                 wrapper: ({ children }) => (
                     <APIProvider>
-                        <CashierProviders store={mock_root_store}>
-                            <P2PSettingsProvider>{children}</P2PSettingsProvider>
-                        </CashierProviders>
+                        <CashierProviders store={mock_root_store}>{children}</CashierProviders>
                     </APIProvider>
                 ),
             }),

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

@@ -3,14 +3,10 @@ import { RouteComponentProps } from 'react-router';
 import { withRouter } from 'react-router-dom';
 import { Div100vhContainer, FadeWrapper, PageOverlay, VerticalTab, Loading } from '@deriv/components';
 import {
-    useAuthorize,
     useOnrampVisible,
     useAccountTransferVisible,
-    useIsP2PEnabled,
     usePaymentAgentList,
     usePaymentAgentTransferVisible,
-    useP2PNotificationCount,
-    useP2PSettings,
 } from '@deriv/hooks';
 import { getSelectedRoute, routes, setPerformanceValue, WS, matchRoute } from '@deriv/shared';
 import { localize } from '@deriv/translations';
@@ -73,14 +69,6 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
     const is_payment_agent_visible = paymentAgentList && paymentAgentList.length > 0;
     const is_account_transfer_visible = useAccountTransferVisible();
     const is_onramp_visible = useOnrampVisible();
-    const p2p_notification_count = useP2PNotificationCount();
-    const {
-        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(() => {
@@ -90,12 +78,10 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
                 !route.is_invisible &&
                 (route.path !== routes.cashier_pa || is_payment_agent_visible) &&
                 (route.path !== routes.cashier_pa_transfer || is_payment_agent_transfer_visible) &&
-                (route.path !== routes.cashier_p2p || is_p2p_enabled) &&
                 (route.path !== routes.cashier_onramp || is_onramp_visible) &&
                 (route.path !== routes.cashier_acc_transfer || is_account_transfer_visible)
             ) {
                 options.push({
-                    ...(route.path === routes.cashier_p2p && { count: p2p_notification_count }),
                     default: route.default,
                     icon: route.icon_component,
                     label: route.getTitle(),
@@ -110,10 +96,8 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
     }, [
         is_account_transfer_visible,
         is_onramp_visible,
-        is_p2p_enabled,
         is_payment_agent_transfer_visible,
         is_payment_agent_visible,
-        p2p_notification_count,
         account_settings.preferred_language,
         current_language,
         routes_config,
@@ -183,12 +167,6 @@ 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 &&
@@ -205,45 +183,11 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
         }
     }, [history, is_onramp_visible]);
 
-    useEffect(() => {
-        if (is_p2p_enabled_success && !is_p2p_enabled && history.location.pathname.startsWith(routes.cashier_p2p)) {
-            const url_params = new URLSearchParams(history.location.search);
-            const advert_id = url_params.get('advert_id');
-
-            history.push(routes.cashier_deposit);
-
-            if (advert_id) {
-                if (is_virtual) {
-                    toggleReadyToDepositModal();
-                } else {
-                    error.setErrorMessage({
-                        code: 'ShareMyAdsError',
-                        message:
-                            currency !== 'USD' && is_svg
-                                ? localize('Deriv P2P is currently unavailable in this currency.')
-                                : localize('Deriv P2P is currently unavailable in your country.'),
-                    });
-                }
-            }
-        }
-    }, [
-        currency,
-        error,
-        history,
-        is_p2p_enabled,
-        is_p2p_enabled_success,
-        is_svg,
-        is_virtual,
-        toggleReadyToDepositModal,
-    ]);
-
-    const is_p2p_loading = is_p2p_enabled_loading && !is_p2p_enabled_success;
     const is_payment_agent_loading = is_payment_agent_list_loading && !is_payment_agent_list_success;
     const is_cashier_loading =
         ((!is_logged_in || isMobile) && is_logging_in) ||
         !is_account_setting_loaded ||
         is_payment_agent_transfer_checking ||
-        is_p2p_loading ||
         is_payment_agent_loading;
 
     if (is_cashier_loading) {

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

@@ -1,12 +1,7 @@
 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 { useCurrentCurrencyConfig, useHasFiatCurrency } from '@deriv/hooks';
 import CashierProviders from '../../../../../cashier-providers';
 import CashierOnboardingP2PCard from '../cashier-onboarding-p2p-card';
 
@@ -34,10 +29,6 @@ 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', () => {
@@ -57,16 +48,6 @@ 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>
         );
@@ -98,16 +79,6 @@ 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,
@@ -144,16 +115,6 @@ 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>
         );
@@ -166,39 +127,4 @@ describe('CashierOnboardingP2PCard', () => {
 
         expect(mock.modules.cashier.general_store.setDepositTarget).toBeCalledTimes(1);
     });
-
-    test('should render blank element', async () => {
-        const mock = mockStore({
-            client: {
-                currency: 'AUD',
-                account_list: [{ title: 'AUD' }],
-                active_accounts: [{ is_virtual: 0, currency: 'AUD' }],
-            },
-            modules: {
-                cashier: {
-                    general_store: {
-                        setDepositTarget: jest.fn(),
-                    },
-                },
-            },
-        });
-
-        // @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>
-        );
-
-        const { container } = render(<CashierOnboardingP2PCard />, { wrapper });
-
-        expect(container).toBeEmptyDOMElement();
-    });
 });

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

@@ -1,10 +1,5 @@
 import React, { useState } from 'react';
-import {
-    useCurrentCurrencyConfig,
-    useHasFiatCurrency,
-    useHasP2PSupportedCurrencies,
-    useIsP2PEnabled,
-} from '@deriv/hooks';
+import { useCurrentCurrencyConfig, useHasFiatCurrency } from '@deriv/hooks';
 import { observer, useStore } from '@deriv/stores';
 import { localize } from '@deriv/translations';
 import { useHistory } from 'react-router';
@@ -18,13 +13,10 @@ const CashierOnboardingP2PCard: React.FC = observer(() => {
     const { openRealAccountSignup } = ui;
     const { setDepositTarget } = general_store;
     const history = useHistory();
-    const { data: has_p2p_supported_currencies } = useHasP2PSupportedCurrencies();
-    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 [is_dialog_visible, setIsDialogVisible] = useState(false);
-    const should_show_p2p_card = is_p2p_enabled || has_p2p_supported_currencies;
 
     const onClick = () => {
         setDepositTarget('/cashier/p2p');
@@ -43,8 +35,6 @@ const CashierOnboardingP2PCard: React.FC = observer(() => {
         history.push('/cashier/p2p');
     };
 
-    if (!should_show_p2p_card) return null;
-
     return (
         <React.Fragment>
             <CashierOnboardingCard