Ensure package names display correctly if only one item is in package (…

…#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

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 }

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(