From b272ddf23a0a0b4233afcd99841351ac53565582 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sun, 13 Feb 2022 18:26:59 +0200
Subject: [PATCH] feat(warehouse ): warehouses skeleton.

---
 .../Warehouses/WarehousesGridItems.js         |  5 ++-
 .../Preferences/Warehouses/components.js      | 32 +++++++++++++------
 .../Invoices/InvoiceForm/BaseCurrency.js      | 12 ++++---
 3 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/containers/Preferences/Warehouses/WarehousesGridItems.js b/src/containers/Preferences/Warehouses/WarehousesGridItems.js
index 4668ce10a..31219b5a2 100644
--- a/src/containers/Preferences/Warehouses/WarehousesGridItems.js
+++ b/src/containers/Preferences/Warehouses/WarehousesGridItems.js
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { ContextMenu2 } from '@blueprintjs/popover2';
 
 import { WarehouseContextMenu, WarehousesGrid } from './components';
+import { useWarehousesContext } from './WarehousesProvider';
 
 import withAlertsActions from '../../Alert/withAlertActions';
 import withDialogActions from '../../Dialog/withDialogActions';
@@ -20,6 +21,8 @@ function WarehousesGridItems({
 
   warehouse,
 }) {
+  const { isWarehouesLoading } = useWarehousesContext();
+
   // Handle edit warehouse.
   const handleEditWarehouse = () => {
     openDialog('warehouse-form', { warehouseId: warehouse.id, action: 'edit' });
@@ -45,7 +48,7 @@ function WarehousesGridItems({
         />
       }
     >
-      <WarehousesGrid warehouse={warehouse} />
+      <WarehousesGrid warehouse={warehouse} loading={isWarehouesLoading} />
     </ContextMenu2>
   );
 }
diff --git a/src/containers/Preferences/Warehouses/components.js b/src/containers/Preferences/Warehouses/components.js
index 6be10907c..b37ad8e06 100644
--- a/src/containers/Preferences/Warehouses/components.js
+++ b/src/containers/Preferences/Warehouses/components.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
+import { Classes } from '@blueprintjs/core';
+import clsx from 'classnames';
 
 import { Menu, MenuItem, MenuDivider, Intent } from '@blueprintjs/core';
 import { If, Icon, Can } from '../../../components';
@@ -37,21 +39,33 @@ export function WarehouseContextMenu({
   );
 }
 
-export function WarehousesGrid({ warehouse }) {
+export function WarehousesGrid({ warehouse, loading }) {
   return (
     <WarehouseGridWrapper>
       <WarehouseHeader>
-        <WarehouseTitle>{warehouse.name}</WarehouseTitle>
-        <WarehouseCode>{warehouse.code}</WarehouseCode>
+        <WarehouseTitle className={clsx({ [Classes.SKELETON]: loading })}>
+          {warehouse.name}
+        </WarehouseTitle>
+        <WarehouseCode className={clsx({ [Classes.SKELETON]: loading })}>
+          {warehouse.code}
+        </WarehouseCode>
         <WarehouseIcon>
-          <Icon icon="warehouse-16" iconSize={20} />
+          {!loading && <Icon icon="warehouse-16" iconSize={20} />}
         </WarehouseIcon>
       </WarehouseHeader>
       <WarehouseContent>
-        <WarehouseItem>{warehouse.city}</WarehouseItem>
-        <WarehouseItem>{warehouse.country}</WarehouseItem>
-        <WarehouseItem>{warehouse.email}</WarehouseItem>
-        <WarehouseItem>{warehouse.phone_number}</WarehouseItem>
+        <WarehouseItem className={clsx({ [Classes.SKELETON]: loading })}>
+          {warehouse.city}
+        </WarehouseItem>
+        <WarehouseItem className={clsx({ [Classes.SKELETON]: loading })}>
+          {warehouse.country}
+        </WarehouseItem>
+        <WarehouseItem className={clsx({ [Classes.SKELETON]: loading })}>
+          {warehouse.email}
+        </WarehouseItem>
+        <WarehouseItem className={clsx({ [Classes.SKELETON]: loading })}>
+          {warehouse.phone_number}
+        </WarehouseItem>
       </WarehouseContent>
     </WarehouseGridWrapper>
   );
@@ -113,7 +127,7 @@ const WarehouseContent = styled.div`
 const WarehouseItem = styled.div`
   font-size: 11px;
   color: #000;
-  line-height: 1.3rem;
+  margin-bottom: 5px;
   text-overflow: ellipsis;
   overflow: hidden;
 `;
diff --git a/src/containers/Sales/Invoices/InvoiceForm/BaseCurrency.js b/src/containers/Sales/Invoices/InvoiceForm/BaseCurrency.js
index c4f72e7cc..eca07ade5 100644
--- a/src/containers/Sales/Invoices/InvoiceForm/BaseCurrency.js
+++ b/src/containers/Sales/Invoices/InvoiceForm/BaseCurrency.js
@@ -10,11 +10,13 @@ import withCurrentOrganization from 'containers/Organization/withCurrentOrganiza
  */
 function BaseCurrency({
   // #withCurrentOrganization
-  organization: { base_currency = '' },
+  organization: { base_currency },
+  isForeignCustomer,
 }) {
-  // if (base_currency.length <= 0) {
-  //   return null;
-  // }
+  console.log(isForeignCustomer, 'XXXX');
+  if (isForeignCustomer) {
+    return null;
+  }
 
   return (
     <BaseCurrencySign>
@@ -26,6 +28,8 @@ function BaseCurrency({
 export default R.compose(withCurrentOrganization())(BaseCurrency);
 
 const BaseCurrencySign = styled.div`
+  display: flex;
+  align-items: center;
   font-size: 10px;
   margin-left: 5px;
   span {