[Backport] Full Tax Summary display wrong numbers

Author: mage2pratik

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

@@ -13,13 +13,16 @@ define([
     'Magento_Checkout/js/model/quote',
     'Magento_Checkout/js/model/totals',
     'jquery',
-    '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,
+        taxAmount = 0,
+        rates = 0;
 
     return Component.extend({
         defaults: {
@@ -99,6 +102,33 @@ define([
             return this.getFormattedPrice(amount);
         },
 
+        /**
+         * @param {*} parent
+         * @param {*} percentage
+         * @return {*|String}
+         */
+        getTaxAmount: function (parent, percentage) {
+            var totalPercentage = 0;
+
+            taxAmount = parent.amount;
+            rates = parent.rates;
+            _.each(rates, function (rate) {
+                totalPercentage += parseFloat(rate.percent);
+            });
+
+            return this.getFormattedPrice(this.getPercentAmount(taxAmount, 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 -->