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

client/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.js

@@ -15,6 +15,7 @@ import InvoiceFormHeader from './InvoiceFormHeader';
 import InvoiceItemsEntriesEditorField from './InvoiceItemsEntriesEditorField';
 import InvoiceFloatingActions from './InvoiceFloatingActions';
 import InvoiceFormFooter from './InvoiceFormFooter';
+import InvoiceFormDialogs from './InvoiceFormDialogs';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withMediaActions from 'containers/Media/withMediaActions';
@@ -159,6 +160,7 @@ function InvoiceForm({
           </div>
           <InvoiceFormFooter />
           <InvoiceFloatingActions />
+          <InvoiceFormDialogs />
         </Form>
       </Formik>
     </div>

client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import InvoiceNumberDialog from 'containers/Dialogs/InvoiceNumberDialog';
+import { useFormikContext } from 'formik';
+import { transactionNumber } from 'utils';
+
+/**
+ * Invoice form dialogs.
+ */
+export default function InvoiceFormDialogs() {
+  const { setFieldValue } = useFormikContext();
+
+  // Update the form once the invoice number form submit confirm.
+  const handleInvoiceNumberFormConfirm = (values) => {
+    setFieldValue(
+      'invoice_no',
+      transactionNumber(values.number_prefix, values.next_number),
+    );
+  };
+  return (
+    <>
+      <InvoiceNumberDialog
+        dialogName={'invoice-number-form'}
+        onConfirm={handleInvoiceNumberFormConfirm}
+      />
+    </>
+  );
+}

client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormProvider.js

@@ -6,6 +6,7 @@ import {
   useCustomers,
   useCreateInvoice,
   useEditInvoice,
+  useSettingsInvoices,
 } from 'hooks/query';
 
 const InvoiceFormContext = createContext();
@@ -14,7 +15,7 @@ const InvoiceFormContext = createContext();
  * Accounts chart data provider.
  */
 function InvoiceFormProvider({ invoiceId, ...props }) {
-  const { data: invoice, isFetching: isInvoiceLoading } = useInvoice(
+  const { data: invoice, isLoading: isInvoiceLoading } = useInvoice(
     invoiceId,
     {
       enabled: !!invoiceId,
@@ -24,21 +25,24 @@ function InvoiceFormProvider({ invoiceId, ...props }) {
   // Handle fetching the items table based on the given query.
   const {
     data: { items },
-    isFetching: isItemsLoading,
+    isLoading: isItemsLoading,
   } = useItems();
 
   // Handle fetch customers data table or list
   const {
     data: { customers },
-    isFetching: isCustomersLoading,
+    isLoading: isCustomersLoading,
   } = useCustomers();
 
+  // Handle fetching settings.
+  const { isLoading: isSettingsLoading } = useSettingsInvoices();
+
   // Create and edit invoice mutations.
   const { mutateAsync: createInvoiceMutate } = useCreateInvoice();
   const { mutateAsync: editInvoiceMutate } = useEditInvoice();
 
   // Form submit payload.
-  const [submitPayload, setSubmitPayload] = useState({});
+  const [submitPayload, setSubmitPayload] = useState();
 
   // Detarmines whether the form in new mode.
   const isNewMode = !invoiceId;
@@ -53,16 +57,22 @@ function InvoiceFormProvider({ invoiceId, ...props }) {
     isInvoiceLoading,
     isItemsLoading,
     isCustomersLoading,
+    isSettingsLoading,
 
     createInvoiceMutate,
     editInvoiceMutate,
     setSubmitPayload,
-    isNewMode
+    isNewMode,
   };
 
   return (
     <DashboardInsider
-      loading={isInvoiceLoading || isItemsLoading || isCustomersLoading}
+      loading={
+        isInvoiceLoading ||
+        isItemsLoading ||
+        isCustomersLoading ||
+        isSettingsLoading
+      }
       name={'invoice-form'}
     >
       <InvoiceFormContext.Provider value={provider} {...props} />