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

2026-02-18 13:50:31 +00:00 · 2021-02-23 10:52:25 +02:00
parent 6e00c2ef7d
commit 236bb896db
37 changed files with 467 additions and 204 deletions
--- a/client/src/containers/Dialogs/EstimateNumberDialog/EstimateNumberDialogContent.js
+++ b/client/src/containers/Dialogs/EstimateNumberDialog/EstimateNumberDialogContent.js
@@ -1,13 +1,12 @@
 import React, { useCallback } from 'react';
 import { DialogContent } from 'components';
-import { useQuery, queryCache } from 'react-query';
+import { useSaveSettings, useSettingsEstimates } from 'hooks/query';

 import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withSettings from 'containers/Settings/withSettings';
-import withSettingsActions from 'containers/Settings/withSettingsActions';

-import { compose, optionsMapToArray } from 'utils';
+import { compose, optionsMapToArray, saveInvoke } from 'utils';

 /**
 * Estimate number dialog's content.
@@ -18,28 +17,26 @@ function EstimateNumberDialogContent({
  nextNumber,
  numberPrefix,

-  // #withSettingsActions
-  requestFetchOptions,
-  requestSubmitOptions,
-
  // #withDialogActions
  closeDialog,
+
+  // #ownProps
+  onConfirm,
 }) {
-  const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
+  const { isLoading: isSettingsLoading } = useSettingsEstimates();
+  const { mutateAsync: saveSettingsMutate } = useSaveSettings();

  const handleSubmitForm = (values, { setSubmitting }) => {
-    const options = optionsMapToArray(values).map((option) => {
-      return { key: option.key, ...option, group: 'sales_estimates' };
-    });
-    requestSubmitOptions({ options })
+    const options = optionsMapToArray(values).map((option) => ({
+      key: option.key,
+      ...option,
+      group: 'sales_estimates',
+    }));
+    saveSettingsMutate({ options })
      .then(() => {
        setSubmitting(false);
        closeDialog('estimate-number-form');
-
-        setTimeout(() => {
-          queryCache.invalidateQueries('settings');
-          // setEstimateNumberChanged(true);
-        }, 250);
+        saveInvoke(onConfirm, values);
      })
      .catch(() => {
        setSubmitting(false);
@@ -51,7 +48,7 @@ function EstimateNumberDialogContent({
  }, [closeDialog]);

  return (
-    <DialogContent isLoading={fetchSettings.isFetching}>
+    <DialogContent isLoading={isSettingsLoading}>
      <ReferenceNumberForm
        initialNumber={nextNumber}
        initialPrefix={numberPrefix}
@@ -64,7 +61,6 @@ function EstimateNumberDialogContent({

 export default compose(
  withDialogActions,
-  withSettingsActions,
  withSettings(({ estimatesSettings }) => ({
    nextNumber: estimatesSettings?.nextNumber,
    numberPrefix: estimatesSettings?.numberPrefix,
--- a/client/src/containers/Dialogs/EstimateNumberDialog/index.js
+++ b/client/src/containers/Dialogs/EstimateNumberDialog/index.js
@@ -2,13 +2,18 @@ import React, { lazy } from 'react';
 import { FormattedMessage as T } from 'react-intl';
 import { Dialog, DialogSuspense } from 'components';
 import withDialogRedux from 'components/DialogReduxConnect';
-import { compose } from 'utils';
+import { saveInvoke, compose } from 'utils';

 const EstimateNumberDialogContent = lazy(() =>
  import('./EstimateNumberDialogContent'),
 );

-function EstimateNumberDialog({ dialogName, paylaod = { id: null }, isOpen }) {
+function EstimateNumberDialog({
+  dialogName,
+  paylaod = { id: null },
+  isOpen,
+  onConfirm
+}) {
  return (
    <Dialog
      name={dialogName}
@@ -19,7 +24,9 @@ function EstimateNumberDialog({ dialogName, paylaod = { id: null }, isOpen }) {
      className={'dialog--journal-number-settings'}
    >
      <DialogSuspense>
-        <EstimateNumberDialogContent EstimateNumberId={paylaod.id} />
+        <EstimateNumberDialogContent
+          estimateNumberId={paylaod.id}
+          onConfirm={(values) => saveInvoke(onConfirm, values)}/>
      </DialogSuspense>
    </Dialog>
  );
--- a/client/src/containers/Dialogs/InvoiceNumberDialog/InvoiceNumberDialogContent.js
+++ b/client/src/containers/Dialogs/InvoiceNumberDialog/InvoiceNumberDialogContent.js
@@ -16,24 +16,30 @@ import { compose, optionsMapToArray } from 'utils';
 */

 function InvoiceNumberDialogContent({
+  // #ownProps
+  onConfirm,
+
  // #withSettings
  nextNumber,
  numberPrefix,
- 
+
  // #withDialogActions
  closeDialog,
 }) {
  const { mutateAsync: saveSettings } = useSaveSettings();

  const handleSubmitForm = (values, { setSubmitting }) => {
-    const options = optionsMapToArray(values).map((option) => {
-      return { key: option.key, ...option, group: 'sales_invoices' };
-    });
+    const options = optionsMapToArray(values).map((option) => ({
+      key: option.key,
+      ...option,
+      group: 'sales_invoices',
+    }));

    saveSettings({ options })
      .then(() => {
        setSubmitting(false);
        closeDialog('invoice-number-form');
+        onConfirm(values);
      })
      .catch(() => {
        setSubmitting(false);
@@ -64,5 +70,4 @@ export default compose(
    nextNumber: invoiceSettings?.nextNumber,
    numberPrefix: invoiceSettings?.numberPrefix,
  })),
-  // withInvoicesActions,
 )(InvoiceNumberDialogContent);
--- a/client/src/containers/Dialogs/InvoiceNumberDialog/InvoiceNumberDialogProvider.js
+++ b/client/src/containers/Dialogs/InvoiceNumberDialog/InvoiceNumberDialogProvider.js
@@ -1,6 +1,6 @@
 import React, { createContext, useContext } from 'react';
 import { DialogContent } from 'components';
-import { useSettings } from 'hooks/query';
+import { useSettingsInvoices } from 'hooks/query';

 const InvoiceNumberDialogContext = createContext();

@@ -8,15 +8,15 @@ const InvoiceNumberDialogContext = createContext();
 * Invoice number dialog provider.
 */
 function InvoiceNumberDialogProvider({ query, ...props }) {
-  const { isLoading } = useSettings();
+  const { isLoading: isSettingsLoading } = useSettingsInvoices();

  // Provider payload.
  const provider = {
-      
+    isSettingsLoading,
  };

  return (
-    <DialogContent isLoading={isLoading}>
+    <DialogContent isLoading={isSettingsLoading}>
      <InvoiceNumberDialogContext.Provider value={provider} {...props} />
    </DialogContent>
  );
--- a/client/src/containers/Dialogs/InvoiceNumberDialog/index.js
+++ b/client/src/containers/Dialogs/InvoiceNumberDialog/index.js
@@ -2,13 +2,19 @@ import React, { lazy } from 'react';
 import { FormattedMessage as T } from 'react-intl';
 import { Dialog, DialogSuspense } from 'components';
 import withDialogRedux from 'components/DialogReduxConnect';
-import { compose } from 'utils';
+import { compose, saveInvoke } from 'utils';

 const InvoiceNumberDialogContent = lazy(() =>
  import('./InvoiceNumberDialogContent'),
 );

-function InvoiceNumberDialog({ dialogName, payload = { id: null }, isOpen }) {
+function InvoiceNumberDialog({
+  dialogName,
+  payload = { id: null },
+  isOpen,
+  onConfirm,
+}) {
+
  return (
    <Dialog
    title={<T id={'invoice_number_settings'} />}
@@ -18,7 +24,9 @@ function InvoiceNumberDialog({ dialogName, payload = { id: null }, isOpen }) {
    isOpen={isOpen}
    >
      <DialogSuspense>
-        <InvoiceNumberDialogContent InvoiceNumberId={payload.id} />
+        <InvoiceNumberDialogContent
+          InvoiceNumberId={payload.id}
+          onConfirm={(values) => saveInvoke(onConfirm, values)} />
      </DialogSuspense>
    </Dialog>
  );
--- a/client/src/containers/Dialogs/JournalNumberDialog/JournalNumberDialogContent.js
+++ b/client/src/containers/Dialogs/JournalNumberDialog/JournalNumberDialogContent.js
@@ -1,15 +1,12 @@
 import React, { useCallback } from 'react';
 import { DialogContent } from 'components';
-import { useQuery, queryCache } from 'react-query';
+import { useSaveSettings, useSettingsManualJournals } from 'hooks/query';

 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 withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';
-
-import { compose, optionsMapToArray } from 'utils';
+import { saveInvoke, compose, optionsMapToArray } from 'utils';

 import 'style/pages/ManualJournal/JournalNumberDialog.scss'

@@ -21,28 +18,25 @@ function JournalNumberDialogContent({
  nextNumber,
  numberPrefix,

-  // #withSettingsActions
-  requestFetchOptions,
-  requestSubmitOptions,
-
  // #withDialogActions
  closeDialog,

-}) {  
-  const fetchSettings = useQuery(
-    ['settings'],
-    () => requestFetchOptions({}),
-  );
+  // #ownProps
+  onConfirm
+}) {
+  const { isLoading: isSettingsLoading } = useSettingsManualJournals();
+  const { mutateAsync: saveSettingsMutate } = useSaveSettings();

+  // Handle the form submit. 
  const handleSubmitForm = (values, { setSubmitting }) => {
    const options = optionsMapToArray(values).map((option) => ({
      key: option.key, ...option, group: 'manual_journals',
    }));

-    requestSubmitOptions({ options }).then(() => {
+    saveSettingsMutate({ options }).then(() => {
      setSubmitting(false);
      closeDialog('journal-number-form');
-
+      saveInvoke(onConfirm, values);
    }).catch(() => {
      setSubmitting(false);
    });
@@ -53,7 +47,7 @@ function JournalNumberDialogContent({
  }, [closeDialog]);

  return (
-    <DialogContent isLoading={fetchSettings.isFetching}>
+    <DialogContent isLoading={isSettingsLoading}>
      <ReferenceNumberForm
        initialNumber={nextNumber}
        initialPrefix={numberPrefix}
@@ -66,10 +60,8 @@ function JournalNumberDialogContent({

 export default compose(
  withDialogActions,
-  withSettingsActions,
  withSettings(({ manualJournalsSettings }) => ({
    nextNumber: manualJournalsSettings?.nextNumber,
    numberPrefix: manualJournalsSettings?.numberPrefix,
  })),
-  // withManualJournalsActions,
 )(JournalNumberDialogContent);
--- a/client/src/containers/Dialogs/JournalNumberDialog/index.js
+++ b/client/src/containers/Dialogs/JournalNumberDialog/index.js
@@ -2,7 +2,7 @@ import React, { lazy } from 'react';
 import { FormattedMessage as T } from 'react-intl';
 import { Dialog, DialogSuspense } from 'components';
 import withDialogRedux from 'components/DialogReduxConnect';
-import { compose } from 'utils';
+import { saveInvoke, compose } from 'utils';

 const JournalNumberDialogContent = lazy(() => import('./JournalNumberDialogContent'));

@@ -10,7 +10,12 @@ function JournalNumberDialog({
  dialogName,
  payload = { id: null },
  isOpen,
+  onConfirm
 }) {
+
+  const handleConfirm = (values) => {
+    saveInvoke(onConfirm, values)
+  };
  return (
    <Dialog
      name={dialogName}
@@ -23,6 +28,7 @@ function JournalNumberDialog({
      <DialogSuspense>
        <JournalNumberDialogContent
          journalNumberId={payload.id}
+          onConfirm={handleConfirm}
        />
      </DialogSuspense>
    </Dialog>
--- a/client/src/containers/Dialogs/PaymentReceiveNumberDialog/PaymentReceiveNumberDialogContent.js
+++ b/client/src/containers/Dialogs/PaymentReceiveNumberDialog/PaymentReceiveNumberDialogContent.js
@@ -1,15 +1,14 @@
 import React, { useCallback } from 'react';
 import { DialogContent } from 'components';
-import { useQuery } from 'react-query';
+import { useSaveSettings, useSettingsPaymentReceives } from 'hooks/query';

 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 withPaymentReceivesActions from 'containers/Sales/PaymentReceive/withPaymentReceivesActions';

-import { compose, optionsMapToArray } from 'utils';
+import { saveInvoke, compose, optionsMapToArray } from 'utils';

 /**
 * payment receive number dialog's content.
@@ -20,31 +19,28 @@ function PaymentNumberDialogContent({
  nextNumber,
  numberPrefix,

-  // #withSettingsActions
-  requestFetchOptions,
-  requestSubmitOptions,
-
  // #withDialogActions
  closeDialog,

-  // #withPaymentReceivesActions
-  // setPaymentReceiveNumberChanged,
+  // #ownProps
+  onConfirm,
 }) {
-  const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
+  const { isLoading: isSettingsLoading } = useSettingsPaymentReceives();
+  const { mutateAsync: saveSettingsMutate } = useSaveSettings();

  const handleSubmitForm = (values, { setSubmitting }) => {
-    const options = optionsMapToArray(values).map((option) => {
-      return { key: option.key, ...option, group: 'payment_receives' };
-    });
+    const options = optionsMapToArray(values).map((option) => ({
+      key: option.key,
+      ...option,
+      group: 'payment_receives',
+    }));

-    requestSubmitOptions({ options })
+    saveSettingsMutate({ options })
      .then(() => {
        setSubmitting(false);
        closeDialog('payment-receive-number-form');

-        setTimeout(() => {
-          // setPaymentReceiveNumberChanged(true);
-        }, 250);
+        saveInvoke(onConfirm, values);
      })
      .catch(() => {
        setSubmitting(false);
@@ -55,9 +51,8 @@ function PaymentNumberDialogContent({
    closeDialog('payment-receive-number-form');
  }, [closeDialog]);

-
  return (
-    <DialogContent isLoading={fetchSettings.isFetching}>
+    <DialogContent isLoading={isSettingsLoading}>
      <ReferenceNumberForm
        initialNumber={nextNumber}
        initialPrefix={numberPrefix}
@@ -75,5 +70,4 @@ export default compose(
    nextNumber: paymentReceiveSettings?.nextNumber,
    numberPrefix: paymentReceiveSettings?.numberPrefix,
  })),
-  // withPaymentReceivesActions,
 )(PaymentNumberDialogContent);
--- a/client/src/containers/Dialogs/PaymentReceiveNumberDialog/index.js
+++ b/client/src/containers/Dialogs/PaymentReceiveNumberDialog/index.js
@@ -2,16 +2,20 @@ import React, { lazy } from 'react';
 import { FormattedMessage as T } from 'react-intl';
 import { Dialog, DialogSuspense } from 'components';
 import withDialogRedux from 'components/DialogReduxConnect';
-import { compose } from 'utils';
+import { saveInvoke, compose } from 'utils';

 const PaymentReceiveNumbereDialogConetnet = lazy(() =>
  import('./PaymentReceiveNumberDialogContent'),
 );

+/**
+ * Payment receive number dialog.
+ */
 function PaymentReceiveNumberDialog({
  dialogName,
  payload = { id: null },
  isOpen,
+  onConfirm
 }) {
  return (
    <Dialog
@@ -24,6 +28,7 @@ function PaymentReceiveNumberDialog({
      <DialogSuspense>
        <PaymentReceiveNumbereDialogConetnet
          paymentReceiveNumberId={payload.id}
+          onConfirm={(values) => saveInvoke(onConfirm, values)}
        />
      </DialogSuspense>
    </Dialog>
--- a/client/src/containers/Dialogs/ReceiptNumberDialog/ReceiptNumberDialogContent.js
+++ b/client/src/containers/Dialogs/ReceiptNumberDialog/ReceiptNumberDialogContent.js
@@ -1,49 +1,45 @@
 import React, { useCallback } from 'react';
 import { DialogContent } from 'components';
-import { useQuery } from 'react-query';

+import { useSettingsReceipts, useSaveSettings } from 'hooks/query';
 import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm';

 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withSettings from 'containers/Settings/withSettings';
-import withSettingsActions from 'containers/Settings/withSettingsActions';

-import { compose, optionsMapToArray } from 'utils';
+import { compose, optionsMapToArray, saveInvoke } from 'utils';

 /**
 * Receipt number dialog's content.
 */

 function ReceiptNumberDialogContent({
+  // #ownProps
+  receiptId, 
+  onConfirm,
+
  // #withSettings
  nextNumber,
  numberPrefix,

-  // #withSettingsActions
-  requestFetchOptions,
-  requestSubmitOptions,
-
  // #withDialogActions
  closeDialog,
-
-  // #withReceiptActions
-  setReceiptNumberChanged,
 }) {
-  const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
+  const { isLoading: isSettingsLoading } = useSettingsReceipts();
+  const { mutateAsync: saveSettingsMutate } = useSaveSettings();

  const handleSubmitForm = (values, { setSubmitting }) => {
-    const options = optionsMapToArray(values).map((option) => {
-      return { key: option.key, ...option, group: 'sales_receipts' };
-    });
+    const options = optionsMapToArray(values).map((option) => ({
+      key: option.key,
+      ...option,
+      group: 'sales_receipts',
+    }));

-    requestSubmitOptions({ options })
+    saveSettingsMutate({ options })
      .then(() => {
        setSubmitting(false);
        closeDialog('receipt-number-form');
-
-        setTimeout(() => {
-          setReceiptNumberChanged(true);
-        }, 250);
+        saveInvoke(onConfirm, values)
      })
      .catch(() => {
        setSubmitting(false);
@@ -55,7 +51,7 @@ function ReceiptNumberDialogContent({
  }, [closeDialog]);

  return (
-    <DialogContent isLoading={fetchSettings.isFetching}>
+    <DialogContent isLoading={isSettingsLoading}>
      <ReferenceNumberForm
        initialNumber={nextNumber}
        initialPrefix={numberPrefix}
@@ -68,7 +64,6 @@ function ReceiptNumberDialogContent({

 export default compose(
  withDialogActions,
-  withSettingsActions,
  withSettings(({ receiptSettings }) => ({
    nextNumber: receiptSettings?.nextNumber,
    numberPrefix: receiptSettings?.numberPrefix,
--- a/client/src/containers/Dialogs/ReceiptNumberDialog/index.js
+++ b/client/src/containers/Dialogs/ReceiptNumberDialog/index.js
@@ -2,13 +2,25 @@ import React, { lazy } from 'react';
 import { FormattedMessage as T } from 'react-intl';
 import { Dialog, DialogSuspense } from 'components';
 import withDialogRedux from 'components/DialogReduxConnect';
-import { compose } from 'utils';
+import { compose, saveInvoke } from 'utils';

 const ReceiptNumberDialogContent = lazy(() =>
  import('./ReceiptNumberDialogContent'),
 );

-function ReceiptNumberDialog({ dialogName, paylaod = { id: null }, isOpen }) {
+/**
+ * Sale receipt number dialog.
+ */
+function ReceiptNumberDialog({
+  dialogName,
+  paylaod = { id: null },
+  isOpen,
+  onConfirm,
+}) {
+  const handleConfirm = (values) => {
+    saveInvoke(onConfirm, values);
+  };
+
  return (
    <Dialog
      name={dialogName}
@@ -18,7 +30,10 @@ function ReceiptNumberDialog({ dialogName, paylaod = { id: null }, isOpen }) {
      isOpen={isOpen}
    >
      <DialogSuspense>
-        <ReceiptNumberDialogContent ReceiptNumberId={paylaod.id} />
+        <ReceiptNumberDialogContent
+          receiptId={paylaod.id}
+          onConfirm={handleConfirm}
+        />
      </DialogSuspense>
    </Dialog>
  );