feat: integrate tax rates to bills (#260)

packages/webapp/src/containers/Purchases/Bills/BillForm/BillForm.tsx

@@ -26,6 +26,7 @@ import {
   handleErrors,
 } from './utils';
 import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
+import { BillFormEntriesActions } from './BillFormEntriesActions';
 
 /**
  * Bill form.
@@ -126,7 +127,10 @@ function BillForm({
         <Form>
           <BillFormTopBar />
           <BillFormHeader />
-          <BillItemsEntriesEditor />
+          <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
+            <BillFormEntriesActions />
+            <BillItemsEntriesEditor />
+          </div>
           <BillFormFooter />
           <BillFloatingActions />
         </Form>

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormEntriesActions.tsx

@@ -0,0 +1,58 @@
+// @ts-nocheck
+import styled from 'styled-components';
+import { useFormikContext } from 'formik';
+import { FFormGroup, FSelect } from '@/components';
+import { InclusiveTaxOptions } from '@/constants/InclusiveTaxOptions';
+
+import { composeEntriesOnEditInclusiveTax } from './utils';
+import { EntriesActionsBar } from '@/containers/Entries/EntriesActionBar';
+
+export function BillFormEntriesActions() {
+  return (
+    <EntriesActionsBar>
+      <BillExclusiveInclusiveSelect />
+    </EntriesActionsBar>
+  );
+}
+
+/**
+ * Bill exclusive/inclusive select.
+ * @returns {React.ReactNode}
+ */
+export function BillExclusiveInclusiveSelect(props) {
+  const { values, setFieldValue } = useFormikContext();
+
+  const handleItemSelect = (item) => {
+    const newEntries = composeEntriesOnEditInclusiveTax(
+      item.key,
+      values.entries,
+    );
+    setFieldValue('inclusive_exclusive_tax', item.key);
+    setFieldValue('entries', newEntries);
+  };
+
+  return (
+    <InclusiveFormGroup
+      name={'inclusive_exclusive_tax'}
+      label={'Amounts are'}
+      inline={true}
+    >
+      <FSelect
+        name={'inclusive_exclusive_tax'}
+        items={InclusiveTaxOptions}
+        textAccessor={'label'}
+        labelAccessor={() => ''}
+        valueAccessor={'key'}
+        popoverProps={{ minimal: true, usePortal: true, inline: false }}
+        buttonProps={{ small: true }}
+        onItemSelect={handleItemSelect}
+        filterable={false}
+        {...props}
+      />
+    </InclusiveFormGroup>
+  );
+}
+
+const InclusiveFormGroup = styled(FFormGroup)`
+  margin-left: auto;
+`;

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormFooterRight.tsx

@@ -1,15 +1,14 @@
 // @ts-nocheck
-import React from 'react';
 import styled from 'styled-components';
-
 import {
-  T,
   TotalLines,
   TotalLine,
   TotalLineBorderStyle,
   TotalLineTextStyle,
 } from '@/components';
-import { useBillTotals } from './utils';
+import { useBillAggregatedTaxRates, useBillTotals } from './utils';
+import { useFormikContext } from 'formik';
+import { TaxType } from '@/interfaces/TaxRates';
 
 export function BillFormFooterRight() {
   const {
@@ -19,26 +18,46 @@ export function BillFormFooterRight() {
     formattedPaymentTotal,
   } = useBillTotals();
 
+  const {
+    values: { inclusive_exclusive_tax, currency_code },
+  } = useFormikContext();
+
+  const taxEntries = useBillAggregatedTaxRates();
+
   return (
     <BillTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
       <TotalLine
-        title={<T id={'bill_form.label.subtotal'} />}
+        title={
+          <>
+            {inclusive_exclusive_tax === TaxType.Inclusive
+              ? 'Subtotal (Tax Inclusive)'
+              : 'Subtotal'}
+          </>
+        }
         value={formattedSubtotal}
         borderStyle={TotalLineBorderStyle.None}
       />
+      {taxEntries.map((tax, index) => (
+        <TotalLine
+          key={index}
+          title={tax.label}
+          value={tax.taxAmountFormatted}
+          borderStyle={TotalLineBorderStyle.None}
+        />
+      ))}
       <TotalLine
-        title={<T id={'bill_form.label.total'} />}
+        title={`Total (${currency_code})`}
         value={formattedTotal}
         borderStyle={TotalLineBorderStyle.SingleDark}
         textStyle={TotalLineTextStyle.Bold}
       />
       <TotalLine
-        title={<T id={'bill_form.label.total'} />}
+        title={'Paid Amount'}
         value={formattedPaymentTotal}
         borderStyle={TotalLineBorderStyle.None}
       />
       <TotalLine
-        title={<T id={'bill_form.label.total'} />}
+        title={'Due Amount'}
         value={formattedDueTotal}
         textStyle={TotalLineTextStyle.Bold}
       />

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormProvider.tsx

@@ -15,6 +15,7 @@ import {
   useCreateBill,
   useEditBill,
 } from '@/hooks/query';
+import { useTaxRates } from '@/hooks/query/taxRates';
 
 const BillFormContext = createContext();
 
@@ -83,6 +84,9 @@ function BillFormProvider({ billId, ...props }) {
     isSuccess: isBranchesSuccess,
   } = useBranches({}, { enabled: isBranchFeatureCan });
 
+  // Fetch tax rates.
+  const { data: taxRates, isLoading: isTaxRatesLoading } = useTaxRates();
+
   // Fetches the projects list.
   const {
     data: { projects },
@@ -103,7 +107,10 @@ function BillFormProvider({ billId, ...props }) {
 
   // Determines whether the warehouse and branches are loading.
   const isFeatureLoading =
-    isWarehouesLoading || isBranchesLoading || isProjectsLoading;
+    isWarehouesLoading ||
+    isBranchesLoading ||
+    isProjectsLoading ||
+    isTaxRatesLoading;
 
   const provider = {
     accounts,
@@ -113,6 +120,7 @@ function BillFormProvider({ billId, ...props }) {
     warehouses,
     branches,
     projects,
+    taxRates,
     submitPayload,
     isNewMode,
 
@@ -124,6 +132,7 @@ function BillFormProvider({ billId, ...props }) {
     isFeatureLoading,
     isBranchesSuccess,
     isWarehousesSuccess,
+    isTaxRatesLoading,
 
     createBillMutate,
     editBillMutate,

packages/webapp/src/containers/Purchases/Bills/BillForm/BillItemsEntriesEditor.tsx

@@ -1,46 +1,41 @@
 // @ts-nocheck
-import React from 'react';
-import classNames from 'classnames';
 import ItemsEntriesTable from '@/containers/Entries/ItemsEntriesTable';
 import { FastField } from 'formik';
-import { CLASSES } from '@/constants/classes';
 import { useBillFormContext } from './BillFormProvider';
 import { entriesFieldShouldUpdate } from './utils';
 import { ITEM_TYPE } from '@/containers/Entries/utils';
 
 /**
- * Bill form body. 
+ * Bill form body.
  */
 export default function BillFormBody({ defaultBill }) {
-  const { items } = useBillFormContext();
+  const { items, taxRates } = useBillFormContext();
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
-      <FastField
-        name={'entries'}
-        items={items}
-        shouldUpdate={entriesFieldShouldUpdate}
-      >
-        {({
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <ItemsEntriesTable
-            value={value}
-            onChange={(entries) => {
-              setFieldValue('entries', entries);
-            }}
-            items={items}
-            errors={error}
-            linesNumber={4}
-            currencyCode={values.currency_code}
-            itemType={ITEM_TYPE.PURCHASABLE}
-            landedCost={true}
-            enableTaxRates={false}
-          />
-        )}
-      </FastField>
-    </div>
+    <FastField
+      name={'entries'}
+      items={items}
+      shouldUpdate={entriesFieldShouldUpdate}
+    >
+      {({
+        form: { values, setFieldValue },
+        field: { value },
+        meta: { error, touched },
+      }) => (
+        <ItemsEntriesTable
+          value={value}
+          onChange={(entries) => {
+            setFieldValue('entries', entries);
+          }}
+          items={items}
+          errors={error}
+          linesNumber={4}
+          currencyCode={values.currency_code}
+          itemType={ITEM_TYPE.PURCHASABLE}
+          taxRates={taxRates}
+          landedCost={true}
+        />
+      )}
+    </FastField>
   );
 }

packages/webapp/src/containers/Purchases/Bills/BillForm/utils.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import moment from 'moment';
 import intl from 'react-intl-universal';
 import * as R from 'ramda';
-import { first } from 'lodash';
+import { first, chain } from 'lodash';
 import { Intent } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
 import { AppToaster } from '@/components';
@@ -17,6 +17,8 @@ import {
 import {
   updateItemsEntriesTotal,
   ensureEntriesHaveEmptyLine,
+  assignEntriesTaxAmount,
+  aggregateItemEntriesTaxRates,
 } from '@/containers/Entries/utils';
 import { useCurrentOrganization } from '@/hooks/state';
 import {
@@ -24,6 +26,7 @@ import {
   getEntriesTotal,
 } from '@/containers/Entries/utils';
 import { useBillFormContext } from './BillFormProvider';
+import { TaxType } from '@/interfaces/TaxRates';
 
 export const MIN_LINES_NUMBER = 1;
 
@@ -37,6 +40,9 @@ export const defaultBillEntry = {
   description: '',
   amount: '',
   landed_cost: false,
+  tax_rate_id: '',
+  tax_rate: '',
+  tax_amount: '',
 };
 
 // Default bill.
@@ -46,6 +52,7 @@ export const defaultBill = {
   bill_date: moment(new Date()).format('YYYY-MM-DD'),
   due_date: moment(new Date()).format('YYYY-MM-DD'),
   reference_no: '',
+  inclusive_exclusive_tax: TaxType.Inclusive,
   note: '',
   open: '',
   branch_id: '',
@@ -82,6 +89,9 @@ export const transformToEditForm = (bill) => {
 
   return {
     ...transformToForm(bill, defaultBill),
+    inclusive_exclusive_tax: bill.is_inclusive_tax
+      ? TaxType.Inclusive
+      : TaxType.Exclusive,
     entries,
   };
 };
@@ -228,11 +238,12 @@ export const useSetPrimaryWarehouseToForm = () => {
  */
 export const useBillTotals = () => {
   const {
-    values: { entries, currency_code: currencyCode },
+    values: { currency_code: currencyCode },
   } = useFormikContext();
 
-  // Retrieves the bili entries total.
-  const total = React.useMemo(() => getEntriesTotal(entries), [entries]);
+  // Retrieves the bill subtotal.
+  const subtotal = useBillSubtotal();
+  const total = useBillTotal();
 
   // Retrieves the formatted total money.
   const formattedTotal = React.useMemo(
@@ -241,8 +252,8 @@ export const useBillTotals = () => {
   );
   // Retrieves the formatted subtotal.
   const formattedSubtotal = React.useMemo(
-    () => formattedAmount(total, currencyCode, { money: false }),
-    [total, currencyCode],
+    () => formattedAmount(subtotal, currencyCode, { money: false }),
+    [subtotal, currencyCode],
   );
   // Retrieves the payment total.
   const paymentTotal = React.useMemo(() => 0, []);
@@ -288,3 +299,86 @@ export const useBillIsForeignCustomer = () => {
   );
   return isForeignCustomer;
 };
+
+/**
+ * Re-calculates the entries tax amount when editing.
+ * @returns {string}
+ */
+export const composeEntriesOnEditInclusiveTax = (
+  inclusiveExclusiveTax: string,
+  entries,
+) => {
+  return R.compose(
+    assignEntriesTaxAmount(inclusiveExclusiveTax === 'inclusive'),
+  )(entries);
+};
+
+/**
+ * Retreives the bill aggregated tax rates.
+ * @returns {Array}
+ */
+export const useBillAggregatedTaxRates = () => {
+  const { values } = useFormikContext();
+  const { taxRates } = useBillFormContext();
+
+  const aggregateTaxRates = React.useMemo(
+    () => aggregateItemEntriesTaxRates(taxRates),
+    [taxRates],
+  );
+  // Calculate the total tax amount of bill entries.
+  return React.useMemo(() => {
+    return aggregateTaxRates(values.entries);
+  }, [aggregateTaxRates, values.entries]);
+};
+
+/**
+ * Retrieves the bill subtotal.
+ * @returns {number}
+ */
+export const useBillSubtotal = () => {
+  const {
+    values: { entries },
+  } = useFormikContext();
+
+  // Calculate the total due amount of bill entries.
+  return React.useMemo(() => getEntriesTotal(entries), [entries]);
+};
+
+/**
+ * Retreives the bill total tax amount.
+ * @returns {number}
+ */
+export const useBillTotalTaxAmount = () => {
+  const { values } = useFormikContext();
+
+  return React.useMemo(() => {
+    return chain(values.entries)
+      .filter((entry) => entry.tax_amount)
+      .sumBy('tax_amount')
+      .value();
+  }, [values.entries]);
+};
+
+/**
+ * Detarmines whether the tax is exclusive.
+ * @returns {boolean}
+ */
+export const useIsBillTaxExclusive = () => {
+  const { values } = useFormikContext();
+
+  return values.inclusive_exclusive_tax === TaxType.Exclusive;
+};
+
+/**
+ * Retreives the bill total.
+ * @returns {number}
+ */
+export const useBillTotal = () => {
+  const subtotal = useBillSubtotal();
+  const totalTaxAmount = useBillTotalTaxAmount();
+  const isExclusiveTax = useIsBillTaxExclusive();
+
+  return R.compose(R.when(R.always(isExclusiveTax), R.add(totalTaxAmount)))(
+    subtotal,
+  );
+};

packages/webapp/src/containers/Purchases/Bills/BillsLanding/components.tsx

@@ -9,20 +9,18 @@ import {
   Tag,
   ProgressBar,
 } from '@blueprintjs/core';
-
+import clsx from 'classnames';
 import {
   FormatDateCell,
   FormattedMessage as T,
   Icon,
   If,
   Choose,
-  Money,
   Can,
 } from '@/components';
 import {
   formattedAmount,
   safeCallback,
-  isBlank,
   calculateStatus,
 } from '@/utils';
 import {
@@ -30,6 +28,7 @@ import {
   PaymentMadeAction,
   AbilitySubject,
 } from '@/constants/abilityOption';
+import { CLASSES } from '@/constants';
 
 /**
  * Actions menu.
@@ -101,17 +100,6 @@ export function ActionsMenu({
   );
 }
 
-/**
- * Amount accessor.
- */
-export function AmountAccessor(bill) {
-  return !isBlank(bill.amount) ? (
-    <Money amount={bill.amount} currency={bill.currency_code} />
-  ) : (
-    ''
-  );
-}
-
 /**
  * Status accessor.
  */
@@ -198,11 +186,11 @@ export function useBillsTableColumns() {
       {
         id: 'amount',
         Header: intl.get('amount'),
-        accessor: AmountAccessor,
+        accessor: 'total_formatted',
         width: 120,
-        className: 'amount',
         align: 'right',
         clickable: true,
+        className: clsx(CLASSES.FONT_BOLD),
       },
       {
         id: 'status',