hyva-themes · jladmore · Aug 19, 2021 · Aug 19, 2021
diff --git a/src/ViewModel/CheckoutConfigProvider.php b/src/ViewModel/CheckoutConfigProvider.php
@@ -7,6 +7,7 @@
 use Magento\Framework\Serialize\SerializerInterface;
 use Magento\Framework\View\Element\Block\ArgumentInterface;
 use Magento\Framework\Locale\ResolverInterface as LocaleResolverInterface;
+use Hyva\Checkout\ViewModel\CurrencyProvider;
 
 class CheckoutConfigProvider implements ArgumentInterface
 {
@@ -74,6 +75,30 @@ public function getConfig(): string
             'language' => $this->localeResolver->getLocale(),
             'currency' => $this->currencyProvider->getConfig(),
             'defaultCountryId' => $checkoutConfig['defaultCountryId'],
+            // is shipping price ex tax
+            'isDisplayShippingPriceExclTax' => 
+                        $checkoutConfig['isDisplayShippingPriceExclTax'],
+            // Display Shipping prices inc and ex tax
+            'isDisplayShippingBothPrices' =>
+                        $checkoutConfig['isDisplayShippingBothPrices'],
+            // Shipping Cart Prices display mode inc ex tax or both
+            'reviewShippingDisplayMode' =>
+                        $checkoutConfig['reviewShippingDisplayMode'],
+            // Cart Prices display mode inc ex tax or both
+            'reviewItemPriceDisplayMode' =>
+                        $checkoutConfig['reviewItemPriceDisplayMode'],
+            // Cart Subtotal Prices display mode inc ex tax or both
+            'reviewTotalsDisplayMode' =>
+                        $checkoutConfig['reviewTotalsDisplayMode'],
+            // Grand Total Prices display display tax or not
+            'includeTaxInGrandTotal' =>
+                        $checkoutConfig['includeTaxInGrandTotal'],
+            // Show tax details in checkout totals section 
+            'isFullTaxSummaryDisplayed' =>
+                        $checkoutConfig['isFullTaxSummaryDisplayed'],
+            // Show tax details when its zero 
+            'isZeroTaxDisplayed' =>
+                        $checkoutConfig['isZeroTaxDisplayed'],
         ]);
     }
 }
