Remove useSelectShippingRate hook and adjust how local state works for PackageRates

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

@@ -8,7 +8,7 @@ import type { ReactElement } from 'react';
 import type { PackageRateOption } from '@woocommerce/type-defs/shipping';
 import { Panel } from '@woocommerce/blocks-checkout';
 import Label from '@woocommerce/base-components/label';
-import { useSelectShippingRate } from '@woocommerce/base-context/hooks';
+import { useSelectShippingRates } from '@woocommerce/base-context/hooks';
 import type { CartShippingPackageShippingRate } from '@woocommerce/type-defs/cart';
 
 /**
@@ -57,18 +57,15 @@ interface PackageProps {
 
 export const ShippingRatesControlPackage = ( {
 	packageId,
-	className,
+	className = '',
 	noResultsMessage,
 	renderOption,
 	packageData,
 	collapsible = false,
 	collapse = false,
 	showItems = false,
 }: PackageProps ): ReactElement => {
-	const { selectShippingRate, selectedShippingRate } = useSelectShippingRate(
-		packageId,
-		packageData.shipping_rates
-	);
+	const { selectShippingRate } = useSelectShippingRates();
 
 	const header = (
 		<>
@@ -117,8 +114,12 @@ export const ShippingRatesControlPackage = ( {
 			className={ className }
 			noResultsMessage={ noResultsMessage }
 			rates={ packageData.shipping_rates }
-			onSelectRate={ selectShippingRate }
-			selected={ selectedShippingRate }
+			onSelectRate={ ( newShippingRateId ) =>
+				selectShippingRate( newShippingRateId, packageId )
+			}
+			selectedRate={ packageData.shipping_rates.find(
+				( rate ) => rate.selected
+			) }
 			renderOption={ renderOption }
 		/>
 	);

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

@@ -1,11 +1,11 @@
 /**
  * External dependencies
  */
+import { useState, useEffect } from '@wordpress/element';
 import RadioControl, {
 	RadioControlOptionLayout,
 } from '@woocommerce/base-components/radio-control';
 import type { PackageRateOption } from '@woocommerce/type-defs/shipping';
-import type { ReactElement } from 'react';
 import type { CartShippingPackageShippingRate } from '@woocommerce/type-defs/cart';
 
 /**
@@ -20,18 +20,30 @@ interface PackageRates {
 		option: CartShippingPackageShippingRate
 	) => PackageRateOption;
 	className?: string;
-	noResultsMessage: ReactElement;
-	selected?: string;
+	noResultsMessage: JSX.Element;
+	selectedRate: CartShippingPackageShippingRate | undefined;
 }
 
 const PackageRates = ( {
-	className,
+	className = '',
 	noResultsMessage,
 	onSelectRate,
 	rates,
 	renderOption = renderPackageRateOption,
-	selected,
-}: PackageRates ): ReactElement => {
+	selectedRate,
+}: PackageRates ): JSX.Element => {
+	const selectedRateId = selectedRate?.rate_id || '';
+
+	// Store selected rate ID in local state so shipping rates changes are shown in the UI instantly.
+	const [ selectedOption, setSelectedOption ] = useState( selectedRateId );
+
+	// Update the selected option if cart state changes in the data stores.
+	useEffect( () => {
+		if ( selectedRateId ) {
+			setSelectedOption( selectedRateId );
+		}
+	}, [ selectedRateId ] );
+
 	if ( rates.length === 0 ) {
 		return noResultsMessage;
 	}
@@ -40,10 +52,11 @@ const PackageRates = ( {
 		return (
 			<RadioControl
 				className={ className }
-				onChange={ ( selectedRateId: string ) => {
-					onSelectRate( selectedRateId );
+				onChange={ ( value: string ) => {
+					setSelectedOption( value );
+					onSelectRate( value );
 				} }
-				selected={ selected }
+				selected={ selectedOption }
 				options={ rates.map( renderOption ) }
 			/>
 		);

assets/js/base/components/radio-control/index.tsx

@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { useInstanceId } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import RadioControlOption from './option';
+import type { RadioControlProps } from './types';
+import './style.scss';
+
+const RadioControl = ( {
+	className = '',
+	id,
+	selected,
+	onChange = () => void 0,
+	options = [],
+}: RadioControlProps ): JSX.Element | null => {
+	const instanceId = useInstanceId( RadioControl );
+	const radioControlId = id || instanceId;
+
+	if ( ! options.length ) {
+		return null;
+	}
+
+	return (
+		<div
+			className={ classnames(
+				'wc-block-components-radio-control',
+				className
+			) }
+		>
+			{ options.map( ( option ) => (
+				<RadioControlOption
+					key={ `${ radioControlId }-${ option.value }` }
+					name={ `radio-control-${ radioControlId }` }
+					checked={ option.value === selected }
+					option={ option }
+					onChange={ ( value: string ) => {
+						onChange( value );
+						if ( typeof option.onChange === 'function' ) {
+							option.onChange( value );
+						}
+					} }
+				/>
+			) ) }
+		</div>
+	);
+};
+
+export default RadioControl;
+export { default as RadioControlOption } from './option';
+export { default as RadioControlOptionLayout } from './option-layout';

assets/js/base/components/radio-control/option-layout.tsx

@@ -1,16 +1,15 @@
 /**
- * External dependencies
+ * Internal dependencies
  */
