feat(Sales & Purchases ): add exchange rate input.

This commit is contained in:
elforjani13
2022-02-21 15:25:32 +02:00
parent 914e1de79f
commit 7c9ad8438c
22 changed files with 306 additions and 47 deletions

View File

@@ -6,7 +6,13 @@ import { FastField, ErrorMessage } from 'formik';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import { VendorSelectField, FieldRequiredHint, Icon } from 'components';
import {
VendorSelectField,
FieldRequiredHint,
Icon,
ExchangeRateInputGroup,
If,
} from 'components';
import { vendorsFieldShouldUpdate } from './utils';
import { useBillFormContext } from './BillFormProvider';
@@ -24,7 +30,7 @@ import {
*/
function BillFormHeader() {
// Bill form context.
const { vendors } = useBillFormContext();
const { vendors, isForeignVendor, setSelectVendor } = useBillFormContext();
return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
@@ -49,6 +55,7 @@ function BillFormHeader() {
defaultSelectText={<T id={'select_vender_account'} />}
onContactSelected={(contact) => {
form.setFieldValue('vendor_id', contact.id);
setSelectVendor(contact);
}}
popoverFill={true}
allowCreate={true}
@@ -57,6 +64,16 @@ function BillFormHeader() {
)}
</FastField>
{/* ----------- Exchange rate ----------- */}
<If condition={isForeignVendor}>
<ExchangeRateInputGroup
fromCurrency={'USD'}
toCurrency={'LYD'}
name={'exchange_rate'}
formGroupProps={{ label: ' ', inline: true }}
/>
</If>
{/* ------- Bill date ------- */}
<FastField name={'bill_date'}>
{({ form, field: { value }, meta: { error, touched } }) => (

View File

@@ -4,15 +4,22 @@ import { useParams } from 'react-router-dom';
import BillForm from './BillForm';
import { BillFormProvider } from './BillFormProvider';
import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
import { compose } from 'utils';
import 'style/pages/Bills/PageForm.scss';
export default function BillFormPage() {
function BillFormPage({
// #withCurrentOrganization
organization: { base_currency },
}) {
const { id } = useParams();
const billId = parseInt(id, 10);
return (
<BillFormProvider billId={billId}>
<BillFormProvider billId={billId} baseCurrency={base_currency}>
<BillForm />
</BillFormProvider>
);
}
}
export default compose(withCurrentOrganization())(BillFormPage);

View File

@@ -1,4 +1,6 @@
import React, { createContext, useState } from 'react';
import {isEqual, isUndefined } from 'lodash';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import {
useAccounts,
@@ -35,7 +37,7 @@ const stringifiedFilterRoles = JSON.stringify([
/**
* Bill form provider.
*/
function BillFormProvider({ billId, ...props }) {
function BillFormProvider({ billId, baseCurrency, ...props }) {
// Handle fetch accounts.
const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
@@ -78,6 +80,7 @@ function BillFormProvider({ billId, ...props }) {
// Form submit payload.
const [submitPayload, setSubmitPayload] = useState({});
const [selectVendor, setSelectVendor] = React.useState(null);
// Create and edit bills mutations.
const { mutateAsync: createBillMutate } = useCreateBill();
@@ -88,6 +91,11 @@ function BillFormProvider({ billId, ...props }) {
// Determines whether the warehouse and branches are loading.
const isFeatureLoading = isWarehouesLoading || isBranchesLoading;
// Determines whether the foreign vendor.
const isForeignVendor =
!isEqual(selectVendor?.currency_code, baseCurrency) &&
!isUndefined(selectVendor?.currency_code);
const provider = {
accounts,
vendors,
@@ -95,6 +103,9 @@ function BillFormProvider({ billId, ...props }) {
bill,
warehouses,
branches,
baseCurrency,
selectVendor,
setSelectVendor,
submitPayload,
isNewMode,
@@ -106,6 +117,7 @@ function BillFormProvider({ billId, ...props }) {
isFeatureLoading,
isBranchesSuccess,
isWarehousesSuccess,
isForeignVendor,
createBillMutate,
editBillMutate,

View File

@@ -13,7 +13,9 @@ import {
VendorSelectField,
FieldRequiredHint,
InputPrependButton,
ExchangeRateInputGroup,
Icon,
If,
FormattedMessage as T,
} from 'components';
import {
@@ -47,7 +49,8 @@ function VendorCreditNoteFormHeaderFields({
vendorcreditNextNumber,
}) {
// Vendor Credit form context.
const { vendors } = useVendorCreditNoteFormContext();
const { vendors, isForeignVendor, setSelectVendor } =
useVendorCreditNoteFormContext();
// Handle vendor credit number changing.
const handleVendorCreditNumberChange = () => {
@@ -96,6 +99,7 @@ function VendorCreditNoteFormHeaderFields({
defaultSelectText={<T id={'select_vender_account'} />}
onContactSelected={(contact) => {
form.setFieldValue('vendor_id', contact.id);
setSelectVendor(contact);
}}
popoverFill={true}
allowCreate={true}
@@ -104,6 +108,16 @@ function VendorCreditNoteFormHeaderFields({
)}
</FastField>
{/* ----------- Exchange rate ----------- */}
<If condition={isForeignVendor}>
<ExchangeRateInputGroup
fromCurrency={'USD'}
toCurrency={'LYD'}
name={'exchange_rate'}
formGroupProps={{ label: ' ', inline: true }}
/>
</If>
{/* ------- Vendor Credit date ------- */}
<FastField name={'vendor_credit_date'}>
{({ form, field: { value }, meta: { error, touched } }) => (

View File

@@ -6,16 +6,26 @@ import '../../../../style/pages/VendorsCreditNote/PageForm.scss';
import VendorCreditNoteForm from './VendorCreditNoteForm';
import { VendorCreditNoteFormProvider } from './VendorCreditNoteFormProvider';
import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
import { compose } from 'utils';
/**
* Vendor Credit note form pages.
*/
export default function VendorCreditNoteFormPage() {
function VendorCreditNoteFormPage({
// #withCurrentOrganization
organization: { base_currency },
}) {
const { id } = useParams();
const idAsInteger = parseInt(id, 10);
return (
<VendorCreditNoteFormProvider vendorCreditId={idAsInteger}>
<VendorCreditNoteFormProvider
vendorCreditId={idAsInteger}
baseCurrency={base_currency}
>
<VendorCreditNoteForm />
</VendorCreditNoteFormProvider>
);
}
export default compose(withCurrentOrganization())(VendorCreditNoteFormPage);

View File

@@ -1,6 +1,6 @@
import React from 'react';
import { useLocation } from 'react-router-dom';
import { isEmpty, pick } from 'lodash';
import { isEmpty, pick, isEqual, isUndefined } from 'lodash';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import { transformToEditForm } from './utils';
import {
@@ -20,7 +20,11 @@ const VendorCreditNoteFormContext = React.createContext();
/**
* Vendor Credit note data provider.
*/
function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
function VendorCreditNoteFormProvider({
vendorCreditId,
baseCurrency,
...props
}) {
const { state } = useLocation();
const billId = state?.billId;
@@ -69,6 +73,7 @@ function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
// Form submit payload.
const [submitPayload, setSubmitPayload] = React.useState();
const [selectVendor, setSelectVendor] = React.useState(null);
// Create and edit vendor credit mutations.
const { mutateAsync: createVendorCreditMutate } = useCreateVendorCredit();
@@ -80,6 +85,11 @@ function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
// Determines whether the warehouse and branches are loading.
const isFeatureLoading = isWarehouesLoading || isBranchesLoading;
// Determines whether the foreign vendor.
const isForeignVendor =
!isEqual(selectVendor?.currency_code, baseCurrency) &&
!isUndefined(selectVendor?.currency_code);
const newVendorCredit = !isEmpty(bill)
? transformToEditForm({
...pick(bill, ['vendor_id', 'entries']),
@@ -93,6 +103,9 @@ function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
vendorCredit,
warehouses,
branches,
baseCurrency,
selectVendor,
setSelectVendor,
submitPayload,
isNewMode,
newVendorCredit,
@@ -101,7 +114,8 @@ function VendorCreditNoteFormProvider({ vendorCreditId, ...props }) {
isFeatureLoading,
isBranchesSuccess,
isWarehousesSuccess,
isForeignVendor,
createVendorCreditMutate,
editVendorCreditMutate,
setSubmitPayload,

View File

@@ -20,8 +20,10 @@ import {
InputPrependText,
Money,
Hint,
If,
Icon,
MoneyInputGroup,
ExchangeRateInputGroup,
} from 'components';
import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
@@ -49,8 +51,14 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
} = useFormikContext();
// Payment made form context.
const { vendors, accounts, isNewMode, setPaymentVendorId } =
usePaymentMadeFormContext();
const {
vendors,
accounts,
isNewMode,
setPaymentVendorId,
isForeignVendor,
setSelectVendor,
} = usePaymentMadeFormContext();
// Sumation of payable full-amount.
const payableFullAmount = useMemo(
@@ -97,6 +105,7 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
onContactSelected={(contact) => {
form.setFieldValue('vendor_id', contact.id);
setPaymentVendorId(contact.id);
setSelectVendor(contact);
}}
disabled={!isNewMode}
popoverFill={true}
@@ -106,6 +115,16 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
)}
</FastField>
{/* ----------- Exchange rate ----------- */}
<If condition={isForeignVendor}>
<ExchangeRateInputGroup
fromCurrency={'USD'}
toCurrency={'LYD'}
name={'exchange_rate'}
formGroupProps={{ label: ' ', inline: true }}
/>
</If>
{/* ------------ Payment date ------------ */}
<FastField name={'payment_date'}>
{({ form, field: { value }, meta: { error, touched } }) => (

View File

@@ -4,17 +4,27 @@ import { useParams } from 'react-router-dom';
import PaymentMadeForm from './PaymentMadeForm';
import { PaymentMadeFormProvider } from './PaymentMadeFormProvider';
import 'style/pages/PaymentMade/PageForm.scss'
import 'style/pages/PaymentMade/PageForm.scss';
import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
import { compose } from 'utils';
/**
* Payment made - Page form.
*/
export default function PaymentMadeFormPage() {
function PaymentMadeFormPage({
// #withCurrentOrganization
organization: { base_currency },
}) {
const { id: paymentMadeId } = useParams();
return (
<PaymentMadeFormProvider paymentMadeId={paymentMadeId}>
<PaymentMadeForm />
<PaymentMadeFormProvider
paymentMadeId={paymentMadeId}
baseCurrency={base_currency}
>
<PaymentMadeForm />
</PaymentMadeFormProvider>
);
}
}
export default compose(withCurrentOrganization())(PaymentMadeFormPage);

View File

@@ -1,4 +1,5 @@
import React, { createContext, useContext } from 'react';
import { isEqual, isUndefined } from 'lodash';
import {
useAccounts,
useVendors,
@@ -17,9 +18,10 @@ const PaymentMadeFormContext = createContext();
/**
* Payment made form provider.
*/
function PaymentMadeFormProvider({ paymentMadeId, ...props }) {
function PaymentMadeFormProvider({ paymentMadeId, baseCurrency, ...props }) {
const [submitPayload, setSubmitPayload] = React.useState({});
const [paymentVendorId, setPaymentVendorId] = React.useState(null);
const [selectVendor, setSelectVendor] = React.useState(null);
// Handle fetch accounts data.
const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
@@ -64,6 +66,11 @@ function PaymentMadeFormProvider({ paymentMadeId, ...props }) {
const isFeatureLoading = isBranchesLoading;
// Determines whether the foreign vendor.
const isForeignVendor =
!isEqual(selectVendor?.currency_code, baseCurrency) &&
!isUndefined(selectVendor?.currency_code);
// Provider payload.
const provider = {
paymentMadeId,
@@ -74,6 +81,9 @@ function PaymentMadeFormProvider({ paymentMadeId, ...props }) {
items,
branches,
submitPayload,
baseCurrency,
selectVendor,
setSelectVendor,
paymentVendorId,
isNewMode,
@@ -85,6 +95,7 @@ function PaymentMadeFormProvider({ paymentMadeId, ...props }) {
isPaymentLoading,
isFeatureLoading,
isBranchesSuccess,
isForeignVendor,
createPaymentMadeMutate,
editPaymentMadeMutate,