feat( contact duplicate): contact duplicate dialog.

client/src/common/contactsOptions.js

@@ -0,0 +1,4 @@
+export default [
+  { name: 'Customer', path: 'customers' },
+  { name: 'Vendor', path: 'vendors' },
+];

client/src/components/DialogsContainer.js

@@ -9,7 +9,7 @@ import ExchangeRateFormDialog from 'containers/Dialogs/ExchangeRateFormDialog';
 import InventoryAdjustmentDialog from 'containers/Dialogs/InventoryAdjustmentFormDialog';
 import PaymentViaVoucherDialog from 'containers/Dialogs/PaymentViaVoucherDialog';
 import KeyboardShortcutsDialog from 'containers/Dialogs/keyboardShortcutsDialog';
-
+import ContactDuplicateDialog from 'containers/Dialogs/ContactDuplicateDialog';
 /**
  * Dialogs container.
  */
@@ -24,6 +24,7 @@ export default function DialogsContainer() {
       <InventoryAdjustmentDialog dialogName={'inventory-adjustment'} />
       <PaymentViaVoucherDialog dialogName={'payment-via-voucher'} />
       <KeyboardShortcutsDialog dialogName={'keyboard-shortcuts'} />
+      <ContactDuplicateDialog dialogName={'contact-duplicate'} />
     </div>
   );
 }

client/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateDialogContent.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import ContactDuplicateForm from './ContactDuplicateForm';
+import { ContactDuplicateProvider } from './ContactDuplicateProvider';
+
+import 'style/pages/ContactDuplicate/ContactDuplicateDialog.scss';
+
+export default function ContactDuplicateDialogContent({
+  // #ownProp
+  contact,
+  dialogName,
+}) {
+  return (
+    <ContactDuplicateProvider dialogName={dialogName} contactId={contact}>
+      <ContactDuplicateForm />
+    </ContactDuplicateProvider>
+  );
+}

client/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateForm.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import * as Yup from 'yup';
+import { formatMessage } from 'services/intl';
+import { Formik, Form, Field, ErrorMessage } from 'formik';
+import { inputIntent } from 'utils';
+import { ListSelect, FieldRequiredHint } from 'components';
+import { Button, FormGroup, Intent, Classes } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'react-intl';
+import { useHistory } from 'react-router-dom';
+import { useContactDuplicateFromContext } from './ContactDuplicateProvider';
+
+import Contacts from 'common/contactsOptions';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+function ContactDuplicateForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  const history = useHistory();
+
+  const { dialogName, contactId } = useContactDuplicateFromContext();
+
+  const validationSchema = Yup.object().shape({
+    contact_type: Yup.string()
+      .required()
+      .label(formatMessage({ id: 'contact_type_' })),
+  });
+
+  const initialValues = {
+    contact_type: '',
+  };
+
+  // Handle cancel button click.
+  const handleCancelClick = () => {
+    closeDialog(dialogName);
+  };
+
+  // Handle form submit.
+  const handleFormSubmit = (values) => {
+    closeDialog(dialogName);
+    history.push(`${values.contact_type}/new?duplicate=${contactId}`, {
+      action: contactId,
+    });
+  };
+
+  return (
+    <Formik
+      validationSchema={validationSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+    >
+      {({ isSubmitting }) => (
+        <Form>
+          <div className={Classes.DIALOG_BODY}>
+            <p>
+              <T id={'are_you_sure_want_to_duplicate'} />
+            </p>
+
+            {/*------------ Contact Type -----------*/}
+            <Field name={'contact_type'}>
+              {({ form, meta: { error, touched } }) => (
+                <FormGroup
+                  label={<T id={'contact_type'} />}
+                  labelInfo={<FieldRequiredHint />}
+                  intent={inputIntent({ error, touched })}
+                  className={'form-group--select-list'}
+                  inline={true}
+                  helperText={<ErrorMessage name="contact_type" />}
+                >
+                  <ListSelect
+                    items={Contacts}
+                    onItemSelect={({ path }) =>
+                      form.setFieldValue('contact_type', path)
+                    }
+                    defaultText={<T id={'select_contact'} />}
+                    textProp={'name'}
+                    selectedItemProp={'name'}
+                    filterable={false}
+                    popoverProps={{ minimal: true }}
+                  />
+                </FormGroup>
+              )}
+            </Field>
+          </div>
+
+          <div className={Classes.DIALOG_FOOTER}>
+            <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+              <Button onClick={handleCancelClick}>
+                <T id={'cancel'} />
+              </Button>
+
+              <Button
+                intent={Intent.PRIMARY}
+                type="submit"
+                disabled={isSubmitting}
+              >
+                <T id={'duplicate'} />
+              </Button>
+            </div>
+          </div>
+        </Form>
+      )}
+    </Formik>
+  );
+}
+
+export default compose(withDialogActions)(ContactDuplicateForm);

