feat(cashflow): exchange rate muted.

This commit is contained in:
elforjani13
2022-03-07 16:38:14 +02:00
parent 51c7a0fcd8
commit d12e35f649
11 changed files with 136 additions and 89 deletions

View File

@@ -1,5 +1,4 @@
import React from 'react'; import React from 'react';
import moment from 'moment';
import styled from 'styled-components'; import styled from 'styled-components';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import { import {
@@ -8,42 +7,32 @@ import {
PopoverInteractionKind, PopoverInteractionKind,
FormGroup, FormGroup,
Position, Position,
Menu,
Classes, Classes,
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import { import { ExchangeRateInputGroup, Icon } from 'components';
If,
ExchangeRateInputGroup,
Icon,
FormattedMessage as T,
} from 'components';
import { isEqual, isUndefined } from 'lodash';
export function ExchangeRateMutedField({ export function ExchangeRateMutedField({
name, name,
toCurrency, toCurrency,
fromCurrency, fromCurrency,
date,
exchangeRate, exchangeRate,
...ExchangeRateprops exchangeRateFieldProps,
popoverProps,
}) { }) {
if (isEqual(toCurrency, fromCurrency) && !isUndefined(toCurrency)) {
return null;
}
const content = ( const content = (
<ExchangeRateFormGroupContent> <ExchangeRateFormGroupContent>
<ExchangeRateInputGroup <ExchangeRateInputGroup
name={name} name={name}
fromCurrency={fromCurrency} fromCurrency={fromCurrency}
toCurrency={toCurrency} toCurrency={toCurrency}
{...ExchangeRateprops} {...exchangeRateFieldProps}
/> />
</ExchangeRateFormGroupContent> </ExchangeRateFormGroupContent>
); );
return ( return (
<ExchangeRateFormGroup <ExchangeRateFormGroup label={`As on ${date},`}>
label={`As on ${moment(new Date()).format('YYYY-MM-DD')},`}
>
<Popover <Popover
content={content} content={content}
interactionKind={PopoverInteractionKind.CLICK} interactionKind={PopoverInteractionKind.CLICK}
@@ -51,6 +40,7 @@ export function ExchangeRateMutedField({
modifiers={{ modifiers={{
offset: { offset: '0, 4' }, offset: { offset: '0, 4' },
}} }}
{...popoverProps}
minimal={true} minimal={true}
usePortal={false} usePortal={false}
target={<div />} target={<div />}

View File

@@ -19,6 +19,7 @@ import {
Icon, Icon,
Col, Col,
Row, Row,
If,
FeatureCan, FeatureCan,
BranchSelect, BranchSelect,
BranchSelectButton, BranchSelectButton,
@@ -42,6 +43,7 @@ import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
import { import {
useObserveTransactionNoSettings, useObserveTransactionNoSettings,
useSetPrimaryBranchToForm, useSetPrimaryBranchToForm,
useForeignAccount,
BranchRowDivider, BranchRowDivider,
} from '../utils'; } from '../utils';
import withSettings from 'containers/Settings/withSettings'; import withSettings from 'containers/Settings/withSettings';
@@ -66,6 +68,8 @@ function OtherIncomeFormFields({
const amountFieldRef = useAutofocus(); const amountFieldRef = useAutofocus();
const isForeigAccount = useForeignAccount();
// Handle tranaction number changing. // Handle tranaction number changing.
const handleTransactionNumberChange = () => { const handleTransactionNumberChange = () => {
openDialog('transaction-number-form'); openDialog('transaction-number-form');
@@ -112,7 +116,7 @@ function OtherIncomeFormFields({
</FormGroup> </FormGroup>
</Col> </Col>
</Row> </Row>
<BranchRowDivider /> <BranchRowDivider />
</FeatureCan> </FeatureCan>
<Row> <Row>
@@ -199,7 +203,7 @@ function OtherIncomeFormFields({
className={'form-group--amount'} className={'form-group--amount'}
> >
<ControlGroup> <ControlGroup>
<InputPrependText text={values.currency_code} /> <InputPrependText text={account.currency_code} />
<MoneyInputGroup <MoneyInputGroup
value={value} value={value}
@@ -215,14 +219,17 @@ function OtherIncomeFormFields({
)} )}
</FastField> </FastField>
{/*------------ exchange rate -----------*/} <If condition={isForeigAccount}>
<ExchangeRateMutedField {/*------------ exchange rate -----------*/}
name={'exchange_rate'} <ExchangeRateMutedField
fromCurrency={values?.currency_code} name={'exchange_rate'}
toCurrency={account?.currency_code} fromCurrency={values.currency_code}
formGroupProps={{ label: '', inline: false }} toCurrency={account.currency_code}
exchangeRate={values.exchange_rate} formGroupProps={{ label: '', inline: false }}
/> date={values.date}
exchangeRate={values.exchange_rate}
/>
</If>
<Row> <Row>
<Col xs={5}> <Col xs={5}>
{/*------------ other income account -----------*/} {/*------------ other income account -----------*/}

View File

@@ -19,6 +19,7 @@ import {
Icon, Icon,
Col, Col,
Row, Row,
If,
InputPrependButton, InputPrependButton,
ExchangeRateMutedField, ExchangeRateMutedField,
BranchSelect, BranchSelect,
@@ -41,6 +42,7 @@ import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
import { import {
useObserveTransactionNoSettings, useObserveTransactionNoSettings,
useSetPrimaryBranchToForm, useSetPrimaryBranchToForm,
useForeignAccount,
BranchRowDivider, BranchRowDivider,
} from '../utils'; } from '../utils';
import withSettings from 'containers/Settings/withSettings'; import withSettings from 'containers/Settings/withSettings';
@@ -66,6 +68,8 @@ function OwnerContributionFormFields({
const amountFieldRef = useAutofocus(); const amountFieldRef = useAutofocus();
const isForeigAccount = useForeignAccount();
// Handle tranaction number changing. // Handle tranaction number changing.
const handleTransactionNumberChange = () => { const handleTransactionNumberChange = () => {
openDialog('transaction-number-form'); openDialog('transaction-number-form');
@@ -213,16 +217,17 @@ function OwnerContributionFormFields({
</FormGroup> </FormGroup>
)} )}
</Field> </Field>
<If condition={isForeigAccount}>
{/*------------ exchange rate -----------*/} {/*------------ exchange rate -----------*/}
<ExchangeRateMutedField <ExchangeRateMutedField
name={'exchange_rate'} name={'exchange_rate'}
fromCurrency={values?.currency_code} fromCurrency={values.currency_code}
toCurrency={account?.currency_code} toCurrency={account.currency_code}
formGroupProps={{ label: '', inline: false }} formGroupProps={{ label: '', inline: false }}
exchangeRate={values.exchange_rate} date={values.date}
/> exchangeRate={values.exchange_rate}
/>
</If>
<Row> <Row>
<Col xs={5}> <Col xs={5}>
{/*------------ equity account -----------*/} {/*------------ equity account -----------*/}

View File

@@ -18,6 +18,7 @@ import {
Icon, Icon,
Col, Col,
Row, Row,
If,
InputPrependButton, InputPrependButton,
ExchangeRateMutedField, ExchangeRateMutedField,
FeatureCan, FeatureCan,
@@ -41,6 +42,7 @@ import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
import { import {
useObserveTransactionNoSettings, useObserveTransactionNoSettings,
useSetPrimaryBranchToForm, useSetPrimaryBranchToForm,
useForeignAccount,
BranchRowDivider, BranchRowDivider,
} from '../utils'; } from '../utils';
import withSettings from 'containers/Settings/withSettings'; import withSettings from 'containers/Settings/withSettings';
@@ -61,6 +63,7 @@ function TransferFromAccountFormFields({
// Money in dialog context. // Money in dialog context.
const { accounts, account, branches } = useMoneyInDailogContext(); const { accounts, account, branches } = useMoneyInDailogContext();
const isForeigAccount = useForeignAccount();
const amountFieldRef = useAutofocus(); const amountFieldRef = useAutofocus();
const { values } = useFormikContext(); const { values } = useFormikContext();
@@ -196,7 +199,7 @@ function TransferFromAccountFormFields({
className={'form-group--amount'} className={'form-group--amount'}
> >
<ControlGroup> <ControlGroup>
<InputPrependText text={values.currency_code} /> <InputPrependText text={account.currency_code} />
<MoneyInputGroup <MoneyInputGroup
value={value} value={value}
@@ -211,16 +214,17 @@ function TransferFromAccountFormFields({
</FormGroup> </FormGroup>
)} )}
</FastField> </FastField>
<If condition={isForeigAccount}>
{/*------------ exchange rate -----------*/} {/*------------ exchange rate -----------*/}
<ExchangeRateMutedField <ExchangeRateMutedField
name={'exchange_rate'} name={'exchange_rate'}
fromCurrency={values?.currency_code} fromCurrency={values.currency_code}
toCurrency={account?.currency_code} toCurrency={account.currency_code}
formGroupProps={{ label: '', inline: false }} formGroupProps={{ label: '', inline: false }}
exchangeRate={values.exchange_rate} date={values.date}
/> exchangeRate={values.exchange_rate}
/>
</If>
<Row> <Row>
<Col xs={5}> <Col xs={5}>
{/*------------ transfer from account -----------*/} {/*------------ transfer from account -----------*/}

View File

@@ -2,7 +2,7 @@ import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { useFormikContext } from 'formik'; import { useFormikContext } from 'formik';
import { transactionNumber } from 'utils'; import { transactionNumber } from 'utils';
import { sumBy, setWith, toSafeInteger, get, first } from 'lodash'; import { isEqual, isUndefined, isNull, first } from 'lodash';
import { useMoneyInDailogContext } from './MoneyInDialogProvider'; import { useMoneyInDailogContext } from './MoneyInDialogProvider';
@@ -30,6 +30,16 @@ export const useSetPrimaryBranchToForm = () => {
}, [isBranchesSuccess, setFieldValue, branches]); }, [isBranchesSuccess, setFieldValue, branches]);
}; };
export const useForeignAccount = () => {
const { values } = useFormikContext();
const { account } = useMoneyInDailogContext();
return (
!isEqual(account.currency_code, values.currency_code) &&
!isNull(account.currency_code)
);
};
export const BranchRowDivider = styled.div` export const BranchRowDivider = styled.div`
height: 1px; height: 1px;
background: #ebf1f6; background: #ebf1f6;

View File

@@ -18,6 +18,7 @@ import {
Icon, Icon,
Col, Col,
Row, Row,
If,
InputPrependButton, InputPrependButton,
FeatureCan, FeatureCan,
BranchSelect, BranchSelect,
@@ -41,6 +42,7 @@ import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
import { import {
useObserveTransactionNoSettings, useObserveTransactionNoSettings,
useSetPrimaryBranchToForm, useSetPrimaryBranchToForm,
useForeignAccount,
BranchRowDivider, BranchRowDivider,
} from '../utils'; } from '../utils';
import withSettings from 'containers/Settings/withSettings'; import withSettings from 'containers/Settings/withSettings';
@@ -61,6 +63,7 @@ function OtherExpnseFormFields({
// Money in dialog context. // Money in dialog context.
const { accounts, account, branches } = useMoneyOutDialogContext(); const { accounts, account, branches } = useMoneyOutDialogContext();
const isForeigAccount = useForeignAccount();
const { values } = useFormikContext(); const { values } = useFormikContext();
const amountFieldRef = useAutofocus(); const amountFieldRef = useAutofocus();
@@ -197,7 +200,7 @@ function OtherExpnseFormFields({
className={'form-group--amount'} className={'form-group--amount'}
> >
<ControlGroup> <ControlGroup>
<InputPrependText text={values.currency_code} /> <InputPrependText text={account.currency_code} />
<MoneyInputGroup <MoneyInputGroup
value={value} value={value}
@@ -212,16 +215,17 @@ function OtherExpnseFormFields({
</FormGroup> </FormGroup>
)} )}
</FastField> </FastField>
<If condition={isForeigAccount}>
{/*------------ exchange rate -----------*/} {/*------------ exchange rate -----------*/}
<ExchangeRateMutedField <ExchangeRateMutedField
name={'exchange_rate'} name={'exchange_rate'}
fromCurrency={values?.currency_code} fromCurrency={values.currency_code}
toCurrency={account?.currency_code} toCurrency={account.currency_code}
formGroupProps={{ label: '', inline: false }} formGroupProps={{ label: '', inline: false }}
exchangeRate={values.exchange_rate} date={values.date}
/> exchangeRate={values.exchange_rate}
/>
</If>
<Row> <Row>
<Col xs={5}> <Col xs={5}>
{/*------------ other expense account -----------*/} {/*------------ other expense account -----------*/}

View File

@@ -17,6 +17,7 @@ import {
FieldRequiredHint, FieldRequiredHint,
InputPrependButton, InputPrependButton,
Icon, Icon,
If,
Col, Col,
Row, Row,
FeatureCan, FeatureCan,
@@ -40,6 +41,7 @@ import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
import { import {
useObserveTransactionNoSettings, useObserveTransactionNoSettings,
useSetPrimaryBranchToForm, useSetPrimaryBranchToForm,
useForeignAccount,
BranchRowDivider, BranchRowDivider,
} from '../utils'; } from '../utils';
import withSettings from 'containers/Settings/withSettings'; import withSettings from 'containers/Settings/withSettings';
@@ -60,6 +62,7 @@ function OwnerDrawingsFormFields({
// Money out dialog context. // Money out dialog context.
const { accounts, account, branches } = useMoneyOutDialogContext(); const { accounts, account, branches } = useMoneyOutDialogContext();
const { values } = useFormikContext(); const { values } = useFormikContext();
const isForeigAccount = useForeignAccount();
const amountFieldRef = useAutofocus(); const amountFieldRef = useAutofocus();
@@ -195,7 +198,7 @@ function OwnerDrawingsFormFields({
className={'form-group--amount'} className={'form-group--amount'}
> >
<ControlGroup> <ControlGroup>
<InputPrependText text={values.currency_code} /> <InputPrependText text={account.currency_code} />
<MoneyInputGroup <MoneyInputGroup
value={value} value={value}
@@ -211,14 +214,17 @@ function OwnerDrawingsFormFields({
)} )}
</Field> </Field>
{/*------------ exchange rate -----------*/} <If condition={isForeigAccount}>
<ExchangeRateMutedField {/*------------ exchange rate -----------*/}
name={'exchange_rate'} <ExchangeRateMutedField
fromCurrency={values?.currency_code} name={'exchange_rate'}
toCurrency={account?.currency_code} fromCurrency={values?.currency_code}
formGroupProps={{ label: '', inline: false }} toCurrency={account?.currency_code}
exchangeRate={values.exchange_rate} formGroupProps={{ label: '', inline: false }}
/> date={values.date}
exchangeRate={values.exchange_rate}
/>
</If>
<Row> <Row>
<Col xs={5}> <Col xs={5}>
{/*------------ equitty account -----------*/} {/*------------ equitty account -----------*/}

View File

@@ -18,6 +18,7 @@ import {
Icon, Icon,
Col, Col,
Row, Row,
If,
InputPrependButton, InputPrependButton,
FeatureCan, FeatureCan,
BranchSelect, BranchSelect,
@@ -41,6 +42,7 @@ import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
import { import {
useObserveTransactionNoSettings, useObserveTransactionNoSettings,
useSetPrimaryBranchToForm, useSetPrimaryBranchToForm,
useForeignAccount,
BranchRowDivider, BranchRowDivider,
} from '../utils'; } from '../utils';
import withSettings from 'containers/Settings/withSettings'; import withSettings from 'containers/Settings/withSettings';
@@ -61,6 +63,7 @@ function TransferToAccountFormFields({
// Money in dialog context. // Money in dialog context.
const { accounts, account, branches } = useMoneyOutDialogContext(); const { accounts, account, branches } = useMoneyOutDialogContext();
const { values } = useFormikContext(); const { values } = useFormikContext();
const isForeigAccount = useForeignAccount();
const accountRef = useAutofocus(); const accountRef = useAutofocus();
@@ -196,7 +199,7 @@ function TransferToAccountFormFields({
className={'form-group--amount'} className={'form-group--amount'}
> >
<ControlGroup> <ControlGroup>
<InputPrependText text={values.currency_code} /> <InputPrependText text={account.currency_code} />
<MoneyInputGroup <MoneyInputGroup
value={value} value={value}
@@ -211,16 +214,17 @@ function TransferToAccountFormFields({
</FormGroup> </FormGroup>
)} )}
</FastField> </FastField>
<If condition={isForeigAccount}>
{/*------------ exchange rate -----------*/} {/*------------ exchange rate -----------*/}
<ExchangeRateMutedField <ExchangeRateMutedField
name={'exchange_rate'} name={'exchange_rate'}
fromCurrency={values?.currency_code} fromCurrency={values?.currency_code}
toCurrency={account?.currency_code} toCurrency={account?.currency_code}
formGroupProps={{ label: '', inline: false }} formGroupProps={{ label: '', inline: false }}
exchangeRate={values.exchange_rate} date={values.date}
/> exchangeRate={values.exchange_rate}
/>
</If>
<Row> <Row>
<Col xs={5}> <Col xs={5}>
{/*------------ transfer from account -----------*/} {/*------------ transfer from account -----------*/}

View File

@@ -2,7 +2,7 @@ import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { useFormikContext } from 'formik'; import { useFormikContext } from 'formik';
import { transactionNumber } from 'utils'; import { transactionNumber } from 'utils';
import { first } from 'lodash'; import { first, isEqual, isNull } from 'lodash';
import { useMoneyOutDialogContext } from './MoneyOutDialogProvider'; import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
@@ -29,6 +29,16 @@ export const useSetPrimaryBranchToForm = () => {
} }
}, [isBranchesSuccess, setFieldValue, branches]); }, [isBranchesSuccess, setFieldValue, branches]);
}; };
export const useForeignAccount = () => {
const { values } = useFormikContext();
const { account } = useMoneyOutDialogContext();
return (
!isEqual(account.currency_code, values.currency_code) &&
!isNull(account.currency_code)
);
};
export const BranchRowDivider = styled.div` export const BranchRowDivider = styled.div`
height: 1px; height: 1px;
background: #ebf1f6; background: #ebf1f6;

View File

@@ -3,22 +3,20 @@ import intl from 'react-intl-universal';
import { DATATYPES_LENGTH } from 'common/dataTypes'; import { DATATYPES_LENGTH } from 'common/dataTypes';
const Schema = Yup.object().shape({ const Schema = Yup.object().shape({
customer_id: Yup.string() customer_id: Yup.string().label(intl.get('customer_name_')).required(),
.label(intl.get('customer_name_'))
.required(),
payment_receive_no: Yup.string() payment_receive_no: Yup.string()
.required() .required()
.nullable() .nullable()
.max(DATATYPES_LENGTH.STRING) .max(DATATYPES_LENGTH.STRING)
.label(intl.get('payment_receive_no_')), .label(intl.get('payment_receive_no_')),
payment_date: Yup.date() payment_date: Yup.date().required().label(intl.get('payment_date_')),
.required()
.label(intl.get('payment_date_')),
deposit_account_id: Yup.number() deposit_account_id: Yup.number()
.required() .required()
.label(intl.get('deposit_account_')), .label(intl.get('deposit_account_')),
reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(), reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
// statement: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT), // statement: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
branch_id: Yup.string(),
exchange_rate: Yup.number(),
entries: Yup.array().of( entries: Yup.array().of(
Yup.object().shape({ Yup.object().shape({
payment_amount: Yup.number().nullable(), payment_amount: Yup.number().nullable(),

View File

@@ -2,23 +2,32 @@ import React from 'react';
import 'style/pages/PaymentReceive/QuickPaymentReceiveDialog.scss'; import 'style/pages/PaymentReceive/QuickPaymentReceiveDialog.scss';
import { QuickPaymentReceiveFormProvider } from './QuickPaymentReceiveFormProvider';
import QuickPaymentReceiveForm from './QuickPaymentReceiveForm'; import QuickPaymentReceiveForm from './QuickPaymentReceiveForm';
import { QuickPaymentReceiveFormProvider } from './QuickPaymentReceiveFormProvider';
import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
import { compose } from 'utils';
/** /**
* Quick payment receive form dialog content. * Quick payment receive form dialog content.
*/ */
export default function QuickPaymentReceiveFormDialogContent({ function QuickPaymentReceiveFormDialogContent({
// #ownProps // #ownProps
dialogName, dialogName,
invoice, invoice,
// #withCurrentOrganization
organization: { base_currency },
}) { }) {
return ( return (
<QuickPaymentReceiveFormProvider <QuickPaymentReceiveFormProvider
invoiceId={invoice} invoiceId={invoice}
dialogName={dialogName} dialogName={dialogName}
baseCurrency={base_currency}
> >
<QuickPaymentReceiveForm /> <QuickPaymentReceiveForm />
</QuickPaymentReceiveFormProvider> </QuickPaymentReceiveFormProvider>
); );
} }
export default compose(withCurrentOrganization())(
QuickPaymentReceiveFormDialogContent,
);