feat(webapp): refactor customer and vendor select component

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx

@@ -10,7 +10,7 @@ import {
   ControlGroup,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { FastField, ErrorMessage, useFormikContext } from 'formik';
+import { FastField, ErrorMessage, useFormikContext, useFormik } from 'formik';
 import * as R from 'ramda';
 
 import {
@@ -19,12 +19,12 @@ import {
   Col,
   Row,
   CustomerDrawerLink,
-  CustomerSelectField,
   FieldRequiredHint,
   Icon,
   InputPrependButton,
   FeatureCan,
   FInputGroup,
+  CustomersSelect,
 } from '@/components';
 import {
   momentFormatter,
@@ -134,49 +134,13 @@ InvoiceFormInvoiceNumberField.displayName = 'InvoiceFormInvoiceNumberField';
  */
 export default function InvoiceFormHeaderFields() {
   // Invoice form context.
-  const { customers, projects } = useInvoiceFormContext();
+  const { projects } = useInvoiceFormContext();
   const { values } = useFormikContext();
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/* ----------- Customer name ----------- */}
-      <FastField
-        name={'customer_id'}
-        customers={customers}
-        shouldUpdate={customerNameFieldShouldUpdate}
-      >
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FFormGroup
-            name={'customer_id'}
-            label={<T id={'customer_name'} />}
-            inline={true}
-            className={classNames(
-              'form-group--customer-name',
-              'form-group--select-list',
-              CLASSES.FILL,
-            )}
-            labelInfo={<FieldRequiredHint />}
-          >
-            <CustomerSelectField
-              contacts={customers}
-              selectedContactId={value}
-              defaultSelectText={<T id={'select_customer_account'} />}
-              onContactSelected={(customer) => {
-                form.setFieldValue('customer_id', customer.id);
-                form.setFieldValue('currency_code', customer?.currency_code);
-              }}
-              popoverFill={true}
-              allowCreate={true}
-            />
-
-            {value && (
-              <CustomerButtonLink customerId={value}>
-                <T id={'view_customer_details'} />
-              </CustomerButtonLink>
-            )}
-          </FFormGroup>
-        )}
-      </FastField>
+      <InvoiceFormCustomerSelect />
 
       {/* ----------- Exchange rate ----------- */}
       <InvoiceExchangeRateInputField
@@ -284,6 +248,44 @@ export default function InvoiceFormHeaderFields() {
   );
 }
 
+/**
+ * Customer select field of the invoice form.
+ * @returns {React.ReactNode}
+ */
+function InvoiceFormCustomerSelect() {
+  const { customers } = useInvoiceFormContext();
+  const { values, setFieldValue } = useFormikContext();
+
+  return (
+    <FFormGroup
+      name={'customer_id'}
+      customers={customers}
+      shouldUpdate={customerNameFieldShouldUpdate}
+      label={<T id={'customer_name'} />}
+      inline={true}
+      labelInfo={<FieldRequiredHint />}
+      fastField={true}
+    >
+      <CustomersSelect
+        name={'customer_id'}
+        items={customers}
+        placeholder={<T id={'select_customer_account'} />}
+        onItemChange={(customer) => {
+          setFieldValue('customer_id', customer.id);
+          setFieldValue('currency_code', customer?.currency_code);
+        }}
+        allowCreate={true}
+        fastField={true}
+      />
+      {values.customer_id && (
+        <CustomerButtonLink customerId={values.customer_id}>
+          <T id={'view_customer_details'} />
+        </CustomerButtonLink>
+      )}
+    </FFormGroup>
+  );
+}
+
 const CustomerButtonLink = styled(CustomerDrawerLink)`
   font-size: 11px;
   margin-top: 6px;