client/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateProvider.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { DialogContent } from 'components';
+
+const ContactDuplicateContext = React.createContext();
+
+/**
+ *  contact duplicate provider.
+ */
+function ContactDuplicateProvider({ contactId, dialogName, ...props }) {
+  // Provider state.
+  const provider = {
+    dialogName,
+    contactId,
+  };
+
+  return (
+    <DialogContent name={'contact-duplicate'}>
+      <ContactDuplicateContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useContactDuplicateFromContext = () =>
+  React.useContext(ContactDuplicateContext);
+
+export { ContactDuplicateProvider, useContactDuplicateFromContext };

client/src/containers/Dialogs/ContactDuplicateDialog/index.js

@@ -0,0 +1,33 @@
+import React, { lazy } from 'react';
+import { FormattedMessage as T } from 'react-intl';
+import { Dialog, DialogSuspense } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const ContactDialogContent = lazy(() =>
+  import('./ContactDuplicateDialogContent'),
+);
+/**
+ * Contact duplicate dialog.
+ */
+function ContactDuplicateDialog({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'duplicate_contact'} />}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      className={'dialog--contact-duplicate'}
+      isOpen={isOpen}
+    >
+      <DialogSuspense>
+        <ContactDialogContent
+          dialogName={dialogName}
+          contact={payload.contactId}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(ContactDuplicateDialog);

client/src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateFormDialogContent.js

@@ -3,9 +3,6 @@ import React from 'react';
 import ExchangeRateForm from './ExchangeRateForm';
 import { ExchangeRateFormProvider } from './ExchangeRateFormProvider';
 
-import withExchangeRateDetail from 'containers/ExchangeRates/withExchangeRateDetail';
-import { compose } from 'utils';
-
 import 'style/pages/ExchangeRate/ExchangeRateDialog.scss';
 
 /**

client/src/hooks/query/contacts.js

@@ -0,0 +1,14 @@
+import { useQuery } from 'react-query';
+import useApiRequest from '../useRequest';
+
+/**
+ * Retrieve the contact duplicate.
+ */
+export function useContact(id, props) {
+  const apiRequest = useApiRequest();
+
+  return useQuery(['CONTACT', id], () => apiRequest.get(`contacts/${id}`), {
+    select: (res) => res.data.customer,
+    ...props,
+  });
+}

client/src/hooks/query/index.js

@@ -20,3 +20,4 @@ export * from './settings';
 export * from './users';
 export * from './invite';
 export * from './exchangeRates';
+export * from './contacts';

client/src/static/json/icons.js

@@ -406,4 +406,10 @@ export default {
     ],
     viewBox: '0 0 24 24',
   },
+  'duplicate-18': {
+    path: [
+      'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z',
+    ],
+    viewBox: '0 0 24 24',
+  },
 };

client/src/style/pages/ContactDuplicate/ContactDuplicateDialog.scss

@@ -0,0 +1,20 @@
+.dialog--contact-duplicate {
+  .bp3-dialog-body {
+    .bp3-form-group.bp3-inline {
+      margin: 18px 0px;
+      .bp3-label {
+        min-width: 100px;
+      }
+    }
+    .bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
+      width: 260px;
+    }
+  }
+
+  .bp3-dialog-footer {
+    .bp3-dialog-footer-actions .bp3-button {
+      margin-left: 8px;
+      min-width: 65px;
+    }
+  }
+}