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

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