diff --git a/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormFields.js b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormFields.js index 669a6d438..4c0367242 100644 --- a/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormFields.js +++ b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormFields.js @@ -61,6 +61,7 @@ function RefundCreditNoteFormFields({ return (
+ diff --git a/src/containers/Dialogs/RefundCreditNoteDialog/utils.js b/src/containers/Dialogs/RefundCreditNoteDialog/utils.js index 6e9ae1aca..9372d4d89 100644 --- a/src/containers/Dialogs/RefundCreditNoteDialog/utils.js +++ b/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]); }; - - diff --git a/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditForm.js b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditForm.js index 0882a4dd8..ade13f714 100644 --- a/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditForm.js +++ b/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, }; /** diff --git a/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditForm.schema.js b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditForm.schema.js index 57c0b9f2d..739ac9754 100644 --- a/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditForm.schema.js +++ b/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; diff --git a/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormFields.js b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormFields.js index 3ea3862b7..e500ab546 100644 --- a/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormFields.js +++ b/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 (
- {/* ------------- Refund date ------------- */} - - {({ form, field: { value }, meta: { error, touched } }) => ( - } - labelInfo={} - className={classNames('form-group--select-list', CLASSES.FILL)} - intent={inputIntent({ error, touched })} - helperText={} - > - { - form.setFieldValue('refund_date', formattedDate); - })} - popoverProps={{ position: Position.BOTTOM, minimal: true }} - inputProps={{ - leftIcon: , - }} - /> - - )} - + + + + } + className={classNames('form-group--select-list', Classes.FILL)} + > + + + + + + + + + {/* ------------- Refund date ------------- */} + + {({ form, field: { value }, meta: { error, touched } }) => ( + } + labelInfo={} + className={classNames('form-group--select-list', CLASSES.FILL)} + intent={inputIntent({ error, touched })} + helperText={} + > + { + form.setFieldValue('refund_date', formattedDate); + })} + popoverProps={{ position: Position.BOTTOM, minimal: true }} + inputProps={{ + leftIcon: , + }} + /> + + )} + + + + + {/* ------------ Form account ------------ */} + + {({ form, field: { value }, meta: { error, touched } }) => ( + + } + className={classNames( + 'form-group--deposit_account_id', + 'form-group--select-list', + CLASSES.FILL, + )} + labelInfo={} + intent={inputIntent({ error, touched })} + helperText={} + > + + form.setFieldValue('deposit_account_id', id) + } + inputProps={{ + placeholder: intl.get('select_account'), + }} + filterByTypes={[ + ACCOUNT_TYPE.BANK, + ACCOUNT_TYPE.CASH, + ACCOUNT_TYPE.FIXED_ASSET, + ]} + /> + + )} + + + + {/* ------------- Amount ------------- */} {({ @@ -93,6 +173,19 @@ function RefundVendorCreditFormFields() { )} + + + {/*------------ exchange rate -----------*/} + + + {/* ------------ Reference No. ------------ */} {({ form, field, meta: { error, touched } }) => ( @@ -111,38 +204,6 @@ function RefundVendorCreditFormFields() { )} - {/* ------------ Form account ------------ */} - - {({ form, field: { value }, meta: { error, touched } }) => ( - } - className={classNames( - 'form-group--deposit_account_id', - 'form-group--select-list', - CLASSES.FILL, - )} - labelInfo={} - intent={inputIntent({ error, touched })} - helperText={} - > - - form.setFieldValue('deposit_account_id', id) - } - inputProps={{ - placeholder: intl.get('select_account'), - }} - filterByTypes={[ - ACCOUNT_TYPE.BANK, - ACCOUNT_TYPE.CASH, - ACCOUNT_TYPE.FIXED_ASSET, - ]} - /> - - )} - {/* --------- Statement --------- */} {({ 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; +`; diff --git a/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormProvider.js b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormProvider.js index 0f97aa814..c01e41565 100644 --- a/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormProvider.js +++ b/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 ( - + ); diff --git a/src/containers/Dialogs/RefundVendorCreditDialog/utils.js b/src/containers/Dialogs/RefundVendorCreditDialog/utils.js new file mode 100644 index 000000000..f2933a3a2 --- /dev/null +++ b/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]); +};