refactoring: invoice, receipt, payment receive, estimate and journal number dialogs.

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js

@@ -12,6 +12,7 @@ import PaymentReceiveFormBody from './PaymentReceiveFormBody';
 import PaymentReceiveFloatingActions from './PaymentReceiveFloatingActions';
 import PaymentReceiveFormFooter from './PaymentReceiveFormFooter';
 import PaymentReceiveFormAlerts from './PaymentReceiveFormAlerts';
+import PaymentReceiveFormDialogs from './PaymentReceiveFormDialogs';
 import { PaymentReceiveInnerProvider } from './PaymentReceiveInnerProvider';
 
 import withSettings from 'containers/Settings/withSettings';
@@ -164,7 +165,9 @@ function PaymentReceiveForm({
             <PaymentReceiveFormFooter />
             <PaymentReceiveFloatingActions />
 
+            {/* Alerts & Dialogs */}
             <PaymentReceiveFormAlerts />
+            <PaymentReceiveFormDialogs />
           </PaymentReceiveInnerProvider>
         </Form>
       </Formik>

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormDialogs.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import PaymentReceiveNumberDialog from 'containers/Dialogs/PaymentReceiveNumberDialog';
+import { transactionNumber } from 'utils';
+
+/**
+ * Payment receive form dialogs.
+ */
+export default function PaymentReceiveFormDialogs() {
+  const { setFieldValue } = useFormikContext();
+
+  const handleUpdatePaymentNumber = (values) => {
+    setFieldValue(
+      'payment_receive_no',
+      transactionNumber(values.number_prefix, values.next_number),
+    );
+  };
+
+  return (
+    <>
+      <PaymentReceiveNumberDialog
+        dialogName={'payment-receive-number-form'}
+        onConfirm={handleUpdatePaymentNumber}
+      />
+    </>
+  );
+}

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js

@@ -32,7 +32,7 @@ import {
   Money,
 } from 'components';
 import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
-
+import withDialogActions from 'containers/Dialog/withDialogActions';
 import withSettings from 'containers/Settings/withSettings';
 
 import { amountPaymentEntries, fullAmountPaymentEntries } from './utils';
@@ -41,7 +41,12 @@ import { toSafeInteger } from 'lodash';
 /**
  * Payment receive header fields.
  */
-function PaymentReceiveHeaderFields({ baseCurrency }) {
+function PaymentReceiveHeaderFields({
+  baseCurrency,
+
+  // #withDialogActions
+  openDialog,
+}) {
   // Payment receive form context.
   const { customers, accounts, isNewMode } = usePaymentReceiveFormContext();
 
@@ -73,6 +78,12 @@ function PaymentReceiveHeaderFields({ baseCurrency }) {
     setFieldValue('entries', newEntries);
   };
 
+
+  // Handle click open payment receive number dialog.
+  const handleClickOpenDialog = () => {
+    openDialog('payment-receive-number-form')
+  };
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/* ------------- Customer name ------------- */}
@@ -185,7 +196,7 @@ function PaymentReceiveHeaderFields({ baseCurrency }) {
               />
               <InputPrependButton
                 buttonProps={{
-                  //   onClick: handlePaymentReceiveNumberChange,
+                  onClick: handleClickOpenDialog,
                   icon: <Icon icon={'settings-18'} />,
                 }}
                 tooltip={true}
@@ -253,4 +264,5 @@ export default compose(
   withSettings(({ organizationSettings }) => ({
     baseCurrency: organizationSettings?.baseCurrency,
   })),
+  withDialogActions
 )(PaymentReceiveHeaderFields);