Change `shippingRatesLoading` to `isLoadingRates` (https://github.com/woocommerce/woocommerce-blocks/pull/5999)

* Change `shippingRatesLoading` to `isLoadingRates`

* Revert isLoadingRates back to old name in payment method interface

* Update docs with correct names returned by usePaymentMethodInterface

* Update TS to name the selectShippingRate method correctly

* Change method name on usePaymentMethodInterface back

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control/index.tsx

@@ -78,7 +78,7 @@ interface ShippingRatesControlProps {
 	collapsible?: boolean;
 	shippingRates: CartResponseShippingRate[];
 	className?: string;
-	shippingRatesLoading: boolean;
+	isLoadingRates: boolean;
 	noResultsMessage: ReactElement;
 	renderOption: PackageRateRenderOption;
 	context: 'woocommerce/cart' | 'woocommerce/checkout';
@@ -88,7 +88,7 @@ interface ShippingRatesControlProps {
  *
  * @param {Object} props Incoming props.
  * @param {Array} props.shippingRates Array of packages containing shipping rates.
- * @param {boolean} props.shippingRatesLoading True when rates are being loaded.
+ * @param {boolean} props.isLoadingRates True when rates are being loaded.
  * @param {string} props.className Class name for package rates.
  * @param {boolean} [props.collapsible] If true, when multiple packages are rendered they can be toggled open and closed.
  * @param {ReactElement} props.noResultsMessage Rendered when there are no packages.
@@ -97,7 +97,7 @@ interface ShippingRatesControlProps {
  */
 const ShippingRatesControl = ( {
 	shippingRates,
-	shippingRatesLoading,
+	isLoadingRates,
 	className,
 	collapsible = false,
 	noResultsMessage,
@@ -105,7 +105,7 @@ const ShippingRatesControl = ( {
 	context,
 }: ShippingRatesControlProps ): JSX.Element => {
 	useEffect( () => {
-		if ( shippingRatesLoading ) {
+		if ( isLoadingRates ) {
 			return;
 		}
 		const packageCount = getShippingRatesPackageCount( shippingRates );
@@ -148,7 +148,7 @@ const ShippingRatesControl = ( {
 					)
 			);
 		}
-	}, [ shippingRatesLoading, shippingRates ] );
+	}, [ isLoadingRates, shippingRates ] );
 
 	// Prepare props to pass to the ExperimentalOrderShippingPackages slot fill.
 	// We need to pluck out receiveCart.
@@ -170,7 +170,7 @@ const ShippingRatesControl = ( {
 
 	return (
 		<LoadingMask
-			isLoading={ shippingRatesLoading }
+			isLoading={ isLoadingRates }
 			screenReaderLabel={ __(
 				'Loading shipping rates…',
 				'woo-gutenberg-products-block'

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/shipping/index.tsx

@@ -138,7 +138,7 @@ export const TotalsShipping = ( {
 		shippingAddress,
 		cartHasCalculatedShipping,
 		shippingRates,
-		shippingRatesLoading,
+		isLoadingRates,
 	} = useStoreCart();
 
 	const totalShippingValue = getSetting(
@@ -209,7 +209,7 @@ export const TotalsShipping = ( {
 				<ShippingRateSelector
 					hasRates={ hasRates }
 					shippingRates={ shippingRates }
-					shippingRatesLoading={ shippingRatesLoading }
+					isLoadingRates={ isLoadingRates }
 				/>
 			) }
 		</div>

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/shipping/shipping-rate-selector.js

@@ -13,7 +13,7 @@ import ShippingRatesControl from '../../shipping-rates-control';
 const ShippingRateSelector = ( {
 	hasRates,
 	shippingRates,
-	shippingRatesLoading,
+	isLoadingRates,
 } ) => {
 	const legend = hasRates
 		? __( 'Shipping options', 'woo-gutenberg-products-block' )
@@ -39,7 +39,7 @@ const ShippingRateSelector = ( {
 					</Notice>
 				}
 				shippingRates={ shippingRates }
-				shippingRatesLoading={ shippingRatesLoading }
+				isLoadingRates={ isLoadingRates }
 				context="woocommerce/cart"
 			/>
 		</fieldset>

plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/test/use-store-cart.js

@@ -66,7 +66,7 @@ describe( 'useStoreCart', () => {
 		},
 		shippingRates: previewCart.shipping_rates,
 		extensions: {},
-		shippingRatesLoading: false,
+		isLoadingRates: false,
 		cartHasCalculatedShipping: true,
 	};
 
@@ -112,7 +112,7 @@ describe( 'useStoreCart', () => {
 		shippingAddress: mockShippingAddress,
 		shippingRates: [],
 		extensions: {},
-		shippingRatesLoading: false,
+		isLoadingRates: false,
 		cartHasCalculatedShipping: true,
 		receiveCart: undefined,
 		paymentRequirements: [],

plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/use-store-cart.ts

@@ -108,7 +108,7 @@ export const defaultCartData: StoreCart = {
 	billingAddress: defaultBillingAddress,
 	shippingAddress: defaultShippingAddress,
 	shippingRates: EMPTY_SHIPPING_RATES,
-	shippingRatesLoading: false,
+	isLoadingRates: false,
 	cartHasCalculatedShipping: false,
 	paymentRequirements: EMPTY_PAYMENT_REQUIREMENTS,
 	receiveCart: () => undefined,
@@ -163,7 +163,7 @@ export const useStoreCart = (
 					shippingAddress: defaultShippingAddress,
 					extensions: EMPTY_EXTENSIONS,
 					shippingRates: previewCart.shipping_rates,
-					shippingRatesLoading: false,
+					isLoadingRates: false,
 					cartHasCalculatedShipping:
 						previewCart.has_calculated_shipping,
 					paymentRequirements: previewCart.paymentRequirements,
@@ -182,7 +182,7 @@ export const useStoreCart = (
 				'getCartData'
 			);
 
-			const shippingRatesLoading = store.isCustomerDataUpdating();
+			const isLoadingRates = store.isCustomerDataUpdating();
 			const { receiveCart } = dispatch( storeKey );
 			const billingAddress = decodeValues( cartData.billingAddress );
 			const shippingAddress = cartData.needsShipping
@@ -224,7 +224,7 @@ export const useStoreCart = (
 				shippingAddress: emptyHiddenAddressFields( shippingAddress ),
 				extensions: cartData.extensions,
 				shippingRates: cartData.shippingRates,
-				shippingRatesLoading,
+				isLoadingRates,
 				cartHasCalculatedShipping: cartData.hasCalculatedShipping,
 				paymentRequirements: cartData.paymentRequirements,
 				receiveCart,

plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts

@@ -58,7 +58,7 @@ export const usePaymentMethodInterface = (): PaymentMethodInterface => {
 	} = useShippingDataContext();
 	const {
 		shippingRates,
-		shippingRatesLoading,
+		isLoadingRates,
 		selectedRates,
 		isSelectingRate,
 		selectShippingRate,
@@ -160,11 +160,11 @@ export const usePaymentMethodInterface = (): PaymentMethodInterface => {
 			isSelectingRate,
 			needsShipping,
 			selectedRates,
-			selectShippingRate,
+			setSelectedRates: selectShippingRate,
 			setShippingAddress,
 			shippingAddress,
 			shippingRates,
-			shippingRatesLoading,
+			shippingRatesLoading: isLoadingRates,
 		},
 		shippingStatus: {
 			shippingErrorStatus,

plugins/woocommerce-blocks/assets/js/base/context/hooks/shipping/use-shipping-data.ts

@@ -19,7 +19,7 @@ interface ShippingData extends SelectShippingRateType {
 	needsShipping: Cart[ 'needsShipping' ];
 	hasCalculatedShipping: Cart[ 'hasCalculatedShipping' ];
 	shippingRates: Cart[ 'shippingRates' ];
-	shippingRatesLoading: boolean;
+	isLoadingRates: boolean;
 	selectedRates: Record< string, string | unknown >;
 }
 
@@ -28,14 +28,14 @@ export const useShippingData = (): ShippingData => {
 		shippingRates,
 		needsShipping,
 		hasCalculatedShipping,
-		shippingRatesLoading,
+		isLoadingRates,
 	} = useSelect( ( select ) => {
 		const store = select( storeKey );
 		return {
 			shippingRates: store.getShippingRates(),
 			needsShipping: store.getNeedsShipping(),
 			hasCalculatedShipping: store.getHasCalculatedShipping(),
-			shippingRatesLoading: store.isCustomerDataUpdating(),
+			isLoadingRates: store.isCustomerDataUpdating(),
 		};
 	} );
 	const { isSelectingRate, selectShippingRate } = useSelectShippingRate();
@@ -61,6 +61,6 @@ export const useShippingData = (): ShippingData => {
 		shippingRates,
 		needsShipping,
 		hasCalculatedShipping,
-		shippingRatesLoading,
+		isLoadingRates,
 	};
 };

plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/shipping/constants.js

@@ -47,7 +47,7 @@ export const DEFAULT_SHIPPING_CONTEXT_DATA = {
 	dispatchErrorStatus: () => null,
 	shippingErrorTypes: ERROR_TYPES,
 	shippingRates: [],
-	shippingRatesLoading: false,
+	isLoadingRates: false,
 	selectedRates: [],
 	setSelectedRates: () => null,
 	shippingAddress: DEFAULT_SHIPPING_ADDRESS,

plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/shipping/index.js

@@ -50,7 +50,7 @@ export const useShippingDataContext = () => {
  */
 export const ShippingDataProvider = ( { children } ) => {
 	const { dispatchActions } = useCheckoutContext();
-	const { shippingRates, shippingRatesLoading, cartErrors } = useStoreCart();
+	const { shippingRates, isLoadingRates, cartErrors } = useStoreCart();
 	const { isSelectingRate } = useSelectShippingRate();
 	const { selectedRates } = useShippingData();
 	const [ shippingErrorStatus, dispatchErrorStatus ] = useReducer(
@@ -79,12 +79,12 @@ export const ShippingDataProvider = ( { children } ) => {
 
 	// increment/decrement checkout calculating counts when shipping is loading.
 	useEffect( () => {
-		if ( shippingRatesLoading ) {
+		if ( isLoadingRates ) {
 			dispatchActions.incrementCalculating();
 		} else {
 			dispatchActions.decrementCalculating();
 		}
-	}, [ shippingRatesLoading, dispatchActions ] );
+	}, [ isLoadingRates, dispatchActions ] );
 
 	// increment/decrement checkout calculating counts when shipping rates are being selected.
 	useEffect( () => {
@@ -122,7 +122,7 @@ export const ShippingDataProvider = ( { children } ) => {
 	// emit events.
 	useEffect( () => {
 		if (
-			! shippingRatesLoading &&
+			! isLoadingRates &&
 			( shippingRates.length === 0 || currentErrorStatus.hasError )
 		) {
 			emitEvent(
@@ -136,14 +136,14 @@ export const ShippingDataProvider = ( { children } ) => {
 		}
 	}, [
 		shippingRates,
-		shippingRatesLoading,
+		isLoadingRates,
 		currentErrorStatus.hasError,
 		currentErrorStatus.hasInvalidAddress,
 	] );
 
 	useEffect( () => {
 		if (
-			! shippingRatesLoading &&
+			! isLoadingRates &&
 			shippingRates.length > 0 &&
 			! currentErrorStatus.hasError
 		) {
@@ -153,7 +153,7 @@ export const ShippingDataProvider = ( { children } ) => {
 				shippingRates
 			);
 		}
-	}, [ shippingRates, shippingRatesLoading, currentErrorStatus.hasError ] );
+	}, [ shippingRates, isLoadingRates, currentErrorStatus.hasError ] );
 
 	// emit shipping rate selection events.
 	useEffect( () => {

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.tsx

@@ -52,7 +52,7 @@ const Block = (): JSX.Element | null => {
 	const {
 		shippingRates,
 		needsShipping,
-		shippingRatesLoading,
+		isLoadingRates,
 		hasCalculatedShipping,
 	} = useShippingData();
 
@@ -101,7 +101,7 @@ const Block = (): JSX.Element | null => {
 					}
 					renderOption={ renderShippingRatesControlOption }
 					shippingRates={ shippingRates }
-					shippingRatesLoading={ shippingRatesLoading }
+					isLoadingRates={ isLoadingRates }
 					context="woocommerce/checkout"
 				/>
 			) }

plugins/woocommerce-blocks/assets/js/types/type-defs/hooks.ts

@@ -47,7 +47,7 @@ export interface StoreCart {
 	shippingAddress: CartResponseShippingAddress;
 	shippingRates: Array< CartResponseShippingRate >;
 	extensions: Record< string, unknown >;
-	shippingRatesLoading: boolean;
+	isLoadingRates: boolean;
 	cartHasCalculatedShipping: boolean;
 	paymentRequirements: Array< string >;
 	receiveCart: ( cart: CartResponse ) => void;

plugins/woocommerce-blocks/docs/block-client-apis/checkout/checkout-api.md

@@ -47,21 +47,13 @@ The customer data context exposes the api interfaces for the following things vi
 
 The shipping method data context exposes the api interfaces for the following things (typedef `ShippingMethodDataContext`) via the `useShippingMethodData` hook:
 
--   `shippingErrorStatus`: The current error status for the context.
+- `shippingErrorStatus`: The current error status for the context.
--   `dispatchErrorStatus`: A function for dispatching a shipping error status. Used in combination with...
+- `dispatchErrorStatus`: A function for dispatching a shipping error status. Used in combination with...
--   `shippingErrorTypes`: An object with the various error statuses that can be dispatched (`NONE`, `INVALID_ADDRESS`, `UNKNOWN`)
+- `shippingErrorTypes`: An object with the various error statuses that can be dispatched (`NONE`, `INVALID_ADDRESS`, `UNKNOWN`)
--   `shippingRates`: This is retrieved using the `useShippingRates` hook and exposed on the context.
+- `onShippingRateSuccess`: This is a function for registering a callback to be invoked when shipping rates are retrieved successfully. Callbacks will receive the new rates as an argument.
--   `shippingRatesLoading`: True when shipping rates are loading.
+- `onShippingRateFail`: This is a function for registering a callback to be invoked when shipping rates fail to be retrieved. Callbacks will receive the error status as an argument.
--   `selectedRates`: Will expose the selected rates.
+- `onShippingRateSelectSuccess`: This is a function for registering a callback to be invoked when shipping rate selection is successful.
--   `setSelectedRates`: Function for setting new selected rates.
+- `onShippingRateSelectFail`: This is a function for registering a callback to be invoked when shipping rates selection is unsuccessful.
--   `isSelectingRate`: True when shipping rate selection is persisting to the server.
--   `shippingAddress`: The current set shipping address.
--   `setShippingAddress`: A function for setting the shipping address. This will trigger shipping rates updates.
--   `onShippingRateSuccess`: This is a function for registering a callback to be invoked when shipping rates are retrieved successfully. Callbacks will receive the new rates as an argument.
--   `onShippingRateFail`: This is a function for registering a callback to be invoked when shipping rates fail to be retrieved. Callbacks will receive the error status as an argument.
--   `onShippingRateSelectSuccess`: This is a function for registering a callback to be invoked when shipping rate selection is successful.
--   `onShippingRateSelectFail`: This is a function for registering a callback to be invoked when shipping rates selection is unsuccessful.
--   `needsShipping`: Boolean indicating whether the contents of the order needs shipping (`true`) or not (`false`).
 
 #### Payment Method Data Context
 

plugins/woocommerce-blocks/storybook/__mocks__/woocommerce-base-hooks.js

@@ -22,7 +22,7 @@ export const useStoreCart = () => ( {
 	billingAddress: {},
 	shippingAddress: {},
 	shippingRates: previewShippingRates,
-	shippingRatesLoading: false,
+	isLoadingRates: false,
 	cartHasCalculatedShipping: previewCart.has_calculated_shipping,
 	receiveCart: () => void null,
 } );