feat(invoice ): add foreign customer.

This commit is contained in:
elforjani13
2022-02-13 18:28:06 +02:00
parent b272ddf23a
commit 69f086cfae
2 changed files with 63 additions and 57 deletions

View File

@@ -7,7 +7,7 @@ import {
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime'; import { DateInput } from '@blueprintjs/datetime';
import { FastField, Field, ErrorMessage } from 'formik'; import { FastField, Field, ErrorMessage } from 'formik';
import { FormattedMessage as T, Col, Row } from 'components'; import { FormattedMessage as T, Col, Row, If } from 'components';
import { momentFormatter, compose, tansformDateValue } from 'utils'; import { momentFormatter, compose, tansformDateValue } from 'utils';
import { upperCase } from 'lodash'; import { upperCase } from 'lodash';
@@ -59,7 +59,7 @@ function InvoiceFormHeaderFields({
invoiceNextNumber, invoiceNextNumber,
}) { }) {
// Invoice form context. // Invoice form context.
const { customers } = useInvoiceFormContext(); const { customers, isForeignCustomer } = useInvoiceFormContext();
// Handle invoice number changing. // Handle invoice number changing.
const handleInvoiceNumberChange = () => { const handleInvoiceNumberChange = () => {
@@ -86,25 +86,25 @@ function InvoiceFormHeaderFields({
return ( return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}> <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
{/* ----------- Customer name ----------- */} {/* ----------- Customer name ----------- */}
<CustomerName> <FastField
<FastField name={'customer_id'}
name={'customer_id'} customers={customers}
customers={customers} shouldUpdate={customerNameFieldShouldUpdate}
shouldUpdate={customerNameFieldShouldUpdate} >
> {({ form, field: { value }, meta: { error, touched } }) => (
{({ form, field: { value }, meta: { error, touched } }) => ( <FormGroup
<FormGroup label={<T id={'customer_name'} />}
label={<T id={'customer_name'} />} inline={true}
inline={true} className={classNames(
className={classNames( 'form-group--customer-name',
'form-group--customer-name', 'form-group--select-list',
'form-group--select-list', CLASSES.FILL,
CLASSES.FILL, )}
)} labelInfo={<FieldRequiredHint />}
labelInfo={<FieldRequiredHint />} intent={inputIntent({ error, touched })}
intent={inputIntent({ error, touched })} helperText={<ErrorMessage name={'customer_id'} />}
helperText={<ErrorMessage name={'customer_id'} />} >
> <ControlGroup>
<CustomerSelectField <CustomerSelectField
contacts={customers} contacts={customers}
selectedContactId={value} selectedContactId={value}
@@ -115,17 +115,14 @@ function InvoiceFormHeaderFields({
popoverFill={true} popoverFill={true}
allowCreate={true} allowCreate={true}
/> />
</FormGroup> <BaseCurrency isForeignCustomer={isForeignCustomer} />
)} </ControlGroup>
</FastField> </FormGroup>
<BaseCurrency /> )}
</CustomerName> </FastField>
<ExchangeWrapp>
<ExchangeLable>
<FlagTag flage={'US'} /> 1 USD =
</ExchangeLable>
{/* ----------- Exchange reate ----------- */} {/* ----------- Exchange reate ----------- */}
<ExchangeRateField>
<Field name={'exchange_rate'}> <Field name={'exchange_rate'}>
{({ {({
form: { values, setFieldValue }, form: { values, setFieldValue },
@@ -138,22 +135,28 @@ function InvoiceFormHeaderFields({
className={'form-group--exchange_rate'} className={'form-group--exchange_rate'}
helperText={<ErrorMessage name="exchange_rate" />} helperText={<ErrorMessage name="exchange_rate" />}
> >
<MoneyInputGroup <ControlGroup>
value={field.value} <ExchangeRateTag>
allowDecimals={false} <FlagTag flage={'US'} /> 1 USD =
allowNegativeValue={true} </ExchangeRateTag>
onChange={(value) => { <MoneyInputGroup
setFieldValue('exchange_rate', value); value={field.value}
}} allowDecimals={false}
intent={inputIntent({ error, touched })} allowNegativeValue={true}
/> onChange={(value) => {
setFieldValue('exchange_rate', value);
}}
intent={inputIntent({ error, touched })}
/>
<ExchangeRateTag>
<FlagTag flage={'LY'} /> LYD
</ExchangeRateTag>
</ControlGroup>
</FormGroup> </FormGroup>
)} )}
</Field> </Field>
<ExchangeLable> </ExchangeRateField>
<FlagTag flage={'LY'} /> LYD
</ExchangeLable>
</ExchangeWrapp>
<Row> <Row>
<Col xs={6}> <Col xs={6}>
{/* ----------- Invoice date ----------- */} {/* ----------- Invoice date ----------- */}
@@ -240,6 +243,7 @@ function InvoiceFormHeaderFields({
</FastField> </FastField>
</Col> </Col>
</Row> </Row>
{/* ----------- Invoice number ----------- */} {/* ----------- Invoice number ----------- */}
<Field name={'invoice_no'}> <Field name={'invoice_no'}>
{({ form, field, meta: { error, touched } }) => ( {({ form, field, meta: { error, touched } }) => (
@@ -303,27 +307,21 @@ export default compose(
})), })),
)(InvoiceFormHeaderFields); )(InvoiceFormHeaderFields);
const CustomerName = styled.div` const ExchangeRateField = styled.div`
display: flex;
align-items: baseline;
`;
const ExchangeWrapp = styled.div`
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
max-width: 370px; max-width: 366px;
.bp3-form-group.bp3-inline { .bp3-input-group .bp3-input {
width: 88px; width: 88px;
margin: 0 5px;
} }
`; `;
const ExchangeLable = styled.div` const ExchangeRateTag = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
margin-right: 5px;
font-size: 10px; font-size: 10px;
line-height: 1.6; line-height: 1.6;
padding-bottom: calc(1rem + 1px);
`; `;

View File

@@ -74,6 +74,12 @@ function InvoiceFormProvider({ invoiceId, ...props }) {
// Detarmines whether the form in new mode. // Detarmines whether the form in new mode.
const isNewMode = !invoiceId; const isNewMode = !invoiceId;
// Determines whether the warehouse and branches are loading.
const isFeatureLoading = isWarehouesLoading || isBranchesLoading;
// Determines whether the foreign customer.
const isForeignCustomer = true;
// Provider payload. // Provider payload.
const provider = { const provider = {
invoice, invoice,
@@ -90,6 +96,10 @@ function InvoiceFormProvider({ invoiceId, ...props }) {
isItemsLoading, isItemsLoading,
isCustomersLoading, isCustomersLoading,
isSettingsLoading, isSettingsLoading,
isWarehouesLoading,
isBranchesLoading,
isFeatureLoading,
isForeignCustomer,
createInvoiceMutate, createInvoiceMutate,
editInvoiceMutate, editInvoiceMutate,
@@ -104,8 +114,6 @@ function InvoiceFormProvider({ invoiceId, ...props }) {
isItemsLoading || isItemsLoading ||
isCustomersLoading || isCustomersLoading ||
isEstimateLoading || isEstimateLoading ||
isWarehouesLoading ||
isBranchesLoading ||
isSettingsLoading isSettingsLoading
} }
name={'invoice-form'} name={'invoice-form'}