feat: integrate tax rates to bills (#260)

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormActions.tsx

@@ -3,7 +3,8 @@ import React from 'react';
 import styled from 'styled-components';
 import { useFormikContext } from 'formik';
 import { InclusiveButtonOptions } from './constants';
-import { Box, FFormGroup, FSelect } from '@/components';
+import { FFormGroup, FSelect } from '@/components';
+import { EntriesActionsBar } from '@/containers/Entries/EntriesActionBar';
 import { composeEntriesOnEditInclusiveTax } from './utils';
 
 /**
@@ -12,9 +13,9 @@ import { composeEntriesOnEditInclusiveTax } from './utils';
  */
 export function InvoiceFormActions() {
   return (
-    <InvoiceFormActionsRoot>
+    <EntriesActionsBar>
       <InvoiceExclusiveInclusiveSelect />
-    </InvoiceFormActionsRoot>
+    </EntriesActionsBar>
   );
 }
 
@@ -40,7 +41,7 @@ export function InvoiceExclusiveInclusiveSelect(props) {
       label={'Amounts are'}
       inline={true}
     >
-      <InclusiveSelect
+      <FSelect
         name={'inclusive_exclusive_tax'}
         items={InclusiveButtonOptions}
         textAccessor={'label'}
@@ -57,23 +58,5 @@ export function InvoiceExclusiveInclusiveSelect(props) {
 }
 
 const InclusiveFormGroup = styled(FFormGroup)`
-  margin-bottom: 0;
   margin-left: auto;
-
-  &.bp4-form-group.bp4-inline label.bp4-label {
-    line-height: 1.25;
-    opacity: 0.6;
-    margin-right: 8px;
-  }
-`;
-
-const InclusiveSelect = styled(FSelect)`
-  .bp4-button {
-    padding-right: 24px;
-  }
-`;
-
-const InvoiceFormActionsRoot = styled(Box)`
-  padding-bottom: 12px;
-  display: flex;
 `;

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooterRight.tsx

@@ -11,6 +11,7 @@ import {
   TotalLineTextStyle,
 } from '@/components';
 import { useInvoiceAggregatedTaxRates, useInvoiceTotals } from './utils';
+import { TaxType } from '@/interfaces/TaxRates';
 
 export function InvoiceFormFooterRight() {
   // Calculate the total due amount of invoice entries.
@@ -32,7 +33,7 @@ export function InvoiceFormFooterRight() {
       <TotalLine
         title={
           <>
-            {inclusive_exclusive_tax === 'inclusive'
+            {inclusive_exclusive_tax === TaxType.Inclusive
               ? 'Subtotal (Tax Inclusive)'
               : 'Subtotal'}
           </>

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx

@@ -1,18 +1,23 @@
 // @ts-nocheck
-import React, { useCallback, useMemo } from 'react';
+import React from 'react';
+import { useFormikContext } from 'formik';
 import intl from 'react-intl-universal';
 import moment from 'moment';
 import * as R from 'ramda';
 import { Intent } from '@blueprintjs/core';
-import { omit, first, keyBy, sumBy, groupBy } from 'lodash';
-import { compose, transformToForm, repeatValue } from '@/utils';
-import { useFormikContext } from 'formik';
-
-import { formattedAmount, defaultFastFieldShouldUpdate } from '@/utils';
+import { omit, first, sumBy } from 'lodash';
+import {
+  compose,
+  transformToForm,
+  repeatValue,
+  formattedAmount,
+  defaultFastFieldShouldUpdate,
+} from '@/utils';
 import { ERROR } from '@/constants/errors';
 import { AppToaster } from '@/components';
 import { useCurrentOrganization } from '@/hooks/state';
 import {
+  aggregateItemEntriesTaxRates,
   assignEntriesTaxAmount,
   getEntriesTotal,
 } from '@/containers/Entries/utils';
@@ -327,28 +332,14 @@ export const useInvoiceAggregatedTaxRates = () => {
   const { values } = useFormikContext();
   const { taxRates } = useInvoiceFormContext();
 
-  const taxRatesById = useMemo(() => keyBy(taxRates, 'id'), [taxRates]);
-
+  const aggregateTaxRates = React.useMemo(
+    () => aggregateItemEntriesTaxRates(taxRates),
+    [taxRates],
+  );
   // Calculate the total tax amount of invoice entries.
   return React.useMemo(() => {
-    const filteredEntries = values.entries.filter((e) => e.tax_rate_id);
-    const groupedTaxRates = groupBy(filteredEntries, 'tax_rate_id');
-
-    return Object.keys(groupedTaxRates).map((taxRateId) => {
-      const taxRate = taxRatesById[taxRateId];
-      const taxRates = groupedTaxRates[taxRateId];
-      const totalTaxAmount = sumBy(taxRates, 'tax_amount');
-      const taxAmountFormatted = formattedAmount(totalTaxAmount, 'USD');
-
-      return {
-        taxRateId,
-        taxRate: taxRate.rate,
-        label: `${taxRate.name} [${taxRate.rate}%]`,
-        taxAmount: totalTaxAmount,
-        taxAmountFormatted,
-      };
-    });
-  }, [values.entries]);
+    return aggregateTaxRates(values.entries);
+  }, [aggregateTaxRates, values.entries]);
 };
 
 /**