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

client/src/containers/Sales/Estimates/EstimateForm/EstimateForm.js

@@ -16,6 +16,7 @@ import EstimateFormHeader from './EstimateFormHeader';
 import EstimateItemsEntriesField from './EstimateItemsEntriesField';
 import EstimateFloatingActions from './EstimateFloatingActions';
 import EstimateFormFooter from './EstimateFormFooter';
+import EstimateFormDialogs from './EstimateFormDialogs';
 
 import withSettings from 'containers/Settings/withSettings';
 
@@ -158,12 +159,11 @@ function EstimateForm({
       >
         <Form>
           <EstimateFormHeader />
-
-          <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
-            <EstimateItemsEntriesField />
-          </div>
+          <EstimateItemsEntriesField />
           <EstimateFormFooter />
           <EstimateFloatingActions />
+
+          <EstimateFormDialogs />
         </Form>
       </Formik>
     </div>

client/src/containers/Sales/Estimates/EstimateForm/EstimateFormDialogs.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import EstimateNumberDialog from 'containers/Dialogs/EstimateNumberDialog';
+import { transactionNumber } from 'utils';
+
+/**
+ * Estimate form dialogs.
+ */
+export default function EstimateFormDialogs() {
+  const { setFieldValue } = useFormikContext();
+
+  // Update the form once the invoice number form submit confirm.
+  const handleEstimateNumberFormConfirm = (values) => {
+    setFieldValue(
+      'estimate_number',
+      transactionNumber(values.number_prefix, values.next_number),
+    );
+  };
+
+  return (
+    <>
+      <EstimateNumberDialog
+        dialogName={'estimate-number-form'}
+        onConfirm={handleEstimateNumberFormConfirm}
+      />
+    </>
+  );
+}

client/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js

@@ -32,7 +32,7 @@ function EstimateFormHeader({
 }) {
   const { customers } = useEstimateFormContext();
 
-  const handleEstimateNumberChange = () => {
+  const handleEstimateNumberBtnClick = () => {
     openDialog('estimate-number-form', {});
   };
 
@@ -135,7 +135,7 @@ function EstimateFormHeader({
               />
               <InputPrependButton
                 buttonProps={{
-                  onClick: handleEstimateNumberChange,
+                  onClick: handleEstimateNumberBtnClick,
                   icon: <Icon icon={'settings-18'} />,
                 }}
                 tooltip={true}

client/src/containers/Sales/Estimates/EstimateForm/EstimateItemsEntriesField.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import { FastField } from 'formik';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
 import ItemsEntriesTable from 'containers/Entries/ItemsEntriesTable';
 import { useEstimateFormContext } from './EstimateFormProvider';
 
@@ -10,18 +12,20 @@ export default function EstimateFormItemsEntriesField() {
   const { items } = useEstimateFormContext();
 
   return (
-    <FastField name={'entries'}>
-      {({ form, field: { value }, meta: { error, touched } }) => (
-        <ItemsEntriesTable
-          entries={value}
-          onUpdateData={(entries) => {
-            form.setFieldValue('entries', entries);
-          }}
-          items={items}
-          errors={error}
-          linesNumber={4}
-        />
-      )}
-    </FastField>
+    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+      <FastField name={'entries'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <ItemsEntriesTable
+            entries={value}
+            onUpdateData={(entries) => {
+              form.setFieldValue('entries', entries);
+            }}
+            items={items}
+            errors={error}
+            linesNumber={4}
+          />
+        )}
+      </FastField>
+    </div>
   );
 }