feat(Sales & Purchases ): add currency tag.

This commit is contained in:
elforjani13
2022-02-21 19:30:00 +02:00
parent b15437c88e
commit 9ff91e27e5
20 changed files with 348 additions and 111 deletions

View File

@@ -0,0 +1,10 @@
import React from 'react';
import { CurrencyTag } from 'components';
/**
* base currecncy.
* @returns
*/
export function BaseCurrency({ currency }) {
return <CurrencyTag>{currency}</CurrencyTag>;
}

View File

@@ -1 +1,2 @@
export * from './CurrencySelect'
export * from './CurrencySelect';
export * from './BaseCurrency';

View File

@@ -9,3 +9,13 @@ export const CurrencyTag = styled.span`
line-height: 1;
margin-left: 4px;
`;
export const BaseCurrencyRoot = styled.div`
display: flex;
align-items: center;
font-size: 10px;
margin-left: 4px;
> span {
background: #5c7080;
}
`;

View File

@@ -55,7 +55,6 @@ import AvaterCell from './AvaterCell';
import { ItemsMultiSelect } from './Items';
import MoreMenuItems from './MoreMenutItems';
import CustomSelectList from './CustomSelectList';
import BaseCurrency from './BaseCurrency';
export * from './Dialog';
export * from './Menu';
@@ -168,7 +167,6 @@ export {
MoneyFieldCell,
ItemsMultiSelect,
AvaterCell,
BaseCurrency,
MoreMenuItems,
CustomSelectList,
};

View File

@@ -0,0 +1,21 @@
import React from 'react';
import { BaseCurrency, BaseCurrencyRoot } from 'components';
import { useBillFormContext } from './BillFormProvider';
/**
* Bill form currnecy tag.
* @returns
*/
export default function BillFormCurrencyTag() {
const { isForeignVendor, selectVendor } = useBillFormContext();
if (!isForeignVendor) {
return null;
}
return (
<BaseCurrencyRoot>
<BaseCurrency currency={selectVendor?.currency_code} />
</BaseCurrencyRoot>
);
}

View File

@@ -1,9 +1,15 @@
import React from 'react';
import { FormGroup, InputGroup, Position } from '@blueprintjs/core';
import {
FormGroup,
InputGroup,
Position,
ControlGroup,
} from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { FormattedMessage as T } from 'components';
import { FastField, ErrorMessage } from 'formik';
import classNames from 'classnames';
import styled from 'styled-components';
import { CLASSES } from 'common/classes';
import {
@@ -16,6 +22,7 @@ import {
import { vendorsFieldShouldUpdate } from './utils';
import { useBillFormContext } from './BillFormProvider';
import BillFormCurrencyTag from './BillFormCurrencyTag';
import withDialogActions from 'containers/Dialog/withDialogActions';
import {
momentFormatter,
@@ -49,17 +56,20 @@ function BillFormHeader() {
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'vendor_id'} />}
>
<VendorSelectField
contacts={vendors}
selectedContactId={value}
defaultSelectText={<T id={'select_vender_account'} />}
onContactSelected={(contact) => {
form.setFieldValue('vendor_id', contact.id);
setSelectVendor(contact);
}}
popoverFill={true}
allowCreate={true}
/>
<ControlVendorGroup>
<VendorSelectField
contacts={vendors}
selectedContactId={value}
defaultSelectText={<T id={'select_vender_account'} />}
onContactSelected={(contact) => {
form.setFieldValue('vendor_id', contact.id);
setSelectVendor(contact);
}}
popoverFill={true}
allowCreate={true}
/>
<BillFormCurrencyTag />
</ControlVendorGroup>
</FormGroup>
)}
</FastField>
@@ -161,3 +171,9 @@ function BillFormHeader() {
}
export default compose(withDialogActions)(BillFormHeader);
const ControlVendorGroup = styled(ControlGroup)`
display: flex;
align-items: center;
transform: none;
`;

View File

