diff --git a/client/src/components/DialogsContainer.js b/client/src/components/DialogsContainer.js index 9f8b32926..36ab35432 100644 --- a/client/src/components/DialogsContainer.js +++ b/client/src/components/DialogsContainer.js @@ -19,7 +19,7 @@ export default function DialogsContainer() { {/* */} - + diff --git a/client/src/containers/Dialogs/PaymentNumberDialog/PaymentNumberDialogContent.js b/client/src/containers/Dialogs/PaymentReceiveNumberDialog/PaymentReceiveNumberDialogContent.js similarity index 64% rename from client/src/containers/Dialogs/PaymentNumberDialog/PaymentNumberDialogContent.js rename to client/src/containers/Dialogs/PaymentReceiveNumberDialog/PaymentReceiveNumberDialogContent.js index d03ec476d..302b08cad 100644 --- a/client/src/containers/Dialogs/PaymentNumberDialog/PaymentNumberDialogContent.js +++ b/client/src/containers/Dialogs/PaymentReceiveNumberDialog/PaymentReceiveNumberDialogContent.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useCallback } from 'react'; import { DialogContent } from 'components'; import { useQuery, queryCache } from 'react-query'; @@ -7,12 +7,12 @@ import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm'; import withDialogActions from 'containers/Dialog/withDialogActions'; import withSettingsActions from 'containers/Settings/withSettingsActions'; import withSettings from 'containers/Settings/withSettings'; -import withPaymentMadeActions from 'containers/Purchases/PaymentMades/withPaymentMadeActions'; +import withPaymentReceivesActions from 'containers/Sales/PaymentReceive/withPaymentReceivesActions'; import { compose, optionsMapToArray } from 'utils'; /** - * payment number dialog's content. + * payment receive number dialog's content. */ function PaymentNumberDialogContent({ @@ -26,37 +26,39 @@ function PaymentNumberDialogContent({ // #withDialogActions closeDialog, - // #withPaymentMadeActions - setPaymentNumberChange, + + // #withPaymentReceivesActions + setPaymentReceiveNumberChanged, }) { const fetchSettings = useQuery(['settings'], () => requestFetchOptions({})); const handleSubmitForm = (values, { setSubmitting }) => { const options = optionsMapToArray(values).map((option) => { - return { key: option.key, ...option, group: 'bill_payments' }; + return { key: option.key, ...option, group: 'payment_receives' }; }); requestSubmitOptions({ options }) .then(() => { setSubmitting(false); - closeDialog('payment-number-form'); - setPaymentNumberChange(true); + closeDialog('payment-receive-number-form'); setTimeout(() => { queryCache.invalidateQueries('settings'); + setPaymentReceiveNumberChanged(true); }, 250); }) .catch(() => { setSubmitting(false); }); }; - const handleClose = () => { - closeDialog('payment-number-form'); - }; + + const handleClose = useCallback(() => { + closeDialog('payment-receive-number-form'); + }, [closeDialog]); + + return ( - + ({ - nextNumber: billPaymentSettings?.next_number, - numberPrefix: billPaymentSettings?.number_prefix, + withSettings(({ paymentReceiveSettings }) => ({ + nextNumber: paymentReceiveSettings?.nextNumber, + numberPrefix: paymentReceiveSettings?.numberPrefix, })), - withPaymentMadeActions, + withPaymentReceivesActions, )(PaymentNumberDialogContent); diff --git a/client/src/containers/Dialogs/PaymentNumberDialog/index.js b/client/src/containers/Dialogs/PaymentReceiveNumberDialog/index.js similarity index 56% rename from client/src/containers/Dialogs/PaymentNumberDialog/index.js rename to client/src/containers/Dialogs/PaymentReceiveNumberDialog/index.js index b99d1d0a9..e0b495365 100644 --- a/client/src/containers/Dialogs/PaymentNumberDialog/index.js +++ b/client/src/containers/Dialogs/PaymentReceiveNumberDialog/index.js @@ -4,25 +4,30 @@ import { Dialog, DialogSuspense } from 'components'; import withDialogRedux from 'components/DialogReduxConnect'; import { compose } from 'utils'; -const PaymentNumbereDialogConetnet = lazy(() => - import('./PaymentNumberDialogContent'), +const PaymentReceiveNumbereDialogConetnet = lazy(() => + import('./PaymentReceiveNumberDialogContent'), ); -function PaymentNumberDialog({ dialogName, payload = { id: null }, isOpen }) { +function PaymentReceiveNumberDialog({ + dialogName, + payload = { id: null }, + isOpen, +}) { return ( } + name={dialogName} autoFocus={true} canEscapeKeyClose={true} isOpen={isOpen} > - + ); } -export default compose(withDialogRedux())(PaymentNumberDialog); +export default compose(withDialogRedux())(PaymentReceiveNumberDialog); diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js index e59270b82..725ad442f 100644 --- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js +++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js @@ -23,30 +23,16 @@ import PaymentReceiveFormFooter from './PaymentReceiveFormFooter'; import withMediaActions from 'containers/Media/withMediaActions'; import withPaymentReceivesActions from './withPaymentReceivesActions'; import withPaymentReceiveDetail from './withPaymentReceiveDetail'; +import withPaymentReceives from './withPaymentReceives'; +import withSettings from 'containers/Settings/withSettings'; +import withDashboardActions from 'containers/Dashboard/withDashboardActions'; import { AppToaster } from 'components'; import { compose } from 'utils'; -// Default payment receive entry. -const defaultPaymentReceiveEntry = { - id: null, - payment_amount: null, - invoice_id: null, - due_amount: null, -}; - -// Form initial values. -const defaultInitialValues = { - customer_id: '', - deposit_account_id: '', - payment_date: moment(new Date()).format('YYYY-MM-DD'), - reference_no: '', - payment_receive_no: '', - description: '', - full_amount: '', - entries: [], -}; - +/** + * Payment Receive form. + */ function PaymentReceiveForm({ // #ownProps paymentReceiveId, @@ -55,10 +41,22 @@ function PaymentReceiveForm({ //#WithPaymentReceiveActions requestSubmitPaymentReceive, requestEditPaymentReceive, + setPaymentReceiveNumberChanged, // #withPaymentReceiveDetail paymentReceive, paymentReceiveEntries, + + // #withSettings + paymentReceiveNextNumber, + paymentReceiveNumberPrefix, + + // #withPaymentReceives + paymentReceiveNumberChanged, + + // #withDashboardAction + changePageTitle, + changePageSubtitle, }) { const [amountChangeAlert, setAmountChangeAlert] = useState(false); const [clearLinesAlert, setClearLinesAlert] = useState(false); @@ -71,6 +69,26 @@ function PaymentReceiveForm({ paymentReceiveEntries, ); + const paymentReceiveNumber = paymentReceiveNumberPrefix + ? `${paymentReceiveNumberPrefix}-${paymentReceiveNextNumber}` + : paymentReceiveNextNumber; + + useEffect(() => { + if (paymentReceive && paymentReceiveId) { + changePageTitle(formatMessage({ id: 'edit_payment_receive' })); + changePageSubtitle(`No. ${paymentReceive.payment_receive_no}`); + } else { + changePageSubtitle(`No. ${paymentReceiveNumber}`); + changePageTitle(formatMessage({ id: 'payment_receive' })); + } + }, [ + changePageTitle, + changePageSubtitle, + paymentReceive, + paymentReceiveId, + formatMessage, + ]); + useEffect(() => { if (localPaymentEntries !== paymentReceiveEntries) { setLocalPaymentEntries(paymentReceiveEntries); @@ -89,7 +107,7 @@ function PaymentReceiveForm({ .required() .label(formatMessage({ id: 'deposit_account_' })), full_amount: Yup.number().nullable(), - payment_receive_no: Yup.number().label( + payment_receive_no: Yup.string().label( formatMessage({ id: 'payment_receive_no_' }), ), reference_no: Yup.string().min(1).max(255).nullable(), @@ -109,6 +127,26 @@ function PaymentReceiveForm({ ), }); + // Default payment receive entry. + const defaultPaymentReceiveEntry = { + id: null, + payment_amount: null, + invoice_id: null, + due_amount: null, + }; + + // Form initial values. + const defaultInitialValues = { + customer_id: '', + deposit_account_id: '', + payment_date: moment(new Date()).format('YYYY-MM-DD'), + reference_no: '', + payment_receive_no: paymentReceiveNumber, + description: '', + full_amount: '', + entries: [], + }; + // Form initial values. const initialValues = useMemo( () => ({ @@ -303,6 +341,27 @@ function PaymentReceiveForm({ [values.entries], ); + useEffect(() => { + if (paymentReceiveNumberChanged) { + setFieldValue('payment_receive_no', paymentReceiveNumber); + changePageSubtitle(`No. ${paymentReceiveNumber}`); + setPaymentReceiveNumberChanged(false); + } + }, [ + paymentReceiveNumber, + paymentReceiveNumberChanged, + setFieldValue, + changePageSubtitle, + ]); + + + const handlePaymentReceiveNumberChanged = useCallback( + (payment_receive_no) => { + changePageSubtitle(`No.${payment_receive_no}`); + }, + [changePageSubtitle], + ); + return (
({ - // paymentReceivesItems, - // })), withPaymentReceiveDetail(({ paymentReceive, paymentReceiveEntries }) => ({ paymentReceive, paymentReceiveEntries, })), + withSettings(({ paymentReceiveSettings }) => ({ + paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber, + paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix, + })), + withPaymentReceives(({ paymentReceiveNumberChanged }) => ({ + paymentReceiveNumberChanged, + })), )(PaymentReceiveForm); diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js index 23d985f73..79766ff04 100644 --- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js +++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js @@ -13,18 +13,21 @@ import moment from 'moment'; import classNames from 'classnames'; import { CLASSES } from 'common/classes'; -import { momentFormatter, compose, tansformDateValue } from 'utils'; +import { momentFormatter, compose, tansformDateValue, saveInvoke } from 'utils'; import { AccountsSelectList, ContactSelecetList, ErrorMessage, FieldRequiredHint, + Icon, + InputPrependButton, Hint, Money, } from 'components'; import withCustomers from 'containers/Customers/withCustomers'; import withAccounts from 'containers/Accounts/withAccounts'; +import withDialogActions from 'containers/Dialog/withDialogActions'; function PaymentReceiveFormHeader({ // #useFormik @@ -46,6 +49,11 @@ function PaymentReceiveFormHeader({ // #withInvoices receivableInvoices, + // #ownProps + onPaymentReceiveNumberChanged, + + //#withDialogActions + openDialog, }) { const handleDateChange = useCallback( (date_filed) => (date) => { @@ -78,6 +86,14 @@ function PaymentReceiveFormHeader({ triggerFullAmountChanged(receivableFullAmount); }; + const handlePaymentReceiveNumberChange = useCallback(() => { + openDialog('payment-receive-number-form', {}); + }, [openDialog]); + + const handlePaymentReceiveNumberChanged = (event) => { + saveInvoke(onPaymentReceiveNumberChanged, event.currentTarget.value); + }; + return (
@@ -177,7 +193,22 @@ function PaymentReceiveFormHeader({ Intent.DANGER } minimal={true} + rightElement={ + , + }} + tooltip={true} + tooltipProps={{ + content: + 'Setting your auto-generated Payment Receive number', + position: Position.BOTTOM_LEFT, + }} + /> + } {...getFieldProps('payment_receive_no')} + onBlur={handlePaymentReceiveNumberChanged} /> @@ -255,4 +286,5 @@ export default compose( withAccounts(({ accountsList }) => ({ accountsList, })), + withDialogActions, )(PaymentReceiveFormHeader); diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormPage.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormPage.js index 830013ae3..6ba860620 100644 --- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormPage.js +++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormPage.js @@ -35,17 +35,6 @@ function PaymentReceiveFormPage({ requestFetchCustomers }) { const { id: paymentReceiveId } = useParams(); - const { formatMessage } = useIntl(); - - useEffect(() => { - console.log(paymentReceiveId, 'X'); - - if (paymentReceiveId) { - changePageTitle(formatMessage({ id: 'edit_payment_receive' })); - } else { - changePageTitle(formatMessage({ id: 'payment_receive' })); - } - }, [changePageTitle, paymentReceiveId, formatMessage]); // Fetches payment recevie details. const fetchPaymentReceive = useQuery( @@ -72,7 +61,7 @@ function PaymentReceiveFormPage({ loading={ fetchPaymentReceive.isFetching || fetchAccounts.isFetching || - fetchSettings.isFetching || + // fetchSettings.isFetching || fetchCustomers.isFetching }> { const getPyamentReceivesItems = getPaymentReceiveCurrentPageFactory(); const getPyamentReceivesPaginationMeta = getPaymentReceivePaginationMetaFactory(); @@ -17,8 +16,14 @@ export default (mapState) => { paymentReceivesViews: getResourceViews(state, props, 'payment_receives'), paymentReceivesItems: state.paymentReceives.items, paymentReceivesTableQuery: query, - paymentReceivesPageination: getPyamentReceivesPaginationMeta(state, props, query), + paymentReceivesPageination: getPyamentReceivesPaginationMeta( + state, + props, + query, + ), paymentReceivesLoading: state.paymentReceives.loading, + + paymentReceiveNumberChanged: state.paymentReceives.journalNumberChanged, }; return mapState ? mapState(mapped, state, props) : mapped; }; diff --git a/client/src/containers/Sales/PaymentReceive/withPaymentReceivesActions.js b/client/src/containers/Sales/PaymentReceive/withPaymentReceivesActions.js index e2b549fa8..4b526a95c 100644 --- a/client/src/containers/Sales/PaymentReceive/withPaymentReceivesActions.js +++ b/client/src/containers/Sales/PaymentReceive/withPaymentReceivesActions.js @@ -13,7 +13,7 @@ const mapDispatchToProps = (dispatch) => ({ dispatch(submitPaymentReceive({ form })), requestFetchPaymentReceive: (id) => dispatch(fetchPaymentReceive({ id })), requestEditPaymentReceive: (id, form) => - dispatch(editPaymentReceive( id, form )), + dispatch(editPaymentReceive(id, form)), requestDeletePaymentReceive: (id) => dispatch(deletePaymentReceive({ id })), requestFetchPaymentReceiveTable: (query = {}) => dispatch(fetchPaymentReceivesTable({ query: { ...query } })), @@ -29,6 +29,10 @@ const mapDispatchToProps = (dispatch) => ({ type: t.PAYMENT_RECEIVE_TABLE_QUERIES_ADD, queries, }), + setPaymentReceiveNumberChanged: (isChanged) => + dispatch({ + type: t.PAYMENT_RECEIVE_NUMBER_CHANGED, + payload: { isChanged }, + }), }); - export default connect(null, mapDispatchToProps); diff --git a/client/src/containers/Settings/withSettings.js b/client/src/containers/Settings/withSettings.js index 7b08010e2..1713f375d 100644 --- a/client/src/containers/Settings/withSettings.js +++ b/client/src/containers/Settings/withSettings.js @@ -6,7 +6,7 @@ export default (mapState) => { organizationSettings: state.settings.data.organization, manualJournalsSettings: state.settings.data.manualJournals, billsettings: state.settings.data.bills, - billPaymentSettings: state.settings.data.billPayments, + paymentReceiveSettings: state.settings.data.paymentReceives, estimatesSettings: state.settings.data.salesEstimates, receiptSettings: state.settings.data.salesReceipts, invoiceSettings: state.settings.data.salesInvoices, diff --git a/client/src/store/PaymentReceive/paymentReceive.reducer.js b/client/src/store/PaymentReceive/paymentReceive.reducer.js index a3c2b0d9b..699c62e49 100644 --- a/client/src/store/PaymentReceive/paymentReceive.reducer.js +++ b/client/src/store/PaymentReceive/paymentReceive.reducer.js @@ -1,6 +1,8 @@ import { createReducer } from '@reduxjs/toolkit'; import { createTableQueryReducers } from 'store/queryReducers'; import { omit } from 'lodash'; +import { journalNumberChangedReducer } from 'store/journalNumber.reducer'; + import t from 'store/types'; const initialState = { @@ -105,5 +107,7 @@ const reducer = createReducer(initialState, { }, }; }, + + ...journalNumberChangedReducer(t.PAYMENT_RECEIVE_NUMBER_CHANGED), }); export default createTableQueryReducers('payment_receives', reducer); diff --git a/client/src/store/PaymentReceive/paymentReceive.type.js b/client/src/store/PaymentReceive/paymentReceive.type.js index 91249d588..b872d7afd 100644 --- a/client/src/store/PaymentReceive/paymentReceive.type.js +++ b/client/src/store/PaymentReceive/paymentReceive.type.js @@ -8,4 +8,6 @@ export default { PAYMENT_RECEIVES_PAGE_SET: 'PAYMENT_RECEIVES_PAGE_SET', PAYMENT_RECEIVES_ITEMS_SET: 'PAYMENT_RECEIVES_ITEMS_SET', PAYMENT_RECEIVES_PAGINATION_SET: 'PAYMENT_RECEIVES_PAGINATION_SET', + + PAYMENT_RECEIVE_NUMBER_CHANGED: 'PAYMENT_RECEIVE_NUMBER_CHANGED', };