fix: FastField re-rendering.

fix: Allocate landed cost dialog.

client/src/containers/Drawers/AccountDrawer/AccountDrawerContent.js

@@ -1,4 +1,7 @@
 import React from 'react';
+
+import 'style/components/Drawers/AccountDrawer.scss';
+
 import { AccountDrawerProvider } from './AccountDrawerProvider';
 import AccountDrawerDetails from './AccountDrawerDetails';
 

client/src/containers/Drawers/AccountDrawer/AccountDrawerDetails.js

@@ -5,8 +5,6 @@ import AccountDrawerHeader from './AccountDrawerHeader';
 import AccountDrawerTable from './AccountDrawerTable';
 import { useAccountDrawerContext } from './AccountDrawerProvider';
 
-import 'style/components/Drawer/AccountDrawer.scss';
-
 /**
  * Account view details.
  */

client/src/containers/Drawers/BillDrawer/BillDrawerAlerts.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import BillTransactionDeleteAlert from 'containers/Alerts/Bills/BillTransactionDeleteAlert';
+import BillLocatedLandedCostDeleteAlert from 'containers/Alerts/Bills/BillLocatedLandedCostDeleteAlert';
 
 /**
  * Bill drawer alert.
@@ -7,7 +7,7 @@ import BillTransactionDeleteAlert from 'containers/Alerts/Bills/BillTransactionD
 export default function BillDrawerAlerts() {
   return (
     <div class="bills-alerts">
-      <BillTransactionDeleteAlert name="transaction-delete" />
+      <BillLocatedLandedCostDeleteAlert name="bill-located-cost-delete" />
     </div>
   );
 }

client/src/containers/Drawers/BillDrawer/BillDrawerContent.js

@@ -1,4 +1,7 @@
 import React from 'react';
+
+import 'style/components/Drawers/BillDrawer.scss';
+
 import { BillDrawerProvider } from './BillDrawerProvider';
 import BillDrawerDetails from './BillDrawerDetails';
 import BillDrawerAlerts from './BillDrawerAlerts';

client/src/containers/Drawers/BillDrawer/BillDrawerDetails.js

@@ -4,8 +4,6 @@ import intl from 'react-intl-universal';
 
 import LocatedLandedCostTable from './LocatedLandedCostTable';
 
-import 'style/components/Drawer/BillDrawer.scss';
-
 /**
  * Bill view details.
  */

client/src/containers/Drawers/BillDrawer/BillDrawerProvider.js

@@ -18,7 +18,9 @@ function BillDrawerProvider({ billId, ...props }) {
   //provider.
   const provider = {
     transactions,
+    billId,
   };
+
   return (
     <DashboardInsider loading={isLandedCostLoading}>
       <DrawerHeaderContent

client/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js

@@ -1,11 +1,17 @@
 import React from 'react';
-import { DataTable } from 'components';
+import { DataTable, Card } from 'components';
+import { Button, Classes, NavbarGroup } from '@blueprintjs/core';
+
 import { useLocatedLandedCostColumns, ActionsMenu } from './components';
 import { useBillDrawerContext } from './BillDrawerProvider';
 
 import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { compose } from 'utils';
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import Icon from 'components/Icon';
 
 /**
  * Located landed cost table.
@@ -13,25 +19,73 @@ import { compose } from 'utils';
 function LocatedLandedCostTable({
   // #withAlertsActions
   openAlert,
+
+  // #withDialogActions
+  openDialog,
+
+  // #withDrawerActions
+  openDrawer,
 }) {
   const columns = useLocatedLandedCostColumns();
-  const { transactions } = useBillDrawerContext();
+  const { transactions, billId } = useBillDrawerContext();
 
   // Handle the transaction delete action.
   const handleDeleteTransaction = ({ id }) => {
-    openAlert('transaction-delete', { BillId: id });
+    openAlert('bill-located-cost-delete', { BillId: id });
+  };
+
+  // Handle allocate landed cost button click.
+  const handleAllocateCostClick = () => {
+    openDialog('allocate-landed-cost', { billId });
+  };
+
+  // Handle from transaction link click.
+  const handleFromTransactionClick = (original) => {
+    const { from_transaction_type, from_transaction_id } = original;
+
+    switch (from_transaction_type) {
+      case 'Expense':
+        openDrawer('expense-drawer', { expenseId: from_transaction_id });
+        break;
+
+      case 'Bill':
+      default:
+        openDrawer('bill-drawer', { billId: from_transaction_id });
+        break;
+    }
   };
 
   return (
-    <DataTable
-      columns={columns}
-      data={transactions}
-      ContextMenu={ActionsMenu}
-      payload={{
-        onDelete: handleDeleteTransaction,
-      }}
-    />
+    <div>
+      <DashboardActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="receipt-24" />}
+            text={'Allocate landed cost'}
+            onClick={handleAllocateCostClick}
+          />
+        </NavbarGroup>
+      </DashboardActionsBar>
+
+      <Card>
+        <DataTable
+          columns={columns}
+          data={transactions}
+          ContextMenu={ActionsMenu}
+          payload={{
+            onDelete: handleDeleteTransaction,
+            onFromTranscationClick: handleFromTransactionClick,
+          }}
+          className={'datatable--landed-cost-transactions'}
+        />
+      </Card>
+    </div>
   );
 }
 
-export default compose(withAlertsActions)(LocatedLandedCostTable);
+export default compose(
+  withAlertsActions,
+  withDialogActions,
+  withDrawerActions,
+)(LocatedLandedCostTable);

client/src/containers/Drawers/BillDrawer/components.js

@@ -3,7 +3,6 @@ import intl from 'react-intl-universal';
 import { Intent, MenuItem, Menu } from '@blueprintjs/core';
 import { safeCallback } from 'utils';
 import { Icon } from 'components';
-
 /**
  * Actions menu.
  */
@@ -20,22 +19,57 @@ export function ActionsMenu({ row: { original }, payload: { onDelete } }) {
   );
 }
 
-export function useLocatedLandedCostColumns() {
-  return React.useMemo(() => [
-    {
-      Header: intl.get('name'),
-      accessor: 'description',
-      width: 150,
-    },
-    {
-      Header: intl.get('amount'),
-      accessor: 'amount',
-      width: 100,
-    },
-    {
-      Header: intl.get('allocation_method'),
-      accessor: 'allocation_method',
-      width: 100,
-    },
-  ]);
+/**
+ * From transaction table cell.
+ */
+export function FromTransactionCell({
+  row: { original },
+  payload: { onFromTranscationClick }
+}) {
+  // Handle the link click
+  const handleAnchorClick = () => {
+    onFromTranscationClick && onFromTranscationClick(original);
+  };
+
+  return (
+    <a href="#" onClick={handleAnchorClick}>
+      {original.from_transaction_type} → {original.from_transaction_id}
+    </a>
+  );
+}
+
+/**
+ * Retrieve bill located landed cost table columns.
+ */
+export function useLocatedLandedCostColumns() {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('name'),
+        accessor: 'description',
+        width: 150,
+        className: 'name',
+      },
+      {
+        Header: intl.get('amount'),
+        accessor: 'formatted_amount',
+        width: 100,
+        className: 'amount',
+      },
+      {
+        id: 'from_transaction',
+        Header: intl.get('From transaction'),
+        Cell: FromTransactionCell,
+        width: 100,
+        className: 'from-transaction',
+      },
+      {
+        Header: intl.get('allocation_method'),
+        accessor: 'allocation_method_formatted',
+        width: 100,
+        className: 'allocation-method',
+      },
+    ],
+    [],
+  );
 }