@@ -0,0 +1,21 @@
import React from 'react';
import { BaseCurrency, BaseCurrencyRoot } from 'components';
import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
/**
* Vendor credit note currency tag.
* @returns
*/
export default function VendorCreditNoteFormCurrencyTag() {
const { isForeignVendor, selectVendor } = useVendorCreditNoteFormContext();
if (!isForeignVendor) {
return null;
}
return (
<BaseCurrencyRoot>
<BaseCurrency currency={selectVendor?.currency_code} />
</BaseCurrencyRoot>
);
}

View File

@@ -9,6 +9,8 @@ import { DateInput } from '@blueprintjs/datetime';
import { FastField, Field, ErrorMessage } from 'formik';
import { CLASSES } from 'common/classes';
import classNames from 'classnames';
import styled from 'styled-components';
import {
VendorSelectField,
FieldRequiredHint,
@@ -24,7 +26,7 @@ import {
} from './utils';
import { useVendorCreditNoteFormContext } from './VendorCreditNoteFormProvider';
import VendorCreditNoteFormCurrencyTag from './VendorCreditNoteFormCurrencyTag';
import {
momentFormatter,
compose,
@@ -93,17 +95,20 @@ function VendorCreditNoteFormHeaderFields({
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'vendor_id'} />}
>
<VendorSelectField
contacts={vendors}
selectedContactId={value}
defaultSelectText={<T id={'select_vender_account'} />}
onContactSelected={(contact) => {
form.setFieldValue('vendor_id', contact.id);
setSelectVendor(contact);
}}
popoverFill={true}
allowCreate={true}
/>
<ControlVendorGroup>
<VendorSelectField
contacts={vendors}
selectedContactId={value}
defaultSelectText={<T id={'select_vender_account'} />}
onContactSelected={(contact) => {
form.setFieldValue('vendor_id', contact.id);
setSelectVendor(contact);
}}
popoverFill={true}
allowCreate={true}
/>
<VendorCreditNoteFormCurrencyTag />
</ControlVendorGroup>
</FormGroup>
)}
</FastField>
@@ -210,3 +215,9 @@ export default compose(
vendorcreditNumberPrefix: vendorsCreditNoteSetting?.numberPrefix,
})),
)(VendorCreditNoteFormHeaderFields);
const ControlVendorGroup = styled(ControlGroup)`
display: flex;
align-items: center;
transform: none;
`;

View File

@@ -0,0 +1,21 @@
import React from 'react';
import { BaseCurrency, BaseCurrencyRoot } from 'components';
import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
/**
* Payment made form currency tag.
* @returns
*/
export default function PaymentMadeFormCurrencyTag() {
const { isForeignVendor, selectVendor } = usePaymentMadeFormContext();
if (!isForeignVendor) {
return null;
}
return (
<BaseCurrencyRoot>
<BaseCurrency currency={selectVendor?.currency_code} />
</BaseCurrencyRoot>
);
}

View File

@@ -13,6 +13,8 @@ import { FormattedMessage as T } from 'components';
import { toSafeInteger } from 'lodash';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import styled from 'styled-components';
import {
AccountsSelectList,
VendorSelectField,
@@ -28,6 +30,7 @@ import {
import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
import { usePaymentMadeFormContext } from './PaymentMadeFormProvider';
import { ACCOUNT_TYPE } from 'common/accountTypes';
import PaymentMadeFormCurrencyTag from './PaymentMadeFormCurrencyTag';
import {
momentFormatter,
tansformDateValue,
@@ -98,19 +101,22 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'vendor_id'} />}
>
<VendorSelectField
contacts={vendors}
selectedContactId={value}
defaultSelectText={<T id={'select_vender_account'} />}
onContactSelected={(contact) => {
form.setFieldValue('vendor_id', contact.id);
setPaymentVendorId(contact.id);
setSelectVendor(contact);
}}
disabled={!isNewMode}
popoverFill={true}
allowCreate={true}
/>
<ControlVendorGroup>
<VendorSelectField
contacts={vendors}
selectedContactId={value}
defaultSelectText={<T id={'select_vender_account'} />}
onContactSelected={(contact) => {
form.setFieldValue('vendor_id', contact.id);
setPaymentVendorId(contact.id);
setSelectVendor(contact);
}}
disabled={!isNewMode}
popoverFill={true}
allowCreate={true}
/>
<PaymentMadeFormCurrencyTag />
</ControlVendorGroup>
</FormGroup>
)}
</FastField>
@@ -265,3 +271,9 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
}
export default compose(withCurrentOrganization())(PaymentMadeFormHeaderFields);
const ControlVendorGroup = styled(ControlGroup)`
display: flex;
align-items: center;
transform: none;
`;

