From 54400b223f08bc702804155521f0c6b65f6863ba Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Sat, 18 Oct 2025 13:27:05 +0200
Subject: [PATCH] wip

---
 .../src/components/Select/DisplayNameList.tsx |  96 +++---
 .../src/components/Select/SalutationList.tsx  |  22 +-
 .../CustomerForm/CustomerAddressTabs.tsx      | 286 +++++++-----------
 .../CustomerFormAfterPrimarySection.tsx       |  74 ++---
 .../CustomerFormPrimarySection.tsx            | 123 +++-----
 .../CustomerForm/CustomerNotePanel.tsx        |  21 +-
 .../CustomerForm/CustomerTypeRadioField.tsx   |  45 +--
 .../Items/ItemFormPrimarySection.tsx          |  39 +--
 .../VendorFormAfterPrimarySection.tsx         |  74 ++---
 .../VendorForm/VendorFormPrimarySection.tsx   | 139 +++------
 10 files changed, 339 insertions(+), 580 deletions(-)

diff --git a/packages/webapp/src/components/Select/DisplayNameList.tsx b/packages/webapp/src/components/Select/DisplayNameList.tsx
index 922f02884..d42da993c 100644
--- a/packages/webapp/src/components/Select/DisplayNameList.tsx
+++ b/packages/webapp/src/components/Select/DisplayNameList.tsx
@@ -1,50 +1,68 @@
-// @ts-nocheck
-import React from 'react';
+import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
-import { ListSelect } from './ListSelect';
+import { FSelect } from '../Forms';
+import { useFormikContext } from 'formik';
 
