feat: checkbox field cell.

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

@@ -79,7 +79,10 @@ function ExpenseForm({
     }
     const categories = values.categories.filter(
       (category) =>
-        category.amount && category.index && category.expense_account_id,
+        category.amount &&
+        category.index &&
+        category.expense_account_id &&
+        category.landed_cost,
     );
 
     const form = {

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

@@ -7,6 +7,7 @@ import {
   InputGroupCell,
   MoneyFieldCell,
   AccountsListFieldCell,
+  CheckBoxFieldCell,
 } from 'components/DataTableCells';
 import { formattedAmount, safeSumBy } from 'utils';
 
@@ -49,19 +50,6 @@ const ActionsCellRenderer = ({
   );
 };
 
-/**
- * Landed cost cell.
- */
-const LandedCostCell = ({
-  row: { index },
-  column: { id },
-  cell: { value: initialValue },
-  data,
-  payload,
-}) => {
-  return <Checkbox minimal={true} className="ml2" />;
-};
-
 /**
  * Landed cost header cell.
  */
@@ -142,7 +130,7 @@ export function useExpenseFormTableColumns() {
       {
         Header: LandedCostHeaderCell,
         accessor: 'landed_cost',
-        Cell: LandedCostCell,
+        Cell: CheckBoxFieldCell,
         disableSortBy: true,
         disableResizing: true,
         width: 70,

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

@@ -27,7 +27,7 @@ export const defaultExpenseEntry = {
   amount: '',
   expense_account_id: '',
   description: '',
-  landed_cost: false,
+  landed_cost: 0,
 };
 
 export const defaultExpense = {