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,7 +86,6 @@ 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}
@@ -105,6 +104,7 @@ function InvoiceFormHeaderFields({
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}
/> />
<BaseCurrency isForeignCustomer={isForeignCustomer} />
</ControlGroup>
</FormGroup> </FormGroup>
)} )}
</FastField> </FastField>
<BaseCurrency />
</CustomerName>
<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,6 +135,10 @@ function InvoiceFormHeaderFields({
className={'form-group--exchange_rate'} className={'form-group--exchange_rate'}
helperText={<ErrorMessage name="exchange_rate" />} helperText={<ErrorMessage name="exchange_rate" />}
> >
<ControlGroup>
<ExchangeRateTag>
<FlagTag flage={'US'} /> 1 USD =
</ExchangeRateTag>
<MoneyInputGroup <MoneyInputGroup
value={field.value} value={field.value}
allowDecimals={false} allowDecimals={false}
@@ -147,13 +148,15 @@ function InvoiceFormHeaderFields({
}} }}
intent={inputIntent({ error, touched })} 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'}