View File

@@ -9,6 +9,7 @@ import { DateInput } from '@blueprintjs/datetime';
import { FastField, Field, ErrorMessage } from 'formik';
import { CLASSES } from 'common/classes';
import classNames from 'classnames';
import styled from 'styled-components';
import {
CustomerSelectField,
FieldRequiredHint,
@@ -26,7 +27,7 @@ import {
import { useCreditNoteFormContext } from './CreditNoteFormProvider';
import withSettings from 'containers/Settings/withSettings';
import withDialogActions from 'containers/Dialog/withDialogActions';
import CreditNotetFormCurrencyTag from './CreditNotetFormCurrencyTag';
import {
momentFormatter,
compose,
@@ -94,17 +95,20 @@ function CreditNoteFormHeaderFields({
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'customer_id'} />}
>
<CustomerSelectField
contacts={customers}
selectedContactId={value}
defaultSelectText={<T id={'select_customer_account'} />}
onContactSelected={(customer) => {
form.setFieldValue('customer_id', customer.id);
setSelectCustomer(customer);
}}
popoverFill={true}
allowCreate={true}
/>
<ControlCustomerGroup>
<CustomerSelectField
contacts={customers}
selectedContactId={value}
defaultSelectText={<T id={'select_customer_account'} />}
onContactSelected={(customer) => {
form.setFieldValue('customer_id', customer.id);
setSelectCustomer(customer);
}}
popoverFill={true}
allowCreate={true}
/>
<CreditNotetFormCurrencyTag />
</ControlCustomerGroup>
</FormGroup>
)}
</FastField>
@@ -207,3 +211,9 @@ export default compose(
creditNumberPrefix: creditNoteSettings?.numberPrefix,
})),
)(CreditNoteFormHeaderFields);
const ControlCustomerGroup = styled(ControlGroup)`
display: flex;
align-items: center;
transform: none;
`;

View File

@@ -0,0 +1,21 @@
import React from 'react';
import { BaseCurrency, BaseCurrencyRoot } from 'components';
import { useCreditNoteFormContext } from './CreditNoteFormProvider';
/**
* Credit note from currency tag.
* @returns
*/
export default function CreditNotetFormCurrencyTag() {
const { isForeignCustomer, selectCustomer } = useCreditNoteFormContext();
if (!isForeignCustomer) {
return null;
}
return (
<BaseCurrencyRoot>
<BaseCurrency currency={selectCustomer?.currency_code} />
</BaseCurrencyRoot>
);
}

View File

@@ -0,0 +1,21 @@
import React from 'react';
import { BaseCurrency, BaseCurrencyRoot } from 'components';
import { useEstimateFormContext } from './EstimateFormProvider';
/**
* Estimate form currency tag.
* @returns
*/
export default function EstimateFromCurrencyTag() {
const { isForeignCustomer, selectCustomer } = useEstimateFormContext();
if (!isForeignCustomer) {
return null;
}
return (
<BaseCurrencyRoot>
<BaseCurrency currency={selectCustomer?.currency_code} />
</BaseCurrencyRoot>
);
}

View File

