Fetch applied taxes and subtotal incl and excl VAT

To get a total overview of the totals in the checkout, the applied taxes
are now also fetched from Magento using GraphQL.

Also the subtotal is now loaded excluding and including taxes, so the
developer in the frontend can decide if the subtotal should be shown
including or excluding VAT.

Author: Arjen Miedema

src/reactapp/src/api/cart/fetchGuestCart/modifier.js

@@ -42,21 +42,33 @@ function modifyCartItemsData(cartItems) {
 
 function modifyCartPricesData(cartPrices) {
   const grandTotal = _get(cartPrices, 'grand_total', {});
-  const subTotal = _get(cartPrices, 'subtotal_including_tax', {});
+  const subTotalIncl = _get(cartPrices, 'subtotal_including_tax', {});
+  const subTotalExcl = _get(cartPrices, 'subtotal_excluding_tax', {});
   const discountPrices = _get(cartPrices, 'discounts', []) || [];
   const discounts = discountPrices.map((discount) => ({
     label: discount.label,
     price: formatPrice(-discount.amount.value, true),
     amount: discount.amount.value,
   }));
+  const appliedTaxAmounts = _get(cartPrices, 'applied_taxes', []) || [];
+  const appliedTaxes = appliedTaxAmounts.map((tax) => ({
+    label: tax.label,
+    price: formatPrice(tax.amount.value),
+    amount: tax.amount.value,
+  }));
   const grandTotalAmount = _get(grandTotal, 'value');
-  const subTotalAmount = _get(subTotal, 'value');
+  const subTotalInclAmount = _get(subTotalIncl, 'value');
+  const subTotalExclAmount = _get(subTotalExcl, 'value');
 
   return {
     discounts,
     hasDiscounts: !_isArrayEmpty(discountPrices),
-    subTotal: formatPrice(subTotalAmount),
-    subTotalAmount,
+    appliedTaxes,
+    hasAppliedTaxes: !_isArrayEmpty(appliedTaxAmounts),
+    subTotalIncl: formatPrice(subTotalInclAmount),
+    subTotalInclAmount,
+    subTotalExcl: formatPrice(subTotalExclAmount),
+    subTotalExclAmount,
     grandTotal: formatPrice(grandTotalAmount),
     grandTotalAmount,
   };

src/reactapp/src/api/cart/utility/query/cartPriceInfo.js

@@ -4,10 +4,21 @@ prices {
     value
     currency
   }
+  subtotal_excluding_tax {
+    value
+    currency
+  }
   subtotal_including_tax {
     value
     currency
   }
+  applied_taxes {
+    label
+    amount {
+      currency
+      value
+    }
+  }
   discounts {
     label
     amount {

src/reactapp/src/components/totals/Totals.jsx

@@ -7,10 +7,13 @@ import useTotalsCartContext from './hooks/useTotalsCartContext';
 
 function Totals() {
   const {
-    subTotal,
+    subTotalIncl,
+    subTotalExcl,
     discounts,
+    appliedTaxes,
     grandTotal,
     hasSubTotal,
+    hasAppliedTaxes,
     hasDiscounts,
     hasShippingRate,
     shippingMethodRate,
@@ -25,7 +28,7 @@ function Totals() {
               {hasSubTotal && (
                 <div className="flex justify-between">
                   <div>{__('Cart Subtotal')}</div>
-                  <div>{subTotal}</div>
+                  <div>{subTotalIncl}</div>
                 </div>
               )}
 
@@ -35,6 +38,15 @@ function Totals() {
                   <div>{shippingMethodRate}</div>
                 </div>
               )}
+              {hasAppliedTaxes &&
+                appliedTaxes.map((appliedTax) => (
+                  <div key={appliedTax.label} className="flex justify-between">
+                    <div>
+                      {__('Tax')} {__(appliedTax.label)}
+                    </div>
+                    <div>{appliedTax.price}</div>
+                  </div>
+                ))}
               {hasDiscounts &&
                 discounts.map((discount) => (
                   <div key={discount.label} className="flex justify-between">

src/reactapp/src/components/totals/hooks/useTotalsCartContext.js

@@ -10,21 +10,27 @@ export default function useTotalsCartContext() {
   const prices = _get(cart, 'prices', {}) || {};
   const { price: shippingMethodRate, amount: shippingAmount } = shippingMethod;
   const {
-    subTotal,
+    subTotalIncl,
+    subTotalExcl,
     grandTotal,
+    appliedTaxes,
+    hasAppliedTaxes,
     discounts,
     hasDiscounts,
-    subTotalAmount,
+    subTotalInclAmount,
     grandTotalAmount,
   } = prices;
 
   return {
-    subTotal,
+    subTotalIncl,
+    subTotalExcl,
     grandTotal,
     discounts,
+    appliedTaxes,
     shippingMethodRate,
     hasDiscounts,
-    hasSubTotal: !!subTotalAmount,
+    hasAppliedTaxes,
+    hasSubTotal: !!subTotalInclAmount,
     hasGrandTotal: !!grandTotalAmount,
     hasShippingRate: !!shippingAmount,
   };