From a7d29a31c8cd6917bb48c00161d4da2583ee7df5 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Mon, 1 May 2023 00:13:23 +0200
Subject: [PATCH] refactor(webapp): all services with new AccountSelect and
 AccountMultiSelect components.

---
 .../components/Currencies/CurrencySelect.tsx  |  30 +--
 .../ExpenseForm/ExpenseFormHeaderFields.tsx   |  48 ++---
 .../containers/Expenses/ExpenseForm/utils.tsx |   2 +-
 .../src/containers/Items/ItemFormBody.tsx     | 106 ++++------
 .../Items/ItemFormInventorySection.tsx        |  53 ++---
 .../webapp/src/containers/Items/utils.tsx     |   4 +-
 .../Preferences/Accountant/AccountantForm.tsx | 195 ++++++++----------
 .../Preferences/Item/ItemPreferencesForm.tsx  | 182 +++++++---------
 .../PaymentMadeFormHeaderFields.tsx           |  55 ++---
 .../PaymentMades/PaymentForm/utils.tsx        |   2 +-
 .../PaymentReceiveHeaderFields.tsx            |  55 ++---
 .../PaymentReceiveForm/utils.tsx              |   2 +-
 .../ReceiptForm/ReceiptFormHeaderFields.tsx   |  49 ++---
 .../Sales/Receipts/ReceiptForm/utils.tsx      |   2 +-
 .../WarehouseTransferFormHeaderFields.tsx     |  88 +++-----
 packages/webapp/src/lang/en/index.json        |   6 +-
 16 files changed, 344 insertions(+), 535 deletions(-)

diff --git a/packages/webapp/src/components/Currencies/CurrencySelect.tsx b/packages/webapp/src/components/Currencies/CurrencySelect.tsx
index 1e47c9b9d..ecf01af05 100644
--- a/packages/webapp/src/components/Currencies/CurrencySelect.tsx
+++ b/packages/webapp/src/components/Currencies/CurrencySelect.tsx
@@ -2,7 +2,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 
-import { MenuItem, Button } from '@blueprintjs/core';
 import { FSelect } from '../Forms';
 
 /**
@@ -28,23 +27,6 @@ const currencyItemPredicate = (query, currency, _index, exactMatch) => {
   }
 };
 
-/**
- * @param {*} currency
- * @returns
- */
-const currencyItemRenderer = (currency, { handleClick, modifiers, query }) => {
-  return (
-    <MenuItem
-      active={modifiers.active}
-      disabled={modifiers.disabled}
-      text={currency.currency_name}
-      label={currency.currency_code.toString()}
-      key={currency.id}
-      onClick={handleClick}
-    />
-  );
-};
-
 /**
  *
  * @param {*} currencies
@@ -54,20 +36,12 @@ export function CurrencySelect({ currencies, ...rest }) {
   return (
     <FSelect
       itemPredicate={currencyItemPredicate}
-      itemRenderer={currencyItemRenderer}
       valueAccessor={'currency_code'}
+      textAccessor={'currency_name'}
       labelAccessor={'currency_code'}
       {...rest}
       items={currencies}
-      input={CurrnecySelectButton}
+      placeholder={intl.get('select_currency_code')}
     />
   );
 }
-
-/**
- * @param {*} label
- * @returns
- */
-function CurrnecySelectButton({ label }) {
-  return <Button text={label ? label : intl.get('select_currency_code')} />;
-}
diff --git a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx
index 3df48fc40..103a43b13 100644
--- a/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx
@@ -16,7 +16,8 @@ import { customersFieldShouldUpdate, accountsFieldShouldUpdate } from './utils';
 import {
   CurrencySelectList,
   CustomerSelectField,
-  AccountsSelectList,
+  FFormGroup,
+  AccountsSelect,
   FieldRequiredHint,
   Hint,
 } from '@/components';
@@ -54,37 +55,26 @@ export default function ExpenseFormHeader() {
         )}
       </FastField>
 
-      <FastField
+      <FFormGroup
         name={'payment_account_id'}
