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

src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteForm.js

@@ -19,6 +19,7 @@ const defaultInitialValues = {
   reference_no: '',
   description: '',
   amount: '',
+  exchange_rate: 1,
 };
 
 /**

src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteForm.schema.js

@@ -8,5 +8,6 @@ const Schema = Yup.object().shape({
   reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
   from_account_id: Yup.number().required().label(intl.get('deposit_account_')),
   description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
+  exchange_rate: Yup.number(),
 });
 export const CreateRefundCreditNoteFormSchema = Schema;

src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormFields.js

@@ -1,6 +1,8 @@
 import React from 'react';
+import styled from 'styled-components';
 import intl from 'react-intl-universal';
-import { FastField, ErrorMessage } from 'formik';
+import { isEqual } from 'lodash';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
 import {
   Classes,
   FormGroup,
@@ -11,14 +13,22 @@ import {
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
+import { Features } from 'common';
 import { DateInput } from '@blueprintjs/datetime';
 import {
   Icon,
+  Col,
+  Row,
+  If,
   FieldRequiredHint,
   AccountsSuggestField,
   InputPrependText,
   MoneyInputGroup,
   FormattedMessage as T,
+  ExchangeRateMutedField,
+  BranchSelect,
+  BranchSelectButton,
+  FeatureCan,
 } from 'components';
 import {
   inputIntent,
@@ -28,16 +38,50 @@ import {
 } from 'utils';
 import { useAutofocus } from 'hooks';
 import { ACCOUNT_TYPE } from 'common/accountTypes';
+import { useSetPrimaryBranchToForm } from './utils';
 import { useRefundCreditNoteContext } from './RefundCreditNoteFormProvider';
 
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+import { compose } from 'utils';
+
 /**
  * Refund credit note form fields.
  */
