feat(OwnerContributionForm): add branch select.

src/containers/Dialogs/MoneyInDialog/MoneyInDialogProvider.js

@@ -4,6 +4,7 @@ import {
   useCreateCashflowTransaction,
   useAccount,
   useAccounts,
+  useBranches,
   useCashflowAccounts,
   useSettingCashFlow,
 } from 'hooks/query';
@@ -28,6 +29,13 @@ function MoneyInDialogProvider({
     enabled: !!accountId,
   });
 
+  // Fetches the branches list.
+  const {
+    data: branches,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches();
+
   // Fetch cash flow list .
   const { data: cashflowAccounts, isLoading: isCashFlowAccountsLoading } =
     useCashflowAccounts({}, { keepPreviousData: true });
@@ -49,9 +57,11 @@ function MoneyInDialogProvider({
   const provider = {
     accounts,
     account,
+    branches,
     accountId,
     accountType,
     isAccountsLoading,
+    isBranchesSuccess,
 
     cashflowAccounts,
 
@@ -66,7 +76,10 @@ function MoneyInDialogProvider({
   return (
     <DialogContent
       isLoading={
-        isAccountsLoading || isCashFlowAccountsLoading || isSettingsLoading
+        isAccountsLoading ||
+        isCashFlowAccountsLoading ||
+        isBranchesLoading ||
+        isSettingsLoading
       }
     >
       <MoneyInDialogContent.Provider value={provider} {...props} />

src/containers/Dialogs/MoneyInDialog/MoneyInForm.js

@@ -30,6 +30,7 @@ const defaultInitialValues = {
   credit_account_id: '',
   currency_code: '',
   description: '',
+  branch_id: '',
   publish: '',
 };
 

src/containers/Dialogs/MoneyInDialog/MoneyInForm.schema.js

@@ -10,11 +10,12 @@ const Schema = Yup.object().shape({
   reference_no: Yup.string(),
   credit_account_id: Yup.number().required(),
   cashflow_account_id: Yup.string().required(),
+  branch_id: Yup.string(),
   description: Yup.string()
     .min(3)
     .max(DATATYPES_LENGTH.TEXT)
     .label(intl.get('description')),
-    publish: Yup.boolean(),
+  publish: Yup.boolean(),
 });
 
 export const CreateMoneyInFormSchema = Schema;

src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js

@@ -7,7 +7,9 @@ import {
   TextArea,
   Position,
   ControlGroup,
+  Button,
 } from '@blueprintjs/core';
+import styled from 'styled-components';
 import classNames from 'classnames';
 import {
   FormattedMessage as T,
@@ -21,6 +23,8 @@ import {
   If,
   InputPrependButton,
   ExchangeRateInputGroup,
+  BranchSelect,
+  FeatureCan,
 } from 'components';
 import { DateInput } from '@blueprintjs/datetime';
 import { useAutofocus } from 'hooks';
@@ -32,9 +36,13 @@ import {
   handleDateChange,
   compose,
 } from 'utils';
+import { Features } from 'common';
 import { CLASSES } from 'common/classes';
 import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
-import { useObserveTransactionNoSettings } from '../utils';
+import {
+  useObserveTransactionNoSettings,
+  useSetPrimaryBranchToForm,
+} from '../utils';
 import withSettings from 'containers/Settings/withSettings';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
@@ -52,7 +60,8 @@ function OwnerContributionFormFields({
   transactionNextNumber,
 }) {
   // Money in dialog context.
-  const { accounts, account, isForeignCurrency } = useMoneyInDailogContext();
+  const { accounts, account, branches, isForeignCurrency } =
+    useMoneyInDailogContext();
 
   const { values } = useFormikContext();
 
@@ -83,8 +92,28 @@ function OwnerContributionFormFields({
     transactionNextNumber,
   );
 
+  // Sets the primary branch to form.
+  useSetPrimaryBranchToForm();
+
   return (
     <React.Fragment>
+      <FeatureCan feature={Features.Branches}>
+        <BranchFieldsRow>
+          <Col xs={5}>
+            <FormGroup
+              label={<T id={'branch'} />}
+              className={classNames('form-group--select-list', Classes.FILL)}
+            >
+              <BranchSelect
+                name={'branch_id'}
+                branches={branches}
+                input={BranchSelectButton}
+                popoverProps={{ minimal: true }}
+              />
+            </FormGroup>
+          </Col>
+        </BranchFieldsRow>
+      </FeatureCan>
       <Row>
         <Col xs={5}>
           {/*------------ Date -----------*/}
@@ -184,7 +213,6 @@ function OwnerContributionFormFields({
           </FormGroup>
         )}
       </Field>
-
       {/*------------ exchange rate -----------*/}
       {/* <If
         condition={isForeignCurrency(
@@ -199,7 +227,6 @@ function OwnerContributionFormFields({
         formGroupProps={{ label: ' ', inline: false }}
       />
       {/* </If> */}
-
       <Row>
         <Col xs={5}>
           {/*------------ equity account -----------*/}
@@ -246,7 +273,6 @@ function OwnerContributionFormFields({
           </FastField>
         </Col>
       </Row>
-
       {/*------------ description -----------*/}
       <FastField name={'description'}>
         {({ field, meta: { error, touched } }) => (
@@ -277,3 +303,12 @@ export default compose(
     transactionNumberPrefix: cashflowSetting?.numberPrefix,
   })),
 )(OwnerContributionFormFields);
+
+function BranchSelectButton({ label }) {
+  return <Button text={label} minimal={false} />;
+}
+
+const BranchFieldsRow = styled(Row)`
+  margin-bottom: 10px;
+  border-bottom: 1px solid #e9e9e9;
+`;

src/containers/Dialogs/MoneyInDialog/utils.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import { useFormikContext } from 'formik';
 import { transactionNumber } from 'utils';
+import { sumBy, setWith, toSafeInteger, get, first } from 'lodash';
+
+import { useMoneyInDailogContext } from './MoneyInDialogProvider';
 
 export const useObserveTransactionNoSettings = (prefix, nextNumber) => {
   const { setFieldValue } = useFormikContext();
@@ -10,3 +13,18 @@ export const useObserveTransactionNoSettings = (prefix, nextNumber) => {
     setFieldValue('transacttion_numner', TransactionNo);
   }, [setFieldValue, prefix, nextNumber]);
 };
+
+export const useSetPrimaryBranchToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { branches, isBranchesSuccess } = useMoneyInDailogContext();
+
+  React.useEffect(() => {
+    if (isBranchesSuccess) {
+      const primaryBranch = branches.find((b) => b.primary) || first(branches);
+
+      if (primaryBranch) {
+        setFieldValue('branch_id', primaryBranch.id);
+      }
+    }
+  }, [isBranchesSuccess, setFieldValue, branches]);
+};