Fix: PaymentReceive Number Dialog

client/src/components/DialogsContainer.js

@@ -19,7 +19,7 @@ export default function DialogsContainer() {
       <AccountFormDialog dialogName={'account-form'} />
       <JournalNumberDialog dialogName={'journal-number-form'} />
       {/* <BillNumberDialog dialogName={'bill-number-form'} /> */}
-      <PaymentReceiveNumberDialog dialogName={'payment-number-form'} />
+      <PaymentReceiveNumberDialog dialogName={'payment-receive-number-form'} />
       <EstimateNumberDialog dialogName={'estimate-number-form'} />
       <ReceiptNumberDialog dialogName={'receipt-number-form'} />
       <InvoiceNumberDialog dialogName={'invoice-number-form'} />

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 (
-    <DialogContent
-     isLoading={fetchSettings.isFetching}
-    >
+    <DialogContent isLoading={fetchSettings.isFetching}>
       <ReferenceNumberForm
         initialNumber={nextNumber}
         initialPrefix={numberPrefix}
@@ -70,9 +72,9 @@ function PaymentNumberDialogContent({
 export default compose(
   withDialogActions,
   withSettingsActions,
-  withSettings(({ billPaymentSettings }) => ({
-    nextNumber: billPaymentSettings?.next_number,
-    numberPrefix: billPaymentSettings?.number_prefix,
+  withSettings(({ paymentReceiveSettings }) => ({
+    nextNumber: paymentReceiveSettings?.nextNumber,
+    numberPrefix: paymentReceiveSettings?.numberPrefix,
   })),
-  withPaymentMadeActions,
+  withPaymentReceivesActions,
 )(PaymentNumberDialogContent);

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 (
     <Dialog
-      name={dialogName}
-      name={dialogName}
       title={<T id={'payment_number_settings'} />}
+      name={dialogName}
       autoFocus={true}
       canEscapeKeyClose={true}
       isOpen={isOpen}
     >
       <DialogSuspense>
-        <PaymentNumbereDialogConetnet paymentNumberId={payload.id} />
+        <PaymentReceiveNumbereDialogConetnet
+          paymentReceiveNumberId={payload.id}
+        />
       </DialogSuspense>
     </Dialog>
   );
 }
 
-export default compose(withDialogRedux())(PaymentNumberDialog);
+export default compose(withDialogRedux())(PaymentReceiveNumberDialog);

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 (
     <div
       className={classNames(
@@ -322,6 +381,7 @@ function PaymentReceiveForm({
           onFullAmountChanged={handleFullAmountChange}
           receivableFullAmount={receivableFullAmount}
           amountReceived={fullAmountReceived}
+          onPaymentReceiveNumberChanged={handlePaymentReceiveNumberChanged}
         />
         <PaymentReceiveItemsTable
           paymentReceiveId={paymentReceiveId}
@@ -388,12 +448,17 @@ function PaymentReceiveForm({
 
 export default compose(
   withPaymentReceivesActions,
+  withDashboardActions,
   withMediaActions,
-  // withPaymentReceives(({ paymentReceivesItems }) => ({
-  //   paymentReceivesItems,
-  // })),
   withPaymentReceiveDetail(({ paymentReceive, paymentReceiveEntries }) => ({
     paymentReceive,
     paymentReceiveEntries,
   })),
+  withSettings(({ paymentReceiveSettings }) => ({
+    paymentReceiveNextNumber: paymentReceiveSettings?.nextNumber,
+    paymentReceiveNumberPrefix: paymentReceiveSettings?.numberPrefix,
+  })),
+  withPaymentReceives(({ paymentReceiveNumberChanged }) => ({
+    paymentReceiveNumberChanged,
+  })),
 )(PaymentReceiveForm);

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 (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
@@ -177,7 +193,22 @@ function PaymentReceiveFormHeader({
                 Intent.DANGER
               }
               minimal={true}
+              rightElement={
+                <InputPrependButton
+                  buttonProps={{
+                    onClick: handlePaymentReceiveNumberChange,
+                    icon: <Icon icon={'settings-18'} />,
+                  }}
+                  tooltip={true}
+                  tooltipProps={{
+                    content:
+                      'Setting your auto-generated Payment Receive number',
+                    position: Position.BOTTOM_LEFT,
+                  }}
+                />
+              }
               {...getFieldProps('payment_receive_no')}
+              onBlur={handlePaymentReceiveNumberChanged}
             />
           </FormGroup>
 
@@ -255,4 +286,5 @@ export default compose(
   withAccounts(({ accountsList }) => ({
     accountsList,
   })),
+  withDialogActions,
 )(PaymentReceiveFormHeader);

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
       }>
       <PaymentReceiveForm

client/src/containers/Sales/PaymentReceive/withPaymentReceives.js

@@ -6,7 +6,6 @@ import {
   getPaymentReceiveTableQuery,
 } from 'store/PaymentReceive/paymentReceive.selector';
 
-
 export default (mapState) => {
   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;
   };

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);

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,

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);

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',
 };