feat(Sales & Purchases ): add FormTopBar.

src/components/FormTopbar.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Navbar } from '@blueprintjs/core';
+
+/**
+ * @param {*} children
+ * @returns
+ */
+export function FormTopbar({ className, children }) {
+  return <FormTopBarRoot className={className}>{children}</FormTopBarRoot>;
+}
+
+const FormTopBarRoot = styled(Navbar)`
+  box-shadow: 0 0 0;
+  border-bottom: 2px solid #dce5ea;
+  height: 35px;
+  padding: 0 20px;
+
+  .bp3-navbar-group {
+    height: 35px;
+  }
+  .bp3-navbar-divider {
+    border-left-color: #d2dce2;
+  }
+
+  .bp3-skeleton {
+    max-height: 10px;
+  }
+
+  .bp3-button {
+    &:hover {
+      background: rgba(167, 182, 194, 0.12);
+      color: #32304a;
+    }
+  }
+`;
+
+export const DetailsBarSkeletonBase = styled.div`
+  letter-spacing: 10px;
+  margin-right: 10px;
+  margin-left: 10px;
+  font-size: 8px;
+  width: 140px;
+  height: 10px;
+`;

src/components/index.js

@@ -102,6 +102,7 @@ export * from './ExchangeRate';
 export * from './Branches';
 export * from './Warehouses';
 export * from './Currencies';
+export * from './FormTopbar'
 
 const Hint = FieldHint;
 

src/containers/Purchases/Bills/BillForm/BillFormTopBar.js

@@ -2,19 +2,24 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import {
   Alignment,
-  Navbar,
   NavbarGroup,
   NavbarDivider,
   Button,
   Classes,
 } from '@blueprintjs/core';
-import styled from 'styled-components';
 import {
   useSetPrimaryBranchToForm,
   useSetPrimaryWarehouseToForm,
 } from './utils';
 import { useFeatureCan } from 'hooks/state';
-import { Icon, BranchSelect, FeatureCan, WarehouseSelect } from 'components';
+import {
+  Icon,
+  BranchSelect,
+  FeatureCan,
+  WarehouseSelect,
+  FormTopbar,
+  DetailsBarSkeletonBase,
+} from 'components';
 import { useBillFormContext } from './BillFormProvider';
 import { Features } from 'common';
 
@@ -38,7 +43,7 @@ export default function BillFormTopBar() {
   }
 
   return (
-    <Navbar className={'navbar--dashboard-topbar'}>
+    <FormTopbar>
       <NavbarGroup align={Alignment.LEFT}>
         <FeatureCan feature={Features.Branches}>
           <BillFormSelectBranch />
@@ -50,7 +55,7 @@ export default function BillFormTopBar() {
           <BillFormSelectWarehouse />
         </FeatureCan>
       </NavbarGroup>
-    </Navbar>
+    </FormTopbar>
   );
 }
 
@@ -107,12 +112,3 @@ function BillBranchSelectButton({ label }) {
     />
   );
 }
-
-const DetailsBarSkeletonBase = styled.div`
-  letter-spacing: 10px;
-  margin-right: 10px;
-  margin-left: 10px;
-  font-size: 8px;
-  width: 140px;
-  height: 10px;
-`;

src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormTopBar.js

@@ -3,7 +3,6 @@ import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import {
   Alignment,
-  Navbar,
   NavbarGroup,
   NavbarDivider,
   Button,
@@ -14,7 +13,14 @@ import {
   useSetPrimaryWarehouseToForm,
 } from './utils';
 import { useFeatureCan } from 'hooks/state';
-import { Icon, BranchSelect, FeatureCan, WarehouseSelect } from 'components';
+import {
+  Icon,
+  BranchSelect,
+  FeatureCan,
+  WarehouseSelect,
+  FormTopbar,
+  DetailsBarSkeletonBase,
+} from 'components';
 import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
 import { Features } from 'common';
 
@@ -38,7 +44,7 @@ export default function VendorCreditNoteFormTopBar() {
   }
 
   return (
-    <Navbar className={'navbar--dashboard-topbar'}>
+    <FormTopbar>
       <NavbarGroup align={Alignment.LEFT}>
         <FeatureCan feature={Features.Branches}>
           <VendorCreditNoteFormSelectBranch />
@@ -50,7 +56,7 @@ export default function VendorCreditNoteFormTopBar() {
           <VendorCreditFormSelectWarehouse />
         </FeatureCan>
       </NavbarGroup>
-    </Navbar>
+    </FormTopbar>
   );
 }
 
@@ -107,12 +113,3 @@ function VendorCreditNoteBranchSelectButton({ label }) {
     />
   );
 }
