master update (#16253)

* fix: removed clean urls from vercel dr json (#16249)

* Revert "[WALL] george / WALL-4522 / Add ce_cashier_deposit_onboarding_form an…" (#16246)

This reverts commit a10f85c.

* [DTRA] Maryia/DTRA-1546/fix: [V2] style & animation for Digits Current spot price + active_symbols request (#16225)

* fix: styles & animation for current spot for digit trade types

* fix: active_symbols call for rise/fall and higher/lower

* fix: useActiveSymbols usage

* fix: active_symbols call with relevant barrier_category + error handling same like in prod

---------

Co-authored-by: nada-deriv <122768621+nada-deriv@users.noreply.github.com>
Co-authored-by: Maryia <103177211+maryia-deriv@users.noreply.github.com>

packages/cashier/package.json

@@ -37,7 +37,6 @@
         "url": "https://github.com/binary-com/deriv-app/issues"
     },
     "dependencies": {
-        "@deriv-com/analytics": "1.10.0",
         "@deriv/api": "^1.0.0",
         "@deriv/api-types": "1.0.172",
         "@deriv/components": "^1.0.0",

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

@@ -11,38 +11,6 @@ import CashierProviders from '../../../cashier-providers';
 jest.mock('@deriv/hooks', () => {
     return {
         ...jest.requireActual('@deriv/hooks'),
-        usePaymentAgentList: jest.fn(() => ({
-            data: [
-                {
-                    currencies: 'USD',
-                    email: 'pa-test@email.com',
-                    further_information: 'Further information',
-                    max_withdrawal: '2000',
-                    min_withdrawal: '10',
-                    name: 'PA',
-                    paymentagent_loginid: 'CR9999999',
-                    phone_numbers: [
-                        {
-                            phone_number: '+987654321',
-                        },
-                    ],
-                    summary: '',
-                    supported_payment_methods: [
-                        {
-                            payment_method: 'Visa',
-                        },
-                    ],
-                    urls: [
-                        {
-                            url: 'https://test.test',
-                        },
-                    ],
-                    withdrawal_commission: '0',
-                },
-            ],
-            isLoading: false,
-            isSuccess: true,
-        })),
         usePaymentAgentTransferVisible: jest.fn(() => ({
             data: true,
             isLoading: false,
@@ -135,6 +103,9 @@ describe('<Cashier />', () => {
                     transaction_history: {
                         is_transactions_crypto_visible: false,
                     },
+                    payment_agent: {
+                        is_payment_agent_visible: false,
+                    },
                 },
             },
         });
@@ -182,6 +153,9 @@ describe('<Cashier />', () => {
                     transaction_history: {
                         is_transactions_crypto_visible: true,
                     },
+                    payment_agent: {
+                        is_payment_agent_visible: true,
+                    },
                 },
             },
         });
@@ -232,6 +206,9 @@ describe('<Cashier />', () => {
     //                 transaction_history: {
     //                     is_transactions_crypto_visible: false,
     //                 },
+    //                 payment_agent: {
+    //                     is_payment_agent_visible: true,
+    //                 },
     //             },
     //         },
     //     });
@@ -282,6 +259,9 @@ describe('<Cashier />', () => {
                     transaction_history: {
                         is_transactions_crypto_visible: true,
                     },
+                    payment_agent: {
+                        is_payment_agent_visible: true,
+                    },
                 },
             },
         });
@@ -331,6 +311,9 @@ describe('<Cashier />', () => {
                     transaction_history: {
                         is_transactions_crypto_visible: true,
                     },
+                    payment_agent: {
+                        is_payment_agent_visible: true,
+                    },
                 },
             },
         });
@@ -381,6 +364,9 @@ describe('<Cashier />', () => {
                     transaction_history: {
                         is_transactions_crypto_visible: true,
                     },
+                    payment_agent: {
+                        is_payment_agent_visible: true,
+                    },
                 },
             },
         });

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

@@ -16,12 +16,11 @@ import {
     useOnrampVisible,
     useAccountTransferVisible,
     useIsP2PEnabled,
-    usePaymentAgentList,
     usePaymentAgentTransferVisible,
     useP2PNotificationCount,
     useP2PSettings,
 } from '@deriv/hooks';
-import { getSelectedRoute, getStaticUrl, routes, setPerformanceValue, WS, matchRoute } from '@deriv/shared';
+import { getSelectedRoute, getStaticUrl, routes, setPerformanceValue, WS } from '@deriv/shared';
 import ErrorDialog from '../../components/error-dialog';
 import { TRoute } from '../../types';
 import { localize } from '@deriv/translations';
@@ -53,7 +52,7 @@ type TCashierOptions = {
 
 const Cashier = observer(({ history, location, routes: routes_config }: TCashierProps) => {
     const { common, ui, client } = useStore();
-    const { withdraw, general_store } = useCashierStore();
+    const { withdraw, general_store, payment_agent } = useCashierStore();
     const { error } = withdraw;
     const {
         is_cashier_onboarding,
@@ -66,18 +65,13 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
     } = general_store;
     const {
         data: is_payment_agent_transfer_visible,
-        isLoading: is_payment_agent_transfer_checking,
+        isLoading: is_payment_agent_checking,
         isSuccess: is_payment_agent_transfer_visible_is_success,
     } = usePaymentAgentTransferVisible();
+    const { is_payment_agent_visible } = payment_agent;
     const { is_from_derivgo } = common;
     const { is_cashier_visible: is_visible, is_mobile, toggleCashier, toggleReadyToDepositModal } = ui;
     const { currency, is_account_setting_loaded, is_logged_in, is_logging_in, is_svg, is_virtual } = client;
-    const {
-        data: paymentAgentList,
-        isLoading: is_payment_agent_list_loading,
-        isSuccess: is_payment_agent_list_success,
-    } = usePaymentAgentList(currency);
-    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();
@@ -246,26 +240,15 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
         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 =
+    if (
         ((!is_logged_in || is_mobile) && is_logging_in) ||
         !is_account_setting_loaded ||
-        is_payment_agent_transfer_checking ||
-        is_p2p_loading ||
-        is_payment_agent_loading;
-
-    if (is_cashier_loading) {
+        is_payment_agent_checking ||
+        (is_p2p_enabled_loading && !is_p2p_enabled_success)
+    ) {
         return <Loading is_fullscreen />;
     }
 
-    // Calculation of `initial_tab_index` must be performed after cashier loading
-    // Because at this stage `getMenuOptions` list has all available routes
-    const initial_tab_index = Math.max(
-        getMenuOptions.findIndex(item => matchRoute(item, location.pathname)),
-        0
-    );
-
     // measure performance metrics (load cashier time)
     setPerformanceValue('load_cashier_time');
 
@@ -277,7 +260,6 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
                     <DesktopWrapper>
                         <VerticalTab
                             current_path={location.pathname}
-                            initial_vertical_tab_index={initial_tab_index}
                             is_floating
                             setVerticalTabIndex={setTabIndex}
                             vertical_tab_index={is_default_route ? 0 : tab_index}

packages/cashier/src/modules/cashier-onboarding/cashier-onboarding.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect } from 'react';
-import { Analytics } from '@deriv-com/analytics';
 import { useHasSetCurrency } from '@deriv/hooks';
 import { observer, useStore } from '@deriv/stores';
 import { useHistory } from 'react-router';
@@ -17,23 +16,12 @@ import {
 
 const CashierOnboarding: React.FC = observer(() => {
     const history = useHistory();
-    const { client, ui } = useStore();
-    const { loginid } = client;
+    const { ui } = useStore();
     const { general_store } = useCashierStore();
     const { setIsCashierOnboarding } = general_store;
     const { toggleSetCurrencyModal } = ui;
     const has_set_currency = useHasSetCurrency();
 
-    useEffect(() => {
-        if (loginid) {
-            Analytics.trackEvent('ce_cashier_deposit_onboarding_form', {
-                action: 'open',
-                form_name: 'ce_cashier_deposit_onboarding_form',
-                login_id: loginid,
-            });
-        }
-    }, [loginid]);
-
     useEffect(() => {
         setIsCashierOnboarding(true);
 

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

@@ -10,7 +10,6 @@ describe('CashierOnboardingCard', () => {
         const props: React.ComponentProps<typeof CashierOnboardingCard> = {
             title: 'foo',
             description: 'bar',
-            depositCategory: 'crypto',
             onClick: jest.fn(),
         };
 

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

@@ -1,33 +1,19 @@
 import React from 'react';
-import { Analytics } from '@deriv-com/analytics';
 import { Icon, Text } from '@deriv/components';
 import { observer, useStore } from '@deriv/stores';
 import './cashier-onboarding-card.scss';
 
 type TProps = {
     title: string;
     description: string;
-    depositCategory: 'crypto' | 'fiat' | 'fiat_onramp' | 'payment_agent' | 'p2p';
     onClick?: VoidFunction;
 };
 
 const CashierOnboardingCard: React.FC<React.PropsWithChildren<TProps>> = observer(
-    ({ title, description, depositCategory, onClick, children }) => {
-        const { client, ui } = useStore();
-        const { currency, loginid } = client;
+    ({ title, description, onClick, children }) => {
+        const { ui } = useStore();
         const { is_dark_mode_on, is_mobile } = ui;
 
-        const onClickHandler = () => {
-            onClick?.();
-            Analytics.trackEvent('ce_cashier_deposit_onboarding_form', {
-                action: 'click_deposit_card',
-                form_name: 'ce_cashier_deposit_onboarding_form',
-                deposit_category: depositCategory,
-                currency,
-                login_id: loginid,
-            });
-        };
-
         return (
             <div>
                 <Text size={is_mobile ? 's' : 'sm'} weight='bold' color='prominent'>
@@ -36,7 +22,7 @@ const CashierOnboardingCard: React.FC<React.PropsWithChildren<TProps>> = observe
                 <div
                     className='cashier-onboarding-card__container'
                     data-testid='dt_cashier_onboarding_card'
-                    onClick={onClickHandler}
+                    onClick={onClick}
                 >
                     <div className='cashier-onboarding-card__content'>
                         <Text size={is_mobile ? 'xxs' : 'xs'} className='cashier-onboarding-card__description'>

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

@@ -36,7 +36,6 @@ const CashierOnboardingCryptoCard: React.FC = observer(() => {
         <CashierOnboardingCard
             title={localize('Deposit cryptocurrencies')}
             description={localize('We accept the following cryptocurrencies:')}
-            depositCategory='crypto'
             onClick={onClick}
         >
             <CashierOnboardingIconMarquee icons={icons.map(icon => `${icon}${is_dark_mode_on ? 'Dark' : 'Light'}`)} />

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

@@ -42,25 +42,20 @@ const CashierOnboardingFiatCard: React.FC = observer(() => {
     };
 
     return (
-        <React.Fragment>
-            <CashierOnboardingCard
-                title={localize('Deposit via bank wire, credit card, and e-wallet')}
-                description={localize('Deposit via the following payment methods:')}
-                depositCategory='fiat'
-                onClick={is_dialog_visible ? undefined : onClick}
-            >
-                <CashierOnboardingIconMarquee
-                    icons={icons.map(icon => `${icon}${is_dark_mode_on ? 'Dark' : 'Light'}`)}
-                />
-            </CashierOnboardingCard>
+        <CashierOnboardingCard
+            title={localize('Deposit via bank wire, credit card, and e-wallet')}
+            description={localize('Deposit via the following payment methods:')}
+            onClick={is_dialog_visible ? undefined : onClick}
+        >
+            <CashierOnboardingIconMarquee icons={icons.map(icon => `${icon}${is_dark_mode_on ? 'Dark' : 'Light'}`)} />
             {can_switch_to_fiat_account && (
                 <SwitchToFiatAccountDialog
                     is_visible={is_dialog_visible}
                     onCancel={() => setIsDialogVisible(false)}
                     onSwitchDone={onSwitchDone}
                 />
             )}
-        </React.Fragment>
+        </CashierOnboardingCard>
     );
 });
 

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

@@ -34,7 +34,6 @@ const CashierOnboardingOnrampCard: React.FC = observer(() => {
                     : localize('Buy cryptocurrencies via fiat onramp')
             }
             description={localize('Choose any of these exchanges to buy cryptocurrencies:')}
-            depositCategory='fiat_onramp'
             onClick={onClick}
         >
             <CashierOnboardingIconMarquee icons={icons.map(icon => `${icon}${is_dark_mode_on ? 'Dark' : 'Light'}`)} />

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

@@ -46,23 +46,21 @@ const CashierOnboardingP2PCard: React.FC = observer(() => {
     if (!should_show_p2p_card) return null;
 
     return (
-        <React.Fragment>
-            <CashierOnboardingCard
-                title={localize('Deposit with Deriv P2P')}
-                description={localize(
-                    'Deposit with your local currency via peer-to-peer exchange with fellow traders in your country.'
-                )}
-                depositCategory='p2p'
-                onClick={is_dialog_visible ? undefined : onClick}
-            />
+        <CashierOnboardingCard
+            title={localize('Deposit with Deriv P2P')}
+            description={localize(
+                'Deposit with your local currency via peer-to-peer exchange with fellow traders in your country.'
+            )}
+            onClick={is_dialog_visible ? undefined : onClick}
+        >
             {can_switch_to_fiat_account && (
                 <SwitchToFiatAccountDialog
                     is_visible={is_dialog_visible}
                     onCancel={() => setIsDialogVisible(false)}
                     onSwitchDone={onSwitchDone}
                 />
             )}
-        </React.Fragment>
+        </CashierOnboardingCard>
     );
 });
 

packages/cashier/src/modules/cashier-onboarding/components/cashier-onboarding-payment-agent-card/cashier-onboarding-payment-agent-card.tsx

@@ -28,7 +28,6 @@ const CashierOnboardingPaymentAgentCard: React.FC = observer(() => {
             description={localize(
                 'Deposit in your local currency via an authorised, independent payment agent in your country.'
             )}
-            depositCategory='payment_agent'
             onClick={onClick}
         />
     );