-export function DisplayNameList({
-  salutation,
-  firstName,
-  lastName,
-  company,
-  ...restProps
-}) {
-  const formats = [
-    {
-      format: '{1} {2} {3}',
-      values: [salutation, firstName, lastName],
-      required: [1],
+export type DisplayNameListItem = { label: string };
+
+export interface DisplayNameListProps
+  extends Omit<
+    React.ComponentProps<typeof FSelect>,
+    'items' | 'valueAccessor' | 'textAccessor' | 'labelAccessor'
+  > {}
+
+export function DisplayNameList({ ...restProps }: DisplayNameListProps) {
+  const {
+    values: {
+      first_name: firstName,
+      last_name: lastName,
+      company_name: companyName,
+      salutation,
     },
-    { format: '{1} {2}', values: [firstName, lastName], required: [] },
-    { format: '{1}, {2}', values: [firstName, lastName], required: [1, 2] },
-    { format: '{1}', values: [company], required: [1] },
-  ];
+  } = useFormikContext<any>();
 
-  const formatOptions = formats
-    .filter(
-      (format) =>
-        !format.values.some((value, index) => {
-          return !value && format.required.indexOf(index + 1) !== -1;
+  const formats = useMemo(
+    () => [
+      {
+        format: '{1} {2} {3}',
+        values: [salutation, firstName, lastName],
+        required: [1],
+      },
+      { format: '{1} {2}', values: [firstName, lastName], required: [] },
+      { format: '{1}, {2}', values: [firstName, lastName], required: [1, 2] },
+      { format: '{1}', values: [companyName], required: [1] },
+    ],
+    [firstName, lastName, companyName, salutation],
+  );
+
+  const formatOptions: DisplayNameListItem[] = useMemo(
+    () =>
+      formats
+        .filter(
+          (format) =>
+            !format.values.some((value, index) => {
+              return !value && format.required.indexOf(index + 1) !== -1;
+            }),
+        )
+        .map((formatOption) => {
+          const { format, values } = formatOption;
+          let label = format;
+
+          values.forEach((value, index) => {
+            const replaceWith = value || '';
+            label = label.replace(`{${index + 1}}`, replaceWith).trim();
+          });
+          return { label: label.replace(/\s+/g, ' ') };
         }),
-    )
-    .map((formatOption) => {
-      const { format, values } = formatOption;
-      let label = format;
-
-      values.forEach((value, index) => {
-        const replaceWith = value || '';
-        label = label.replace(`{${index + 1}}`, replaceWith).trim();
-      });
-      return { label: label.replace(/\s+/g, ' ') };
-    });
+    [formats],
+  );
 
   return (
-    <ListSelect
+    <FSelect
       items={formatOptions}
-      selectedItemProp={'label'}
-      textProp={'label'}
-      defaultText={intl.get('select_display_name_as')}
+      valueAccessor={'label'}
+      textAccessor={'label'}
+      placeholder={intl.get('select_display_name_as')}
       filterable={false}
       {...restProps}
     />
diff --git a/packages/webapp/src/components/Select/SalutationList.tsx b/packages/webapp/src/components/Select/SalutationList.tsx
index 0ea7a670c..a57dd1229 100644
--- a/packages/webapp/src/components/Select/SalutationList.tsx
+++ b/packages/webapp/src/components/Select/SalutationList.tsx
@@ -1,10 +1,16 @@
-// @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
+import { FSelect } from '../Forms';
 
-import { ListSelect } from './ListSelect';
+export type SalutationItem = { key: string; label: string };
 
-export function SalutationList({ ...restProps }) {
+export interface SalutationListProps
+  extends Omit<
+    React.ComponentProps<typeof FSelect>,
+    'items' | 'valueAccessor' | 'textAccessor' | 'labelAccessor'
+  > {}
+
+export function SalutationList({ ...restProps }: SalutationListProps) {
   const saluations = [
     intl.get('mr'),
     intl.get('mrs'),
@@ -12,17 +18,17 @@ export function SalutationList({ ...restProps }) {
     intl.get('miss'),
     intl.get('dr'),
   ];
-  const items = saluations.map((saluation) => ({
+  const items: SalutationItem[] = saluations.map((saluation) => ({
     key: saluation,
     label: saluation,
   }));
 
   return (
-    <ListSelect
+    <FSelect
       items={items}
-      selectedItemProp={'key'}
-      textProp={'label'}
-      defaultText={intl.get('salutation')}
+      valueAccessor={'key'}
+      textAccessor={'label'}
+      placeholder={intl.get('salutation')}
       filterable={false}
       {...restProps}
     />
diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerAddressTabs.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerAddressTabs.tsx
index 07b61e5d3..7005804c7 100644
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerAddressTabs.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerAddressTabs.tsx
@@ -1,10 +1,12 @@
 // @ts-nocheck
 import React from 'react';
-import { FormGroup, InputGroup, TextArea } from '@blueprintjs/core';
 import { Row, Col } from '@/components';
-import { FormattedMessage as T } from '@/components';
-import { FastField, ErrorMessage } from 'formik';
-import { inputIntent } from '@/utils';
+import {
+  FormattedMessage as T,
+  FFormGroup,
+  FInputGroup,
+  FTextArea,
+} from '@/components';
 
 const CustomerBillingAddress = ({}) => {
   return (
@@ -15,105 +17,65 @@ const CustomerBillingAddress = ({}) => {
             <T id={'billing_address'} />
           </h4>
           {/*------------ Billing Address country -----------*/}
-          <FastField name={'billing_address_country'}>
-            {({ field, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                className={'form-group--journal-number'}
-                intent={inputIntent({ error, touched })}
-                inline={true}
-                helperText={<ErrorMessage name="billing_address_country" />}
-                label={<T id={'country'} />}
-              >
-                <InputGroup {...field} />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'billing_address_country'}
+            inline={true}
+            label={<T id={'country'} />}
+          >
+            <FInputGroup name={'billing_address_country'} />
+          </FFormGroup>
 
           {/*------------ Billing Address 1  -----------*/}
-          <FastField name={'billing_address_1'}>
-            {({ field, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'address_line_1'} />}
-                className={'form-group--address_line_1'}
-                intent={inputIntent({ error, touched })}
-                inline={true}
-                helperText={<ErrorMessage name="billing_address_1" />}
-              >
-                <TextArea {...field} />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'billing_address_1'}
+            label={<T id={'address_line_1'} />}
+            inline={true}
+          >
+            <FTextArea name={'billing_address_1'} />
+          </FFormGroup>
 
           {/*------------ Billing Address 2  -----------*/}
-          <FastField name={'billing_address_2'}>
-            {({ field, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'address_line_2'} />}
-                className={'form-group--journal-number'}
-                intent={inputIntent({ error, touched })}
-                inline={true}
-                helperText={<ErrorMessage name="billing_address_2" />}
-              >
-                <TextArea {...field} />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'billing_address_2'}
+            label={<T id={'address_line_2'} />}
+            inline={true}
+          >
+            <FTextArea name={'billing_address_2'} />
+          </FFormGroup>
           {/*------------ Billing Address city  -----------*/}
-          <FastField name={'billing_address_city'}>
-            {({ field, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'city_town'} />}
-                className={'form-group--journal-number'}
-                intent={inputIntent({ error, touched })}
-                inline={true}
-                helperText={<ErrorMessage name="billing_address_city" />}
-              >
-                <InputGroup {...field} />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'billing_address_city'}
+            label={<T id={'city_town'} />}
+            inline={true}
+          >
+            <FInputGroup name={'billing_address_city'} />
+          </FFormGroup>
 
           {/*------------ Billing Address state  -----------*/}
-          <FastField name={'billing_address_state'}>
-            {({ field, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'state'} />}
-                className={'form-group--journal-number'}
-                intent={inputIntent({ error, touched })}
-                inline={true}
-                helperText={<ErrorMessage name="billing_address_state" />}
-              >
-                <InputGroup {...field} />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'billing_address_state'}
+            label={<T id={'state'} />}
+            inline={true}
+          >
+            <FInputGroup name={'billing_address_state'} />
+          </FFormGroup>
           {/*------------ Billing Address postcode  -----------*/}
-          <FastField name={'billing_address_postcode'}>
-            {({ field, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'zip_code'} />}
-                intent={inputIntent({ error, touched })}
-                inline={true}
-                helperText={<ErrorMessage name="billing_address_postcode" />}
-              >
-                <InputGroup {...field} />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'billing_address_postcode'}
+            label={<T id={'zip_code'} />}
+            inline={true}
+          >
+            <FInputGroup name={'billing_address_postcode'} />
+          </FFormGroup>
 
           {/*------------ Billing Address phone  -----------*/}
-          <FastField name={'billing_address_phone'}>
-            {({ field, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'phone'} />}
-                intent={inputIntent({ error, touched })}
-                inline={true}
-                helperText={<ErrorMessage name="billing_address_phone" />}
-              >
-                <InputGroup {...field} />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'billing_address_phone'}
+            label={<T id={'phone'} />}
+            inline={true}
+          >
+            <FInputGroup name={'billing_address_phone'} />
+          </FFormGroup>
         </Col>
 
         <Col xs={6}>
@@ -121,107 +83,67 @@ const CustomerBillingAddress = ({}) => {
             <T id={'shipping_address'} />
           </h4>
           {/*------------ Shipping Address country -----------*/}
-          <FastField name={'shipping_address_country'}>
-            {({ field, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'country'} />}
-                className={'form-group--journal-number'}
-                intent={inputIntent({ error, touched })}
-                inline={true}
-                helperText={<ErrorMessage name="shipping_address_country" />}
-              >
-                <InputGroup {...field} />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'shipping_address_country'}
+            label={<T id={'country'} />}
+            inline={true}
+          >
+            <FInputGroup name={'shipping_address_country'} />
+          </FFormGroup>
 
           {/*------------ Shipping Address 1  -----------*/}
-          <FastField name={'shipping_address_1'}>
-            {({ field, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'address_line_1'} />}
-                className={'form-group--journal-number'}
-                intent={inputIntent({ error, touched })}
-                inline={true}
-                helperText={<ErrorMessage name="shipping_address_1" />}
-              >
-                <TextArea {...field} />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'shipping_address_1'}
+            label={<T id={'address_line_1'} />}
+            inline={true}
+          >
+            <FTextArea name={'shipping_address_1'} />
+          </FFormGroup>
 
           {/*------------ Shipping Address 2  -----------*/}
-          <FastField name={'shipping_address_2'}>
-            {({ field, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'address_line_2'} />}
-                className={'form-group--journal-number'}
-                intent={inputIntent({ error, touched })}
-                inline={true}
-                helperText={<ErrorMessage name="shipping_address_2" />}
-              >
-                <TextArea {...field} />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'shipping_address_2'}
+            label={<T id={'address_line_2'} />}
+            inline={true}
+          >
+            <FTextArea name={'shipping_address_2'} />
+          </FFormGroup>
 
           {/*------------ Shipping Address city  -----------*/}
-          <FastField name={'shipping_address_city'}>
-            {({ field, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'city_town'} />}
-                className={'form-group--journal-number'}
-                intent={inputIntent({ error, touched })}
-                inline={true}
-                helperText={<ErrorMessage name="shipping_address_city" />}
-              >
-                <InputGroup {...field} />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'shipping_address_city'}
+            label={<T id={'city_town'} />}
+            inline={true}
+          >
+            <FInputGroup name={'shipping_address_city'} />
+          </FFormGroup>
 
           {/*------------ Shipping Address state  -----------*/}
-          <FastField name={'shipping_address_state'}>
-            {({ field, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'state'} />}
-                className={'form-group--journal-number'}
-                intent={inputIntent({ error, touched })}
-                inline={true}
-                helperText={<ErrorMessage name="shipping_address_state" />}
-              >
-                <InputGroup {...field} />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'shipping_address_state'}
+            label={<T id={'state'} />}
+            inline={true}
+          >
+            <FInputGroup name={'shipping_address_state'} />
+          </FFormGroup>
 
           {/*------------ Shipping Address postcode  -----------*/}
-          <FastField name={'shipping_address_postcode'}>
-            {({ field, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'zip_code'} />}
-                intent={inputIntent({ error, touched })}
-                inline={true}
-                helperText={<ErrorMessage name="shipping_address_postcode" />}
-              >
-                <InputGroup {...field} />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'shipping_address_postcode'}
+            label={<T id={'zip_code'} />}
+            inline={true}
+          >
+            <FInputGroup name={'shipping_address_postcode'} />
+          </FFormGroup>
 
           {/*------------ Shipping Address phone  -----------*/}
-          <FastField name={'shipping_address_phone'}>
-            {({ field, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'phone'} />}
-                intent={inputIntent({ error, touched })}
-                inline={true}
-                helperText={<ErrorMessage name="shipping_address_phone" />}
-              >
-                <InputGroup {...field} />
-              </FormGroup>
-            )}
-          </FastField>
+          <FFormGroup
+            name={'shipping_address_phone'}
+            label={<T id={'phone'} />}
+            inline={true}
+          >
+            <FInputGroup name={'shipping_address_phone'} />
+          </FFormGroup>
         </Col>
       </Row>
     </div>
diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.tsx
index ff82a3c2b..bdc547c7b 100644
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.tsx
@@ -1,72 +1,40 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
-import { FastField, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from '@/components';
-import { inputIntent } from '@/utils';
+import { ControlGroup } from '@blueprintjs/core';
+import { FormattedMessage as T, FFormGroup, FInputGroup } from '@/components';
 
 export default function CustomerFormAfterPrimarySection({}) {
   return (
-    <div class="customer-form__after-primary-section-content">
+    <div className={'customer-form__after-primary-section-content'}>
       {/*------------ Customer email -----------*/}
-      <FastField name={'email'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'email'} />}
-            className={'form-group--email'}
-            label={<T id={'customer_email'} />}
-            inline={true}
-          >
-            <InputGroup {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'email'}
+        label={<T id={'customer_email'} />}
+        inline={true}
+      >
+        <FInputGroup name={'email'} />
+      </FFormGroup>
 
       {/*------------ Phone number -----------*/}
-      <FormGroup
-        className={'form-group--phone-number'}
+      <FFormGroup
+        name={'personal_phone'}
         label={<T id={'phone_number'} />}
         inline={true}
       >
         <ControlGroup>
-          <FastField name={'personal_phone'}>
-            {({ field, meta: { error, touched } }) => (
-              <InputGroup
-                intent={inputIntent({ error, touched })}
-                placeholder={intl.get('personal')}
-                {...field}
-              />
-            )}
-          </FastField>
-
-          <FastField name={'work_phone'}>
-            {({ field, meta: { error, touched } }) => (
-              <InputGroup
-                intent={inputIntent({ error, touched })}
-                placeholder={intl.get('work')}
-                {...field}
-              />
-            )}
-          </FastField>
+          <FInputGroup
+            name={'personal_phone'}
+            placeholder={intl.get('personal')}
+          />
+          <FInputGroup name={'work_phone'} placeholder={intl.get('work')} />
         </ControlGroup>
-      </FormGroup>
+      </FFormGroup>
 
       {/*------------ Customer website -----------*/}
-      <FastField name={'website'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'website'} />}
-            className={'form-group--website'}
-            label={<T id={'website'} />}
-            inline={true}
-          >
-            <InputGroup placeholder={'http://'} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup name={'website'} label={<T id={'website'} />} inline={true}>
+        <FInputGroup name={'website'} placeholder={'http://'} />
+      </FFormGroup>
     </div>
   );
 }
diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormPrimarySection.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormPrimarySection.tsx
index 0e91a76c2..2f23a3a97 100644
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormPrimarySection.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerFormPrimarySection.tsx
@@ -10,6 +10,8 @@ import {
   SalutationList,
   DisplayNameList,
   FormattedMessage as T,
+  FInputGroup,
+  FFormGroup,
 } from '@/components';
 import CustomerTypeRadioField from './CustomerTypeRadioField';
 import { CLASSES } from '@/constants/classes';
@@ -28,100 +30,51 @@ export default function CustomerFormPrimarySection({}) {
       <CustomerTypeRadioField />
 
       {/**----------- Contact name -----------*/}
-      <FormGroup
-        className={classNames('form-group--contact_name')}
+      <FFormGroup
+        name={'salutation'}
         label={<T id={'contact_name'} />}
         inline={true}
       >
         <ControlGroup>
-          <FastField name={'salutation'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <SalutationList
-                onItemSelect={(salutation) => {
-                  form.setFieldValue('salutation', salutation.label);
-                }}
-                selectedItem={value}
-                popoverProps={{ minimal: true }}
-                className={classNames(
-                  CLASSES.FORM_GROUP_LIST_SELECT,
-                  CLASSES.FILL,
-                  'input-group--salutation-list',
-                  'select-list--fill-button',
-                )}
-              />
-            )}
-          </FastField>
-
-          <FastField name={'first_name'}>
-            {({ field, meta: { error, touched } }) => (
-              <InputGroup
-                placeholder={intl.get('first_name')}
-                intent={inputIntent({ error, touched })}
-                className={classNames('input-group--first-name')}
-                inputRef={(ref) => (firstNameFieldRef.current = ref)}
-                {...field}
-              />
-            )}
-          </FastField>
-
-          <FastField name={'last_name'}>
-            {({ field, meta: { error, touched } }) => (
-              <InputGroup
-                placeholder={intl.get('last_name')}
-                intent={inputIntent({ error, touched })}
-                className={classNames('input-group--last-name')}
-                {...field}
-              />
-            )}
-          </FastField>
+          <SalutationList
+            name={'salutation'}
+            popoverProps={{ minimal: true }}
+          />
+          <FInputGroup
+            name={'first_name'}
+            placeholder={intl.get('first_name')}
+            inputRef={(ref) => (firstNameFieldRef.current = ref)}
+          />
+          <FInputGroup name={'last_name'} placeholder={intl.get('last_name')} />
         </ControlGroup>
-      </FormGroup>
+      </FFormGroup>
 
       {/*----------- Company Name -----------*/}
-      <FastField name={'company_name'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            className={classNames('form-group--company_name')}
-            label={<T id={'company_name'} />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'company_name'} />}
-            inline={true}
-          >
-            <InputGroup {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'company_name'}
+        label={<T id={'company_name'} />}
+        inline={true}
+      >
+        <InputGroup name={'company_name'} />
+      </FFormGroup>
 
       {/*----------- Display Name -----------*/}
-      <Field name={'display_name'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            helperText={<ErrorMessage name={'display_name'} />}
-            intent={inputIntent({ error, touched })}
-            label={
-              <>
-                <T id={'display_name'} />
-                <FieldRequiredHint />
-                <Hint />
-              </>
-            }
-            className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)}
-            inline={true}
-          >
-            <DisplayNameList
-              firstName={form.values.first_name}
-              lastName={form.values.last_name}
-              company={form.values.company_name}
-              salutation={form.values.salutation}
-              onItemSelect={(displayName) => {
-                form.setFieldValue('display_name', displayName.label);
-              }}
-              selectedItem={value}
-              popoverProps={{ minimal: true }}
-            />
-          </FormGroup>
-        )}
-      </Field>
+      <FFormGroup
+        name={'display_name'}
+        label={
+          <>
+            <T id={'display_name'} />
+            <FieldRequiredHint />
+            <Hint />
+          </>
+        }
+        inline={true}
+      >
+        <DisplayNameList
+          name={'display_name'}
+          popoverProps={{ minimal: true }}
+        />
+      </FFormGroup>
     </div>
   );
 }
diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerNotePanel.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerNotePanel.tsx
index b4e062d1d..e3577a38c 100644
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerNotePanel.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerNotePanel.tsx
@@ -1,26 +1,15 @@
 // @ts-nocheck
 import React from 'react';
 import classNames from 'classnames';
-import { FormGroup, TextArea, Classes } from '@blueprintjs/core';
-import { FastField, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from '@/components';
-import { inputIntent } from '@/utils';
+import { Classes } from '@blueprintjs/core';
+import { FormattedMessage as T, FFormGroup, FTextArea } from '@/components';
 
 export default function CustomerNotePanel({ errors, touched, getFieldProps }) {
   return (
     <div className={'tab-panel--note'}>
-      <FastField name={'note'}>
-        {({ field, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'note'} />}
-            className={classNames('form-group--note', Classes.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="payment_date" />}
-          >
-            <TextArea {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup name={'note'} label={<T id={'note'} />} inline={false}>
+        <FTextArea name={'note'} />
+      </FFormGroup>
     </div>
   );
 }
diff --git a/packages/webapp/src/containers/Customers/CustomerForm/CustomerTypeRadioField.tsx b/packages/webapp/src/containers/Customers/CustomerForm/CustomerTypeRadioField.tsx
index 93a43175a..78aff5782 100644
--- a/packages/webapp/src/containers/Customers/CustomerForm/CustomerTypeRadioField.tsx
+++ b/packages/webapp/src/containers/Customers/CustomerForm/CustomerTypeRadioField.tsx
@@ -2,43 +2,26 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import classNames from 'classnames';
-import { RadioGroup, Radio, FormGroup } from '@blueprintjs/core';
-import { FormattedMessage as T } from '@/components';
-import { FastField } from 'formik';
+import { Radio } from '@blueprintjs/core';
+import { FormattedMessage as T, FFormGroup, FRadioGroup } from '@/components';
 
 import { handleStringChange, saveInvoke } from '@/utils';
 
 /**
  * Customer type radio field.
  */
-export default function RadioCustomer(props) {
-  const { onChange, ...rest } = props;
-  
-
+export default function RadioCustomer() {
   return (
-    <FastField name={'customer_type'}>
-      {({ form, field: { value }, meta: { error, touched } }) => (
-        <FormGroup
-          inline={true}
-          label={<T id={'customer_type'} />}
-          className={classNames('form-group--customer_type')}
-        >
-          <RadioGroup
-            inline={true}
-            onChange={handleStringChange((value) => {
-              saveInvoke(onChange, value);
-              form.setFieldValue('customer_type', value);
-            })}
-            selectedValue={value}
-          >
-            <Radio label={intl.get('business')} value="business" />
-            <Radio
-              label={intl.get('individual')}
-              value="individual"
-            />
-          </RadioGroup>
-        </FormGroup>
-      )}
-    </FastField>
+    <FFormGroup
+      name={'customer_type'}
+      label={<T id={'customer_type'} />}
+      inline
+      fastField
+    >
+      <FRadioGroup name={'customer_type'} inline>
+        <Radio label={intl.get('business')} value="business" />
+        <Radio label={intl.get('individual')} value="individual" />
+      </FRadioGroup>
+    </FFormGroup>
   );
 }
diff --git a/packages/webapp/src/containers/Items/ItemFormPrimarySection.tsx b/packages/webapp/src/containers/Items/ItemFormPrimarySection.tsx
index e822cf79e..2f50a5f60 100644
--- a/packages/webapp/src/containers/Items/ItemFormPrimarySection.tsx
+++ b/packages/webapp/src/containers/Items/ItemFormPrimarySection.tsx
@@ -7,23 +7,25 @@ import {
   Classes,
   Radio,
   Position,
+  MenuItem,
 } from '@blueprintjs/core';
 import { ErrorMessage, FastField } from 'formik';
 import { CLASSES } from '@/constants/classes';
 import {
-  CategoriesSelectList,
   Hint,
   Col,
   Row,
   FieldRequiredHint,
   FormattedMessage as T,
   FormattedHTMLMessage,
+  FFormGroup,
+  FSelect,
 } from '@/components';
 import classNames from 'classnames';
 
 import { useItemFormContext } from './ItemFormProvider';
 import { handleStringChange, inputIntent } from '@/utils';
-import { categoriesFieldShouldUpdate } from './utils';
+// import { categoriesFieldShouldUpdate } from './utils';
 
 /**
  * Item form primary section.
@@ -132,29 +134,20 @@ export default function ItemFormPrimarySection() {
           </FastField>
 
           {/*----------- Item category ----------*/}
-          <FastField
+          <FFormGroup
             name={'category_id'}
-            categories={itemsCategories}
-            shouldUpdate={categoriesFieldShouldUpdate}
+            label={<T id={'category'} />}
+            inline={true}
           >
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'category'} />}
-                inline={true}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="category_id" />}
-                className={classNames('form-group--category', Classes.FILL)}
-              >
-                <CategoriesSelectList
-                  categories={itemsCategories}
-                  selecetedCategoryId={value}
-                  onCategorySelected={(category) => {
-                    form.setFieldValue('category_id', category.id);
-                  }}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+            <FSelect
+              name={'category_id'}
+              items={itemsCategories}
+              valueAccessor={'id'}
+              textAccessor={'name'}
+              placeholder={<T id={'select_category'} />}
+              popoverProps={{ minimal: true, captureDismiss: true }}
+            />
+          </FFormGroup>
         </Col>
 
         <Col xs={3}>
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormAfterPrimarySection.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormAfterPrimarySection.tsx
index 79a607576..050275ba5 100644
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormAfterPrimarySection.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormAfterPrimarySection.tsx
@@ -1,76 +1,44 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
-import { FastField, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from '@/components';
-import { inputIntent } from '@/utils';
+import { ControlGroup } from '@blueprintjs/core';
+import { FormattedMessage as T, FFormGroup, FInputGroup } from '@/components';
 
 /**
  * Vendor form  after primary section.
  */
 function VendorFormAfterPrimarySection() {
-  
-
   return (
-    <div class="customer-form__after-primary-section-content">
+    <div className={'customer-form__after-primary-section-content'}>
       {/*------------ Vendor email -----------*/}
-      <FastField name={'email'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'email'} />}
-            className={'form-group--email'}
-            label={<T id={'vendor_email'} />}
-            inline={true}
-          >
-            <InputGroup {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'email'}
+        label={<T id={'vendor_email'} />}
+        inline={true}
+      >
+        <FInputGroup name={'email'} />
+      </FFormGroup>
 
       {/*------------ Phone number -----------*/}
-      <FormGroup
+      <FFormGroup
+        name={'work_phone'}
         className={'form-group--phone-number'}
         label={<T id={'phone_number'} />}
         inline={true}
       >
         <ControlGroup>
-          <FastField name={'work_phone'}>
-            {({ field, meta: { error, touched } }) => (
-              <InputGroup
-                intent={inputIntent({ error, touched })}
-                placeholder={intl.get('work')}
-                {...field}
-              />
-            )}
-          </FastField>
-          <FastField name={'personal_phone'}>
-            {({ field, meta: { error, touched } }) => (
-              <InputGroup
-                intent={inputIntent({ error, touched })}
-                placeholder={intl.get('mobile')}
-                {...field}
-              />
-            )}
-          </FastField>
+          <FInputGroup name={'work_phone'} placeholder={intl.get('work')} />
+          <FInputGroup
+            name={'personal_phone'}
+            placeholder={intl.get('mobile')}
+          />
         </ControlGroup>
-      </FormGroup>
+      </FFormGroup>
 
       {/*------------ Vendor website -----------*/}
-      <FastField name={'website'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'website'} />}
-            className={'form-group--website'}
-            label={<T id={'website'} />}
-            inline={true}
-          >
-            <InputGroup placeholder={'http://'} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup name={'website'} label={<T id={'website'} />} inline={true}>
+        <FInputGroup name={'website'} placeholder={'http://'} />
+      </FFormGroup>
     </div>
   );
 }
diff --git a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormPrimarySection.tsx b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormPrimarySection.tsx
index 464508594..86d7a1f07 100644
--- a/packages/webapp/src/containers/Vendors/VendorForm/VendorFormPrimarySection.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorForm/VendorFormPrimarySection.tsx
@@ -2,18 +2,18 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import classNames from 'classnames';
-import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
-import { FastField, Field, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from '@/components';
-import { CLASSES } from '@/constants/classes';
-import { inputIntent } from '@/utils';
-import { useAutofocus } from '@/hooks';
+import { ControlGroup } from '@blueprintjs/core';
 import {
+  FormattedMessage as T,
+  FFormGroup,
+  FInputGroup,
   Hint,
   FieldRequiredHint,
   SalutationList,
   DisplayNameList,
 } from '@/components';
+import { CLASSES } from '@/constants/classes';
+import { useAutofocus } from '@/hooks';
 
 /**
  * Vendor form primary section.
@@ -24,99 +24,58 @@ function VendorFormPrimarySection() {
   return (
     <div className={'customer-form__primary-section-content'}>
       {/**----------- Vendor name -----------*/}
-      <FormGroup
+      <FFormGroup
+        name={'salutation'}
         className={classNames('form-group--contact_name')}
         label={<T id={'contact_name'} />}
         inline={true}
       >
         <ControlGroup>
-          <FastField name={'salutation'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <SalutationList
-                onItemSelect={(salutation) => {
-                  form.setFieldValue('salutation', salutation.label);
-                }}
-                selectedItem={value}
-                popoverProps={{ minimal: true }}
-                className={classNames(
-                  CLASSES.FORM_GROUP_LIST_SELECT,
-                  CLASSES.FILL,
-                  'input-group--salutation-list',
-                  'select-list--fill-button',
-                )}
-              />
-            )}
-          </FastField>
-
-          <FastField name={'first_name'}>
-            {({ field, meta: { error, touched } }) => (
-              <InputGroup
-                placeholder={intl.get('first_name')}
-                intent={inputIntent({ error, touched })}
-                className={classNames('input-group--first-name')}
-                inputRef={(ref) => (firstNameFieldRef.current = ref)}
-                {...field}
-              />
-            )}
-          </FastField>
-
-          <FastField name={'last_name'}>
-            {({ field, meta: { error, touched } }) => (
-              <InputGroup
-                placeholder={intl.get('last_name')}
-                intent={inputIntent({ error, touched })}
-                className={classNames('input-group--last-name')}
-                {...field}
-              />
-            )}
-          </FastField>
+          <SalutationList
+            name={'salutation'}
+            popoverProps={{ minimal: true }}
+          />
+          <FInputGroup
+            name={'first_name'}
+            placeholder={intl.get('first_name')}
+            className={classNames('input-group--first-name')}
+            inputRef={(ref) => (firstNameFieldRef.current = ref)}
+          />
+          <FInputGroup
+            name={'last_name'}
+            placeholder={intl.get('last_name')}
+            className={classNames('input-group--last-name')}
+          />
         </ControlGroup>
-      </FormGroup>
+      </FFormGroup>
 
       {/*----------- Company Name -----------*/}
-      <FastField name={'company_name'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            className={classNames('form-group--company_name')}
-            label={<T id={'company_name'} />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'company_name'} />}
-            inline={true}
-          >
-            <InputGroup {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'company_name'}
+        className={classNames('form-group--company_name')}
+        label={<T id={'company_name'} />}
+        inline={true}
+      >
+        <FInputGroup name={'company_name'} />
+      </FFormGroup>
       {/*----------- Display Name -----------*/}
-      <Field name={'display_name'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            helperText={<ErrorMessage name={'display_name'} />}
-            intent={inputIntent({ error, touched })}
-            label={
-              <>
-                <T id={'display_name'} />
-                <FieldRequiredHint />
-                <Hint />
-              </>
-            }
-            className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)}
-            inline={true}
-          >
-            <DisplayNameList
-              firstName={form.values.first_name}
-              lastName={form.values.last_name}
-              company={form.values.company_name}
-              salutation={form.values.salutation}
-              onItemSelect={(displayName) => {
-                form.setFieldValue('display_name', displayName.label);
-              }}
-              selectedItem={value}
-              popoverProps={{ minimal: true }}
-            />
-          </FormGroup>
-        )}
-      </Field>
+      <FFormGroup
+        name={'display_name'}
+        label={
+          <>
+            <T id={'display_name'} />
+            <FieldRequiredHint />
+            <Hint />
+          </>
+        }
+        className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)}
+        inline={true}
+      >
+        <DisplayNameList
+          name={'display_name'}
+          popoverProps={{ minimal: true }}
+        />
+      </FFormGroup>
     </div>
   );
 }