feat(warehouse): add credit & edit & delete warehouse.

src/containers/Preferences/Warehouses/Warehouses.js

@@ -1,63 +1,30 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import styled from 'styled-components';
-import { ContextMenu2 } from '@blueprintjs/popover2';
 
+import { useWarehousesContext } from './WarehousesProvider';
 import WarehousesGridItems from './WarehousesGridItems';
-import { WarehouseContextMenu } from './components';
-import withAlertsActions from '../../Alert/withAlertActions';
-import withDialogActions from '../../Dialog/withDialogActions';
-import { compose } from 'utils';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
-const WAREHOUSE = [
-  {
-    title: 'Warehouse #1',
-    code: '1001',
-    city: 'City',
-    country: 'Country',
-    email: 'email@emial.com',
-    phone: '09xxxxxxxx',
-  },
-  {
-    title: 'Warehouse #2',
-    code: '100',
-    city: 'City',
-    country: 'Country',
-    email: 'email@emial.com',
-    phone: '09xxxxxxxx',
-  },
-  {
-    title: 'Warehouse #2',
-    code: '100',
-    city: 'City',
-    country: 'Country',
-    email: 'email@emial.com',
-    phone: '09xxxxxxxx',
-  },
-];
+import { compose } from 'utils';
 
 /**
  * Warehouses.
  * @returns
  */
 function Warehouses({
-  // #withAlertsActions
-  openAlert,
-  // #withDialogActions
-  openDialog,
+  // #withDashboardActions
+  changePreferencesPageTitle,
 }) {
-  return (
-    <ContextMenu2 content={<WarehouseContextMenu />}>
-      <WarehouseGridWrap>
-        <WarehousesGridItems warehouses={WAREHOUSE} />
-      </WarehouseGridWrap>
-    </ContextMenu2>
-  );
+  const { warehouses } = useWarehousesContext();
+
+  React.useEffect(() => {
+    changePreferencesPageTitle(intl.get('warehouses.label'));
+  }, [changePreferencesPageTitle]);
+
+  return warehouses.map((warehouse) => (
+    <WarehousesGridItems warehouse={warehouse} />
+  ));
 }
 
-export default compose(withAlertsActions, withDialogActions)(Warehouses);
-
-const WarehouseGridWrap = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  margin: 15px;
-`;
+export default compose(withDashboardActions)(Warehouses);

src/containers/Preferences/Warehouses/WarehousesAlerts.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const WarehouseDeleteAlert = React.lazy(() =>
+  import('../../Alerts/Warehouses/WarehouseDeleteAlert'),
+);
+
+/**
+ * Warehouses alerts.
+ */
+export default [{ name: 'warehouse-delete', component: WarehouseDeleteAlert }];

src/containers/Preferences/Warehouses/WarehousesGridItems.js

@@ -1,74 +1,56 @@
 import React from 'react';
 import styled from 'styled-components';
+import { ContextMenu2 } from '@blueprintjs/popover2';
+
+import { WarehouseContextMenu, WarehousesGrid } from './components';
+
+import withAlertsActions from '../../Alert/withAlertActions';
+import withDialogActions from '../../Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Warehouse grid items.
+ * @returns
+ */
+function WarehousesGridItems({
+  // #withAlertsActions
+  openAlert,
+  // #withDialogActions
+  openDialog,
+
+  warehouse,
+}) {
+  // Handle edit warehouse.
+  const handleEditWarehouse = () => {
+    openDialog('warehouse-form', { warehouseId: warehouse.id, action: 'edit' });
+  };
+
+  // Handle delete warehouse.
+  const handleDeleteWarehouse = () => {
+    openAlert('warehouse-delete', { warehouseId: warehouse.id });
+  };
 
-function WarehousesGrid({ warehouse }) {
   return (
-    <WarehouseGrid>
-      <WarehouseHeader>
-        <WarehouseTitle>{warehouse.title}</WarehouseTitle>
-        <WarehouseCode>{warehouse.code}</WarehouseCode>
-      </WarehouseHeader>
-      <WarehouseInfoItem>{warehouse.city}</WarehouseInfoItem>
-      <WarehouseInfoItem>{warehouse.country}</WarehouseInfoItem>
-      <WarehouseInfoItem>{warehouse.email}</WarehouseInfoItem>
-      <WarehouseInfoItem>{warehouse.phone}</WarehouseInfoItem>
-    </WarehouseGrid>
+    <ContextMenu2
+      content={
+        <WarehouseContextMenu
+          onEditClick={handleEditWarehouse}
+          onDeleteClick={handleDeleteWarehouse}
+        />
+      }
+    >
+      <WarehousesGrid warehouse={warehouse} />
+    </ContextMenu2>
   );
 }
 
-/**
- * Warehouse Grid.
- * @returns
- */
-function WarehousesGridItems({ warehouses }) {
-  return warehouses.map((warehouse) => (
-    <WarehousesGrid warehouse={warehouse} />
-  ));
-}
-export default WarehousesGridItems;
+export default compose(
+  withAlertsActions,
+  withDialogActions,
+)(WarehousesGridItems);
 
-const WarehouseGrid = styled.div`
+const WarehouseGridWrap = styled.div`
   display: flex;
-  flex-direction: column;
-  border-radius: 3px;
-  width: 300px; // 453px
-  height: 160px; //225px
-  background: #fff;
-  margin: 5px;
-  padding: 16px 12px 10px;
-  border: 1px solid #c8cad0; //#CFD1D6
-  transition: all 0.1s ease-in-out;
-
-  &:hover {
-    border-color: #0153cc;
-  }
-`;
-
-const WarehouseTitle = styled.div`
-  font-size: 14px; //22px
-  font-style: inherit;
-  color: #000;
-  white-space: nowrap;
-  font-weight: 500;
-  line-height: 1;
-`;
-
-const WarehouseHeader = styled.div`
-  margin: 4px 0px 15px;
-`;
-
-const WarehouseCode = styled.div`
-  display: inline-block;
-  font-size: 11px;
-  color: #6b7176;
-`;
-
-const WarehouseInfoItem = styled.div`
-  display: inline-block;
-  font-size: 12px;
-  color: #000;
-  line-height: 1.3rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin: 0;
+  flex-wrap: wrap;
+  margin: 15px;
 `;

