From 0fc1ee46bd3544486c344d7c85ccf843d72e9b92 Mon Sep 17 00:00:00 2001
From: Thomas Roberts <5656702+opr@users.noreply.github.com>
Date: Tue, 2 Aug 2022 04:51:21 -0700
Subject: [PATCH] Ensure package names display correctly if only one item is in
 package (https://github.com/woocommerce/woocommerce-blocks/pull/6815)

* Check package length >= 1 to show package name

* Check shipping rates length in order shipping packages slot

* Fix TS error where boolean value could be undefined

* Show items if there is more than one shipping rate
---
 .../cart-checkout/shipping-rates-control/index.tsx          | 6 ++++--
 .../checkout/components/order-shipping-packages/index.js    | 3 ++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control/index.tsx
index 405f7b218f3..eea684b19ff 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control/index.tsx
@@ -63,8 +63,8 @@ const Packages = ( {
 					key={ packageId }
 					packageId={ packageId }
 					packageData={ packageData }
-					collapsible={ collapsible }
-					collapse={ collapse }
+					collapsible={ !! collapsible }
+					collapse={ !! collapse }
 					showItems={
 						showItems || packageData?.shipping_rates?.length > 1
 					}
@@ -167,6 +167,7 @@ const ShippingRatesControl = ( {
 			ShippingRatesControlPackage,
 		},
 		context,
+		shippingRates,
 	};
 	const { isEditor } = useEditorContext();
 
@@ -192,6 +193,7 @@ const ShippingRatesControl = ( {
 					/>
 					<ExperimentalOrderShippingPackages>
 						<Packages
+							showItems={ shippingRates.length > 1 }
 							packages={ shippingRates }
 							noResultsMessage={ noResultsMessage }
 							renderOption={ renderOption }
diff --git a/plugins/woocommerce-blocks/packages/checkout/components/order-shipping-packages/index.js b/plugins/woocommerce-blocks/packages/checkout/components/order-shipping-packages/index.js
index d07a6e95884..220e15e1127 100644
--- a/plugins/woocommerce-blocks/packages/checkout/components/order-shipping-packages/index.js
+++ b/plugins/woocommerce-blocks/packages/checkout/components/order-shipping-packages/index.js
@@ -23,9 +23,10 @@ const Slot = ( {
 	cart,
 	components,
 	context,
+	shippingRates,
 } ) => {
 	const { fills } = useSlot( slotName );
-	const hasMultiplePackages = fills.length > 1;
+	const hasMultiplePackages = fills.length > 1 || shippingRates?.length > 1;
 	return (
 		<OrderShippingPackagesSlot
 			className={ classnames(