refactor(webapp): all services with new AccountSelect and AccountMultiSelect components.

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'}

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>

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)
   );