src/containers/Preferences/Warehouses/WarehousesList.js

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

src/containers/Preferences/Warehouses/WarehousesProvider.js

@@ -1,7 +1,9 @@
 import React from 'react';
+import styled from 'styled-components';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
-import styled from 'styled-components';
+import { useWarehouses } from 'hooks/query';
+import PreferencesPageLoader from '../PreferencesPageLoader';
 
 const WarehousesContext = React.createContext();
 
@@ -9,12 +11,24 @@ const WarehousesContext = React.createContext();
  * Warehouses data provider.
  */
 function WarehousesProvider({ ...props }) {
+  // Fetch warehouses list.
+  const { data: warehouses, isLoading: isWarehouesLoading } = useWarehouses();
+
   // Provider state.
-  const provider = {};
+  const provider = {
+    warehouses,
+    isWarehouesLoading,
+  };
 
   return (
     <div className={classNames(CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT)}>
-      <WarehousesContext.Provider value={provider} {...props} />
+      <WarehousePreference>
+        {isWarehouesLoading ? (
+          <PreferencesPageLoader />
+        ) : (
+          <WarehousesContext.Provider value={provider} {...props} />
+        )}
+      </WarehousePreference>
     </div>
   );
 }
@@ -22,3 +36,9 @@ function WarehousesProvider({ ...props }) {
 const useWarehousesContext = () => React.useContext(WarehousesContext);
 
 export { WarehousesProvider, useWarehousesContext };
+
+const WarehousePreference = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  margin: 15px;
+`;

src/containers/Preferences/Warehouses/components.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
 
 import { Menu, MenuItem, MenuDivider, Intent } from '@blueprintjs/core';
 import { If, Icon, Can } from '../../../components';
@@ -35,3 +36,64 @@ export function WarehouseContextMenu({
     </Menu>
   );
 }
+
+export function WarehousesGrid({ warehouse }) {
+  return (
+    <WarehouseGrid>
+      <WarehouseHeader>
+        <WarehouseTitle>{warehouse.name}</WarehouseTitle>
+        <WarehouseCode>{warehouse.code}</WarehouseCode>
+      </WarehouseHeader>
+      <WarehouseInfoItem>{warehouse.city}</WarehouseInfoItem>
+      <WarehouseInfoItem>{warehouse.country}</WarehouseInfoItem>
+      <WarehouseInfoItem>{warehouse.email}</WarehouseInfoItem>
+      <WarehouseInfoItem>{warehouse.phone_number}</WarehouseInfoItem>
+    </WarehouseGrid>
+  );
+}
+
+const WarehouseGrid = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: 3px;
+  width: 280px; // 453px
+  height: 160px; //225px
+  background: #fff;
+  margin: 5px;
+  padding: 16px 12px 10px;
+  border: 1px solid #c8cad0; //#CFD1D6
+  transition: all 0.1s ease-in-out;
+
+  &:hover {
+    border-color: #0153cc;
+  }
+`;
+
+const WarehouseTitle = styled.div`
+  font-size: 14px; //22px
+  font-style: inherit;
+  color: #000;
+  white-space: nowrap;
+  font-weight: 500;
+  line-height: 1;
+`;
+
+const WarehouseHeader = styled.div`
+  margin: 4px 0px 15px;
+`;
+
+const WarehouseCode = styled.div`
+  display: inline-block;
+  font-size: 11px;
+  color: #6b7176;
+`;
+
+const WarehouseInfoItem = styled.div`
+  display: inline-block;
+  font-size: 12px;
+  color: #000;
+  line-height: 1.3rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+`;

src/containers/Preferences/Warehouses/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { WarehousesProvider } from './WarehousesProvider';
-import Warehouses from './WarehousesList';
+import Warehouses from './Warehouses';
 
 /**
  * Warehouses Preferences.