fix: autofill the quick created customer/vendor

2026-02-17 05:10:31 +00:00 · 2024-08-13 23:55:53 +02:00
parent ec2b7e332e
commit d2193fdac0
14 changed files with 212 additions and 35 deletions
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormFormik.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormFormik.tsx
@@ -52,7 +52,7 @@ function CustomerFormFormik({
      ...defaultInitialValues,
      currency_code: base_currency,
      ...transformToForm(contactDuplicate || customer, defaultInitialValues),
-      ...initialCustomerValues,
+      ...transformToForm(initialCustomerValues, defaultInitialValues),
    }),
    [customer, contactDuplicate, base_currency, initialCustomerValues],
  );
@@ -62,7 +62,7 @@ function CustomerFormFormik({
    const { setSubmitting, resetForm } = formArgs;
    const formValues = { ...values };

-    const onSuccess = () => {
+    const onSuccess = (res) => {
      AppToaster.show({
        message: intl.get(
          isNewMode
@@ -73,8 +73,7 @@ function CustomerFormFormik({
      });
      setSubmitting(false);
      resetForm();
-
-      saveInvoke(onSubmitSuccess, values, formArgs, submitPayload);
+      saveInvoke(onSubmitSuccess, values, formArgs, submitPayload, res.data);
    };

    const onError = () => {
--- a/packages/webapp/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCreateCustomerDrawerContent.tsx
+++ b/packages/webapp/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCreateCustomerDrawerContent.tsx
@@ -5,14 +5,16 @@ import {
  DrawerBody,
  FormattedMessage as T,
 } from '@/components';
-
 import QuickCustomerFormDrawer from './QuickCustomerFormDrawer';
 import { DRAWERS } from '@/constants/drawers';

 /**
 * Quick create/edit customer drawer.
 */
-export default function QuickCreateCustomerDrawerContent({ displayName }) {
+export default function QuickCreateCustomerDrawerContent({
+  displayName,
+  autofillRef,
+}) {
  return (
    <React.Fragment>
      <DrawerHeaderContent
@@ -20,7 +22,10 @@ export default function QuickCreateCustomerDrawerContent({ displayName }) {
        title={<T id={'create_a_new_customer'} />}
      />
      <DrawerBody>
-        <QuickCustomerFormDrawer displayName={displayName} />
+        <QuickCustomerFormDrawer
+          displayName={displayName}
+          autofillRef={autofillRef}
+        />
      </DrawerBody>
    </React.Fragment>
  );
--- a/packages/webapp/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCustomerFormDrawer.tsx
+++ b/packages/webapp/src/containers/Drawers/QuickCreateCustomerDrawer/QuickCustomerFormDrawer.tsx
@@ -14,6 +14,7 @@ import CustomerFormFormik, {

 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import { DRAWERS } from '@/constants/drawers';
+import { useAddAutofillRef } from '@/hooks/state/autofill';

 /**
 * Drawer customer form loading wrapper.
@@ -28,9 +29,22 @@ function DrawerCustomerFormLoading({ children }) {
 /**
 * Quick customer form of the drawer.
 */
-function QuickCustomerFormDrawer({ displayName, closeDrawer, customerId }) {
+function QuickCustomerFormDrawer({
+  displayName,
+  autofillRef,
+  closeDrawer,
+  customerId,
+}) {
+  const addAutofillRef = useAddAutofillRef();
+
  // Handle the form submit request success.
-  const handleSubmitSuccess = () => {
+  const handleSubmitSuccess = (values, formArgs, submitPayload, res) => {
+    if (autofillRef) {
+      addAutofillRef(autofillRef, {
+        displayName: values.display_name,
+        customerId: res.id,
+      });
+    }
    closeDrawer(DRAWERS.QUICK_CREATE_CUSTOMER);
  };
  // Handle the form cancel action.
@@ -43,7 +57,7 @@ function QuickCustomerFormDrawer({ displayName, closeDrawer, customerId }) {
      <DrawerCustomerFormLoading>
        <CustomerFormCard>
          <CustomerFormFormik
-            initialValues={{ display_name: displayName }}
+            initialValues={{ first_name: displayName }}
            onSubmitSuccess={handleSubmitSuccess}
            onCancel={handleCancelForm}
          />
--- a/packages/webapp/src/containers/Drawers/QuickCreateCustomerDrawer/index.tsx
+++ b/packages/webapp/src/containers/Drawers/QuickCreateCustomerDrawer/index.tsx
@@ -2,11 +2,10 @@
 import React from 'react';
 import { Drawer, DrawerSuspense } from '@/components';
 import withDrawers from '@/containers/Drawer/withDrawers';
-
 import { compose } from '@/utils';

-const QuickCreateCustomerDrawerContent = React.lazy(() =>
-  import('./QuickCreateCustomerDrawerContent'),
+const QuickCreateCustomerDrawerContent = React.lazy(
+  () => import('./QuickCreateCustomerDrawerContent'),
 );

 /**
@@ -17,7 +16,7 @@ function QuickCreateCustomerDrawer({

  // #withDrawer
  isOpen,
-  payload,
+  payload: { autofillRef, displayName },
 }) {
  return (
    <Drawer
@@ -27,7 +26,10 @@ function QuickCreateCustomerDrawer({
      size={'80%'}
    >
      <DrawerSuspense>
-        <QuickCreateCustomerDrawerContent displayName={payload.displayName} />
+        <QuickCreateCustomerDrawerContent
+          displayName={displayName}
+          autofillRef={autofillRef}
+        />
      </DrawerSuspense>
    </Drawer>
  );
--- a/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickVendorFormDrawer.tsx
+++ b/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickVendorFormDrawer.tsx
@@ -16,6 +16,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import withDashboardActions from '@/containers/Dashboard/withDashboardActions';

 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
+import { useAddAutofillRef } from '@/hooks/state/autofill';
 import { DRAWERS } from '@/constants/drawers';

 /**
@@ -36,17 +37,20 @@ function QuickVendorFormDrawer({
  closeDrawer,
  vendorId,
  addQuickActionEvent,
+  autofillRef,
 }) {
  const { payload } = useDrawerContext();
+  const addAutofillRef = useAddAutofillRef();

  // Handle the form submit request success.
-  const handleSubmitSuccess = (values, form, submitPayload, response) => {
+  const handleSubmitSuccess = (values, form, submitPayload, res) => {
    if (!submitPayload.noRedirect) {
      closeDrawer(DRAWERS.QUICK_WRITE_VENDOR);
    }
-    if (payload.quickActionEvent) {
-      addQuickActionEvent(payload.quickActionEvent, {
-        vendorId: response.data.id,
+    if (autofillRef) {
+      addAutofillRef(autofillRef, {
+        displayName: values.display_name,
+        vendorId: res.id,
      });
    }
  };
@@ -60,7 +64,7 @@ function QuickVendorFormDrawer({
      <DrawerVendorFormLoading>
        <VendorFormCard>
          <VendorFormFormik
-            initialValues={{ display_name: displayName }}
+            initialValues={{ first_name: displayName }}
            onSubmitSuccess={handleSubmitSuccess}
            onCancel={handleCancelForm}
          />
--- a/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.tsx
+++ b/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.tsx
@@ -12,7 +12,7 @@ import { DRAWERS } from '@/constants/drawers';
 /**
 * Quick create/edit vendor drawer.
 */
-export default function QuickWriteVendorDrawerContent({ displayName }) {
+export default function QuickWriteVendorDrawerContent({ displayName, autofillRef }) {
  return (
    <React.Fragment>
      <DrawerHeaderContent
@@ -21,7 +21,7 @@ export default function QuickWriteVendorDrawerContent({ displayName }) {

      />
      <DrawerBody>
-        <QuickVendorFormDrawer displayName={displayName} />
+        <QuickVendorFormDrawer displayName={displayName} autofillRef={autofillRef} />
      </DrawerBody>
    </React.Fragment>
  );
--- a/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/index.tsx
+++ b/packages/webapp/src/containers/Drawers/QuickWriteVendorDrawer/index.tsx
@@ -17,7 +17,7 @@ function QuickWriteVendorDrawer({

  // #withDrawer
  isOpen,
-  payload,
+  payload: { displayName, autofillRef },
 }) {
  return (
    <Drawer
@@ -25,10 +25,9 @@ function QuickWriteVendorDrawer({
      name={name}
      style={{ minWidth: '700px', maxWidth: '900px' }}
      size={'80%'}
-      payload={payload}
    >
      <DrawerSuspense>
-        <QuickWriteVendorDrawerContent displayName={payload.displayName} />
+        <QuickWriteVendorDrawerContent displayName={displayName} autofillRef={autofillRef} />
      </DrawerSuspense>
    </Drawer>
  );
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormFormik.tsx
@@ -34,6 +34,7 @@ function VendorFormFormik({
  organization: { base_currency },

  // #ownProps
+  initialValues,
  onSubmitSuccess,
  onSubmitError,
  onCancel,
@@ -54,14 +55,15 @@ function VendorFormFormik({
  /**
   * Initial values in create and edit mode.
   */
-  const initialValues = useMemo(
+  const initialFormValues = useMemo(
    () => ({
      ...defaultInitialValues,
+      ...transformToForm(initialValues, defaultInitialValues),
      currency_code: base_currency,
      ...transformToForm(vendor, defaultInitialValues),
      ...transformToForm(contactDuplicate, defaultInitialValues),
    }),
-    [vendor, contactDuplicate, base_currency],
+    [vendor, contactDuplicate, base_currency, initialValues],
  );

  // Handles the form submit.
@@ -84,7 +86,7 @@ function VendorFormFormik({
      setSubmitting(false);
      resetForm();

-      safeInvoke(onSubmitSuccess, values, form, submitPayload, response);
+      safeInvoke(onSubmitSuccess, values, form, submitPayload, response.data);
    };

    const onError = () => {
@@ -112,7 +114,7 @@ function VendorFormFormik({
        validationSchema={
          isNewMode ? CreateVendorFormSchema : EditVendorFormSchema
        }
-        initialValues={initialValues}
+        initialValues={initialFormValues}
        onSubmit={handleFormSubmit}
      >
        <Form>