diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.tsx index 7cba3b32a..f98d6af97 100644 --- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.tsx +++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.tsx @@ -118,7 +118,6 @@ function MakeJournalEntriesForm({ entries: R.compose(orderingLinesIndexes)(entries), publish: submitPayload.publish, }; - // Handle the request error. const handleError = ({ response: { @@ -149,7 +148,6 @@ function MakeJournalEntriesForm({ resetForm(); } }; - if (isNewMode) { createJournalMutate(form).then(handleSuccess).catch(handleError); } else { diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx index f8ee173a0..7638248f7 100644 --- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx +++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx @@ -6,14 +6,14 @@ import { Position, ControlGroup, } from '@blueprintjs/core'; -import { FastField, ErrorMessage } from 'formik'; +import { FastField, ErrorMessage, useFormikContext } from 'formik'; import { DateInput } from '@blueprintjs/datetime'; +import * as R from 'ramda'; import classNames from 'classnames'; import { CLASSES } from '@/constants/classes'; import { momentFormatter, - compose, inputIntent, handleDateChange, tansformDateValue, @@ -34,37 +34,89 @@ import { currenciesFieldShouldUpdate } from './utils'; import withSettings from '@/containers/Settings/withSettings'; import withDialogActions from '@/containers/Dialog/withDialogActions'; +/** + * Journal number field of make journal form. + */ +const MakeJournalTransactionNoField = R.compose( + withDialogActions, + withSettings(({ manualJournalsSettings }) => ({ + journalAutoIncrement: manualJournalsSettings?.autoIncrement, + })), +)( + ({ + // #withDialog + openDialog, + + // #withSettings + journalAutoIncrement, + }) => { + const { setFieldValue, values } = useFormikContext(); + + // Handle journal number change. + const handleJournalNumberChange = () => { + openDialog('journal-number-form'); + }; + // Handle journal number blur. + const handleJournalNoBlur = (event) => { + const newValue = event.target.value; + + if (values.journal_number !== newValue && journalAutoIncrement) { + openDialog('journal-number-form', { + initialFormValues: { + onceManualNumber: newValue, + incrementMode: 'manual-transaction', + }, + }); + } + if (!journalAutoIncrement) { + setFieldValue('journal_number', newValue); + setFieldValue('journal_number_manually', newValue); + } + }; + + return ( + } + labelInfo={ + <> + + + + } + fill={true} + inline={true} + > + + + , + }} + tooltip={true} + tooltipProps={{ + content: , + position: Position.BOTTOM_LEFT, + }} + /> + + + ); + }, +); + /** * Make journal entries header. */ -function MakeJournalEntriesHeader({ - // #withDialog - openDialog, - - // #withSettings - journalAutoIncrement, -}) { +export default function MakeJournalEntriesHeader({}) { const { currencies } = useMakeJournalFormContext(); - // Handle journal number change. - const handleJournalNumberChange = () => { - openDialog('journal-number-form'); - }; - - // Handle journal number blur. - const handleJournalNoBlur = (form, field) => (event) => { - const newValue = event.target.value; - - if (field.value !== newValue && journalAutoIncrement) { - openDialog('journal-number-form', { - initialFormValues: { - manualTransactionNo: newValue, - incrementMode: 'manual-transaction', - }, - }); - } - }; - return (
{/*------------ Posting date -----------*/} @@ -98,46 +150,7 @@ function MakeJournalEntriesHeader({ {/*------------ Journal number -----------*/} - - {({ form, field, meta: { error, touched } }) => ( - } - labelInfo={ - <> - - - - } - className={'form-group--journal-number'} - intent={inputIntent({ error, touched })} - helperText={} - fill={true} - inline={true} - > - - - , - }} - tooltip={true} - tooltipProps={{ - content: ( - - ), - position: Position.BOTTOM_LEFT, - }} - /> - - - )} - + {/*------------ Reference -----------*/} @@ -211,10 +224,3 @@ function MakeJournalEntriesHeader({
); } - -export default compose( - withDialogActions, - withSettings(({ manualJournalsSettings }) => ({ - journalAutoIncrement: manualJournalsSettings?.autoIncrement, - })), -)(MakeJournalEntriesHeader); diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormDialogs.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormDialogs.tsx index 561483eef..6a8123d86 100644 --- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormDialogs.tsx +++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormDialogs.tsx @@ -10,9 +10,9 @@ export default function MakeJournalFormDialogs() { const { setFieldValue } = useFormikContext(); // Update the form once the journal number form submit confirm. - const handleConfirm = ({ manually, incrementNumber }) => { - setFieldValue('journal_number', incrementNumber || ''); - setFieldValue('journal_number_manually', manually); + const handleConfirm = (settings) => { + setFieldValue('journal_number', settings.transactionNumber); + setFieldValue('journal_number_manually', settings.transactionNumber); }; return ( diff --git a/packages/webapp/src/containers/Dialogs/CreditNoteNumberDialog/CreditNoteNumberDialogContent.tsx b/packages/webapp/src/containers/Dialogs/CreditNoteNumberDialog/CreditNoteNumberDialogContent.tsx index b8639351d..bdcb0b71d 100644 --- a/packages/webapp/src/containers/Dialogs/CreditNoteNumberDialog/CreditNoteNumberDialogContent.tsx +++ b/packages/webapp/src/containers/Dialogs/CreditNoteNumberDialog/CreditNoteNumberDialogContent.tsx @@ -65,7 +65,6 @@ function CreditNoteNumberDialogContent({ const handleChange = (values) => { setReferenceFormValues(values); }; - // Description. const description = referenceFormValues?.incrementMode === 'auto' diff --git a/packages/webapp/src/containers/JournalNumber/ReferenceNumberForm.tsx b/packages/webapp/src/containers/JournalNumber/ReferenceNumberForm.tsx index 0e0b2708a..0581bd6d8 100644 --- a/packages/webapp/src/containers/JournalNumber/ReferenceNumberForm.tsx +++ b/packages/webapp/src/containers/JournalNumber/ReferenceNumberForm.tsx @@ -2,15 +2,29 @@ import React, { useMemo } from 'react'; import * as Yup from 'yup'; import { Formik, Form } from 'formik'; -import { FormattedMessage as T } from '@/components'; import { Intent, Button, Classes } from '@blueprintjs/core'; import '@/style/pages/ReferenceNumber/ReferenceNumber.scss'; -import { FormObserver } from '@/components'; +import { FormattedMessage as T, FormObserver } from '@/components'; import ReferenceNumberFormContent from './ReferenceNumberFormContent'; import { transformValuesToForm } from './utils'; -import { saveInvoke } from '@/utils'; +import { saveInvoke, transformToForm } from '@/utils'; + +const initialFormValues = { + incrementMode: 'auto', + numberPrefix: '', + nextNumber: '', + onceManualNumber: '', +}; + +// Validation schema. +const validationSchema = Yup.object().shape({ + incrementMode: Yup.string(), + numberPrefix: Yup.string(), + nextNumber: Yup.number(), + onceManualNumber: Yup.string(), +}); /** * Reference number form. @@ -22,29 +36,15 @@ export default function ReferenceNumberForm({ onClose, onChange, }) { - // Validation schema. - const validationSchema = Yup.object().shape({ - incrementMode: Yup.string(), - numberPrefix: Yup.string(), - nextNumber: Yup.number(), - manualTransactionNo: Yup.string(), - }); // Initial values. - const formInitialValues = useMemo( - () => ({ - ...initialValues, - incrementMode: - initialValues.incrementMode === 'auto' && - initialValues.manualTransactionNo - ? 'manual-transaction' - : initialValues.incrementMode, - }), - [initialValues], - ); + const formInitialValues = { + ...initialFormValues, + ...transformToForm(initialValues, initialFormValues), + }; // Handle the form submit. const handleSubmit = (values, methods) => { const parsed = transformValuesToForm(values); - saveInvoke(onSubmit, { ...parsed, ...values }, methods); + saveInvoke(onSubmit, { ...values, ...parsed }, methods); }; return ( diff --git a/packages/webapp/src/containers/JournalNumber/ReferenceNumberFormContent.tsx b/packages/webapp/src/containers/JournalNumber/ReferenceNumberFormContent.tsx index ea727000e..a1c14b034 100644 --- a/packages/webapp/src/containers/JournalNumber/ReferenceNumberFormContent.tsx +++ b/packages/webapp/src/containers/JournalNumber/ReferenceNumberFormContent.tsx @@ -1,17 +1,15 @@ // @ts-nocheck import React from 'react'; import { FastField, useFormikContext } from 'formik'; -import { FormattedMessage as T } from '@/components'; import { FormGroup, InputGroup, Radio } from '@blueprintjs/core'; -import { If, Row, Col, ErrorMessage } from '@/components'; + +import { FormattedMessage as T, Row, Col, ErrorMessage } from '@/components'; import { inputIntent } from '@/utils'; /** * Reference number form content. */ export default function ReferenceNumberFormContent() { - const { values } = useFormikContext(); - return ( <> {/* ------------- Auto increment mode ------------- */} @@ -27,54 +25,13 @@ export default function ReferenceNumberFormContent() { /> )} - - - - {/* ------------- Prefix ------------- */} - - - {({ form, field, meta: { error, touched } }) => ( - } - className={'form-group--'} - intent={inputIntent({ error, touched })} - helperText={} - > - - - )} - - - - {/* ------------- Next number ------------- */} - - - {({ form, field, meta: { error, touched } }) => ( - } - className={'form-group--next-number'} - intent={inputIntent({ error, touched })} - helperText={} - > - - - )} - - - - + {/* ------------- Manual increment mode ------------- */} {({ form, field, meta: { error, touched } }) => ( } + label={} value="manual" onChange={() => { form.setFieldValue('incrementMode', 'manual'); @@ -85,20 +42,70 @@ export default function ReferenceNumberFormContent() { {/* ------------- Transaction manual increment mode ------------- */} - - - {({ form, field, meta: { error, touched } }) => ( - } - value="manual" - onChange={() => { - form.setFieldValue('incrementMode', 'manual-transaction'); - }} - checked={field.value === 'manual-transaction'} - /> - )} - - + ); } + +function ReferenceNumberAutoIncrement() { + const { values } = useFormikContext(); + if (!values.incrementMode === 'auto') return null; + + return ( + + {/* ------------- Prefix ------------- */} + + + {({ form, field, meta: { error, touched } }) => ( + } + className={'form-group--'} + intent={inputIntent({ error, touched })} + helperText={} + > + + + )} + + + + {/* ------------- Next number ------------- */} + + + {({ form, field, meta: { error, touched } }) => ( + } + className={'form-group--next-number'} + intent={inputIntent({ error, touched })} + helperText={} + > + + + )} + + + + ); +} + +function ReferenceNumberManualOnce() { + const { values } = useFormikContext(); + + // Do not show the field if the one manual transaction number is not presented. + if (!values.onceManualNumber) return null; + + return ( + + {({ form, field, meta: { error, touched } }) => ( + } + value="manual" + onChange={() => { + form.setFieldValue('incrementMode', 'manual-transaction'); + }} + checked={field.value === 'manual-transaction'} + /> + )} + + ); +} diff --git a/packages/webapp/src/containers/JournalNumber/utils.tsx b/packages/webapp/src/containers/JournalNumber/utils.tsx index db60e836b..f51033ffa 100644 --- a/packages/webapp/src/containers/JournalNumber/utils.tsx +++ b/packages/webapp/src/containers/JournalNumber/utils.tsx @@ -5,6 +5,7 @@ import { transfromToSnakeCase, transactionNumber, } from '@/utils'; +import { omit } from 'lodash'; export const defaultInvoiceNoSettings = { nextNumber: '', @@ -13,7 +14,7 @@ export const defaultInvoiceNoSettings = { }; export const transformSettingsToForm = (settings) => ({ - ...settings, + ...omit(settings, ['autoIncrement']), incrementMode: settings.autoIncrement ? 'auto' : 'manual', }); @@ -25,13 +26,21 @@ export const transformFormToSettings = (values, group) => { return optionsMapToArray(options).map((option) => ({ ...option, group })); }; +/** + * Transaction number returns auto-increment if the increment mode is auto or + * returns empty string if the increment mode is manually or returns the entered + * manual text if the increment mode is manual once just in this transaction. + */ export const transformValuesToForm = (values) => { - const incrementNumber = + const autoIncrementNumber = transactionNumber( + values.numberPrefix, + values.nextNumber, + ); + const _transactionNumber = values.incrementMode === 'auto' - ? transactionNumber(values.numberPrefix, values.nextNumber) - : values.manualTransactionNo; - - const manually = values.incrementMode === 'auto' ? false : true; - - return { incrementNumber, manually }; + ? autoIncrementNumber + : values.incrementMode === 'manual-transaction' + ? values.onceManualNumber + : ''; + return { transactionNumber: _transactionNumber }; }; diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormDialogs.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormDialogs.tsx index ea2ca3952..726013312 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormDialogs.tsx +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormDialogs.tsx @@ -1,25 +1,24 @@ // @ts-nocheck import React from 'react'; -import CreditNoteNumberDialog from '@/containers/Dialogs/CreditNoteNumberDialog'; import { useFormikContext } from 'formik'; +import CreditNoteNumberDialog from '@/containers/Dialogs/CreditNoteNumberDialog'; /** * Credit note form dialogs. */ export default function CreditNoteFormDialogs() { + const { setFieldValue } = useFormikContext(); + // Update the form once the credit number form submit confirm. - const handleCreditNumberFormConfirm = ({ incrementNumber, manually }) => { - setFieldValue('credit_note_number', incrementNumber || ''); - setFieldValue('credit_note_no_manually', manually); + const handleCreditNumberFormConfirm = (settings) => { + setFieldValue('credit_note_number', settings.transactionNumber); + setFieldValue('credit_note_no_manually', settings.transactionNumber); }; - const { setFieldValue } = useFormikContext(); return ( - - - + ); } diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx index 9b7330bbd..b40e59aab 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx @@ -1,5 +1,6 @@ // @ts-nocheck import React from 'react'; +import * as R from 'ramda'; import classNames from 'classnames'; import styled from 'styled-components'; import { @@ -9,7 +10,8 @@ import { ControlGroup, } from '@blueprintjs/core'; import { DateInput } from '@blueprintjs/datetime'; -import { FastField, Field, ErrorMessage } from 'formik'; +import { FastField, Field, ErrorMessage, useFormikContext } from 'formik'; + import { CLASSES } from '@/constants/classes'; import { CustomerSelectField, @@ -18,10 +20,9 @@ import { Icon, FormattedMessage as T, CustomerDrawerLink, + FFormGroup, } from '@/components'; -import { - customerNameFieldShouldUpdate, -} from './utils'; +import { customerNameFieldShouldUpdate } from './utils'; import { useCreditNoteFormContext } from './CreditNoteFormProvider'; import withSettings from '@/containers/Settings/withSettings'; @@ -29,44 +30,93 @@ import withDialogActions from '@/containers/Dialog/withDialogActions'; import { CreditNoteExchangeRateInputField } from './components'; import { momentFormatter, - compose, tansformDateValue, inputIntent, handleDateChange, } from '@/utils'; +/** + * Credit note transaction number field. + */ +const CreditNoteTransactionNoField = R.compose( + withDialogActions, + withSettings(({ creditNoteSettings }) => ({ + creditAutoIncrement: creditNoteSettings?.autoIncrement, + creditNextNumber: creditNoteSettings?.nextNumber, + creditNumberPrefix: creditNoteSettings?.numberPrefix, + })), +)( + ({ + // #withDialogActions + openDialog, + + // #withSettings + creditAutoIncrement, + }) => { + const { values, setFieldValue } = useFormikContext(); + + // Handle credit number changing. + const handleCreditNumberChange = () => { + openDialog('credit-number-form'); + }; + // Handle credit no. field blur. + const handleCreditNoBlur = (event) => { + const newValue = event.target.value; + + if (values.credit_note_no !== newValue && creditAutoIncrement) { + openDialog('credit-number-form', { + initialFormValues: { + onceManualNumber: newValue, + incrementMode: 'manual-transaction', + }, + }); + } + if (!creditAutoIncrement) { + setFieldValue('credit_note_number', newValue); + setFieldValue('credit_note_number_manually', newValue); + } + }; + + return ( + } + labelInfo={} + inline={true} + > + + + , + }} + tooltip={true} + tooltipProps={{ + content: ( + + ), + position: Position.BOTTOM_LEFT, + }} + /> + + + ); + }, +); + /** * Credit note form header fields. */ -function CreditNoteFormHeaderFields({ - // #withDialogActions - openDialog, - - // #withSettings - creditAutoIncrement, -}) { +export default function CreditNoteFormHeaderFields({}) { // Credit note form context. const { customers } = useCreditNoteFormContext(); - // Handle credit number changing. - const handleCreditNumberChange = () => { - openDialog('credit-number-form'); - }; - - // Handle credit no. field blur. - const handleCreditNoBlur = (form, field) => (event) => { - const newValue = event.target.value; - - if (field.value !== newValue && creditAutoIncrement) { - openDialog('credit-number-form', { - initialFormValues: { - manualTransactionNo: newValue, - incrementMode: 'manual-transaction', - }, - }); - } - }; - return (
{/* ----------- Customer name ----------- */} @@ -140,43 +190,8 @@ function CreditNoteFormHeaderFields({ )} {/* ----------- Credit note # ----------- */} - - {({ form, field, meta: { error, touched } }) => ( - } - labelInfo={} - inline={true} - className={classNames( - 'form-group--credit_note_number', - CLASSES.FILL, - )} - intent={inputIntent({ error, touched })} - helperText={} - > - - - , - }} - tooltip={true} - tooltipProps={{ - content: ( - - ), - position: Position.BOTTOM_LEFT, - }} - /> - - - )} - + + {/* ----------- Reference ----------- */} {({ field, meta: { error, touched } }) => ( @@ -194,14 +209,6 @@ function CreditNoteFormHeaderFields({
); } -export default compose( - withDialogActions, - withSettings(({ creditNoteSettings }) => ({ - creditAutoIncrement: creditNoteSettings?.autoIncrement, - creditNextNumber: creditNoteSettings?.nextNumber, - creditNumberPrefix: creditNoteSettings?.numberPrefix, - })), -)(CreditNoteFormHeaderFields); const CustomerButtonLink = styled(CustomerDrawerLink)` font-size: 11px; diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx index ebd05c816..9abcd9b80 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx @@ -161,7 +161,11 @@ function EstimateForm({ + + {/*------- Dialogs -------*/} + + {/*------- Effects -------*/} diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormDialogs.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormDialogs.tsx index b9f187896..feb18a3c3 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormDialogs.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormDialogs.tsx @@ -10,9 +10,9 @@ export default function EstimateFormDialogs() { const { setFieldValue } = useFormikContext(); // Update the form once the invoice number form submit confirm. - const handleEstimateNumberFormConfirm = ({ incrementNumber, manually }) => { - setFieldValue('estimate_number', incrementNumber || ''); - setFieldValue('estimate_number_manually', manually); + const handleEstimateNumberFormConfirm = (settings) => { + setFieldValue('estimate_number', settings.transactionNumber); + setFieldValue('estimate_number_manually', settings.transactionNumber); }; return ( diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx index b85d8f138..27e879f7d 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx @@ -10,12 +10,13 @@ import { ControlGroup, } from '@blueprintjs/core'; import { DateInput } from '@blueprintjs/datetime'; +import * as R from 'ramda'; +import { FastField, ErrorMessage, useFormikContext } from 'formik'; + import { FeatureCan, FFormGroup, FormattedMessage as T } from '@/components'; -import { FastField, Field, ErrorMessage } from 'formik'; import { momentFormatter, - compose, tansformDateValue, inputIntent, handleDateChange, @@ -41,37 +42,79 @@ import { import { useEstimateFormContext } from './EstimateFormProvider'; +const EstimateFormEstimateNumberField = R.compose( + withDialogActions, + withSettings(({ estimatesSettings }) => ({ + estimateNextNumber: estimatesSettings?.nextNumber, + estimateNumberPrefix: estimatesSettings?.numberPrefix, + estimateAutoIncrement: estimatesSettings?.autoIncrement, + })), +)( + ({ + // #withDialogActions + openDialog, + + // #withSettings + estimateAutoIncrement, + }) => { + const { values, setFieldValue } = useFormikContext(); + + const handleEstimateNumberBtnClick = () => { + openDialog('estimate-number-form', {}); + }; + const handleEstimateNoBlur = (event) => { + const newValue = event.target.value; + + if (values.estimate_number !== newValue && estimateAutoIncrement) { + openDialog('estimate-number-form', { + initialFormValues: { + onceManualNumber: newValue, + incrementMode: 'manual-transaction', + }, + }); + } + if (!estimateAutoIncrement) { + setFieldValue('estimate_number', newValue); + setFieldValue('estimate_number_manually', newValue); + } + }; + + return ( + } + inline={true} + > + + + , + }} + tooltip={true} + tooltipProps={{ + content: , + position: Position.BOTTOM_LEFT, + }} + /> + + + ); + }, +); + /** * Estimate form header. */ -function EstimateFormHeader({ - // #withDialogActions - openDialog, - - // #withSettings - estimateAutoIncrement, - estimateNumberPrefix, - estimateNextNumber, -}) { +export default function EstimateFormHeader() { const { customers, projects } = useEstimateFormContext(); - const handleEstimateNumberBtnClick = () => { - openDialog('estimate-number-form', {}); - }; - const handleEstimateNoBlur = (form, field) => (event) => { - const newValue = event.target.value; - - if (field.value !== newValue && estimateAutoIncrement) { - openDialog('estimate-number-form', { - initialFormValues: { - manualTransactionNo: newValue, - incrementMode: 'manual-transaction', - }, - }); - } - }; - - return (
{/* ----------- Customer name ----------- */} @@ -174,40 +217,7 @@ function EstimateFormHeader({ {/* ----------- Estimate number ----------- */} - - {({ form, field, meta: { error, touched } }) => ( - } - inline={true} - className={('form-group--estimate-number', CLASSES.FILL)} - labelInfo={} - intent={inputIntent({ error, touched })} - helperText={} - > - - - , - }} - tooltip={true} - tooltipProps={{ - content: ( - - ), - position: Position.BOTTOM_LEFT, - }} - /> - - - )} - + {/* ----------- Reference ----------- */} @@ -244,15 +254,6 @@ function EstimateFormHeader({ ); } -export default compose( - withDialogActions, - withSettings(({ estimatesSettings }) => ({ - estimateNextNumber: estimatesSettings?.nextNumber, - estimateNumberPrefix: estimatesSettings?.numberPrefix, - estimateAutoIncrement: estimatesSettings?.autoIncrement, - })), -)(EstimateFormHeader); - const CustomerButtonLink = styled(CustomerDrawerLink)` font-size: 11px; margin-top: 6px; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.tsx index 3ea792138..68a2cdd7f 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.tsx @@ -71,10 +71,10 @@ function InvoiceForm({ : { ...defaultInvoice, ...(invoiceIncrementMode && { - invoice_no: invoiceNumber, - }), - entries: orderingLinesIndexes(defaultInvoice.entries), - currency_code: base_currency, + invoice_no: invoiceNumber, + }), + entries: orderingLinesIndexes(defaultInvoice.entries), + currency_code: base_currency, ...newInvoice, }), }; @@ -140,7 +140,6 @@ function InvoiceForm({ createInvoiceMutate(form).then(onSuccess).catch(onError); } }; - // Create invoice form schema. const CreateInvoiceFormSchema = getCreateInvoiceFormSchema(); @@ -168,7 +167,11 @@ function InvoiceForm({ + + {/*---------- Dialogs ----------*/} + + {/*---------- Effects ----------*/} diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.tsx index ad69f1a4f..83f55cc23 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.tsx @@ -11,9 +11,9 @@ export default function InvoiceFormDialogs() { const { setFieldValue } = useFormikContext(); // Update the form once the invoice number form submit confirm. - const handleInvoiceNumberFormConfirm = ({ incrementNumber, manually }) => { - setFieldValue('invoice_no', incrementNumber || ''); - setFieldValue('invoice_no_manually', manually); + const handleInvoiceNumberFormConfirm = (settings) => { + setFieldValue('invoice_no', settings.transactionNumber); + setFieldValue('invoice_no_manually', settings.transactionNumber); }; return ( diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx index 809c0ea81..0edeaf10a 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx @@ -11,6 +11,7 @@ import { } from '@blueprintjs/core'; import { DateInput } from '@blueprintjs/datetime'; import { FastField, Field, ErrorMessage, useFormikContext } from 'formik'; +import * as R from 'ramda'; import { FFormGroup, @@ -23,13 +24,16 @@ import { Icon, InputPrependButton, FeatureCan, + FInputGroup, } from '@/components'; -import { momentFormatter, compose, tansformDateValue } from '@/utils'; -import { CLASSES } from '@/constants/classes'; -import { inputIntent, handleDateChange } from '@/utils'; import { - customerNameFieldShouldUpdate, -} from './utils'; + momentFormatter, + tansformDateValue, + inputIntent, + handleDateChange, +} from '@/utils'; +import { CLASSES } from '@/constants/classes'; +import { customerNameFieldShouldUpdate } from './utils'; import { useInvoiceFormContext } from './InvoiceFormProvider'; import { @@ -46,40 +50,88 @@ import { DialogsName } from '@/constants/dialogs'; import withSettings from '@/containers/Settings/withSettings'; import withDialogActions from '@/containers/Dialog/withDialogActions'; +/** + * Invoice number field of invoice form. + */ +const InvoiceFormInvoiceNumberField = R.compose( + withDialogActions, + withSettings(({ invoiceSettings }) => ({ + invoiceAutoIncrement: invoiceSettings?.autoIncrement, + })), +)( + ({ + // #withDialogActions + openDialog, + + // #withSettings + invoiceAutoIncrement, + }) => { + // Formik context. + const { values, setFieldValue } = useFormikContext(); + + // Handle invoice number changing. + const handleInvoiceNumberChange = () => { + openDialog(DialogsName.InvoiceNumberSettings); + }; + // Handle invoice no. field blur. + const handleInvoiceNoBlur = (event) => { + const newValue = event.target.value; + + if (values.invoice_no.value !== newValue && invoiceAutoIncrement) { + openDialog(DialogsName.InvoiceNumberSettings, { + initialFormValues: { + onceManualNumber: newValue, + incrementMode: 'manual-transaction', + }, + }); + } + if (!invoiceAutoIncrement) { + setFieldValue('invoice_no', newValue); + setFieldValue('invoice_no_manually', newValue); + } + }; + + return ( + } + labelInfo={} + inline={true} + fastField={true} + > + + + , + }} + tooltip={true} + tooltipProps={{ + content: , + position: Position.BOTTOM_LEFT, + }} + /> + + + ); + }, +); + /** * Invoice form header fields. */ -function InvoiceFormHeaderFields({ - // #withDialogActions - openDialog, - - // #withSettings - invoiceAutoIncrement, -}) { +export default function InvoiceFormHeaderFields() { // Invoice form context. const { customers, projects } = useInvoiceFormContext(); - - // Formik context. const { values } = useFormikContext(); - // Handle invoice number changing. - const handleInvoiceNumberChange = () => { - openDialog(DialogsName.InvoiceNumberSettings); - }; - // Handle invoice no. field blur. - const handleInvoiceNoBlur = (form, field) => (event) => { - const newValue = event.target.value; - - if (field.value !== newValue && invoiceAutoIncrement) { - openDialog(DialogsName.InvoiceNumberSettings, { - initialFormValues: { - manualTransactionNo: newValue, - incrementMode: 'manual-transaction', - }, - }); - } - }; - return (
{/* ----------- Customer name ----------- */} @@ -185,40 +237,7 @@ function InvoiceFormHeaderFields({ {/* ----------- Invoice number ----------- */} - - {({ form, field, meta: { error, touched } }) => ( - } - labelInfo={} - inline={true} - className={classNames('form-group--invoice-no', CLASSES.FILL)} - intent={inputIntent({ error, touched })} - helperText={} - > - - - , - }} - tooltip={true} - tooltipProps={{ - content: ( - - ), - position: Position.BOTTOM_LEFT, - }} - /> - - - )} - + {/* ----------- Reference ----------- */} @@ -260,13 +279,6 @@ function InvoiceFormHeaderFields({ ); } -export default compose( - withDialogActions, - withSettings(({ invoiceSettings }) => ({ - invoiceAutoIncrement: invoiceSettings?.autoIncrement, - })), -)(InvoiceFormHeaderFields); - const CustomerButtonLink = styled(CustomerDrawerLink)` font-size: 11px; margin-top: 6px; diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.tsx index 9cf445dfb..431105e3d 100644 --- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.tsx +++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.tsx @@ -177,6 +177,7 @@ function PaymentReceiveForm({ + {/* ------- Effects ------- */} {/* ------- Alerts & Dialogs ------- */} diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormDialogs.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormDialogs.tsx index 842a4653f..d49613ec0 100644 --- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormDialogs.tsx +++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormDialogs.tsx @@ -9,17 +9,15 @@ import PaymentReceiveNumberDialog from '@/containers/Dialogs/PaymentReceiveNumbe export default function PaymentReceiveFormDialogs() { const { setFieldValue } = useFormikContext(); - const handleUpdatePaymentNumber = ({ incrementNumber, manually }) => { - setFieldValue('payment_receive_no', incrementNumber); - setFieldValue('payment_receive_no_manually', manually) + const handleUpdatePaymentNumber = (settings) => { + setFieldValue('payment_receive_no', settings.transactionNumber); + setFieldValue('payment_receive_no_manually', settings.transactionNumber); }; return ( - <> - - + ); } diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx index 0c8b51741..c6ac39625 100644 --- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx +++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx @@ -12,13 +12,13 @@ import { } from '@blueprintjs/core'; import { DateInput } from '@blueprintjs/datetime'; import { toSafeInteger } from 'lodash'; -import { FeatureCan, FormattedMessage as T } from '@/components'; import { FastField, Field, useFormikContext, ErrorMessage } from 'formik'; +import * as R from 'ramda'; +import { FeatureCan, FormattedMessage as T } from '@/components'; import { useAutofocus } from '@/hooks'; import { CLASSES } from '@/constants/classes'; import { - compose, safeSumBy, momentFormatter, tansformDateValue, @@ -48,7 +48,6 @@ import { import withDialogActions from '@/containers/Dialog/withDialogActions'; import withSettings from '@/containers/Settings/withSettings'; -import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization'; import { amountPaymentEntries, @@ -58,19 +57,86 @@ import { } from './utils'; import { Features } from '@/constants'; +/** + * Payment receive number field. + */ +const PaymentReceivePaymentNoField = R.compose( + withSettings(({ paymentReceiveSettings }) => ({ + paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement, + })), + withDialogActions, +)( + ({ + // #withDialogActions + openDialog, + + // #withSettings + paymentReceiveAutoIncrement, + }) => { + const { values, setFieldValue } = useFormikContext(); + + // Handle click open payment receive number dialog. + const handleClickOpenDialog = () => { + openDialog('payment-receive-number-form'); + }; + // Handle payment number field blur. + const handlePaymentNoBlur = (event) => { + const newValue = event.target.value; + + if ( + values.payment_receive_no !== newValue && + paymentReceiveAutoIncrement + ) { + openDialog('payment-receive-number-form', { + initialFormValues: { + onceManualNumber: newValue, + incrementMode: 'manual-transaction', + }, + }); + } + if (!paymentReceiveAutoIncrement) { + setFieldValue('payment_receive_no', newValue); + setFieldValue('payment_receive_no_manually', newValue); + } + }; + return ( + } + inline={true} + labelInfo={} + helperText={} + > + + + , + }} + tooltip={true} + tooltipProps={{ + content: ( + + ), + position: Position.BOTTOM_LEFT, + }} + /> + + + ); + }, +); + /** * Payment receive header fields. */ -function PaymentReceiveHeaderFields({ - // #withCurrentOrganization - organization: { base_currency }, - - // #withDialogActions - openDialog, - - // #withSettings - paymentReceiveAutoIncrement, -}) { +export default function PaymentReceiveHeaderFields({}) { // Payment receive form context. const { customers, accounts, projects, isNewMode } = usePaymentReceiveFormContext(); @@ -101,24 +167,6 @@ function PaymentReceiveHeaderFields({ const newEntries = amountPaymentEntries(toSafeInteger(value), entries); setFieldValue('entries', newEntries); }; - // Handle click open payment receive number dialog. - const handleClickOpenDialog = () => { - openDialog('payment-receive-number-form'); - }; - - // Handle payment number field blur. - const handlePaymentNoBlur = (form, field) => (event) => { - const newValue = event.target.value; - - if (field.value !== newValue && paymentReceiveAutoIncrement) { - openDialog('payment-receive-number-form', { - initialFormValues: { - manualTransactionNo: newValue, - incrementMode: 'manual-transaction', - }, - }); - } - }; return (
@@ -237,43 +285,7 @@ function PaymentReceiveHeaderFields({ {/* ------------ Payment receive no. ------------ */} - - {({ form, field, meta: { error, touched } }) => ( - } - inline={true} - labelInfo={} - className={('form-group--payment_receive_no', CLASSES.FILL)} - intent={inputIntent({ error, touched })} - helperText={} - > - - - , - }} - tooltip={true} - tooltipProps={{ - content: ( - - ), - position: Position.BOTTOM_LEFT, - }} - /> - - - )} - + {/* ------------ Deposit account ------------ */} ({ - paymentReceiveAutoIncrement: paymentReceiveSettings?.autoIncrement, - })), - withDialogActions, - withCurrentOrganization(), -)(PaymentReceiveHeaderFields); - const CustomerButtonLink = styled(CustomerDrawerLink)` font-size: 11px; margin-top: 6px; diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.tsx index 83fd661f1..4736bcf5b 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.tsx +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.tsx @@ -165,7 +165,11 @@ function ReceiptForm({ + + {/*---------- Dialogs ---------*/} + + {/*---------- Effects ---------*/} diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormDialogs.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormDialogs.tsx index d378f878d..c60aca031 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormDialogs.tsx +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormDialogs.tsx @@ -10,9 +10,9 @@ export default function ReceiptFormDialogs() { const { setFieldValue } = useFormikContext(); // Update the form once the receipt number form submit confirm. - const handleReceiptNumberFormConfirm = ({ incrementNumber, manually }) => { - setFieldValue('receipt_number', incrementNumber || ''); - setFieldValue('receipt_number_manually', manually); + const handleReceiptNumberFormConfirm = (settings) => { + setFieldValue('receipt_number', settings.transactionNumber); + setFieldValue('receipt_number_manually', settings.transactionNumber); }; return ( diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx index 9b655d09c..56fc3836a 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx @@ -10,9 +10,10 @@ import { ControlGroup, } from '@blueprintjs/core'; import { DateInput } from '@blueprintjs/datetime'; -import { FastField, ErrorMessage } from 'formik'; -import { CLASSES } from '@/constants/classes'; +import { FastField, ErrorMessage, useFormikContext } from 'formik'; +import * as R from 'ramda'; +import { CLASSES } from '@/constants/classes'; import { FFormGroup, AccountsSelect, @@ -24,57 +25,102 @@ import { FormattedMessage as T, FeatureCan, } from '@/components'; -import withSettings from '@/containers/Settings/withSettings'; -import withDialogActions from '@/containers/Dialog/withDialogActions'; import { ACCOUNT_TYPE } from '@/constants/accountTypes'; import { ProjectsSelect } from '@/containers/Projects/components'; import { momentFormatter, - compose, tansformDateValue, handleDateChange, inputIntent, } from '@/utils'; import { useReceiptFormContext } from './ReceiptFormProvider'; -import { - accountsFieldShouldUpdate, - customersFieldShouldUpdate, -} from './utils'; +import { accountsFieldShouldUpdate, customersFieldShouldUpdate } from './utils'; import { ReceiptExchangeRateInputField, ReceiptProjectSelectButton, } from './components'; import { Features } from '@/constants'; +import withSettings from '@/containers/Settings/withSettings'; +import withDialogActions from '@/containers/Dialog/withDialogActions'; + +const ReceiptFormReceiptNumberField = R.compose( + withDialogActions, + withSettings(({ receiptSettings }) => ({ + receiptAutoIncrement: receiptSettings?.autoIncrement, + })), +)( + ({ + //#withDialogActions + openDialog, + + // #withSettings + receiptAutoIncrement, + }) => { + const { values, setFieldValue } = useFormikContext(); + + const handleReceiptNumberChange = useCallback(() => { + openDialog('receipt-number-form', {}); + }, [openDialog]); + + const handleReceiptNoBlur = (event) => { + const newValue = event.target.value; + + if (values.receipt_number !== newValue && receiptAutoIncrement) { + openDialog('receipt-number-form', { + initialFormValues: { + onceManualNumber: newValue, + incrementMode: 'manual-transaction', + }, + }); + } + if (!receiptAutoIncrement) { + setFieldValue('receipt_number', newValue); + setFieldValue('receipt_number_manually', newValue); + } + }; + + return ( + } + inline={true} + labelInfo={} + > + + + , + }} + tooltip={true} + tooltipProps={{ + content: ( + + ), + position: Position.BOTTOM_LEFT, + }} + inputProps={{ + leftIcon: , + }} + /> + + + ); + }, +); /** * Receipt form header fields. */ -function ReceiptFormHeader({ - //#withDialogActions - openDialog, - - // #withSettings - receiptAutoIncrement, -}) { +export default function ReceiptFormHeader() { const { accounts, customers, projects } = useReceiptFormContext(); - const handleReceiptNumberChange = useCallback(() => { - openDialog('receipt-number-form', {}); - }, [openDialog]); - - const handleReceiptNoBlur = (form, field) => (event) => { - const newValue = event.target.value; - - if (field.value !== newValue && receiptAutoIncrement) { - openDialog('receipt-number-form', { - initialFormValues: { - manualTransactionNo: newValue, - incrementMode: 'manual-transaction', - }, - }); - } - }; - return (
{/* ----------- Customer name ----------- */} @@ -170,45 +216,7 @@ function ReceiptFormHeader({ {/* ----------- Receipt number ----------- */} - - {({ form, field, meta: { error, touched } }) => ( - } - inline={true} - className={('form-group--receipt_number', CLASSES.FILL)} - labelInfo={} - intent={inputIntent({ error, touched })} - helperText={} - > - - - , - }} - tooltip={true} - tooltipProps={{ - content: ( - - ), - position: Position.BOTTOM_LEFT, - }} - inputProps={{ - leftIcon: , - }} - /> - - - )} - + {/* ----------- Reference ----------- */} @@ -245,13 +253,6 @@ function ReceiptFormHeader({ ); } -export default compose( - withDialogActions, - withSettings(({ receiptSettings }) => ({ - receiptAutoIncrement: receiptSettings?.autoIncrement, - })), -)(ReceiptFormHeader); - const CustomerButtonLink = styled(CustomerDrawerLink)` font-size: 11px; margin-top: 6px; diff --git a/packages/webapp/src/lang/en/index.json b/packages/webapp/src/lang/en/index.json index 6b93f700e..d9b5f02a8 100644 --- a/packages/webapp/src/lang/en/index.json +++ b/packages/webapp/src/lang/en/index.json @@ -1376,7 +1376,7 @@ "receipt.auto_increment.manually": "Your receipt numbers are set on manual mode. Are you sure chaning this settings?", "payment_receive.auto_increment.auto": "Your payment numbers are set on auto-increment mode. Are you sure changing this setting?", "payment_receive.auto_increment.manually": "Your payment numbers are set on manual mode. Are you sure chaning this settings?", - "auto_increment.field.manually": "I will enter them manually each time", + "auto_increment.field.manually": "I will enter them manually each time.", "auto_increment.field.manual_this_transaction": "Manual entering for this transaction.", "auto_increment.field.auto": "Auto-incrementing number.", "date_formats": {