refactoring(quick payment receive & made): use accounts suggest field.

client/src/components/index.js

@@ -52,6 +52,7 @@ import DashboardInsider from './Dashboard/DashboardInsider';
 import Drawer from './Drawer/Drawer';
 import DrawerSuspense from './Drawer/DrawerSuspense';
 import Postbox from './Postbox';
+import AccountsSuggestField from './AccountsSuggestField';
 
 const Hint = FieldHint;
 
@@ -110,5 +111,6 @@ export {
   DashboardInsider,
   Drawer,
   DrawerSuspense,
-  Postbox
+  Postbox,
+  AccountsSuggestField
 };

client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js

@@ -17,13 +17,13 @@ import {
   momentFormatter,
   tansformDateValue,
   handleDateChange,
-  toSafeNumber
+  toSafeNumber,
 } from 'utils';
 import { CLASSES } from 'common/classes';
 import adjustmentType from 'common/adjustmentType';
 
 import AccountsSuggestField from 'components/AccountsSuggestField';
-import { useInventoryAdjContext } from './InventoryAdjustmentFormProvider'
+import { useInventoryAdjContext } from './InventoryAdjustmentFormProvider';
 import { diffQuantity } from './utils';
 import InventoryAdjustmentQuantityFields from './InventoryAdjustmentQuantityFields';
 
@@ -74,7 +74,11 @@ export default function InventoryAdjustmentFormDialogFields() {
         <Col xs={5}>
           {/*------------ Adjustment type -----------*/}
           <Field name={'type'}>
-            {({ form: { values, setFieldValue }, field: { value }, meta: { error, touched } }) => (
+            {({
+              form: { values, setFieldValue },
+              field: { value },
+              meta: { error, touched },
+            }) => (
               <FormGroup
                 label={<T id={'adjustment_type'} />}
                 labelInfo={<FieldRequiredHint />}
@@ -88,7 +92,7 @@ export default function InventoryAdjustmentFormDialogFields() {
                     const result = diffQuantity(
                       toSafeNumber(values.quantity),
                       toSafeNumber(values.quantity_on_hand),
-                      type.value
+                      type.value,
                     );
                     setFieldValue('type', type.value);
                     setFieldValue('new_quantity', result);
@@ -119,8 +123,8 @@ export default function InventoryAdjustmentFormDialogFields() {
           >
             <AccountsSuggestField
               accounts={accounts}
-              onAccountSelected={(item) =>
+              onAccountSelected={({ id }) =>
-                form.setFieldValue('adjustment_account_id', item.id)
+                form.setFieldValue('adjustment_account_id', id)
               }
               inputProps={{
                 placeholder: formatMessage({

client/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FastField, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import {
   Classes,
   FormGroup,
@@ -15,7 +15,7 @@ import { CLASSES } from 'common/classes';
 import { DateInput } from '@blueprintjs/datetime';
 import { FieldRequiredHint, Col, Row } from 'components';
 import {
-  AccountsSelectList,
+  AccountsSuggestField,
   InputPrependText,
   MoneyInputGroup,
   Icon,
@@ -33,6 +33,9 @@ import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider';
  */
 export default function QuickPaymentMadeFormFields() {
   const { accounts } = useQuickPaymentMadeContext();
+
+  // Intl context.
+  const { formatMessage } = useIntl();
   const paymentMadeFieldRef = useAutofocus();
 
   return (
@@ -151,13 +154,16 @@ export default function QuickPaymentMadeFormFields() {
                 intent={inputIntent({ error, touched })}
                 helperText={<ErrorMessage name={'payment_account_id'} />}
               >
-                <AccountsSelectList
+                <AccountsSuggestField
                   accounts={accounts}
-                  labelInfo={<FieldRequiredHint />}
+                  onAccountSelected={({ id }) =>
-                  onAccountSelected={(account) => {
+                    form.setFieldValue('payment_account_id', id)
-                    form.setFieldValue('payment_account_id', account.id);
+                  }
+                  inputProps={{
+                    placeholder: formatMessage({
+                      id: 'select_account',
+                    }),
                   }}
-                  selectedAccountId={value}
                 />
               </FormGroup>
             )}

client/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FastField, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useAutofocus } from 'hooks';
 import {
   Classes,
@@ -15,11 +15,12 @@ import { CLASSES } from 'common/classes';
 import { DateInput } from '@blueprintjs/datetime';
 import { FieldRequiredHint, Col, Row } from 'components';
 import {
-  AccountsSelectList,
+  AccountsSuggestField,
   InputPrependText,
   MoneyInputGroup,
   Icon,
 } from 'components';
+
 import {
   inputIntent,
   momentFormatter,
@@ -34,6 +35,8 @@ import { useQuickPaymentReceiveContext } from './QuickPaymentReceiveFormProvider
 export default function QuickPaymentReceiveFormFields({}) {
   const { accounts } = useQuickPaymentReceiveContext();
 
+  // Intl context.
+  const { formatMessage } = useIntl();
   const paymentReceiveFieldRef = useAutofocus();
 
   return (
@@ -153,14 +156,16 @@ export default function QuickPaymentReceiveFormFields({}) {
                 intent={inputIntent({ error, touched })}
                 helperText={<ErrorMessage name={'deposit_account_id'} />}
               >
-                <AccountsSelectList
+                <AccountsSuggestField
                   accounts={accounts}
-                  labelInfo={<FieldRequiredHint />}
+                  onAccountSelected={({ id }) =>
-                  onAccountSelected={(account) => {
+                    form.setFieldValue('deposit_account_id', id)
-                    form.setFieldValue('deposit_account_id', account.id);
+                  }
+                  inputProps={{
+                    placeholder: formatMessage({
+                      id: 'select_account',
+                    }),
                   }}
-                  defaultSelectText={<T id={'select_deposit_account'} />}
-                  selectedAccountId={value}
                 />
               </FormGroup>
             )}