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

client/src/components/Forms/FormObserver.js

@@ -0,0 +1,14 @@
+
+import { useEffect } from 'react'
+
+export function FormObserver({ onChange, values }) {
+  useEffect(() => {
+    onChange(values);
+  }, [Object.values(values).join(', ')]);
+
+  return null;
+}
+
+FormObserver.defaultProps = {
+  onChange: () => null,
+};

client/src/components/Forms/index.js

@@ -0,0 +1 @@
+export * from './FormObserver';

client/src/components/index.js

@@ -76,6 +76,7 @@ export * from './Alert';
 export * from './Subscriptions';
 export * from './Dashboard';
 export * from './Drawer';
+export * from './Forms';
 
 const Hint = FieldHint;
 

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');

client/src/lang/ar/index.json

@@ -916,8 +916,6 @@
   "attachments_maximum": "المرفقات: الحجم الأقصى: 20MB",
   "drag_drop_files_here_or_click_here": "قم بسحب/إسقاط الملفات هنا أو انقر هنا.",
   "enter_an_item": "أدخل منتج ...",
-  "i_will_enter_them_manually_each_time": "سأدخلها يدويًا في كل مرة",
-  "manual_entering_for_this_transaction": "إدخال يدوي لهذه العملية فقط.",
   "due_amount": "القيمة المستحقة",
   "invoice_details": "تفاصيل الفاتورة",
   "setting_your_auto_generated_estimate_number": "عيين رقم العرض الذي تم إنشاؤه تلقائيًا",
@@ -1190,8 +1188,6 @@
   "if_the_problem_stuck_please_contact_us_as_soon_as_possible": "إذا تكررت المشكلة اكتر من مرة ، الرجاء الاتصال بنا في أقرب وقت ممكن.",
   "non-inventory":"غير مخزون",
   "terms_conditions":"الشروط والأحكام",
-  "your_invoice_numbers_are_set_on_auto_increment_mod_are_you_sure_changing_this_setting":"Your invoice numbers are set on auto-increment mod. Are you sure changing this setting?",
-  "auto_incrementing_number":"Auto-incrementing number",
   "the_inventory_adjustment_has_been_published": "تم نشر تسوية المخزون",
   "are_sure_to_publish_this_inventory_adjustment": "هل أنت متأكد أنك تريد نشر هذا المخزون ؟",
   "the_contact_has_been_activated_successfully": "تم تفعيل جهة اتصال بنجاح.",
@@ -1343,6 +1339,17 @@
   "item.field.cost_account.hint": "أدخل السعر الذي اشتريت به هذا العنصر.",
   "item.field.sell_account.hint": "أدخل السعر الذي ستبيعه لهذا العنصر.",
   "item_entries.products_services.hint": "أدخل المنتجات أو الخدمات التي تبيعها أو تشتريها لتتبع ما قمت ببيعه أو شرائه.",
-  "item_entries.landed.hint": "يتيح لك هذه الخيار إمكانية  إضافة تكلفة اضافية علي فاتورة الشراء متال علي ذلك تكاليف الشحن ، ثم تحديد هذه التكلفة لتحميلها علي فاتورة الشراء."
+  "item_entries.landed.hint": "يتيح لك هذه الخيار إمكانية  إضافة تكلفة اضافية علي فاتورة الشراء متال علي ذلك تكاليف الشحن ، ثم تحديد هذه التكلفة لتحميلها علي فاتورة الشراء.",
+  "invoice.auto_increment.auto": "يتم تعيين أرقام الفواتير على وضع الزيادة التلقائي. هل أنت متأكد من تغيير هذا الإعداد؟",
+  "invoice.auto_increment.manually": "يتم تعيين أرقام فواتيرك يدوياً. هل أنت متأكد من تغيير هذه الإعدادات؟",
+  "estimate.auto_increment.auto": "يتم تعيين أرقام العروض على وضع الزيادة التلقائي. هل أنت متأكد من تغيير هذا الإعداد؟",
+  "estimate.auto_increment.manually": "يتم تعيين أرقام عروض الاسعار يدوياً. هل أنت متأكد من تغيير هذه الإعدادات؟",
+  "receipt.auto_increment.auto": "يتم تعيين أرقام إيصالات على وضع الزيادة التلقائي. هل أنت متأكد من تغيير هذا الإعداد؟",
+  "receipt.auto_increment.manually": "يتم تعيين أرقام إيصالات يدوياً. هل أنت متأكد من تغيير هذه الإعدادات؟",
+  "payment_receive.auto_increment.auto": "يتم تعيين أرقام سندات الدفع على وضع الزيادة التلقائي. هل أنت متأكد من تغيير هذا الإعداد؟",
+  "payment_receive.auto_increment.manually": "يتم تعيين سندات الدفع يدوياً. هل أنت متأكد من تغيير هذه الإعدادات؟",
+  "auto_increment.field.manually": "سأدخلها يدويًا في كل مرة",
+  "auto_increment.field.manual_this_transaction": "إدخال يدوي لهذه العملية فقط.",
+  "auto_increment.field.auto": "زيادة الرقم العملية تلقائيًا."
 }
 

