From b26b4c54915541e6791acce53334860eec4162f2 Mon Sep 17 00:00:00 2001 From: elforjani13 <39470382+elforjani13@users.noreply.github.com> Date: Mon, 7 Mar 2022 18:35:11 +0200 Subject: [PATCH] feat(qucikpayment):add exchange rate muted. --- .../QuickPaymentMade.schema.js | 2 + .../QuickPaymentMadeFormDialogContent.js | 17 ++++- .../QuickPaymentMadeFormFields.js | 52 ++++++++++++++- .../QuickPaymentMadeFormProvider.js | 28 +++++++- .../QuickPaymentMadeFormDialog/utils.js | 34 ++++++++-- .../QuickPaymentReceiveFormFields.js | 65 ++++++++++++++++--- .../QuickPaymentReceiveFormProvider.js | 32 +++++++-- .../QuickPaymentReceiveFormDialog/utils.js | 29 +++++++++ .../QuickPaymentReceiveDialog.scss | 30 +++++---- 9 files changed, 252 insertions(+), 37 deletions(-) diff --git a/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMade.schema.js b/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMade.schema.js index 684c7a02d..7a0d53c2a 100644 --- a/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMade.schema.js +++ b/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(), diff --git a/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormDialogContent.js b/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormDialogContent.js index bfc35be0c..ca5ab5ef5 100644 --- a/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormDialogContent.js +++ b/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 ( - + ); } + +export default compose(withCurrentOrganization())( + QuickPaymentMadeFormDialogContent, +); diff --git a/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.js b/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.js index 852dca76e..34a4dd46a 100644 --- a/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.js +++ b/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 (
+ + + + } + className={classNames('form-group--select-list', Classes.FILL)} + > + + + + + + {/* ------------- Vendor name ------------- */} @@ -114,6 +145,17 @@ export default function QuickPaymentMadeFormFields() { )} + + {/*------------ exchange rate -----------*/} + + {/* ------------- Payment date ------------- */} @@ -206,3 +248,9 @@ export default function QuickPaymentMadeFormFields() {
); } + +export const BranchRowDivider = styled.div` + height: 1px; + background: #ebf1f6; + margin-bottom: 15px; +`; diff --git a/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormProvider.js b/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormProvider.js index 0a5d59fbc..5533a6f39 100644 --- a/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormProvider.js +++ b/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 ( - + ); diff --git a/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.js b/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.js index b39a1d86e..aa2f17e7b 100644 --- a/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.js +++ b/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); +}; diff --git a/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.js b/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.js index dd94eb33b..406f23c95 100644 --- a/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.js +++ b/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 (
+ + + + } + className={classNames('form-group--select-list', Classes.FILL)} + > + + + + + + {/* ------------- Customer name ------------- */} @@ -120,6 +150,19 @@ function QuickPaymentReceiveFormFields({ )} + + + {/*------------ exchange rate -----------*/} + + + {/* ------------- Payment date ------------- */} @@ -218,4 +261,10 @@ export default compose( withSettings(({ paymentReceiveSettings }) => ({ paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement, })), -)(QuickPaymentReceiveFormFields) \ No newline at end of file +)(QuickPaymentReceiveFormFields); + +export const BranchRowDivider = styled.div` + height: 1px; + background: #ebf1f6; + margin-bottom: 15px; +`; diff --git a/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormProvider.js b/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormProvider.js index 1c3195b67..736c2672f 100644 --- a/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormProvider.js +++ b/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 ( - + ); diff --git a/src/containers/Dialogs/QuickPaymentReceiveFormDialog/utils.js b/src/containers/Dialogs/QuickPaymentReceiveFormDialog/utils.js index 0551cab03..b269620fc 100644 --- a/src/containers/Dialogs/QuickPaymentReceiveFormDialog/utils.js +++ b/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); +}; diff --git a/src/style/pages/PaymentReceive/QuickPaymentReceiveDialog.scss b/src/style/pages/PaymentReceive/QuickPaymentReceiveDialog.scss index d01465ef4..aeb21e60c 100644 --- a/src/style/pages/PaymentReceive/QuickPaymentReceiveDialog.scss +++ b/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; }