From 361d924c11449abf9f64c7eb2e4a8fcf93e0864f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <aljullu@gmail.com>
Date: Mon, 16 Mar 2020 14:13:04 +0100
Subject: [PATCH] Fix layout issues after merges
 (https://github.com/woocommerce/woocommerce-blocks/pull/1968)

* Fix address form layout broken because select was occupying too much space

* Fix shipping rates appearing in the Checkout sidebar

* Center button text
---
 .../cart-checkout/button/style.scss           |  6 +-
 .../js/base/components/select/style.scss      |  1 +
 .../totals/totals-shipping-item/index.js      | 27 ++++-----
 .../shipping-rate-selector.js                 |  6 +-
 .../totals/totals-shipping-item/style.scss    | 56 +++++++++++++++++++
 .../cart-checkout/cart/full-cart/style.scss   | 53 ------------------
 .../js/blocks/cart-checkout/checkout/block.js |  1 -
 .../blocks/cart-checkout/checkout/sidebar.js  |  6 +-
 8 files changed, 78 insertions(+), 78 deletions(-)
 create mode 100644 plugins/woocommerce-blocks/assets/js/base/components/totals/totals-shipping-item/style.scss

diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/button/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/button/style.scss
index 22fc8e2d0fc..3324cb7356a 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/button/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/button/style.scss
@@ -2,14 +2,16 @@
 .wc-block-cart,
 .wc-block-checkout {
 	.button.wc-block-button {
+		align-items: center;
 		background-color: #000 !important;
 		color: #fff !important;
-		display: block;
+		display: flex;
 		font-size: inherit;
 		font-weight: bold;
 		height: 48px; // same height as text-input
+		justify-content: center;
 		line-height: 1;
-		padding: $gap-small;
+		padding: 0 $gap-small;
 		text-align: center;
 		text-decoration: none;
 		text-transform: none;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/select/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/select/style.scss
index 2d08a431be0..3ff537591ce 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/select/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/select/style.scss
@@ -1,4 +1,5 @@
 .wc-block-select {
+	height: 48px;
 	position: relative;
 	margin-top: $gap;
 
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/totals/totals-shipping-item/index.js b/plugins/woocommerce-blocks/assets/js/base/components/totals/totals-shipping-item/index.js
index 348f86c8664..e872048e9af 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/totals/totals-shipping-item/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/totals/totals-shipping-item/index.js
@@ -15,6 +15,7 @@ import { useShippingRates } from '@woocommerce/base-hooks';
 import TotalsItem from '../totals-item';
 import ShippingRateSelector from './shipping-rate-selector';
 import hasShippingRate from './has-shipping-rate';
+import './style.scss';
 
 /**
  * Renders the shipping totals row, rates, and calculator if enabled.
@@ -22,6 +23,7 @@ import hasShippingRate from './has-shipping-rate';
 const TotalsShippingItem = ( {
 	currency,
 	values,
+	isCheckout = false,
 	showCalculator = true,
 	showRatesWithoutAddress = false,
 } ) => {
@@ -44,14 +46,14 @@ const TotalsShippingItem = ( {
 	const showingRates = showRatesWithoutAddress || hasShippingAddress;
 
 	// If we have no rates, and an address is needed.
-	if ( ! hasRates && ! hasShippingAddress ) {
+	if ( ! hasRates && ! hasShippingAddress && ! isCheckout ) {
 		return (
 			<TotalsItem
 				label={ __( 'Shipping', 'woo-gutenberg-products-block' ) }
 				value={
 					showCalculator ? (
 						<button
-							className="wc-block-cart__change-address-button"
+							className="wc-block-totals__change-address-button"
 							onClick={ () => {
 								setIsShippingCalculatorOpen(
 									! isShippingCalculatorOpen
@@ -100,7 +102,7 @@ const TotalsShippingItem = ( {
 						<ShippingLocation address={ shippingAddress } />{ ' ' }
 						{ showCalculator && (
 							<button
-								className="wc-block-cart__change-address-button"
+								className="wc-block-totals__change-address-button"
 								onClick={ () => {
 									setIsShippingCalculatorOpen(
 										! isShippingCalculatorOpen
@@ -127,19 +129,11 @@ const TotalsShippingItem = ( {
 				}
 				currency={ currency }
 			/>
-			{ showingRates && (
-				<fieldset className="wc-block-cart__shipping-options-fieldset">
-					<legend className="screen-reader-text">
-						{ __(
-							'Choose a shipping method',
-							'woo-gutenberg-products-block'
-						) }
-					</legend>
-					<ShippingRateSelector
-						shippingRates={ shippingRates }
-						shippingRatesLoading={ shippingRatesLoading }
-					/>
-				</fieldset>
+			{ ! isCheckout && showingRates && (
+				<ShippingRateSelector
+					shippingRates={ shippingRates }
+					shippingRatesLoading={ shippingRatesLoading }
+				/>
 			) }
 		</>
 	);
@@ -151,6 +145,7 @@ TotalsShippingItem.propTypes = {
 		total_shipping: PropTypes.string,
 		total_shipping_tax: PropTypes.string,
 	} ).isRequired,
+	isCheckout: PropTypes.bool,
 	showCalculator: PropTypes.bool,
 	showRatesWithoutAddress: PropTypes.bool,
 };
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/totals/totals-shipping-item/shipping-rate-selector.js b/plugins/woocommerce-blocks/assets/js/base/components/totals/totals-shipping-item/shipping-rate-selector.js
index 5016a1159d1..2c745b1a6df 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/totals/totals-shipping-item/shipping-rate-selector.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/totals/totals-shipping-item/shipping-rate-selector.js
@@ -26,15 +26,15 @@ const renderShippingRatesControlOption = ( option ) => ( {
 
 const ShippingRateSelector = ( { shippingRates, shippingRatesLoading } ) => {
 	return (
-		<fieldset className="wc-block-cart__shipping-options-fieldset">
+		<fieldset className="wc-block-totals__shipping-options-fieldset">
 			<legend className="screen-reader-text">
 				{ __(
-					'Choose the shipping method.',
+					'Choose a shipping method',
 					'woo-gutenberg-products-block'
 				) }
 			</legend>
 			<ShippingRatesControl
-				className="wc-block-cart__shipping-options"
+				className="wc-block-totals__shipping-options"
 				collapsibleWhenMultiple={ true }
 				noResultsMessage={ __(
 					'No shipping options were found.',
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/totals/totals-shipping-item/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/totals/totals-shipping-item/style.scss
new file mode 100644
index 00000000000..b147d1fcc66
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/totals/totals-shipping-item/style.scss
@@ -0,0 +1,56 @@
+// Added extra class and label for specificity.
+fieldset.wc-block-totals__shipping-options-fieldset {
+	background-color: transparent;
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+
+.wc-block-totals__shipping-options {
+	.wc-block-radio-control__label,
+	.wc-block-radio-control__description,
+	.wc-block-radio-control__secondary-label,
+	.wc-block-radio-control__secondary-description {
+		flex-basis: 100%;
+		text-align: left;
+	}
+
+	.wc-block-radio-control__option {
+		padding-left: $gap-large;
+
+		&:last-child {
+			border-bottom: none;
+		}
+	}
+
+	.wc-block-radio-control__input {
+		left: 0;
+		margin: 0;
+	}
+}
+
+
+.wc-block-totals__change-address-button {
+	background: transparent;
+	border: 0;
+	border-radius: 0;
+	box-shadow: none;
+	color: inherit;
+	font-family: inherit;
+	font-weight: inherit;
+	display: inline;
+	font-weight: inherit;
+	letter-spacing: inherit;
+	margin: 0;
+	padding: 0;
+	text-decoration: underline;
+	text-transform: none;
+	vertical-align: middle;
+
+	&:hover,
+	&:focus,
+	&:active {
+		background: transparent;
+		opacity: 0.8;
+	}
+}
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss
index b388bf20be7..346bb64b794 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss
@@ -7,59 +7,6 @@
 	.wc-block-cart__shipping-calculator {
 		white-space: nowrap;
 	}
-	.wc-block-cart__change-address-button {
-		background: transparent;
-		border: 0;
-		border-radius: 0;
-		box-shadow: none;
-		color: inherit;
-		font-family: inherit;
-		font-weight: inherit;
-		display: inline;
-		font-weight: inherit;
-		letter-spacing: inherit;
-		margin: 0;
-		padding: 0;
-		text-decoration: underline;
-		text-transform: none;
-		vertical-align: middle;
-
-		&:hover,
-		&:focus,
-		&:active {
-			background: transparent;
-			opacity: 0.8;
-		}
-	}
-	// Added extra class and label for specificity.
-	fieldset.wc-block-cart__shipping-options-fieldset {
-		background-color: transparent;
-		margin: 0;
-		padding: 0;
-		border: 0;
-	}
-	.wc-block-cart__shipping-options {
-		.wc-block-radio-control__label,
-		.wc-block-radio-control__description,
-		.wc-block-radio-control__secondary-label,
-		.wc-block-radio-control__secondary-description {
-			flex-basis: 100%;
-			text-align: left;
-		}
-
-		.wc-block-radio-control__option {
-			padding-left: $gap-large;
-
-			&:last-child {
-				border-bottom: none;
-			}
-		}
-
-		.wc-block-radio-control__input {
-			left: 0;
-			margin: 0;
-		}
-	}
 }
 
 table.wc-block-cart-items,
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js
index e35906239a1..5b4e0956db3 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js
@@ -332,7 +332,6 @@ const Block = ( {
 						cartCoupons={ cartCoupons }
 						cartItems={ cartItems }
 						cartTotals={ cartTotals }
-						shippingRates={ shippingRates }
 					/>
 				</Sidebar>
 			</SidebarLayout>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/sidebar.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/sidebar.js
index 6839f22732f..2da298e66a5 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/sidebar.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/sidebar.js
@@ -26,7 +26,6 @@ const CheckoutSidebar = ( {
 	cartCoupons = [],
 	cartItems = [],
 	cartTotals = {},
-	shippingRates,
 } ) => {
 	const {
 		applyCoupon,
@@ -34,7 +33,6 @@ const CheckoutSidebar = ( {
 		isApplyingCoupon,
 		isRemovingCoupon,
 	} = useStoreCartCoupons();
-	const shippingAddress = shippingRates[ 0 ]?.destination;
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
@@ -51,7 +49,9 @@ const CheckoutSidebar = ( {
 			/>
 			<TotalsShippingItem
 				currency={ totalsCurrency }
-				shippingAddress={ shippingAddress }
+				noResultsMessage={ null }
+				isCheckout={ true }
+				showCalculator={ false }
 				values={ cartTotals }
 			/>
 			{ ! DISPLAY_CART_PRICES_INCLUDING_TAX && (