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

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

@@ -12,6 +12,7 @@ import PaymentMadeHeader from './PaymentMadeFormHeader';
 import PaymentMadeFloatingActions from './PaymentMadeFloatingActions';
 import PaymentMadeFooter from './PaymentMadeFooter';
 import PaymentMadeFormBody from './PaymentMadeFormBody';
+import PaymentMadeFormTopBar from './PaymentMadeFormTopBar';
 import { PaymentMadeInnerProvider } from './PaymentMadeInnerProvider';
 
 import withSettings from 'containers/Settings/withSettings';
@@ -145,6 +146,7 @@ function PaymentMadeForm({
       >
         <Form>
           <PaymentMadeInnerProvider>
+            <PaymentMadeFormTopBar />
             <PaymentMadeHeader />
             <PaymentMadeFormBody />
             <PaymentMadeFooter />

src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeForm.schema.js

@@ -19,6 +19,7 @@ const Schema = Yup.object().shape({
     .label(intl.get('payment_no_')),
   reference: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
   description: Yup.string().max(DATATYPES_LENGTH.TEXT),
+  branch_id: Yup.string(),
   entries: Yup.array().of(
     Yup.object().shape({
       id: Yup.number().nullable(),

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

@@ -3,6 +3,7 @@ import {
   useAccounts,
   useVendors,
   useItems,
+  useBranches,
   usePaymentMadeEditPage,
   useSettings,
   useCreatePaymentMade,
@@ -45,6 +46,13 @@ function PaymentMadeFormProvider({ paymentMadeId, ...props }) {
     enabled: !!paymentMadeId,
   });
 
+  // Fetches the branches list.
+  const {
+    data: branches,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches();
+
   // Fetch payment made settings.
   useSettings();
 
@@ -54,6 +62,8 @@ function PaymentMadeFormProvider({ paymentMadeId, ...props }) {
 
   const isNewMode = !paymentMadeId;
 
+  const isFeatureLoading = isBranchesLoading;
+
   // Provider payload.
   const provider = {
     paymentMadeId,
@@ -62,6 +72,7 @@ function PaymentMadeFormProvider({ paymentMadeId, ...props }) {
     paymentMadeEditPage,
     vendors,
     items,
+    branches,
     submitPayload,
     paymentVendorId,
 
@@ -72,6 +83,8 @@ function PaymentMadeFormProvider({ paymentMadeId, ...props }) {
     isVendorsLoading,
     isPaymentFetching,
     isPaymentLoading,
+    isFeatureLoading,
+    isBranchesSuccess,
 
     createPaymentMadeMutate,
     editPaymentMadeMutate,

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

@@ -0,0 +1,77 @@
+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 { useSetPrimaryBranchToForm } from './utils';
+import { useFeatureCan } from 'hooks/state';
+import { Icon, BranchSelect, FeatureCan } from 'components';
+import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
+import { Features } from 'common';
+
+/**
+ * Payment made from top bar.
+ * @returns
+ */
+export default function PaymentMadeFormTopBar() {
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+
+  // Sets the primary branch to form.
+  useSetPrimaryBranchToForm();
+
+  // Can't display the navigation bar if  branches feature is not enabled.
+  if (!featureCan(Features.Branches)) {
+    return null;
+  }
+  return (
+    <Navbar className={'navbar--dashboard-topbar'}>
+      <NavbarGroup align={Alignment.LEFT}>
+        <FeatureCan feature={Features.Branches}>
+          <PaymentMadeFormSelectBranch />
+        </FeatureCan>
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+function PaymentMadeFormSelectBranch() {
+  // payment made form context.
+  const { branches, isBranchesLoading } = usePaymentMadeFormContext();
+
+  return isBranchesLoading ? (
+    <DetailsBarSkeletonBase className={Classes.SKELETON} />
+  ) : (
+    <BranchSelect
+      name={'branch_id'}
+      branches={branches}
+      input={PaymentMadeBranchSelectButton}
+      popoverProps={{ minimal: true }}
+    />
+  );
+}
+
+function PaymentMadeBranchSelectButton({ 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/PaymentMades/PaymentForm/utils.js

@@ -1,5 +1,8 @@
+import React from 'react';
 import moment from 'moment';
-import { pick } from 'lodash';
+import { pick, first } from 'lodash';
+import { useFormikContext } from 'formik';
+import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
 import {
   defaultFastFieldShouldUpdate,
   safeSumBy,
@@ -31,6 +34,7 @@ export const defaultPaymentMade = {
   payment_number: '',
   statement: '',
   currency_code: '',
+  branch_id: '',
   entries: [],
 };
 
@@ -91,3 +95,18 @@ export const transformFormToRequest = (form) => {
 
   return { ...form, entries: orderingLinesIndexes(entries) };
 };
+
+export const useSetPrimaryBranchToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { branches, isBranchesSuccess } = usePaymentMadeFormContext();
+
+  React.useEffect(() => {
+    if (isBranchesSuccess) {
+      const primaryBranch = branches.find((b) => b.primary) || first(branches);
+
+      if (primaryBranch) {
+        setFieldValue('branch_id', primaryBranch.id);
+      }
+    }
+  }, [isBranchesSuccess, setFieldValue, branches]);
+};