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

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

@@ -15,6 +15,7 @@ import PaymentReceiveFloatingActions from './PaymentReceiveFloatingActions';
 import PaymentReceiveFormFooter from './PaymentReceiveFormFooter';
 import PaymentReceiveFormAlerts from './PaymentReceiveFormAlerts';
 import PaymentReceiveFormDialogs from './PaymentReceiveFormDialogs';
+import PaymentReceiveFormTopBar from './PaymentReceiveFormTopBar';
 import { PaymentReceiveInnerProvider } from './PaymentReceiveInnerProvider';
 
 import withSettings from 'containers/Settings/withSettings';
@@ -178,6 +179,7 @@ function PaymentReceiveForm({
       >
         <Form>
           <PaymentReceiveInnerProvider>
+            <PaymentReceiveFormTopBar />
             <PaymentReceiveHeader />
             <PaymentReceiveFormBody />
             <PaymentReceiveFormFooter />

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

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

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

@@ -5,6 +5,7 @@ import {
   usePaymentReceiveEditPage,
   useAccounts,
   useCustomers,
+  useBranches,
   useCreatePaymentReceive,
   useEditPaymentReceive,
 } from 'hooks/query';
@@ -42,9 +43,18 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
     isLoading: isCustomersLoading,
   } = useCustomers({ page_size: 10000 });
 
+  // Fetches the branches list.
+  const {
+    data: branches,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches();
+
   // Detarmines whether the new mode.
   const isNewMode = !paymentReceiveId;
 
+  const isFeatureLoading = isBranchesLoading;
+
   // Create and edit payment receive mutations.
   const { mutateAsync: editPaymentReceiveMutate } = useEditPaymentReceive();
   const { mutateAsync: createPaymentReceiveMutate } = useCreatePaymentReceive();
@@ -56,11 +66,14 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
     paymentEntriesEditPage,
     accounts,
     customers,
+    branches,
 
     isPaymentLoading,
     isAccountsLoading,
     isPaymentFetching,
     isCustomersLoading,
+    isFeatureLoading,
+    isBranchesSuccess,
     isNewMode,
 
     submitPayload,

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

@@ -0,0 +1,78 @@
+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 { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
+import { Features } from 'common';
+
+/**
+ * Payment receive from top bar.
+ * @returns
+ */
+export default function PaymentReceiveFormTopBar() {
+  // 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}>
+          <PaymentReceiveFormSelectBranch />
+        </FeatureCan>
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+function PaymentReceiveFormSelectBranch() {
+  // payment receive form context.
+  const { branches, isBranchesLoading } = usePaymentReceiveFormContext();
+
+  return isBranchesLoading ? (
+    <DetailsBarSkeletonBase className={Classes.SKELETON} />
+  ) : (
+    <BranchSelect
+      name={'branch_id'}
+      branches={branches}
+      input={PaymentReceiveBranchSelectButton}
+      popoverProps={{ minimal: true }}
+    />
+  );
+}
+
+function PaymentReceiveBranchSelectButton({ 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/Sales/PaymentReceives/PaymentReceiveForm/utils.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import { useFormikContext } from 'formik';
 import moment from 'moment';
-import { omit, pick } from 'lodash';
+import { omit, pick, first } from 'lodash';
+import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
 import {
   defaultFastFieldShouldUpdate,
   transactionNumber,
   transformToForm,
   safeSumBy,
-  orderingLinesIndexes
+  orderingLinesIndexes,
 } from 'utils';
 
 // Default payment receive entry.
@@ -32,6 +33,7 @@ export const defaultPaymentReceive = {
   statement: '',
   full_amount: '',
   currency_code: '',
+  branch_id: '',
   entries: [],
 };
 
@@ -46,8 +48,9 @@ export const defaultRequestPayment = {
   deposit_account_id: '',
   payment_date: '',
   payment_receive_no: '',
+  branch_id: '',
   statement: '',
-  entries: []
+  entries: [],
 };
 
 /**
@@ -78,6 +81,7 @@ export const transformInvoicesNewPageEntries = (invoices) => [
     currency_code: invoice.currency_code,
     payment_amount: '',
     invoice_no: invoice.invoice_no,
+    branch_id: invoice.branch_id,
     total_payment_amount: invoice.payment_amount,
   })),
 ];
@@ -162,3 +166,18 @@ export const transformFormToRequest = (form) => {
     entries: orderingLinesIndexes(entries),
   };
 };
+
+export const useSetPrimaryBranchToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { branches, isBranchesSuccess } = usePaymentReceiveFormContext();
+
+  React.useEffect(() => {
+    if (isBranchesSuccess) {
+      const primaryBranch = branches.find((b) => b.primary) || first(branches);
+
+      if (primaryBranch) {
+        setFieldValue('branch_id', primaryBranch.id);
+      }
+    }
+  }, [isBranchesSuccess, setFieldValue, branches]);
+};