From dfea41a11425e05da50bf50af0235eeba4b45e1b Mon Sep 17 00:00:00 2001
From: Thomas Roberts <thomas.roberts@automattic.com>
Date: Fri, 3 Mar 2023 14:57:05 -0800
Subject: [PATCH] Use LocalPickupSelect component when rendering local pickup
 options

---
 .../checkout-pickup-options-block/block.tsx   | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/block.tsx
index 7ae5a475e9f..342bbbec34c 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/block.tsx
@@ -14,11 +14,11 @@ 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 { ExperimentalOrderLocalPickupPackages } from '@woocommerce/blocks-checkout';
+import { LocalPickupSelect } from '@woocommerce/base-components/cart-checkout/local-pickup-select';
 
 /**
  * Internal dependencies
@@ -144,7 +144,7 @@ const Block = (): JSX.Element | null => {
 		cart,
 		components: {
 			ShippingRatesControlPackage,
-			RadioControl,
+			LocalPickupSelect,
 		},
 		renderPickupLocation,
 	};
@@ -161,15 +161,13 @@ const Block = (): JSX.Element | null => {
 		<>
 			<ExperimentalOrderLocalPickupPackages.Slot { ...slotFillProps } />
 			<ExperimentalOrderLocalPickupPackages>
-				<RadioControl
-					onChange={ ( value: string ) => {
-						setSelectedOption( value );
-						onSelectRate( value );
-					} }
-					selected={ selectedOption }
-					options={ pickupLocations.map( ( location ) =>
-						renderPickupLocation( location, shippingRates.length )
-					) }
+				<LocalPickupSelect
+					title={ shippingRates[ 0 ].name }
+					setSelectedOption={ setSelectedOption }
+					onSelectRate={ onSelectRate }
+					selectedOption={ selectedOption }
+					renderPickupLocation={ renderPickupLocation }
+					pickupLocations={ pickupLocations }
 				/>
 			</ExperimentalOrderLocalPickupPackages>
 		</>