feat(qucikpayment):add exchange rate muted.

src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { FastField, ErrorMessage } from 'formik';
+import styled from 'styled-components';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
 import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
 import { useAutofocus } from 'hooks';
@@ -20,32 +21,61 @@ import {
   InputPrependText,
   MoneyInputGroup,
   Icon,
+  If,
+  FeatureCan,
+  ExchangeRateMutedField,
+  BranchSelect,
+  BranchSelectButton,
 } from 'components';
+import { Features } from 'common';
 import { ACCOUNT_TYPE } from 'common/accountTypes';
 import {
   inputIntent,
   momentFormatter,
   tansformDateValue,
   handleDateChange,
-  compose
+  compose,
 } from 'utils';
+import { useSetPrimaryBranchToForm, useForeignAccount } from './utils';
 import { useQuickPaymentReceiveContext } from './QuickPaymentReceiveFormProvider';
 import withSettings from 'containers/Settings/withSettings';
 
 /**
  * Quick payment receive form fields.
  */
-function QuickPaymentReceiveFormFields({
-  paymentReceiveAutoIncrement
-}) {
-  const { accounts } = useQuickPaymentReceiveContext();
+function QuickPaymentReceiveFormFields({ paymentReceiveAutoIncrement }) {
+  const { accounts, branches, baseCurrency } = useQuickPaymentReceiveContext();
+
+  const isForeigAccount = useForeignAccount();
 
   // Intl context.
-  
+  const { values } = useFormikContext();
+
   const paymentReceiveFieldRef = useAutofocus();
 
+  // Sets the primary branch to form.
+  useSetPrimaryBranchToForm();
+
   return (
     <div className={Classes.DIALOG_BODY}>
+      <FeatureCan feature={Features.Branches}>
+        <Row>
+          <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>
+        </Row>
+        <BranchRowDivider />
+      </FeatureCan>
       <Row>
         <Col xs={5}>
           {/* ------------- Customer name ------------- */}
@@ -120,6 +150,19 @@ function QuickPaymentReceiveFormFields({
           </FormGroup>
         )}
       </FastField>
+
+      <If condition={isForeigAccount}>
+        {/*------------ exchange rate -----------*/}
+        <ExchangeRateMutedField
+          name={'exchange_rate'}
+          fromCurrency={baseCurrency}
+          toCurrency={values.currency_code}
+          formGroupProps={{ label: '', inline: false }}
+          date={values.payment_date}
+          exchangeRate={values.exchange_rate}
+        />
+      </If>
+
       <Row>
         <Col xs={5}>
           {/* ------------- Payment date ------------- */}
@@ -218,4 +261,10 @@ export default compose(
   withSettings(({ paymentReceiveSettings }) => ({
     paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement,
   })),
-)(QuickPaymentReceiveFormFields)
+)(QuickPaymentReceiveFormFields);
+
+export const BranchRowDivider = styled.div`
+  height: 1px;
+  background: #ebf1f6;
+  margin-bottom: 15px;
+`;

src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormProvider.js

@@ -1,14 +1,25 @@
 import React, { useContext, createContext } from 'react';
 import { pick } from 'lodash';
 import { DialogContent } from 'components';
-import { useAccounts, useInvoice, useSettingsPaymentReceives, useCreatePaymentReceive } from 'hooks/query';
+import {
+  useAccounts,
+  useInvoice,
+  useBranches,
+  useSettingsPaymentReceives,
+  useCreatePaymentReceive,
+} from 'hooks/query';
 
 const QuickPaymentReceiveContext = createContext();
 
 /**
  * Quick payment receive dialog provider.
  */
-function QuickPaymentReceiveFormProvider({ invoiceId, dialogName, ...props }) {
+function QuickPaymentReceiveFormProvider({
+  invoiceId,
+  dialogName,
+  baseCurrency,
+  ...props
+}) {
   // Handle fetch accounts data.
   const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
 
@@ -22,9 +33,19 @@ function QuickPaymentReceiveFormProvider({ invoiceId, dialogName, ...props }) {
   // Fetch payment made settings.
   const { isLoading: isSettingsLoading } = useSettingsPaymentReceives();
 
+  // Fetches the branches list.
+  const {
+    data: branches,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches();
+
+  
+
   // State provider.
   const provider = {
     accounts,
+    branches,
     invoice: {
       ...pick(invoice, ['id', 'due_amount', 'customer', 'currency_code']),
       customer_id: invoice?.customer?.display_name,
@@ -32,13 +53,16 @@ function QuickPaymentReceiveFormProvider({ invoiceId, dialogName, ...props }) {
     },
     isAccountsLoading,
     isSettingsLoading,
+    isBranchesSuccess,
     dialogName,
-
+    baseCurrency,
     createPaymentReceiveMutate,
   };
 
   return (
-    <DialogContent isLoading={isAccountsLoading || isInvoiceLoading}>
+    <DialogContent
+      isLoading={isAccountsLoading || isInvoiceLoading || isBranchesLoading}
+    >
       <QuickPaymentReceiveContext.Provider value={provider} {...props} />
     </DialogContent>
   );

src/containers/Dialogs/QuickPaymentReceiveFormDialog/utils.js

@@ -1,5 +1,10 @@
+import React from 'react';
 import moment from 'moment';
 import intl from 'react-intl-universal';
+import { first, isEqual } from 'lodash';
+
+import { useFormikContext } from 'formik';
+import { useQuickPaymentReceiveContext } from './QuickPaymentReceiveFormProvider';
 
 export const defaultInitialValues = {
   customer_id: '',
@@ -8,6 +13,8 @@ export const defaultInitialValues = {
   payment_date: moment(new Date()).format('YYYY-MM-DD'),
   reference_no: '',
   // statement: '',
+  exchange_rate: 1,
+  branch_id: '',
   entries: [{ invoice_id: '', payment_amount: '' }],
 };
 
@@ -33,3 +40,25 @@ export const transformErrors = (errors, { setFieldError }) => {
     );
   }
 };
+
+export const useSetPrimaryBranchToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { branches, isBranchesSuccess } = useQuickPaymentReceiveContext();
+
+  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 useForeignAccount = () => {
+  const { values } = useFormikContext();
+  const { baseCurrency } = useQuickPaymentReceiveContext();
+
+  return !isEqual(baseCurrency, values.currency_code);
+};