@@ -8,6 +8,8 @@ import {
import { DateInput } from '@blueprintjs/datetime';
import { FormattedMessage as T } from 'components';
import { FastField, Field, ErrorMessage } from 'formik';
import styled from 'styled-components';
import {
momentFormatter,
compose,
@@ -29,7 +31,7 @@ import {
import withDialogActions from 'containers/Dialog/withDialogActions';
import withSettings from 'containers/Settings/withSettings';
import EstimateFormCurrencyTag from './EstimateFormCurrencyTag';
import { useObserveEstimateNoSettings } from './utils';
import { useEstimateFormContext } from './EstimateFormProvider';
@@ -85,18 +87,21 @@ function EstimateFormHeader({
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'customer_id'} />}
>
<CustomerSelectField
contacts={customers}
selectedContactId={value}
defaultSelectText={<T id={'select_customer_account'} />}
onContactSelected={(customer) => {
form.setFieldValue('customer_id', customer.id);
setSelectCustomer(customer);
}}
popoverFill={true}
intent={inputIntent({ error, touched })}
allowCreate={true}
/>
<ControlCustomerGroup>
<CustomerSelectField
contacts={customers}
selectedContactId={value}
defaultSelectText={<T id={'select_customer_account'} />}
onContactSelected={(customer) => {
form.setFieldValue('customer_id', customer.id);
setSelectCustomer(customer);
}}
popoverFill={true}
intent={inputIntent({ error, touched })}
allowCreate={true}
/>
<EstimateFormCurrencyTag />
</ControlCustomerGroup>
</FormGroup>
)}
</FastField>
@@ -229,3 +234,9 @@ export default compose(
estimateAutoIncrement: estimatesSettings?.autoIncrement,
})),
)(EstimateFormHeader);
const ControlCustomerGroup = styled(ControlGroup)`
display: flex;
align-items: center;
transform: none;
`;

View File

@@ -1,32 +1,20 @@
import React from 'react';
import styled from 'styled-components';
import { BaseCurrency } from 'components';
import { BaseCurrency, BaseCurrencyRoot } from 'components';
import { useInvoiceFormContext } from './InvoiceFormProvider';
/**
* Invoice form currency tag.
*/
export default function InvoiceFormCurrencyTag() {
const { isForeignCustomer } = useInvoiceFormContext();
const { isForeignCustomer, selectCustomer } = useInvoiceFormContext();
if (!isForeignCustomer) {
return null;
}
return (
<BaseCurrencyTag>
<BaseCurrency />
</BaseCurrencyTag>
<BaseCurrencyRoot>
<BaseCurrency currency={selectCustomer?.currency_code} />
</BaseCurrencyRoot>
);
}
const BaseCurrencyTag = styled.div`
display: flex;
align-items: center;
font-size: 10px;
margin-left: 4px;
span {
background: #5c7080;
}
`;

View File

