Introduce Local Pickup to Checkout

assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx

@@ -5,63 +5,18 @@ import classNames from 'classnames';
 import { _n, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import type { ReactElement } from 'react';
-import type {
-	PackageRateOption,
-	CartShippingPackageShippingRate,
-} from '@woocommerce/types';
 import { Panel } from '@woocommerce/blocks-checkout';
 import Label from '@woocommerce/base-components/label';
-import { useSelectShippingRate } from '@woocommerce/base-context/hooks';
+import { useShippingData } from '@woocommerce/base-context/hooks';
 import { sanitizeHTML } from '@woocommerce/utils';
 
 /**
  * Internal dependencies
  */
 import PackageRates from './package-rates';
+import type { PackageProps } from './types';
 import './style.scss';
 
-interface PackageItem {
-	name: string;
-	key: string;
-	quantity: number;
-}
-
-interface Destination {
-	address_1: string;
-	address_2: string;
-	city: string;
-	state: string;
-	postcode: string;
-	country: string;
-}
-
-export interface PackageData {
-	destination: Destination;
-	name: string;
-	shipping_rates: CartShippingPackageShippingRate[];
-	items: PackageItem[];
-}
-
-export type PackageRateRenderOption = (
-	option: CartShippingPackageShippingRate
-) => PackageRateOption;
-
-// A flag can be ternary if true, false, and undefined are all valid options.
-// In our case, we use this for collapsible and showItems, having a boolean will force that
-// option, having undefined will let the component decide the logic based on other factors.
-export type TernaryFlag = boolean | undefined;
-interface PackageProps {
-	/* PackageId can be a string, WooCommerce Subscriptions uses strings for example, but WooCommerce core uses numbers */
-	packageId: string | number;
-	renderOption?: PackageRateRenderOption | undefined;
-	collapse?: boolean;
-	packageData: PackageData;
-	className?: string;
-	collapsible?: TernaryFlag;
-	noResultsMessage: ReactElement;
-	showItems?: TernaryFlag;
-}
-
 export const ShippingRatesControlPackage = ( {
 	packageId,
 	className = '',
@@ -71,7 +26,7 @@ export const ShippingRatesControlPackage = ( {
 	collapsible,
 	showItems,
 }: PackageProps ): ReactElement => {
-	const { selectShippingRate } = useSelectShippingRate();
+	const { selectShippingRate } = useShippingData();
 	const multiplePackages =
 		document.querySelectorAll(
 			'.wc-block-components-shipping-rates-control__package'
@@ -130,20 +85,19 @@ export const ShippingRatesControlPackage = ( {
 			) }
 		</>
 	);
-	const body = (
-		<PackageRates
-			className={ className }
-			noResultsMessage={ noResultsMessage }
-			rates={ packageData.shipping_rates }
-			onSelectRate={ ( newShippingRateId ) =>
-				selectShippingRate( newShippingRateId, packageId )
-			}
-			selectedRate={ packageData.shipping_rates.find(
-				( rate ) => rate.selected
-			) }
-			renderOption={ renderOption }
-		/>
-	);
+
+	const packageRatesProps = {
+		className,
+		noResultsMessage,
+		rates: packageData.shipping_rates,
+		onSelectRate: ( newShippingRateId: string ) =>
+			selectShippingRate( newShippingRateId, packageId ),
+		selectedRate: packageData.shipping_rates.find(
+			( rate ) => rate.selected
+		),
+		renderOption,
+	};
+
 	if ( shouldBeCollapsible ) {
 		return (
 			<Panel
@@ -155,10 +109,11 @@ export const ShippingRatesControlPackage = ( {
 				initialOpen={ false }
 				title={ header }
 			>
-				{ body }
+				<PackageRates { ...packageRatesProps } />
 			</Panel>
 		);
 	}
+
 	return (
 		<div
 			className={ classNames(
@@ -167,7 +122,7 @@ export const ShippingRatesControlPackage = ( {
 			) }
 		>
 			{ header }
-			{ body }
+			<PackageRates { ...packageRatesProps } />
 		</div>
 	);
 };

assets/js/base/components/cart-checkout/shipping-rates-control-package/package-rates.tsx

@@ -42,6 +42,14 @@ const PackageRates = ( {
 		}
 	}, [ selectedRateId ] );
 
+	// Update the selected option if there is no rate selected on mount.
+	useEffect( () => {
+		if ( ! selectedOption && rates[ 0 ] ) {
+			setSelectedOption( rates[ 0 ].rate_id );
+			onSelectRate( rates[ 0 ].rate_id );
+		}
+	}, [ onSelectRate, rates, selectedOption ] );
+
 	if ( rates.length === 0 ) {
 		return noResultsMessage;
 	}

assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss

@@ -1,9 +1,6 @@
 .wc-block-components-shipping-rates-control__package {
-	margin-bottom: $gap-larger;
-
-	&:last-child {
-		margin-bottom: 0;
-	}
+	margin: 0;
+	@include with-translucent-border( 0 0 1px );
 
 	&.wc-block-components-panel {
 		margin-bottom: 0;
@@ -16,10 +13,20 @@
 		padding-top: em($gap-small);
 	}
 
-	// Remove panel padding because we are adding bottom padding to `.wc-block-components-radio-control`
-	// and `.wc-block-components-radio-control__option-layout` in the next ruleset.
+	&:last-child {
+		@include with-translucent-border( 0 );
+
+		.wc-block-components-panel__button {
+			padding-bottom: 0;
+		}
+	}
+
 	.wc-block-components-panel__content {
-		padding-bottom: 0;
+		padding-bottom: em($gap-small);
+	}
+
+	.wc-block-components-radio-control {
+		margin-bottom: em($gap-small);
 	}
 
 	.wc-block-components-radio-control,
@@ -30,6 +37,14 @@
 	.wc-block-components-radio-control .wc-block-components-radio-control__option-layout {
 		padding-bottom: 0;
 	}
+
+	.wc-block-components-radio-control__label-group {
+		@include font-size(small);
+	}
+	.wc-block-components-radio-control__description-group {
+		@include font-size(smaller);
+		color: $gray-700;
+	}
 }
 
 .wc-block-components-shipping-rates-control__package-items {

assets/js/base/components/cart-checkout/shipping-rates-control-package/types.ts

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import type { ReactElement } from 'react';
+import type { PackageRateOption } from '@woocommerce/type-defs/shipping';
+import type { CartShippingPackageShippingRate } from '@woocommerce/type-defs/cart';
+
+export interface PackageItem {
+	name: string;
+	key: string;
+	quantity: number;
+}
+
+export interface Destination {
+	address_1: string;
+	address_2: string;
+	city: string;
+	state: string;
+	postcode: string;
+	country: string;
+}
+
+export interface PackageData {
+	destination: Destination;
+	name: string;
+	shipping_rates: CartShippingPackageShippingRate[];
+	items: PackageItem[];
+}
+
+export type PackageRateRenderOption = (
+	option: CartShippingPackageShippingRate
+) => PackageRateOption;
+
+// A flag can be ternary if true, false, and undefined are all valid options.
+// In our case, we use this for collapsible and showItems, having a boolean will force that
+// option, having undefined will let the component decide the logic based on other factors.
+export type TernaryFlag = boolean | undefined;
+
+export interface PackageProps {
+	/* PackageId can be a string, WooCommerce Subscriptions uses strings for example, but WooCommerce core uses numbers */
+	packageId: string | number;
+	renderOption?: PackageRateRenderOption | undefined;
+	collapse?: boolean;
+	packageData: PackageData;
+	className?: string;
+	collapsible?: TernaryFlag;
+	noResultsMessage: ReactElement;
+	showItems?: TernaryFlag;
+}