From 61755f0f018ca913e099a19b39ec22bec72e2a59 Mon Sep 17 00:00:00 2001
From: Thomas Roberts <5656702+opr@users.noreply.github.com>
Date: Wed, 26 May 2021 14:04:42 +0100
Subject: [PATCH] Fix display of itemised taxes
 (https://github.com/woocommerce/woocommerce-blocks/pull/4279)

* Add price to itemised tax rates & hide Total when itemised taxes are on

* Update snapshots for taxes in sidebar
---
 .../cart/test/__snapshots__/block.js.snap     | 78 +++++++------------
 .../sidebar/test/__snapshots__/index.js.snap  | 39 ++++------
 .../packages/checkout/totals/taxes/index.tsx  | 27 ++++---
 .../packages/checkout/totals/taxes/style.scss | 14 ++--
 4 files changed, 72 insertions(+), 86 deletions(-)

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/test/__snapshots__/block.js.snap b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/test/__snapshots__/block.js.snap
index c8ffddf87b4..0a59806fc3a 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/test/__snapshots__/block.js.snap
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/test/__snapshots__/block.js.snap
@@ -1312,35 +1312,26 @@ exports[`Testing cart Shows individual tax lines if the store is set to do so 1`
         </fieldset>
       </div>
       <div
-        class="wc-block-components-totals-item wc-block-components-totals-taxes"
+        class="wc-block-components-totals-taxes"
       >
-        <span
-          class="wc-block-components-totals-item__label"
-        >
-          Taxes
-        </span>
-        <span
-          class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
-        >
-          $6.00
-        </span>
         <div
-          class="wc-block-components-totals-item__description"
+          class="wc-block-components-totals-item wc-block-components-totals-taxes__grouped-rate"
         >
-          <div
-            class="wc-block-components-totals-item wc-block-components-totals-taxes__tax-line"
+          <span
+            class="wc-block-components-totals-item__label"
           >
-            <span
-              class="wc-block-components-totals-item__label"
-            >
-              Sales tax
-            </span>
-            <div
-              class="wc-block-components-totals-item__description"
-            />
-          </div>
-           
+            Sales tax
+          </span>
+          <span
+            class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+          >
+            $6.00
+          </span>
+          <div
+            class="wc-block-components-totals-item__description"
+          />
         </div>
+         
       </div>
       <div
         class="wc-block-components-totals-item wc-block-components-totals-footer-item"
@@ -2017,35 +2008,26 @@ exports[`Testing cart Shows rate percentages after tax lines if the block is set
         </fieldset>
       </div>
       <div
-        class="wc-block-components-totals-item wc-block-components-totals-taxes"
+        class="wc-block-components-totals-taxes"
       >
-        <span
-          class="wc-block-components-totals-item__label"
-        >
-          Taxes
-        </span>
-        <span
-          class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
-        >
-          $6.00
-        </span>
         <div
-          class="wc-block-components-totals-item__description"
+          class="wc-block-components-totals-item wc-block-components-totals-taxes__grouped-rate"
         >
-          <div
-            class="wc-block-components-totals-item wc-block-components-totals-taxes__tax-line"
+          <span
+            class="wc-block-components-totals-item__label"
           >
-            <span
-              class="wc-block-components-totals-item__label"
-            >
-              Sales tax 20%
-            </span>
-            <div
-              class="wc-block-components-totals-item__description"
-            />
-          </div>
-           
+            Sales tax 20%
+          </span>
+          <span
+            class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+          >
+            $6.00
+          </span>
+          <div
+            class="wc-block-components-totals-item__description"
+          />
         </div>
+         
       </div>
       <div
         class="wc-block-components-totals-item wc-block-components-totals-footer-item"
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/sidebar/test/__snapshots__/index.js.snap b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/sidebar/test/__snapshots__/index.js.snap
index 0c68f752d6f..c1b54008764 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/sidebar/test/__snapshots__/index.js.snap
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/sidebar/test/__snapshots__/index.js.snap
@@ -97,35 +97,26 @@ exports[`Testing checkout sidebar Shows rate percentages after tax lines if the
     </div>
   </div>
   <div
-    class="wc-block-components-totals-item wc-block-components-totals-taxes"
+    class="wc-block-components-totals-taxes"
   >
-    <span
-      class="wc-block-components-totals-item__label"
-    >
-      Taxes
-    </span>
-    <span
-      class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
-    >
-      $6.00
-    </span>
     <div
-      class="wc-block-components-totals-item__description"
+      class="wc-block-components-totals-item wc-block-components-totals-taxes__grouped-rate"
     >
-      <div
-        class="wc-block-components-totals-item wc-block-components-totals-taxes__tax-line"
+      <span
+        class="wc-block-components-totals-item__label"
       >
-        <span
-          class="wc-block-components-totals-item__label"
-        >
-          Sales tax 20%
-        </span>
-        <div
-          class="wc-block-components-totals-item__description"
-        />
-      </div>
-       
+        Sales tax 20%
+      </span>
+      <span
+        class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+      >
+        $6.00
+      </span>
+      <div
+        class="wc-block-components-totals-item__description"
+      />
     </div>
+     
   </div>
   <div
     class="wc-block-components-totals-item wc-block-components-totals-footer-item"
diff --git a/plugins/woocommerce-blocks/packages/checkout/totals/taxes/index.tsx b/plugins/woocommerce-blocks/packages/checkout/totals/taxes/index.tsx
index 250fe8c2519..29af84402d3 100644
--- a/plugins/woocommerce-blocks/packages/checkout/totals/taxes/index.tsx
+++ b/plugins/woocommerce-blocks/packages/checkout/totals/taxes/index.tsx
@@ -40,29 +40,38 @@ const TotalsTaxes = ( {
 		return null;
 	}
 
-	const itemisedTaxItems: ReactElement | null = getSetting(
+	const showItemisedTaxes = getSetting(
 		'displayItemizedTaxes',
 		false
-	) ? (
-		<>
-			{ taxLines.map( ( { name, rate }, i ) => {
+	) as boolean;
+
+	const itemisedTaxItems: ReactElement | null = showItemisedTaxes ? (
+		<div
+			className={ classnames(
+				'wc-block-components-totals-taxes',
+				className
+			) }
+		>
+			{ taxLines.map( ( { name, rate, price }, i ) => {
 				const label = `${ name }${
 					showRateAfterTaxName ? ` ${ rate }` : ''
 				}`;
 				return (
 					<TotalsItem
 						key={ `tax-line-${ i }` }
-						className="wc-block-components-totals-taxes__tax-line"
+						className="wc-block-components-totals-taxes__grouped-rate"
 						currency={ currency }
 						label={ label }
-						value={ null }
+						value={ parseInt( price, 10 ) }
 					/>
 				);
 			} ) }{ ' ' }
-		</>
+		</div>
 	) : null;
 
-	return (
+	return showItemisedTaxes ? (
+		itemisedTaxItems
+	) : (
 		<>
 			<TotalsItem
 				className={ classnames(
@@ -72,7 +81,7 @@ const TotalsTaxes = ( {
 				currency={ currency }
 				label={ __( 'Taxes', 'woo-gutenberg-products-block' ) }
 				value={ parseInt( totalTax, 10 ) }
-				description={ itemisedTaxItems }
+				description={ null }
 			/>
 		</>
 	);
diff --git a/plugins/woocommerce-blocks/packages/checkout/totals/taxes/style.scss b/plugins/woocommerce-blocks/packages/checkout/totals/taxes/style.scss
index 59a73eedebf..fbaecd4d0ea 100644
--- a/plugins/woocommerce-blocks/packages/checkout/totals/taxes/style.scss
+++ b/plugins/woocommerce-blocks/packages/checkout/totals/taxes/style.scss
@@ -1,6 +1,10 @@
-.wc-block-components-totals-item__description
-.wc-block-components-totals-item.wc-block-components-totals-taxes__tax-line {
-	padding: 0;
-	@include font-size(small);
-	margin: $gap-smallest / 2;
+.wc-block-components-totals-item.wc-block-components-totals-taxes__grouped-rate {
+	margin: $gap-smallest 0;
+	&:first-child {
+		margin-top: 0;
+	}
+
+	&:last-child {
+		margin-bottom: 0;
+	}
 }