Merge remote-tracking branch 'origin/master'

client/src/containers/Customers/CustomerFloatingActions.js

@@ -3,13 +3,14 @@ import { Intent, Button } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
+import { saveInvoke } from 'utils';
 
 export default function CustomerFloatingActions({
-  isSubmitting,
-  resetForm,
   onSubmitClick,
+  onSubmitAndNewClick,
   onCancelClick,
 
+  isSubmitting,
   customerId,
 }) {
   return (
@@ -18,8 +19,8 @@ export default function CustomerFloatingActions({
         disabled={isSubmitting}
         intent={Intent.PRIMARY}
         type="submit"
-        onClick={() => {
-          onSubmitClick({ publish: true, redirect: true });
+        onClick={(event) => {
+          saveInvoke(onSubmitClick, event);
         }}
       >
         {customerId ? <T id={'edit'} /> : <T id={'save'} />}
@@ -30,8 +31,9 @@ export default function CustomerFloatingActions({
         intent={Intent.PRIMARY}
         className={'ml1'}
         name={'save_and_new'}
-        onClick={() => {
-          onSubmitClick({ publish: true, redirect: false });
+        type="submit"
+        onClick={(event) => {
+          saveInvoke(onSubmitAndNewClick, event);
         }}
       >
         <T id={'save_new'} />
@@ -39,8 +41,8 @@ export default function CustomerFloatingActions({
 
       <Button
         className={'ml1'}
-        onClick={() => {
-          onCancelClick && onCancelClick();
+        onClick={(event) => {
+          saveInvoke(onCancelClick, event);
         }}
       >
         <T id={'close'} />

client/src/containers/Customers/CustomerForm.js

@@ -1,12 +1,11 @@
 import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import * as Yup from 'yup';
-import { useFormik, Formik, Form } from 'formik';
+import { Formik, Form } from 'formik';
 import moment from 'moment';
 import { Intent } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-import { useHistory } from 'react-router-dom';
-import { pick } from 'lodash';
 import classNames from 'classnames';
+import { useHistory } from 'react-router-dom';
 
 import { CLASSES } from 'common/classes';
 import AppToaster from 'components/AppToaster';
@@ -23,7 +22,43 @@ import withMediaActions from 'containers/Media/withMediaActions';
 import withCustomers from 'containers/Customers//withCustomers';
 import useMedia from 'hooks/useMedia';
 
-import { compose, saveInvoke } from 'utils';
+import { compose, transformToForm } from 'utils';
+
+const defaultInitialValues = {
+  customer_type: 'business',
+  salutation: '',
+  first_name: '',
+  last_name: '',
+  company_name: '',
+  display_name: '',
+
+  email: '',
+  work_phone: '',
+  personal_phone: '',
+  website: '',
+  note: '',
+  active: true,
+
+  billing_address_country: '',
+  billing_address_1: '',
+  billing_address_2: '',
+  billing_address_city: '',
+  billing_address_state: '',
+  billing_address_postcode: '',
+  billing_address_phone: '',
+
+  shipping_address_country: '',
+  shipping_address_1: '',
+  shipping_address_2: '',
+  shipping_address_city: '',
+  shipping_address_state: '',
+  shipping_address_postcode: '',
+  shipping_address_phone: '',
+
+  opening_balance: '',
+  currency_code: '',
+  opening_balance_at: moment(new Date()).format('YYYY-MM-DD'),
+};
 
 /**
  * Customer form.
@@ -51,8 +86,11 @@ function CustomerForm({
   onFormSubmit,
   onCancelForm,
 }) {
-  const { formatMessage } = useIntl();
+  const isNewMode = !customerId;
+  const [submitPayload, setSubmitPayload] = useState({});
+
   const history = useHistory();
+  const { formatMessage } = useIntl();
   const {
     setFiles,
     saveMedia,
@@ -107,98 +145,55 @@ function CustomerForm({
     opening_balance_at: Yup.date(),
   });
 
-  const defaultInitialValues = useMemo(
-    () => ({
-      customer_type: 'business',
-      salutation: '',
-      first_name: '',
-      last_name: '',
-      company_name: '',
-      display_name: '',
-
-      email: '',
-      work_phone: '',
-      personal_phone: '',
-      website: '',
-      note: '',
-      active: true,
-
-      billing_address_country: '',
-      billing_address_1: '',
-      billing_address_2: '',
-      billing_address_city: '',
-      billing_address_state: '',
-      billing_address_postcode: '',
-      billing_address_phone: '',
-
-      shipping_address_country: '',
-      shipping_address_1: '',
-      shipping_address_2: '',
-      shipping_address_city: '',
-      shipping_address_state: '',
-      shipping_address_postcode: '',
-      shipping_address_phone: '',
-
-      opening_balance: '',
-      currency_code: '',
-      opening_balance_at: moment(new Date()).format('YYYY-MM-DD'),
-    }),
-    [],
-  );
-
+  /**
+   * Initial values in create and edit mode.
+   */
   const initialValues = useMemo(
     () => ({
-      ...(customer
-        ? {
-            ...pick(customer, Object.keys(defaultInitialValues)),
-          }
-        : {
-            ...defaultInitialValues,
-          }),
+      ...defaultInitialValues,
+      ...transformToForm(customer, defaultInitialValues),
     }),
     [customer, defaultInitialValues],
   );
 
   useEffect(() => {
-    customer && customer.id
+    !isNewMode
       ? changePageTitle(formatMessage({ id: 'edit_customer' }))
       : changePageTitle(formatMessage({ id: 'new_customer' }));
-  }, [changePageTitle, customer, formatMessage]);
+  }, [changePageTitle, isNewMode, formatMessage]);
 
+  //Handles the form submit.
   const handleFormSubmit = (
     values,
     { setSubmitting, resetForm, setErrors },
   ) => {
     const formValues = { ...values };
+
+    const onSuccess = () => {
+      AppToaster.show({
+        message: formatMessage({
+          id: customer ?
+            'the_item_customer_has_been_successfully_edited' :
+            'the_customer_has_been_successfully_created',
+        }),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+      resetForm();
+
+      if (!submitPayload.noRedirect) {
+        history.push('/customers');
+      }
+    };
+
+    const onError = () => {
+      setSubmitting(false);
+    };
+
     if (customer && customer.id) {
-      requestEditCustomer(customer.id, formValues)
-        .then((response) => {
-          AppToaster.show({
-            message: formatMessage({
-              id: 'the_item_customer_has_been_successfully_edited',
-            }),
-            intent: Intent.SUCCESS,
-          });
-          setSubmitting(false);
-          resetForm();
-        })
-        .catch((errors) => {
-          setSubmitting(false);
-        });
+      requestEditCustomer(customer.id, formValues).then(onSuccess).catch(onError);
     } else {
-      requestSubmitCustomer(formValues)
-        .then((response) => {
-          AppToaster.show({
-            message: formatMessage({
-              id: 'the_customer_has_been_successfully_created',
-            }),
-            intent: Intent.SUCCESS,
-          });
-          setSubmitting(false);
-        })
-        .catch((errors) => {
-          setSubmitting(false);
-        });
+      requestSubmitCustomer(formValues).then(onSuccess).catch(onError);
     }
   };
 
@@ -226,12 +221,14 @@ function CustomerForm({
     },
     [setDeletedFiles, deletedFiles],
   );
-  const handleCancelClick = useCallback(
-    (payload, event) => {
-     
-    },
-    [],
-  );
+
+  const handleCancelClick = () => {
+    history.goBack();
+  };
+
+  const handleSubmitAndNewClick = () => {
+    setSubmitPayload({ noRedirect: true });
+  };
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_CUSTOMER)}>
@@ -258,8 +255,9 @@ function CustomerForm({
 
             <CustomerFloatingActions
               isSubmitting={isSubmitting}
-              onCancelClick={handleCancelClick}
               customerId={customer}
+              onCancelClick={handleCancelClick}
+              onSubmitAndNewClick={handleSubmitAndNewClick}
             />
           </Form>
         )}

client/src/containers/Customers/CustomersList.js

@@ -87,17 +87,33 @@ function CustomersList({
     setDeleteCustomer(false);
   }, [setDeleteCustomer]);
 
-  // handle confirm delete customer.
-  const handleConfirmDeleteCustomer = useCallback(() => {
-    requestDeleteCustomer(deleteCustomer.id).then(() => {
+   const transformErrors = (errors) => {
+    if (errors.some((e) => e.type === 'CUSTOMER.HAS.SALES_INVOICES')) {
       AppToaster.show({
         message: formatMessage({
-          id: 'the_customer_has_been_successfully_deleted',
+          id: 'customer_has_sales_invoices',
         }),
-        intent: Intent.SUCCESS,
+        intent: Intent.DANGER,
+      });
+    }
+  };
+
+  // handle confirm delete customer.
+  const handleConfirmDeleteCustomer = useCallback(() => {
+    requestDeleteCustomer(deleteCustomer.id)
+      .then(() => {
+        setDeleteCustomer(false);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_customer_has_been_successfully_deleted',
+          }),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((errors) => {
+        setDeleteCustomer(false);
+        transformErrors(errors);
       });
-      setDeleteCustomer(false);
-    });
   }, [requestDeleteCustomer, deleteCustomer, formatMessage]);
 
   // Handle fetch data table.

client/src/containers/Customers/withCustomerDetail.js

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import { getCustomerById } from 'store/customers/customers.reducer';
 
 const mapStateToProps = (state, props) => ({
-  customer: getCustomerById(state, props.customerId),
+  customerDetail: getCustomerById(state, props.customerId),
 });
 
 export default connect(mapStateToProps);