-function RefundCreditNoteFormFields() {
+function RefundCreditNoteFormFields({
-  const { accounts } = useRefundCreditNoteContext();
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  const { accounts, branches } = useRefundCreditNoteContext();
+  const { values } = useFormikContext();
+
   const amountFieldRef = 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}>
           {/* ------------- Refund date ------------- */}
           <FastField name={'date'}>
             {({ form, field: { value }, meta: { error, touched } }) => (
@@ -63,55 +107,8 @@ function RefundCreditNoteFormFields() {
               </FormGroup>
             )}
           </FastField>
-      {/* ------------- Amount ------------- */}
+        </Col>
-      <FastField name={'amount'}>
+        <Col xs={5}>
-        {({
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
-            label={<T id={'refund_credit_note.dialog.amount'} />}
-            labelInfo={<FieldRequiredHint />}
-            className={classNames('form-group--amount', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="amount" />}
-            // inline={true}
-          >
-            <ControlGroup>
-              <InputPrependText text={values.currency_code} />
-              <MoneyInputGroup
-                value={value}
-                minimal={true}
-                onChange={(amount) => {
-                  setFieldValue('amount', amount);
-                }}
-                intent={inputIntent({ error, touched })}
-                inputRef={(ref) => (amountFieldRef.current = ref)}
-              />
-            </ControlGroup>
-          </FormGroup>
-        )}
-      </FastField>
-      {/* ------------ Reference No. ------------ */}
-      <FastField name={'reference_no'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'reference_no'} />}
-            className={classNames('form-group--reference', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="reference" />}
-            // inline={true}
-          >
-            <InputGroup
-              intent={inputIntent({ error, touched })}
-              minimal={true}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
-
           {/* ------------ Form account ------------ */}
           <FastField name={'from_account_id'}>
             {({ form, field: { value }, meta: { error, touched } }) => (
@@ -125,7 +122,6 @@ function RefundCreditNoteFormFields() {
                 labelInfo={<FieldRequiredHint />}
                 intent={inputIntent({ error, touched })}
                 helperText={<ErrorMessage name={'from_account_id'} />}
-            // inline={true}
               >
                 <AccountsSuggestField
                   selectedAccountId={value}
@@ -145,13 +141,74 @@ function RefundCreditNoteFormFields() {
               </FormGroup>
             )}
           </FastField>
+        </Col>
+      </Row>
+      {/* ------------- Amount ------------- */}
+      <FastField name={'amount'}>
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
+          <FormGroup
+            label={<T id={'refund_credit_note.dialog.amount'} />}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames('form-group--amount', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="amount" />}
+          >
+            <ControlGroup>
+              <InputPrependText text={values.currency_code} />
+              <MoneyInputGroup
+                value={value}
+                minimal={true}
+                onChange={(amount) => {
+                  setFieldValue('amount', amount);
+                }}
+                intent={inputIntent({ error, touched })}
+                inputRef={(ref) => (amountFieldRef.current = ref)}
+              />
+            </ControlGroup>
+          </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 } }) => (
+          <FormGroup
+            label={<T id={'reference_no'} />}
+            className={classNames('form-group--reference', CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="reference" />}
+          >
+            <InputGroup
+              intent={inputIntent({ error, touched })}
+              minimal={true}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
       {/* --------- Statement --------- */}
       <FastField name={'description'}>
         {({ form, field, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'refund_credit_note.dialog.description'} />}
             className={'form-group--description'}
-            // inline={true}
           >
             <TextArea growVertically={true} {...field} />
           </FormGroup>
@@ -161,4 +218,10 @@ function RefundCreditNoteFormFields() {
   );
 }
 
-export default RefundCreditNoteFormFields;
+export default compose(withCurrentOrganization())(RefundCreditNoteFormFields);
+
+export const BranchRowDivider = styled.div`
+  height: 1px;
+  background: #ebf1f6;
+  margin-bottom: 13px;
+`;

src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormProvider.js

@@ -5,6 +5,7 @@ import { pick } from 'lodash';
 import {
   useAccounts,
   useCreditNote,
+  useBranches,
   useCreateRefundCreditNote,
 } from 'hooks/query';
 
@@ -24,6 +25,14 @@ function RefundCreditNoteFormProvider({ creditNoteId, dialogName, ...props }) {
       enabled: !!creditNoteId,
     },
   );
+
+  // Fetches the branches list.
+  const {
+    data: branches,
+    isLoading: isBranchesLoading,
+    isSuccess: isBranchesSuccess,
+  } = useBranches();
+
   // Create and edit credit note mutations.
   const { mutateAsync: createRefundCreditNoteMutate } =
     useCreateRefundCreditNote();
@@ -35,12 +44,17 @@ function RefundCreditNoteFormProvider({ creditNoteId, dialogName, ...props }) {
       amount: creditNote.credits_remaining,
     },
     accounts,
+    branches,
     dialogName,
+    isBranchesSuccess,
+
     createRefundCreditNoteMutate,
   };
 
   return (
-    <DialogContent isLoading={isAccountsLoading || isCreditNoteLoading}>
+    <DialogContent
+      isLoading={isAccountsLoading || isCreditNoteLoading || isBranchesLoading}
+    >
       <RefundCreditNoteContext.Provider value={provider} {...props} />
     </DialogContent>
   );

src/containers/Dialogs/RefundCreditNoteDialog/utils.js

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

src/style/pages/RefundCreditNote/RefundCreditNote.scss

@@ -1,7 +1,7 @@
 .dialog--refund-credit-note {
   .bp3-dialog-body {
     .bp3-form-group {
-      margin-bottom: 16px;
+      margin-bottom: 13px;
     }
 
     .form-group {

src/style/pages/RefundVendorCredit/RefundVendorCredit.scss

@@ -3,7 +3,7 @@
 
   .bp3-dialog-body {
     .bp3-form-group {
-      margin-bottom: 16px;
+      margin-bottom: 13px;
     }
 
     .form-group {