[DTRA] Bala/Remove the purchase loader when switching trade types (bi…

…nary-com#16288)

* chore: trigger buy without proposal

* revert: chore: trigger buy without proposal

* chore: update the purchase processing

* chore: remove payout and stake content from purchase buttons

* Revert "chore: remove payout and stake content from purchase buttons"

This reverts commit c1f136d.

* chore: remove payout info for high_low and touch contracts

* fix: flickering payout info in the purchase buttons

* fix: test case

* chore: cleanup

* chore: cleanup and fix test cases

* chore: add newly added props to mock store

* fix: purchase test case

packages/core/src/App/Components/Layout/Header/dtrader-v2/account-actions-dtrader-v2.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import 'Sass/app/_common/components/account-switcher-dtrader-v2.scss';
-import { formatMoney, moduleLoader } from '@deriv/shared';
+import { formatMoney } from '@deriv/shared';
 import { Badge } from '@deriv-com/quill-ui';
 import NotificationsIconDTraderV2 from './notifications-icon-dtrader-v2';
+import AccountInfoDTraderV2 from 'App/Components/Layout/Header/dtrader-v2/account-info-dtrader-v2';
 
 type TAccountActionsDTraderV2 = {
     acc_switcher_disabled_message?: string;
@@ -27,17 +28,6 @@ export type TAccountInfoDTraderV2 = Omit<
     is_disabled?: boolean;
     toggleDialog: (value?: boolean | undefined) => void;
 };
-const AccountInfoDTraderV2 = React.lazy(
-    () =>
-        moduleLoader(
-            () =>
-                import(
-                    /* webpackChunkName: "account-info-dtrader-v2", webpackPreload: true */ 'App/Components/Layout/Header/dtrader-v2/account-info-dtrader-v2'
-                )
-        ) as Promise<{
-            default: React.ComponentType<TAccountInfoDTraderV2>;
-        }>
-);
 
 const AccountActionsDTraderV2 = ({
     acc_switcher_disabled_message,

packages/stores/src/mockStore.ts

@@ -722,7 +722,9 @@ const mock = (): TStores & { is_mock: boolean } => {
                 is_multiplier: false,
                 is_purchase_enabled: false,
                 is_trade_enabled: true,
+                is_trade_enabled_v2: true,
                 is_trade_params_expanded: false,
+                is_touch: false,
                 is_turbos: false,
                 is_vanilla: false,
                 is_vanilla_fx: false,
@@ -738,6 +740,7 @@ const mock = (): TStores & { is_mock: boolean } => {
                 onChangeMultiple: jest.fn(),
                 onHoverPurchase: jest.fn(),
                 onPurchase: jest.fn(),
+                onPurchaseV2: jest.fn(),
                 onMount: jest.fn(),
                 onUnmount: jest.fn(),
                 previous_symbol: '',

packages/trader/src/AppV2/Components/PurchaseButton/__tests__/purchase-button-content.spec.tsx

@@ -21,6 +21,7 @@ const mock_props = {
     } as TInfo,
     is_accumulator: false,
     is_multiplier: false,
+    is_touch: false,
     is_turbos: false,
     is_vanilla: false,
     is_vanilla_fx: false,
@@ -73,7 +74,7 @@ describe('PurchaseButtonContent', () => {
         expect(screen.getByText(/USD/i)).toBeInTheDocument();
     });
 
-    it('should render correct specific text basis and amount for Accumulators (when there is no open contract and with it)', () => {
+    it('should not render text basis and amount for Accumulators (when there is no open contract and with it)', () => {
         const accumulators_info = {
             has_error: false,
             has_error_details: false,
@@ -87,9 +88,9 @@ describe('PurchaseButtonContent', () => {
             <PurchaseButtonContent {...mock_props} is_accumulator info={accumulators_info as TInfo} />
         );
 
-        expect(screen.getByText(localized_basis.max_payout)).toBeInTheDocument();
-        expect(screen.getByText(/4,000.00/)).toBeInTheDocument();
-        expect(screen.getByText(/USD/i)).toBeInTheDocument();
+        expect(screen.queryByText(localized_basis.max_payout)).not.toBeInTheDocument();
+        expect(screen.queryByText(/4,000.00/)).not.toBeInTheDocument();
+        expect(screen.queryByText(/USD/i)).not.toBeInTheDocument();
 
         rerender(
             <PurchaseButtonContent
@@ -105,7 +106,7 @@ describe('PurchaseButtonContent', () => {
         expect(screen.getByText(/USD/i)).toBeInTheDocument();
     });
 
-    it('should render correct specific text basis and amount for Turbos', () => {
+    it('should not render text basis and amount for Turbos', () => {
         const turbos_info = {
             has_error: false,
             has_error_details: false,
@@ -116,12 +117,12 @@ describe('PurchaseButtonContent', () => {
         };
         render(<PurchaseButtonContent {...mock_props} is_turbos info={turbos_info as TInfo} />);
 
-        expect(screen.getByText(localized_basis.payout_per_point)).toBeInTheDocument();
-        expect(screen.getByText(/8.250455/)).toBeInTheDocument();
-        expect(screen.getByText(/USD/i)).toBeInTheDocument();
+        expect(screen.queryByText(localized_basis.payout_per_point)).not.toBeInTheDocument();
+        expect(screen.queryByText(/8.250455/)).not.toBeInTheDocument();
+        expect(screen.queryByText(/USD/i)).not.toBeInTheDocument();
     });
 
-    it('should render correct specific text basis and amount for Vanilla (not fx and fx)', () => {
+    it('should not render text basis and amount for Vanilla (not fx and fx)', () => {
         const vanilla_info = {
             has_error: false,
             has_error_details: false,
@@ -132,14 +133,14 @@ describe('PurchaseButtonContent', () => {
         };
         const { rerender } = render(<PurchaseButtonContent {...mock_props} is_vanilla info={vanilla_info as TInfo} />);
 
-        expect(screen.getByText(localized_basis.payout_per_point)).toBeInTheDocument();
-        expect(screen.getByText(/12.77095/)).toBeInTheDocument();
-        expect(screen.getByText(/USD/i)).toBeInTheDocument();
+        expect(screen.queryByText(localized_basis.payout_per_point)).not.toBeInTheDocument();
+        expect(screen.queryByText(/12.77095/)).not.toBeInTheDocument();
+        expect(screen.queryByText(/USD/i)).not.toBeInTheDocument();
 
         rerender(<PurchaseButtonContent {...mock_props} is_vanilla is_vanilla_fx info={vanilla_info as TInfo} />);
 
-        expect(screen.getByText(localized_basis.payout_per_pip)).toBeInTheDocument();
-        expect(screen.getByText(/12.77095/)).toBeInTheDocument();
-        expect(screen.getByText(/USD/i)).toBeInTheDocument();
+        expect(screen.queryByText(localized_basis.payout_per_pip)).not.toBeInTheDocument();
+        expect(screen.queryByText(/12.77095/)).not.toBeInTheDocument();
+        expect(screen.queryByText(/USD/i)).not.toBeInTheDocument();
     });
 });

packages/trader/src/AppV2/Components/PurchaseButton/__tests__/purchase-button.spec.tsx

@@ -174,23 +174,8 @@ describe('PositionsContent', () => {
         expect(screen.getByText('Fall')).toBeInTheDocument();
     });
 
-    it('should switch to loading state (apply a proper className and show loader instead of button name) and call onPurchase function if user clicks on purchase button', () => {
-        mockPurchaseButton();
-
-        const purchase_button = screen.getAllByRole('button')[0];
-        expect(purchase_button).not.toHaveClass('purchase-button--loading');
-        expect(default_mock_store.modules.trade.onPurchase).not.toBeCalled();
-        expect(screen.queryByTestId('button-loader')).not.toBeInTheDocument();
-
-        userEvent.click(purchase_button);
-
-        expect(purchase_button).toHaveClass('purchase-button--loading');
-        expect(default_mock_store.modules.trade.onPurchase).toBeCalled();
-        expect(screen.getByTestId('button-loader')).toBeInTheDocument();
-    });
-
     it('should disable the button if one of the prop is false (is_trade_enabled, is_proposal_empty, !info.id, is_purchase_enabled): button should have a specific attribute and if user clicks on it onPurchase will not be called', () => {
-        default_mock_store.modules.trade.is_purchase_enabled = false;
+        default_mock_store.modules.trade.is_trade_enabled_v2 = false;
         mockPurchaseButton();
 
         const purchase_button = screen.getAllByRole('button')[0];

packages/trader/src/AppV2/Components/PurchaseButton/purchase-button-content.tsx

@@ -9,6 +9,7 @@ type TPurchaseButtonContent = {
     current_stake?: number | null;
     info: ReturnType<typeof useTraderStore>['proposal_info'][0] | Record<string, never>;
     is_reverse?: boolean;
+    is_high_low?: boolean;
 } & Pick<
     ReturnType<typeof useTraderStore>,
     | 'currency'
@@ -18,6 +19,7 @@ type TPurchaseButtonContent = {
     | 'is_vanilla_fx'
     | 'is_vanilla'
     | 'is_turbos'
+    | 'is_touch'
 >;
 
 const PurchaseButtonContent = ({
@@ -26,36 +28,32 @@ const PurchaseButtonContent = ({
     has_open_accu_contract,
     info,
     is_accumulator,
+    is_high_low,
     is_multiplier,
     is_turbos,
     is_vanilla,
     is_vanilla_fx,
     is_reverse,
+    is_touch,
 }: TPurchaseButtonContent) => {
-    const {
-        current_stake: localized_current_stake,
-        max_payout,
-        payout,
-        payout_per_point,
-        payout_per_pip,
-        stake,
-    } = getLocalizedBasis();
+    const { current_stake: localized_current_stake, payout, stake } = getLocalizedBasis();
 
     const getAmount = () => {
-        const { stake, maximum_payout, obj_contract_basis } = info;
+        const { stake, obj_contract_basis } = info;
 
         if (is_multiplier) return stake;
-        if (is_accumulator) return has_open_accu_contract ? Number(current_stake) : maximum_payout;
+        if (is_accumulator) return Number(current_stake);
         return obj_contract_basis?.value;
     };
     const getTextBasis = () => {
-        if (is_turbos || (is_vanilla && !is_vanilla_fx)) return payout_per_point;
-        if (is_vanilla_fx) return payout_per_pip;
         if (is_multiplier) return stake;
-        if (is_accumulator) return has_open_accu_contract ? localized_current_stake : max_payout;
+        if (is_accumulator) return localized_current_stake;
         return payout;
     };
 
+    if (is_vanilla || is_vanilla_fx || is_turbos || is_high_low || is_touch) return null;
+    if (is_accumulator && !has_open_accu_contract) return null;
+
     const text_basis = getTextBasis();
     const amount = getAmount();
     const is_content_empty = !text_basis || !amount;

packages/trader/src/AppV2/Components/PurchaseButton/purchase-button.tsx

@@ -11,7 +11,6 @@ import {
     getIndicativePrice,
     hasContractEntered,
     isAccumulatorContract,
-    isEmptyObject,
     isOpen,
     isValidToSell,
 } from '@deriv/shared';
@@ -34,12 +33,13 @@ const PurchaseButton = observer(() => {
         is_accumulator,
         is_multiplier,
         is_purchase_enabled,
-        is_trade_enabled,
+        is_touch,
+        is_trade_enabled_v2,
         is_turbos,
         is_vanilla_fx,
         is_vanilla,
-        onPurchase,
         proposal_info,
+        onPurchaseV2,
         symbol,
         trade_type_tab,
         trade_types,
@@ -51,12 +51,13 @@ const PurchaseButton = observer(() => {
         return has_validation_error || info?.has_error
     };*/
     const is_high_low = /^high_low$/.test(contract_type.toLowerCase());
-    const is_proposal_empty = isEmptyObject(proposal_info);
     const purchase_button_content_props = {
         currency,
         has_open_accu_contract,
         is_accumulator,
+        is_high_low,
         is_multiplier,
+        is_touch,
         is_turbos,
         is_vanilla_fx,
         is_vanilla,
@@ -129,7 +130,7 @@ const PurchaseButton = observer(() => {
                 const info = proposal_info?.[trade_type] || {};
                 const is_single_button = trade_types_array.length === 1;
                 const is_loading = loading_button_index === index;
-                const is_disabled = !is_trade_enabled || is_proposal_empty || !info.id || !is_purchase_enabled;
+                const is_disabled = !is_trade_enabled_v2;
 
                 return (
                     <React.Fragment key={trade_type}>
@@ -147,7 +148,7 @@ const PurchaseButton = observer(() => {
                             disabled={is_disabled && !is_loading}
                             onClick={() => {
                                 setLoadingButtonIndex(index);
-                                onPurchase(info.id, info.stake, trade_type, isMobile, addNotificationBannerCallback);
+                                onPurchaseV2(trade_type, isMobile, addNotificationBannerCallback);
                             }}
                         >
                             {!is_loading && !is_accumulator && (

packages/trader/src/AppV2/Hooks/__tests__/useActiveSymbols.spec.tsx

@@ -96,7 +96,7 @@ describe('useActiveSymbols', () => {
             });
         });
     });
-    it('should set correct default_symbol and call correct onChange when store symbol is set', async () => {
+    it('should set correct default_symbol', async () => {
         (usePrevious as jest.Mock).mockReturnValueOnce(true).mockReturnValueOnce(TRADE_TYPES.RISE_FALL);
         mocked_store.modules.trade.symbol = 'test';
         const { result } = renderHook(() => useActiveSymbols(), {
@@ -105,9 +105,6 @@ describe('useActiveSymbols', () => {
 
         await waitFor(() => {
             expect(result.current.default_symbol).toEqual('test');
-            expect(mocked_store.modules.trade.onChange).toHaveBeenCalledWith({
-                target: { name: 'symbol', value: 'test' },
-            });
         });
     });
     it('should set active symbols from store when is_logged_in and contract_type are unchanged', async () => {

packages/trader/src/AppV2/Hooks/useActiveSymbols.ts

@@ -82,7 +82,10 @@ const useActiveSymbols = () => {
                 setActiveSymbols(active_symbols);
                 setActiveSymbolsV2(active_symbols);
                 default_symbol_ref.current = symbol || (await pickDefaultSymbol(active_symbols)) || '1HZ100V';
-                onChange({ target: { name: 'symbol', value: default_symbol_ref.current } });
+
+                if (symbol !== default_symbol_ref.current) {
+                    onChange({ target: { name: 'symbol', value: default_symbol_ref.current } });
+                }
             }
         },
         // eslint-disable-next-line react-hooks/exhaustive-deps

packages/trader/src/Stores/Modules/Trading/Helpers/__tests__/process.spec.ts

@@ -21,5 +21,6 @@ describe('processTradeParams', () => {
         await processTradeParams(trade_store, new_state);
         expect(trade_store.updateStore).toHaveBeenCalled();
         expect(trade_store.is_trade_enabled).toBe(true);
+        expect(trade_store.is_trade_enabled_v2).toBe(true);
     });
 });

packages/trader/src/Stores/Modules/Trading/Helpers/process.ts

@@ -32,6 +32,7 @@ export const processTradeParams = async (store: TTradeStore, new_state: Partial<
 
     store.updateStore({
         is_trade_enabled: true,
+        is_trade_enabled_v2: true,
     });
 };