@@ -57,7 +57,7 @@ function InvoiceFormHeaderFields({
invoiceNextNumber,
}) {
// Invoice form context.
const { customers, isForeignCustomer, setSelectCustomer } =
const { customers, isForeignCustomer,selectCustomer ,setSelectCustomer } =
useInvoiceFormContext();
// Handle invoice number changing.
@@ -115,7 +115,7 @@ function InvoiceFormHeaderFields({
popoverFill={true}
allowCreate={true}
/>
<InvoiceCurrencyTag isForeignCustomer={isForeignCustomer} />
<InvoiceCurrencyTag />
</ControlCustomerGroup>
</FormGroup>
)}

View File

@@ -0,0 +1,21 @@
import React from 'react';
import { BaseCurrency, BaseCurrencyRoot } from 'components';
import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
/**
* Payment reecevie form currnecy tag.
* @returns
*/
export default function PaymentReceiveFormCurrencyTag() {
const { isForeignCustomer, selectCustomer } = usePaymentReceiveFormContext();
if (!isForeignCustomer) {
return null;
}
return (
<BaseCurrencyRoot>
<BaseCurrency currency={selectCustomer?.currency_code} />
</BaseCurrencyRoot>
);
}

View File

@@ -13,6 +13,7 @@ import { FastField, Field, useFormikContext, ErrorMessage } from 'formik';
import { useAutofocus } from 'hooks';
import { CLASSES } from 'common/classes';
import classNames from 'classnames';
import styled from 'styled-components';
import {
compose,
safeSumBy,
@@ -35,6 +36,7 @@ import {
} from 'components';
import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
import { ACCOUNT_TYPE } from 'common/accountTypes';
import PaymentReceiveFormCurrencyTag from './PaymentReceiveFormCurrencyTag';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withSettings from 'containers/Settings/withSettings';
@@ -142,22 +144,25 @@ function PaymentReceiveHeaderFields({
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'customer_id'} />}
>
<CustomerSelectField
contacts={customers}
selectedContactId={value}
defaultSelectText={<T id={'select_customer_account'} />}
onContactSelected={(customer) => {
form.setFieldValue('customer_id', customer.id);
form.setFieldValue('full_amount', '');
setSelectCustomer(customer);
}}
popoverFill={true}
disabled={!isNewMode}
buttonProps={{
elementRef: (ref) => (customerFieldRef.current = ref),
}}
allowCreate={true}
/>
<ControlCustomerGroup>
<CustomerSelectField
contacts={customers}
selectedContactId={value}
defaultSelectText={<T id={'select_customer_account'} />}
onContactSelected={(customer) => {
form.setFieldValue('customer_id', customer.id);
form.setFieldValue('full_amount', '');
setSelectCustomer(customer);
}}
popoverFill={true}
disabled={!isNewMode}
buttonProps={{
elementRef: (ref) => (customerFieldRef.current = ref),
}}
allowCreate={true}
/>
<PaymentReceiveFormCurrencyTag />
</ControlCustomerGroup>
</FormGroup>
)}
</FastField>
@@ -344,3 +349,9 @@ export default compose(
withDialogActions,
withCurrentOrganization(),
)(PaymentReceiveHeaderFields);
const ControlCustomerGroup = styled(ControlGroup)`
display: flex;
align-items: center;
transform: none;
`;

View File

@@ -0,0 +1,21 @@
import React from 'react';
import { BaseCurrency, BaseCurrencyRoot } from 'components';
import { useReceiptFormContext } from './ReceiptFormProvider';
/**
* Receipt form currency tag.
* @returns
*/
export default function ReceiptFormCurrencyTag() {
const { isForeignCustomer, selectCustomer } = useReceiptFormContext();
if (!isForeignCustomer) {
return null;
}
return (
<BaseCurrencyRoot>
<BaseCurrency currency={selectCustomer?.currency_code} />
</BaseCurrencyRoot>
);
}

View File

@@ -10,6 +10,8 @@ import { FormattedMessage as T } from 'components';
import classNames from 'classnames';
import { FastField, ErrorMessage } from 'formik';
import { CLASSES } from 'common/classes';
import styled from 'styled-components';
import {
AccountsSelectList,
CustomerSelectField,
@@ -29,6 +31,7 @@ import {
handleDateChange,
inputIntent,
} from 'utils';
import ReceiptFormCurrencyTag from './ReceiptFormCurrencyTag';
import { useReceiptFormContext } from './ReceiptFormProvider';
import {
accountsFieldShouldUpdate,
@@ -91,17 +94,20 @@ function ReceiptFormHeader({
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'customer_id'} />}
>
<CustomerSelectField
contacts={customers}
selectedContactId={value}
defaultSelectText={<T id={'select_customer_account'} />}
onContactSelected={(customer) => {
form.setFieldValue('customer_id', customer.id);
setSelectCustomer(customer);
}}
popoverFill={true}
allowCreate={true}
/>
<ControlCustomerGroup>
<CustomerSelectField
contacts={customers}
selectedContactId={value}
defaultSelectText={<T id={'select_customer_account'} />}
onContactSelected={(customer) => {
form.setFieldValue('customer_id', customer.id);
setSelectCustomer(customer);
}}
popoverFill={true}
allowCreate={true}
/>
<ReceiptFormCurrencyTag />
</ControlCustomerGroup>
</FormGroup>
)}
</FastField>
@@ -242,3 +248,9 @@ export default compose(
receiptNumberPrefix: receiptSettings?.numberPrefix,
})),
)(ReceiptFormHeader);
const ControlCustomerGroup = styled(ControlGroup)`
display: flex;
align-items: center;
transform: none;
`;