mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-19 14:20:31 +00:00
feat(Sales & Purchases ): add exchange rate input.
This commit is contained in:
@@ -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 } }) => (
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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 } }) => (
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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 } }) => (
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user