DTRA-1846 / Kate / Hide purchase button when the market is closed (bi…

…nary-com#16772) * fix: add condition for rendering purchase button * refactor: removed unused * chore: ui issue
jim-deriv · Sep 10, 2024 · 9841da7 · 9841da7
1 parent f4f9bf9
commit 9841da7
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 6 deletions.
diff --git a/packages/trader/src/AppV2/Containers/Trade/__tests__/trade.spec.tsx b/packages/trader/src/AppV2/Containers/Trade/__tests__/trade.spec.tsx
@@ -169,4 +169,11 @@ describe('Trade', () => {
 
         expect(screen.queryByText('OnboardingGuide')).not.toBeInTheDocument();
     });
+
+    it('should not render Purchase Button if is_market_closed === true', () => {
+        default_mock_store.modules.trade.is_market_closed = true;
+        render(mockTrade());
+
+        expect(screen.queryByText('Purchase Button')).not.toBeInTheDocument();
+    });
 });
diff --git a/packages/trader/src/AppV2/Containers/Trade/trade.scss b/packages/trader/src/AppV2/Containers/Trade/trade.scss
@@ -53,10 +53,18 @@
         }
     }
     &__parameter {
-        min-height: 13.6rem;
+        min-height: 7.2rem;
 
         &:has(.trade-params__options__wrapper--horizontal:not(:only-child)) {
-            min-height: 16.8rem;
+            min-height: 10.4rem;
+        }
+
+        &--with-button {
+            min-height: 13.6rem;
+
+            &:has(.trade-params__options__wrapper--horizontal:not(:only-child)) {
+                min-height: 16.8rem;
+            }
         }
     }
 }
diff --git a/packages/trader/src/AppV2/Containers/Trade/trade.tsx b/packages/trader/src/AppV2/Containers/Trade/trade.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import clsx from 'clsx';
 import { observer } from 'mobx-react';
 import { useStore } from '@deriv/stores';
 import { Loading } from '@deriv/components';
@@ -25,8 +26,17 @@ const Trade = observer(() => {
     const {
         client: { is_logged_in },
     } = useStore();
-    const { active_symbols, contract_type, has_cancellation, symbol, is_accumulator, onMount, onChange, onUnmount } =
-        useTraderStore();
+    const {
+        active_symbols,
+        contract_type,
+        has_cancellation,
+        symbol,
+        is_accumulator,
+        is_market_closed,
+        onMount,
+        onChange,
+        onUnmount,
+    } = useTraderStore();
     const { contract_types_list } = useContractsForCompany();
     const [guide_dtrader_v2] = useLocalStorageData<Record<string, boolean>>('guide_dtrader_v2', {
         trade_types_selection: false,
@@ -104,11 +114,11 @@ const Trade = observer(() => {
                         </div>
                         {is_accumulator && <AccumulatorStats />}
                     </div>
-                    <div className='trade__parameter'>
+                    <div className={clsx('trade__parameter', { 'trade__parameter--with-button': !is_market_closed })}>
                         <TradeParametersContainer is_minimized_visible={is_minimized_params_visible} is_minimized>
                             <TradeParameters is_minimized />
                         </TradeParametersContainer>
-                        <PurchaseButton />
+                        {!is_market_closed && <PurchaseButton />}
                     </div>
                     {!guide_dtrader_v2?.trade_page && is_logged_in && <OnboardingGuide type='trade_page' />}
                 </React.Fragment>