client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.js

@@ -1,4 +1,7 @@
 import React from 'react';
+
+import 'style/components/Drawers/ViewDetails.scss';
+
 import { ExpenseDrawerProvider } from './ExpenseDrawerProvider';
 import ExpenseDrawerDetails from './ExpenseDrawerDetails';
 

client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerDetails.js

@@ -4,7 +4,6 @@ import ExpenseDrawerHeader from './ExpenseDrawerHeader';
 import ExpenseDrawerTable from './ExpenseDrawerTable';
 import ExpenseDrawerFooter from './ExpenseDrawerFooter';
 import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
-import 'style/components/Drawer/ViewDetails.scss';
 
 /**
  * Expense view details.

client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerContent.js

@@ -1,4 +1,7 @@
 import React from 'react';
+
+import 'style/components/Drawers/ViewDetails.scss';
+
 import { ManualJournalDrawerProvider } from './ManualJournalDrawerProvider';
 import ManualJournalDrawerDetails from './ManualJournalDrawerDetails';
 

client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerDetails.js

@@ -6,8 +6,6 @@ import ManualJournalDrawerFooter from './ManualJournalDrawerFooter';
 
 import { useManualJournalDrawerContext } from 'containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider';
 
-import 'style/components/Drawer/ViewDetails.scss';
-
 /**
  * Manual journal view details.
  */

client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider.js

@@ -1,7 +1,7 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import { useJournal } from 'hooks/query';
 import { DashboardInsider, DrawerHeaderContent } from 'components';
-import intl from 'react-intl-universal';
 
 const ManualJournalDrawerContext = React.createContext();
 

client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js

@@ -69,6 +69,7 @@ export default function ManualJournalDrawerTable({
   return (
     <div className="journal-drawer__content--table">
       <DataTable columns={columns} data={entries} />
+
       <If condition={description}>
         <p className={'desc'}>
           <b>Description</b>: {description}

client/src/containers/Drawers/PaperTemplate/PaperTemplate.js

@@ -1,11 +1,13 @@
 import React from 'react';
+
+import 'style/components/Drawers/DrawerTemplate.scss';
+
 import PaperTemplateHeader from './PaperTemplateHeader';
 import PaperTemplateTable from './PaperTemplateTable';
 import PaperTemplateFooter from './PaperTemplateFooter';
 import { updateItemsEntriesTotal } from 'containers/Entries/utils';
 import intl from 'react-intl-universal';
 
-import 'style/components/Drawer/DrawerTemplate.scss';
 
 function PaperTemplate({ labels: propLabels, paperData, entries }) {
   const labels = {

client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate.js

@@ -1,9 +1,11 @@
 import React from 'react';
+
+import 'style/components/Drawers/DrawerTemplate.scss';
+
 import PaymentPaperTemplateHeader from './PaymentPaperTemplateHeader';
 import PaymentPaperTemplateTable from './PaymentPaperTemplateTable';
 import intl from 'react-intl-universal';
 
-import 'style/components/Drawer/DrawerTemplate.scss';
 
 export default function PaymentPaperTemplate({
   labels: propLabels,