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

client/src/containers/Items/ItemForm.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useEffect } from 'react';
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import * as Yup from 'yup';
 import { Formik, Form } from 'formik';
 import { Intent } from '@blueprintjs/core';
@@ -60,6 +60,9 @@ function ItemForm({
 }) {
   const isNewMode = !itemId;
 
+  // Holds data of submit button once clicked to form submit function.
+  const [submitPayload, setSubmitPayload] = useState({});
+
   const history = useHistory();
   const { formatMessage } = useIntl();
 
@@ -165,8 +168,8 @@ function ItemForm({
         message: formatMessage(
           {
             id: isNewMode
-              ? 'service_has_been_successful_created'
-              : 'the_item_has_been_successfully_edited',
+              ? 'the_item_has_been_created_successfully'
+              : 'the_item_has_been_edited_successfully',
           },
           {
             number: itemId,
@@ -174,9 +177,13 @@ function ItemForm({
         ),
         intent: Intent.SUCCESS,
       });
+      resetForm();
       setSubmitting(false);
-      history.push('/items');
       queryCache.removeQueries(['items-table']);
+
+      if (submitPayload.redirect) {
+        history.push('/items');
+      }
     };
     const onError = ({ response }) => {
       setSubmitting(false);
@@ -193,13 +200,11 @@ function ItemForm({
     }
   };
 
-  // useEffect(() => {
-  //   if (values.item_type) {
-  //     changePageSubtitle(formatMessage({ id: values.item_type }));
-  //   } else {
-  //     changePageSubtitle('');
-  //   }
-  // }, [values.item_type, changePageSubtitle, formatMessage]);
+  useEffect(() => {
+    if (itemDetail && itemDetail.type) {
+      changePageSubtitle(formatMessage({ id: itemDetail.type }));
+    }
+  }, [itemDetail, changePageSubtitle, formatMessage]);
 
   const initialAttachmentFiles = useMemo(() => {
     return itemDetail && itemDetail.media
@@ -229,9 +234,17 @@ function ItemForm({
     [setDeletedFiles, deletedFiles],
   );
 
-  const handleCancelBtnClick = useCallback(() => {
+  const handleCancelBtnClick = () => {
     history.goBack();
-  }, [history]);
+  };
+
+  const handleSubmitAndNewClick = () => {
+    setSubmitPayload({ redirect: false });
+  };
+
+  const handleSubmitClick = () => {
+    setSubmitPayload({ redirect: true });
+  };
 
   return (
     <div class={classNames(CLASSES.PAGE_FORM_ITEM)}>
@@ -241,7 +254,7 @@ function ItemForm({
         initialValues={initialValues}
         onSubmit={handleFormSubmit}
       >
-        {({ isSubmitting }) => (
+        {({ isSubmitting, handleSubmit }) => (
           <Form>
             <div class={classNames(CLASSES.PAGE_FORM_BODY)}>
               <ItemFormPrimarySection />
@@ -251,7 +264,10 @@ function ItemForm({
             <ItemFormFloatingActions
               isSubmitting={isSubmitting}
               itemId={itemId}
+              handleSubmit={handleSubmit}
               onCancelClick={handleCancelBtnClick}
+              onSubmitAndNewClick={handleSubmitAndNewClick}
+              onSubmitClick={handleSubmitClick}
             />
           </Form>
         )}

client/src/containers/Items/ItemFormBody.js

@@ -37,7 +37,7 @@ function ItemFormBody({ accountsList }) {
                       <T id={'i_sell_this_item'} />
                     </h3>
                   }
-                  defaultChecked={value}
+                  checked={value}
                   {...field}
                 />
               </FormGroup>
@@ -59,7 +59,7 @@ function ItemFormBody({ accountsList }) {
                   prefix={'$'}
                   inputGroupProps={{
                     medium: true,
-                    // intent: error && touched/ && Intent.DANGER,
+                    ...field,
                   }}
                   disabled={!form.values.sellable}
                   onChange={field.onChange}
@@ -132,9 +132,9 @@ function ItemFormBody({ accountsList }) {
                   prefix={'$'}
                   inputGroupProps={{
                     medium: true,
+                    ...field,
                   }}
                   disabled={!form.values.purchasable}
-                  {...field}
                 />
               </FormGroup>
             )}

client/src/containers/Items/ItemFormFloatingActions.js

@@ -3,23 +3,49 @@ import { Button, Intent, FormGroup, Checkbox } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 import { saveInvoke } from 'utils';
 import classNames from 'classnames';
-import { ErrorMessage, FastField } from 'formik';
+import { FastField } from 'formik';
 import { CLASSES } from 'common/classes';
 
 /**
  * Item form floating actions.
  */
-export default function ItemFormFloatingActions({ isSubmitting, itemId, onCancelClick }) {
+export default function ItemFormFloatingActions({
+  isSubmitting,
+  itemId,
+  handleSubmit,
+  onCancelClick,
+  onSubmitClick,
+  onSubmitAndNewClick,
+}) {
   const handleCancelBtnClick = (event) => {
     saveInvoke(onCancelClick, event.currentTarget.value);
   };
+
+  const handleSubmitBtnClick = (event) => {
+    saveInvoke(onSubmitClick, event);
+  };
+
+  const handleSubmitAndNewBtnClick = (event) => {
+    saveInvoke(onSubmitAndNewClick, event);
+  };
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      <Button intent={Intent.PRIMARY} disabled={isSubmitting} type="submit">
+      <Button
+        intent={Intent.PRIMARY}
+        disabled={isSubmitting}
+        onClick={handleSubmitBtnClick}
+        type="submit"
+      >
         {itemId ? <T id={'edit'} /> : <T id={'save'} />}
       </Button>
 
-      <Button className={'ml1'} disabled={isSubmitting}>
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleSubmitAndNewBtnClick}
+        type="submit"
+      >
         <T id={'save_new'} />
       </Button>
 
@@ -42,4 +68,4 @@ export default function ItemFormFloatingActions({ isSubmitting, itemId, onCancel
       </FastField>
     </div>
   );
-}
+}

client/src/containers/Items/ItemFormPrimarySection.js

@@ -9,6 +9,7 @@ import {
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 import { ErrorMessage, FastField } from 'formik';
+import { useIntl } from 'react-intl';
 import {
   CategoriesSelectList,
   Hint,
@@ -21,6 +22,7 @@ import { CLASSES } from 'common/classes';
 
 import withItemCategories from 'containers/Items/withItemCategories';
 import withAccounts from 'containers/Accounts/withAccounts';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
 import { compose, handleStringChange, inputIntent } from 'utils';
 
@@ -30,7 +32,12 @@ import { compose, handleStringChange, inputIntent } from 'utils';
 function ItemFormPrimarySection({
   // #withItemCategories
   categoriesList,
+
+  // #withDashboardActions
+  changePageSubtitle
 }) {
+  const { formatMessage } = useIntl();
+
   const itemTypeHintContent = (
     <>
       <div class="mb1">
@@ -78,6 +85,7 @@ function ItemFormPrimarySection({
                   inline={true}
                   onChange={handleStringChange((_value) => {
                     form.setFieldValue('type', _value);
+                    changePageSubtitle(formatMessage({ id: _value }));
                   })}
                   selectedValue={value}
                 >
@@ -171,4 +179,5 @@ export default compose(
   withItemCategories(({ categoriesList }) => ({
     categoriesList,
   })),
+  withDashboardActions
 )(ItemFormPrimarySection);

client/src/lang/en/index.js

@@ -219,7 +219,7 @@ export default {
     'The item category has been successfully edited.',
   the_item_category_has_been_successfully_deleted:
     'The item category has been successfully deleted',
-    once_delete_these_item_categories_you_will_not_able_restore_them:
+  once_delete_these_item_categories_you_will_not_able_restore_them:
     "Once you delete these categories, you won't be able to retrieve them later. Are you sure you want to delete them?",
   once_delete_these_views_you_will_not_able_restore_them:
     "Once you delete the custom view, you won't be able to restore it later. Are you sure you want to delete this view?",
@@ -809,11 +809,12 @@ export default {
   notes: 'Notes',
   i_purchase_this_item: 'I purchase this item from a vendor.',
   i_sell_this_item: 'I sell this item to a customer.',
-  select_display_name_as:'Select display name as',
+  select_display_name_as: 'Select display name as',
   opening_date: 'Opening date',
   item_code: 'Item code',
   quantity_on_hand: 'Quantity on hand',
   average_rate: 'Average rate',
   the_name_used_before: 'The name is already used.',
-  the_item_has_associated_transactions: 'The item has associated transactions.'
+  the_item_has_associated_transactions: 'The item has associated transactions.',
+  customer_has_sales_invoices: 'Customer has sales invoices',
 };