From c77009b921ae4520522a96504c6872dded1e949e Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sun, 13 Feb 2022 22:13:03 +0200
Subject: [PATCH] fix(invoice): Skeleton warehouses & branch loading & style
 action top bar.

---
 src/components/CustomSelectList.js            | 12 +++++++---
 .../Invoices/InvoiceForm/BaseCurrency.js      |  2 +-
 .../Invoices/InvoiceForm/InvoiceFormTopBar.js | 23 +++++++++++--------
 src/style/pages/Dashboard/Dashboard.scss      |  8 ++++---
 4 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/components/CustomSelectList.js b/src/components/CustomSelectList.js
index 2b0ad4bad..36e783f6b 100644
--- a/src/components/CustomSelectList.js
+++ b/src/components/CustomSelectList.js
@@ -1,10 +1,13 @@
 import React from 'react';
+import styled from 'styled-components';
 import {
   Button,
   MenuItem,
   PopoverInteractionKind,
   Position,
+  Classes,
 } from '@blueprintjs/core';
+import clsx from 'classnames';
 import { defaultTo } from 'lodash';
 import { Select } from '@blueprintjs/select';
 import { FormattedMessage as T, Icon } from 'components';
@@ -18,7 +21,8 @@ export default function CustomSelectList({
   items,
   initialItemId,
   selectedItemId,
-  text,
+  loading = false,
+  defaultSelectText,
   onItemSelected,
   buttonProps,
 }) {
@@ -85,17 +89,19 @@ export default function CustomSelectList({
           offset: { offset: '0, 4' },
         },
       }}
+      className={clsx({ [Classes.SKELETON]: loading })}
     >
       <Button
         text={
           selecetedItem
-            ? `${text}:${selecetedItem.name} ${defaultTo(
+            ? `${defaultSelectText}:${selecetedItem.name} ${defaultTo(
                 selecetedItem.code,
                 '',
               )}`
-            : `${text}: Bigcapital`
+            : `${defaultSelectText}: Bigcapital`
         }
         minimal={true}
+        small={true}
         {...buttonProps}
       />
     </Select>
diff --git a/src/containers/Sales/Invoices/InvoiceForm/BaseCurrency.js b/src/containers/Sales/Invoices/InvoiceForm/BaseCurrency.js
index eca07ade5..3aa7bb156 100644
--- a/src/containers/Sales/Invoices/InvoiceForm/BaseCurrency.js
+++ b/src/containers/Sales/Invoices/InvoiceForm/BaseCurrency.js
@@ -13,7 +13,7 @@ function BaseCurrency({
   organization: { base_currency },
   isForeignCustomer,
 }) {
-  console.log(isForeignCustomer, 'XXXX');
+  
   if (isForeignCustomer) {
     return null;
   }
diff --git a/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.js b/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.js
index 90d4c9bbd..871bd475b 100644
--- a/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.js
+++ b/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FastField } from 'formik';
+import { FastField, Field } from 'formik';
 import {
   Alignment,
   Navbar,
@@ -18,7 +18,8 @@ import { useInvoiceFormContext } from './InvoiceFormProvider';
 import { Features } from 'common';
 
 export default function InvoiceFormTopBar() {
-  const { warehouses, branches } = useInvoiceFormContext();
+  const { branches, warehouses, isWarehouesLoading, isBranchesLoading } =
+    useInvoiceFormContext();
 
   const { featureCan } = useFeatureCan();
 
@@ -30,42 +31,44 @@ export default function InvoiceFormTopBar() {
     <Navbar className={'navbar--dashboard-topbar'}>
       <NavbarGroup align={Alignment.LEFT}>
         <FeatureCan feature={Features.Warehouses}>
-          <FastField name={'branch_id'}>
+          <Field name={'branch_id'}>
             {({ form, field: { value }, meta: { error, touched } }) => (
               <CustomSelectList
                 items={branches}
-                text={'Branch'}
+                loading={isBranchesLoading}
+                defaultSelectText={'Branch'}
                 onItemSelected={({ id }) => {
                   form.setFieldValue('branch_id', id);
                 }}
                 selectedItemId={value}
                 buttonProps={{
-                  icon: <Icon icon={'branch-16'} iconSize={20} />,
+                  icon: <Icon icon={'branch-16'} iconSize={16} />,
                 }}
               />
             )}
-          </FastField>
+          </Field>
         </FeatureCan>
 
         {featureCan(Features.Warehouses) && featureCan(Features.Branches) && (
           <NavbarDivider />
         )}
         <FeatureCan feature={Features.Warehouses}>
-          <FastField name={'warehouse_id'}>
+          <Field name={'warehouse_id'}>
             {({ form, field: { value }, meta: { error, touched } }) => (
               <CustomSelectList
                 items={warehouses}
-                text={'Warehosue'}
+                loading={isWarehouesLoading}
+                defaultSelectText={'Warehosue'}
                 onItemSelected={({ id }) => {
                   form.setFieldValue('warehouse_id', id);
                 }}
                 selectedItemId={value}
                 buttonProps={{
-                  icon: <Icon icon={'warehouse-16'} iconSize={20} />,
+                  icon: <Icon icon={'warehouse-16'} iconSize={16} />,
                 }}
               />
             )}
-          </FastField>
+          </Field>
         </FeatureCan>
       </NavbarGroup>
     </Navbar>
diff --git a/src/style/pages/Dashboard/Dashboard.scss b/src/style/pages/Dashboard/Dashboard.scss
index d17b56fc7..e1e55277f 100644
--- a/src/style/pages/Dashboard/Dashboard.scss
+++ b/src/style/pages/Dashboard/Dashboard.scss
@@ -575,17 +575,19 @@ $dashboard-views-bar-height: 44px;
 .navbar--dashboard-topbar {
   box-shadow: 0 0 0;
   border-bottom: 1px solid #d2dce2;
-  /* height: 44px; */
-  height: 37px;
+  height: 35px;
   padding: 0 20px;
 
   .bp3-navbar-group {
-    height: 37px;
+    height: 35px;
   }
 
   .bp3-navbar-divider {
     border-left-color: #d2dce2;
   }
+  .bp3-skeleton {
+    max-height: 10px;
+  }
   .bp3-button {
     &:hover {
       background: rgba(167, 182, 194, 0.12);