feat(customer): add contact duplicate.

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

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
+          id: isNewMode
-            ? 'the_item_customer_has_been_edited_successfully'
+            ? 'the_customer_has_been_created_successfully'
-            : '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);
     }
   };
 

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} />

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}
     />

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' })}