From a9f7f8bb7ad76e253d9dbc59ccb8fd5dedeb65fa Mon Sep 17 00:00:00 2001
From: Thomas Roberts <thomas.roberts@automattic.com>
Date: Fri, 3 Mar 2023 11:34:45 -0800
Subject: [PATCH] Render ExperimentalOrderLocalPickupPackages in local pickup
 block

---
 .../checkout-pickup-options-block/block.tsx   | 43 ++++++++++++++-----
 1 file changed, 32 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 4dea0a89bdb..7ae5a475e9f 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
@@ -8,7 +8,7 @@ import {
 	useCallback,
 	createInterpolateElement,
 } from '@wordpress/element';
-import { useShippingData } from '@woocommerce/base-context/hooks';
+import { useShippingData, useStoreCart } from '@woocommerce/base-context/hooks';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -18,11 +18,13 @@ 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';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
+import ShippingRatesControlPackage from '../../../../base/components/cart-checkout/shipping-rates-control-package';
 
 const getPickupLocation = (
 	option: CartShippingPackageShippingRate
@@ -133,6 +135,20 @@ const Block = (): JSX.Element | null => {
 		[ selectShippingRate ]
 	);
 
+	// Prepare props to pass to the ExperimentalOrderLocalPickupPackages slot fill.
+	// We need to pluck out receiveCart.
+	// eslint-disable-next-line no-unused-vars
+	const { extensions, receiveCart, ...cart } = useStoreCart();
+	const slotFillProps = {
+		extensions,
+		cart,
+		components: {
+			ShippingRatesControlPackage,
+			RadioControl,
+		},
+		renderPickupLocation,
+	};
+
 	// Update the selected option if there is no rate selected on mount.
 	useEffect( () => {
 		if ( ! selectedOption && pickupLocations[ 0 ] ) {
@@ -142,16 +158,21 @@ const Block = (): JSX.Element | null => {
 	}, [ onSelectRate, pickupLocations, selectedOption ] );
 
 	return (
-		<RadioControl
-			onChange={ ( value: string ) => {
-				setSelectedOption( value );
-				onSelectRate( value );
-			} }
-			selected={ selectedOption }
-			options={ pickupLocations.map( ( location ) =>
-				renderPickupLocation( location, shippingRates.length )
-			) }
-		/>
+		<>
+			<ExperimentalOrderLocalPickupPackages.Slot { ...slotFillProps } />
+			<ExperimentalOrderLocalPickupPackages>
+				<RadioControl
+					onChange={ ( value: string ) => {
+						setSelectedOption( value );
+						onSelectRate( value );
+					} }
+					selected={ selectedOption }
+					options={ pickupLocations.map( ( location ) =>
+						renderPickupLocation( location, shippingRates.length )
+					) }
+				/>
+			</ExperimentalOrderLocalPickupPackages>
+		</>
 	);
 };