feat(webapp): refactor customer and vendor select component

2026-02-17 21:30:31 +00:00 · 2023-06-22 17:26:33 +02:00
parent ca4d543482
commit eadaac30d6
16 changed files with 495 additions and 607 deletions
--- a/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.tsx
@@ -3,17 +3,17 @@ import React from 'react';
 import styled from 'styled-components';
 import classNames from 'classnames';
 import { FormGroup, InputGroup, Classes, Position } from '@blueprintjs/core';
-import { FastField, ErrorMessage } from 'formik';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
 import { FeatureCan, FormattedMessage as T } from '@/components';
 import { CLASSES } from '@/constants/classes';

 import {
  FFormGroup,
-  VendorSelectField,
  FieldRequiredHint,
  Icon,
  VendorDrawerLink,
+  VendorsSelect,
 } from '@/components';

 import { useBillFormContext } from './BillFormProvider';
@@ -43,43 +43,7 @@ function BillFormHeader() {
  return (
    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
      {/* ------- Vendor name ------ */}
-      <FastField
-        name={'vendor_id'}
-        vendors={vendors}
-        shouldUpdate={vendorsFieldShouldUpdate}
-      >
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FFormGroup
-            name={'vendor_id'}
-            label={<T id={'vendor_name'} />}
-            inline={true}
-            className={classNames(
-              'form-group--vendor-name',
-              'form-group--select-list',
-              CLASSES.FILL,
-            )}
-            labelInfo={<FieldRequiredHint />}
-          >
-            <VendorSelectField
-              contacts={vendors}
-              selectedContactId={value}
-              defaultSelectText={<T id={'select_vender_account'} />}
-              onContactSelected={(contact) => {
-                form.setFieldValue('vendor_id', contact.id);
-                form.setFieldValue('currency_code', contact?.currency_code);
-              }}
-              popoverFill={true}
-              allowCreate={true}
-            />
-
-            {value && (
-              <VendorButtonLink vendorId={value}>
-                <T id={'view_vendor_details'} />
-              </VendorButtonLink>
-            )}
-          </FFormGroup>
-        )}
-      </FastField>
+      <BillFormVendorField />

      {/* ----------- Exchange rate ----------- */}
      <BillExchangeRateInputField
@@ -190,6 +154,43 @@ function BillFormHeader() {
  );
 }

