ENGCOM-4022: Full Tax Summary display wrong numbers #20682

 - Merge Pull Request #20682 from niravkrish/magento2:patch-19701
 - Merged commits:
   1. 2258f50
   2. 938eaf3
   3. d6b1000
   4. 8e4c9ad
   5. 11b9b44

Author: magento-engcom-team

app/code/Magento/Tax/view/frontend/web/js/view/checkout/summary/tax.js

@@ -12,13 +12,17 @@ define([
     'Magento_Checkout/js/view/summary/abstract-total',
     'Magento_Checkout/js/model/quote',
     'Magento_Checkout/js/model/totals',
-    'mage/translate'
-], function (ko, Component, quote, totals, $t) {
+    'mage/translate',
+    'underscore'
+], function (ko, Component, quote, totals, $t, _) {
     'use strict';
 
     var isTaxDisplayedInGrandTotal = window.checkoutConfig.includeTaxInGrandTotal,
         isFullTaxSummaryDisplayed = window.checkoutConfig.isFullTaxSummaryDisplayed,
-        isZeroTaxDisplayed = window.checkoutConfig.isZeroTaxDisplayed;
+        isZeroTaxDisplayed = window.checkoutConfig.isZeroTaxDisplayed,
+        totalPercentage = 0,
+        amount = '',
+        rates = '';
 
     return Component.extend({
         defaults: {
@@ -98,6 +102,32 @@ define([
             return this.getFormattedPrice(amount);
         },
 
+        /**
+         * @param {*} parent
+         * @param {*} percentage
+         * @return {*|String}
+         */
+        getTaxAmount: function (parent, percentage) {
+            amount = parent.amount;
+            rates = parent.rates;
+            totalPercentage = 0;
+            _.each(rates, function (rate) {
+                totalPercentage += parseFloat(rate.percent);
+            });
+            
+            return this.getFormattedPrice(this.getPercentAmount(amount, totalPercentage, percentage));
+        },
+
+        /**
+         * @param {*} amount
+         * @param {*} totalPercentage
+         * @param {*} percentage
+         * @return {*|String}
+         */
+        getPercentAmount: function (amount, totalPercentage, percentage) {
+            return parseFloat((amount * percentage) / totalPercentage);
+        },
+
         /**
          * @return {Array}
          */

app/code/Magento/Tax/view/frontend/web/template/checkout/cart/totals/tax.html

@@ -32,18 +32,16 @@
             <!-- ko if: !percent -->
                 <th class="mark" scope="row" colspan="1" data-bind="text: title"></th>
             <!-- /ko -->
-            <!-- ko if: $index() == 0 -->
-                <td class="amount" rowspan="1">
-                    <!-- ko if: $parents[1].isCalculated() -->
-                    <span class="price"
-                          data-bind="text: $parents[1].formatPrice($parents[0].amount), attr: {'data-th': title, 'rowspan': $parents[0].rates.length }"></span>
-                    <!-- /ko -->
-                    <!-- ko ifnot: $parents[1].isCalculated() -->
-                    <span class="not-calculated"
-                          data-bind="text: $parents[1].formatPrice($parents[0].amount), attr: {'data-th': title, 'rowspan': $parents[0].rates.length }"></span>
-                    <!-- /ko -->
-                </td>
-            <!-- /ko -->
+            <td class="amount" rowspan="1">
+                <!-- ko if: $parents[1].isCalculated() -->
+                <span class="price"
+                      data-bind="text: $parents[1].getTaxAmount($parents[0], percent), attr: {'data-th': title, 'rowspan': $parents[0].rates.length }"></span>
+                <!-- /ko -->
+                <!-- ko ifnot: $parents[1].isCalculated() -->
+                <span class="not-calculated"
+                      data-bind="text: $parents[1].getTaxAmount($parents[0], percent), attr: {'data-th': title, 'rowspan': $parents[0].rates.length }"></span>
+                <!-- /ko -->
+            </td>
         </tr>
         <!-- /ko -->
     <!-- /ko -->

app/code/Magento/Tax/view/frontend/web/template/checkout/summary/tax.html

@@ -43,18 +43,16 @@
             <!-- ko if: !percent -->
                 <th class="mark" scope="row" data-bind="text: title"></th>
             <!-- /ko -->
-            <!-- ko if: $index() == 0 -->
-                <td class="amount">
-                    <!-- ko if: $parents[1].isCalculated() -->
-                    <span class="price"
-                          data-bind="text: $parents[1].formatPrice($parents[0].amount), attr: {'data-th': title, 'rowspan': $parents[0].rates.length }"></span>
-                    <!-- /ko -->
-                    <!-- ko ifnot: $parents[1].isCalculated() -->
-                    <span class="not-calculated"
-                          data-bind="text: $parents[1].formatPrice($parents[0].amount), attr: {'data-th': title, 'rowspan': $parents[0].rates.length }"></span>
-                    <!-- /ko -->
-                </td>
-            <!-- /ko -->
+            <td class="amount">
+                <!-- ko if: $parents[1].isCalculated() -->
+                <span class="price"
+                      data-bind="text: $parents[1].getTaxAmount($parents[0], percent), attr: {'data-th': title, 'rowspan': $parents[0].rates.length }"></span>
+                <!-- /ko -->
+                <!-- ko ifnot: $parents[1].isCalculated() -->
+                <span class="not-calculated"
+                      data-bind="text: $parents[1].getTaxAmount($parents[0], percent), attr: {'data-th': title, 'rowspan': $parents[0].rates.length }"></span>
+                <!-- /ko -->
+            </td>
         </tr>
         <!-- /ko -->
     <!-- /ko -->