feat(InvoiceForm): remove the entries table footer.

src/containers/Entries/components.js

@@ -1,8 +1,11 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { Tooltip, Button, Intent, Position } from '@blueprintjs/core';
+import { MenuItem, Menu, Button, Position } from '@blueprintjs/core';
+import { Popover2 } from '@blueprintjs/popover2';
+
+import { Align } from 'common';
 import { Hint, Icon, FormattedMessage as T } from 'components';
-import { formattedAmount, safeSumBy } from 'utils';
+import { formattedAmount } from 'utils';
 import {
   InputGroupCell,
   MoneyFieldCell,
@@ -27,60 +30,35 @@ export function ItemHeaderCell() {
   );
 }
 
-/**
- * Item column footer cell.
- */
-export function ItemFooterCell() {
-  return (
-    <span>
-      <T id={'total'} />
-    </span>
-  );
-}
-
 /**
  * Actions cell renderer component.
  */
 export function ActionsCellRenderer({
   row: { index },
-  column: { id },
-  cell: { value },
-  data,
   payload: { removeRow },
 }) {
   const onRemoveRole = () => {
     removeRow(index);
   };
 
+  const exampleMenu = (
+    <Menu>
+      <MenuItem onClick={onRemoveRole} text="Remove line" />
+    </Menu>
+  );
+
   return (
-    <Tooltip content={<T id={'remove_the_line'} />} position={Position.LEFT}>
+    <Popover2 content={exampleMenu} placement="left-start">
       <Button
-        icon={<Icon icon={'times-circle'} iconSize={14} />}
+        icon={<Icon icon={'more-13'} iconSize={13} />}
         iconSize={14}
         className="m12"
-        intent={Intent.DANGER}
+        minimal={true}
-        onClick={onRemoveRole}
       />
-    </Tooltip>
+    </Popover2>
   );
 }
 
-/**
- * Quantity total footer cell.
- */
-export function QuantityTotalFooterCell({ rows }) {
-  const quantity = safeSumBy(rows, 'original.quantity');
-  return <span>{quantity}</span>;
-}
-
-/**
- * Total footer cell.
- */
-export function TotalFooterCell({ payload: { currencyCode }, rows }) {
-  const total = safeSumBy(rows, 'original.amount');
-  return <span>{formattedAmount(total, currencyCode)}</span>;
-}
-
 /**
  * Total accessor.
  */
@@ -108,26 +86,14 @@ const LandedCostHeaderCell = () => {
 /**
  * Retrieve editable items entries columns.
  */
-export function useEditableItemsEntriesColumns({
+export function useEditableItemsEntriesColumns({ landedCost }) {
-  landedCost,
-}) {
   return React.useMemo(
     () => [
-      {
-        Header: '#',
-        accessor: 'index',
-        Cell: IndexTableCell,
-        width: 40,
-        disableResizing: true,
-        disableSortBy: true,
-        className: 'index',
-      },
       {
         Header: ItemHeaderCell,
         id: 'item_id',
         accessor: 'item_id',
         Cell: ItemsListCell,
-        Footer: ItemFooterCell,
         disableSortBy: true,
         width: 130,
         className: 'item',
@@ -145,10 +111,9 @@ export function useEditableItemsEntriesColumns({
         Header: intl.get('quantity'),
         accessor: 'quantity',
         Cell: NumericInputCell,
-        Footer: QuantityTotalFooterCell,
         disableSortBy: true,
         width: 70,
-        className: 'quantity',
+        align: Align.Right,
       },
       {
         Header: intl.get('rate'),
@@ -156,7 +121,7 @@ export function useEditableItemsEntriesColumns({
         Cell: MoneyFieldCell,
         disableSortBy: true,
         width: 70,
-        className: 'rate',
+        align: Align.Right,
       },
       {
         Header: intl.get('discount'),
@@ -164,16 +129,15 @@ export function useEditableItemsEntriesColumns({
         Cell: PercentFieldCell,
         disableSortBy: true,
         width: 60,
-        className: 'discount',
+        align: Align.Right,
       },
       {
         Header: intl.get('total'),
-        Footer: TotalFooterCell,
         accessor: 'amount',
         Cell: TotalCell,
         disableSortBy: true,
         width: 100,
-        className: 'total',
+        align: Align.Right,
       },
       ...(landedCost
         ? [
@@ -193,7 +157,6 @@ export function useEditableItemsEntriesColumns({
         Header: '',
         accessor: 'action',
         Cell: ActionsCellRenderer,
-        className: 'actions',
         disableSortBy: true,
         disableResizing: true,
         width: 45,

src/containers/Sales/Invoices/InvoiceForm/InvoiceFormCurrencyTag.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import { useFormikContext } from 'formik';
+
 import { BaseCurrency, BaseCurrencyRoot } from 'components';
 import { useInvoiceFormContext } from './InvoiceFormProvider';
 
@@ -6,15 +8,17 @@ import { useInvoiceFormContext } from './InvoiceFormProvider';
  * Invoice form currency tag.
  */
 export default function InvoiceFormCurrencyTag() {
-  const { isForeignCustomer, selectCustomer } = useInvoiceFormContext();
+  const { isForeignCustomer } = useInvoiceFormContext();
+  const {
+    values: { currency_code },
+  } = useFormikContext();
 
   if (!isForeignCustomer) {
     return null;
   }
-
   return (
     <BaseCurrencyRoot>
-      <BaseCurrency currency={selectCustomer?.currency_code} />
+      <BaseCurrency currency={currency_code} />
     </BaseCurrencyRoot>
   );
 }

src/containers/Sales/Invoices/InvoiceForm/InvoiceFormProvider.js

@@ -1,5 +1,5 @@
 import React, { createContext, useState } from 'react';
-import { isEmpty, pick, isEqual, isUndefined } from 'lodash';
+import { isEmpty, pick } from 'lodash';
 import { useLocation } from 'react-router-dom';
 import { Features } from 'common';
 import { useFeatureCan } from 'hooks/state';
@@ -94,9 +94,7 @@ function InvoiceFormProvider({ invoiceId, baseCurrency, ...props }) {
   const isFeatureLoading = isWarehouesLoading || isBranchesLoading;
 
   // Determines whether the foreign customer.
-  const isForeignCustomer =
+  const isForeignCustomer = true;
-    !isEqual(selectCustomer?.currency_code, baseCurrency) &&
-    !isUndefined(selectCustomer?.currency_code);
 
   const provider = {
     invoice,