-
-const DetailsBarSkeletonBase = styled.div`
-  letter-spacing: 10px;
-  margin-right: 10px;
-  margin-left: 10px;
-  font-size: 8px;
-  width: 140px;
-  height: 10px;
-`;

src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormTopBar.js

@@ -10,7 +10,13 @@ import {
 import styled from 'styled-components';
 import { useSetPrimaryBranchToForm } from './utils';
 import { useFeatureCan } from 'hooks/state';
-import { Icon, BranchSelect, FeatureCan } from 'components';
+import {
+  Icon,
+  BranchSelect,
+  FeatureCan,
+  FormTopbar,
+  DetailsBarSkeletonBase,
+} from 'components';
 import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
 import { Features } from 'common';
 
@@ -30,13 +36,13 @@ export default function PaymentMadeFormTopBar() {
     return null;
   }
   return (
-    <Navbar className={'navbar--dashboard-topbar'}>
+    <FormTopbar>
       <NavbarGroup align={Alignment.LEFT}>
         <FeatureCan feature={Features.Branches}>
           <PaymentMadeFormSelectBranch />
         </FeatureCan>
       </NavbarGroup>
-    </Navbar>
+    </FormTopbar>
   );
 }
 
@@ -66,12 +72,3 @@ function PaymentMadeBranchSelectButton({ label }) {
     />
   );
 }
-
-const DetailsBarSkeletonBase = styled.div`
-  letter-spacing: 10px;
-  margin-right: 10px;
-  margin-left: 10px;
-  font-size: 8px;
-  width: 140px;
-  height: 10px;
-`;

src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormTopBar.js

@@ -2,19 +2,24 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import {
   Alignment,
-  Navbar,
   NavbarGroup,
   NavbarDivider,
   Button,
   Classes,
 } from '@blueprintjs/core';
-import styled from 'styled-components';
 import {
   useSetPrimaryBranchToForm,
   useSetPrimaryWarehouseToForm,
 } from './utils';
 import { useFeatureCan } from 'hooks/state';
-import { Icon, BranchSelect, FeatureCan, WarehouseSelect } from 'components';
+import {
+  Icon,
+  BranchSelect,
+  FeatureCan,
+  WarehouseSelect,
+  FormTopbar,
+  DetailsBarSkeletonBase,
+} from 'components';
 import { useCreditNoteFormContext } from './CreditNoteFormProvider';
 import { Features } from 'common';
 
@@ -38,7 +43,7 @@ export default function CreditNoteFormTopbar() {
   }
 
   return (
-    <Navbar className={'navbar--dashboard-topbar'}>
+    <FormTopbar>
       <NavbarGroup align={Alignment.LEFT}>
         <FeatureCan feature={Features.Branches}>
           <CreditNoteFormSelectBranch />
@@ -50,7 +55,7 @@ export default function CreditNoteFormTopbar() {
           <CreditFormSelectWarehouse />
         </FeatureCan>
       </NavbarGroup>
-    </Navbar>
+    </FormTopbar>
   );
 }
 
@@ -107,12 +112,3 @@ function CreditNoteBranchSelectButton({ label }) {
     />
   );
 }
-
-const DetailsBarSkeletonBase = styled.div`
-  letter-spacing: 10px;
-  margin-right: 10px;
-  margin-left: 10px;
-  font-size: 8px;
-  width: 140px;
-  height: 10px;
-`;

