diff --git a/packages/webapp/src/constants/dialogs.ts b/packages/webapp/src/constants/dialogs.ts index 6b62c0b0d..f8bf10668 100644 --- a/packages/webapp/src/constants/dialogs.ts +++ b/packages/webapp/src/constants/dialogs.ts @@ -46,4 +46,5 @@ export enum DialogsName { EstimateExpenseForm = 'estimate-expense-form', ProjectInvoicingForm = 'project-invoicing-form', ProjectBillableEntriesForm = 'project-billable-entries', + InvoiceNumberSettings = 'InvoiceNumberSettings' } diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.tsx index 1eb9ae19f..7cba3b32a 100644 --- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.tsx +++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.tsx @@ -4,7 +4,7 @@ import { Formik, Form } from 'formik'; import { Intent } from '@blueprintjs/core'; import intl from 'react-intl-universal'; import * as R from 'ramda'; -import { defaultTo, isEmpty, omit } from 'lodash'; +import { isEmpty, omit } from 'lodash'; import classNames from 'classnames'; import { useHistory } from 'react-router-dom'; @@ -31,6 +31,7 @@ import { transformToEditForm, defaultManualJournal, } from './utils'; +import { JournalSyncIncrementSettingsToForm } from './components'; /** * Journal entries form. @@ -40,6 +41,7 @@ function MakeJournalEntriesForm({ journalNextNumber, journalNumberPrefix, journalAutoIncrement, + // #withCurrentOrganization organization: { base_currency }, }) { @@ -179,6 +181,9 @@ function MakeJournalEntriesForm({ {/* --------- Dialogs --------- */} + + {/* --------- Effects --------- */} + diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.tsx index 691ac9d87..fe3cf3cd3 100644 --- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.tsx +++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.tsx @@ -8,6 +8,19 @@ import { PageFormBigNumber, FormattedMessage as T } from '@/components'; import MakeJournalEntriesHeaderFields from './MakeJournalEntriesHeaderFields'; export default function MakeJournalEntriesHeader() { + return ( +
+ + +
+ ); +} + +/** + * Big total number of make journal header. + * @returns {React.ReactNode} + */ +function MakeJournalHeaderBigNumber() { const { values: { entries, currency_code }, } = useFormikContext(); @@ -17,14 +30,10 @@ export default function MakeJournalEntriesHeader() { const total = Math.max(totalCredit, totalDebit); return ( -
- - - } - amount={total} - currencyCode={currency_code} - /> -
+ } + amount={total} + currencyCode={currency_code} + /> ); } diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx index 23998a5ba..f8ee173a0 100644 --- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx +++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.tsx @@ -25,30 +25,24 @@ import { Icon, InputPrependButton, CurrencySelectList, - FormattedMessage as T + FormattedMessage as T, } from '@/components'; import { useMakeJournalFormContext } from './MakeJournalProvider'; import { JournalExchangeRateInputField } from './components'; +import { currenciesFieldShouldUpdate } from './utils'; + import withSettings from '@/containers/Settings/withSettings'; import withDialogActions from '@/containers/Dialog/withDialogActions'; -import { - currenciesFieldShouldUpdate, - useObserveJournalNoSettings, -} from './utils'; + /** * Make journal entries header. */ function MakeJournalEntriesHeader({ - // #ownProps - onJournalNumberChanged, - // #withDialog openDialog, // #withSettings journalAutoIncrement, - journalNextNumber, - journalNumberPrefix, }) { const { currencies } = useMakeJournalFormContext(); @@ -71,8 +65,6 @@ function MakeJournalEntriesHeader({ } }; - useObserveJournalNoSettings(journalNumberPrefix, journalNextNumber); - return (
{/*------------ Posting date -----------*/} @@ -224,7 +216,5 @@ export default compose( withDialogActions, withSettings(({ manualJournalsSettings }) => ({ journalAutoIncrement: manualJournalsSettings?.autoIncrement, - journalNextNumber: manualJournalsSettings?.nextNumber, - journalNumberPrefix: manualJournalsSettings?.numberPrefix, })), )(MakeJournalEntriesHeader); diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormDialogs.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormDialogs.tsx index be945be87..561483eef 100644 --- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormDialogs.tsx +++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormDialogs.tsx @@ -16,11 +16,9 @@ export default function MakeJournalFormDialogs() { }; return ( - <> - - + ); } diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/components.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/components.tsx index bd393df5a..07b985230 100644 --- a/packages/webapp/src/containers/Accounting/MakeJournal/components.tsx +++ b/packages/webapp/src/containers/Accounting/MakeJournal/components.tsx @@ -1,9 +1,10 @@ // @ts-nocheck -import React from 'react'; +import React, { useEffect } from 'react'; import intl from 'react-intl-universal'; import { Menu, MenuItem, Position, Button } from '@blueprintjs/core'; import { Popover2 } from '@blueprintjs/popover2'; import { useFormikContext } from 'formik'; +import * as R from 'ramda'; import { ExchangeRateInputGroup, @@ -24,6 +25,9 @@ import { CellType, Features, Align } from '@/constants'; import { useCurrentOrganization, useFeatureCan } from '@/hooks/state'; import { useJournalIsForeign } from './utils'; +import withSettings from '@/containers/Settings/withSettings'; +import { transactionNumber } from '@/utils'; +import { useUpdateEffect } from '@/hooks'; /** * Contact header cell. @@ -199,3 +203,34 @@ export function JournalExchangeRateInputField({ ...props }) { /> ); } + +/** + * Syncs journal auto-increment settings to form. + * @return {React.ReactNode} + */ +export const JournalSyncIncrementSettingsToForm = R.compose( + withSettings(({ manualJournalsSettings }) => ({ + journalAutoIncrement: manualJournalsSettings?.autoIncrement, + journalNextNumber: manualJournalsSettings?.nextNumber, + journalNumberPrefix: manualJournalsSettings?.numberPrefix, + })), +)(({ journalAutoIncrement, journalNextNumber, journalNumberPrefix }) => { + const { setFieldValue } = useFormikContext(); + + useUpdateEffect(() => { + if (!journalAutoIncrement) return null; + + const journalNo = transactionNumber(journalNumberPrefix, journalNextNumber); + setFieldValue('journal_number', journalNo); + }, [ + setFieldValue, + journalNumberPrefix, + journalNextNumber, + journalAutoIncrement, + ]); + + return null; +}); + +JournalSyncIncrementSettingsToForm.displayName = + 'JournalSyncIncrementSettingsToForm'; diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/utils.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/utils.tsx index 6144cc069..61fd41208 100644 --- a/packages/webapp/src/containers/Accounting/MakeJournal/utils.tsx +++ b/packages/webapp/src/containers/Accounting/MakeJournal/utils.tsx @@ -174,15 +174,6 @@ export const transformErrors = (resErrors, { setErrors, errors }) => { } }; -export const useObserveJournalNoSettings = (prefix, nextNumber) => { - const { setFieldValue } = useFormikContext(); - - React.useEffect(() => { - const journalNo = transactionNumber(prefix, nextNumber); - setFieldValue('journal_number', journalNo); - }, [setFieldValue, prefix, nextNumber]); -}; - /** * Detarmines entries fast field should update. */ diff --git a/packages/webapp/src/containers/Dialogs/InvoiceNumberDialog/InvoiceNumberDialogContent.tsx b/packages/webapp/src/containers/Dialogs/InvoiceNumberDialog/InvoiceNumberDialogContent.tsx index 5ab76801c..020dddad7 100644 --- a/packages/webapp/src/containers/Dialogs/InvoiceNumberDialog/InvoiceNumberDialogContent.tsx +++ b/packages/webapp/src/containers/Dialogs/InvoiceNumberDialog/InvoiceNumberDialogContent.tsx @@ -14,6 +14,7 @@ import { transformFormToSettings, transformSettingsToForm, } from '@/containers/JournalNumber/utils'; +import { DialogsName } from '@/constants/dialogs'; /** * invoice number dialog's content. @@ -39,7 +40,7 @@ function InvoiceNumberDialogContent({ // Handle the form success. const handleSuccess = () => { setSubmitting(false); - closeDialog('invoice-number-form'); + closeDialog(DialogsName.InvoiceNumberSettings); onConfirm(values); }; // Handle the form errors. @@ -56,10 +57,9 @@ function InvoiceNumberDialogContent({ // Save the settings. saveSettings({ options }).then(handleSuccess).catch(handleErrors); }; - // Handle the dialog close. const handleClose = () => { - closeDialog('invoice-number-form'); + closeDialog(DialogsName.InvoiceNumberSettings); }; // Handle form change. const handleChange = (values) => { @@ -71,17 +71,19 @@ function InvoiceNumberDialogContent({ ? intl.get('invoice.auto_increment.auto') : intl.get('invoice.auto_increment.manually'); + const initialFormValues = { + ...transformSettingsToForm({ + nextNumber, + numberPrefix, + autoIncrement, + }), + ...initialValues, + }; + return ( ({ ...settings, - incrementMode: settings.autoIncrement === 'true' ? 'auto' : 'manual', + incrementMode: settings.autoIncrement ? 'auto' : 'manual', }); export const transformFormToSettings = (values, group) => { diff --git a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeader.tsx b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeader.tsx index 6bb3ecdff..b3439fa4c 100644 --- a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeader.tsx +++ b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeader.tsx @@ -13,6 +13,15 @@ import BillFormHeaderFields from './BillFormHeaderFields'; * Fill form header. */ function BillFormHeader() { + return ( +
+ + +
+ ); +} + +function BillFormBigTotal() { const { values: { currency_code, entries }, } = useFormikContext(); @@ -21,14 +30,12 @@ function BillFormHeader() { const totalDueAmount = useMemo(() => sumBy(entries, 'amount'), [entries]); return ( -
- - -
+ ); } + export default BillFormHeader; diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.tsx index bac555c73..74b1fc6de 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.tsx +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.tsx @@ -38,6 +38,7 @@ import { import withSettings from '@/containers/Settings/withSettings'; import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization'; +import { CreditNoteSyncIncrementSettingsToForm } from './components'; /** * Credit note form. @@ -162,6 +163,7 @@ function CreditNoteForm({ +
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.tsx index 7ea1805f3..2b4e4d1b4 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.tsx +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeader.tsx @@ -13,6 +13,19 @@ import { PageFormBigNumber } from '@/components'; * Credit note header. */ function CreditNoteFormHeader() { + return ( +
+ + +
+ ); +} + +/** + * Big total number of credit note form header. + * @returns {React.ReactNode} + */ +function CreditNoteFormBigNumber() { const { values: { entries, currency_code }, } = useFormikContext(); @@ -21,14 +34,11 @@ function CreditNoteFormHeader() { const totalAmount = React.useMemo(() => getEntriesTotal(entries), [entries]); return ( -
- - -
+ ); } diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx index 3e61a3b5c..9b7330bbd 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx @@ -21,7 +21,6 @@ import { } from '@/components'; import { customerNameFieldShouldUpdate, - useObserveCreditNoSettings, } from './utils'; import { useCreditNoteFormContext } from './CreditNoteFormProvider'; @@ -45,8 +44,6 @@ function CreditNoteFormHeaderFields({ // #withSettings creditAutoIncrement, - creditNumberPrefix, - creditNextNumber, }) { // Credit note form context. const { customers } = useCreditNoteFormContext(); @@ -70,9 +67,6 @@ function CreditNoteFormHeaderFields({ } }; - // Syncs credit number settings with form. - useObserveCreditNoSettings(creditNumberPrefix, creditNextNumber); - return (
{/* ----------- Customer name ----------- */} diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/components.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/components.tsx index 44a82782f..a8342a4a6 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/components.tsx +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/components.tsx @@ -1,16 +1,18 @@ // @ts-nocheck -import React from 'react'; +import React, { useEffect } from 'react'; import { useFormikContext } from 'formik'; +import * as R from 'ramda'; import { ExchangeRateInputGroup } from '@/components'; import { useCurrentOrganization } from '@/hooks/state'; import { useCreditNoteIsForeignCustomer } from './utils'; - +import withSettings from '@/containers/Settings/withSettings'; +import { transactionNumber } from '@/utils'; /** * credit exchange rate input field. * @returns {JSX.Element} */ - export function CreditNoteExchangeRateInputField({ ...props }) { +export function CreditNoteExchangeRateInputField({ ...props }) { const currentOrganization = useCurrentOrganization(); const { values } = useFormikContext(); @@ -27,4 +29,27 @@ import { useCreditNoteIsForeignCustomer } from './utils'; {...props} /> ); -} \ No newline at end of file +} + +/** + * Syncs credit note auto-increment settings to form. + * @return {React.ReactNode} + */ +export const CreditNoteSyncIncrementSettingsToForm = R.compose( + withSettings(({ creditNoteSettings }) => ({ + creditAutoIncrement: creditNoteSettings?.autoIncrement, + creditNextNumber: creditNoteSettings?.nextNumber, + creditNumberPrefix: creditNoteSettings?.numberPrefix, + })), +)(({ creditAutoIncrement, creditNextNumber, creditNumberPrefix }) => { + const { setFieldValue } = useFormikContext(); + + useEffect(() => { + if (!creditAutoIncrement) return; + + const creditNo = transactionNumber(creditNumberPrefix, creditNextNumber); + setFieldValue('credit_note_number', creditNo); + }, [setFieldValue, creditNumberPrefix, creditNextNumber]); + + return null; +}); diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/utils.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/utils.tsx index 01c9e2cdf..46beaa711 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/utils.tsx +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/utils.tsx @@ -130,18 +130,6 @@ export const entriesFieldShouldUpdate = (newProps, oldProps) => { ); }; -/** - * Syncs invoice no. settings with form. - */ -export const useObserveCreditNoSettings = (prefix, nextNumber) => { - const { setFieldValue } = useFormikContext(); - - React.useEffect(() => { - const creditNo = transactionNumber(prefix, nextNumber); - setFieldValue('credit_note_number', creditNo); - }, [setFieldValue, prefix, nextNumber]); -}; - export const useSetPrimaryBranchToForm = () => { const { setFieldValue } = useFormikContext(); const { branches, isBranchesSuccess } = useCreditNoteFormContext(); diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx index ff439b911..ebd05c816 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx @@ -32,6 +32,7 @@ import { transfromsFormValuesToRequest, handleErrors, } from './utils'; +import { EstimateIncrementSyncSettingsToForm } from './components'; /** * Estimate form. @@ -160,8 +161,8 @@ function EstimateForm({ - +
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx index b5f4d2164..637b43ccc 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.tsx @@ -12,6 +12,19 @@ import { PageFormBigNumber } from '@/components'; // Estimate form top header. function EstimateFormHeader() { + return ( +
+ + +
+ ); +} + +/** + * Big total of estimate form header. + * @returns {React.ReactNode} + */ +function EstimateFormBigTotal() { const { values: { entries, currency_code }, } = useFormikContext(); @@ -20,15 +33,11 @@ function EstimateFormHeader() { const totalDueAmount = useMemo(() => getEntriesTotal(entries), [entries]); return ( -
- - - -
+ ); } diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx index 823b3ba14..b85d8f138 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx @@ -39,7 +39,6 @@ import { EstimateProjectSelectButton, } from './components'; -import { useObserveEstimateNoSettings } from './utils'; import { useEstimateFormContext } from './EstimateFormProvider'; /** @@ -71,8 +70,7 @@ function EstimateFormHeader({ }); } }; - // Syncs estimate number settings with the form. - useObserveEstimateNoSettings(estimateNumberPrefix, estimateNextNumber); + return (
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/components.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/components.tsx index aacee47f6..f8adf8f23 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/components.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/components.tsx @@ -1,18 +1,20 @@ // @ts-nocheck -import React from 'react'; +import React, { useEffect } from 'react'; import intl from 'react-intl-universal'; import { Button } from '@blueprintjs/core'; +import * as R from 'ramda'; import { useFormikContext } from 'formik'; import { ExchangeRateInputGroup } from '@/components'; import { useCurrentOrganization } from '@/hooks/state'; import { useEstimateIsForeignCustomer } from './utils'; - +import withSettings from '@/containers/Settings/withSettings'; +import { transactionNumber } from '@/utils'; /** * Estimate exchange rate input field. * @returns {JSX.Element} */ - export function EstimateExchangeRateInputField({ ...props }) { +export function EstimateExchangeRateInputField({ ...props }) { const currentOrganization = useCurrentOrganization(); const { values } = useFormikContext(); @@ -35,6 +37,32 @@ import { useEstimateIsForeignCustomer } from './utils'; * Estimate project select. * @returns {JSX.Element} */ - export function EstimateProjectSelectButton({ label }) { +export function EstimateProjectSelectButton({ label }) { return
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.tsx index 54319f0d7..ad69f1a4f 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.tsx @@ -2,6 +2,7 @@ import React from 'react'; import InvoiceNumberDialog from '@/containers/Dialogs/InvoiceNumberDialog'; import { useFormikContext } from 'formik'; +import { DialogsName } from '@/constants/dialogs'; /** * Invoice form dialogs. @@ -16,11 +17,9 @@ export default function InvoiceFormDialogs() { }; return ( - <> - - + ); } diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx index efcaf08a2..809c0ea81 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx @@ -28,7 +28,6 @@ import { momentFormatter, compose, tansformDateValue } from '@/utils'; import { CLASSES } from '@/constants/classes'; import { inputIntent, handleDateChange } from '@/utils'; import { - useObserveInvoiceNoSettings, customerNameFieldShouldUpdate, } from './utils'; @@ -42,6 +41,7 @@ import { ProjectBillableEntriesLink, } from '@/containers/Projects/components'; import { Features } from '@/constants'; +import { DialogsName } from '@/constants/dialogs'; import withSettings from '@/containers/Settings/withSettings'; import withDialogActions from '@/containers/Dialog/withDialogActions'; @@ -55,8 +55,6 @@ function InvoiceFormHeaderFields({ // #withSettings invoiceAutoIncrement, - invoiceNumberPrefix, - invoiceNextNumber, }) { // Invoice form context. const { customers, projects } = useInvoiceFormContext(); @@ -66,14 +64,14 @@ function InvoiceFormHeaderFields({ // Handle invoice number changing. const handleInvoiceNumberChange = () => { - openDialog('invoice-number-form'); + openDialog(DialogsName.InvoiceNumberSettings); }; // Handle invoice no. field blur. const handleInvoiceNoBlur = (form, field) => (event) => { const newValue = event.target.value; if (field.value !== newValue && invoiceAutoIncrement) { - openDialog('invoice-number-form', { + openDialog(DialogsName.InvoiceNumberSettings, { initialFormValues: { manualTransactionNo: newValue, incrementMode: 'manual-transaction', @@ -81,8 +79,6 @@ function InvoiceFormHeaderFields({ }); } }; - // Syncs invoice number settings with form. - useObserveInvoiceNoSettings(invoiceNumberPrefix, invoiceNextNumber); return (
@@ -268,8 +264,6 @@ export default compose( withDialogActions, withSettings(({ invoiceSettings }) => ({ invoiceAutoIncrement: invoiceSettings?.autoIncrement, - invoiceNextNumber: invoiceSettings?.nextNumber, - invoiceNumberPrefix: invoiceSettings?.numberPrefix, })), )(InvoiceFormHeaderFields); diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/components.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/components.tsx index b69032b71..d0e6ff363 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/components.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/components.tsx @@ -1,11 +1,15 @@ // @ts-nocheck import React from 'react'; import intl from 'react-intl-universal'; +import * as R from 'ramda'; import { Button } from '@blueprintjs/core'; import { useFormikContext } from 'formik'; import { ExchangeRateInputGroup } from '@/components'; import { useCurrentOrganization } from '@/hooks/state'; import { useInvoiceIsForeignCustomer } from './utils'; +import withSettings from '@/containers/Settings/withSettings'; +import { useUpdateEffect } from '@/hooks'; +import { transactionNumber } from '@/utils'; /** * Invoice exchange rate input field. @@ -37,3 +41,26 @@ export function InvoiceExchangeRateInputField({ ...props }) { export function InvoiceProjectSelectButton({ label }) { return
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx index 8c5174c62..833c5b45b 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx @@ -17,6 +17,21 @@ function ReceiptFormHeader({ // #ownProps onReceiptNumberChanged, }) { + return ( +
+ + +
+ ); +} + +/** + * The big total amount of receipt form. + * @returns {React.ReactNode} + */ +function ReceiptFormHeaderBigTotal() { const { values: { currency_code, entries }, } = useFormikContext(); @@ -25,16 +40,11 @@ function ReceiptFormHeader({ const totalDueAmount = useMemo(() => getEntriesTotal(entries), [entries]); return ( -
- - -
+ ); } diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx index cd0179247..9b655d09c 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx @@ -39,7 +39,6 @@ import { useReceiptFormContext } from './ReceiptFormProvider'; import { accountsFieldShouldUpdate, customersFieldShouldUpdate, - useObserveReceiptNoSettings, } from './utils'; import { ReceiptExchangeRateInputField, @@ -56,8 +55,6 @@ function ReceiptFormHeader({ // #withSettings receiptAutoIncrement, - receiptNextNumber, - receiptNumberPrefix, }) { const { accounts, customers, projects } = useReceiptFormContext(); @@ -78,9 +75,6 @@ function ReceiptFormHeader({ } }; - // Synsc receipt number settings with the form. - useObserveReceiptNoSettings(receiptNumberPrefix, receiptNextNumber); - return (
{/* ----------- Customer name ----------- */} @@ -255,8 +249,6 @@ export default compose( withDialogActions, withSettings(({ receiptSettings }) => ({ receiptAutoIncrement: receiptSettings?.autoIncrement, - receiptNextNumber: receiptSettings?.nextNumber, - receiptNumberPrefix: receiptSettings?.numberPrefix, })), )(ReceiptFormHeader); diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/components.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/components.tsx index 417daea29..a8136f2c5 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/components.tsx +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/components.tsx @@ -3,9 +3,14 @@ import React from 'react'; import intl from 'react-intl-universal'; import { Button } from '@blueprintjs/core'; import { useFormikContext } from 'formik'; +import * as R from 'ramda'; + import { ExchangeRateInputGroup } from '@/components'; import { useCurrentOrganization } from '@/hooks/state'; import { useReceiptIsForeignCustomer } from './utils'; +import { useUpdateEffect } from '@/hooks'; +import withSettings from '@/containers/Settings/withSettings'; +import { transactionNumber } from '@/utils'; /** * Receipt exchange rate input field. @@ -37,3 +42,31 @@ export function ReceiptExchangeRateInputField({ ...props }) { export function ReceiptProjectSelectButton({ label }) { return