diff --git a/packages/webapp/src/components/DialogsContainer.tsx b/packages/webapp/src/components/DialogsContainer.tsx index 7b6fa7cf1..9e334af78 100644 --- a/packages/webapp/src/components/DialogsContainer.tsx +++ b/packages/webapp/src/components/DialogsContainer.tsx @@ -17,8 +17,8 @@ import AllocateLandedCostDialog from '@/containers/Dialogs/AllocateLandedCostDia import InvoicePdfPreviewDialog from '@/containers/Dialogs/InvoicePdfPreviewDialog'; import EstimatePdfPreviewDialog from '@/containers/Dialogs/EstimatePdfPreviewDialog'; import ReceiptPdfPreviewDialog from '@/containers/Dialogs/ReceiptPdfPreviewDialog'; -import MoneyInDialog from '@/containers/Dialogs/MoneyInDialog'; -import MoneyOutDialog from '@/containers/Dialogs/MoneyOutDialog'; +import MoneyInDialog from '@/containers/CashFlow/MoneyInDialog'; +import MoneyOutDialog from '@/containers/CashFlow/MoneyOutDialog'; import BadDebtDialog from '@/containers/Dialogs/BadDebtDialog'; import NotifyInvoiceViaSMSDialog from '@/containers/Dialogs/NotifyInvoiceViaSMSDialog'; import NotifyReceiptViaSMSDialog from '@/containers/Dialogs/NotifyReceiptViaSMSDialog'; 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..205d4c0b4 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 }, }) { @@ -69,6 +71,8 @@ function MakeJournalEntriesForm({ } : { ...defaultManualJournal, + // If the auto-increment mode is enabled, take the next journal + // number from the settings. ...(journalAutoIncrement && { journal_number: journalNumber, }), @@ -116,7 +120,6 @@ function MakeJournalEntriesForm({ entries: R.compose(orderingLinesIndexes)(entries), publish: submitPayload.publish, }; - // Handle the request error. const handleError = ({ response: { @@ -126,7 +129,6 @@ function MakeJournalEntriesForm({ transformErrors(errors, { setErrors }); setSubmitting(false); }; - // Handle the request success. const handleSuccess = (errors) => { AppToaster.show({ @@ -147,7 +149,6 @@ function MakeJournalEntriesForm({ resetForm(); } }; - if (isNewMode) { createJournalMutate(form).then(handleSuccess).catch(handleError); } else { @@ -179,6 +180,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..ae9c18f2e 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, @@ -25,54 +25,101 @@ import { Icon, InputPrependButton, CurrencySelectList, - FormattedMessage as T + FormattedMessage as T, + FInputGroup, + FFormGroup, } 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'; + +/** + * 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(); + + const handleJournalNumberChange = () => { + openDialog('journal-number-form'); + }; + 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} + fastField={true} + > + + {}} + /> + , + }} + tooltip={true} + tooltipProps={{ + content: , + position: Position.BOTTOM_LEFT, + }} + /> + + + ); + }, +); + /** * Make journal entries header. */ -function MakeJournalEntriesHeader({ - // #ownProps - onJournalNumberChanged, - - // #withDialog - openDialog, - - // #withSettings - journalAutoIncrement, - journalNextNumber, - journalNumberPrefix, -}) { +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', - }, - }); - } - }; - - useObserveJournalNoSettings(journalNumberPrefix, journalNextNumber); - return (
{/*------------ Posting date -----------*/} @@ -106,46 +153,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 -----------*/} @@ -219,12 +227,3 @@ function MakeJournalEntriesHeader({
); } - -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..197ce96dd 100644 --- a/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormDialogs.tsx +++ b/packages/webapp/src/containers/Accounting/MakeJournal/MakeJournalFormDialogs.tsx @@ -10,17 +10,21 @@ 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) => { + // Set the invoice transaction no. that cames from dialog to the form. + // the `journal_number` will be empty except the increment mode is not auto. + setFieldValue('journal_number', settings.transactionNumber); + setFieldValue('journal_number_manually', ''); + + if (settings.incrementMode !== 'auto') { + setFieldValue('journal_number_manually', settings.transactionNumber); + } }; return ( - <> - - + ); } diff --git a/packages/webapp/src/containers/Accounting/MakeJournal/components.tsx b/packages/webapp/src/containers/Accounting/MakeJournal/components.tsx index bd393df5a..c413d74b1 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,37 @@ 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(() => { + // Do not update if the journal auto-increment mode is disabled. + if (!journalAutoIncrement) return null; + + setFieldValue( + 'journal_number', + transactionNumber(journalNumberPrefix, journalNextNumber), + ); + }, [ + 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..8e42a6630 100644 --- a/packages/webapp/src/containers/Accounting/MakeJournal/utils.tsx +++ b/packages/webapp/src/containers/Accounting/MakeJournal/utils.tsx @@ -6,7 +6,6 @@ import intl from 'react-intl-universal'; import { Intent } from '@blueprintjs/core'; import { sumBy, setWith, toSafeInteger, get, first } from 'lodash'; import { - transactionNumber, updateTableCell, repeatValue, transformToForm, @@ -46,7 +45,7 @@ export const defaultEntry = { export const defaultManualJournal = { journal_number: '', - journal_number_manually: false, + journal_number_manually: '', journal_type: 'Journal', date: moment(new Date()).format('YYYY-MM-DD'), description: '', @@ -174,15 +173,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/MoneyInDialog/MoneyInContentFields.tsx b/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInContentFields.tsx similarity index 95% rename from packages/webapp/src/containers/Dialogs/MoneyInDialog/MoneyInContentFields.tsx rename to packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInContentFields.tsx index 15ebc9f95..ee862b763 100644 --- a/packages/webapp/src/containers/Dialogs/MoneyInDialog/MoneyInContentFields.tsx +++ b/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInContentFields.tsx @@ -1,9 +1,15 @@ // @ts-nocheck import React from 'react'; + import OwnerContributionFormFields from './OwnerContribution/OwnerContributionFormFields'; import OtherIncomeFormFields from './OtherIncome/OtherIncomeFormFields'; import TransferFromAccountFormFields from './TransferFromAccount/TransferFromAccountFormFields'; +/** + * + * @param param0 + * @returns + */ export default function MoneyInContentFields({ accountType }) { const handleTransactionType = () => { switch (accountType) { @@ -19,6 +25,5 @@ export default function MoneyInContentFields({ accountType }) { break; } }; - return {handleTransactionType()}; } diff --git a/packages/webapp/src/containers/Dialogs/MoneyInDialog/MoneyInDialogContent.tsx b/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInDialogContent.tsx similarity index 100% rename from packages/webapp/src/containers/Dialogs/MoneyInDialog/MoneyInDialogContent.tsx rename to packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInDialogContent.tsx diff --git a/packages/webapp/src/containers/Dialogs/MoneyInDialog/MoneyInDialogProvider.tsx b/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInDialogProvider.tsx similarity index 100% rename from packages/webapp/src/containers/Dialogs/MoneyInDialog/MoneyInDialogProvider.tsx rename to packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInDialogProvider.tsx diff --git a/packages/webapp/src/containers/Dialogs/MoneyInDialog/MoneyInFloatingActions.tsx b/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFloatingActions.tsx similarity index 100% rename from packages/webapp/src/containers/Dialogs/MoneyInDialog/MoneyInFloatingActions.tsx rename to packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFloatingActions.tsx diff --git a/packages/webapp/src/containers/Dialogs/MoneyInDialog/MoneyInForm.schema.tsx b/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInForm.schema.tsx similarity index 100% rename from packages/webapp/src/containers/Dialogs/MoneyInDialog/MoneyInForm.schema.tsx rename to packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInForm.schema.tsx diff --git a/packages/webapp/src/containers/Dialogs/MoneyInDialog/MoneyInForm.tsx b/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInForm.tsx similarity index 100% rename from packages/webapp/src/containers/Dialogs/MoneyInDialog/MoneyInForm.tsx rename to packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInForm.tsx diff --git a/packages/webapp/src/containers/Dialogs/MoneyInDialog/MoneyInFormContent.tsx b/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFormContent.tsx similarity index 79% rename from packages/webapp/src/containers/Dialogs/MoneyInDialog/MoneyInFormContent.tsx rename to packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFormContent.tsx index d107daafb..2e5edf5e5 100644 --- a/packages/webapp/src/containers/Dialogs/MoneyInDialog/MoneyInFormContent.tsx +++ b/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFormContent.tsx @@ -5,6 +5,7 @@ import { Form } from 'formik'; import MoneyInFormFields from './MoneyInFormFields'; import MoneyInFormDialog from './MoneyInFormDialog'; import MoneyInFloatingActions from './MoneyInFloatingActions'; +import { MoneyInOutSyncIncrementSettingsToForm } from '../_components'; /** * Money In form content. @@ -15,6 +16,7 @@ export default function MoneyInFormContent() { + ); } diff --git a/packages/webapp/src/containers/Dialogs/MoneyInDialog/MoneyInFormDialog.tsx b/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFormDialog.tsx similarity index 73% rename from packages/webapp/src/containers/Dialogs/MoneyInDialog/MoneyInFormDialog.tsx rename to packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFormDialog.tsx index 3207b2352..d401865dd 100644 --- a/packages/webapp/src/containers/Dialogs/MoneyInDialog/MoneyInFormDialog.tsx +++ b/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFormDialog.tsx @@ -11,12 +11,9 @@ export default function MoneyInFormDialog() { const { setFieldValue } = useFormikContext(); // Update the form once the transaction number form submit confirm. - const handleTransactionNumberFormConfirm = ({ - incrementNumber, - manually, - }) => { - setFieldValue('transaction_number', incrementNumber || ''); - setFieldValue('transaction_number_manually', manually); + const handleTransactionNumberFormConfirm = (settings) => { + setFieldValue('transaction_number', settings.transactionNumber); + setFieldValue('transaction_number_manually', settings.transactionNumber); }; return ( diff --git a/packages/webapp/src/containers/Dialogs/MoneyInDialog/MoneyInFormFields.tsx b/packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFormFields.tsx similarity index 100% rename from packages/webapp/src/containers/Dialogs/MoneyInDialog/MoneyInFormFields.tsx rename to packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFormFields.tsx diff --git a/packages/webapp/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.tsx b/packages/webapp/src/containers/CashFlow/MoneyInDialog/OtherIncome/OtherIncomeFormFields.tsx similarity index 71% rename from packages/webapp/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.tsx rename to packages/webapp/src/containers/CashFlow/MoneyInDialog/OtherIncome/OtherIncomeFormFields.tsx index ce479225b..06ccffea0 100644 --- a/packages/webapp/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.tsx +++ b/packages/webapp/src/containers/CashFlow/MoneyInDialog/OtherIncome/OtherIncomeFormFields.tsx @@ -16,14 +16,12 @@ import { InputPrependText, MoneyInputGroup, FieldRequiredHint, - Icon, Col, Row, If, FeatureCan, BranchSelect, BranchSelectButton, - InputPrependButton, ExchangeRateMutedField, } from '@/components'; import { DateInput } from '@blueprintjs/datetime'; @@ -35,65 +33,26 @@ import { momentFormatter, tansformDateValue, handleDateChange, - compose, } from '@/utils'; import { useMoneyInDailogContext } from '../MoneyInDialogProvider'; import { - useObserveTransactionNoSettings, useSetPrimaryBranchToForm, useForeignAccount, BranchRowDivider, } from '../utils'; -import withSettings from '@/containers/Settings/withSettings'; -import withDialogActions from '@/containers/Dialog/withDialogActions'; +import { MoneyInOutTransactionNoField } from '../../_components'; /** * Other income form fields. */ -function OtherIncomeFormFields({ - // #withDialogActions - openDialog, - - // #withSettings - transactionAutoIncrement, - transactionNumberPrefix, - transactionNextNumber, -}) { +export default function OtherIncomeFormFields() { // Money in dialog context. const { accounts, account, branches } = useMoneyInDailogContext(); - const { values } = useFormikContext(); - const amountFieldRef = useAutofocus(); - const isForeigAccount = useForeignAccount(); - // Handle tranaction number changing. - const handleTransactionNumberChange = () => { - openDialog('transaction-number-form'); - }; - - // Handle transaction no. field blur. - const handleTransactionNoBlur = (form, field) => (event) => { - const newValue = event.target.value; - - if (field.value !== newValue && transactionAutoIncrement) { - openDialog('transaction-number-form', { - initialFormValues: { - manualTransactionNo: newValue, - incrementMode: 'manual-transaction', - }, - }); - } - }; - - // Syncs transaction number settings with form. - useObserveTransactionNoSettings( - transactionNumberPrefix, - transactionNextNumber, - ); - // Sets the primary branch to form. useSetPrimaryBranchToForm(); @@ -149,42 +108,7 @@ function OtherIncomeFormFields({ {/*------------ Transaction number -----------*/} - - {({ form, field, meta: { error, touched } }) => ( - } - intent={inputIntent({ error, touched })} - helperText={} - className={'form-group--transaction_number'} - > - - - , - }} - tooltip={true} - tooltipProps={{ - content: ( - - ), - position: Position.BOTTOM_LEFT, - }} - /> - - - )} - + {/*------------ amount -----------*/} @@ -298,12 +222,3 @@ function OtherIncomeFormFields({ ); } - -export default compose( - withDialogActions, - withSettings(({ cashflowSetting }) => ({ - transactionAutoIncrement: cashflowSetting?.autoIncrement, - transactionNextNumber: cashflowSetting?.nextNumber, - transactionNumberPrefix: cashflowSetting?.numberPrefix, - })), -)(OtherIncomeFormFields); diff --git a/packages/webapp/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.tsx b/packages/webapp/src/containers/CashFlow/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.tsx similarity index 71% rename from packages/webapp/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.tsx rename to packages/webapp/src/containers/CashFlow/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.tsx index e12598955..204de591b 100644 --- a/packages/webapp/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.tsx +++ b/packages/webapp/src/containers/CashFlow/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.tsx @@ -17,11 +17,9 @@ import { InputPrependText, MoneyInputGroup, FieldRequiredHint, - Icon, Col, Row, If, - InputPrependButton, ExchangeRateMutedField, BranchSelect, BranchSelectButton, @@ -35,31 +33,20 @@ import { momentFormatter, tansformDateValue, handleDateChange, - compose, } from '@/utils'; import { useMoneyInDailogContext } from '../MoneyInDialogProvider'; import { - useObserveTransactionNoSettings, useSetPrimaryBranchToForm, useForeignAccount, BranchRowDivider, } from '../../MoneyInDialog/utils'; -import withSettings from '@/containers/Settings/withSettings'; -import withDialogActions from '@/containers/Dialog/withDialogActions'; +import { MoneyInOutTransactionNoField } from '../../_components'; /** /** * Owner contribution form fields. */ -function OwnerContributionFormFields({ - // #withDialogActions - openDialog, - - // #withSettings - transactionAutoIncrement, - transactionNumberPrefix, - transactionNextNumber, -}) { +export default function OwnerContributionFormFields() { // Money in dialog context. const { accounts, account, branches } = useMoneyInDailogContext(); @@ -69,31 +56,6 @@ function OwnerContributionFormFields({ const isForeigAccount = useForeignAccount(); - // Handle tranaction number changing. - const handleTransactionNumberChange = () => { - openDialog('transaction-number-form'); - }; - - // Handle transaction no. field blur. - const handleTransactionNoBlur = (form, field) => (event) => { - const newValue = event.target.value; - - if (field.value !== newValue && transactionAutoIncrement) { - openDialog('transaction-number-form', { - initialFormValues: { - manualTransactionNo: newValue, - incrementMode: 'manual-transaction', - }, - }); - } - }; - - // Syncs transaction number settings with form. - useObserveTransactionNoSettings( - transactionNumberPrefix, - transactionNextNumber, - ); - // Sets the primary branch to form. useSetPrimaryBranchToForm(); @@ -148,42 +110,7 @@ function OwnerContributionFormFields({ {/*------------ Transaction number -----------*/} - - {({ form, field, meta: { error, touched } }) => ( - } - intent={inputIntent({ error, touched })} - helperText={} - className={'form-group--transaction_number'} - > - - - , - }} - tooltip={true} - tooltipProps={{ - content: ( - - ), - position: Position.BOTTOM_LEFT, - }} - /> - - - )} - + {/*------------ amount -----------*/} @@ -294,12 +221,3 @@ function OwnerContributionFormFields({ ); } - -export default compose( - withDialogActions, - withSettings(({ cashflowSetting }) => ({ - transactionAutoIncrement: cashflowSetting?.autoIncrement, - transactionNextNumber: cashflowSetting?.nextNumber, - transactionNumberPrefix: cashflowSetting?.numberPrefix, - })), -)(OwnerContributionFormFields); diff --git a/packages/webapp/src/containers/Dialogs/MoneyInDialog/TransactionTypeFields.tsx b/packages/webapp/src/containers/CashFlow/MoneyInDialog/TransactionTypeFields.tsx similarity index 100% rename from packages/webapp/src/containers/Dialogs/MoneyInDialog/TransactionTypeFields.tsx rename to packages/webapp/src/containers/CashFlow/MoneyInDialog/TransactionTypeFields.tsx diff --git a/packages/webapp/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.tsx b/packages/webapp/src/containers/CashFlow/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.tsx similarity index 71% rename from packages/webapp/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.tsx rename to packages/webapp/src/containers/CashFlow/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.tsx index 54539bd0c..0aba83da9 100644 --- a/packages/webapp/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.tsx +++ b/packages/webapp/src/containers/CashFlow/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.tsx @@ -17,11 +17,9 @@ import { InputPrependText, MoneyInputGroup, FieldRequiredHint, - Icon, Col, Row, If, - InputPrependButton, ExchangeRateMutedField, FeatureCan, BranchSelect, @@ -35,30 +33,20 @@ import { momentFormatter, tansformDateValue, handleDateChange, - compose, } from '@/utils'; import { useMoneyInDailogContext } from '../MoneyInDialogProvider'; import { - useObserveTransactionNoSettings, useSetPrimaryBranchToForm, useForeignAccount, BranchRowDivider, } from '../../MoneyInDialog/utils'; -import withSettings from '@/containers/Settings/withSettings'; -import withDialogActions from '@/containers/Dialog/withDialogActions'; + +import { MoneyInOutTransactionNoField } from '../../_components'; /** * Transfer from account form fields. */ -function TransferFromAccountFormFields({ - // #withDialogActions - openDialog, - - // #withSettings - transactionAutoIncrement, - transactionNumberPrefix, - transactionNextNumber, -}) { +export default function TransferFromAccountFormFields() { // Money in dialog context. const { accounts, account, branches } = useMoneyInDailogContext(); @@ -67,33 +55,9 @@ function TransferFromAccountFormFields({ const { values } = useFormikContext(); - // Handle tranaction number changing. - const handleTransactionNumberChange = () => { - openDialog('transaction-number-form'); - }; - - // Handle transaction no. field blur. - const handleTransactionNoBlur = (form, field) => (event) => { - const newValue = event.target.value; - - if (field.value !== newValue && transactionAutoIncrement) { - openDialog('transaction-number-form', { - initialFormValues: { - manualTransactionNo: newValue, - incrementMode: 'manual-transaction', - }, - }); - } - }; - // Sets the primary branch to form. useSetPrimaryBranchToForm(); - // Syncs transaction number settings with form. - useObserveTransactionNoSettings( - transactionNumberPrefix, - transactionNextNumber, - ); return ( @@ -145,42 +109,7 @@ function TransferFromAccountFormFields({ {/*------------ Transaction number -----------*/} - - {({ form, field, meta: { error, touched } }) => ( - } - intent={inputIntent({ error, touched })} - helperText={} - className={'form-group--transaction_number'} - > - - - , - }} - tooltip={true} - tooltipProps={{ - content: ( - - ), - position: Position.BOTTOM_LEFT, - }} - /> - - - )} - + {/*------------ amount -----------*/} @@ -296,12 +225,3 @@ function TransferFromAccountFormFields({ ); } - -export default compose( - withDialogActions, - withSettings(({ cashflowSetting }) => ({ - transactionAutoIncrement: cashflowSetting?.autoIncrement, - transactionNextNumber: cashflowSetting?.nextNumber, - transactionNumberPrefix: cashflowSetting?.numberPrefix, - })), -)(TransferFromAccountFormFields); diff --git a/packages/webapp/src/containers/Dialogs/MoneyInDialog/index.tsx b/packages/webapp/src/containers/CashFlow/MoneyInDialog/index.tsx similarity index 100% rename from packages/webapp/src/containers/Dialogs/MoneyInDialog/index.tsx rename to packages/webapp/src/containers/CashFlow/MoneyInDialog/index.tsx diff --git a/packages/webapp/src/containers/Dialogs/MoneyInDialog/utils.tsx b/packages/webapp/src/containers/CashFlow/MoneyInDialog/utils.tsx similarity index 100% rename from packages/webapp/src/containers/Dialogs/MoneyInDialog/utils.tsx rename to packages/webapp/src/containers/CashFlow/MoneyInDialog/utils.tsx diff --git a/packages/webapp/src/containers/Dialogs/MoneyOutDialog/MoneyOutContentFields.tsx b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutContentFields.tsx similarity index 99% rename from packages/webapp/src/containers/Dialogs/MoneyOutDialog/MoneyOutContentFields.tsx rename to packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutContentFields.tsx index 88f2b9769..5f0f18876 100644 --- a/packages/webapp/src/containers/Dialogs/MoneyOutDialog/MoneyOutContentFields.tsx +++ b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutContentFields.tsx @@ -20,7 +20,6 @@ function MoneyOutContentFields({ accountType }) { break; } }; - return {handleTransactionType()}; } diff --git a/packages/webapp/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogContent.tsx b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutDialogContent.tsx similarity index 100% rename from packages/webapp/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogContent.tsx rename to packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutDialogContent.tsx diff --git a/packages/webapp/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogProvider.tsx b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutDialogProvider.tsx similarity index 100% rename from packages/webapp/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogProvider.tsx rename to packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutDialogProvider.tsx diff --git a/packages/webapp/src/containers/Dialogs/MoneyOutDialog/MoneyOutFloatingActions.tsx b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutFloatingActions.tsx similarity index 100% rename from packages/webapp/src/containers/Dialogs/MoneyOutDialog/MoneyOutFloatingActions.tsx rename to packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutFloatingActions.tsx diff --git a/packages/webapp/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.schema.tsx b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutForm.schema.tsx similarity index 100% rename from packages/webapp/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.schema.tsx rename to packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutForm.schema.tsx diff --git a/packages/webapp/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.tsx b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutForm.tsx similarity index 100% rename from packages/webapp/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.tsx rename to packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutForm.tsx diff --git a/packages/webapp/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormContent.tsx b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutFormContent.tsx similarity index 65% rename from packages/webapp/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormContent.tsx rename to packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutFormContent.tsx index ba8414ca7..41eb1eb83 100644 --- a/packages/webapp/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormContent.tsx +++ b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutFormContent.tsx @@ -3,8 +3,10 @@ import React from 'react'; import { Form } from 'formik'; import MoneyOutFormFields from './MoneyOutFormFields'; -import MoneyOutFormDialog from './MoneyOutFormDialog' +import MoneyOutFormDialog from './MoneyOutFormDialog'; import MoneyOutFloatingActions from './MoneyOutFloatingActions'; +import { MoneyInOutSyncIncrementSettingsToForm } from '../_components'; + /** * Money out form content. */ @@ -12,8 +14,9 @@ export default function MoneyOutFormContent() { return (
- + + ); } diff --git a/packages/webapp/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormDialog.tsx b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutFormDialog.tsx similarity index 100% rename from packages/webapp/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormDialog.tsx rename to packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutFormDialog.tsx diff --git a/packages/webapp/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormFields.tsx b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutFormFields.tsx similarity index 100% rename from packages/webapp/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormFields.tsx rename to packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutFormFields.tsx diff --git a/packages/webapp/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.tsx b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.tsx similarity index 71% rename from packages/webapp/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.tsx rename to packages/webapp/src/containers/CashFlow/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.tsx index a828bcab4..bfbdf845c 100644 --- a/packages/webapp/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.tsx +++ b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.tsx @@ -16,11 +16,9 @@ import { InputPrependText, MoneyInputGroup, FieldRequiredHint, - Icon, Col, Row, If, - InputPrependButton, FeatureCan, BranchSelect, BranchSelectButton, @@ -35,31 +33,21 @@ import { momentFormatter, tansformDateValue, handleDateChange, - compose, } from '@/utils'; import { CLASSES } from '@/constants/classes'; import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider'; import { - useObserveTransactionNoSettings, useSetPrimaryBranchToForm, useForeignAccount, BranchRowDivider, } from '../utils'; -import withSettings from '@/containers/Settings/withSettings'; -import withDialogActions from '@/containers/Dialog/withDialogActions'; + +import { MoneyInOutTransactionNoField } from '../../_components'; /** * Other expense form fields. */ -function OtherExpnseFormFields({ - // #withDialogActions - openDialog, - - // #withSettings - transactionAutoIncrement, - transactionNumberPrefix, - transactionNextNumber, -}) { +export default function OtherExpnseFormFields() { // Money in dialog context. const { accounts, account, branches } = useMoneyOutDialogContext(); @@ -68,31 +56,6 @@ function OtherExpnseFormFields({ const amountFieldRef = useAutofocus(); - // Handle tranaction number changing. - const handleTransactionNumberChange = () => { - openDialog('transaction-number-form'); - }; - - // Handle transaction no. field blur. - const handleTransactionNoBlur = (form, field) => (event) => { - const newValue = event.target.value; - - if (field.value !== newValue && transactionAutoIncrement) { - openDialog('transaction-number-form', { - initialFormValues: { - manualTransactionNo: newValue, - incrementMode: 'manual-transaction', - }, - }); - } - }; - - // Syncs transaction number settings with form. - useObserveTransactionNoSettings( - transactionNumberPrefix, - transactionNextNumber, - ); - // Sets the primary branch to form. useSetPrimaryBranchToForm(); @@ -147,42 +110,7 @@ function OtherExpnseFormFields({ {/*------------ Transaction number -----------*/} - - {({ form, field, meta: { error, touched } }) => ( - } - intent={inputIntent({ error, touched })} - helperText={} - className={'form-group--transaction_number'} - > - - - , - }} - tooltip={true} - tooltipProps={{ - content: ( - - ), - position: Position.BOTTOM_LEFT, - }} - /> - - - )} - + {/*------------ amount -----------*/} @@ -296,12 +224,3 @@ function OtherExpnseFormFields({ ); } - -export default compose( - withDialogActions, - withSettings(({ cashflowSetting }) => ({ - transactionAutoIncrement: cashflowSetting?.autoIncrement, - transactionNextNumber: cashflowSetting?.nextNumber, - transactionNumberPrefix: cashflowSetting?.numberPrefix, - })), -)(OtherExpnseFormFields); diff --git a/packages/webapp/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.tsx b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.tsx similarity index 71% rename from packages/webapp/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.tsx rename to packages/webapp/src/containers/CashFlow/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.tsx index bbdd0c783..8630c5b03 100644 --- a/packages/webapp/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.tsx +++ b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.tsx @@ -17,8 +17,6 @@ import { InputPrependText, MoneyInputGroup, FieldRequiredHint, - InputPrependButton, - Icon, If, Col, Row, @@ -34,30 +32,19 @@ import { momentFormatter, tansformDateValue, handleDateChange, - compose, } from '@/utils'; import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider'; import { - useObserveTransactionNoSettings, useSetPrimaryBranchToForm, useForeignAccount, BranchRowDivider, } from '../../MoneyOutDialog/utils'; -import withSettings from '@/containers/Settings/withSettings'; -import withDialogActions from '@/containers/Dialog/withDialogActions'; +import { MoneyInOutTransactionNoField } from '../../_components'; /** * Owner drawings form fields. */ -function OwnerDrawingsFormFields({ - // #withDialogActions - openDialog, - - // #withSettings - transactionAutoIncrement, - transactionNumberPrefix, - transactionNextNumber, -}) { +export default function OwnerDrawingsFormFields() { // Money out dialog context. const { accounts, account, branches } = useMoneyOutDialogContext(); const { values } = useFormikContext(); @@ -65,31 +52,6 @@ function OwnerDrawingsFormFields({ const amountFieldRef = useAutofocus(); - // Handle tranaction number changing. - const handleTransactionNumberChange = () => { - openDialog('transaction-number-form'); - }; - - // Handle transaction no. field blur. - const handleTransactionNoBlur = (form, field) => (event) => { - const newValue = event.target.value; - - if (field.value !== newValue && transactionAutoIncrement) { - openDialog('transaction-number-form', { - initialFormValues: { - manualTransactionNo: newValue, - incrementMode: 'manual-transaction', - }, - }); - } - }; - - // Syncs transaction number settings with form. - useObserveTransactionNoSettings( - transactionNumberPrefix, - transactionNextNumber, - ); - // Sets the primary branch to form. useSetPrimaryBranchToForm(); @@ -144,42 +106,7 @@ function OwnerDrawingsFormFields({ {/*------------ Transaction number -----------*/} - - {({ form, field, meta: { error, touched } }) => ( - } - intent={inputIntent({ error, touched })} - helperText={} - className={'form-group--transaction_number'} - > - - - , - }} - tooltip={true} - tooltipProps={{ - content: ( - - ), - position: Position.BOTTOM_LEFT, - }} - /> - - - )} - + {/*------------ amount -----------*/} @@ -291,12 +218,3 @@ function OwnerDrawingsFormFields({ ); } - -export default compose( - withDialogActions, - withSettings(({ cashflowSetting }) => ({ - transactionAutoIncrement: cashflowSetting?.autoIncrement, - transactionNextNumber: cashflowSetting?.nextNumber, - transactionNumberPrefix: cashflowSetting?.numberPrefix, - })), -)(OwnerDrawingsFormFields); diff --git a/packages/webapp/src/containers/Dialogs/MoneyOutDialog/TransactionTypeFields.tsx b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/TransactionTypeFields.tsx similarity index 100% rename from packages/webapp/src/containers/Dialogs/MoneyOutDialog/TransactionTypeFields.tsx rename to packages/webapp/src/containers/CashFlow/MoneyOutDialog/TransactionTypeFields.tsx diff --git a/packages/webapp/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.tsx b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.tsx similarity index 73% rename from packages/webapp/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.tsx rename to packages/webapp/src/containers/CashFlow/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.tsx index 164920439..ff8a986e8 100644 --- a/packages/webapp/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.tsx +++ b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.tsx @@ -48,19 +48,12 @@ import { } from '../utils'; import withSettings from '@/containers/Settings/withSettings'; import withDialogActions from '@/containers/Dialog/withDialogActions'; +import { MoneyInOutTransactionNoField } from '../../_components'; /** * Transfer to account form fields. */ -function TransferToAccountFormFields({ - // #withDialogActions - openDialog, - - // #withSettings - transactionAutoIncrement, - transactionNumberPrefix, - transactionNextNumber, -}) { +export default function TransferToAccountFormFields() { // Money in dialog context. const { accounts, account, branches } = useMoneyOutDialogContext(); const { values } = useFormikContext(); @@ -68,31 +61,6 @@ function TransferToAccountFormFields({ const accountRef = useAutofocus(); - // Handle tranaction number changing. - const handleTransactionNumberChange = () => { - openDialog('transaction-number-form'); - }; - - // Handle transaction no. field blur. - const handleTransactionNoBlur = (form, field) => (event) => { - const newValue = event.target.value; - - if (field.value !== newValue && transactionAutoIncrement) { - openDialog('transaction-number-form', { - initialFormValues: { - manualTransactionNo: newValue, - incrementMode: 'manual-transaction', - }, - }); - } - }; - - // Syncs transaction number settings with form. - useObserveTransactionNoSettings( - transactionNumberPrefix, - transactionNextNumber, - ); - // Sets the primary branch to form. useSetPrimaryBranchToForm(); @@ -147,42 +115,7 @@ function TransferToAccountFormFields({ {/*------------ Transaction number -----------*/} - - {({ form, field, meta: { error, touched } }) => ( - } - intent={inputIntent({ error, touched })} - helperText={} - className={'form-group--transaction_number'} - > - - - , - }} - tooltip={true} - tooltipProps={{ - content: ( - - ), - position: Position.BOTTOM_LEFT, - }} - /> - - - )} - + {/*------------ amount -----------*/} @@ -298,11 +231,3 @@ function TransferToAccountFormFields({ ); } -export default compose( - withDialogActions, - withSettings(({ cashflowSetting }) => ({ - transactionAutoIncrement: cashflowSetting?.autoIncrement, - transactionNextNumber: cashflowSetting?.nextNumber, - transactionNumberPrefix: cashflowSetting?.numberPrefix, - })), -)(TransferToAccountFormFields); diff --git a/packages/webapp/src/containers/Dialogs/MoneyOutDialog/index.tsx b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/index.tsx similarity index 100% rename from packages/webapp/src/containers/Dialogs/MoneyOutDialog/index.tsx rename to packages/webapp/src/containers/CashFlow/MoneyOutDialog/index.tsx diff --git a/packages/webapp/src/containers/Dialogs/MoneyOutDialog/utils.tsx b/packages/webapp/src/containers/CashFlow/MoneyOutDialog/utils.tsx similarity index 100% rename from packages/webapp/src/containers/Dialogs/MoneyOutDialog/utils.tsx rename to packages/webapp/src/containers/CashFlow/MoneyOutDialog/utils.tsx diff --git a/packages/webapp/src/containers/CashFlow/_components.tsx b/packages/webapp/src/containers/CashFlow/_components.tsx new file mode 100644 index 000000000..4b9e7ca86 --- /dev/null +++ b/packages/webapp/src/containers/CashFlow/_components.tsx @@ -0,0 +1,127 @@ +// @ts-nocheck +import React from 'react'; +import { useFormikContext } from 'formik'; +import { InputGroup, Position, ControlGroup } from '@blueprintjs/core'; +import * as R from 'ramda'; + +import { + FFormGroup, + Icon, + InputPrependButton, + FormattedMessage as T, +} from '@/components'; +import { useUpdateEffect } from '@/hooks'; + +import withSettings from '@/containers/Settings/withSettings'; +import withDialogActions from '@/containers/Dialog/withDialogActions'; + +/** + * Syncs cashflow auto-increment settings to the form once update. + */ +export const MoneyInOutSyncIncrementSettingsToForm = R.compose( + withDialogActions, + withSettings(({ cashflowSetting }) => ({ + transactionAutoIncrement: cashflowSetting?.autoIncrement, + transactionNextNumber: cashflowSetting?.nextNumber, + transactionNumberPrefix: cashflowSetting?.numberPrefix, + })), +)( + ({ + // #withSettings + transactionAutoIncrement, + transactionNextNumber, + transactionNumberPrefix, + }) => { + const { setFieldValue } = useFormikContext(); + + useUpdateEffect(() => { + // Do not update if the invoice auto-increment is disabled. + if (!transactionAutoIncrement) return null; + + const transactionNumber = transactionNumber( + transactionNumberPrefix, + transactionNextNumber, + ); + setFieldValue('transaction_number', transactionNumber); + }, [setFieldValue, transactionNumberPrefix, transactionNextNumber]); + + return null; + }, +); + +/** + * Money In/Out transaction number field. + */ +export const MoneyInOutTransactionNoField = R.compose( + withDialogActions, + withSettings(({ cashflowSetting }) => ({ + transactionAutoIncrement: cashflowSetting?.autoIncrement, + transactionNextNumber: cashflowSetting?.nextNumber, + transactionNumberPrefix: cashflowSetting?.numberPrefix, + })), +)( + ({ + // #withDialogActions + openDialog, + + // #withSettings + transactionAutoIncrement, + }) => { + const { values, setFieldValue } = useFormikContext(); + + // Handle tranaction number changing. + const handleTransactionNumberChange = () => { + openDialog('transaction-number-form'); + }; + // Handle transaction no. field blur. + const handleTransactionNoBlur = (event) => { + const newValue = event.target.value; + + if (values.transaction_number !== newValue && transactionAutoIncrement) { + openDialog('transaction-number-form', { + initialFormValues: { + onceManualNumber: newValue, + incrementMode: 'manual-transaction', + }, + }); + } + if (!transactionAutoIncrement) { + setFieldValue('transaction_number', values.transaction_number); + setFieldValue('transaction_number_manually', values.transaction_number); + } + }; + + return ( + } + > + + + , + }} + tooltip={true} + tooltipProps={{ + content: ( + + ), + position: Position.BOTTOM_LEFT, + }} + /> + + + ); + }, +); diff --git a/packages/webapp/src/containers/Dialog/withDialogActions.tsx b/packages/webapp/src/containers/Dialog/withDialogActions.tsx index 92017cddc..93f0f0737 100644 --- a/packages/webapp/src/containers/Dialog/withDialogActions.tsx +++ b/packages/webapp/src/containers/Dialog/withDialogActions.tsx @@ -7,8 +7,10 @@ export const mapStateToProps = (state, props) => { }; export const mapDispatchToProps = (dispatch) => ({ - openDialog: (name, payload) => dispatch({ type: t.OPEN_DIALOG, name, payload }), - closeDialog: (name, payload) => dispatch({ type: t.CLOSE_DIALOG, name, payload }), + openDialog: (name, payload) => + dispatch({ type: t.OPEN_DIALOG, name, payload }), + closeDialog: (name, payload) => + dispatch({ type: t.CLOSE_DIALOG, name, payload }), }); -export default connect(null, mapDispatchToProps); \ No newline at end of file +export default connect(null, mapDispatchToProps); 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/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 ( ({ - ...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 c89d198fd..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,8 +14,8 @@ export const defaultInvoiceNoSettings = { }; export const transformSettingsToForm = (settings) => ({ - ...settings, - incrementMode: settings.autoIncrement === 'true' ? 'auto' : 'manual', + ...omit(settings, ['autoIncrement']), + incrementMode: settings.autoIncrement ? 'auto' : 'manual', }); export const transformFormToSettings = (values, group) => { @@ -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/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..ec8467061 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. @@ -105,7 +106,7 @@ function CreditNoteForm({ open: submitPayload.open, }; // Handle the request success. - const onSuccess = (response) => { + const onSuccess = () => { AppToaster.show({ message: intl.get( isNewMode @@ -161,7 +162,12 @@ function CreditNoteForm({ + + {/*-------- Dialogs --------*/} + + {/*-------- Effects --------*/} + diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormDialogs.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormDialogs.tsx index ea2ca3952..b519242b7 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormDialogs.tsx +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormDialogs.tsx @@ -1,25 +1,30 @@ // @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) => { + // Set the credit note transaction no. that cames from dialog to the form. + // the `credit_note_number` will be empty except the increment mode is not auto. + setFieldValue('credit_note_number', settings.transactionNumber); + setFieldValue('credit_note_number_manually', ''); + + if (settings.incrementMode !== 'auto') { + setFieldValue('credit_note_number_manually', settings.transactionNumber); + } }; - const { setFieldValue } = useFormikContext(); return ( - - - + ); } 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..fac113606 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, ErrorMessage, useFormikContext } from 'formik'; + import { CLASSES } from '@/constants/classes'; import { CustomerSelectField, @@ -18,11 +20,10 @@ import { Icon, FormattedMessage as T, CustomerDrawerLink, + FFormGroup, + FInputGroup, } from '@/components'; -import { - customerNameFieldShouldUpdate, - useObserveCreditNoSettings, -} from './utils'; +import { customerNameFieldShouldUpdate } from './utils'; import { useCreditNoteFormContext } from './CreditNoteFormProvider'; import withSettings from '@/containers/Settings/withSettings'; @@ -30,49 +31,99 @@ 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 note no. field blur. + const handleCreditNoBlur = (event) => { + const newValue = event.target.value; + + // Show the confirmation dialog if the value has changed and auto-increment + // mode is enabled. + if (values.credit_note_no !== newValue && creditAutoIncrement) { + openDialog('credit-number-form', { + initialFormValues: { + onceManualNumber: newValue, + incrementMode: 'manual-transaction', + }, + }); + } + // Setting the credit note number to the form will be manually in case + // auto-increment is disable. + 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, - creditNumberPrefix, - creditNextNumber, -}) { +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', - }, - }); - } - }; - - // Syncs credit number settings with form. - useObserveCreditNoSettings(creditNumberPrefix, creditNextNumber); - return (
{/* ----------- Customer name ----------- */} @@ -119,7 +170,6 @@ function CreditNoteFormHeaderFields({ name={'exchange_rate'} formGroupProps={{ label: ' ', inline: true }} /> - {/* ----------- Credit note date ----------- */} {({ form, field: { value }, meta: { error, touched } }) => ( @@ -146,43 +196,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 } }) => ( @@ -200,14 +215,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/CreditNotes/CreditNoteForm/components.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/components.tsx index 44a82782f..2902299fa 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,30 @@ 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(() => { + // Do not update if the credit note auto-increment mode is disabled. + if (!creditAutoIncrement) return; + + setFieldValue( + 'credit_note_number', + transactionNumber(creditNumberPrefix, creditNextNumber), + ); + }, [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..11ffb118d 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/utils.tsx +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/utils.tsx @@ -40,7 +40,8 @@ export const defaultCreditNote = { customer_id: '', credit_note_date: moment(new Date()).format('YYYY-MM-DD'), credit_note_number: '', - credit_note_no_manually: false, + // Holds the credit note number that entered manually only. + credit_note_number_manually: false, open: '', reference_no: '', note: '', @@ -130,18 +131,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..a4db1cfff 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateForm.tsx @@ -19,6 +19,7 @@ import EstimateFloatingActions from './EstimateFloatingActions'; import EstimateFormFooter from './EstimateFormFooter'; import EstimateFormDialogs from './EstimateFormDialogs'; import EstimtaeFormTopBar from './EstimtaeFormTopBar'; +import { EstimateIncrementSyncSettingsToForm } from './components'; import withSettings from '@/containers/Settings/withSettings'; import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization'; @@ -31,6 +32,7 @@ import { defaultEstimate, transfromsFormValuesToRequest, handleErrors, + resetFormState, } from './utils'; /** @@ -40,7 +42,7 @@ function EstimateForm({ // #withSettings estimateNextNumber, estimateNumberPrefix, - estimateIncrementMode, + estimateAutoIncrementMode, // #withCurrentOrganization organization: { base_currency }, @@ -66,14 +68,16 @@ function EstimateForm({ ? { ...transformToEditForm(estimate) } : { ...defaultEstimate, - ...(estimateIncrementMode && { + // If the auto-increment mode is enabled, take the next estimate + // number from the settings. + ...(estimateAutoIncrementMode && { estimate_number: estimateNumber, }), entries: orderingLinesIndexes(defaultEstimate.entries), currency_code: base_currency, }), }), - [estimate, estimateNumber, estimateIncrementMode, base_currency], + [estimate, estimateNumber, estimateAutoIncrementMode, base_currency], ); // Handles form submit. @@ -118,7 +122,7 @@ function EstimateForm({ history.push('/estimates'); } if (submitPayload.resetForm) { - resetForm(); + resetFormState({ resetForm, initialValues, values }); } }; // Handle the request error. @@ -161,7 +165,11 @@ function EstimateForm({ + {/*------- Dialogs -------*/} + + {/*------- Effects -------*/} + @@ -172,7 +180,7 @@ export default compose( withSettings(({ estimatesSettings }) => ({ estimateNextNumber: estimatesSettings?.nextNumber, estimateNumberPrefix: estimatesSettings?.numberPrefix, - estimateIncrementMode: estimatesSettings?.autoIncrement, + estimateAutoIncrementMode: estimatesSettings?.autoIncrement, })), withCurrentOrganization(), )(EstimateForm); diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormDialogs.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormDialogs.tsx index b9f187896..aa1c165a1 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormDialogs.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormDialogs.tsx @@ -9,10 +9,14 @@ import EstimateNumberDialog from '@/containers/Dialogs/EstimateNumberDialog'; 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); + // Update the form once the estimate number form submit confirm. + const handleEstimateNumberFormConfirm = (settings) => { + setFieldValue('estimate_number', settings.transactionNumber); + setFieldValue('estimate_number_manually', ''); + + if (settings.incrementMode !== 'auto') { + setFieldValue('estimate_number_manually', settings.transactionNumber); + } }; return ( 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..70444babc 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx @@ -1,5 +1,6 @@ // @ts-nocheck import React from 'react'; +import * as R from 'ramda'; import styled from 'styled-components'; import classNames from 'classnames'; import { @@ -10,12 +11,21 @@ import { ControlGroup, } from '@blueprintjs/core'; import { DateInput } from '@blueprintjs/datetime'; -import { FeatureCan, FFormGroup, FormattedMessage as T } from '@/components'; -import { FastField, Field, ErrorMessage } from 'formik'; +import { FastField, ErrorMessage, useFormikContext } from 'formik'; +import { + FeatureCan, + FFormGroup, + FInputGroup, + FormattedMessage as T, + CustomerSelectField, + FieldRequiredHint, + Icon, + InputPrependButton, + CustomerDrawerLink, +} from '@/components'; import { momentFormatter, - compose, tansformDateValue, inputIntent, handleDateChange, @@ -23,57 +33,99 @@ import { import { customersFieldShouldUpdate } from './utils'; import { CLASSES } from '@/constants/classes'; import { Features } from '@/constants'; -import { - CustomerSelectField, - FieldRequiredHint, - Icon, - InputPrependButton, - CustomerDrawerLink, -} from '@/components'; import withDialogActions from '@/containers/Dialog/withDialogActions'; import withSettings from '@/containers/Settings/withSettings'; + import { ProjectsSelect } from '@/containers/Projects/components'; import { EstimateExchangeRateInputField, EstimateProjectSelectButton, } from './components'; - -import { useObserveEstimateNoSettings } from './utils'; import { useEstimateFormContext } from './EstimateFormProvider'; +/** + * Estimate number field of estimate form. + */ +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', {}); + }; + // Handle estimate no. field blur. + const handleEstimateNoBlur = (event) => { + const newValue = event.target.value; + + // Show the confirmation dialog if the value has changed and auto-increment + // mode is enabled. + if (values.estimate_number !== newValue && estimateAutoIncrement) { + openDialog('estimate-number-form', { + initialFormValues: { + onceManualNumber: newValue, + incrementMode: 'manual-transaction', + }, + }); + } + // Setting the estimate number to the form will be manually in case + // auto-increment is disable. + 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', - }, - }); - } - }; - // Syncs estimate number settings with the form. - useObserveEstimateNoSettings(estimateNumberPrefix, estimateNextNumber); - return (
{/* ----------- Customer name ----------- */} @@ -113,13 +165,12 @@ function EstimateFormHeader({ )} - {/* ----------- Exchange rate ----------- */} + {/* ----------- Exchange Rate ----------- */} - - {/* ----------- Estimate date ----------- */} + {/* ----------- Estimate Date ----------- */} {({ form, field: { value }, meta: { error, touched } }) => ( {/* ----------- 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 ----------- */} @@ -246,15 +264,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/Estimates/EstimateForm/components.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/components.tsx index aacee47f6..65a1c9cd2 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/components.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/components.tsx @@ -1,18 +1,21 @@ // @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'; +import { useUpdateEffect } from '@/hooks'; /** * Estimate exchange rate input field. * @returns {JSX.Element} */ - export function EstimateExchangeRateInputField({ ...props }) { +export function EstimateExchangeRateInputField({ ...props }) { const currentOrganization = useCurrentOrganization(); const { values } = useFormikContext(); @@ -35,6 +38,37 @@ import { useEstimateIsForeignCustomer } from './utils'; * Estimate project select. * @returns {JSX.Element} */ - export function EstimateProjectSelectButton({ label }) { +export function EstimateProjectSelectButton({ label }) { return
@@ -184,7 +186,7 @@ export default compose( withSettings(({ invoiceSettings }) => ({ invoiceNextNumber: invoiceSettings?.nextNumber, invoiceNumberPrefix: invoiceSettings?.numberPrefix, - invoiceIncrementMode: invoiceSettings?.autoIncrement, + invoiceAutoIncrementMode: invoiceSettings?.autoIncrement, })), withCurrentOrganization(), )(InvoiceForm); diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.tsx index 54319f0d7..eb0e3e0ba 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.tsx @@ -1,7 +1,8 @@ // @ts-nocheck import React from 'react'; -import InvoiceNumberDialog from '@/containers/Dialogs/InvoiceNumberDialog'; import { useFormikContext } from 'formik'; +import InvoiceNumberDialog from '@/containers/Dialogs/InvoiceNumberDialog'; +import { DialogsName } from '@/constants/dialogs'; /** * Invoice form dialogs. @@ -10,17 +11,21 @@ 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) => { + // Set the invoice transaction no. that cames from dialog to the form. + // the `invoice_no_manually` will be empty except the increment mode is not auto. + setFieldValue('invoice_no', settings.transactionNumber); + setFieldValue('invoice_no_manually', ''); + + if (settings.incrementMode !== 'auto') { + setFieldValue('invoice_no_manually', settings.transactionNumber); + } }; return ( - <> - - + ); } diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx index f9927c53e..82f57a266 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.tsx @@ -14,6 +14,19 @@ import { useInvoiceTotal } from './utils'; * Invoice form header section. */ function InvoiceFormHeader() { + return ( +
+ + +
+ ); +} + +/** + * Big total of invoice form header. + * @returns {React.ReactNode} + */ +function InvoiceFormBigTotal() { const { values: { currency_code }, } = useFormikContext(); @@ -22,14 +35,11 @@ function InvoiceFormHeader() { const totalDueAmount = useInvoiceTotal(); return ( -
- - -
+ ); } export default InvoiceFormHeader; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx index efcaf08a2..1fd9b5317 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx @@ -10,7 +10,8 @@ import { ControlGroup, } from '@blueprintjs/core'; import { DateInput } from '@blueprintjs/datetime'; -import { FastField, Field, ErrorMessage, useFormikContext } from 'formik'; +import { FastField, ErrorMessage, useFormikContext } from 'formik'; +import * as R from 'ramda'; import { FFormGroup, @@ -23,14 +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 { - useObserveInvoiceNoSettings, - customerNameFieldShouldUpdate, -} from './utils'; + momentFormatter, + tansformDateValue, + inputIntent, + handleDateChange, +} from '@/utils'; +import { CLASSES } from '@/constants/classes'; +import { customerNameFieldShouldUpdate } from './utils'; import { useInvoiceFormContext } from './InvoiceFormProvider'; import { @@ -42,48 +45,98 @@ 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'; +/** + * 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; + + // Show the confirmation dialog if the value has changed and auto-increment + // mode is enabled. + if (values.invoice_no !== newValue && invoiceAutoIncrement) { + openDialog(DialogsName.InvoiceNumberSettings, { + initialFormValues: { + onceManualNumber: newValue, + incrementMode: 'manual-transaction', + }, + }); + } + // Setting the invoice number to the form will be manually in case + // auto-increment is disable. + 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, + }} + /> + + + ); + }, +); +InvoiceFormInvoiceNumberField.displayName = 'InvoiceFormInvoiceNumberField'; + /** * Invoice form header fields. */ -function InvoiceFormHeaderFields({ - // #withDialogActions - openDialog, - - // #withSettings - invoiceAutoIncrement, - invoiceNumberPrefix, - invoiceNextNumber, -}) { +export default function InvoiceFormHeaderFields() { // Invoice form context. const { customers, projects } = useInvoiceFormContext(); - - // Formik context. const { values } = useFormikContext(); - // Handle invoice number changing. - const handleInvoiceNumberChange = () => { - openDialog('invoice-number-form'); - }; - // Handle invoice no. field blur. - const handleInvoiceNoBlur = (form, field) => (event) => { - const newValue = event.target.value; - - if (field.value !== newValue && invoiceAutoIncrement) { - openDialog('invoice-number-form', { - initialFormValues: { - manualTransactionNo: newValue, - incrementMode: 'manual-transaction', - }, - }); - } - }; - // Syncs invoice number settings with form. - useObserveInvoiceNoSettings(invoiceNumberPrefix, invoiceNextNumber); - return (
{/* ----------- Customer name ----------- */} @@ -189,40 +242,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 ----------- */} @@ -264,15 +284,6 @@ function InvoiceFormHeaderFields({ ); } -export default compose( - withDialogActions, - withSettings(({ invoiceSettings }) => ({ - invoiceAutoIncrement: invoiceSettings?.autoIncrement, - invoiceNextNumber: invoiceSettings?.nextNumber, - invoiceNumberPrefix: invoiceSettings?.numberPrefix, - })), -)(InvoiceFormHeaderFields); - const CustomerButtonLink = styled(CustomerDrawerLink)` font-size: 11px; margin-top: 6px; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/components.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/components.tsx index b69032b71..0020a7e8d 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,28 @@ export function InvoiceExchangeRateInputField({ ...props }) { export function InvoiceProjectSelectButton({ label }) { return
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormDialogs.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormDialogs.tsx index d378f878d..4fe2cb947 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormDialogs.tsx +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormDialogs.tsx @@ -10,9 +10,15 @@ 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) => { + // Set the receipt transaction no. that cames from dialog to the form. + // the `receipt_no_manually` will be empty except the increment mode is not auto. + setFieldValue('receipt_number', settings.transactionNumber); + setFieldValue('receipt_number_manually', ''); + + if (settings.incrementMode !== 'auto') { + setFieldValue('receipt_number_manually', settings.transactionNumber); + } }; 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..ff62e984a 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx @@ -10,9 +10,12 @@ 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 { ACCOUNT_TYPE } from '@/constants/accountTypes'; +import { Features } from '@/constants'; import { FFormGroup, AccountsSelect, @@ -23,64 +26,112 @@ import { CustomerDrawerLink, FormattedMessage as T, FeatureCan, + FInputGroup, } 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, - useObserveReceiptNoSettings, -} 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'; + +/** + * Receipt number field of receipt form. + */ +const ReceiptFormReceiptNumberField = R.compose( + withDialogActions, + withSettings(({ receiptSettings }) => ({ + receiptAutoIncrement: receiptSettings?.autoIncrement, + })), +)( + ({ + // #withDialogActions + openDialog, + + // #withSettings + receiptAutoIncrement, + }) => { + const { values, setFieldValue } = useFormikContext(); + + const handleReceiptNumberChange = () => { + openDialog('receipt-number-form', {}); + }; + + const handleReceiptNoBlur = (event) => { + const newValue = event.target.value; + + // Show the confirmation dialog if the value has changed and auto-increment + // mode is enabled. + if (values.receipt_number !== newValue && receiptAutoIncrement) { + openDialog('receipt-number-form', { + initialFormValues: { + onceManualNumber: newValue, + incrementMode: 'manual-transaction', + }, + }); + } + // Setting the receipt number to the form will be manually in case + // auto-increment is disable. + 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, - receiptNextNumber, - receiptNumberPrefix, -}) { +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', - }, - }); - } - }; - - // Synsc receipt number settings with the form. - useObserveReceiptNoSettings(receiptNumberPrefix, receiptNextNumber); - return (
{/* ----------- Customer name ----------- */} @@ -176,45 +227,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 ----------- */} @@ -251,15 +264,6 @@ function ReceiptFormHeader({ ); } -export default compose( - withDialogActions, - withSettings(({ receiptSettings }) => ({ - receiptAutoIncrement: receiptSettings?.autoIncrement, - receiptNextNumber: receiptSettings?.nextNumber, - receiptNumberPrefix: receiptSettings?.numberPrefix, - })), -)(ReceiptFormHeader); - const CustomerButtonLink = styled(CustomerDrawerLink)` font-size: 11px; margin-top: 6px; diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/components.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/components.tsx index 417daea29..937a4f937 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,34 @@ export function ReceiptExchangeRateInputField({ ...props }) { export function ReceiptProjectSelectButton({ label }) { return