feat(refund vendor):add exchange rate muted & branch.

src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormFields.js

@@ -61,6 +61,7 @@ function RefundCreditNoteFormFields({
 
   return (
     <div className={Classes.DIALOG_BODY}>
+
       <FeatureCan feature={Features.Branches}>
         <Row>
           <Col xs={5}>

src/containers/Dialogs/RefundCreditNoteDialog/utils.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useFormikContext } from 'formik';
-import { isEqual, isUndefined, isNull, first } from 'lodash';
+import { first } from 'lodash';
 
 import { useRefundCreditNoteContext } from './RefundCreditNoteFormProvider';
 
@@ -18,5 +18,3 @@ export const useSetPrimaryBranchToForm = () => {
     }
   }, [isBranchesSuccess, setFieldValue, branches]);
 };
-
-

src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditForm.js

@@ -3,14 +3,13 @@ import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import moment from 'moment';
-import { omit, defaultTo } from 'lodash';
+import { omit } from 'lodash';
 
 import { AppToaster } from 'components';
 import { useRefundVendorCreditContext } from './RefundVendorCreditFormProvider';
 import { CreateVendorRefundCreditFormSchema } from './RefundVendorCreditForm.schema';
 import RefundVendorCreditFormContent from './RefundVendorCreditFormContent';
 
-import withSettings from 'containers/Settings/withSettings';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose, transactionNumber } from 'utils';
 
@@ -20,6 +19,7 @@ const defaultInitialValues = {
   reference_no: '',
   description: '',
   amount: '',
+  exchange_rate: 1,
 };
 
 /**

src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditForm.schema.js

@@ -10,5 +10,6 @@ const Schema = Yup.object().shape({
     .required()
     .label(intl.get('deposit_account_')),
   description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
+  exchange_rate: Yup.number(),
 });
 export const CreateVendorRefundCreditFormSchema = Schema;

src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormFields.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { FastField, ErrorMessage } from 'formik';
+import styled from 'styled-components';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
 import {
   Classes,
   FormGroup,
@@ -12,13 +13,21 @@ import {
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import { DateInput } from '@blueprintjs/datetime';
+import { isEqual } from 'lodash';
 import {
   Icon,
+  Col,
+  Row,
+  If,
   FieldRequiredHint,
   AccountsSuggestField,
   InputPrependText,
   MoneyInputGroup,
   FormattedMessage as T,
+  ExchangeRateMutedField,
+  BranchSelect,
+  BranchSelectButton,
+  FeatureCan,
 } from 'components';
 import {
   inputIntent,
@@ -28,42 +37,113 @@ import {
   compose,
 } from 'utils';
 import { useAutofocus } from 'hooks';
+import { Features } from 'common';
 import { ACCOUNT_TYPE } from 'common/accountTypes';
+import { useSetPrimaryBranchToForm } from './utils';
 import { useRefundVendorCreditContext } from './RefundVendorCreditFormProvider';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
 
 /**
  * Refund Vendor credit form fields.
  */
