From 806e4fb54cf2a7fb8715b627f1b536cc407ae9f2 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Mon, 23 Jan 2023 22:52:45 +0200
Subject: [PATCH] fix(FinancialStatements): Hide filtering by
 branches/warehouses if the feature is not enabled.

---
 .../CashFlowAccountsActionsBar.tsx            |  1 -
 .../APAgingSummary/APAgingSummaryHeader.tsx   | 19 ++++---
 .../APAgingSummaryHeaderDimensions.tsx        | 21 +++++---
 .../ARAgingSummary/ARAgingSummaryHeader.tsx   | 18 +++++--
 .../ARAgingSummaryHeaderDimensions.tsx        | 23 +++++---
 .../BalanceSheet/BalanceSheetHeader.tsx       | 20 ++++---
 .../BalanceSheetHeaderDimensionsPanel.tsx     | 21 +++++---
 .../CashFlowStatementDimensionsPanel.tsx      | 20 ++++---
 .../CashFlowStatementHeader.tsx               | 19 ++++---
 .../FinancialStatementsFilter.tsx             | 12 +++--
 .../GeneralLedger/GeneralLedgerHeader.tsx     | 18 +++++--
 .../GeneralLedgerHeaderDimensionsPanel.tsx    | 21 +++++---
 .../InventoryItemDetailsHeader.tsx            | 20 ++++---
 ...entoryItemDetailsHeaderDimensionsPanel.tsx | 52 ++++++++++++-------
 .../InventoryValuationHeader.tsx              | 21 +++++---
 ...nventoryValuationHeaderDimensionsPanel.tsx | 50 ++++++++++++------
 .../ProfitLossSheet/ProfitLossSheetHeader.tsx | 18 +++++--
 .../ProfitLossSheetHeaderDimensionsPanel.tsx  | 25 +++++----
 .../TrialBalanceSheetHeader.tsx               | 18 +++++--
 ...TrialBalanceSheetHeaderDimensionsPanel.tsx | 25 +++++----
 src/index.tsx                                 |  5 +-
 21 files changed, 298 insertions(+), 149 deletions(-)