-        accounts={accounts}
+        items={accounts}
+        label={<T id={'payment_account'} />}
+        labelInfo={<FieldRequiredHint />}
+        inline={true}
+        fastField={true}
         shouldUpdate={accountsFieldShouldUpdate}
       >
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'payment_account'} />}
-            className={classNames(
-              'form-group--payment_account',
-              'form-group--select-list',
-              Classes.FILL,
-            )}
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'payment_account_id'} />}
-            inline={true}
-          >
-            <AccountsSelectList
-              accounts={accounts}
-              onAccountSelected={(account) => {
-                form.setFieldValue('payment_account_id', account.id);
-              }}
-              defaultSelectText={<T id={'select_payment_account'} />}
-              selectedAccountId={value}
-              filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]}
-              allowCreate={true}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+        <AccountsSelect
+          name={'payment_account_id'}
+          items={accounts}
+          placeholder={<T id={'select_payment_account'} />}
+          filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]}
+          allowCreate={true}
+          fastField={true}
+          shouldUpdate={accountsFieldShouldUpdate}
+          fill={true}
+        />
+      </FFormGroup>
 
       <FastField name={'currency_code'}>
         {({ form, field: { value }, meta: { error, touched } }) => (
diff --git a/packages/webapp/src/containers/Expenses/ExpenseForm/utils.tsx b/packages/webapp/src/containers/Expenses/ExpenseForm/utils.tsx
index 905ca76f7..ff27b127b 100644
--- a/packages/webapp/src/containers/Expenses/ExpenseForm/utils.tsx
+++ b/packages/webapp/src/containers/Expenses/ExpenseForm/utils.tsx
@@ -114,7 +114,7 @@ export const customersFieldShouldUpdate = (newProps, oldProps) => {
  */
 export const accountsFieldShouldUpdate = (newProps, oldProps) => {
   return (
-    newProps.accounts !== oldProps.accounts ||
+    newProps.items !== oldProps.items ||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };
diff --git a/packages/webapp/src/containers/Items/ItemFormBody.tsx b/packages/webapp/src/containers/Items/ItemFormBody.tsx
index 8d8230587..fd513fbf8 100644
--- a/packages/webapp/src/containers/Items/ItemFormBody.tsx
+++ b/packages/webapp/src/containers/Items/ItemFormBody.tsx
@@ -9,15 +9,15 @@ import {
   ControlGroup,
 } from '@blueprintjs/core';
 import {
-  AccountsSelectList,
+  AccountsSelect,
   MoneyInputGroup,
   Col,
   Row,
   Hint,
   InputPrependText,
+  FFormGroup,
 } from '@/components';
 import { FormattedMessage as T } from '@/components';
-import classNames from 'classnames';
 
 import { useItemFormContext } from './ItemFormProvider';
 import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
@@ -91,42 +91,27 @@ function ItemFormBody({ organization: { base_currency } }) {
           </FastField>
 
           {/*------------- Selling account ------------- */}
-          <FastField
+          <FFormGroup
+            label={<T id={'account'} />}
             name={'sell_account_id'}
+            labelInfo={
+              <Hint content={<T id={'item.field.sell_account.hint'} />} />
+            }
+            inline={true}
+            items={accounts}
             sellable={values.sellable}
-            accounts={accounts}
             shouldUpdate={sellAccountFieldShouldUpdate}
           >
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'account'} />}
-                labelInfo={
-                  <Hint content={<T id={'item.field.sell_account.hint'} />} />
-                }
-                inline={true}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="sell_account_id" />}
-                className={classNames(
-                  'form-group--sell-account',
-                  'form-group--select-list',
-                  Classes.FILL,
-                )}
-              >
-                <AccountsSelectList
-                  accounts={accounts}
-                  onAccountSelected={(account) => {
-                    form.setFieldValue('sell_account_id', account.id);
-                  }}
-                  defaultSelectText={<T id={'select_account'} />}
-                  selectedAccountId={value}
-                  disabled={!form.values.sellable}
-                  filterByParentTypes={[ACCOUNT_PARENT_TYPE.INCOME]}
-                  popoverFill={true}
-                  allowCreate={true}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+            <AccountsSelect
+              name={'sell_account_id'}
+              items={accounts}
+              placeholder={<T id={'select_account'} />}
+              disabled={!values.sellable}
+              filterByParentTypes={[ACCOUNT_PARENT_TYPE.INCOME]}
+              fill={true}
+              allowCreate={true}
+            />
+          </FFormGroup>
 
           <FastField
             name={'sell_description'}
@@ -200,42 +185,31 @@ function ItemFormBody({ organization: { base_currency } }) {
           </FastField>
 
           {/*------------- Cost account ------------- */}
-          <FastField
+          <FFormGroup
             name={'cost_account_id'}
             purchasable={values.purchasable}
-            accounts={accounts}
+            items={accounts}
             shouldUpdate={costAccountFieldShouldUpdate}
+            label={<T id={'account'} />}
+            labelInfo={
+              <Hint content={<T id={'item.field.cost_account.hint'} />} />
+            }
+            inline={true}
+            fastField={true}
           >
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'account'} />}
-                labelInfo={
-                  <Hint content={<T id={'item.field.cost_account.hint'} />} />
-                }
-                inline={true}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="cost_account_id" />}
-                className={classNames(
-                  'form-group--cost-account',
-                  'form-group--select-list',
-                  Classes.FILL,
-                )}
-              >
-                <AccountsSelectList
-                  accounts={accounts}
-                  onAccountSelected={(account) => {
-                    form.setFieldValue('cost_account_id', account.id);
-                  }}
-                  defaultSelectText={<T id={'select_account'} />}
-                  selectedAccountId={value}
-                  disabled={!form.values.purchasable}
-                  filterByParentTypes={[ACCOUNT_PARENT_TYPE.EXPENSE]}
-                  popoverFill={true}
-                  allowCreate={true}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+            <AccountsSelect
+              name={'cost_account_id'}
+              items={accounts}
+              placeholder={<T id={'select_account'} />}
+              filterByParentTypes={[ACCOUNT_PARENT_TYPE.EXPENSE]}
+              popoverFill={true}
+              allowCreate={true}
+              fastField={true}
+              disabled={!values.purchasable}
+              purchasable={values.purchasable}
+              shouldUpdate={costAccountFieldShouldUpdate}
+            />
+          </FFormGroup>
 
           <FastField
             name={'purchase_description'}