src/containers/Sales/Estimates/EstimateForm/EstimtaeFormTopBar.js

@@ -2,7 +2,6 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import {
   Alignment,
-  Navbar,
   NavbarGroup,
   NavbarDivider,
   Button,
@@ -14,7 +13,14 @@ import {
   useSetPrimaryWarehouseToForm,
 } from './utils';
 import { useFeatureCan } from 'hooks/state';
-import { Icon, BranchSelect, FeatureCan, WarehouseSelect } from 'components';
+import {
+  Icon,
+  BranchSelect,
+  FeatureCan,
+  WarehouseSelect,
+  FormTopbar,
+  DetailsBarSkeletonBase,
+} from 'components';
 import { useEstimateFormContext } from './EstimateFormProvider';
 import { Features } from 'common';
 
@@ -38,7 +44,7 @@ export default function EstimtaeFormTopBar() {
   }
 
   return (
-    <Navbar className={'navbar--dashboard-topbar'}>
+    <FormTopbar>
       <NavbarGroup align={Alignment.LEFT}>
         <FeatureCan feature={Features.Branches}>
           <EstimateFormSelectBranch />
@@ -50,7 +56,7 @@ export default function EstimtaeFormTopBar() {
           <EstimateFormSelectWarehouse />
         </FeatureCan>
       </NavbarGroup>
-    </Navbar>
+    </FormTopbar>
   );
 }
 
@@ -107,12 +113,3 @@ function EstimateBranchSelectButton({ label }) {
     />
   );
 }
-
-const DetailsBarSkeletonBase = styled.div`
-  letter-spacing: 10px;
-  margin-right: 10px;
-  margin-left: 10px;
-  font-size: 8px;
-  width: 140px;
-  height: 10px;
-`;

src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.js

@@ -15,7 +15,13 @@ import {
 } from './utils';
 
 import { useFeatureCan } from 'hooks/state';
-import { Icon, BranchSelect, FeatureCan, WarehouseSelect } from 'components';
+import {
+  Icon,
+  BranchSelect,
+  FeatureCan,
+  WarehouseSelect,
+  FormTopbar,
+} from 'components';
 import { useInvoiceFormContext } from './InvoiceFormProvider';
 import { Features } from 'common';
 
@@ -38,7 +44,7 @@ export default function InvoiceFormTopBar() {
     return null;
   }
   return (
-    <Navbar className={'navbar--dashboard-topbar'}>
+    <FormTopbar>
       <NavbarGroup align={Alignment.LEFT}>
         <FeatureCan feature={Features.Branches}>
           <InvoiceFormSelectBranch />
@@ -50,7 +56,7 @@ export default function InvoiceFormTopBar() {
           <InvoiceFormSelectWarehouse />
         </FeatureCan>
       </NavbarGroup>
-    </Navbar>
+    </FormTopbar>
   );
 }
 

src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormTopBar.js

@@ -1,16 +1,15 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import {
-  Alignment,
-  Navbar,
-  NavbarGroup,
-  Button,
-  Classes,
-} from '@blueprintjs/core';
-import styled from 'styled-components';
+import { Alignment, NavbarGroup, Button, Classes } from '@blueprintjs/core';
 import { useSetPrimaryBranchToForm } from './utils';
 import { useFeatureCan } from 'hooks/state';
-import { Icon, BranchSelect, FeatureCan } from 'components';
+import {
+  Icon,
+  BranchSelect,
+  FeatureCan,
+  FormTopbar,
+  DetailsBarSkeletonBase,
+} from 'components';
 import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
 import { Features } from 'common';
 
@@ -31,13 +30,13 @@ export default function PaymentReceiveFormTopBar() {
   }
 
   return (
-    <Navbar className={'navbar--dashboard-topbar'}>
+    <FormTopbar>
       <NavbarGroup align={Alignment.LEFT}>
         <FeatureCan feature={Features.Branches}>
           <PaymentReceiveFormSelectBranch />
         </FeatureCan>
       </NavbarGroup>
-    </Navbar>
+    </FormTopbar>
   );
 }
 