diff --git a/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.tsx b/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.tsx
index 45c9d1d76..faa61dfbc 100644
--- a/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.tsx
+++ b/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.tsx
@@ -71,7 +71,6 @@ function CashFlowAccountsActionsBar({
             text={<T id={'cash_flow.label.add_cash_account'} />}
             onClick={handleAddBankAccount}
           />
-
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon={'plus-24'} iconSize={20} />}
diff --git a/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.tsx b/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.tsx
index 564b40b18..1eeecb772 100644
--- a/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.tsx
+++ b/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.tsx
@@ -15,6 +15,8 @@ import withAPAgingSummary from './withAPAgingSummary';
 import withAPAgingSummaryActions from './withAPAgingSummaryActions';
 
 import { transformToForm, compose } from '@/utils';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * AP Aging Summary Report - Drawer Header.
@@ -68,11 +70,14 @@ function APAgingSummaryHeader({
   const handleCancelClick = () => {
     toggleFilterDrawerDisplay(false);
   };
-
   // Handle the drawer closing.
   const handleDrawerClose = () => {
     toggleFilterDrawerDisplay(false);
   };
+  // Detarmines the feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
 
   return (
     <APAgingDrawerHeader
@@ -91,11 +96,13 @@ function APAgingSummaryHeader({
               title={<T id={'general'} />}
               panel={<APAgingSummaryHeaderGeneral />}
             />
-            <Tab
-              id="dimensions"
-              title={<T id={'dimensions'} />}
-              panel={<APAgingSummaryHeaderDimensions />}
-            />
+            {isBranchesFeatureCan && (
+              <Tab
+                id="dimensions"
+                title={<T id={'dimensions'} />}
+                panel={<APAgingSummaryHeaderDimensions />}
+              />
+            )}
           </Tabs>
           <div className={'financial-header-drawer__footer'}>
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
diff --git a/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderDimensions.tsx b/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderDimensions.tsx
index c7ebe7c36..84f32ea9a 100644
--- a/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderDimensions.tsx
+++ b/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderDimensions.tsx
@@ -7,6 +7,8 @@ import {
   APAgingSummaryHeaderDimensionsProvider,
   useAPAgingSummaryHeaderDimensonsContext,
 } from './APAgingSummaryHeaderDimensionsProvider';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * APAging summary header dimensions.
@@ -27,15 +29,22 @@ export default function APAgingSummaryHeaderDimensions() {
 function APAgingSummaryHeaderDimensionsContent() {
   const { branches } = useAPAgingSummaryHeaderDimensonsContext();
 
+  // Detarmines the feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+
   return (
     <Row>
       <Col xs={4}>
-        <FormGroup
-          label={intl.get('branches_multi_select.label')}
-          className={Classes.FILL}
-        >
-          <BranchMultiSelect name={'branchesIds'} branches={branches} />
-        </FormGroup>
+        {isBranchesFeatureCan && (
+          <FormGroup
+            label={intl.get('branches_multi_select.label')}
+            className={Classes.FILL}
+          >
+            <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          </FormGroup>
+        )}
       </Col>
     </Row>
   );
diff --git a/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.tsx b/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.tsx
index 0eb70786e..5e0c8e471 100644
--- a/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.tsx
+++ b/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.tsx
@@ -15,6 +15,8 @@ import withARAgingSummary from './withARAgingSummary';
 import withARAgingSummaryActions from './withARAgingSummaryActions';
 
 import { compose, transformToForm } from '@/utils';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * AR Aging Summary Report - Drawer Header.
@@ -76,6 +78,10 @@ function ARAgingSummaryHeader({
   const handleDrawerClose = () => {
     toggleFilterDrawerDisplay(false);
   };
+  // Detarmines the feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
 
   return (
     <ARAgingDrawerHeader
@@ -94,11 +100,13 @@ function ARAgingSummaryHeader({
               title={<T id={'general'} />}
               panel={<ARAgingSummaryHeaderGeneral />}
             />
-            <Tab
-              id="dimensions"
-              title={<T id={'dimensions'} />}
-              panel={<ARAgingSummaryHeaderDimensions />}
-            />
+            {isBranchesFeatureCan && (
+              <Tab
+                id="dimensions"
+                title={<T id={'dimensions'} />}
+                panel={<ARAgingSummaryHeaderDimensions />}
+              />
+            )}
           </Tabs>
 
           <div class="financial-header-drawer__footer">
diff --git a/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderDimensions.tsx b/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderDimensions.tsx
index 08c2f39b6..f1d5b3d80 100644
--- a/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderDimensions.tsx
+++ b/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderDimensions.tsx
@@ -10,7 +10,7 @@ import {
 
 /**
  * ARAging summary header dimensions.
- * @returns
+ * @returns {JSX.Element}
  */
 export default function ARAgingSummaryHeaderDimensions() {
   return (
@@ -22,20 +22,27 @@ export default function ARAgingSummaryHeaderDimensions() {
 
 /**
  * ARAging summary header dimensions content.
- * @returns
+ * @returns {JSX.Element}
  */
 function ARAgingSummaryHeaderDimensionsContent() {
   const { branches } = useARAgingSummaryHeaderDimensonsContext();
 
+  // Detarmines the feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+
   return (
     <Row>
       <Col xs={4}>
-        <FormGroup
-          label={intl.get('branches_multi_select.label')}
-          className={Classes.FILL}
-        >
-          <BranchMultiSelect name={'branchesIds'} branches={branches} />
-        </FormGroup>
+        {isBranchesFeatureCan && (
+          <FormGroup
+            label={intl.get('branches_multi_select.label')}
+            className={Classes.FILL}
+          >
+            <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          </FormGroup>
+        )}
       </Col>
     </Row>
   );
diff --git a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.tsx b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.tsx
index ecb8e3c75..f90c9d980 100644
--- a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.tsx
+++ b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.tsx
@@ -6,6 +6,8 @@ import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
 import { Formik, Form } from 'formik';
 
 import { FormattedMessage as T } from '@/components';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 import withBalanceSheet from './withBalanceSheet';
 import withBalanceSheetActions from './withBalanceSheetActions';
@@ -56,16 +58,18 @@ function BalanceSheetHeader({
     toggleFilterDrawer(false);
     actions.setSubmitting(false);
   };
-
   // Handle cancel button click.
   const handleCancelClick = () => {
     toggleFilterDrawer(false);
   };
-
   // Handle drawer close action.
   const handleDrawerClose = () => {
     toggleFilterDrawer(false);
   };
+  // Detarmines the given feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
 
   return (
     <BalanceSheetFinancialHeader
@@ -91,11 +95,13 @@ function BalanceSheetHeader({
               title={<T id={'balance_sheet.comparisons'} />}
               panel={<BalanceSheetHeaderComparisonPanal />}
             />
-            <Tab
-              id="dimensions"
-              title={<T id={'balance_sheet.dimensions'} />}
-              panel={<BalanceSheetHeaderDimensionsPanel />}
-            />
+            {isBranchesFeatureCan && (
+              <Tab
+                id="dimensions"
+                title={<T id={'balance_sheet.dimensions'} />}
+                panel={<BalanceSheetHeaderDimensionsPanel />}
+              />
+            )}
           </Tabs>
 
           <div class="financial-header-drawer__footer">
diff --git a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.tsx b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.tsx
index 4c283bf68..4b517c108 100644
--- a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.tsx
+++ b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.tsx
@@ -7,6 +7,8 @@ import {
   BalanceSheetHeaderDimensionsProvider,
   useBalanceSheetHeaderDimensionsPanelContext,
 } from './BalanceSheetHeaderDimensionsProvider';
+import { Features } from '@/constants';
+import { useFeatureCan } from '@/hooks/state';
 
 /**
  * Balance sheet header dismension panel.
@@ -26,16 +28,21 @@ export default function BalanceSheetHeaderDimensionsPanel() {
  */
 function BalanceSheetHeaderDimensionsPanelContent() {
   const { branches } = useBalanceSheetHeaderDimensionsPanelContext();
-  
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+
   return (
     <Row>
       <Col xs={4}>
-        <FormGroup
-          label={intl.get('branches_multi_select.label')}
-          className={Classes.FILL}
-        >
-          <BranchMultiSelect name={'branchesIds'} branches={branches} />
-        </FormGroup>
+        {isBranchesFeatureCan && (
+          <FormGroup
+            label={intl.get('branches_multi_select.label')}
+            className={Classes.FILL}
+          >
+            <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          </FormGroup>
+        )}
       </Col>
     </Row>
   );
diff --git a/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanel.tsx b/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanel.tsx
index 177e09bdd..226e57cff 100644
--- a/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanel.tsx
+++ b/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanel.tsx
@@ -7,6 +7,8 @@ import {
   CashFlowStatementDimensionsPanelProvider,
   useCashFlowStatementDimensionsPanelContext,
 } from './CashFlowStatementDimensionsPanelProvider';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * Cash flow statement dismension panel.
@@ -28,15 +30,21 @@ function CashFlowStatementDimensionsPanelContent() {
   // Fetches the branches list.
   const { branches } = useCashFlowStatementDimensionsPanelContext();
 
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+
   return (
     <Row>
       <Col xs={4}>
-        <FormGroup
-          label={intl.get('branches_multi_select.label')}
-          className={Classes.FILL}
-        >
-          <BranchMultiSelect name={'branchesIds'} branches={branches} />
-        </FormGroup>
+        {isBranchesFeatureCan && (
+          <FormGroup
+            label={intl.get('branches_multi_select.label')}
+            className={Classes.FILL}
+          >
+            <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          </FormGroup>
+        )}
       </Col>
     </Row>
   );
diff --git a/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.tsx b/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.tsx
index 93ffca71d..24ad29c21 100644
--- a/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.tsx
+++ b/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.tsx
@@ -16,6 +16,8 @@ import withCashFlowStatementActions from './withCashFlowStatementActions';
 
 import { getDefaultCashFlowSheetQuery } from './utils';
 import { compose, transformToForm } from '@/utils';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * Cash flow statement header.
@@ -43,7 +45,6 @@ function CashFlowStatementHeader({
     },
     defaultValues,
   );
-
   // Validation schema.
   const validationSchema = Yup.object().shape({
     dateRange: Yup.string().optional(),
@@ -67,6 +68,10 @@ function CashFlowStatementHeader({
     toggleCashFlowStatementFilterDrawer(false);
   };
 
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+
   return (
     <FinancialStatementHeader
       isOpen={isFilterDrawerOpen}
@@ -84,11 +89,13 @@ function CashFlowStatementHeader({
               title={<T id={'general'} />}
               panel={<CashFlowStatementGeneralPanel />}
             />
-            <Tab
-              id="dimensions"
-              title={<T id={'dimensions'} />}
-              panel={<CashFlowStatementDimensionsPanel />}
-            />
+            {isBranchesFeatureCan && (
+              <Tab
+                id="dimensions"
+                title={<T id={'dimensions'} />}
+                panel={<CashFlowStatementDimensionsPanel />}
+              />
+            )}
           </Tabs>
 
           <div class="financial-header-drawer__footer">
diff --git a/src/containers/FinancialStatements/FinancialStatementsFilter.tsx b/src/containers/FinancialStatements/FinancialStatementsFilter.tsx
index a5168b7ad..5f1847ce5 100644
--- a/src/containers/FinancialStatements/FinancialStatementsFilter.tsx
+++ b/src/containers/FinancialStatements/FinancialStatementsFilter.tsx
@@ -13,16 +13,18 @@ import { ListSelect, MODIFIER, FormattedMessage as T } from '@/components';
 import { CLASSES } from '@/constants/classes';
 import { filterAccountsOptions } from './constants';
 
+const SUBMENU_POPOVER_MODIFIERS = {
+  flip: { boundariesElement: 'viewport', padding: 20 },
+  offset: { offset: '0, 10' },
+  preventOverflow: { boundariesElement: 'viewport', padding: 40 },
+};
+
+
 export default function FinancialStatementsFilter({
   items = filterAccountsOptions,
   label = <T id={'filter_accounts'} />,
   ...restProps
 }) {
-  const SUBMENU_POPOVER_MODIFIERS = {
-    flip: { boundariesElement: 'viewport', padding: 20 },
-    offset: { offset: '0, 10' },
-    preventOverflow: { boundariesElement: 'viewport', padding: 40 },
-  };
 
   const filterRenderer = (item, { handleClick, modifiers, query }) => {
     return (
diff --git a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.tsx b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.tsx
index 9060c1b63..8728bfa22 100644
--- a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.tsx
+++ b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.tsx
@@ -16,6 +16,8 @@ import GeneralLedgerHeaderDimensionsPanel from './GeneralLedgerHeaderDimensionsP
 
 import withGeneralLedger from './withGeneralLedger';
 import withGeneralLedgerActions from './withGeneralLedgerActions';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * Geenral Ledger (GL) - Header.
@@ -63,6 +65,10 @@ function GeneralLedgerHeader({
   const handleDrawerClose = () => {
     toggleDisplayFilterDrawer(false);
   };
+  // Detarmines the feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
 
   return (
     <GeneralLedgerDrawerHeader
@@ -81,11 +87,13 @@ function GeneralLedgerHeader({
               title={<T id={'general'} />}
               panel={<GeneralLedgerHeaderGeneralPane />}
             />
-            <Tab
-              id="dimensions"
-              title={<T id={'dimensions'} />}
-              panel={<GeneralLedgerHeaderDimensionsPanel />}
-            />
+            {isBranchesFeatureCan && (
+              <Tab
+                id="dimensions"
+                title={<T id={'dimensions'} />}
+                panel={<GeneralLedgerHeaderDimensionsPanel />}
+              />
+            )}
           </Tabs>
 
           <div class="financial-header-drawer__footer">
diff --git a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderDimensionsPanel.tsx b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderDimensionsPanel.tsx
index 7b739f7bb..e6c435be5 100644
--- a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderDimensionsPanel.tsx
+++ b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderDimensionsPanel.tsx
@@ -7,6 +7,8 @@ import {
   GeneralLedgerHeaderDimensionsPanelProvider,
   useGeneralLedgerHeaderDimensionsContext,
 } from './GeneralLedgerHeaderDimensionsPanelProvider';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * Gereral ledger sheet header dismension panel.
@@ -27,15 +29,22 @@ export default function GeneralLedgerHeaderDimensionsPanel() {
 function GeneralLedgerHeaderDimensionsPanelContent() {
   const { branches } = useGeneralLedgerHeaderDimensionsContext();
 
+  // Detarmines the feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+
   return (
     <Row>
       <Col xs={4}>
-        <FormGroup
-          label={intl.get('branches_multi_select.label')}
-          className={Classes.FILL}
-        >
-          <BranchMultiSelect name={'branchesIds'} branches={branches} />
-        </FormGroup>
+        {isBranchesFeatureCan && (
+          <FormGroup
+            label={intl.get('branches_multi_select.label')}
+            className={Classes.FILL}
+          >
+            <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          </FormGroup>
+        )}
       </Col>
     </Row>
   );
diff --git a/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.tsx b/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.tsx
index b38e7e276..1af6bc2a9 100644
--- a/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.tsx
+++ b/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.tsx
@@ -18,6 +18,8 @@ import withInventoryItemDetailsActions from './withInventoryItemDetailsActions';
 
 import { getInventoryItemDetailsDefaultQuery } from './utils2';
 import { compose, transformToForm } from '@/utils';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * Inventory item details header.
@@ -58,11 +60,15 @@ function InventoryItemDetailsHeader({
     toggleFilterDrawer(false);
     setSubmitting(false);
   };
-
   // Handle drawer close action.
   const handleDrawerClose = () => {
     toggleFilterDrawer(false);
   };
+  // Detarmines the given feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+  const isWarehousesFeatureCan = featureCan(Features.Warehouses);
 
   return (
     <InventoryItemDetailsDrawerHeader
@@ -81,11 +87,13 @@ function InventoryItemDetailsHeader({
               title={<T id={'general'} />}
               panel={<InventoryItemDetailsHeaderGeneralPanel />}
             />
-            <Tab
-              id="dimensions"
-              title={<T id={'dimensions'} />}
-              panel={<InventoryItemDetailsHeaderDimensionsPanel />}
-            />
+            {(isBranchesFeatureCan || isWarehousesFeatureCan) && (
+              <Tab
+                id="dimensions"
+                title={<T id={'dimensions'} />}
+                panel={<InventoryItemDetailsHeaderDimensionsPanel />}
+              />
+            )}
           </Tabs>
           <div class="financial-header-drawer__footer">
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
diff --git a/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderDimensionsPanel.tsx b/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderDimensionsPanel.tsx
index 579b2c817..39d6322f0 100644
--- a/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderDimensionsPanel.tsx
+++ b/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderDimensionsPanel.tsx
@@ -2,7 +2,12 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { FormGroup, Classes } from '@blueprintjs/core';
-import { BranchMultiSelect, WarehouseMultiSelect, Row, Col } from '@/components';
+import {
+  BranchMultiSelect,
+  WarehouseMultiSelect,
+  Row,
+  Col,
+} from '@/components';
 import {
   InventoryItemDetailsHeaderDimensionsProvider,
   useInventoryItemDetailsHeaderDimensionsPanelContext,
@@ -10,7 +15,7 @@ import {
 
 /**
  * Inventory Item deatil header dismension panel.
- * @returns
+ * @returns {JSX.Element}
  */
 export default function InventoryItemDetailsHeaderDimensionsPanel() {
   return (
@@ -22,31 +27,40 @@ export default function InventoryItemDetailsHeaderDimensionsPanel() {
 
 /**
  * Inventory Valuation header dismension panel content.
- * @returns
+ * @returns {JSX.Element}
  */
 function InventoryItemDetailsHeaderDimensionsPanelContent() {
   const { warehouses, branches } =
     useInventoryItemDetailsHeaderDimensionsPanelContext();
 
+  // Detarmines the given feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+  const isWarehousesFeatureCan = featureCan(Features.warehouses);
+
   return (
     <Row>
       <Col xs={4}>
-        <FormGroup
-          label={intl.get('branches_multi_select.label')}
-          className={Classes.FILL}
-        >
-          <BranchMultiSelect name={'branchesIds'} branches={branches} />
-        </FormGroup>
-
-        <FormGroup
-          label={intl.get('warehouses_multi_select.label')}
-          className={Classes.FILL}
-        >
-          <WarehouseMultiSelect
-            name={'warehousesIds'}
-            warehouses={warehouses}
-          />
-        </FormGroup>
+        {isBranchesFeatureCan && (
+          <FormGroup
+            label={intl.get('branches_multi_select.label')}
+            className={Classes.FILL}
+          >
+            <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          </FormGroup>
+        )}
+        {isWarehousesFeatureCan && (
+          <FormGroup
+            label={intl.get('warehouses_multi_select.label')}
+            className={Classes.FILL}
+          >
+            <WarehouseMultiSelect
+              name={'warehousesIds'}
+              warehouses={warehouses}
+            />
+          </FormGroup>
+        )}
       </Col>
     </Row>
   );
diff --git a/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.tsx b/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.tsx
index 4709425e6..09d29c7d9 100644
--- a/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.tsx
+++ b/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.tsx
@@ -15,6 +15,8 @@ import withInventoryValuation from './withInventoryValuation';
 import withInventoryValuationActions from './withInventoryValuationActions';
 
 import { compose, transformToForm } from '@/utils';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * inventory valuation header.
@@ -58,16 +60,19 @@ function InventoryValuationHeader({
     toggleInventoryValuationFilterDrawer(false);
     setSubmitting(false);
   };
-
   // Handle drawer close action.
   const handleDrawerClose = () => {
     toggleInventoryValuationFilterDrawer(false);
   };
-
   // Handle cancel button click.
   const handleCancelClick = () => {
     toggleInventoryValuationFilterDrawer(false);
   };
+  // Detarmines the given feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+  const isWarehousesFeatureCan = featureCan(Features.Warehouses);
 
   return (
     <InventoryValuationDrawerHeader
@@ -86,11 +91,13 @@ function InventoryValuationHeader({
               title={<T id={'general'} />}
               panel={<InventoryValuationHeaderGeneralPanel />}
             />
-            <Tab
-              id="dimensions"
-              title={<T id={'dimensions'} />}
-              panel={<InventoryValuationHeaderDimensionsPanel />}
-            />
+            {(isBranchesFeatureCan || isWarehousesFeatureCan) && (
+              <Tab
+                id="dimensions"
+                title={<T id={'dimensions'} />}
+                panel={<InventoryValuationHeaderDimensionsPanel />}
+              />
+            )}
           </Tabs>
           <div class="financial-header-drawer__footer">
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
diff --git a/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderDimensionsPanel.tsx b/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderDimensionsPanel.tsx
index 6c2f06384..78d926f51 100644
--- a/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderDimensionsPanel.tsx
+++ b/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderDimensionsPanel.tsx
@@ -2,11 +2,18 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { FormGroup, Classes } from '@blueprintjs/core';
-import { BranchMultiSelect, WarehouseMultiSelect, Row, Col } from '@/components';
+import {
+  BranchMultiSelect,
+  WarehouseMultiSelect,
+  Row,
+  Col,
+} from '@/components';
 import {
   InventoryValuationHeaderDimensionsProvider,
   useInventoryValuationHeaderDimensionsPanelContext,
 } from './InventoryValuationHeaderDimensionsPanelProvider';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * Inventory Valuation header dismension panel.
@@ -28,25 +35,34 @@ function InventoryValuationHeaderDimensionsPanelContent() {
   const { warehouses, branches } =
     useInventoryValuationHeaderDimensionsPanelContext();
 
+  // Detarmines the given feature whether is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+  const isWarehousesFeatureCan = featureCan(Features.Warehouses);
+
   return (
     <Row>
       <Col xs={4}>
-        <FormGroup
-          label={intl.get('branches_multi_select.label')}
-          className={Classes.FILL}
-        >
-          <BranchMultiSelect name={'branchesIds'} branches={branches} />
-        </FormGroup>
-
-        <FormGroup
-          label={intl.get('warehouses_multi_select.label')}
-          className={Classes.FILL}
-        >
-          <WarehouseMultiSelect
-            name={'warehousesIds'}
-            warehouses={warehouses}
-          />
-        </FormGroup>
+        {isBranchesFeatureCan && (
+          <FormGroup
+            label={intl.get('branches_multi_select.label')}
+            className={Classes.FILL}
+          >
+            <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          </FormGroup>
+        )}
+        {isWarehousesFeatureCan && (
+          <FormGroup
+            label={intl.get('warehouses_multi_select.label')}
+            className={Classes.FILL}
+          >
+            <WarehouseMultiSelect
+              name={'warehousesIds'}
+              warehouses={warehouses}
+            />
+          </FormGroup>
+        )}
       </Col>
     </Row>
   );
diff --git a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.tsx b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.tsx
index d712b4c6a..a21dc523f 100644
--- a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.tsx
+++ b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.tsx
@@ -16,6 +16,8 @@ import withProfitLoss from './withProfitLoss';
 import withProfitLossActions from './withProfitLossActions';
 
 import { useProfitLossHeaderValidationSchema } from './utils';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * Profit/loss header.
@@ -55,6 +57,10 @@ function ProfitLossHeader({
     toggleFilterDrawer(false);
   };
 
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
+
   return (
     <ProfitLossSheetHeader
       isOpen={profitLossDrawerFilter}
@@ -77,11 +83,13 @@ function ProfitLossHeader({
               title={<T id={'profit_loss_sheet.comparisons'} />}
               panel={<ProfitLossSheetHeaderComparisonPanel />}
             />
-            <Tab
-              id="dimensions"
-              title={<T id={'profit_loss_sheet.dimensions'} />}
-              panel={<ProfitLossSheetHeaderDimensionsPanel />}
-            />
+            {isBranchesFeatureCan && (
+              <Tab
+                id="dimensions"
+                title={<T id={'profit_loss_sheet.dimensions'} />}
+                panel={<ProfitLossSheetHeaderDimensionsPanel />}
+              />
+            )}
           </Tabs>
 
           <div class="financial-header-drawer__footer">
diff --git a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderDimensionsPanel.tsx b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderDimensionsPanel.tsx
index 66b3e4a4f..5602afd95 100644
--- a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderDimensionsPanel.tsx
+++ b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderDimensionsPanel.tsx
@@ -7,10 +7,12 @@ import {
   ProfitLossSheetHeaderDimensionsProvider,
   useProfitLossSheetPanelContext,
 } from './ProfitLossSheetHeaderDimensionsProvider';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * profit loss Sheet Header dimensions panel.
- * @returns
+ * @returns {JSX.Element}
  */
 export default function ProfitLossSheetHeaderDimensionsPanel() {
   return (
@@ -21,21 +23,26 @@ export default function ProfitLossSheetHeaderDimensionsPanel() {
 }
 
 /**
- * profit loss Sheet Header dimensions panel content.
- * @returns
+ * Profit/Loss Sheet Header dimensions panel content.
+ * @returns {JSX.Element}
  */
 function ProfitLossSheetHeaderDimensionsPanelContent() {
   const { branches } = useProfitLossSheetPanelContext();
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
 
   return (
     <Row>
       <Col xs={4}>
-        <FormGroup
-          label={intl.get('branches_multi_select.label')}
-          className={Classes.FILL}
-        >
-          <BranchMultiSelect name={'branchesIds'} branches={branches} />
-        </FormGroup>
+        {isBranchesFeatureCan && (
+          <FormGroup
+            label={intl.get('branches_multi_select.label')}
+            className={Classes.FILL}
+          >
+            <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          </FormGroup>
+        )}
       </Col>
     </Row>
   );
diff --git a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.tsx b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.tsx
index d28777cf3..092a5e640 100644
--- a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.tsx
+++ b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.tsx
@@ -17,6 +17,8 @@ import withTrialBalance from './withTrialBalance';
 import withTrialBalanceActions from './withTrialBalanceActions';
 
 import { compose, transformToForm } from '@/utils';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * Trial balance sheet header.
@@ -40,6 +42,10 @@ function TrialBalanceSheetHeader({
       .required()
       .label(intl.get('to_date')),
   });
+  // Detarmines whether the feature is enabled.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
 
   // Default values.
   const defaultValues = {
@@ -90,11 +96,13 @@ function TrialBalanceSheetHeader({
               title={<T id={'general'} />}
               panel={<TrialBalanceSheetHeaderGeneralPanel />}
             />
-            <Tab
-              id="dimensions"
-              title={<T id={'dimensions'} />}
-              panel={<TrialBalanceSheetHeaderDimensionsPanel />}
-            />
+            {isBranchesFeatureCan && (
+              <Tab
+                id="dimensions"
+                title={<T id={'dimensions'} />}
+                panel={<TrialBalanceSheetHeaderDimensionsPanel />}
+              />
+            )}
           </Tabs>
 
           <div class="financial-header-drawer__footer">
diff --git a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderDimensionsPanel.tsx b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderDimensionsPanel.tsx
index 67dc79f06..67cbec045 100644
--- a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderDimensionsPanel.tsx
+++ b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderDimensionsPanel.tsx
@@ -7,10 +7,12 @@ import {
   TrialBLHeaderDimensionsPanelProvider,
   useTrialBalanceSheetPanelContext,
 } from './TrialBalanceSheetHeaderDimensionsPanelProvider';
+import { useFeatureCan } from '@/hooks/state';
+import { Features } from '@/constants';
 
 /**
  * Trial balance sheet header dismension panel.
- * @returns
+ * @returns {JSX.Element}
  */
 export default function TrialBalanceSheetHeaderDimensionsPanel() {
   return (
@@ -21,21 +23,26 @@ export default function TrialBalanceSheetHeaderDimensionsPanel() {
 }
 
 /**
- * trial balance sheet header dismension panel content.
- * @returns
+ * Trial balance sheet header dismension panel content.
+ * @returns {JSX.Element}
  */
 function TrialBLSheetHeaderDimensionsPanelContent() {
   const { branches } = useTrialBalanceSheetPanelContext();
+  const { featureCan } = useFeatureCan();
+
+  const isBranchesFeatureCan = featureCan(Features.Branches);
 
   return (
     <Row>
       <Col xs={4}>
-        <FormGroup
-          label={intl.get('branches_multi_select.label')}
-          className={Classes.FILL}
-        >
-          <BranchMultiSelect name={'branchesIds'} branches={branches} />
-        </FormGroup>
+        {isBranchesFeatureCan && (
+          <FormGroup
+            label={intl.get('branches_multi_select.label')}
+            className={Classes.FILL}
+          >
+            <BranchMultiSelect name={'branchesIds'} branches={branches} />
+          </FormGroup>
+        )}
       </Col>
     </Row>
   );
diff --git a/src/index.tsx b/src/index.tsx
index 662f86c65..d0b8e40fb 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -14,10 +14,7 @@ import { store, persistor } from '@/store/createStore';
 
 if (process.env.NODE_ENV === 'development') {
   const whyDidYouRender = require('@welldone-software/why-did-you-render');
-
-  whyDidYouRender(React, {
-    trackAllPureComponents: false,
-  });
+  whyDidYouRender(React, { trackAllPureComponents: false });
 }
 
 if (process.env.NODE_ENV !== 'development') {