Add LocalPickupSelect component (#8634)

* Add LocalPickupSelect component

This will be used to render the local pickup options and also display a title if there are more than one package (e.g. if WC subs adds them)

* Add tests for LocalPickupSelect component

* Make title optional

* Add packageCount as an option to LocalPickupSelect

* Revert "Add packageCount as an option to LocalPickupSelect"

This reverts commit 10b1dc9.

* Add ackage count to LocalPickupSelect

* Add package count and remove unused variable from renderPickupLocation

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

@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import { RadioControlOption } from '@woocommerce/base-components/radio-control/types';
+import { CartShippingPackageShippingRate } from '@woocommerce/types';
+/**
+ * Internal dependencies
+ */
+import RadioControl from '../../radio-control';
+
+interface LocalPickupSelectProps {
+	title?: string | undefined;
+	setSelectedOption: ( value: string ) => void;
+	selectedOption: string;
+	pickupLocations: CartShippingPackageShippingRate[];
+	onSelectRate: ( value: string ) => void;
+	renderPickupLocation: (
+		location: CartShippingPackageShippingRate,
+		pickupLocationsCount: number
+	) => RadioControlOption;
+	packageCount: number;
+}
+/**
+ * Local pickup select component, used to render a package title and local pickup options.
+ */
+export const LocalPickupSelect = ( {
+	title,
+	setSelectedOption,
+	selectedOption,
+	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.
+	const multiplePackages =
+		document.querySelectorAll(
+			'.wc-block-components-local-pickup-select .wc-block-components-radio-control'
+		).length > 1;
+	return (
+		<div className="wc-block-components-local-pickup-select">
+			{ multiplePackages && title ? <div>{ title }</div> : false }
+			<RadioControl
+				onChange={ ( value ) => {
+					setSelectedOption( value );
+					onSelectRate( value );
+				} }
+				selected={ selectedOption }
+				options={ pickupLocations.map( ( location ) =>
+					renderPickupLocation( location, packageCount )
+				) }
+			/>
+		</div>
+	);
+};
+export default LocalPickupSelect;

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

@@ -0,0 +1,121 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+/**
+ * Internal dependencies
+ */
+import LocalPickupSelect from '..';
+
+describe( 'LocalPickupSelect', () => {
+	const TestComponent = ( {
+		selectedOptionOverride = null,
+		onSelectRateOverride = null,
+	}: {
+		selectedOptionOverride?: null | ( ( value: string ) => void );
+		onSelectRateOverride?: null | ( ( value: string ) => void );
+	} ) => (
+		<LocalPickupSelect
+			title="Package 1"
+			setSelectedOption={ selectedOptionOverride || jest.fn() }
+			selectedOption=""
+			pickupLocations={ [
+				{
+					rate_id: '1',
+					currency_code: 'USD',
+					currency_decimal_separator: '.',
+					currency_minor_unit: 2,
+					currency_prefix: '$',
+					currency_suffix: '',
+					currency_thousand_separator: ',',
+					currency_symbol: '$',
+					name: 'Store 1',
+					description: 'Store 1 description',
+					delivery_time: '1 day',
+					price: '0',
+					taxes: '0',
+					instance_id: 1,
+					method_id: 'test_shipping:0',
+					meta_data: [],
+					selected: false,
+				},
+				{
+					rate_id: '2',
+					currency_code: 'USD',
+					currency_decimal_separator: '.',
+					currency_minor_unit: 2,
+					currency_prefix: '$',
+					currency_suffix: '',
+					currency_thousand_separator: ',',
+					currency_symbol: '$',
+					name: 'Store 2',
+					description: 'Store 2 description',
+					delivery_time: '2 days',
+					price: '0',
+					taxes: '0',
+					instance_id: 1,
+					method_id: 'test_shipping:1',
+					meta_data: [],
+					selected: false,
+				},
+			] }
+			onSelectRate={ onSelectRateOverride || jest.fn() }
+			packageCount={ 1 }
+			renderPickupLocation={ ( location ) => {
+				return {
+					value: `${ location.rate_id }`,
+					onChange: jest.fn(),
+					label: `${ location.name }`,
+					description: `${ location.description }`,
+				};
+			} }
+		/>
+	);
+	it( 'Does not render the title if only one package is present on the page', () => {
+		render( <TestComponent /> );
+		expect( screen.queryByText( 'Package 1' ) ).not.toBeInTheDocument();
+	} );
+	it( 'Does render the title if more than one package is present on the page', () => {
+		const { rerender } = render(
+			<div className="wc-block-components-local-pickup-select">
+				<div className="wc-block-components-radio-control"></div>
+			</div>
+		);
+		// Render twice so our component can check the DOM correctly.
+		rerender(
+			<>
+				<div className="wc-block-components-local-pickup-select">
+					<div className="wc-block-components-radio-control"></div>
+				</div>
+				<TestComponent />
+			</>
+		);
+		rerender(
+			<>
+				<div className="wc-block-components-local-pickup-select">
+					<div className="wc-block-components-radio-control"></div>
+				</div>
+				<TestComponent />
+			</>
+		);
+
+		expect( screen.getByText( 'Package 1' ) ).toBeInTheDocument();
+	} );
+	it( 'Calls the correct functions when changing selected option', () => {
+		const setSelectedOption = jest.fn();
+		const onSelectRate = jest.fn();
+		render(
+			<TestComponent
+				selectedOptionOverride={ setSelectedOption }
+				onSelectRateOverride={ onSelectRate }
+			/>
+		);
+		userEvent.click( screen.getByText( 'Store 2' ) );
+		expect( setSelectedOption ).toHaveBeenLastCalledWith( '2' );
+		expect( onSelectRate ).toHaveBeenLastCalledWith( '2' );
+		userEvent.click( screen.getByText( 'Store 1' ) );
+		expect( setSelectedOption ).toHaveBeenLastCalledWith( '1' );
+		expect( onSelectRate ).toHaveBeenLastCalledWith( '1' );
+	} );
+} );