diff --git a/src/reactapp/src/api/cart/fetchGuestCart/modifier.js b/src/reactapp/src/api/cart/fetchGuestCart/modifier.js
@@ -17,6 +17,12 @@ function modifyCartItemsData(cartItems) {
     const price = formatPrice(priceAmount);
     const rowTotalAmount = _get(prices, 'row_total.value');
     const rowTotal = formatPrice(rowTotalAmount);
+    const rowTotalAmountIncTax  = _get(prices, 'row_total_including_tax.value');
+    const priceAmountIncTax = rowTotalAmountIncTax / quantity;
+    const priceIncTax = formatPrice(priceAmountIncTax);
+    const rowTotalIncTax  = formatPrice(rowTotalAmountIncTax);
+    const rowTotalDiscountAmount = _get(prices, 'total_item_discount.value');
+    const rowTotalDiscount  = formatPrice(rowTotalDiscountAmount);;
     const productId = _get(product, 'id');
     const productSku = _get(product, 'sku');
     const productName = _get(product, 'name');
@@ -28,8 +34,14 @@ function modifyCartItemsData(cartItems) {
       quantity,
       priceAmount,
       price,
+      priceAmountIncTax,
+      priceIncTax,
       rowTotal,
       rowTotalAmount,
+      rowTotalIncTax,
+      rowTotalAmountIncTax,
+      rowTotalDiscount,
+      rowTotalDiscountAmount,
       productId,
       productSku,
       productName,
@@ -43,21 +55,33 @@ function modifyCartItemsData(cartItems) {
 
 function modifyCartPricesData(cartPrices) {
   const grandTotal = _get(cartPrices, 'grand_total', {});
-  const subTotal = _get(cartPrices, 'subtotal_including_tax', {});
+  const subTotalIncTax = _get(cartPrices, 'subtotal_including_tax', {});
+  const subTotalExTax = _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 appliedTaxes = _get(cartPrices, 'applied_taxes', []) || [];
+  const taxes = appliedTaxes.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 subTotalIncTaxAmount = _get(subTotalIncTax, 'value');
+  const subTotalExTaxAmount = _get(subTotalExTax, 'value');
 
   return {
     discounts,
     hasDiscounts: !_isArrayEmpty(discountPrices),
-    subTotal: formatPrice(subTotalAmount),
-    subTotalAmount,
+    taxes,
+    hasTaxes: !_isArrayEmpty(taxes),
+    subTotalIncTax: formatPrice(subTotalIncTaxAmount),
+    subTotalExTax: formatPrice(subTotalExTaxAmount),
+    subTotalIncTaxAmount,
+    subTotalExTaxAmount,
     grandTotal: formatPrice(grandTotalAmount),
     grandTotalAmount,
   };

diff --git a/src/reactapp/src/api/cart/setShippingAddress/modifier.js b/src/reactapp/src/api/cart/setShippingAddress/modifier.js
@@ -40,7 +40,8 @@ export function modifyShippingMethods(addressList) {
       carrier_title: carrierTitle,
       method_code: methodCode,
       method_title: methodTitle,
-      price_incl_tax: { currency: priceCurrency, value: amount },
+      price_incl_tax: { currency: priceCurrencyIncTax, value: amountIncTax },
+      price_excl_tax: { currency: priceCurrencyExTax, value: amountExTax },
     } = method;
 
     const methodId = `${carrierCode}__${methodCode}`;
@@ -51,8 +52,10 @@ export function modifyShippingMethods(addressList) {
       carrierTitle,
       methodCode,
       methodTitle,
-      price: `${_get(config.currencySymbols, priceCurrency, '')}${amount}`,
-      amount,
+      priceExTax: `${_get(config.currencySymbols, priceCurrencyExTax, '')}${amountExTax}`,
+      priceIncTax: `${_get(config.currencySymbols, priceCurrencyIncTax, '')}${amountIncTax}`,
+      amountExTax,
+      amountIncTax
     };
 
     return methodList;

diff --git a/src/reactapp/src/api/cart/utility/query/cartItemsInfo.js b/src/reactapp/src/api/cart/utility/query/cartItemsInfo.js
@@ -6,11 +6,19 @@ items {
     price {
       value
       currency
-    },
+    }
     row_total {
       value
       currency
     }
+    row_total_including_tax {
+      value
+      currency
+    }
+    total_item_discount {
+      value
+      currency
+    }
   }
   product {
     id

diff --git a/src/reactapp/src/api/cart/utility/query/cartPriceInfo.js b/src/reactapp/src/api/cart/utility/query/cartPriceInfo.js
@@ -8,13 +8,24 @@ prices {
     value
     currency
   }
+  subtotal_excluding_tax {
+    value
+    currency
+  }
   discounts {
     label
     amount {
       currency
       value
     }
   }
+  applied_taxes {
+    label
+    amount {
+      currency
+      value
+    }
+  }
 }
 `;
 

diff --git a/src/reactapp/src/api/cart/utility/query/cartShippingMethods.js b/src/reactapp/src/api/cart/utility/query/cartShippingMethods.js
@@ -4,6 +4,10 @@ available_shipping_methods {
   carrier_title
   method_code
   method_title
+  price_excl_tax {
+    value
+    currency
+  }
   price_incl_tax {
     currency
     value

diff --git a/src/reactapp/src/components/items/components/CartItem.jsx b/src/reactapp/src/components/items/components/CartItem.jsx
@@ -7,7 +7,7 @@ import Button from '../../common/Button';
 import TextInput from '../../common/Form/TextInput';
 import { __ } from '../../../i18n';
 import { _emptyFunc } from '../../../utils';
-import { CART_ITEMS_FORM } from '../../../config';
+import { CART_ITEMS_FORM, config } from '../../../config';
 import useItemsFormContext from '../hooks/useItemsFormContext';
 
 function CartItem({ item, isLastItem, actions }) {
@@ -20,6 +20,7 @@ function CartItem({ item, isLastItem, actions }) {
   const qtyField = `${item.id}.quantity`;
   const itemQtyField = `${CART_ITEMS_FORM}.${qtyField}`;
   const isQtyFieldTouched = _get(cartItemsTouched, qtyField);
+  const displayCartItemPrices = config.displayCartItemPrices;
 
   return (
     <tr className={`border-2 md:border-0 ${isLastItem ? '' : 'md:border-b-2'}`}>
@@ -49,8 +50,14 @@ function CartItem({ item, isLastItem, actions }) {
           onChange={actions.handleQtyUpdate}
         />
       </td>
-      <td className="hidden md:table-cell">{item.price}</td>
-      <td className="hidden xl:table-cell">{item.rowTotal}</td>
+      {(displayCartItemPrices === 'including')
+        ? <td className="hidden md:table-cell">{item.priceIncTax}</td>
+        : <td className="hidden md:table-cell">{item.price}</td>
+      }
+      {(displayCartItemPrices === 'including')
+        ? <td className="hidden xl:table-cell">{item.rowTotalIncTax}</td>
+        : <td className="hidden xl:table-cell">{item.rowTotal}</td>
+      }
       <td className="hidden md:table-cell">
         <Button
           size="sm"
@@ -90,7 +97,10 @@ function CartItem({ item, isLastItem, actions }) {
                     </tr>
                     <tr className="border-b">
                       <th className="px-2 py-2">{__('Price')}</th>
-                      <td className="pl-2 text-sm">{item.price}</td>
+                      {(displayCartItemPrices === 'including')
+                        ? <td className="pl-2 text-sm">{item.priceIncTax}</td>
+                        : <td className="pl-2 text-sm">{item.price}</td>
+                      }
                     </tr>
                     <tr className="border-b">
                       <th className="px-2 py-2">{__('Qty')}</th>
@@ -122,9 +132,10 @@ function CartItem({ item, isLastItem, actions }) {
                     </tr>
                     <tr>
                       <th className="px-2 py-2 text-base">{__('Total')}</th>
-                      <td className="pl-2 text-base text-right">
-                        {item.rowTotal}
-                      </td>
+                      {(displayCartItemPrices === 'including')
+                        ? <td className="pl-2 text-base text-right">{item.rowTotalIncTax}</td>
+                        : <td className="pl-2 text-base text-right">{item.rowTotal}</td>
+                      }
                     </tr>
                   </tbody>
                 </table>

diff --git a/src/reactapp/src/components/shippingMethod/components/ShippingMethodList.jsx b/src/reactapp/src/components/shippingMethod/components/ShippingMethodList.jsx
@@ -6,6 +6,7 @@ import useShippingMethodCartContext from '../hooks/useShippingMethodCartContext'
 import { _objToArray } from '../../../utils';
 import { SHIPPING_METHOD } from '../../../config';
 import { __ } from '../../../i18n';
+import config from '../../../config';
 
 function ShippingMethodList() {
   const {
@@ -42,8 +43,9 @@ function ShippingMethodList() {
     <div className="py-4">
       <ul>
         {_objToArray(methodList).map(method => {
-          const { id: methodId, carrierTitle, methodTitle, price } = method;
+          const { id: methodId, carrierTitle, methodTitle, priceExTax, priceIncTax } = method;
           const methodName = `${carrierTitle} (${methodTitle}): `;
+          const price = config.displayShippingPricesExTax ? priceExTax : priceIncTax;
 
           return (
             <li key={methodId} className="flex">

diff --git a/src/reactapp/src/components/totals/Totals.jsx b/src/reactapp/src/components/totals/Totals.jsx
@@ -4,14 +4,18 @@ import { __ } from '../../i18n';
 import Card from '../common/Card';
 import Header from '../common/Header';
 import useTotalsCartContext from './hooks/useTotalsCartContext';
+import { config } from '../../config';
 
 function Totals() {
   const {
     shippingMethodRate,
-    subTotal,
+    subTotalIncTax,
+    subTotalExTax,
     grandTotal,
     discounts,
     hasDiscounts,
+    taxes,
+    hasTaxes,
     hasShippingRate,
     hasSubTotal,
   } = useTotalsCartContext();
@@ -25,7 +29,10 @@ function Totals() {
             {hasSubTotal && (
               <div className="flex justify-between">
                 <div>{__('Cart Subtotal')}</div>
-                <div>{subTotal}</div>
+                {(config.displaySubTotalPrices === 'including')
+                  ? <div>{subTotalIncTax}</div>
+                  : <div>{subTotalExTax}</div>
+                }
               </div>
             )}
 
@@ -42,6 +49,13 @@ function Totals() {
                   <div>{discount.price}</div>
                 </div>
               ))}
+            {hasTaxes &&
+              taxes.map(tax => (
+                <div key={tax.label} className="flex justify-between">
+                  <div>{__(tax.label)}</div>
+                  <div>{tax.price}</div>
+                </div>
+              ))}
           </div>
 
           <div className="mt-3">

diff --git a/src/reactapp/src/components/totals/hooks/useTotalsCartContext.js b/src/reactapp/src/components/totals/hooks/useTotalsCartContext.js
@@ -10,21 +10,28 @@ export default function useTotalsCartContext() {
   const prices = _get(cart, 'prices', {}) || {};
   const { price: shippingMethodRate, amount: shippingAmount } = shippingMethod;
   const {
-    subTotal,
+    subTotalIncTax,
+    subTotalExTax,
     grandTotal,
     discounts,
     hasDiscounts,
-    subTotalAmount,
+    subTotalExTaxAmount,
+    subTotalIncTaxAmount,
     grandTotalAmount,
+    hasTaxes,
+    taxes,
   } = prices;
 
   return {
-    subTotal,
+    subTotalIncTax,
+    subTotalExTax,
     grandTotal,
     discounts,
     shippingMethodRate,
     hasDiscounts,
-    hasSubTotal: !!subTotalAmount,
+    taxes,
+    hasTaxes,
+    hasSubTotal: !!(subTotalExTaxAmount||subTotalIncTaxAmount),
     hasGrandTotal: !!grandTotalAmount,
     hasShippingRate: !!shippingAmount,
   };

diff --git a/src/reactapp/src/config.js b/src/reactapp/src/config.js
@@ -63,10 +63,16 @@ export const config = {
     GBP: '£',
     USD: '$',
     INR: '₹',
+    AUD: '$',
   },
-  defaultCountry: 'US',
+  defaultCountry: RootElement.getDefaultCountryId(),
   storageSource: activeSource,
   defaultPaymentMethod: 'checkmo',
+  displayShippingPricesExTax: RootElement.getDisplayShippingPriceExTax(),
+  displayCartShippingPrices: RootElement.getDisplayCartShippingPrices(),
+  displayCartItemPrices: RootElement.getDisplayCartItemPrices(),
+  displaySubTotalPrices: RootElement.getDisplaySubTotalPrices(),
+  displayGrandTotalPrices: RootElement.getDisplayGrandTotalPrices(),
   isProductionMode: nodeEnv === 'production',
   isDevelopmentMode: nodeEnv === 'development',
   cartId: getConfigFromLocalStorage(activeSource.cartId),