-import type { ReactElement } from 'react';
-import type { PackageRateOption } from '@woocommerce/type-defs/shipping';
+import type { RadioControlOptionLayout } from './types';
 
 const OptionLayout = ( {
 	label,
 	secondaryLabel,
 	description,
 	secondaryDescription,
 	id,
-}: Partial< PackageRateOption > ): ReactElement => {
+}: RadioControlOptionLayout ): JSX.Element => {
 	return (
 		<div className="wc-block-components-radio-control__option-layout">
 			<div className="wc-block-components-radio-control__label-group">

assets/js/base/components/radio-control/option.js → assets/js/base/components/radio-control/option.tsx

@@ -7,16 +7,24 @@ import classnames from 'classnames';
  * Internal dependencies
  */
 import OptionLayout from './option-layout';
+import type { RadioControlOptionProps } from './types';
 
-const Option = ( { checked, name, onChange, option } ) => {
+const Option = ( {
+	checked,
+	defaultChecked,
+	name,
+	onChange,
+	option,
+}: RadioControlOptionProps ): JSX.Element => {
 	const {
 		value,
 		label,
 		description,
 		secondaryLabel,
 		secondaryDescription,
 	} = option;
-	const onChangeValue = ( event ) => onChange( event.target.value );
+	const onChangeValue = ( event: React.ChangeEvent< HTMLInputElement > ) =>
+		onChange( event.target.value );
 
 	return (
 		<label
@@ -36,6 +44,7 @@ const Option = ( { checked, name, onChange, option } ) => {
 				value={ value }
 				onChange={ onChangeValue }
 				checked={ checked }
+				defaultChecked={ defaultChecked }
 				aria-describedby={ classnames( {
 					[ `${ name }-${ value }__label` ]: label,
 					[ `${ name }-${ value }__secondary-label` ]: secondaryLabel,

assets/js/base/components/radio-control/types.ts

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import type { ReactElement } from 'react';
+
+export interface RadioControlProps {
+	// Class name for control.
+	className?: string;
+	// ID for the control.
+	id?: string;
+	// Selected should be passed if using this as a controlled component.
+	selected: string;
+	// Fired when an option is changed.
+	onChange: ( value: string ) => void;
+	// List of radio control options.
+	options: RadioControlOption[];
+}
+
+export interface RadioControlOptionProps {
+	checked: boolean;
+	name?: string;
+	onChange: ( value: string ) => void;
+	option: RadioControlOption;
+}
+
+interface RadioControlOptionContent {
+	label: string;
+	description?: string | ReactElement | undefined;
+	secondaryLabel?: string | ReactElement | undefined;
+	secondaryDescription?: string | undefined;
+}
+
+export interface RadioControlOption extends RadioControlOptionContent {
+	value: string;
+	onChange?: ( value: string ) => void;
+}
+
+export interface RadioControlOptionLayout extends RadioControlOptionContent {
+	id?: string;
+}

assets/js/base/context/hooks/shipping/index.js

@@ -1,2 +1 @@
-export * from './use-select-shipping-rate';
 export * from './use-select-shipping-rates';