feat(branch & warehouse): fix EmptyStatus.

src/containers/Preferences/Branches/Branches.js

@@ -2,7 +2,11 @@ import React from 'react';
 import intl from 'react-intl-universal';
 
 import BranchesDataTable from './BranchesDataTable';
+import BranchesEmptyStatus from './BranchesEmptyStatus';
+import { Choose } from 'components';
+
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import { useBranchesContext } from './BranchesProvider';
 
 import { compose } from 'utils';
 
@@ -10,10 +14,21 @@ function Branches({
   // #withDashboardActions
   changePreferencesPageTitle,
 }) {
+  const { isEmptyStatus } = useBranchesContext();
+
   React.useEffect(() => {
     changePreferencesPageTitle(intl.get('branches.label'));
   }, [changePreferencesPageTitle]);
 
-  return <BranchesDataTable />;
+  return (
+    <Choose>
+      <Choose.When condition={isEmptyStatus}>
+        <BranchesEmptyStatus />
+      </Choose.When>
+      <Choose.Otherwise>
+        <BranchesDataTable />
+      </Choose.Otherwise>
+    </Choose>
+  );
 }
 export default compose(withDashboardActions)(Branches);

src/containers/Preferences/Branches/BranchesActions.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 
-import { FormattedMessage as T, Icon } from 'components';
+import { Features } from 'common';
+import { FeatureCan, FormattedMessage as T, Icon } from 'components';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
 
@@ -15,13 +16,15 @@ function BranchesActions({
 
   return (
     <React.Fragment>
-      <Button
+      <FeatureCan feature={Features.Branches}>
-        icon={<Icon icon="plus" iconSize={12} />}
+        <Button
-        onClick={handleClickNewBranche}
+          icon={<Icon icon="plus" iconSize={12} />}
-        intent={Intent.PRIMARY}
+          onClick={handleClickNewBranche}
-      >
+          intent={Intent.PRIMARY}
-        <T id={'branches.label.new_branch'} />
+        >
-      </Button>
+          <T id={'branches.label.new_branch'} />
+        </Button>
+      </FeatureCan>
     </React.Fragment>
   );
 }

src/containers/Preferences/Branches/BranchesDataTable.js

@@ -6,7 +6,6 @@ import { Intent } from '@blueprintjs/core';
 import 'style/pages/Preferences/branchesList.scss';
 
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
-import BranchesEmptyStatus from './BranchesEmptyStatus';
 import { DataTable, Card, AppToaster } from 'components';
 import { useBranchesTableColumns, ActionsMenu } from './components';
 import { useBranchesContext } from './BranchesProvider';
@@ -56,9 +55,6 @@ function BranchesDataTable({
     });
   };
 
-  // if (type) {
-  //   return <BranchesEmptyStatus />;
-  // }
 
   return (
     <BranchesTableCard>

src/containers/Preferences/Branches/BranchesProvider.js

@@ -2,7 +2,9 @@ import React from 'react';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import { useBranches } from 'hooks/query';
-import PreferencesPageLoader from '../PreferencesPageLoader';
+import { useFeatureCan } from 'hooks/state';
+import { Features } from 'common';
+import { isEmpty } from 'lodash';
 
 const BranchesContext = React.createContext();
 
@@ -10,18 +12,27 @@ const BranchesContext = React.createContext();
  * Branches data provider.
  */
 function BranchesProvider({ ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+
+  const isBranchFeatureCan = featureCan(Features.Branches);
+
   // Fetches the branches list.
   const {
     isLoading: isBranchesLoading,
     isFetching: isBranchesFetching,
     data: branches,
-  } = useBranches();
+  } = useBranches({}, { enabled: isBranchFeatureCan });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus = isEmpty(branches) || !isBranchFeatureCan;
 
   // Provider state.
   const provider = {
     branches,
     isBranchesLoading,
     isBranchesFetching,
+    isEmptyStatus,
   };
 
   return (

src/containers/Preferences/Warehouses/WarehousesActions.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 
-import { FormattedMessage as T, Icon } from 'components';
+import { Features } from 'common';
+import { FeatureCan, FormattedMessage as T, Icon } from 'components';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
 
@@ -18,13 +19,15 @@ function WarehousesActions({
 
   return (
     <React.Fragment>
-      <Button
+      <FeatureCan feature={Features.Warehouses}>
-        icon={<Icon icon="plus" iconSize={12} />}
+        <Button
-        onClick={handleClickNewWarehouse}
+          icon={<Icon icon="plus" iconSize={12} />}
-        intent={Intent.PRIMARY}
+          onClick={handleClickNewWarehouse}
-      >
+          intent={Intent.PRIMARY}
-        <T id={'warehouses.label.new_warehouse'} />
+        >
-      </Button>
+          <T id={'warehouses.label.new_warehouse'} />
+        </Button>
+      </FeatureCan>
     </React.Fragment>
   );
 }

src/containers/Preferences/Warehouses/WarehousesGrid.js

@@ -10,14 +10,18 @@ import WarehousesGridItems from './WarehousesGridItems';
  */
 export default function WarehousesGrid() {
   // Retrieve list context.
-  const { warehouses, isWarehouesLoading } = useWarehousesContext();
+  const {
+    warehouses,
+    isWarehouesLoading,
+    isEmptyStatus,
+  } = useWarehousesContext();
 
   return (
     <React.Fragment>
       <WarehousesList>
         {isWarehouesLoading ? (
           <WarehousesSkeleton />
-        ) : isEmpty(warehouses) ? (
+        ) : isEmptyStatus ? (
           <WarehousesEmptyStatus />
         ) : (
           <WarehousesGridItems warehouses={warehouses} />

src/containers/Preferences/Warehouses/WarehousesProvider.js

@@ -3,7 +3,10 @@ import styled from 'styled-components';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import { useWarehouses, useCashflowAccounts } from 'hooks/query';
-import PreferencesPageLoader from '../PreferencesPageLoader';
+import { isEmpty } from 'lodash';
+
+import { Features } from 'common';
+import { useFeatureCan } from 'hooks/state';
 
 const WarehousesContext = React.createContext();
 
@@ -11,16 +14,24 @@ const WarehousesContext = React.createContext();
  * Warehouses data provider.
  */
 function WarehousesProvider({ query, ...props }) {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+  const isWarehouseFeatureCan = featureCan(Features.Warehouses);
+
   // Fetch warehouses list.
   const { data: warehouses, isLoading: isWarehouesLoading } = useWarehouses(
     query,
-    { keepPreviousData: true },
+    { enabled: isWarehouseFeatureCan },
   );
 
+  // Detarmines the datatable empty status.
+  const isEmptyStatus = isEmpty(warehouses) || !isWarehouseFeatureCan;
+
   // Provider state.
   const provider = {
     warehouses,
     isWarehouesLoading,
+    isEmptyStatus,
   };
 
   return (

src/containers/Preferences/Warehouses/components.js

@@ -107,6 +107,7 @@ export const WarehousesList = styled.div`
   display: flex;
   flex-wrap: wrap;
   margin: 15px;
+  height: 100%;
 `;
 
 export const WarehouseBoxRoot = styled.div`