fix: FastField re-rendering.

fix: Allocate landed cost dialog.

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.js

@@ -3,6 +3,7 @@ import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import moment from 'moment';
+import { sumBy } from 'lodash';
 
 import 'style/pages/AllocateLandedCost/AllocateLandedCostForm.scss';
 
@@ -48,6 +49,7 @@ function AllocateLandedCostForm({
       cost: '',
     })),
   };
+  const amount = sumBy(initialValues.items, 'amount');
 
   // Handle form submit.
   const handleFormSubmit = (values, { setSubmitting }) => {
@@ -84,9 +86,12 @@ function AllocateLandedCostForm({
     createLandedCostMutate([billId, form]).then(onSuccess).catch(onError);
   };
 
+  // Computed validation schema.
+  const validationSchema =  AllocateLandedCostFormSchema(amount);
+
   return (
     <Formik
-      validationSchema={AllocateLandedCostFormSchema}
+      validationSchema={validationSchema}
       initialValues={initialValues}
       onSubmit={handleFormSubmit}
       component={AllocateLandedCostFormContent}

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostForm.schema.js

@@ -1,19 +1,18 @@
 import * as Yup from 'yup';
 import intl from 'react-intl-universal';
 
-const Schema = Yup.object().shape({
-  transaction_type: Yup.string().label(intl.get('transaction_type')),
-  transaction_date: Yup.date().label(intl.get('transaction_date')),
-  transaction_id: Yup.string().label(intl.get('transaction_number')),
-  transaction_entry_id: Yup.string().label(intl.get('transaction_line')),
-  amount: Yup.number().label(intl.get('amount')),
-  allocation_method: Yup.string().trim(),
-  items: Yup.array().of(
-    Yup.object().shape({
-      entry_id: Yup.number().nullable(),
-      cost: Yup.number().nullable(),
-    }),
-  ),
-});
-
-export const AllocateLandedCostFormSchema = Schema;
+export const AllocateLandedCostFormSchema = (minAmount) =>
+  Yup.object().shape({
+    transaction_type: Yup.string().label(intl.get('transaction_type')),
+    transaction_date: Yup.date().label(intl.get('transaction_date')),
+    transaction_id: Yup.string().label(intl.get('transaction_number')),
+    transaction_entry_id: Yup.string().label(intl.get('transaction_line')),
+    amount: Yup.number().max(minAmount).label(intl.get('amount')),
+    allocation_method: Yup.string().trim(),
+    items: Yup.array().of(
+      Yup.object().shape({
+        entry_id: Yup.number().nullable(),
+        cost: Yup.number().nullable(),
+      }),
+    ),
+  });

client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormFields.js

@@ -17,7 +17,7 @@ import allocateLandedCostType from 'common/allocateLandedCostType';
 import { useLandedCostTransaction } from 'hooks/query';
 
 import AllocateLandedCostFormBody from './AllocateLandedCostFormBody';
-import { getEntriesByTransactionId } from './utils';
+import { getEntriesByTransactionId, allocateCostToEntries } from './utils';
 
 /**
  * Allocate landed cost form fields.
@@ -30,10 +30,10 @@ export default function AllocateLandedCostFormFields() {
   } = useLandedCostTransaction(values.transaction_type);
 
   // Retrieve entries of the given transaction id.
-  const transactionEntries = React.useMemo(() => getEntriesByTransactionId(
-    transactions,
-    values.transaction_id,
-  ), [transactions, values.transaction_id]);
+  const transactionEntries = React.useMemo(
+    () => getEntriesByTransactionId(transactions, values.transaction_id),
+    [transactions, values.transaction_id],
+  );
 
   return (
     <div className={Classes.DIALOG_BODY}>
@@ -56,6 +56,8 @@ export default function AllocateLandedCostFormFields() {
               items={allocateLandedCostType}
               onItemSelect={(type) => {
                 setFieldValue('transaction_type', type.value);
+                setFieldValue('transaction_id', '');
+                setFieldValue('transaction_entry_id', '');
               }}
               filterable={false}
               selectedItem={value}
@@ -82,13 +84,14 @@ export default function AllocateLandedCostFormFields() {
               items={transactions}
               onItemSelect={({ id }) => {
                 form.setFieldValue('transaction_id', id);
+                form.setFieldValue('transaction_entry_id', '');
               }}
               filterable={false}
               selectedItem={value}
               selectedItemProp={'id'}
               textProp={'name'}
               labelProp={'id'}
-              defaultText={intl.get('select_transaction')}
+              defaultText={intl.get('Select transaction')}
               popoverProps={{ minimal: true }}
             />
           </FormGroup>
@@ -112,15 +115,21 @@ export default function AllocateLandedCostFormFields() {
               <ListSelect
                 items={transactionEntries}
                 onItemSelect={({ id, amount }) => {
-                  form.setFieldValue('amount', amount)
+                  const { items, allocation_method } = form.values;
+
+                  form.setFieldValue('amount', amount);
                   form.setFieldValue('transaction_entry_id', id);
+
+                  form.setFieldValue(
+                    'items',
+                    allocateCostToEntries(amount, allocation_method, items),
+                  );
                 }}
                 filterable={false}
                 selectedItem={value}
                 selectedItemProp={'id'}
                 textProp={'name'}
-                labelProp={'id'}
-                defaultText={intl.get('select_transaction')}
+                defaultText={intl.get('Select transaction entry')}
                 popoverProps={{ minimal: true }}
               />
             </FormGroup>
@@ -138,13 +147,24 @@ export default function AllocateLandedCostFormFields() {
             className={'form-group--amount'}
             inline={true}
           >
-            <InputGroup {...field} />
+            <InputGroup
+              {...field}
+              onBlur={(e) => {
+                const amount = e.target.value;
+                const { allocation_method, items } = form.values;
+
+                form.setFieldValue(
+                  'items',
+                  allocateCostToEntries(amount, allocation_method, items),
+                );
+              }}
+            />
           </FormGroup>
         )}
       </FastField>
 
       {/*------------ Allocation method -----------*/}
-      <FastField name={'allocation_method'}>
+      <Field name={'allocation_method'}>
         {({ form, field: { value }, meta: { touched, error } }) => (
           <FormGroup
             medium={true}
@@ -157,7 +177,13 @@ export default function AllocateLandedCostFormFields() {
           >
             <RadioGroup
               onChange={handleStringChange((_value) => {
+                const { amount, items, allocation_method } = form.values;
+
                 form.setFieldValue('allocation_method', _value);
+                form.setFieldValue(
+                  'items',
+                  allocateCostToEntries(amount, allocation_method, items),
+                );
               })}
               selectedValue={value}
               inline={true}
@@ -167,7 +193,7 @@ export default function AllocateLandedCostFormFields() {
             </RadioGroup>
           </FormGroup>
         )}
-      </FastField>
+      </Field>
 
       {/*------------ Allocate Landed cost Table -----------*/}
       <AllocateLandedCostFormBody />

client/src/containers/Dialogs/AllocateLandedCostDialog/utils.js

@@ -1,3 +1,5 @@
+import { sumBy, round } from 'lodash';
+import * as R from 'ramda';
 /**
  * Retrieve transaction entries of the given transaction id.
  */
@@ -5,3 +7,56 @@ export function getEntriesByTransactionId(transactions, id) {
   const transaction = transactions.find((trans) => trans.id === id);
   return transaction ? transaction.entries : [];
 }
+
+export function allocateCostToEntries(total, allocateType, entries) {
+  return R.compose(
+    R.when(
+      R.always(allocateType === 'value'),
+      R.curry(allocateCostByValue)(total),
+    ),
+    R.when(
+      R.always(allocateType === 'quantity'),
+      R.curry(allocateCostByQuantity)(total),
+    ),
+  )(entries);
+}
+
+/**
+ * Allocate total cost on entries on value.
+ * @param {*} entries
+ * @param {*} total
+ * @returns
+ */
+export function allocateCostByValue(total, entries) {
+  const totalAmount = sumBy(entries, 'amount');
+
+  const _entries = entries.map((entry) => ({
+    ...entry,
+    percentageOfValue: entry.amount / totalAmount,
+  }));
+
+  return _entries.map((entry) => ({
+    ...entry,
+    cost: round(entry.percentageOfValue * total, 2),
+  }));
+}
+
+/**
+ * Allocate total cost on entries by quantity.
+ * @param {*} entries
+ * @param {*} total
+ * @returns
+ */
+export function allocateCostByQuantity(total, entries) {
+  const totalQuantity = sumBy(entries, 'quantity');
+
+  const _entries = entries.map((entry) => ({
+    ...entry,
+    percentageOfQuantity: entry.quantity / totalQuantity,
+  }));
+
+  return _entries.map((entry) => ({
+    ...entry,
+    cost: round(entry.percentageOfQuantity * total, 2),
+  }));
+}