fix(webapp): customer/vendor select should update deps

2026-02-15 12:20:31 +00:00 · 2023-06-22 22:07:39 +02:00
parent 4b95c19d3e
commit 5f191cf335
18 changed files with 56 additions and 26 deletions
--- a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx
@@ -140,7 +140,8 @@ function ExpenseFormCustomerSelect() {
      labelInfo={<Hint />}
      inline={true}
      name={'customer_id'}
-      customers={customers}
+      fastField={true}
+      shouldUpdateDeps={{ items: customers }}
      shouldUpdate={customersFieldShouldUpdate}
    >
      <CustomersSelect
@@ -149,6 +150,9 @@ function ExpenseFormCustomerSelect() {
        placeholder={<T id={'select_customer_account'} />}
        allowCreate={true}
        popoverFill={true}
+        fastField={true}
+        shouldUpdateDeps={{ items: customers }}
+        shouldUpdate={customersFieldShouldUpdate}
      />
    </FormGroup>
  );
--- a/packages/webapp/src/containers/Expenses/ExpenseForm/utils.tsx
+++ b/packages/webapp/src/containers/Expenses/ExpenseForm/utils.tsx
@@ -104,7 +104,7 @@ export const transformToEditForm = (
 */
 export const customersFieldShouldUpdate = (newProps, oldProps) => {
  return (
-    newProps.customers !== oldProps.customers ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items ||
    defaultFastFieldShouldUpdate(newProps, oldProps)
  );
 };
--- a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.tsx
@@ -2,12 +2,12 @@
 import React from 'react';
 import styled from 'styled-components';
 import classNames from 'classnames';
-import { FormGroup, InputGroup, Classes, Position } from '@blueprintjs/core';
 import { FastField, ErrorMessage, useFormikContext } from 'formik';
+import { FormGroup, InputGroup, Classes, Position } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
+
 import { FeatureCan, FormattedMessage as T } from '@/components';
 import { CLASSES } from '@/constants/classes';
-
 import {
  FFormGroup,
  FieldRequiredHint,
@@ -168,9 +168,9 @@ function BillFormVendorField() {
      label={<T id={'vendor_name'} />}
      inline={true}
      labelInfo={<FieldRequiredHint />}
-      vendors={vendors}
      fastField={true}
      shouldUpdate={vendorsFieldShouldUpdate}
+      shouldUpdateDeps={{ items: vendors }}
    >
      <VendorsSelect
        name={'vendor_id'}
@@ -181,6 +181,9 @@ function BillFormVendorField() {
          setFieldValue('currency_code', contact?.currency_code);
        }}
        allowCreate={true}
+        fastField={true}
+        shouldUpdate={vendorsFieldShouldUpdate}
+        shouldUpdateDeps={{ items: vendors }}
      />
      {values.vendor_id && (
        <VendorButtonLink vendorId={values.vendor_id}>
--- a/packages/webapp/src/containers/Purchases/Bills/BillForm/utils.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillForm/utils.tsx
@@ -19,7 +19,10 @@ import {
  ensureEntriesHaveEmptyLine,
 } from '@/containers/Entries/utils';
 import { useCurrentOrganization } from '@/hooks/state';
-import { isLandedCostDisabled, getEntriesTotal } from '@/containers/Entries/utils';
+import {
+  isLandedCostDisabled,
+  getEntriesTotal,
+} from '@/containers/Entries/utils';
 import { useBillFormContext } from './BillFormProvider';

 export const MIN_LINES_NUMBER = 1;
@@ -153,7 +156,7 @@ export const handleDeleteErrors = (errors) => {
 */
 export const vendorsFieldShouldUpdate = (newProps, oldProps) => {
  return (
-    newProps.vendors !== oldProps.vendors ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items ||
    defaultFastFieldShouldUpdate(newProps, oldProps)
  );
 };
--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.tsx
@@ -185,9 +185,10 @@ function VendorCreditFormVendorSelect() {
      name={'vendor_id'}
      label={<T id={'vendor_name'} />}
      inline={true}
-      vendors={vendors}
-      shouldUpdate={vendorsFieldShouldUpdate}
      labelInfo={<FieldRequiredHint />}
+      fastField={true}
+      shouldUpdate={vendorsFieldShouldUpdate}
+      shouldUpdateDeps={{ items: vendors }}
    >
      <VendorsSelect
        name={'vendor_id'}
@@ -199,6 +200,9 @@ function VendorCreditFormVendorSelect() {
        }}
        popoverFill={true}
        allowCreate={true}
+        fastField={true}
+        shouldUpdate={vendorsFieldShouldUpdate}
+        shouldUpdateDeps={{ items: vendors }}
      />
      {values.vendor_id && (
        <VendorButtonLink vendorId={values.vendor_id}>
--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/utils.tsx
+++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/utils.tsx
@@ -113,7 +113,7 @@ export const transformFormValuesToRequest = (values) => {
 */
 export const vendorsFieldShouldUpdate = (newProps, oldProps) => {
  return (
-    newProps.vendors !== oldProps.vendors ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items ||
    defaultFastFieldShouldUpdate(newProps, oldProps)
  );
 };
--- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.tsx
@@ -238,10 +238,11 @@ function PaymentFormVendorSelect() {
    <FFormGroup
      name={'vendor_id'}
      label={<T id={'vendor_name'} />}
-      inline={true}
      labelInfo={<FieldRequiredHint />}
-      vendors={vendors}
+      inline={true}
+      fastField={true}
      shouldUpdate={vendorsFieldShouldUpdate}
+      shouldUpdateDeps={{ items: vendors }}
    >
      <VendorsSelect
        name={'vendor_id'}
@@ -254,6 +255,9 @@ function PaymentFormVendorSelect() {
        }}
        disabled={!isNewMode}
        allowCreate={true}
+        fastField={true}
+        shouldUpdate={vendorsFieldShouldUpdate}
+        shouldUpdateDeps={{ items: vendors }}
      />
      {values.vendor_id && (
        <VendorButtonLink vendorId={values.vendor_id}>
--- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/utils.tsx
+++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/utils.tsx
@@ -74,7 +74,7 @@ export const transformToNewPageEntries = (entries) => {
 */
 export const vendorsFieldShouldUpdate = (newProps, oldProps) => {
  return (
-    newProps.vendors !== oldProps.vendors ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items ||
    defaultFastFieldShouldUpdate(newProps, oldProps)
  );
 };
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx
@@ -191,11 +191,11 @@ function CreditNoteCustomersSelect() {
    <FFormGroup
      name={'customer_id'}
      label={<T id={'customer_name'} />}
-      customers={customers}
      labelInfo={<FieldRequiredHint />}
      inline={true}
      fastField={true}
      shouldUpdate={customerNameFieldShouldUpdate}
+      shouldUpdateDeps={{ items: customers }}
    >
      <CustomersSelect
        name={'customer_id'}
@@ -207,6 +207,9 @@ function CreditNoteCustomersSelect() {
        }}
        popoverFill={true}
        allowCreate={true}
+        fastField={true}
+        shouldUpdate={customerNameFieldShouldUpdate}
+        shouldUpdateDeps={{ items: customers }}
      />
      {values.customer_id && (
        <CustomerButtonLink customerId={values.customer_id}>
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/utils.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/utils.tsx
@@ -116,7 +116,7 @@ export const transformFormValuesToRequest = (values) => {
 */
 export const customerNameFieldShouldUpdate = (newProps, oldProps) => {
  return (
-    newProps.customers !== oldProps.customers ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items ||
    defaultFastFieldShouldUpdate(newProps, oldProps)
  );
 };
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx
@@ -244,9 +244,9 @@ function EstimateFormCustomerSelect() {
      inline={true}
      labelInfo={<FieldRequiredHint />}
      name={'customer_id'}
-      customers={customers}
-      shouldUpdate={customersFieldShouldUpdate}
      fastField={true}
+      shouldUpdate={customersFieldShouldUpdate}
+      shouldUpdateDeps={{ items: customers }}
    >
      <CustomersSelect
        name={'customer_id'}
@@ -259,6 +259,8 @@ function EstimateFormCustomerSelect() {
        popoverFill={true}
        allowCreate={true}
        fastField={true}
+        shouldUpdate={customersFieldShouldUpdate}
+        shouldUpdateDeps={{ items: customers }}
      />
      {values.customer_id && (
        <CustomerButtonLink customerId={values.customer_id}>
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/utils.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/utils.tsx
@@ -80,7 +80,7 @@ export const transformToEditForm = (estimate) => {
 */
 export const customersFieldShouldUpdate = (newProps, oldProps) => {
  return (
-    newProps.customers !== oldProps.customers ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items ||
    defaultFastFieldShouldUpdate(newProps, oldProps)
  );
 };
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx
@@ -259,12 +259,12 @@ function InvoiceFormCustomerSelect() {
  return (
    <FFormGroup
      name={'customer_id'}
-      customers={customers}
-      shouldUpdate={customerNameFieldShouldUpdate}
      label={<T id={'customer_name'} />}
      inline={true}
      labelInfo={<FieldRequiredHint />}
      fastField={true}
+      shouldUpdate={customerNameFieldShouldUpdate}
+      shouldUpdateDeps={{ items: customers }}
    >
      <CustomersSelect
        name={'customer_id'}
@@ -276,6 +276,8 @@ function InvoiceFormCustomerSelect() {
        }}
        allowCreate={true}
        fastField={true}
+        shouldUpdate={customerNameFieldShouldUpdate}
+        shouldUpdateDeps={{ items: customers }}
      />
      {values.customer_id && (
        <CustomerButtonLink customerId={values.customer_id}>
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx
@@ -114,7 +114,7 @@ export const transformErrors = (errors, { setErrors }) => {
 */
 export const customerNameFieldShouldUpdate = (newProps, oldProps) => {
  return (
-    newProps.customers !== oldProps.customers ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items||
    defaultFastFieldShouldUpdate(newProps, oldProps)
  );
 };
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx
@@ -341,9 +341,9 @@ function PaymentReceiveCustomerSelect() {
      inline={true}
      labelInfo={<FieldRequiredHint />}
      name={'customer_id'}
-      customers={customers}
      fastField={true}
      shouldUpdate={customersFieldShouldUpdate}
+      shouldUpdateDeps={{ items: customers }}
    >
      <CustomersSelect
        name={'customer_id'}
@@ -358,6 +358,8 @@ function PaymentReceiveCustomerSelect() {
        disabled={!isNewMode}
        allowCreate={true}
        fastField={true}
+        shouldUpdate={customersFieldShouldUpdate}
+        shouldUpdateDeps={{ items: customers }}
      />
      {values.customer_id && (
        <CustomerButtonLink customerId={values.customer_id}>
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.tsx
@@ -129,7 +129,7 @@ export const fullAmountPaymentEntries = (entries) => {
 */
 export const customersFieldShouldUpdate = (newProps, oldProps) => {
  return (
-    newProps.customers !== oldProps.customers ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items ||
    defaultFastFieldShouldUpdate(newProps, oldProps)
  );
 };
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx
@@ -245,11 +245,11 @@ function ReceiptFormCustomerSelect() {
    <FFormGroup
      name={'customer_id'}
      label={<T id={'customer_name'} />}
-      inline={true}
      labelInfo={<FieldRequiredHint />}
-      customers={customers}
+      inline={true}
      fastField={true}
      shouldUpdate={customersFieldShouldUpdate}
+      shouldUpdateDeps={{ items: customers }}
    >
      <CustomersSelect
        name={'customer_id'}
@@ -261,6 +261,9 @@ function ReceiptFormCustomerSelect() {
        }}
        popoverFill={true}
        allowCreate={true}
+        fastField={true}
+        shouldUpdate={customersFieldShouldUpdate}
+        shouldUpdateDeps={{ items: customers }}
      />
      {values.customer_id && (
        <CustomerButtonLink customerId={values.customer_id}>
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/utils.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/utils.tsx
@@ -104,7 +104,7 @@ export const accountsFieldShouldUpdate = (newProps, oldProps) => {
 */
 export const customersFieldShouldUpdate = (newProps, oldProps) => {
  return (
-    newProps.customers !== oldProps.customers ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items ||
    defaultFastFieldShouldUpdate(newProps, oldProps)
  );
 };