-function RefundVendorCreditFormFields() {
-  const { accounts } = useRefundVendorCreditContext();
+function RefundVendorCreditFormFields({
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  const { accounts, branches } = useRefundVendorCreditContext();
+  const { values } = useFormikContext();
+
   const amountFieldRef = useAutofocus();
 
+  // Sets the primary branch to form.
+  useSetPrimaryBranchToForm();
+
   return (
     <div className={Classes.DIALOG_BODY}>
-      {/* ------------- Refund date ------------- */}
-      <FastField name={'refund_date'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'refund_vendor_credit.dialog.refund_date'} />}
-            labelInfo={<FieldRequiredHint />}
-            className={classNames('form-group--select-list', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="refund_date" />}
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              value={tansformDateValue(value)}
-              onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('refund_date', formattedDate);
-              })}
-              popoverProps={{ position: Position.BOTTOM, minimal: true }}
-              inputProps={{
-                leftIcon: <Icon icon={'date-range'} />,
-              }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <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}>
+          {/* ------------- Refund date ------------- */}
+          <FastField name={'refund_date'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'refund_vendor_credit.dialog.refund_date'} />}
+                labelInfo={<FieldRequiredHint />}
+                className={classNames('form-group--select-list', CLASSES.FILL)}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="refund_date" />}
+              >
+                <DateInput
+                  {...momentFormatter('YYYY/MM/DD')}
+                  value={tansformDateValue(value)}
+                  onChange={handleDateChange((formattedDate) => {
+                    form.setFieldValue('refund_date', formattedDate);
+                  })}
+                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
+                  inputProps={{
+                    leftIcon: <Icon icon={'date-range'} />,
+                  }}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+
+        <Col xs={5}>
+          {/* ------------ Form account ------------ */}
+          <FastField name={'deposit_account_id'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={
+                  <T id={'refund_vendor_credit.dialog.deposit_to_account'} />
+                }
+                className={classNames(
+                  'form-group--deposit_account_id',
+                  'form-group--select-list',
+                  CLASSES.FILL,
+                )}
+                labelInfo={<FieldRequiredHint />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name={'deposit_account_id'} />}
+              >
+                <AccountsSuggestField
+                  selectedAccountId={value}
+                  accounts={accounts}
+                  onAccountSelected={({ id }) =>
+                    form.setFieldValue('deposit_account_id', id)
+                  }
+                  inputProps={{
+                    placeholder: intl.get('select_account'),
+                  }}
+                  filterByTypes={[
+                    ACCOUNT_TYPE.BANK,
+                    ACCOUNT_TYPE.CASH,
+                    ACCOUNT_TYPE.FIXED_ASSET,
+                  ]}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+
       {/* ------------- Amount ------------- */}
       <FastField name={'amount'}>
         {({
@@ -93,6 +173,19 @@ function RefundVendorCreditFormFields() {
           </FormGroup>
         )}
       </FastField>
+
+      <If condition={!isEqual(base_currency, values.currency_code)}>
+        {/*------------ exchange rate -----------*/}
+        <ExchangeRateMutedField
+          name={'exchange_rate'}
+          fromCurrency={base_currency}
+          toCurrency={values.currency_code}
+          formGroupProps={{ label: '', inline: false }}
+          date={values.date}
+          exchangeRate={values.exchange_rate}
+        />
+      </If>
+
       {/* ------------ Reference No. ------------ */}
       <FastField name={'reference_no'}>
         {({ form, field, meta: { error, touched } }) => (
@@ -111,38 +204,6 @@ function RefundVendorCreditFormFields() {
         )}
       </FastField>
 
-      {/* ------------ Form account ------------ */}
-      <FastField name={'deposit_account_id'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'refund_vendor_credit.dialog.deposit_to_account'} />}
-            className={classNames(
-              'form-group--deposit_account_id',
-              'form-group--select-list',
-              CLASSES.FILL,
-            )}
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'deposit_account_id'} />}
-          >
-            <AccountsSuggestField
-              selectedAccountId={value}
-              accounts={accounts}
-              onAccountSelected={({ id }) =>
-                form.setFieldValue('deposit_account_id', id)
-              }
-              inputProps={{
-                placeholder: intl.get('select_account'),
-              }}
-              filterByTypes={[
-                ACCOUNT_TYPE.BANK,
-                ACCOUNT_TYPE.CASH,
-                ACCOUNT_TYPE.FIXED_ASSET,
-              ]}
-            />
-          </FormGroup>
-        )}
-      </FastField>
       {/* --------- Statement --------- */}
       <FastField name={'description'}>
         {({ form, field, meta: { error, touched } }) => (
@@ -158,4 +219,10 @@ function RefundVendorCreditFormFields() {
   );
 }
 
-export default RefundVendorCreditFormFields;
+export default compose(withCurrentOrganization())(RefundVendorCreditFormFields);
+
+export const BranchRowDivider = styled.div`
+  height: 1px;
+  background: #ebf1f6;
+  margin-bottom: 13px;
+`;

src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormProvider.js

@@ -5,6 +5,7 @@ import { pick } from 'lodash';
 import {
   useAccounts,
   useVendorCredit,
+  useBranches,
   useCreateRefundVendorCredit,
 } from 'hooks/query';
 
@@ -18,6 +19,13 @@ function RefundVendorCreditFormProvider({
   // Handle fetch accounts data.
   const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
 
+  // Fetches the branches list.
+  const {
+    data: branches,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches();
+
   // Handle fetch vendor credit details.
   const { data: vendorCredit, isLoading: isVendorCreditLoading } =
     useVendorCredit(vendorCreditId, {
@@ -35,12 +43,18 @@ function RefundVendorCreditFormProvider({
       amount: vendorCredit.credits_remaining,
     },
     accounts,
+    branches,
     dialogName,
+    isBranchesSuccess,
     createRefundVendorCreditMutate,
   };
 
   return (
-    <DialogContent isLoading={isAccountsLoading || isVendorCreditLoading}>
+    <DialogContent
+      isLoading={
+        isAccountsLoading || isVendorCreditLoading || isBranchesLoading
+      }
+    >
       <RefundVendorCreditContext.Provider value={provider} {...props} />
     </DialogContent>
   );

src/containers/Dialogs/RefundVendorCreditDialog/utils.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { first } from 'lodash';
+
+import { useRefundVendorCreditContext } from './RefundVendorCreditFormProvider';
+
+export const useSetPrimaryBranchToForm = () => {
+  const { setFieldValue } = useFormikContext();
+  const { branches, isBranchesSuccess } = useRefundVendorCreditContext();
+
+  React.useEffect(() => {
+    if (isBranchesSuccess) {
+      const primaryBranch = branches.find((b) => b.primary) || first(branches);
+
+      if (primaryBranch) {
+        setFieldValue('branch_id', primaryBranch.id);
+      }
+    }
+  }, [isBranchesSuccess, setFieldValue, branches]);
+};