From 6401e17f8cce2f1f434c70be9c5b11108b3b8d16 Mon Sep 17 00:00:00 2001
From: Thomas Roberts <5656702+opr@users.noreply.github.com>
Date: Tue, 23 Feb 2021 10:12:27 +0000
Subject: [PATCH] Show total sale badge in medium carts & make it display below
 price (#3879)

* Show total sale badge in medium carts

* Add markup to cart line item row to enable it to be displayed as flex

* Add styling to display price and sale badge as flex

* Revert product price being displayed as block

* Rename sale badge and price wrapper

* Hide line-total sale badge on mobile

* Change class name on total price and sale badge wrapper again
---
 .../cart/full-cart/cart-line-item-row.js      | 32 ++++++++++---------
 .../cart-checkout/cart/full-cart/style.scss   | 23 ++++++++++---
 2 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js b/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js
index 944b35363df..6bdc2921f73 100644
--- a/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js
+++ b/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js
@@ -256,22 +256,24 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
 				</div>
 			</td>
 			<td className="wc-block-cart-item__total">
-				<ProductPrice
-					currency={ totalsCurrency }
-					format={ productPriceFormat }
-					price={ totalsPrice.getAmount() }
-				/>
-
-				{ quantity > 1 && (
-					<ProductSaleBadge
-						currency={ priceCurrency }
-						saleAmount={ getAmountFromRawPrice(
-							saleAmount,
-							priceCurrency
-						) }
-						format={ saleBadgePriceFormat }
+				<div className="wc-block-cart-item__total-price-and-sale-badge-wrapper">
+					<ProductPrice
+						currency={ totalsCurrency }
+						format={ productPriceFormat }
+						price={ totalsPrice.getAmount() }
 					/>
-				) }
+
+					{ quantity > 1 && (
+						<ProductSaleBadge
+							currency={ priceCurrency }
+							saleAmount={ getAmountFromRawPrice(
+								saleAmount,
+								priceCurrency
+							) }
+							format={ saleBadgePriceFormat }
+						/>
+					) }
+				</div>
 			</td>
 		</tr>
 	);
diff --git a/assets/js/blocks/cart-checkout/cart/full-cart/style.scss b/assets/js/blocks/cart-checkout/cart/full-cart/style.scss
index 7f531eb382d..da91dde3ac6 100644
--- a/assets/js/blocks/cart-checkout/cart/full-cart/style.scss
+++ b/assets/js/blocks/cart-checkout/cart/full-cart/style.scss
@@ -150,6 +150,25 @@ table.wc-block-cart-items {
 	display: flex;
 }
 
+.wc-block-cart-item__total-price-and-sale-badge-wrapper {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+
+	.wc-block-components-sale-badge {
+		margin-top: $gap-smallest;
+	}
+}
+
+.is-small,
+.is-mobile {
+	.wc-block-cart-item__total {
+		.wc-block-components-sale-badge {
+			display: none;
+		}
+	}
+}
+
 .is-medium,
 .is-small,
 .is-mobile {
@@ -202,10 +221,6 @@ table.wc-block-cart-items {
 				.wc-block-components-formatted-money-amount {
 					display: inline-block;
 				}
-
-				.wc-block-components-sale-badge {
-					display: none;
-				}
 			}
 		}
 	}