@@ -67,12 +66,3 @@ function PaymentReceiveBranchSelectButton({ label }) {
     />
   );
 }
-
-const DetailsBarSkeletonBase = styled.div`
-  letter-spacing: 10px;
-  margin-right: 10px;
-  margin-left: 10px;
-  font-size: 8px;
-  width: 140px;
-  height: 10px;
-`;

src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js

@@ -19,7 +19,7 @@ import ReceiptItemsEntriesEditor from './ReceiptItemsEntriesEditor';
 import ReceiptFormFloatingActions from './ReceiptFormFloatingActions';
 import ReceiptFormFooter from './ReceiptFormFooter';
 import ReceiptFormDialogs from './ReceiptFormDialogs';
-import ReceiptFormTopbar from './ReceiptFormTopbar';
+import ReceiptFormTopBar from './ReceiptFormTopBar';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withSettings from 'containers/Settings/withSettings';
@@ -158,7 +158,7 @@ function ReceiptForm({
         onSubmit={handleFormSubmit}
       >
         <Form>
-          <ReceiptFormTopbar />
+          <ReceiptFormTopBar />
           <ReceiptFromHeader />
           <ReceiptItemsEntriesEditor />
           <ReceiptFormFooter />

src/containers/Sales/Receipts/ReceiptForm/ReceiptFormTopbar.js

@@ -3,7 +3,6 @@ import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import {
   Alignment,
-  Navbar,
   NavbarGroup,
   NavbarDivider,
   Button,
@@ -15,7 +14,14 @@ import {
 } from './utils';
 
 import { useFeatureCan } from 'hooks/state';
-import { Icon, BranchSelect, FeatureCan, WarehouseSelect } from 'components';
+import {
+  Icon,
+  BranchSelect,
+  FeatureCan,
+  WarehouseSelect,
+  FormTopbar,
+  DetailsBarSkeletonBase,
+} from 'components';
 import { useReceiptFormContext } from './ReceiptFormProvider';
 import { Features } from 'common';
 
@@ -23,7 +29,7 @@ import { Features } from 'common';
  * Receipt form topbar .
  * @returns {JSX.Element}
  */
-export default function ReceiptFormTopbar() {
+export default function ReceiptFormTopBar() {
   // Features guard.
   const { featureCan } = useFeatureCan();
 
@@ -39,7 +45,7 @@ export default function ReceiptFormTopbar() {
   }
 
   return (
-    <Navbar className={'navbar--dashboard-topbar'}>
+    <FormTopbar>
       <NavbarGroup align={Alignment.LEFT}>
         <FeatureCan feature={Features.Branches}>
           <ReceiptFormSelectBranch />
@@ -51,7 +57,7 @@ export default function ReceiptFormTopbar() {
           <ReceiptFormSelectWarehouse />
         </FeatureCan>
       </NavbarGroup>
-    </Navbar>
+    </FormTopbar>
   );
 }
 
@@ -116,12 +122,3 @@ function ReceiptWarehouseSelectButton({ label }) {
     />
   );
 }
-
-const DetailsBarSkeletonBase = styled.div`
-  letter-spacing: 10px;
-  margin-right: 10px;
-  margin-left: 10px;
-  font-size: 8px;
-  width: 140px;
-  height: 10px;
-`;

src/style/pages/Dashboard/Dashboard.scss

@@ -591,28 +591,3 @@ $dashboard-views-bar-height: 44px;
     }
   }
 }
-
-.navbar--dashboard-topbar {
-  box-shadow: 0 0 0;
-  border-bottom: 2px solid #dce5ea;
-  height: 35px;
-  padding: 0 20px;
-
-  .bp3-navbar-group {
-    height: 35px;
-  }
-  .bp3-navbar-divider {
-    border-left-color: #d2dce2;
-  }
-
-  .bp3-skeleton {
-    max-height: 10px;
-  }
-
-  .bp3-button {
-    &:hover {
-      background: rgba(167, 182, 194, 0.12);
-      color: #32304a;
-    }
-  }
-}