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

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">

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">