BIG-22: feat: localize auto-increment dialogs.

client/src/containers/Dialogs/EstimateNumberDialog/EstimateNumberDialogContent.js

@@ -1,4 +1,6 @@
 import React, { useCallback } from 'react';
+import intl from 'react-intl-universal';
+
 import { DialogContent } from 'components';
 import { useSaveSettings, useSettingsEstimates } from 'hooks/query';
 
@@ -28,6 +30,8 @@ function EstimateNumberDialogContent({
   initialValues,
   onConfirm,
 }) {
+  const [referenceFormValues, setReferenceFormValues] = React.useState(null);
+
   // Fetches the estimates settings.
   const { isLoading: isSettingsLoading } = useSettingsEstimates();
 
@@ -58,6 +62,17 @@ function EstimateNumberDialogContent({
     closeDialog('estimate-number-form');
   }, [closeDialog]);
 
+  // Handle form change.
+  const handleChange = (values) => {
+    setReferenceFormValues(values);
+  };
+
+  // Description.
+  const description =
+    referenceFormValues?.incrementMode === 'auto'
+      ? intl.get('estimate.auto_increment.auto')
+      : intl.get('estimate.auto_increment.manually');
+
   return (
     <DialogContent isLoading={isSettingsLoading}>
       <ReferenceNumberForm
@@ -71,6 +86,8 @@ function EstimateNumberDialogContent({
         }}
         onSubmit={handleSubmitForm}
         onClose={handleClose}
+        onChange={handleChange}
+        description={description}
       />
     </DialogContent>
   );

client/src/containers/Dialogs/InvoiceNumberDialog/InvoiceNumberDialogContent.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import { useSaveSettings } from 'hooks/query';
 
 import { InvoiceNumberDialogProvider } from './InvoiceNumberDialogProvider';
@@ -30,6 +31,7 @@ function InvoiceNumberDialogContent({
   closeDialog,
 }) {
   const { mutateAsync: saveSettings } = useSaveSettings();
+  const [referenceFormValues, setReferenceFormValues] = React.useState(null);
 
   // Handle the submit form.
   const handleSubmitForm = (values, { setSubmitting }) => {
@@ -50,7 +52,7 @@ function InvoiceNumberDialogContent({
     // Transformes the form values to settings to save it.
     const options = transformFormToSettings(values, 'sales_invoices');
 
-    // Save the goddamn settings.
+    // Save the settings.
     saveSettings({ options }).then(handleSuccess).catch(handleErrors);
   };
 
@@ -58,6 +60,15 @@ function InvoiceNumberDialogContent({
   const handleClose = () => {
     closeDialog('invoice-number-form');
   };
+  // Handle form change.
+  const handleChange = (values) => {
+    setReferenceFormValues(values);
+  };
+  // Description.
+  const description =
+    referenceFormValues?.incrementMode === 'auto'
+      ? intl.get('invoice.auto_increment.auto')
+      : intl.get('invoice.auto_increment.manually');
 
   return (
     <InvoiceNumberDialogProvider>
@@ -70,8 +81,10 @@ function InvoiceNumberDialogContent({
           }),
           ...initialValues,
         }}
+        description={description}
         onSubmit={handleSubmitForm}
         onClose={handleClose}
+        onChange={handleChange}
       />
     </InvoiceNumberDialogProvider>
   );

client/src/containers/Dialogs/PaymentReceiveNumberDialog/PaymentReceiveNumberDialogContent.js

@@ -1,4 +1,6 @@
 import React, { useCallback } from 'react';
+import intl from 'react-intl-universal';
+
 import { DialogContent } from 'components';
 import { useSaveSettings, useSettingsPaymentReceives } from 'hooks/query';
 
@@ -28,11 +30,22 @@ function PaymentNumberDialogContent({
 
   // #ownProps
   onConfirm,
-  initialValues
+  initialValues,
 }) {
+  const [referenceFormValues, setReferenceFormValues] = React.useState(null);
+
   const { isLoading: isSettingsLoading } = useSettingsPaymentReceives();
   const { mutateAsync: saveSettingsMutate } = useSaveSettings();
 
+  const initialFormValues = {
+    ...transformSettingsToForm({
+      nextNumber,
+      numberPrefix,
+      autoIncrement,
+    }),
+    ...initialValues,
+  };
+
   // Handle submit form.
   const handleSubmitForm = (values, { setSubmitting }) => {
     // Transformes the form values to settings to save it.
@@ -58,19 +71,25 @@ function PaymentNumberDialogContent({
     closeDialog('payment-receive-number-form');
   }, [closeDialog]);
 
+  // Handle form change.
+  const handleChange = (values) => {
+    setReferenceFormValues(values);
+  };
+
+  // Description.
+  const description =
+    referenceFormValues?.incrementMode === 'auto'
+      ? intl.get('payment_receive.auto_increment.auto')
+      : intl.get('payment_receive.auto_increment.manually');
+
   return (
     <DialogContent isLoading={isSettingsLoading}>
       <ReferenceNumberForm
-        initialValues={{
-          ...transformSettingsToForm({
-            nextNumber,
-            numberPrefix,
-            autoIncrement,
-          }),
-          ...initialValues,
-        }}
+        initialValues={initialFormValues}
         onSubmit={handleSubmitForm}
         onClose={handleClose}
+        onChange={handleChange}
+        description={description}
       />
     </DialogContent>
   );

client/src/containers/Dialogs/ReceiptNumberDialog/ReceiptNumberDialogContent.js

@@ -1,4 +1,6 @@
 import React, { useCallback } from 'react';
+import intl from 'react-intl-universal';
+
 import { DialogContent } from 'components';
 
 import { useSettingsReceipts, useSaveSettings } from 'hooks/query';
@@ -30,6 +32,8 @@ function ReceiptNumberDialogContent({
   // #withDialogActions
   closeDialog,
 }) {
+  const [referenceFormValues, setReferenceFormValues] = React.useState(null);
+
   const { isLoading: isSettingsLoading } = useSettingsReceipts();
   const { mutateAsync: saveSettingsMutate } = useSaveSettings();
 
@@ -57,6 +61,17 @@ function ReceiptNumberDialogContent({
     closeDialog('receipt-number-form');
   }, [closeDialog]);
 
+  // Handle form change.
+  const handleChange = (values) => {
+    setReferenceFormValues(values);
+  };
+
+  // Description.
+  const description =
+    referenceFormValues?.incrementMode === 'auto'
+      ? intl.get('receipt.auto_increment.auto')
+      : intl.get('receipt.auto_increment.manually');
+
   return (
     <DialogContent isLoading={isSettingsLoading}>
       <ReferenceNumberForm
@@ -70,6 +85,8 @@ function ReceiptNumberDialogContent({
         }}
         onSubmit={handleSubmitForm}
         onClose={handleClose}
+        onChange={handleChange}
+        description={description}
       />
     </DialogContent>
   );

client/src/containers/JournalNumber/ReferenceNumberForm.js

@@ -2,12 +2,11 @@ import React, { useMemo } from 'react';
 import * as Yup from 'yup';
 import { Formik, Form } from 'formik';
 import { FormattedMessage as T } from 'components';
-import { Button, Classes } from '@blueprintjs/core';
-import { Intent } from '@blueprintjs/core';
-import intl from 'react-intl-universal';
+import { Intent, Button, Classes } from '@blueprintjs/core';
 
 import 'style/pages/ReferenceNumber/ReferenceNumber.scss';
 
+import { FormObserver } from 'components';
 import ReferenceNumberFormContent from './ReferenceNumberFormContent';
 import { transformValuesToForm } from './utils';
 import { saveInvoke } from 'utils';
@@ -19,6 +18,8 @@ export default function ReferenceNumberForm({
   onSubmit,
   onClose,
   initialValues,
+  description,
+  onChange,
 }) {
   // Validation schema.
   const validationSchema = Yup.object().shape({
@@ -51,14 +52,10 @@ export default function ReferenceNumberForm({
       validationSchema={validationSchema}
       onSubmit={handleSubmit}
     >
-      {({ isSubmitting }) => (
+      {({ isSubmitting, values }) => (
         <Form className={'reference-number-form'}>
           <div className={Classes.DIALOG_BODY}>
-            <p className="paragraph">
-              {intl.get(
-                'your_invoice_numbers_are_set_on_auto_increment_mod_are_you_sure_changing_this_setting',
-              )}
-            </p>
+            <p className="paragraph">{description}</p>
             <ReferenceNumberFormContent />
           </div>
 
@@ -70,12 +67,14 @@ export default function ReferenceNumberForm({
               <Button
                 intent={Intent.PRIMARY}
                 type="submit"
-                disabled={isSubmitting}
+                loading={isSubmitting}
               >
                 <T id={'submit'} />
               </Button>
             </div>
           </div>
+
+          <FormObserver values={values} onChange={onChange} />
         </Form>
       )}
     </Formik>

client/src/containers/JournalNumber/ReferenceNumberFormContent.js

@@ -17,7 +17,7 @@ export default function ReferenceNumberFormContent() {
       <FastField name={'incrementMode'}>
         {({ form, field, meta: { error, touched } }) => (
           <Radio
-            label={<T id={'auto_incrementing_number'} />}
+            label={<T id={'auto_increment.field.auto'} />}
             value="auto-increment"
             onChange={() => {
               form.setFieldValue('incrementMode', 'auto');
@@ -73,7 +73,7 @@ export default function ReferenceNumberFormContent() {
       <FastField name={'incrementMode'}>
         {({ form, field, meta: { error, touched } }) => (
           <Radio
-            label={<T id={'i_will_enter_them_manually_each_time'} />}
+            label={<T id={'auto_increment.field.manual_this_transaction'} />}
             value="manual"
             onChange={() => {
               form.setFieldValue('incrementMode', 'manual');
@@ -88,7 +88,7 @@ export default function ReferenceNumberFormContent() {
         <FastField name={'incrementMode'}>
           {({ form, field, meta: { error, touched } }) => (
             <Radio
-              label={<T id={'manual_entering_for_this_transaction'} />}
+              label={<T id={'auto_increment.field.manually'} />}
               value="manual"
               onChange={() => {
                 form.setFieldValue('incrementMode', 'manual-transaction');