diff --git a/packages/webapp/src/containers/Items/ItemFormInventorySection.tsx b/packages/webapp/src/containers/Items/ItemFormInventorySection.tsx
index 0ac44995c..ce6874daf 100644
--- a/packages/webapp/src/containers/Items/ItemFormInventorySection.tsx
+++ b/packages/webapp/src/containers/Items/ItemFormInventorySection.tsx
@@ -1,21 +1,18 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField, ErrorMessage } from 'formik';
-import { FormGroup } from '@blueprintjs/core';
-import { CLASSES } from '@/constants/classes';
 import {
-  AccountsSelectList,
+  AccountsSelect,
+  FFormGroup,
   FormattedMessage as T,
   Col,
   Row,
 } from '@/components';
-import classNames from 'classnames';
-import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
 
+import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
 import { accountsFieldShouldUpdate } from './utils';
-import { compose, inputIntent } from '@/utils';
 import { ACCOUNT_TYPE } from '@/constants/accountTypes';
 import { useItemFormContext } from './ItemFormProvider';
+import { compose } from '@/utils';
 
 /**
  * Item form inventory sections.
@@ -31,36 +28,24 @@ function ItemFormInventorySection({ organization: { base_currency } }) {
 
       <Row>
         <Col xs={6}>
-          {/*------------- Inventory account ------------- */}
-          <FastField
+          {/*------------- Inventory Account ------------- */}
+          <FFormGroup
+            label={<T id={'inventory_account'} />}
             name={'inventory_account_id'}
-            accounts={accounts}
+            items={accounts}
+            fastField={true}
             shouldUpdate={accountsFieldShouldUpdate}
+            inline={true}
           >
-            {({ form, field: { value }, meta: { touched, error } }) => (
-              <FormGroup
-                label={<T id={'inventory_account'} />}
-                inline={true}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="inventory_account_id" />}
-                className={classNames(
-                  'form-group--item-inventory_account',
-                  'form-group--select-list',
-                  CLASSES.FILL,
-                )}
-              >
-                <AccountsSelectList
-                  accounts={accounts}
-                  onAccountSelected={(account) => {
-                    form.setFieldValue('inventory_account_id', account.id);
-                  }}
-                  defaultSelectText={<T id={'select_account'} />}
-                  selectedAccountId={value}
-                  filterByTypes={[ACCOUNT_TYPE.INVENTORY]}
-                />
-              </FormGroup>
-            )}
-          </FastField>
+            <AccountsSelect
+              name={'inventory_account_id'}
+              items={accounts}
+              placeholder={<T id={'select_account'} />}
+              filterByTypes={[ACCOUNT_TYPE.INVENTORY]}
+              fastField={true}
+              shouldUpdate={accountsFieldShouldUpdate}
+            />
+          </FFormGroup>
         </Col>
       </Row>
     </div>
