diff --git a/src/components/Currencies/BaseCurrency.js b/src/components/Currencies/BaseCurrency.js new file mode 100644 index 000000000..98a3a14ff --- /dev/null +++ b/src/components/Currencies/BaseCurrency.js @@ -0,0 +1,10 @@ +import React from 'react'; +import { CurrencyTag } from 'components'; + +/** + * base currecncy. + * @returns + */ +export function BaseCurrency({ currency }) { + return {currency}; +} diff --git a/src/components/Currencies/index.js b/src/components/Currencies/index.js index a35e027f0..57a528c05 100644 --- a/src/components/Currencies/index.js +++ b/src/components/Currencies/index.js @@ -1 +1,2 @@ -export * from './CurrencySelect' \ No newline at end of file +export * from './CurrencySelect'; +export * from './BaseCurrency'; diff --git a/src/components/Tags/CurrencyTag.js b/src/components/Tags/CurrencyTag.js index a427c0230..7e9a0ee7a 100644 --- a/src/components/Tags/CurrencyTag.js +++ b/src/components/Tags/CurrencyTag.js @@ -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; + } +`; diff --git a/src/components/index.js b/src/components/index.js index 1bcac86f2..ffc51e6d2 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -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, }; diff --git a/src/containers/Purchases/Bills/BillForm/BillFormCurrencyTag.js b/src/containers/Purchases/Bills/BillForm/BillFormCurrencyTag.js new file mode 100644 index 000000000..3d8e0fd9d --- /dev/null +++ b/src/containers/Purchases/Bills/BillForm/BillFormCurrencyTag.js @@ -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 ( + + + + ); +} diff --git a/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.js b/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.js index f28a800f2..e7e11e11d 100644 --- a/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.js +++ b/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.js @@ -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={} > - } - onContactSelected={(contact) => { - form.setFieldValue('vendor_id', contact.id); - setSelectVendor(contact); - }} - popoverFill={true} - allowCreate={true} - /> + + } + onContactSelected={(contact) => { + form.setFieldValue('vendor_id', contact.id); + setSelectVendor(contact); + }} + popoverFill={true} + allowCreate={true} + /> + + )} @@ -161,3 +171,9 @@ function BillFormHeader() { } export default compose(withDialogActions)(BillFormHeader); + +const ControlVendorGroup = styled(ControlGroup)` + display: flex; + align-items: center; + transform: none; +`; diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormCurrencyTag.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormCurrencyTag.js new file mode 100644 index 000000000..ab968e916 --- /dev/null +++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormCurrencyTag.js @@ -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 ( + + + + ); +} diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.js index b9ee73e1a..30a6cef23 100644 --- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.js +++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.js @@ -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={} > - } - onContactSelected={(contact) => { - form.setFieldValue('vendor_id', contact.id); - setSelectVendor(contact); - }} - popoverFill={true} - allowCreate={true} - /> + + } + onContactSelected={(contact) => { + form.setFieldValue('vendor_id', contact.id); + setSelectVendor(contact); + }} + popoverFill={true} + allowCreate={true} + /> + + )} @@ -210,3 +215,9 @@ export default compose( vendorcreditNumberPrefix: vendorsCreditNoteSetting?.numberPrefix, })), )(VendorCreditNoteFormHeaderFields); + +const ControlVendorGroup = styled(ControlGroup)` + display: flex; + align-items: center; + transform: none; +`; diff --git a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormCurrencyTag.js b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormCurrencyTag.js new file mode 100644 index 000000000..17c3fc0a0 --- /dev/null +++ b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormCurrencyTag.js @@ -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 ( + + + + ); +} diff --git a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js index 2fb15a927..ab5151efa 100644 --- a/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js +++ b/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js @@ -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={} > - } - onContactSelected={(contact) => { - form.setFieldValue('vendor_id', contact.id); - setPaymentVendorId(contact.id); - setSelectVendor(contact); - }} - disabled={!isNewMode} - popoverFill={true} - allowCreate={true} - /> + + } + onContactSelected={(contact) => { + form.setFieldValue('vendor_id', contact.id); + setPaymentVendorId(contact.id); + setSelectVendor(contact); + }} + disabled={!isNewMode} + popoverFill={true} + allowCreate={true} + /> + + )} @@ -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; +`; diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.js index 9e3d4ef1e..1a0a34d97 100644 --- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.js +++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.js @@ -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={} > - } - onContactSelected={(customer) => { - form.setFieldValue('customer_id', customer.id); - setSelectCustomer(customer); - }} - popoverFill={true} - allowCreate={true} - /> + + } + onContactSelected={(customer) => { + form.setFieldValue('customer_id', customer.id); + setSelectCustomer(customer); + }} + popoverFill={true} + allowCreate={true} + /> + + )} @@ -207,3 +211,9 @@ export default compose( creditNumberPrefix: creditNoteSettings?.numberPrefix, })), )(CreditNoteFormHeaderFields); + +const ControlCustomerGroup = styled(ControlGroup)` + display: flex; + align-items: center; + transform: none; +`; diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNotetFormCurrencyTag.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNotetFormCurrencyTag.js new file mode 100644 index 000000000..ec47d2025 --- /dev/null +++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNotetFormCurrencyTag.js @@ -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 ( + + + + ); +} diff --git a/src/containers/Sales/Estimates/EstimateForm/EstimateFormCurrencyTag.js b/src/containers/Sales/Estimates/EstimateForm/EstimateFormCurrencyTag.js new file mode 100644 index 000000000..5be66d38f --- /dev/null +++ b/src/containers/Sales/Estimates/EstimateForm/EstimateFormCurrencyTag.js @@ -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 ( + + + + ); +} diff --git a/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js b/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js index 90b558de7..871b731ec 100644 --- a/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js +++ b/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js @@ -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={} > - } - onContactSelected={(customer) => { - form.setFieldValue('customer_id', customer.id); - setSelectCustomer(customer); - }} - popoverFill={true} - intent={inputIntent({ error, touched })} - allowCreate={true} - /> + + } + onContactSelected={(customer) => { + form.setFieldValue('customer_id', customer.id); + setSelectCustomer(customer); + }} + popoverFill={true} + intent={inputIntent({ error, touched })} + allowCreate={true} + /> + + )} @@ -229,3 +234,9 @@ export default compose( estimateAutoIncrement: estimatesSettings?.autoIncrement, })), )(EstimateFormHeader); + +const ControlCustomerGroup = styled(ControlGroup)` + display: flex; + align-items: center; + transform: none; +`; diff --git a/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormCurrencyTag.js b/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormCurrencyTag.js index e40ce22d8..c7abe1a3b 100644 --- a/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormCurrencyTag.js +++ b/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormCurrencyTag.js @@ -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 ( - - - + + + ); } - -const BaseCurrencyTag = styled.div` - display: flex; - align-items: center; - font-size: 10px; - margin-left: 4px; - span { - background: #5c7080; - } -`; diff --git a/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.js b/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.js index 31d48a57f..245fa2afc 100644 --- a/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.js +++ b/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.js @@ -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} /> - + )} diff --git a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormCurrencyTag.js b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormCurrencyTag.js new file mode 100644 index 000000000..9ffc0b5dd --- /dev/null +++ b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormCurrencyTag.js @@ -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 ( + + + + ); +} diff --git a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js index 9b8cbebdb..d7aff974d 100644 --- a/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js +++ b/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js @@ -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={} > - } - 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} - /> + + } + 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} + /> + + )} @@ -344,3 +349,9 @@ export default compose( withDialogActions, withCurrentOrganization(), )(PaymentReceiveHeaderFields); + +const ControlCustomerGroup = styled(ControlGroup)` + display: flex; + align-items: center; + transform: none; +`; diff --git a/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormCurrencyTag.js b/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormCurrencyTag.js new file mode 100644 index 000000000..219a9597b --- /dev/null +++ b/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormCurrencyTag.js @@ -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 ( + + + + ); +} diff --git a/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.js b/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.js index dfc989f4a..c8308142b 100644 --- a/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.js +++ b/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.js @@ -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={} > - } - onContactSelected={(customer) => { - form.setFieldValue('customer_id', customer.id); - setSelectCustomer(customer); - }} - popoverFill={true} - allowCreate={true} - /> + + } + onContactSelected={(customer) => { + form.setFieldValue('customer_id', customer.id); + setSelectCustomer(customer); + }} + popoverFill={true} + allowCreate={true} + /> + + )} @@ -242,3 +248,9 @@ export default compose( receiptNumberPrefix: receiptSettings?.numberPrefix, })), )(ReceiptFormHeader); + +const ControlCustomerGroup = styled(ControlGroup)` + display: flex; + align-items: center; + transform: none; +`;