fix: implement contract header inside dtrader v2

deriv-com · Oct 22, 2024 · f0152c6 · f0152c6
1 parent 0493186
commit f0152c6
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 32 deletions.
diff --git a/packages/core/src/App/Containers/Layout/header/header.tsx b/packages/core/src/App/Containers/Layout/header/header.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import { useLocation } from 'react-router-dom';
-import { useFeatureFlags, useGrowthbookGetFeatureValue } from '@deriv/hooks';
 import { useReadLocalStorage } from 'usehooks-ts';
-import { isDTraderV2Width, makeLazyLoader, moduleLoader, routes } from '@deriv/shared';
+import { makeLazyLoader, moduleLoader, routes } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { useDevice } from '@deriv-com/ui';
 import classNames from 'classnames';
-import DTraderContractDetailsHeader from './dtrader-v2-contract-detail-header';
 
 const HeaderFallback = () => {
     return <div className={classNames('header')} />;
@@ -47,7 +45,6 @@ const Header = observer(() => {
     const { client } = useStore();
     const { accounts, has_wallet, is_logged_in, setAccounts, loginid, switchAccount } = client;
     const { pathname } = useLocation();
-    const { isMobile } = useDevice();
 
     const is_wallets_cashier_route = pathname.includes(routes.wallets);
 
@@ -63,20 +60,6 @@ const Header = observer(() => {
         is_wallets_cashier_route;
 
     const client_accounts = useReadLocalStorage('client.accounts');
-    const { is_dtrader_v2_enabled } = useFeatureFlags();
-    const [dtrader_v2_enabled_gb] = useGrowthbookGetFeatureValue({
-        featureFlag: 'dtrader_v2_enabled',
-        defaultValue: false,
-    });
-    const [dtrader_v2_enabled, setDTraderV2Enabled] = React.useState();
-    React.useEffect(() => {
-        if (dtrader_v2_enabled_gb !== undefined)
-            setDTraderV2Enabled(
-                (is_dtrader_v2_enabled || (Boolean(dtrader_v2_enabled_gb) && isDTraderV2Width())) &&
-                    (location.pathname.startsWith(routes.trade) || location.pathname.startsWith('/contract/'))
-            );
-    }, [dtrader_v2_enabled_gb, is_dtrader_v2_enabled]);
-
     React.useEffect(() => {
         if (has_wallet && is_logged_in) {
             const accounts_keys = Object.keys(accounts ?? {});
@@ -95,11 +78,6 @@ const Header = observer(() => {
             case pathname === routes.onboarding:
                 result = null;
                 break;
-            case dtrader_v2_enabled &&
-                isMobile &&
-                pathname.startsWith('/contract/') === routes.contract.startsWith('/contract/'):
-                result = <DTraderContractDetailsHeader />;
-                break;
             case traders_hub_routes:
                 result = has_wallet ? <TradersHubHeaderWallets /> : <TradersHubHeader />;
                 break;

diff --git a/packages/shared/src/utils/helpers/dtrader-v2-helpers.ts b/packages/shared/src/utils/helpers/dtrader-v2-helpers.ts
@@ -25,8 +25,9 @@ export const isDTraderV2 = () => {
     const dtrader_v2_enabled_gb = Analytics?.getFeatureValue('dtrader_v2_enabled', false);
 
     return (
-        (!!JSON.parse(localStorage.getItem('FeatureFlagsStore') ?? '{}')?.data?.dtrader_v2 || dtrader_v2_enabled_gb) &&
-        isDTraderV2Width()
+        Boolean(
+            !!JSON.parse(localStorage.getItem('FeatureFlagsStore') ?? '{}')?.data?.dtrader_v2 || dtrader_v2_enabled_gb
+        ) && isDTraderV2Width()
     );
 };
 

diff --git a/.../dtrader-contract-details-header.spec.tsx → ..._tests__/contract-details-header.spec.tsx b/.../dtrader-contract-details-header.spec.tsx → ..._tests__/contract-details-header.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { BrowserRouter, useHistory, useLocation } from 'react-router-dom';
-import DTraderContractDetailsHeader from '../dtrader-v2-contract-detail-header';
+import ContractDetailsHeader from '../contract-details-header';
 import userEvent from '@testing-library/user-event';
 import { StoreProvider, mockStore } from '@deriv/stores';
 
@@ -19,7 +19,7 @@ jest.mock('react-router-dom', () => ({
     }),
 }));
 
-describe('DTraderV2Header', () => {
+describe('ContractDetailsHeader', () => {
     const mock_store = mockStore({
         contract_replay: {
             onClickCancel: jest.fn(),
@@ -34,7 +34,7 @@ describe('DTraderV2Header', () => {
         render(
             <StoreProvider store={mock_store}>
                 <BrowserRouter>
-                    <DTraderContractDetailsHeader />
+                    <ContractDetailsHeader />
                 </BrowserRouter>
             </StoreProvider>
         );
@@ -48,7 +48,7 @@ describe('DTraderV2Header', () => {
         render(
             <StoreProvider store={mock_store}>
                 <BrowserRouter>
-                    <DTraderContractDetailsHeader />
+                    <ContractDetailsHeader />
                 </BrowserRouter>
             </StoreProvider>
         );
@@ -70,7 +70,7 @@ describe('DTraderV2Header', () => {
         render(
             <StoreProvider store={mock_store}>
                 <BrowserRouter>
-                    <DTraderContractDetailsHeader />
+                    <ContractDetailsHeader />
                 </BrowserRouter>
             </StoreProvider>
         );

diff --git a/...der/dtrader-v2-contract-detail-header.tsx → ...DetailsHeader/contract-details-header.tsx b/...der/dtrader-v2-contract-detail-header.tsx → ...DetailsHeader/contract-details-header.tsx
@@ -6,7 +6,7 @@ import { Localize } from '@deriv/translations';
 import { useHistory, useLocation } from 'react-router-dom';
 import { isEmptyObject } from '@deriv/shared';
 
-const DTraderContractDetailsHeader = observer(() => {
+const ContractDetailsHeader = observer(() => {
     const { state } = useLocation();
     const history = useHistory();
     const { common } = useStore();
@@ -37,4 +37,4 @@ const DTraderContractDetailsHeader = observer(() => {
     );
 });
 
-export default DTraderContractDetailsHeader;
+export default ContractDetailsHeader;
diff --git a/packages/trader/src/AppV2/Components/ContractDetailsHeader/index.ts b/packages/trader/src/AppV2/Components/ContractDetailsHeader/index.ts
@@ -0,0 +1,3 @@
+import ContractDetailsHeader from './contract-details-header';
+
+export default ContractDetailsHeader;
diff --git a/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx b/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx
@@ -27,6 +27,7 @@ import classNames from 'classnames';
 import ContractDetailsFooter from 'AppV2/Components/ContractDetailsFooter';
 import { ContractCard } from 'AppV2/Components/ContractCard';
 import ForwardStartingBanner from 'AppV2/Components/ForwardStartingBanner';
+import ContractDetailsHeader from 'AppV2/Components/ContractDetailsHeader';
 
 const ContractDetails = observer(() => {
     const { contract_info, is_loading } = useContractDetails();
@@ -78,6 +79,7 @@ const ContractDetails = observer(() => {
     }
     return (
         <>
+            <ContractDetailsHeader />
             <div
                 className={classNames('contract-details', {
                     'contract-details--two-buttons': shouldShowSell && showCancelButton,