feat(customer & vendor): add branch.

src/containers/Customers/CustomerForm/CustomerFinancialPanel.js

@@ -3,32 +3,33 @@ import classNames from 'classnames';
 import { FormGroup, Position, Classes, ControlGroup } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, ErrorMessage } from 'formik';
+import { FFormGroup } from '../../../components/Forms';
 import moment from 'moment';
+import { Features } from 'common';
 import {
   MoneyInputGroup,
   InputPrependText,
   CurrencySelectList,
+  BranchSelect,
+  BranchSelectButton,
+  FeatureCan,
   Row,
   Col,
 } from 'components';
 import { FormattedMessage as T } from 'components';
 
 import { useCustomerFormContext } from './CustomerFormProvider';
-
+import { useSetPrimaryBranchToForm } from './utils';
-import {
+import { momentFormatter, tansformDateValue, inputIntent } from 'utils';
-  momentFormatter,
-  tansformDateValue,
-  inputIntent,
-} from 'utils';
 
 /**
  * Customer financial panel.
  */
 export default function CustomerFinancialPanel() {
-  const {
+  const { currencies, customerId, branches } = useCustomerFormContext();
-    currencies,
+
-    customerId
+  // Sets the primary branch to form.
-  } = useCustomerFormContext();
+  useSetPrimaryBranchToForm();
 
   return (
     <div className={'tab-panel--financial'}>
@@ -62,12 +63,7 @@ export default function CustomerFinancialPanel() {
 
           {/*------------ Opening balance  -----------*/}
           <FastField name={'opening_balance'}>
-            {({
+            {({ form, field, field: { value }, meta: { error, touched } }) => (
-              form,
-              field,
-              field: { value },
-              meta: { error, touched },
-            }) => (
               <FormGroup
                 label={<T id={'opening_balance'} />}
                 className={classNames(
@@ -92,6 +88,23 @@ export default function CustomerFinancialPanel() {
             )}
           </FastField>
 
+          {/*------------ Opening branch  -----------*/}
+          <FeatureCan feature={Features.Branches}>
+            <FFormGroup
+              label={<T id={'customer.label.opening_branch'} />}
+              name={'opening_balance_branch_id'}
+              inline={true}
+              className={classNames('form-group--select-list', Classes.FILL)}
+            >
+              <BranchSelect
+                name={'opening_balance_branch_id'}
+                branches={branches}
+                input={BranchSelectButton}
+                popoverProps={{ minimal: true }}
+              />
+            </FFormGroup>
+          </FeatureCan>
+
           {/*------------ Currency  -----------*/}
           <FastField name={'currency_code'}>
             {({ form, field: { value }, meta: { error, touched } }) => (

src/containers/Customers/CustomerForm/CustomerForm.schema.js

@@ -42,6 +42,7 @@ const Schema = Yup.object().shape({
   opening_balance: Yup.number().nullable(),
   currency_code: Yup.string(),
   opening_balance_at: Yup.date(),
+  opening_balance_branch_id: Yup.string(),
 });
 
 export const CreateCustomerForm = Schema;

src/containers/Customers/CustomerForm/CustomerFormProvider.js

@@ -6,15 +6,21 @@ import {
   useCreateCustomer,
   useEditCustomer,
   useContact,
+  useBranches,
 } from 'hooks/query';
+import { Features } from 'common';
+import { useFeatureCan } from 'hooks/state';
 
 const CustomerFormContext = createContext();
 
-function CustomerFormProvider({ customerId, ...props }) {
+function CustomerFormProvider({ query, customerId, ...props }) {
   const { state } = useLocation();
-
   const contactId = state?.action;
 
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+  const isBranchFeatureCan = featureCan(Features.Branches);
+
   // Handle fetch customer details.
   const { data: customer, isLoading: isCustomerLoading } = useCustomer(
     customerId,
@@ -28,6 +34,13 @@ function CustomerFormProvider({ customerId, ...props }) {
   // Handle fetch Currencies data table
   const { data: currencies, isLoading: isCurrenciesLoading } = useCurrencies();
 
+  // Fetches the branches list.
+  const {
+    data: branches,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches(query, { enabled: isBranchFeatureCan });
+
   // Form submit payload.
   const [submitPayload, setSubmitPayload] = useState({});
 
@@ -38,18 +51,20 @@ function CustomerFormProvider({ customerId, ...props }) {
   const isNewMode = contactId || !customerId;
 
   const isFormLoading =
-    isCustomerLoading || isCurrenciesLoading || isContactLoading;
+    isCustomerLoading || isCurrenciesLoading || isBranchesLoading;
 
   const provider = {
     customerId,
     customer,
     currencies,
+    branches,
     contactDuplicate,
     submitPayload,
     isNewMode,
 
     isCustomerLoading,
     isCurrenciesLoading,
+    isBranchesSuccess,
     isFormLoading,
 
     setSubmitPayload,

src/containers/Customers/CustomerForm/utils.js

@@ -1,5 +1,9 @@
+import React from 'react';
 import moment from 'moment';
+import { useFormikContext } from 'formik';
+import { first } from 'lodash';
 
+import { useCustomerFormContext } from './CustomerFormProvider';
 
 export const defaultInitialValues = {
   customer_type: 'business',
@@ -35,4 +39,20 @@ export const defaultInitialValues = {
   opening_balance: '',
   currency_code: '',
   opening_balance_at: moment(new Date()).format('YYYY-MM-DD'),
+  opening_balance_branch_id: '',
+};
+
+export const useSetPrimaryBranchToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { branches, isBranchesSuccess } = useCustomerFormContext();
+
+  React.useEffect(() => {
+    if (isBranchesSuccess) {
+      const primaryBranch = branches.find((b) => b.primary) || first(branches);
+
+      if (primaryBranch) {
+        setFieldValue('opening_balance_branch_id', primaryBranch.id);
+      }
+    }
+  }, [isBranchesSuccess, setFieldValue, branches]);
 };

src/containers/Vendors/VendorForm/VendorFinanicalPanelTab.js

@@ -1,17 +1,23 @@
 import React from 'react';
+import moment from 'moment';
 import classNames from 'classnames';
 import { FormGroup, ControlGroup, Position, Classes } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, ErrorMessage } from 'formik';
-import moment from 'moment';
+import { FFormGroup } from '../../../components/Forms';
+import { Features } from 'common';
 import {
   MoneyInputGroup,
   InputPrependText,
   CurrencySelectList,
+  BranchSelect,
+  BranchSelectButton,
+  FeatureCan,
   Row,
   Col,
 } from 'components';
 import { FormattedMessage as T } from 'components';
+import { useSetPrimaryBranchToForm } from './utils';
 import { momentFormatter, tansformDateValue, inputIntent } from 'utils';
 import { useVendorFormContext } from './VendorFormProvider';
 
@@ -19,7 +25,10 @@ import { useVendorFormContext } from './VendorFormProvider';
  * Vendor Finaniceal Panel Tab.
  */
 export default function VendorFinanicalPanelTab() {
-  const { vendorId, currencies } = useVendorFormContext();
+  const { vendorId, currencies, branches } = useVendorFormContext();
+
+  // Sets the primary branch to form.
+  useSetPrimaryBranchToForm();
 
   return (
     <div className={'tab-panel--financial'}>
@@ -80,6 +89,23 @@ export default function VendorFinanicalPanelTab() {
             )}
           </FastField>
 
+          {/*------------ Opening branch  -----------*/}
+          <FeatureCan feature={Features.Branches}>
+            <FFormGroup
+              label={<T id={'vendor.label.opening_branch'} />}
+              name={'opening_balance_branch_id'}
+              inline={true}
+              className={classNames('form-group--select-list', Classes.FILL)}
+            >
+              <BranchSelect
+                name={'opening_balance_branch_id'}
+                branches={branches}
+                input={BranchSelectButton}
+                popoverProps={{ minimal: true }}
+              />
+            </FFormGroup>
+          </FeatureCan>
+
           {/*------------ Currency  -----------*/}
           <FastField name={'currency_code'}>
             {({ form, field: { value }, meta: { error, touched } }) => (

src/containers/Vendors/VendorForm/VendorForm.schema.js

@@ -6,10 +6,7 @@ const Schema = Yup.object().shape({
   first_name: Yup.string().trim(),
   last_name: Yup.string().trim(),
   company_name: Yup.string().trim(),
-  display_name: Yup.string()
+  display_name: Yup.string().trim().required().label(intl.get('display_name_')),
-    .trim()
-    .required()
-    .label(intl.get('display_name_')),
 
   email: Yup.string().email().nullable(),
   work_phone: Yup.number(),
@@ -38,6 +35,7 @@ const Schema = Yup.object().shape({
   opening_balance: Yup.number().nullable(),
   currency_code: Yup.string(),
   opening_balance_at: Yup.date(),
+  opening_balance_branch_id: Yup.string(),
 });
 
 export const CreateVendorFormSchema = Schema;

src/containers/Vendors/VendorForm/VendorFormProvider.js

@@ -8,18 +8,24 @@ import {
   useCurrencies,
   useCreateVendor,
   useEditVendor,
+  useBranches,
 } from 'hooks/query';
+import { Features } from 'common';
+import { useFeatureCan } from 'hooks/state';
 
 const VendorFormContext = createContext();
 
 /**
  * Vendor form provider.
  */
-function VendorFormProvider({ vendorId, ...props }) {
+function VendorFormProvider({ query, vendorId, ...props }) {
   const { state } = useLocation();
-
   const contactId = state?.action;
 
+  // Features guard.
+  const { featureCan } = useFeatureCan();
+  const isBranchFeatureCan = featureCan(Features.Branches);
+
   // Handle fetch Currencies data table
   const { data: currencies, isLoading: isCurrenciesLoading } = useCurrencies();
 
@@ -33,6 +39,14 @@ function VendorFormProvider({ vendorId, ...props }) {
     contactId,
     { enabled: !!contactId },
   );
+
+  // Fetches the branches list.
+  const {
+    data: branches,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches(query, { enabled: isBranchFeatureCan });
+
   // Create and edit vendor mutations.
   const { mutateAsync: createVendorMutate } = useCreateVendor();
   const { mutateAsync: editVendorMutate } = useEditVendor();
@@ -44,17 +58,22 @@ function VendorFormProvider({ vendorId, ...props }) {
   const isNewMode = contactId || !vendorId;
 
   const isFormLoading =
-    isVendorLoading || isContactLoading || isCurrenciesLoading;
+    isVendorLoading ||
+    isContactLoading ||
+    isCurrenciesLoading ||
+    isBranchesLoading;
 
   const provider = {
     vendorId,
     currencies,
     vendor,
+    branches,
     contactDuplicate: { ...omit(contactDuplicate, ['opening_balance_at']) },
     submitPayload,
 
     isNewMode,
     isFormLoading,
+    isBranchesSuccess,
 
     createVendorMutate,
     editVendorMutate,

src/containers/Vendors/VendorForm/utils.js

@@ -1,4 +1,9 @@
+import React from 'react';
 import moment from 'moment';
+import { useFormikContext } from 'formik';
+import { first } from 'lodash';
+
+import { useVendorFormContext } from './VendorFormProvider';
 
 export const defaultInitialValues = {
   salutation: '',
@@ -33,4 +38,20 @@ export const defaultInitialValues = {
   opening_balance: '',
   currency_code: '',
   opening_balance_at: moment(new Date()).format('YYYY-MM-DD'),
+  opening_balance_branch_id: '',
+};
+
+export const useSetPrimaryBranchToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { branches, isBranchesSuccess } = useVendorFormContext();
+
+  React.useEffect(() => {
+    if (isBranchesSuccess) {
+      const primaryBranch = branches.find((b) => b.primary) || first(branches);
+
+      if (primaryBranch) {
+        setFieldValue('opening_balance_branch_id', primaryBranch.id);
+      }
+    }
+  }, [isBranchesSuccess, setFieldValue, branches]);
 };

src/lang/en/index.json

@@ -1895,5 +1895,7 @@
   "vendor_opening_balance.success_message": "The opening balance of the given vendor has been changed successfully.",
   "vendor_opening_balance.label": "Edit Vendor Opening Balance",
   "vendor_opening_balance.label.opening_balance": "Opening balance",
-  "vendor_opening_balance.label.opening_balance_at": "Opening balance at"
+  "vendor_opening_balance.label.opening_balance_at": "Opening balance at",
+  "customer.label.opening_branch": "Opening Balance Branch",
+  "vendor.label.opening_branch": "Opening Balance Branch"
 }