+/**
+ * Vendor select field of bill form.
+ * @returns {JSX.Element}
+ */
+function BillFormVendorField() {
+  const { values, setFieldValue } = useFormikContext();
+  const { vendors } = useBillFormContext();
+
+  return (
+    <FFormGroup
+      name={'vendor_id'}
+      label={<T id={'vendor_name'} />}
+      inline={true}
+      labelInfo={<FieldRequiredHint />}
+      vendors={vendors}
+      fastField={true}
+      shouldUpdate={vendorsFieldShouldUpdate}
+    >
+      <VendorsSelect
+        name={'vendor_id'}
+        items={vendors}
+        placeholder={<T id={'select_vender_account'} />}
+        onItemChange={(contact) => {
+          setFieldValue('vendor_id', contact.id);
+          setFieldValue('currency_code', contact?.currency_code);
+        }}
+        allowCreate={true}
+      />
+      {values.vendor_id && (
+        <VendorButtonLink vendorId={values.vendor_id}>
+          <T id={'view_vendor_details'} />
+        </VendorButtonLink>
+      )}
+    </FFormGroup>
+  );
+}
+
 export default compose(withDialogActions)(BillFormHeader);

 const VendorButtonLink = styled(VendorDrawerLink)`
--- a/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.tsx
@@ -9,17 +9,17 @@ import {
  ControlGroup,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { FastField, ErrorMessage } from 'formik';
+import { FastField, ErrorMessage, useFormikContext } from 'formik';
 import { CLASSES } from '@/constants/classes';

 import {
  FFormGroup,
-  VendorSelectField,
  FieldRequiredHint,
  InputPrependButton,
  Icon,
  FormattedMessage as T,
  VendorDrawerLink,
+  VendorsSelect,
 } from '@/components';
 import {
  vendorsFieldShouldUpdate,
@@ -51,9 +51,6 @@ function VendorCreditNoteFormHeaderFields({
  vendorcreditNumberPrefix,
  vendorcreditNextNumber,
 }) {
-  // Vendor Credit form context.
-  const { vendors } = useVendorCreditNoteFormContext();
-
  // Handle vendor credit number changing.
  const handleVendorCreditNumberChange = () => {
    openDialog('vendor-credit-form');
@@ -81,39 +78,7 @@ function VendorCreditNoteFormHeaderFields({
  return (
    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
      {/* ----------- Vendor name ----------- */}
-      <FastField
-        name={'vendor_id'}
-        vendors={vendors}
-        shouldUpdate={vendorsFieldShouldUpdate}
-      >
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FFormGroup
-            name={'vendor_id'}
-            label={<T id={'vendor_name'} />}
-            inline={true}
-            className={classNames(CLASSES.FILL, 'form-group--vendor')}
-            labelInfo={<FieldRequiredHint />}
-          >
-            <VendorSelectField
-              contacts={vendors}
-              selectedContactId={value}
-              defaultSelectText={<T id={'select_vender_account'} />}
-              onContactSelected={(contact) => {
-                form.setFieldValue('vendor_id', contact.id);
-                form.setFieldValue('currency_code', contact?.currency_code);
-              }}
-              popoverFill={true}
-              allowCreate={true}
-            />
-
-            {value && (
-              <VendorButtonLink vendorId={value}>
-                <T id={'view_vendor_details'} />
-              </VendorButtonLink>
-            )}
-          </FFormGroup>
-        )}
-      </FastField>
+      <VendorCreditFormVendorSelect />

      {/* ----------- Exchange rate ----------- */}
      <VendorCreditNoteExchangeRateInputField
@@ -205,6 +170,45 @@ function VendorCreditNoteFormHeaderFields({
  );
 }

+/**
+ * Vendor select field of vendor credit form.
+ * @returns {React.ReactNode}
+ */
+function VendorCreditFormVendorSelect() {
+  const { values, setFieldValue } = useFormikContext();
+
+  // Vendor Credit form context.
+  const { vendors } = useVendorCreditNoteFormContext();
+
+  return (
+    <FFormGroup
+      name={'vendor_id'}
+      label={<T id={'vendor_name'} />}
+      inline={true}
+      vendors={vendors}
+      shouldUpdate={vendorsFieldShouldUpdate}
+      labelInfo={<FieldRequiredHint />}
+    >
+      <VendorsSelect
+        name={'vendor_id'}
+        items={vendors}
+        placeholder={<T id={'select_vender_account'} />}
+        onItemChange={(contact) => {
+          setFieldValue('vendor_id', contact.id);
+          setFieldValue('currency_code', contact?.currency_code);
+        }}
+        popoverFill={true}
+        allowCreate={true}
+      />
+      {values.vendor_id && (
+        <VendorButtonLink vendorId={values.vendor_id}>
+          <T id={'view_vendor_details'} />
+        </VendorButtonLink>
+      )}
+    </FFormGroup>
+  );
+}
+
 export default compose(
  withDialogActions,
  withSettings(({ vendorsCreditNoteSetting }) => ({
--- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.tsx
@@ -12,14 +12,13 @@ import {
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, Field, useFormikContext, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from '@/components';
+import { FormattedMessage as T, VendorsSelect } from '@/components';
 import { toSafeInteger } from 'lodash';
 import { CLASSES } from '@/constants/classes';

 import {
  FFormGroup,
  AccountsSelect,
-  VendorSelectField,
  FieldRequiredHint,
  InputPrependText,
  Money,
@@ -55,8 +54,7 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
  } = useFormikContext();

  // Payment made form context.
-  const { vendors, accounts, isNewMode, setPaymentVendorId } =
-    usePaymentMadeFormContext();
+  const { accounts } = usePaymentMadeFormContext();

  // Sumation of payable full-amount.
  const payableFullAmount = useMemo(
@@ -82,41 +80,7 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
  return (
    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
      {/* ------------ Vendor name ------------ */}
-      <FastField
-        name={'vendor_id'}
-        vendors={vendors}
-        shouldUpdate={vendorsFieldShouldUpdate}
-      >
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FFormGroup
-            name={'vendor_id'}
-            label={<T id={'vendor_name'} />}
-            inline={true}
-            className={classNames('form-group--select-list', Classes.FILL)}
-            labelInfo={<FieldRequiredHint />}
-          >
-            <VendorSelectField
-              contacts={vendors}
-              selectedContactId={value}
-              defaultSelectText={<T id={'select_vender_account'} />}
-              onContactSelected={(contact) => {
-                form.setFieldValue('vendor_id', contact.id);
-                form.setFieldValue('currency_code', contact?.currency_code);
-                setPaymentVendorId(contact.id);
-              }}
-              disabled={!isNewMode}
-              popoverFill={true}
-              allowCreate={true}
-            />
-
-            {value && (
-              <VendorButtonLink vendorId={value}>
-                <T id={'view_vendor_details'} />
-              </VendorButtonLink>
-            )}
-          </FFormGroup>
-        )}
-      </FastField>
+      <PaymentFormVendorSelect />

      {/* ----------- Exchange rate ----------- */}
      <PaymentMadeExchangeRateInputField
@@ -258,6 +222,48 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
  );
 }

+/**
+ * Vendor select field of payment receive form.
+ * @returns {React.ReactNode}
+ */
+function PaymentFormVendorSelect() {
+  // Formik form context.
+  const { values, setFieldValue } = useFormikContext();
+
+  // Payment made form context.
+  const { vendors, isNewMode, setPaymentVendorId } =
+    usePaymentMadeFormContext();
+
+  return (
+    <FFormGroup
+      name={'vendor_id'}
+      label={<T id={'vendor_name'} />}
+      inline={true}
+      labelInfo={<FieldRequiredHint />}
+      vendors={vendors}
+      shouldUpdate={vendorsFieldShouldUpdate}
+    >
+      <VendorsSelect
+        name={'vendor_id'}
+        items={vendors}
+        placeholder={<T id={'select_vender_account'} />}
+        onItemChange={(contact) => {
+          setFieldValue('vendor_id', contact.id);
+          setFieldValue('currency_code', contact?.currency_code);
+          setPaymentVendorId(contact.id);
+        }}
+        disabled={!isNewMode}
+        allowCreate={true}
+      />
+      {values.vendor_id && (
+        <VendorButtonLink vendorId={values.vendor_id}>
+          <T id={'view_vendor_details'} />
+        </VendorButtonLink>
+      )}
+    </FFormGroup>
+  );
+}
+
 export default compose(withCurrentOrganization())(PaymentMadeFormHeaderFields);

 const VendorButtonLink = styled(VendorDrawerLink)`