feat(Sales & Purchases ): add branch & warehouse.

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

@@ -16,6 +16,7 @@ import VendorCreditNoteItemsEntriesEditor from './VendorCreditNoteItemsEntriesEd
 import VendorCreditNoteFormFooter from './VendorCreditNoteFormFooter';
 import VendorCreditNoteFloatingActions from './VendorCreditNoteFloatingActions';
 import VendorCreditNoteFormDialogs from './VendorCreditNoteFormDialogs';
+import VendorCreditNoteFormTopBar from './VendorCreditNoteFormTopBar';
 
 import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
 
@@ -151,6 +152,7 @@ function VendorCreditNoteForm({
         onSubmit={handleFormSubmit}
       >
         <Form>
+          <VendorCreditNoteFormTopBar />
           <VendorCreditNoteFormHeader />
           <VendorCreditNoteItemsEntriesEditor />
           <VendorCreditNoteFormFooter />

src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.schema.js

@@ -16,6 +16,8 @@ const getSchema = Yup.object().shape({
     .max(DATATYPES_LENGTH.TEXT)
     .label(intl.get('note')),
   open: Yup.boolean(),
+  branch_id: Yup.string(),
+  warehouse_id: Yup.string(),
   entries: Yup.array().of(
     Yup.object().shape({
       quantity: Yup.number()

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

@@ -7,6 +7,8 @@ import {
   useCreateVendorCredit,
   useEditVendorCredit,
   useVendorCredit,
+  useWarehouses,
+  useBranches,
   useItems,
   useVendors,
   useSettingsVendorCredits,
@@ -51,6 +53,20 @@ function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
     enabled: !!billId,
   });
 
+  // Fetch warehouses list.
+  const {
+    data: warehouses,
+    isLoading: isWarehouesLoading,
+    isSuccess: isWarehousesSuccess,
+  } = useWarehouses();
+
+  // Fetches the branches list.
+  const {
+    data: branches,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches();
+
   // Form submit payload.
   const [submitPayload, setSubmitPayload] = React.useState();
 
@@ -61,6 +77,9 @@ function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
   // Determines whether the form in new mode.
   const isNewMode = !vendorCreditId;
 
+  // Determines whether the warehouse and branches are loading.
+  const isFeatureLoading = isWarehouesLoading || isBranchesLoading;
+
   const newVendorCredit = !isEmpty(bill)
     ? transformToEditForm({
         ...pick(bill, ['vendor_id', 'entries']),
@@ -72,12 +91,17 @@ function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
     items,
     vendors,
     vendorCredit,
+    warehouses,
+    branches,
     submitPayload,
     isNewMode,
     newVendorCredit,
 
     isVendorCreditLoading,
-
+    isFeatureLoading,
+    isBranchesSuccess,
+    isWarehousesSuccess,
+    
     createVendorCreditMutate,
     editVendorCreditMutate,
     setSubmitPayload,

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

@@ -0,0 +1,118 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import {
+  Alignment,
+  Navbar,
+  NavbarGroup,
+  NavbarDivider,
+  Button,
+  Classes,
+} from '@blueprintjs/core';
+import {
+  useSetPrimaryBranchToForm,
+  useSetPrimaryWarehouseToForm,
+} from './utils';
+import { useFeatureCan } from 'hooks/state';
+import { Icon, BranchSelect, FeatureCan, WarehouseSelect } from 'components';
+import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
+import { Features } from 'common';
+
+/**
+ * Vendor Credit note form topbar .
+ * @returns {JSX.Element}
+ */
+export default function VendorCreditNoteFormTopBar() {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+
+  // Sets the primary warehouse to form.
+  useSetPrimaryWarehouseToForm();
+
+  // Sets the primary branch to form.
+  useSetPrimaryBranchToForm();
+
+  // Can't display the navigation bar if warehouses or branches feature is not enabled.
+  if (!featureCan(Features.Warehouses) || !featureCan(Features.Branches)) {
+    return null;
+  }
+
+  return (
+    <Navbar className={'navbar--dashboard-topbar'}>
+      <NavbarGroup align={Alignment.LEFT}>
+        <FeatureCan feature={Features.Branches}>
+          <VendorCreditNoteFormSelectBranch />
+        </FeatureCan>
+        {featureCan(Features.Warehouses) && featureCan(Features.Branches) && (
+          <NavbarDivider />
+        )}
+        <FeatureCan feature={Features.Warehouses}>
+          <VendorCreditFormSelectWarehouse />
+        </FeatureCan>
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+function VendorCreditNoteFormSelectBranch() {
+  //  Vendor credit note form context.
+  const { branches, isBranchesLoading } = useVendorCreditNoteFormContext();
+
+  return isBranchesLoading ? (
+    <DetailsBarSkeletonBase className={Classes.SKELETON} />
+  ) : (
+    <BranchSelect
+      name={'branch_id'}
+      branches={branches}
+      input={VendorCreditNoteBranchSelectButton}
+      popoverProps={{ minimal: true }}
+    />
+  );
+}
+
+function VendorCreditFormSelectWarehouse() {
+  // vendor credit note form context.
+  const { warehouses, isWarehouesLoading } = useVendorCreditNoteFormContext();
+
+  return isWarehouesLoading ? (
+    <DetailsBarSkeletonBase className={Classes.SKELETON} />
+  ) : (
+    <WarehouseSelect
+      name={'warehouse_id'}
+      warehouses={warehouses}
+      input={VendorCreditNoteWarehouseSelectButton}
+      popoverProps={{ minimal: true }}
+    />
+  );
+}
+
+function VendorCreditNoteWarehouseSelectButton({ label }) {
+  return (
+    <Button
+      text={intl.get('invoice.warehouse_button.label', { label })}
+      minimal={true}
+      small={true}
+      icon={<Icon icon={'warehouse-16'} iconSize={16} />}
+    />
+  );
+}
+
+function VendorCreditNoteBranchSelectButton({ label }) {
+  return (
+    <Button
+      text={intl.get('invoice.branch_button.label', { label })}
+      minimal={true}
+      small={true}
+      icon={<Icon icon={'branch-16'} iconSize={16} />}
+    />
+  );
+}
+
+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/utils.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import * as R from 'ramda';
 import moment from 'moment';
+import { first } from 'lodash';
 
 import {
   defaultFastFieldShouldUpdate,
@@ -14,6 +15,7 @@ import {
   ensureEntriesHaveEmptyLine,
 } from 'containers/Entries/utils';
 import { useFormikContext } from 'formik';
+import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
 
 export const MIN_LINES_NUMBER = 4;
 
@@ -37,6 +39,8 @@ export const defaultVendorsCreditNote = {
   vendor_credit_date: moment(new Date()).format('YYYY-MM-DD'),
   reference_no: '',
   note: '',
+  branch_id: '',
+  warehouse_id: '',
   entries: [...repeatValue(defaultCreditNoteEntry, MIN_LINES_NUMBER)],
 };
 
@@ -129,3 +133,34 @@ export const useObserveVendorCreditNoSettings = (prefix, nextNumber) => {
     setFieldValue('vendor_credit_number', creditNo);
   }, [setFieldValue, prefix, nextNumber]);
 };
+
+export const useSetPrimaryBranchToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { branches, isBranchesSuccess } = useVendorCreditNoteFormContext();
+
+  React.useEffect(() => {
+    if (isBranchesSuccess) {
+      const primaryBranch = branches.find((b) => b.primary) || first(branches);
+
+      if (primaryBranch) {
+        setFieldValue('branch_id', primaryBranch.id);
+      }
+    }
+  }, [isBranchesSuccess, setFieldValue, branches]);
+};
+
+export const useSetPrimaryWarehouseToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { warehouses, isWarehousesSuccess } = useVendorCreditNoteFormContext();
+
+  React.useEffect(() => {
+    if (isWarehousesSuccess) {
+      const primaryWarehouse =
+        warehouses.find((b) => b.primary) || first(warehouses);
+
+      if (primaryWarehouse) {
+        setFieldValue('warehouse_id', primaryWarehouse.id);
+      }
+    }
+  }, [isWarehousesSuccess, setFieldValue, warehouses]);
+};