From b8b95c7929f1dbea44a4ea5b47e006b658e2783e Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Mon, 7 Mar 2022 20:57:20 +0200
Subject: [PATCH] feat(refund credit):add exchange rate muted & branch.

---
 .../RefundCreditNoteForm.js                   |   1 +
 .../RefundCreditNoteForm.schema.js            |   1 +
 .../RefundCreditNoteFormFields.js             | 193 ++++++++++++------
 .../RefundCreditNoteFormProvider.js           |  16 +-
 .../Dialogs/RefundCreditNoteDialog/utils.js   |  22 ++
 .../RefundCreditNote/RefundCreditNote.scss    |   2 +-
 .../RefundVendorCredit.scss                   |   2 +-
 7 files changed, 169 insertions(+), 68 deletions(-)

diff --git a/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteForm.js b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteForm.js
index 4250a14b1..0311a2423 100644
--- a/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteForm.js
+++ b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteForm.js
@@ -19,6 +19,7 @@ const defaultInitialValues = {
   reference_no: '',
   description: '',
   amount: '',
+  exchange_rate: 1,
 };
 
 /**
diff --git a/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteForm.schema.js b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteForm.schema.js
index 8ada6b557..e62d90ea7 100644
--- a/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteForm.schema.js
+++ b/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;
diff --git a/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormFields.js b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormFields.js
index 5af43fe97..669a6d438 100644
--- a/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormFields.js
+++ b/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,41 +38,111 @@ 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() {
-  const { accounts } = useRefundCreditNoteContext();
+function RefundCreditNoteFormFields({
+  // #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}>
-      {/* ------------- Refund date ------------- */}
-      <FastField name={'date'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'refund_credit_note.dialog.refund_date'} />}
-            labelInfo={<FieldRequiredHint />}
-            className={classNames('form-group--select-list', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="date" />}
-            // inline={true}
-          >
-            <DateInput
-              {...momentFormatter('YYYY/MM/DD')}
-              value={tansformDateValue(value)}
-              onChange={handleDateChange((formattedDate) => {
-                form.setFieldValue('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={'date'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'refund_credit_note.dialog.refund_date'} />}
+                labelInfo={<FieldRequiredHint />}
+                className={classNames('form-group--select-list', CLASSES.FILL)}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name="date" />}
+                // inline={true}
+              >
+                <DateInput
+                  {...momentFormatter('YYYY/MM/DD')}
+                  value={tansformDateValue(value)}
+                  onChange={handleDateChange((formattedDate) => {
+                    form.setFieldValue('date', formattedDate);
+                  })}
+                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
+                  inputProps={{
+                    leftIcon: <Icon icon={'date-range'} />,
+                  }}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+        <Col xs={5}>
+          {/* ------------ Form account ------------ */}
+          <FastField name={'from_account_id'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'refund_credit_note.dialog.from_account'} />}
+                className={classNames(
+                  'form-group--from_account_id',
+                  'form-group--select-list',
+                  CLASSES.FILL,
+                )}
+                labelInfo={<FieldRequiredHint />}
+                intent={inputIntent({ error, touched })}
+                helperText={<ErrorMessage name={'from_account_id'} />}
+              >
+                <AccountsSuggestField
+                  selectedAccountId={value}
+                  accounts={accounts}
+                  onAccountSelected={({ id }) =>
+                    form.setFieldValue('from_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'}>
         {({
@@ -76,7 +156,6 @@ function RefundCreditNoteFormFields() {
             className={classNames('form-group--amount', CLASSES.FILL)}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name="amount" />}
-            // inline={true}
           >
             <ControlGroup>
               <InputPrependText text={values.currency_code} />
@@ -93,6 +172,19 @@ function RefundCreditNoteFormFields() {
           </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 } }) => (
@@ -101,7 +193,6 @@ function RefundCreditNoteFormFields() {
             className={classNames('form-group--reference', CLASSES.FILL)}
             intent={inputIntent({ error, touched })}
             helperText={<ErrorMessage name="reference" />}
-            // inline={true}
           >
             <InputGroup
               intent={inputIntent({ error, touched })}
@@ -112,46 +203,12 @@ function RefundCreditNoteFormFields() {
         )}
       </FastField>
 
-      {/* ------------ Form account ------------ */}
-      <FastField name={'from_account_id'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'refund_credit_note.dialog.from_account'} />}
-            className={classNames(
-              'form-group--from_account_id',
-              'form-group--select-list',
-              CLASSES.FILL,
-            )}
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'from_account_id'} />}
-            // inline={true}
-          >
-            <AccountsSuggestField
-              selectedAccountId={value}
-              accounts={accounts}
-              onAccountSelected={({ id }) =>
-                form.setFieldValue('from_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 } }) => (
           <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;
+`;
diff --git a/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormProvider.js b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormProvider.js
index 978421272..05cec7d2c 100644
--- a/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormProvider.js
+++ b/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>
   );
diff --git a/src/containers/Dialogs/RefundCreditNoteDialog/utils.js b/src/containers/Dialogs/RefundCreditNoteDialog/utils.js
index e69de29bb..6e9ae1aca 100644
--- a/src/containers/Dialogs/RefundCreditNoteDialog/utils.js
+++ b/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]);
+};
+
+
diff --git a/src/style/pages/RefundCreditNote/RefundCreditNote.scss b/src/style/pages/RefundCreditNote/RefundCreditNote.scss
index a8c216880..b94467894 100644
--- a/src/style/pages/RefundCreditNote/RefundCreditNote.scss
+++ b/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 {
diff --git a/src/style/pages/RefundVendorCredit/RefundVendorCredit.scss b/src/style/pages/RefundVendorCredit/RefundVendorCredit.scss
index 033acd0c2..6e023f2dc 100644
--- a/src/style/pages/RefundVendorCredit/RefundVendorCredit.scss
+++ b/src/style/pages/RefundVendorCredit/RefundVendorCredit.scss
@@ -3,7 +3,7 @@
 
   .bp3-dialog-body {
     .bp3-form-group {
-      margin-bottom: 16px;
+      margin-bottom: 13px;
     }
 
     .form-group {