fix: FastField re-rendering.

fix: Allocate landed cost dialog.

client/src/containers/Expenses/ExpenseForm/ExpenseFormEntriesField.js

@@ -1,14 +1,22 @@
 import { FastField } from 'formik';
 import React from 'react';
 import ExpenseFormEntriesTable from './ExpenseFormEntriesTable';
-import { defaultExpenseEntry } from './utils';
+import { useExpenseFormContext } from './ExpenseFormPageProvider';
+import { defaultExpenseEntry, accountsFieldShouldUpdate } from './utils';
 
 /**
  * Expense form entries field.
  */
 export default function ExpenseFormEntriesField({ linesNumber = 4 }) {
+  // Expense form context.
+  const { accounts } = useExpenseFormContext();
+
   return (
-    <FastField name={'categories'}>
+    <FastField
+      name={'categories'}
+      accounts={accounts}
+      shouldUpdate={accountsFieldShouldUpdate}
+    >
       {({
         form: { values, setFieldValue },
         field: { value },

client/src/containers/Expenses/ExpenseForm/ExpenseFormEntriesTable.js

@@ -22,12 +22,13 @@ export default function ExpenseFormEntriesTable({
   error,
   onChange,
   currencyCode,
+  landedCost = true,
 }) {
   // Expense form context.
   const { accounts } = useExpenseFormContext();
 
   // Memorized data table columns.
-  const columns = useExpenseFormTableColumns();
+  const columns = useExpenseFormTableColumns({ landedCost });
 
   // Handles update datatable data.
   const handleUpdateData = useCallback(
@@ -61,6 +62,7 @@ export default function ExpenseFormEntriesTable({
 
   return (
     <DataTableEditable
+      name={'expense-form'}
       columns={columns}
       data={entries}
       sticky={true}

client/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.js

@@ -11,6 +11,7 @@ import {
   inputIntent,
   handleDateChange,
 } from 'utils';
+import { customersFieldShouldUpdate, accountsFieldShouldUpdate } from './utils';
 import {
   CurrencySelectList,
   ContactSelecetList,
@@ -51,7 +52,11 @@ export default function ExpenseFormHeader() {
         )}
       </FastField>
 
-      <FastField name={'payment_account_id'}>
+      <FastField
+        name={'payment_account_id'}
+        accounts={accounts}
+        shouldUpdate={accountsFieldShouldUpdate}
+      >
         {({ form, field: { value }, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'payment_account'} />}
@@ -118,7 +123,11 @@ export default function ExpenseFormHeader() {
         )}
       </FastField>
 
-      <FastField name={'customer_id'}>
+      <FastField
+        name={'customer_id'}
+        customers={customers}
+        shouldUpdate={customersFieldShouldUpdate}
+      >
         {({ form, field: { value }, meta: { error, touched } }) => (
           <FormGroup
             label={<T id={'customer'} />}

client/src/containers/Expenses/ExpenseForm/components.js

@@ -56,8 +56,12 @@ const ActionsCellRenderer = ({
 const LandedCostHeaderCell = () => {
   return (
     <>
-      <T id={'cost'} />
-      <Hint content={''} />
+      <T id={'Landed'} />
+      <Hint
+        content={
+          'This options allows you to be able to add additional cost eg. freight then allocate cost to the items in your bills.'
+        }
+      />
     </>
   );
 };
@@ -87,7 +91,7 @@ function ExpenseAccountFooterCell() {
 /**
  * Retrieve expense form table entries columns.
  */
-export function useExpenseFormTableColumns() {
+export function useExpenseFormTableColumns({ landedCost }) {
   return React.useMemo(
     () => [
       {
@@ -127,15 +131,19 @@ export function useExpenseFormTableColumns() {
         className: 'description',
         width: 100,
       },
-      {
-        Header: LandedCostHeaderCell,
-        accessor: 'landed_cost',
-        Cell: CheckBoxFieldCell,
-        disableSortBy: true,
-        disableResizing: true,
-        width: 70,
-        className: 'landed_cost',
-      },
+      ...(landedCost
+        ? [
+            {
+              Header: LandedCostHeaderCell,
+              accessor: 'landed_cost',
+              Cell: CheckBoxFieldCell,
+              disableSortBy: true,
+              disableResizing: true,
+              width: 100,
+              className: 'landed-cost',
+            },
+          ]
+        : []),
       {
         Header: '',
         accessor: 'action',

client/src/containers/Expenses/ExpenseForm/utils.js

@@ -1,7 +1,11 @@
 import { AppToaster } from 'components';
 import moment from 'moment';
 import intl from 'react-intl-universal';
-import { transformToForm, repeatValue } from 'utils';
+import {
+  defaultFastFieldShouldUpdate,
+  transformToForm,
+  repeatValue,
+} from 'utils';
 
 const ERROR = {
   EXPENSE_ALREADY_PUBLISHED: 'EXPENSE.ALREADY.PUBLISHED',
@@ -27,7 +31,7 @@ export const defaultExpenseEntry = {
   amount: '',
   expense_account_id: '',
   description: '',
-  landed_cost: 0,
+  landed_cost: false,
 };
 
 export const defaultExpense = {
@@ -62,3 +66,23 @@ export const transformToEditForm = (
     ],
   };
 };
+
+/**
+ * Detarmine cusotmers fast-field should update.
+ */
+export const customersFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.customers !== oldProps.customers ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};
+
+/**
+ * Detarmine accounts fast-field should update.
+ */
+export const accountsFieldShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.accounts !== oldProps.accounts ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};