diff --git a/packages/webapp/src/containers/Items/utils.tsx b/packages/webapp/src/containers/Items/utils.tsx
index c2694a3c3..3850cdaec 100644
--- a/packages/webapp/src/containers/Items/utils.tsx
+++ b/packages/webapp/src/containers/Items/utils.tsx
@@ -119,7 +119,7 @@ export const handleDeleteErrors = (errors) => {
  */
 export const accountsFieldShouldUpdate = (newProps, oldProps) => {
   return (
-    newProps.accounts !== oldProps.accounts ||
+    newProps.items !== oldProps.items ||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };
@@ -149,7 +149,7 @@ export const sellPriceFieldShouldUpdate = (newProps, oldProps) => {
  */
 export const sellAccountFieldShouldUpdate = (newProps, oldProps) => {
   return (
-    newProps.accounts !== oldProps.accounts ||
+    newProps.items !== oldProps.items ||
     newProps.sellable !== oldProps.sellable ||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
diff --git a/packages/webapp/src/containers/Preferences/Accountant/AccountantForm.tsx b/packages/webapp/src/containers/Preferences/Accountant/AccountantForm.tsx
index 112c82756..9be2e319d 100644
--- a/packages/webapp/src/containers/Preferences/Accountant/AccountantForm.tsx
+++ b/packages/webapp/src/containers/Preferences/Accountant/AccountantForm.tsx
@@ -14,12 +14,13 @@ import { useHistory } from 'react-router-dom';
 
 import {
   FormattedMessage as T,
-  AccountsSelectList,
+  AccountsSelect,
   FieldRequiredHint,
   CardFooterActions,
+  FFormGroup,
 } from '@/components';
 import { handleStringChange, inputIntent } from '@/utils';
-import { ACCOUNT_TYPE } from '@/constants/accountTypes';
+import { ACCOUNT_PARENT_TYPE, ACCOUNT_TYPE } from '@/constants/accountTypes';
 
 import { useAccountantFormContext } from './AccountantFormProvider';
 
@@ -28,6 +29,7 @@ import { useAccountantFormContext } from './AccountantFormProvider';
  */
 export default function AccountantForm() {
   const history = useHistory();
+  const { accounts } = useAccountantFormContext();
 
   const { isSubmitting } = useFormikContext();
 
@@ -35,8 +37,6 @@ export default function AccountantForm() {
     history.go(-1);
   };
 
-  const { accounts } = useAccountantFormContext();
-
   return (
     <Form>
       {/* ----------- Accounts  ----------- */}
@@ -48,7 +48,7 @@ export default function AccountantForm() {
         }
         className={'accounts-checkbox'}
       >
-        {/*------------ account code required -----------*/}
+        {/*------------ Account code (required) -----------*/}
         <FastField name={'account_code_required'} type={'checkbox'}>
           {({ field }) => (
             <FormGroup inline={true}>
@@ -65,7 +65,8 @@ export default function AccountantForm() {
             </FormGroup>
           )}
         </FastField>
-        {/*------------ account code unique -----------*/}
+
+        {/*------------ Account code (unique) -----------*/}
         <FastField name={'account_code_unique'} type={'checkbox'}>
           {({ field }) => (
             <FormGroup inline={true}>
@@ -85,6 +86,7 @@ export default function AccountantForm() {
           )}
         </FastField>
       </FormGroup>
+
       {/* ----------- Accounting basis ----------- */}
       <FastField name={'accounting_basis'}>
         {({
@@ -116,120 +118,87 @@ export default function AccountantForm() {
       </FastField>
 
       {/* ----------- Deposit customer account ----------- */}
-      <FastField name={'preferred_deposit_account'}>
-        {({
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
-            label={
-              <strong>
-                <T id={'deposit_customer_account'} />
-              </strong>
+      <FFormGroup
+        name={'preferred_deposit_account'}
+        label={
+          <strong>
+            <T id={'deposit_customer_account'} />
+          </strong>
+        }
+        helperText={
+          <T
+            id={
+              'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
             }
-            helperText={
-              <T
-                id={
-                  'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
-                }
-              />
-            }
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-          >
-            <AccountsSelectList
-              accounts={accounts}
-              onAccountSelected={({ id }) => {
-                setFieldValue('preferred_deposit_account', id);
-              }}
-              selectedAccountId={value}
-              defaultSelectText={<T id={'select_payment_account'} />}
-              filterByTypes={[
-                ACCOUNT_TYPE.CASH,
-                ACCOUNT_TYPE.BANK,
-                ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
-              ]}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+          />
+        }
+        labelInfo={<FieldRequiredHint />}
+      >
+        <AccountsSelect
+          name={'preferred_deposit_account'}
+          items={accounts}
+          placeholder={<T id={'select_payment_account'} />}
+          filterByTypes={[
+            ACCOUNT_TYPE.CASH,
+            ACCOUNT_TYPE.BANK,
+            ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
+          ]}
+        />
+      </FFormGroup>
 
       {/* ----------- Withdrawal vendor account ----------- */}
-      <FastField name={'withdrawal_account'}>
-        {({
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
-            label={
-              <strong>
-                <T id={'withdrawal_vendor_account'} />
-              </strong>
+      <FFormGroup
+        name={'withdrawal_account'}
+        label={
+          <strong>
+            <T id={'withdrawal_vendor_account'} />
+          </strong>
+        }
+        helperText={
+          <T
+            id={
+              'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
             }
-            helperText={
-              <T
-                id={
-                  'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
-                }
-              />
-            }
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-          >
-            <AccountsSelectList
-              accounts={accounts}
-              onAccountSelected={({ id }) => {
-                setFieldValue('withdrawal_account', id);
-              }}
-              selectedAccountId={value}
-              defaultSelectText={<T id={'select_payment_account'} />}
-              filterByTypes={[
-                ACCOUNT_TYPE.CASH,
-                ACCOUNT_TYPE.BANK,
-                ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
-              ]}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+          />
+        }
+        labelInfo={<FieldRequiredHint />}
+      >
+        <AccountsSelect
+          name={'withdrawal_account'}
+          items={accounts}
+          placeholder={<T id={'select_payment_account'} />}
+          filterByTypes={[
+            ACCOUNT_TYPE.CASH,
+            ACCOUNT_TYPE.BANK,
+            ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
+          ]}
+        />
+      </FFormGroup>
 
       {/* ----------- Withdrawal customer account ----------- */}
-      <FastField name={'preferred_advance_deposit'}>
-        {({
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
-            label={
-              <strong>
-                <T id={'customer_advance_deposit'} />
-              </strong>
+      <FFormGroup
+        name={'preferred_advance_deposit'}
+        label={
+          <strong>
+            <T id={'customer_advance_deposit'} />
+          </strong>
+        }
+        helperText={
+          <T
+            id={
+              'select_a_preferred_account_to_deposit_into_it_vendor_advanced_deposits'
             }
-            helperText={
-              <T
-                id={
-                  'select_a_preferred_account_to_deposit_into_it_vendor_advanced_deposits'
-                }
-              />
-            }
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-          >
-            <AccountsSelectList
-              accounts={accounts}
-              onAccountSelected={({ id }) => {
-                setFieldValue('preferred_advance_deposit', id);
-              }}
-              selectedAccountId={value}
-              defaultSelectText={<T id={'select_payment_account'} />}
-              // filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+          />
+        }
+        labelInfo={<FieldRequiredHint />}
+      >
+        <AccountsSelect
+          name={'preferred_advance_deposit'}
+          items={accounts}
+          placeholder={<T id={'select_payment_account'} />}
+          filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]}
+        />
+      </FFormGroup>
 
       <CardFooterActions>
         <Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit">
diff --git a/packages/webapp/src/containers/Preferences/Item/ItemPreferencesForm.tsx b/packages/webapp/src/containers/Preferences/Item/ItemPreferencesForm.tsx
index 809ccf567..928ff3547 100644
--- a/packages/webapp/src/containers/Preferences/Item/ItemPreferencesForm.tsx
+++ b/packages/webapp/src/containers/Preferences/Item/ItemPreferencesForm.tsx
@@ -1,15 +1,15 @@
 // @ts-nocheck
 import React from 'react';
-import { Form, FastField, useFormikContext } from 'formik';
+import { Form, useFormikContext } from 'formik';
 import { FormGroup, Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import {
-  AccountsSelectList,
+  AccountsSelect,
   FieldRequiredHint,
   FormattedMessage as T,
-  CardFooterActions
+  FFormGroup,
+  CardFooterActions,
 } from '@/components';
-import { inputIntent } from '@/utils';
 import { ACCOUNT_PARENT_TYPE, ACCOUNT_TYPE } from '@/constants/accountTypes';
 
 import { useItemPreferencesFormContext } from './ItemPreferencesFormProvider';
@@ -29,113 +29,83 @@ export default function ItemForm() {
 
   return (
     <Form>
-      {/* ----------- preferred sell account ----------- */}
-      <FastField name={'preferred_sell_account'}>
-        {({
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
-            label={
-              <strong>
-                <T id={'preferred_sell_account'} />
-              </strong>
+      {/* ----------- Preferred Sell Account ----------- */}
+      <FormGroup
+        name={'preferred_sell_account'}
+        label={
+          <strong>
+            <T id={'preferred_sell_account'} />
+          </strong>
+        }
+        helperText={
+          <T
+            id={
+              'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
             }
-            helperText={
-              <T
-                id={
-                  'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
-                }
-              />
-            }
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-          >
-            <AccountsSelectList
-              accounts={accounts}
-              onAccountSelected={({ id }) => {
-                setFieldValue('preferred_sell_account', id);
-              }}
-              selectedAccountId={value}
-              defaultSelectText={<T id={'select_payment_account'} />}
-              filterByParentTypes={[ACCOUNT_PARENT_TYPE.INCOME]}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+          />
+        }
+        labelInfo={<FieldRequiredHint />}
+        fastField={true}
+      >
+        <AccountsSelect
+          name={'preferred_sell_account'}
+          items={accounts}
+          placeholder={<T id={'select_payment_account'} />}
+          filterByParentTypes={[ACCOUNT_PARENT_TYPE.INCOME]}
+        />
+      </FormGroup>
 
-      {/* ----------- preferred cost account ----------- */}
-      <FastField name={'preferred_cost_account'}>
-        {({
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
-            label={
-              <strong>
-                <T id={'preferred_cost_account'} />
-              </strong>
+      {/* ----------- Preferred Cost Account ----------- */}
+      <FFormGroup
+        name={'preferred_cost_account'}
+        label={
+          <strong>
+            <T id={'preferred_cost_account'} />
+          </strong>
+        }
+        helperText={
+          <T
+            id={
+              'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
             }
-            helperText={
-              <T
-                id={
-                  'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
-                }
-              />
-            }
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-          >
-            <AccountsSelectList
-              accounts={accounts}
-              onAccountSelected={({ id }) => {
-                setFieldValue('preferred_cost_account', id);
-              }}
-              selectedAccountId={value}
-              defaultSelectText={<T id={'select_payment_account'} />}
-              filterByParentTypes={[ACCOUNT_PARENT_TYPE.EXPENSE]}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+          />
+        }
+        labelInfo={<FieldRequiredHint />}
+        fastField={true}
+      >
+        <AccountsSelect
+          name={'preferred_cost_account'}
+          items={accounts}
+          placeholder={<T id={'select_payment_account'} />}
+          filterByParentTypes={[ACCOUNT_PARENT_TYPE.EXPENSE]}
+        />
+      </FFormGroup>
 
-      {/* ----------- preferred inventory account ----------- */}
-      <FastField name={'preferred_inventory_account'}>
-        {({
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
-            label={
-              <strong>
-                <T id={'preferred_inventory_account'} />
-              </strong>
+      {/* ----------- Preferred Inventory Account ----------- */}
+      <FFormGroup
+        name={'preferred_inventory_account'}
+        label={
+          <strong>
+            <T id={'preferred_inventory_account'} />
+          </strong>
+        }
+        helperText={
+          <T
+            id={
+              'select_a_preferred_account_to_deposit_into_it_vendor_advanced_deposits'
             }
-            helperText={
-              <T
-                id={
-                  'select_a_preferred_account_to_deposit_into_it_vendor_advanced_deposits'
-                }
-              />
-            }
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-          >
-            <AccountsSelectList
-              accounts={accounts}
-              onAccountSelected={({ id }) => {
-                setFieldValue('preferred_inventory_account', id);
-              }}
-              selectedAccountId={value}
-              defaultSelectText={<T id={'select_payment_account'} />}
-              filterByTypes={[ACCOUNT_TYPE.INVENTORY]}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+          />
+        }
+        labelInfo={<FieldRequiredHint />}
+        fastField={true}
+      >
+        <AccountsSelect
+          name={'preferred_inventory_account'}
+          items={accounts}
+          placeholder={<T id={'select_payment_account'} />}
+          filterByTypes={[ACCOUNT_TYPE.INVENTORY]}
+        />
+      </FFormGroup>
 
       <CardFooterActions>
         <Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit">
diff --git a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.tsx b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.tsx
index 9a41ee2a5..2023fcb41 100644
--- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.tsx
@@ -18,7 +18,7 @@ import { CLASSES } from '@/constants/classes';
 
 import {
   FFormGroup,
-  AccountsSelectList,
+  AccountsSelect,
   VendorSelectField,
   FieldRequiredHint,
   InputPrependText,
@@ -211,41 +211,30 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
       </FastField>
 
       {/* ------------ Payment account ------------ */}
-      <FastField
+      <FFormGroup
         name={'payment_account_id'}
-        accounts={accounts}
+        label={<T id={'payment_account'} />}
+        labelInfo={<FieldRequiredHint />}
+        items={accounts}
         shouldUpdate={accountsFieldShouldUpdate}
+        inline={true}
+        fastField={true}
       >
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'payment_account'} />}
-            className={classNames(
-              'form-group--payment_account_id',
-              'form-group--select-list',
-              Classes.FILL,
-            )}
-            inline={true}
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'payment_account_id'} />}
-          >
-            <AccountsSelectList
-              accounts={accounts}
-              labelInfo={<FieldRequiredHint />}
-              onAccountSelected={(account) => {
-                form.setFieldValue('payment_account_id', account.id);
-              }}
-              defaultSelectText={<T id={'select_payment_account'} />}
-              selectedAccountId={value}
-              filterByTypes={[
-                ACCOUNT_TYPE.CASH,
-                ACCOUNT_TYPE.BANK,
-                ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
-              ]}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+        <AccountsSelect
+          name={'payment_account_id'}
+          items={accounts}
+          placeholder={<T id={'select_payment_account'} />}
+          labelInfo={<FieldRequiredHint />}
+          filterByTypes={[
+            ACCOUNT_TYPE.CASH,
+            ACCOUNT_TYPE.BANK,
+            ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
+          ]}
+          shouldUpdate={accountsFieldShouldUpdate}
+          fastField={true}
+          fill={true}
+        />
+      </FFormGroup>
 
       {/* ------------ Reference ------------ */}
       <FastField name={'reference'}>
diff --git a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/utils.tsx b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/utils.tsx
index 972d41724..2858e21ae 100644
--- a/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/utils.tsx
+++ b/packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/utils.tsx
@@ -84,7 +84,7 @@ export const vendorsFieldShouldUpdate = (newProps, oldProps) => {
  */
 export const accountsFieldShouldUpdate = (newProps, oldProps) => {
   return (
-    newProps.accounts !== oldProps.accounts ||
+    newProps.items !== oldProps.items ||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx
index 85e9205ff..627ccd7b0 100644
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx
@@ -27,7 +27,7 @@ import {
 } from '@/utils';
 import {
   FFormGroup,
-  AccountsSelectList,
+  AccountsSelect,
   CustomerSelectField,
   FieldRequiredHint,
   Icon,
@@ -285,41 +285,30 @@ function PaymentReceiveHeaderFields({
       </FastField>
 
       {/* ------------ Deposit account ------------ */}
-      <FastField
+      <FFormGroup
         name={'deposit_account_id'}
-        accounts={accounts}
+        label={<T id={'deposit_to'} />}
+        inline={true}
+        labelInfo={<FieldRequiredHint />}
+        items={accounts}
         shouldUpdate={accountsFieldShouldUpdate}
+        fastField={true}
       >
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'deposit_to'} />}
-            className={classNames(
-              'form-group--deposit_account_id',
-              'form-group--select-list',
-              CLASSES.FILL,
-            )}
-            inline={true}
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'deposit_account_id'} />}
-          >
-            <AccountsSelectList
-              accounts={accounts}
-              labelInfo={<FieldRequiredHint />}
-              onAccountSelected={(account) => {
-                form.setFieldValue('deposit_account_id', account.id);
-              }}
-              defaultSelectText={<T id={'select_deposit_account'} />}
-              selectedAccountId={value}
-              filterByTypes={[
-                ACCOUNT_TYPE.CASH,
-                ACCOUNT_TYPE.BANK,
-                ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
-              ]}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+        <AccountsSelect
+          name={'deposit_account_id'}
+          items={accounts}
+          labelInfo={<FieldRequiredHint />}
+          placeholder={<T id={'select_deposit_account'} />}
+          filterByTypes={[
+            ACCOUNT_TYPE.CASH,
+            ACCOUNT_TYPE.BANK,
+            ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
+          ]}
+          shouldUpdate={accountsFieldShouldUpdate}
+          fastField={true}
+          fill={true}
+        />
+      </FFormGroup>
 
       {/* ------------ Reference No. ------------ */}
       <FastField name={'reference_no'}>
diff --git a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.tsx b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.tsx
index 07c1b6f3a..f4490490a 100644
--- a/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.tsx
@@ -150,7 +150,7 @@ export const customersFieldShouldUpdate = (newProps, oldProps) => {
  */
 export const accountsFieldShouldUpdate = (newProps, oldProps) => {
   return (
-    newProps.accounts !== oldProps.accounts ||
+    newProps.items !== oldProps.items ||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx
index 76435a890..8d3ee6659 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx
@@ -15,7 +15,7 @@ import { CLASSES } from '@/constants/classes';
 
 import {
   FFormGroup,
-  AccountsSelectList,
+  AccountsSelect,
   CustomerSelectField,
   FieldRequiredHint,
   Icon,
@@ -125,38 +125,27 @@ function ReceiptFormHeader({
       />
 
       {/* ----------- Deposit account ----------- */}
-      <FastField
+      <FFormGroup
+        label={<T id={'deposit_account'} />}
+        inline={true}
+        labelInfo={<FieldRequiredHint />}
         name={'deposit_account_id'}
-        accounts={accounts}
+        items={accounts}
         shouldUpdate={accountsFieldShouldUpdate}
       >
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'deposit_account'} />}
-            className={classNames('form-group--deposit-account', CLASSES.FILL)}
-            inline={true}
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'deposit_account_id'} />}
-          >
-            <AccountsSelectList
-              accounts={accounts}
-              onAccountSelected={(account) => {
-                form.setFieldValue('deposit_account_id', account.id);
-              }}
-              defaultSelectText={<T id={'select_deposit_account'} />}
-              selectedAccountId={value}
-              popoverFill={true}
-              filterByTypes={[
-                ACCOUNT_TYPE.CASH,
-                ACCOUNT_TYPE.BANK,
-                ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
-              ]}
-              allowCreate={true}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+        <AccountsSelect
+          items={accounts}
+          name={'deposit_account_id'}
+          placeholder={<T id={'select_deposit_account'} />}
+          filterByTypes={[
+            ACCOUNT_TYPE.CASH,
+            ACCOUNT_TYPE.BANK,
+            ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
+          ]}
+          allowCreate={true}
+          fill={true}
+        />
+      </FFormGroup>
 
       {/* ----------- Receipt date ----------- */}
       <FastField name={'receipt_date'}>
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/utils.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/utils.tsx
index ceaf63fd7..ba339a457 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/utils.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/utils.tsx
@@ -101,7 +101,7 @@ export const entriesFieldShouldUpdate = (newProps, oldProps) => {
  */
 export const accountsFieldShouldUpdate = (newProps, oldProps) => {
   return (
-    newProps.accounts !== oldProps.accounts ||
+    newProps.items !== oldProps.items ||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };
diff --git a/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormHeaderFields.tsx b/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormHeaderFields.tsx
index b1e99e097..80489bdef 100644
--- a/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormHeaderFields.tsx
@@ -8,13 +8,13 @@ import {
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, Field, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from '@/components';
+import { FFormGroup, FormattedMessage as T } from '@/components';
 import { momentFormatter, compose, tansformDateValue } from '@/utils';
 import classNames from 'classnames';
 
 import { CLASSES } from '@/constants/classes';
 import {
-  AccountsSelectList,
+  AccountsSelect,
   FieldRequiredHint,
   Icon,
   InputPrependButton,
@@ -91,6 +91,7 @@ function WarehouseTransferFormHeaderFields({
           </FormGroup>
         )}
       </FastField>
+
       {/* ----------- Transfer number ----------- */}
       <Field name={'transaction_number'}>
         {({ form, field, meta: { error, touched } }) => (
@@ -130,60 +131,39 @@ function WarehouseTransferFormHeaderFields({
           </FormGroup>
         )}
       </Field>
+
       {/* ----------- Form Warehouse ----------- */}
-      <FastField name={'from_warehouse_id'} accounts={warehouses}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'warehouse_transfer.label.from_warehouse'} />}
-            className={classNames(
-              'form-group--warehouse-transfer',
-              CLASSES.FILL,
-            )}
-            inline={true}
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'from_warehouse_id'} />}
-          >
-            <AccountsSelectList
-              accounts={warehouses}
-              onAccountSelected={(account) => {
-                form.setFieldValue('from_warehouse_id', account.id);
-              }}
-              defaultSelectText={<T id={'select_warehouse_transfer'} />}
-              selectedAccountId={value}
-              popoverFill={true}
-              allowCreate={true}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'from_warehouse_id'}
+        items={warehouses}
+        label={<T id={'warehouse_transfer.label.from_warehouse'} />}
+        inline={true}
+        labelInfo={<FieldRequiredHint />}
+      >
+        <AccountsSelect
+          name={'from_warehouse_id'}
+          items={warehouses}
+          placeholder={<T id={'select_warehouse_transfer'} />}
+          allowCreate={true}
+          fill={true}
+        />
+      </FFormGroup>
+
       {/* ----------- To Warehouse ----------- */}
-      <FastField name={'to_warehouse_id'} accounts={warehouses}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'warehouse_transfer.label.to_warehouse'} />}
-            className={classNames(
-              'form-group--warehouse-transfer',
-              CLASSES.FILL,
-            )}
-            inline={true}
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'to_warehouse_id'} />}
-          >
-            <AccountsSelectList
-              accounts={warehouses}
-              onAccountSelected={(account) => {
-                form.setFieldValue('to_warehouse_id', account.id);
-              }}
-              defaultSelectText={<T id={'select_warehouse_transfer'} />}
-              selectedAccountId={value}
-              popoverFill={true}
-              allowCreate={true}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        name={'to_warehouse_id'}
+        label={<T id={'warehouse_transfer.label.to_warehouse'} />}
+        inline={true}
+        labelInfo={<FieldRequiredHint />}
+      >
+        <AccountsSelect
+          name={'to_warehouse_id'}
+          items={warehouses}
+          placeholder={<T id={'select_warehouse_transfer'} />}
+          fill={true}
+          allowCreate={true}
+        />
+      </FFormGroup>
     </div>
   );
 }
diff --git a/packages/webapp/src/lang/en/index.json b/packages/webapp/src/lang/en/index.json
index d4da31c77..c55ee6af4 100644
--- a/packages/webapp/src/lang/en/index.json
+++ b/packages/webapp/src/lang/en/index.json
@@ -540,7 +540,7 @@
   "statement": "Statement",
   "deposit_account": "Deposit Account",
   "send_to_email": "Send to email",
-  "select_deposit_account": "Select Deposit Account",
+  "select_deposit_account": "Select Deposit Account...",
   "once_delete_this_receipt_you_will_able_to_restore_it": "Once you delete this receipt, you won't be able to restore it later. Are you sure you want to delete this receipt?",
   "the_receipt_has_been_created_successfully": "The receipt #{number} has been created successfully.",
   "the_receipt_has_been_edited_successfully": "The receipt #{number}  has been edited successfully.",
@@ -609,8 +609,8 @@
   "new_payment_made": "New Payment Made",
   "payment_made_list": "Payment Made List",
   "payment_account": "Payment Account",
-  "select_vender_account": "Select Vender Account",
-  "select_payment_account": "Select Payment Account",
+  "select_vender_account": "Select Vender Account...",
+  "select_payment_account": "Select Payment Account...",
   "the_payment_made_has_been_edited_successfully": "The payment made has been edited successfully.",
   "the_payment_made_has_been_created_successfully": "The payment made has been created successfully.",
   "the_payment_made_has_been_deleted_successfully": "The payment made has been deleted successfully.",