From cda856ef8d1349f3e246b96de1831859e934f4d3 Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Wed, 11 Nov 2020 17:27:44 +0200 Subject: [PATCH] Fix : Customers. --- .../src/containers/Customers/CustomerForm.js | 118 +++++++++--------- .../src/containers/Customers/CustomersList.js | 30 +++-- .../Customers/withCustomerDetail.js | 2 +- client/src/lang/en/index.js | 7 +- 4 files changed, 86 insertions(+), 71 deletions(-) diff --git a/client/src/containers/Customers/CustomerForm.js b/client/src/containers/Customers/CustomerForm.js index bfa5fd523..7789f3adf 100644 --- a/client/src/containers/Customers/CustomerForm.js +++ b/client/src/containers/Customers/CustomerForm.js @@ -4,8 +4,6 @@ import { useFormik } 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 { CLASSES } from 'common/classes'; @@ -23,7 +21,43 @@ import withMediaActions from 'containers/Media/withMediaActions'; import withCustomers from 'containers/Customers//withCustomers'; import useMedia from 'hooks/useMedia'; -import { compose } 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. @@ -36,7 +70,7 @@ function CustomerForm({ customers, // #withCustomerDetail - customer, + customerDetail, // #withCustomersActions requestSubmitCustomer, @@ -47,11 +81,13 @@ function CustomerForm({ requestDeleteMedia, // #Props + customerId, onFormSubmit, onCancelForm, }) { + const isNewMode = !customerId; + const { formatMessage } = useIntl(); - const history = useHistory(); const [payload, setPayload] = useState({}); const { @@ -108,56 +144,15 @@ 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: null, - billing_address_phone: '', - - shipping_address_country: '', - shipping_address_1: '', - shipping_address_2: '', - shipping_address_city: '', - shipping_address_state: '', - shipping_address_postcode: null, - 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(customerDetail, defaultInitialValues), }), - [customer, defaultInitialValues], + [customerDetail, defaultInitialValues], ); const saveInvokeSubmit = useCallback( @@ -169,18 +164,20 @@ function CustomerForm({ ); 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, status: payload.publish }; - if (customer && customer.id) { - requestEditCustomer(customer.id, formValues) + + if (customerDetail && customerDetail.id) { + requestEditCustomer(customerDetail.id, formValues) .then((response) => { AppToaster.show({ message: formatMessage({ @@ -220,6 +217,7 @@ function CustomerForm({ values, touched, isSubmitting, + setErrors, handleSubmit, } = useFormik({ enableReinitialize: true, @@ -231,8 +229,8 @@ function CustomerForm({ }); const initialAttachmentFiles = useMemo(() => { - return customer && customer.media - ? customer.media.map((attach) => ({ + return customerDetail && customerDetail.media + ? customerDetail.media.map((attach) => ({ preview: attach.attachment_file, upload: true, metadata: { ...attach }, @@ -301,7 +299,7 @@ function CustomerForm({ errors={errors} values={values} touched={touched} - customerId={customer} + customerId={customerDetail} /> @@ -311,7 +309,7 @@ function CustomerForm({ onSubmitClick={handleSubmitClick} // customer={customer} onCancelClick={handleCancelClick} - customerId={customer} + customerId={customerDetail} /> ); diff --git a/client/src/containers/Customers/CustomersList.js b/client/src/containers/Customers/CustomersList.js index 63b0d3979..c901c3704 100644 --- a/client/src/containers/Customers/CustomersList.js +++ b/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. diff --git a/client/src/containers/Customers/withCustomerDetail.js b/client/src/containers/Customers/withCustomerDetail.js index bd7cc8a65..755c2fc1a 100644 --- a/client/src/containers/Customers/withCustomerDetail.js +++ b/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); diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js index 3b4bffaf8..ac1620d2e 100644 --- a/client/src/lang/en/index.js +++ b/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', };