From 19a3de312252ebea698419ea15ea89093cc1bc1a Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Mon, 7 Feb 2022 23:00:56 +0200
Subject: [PATCH] feat(branches& warehouses): add empty status.

---
 .../Preferences/Branches/BranchesDataTable.js |  7 +++
 .../Branches/BranchesEmptyStatus.js           | 42 ++++++++++++++++++
 .../Preferences/Warehouses/Warehouses.js      | 14 +-----
 .../Warehouses/WarehousesEmptyStatus.js       | 43 +++++++++++++++++++
 .../Preferences/Warehouses/WarehousesList.js  | 24 +++++++++++
 .../Preferences/Warehouses/index.js           |  4 +-
 6 files changed, 119 insertions(+), 15 deletions(-)
 create mode 100644 src/containers/Preferences/Branches/BranchesEmptyStatus.js
 create mode 100644 src/containers/Preferences/Warehouses/WarehousesEmptyStatus.js
 create mode 100644 src/containers/Preferences/Warehouses/WarehousesList.js

diff --git a/src/containers/Preferences/Branches/BranchesDataTable.js b/src/containers/Preferences/Branches/BranchesDataTable.js
index 2f238fafa..abdab2a13 100644
--- a/src/containers/Preferences/Branches/BranchesDataTable.js
+++ b/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}
diff --git a/src/containers/Preferences/Branches/BranchesEmptyStatus.js b/src/containers/Preferences/Branches/BranchesEmptyStatus.js
new file mode 100644
index 000000000..e24f6e416
--- /dev/null
+++ b/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);
diff --git a/src/containers/Preferences/Warehouses/Warehouses.js b/src/containers/Preferences/Warehouses/Warehouses.js
index 30e1c0388..936d954c1 100644
--- a/src/containers/Preferences/Warehouses/Warehouses.js
+++ b/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);
diff --git a/src/containers/Preferences/Warehouses/WarehousesEmptyStatus.js b/src/containers/Preferences/Warehouses/WarehousesEmptyStatus.js
new file mode 100644
index 000000000..51b6543b4
--- /dev/null
+++ b/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);
diff --git a/src/containers/Preferences/Warehouses/WarehousesList.js b/src/containers/Preferences/Warehouses/WarehousesList.js
new file mode 100644
index 000000000..fc6051b3a
--- /dev/null
+++ b/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);
diff --git a/src/containers/Preferences/Warehouses/index.js b/src/containers/Preferences/Warehouses/index.js
index 5a7270e10..e3d8066e4 100644
--- a/src/containers/Preferences/Warehouses/index.js
+++ b/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>
   );
 }