diff --git a/packages/webapp/src/components/Customers/CustomerSelectField.tsx b/packages/webapp/src/components/Customers/CustomerSelectField.tsx deleted file mode 100644 index e7d5dce2a..000000000 --- a/packages/webapp/src/components/Customers/CustomerSelectField.tsx +++ /dev/null @@ -1,119 +0,0 @@ -// @ts-nocheck -import React, { useCallback, useState, useEffect, useMemo } from 'react'; -import { FormattedMessage as T } from '@/components'; -import intl from 'react-intl-universal'; -import * as R from 'ramda'; - -import { MenuItem, Button } from '@blueprintjs/core'; -import { Select } from '@blueprintjs/select'; -import classNames from 'classnames'; -import { CLASSES } from '@/constants/classes'; - -import { - itemPredicate, - handleContactRenderer, - createNewItemRenderer, - createNewItemFromQuery, -} from './utils'; - -import withDrawerActions from '@/containers/Drawer/withDrawerActions'; - -import { DRAWERS } from '@/constants/drawers'; - -function CustomerSelectFieldRoot({ - // #withDrawerActions - openDrawer, - - // #ownProps - contacts, - initialContactId, - selectedContactId, - defaultSelectText = , - onContactSelected, - popoverFill = false, - disabled = false, - allowCreate, - buttonProps, - - ...restProps -}) { - const localContacts = useMemo( - () => - contacts.map((contact) => ({ - ...contact, - _id: `${contact.id}_${contact.contact_type}`, - })), - [contacts], - ); - - const initialContact = useMemo( - () => contacts.find((a) => a.id === initialContactId), - [initialContactId, contacts], - ); - - const [selecetedContact, setSelectedContact] = useState( - initialContact || null, - ); - - useEffect(() => { - if (typeof selectedContactId !== 'undefined') { - const account = selectedContactId - ? contacts.find((a) => a.id === selectedContactId) - : null; - setSelectedContact(account); - } - }, [selectedContactId, contacts, setSelectedContact]); - - const handleContactSelect = useCallback( - (contact) => { - if (contact.id) { - setSelectedContact({ ...contact }); - onContactSelected && onContactSelected(contact); - } else { - openDrawer(DRAWERS.QUICK_CREATE_CUSTOMER); - } - }, - [setSelectedContact, onContactSelected, openDrawer], - ); - - // Maybe inject create new item props to suggest component. - const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null; - const maybeCreateNewItemFromQuery = allowCreate - ? createNewItemFromQuery - : null; - - return ( - - ); -} - -export const CustomerSelectField = R.compose(withDrawerActions)( - CustomerSelectFieldRoot, -); diff --git a/packages/webapp/src/components/Customers/CustomersSelect.tsx b/packages/webapp/src/components/Customers/CustomersSelect.tsx new file mode 100644 index 000000000..60e030314 --- /dev/null +++ b/packages/webapp/src/components/Customers/CustomersSelect.tsx @@ -0,0 +1,48 @@ +// @ts-nocheck +import React from 'react'; +import * as R from 'ramda'; +import { createNewItemFromQuery, createNewItemRenderer } from './utils'; +import { FSelect } from '../Forms'; +import withDrawerActions from '@/containers/Drawer/withDrawerActions'; +import { DRAWERS } from '@/constants/drawers'; + +/** + * Customer select field. + * @returns {React.ReactNode} + */ +function CustomerSelectRoot({ + // #withDrawerActions + openDrawer, + + // #ownProps + items, + allowCreate, + ...props +}) { + // Maybe inject create new item props to suggest component. + const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null; + const maybeCreateNewItemFromQuery = allowCreate + ? createNewItemFromQuery + : null; + + // Handles the create item click. + const handleCreateItemClick = () => { + openDrawer(DRAWERS.QUICK_CREATE_CUSTOMER); + }; + + return ( + + ); +} + +export const CustomersSelect = R.compose(withDrawerActions)(CustomerSelectRoot); diff --git a/packages/webapp/src/components/Customers/index.tsx b/packages/webapp/src/components/Customers/index.tsx index eb057000f..aef111932 100644 --- a/packages/webapp/src/components/Customers/index.tsx +++ b/packages/webapp/src/components/Customers/index.tsx @@ -1,3 +1,3 @@ // @ts-nocheck -export * from './CustomerSelectField'; export * from './CustomerDrawerLink'; +export * from './CustomersSelect'; diff --git a/packages/webapp/src/components/Vendors/VendorSelectField.tsx b/packages/webapp/src/components/Vendors/VendorSelectField.tsx deleted file mode 100644 index 6883baccb..000000000 --- a/packages/webapp/src/components/Vendors/VendorSelectField.tsx +++ /dev/null @@ -1,118 +0,0 @@ -// @ts-nocheck -import React, { useCallback, useState, useEffect, useMemo } from 'react'; -import { FormattedMessage as T } from '@/components'; -import intl from 'react-intl-universal'; -import * as R from 'ramda'; - -import { MenuItem, Button } from '@blueprintjs/core'; -import { Select } from '@blueprintjs/select'; -import classNames from 'classnames'; -import { CLASSES } from '@/constants/classes'; - -import { - itemPredicate, - handleContactRenderer, - createNewItemFromQuery, - createNewItemRenderer, -} from './utils'; -import withDrawerActions from '@/containers/Drawer/withDrawerActions'; - -import { DRAWERS } from '@/constants/drawers'; - -function VendorSelectFieldRoot({ - // #withDrawerActions - openDrawer, - - // #ownProps - contacts, - initialContactId, - selectedContactId, - defaultSelectText = , - onContactSelected, - popoverFill = false, - disabled = false, - allowCreate, - buttonProps, - - ...restProps -}) { - const localContacts = useMemo( - () => - contacts.map((contact) => ({ - ...contact, - _id: `${contact.id}_${contact.contact_type}`, - })), - [contacts], - ); - - const initialContact = useMemo( - () => contacts.find((a) => a.id === initialContactId), - [initialContactId, contacts], - ); - - const [selecetedContact, setSelectedContact] = useState( - initialContact || null, - ); - - useEffect(() => { - if (typeof selectedContactId !== 'undefined') { - const account = selectedContactId - ? contacts.find((a) => a.id === selectedContactId) - : null; - setSelectedContact(account); - } - }, [selectedContactId, contacts, setSelectedContact]); - - const handleContactSelect = useCallback( - (contact) => { - if (contact.id) { - setSelectedContact({ ...contact }); - onContactSelected && onContactSelected(contact); - } else { - openDrawer(DRAWERS.QUICK_WRITE_VENDOR); - } - }, - [setSelectedContact, onContactSelected, openDrawer], - ); - - // Maybe inject create new item props to suggest component. - const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null; - const maybeCreateNewItemFromQuery = allowCreate - ? createNewItemFromQuery - : null; - - return ( - - ); -} - -export const VendorSelectField = R.compose(withDrawerActions)( - VendorSelectFieldRoot, -); diff --git a/packages/webapp/src/components/Vendors/VendorsSelect.tsx b/packages/webapp/src/components/Vendors/VendorsSelect.tsx new file mode 100644 index 000000000..4b460d1f4 --- /dev/null +++ b/packages/webapp/src/components/Vendors/VendorsSelect.tsx @@ -0,0 +1,49 @@ +// @ts-nocheck +import React from 'react'; +import * as R from 'ramda'; +import withDrawerActions from '@/containers/Drawer/withDrawerActions'; +import { createNewItemFromQuery, createNewItemRenderer } from './utils'; +import { FSelect } from '../Forms'; +import { DRAWERS } from '@/constants/drawers'; + +/** + * Vendor select. + * @returns {React.ReactNode} + */ +function VendorsSelectRoot({ + // #withDrawerActions + openDrawer, + + // #ownProps + items, + allowCreate, + + ...restProps +}) { + // Maybe inject create new item props to suggest component. + const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null; + const maybeCreateNewItemFromQuery = allowCreate + ? createNewItemFromQuery + : null; + + // Handles the create item click. + const handleCreateItemClick = () => { + openDrawer(DRAWERS.QUICK_WRITE_VENDOR); + }; + + return ( + + ); +} + +export const VendorsSelect = R.compose(withDrawerActions)(VendorsSelectRoot); diff --git a/packages/webapp/src/components/Vendors/index.tsx b/packages/webapp/src/components/Vendors/index.tsx index a57d1571c..ae7471ccc 100644 --- a/packages/webapp/src/components/Vendors/index.tsx +++ b/packages/webapp/src/components/Vendors/index.tsx @@ -1,3 +1,3 @@ // @ts-nocheck export * from './VendorDrawerLink' -export * from './VendorSelectField' \ No newline at end of file +export * from './VendorsSelect'; \ No newline at end of file diff --git a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx index 103a43b13..e10d485fa 100644 --- a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx +++ b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { InputGroup, FormGroup, Position, Classes } from '@blueprintjs/core'; import { DateInput } from '@blueprintjs/datetime'; import { FastField, ErrorMessage } from 'formik'; -import { FormattedMessage as T } from '@/components'; +import { CustomersSelect, FormattedMessage as T } from '@/components'; import classNames from 'classnames'; import { CLASSES } from '@/constants/classes'; import { @@ -121,33 +121,35 @@ export default function ExpenseFormHeader() { )} - - {({ form, field: { value }, meta: { error, touched } }) => ( - } - className={classNames('form-group--select-list', Classes.FILL)} - labelInfo={} - intent={inputIntent({ error, touched })} - helperText={} - inline={true} - > - } - onContactSelected={(customer) => { - form.setFieldValue('customer_id', customer.id); - }} - allowCreate={true} - popoverFill={true} - /> - - )} - + {/* ----------- Customer ----------- */} + ); } + +/** + * Customer select field of expense form. + * @returns {React.ReactNode} + */ +function ExpenseFormCustomerSelect() { + const { customers } = useExpenseFormContext(); + + return ( + } + labelInfo={} + inline={true} + name={'customer_id'} + customers={customers} + shouldUpdate={customersFieldShouldUpdate} + > + } + allowCreate={true} + popoverFill={true} + /> + + ); +} diff --git a/packages/webapp/src/containers/Projects/containers/ProjectFormDialog/ProjectFormFields.tsx b/packages/webapp/src/containers/Projects/containers/ProjectFormDialog/ProjectFormFields.tsx index d4877d4d5..659f5056a 100644 --- a/packages/webapp/src/containers/Projects/containers/ProjectFormDialog/ProjectFormFields.tsx +++ b/packages/webapp/src/containers/Projects/containers/ProjectFormDialog/ProjectFormFields.tsx @@ -15,11 +15,10 @@ import { FMoneyInputGroup, InputPrependText, FormattedMessage as T, - FieldRequiredHint, - CustomerSelectField, Stack, + CustomersSelect, } from '@/components'; -import { inputIntent, momentFormatter } from '@/utils'; +import { momentFormatter } from '@/utils'; import { useProjectFormContext } from './ProjectFormProvider'; /** @@ -27,9 +26,6 @@ import { useProjectFormContext } from './ProjectFormProvider'; * @returns */ function ProjectFormFields() { - // project form dialog context. - const { customers } = useProjectFormContext(); - // Formik context. const { values } = useFormikContext(); @@ -37,26 +33,7 @@ function ProjectFormFields() {
{/*------------ Contact -----------*/} - - {({ form, field: { value }, meta: { error, touched } }) => ( - - { - form.setFieldValue('contact_id', customer.id); - }} - allowCreate={true} - popoverFill={true} - /> - - )} - + {/*------------ Project Name -----------*/} + + + ); +} + export default ProjectFormFields; diff --git a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.tsx b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.tsx index 7e051cb8b..10c69df66 100644 --- a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.tsx +++ b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.tsx @@ -3,17 +3,17 @@ import React from 'react'; import styled from 'styled-components'; import classNames from 'classnames'; import { FormGroup, InputGroup, Classes, Position } from '@blueprintjs/core'; -import { FastField, ErrorMessage } from 'formik'; +import { FastField, ErrorMessage, useFormikContext } from 'formik'; import { DateInput } from '@blueprintjs/datetime'; import { FeatureCan, FormattedMessage as T } from '@/components'; import { CLASSES } from '@/constants/classes'; import { FFormGroup, - VendorSelectField, FieldRequiredHint, Icon, VendorDrawerLink, + VendorsSelect, } from '@/components'; import { useBillFormContext } from './BillFormProvider'; @@ -43,43 +43,7 @@ function BillFormHeader() { return (
{/* ------- Vendor name ------ */} - - {({ form, field: { value }, meta: { error, touched } }) => ( - } - inline={true} - className={classNames( - 'form-group--vendor-name', - 'form-group--select-list', - CLASSES.FILL, - )} - labelInfo={} - > - } - onContactSelected={(contact) => { - form.setFieldValue('vendor_id', contact.id); - form.setFieldValue('currency_code', contact?.currency_code); - }} - popoverFill={true} - allowCreate={true} - /> - - {value && ( - - - - )} - - )} - + {/* ----------- Exchange rate ----------- */} } + inline={true} + labelInfo={} + vendors={vendors} + fastField={true} + shouldUpdate={vendorsFieldShouldUpdate} + > + } + onItemChange={(contact) => { + setFieldValue('vendor_id', contact.id); + setFieldValue('currency_code', contact?.currency_code); + }} + allowCreate={true} + /> + {values.vendor_id && ( + + + + )} + + ); +} + export default compose(withDialogActions)(BillFormHeader); const VendorButtonLink = styled(VendorDrawerLink)` diff --git a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.tsx b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.tsx index e6db12915..7dc0bfb8e 100644 --- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.tsx +++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.tsx @@ -9,17 +9,17 @@ import { ControlGroup, } from '@blueprintjs/core'; import { DateInput } from '@blueprintjs/datetime'; -import { FastField, ErrorMessage } from 'formik'; +import { FastField, ErrorMessage, useFormikContext } from 'formik'; import { CLASSES } from '@/constants/classes'; import { FFormGroup, - VendorSelectField, FieldRequiredHint, InputPrependButton, Icon, FormattedMessage as T, VendorDrawerLink, + VendorsSelect, } from '@/components'; import { vendorsFieldShouldUpdate, @@ -51,9 +51,6 @@ function VendorCreditNoteFormHeaderFields({ vendorcreditNumberPrefix, vendorcreditNextNumber, }) { - // Vendor Credit form context. - const { vendors } = useVendorCreditNoteFormContext(); - // Handle vendor credit number changing. const handleVendorCreditNumberChange = () => { openDialog('vendor-credit-form'); @@ -81,39 +78,7 @@ function VendorCreditNoteFormHeaderFields({ return (
{/* ----------- Vendor name ----------- */} - - {({ form, field: { value }, meta: { error, touched } }) => ( - } - inline={true} - className={classNames(CLASSES.FILL, 'form-group--vendor')} - labelInfo={} - > - } - onContactSelected={(contact) => { - form.setFieldValue('vendor_id', contact.id); - form.setFieldValue('currency_code', contact?.currency_code); - }} - popoverFill={true} - allowCreate={true} - /> - - {value && ( - - - - )} - - )} - + {/* ----------- Exchange rate ----------- */} } + inline={true} + vendors={vendors} + shouldUpdate={vendorsFieldShouldUpdate} + labelInfo={} + > + } + onItemChange={(contact) => { + setFieldValue('vendor_id', contact.id); + setFieldValue('currency_code', contact?.currency_code); + }} + popoverFill={true} + allowCreate={true} + /> + {values.vendor_id && ( + + + + )} + + ); +} + export default compose( withDialogActions, withSettings(({ vendorsCreditNoteSetting }) => ({ diff --git a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.tsx b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.tsx index 2023fcb41..676a4ca45 100644 --- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.tsx +++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.tsx @@ -12,14 +12,13 @@ import { } from '@blueprintjs/core'; import { DateInput } from '@blueprintjs/datetime'; import { FastField, Field, useFormikContext, ErrorMessage } from 'formik'; -import { FormattedMessage as T } from '@/components'; +import { FormattedMessage as T, VendorsSelect } from '@/components'; import { toSafeInteger } from 'lodash'; import { CLASSES } from '@/constants/classes'; import { FFormGroup, AccountsSelect, - VendorSelectField, FieldRequiredHint, InputPrependText, Money, @@ -55,8 +54,7 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) { } = useFormikContext(); // Payment made form context. - const { vendors, accounts, isNewMode, setPaymentVendorId } = - usePaymentMadeFormContext(); + const { accounts } = usePaymentMadeFormContext(); // Sumation of payable full-amount. const payableFullAmount = useMemo( @@ -82,41 +80,7 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) { return (
{/* ------------ Vendor name ------------ */} - - {({ form, field: { value }, meta: { error, touched } }) => ( - } - inline={true} - className={classNames('form-group--select-list', Classes.FILL)} - labelInfo={} - > - } - onContactSelected={(contact) => { - form.setFieldValue('vendor_id', contact.id); - form.setFieldValue('currency_code', contact?.currency_code); - setPaymentVendorId(contact.id); - }} - disabled={!isNewMode} - popoverFill={true} - allowCreate={true} - /> - - {value && ( - - - - )} - - )} - + {/* ----------- Exchange rate ----------- */} } + inline={true} + labelInfo={} + vendors={vendors} + shouldUpdate={vendorsFieldShouldUpdate} + > + } + onItemChange={(contact) => { + setFieldValue('vendor_id', contact.id); + setFieldValue('currency_code', contact?.currency_code); + setPaymentVendorId(contact.id); + }} + disabled={!isNewMode} + allowCreate={true} + /> + {values.vendor_id && ( + + + + )} + + ); +} + export default compose(withCurrentOrganization())(PaymentMadeFormHeaderFields); const VendorButtonLink = styled(VendorDrawerLink)` diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx index fac113606..1a24f758c 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx @@ -22,6 +22,7 @@ import { CustomerDrawerLink, FFormGroup, FInputGroup, + CustomersSelect, } from '@/components'; import { customerNameFieldShouldUpdate } from './utils'; @@ -121,49 +122,10 @@ const CreditNoteTransactionNoField = R.compose( * Credit note form header fields. */ export default function CreditNoteFormHeaderFields({}) { - // Credit note form context. - const { customers } = useCreditNoteFormContext(); - return (
{/* ----------- Customer name ----------- */} - - {({ form, field: { value }, meta: { error, touched } }) => ( - } - inline={true} - className={classNames( - 'form-group--customer-name', - 'form-group--select-list', - CLASSES.FILL, - )} - labelInfo={} - intent={inputIntent({ error, touched })} - helperText={} - > - } - onContactSelected={(customer) => { - form.setFieldValue('customer_id', customer.id); - form.setFieldValue('currency_code', customer?.currency_code); - }} - popoverFill={true} - allowCreate={true} - /> - {value && ( - - - - )} - - )} - + {/* ----------- Exchange rate ----------- */} } + customers={customers} + labelInfo={} + inline={true} + fastField={true} + shouldUpdate={customerNameFieldShouldUpdate} + > + } + onItemChange={(customer) => { + setFieldValue('customer_id', customer.id); + setFieldValue('currency_code', customer?.currency_code); + }} + popoverFill={true} + allowCreate={true} + /> + {values.customer_id && ( + + + + )} + + ); +} + const CustomerButtonLink = styled(CustomerDrawerLink)` font-size: 11px; margin-top: 6px; diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx index 70444babc..bee65cd48 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx @@ -11,18 +11,18 @@ import { ControlGroup, } from '@blueprintjs/core'; import { DateInput } from '@blueprintjs/datetime'; -import { FastField, ErrorMessage, useFormikContext } from 'formik'; +import { FastField, ErrorMessage, useFormikContext, useFormik } from 'formik'; import { FeatureCan, FFormGroup, FInputGroup, FormattedMessage as T, - CustomerSelectField, FieldRequiredHint, Icon, InputPrependButton, CustomerDrawerLink, + CustomersSelect, } from '@/components'; import { momentFormatter, @@ -129,41 +129,7 @@ export default function EstimateFormHeader() { return (
{/* ----------- Customer name ----------- */} - - {({ form, field: { value }, meta: { error, touched } }) => ( - } - inline={true} - className={classNames(CLASSES.FILL, 'form-group--customer')} - labelInfo={} - intent={inputIntent({ error, touched })} - helperText={} - > - } - onContactSelected={(customer) => { - form.setFieldValue('customer_id', customer.id); - form.setFieldValue('currency_code', customer?.currency_code); - }} - popoverFill={true} - intent={inputIntent({ error, touched })} - allowCreate={true} - /> - - {value && ( - - - - )} - - )} - + {/* ----------- Exchange Rate ----------- */} } + inline={true} + labelInfo={} + name={'customer_id'} + customers={customers} + shouldUpdate={customersFieldShouldUpdate} + fastField={true} + > + } + onItemChange={(customer) => { + setFieldValue('customer_id', customer.id); + setFieldValue('currency_code', customer?.currency_code); + }} + popoverFill={true} + allowCreate={true} + fastField={true} + /> + {values.customer_id && ( + + + + )} + + ); +} + const CustomerButtonLink = styled(CustomerDrawerLink)` font-size: 11px; margin-top: 6px; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx index 1fd9b5317..8321eabfc 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx @@ -10,7 +10,7 @@ import { ControlGroup, } from '@blueprintjs/core'; import { DateInput } from '@blueprintjs/datetime'; -import { FastField, ErrorMessage, useFormikContext } from 'formik'; +import { FastField, ErrorMessage, useFormikContext, useFormik } from 'formik'; import * as R from 'ramda'; import { @@ -19,12 +19,12 @@ import { Col, Row, CustomerDrawerLink, - CustomerSelectField, FieldRequiredHint, Icon, InputPrependButton, FeatureCan, FInputGroup, + CustomersSelect, } from '@/components'; import { momentFormatter, @@ -134,49 +134,13 @@ InvoiceFormInvoiceNumberField.displayName = 'InvoiceFormInvoiceNumberField'; */ export default function InvoiceFormHeaderFields() { // Invoice form context. - const { customers, projects } = useInvoiceFormContext(); + const { projects } = useInvoiceFormContext(); const { values } = useFormikContext(); return (
{/* ----------- Customer name ----------- */} - - {({ form, field: { value }, meta: { error, touched } }) => ( - } - inline={true} - className={classNames( - 'form-group--customer-name', - 'form-group--select-list', - CLASSES.FILL, - )} - labelInfo={} - > - } - onContactSelected={(customer) => { - form.setFieldValue('customer_id', customer.id); - form.setFieldValue('currency_code', customer?.currency_code); - }} - popoverFill={true} - allowCreate={true} - /> - - {value && ( - - - - )} - - )} - + {/* ----------- Exchange rate ----------- */} } + inline={true} + labelInfo={} + fastField={true} + > + } + onItemChange={(customer) => { + setFieldValue('customer_id', customer.id); + setFieldValue('currency_code', customer?.currency_code); + }} + allowCreate={true} + fastField={true} + /> + {values.customer_id && ( + + + + )} + + ); +} + const CustomerButtonLink = styled(CustomerDrawerLink)` font-size: 11px; margin-top: 6px; diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx index 96ac9462e..8498f5e29 100644 --- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx +++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx @@ -15,8 +15,12 @@ import { toSafeInteger } from 'lodash'; import { FastField, Field, useFormikContext, ErrorMessage } from 'formik'; import * as R from 'ramda'; -import { FInputGroup, FeatureCan, FormattedMessage as T } from '@/components'; -import { useAutofocus } from '@/hooks'; +import { + CustomersSelect, + FInputGroup, + FeatureCan, + FormattedMessage as T, +} from '@/components'; import { CLASSES } from '@/constants/classes'; import { safeSumBy, @@ -28,7 +32,6 @@ import { import { FFormGroup, AccountsSelect, - CustomerSelectField, FieldRequiredHint, Icon, InputPrependButton, @@ -143,8 +146,7 @@ const PaymentReceivePaymentNoField = R.compose( */ export default function PaymentReceiveHeaderFields() { // Payment receive form context. - const { customers, accounts, projects, isNewMode } = - usePaymentReceiveFormContext(); + const { accounts, projects } = usePaymentReceiveFormContext(); // Formik form context. const { @@ -152,8 +154,6 @@ export default function PaymentReceiveHeaderFields() { setFieldValue, } = useFormikContext(); - const customerFieldRef = useAutofocus(); - // Calculates the full-amount received. const totalDueAmount = useMemo( () => safeSumBy(entries, 'due_amount'), @@ -176,45 +176,7 @@ export default function PaymentReceiveHeaderFields() { return (
{/* ------------- Customer name ------------- */} - - {({ form, field: { value }, meta: { error, touched } }) => ( - } - inline={true} - className={classNames('form-group--select-list', CLASSES.FILL)} - labelInfo={} - intent={inputIntent({ error, touched })} - helperText={} - > - } - onContactSelected={(customer) => { - form.setFieldValue('customer_id', customer.id); - form.setFieldValue('full_amount', ''); - form.setFieldValue('currency_code', customer?.currency_code); - }} - popoverFill={true} - disabled={!isNewMode} - buttonProps={{ - elementRef: (ref) => (customerFieldRef.current = ref), - }} - allowCreate={true} - /> - - {value && ( - - - - )} - - )} - + {/* ----------- Exchange rate ----------- */} } + inline={true} + labelInfo={} + name={'customer_id'} + customers={customers} + fastField={true} + shouldUpdate={customersFieldShouldUpdate} + > + } + onItemChange={(customer) => { + setFieldValue('customer_id', customer.id); + setFieldValue('full_amount', ''); + setFieldValue('currency_code', customer?.currency_code); + }} + popoverFill={true} + disabled={!isNewMode} + allowCreate={true} + fastField={true} + /> + {values.customer_id && ( + + + + )} + + ); +} diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx index ff62e984a..2a9ef7369 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx @@ -10,7 +10,7 @@ import { ControlGroup, } from '@blueprintjs/core'; import { DateInput } from '@blueprintjs/datetime'; -import { FastField, ErrorMessage, useFormikContext } from 'formik'; +import { FastField, ErrorMessage, useFormikContext, useFormik } from 'formik'; import * as R from 'ramda'; import { CLASSES } from '@/constants/classes'; @@ -27,6 +27,7 @@ import { FormattedMessage as T, FeatureCan, FInputGroup, + CustomersSelect, } from '@/components'; import { ProjectsSelect } from '@/containers/Projects/components'; import { @@ -130,44 +131,12 @@ const ReceiptFormReceiptNumberField = R.compose( * Receipt form header fields. */ export default function ReceiptFormHeader() { - const { accounts, customers, projects } = useReceiptFormContext(); + const { accounts, projects } = useReceiptFormContext(); return (
{/* ----------- Customer name ----------- */} - - {({ form, field: { value }, meta: { error, touched } }) => ( - } - inline={true} - className={classNames(CLASSES.FILL, 'form-group--customer')} - labelInfo={} - intent={inputIntent({ error, touched })} - helperText={} - > - } - onContactSelected={(customer) => { - form.setFieldValue('customer_id', customer.id); - form.setFieldValue('currency_code', customer?.currency_code); - }} - popoverFill={true} - allowCreate={true} - /> - {value && ( - - - - )} - - )} - + {/* ----------- Exchange rate ----------- */} } + inline={true} + labelInfo={} + customers={customers} + fastField={true} + shouldUpdate={customersFieldShouldUpdate} + > + } + onItemChange={(customer) => { + setFieldValue('customer_id', customer.id); + setFieldValue('currency_code', customer?.currency_code); + }} + popoverFill={true} + allowCreate={true} + /> + {values.customer_id && ( + + + + )} + + ); +} + const CustomerButtonLink = styled(CustomerDrawerLink)` font-size: 11px; margin-top: 6px;