bugs bashing

packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormFields.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import { FastField, Field, ErrorMessage } from 'formik';
+import { ErrorMessage, useFormikContext } from 'formik';
 import {
   Classes,
   FormGroup,
@@ -10,15 +10,14 @@ import {
   InputGroup,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
-import { FormattedMessage as T, If } from '@/components';
-import { inputIntent, handleStringChange } from '@/utils';
-import { FieldRequiredHint, ListSelect } from '@/components';
+import { FormattedMessage as T, If, FFormGroup, FSelect } from '@/components';
+import { handleStringChange } from '@/utils';
+import { FieldRequiredHint } from '@/components';
 import { CLASSES } from '@/constants/classes';
 import allocateLandedCostType from '@/constants/allocateLandedCostType';
 
 import AllocateLandedCostFormBody from './AllocateLandedCostFormBody';
 import {
-  transactionsSelectShouldUpdate,
   allocateCostToEntries,
   resetAllocatedCostEntries,
 } from './utils';
@@ -32,137 +31,109 @@ export default function AllocateLandedCostFormFields() {
   const { costTransactionEntries, landedCostTransactions } =
     useAllocateLandedConstDialogContext();
 
+  const { values, setFieldValue } = useFormikContext();
+
+  // Handle transaction type select change.
+  const handleTransactionTypeChange = (type) => {
+    const { items } = values;
+
+    setFieldValue('transaction_type', type.value);
+    setFieldValue('transaction_id', '');
+    setFieldValue('transaction_entry_id', '');
+    setFieldValue('amount', '');
+    setFieldValue('items', resetAllocatedCostEntries(items));
+  };
+
+  // Handle transaction select change.
+  const handleTransactionChange = (transaction) => {
+    const { items } = values;
+    setFieldValue('transaction_id', transaction.id);
+    setFieldValue('transaction_entry_id', '');
+    setFieldValue('amount', '');
+    setFieldValue('items', resetAllocatedCostEntries(items));
+  };
+
+  // Handle transaction entry select change.
+  const handleTransactionEntryChange = (entry) => {
+    const { id, unallocated_cost_amount: unallocatedAmount } = entry;
+    const { items, allocation_method } = values;
+
+    setFieldValue('amount', unallocatedAmount);
+    setFieldValue('transaction_entry_id', id);
+    setFieldValue(
+      'items',
+      allocateCostToEntries(unallocatedAmount, allocation_method, items),
+    );
+  };
+
   return (
     <div className={Classes.DIALOG_BODY}>
       {/*------------Transaction type -----------*/}
-      <FastField
+      <FFormGroup
         name={'transaction_type'}
-        transactions={allocateLandedCostType}
-        shouldUpdate={transactionsSelectShouldUpdate}
+        label={<T id={'transaction_type'} />}
+        labelInfo={<FieldRequiredHint />}
+        inline
+        fill
+        fastField
       >
-        {({
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <FormGroup
-            label={<T id={'transaction_type'} />}
-            labelInfo={<FieldRequiredHint />}
-            helperText={<ErrorMessage name="transaction_type" />}
-            intent={inputIntent({ error, touched })}
-            inline={true}
-            className={classNames(CLASSES.FILL, 'form-group--transaction_type')}
-          >
-            <ListSelect
-              items={allocateLandedCostType}
-              onItemSelect={(type) => {
-                const { items } = values;
-
-                setFieldValue('transaction_type', type.value);
-                setFieldValue('transaction_id', '');
-                setFieldValue('transaction_entry_id', '');
-
-                setFieldValue('amount', '');
-                setFieldValue('items', resetAllocatedCostEntries(items));
-              }}
-              filterable={false}
-              selectedItem={value}
-              selectedItemProp={'value'}
-              textProp={'name'}
-              popoverProps={{ minimal: true }}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+        <FSelect
+          name={'transaction_type'}
+          items={allocateLandedCostType}
+          onItemChange={handleTransactionTypeChange}
+          filterable={false}
+          valueAccessor={'value'}
+          textAccessor={'name'}
+          popoverProps={{ minimal: true }}
+          fastField
+        />
+      </FFormGroup>
 
       {/*------------ Transaction  -----------*/}
-      <Field
+      <FFormGroup
         name={'transaction_id'}
-        transactions={landedCostTransactions}
-        shouldUpdate={transactionsSelectShouldUpdate}
+        label={<T id={'transaction_id'} />}
+        labelInfo={<FieldRequiredHint />}
+        inline
+        fill
       >
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'transaction_id'} />}
-            labelInfo={<FieldRequiredHint />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="transaction_id" />}
-            className={classNames(CLASSES.FILL, 'form-group--transaction_id')}
-            inline={true}
-          >
-            <ListSelect
-              items={landedCostTransactions}
-              onItemSelect={({ id }) => {
-                const { items } = form.values;
-                form.setFieldValue('transaction_id', id);
-                form.setFieldValue('transaction_entry_id', '');
-
-                form.setFieldValue('amount', '');
-                form.setFieldValue('items', resetAllocatedCostEntries(items));
-              }}
-              filterable={false}
-              selectedItem={value}
-              selectedItemProp={'id'}
-              textProp={'name'}
-              labelProp={'formatted_unallocated_cost_amount'}
-              defaultText={intl.get(
-                'landed_cost.dialog.label_select_transaction',
-              )}
-              popoverProps={{ minimal: true }}
-            />
-          </FormGroup>
-        )}
-      </Field>
+        <FSelect
+          name={'transaction_id'}
+          items={landedCostTransactions}
+          onItemChange={handleTransactionChange}
+          filterable={false}
+          valueAccessor={'id'}
+          textAccessor={'name'}
+          labelAccessor={'formatted_unallocated_cost_amount'}
+          placeholder={intl.get('landed_cost.dialog.label_select_transaction')}
+          popoverProps={{ minimal: true }}
+        />
+      </FFormGroup>
 
       {/*------------ Transaction line  -----------*/}
       <If condition={costTransactionEntries.length > 0}>
-        <Field
+        <FFormGroup
           name={'transaction_entry_id'}
-          transactions={costTransactionEntries}
-          shouldUpdate={transactionsSelectShouldUpdate}
+          label={<T id={'transaction_line'} />}
+          inline
+          fill
+          fastField
         >
-          {({ form, field: { value }, meta: { error, touched } }) => (
-            <FormGroup
-              label={<T id={'transaction_line'} />}
-              intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="transaction_entry_id" />}
-              className={classNames(
-                CLASSES.FILL,
-                'form-group--transaction_entry_id',
-              )}
-              inline={true}
-            >
-              <ListSelect
-                items={costTransactionEntries}
-                onItemSelect={(entry) => {
-                  const { id, unallocated_cost_amount: unallocatedAmount } =
-                    entry;
-                  const { items, allocation_method } = form.values;
-
-                  form.setFieldValue('amount', unallocatedAmount);
-                  form.setFieldValue('transaction_entry_id', id);
-                  form.setFieldValue(
-                    'items',
-                    allocateCostToEntries(
-                      unallocatedAmount,
-                      allocation_method,
-                      items,
-                    ),
-                  );
-                }}
-                filterable={false}
-                selectedItem={value}
-                selectedItemProp={'id'}
-                textProp={'name'}
-                labelProp={'formatted_unallocated_cost_amount'}
-                defaultText={intl.get(
-                  'landed_cost.dialog.label_select_transaction_entry',
-                )}
-                popoverProps={{ minimal: true }}
-              />
-            </FormGroup>
-          )}
-        </Field>
+          <FSelect
+            name={'transaction_entry_id'}
+            items={costTransactionEntries}
+            onItemChange={handleTransactionEntryChange}
+            filterable={false}
+            valueAccessor={'id'}
+            textAccessor={'name'}
+            labelAccessor={'formatted_unallocated_cost_amount'}
+            placeholder={intl.get(
+              'landed_cost.dialog.label_select_transaction_entry',
+            )}
+            popoverProps={{ minimal: true }}
+            fastField
+          />
+        </FFormGroup>
       </If>
 
       {/*------------ Amount -----------*/}