From 7eca87215cbfa56a73ef6e5179b288d289ab0939 Mon Sep 17 00:00:00 2001
From: elforjani3 <elforjani3@gmail.com>
Date: Wed, 3 Mar 2021 16:39:44 +0200
Subject: [PATCH] feat(customer): add contact duplicate.

---
 .../CustomerForm/CustomerFloatingActions.js   |  6 ++--
 .../Customers/CustomerForm/CustomerForm.js    | 22 +++++++------
 .../CustomerForm/CustomerFormProvider.js      | 32 ++++++++++++++++---
 .../CustomersLanding/CustomersTable.js        |  7 ++++
 .../Customers/CustomersLanding/components.js  |  7 +++-
 5 files changed, 56 insertions(+), 18 deletions(-)

diff --git a/client/src/containers/Customers/CustomerForm/CustomerFloatingActions.js b/client/src/containers/Customers/CustomerForm/CustomerFloatingActions.js
index 017c4e5b0..d7b1abb0c 100644
--- a/client/src/containers/Customers/CustomerForm/CustomerFloatingActions.js
+++ b/client/src/containers/Customers/CustomerForm/CustomerFloatingActions.js
@@ -25,7 +25,7 @@ export default function CustomerFloatingActions() {
   const history = useHistory();
 
   // Customer form context.
-  const { customerId, setSubmitPayload } = useCustomerFormContext();
+  const { isNewMode,setSubmitPayload } = useCustomerFormContext();
 
   // Formik context.
   const { resetForm, submitForm, isSubmitting } = useFormikContext();
@@ -61,7 +61,7 @@ export default function CustomerFloatingActions() {
           intent={Intent.PRIMARY}
           type="submit"
           onClick={handleSubmitBtnClick}
-          text={customerId ? <T id={'edit'} /> : <T id={'save'} />}
+          text={!isNewMode ? <T id={'edit'} /> : <T id={'save'} />}
         />
         <Popover
           content={
@@ -88,7 +88,7 @@ export default function CustomerFloatingActions() {
         className={'ml1'}
         disabled={isSubmitting}
         onClick={handleClearBtnClick}
-        text={customerId ? <T id={'reset'} /> : <T id={'clear'} />}
+        text={!isNewMode ? <T id={'reset'} /> : <T id={'clear'} />}
       />
       {/* ----------- Cancel  ----------- */}
       <Button
diff --git a/client/src/containers/Customers/CustomerForm/CustomerForm.js b/client/src/containers/Customers/CustomerForm/CustomerForm.js
index 44255c755..4417d13d8 100644
--- a/client/src/containers/Customers/CustomerForm/CustomerForm.js
+++ b/client/src/containers/Customers/CustomerForm/CustomerForm.js
@@ -67,11 +67,13 @@ function CustomerForm({
     customer,
     customerId,
     submitPayload,
+    contactDuplicate,
     editCustomerMutate,
     createCustomerMutate,
+    isNewMode,
   } = useCustomerFormContext();
 
-  const isNewMode = !customerId;
+  // const isNewMode = !customerId;
   const history = useHistory();
   const { formatMessage } = useIntl();
 
@@ -82,11 +84,11 @@ function CustomerForm({
     () => ({
       ...defaultInitialValues,
       currency_code: baseCurrency,
-      ...transformToForm(customer, defaultInitialValues),
+      ...transformToForm(customer || contactDuplicate, defaultInitialValues),
     }),
-    [customer, baseCurrency],
+    [customer, contactDuplicate, baseCurrency],
   );
- 
+
   //Handles the form submit.
   const handleFormSubmit = (
     values,
@@ -97,9 +99,9 @@ function CustomerForm({
     const onSuccess = () => {
       AppToaster.show({
         message: formatMessage({
-          id: customer
-            ? 'the_item_customer_has_been_edited_successfully'
-            : 'the_customer_has_been_created_successfully',
+          id: isNewMode
+            ? 'the_customer_has_been_created_successfully'
+            : 'the_item_customer_has_been_edited_successfully',
         }),
         intent: Intent.SUCCESS,
       });
@@ -115,12 +117,12 @@ function CustomerForm({
       setSubmitting(false);
     };
 
-    if (customer && customer.id) {
+    if (isNewMode) {
+      createCustomerMutate(formValues).then(onSuccess).catch(onError);
+    } else {
       editCustomerMutate([customer.id, formValues])
         .then(onSuccess)
         .catch(onError);
-    } else {
-      createCustomerMutate(formValues).then(onSuccess).catch(onError);
     }
   };
 
diff --git a/client/src/containers/Customers/CustomerForm/CustomerFormProvider.js b/client/src/containers/Customers/CustomerForm/CustomerFormProvider.js
index 44bcdb946..f52dbccf9 100644
--- a/client/src/containers/Customers/CustomerForm/CustomerFormProvider.js
+++ b/client/src/containers/Customers/CustomerForm/CustomerFormProvider.js
@@ -1,4 +1,5 @@
 import React, { useState, createContext } from 'react';
+import { useLocation } from 'react-router-dom';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   useCustomers,
@@ -6,17 +7,30 @@ import {
   useCurrencies,
   useCreateCustomer,
   useEditCustomer,
+  useContact,
 } from 'hooks/query';
 
 const CustomerFormContext = createContext();
 
 function CustomerFormProvider({ customerId, ...props }) {
+  const { state } = useLocation();
+
+  const contactId = state?.action;
+
   // Handle fetch customer details.
   const { data: customer, isFetching: isCustomerLoading } = useCustomer(
     customerId,
     {
-        enabled: !!customerId,
-    }
+      enabled: !!customerId,
+    },
+  );
+
+  // Handle fetch contact duplicate details.
+  const { data: contactDuplicate, isFetching: isContactLoading } = useContact(
+    contactId,
+    {
+      enabled: !!contactId,
+    },
   );
 
   // Handle fetch customers data table
@@ -34,12 +48,17 @@ function CustomerFormProvider({ customerId, ...props }) {
   const { mutateAsync: editCustomerMutate } = useEditCustomer();
   const { mutateAsync: createCustomerMutate } = useCreateCustomer();
 
+  // determines whether the form new or duplicate mode.
+  const isNewMode = contactId || !customerId;
+
   const provider = {
     customerId,
     customer,
     customers,
     currencies,
+    contactDuplicate,
     submitPayload,
+    isNewMode,
 
     isCustomerLoading,
     isCustomersLoading,
@@ -47,12 +66,17 @@ function CustomerFormProvider({ customerId, ...props }) {
 
     setSubmitPayload,
     editCustomerMutate,
-    createCustomerMutate
+    createCustomerMutate,
   };
 
   return (
     <DashboardInsider
-      loading={isCustomerLoading || isCustomerLoading || isCurrenciesLoading}
+      loading={
+        isCustomerLoading ||
+        isCustomerLoading ||
+        isCurrenciesLoading ||
+        isContactLoading
+      }
       name={'customer-form'}
     >
       <CustomerFormContext.Provider value={provider} {...props} />
diff --git a/client/src/containers/Customers/CustomersLanding/CustomersTable.js b/client/src/containers/Customers/CustomersLanding/CustomersTable.js
index 522d29c6b..817718599 100644
--- a/client/src/containers/Customers/CustomersLanding/CustomersTable.js
+++ b/client/src/containers/Customers/CustomersLanding/CustomersTable.js
@@ -29,6 +29,8 @@ function CustomersTable({
 
   // #withAlerts
   openAlert,
+  // #withDialogActions
+  openDialog,
 }) {
   const history = useHistory();
 
@@ -66,6 +68,10 @@ function CustomersTable({
     history.push(`/customers/${customer.id}/edit`);
   };
 
+  const handleContactDuplicate = ({ id }) => {
+    openDialog('contact-duplicate', { contactId: id });
+  };
+
   if (isEmptyStatus) {
     return <CustomersEmptyStatus />;
   }
@@ -95,6 +101,7 @@ function CustomersTable({
       payload={{
         onDelete: handleCustomerDelete,
         onEdit: handleCustomerEdit,
+        onDuplicate: handleContactDuplicate,
       }}
       ContextMenu={ActionsMenu}
     />
diff --git a/client/src/containers/Customers/CustomersLanding/components.js b/client/src/containers/Customers/CustomersLanding/components.js
index 1ee4f7abf..1a840f762 100644
--- a/client/src/containers/Customers/CustomersLanding/components.js
+++ b/client/src/containers/Customers/CustomersLanding/components.js
@@ -18,7 +18,7 @@ import { useIntl } from 'react-intl';
  */
 export function ActionsMenu({
   row: { original },
-  payload: { onEdit, onDelete },
+  payload: { onEdit, onDelete ,onDuplicate },
 }) {
   const { formatMessage } = useIntl();
 
@@ -34,6 +34,11 @@ export function ActionsMenu({
         text={formatMessage({ id: 'edit_customer' })}
         onClick={safeCallback(onEdit, original)}
       />
+      <MenuItem
+        icon={<Icon icon="duplicate-18" />}
+        text={formatMessage({ id: 'duplicate' })}
+        onClick={safeCallback(onDuplicate, original)}
+      />
       <MenuItem
         icon={<Icon icon="trash-16" iconSize={16} />}
         text={formatMessage({ id: 'delete_customer' })}