handle Errors message api

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

@@ -27,6 +27,7 @@ import withSettings from 'containers/Settings/withSettings';
 import { AppToaster, Col, Row } from 'components';
 import Dragzone from 'components/Dragzone';
 import useMedia from 'hooks/useMedia';
+import { ERROR } from 'common/errors';
 
 import { compose, repeatValue } from 'utils';
 
@@ -206,6 +207,16 @@ function InvoiceForm({
       : [];
   }, [invoice]);
 
+  const handleErrors = (errors, { setErrors }) => {
+    if (errors.some((e) => e.type === ERROR.SALE_INVOICE_NUMBER_IS_EXISTS)) {
+      setErrors({
+        invoice_no: formatMessage({
+          id: 'sale_invoice_number_is_exists',
+        }),
+      });
+    }
+  };
+
   const formik = useFormik({
     validationSchema,
     initialValues: {
@@ -239,7 +250,8 @@ function InvoiceForm({
             saveInvokeSubmit({ action: 'update', ...payload });
             resetForm();
           })
-          .catch((error) => {
+          .catch((errors) => {
+            handleErrors(errors, { setErrors });
             setSubmitting(false);
           });
       } else {
@@ -257,12 +269,12 @@ function InvoiceForm({
             resetForm();
           })
           .catch((errors) => {
+            handleErrors(errors, { setErrors });
             setSubmitting(false);
           });
       }
     },
   });
-
   useEffect(() => {
     formik.setFieldValue('invoice_no', invoiceNumber);
   }, [invoiceNumber]);
@@ -373,7 +385,7 @@ export default compose(
   withInvoiceDetail(),
 
   withSettings(({ invoiceSettings }) => ({
-    invoiceNextNumber: invoiceSettings?.next_number,
-    invoiceNumberPrefix: invoiceSettings?.number_prefix,
+    invoiceNextNumber: invoiceSettings?.nextNumber,
+    invoiceNumberPrefix: invoiceSettings?.numberPrefix,
   })),
 )(InvoiceForm);

client/src/containers/Sales/Invoice/InvoiceFormHeader.js

@@ -123,7 +123,7 @@ function InvoiceFormHeader({
               className={classNames(
                 'form-group--select-list',
                 'form-group--invoice-date',
-                CLASSES.FILL
+                CLASSES.FILL,
               )}
               intent={
                 errors.invoice_date && touched.invoice_date && Intent.DANGER
@@ -149,7 +149,7 @@ function InvoiceFormHeader({
               className={classNames(
                 'form-group--select-list',
                 'form-group--due-date',
-                CLASSES.FILL
+                CLASSES.FILL,
               )}
               intent={errors.due_date && touched.due_date && Intent.DANGER}
               helperText={
@@ -175,23 +175,23 @@ function InvoiceFormHeader({
           helperText={
             <ErrorMessage name="invoice_no" {...{ errors, touched }} />
           }
-          rightElement={
-            <InputPrependButton
-              buttonProps={{
-                onClick: handleInvoiceNumberChange,
-                icon: <Icon icon={'settings-18'} />,
-              }}
-              tooltip={true}
-              tooltipProps={{
-                content: 'Setting your auto-generated invoice number',
-                position: Position.BOTTOM_LEFT,
-              }}
-            />
-          }
         >
           <InputGroup
             intent={errors.invoice_no && touched.invoice_no && Intent.DANGER}
             minimal={true}
+            rightElement={
+              <InputPrependButton
+                buttonProps={{
+                  onClick: handleInvoiceNumberChange,
+                  icon: <Icon icon={'settings-18'} />,
+                }}
+                tooltip={true}
+                tooltipProps={{
+                  content: 'Setting your auto-generated invoice number',
+                  position: Position.BOTTOM_LEFT,
+                }}
+              />
+            }
             {...getFieldProps('invoice_no')}
           />
         </FormGroup>

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

@@ -8,13 +8,22 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import withCustomersActions from 'containers/Customers/withCustomersActions';
 import withItemsActions from 'containers/Items/withItemsActions';
 import withInvoiceActions from './withInvoiceActions';
+import withSettingsActions from 'containers/Settings/withSettingsActions';
 
 import { compose } from 'utils';
 
 function Invoices({
+  // #withCustomersActions
   requestFetchCustomers,
+
+  // #withItemsActions
   requestFetchItems,
+
+  // #withInvoiceActions
   requsetFetchInvoice,
+
+  // #withSettingsActions
+  requestFetchOptions,
 }) {
   const history = useHistory();
   const { id } = useParams();
@@ -25,6 +34,8 @@ function Invoices({
     { enabled: !!id },
   );
 
+  const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
+
   // Handle fetch Items data table or list
   const fetchItems = useQuery('items-table', () => requestFetchItems({}));
 
@@ -65,4 +76,5 @@ export default compose(
   withInvoiceActions,
   withCustomersActions,
   withItemsActions,
+  withSettingsActions,
 )(Invoices);