feat(branches& warehouses): add empty status.

src/containers/Preferences/Branches/BranchesDataTable.js

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import { DataTable } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import BranchesEmptyStatus from './BranchesEmptyStatus';
 import { useBranchesTableColumns, ActionsMenu } from './components';
 import { useBranchesContext } from './BranchesProvider';
 
@@ -24,6 +25,8 @@ function BranchesDataTable({
   // Table columns.
   const columns = useBranchesTableColumns();
 
+  const Time = true;
+
   const { branches, isBranchesLoading, isBranchesFetching } =
     useBranchesContext();
 
@@ -35,6 +38,10 @@ function BranchesDataTable({
     openAlert('branch-delete', { branchId: id });
   };
 
+  if (Time) {
+    return <BranchesEmptyStatus />;
+  }
+
   return (
     <BranchesTable
       columns={columns}

src/containers/Preferences/Branches/BranchesEmptyStatus.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Button, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T, EmptyStatus } from '../../../components';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose } from 'utils';
+
+function BranchesEmptyStatus({
+  // #withDialogActions
+  openDialog,
+}) {
+  // Handle activate action branch.
+  const handleActivateBranch = () => {
+    openDialog('branch-activate', {});
+  };
+
+  return (
+    <EmptyStatus
+      title={'Id enim irure laborum laboris do'}
+      description={
+        'Commodo fugiat officia commodo proident officia excepteur proident anim. Eu sunt enim aute exercitation est. Dolore occaecat tempor elit commodo duis ipsum amet est quis. Est commodo laborum in nisi deserunt dolor ipsum.'
+      }
+      action={
+        <React.Fragment>
+          <Button
+            intent={Intent.PRIMARY}
+            large={true}
+            onClick={handleActivateBranch}
+          >
+            <T id={'activate'} />
+          </Button>
+
+          <Button intent={Intent.NONE} large={true}>
+            <T id={'learn_more'} />
+          </Button>
+        </React.Fragment>
+      }
+    />
+  );
+}
+export default compose(withDialogActions)(BranchesEmptyStatus);

src/containers/Preferences/Warehouses/Warehouses.js

@@ -4,27 +4,15 @@ import styled from 'styled-components';
 
 import { useWarehousesContext } from './WarehousesProvider';
 import WarehousesGridItems from './WarehousesGridItems';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-
-import { compose } from 'utils';
 
 /**
  * Warehouses.
  * @returns
  */
-function Warehouses({
-  // #withDashboardActions
-  changePreferencesPageTitle,
-}) {
+export default function Warehouses() {
   const { warehouses } = useWarehousesContext();
 
-  React.useEffect(() => {
-    changePreferencesPageTitle(intl.get('warehouses.label'));
-  }, [changePreferencesPageTitle]);
-
   return warehouses.map((warehouse) => (
     <WarehousesGridItems warehouse={warehouse} />
   ));
 }
-
-export default compose(withDashboardActions)(Warehouses);

src/containers/Preferences/Warehouses/WarehousesEmptyStatus.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Button, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T, EmptyStatus } from '../../../components';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose } from 'utils';
+
+function WarehousesEmptyStatus({
+  // #withDialogActions
+  openDialog,
+}) {
+  // Handle activate action warehouse.
+  const handleActivateWarehouse = () => {
+    openDialog('warehouse-activate', {});
+  };
+
+  return (
+    <EmptyStatus
+      title={'Id enim irure laborum laboris do'}
+      description={
+        'Commodo fugiat officia commodo proident officia excepteur proident anim. Eu sunt enim aute exercitation est. Dolore occaecat tempor elit commodo duis ipsum amet est quis. Est commodo laborum in nisi deserunt dolor ipsum.'
+      }
+      action={
+        <React.Fragment>
+          <Button
+            intent={Intent.PRIMARY}
+            large={true}
+            onClick={handleActivateWarehouse}
+          >
+            <T id={'activate'} />
+          </Button>
+
+          <Button intent={Intent.NONE} large={true}>
+            <T id={'learn_more'} />
+          </Button>
+        </React.Fragment>
+      }
+    />
+  );
+}
+
+export default compose(withDialogActions)(WarehousesEmptyStatus);

src/containers/Preferences/Warehouses/WarehousesList.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import Warehouses from './Warehouses';
+import WarehousesEmptyStatus from './WarehousesEmptyStatus';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+
+import { compose } from 'utils';
+
+function WarehousesList({
+  // #withDashboardActions
+  changePreferencesPageTitle,
+}) {
+  React.useEffect(() => {
+    changePreferencesPageTitle(intl.get('warehouses.label'));
+  }, [changePreferencesPageTitle]);
+
+  // if () {
+  //   return <WarehousesEmptyStatus />;
+  // }
+
+  return <Warehouses />;
+}
+
+export default compose(withDashboardActions)(WarehousesList);

src/containers/Preferences/Warehouses/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { WarehousesProvider } from './WarehousesProvider';
-import Warehouses from './Warehouses';
+import WarehousesList from './WarehousesList';
 
 /**
  * Warehouses Preferences.
@@ -9,7 +9,7 @@ import Warehouses from './Warehouses';
 export default function WarehousesPerences() {
   return (
     <WarehousesProvider>
-      <Warehouses />
+      <WarehousesList />
     </WarehousesProvider>
   );
 }