Add packageCount as an option to LocalPickupSelect

assets/js/base/components/cart-checkout/local-pickup-select/index.tsx

@@ -18,6 +18,7 @@ interface LocalPickupSelectProps {
 		location: CartShippingPackageShippingRate,
 		pickupLocationsCount: number
 	) => RadioControlOption;
+	packageCount: number;
 }
 /**
  * Local pickup select component, used to render a package title and local pickup options.
@@ -29,6 +30,7 @@ export const LocalPickupSelect = ( {
 	pickupLocations,
 	onSelectRate,
 	renderPickupLocation,
+	packageCount,
 }: LocalPickupSelectProps ) => {
 	// Hacky way to check if there are multiple packages, this way is borrowed from  `assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx`
 	// We have no built-in way of checking if other extensions have added packages.
@@ -46,7 +48,7 @@ export const LocalPickupSelect = ( {
 				} }
 				selected={ selectedOption }
 				options={ pickupLocations.map( ( location ) =>
-					renderPickupLocation( location, pickupLocations.length )
+					renderPickupLocation( location, packageCount )
 				) }
 			/>
 		</div>

assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/block.tsx

@@ -14,10 +14,10 @@ import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-mone
 import { decodeEntities } from '@wordpress/html-entities';
 import { getSetting } from '@woocommerce/settings';
 import { Icon, mapMarker } from '@wordpress/icons';
-import RadioControl from '@woocommerce/base-components/radio-control';
 import type { RadioControlOption } from '@woocommerce/base-components/radio-control/types';
 import { CartShippingPackageShippingRate } from '@woocommerce/types';
 import { isPackageRateCollectable } from '@woocommerce/base-utils';
+import LocalPickupSelect from '@woocommerce/base-components/cart-checkout/local-pickup-select';
 
 /**
  * Internal dependencies
@@ -142,15 +142,16 @@ const Block = (): JSX.Element | null => {
 	}, [ onSelectRate, pickupLocations, selectedOption ] );
 
 	return (
-		<RadioControl
-			onChange={ ( value: string ) => {
+		<LocalPickupSelect
+			setSelectedOption={ setSelectedOption }
+			selectedOption={ selectedOption }
+			pickupLocations={ pickupLocations }
+			renderPickupLocation={ renderPickupLocation }
+			onSelectRate={ ( value: string ) => {
 				setSelectedOption( value );
 				onSelectRate( value );
 			} }
-			selected={ selectedOption }
-			options={ pickupLocations.map( ( location ) =>
-				renderPickupLocation( location, shippingRates.length )
-			) }
+			packageCount={ shippingRates.length }
 		/>
 	);
 };