feat(qucikpayment):add exchange rate muted.

src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMade.schema.js

@@ -18,6 +18,8 @@ const Schema = Yup.object().shape({
     .label(intl.get('payment_account_')),
   reference: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
   // statement: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
+  branch_id: Yup.string(),
+  exchange_rate: Yup.number(),
   entries: Yup.array().of(
     Yup.object().shape({
       payment_amount: Yup.number().nullable(),

src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormDialogContent.js

@@ -5,17 +5,30 @@ import 'style/pages/PaymentReceive/QuickPaymentReceiveDialog.scss';
 import { QuickPaymentMadeFormProvider } from './QuickPaymentMadeFormProvider';
 import QuickPaymentMadeForm from './QuickPaymentMadeForm';
 
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+import { compose } from 'utils';
+
 /**
  * Quick payment made form dialog content.
  */
-export default function QuickPaymentMadeFormDialogContent({
+function QuickPaymentMadeFormDialogContent({
   // #ownProps
   dialogName,
   bill,
+  // #withCurrentOrganization
+  organization: { base_currency },
 }) {
   return (
-    <QuickPaymentMadeFormProvider billId={bill} dialogName={dialogName}>
+    <QuickPaymentMadeFormProvider
+      billId={bill}
+      baseCurrency={base_currency}
+      dialogName={dialogName}
+    >
       <QuickPaymentMadeForm />
     </QuickPaymentMadeFormProvider>
   );
 }
+
+export default compose(withCurrentOrganization())(
+  QuickPaymentMadeFormDialogContent,
+);

src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.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 {
@@ -16,11 +17,17 @@ import { CLASSES } from 'common/classes';
 import { DateInput } from '@blueprintjs/datetime';
 import { FieldRequiredHint, Col, Row } from 'components';
 import { ACCOUNT_TYPE } from 'common/accountTypes';
+import { Features } from 'common';
 import {
   AccountsSuggestField,
   InputPrependText,
   MoneyInputGroup,
   Icon,
+  If,
+  FeatureCan,
+  ExchangeRateMutedField,
+  BranchSelect,
+  BranchSelectButton,
 } from 'components';
 import {
   inputIntent,
@@ -28,20 +35,44 @@ import {
   tansformDateValue,
   handleDateChange,
 } from 'utils';
+import { useSetPrimaryBranchToForm, useForeignAccount } from './utils';
 import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider';
 
 /**
  * Quick payment made form fields.
  */
 export default function QuickPaymentMadeFormFields() {
-  const { accounts } = useQuickPaymentMadeContext();
+  const { accounts, branches, baseCurrency } = useQuickPaymentMadeContext();
+  const isForeigAccount = useForeignAccount();
 
   // Intl context.
+  const { values } = useFormikContext();
 
   const paymentMadeFieldRef = 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}>
           {/* ------------- Vendor name ------------- */}
@@ -114,6 +145,17 @@ export default function QuickPaymentMadeFormFields() {
           </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 ------------- */}
@@ -206,3 +248,9 @@ export default function QuickPaymentMadeFormFields() {
     </div>
   );
 }
+
+export const BranchRowDivider = styled.div`
+  height: 1px;
+  background: #ebf1f6;
+  margin-bottom: 15px;
+`;

src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormProvider.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import { DialogContent } from 'components';
-import { useBill, useAccounts, useCreatePaymentMade } from 'hooks/query';
+import {
+  useBill,
+  useAccounts,
+  useBranches,
+  useCreatePaymentMade,
+} from 'hooks/query';
 
 import { pick } from 'lodash';
 
@@ -9,7 +14,12 @@ const QuickPaymentMadeContext = React.createContext();
 /**
  * Quick payment made dialog provider.
  */
-function QuickPaymentMadeFormProvider({ billId, dialogName, ...props }) {
+function QuickPaymentMadeFormProvider({
+  billId,
+  baseCurrency,
+  dialogName,
+  ...props
+}) {
   // Handle fetch bill details.
   const { isLoading: isBillLoading, data: bill } = useBill(billId, {
     enabled: !!billId,
@@ -21,6 +31,13 @@ function QuickPaymentMadeFormProvider({ billId, dialogName, ...props }) {
   // Create payment made mutations.
   const { mutateAsync: createPaymentMadeMutate } = useCreatePaymentMade();
 
+  // Fetches the branches list.
+  const {
+    data: branches,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches();
+
   // State provider.
   const provider = {
     bill: {
@@ -29,12 +46,17 @@ function QuickPaymentMadeFormProvider({ billId, dialogName, ...props }) {
       payment_amount: bill?.due_amount,
     },
     accounts,
+    branches,
     dialogName,
+    baseCurrency,
     createPaymentMadeMutate,
+    isBranchesSuccess,
   };
 
   return (
-    <DialogContent isLoading={isAccountsLoading || isBillLoading}>
+    <DialogContent
+      isLoading={isAccountsLoading || isBillLoading || isBranchesLoading}
+    >
       <QuickPaymentMadeContext.Provider value={provider} {...props} />
     </DialogContent>
   );

src/containers/Dialogs/QuickPaymentMadeFormDialog/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 { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider';
 
 // Default initial values of payment made.
 export const defaultPaymentMade = {
@@ -9,6 +14,8 @@ export const defaultPaymentMade = {
   reference: '',
   payment_number: '',
   // statement: '',
+  exchange_rate: 1,
+  branch_id: '',
   entries: [{ bill_id: '', payment_amount: '' }],
 };
 
@@ -16,10 +23,7 @@ export const transformErrors = (errors, { setFieldError }) => {
   const getError = (errorType) => errors.find((e) => e.type === errorType);
 
   if (getError('PAYMENT.NUMBER.NOT.UNIQUE')) {
-    setFieldError(
-      'payment_number',
-      intl.get('payment_number_is_not_unique'),
-    );
+    setFieldError('payment_number', intl.get('payment_number_is_not_unique'));
   }
   if (getError('INVALID_BILL_PAYMENT_AMOUNT')) {
     setFieldError(
@@ -28,3 +32,25 @@ export const transformErrors = (errors, { setFieldError }) => {
     );
   }
 };
+
+export const useSetPrimaryBranchToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { branches, isBranchesSuccess } = useQuickPaymentMadeContext();
+
+  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 } = useQuickPaymentMadeContext();
+
+  return !isEqual(baseCurrency, values.currency_code);
+};

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);
+};

src/style/pages/PaymentReceive/QuickPaymentReceiveDialog.scss

@@ -1,25 +1,27 @@
 .dialog--quick-payment-receive {
-  .bp3-form-group {
-    // margin-bottom: 15px;
+  .bp3-dialog-body {
+    line-height: 10px;
+    .bp3-form-group {
+      margin-bottom: 10px;
 
-    label.bp3-label {
-      margin-bottom: 3px;
-      font-size: 13px;
+      label.bp3-label {
+        margin-bottom: 7px;
+        font-size: 13px;
+      }
     }
-  }
 
-  .form-group {
-    &--statement {
-      .bp3-form-content {
-        textarea {
-          width: 100%;
-          min-width: 100%;
-          font-size: 14px;
+    .form-group {
+      &--statement {
+        .bp3-form-content {
+          textarea {
+            width: 100%;
+            min-width: 100%;
+            font-size: 14px;
+          }
         }
       }
     }
   }
-
   .bp3-dialog-footer {
     padding-top: 10px;
   }