client/src/lang/en/index.json

@@ -906,8 +906,6 @@
   "attachments_maximum": "Attachments: Maximum size: 20MB",
   "drag_drop_files_here_or_click_here": "Drag/Drop files here or click here.",
   "enter_an_item": "Enter an item...",
-  "i_will_enter_them_manually_each_time": "I will enter them manually each time",
-  "manual_entering_for_this_transaction": "Manual entering for this transaction.",
   "due_amount": "Due Amount",
   "invoice_details": "Invoice details",
   "setting_your_auto_generated_estimate_number": "Setting your auto-generated estimate number",
@@ -1160,8 +1158,6 @@
   "if_the_problem_stuck_please_contact_us_as_soon_as_possible": "If the problem stuck, please contact us as soon as possible.",
   "non-inventory": "Non-Inventory",
   "terms_conditions": "Terms conditions",
-  "your_invoice_numbers_are_set_on_auto_increment_mod_are_you_sure_changing_this_setting": "Your invoice numbers are set on auto-increment mod. Are you sure changing this setting?",
-  "auto_incrementing_number": "Auto-incrementing number",
   "inventory_adjustment.publish.success_message": "The inventory adjustment has been published successfully.",
   "inventory_adjustment.publish.alert_message": "Are you sure you want to publish this inventory adjustment?",
   "the_contact_has_been_activated_successfully": "The contact has been inactivated successfully.",
@@ -1314,5 +1310,16 @@
   "item.field.cost_account.hint": "Enter price at which you purchased this item.",
   "item.field.sell_account.hint": "Enter price which you goint to sell this item.",
   "item_entries.products_services.hint": "Enter products or services you sell or buy to keep tracking what your sold or purchased.",
-  "item_entries.landed.hint": "This options allows you to be able to add additional cost eg. freight then allocate cost to the items in your bills."
+  "item_entries.landed.hint": "This options allows you to be able to add additional cost eg. freight then allocate cost to the items in your bills.",
+  "invoice.auto_increment.auto": "Your invoice numbers are set on auto-increment mode. Are you sure changing this setting?",
+  "invoice.auto_increment.manually": "Yor invoice numbers are set on manual mode. Are you sure chaning this settings?",
+  "estimate.auto_increment.auto": "Your estimate numbers are set on auto-increment mode. Are you sure changing this setting?",
+  "estimate.auto_increment.manually": "Yor estimate numbers are set on manual mode. Are you sure chaning this settings?",
+  "receipt.auto_increment.auto": "Your receipt numbers are set on auto-increment mode. Are you sure changing this setting?",
+  "receipt.auto_increment.manually": "Yor receipt numbers are set on manual mode. Are you sure chaning this settings?",
+  "payment_receive.auto_increment.auto": "Your payment numbers are set on auto-increment mode. Are you sure changing this setting?",
+  "payment_receive.auto_increment.manually": "Yor payment numbers are set on manual mode. Are you sure chaning this settings?",
+  "auto_increment.field.manually": "I will enter them manually each time",
+  "auto_increment.field.manual_this_transaction": "Manual entering for this transaction.",
+  "auto_increment.field.auto": "Auto-incrementing number."
 }