first commit

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/utils/address.ts

@@ -0,0 +1,99 @@
+/**
+ * External dependencies
+ */
+import prepareAddressFields from '@woocommerce/base-components/cart-checkout/address-form/prepare-address-fields';
+import { isEmail } from '@wordpress/url';
+import type {
+	CartResponseBillingAddress,
+	CartResponseShippingAddress,
+} from '@woocommerce/types';
+import { defaultAddressFields, EnteredAddress } from '@woocommerce/settings';
+
+/**
+ * Compare two addresses and see if they are the same.
+ */
+export const isSameAddress = (
+	address1: EnteredAddress,
+	address2: EnteredAddress
+): boolean => {
+	return Object.keys( defaultAddressFields ).every(
+		( field: string ) =>
+			address1[ field as keyof EnteredAddress ] ===
+			address2[ field as keyof EnteredAddress ]
+	);
+};
+
+/**
+ * pluckAddress takes a full address object and returns relevant fields for calculating
+ * shipping, so we can track when one of them change to update rates.
+ *
+ * @param {Object} address          An object containing all address information
+ * @param {string} address.country  The country.
+ * @param {string} address.state    The state.
+ * @param {string} address.city     The city.
+ * @param {string} address.postcode The postal code.
+ *
+ * @return {Object} pluckedAddress  An object containing shipping address that are needed to fetch an address.
+ */
+export const pluckAddress = ( {
+	country = '',
+	state = '',
+	city = '',
+	postcode = '',
+}: CartResponseBillingAddress | CartResponseShippingAddress ): {
+	country: string;
+	state: string;
+	city: string;
+	postcode: string;
+} => ( {
+	country: country.trim(),
+	state: state.trim(),
+	city: city.trim(),
+	postcode: postcode ? postcode.replace( ' ', '' ).toUpperCase() : '',
+} );
+
+/**
+ * pluckEmail takes a full address object and returns only the email address, if set and valid. Otherwise returns an empty string.
+ *
+ * @param {Object} address       An object containing all address information
+ * @param {string} address.email The email address.
+ * @return {string} The email address.
+ */
+export const pluckEmail = ( {
+	email = '',
+}: CartResponseBillingAddress ): string =>
+	isEmail( email ) ? email.trim() : '';
+
+/**
+ * Type-guard.
+ */
+const isValidAddressKey = (
+	key: string,
+	address: CartResponseBillingAddress | CartResponseShippingAddress
+): key is keyof typeof address => {
+	return key in address;
+};
+
+/**
+ * Sets fields to an empty string in an address if they are hidden by the settings in countryLocale.
+ *
+ * @param {Object} address The address to empty fields from.
+ * @return {Object} The address with hidden fields values removed.
+ */
+export const emptyHiddenAddressFields = <
+	T extends CartResponseBillingAddress | CartResponseShippingAddress
+>(
+	address: T
+): T => {
+	const fields = Object.keys( defaultAddressFields );
+	const addressFields = prepareAddressFields( fields, {}, address.country );
+	const newAddress = Object.assign( {}, address ) as T;
+
+	addressFields.forEach( ( { key = '', hidden = false } ) => {
+		if ( hidden && isValidAddressKey( key, address ) ) {
+			newAddress[ key ] = '';
+		}
+	} );
+
+	return newAddress;
+};

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/utils/derive-selected-shipping-rates.ts

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { CartShippingRate } from '@woocommerce/type-defs/cart';
+
+/**
+ * Get an array of selected shipping rates keyed by Package ID.
+ *
+ * @param {Array} shippingRates Array of shipping rates.
+ * @return {Object} Object containing the package IDs and selected rates in the format: { [packageId:string]: rateId:string }
+ */
+export const deriveSelectedShippingRates = (
+	shippingRates: CartShippingRate[]
+): Record< string, string | unknown > =>
+	Object.fromEntries(
+		shippingRates.map(
+			( { package_id: packageId, shipping_rates: packageRates } ) => [
+				packageId,
+				packageRates.find( ( rate ) => rate.selected )?.rate_id,
+			]
+		)
+	);

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/utils/errors.js

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Given a JS error or a fetch response error, parse and format it so it can be displayed to the user.
+ *
+ * @param {Object}   error           Error object.
+ * @param {Function} [error.json]    If a json method is specified, it will try parsing the error first.
+ * @param {string}   [error.message] If a message is specified, it will be shown to the user.
+ * @param {string}   [error.type]    The context in which the error was triggered.
+ * @return {Promise<{message:string;type:string;}>}   Error object containing a message and type.
+ */
+export const formatError = async ( error ) => {
+	if ( typeof error.json === 'function' ) {
+		try {
+			const parsedError = await error.json();
+			return {
+				message: parsedError.message,
+				type: parsedError.type || 'api',
+			};
+		} catch ( e ) {
+			return {
+				message: e.message,
+				type: 'general',
+			};
+		}
+	}
+
+	return {
+		message: error.message,
+		type: error.type || 'general',
+	};
+};
+
+/**
+ * Given an API response object, formats the error message into something more human readable.
+ *
+ * @param {Object} response Response object.
+ * @return {string}   Error message.
+ */
+export const formatStoreApiErrorMessage = ( response ) => {
+	if ( response.data && response.code === 'rest_invalid_param' ) {
+		const invalidParams = Object.values( response.data.params );
+		if ( invalidParams[ 0 ] ) {
+			return invalidParams[ 0 ];
+		}
+	}
+
+	return response?.message
+		? decodeEntities( response.message )
+		: __(
+				'Something went wrong. Please contact us to get assistance.',
+				'woocommerce'
+		  );
+};

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/utils/get-icons-from-payment-methods.ts

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import type {
+	PaymentMethods,
+	PaymentMethodIcons as PaymentMethodIconsType,
+} from '@woocommerce/type-defs/payments';
+
+/**
+ * Get the provider icons from payment methods data.
+ *
+ * @param {PaymentMethods} paymentMethods Payment Method data
+ * @return {PaymentMethodIconsType} Payment Method icons data.
+ */
+export const getIconsFromPaymentMethods = (
+	paymentMethods: PaymentMethods
+): PaymentMethodIconsType => {
+	return Object.values( paymentMethods ).reduce( ( acc, paymentMethod ) => {
+		if ( paymentMethod.icons !== null ) {
+			acc = acc.concat( paymentMethod.icons );
+		}
+		return acc;
+	}, [] as PaymentMethodIconsType );
+};

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/utils/get-valid-block-attributes.js

@@ -0,0 +1,38 @@
+/**
+ * Given some block attributes, gets attributes from the dataset or uses defaults.
+ *
+ * @param {Object} blockAttributes Object containing block attributes.
+ * @param {Array}  rawAttributes   Dataset from DOM.
+ * @return {Array} Array of parsed attributes.
+ */
+export const getValidBlockAttributes = ( blockAttributes, rawAttributes ) => {
+	const attributes = [];
+
+	Object.keys( blockAttributes ).forEach( ( key ) => {
+		if ( typeof rawAttributes[ key ] !== 'undefined' ) {
+			switch ( blockAttributes[ key ].type ) {
+				case 'boolean':
+					attributes[ key ] =
+						rawAttributes[ key ] !== 'false' &&
+						rawAttributes[ key ] !== false;
+					break;
+				case 'number':
+					attributes[ key ] = parseInt( rawAttributes[ key ], 10 );
+					break;
+				case 'array':
+				case 'object':
+					attributes[ key ] = JSON.parse( rawAttributes[ key ] );
+					break;
+				default:
+					attributes[ key ] = rawAttributes[ key ];
+					break;
+			}
+		} else {
+			attributes[ key ] = blockAttributes[ key ].default;
+		}
+	} );
+
+	return attributes;
+};
+
+export default getValidBlockAttributes;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/utils/index.js

@@ -0,0 +1,9 @@
+export * from './errors';
+export * from './address';
+export * from './shipping-rates';
+export * from './legacy-events';
+export * from './render-frontend';
+export * from './get-valid-block-attributes';
+export * from './product-data';
+export * from './derive-selected-shipping-rates';
+export * from './get-icons-from-payment-methods';

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/utils/lazy-load-script.ts

@@ -0,0 +1,131 @@
+/**
+ * External dependencies
+ */
+import { isString } from '@woocommerce/types';
+
+interface LazyLoadScriptParams {
+	handle: string;
+	src: string;
+	version?: string;
+	after?: string;
+	before?: string;
+	translations?: string;
+}
+
+interface AppendScriptAttributesParam {
+	id: string;
+	innerHTML?: string;
+	onerror?: OnErrorEventHandlerNonNull;
+	onload?: () => void;
+	src?: string;
+}
+
+/**
+ * In WP, registered scripts are loaded into the page with an element like this:
+ * `<script src='...' id='[SCRIPT_ID]'></script>`
+ * This function checks whether an element matching that selector exists.
+ * Useful to know if a script has already been appended to the page.
+ */
+const isScriptTagInDOM = ( scriptId: string ): boolean => {
+	const scriptElements = document.querySelectorAll( `script#${ scriptId }` );
+	return scriptElements.length > 0;
+};
+
+/**
+ * Appends a script element to the document body if a script with the same id
+ * doesn't exist.
+ */
+const appendScript = ( attributes: AppendScriptAttributesParam ): void => {
+	// Abort if id is not valid or a script with the same id exists.
+	if ( ! isString( attributes.id ) || isScriptTagInDOM( attributes.id ) ) {
+		return;
+	}
+	const scriptElement = document.createElement( 'script' );
+	for ( const attr in attributes ) {
+		// We could technically be iterating over inherited members here, so
+		// if this is the case we should skip it.
+		if ( ! attributes.hasOwnProperty( attr ) ) {
+			continue;
+		}
+		const key = attr as keyof AppendScriptAttributesParam;
+
+		// Skip the keys that aren't strings, because TS can't be sure which
+		// key in the scriptElement object we're assigning to.
+		if ( key === 'onload' || key === 'onerror' ) {
+			continue;
+		}
+
+		// This assignment stops TS complaining about the value maybe being
+		// undefined following the isString check below.
+		const value = attributes[ key ];
+		if ( isString( value ) ) {
+			scriptElement[ key ] = value;
+		}
+	}
+
+	// Now that we've assigned all the strings, we can explicitly assign to the
+	// function keys.
+	if ( typeof attributes.onload === 'function' ) {
+		scriptElement.onload = attributes.onload;
+	}
+	if ( typeof attributes.onerror === 'function' ) {
+		scriptElement.onerror = attributes.onerror;
+	}
+	document.body.appendChild( scriptElement );
+};
+
+/**
+ * Appends a `<script>` tag to the document body based on the src and handle
+ * parameters. In addition, it appends additional script tags to load the code
+ * needed for translations and any before and after inline scripts. See these
+ * documentation pages for more information:
+ *
+ * https://developer.wordpress.org/reference/functions/wp_set_script_translations/
+ * https://developer.wordpress.org/reference/functions/wp_add_inline_script/
+ */
+const lazyLoadScript = ( {
+	handle,
+	src,
+	version,
+	after,
+	before,
+	translations,
+}: LazyLoadScriptParams ): Promise< void > => {
+	return new Promise( ( resolve, reject ) => {
+		if ( isScriptTagInDOM( `${ handle }-js` ) ) {
+			resolve();
+		}
+
+		if ( translations ) {
+			appendScript( {
+				id: `${ handle }-js-translations`,
+				innerHTML: translations,
+			} );
+		}
+		if ( before ) {
+			appendScript( {
+				id: `${ handle }-js-before`,
+				innerHTML: before,
+			} );
+		}
+
+		const onload = () => {
+			if ( after ) {
+				appendScript( {
+					id: `${ handle }-js-after`,
+					innerHTML: after,
+				} );
+			}
+			resolve();
+		};
+
+		appendScript( {
+			id: `${ handle }-js`,
+			onerror: reject,
+			onload,
+			src: version ? `${ src }?ver=${ version }` : src,
+		} );
+	} );
+};
+
+export default lazyLoadScript;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/utils/legacy-events.ts

@@ -0,0 +1,106 @@
+/**
+ * External dependencies
+ */
+import type { AddToCartEventDetail } from '@woocommerce/type-defs/events';
+
+const CustomEvent = window.CustomEvent || null;
+
+interface DispatchedEventProperties {
+	// Whether the event bubbles.
+	bubbles?: boolean;
+	// Whether the event is cancelable.
+	cancelable?: boolean;
+	// See https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail
+	detail?: unknown;
+	// Element that dispatches the event. By default, the body.
+	element?: Element | null;
+}
+
+/**
+ * Wrapper function to dispatch an event.
+ */
+export const dispatchEvent = (
+	name: string,
+	{
+		bubbles = false,
+		cancelable = false,
+		element,
+		detail = {},
+	}: DispatchedEventProperties
+): void => {
+	if ( ! CustomEvent ) {
+		return;
+	}
+	if ( ! element ) {
+		element = document.body;
+	}
+	const event = new CustomEvent( name, {
+		bubbles,
+		cancelable,
+		detail,
+	} );
+	element.dispatchEvent( event );
+};
+
+let fragmentRequestTimeoutId: ReturnType< typeof setTimeout >;
+
+// This is a hack to trigger cart updates till we migrate to block based cart
+// that relies on the store, see
+// https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/1247
+export const triggerFragmentRefresh = (): void => {
+	if ( fragmentRequestTimeoutId ) {
+		clearTimeout( fragmentRequestTimeoutId );
+	}
+	fragmentRequestTimeoutId = setTimeout( () => {
+		dispatchEvent( 'wc_fragment_refresh', {
+			bubbles: true,
+			cancelable: true,
+		} );
+	}, 50 );
+};
+
+export const triggerAddingToCartEvent = (): void => {
+	dispatchEvent( 'wc-blocks_adding_to_cart', {
+		bubbles: true,
+		cancelable: true,
+	} );
+};
+
+export const triggerAddedToCartEvent = ( {
+	preserveCartData = false,
+}: AddToCartEventDetail ): void => {
+	dispatchEvent( 'wc-blocks_added_to_cart', {
+		bubbles: true,
+		cancelable: true,
+		detail: { preserveCartData },
+	} );
+};
+
+/**
+ * Function that listens to a jQuery event and dispatches a native JS event.
+ * Useful to convert WC Core events into events that can be read by blocks.
+ *
+ * Returns a function to remove the jQuery event handler. Ideally it should be
+ * used when the component is unmounted.
+ */
+export const translateJQueryEventToNative = (
+	// Name of the jQuery event to listen to.
+	jQueryEventName: string,
+	// Name of the native event to dispatch.
+	nativeEventName: string,
+	// Whether the event bubbles.
+	bubbles = false,
+	// Whether the event is cancelable.
+	cancelable = false
+): ( () => void ) => {
+	if ( typeof jQuery !== 'function' ) {
+		return () => void null;
+	}
+
+	const eventDispatcher = () => {
+		dispatchEvent( nativeEventName, { bubbles, cancelable } );
+	};
+
+	jQuery( document ).on( jQueryEventName, eventDispatcher );
+	return () => jQuery( document ).off( jQueryEventName, eventDispatcher );
+};

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/utils/preload-script.ts

@@ -0,0 +1,30 @@
+interface PreloadScriptParams {
+	handle: string;
+	src: string;
+	version?: string;
+}
+
+/**
+ * Appends a `<link>` tag to the document head to preload a script based on the
+ * src and handle parameters.
+ */
+const preloadScript = ( {
+	handle,
+	src,
+	version,
+}: PreloadScriptParams ): void => {
+	const handleScriptElements = document.querySelectorAll(
+		`#${ handle }-js, #${ handle }-js-prefetch`
+	);
+
+	if ( handleScriptElements.length === 0 ) {
+		const prefetchLink = document.createElement( 'link' );
+		prefetchLink.href = version ? `${ src }?ver=${ version }` : src;
+		prefetchLink.rel = 'preload';
+		prefetchLink.as = 'script';
+		prefetchLink.id = `${ handle }-js-prefetch`;
+		document.head.appendChild( prefetchLink );
+	}
+};
+
+export default preloadScript;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/utils/product-data.js

@@ -0,0 +1,31 @@
+/**
+ * Check a product object to see if it can be purchased.
+ *
+ * @param {Object} product Product object.
+ * @return {boolean} True if purchasable.
+ */
+export const productIsPurchasable = ( product ) => {
+	return product.is_purchasable || false;
+};
+
+/**
+ * Check if the product is supported by the blocks add to cart form.
+ *
+ * @param {Object} product Product object.
+ * @return {boolean} True if supported.
+ */
+export const productSupportsAddToCartForm = ( product ) => {
+	/**
+	 * @todo Define supported product types for add to cart form.
+	 *
+	 * When introducing the form-element registration system, include a method of defining if a
+	 * product type has support.
+	 *
+	 * If, as an example, we went with an inner block system for the add to cart form, we could allow
+	 * a type to be registered along with it's default Block template. Registered types would then be
+	 * picked up here, as well as the core types which would be defined elsewhere.
+	 */
+	const supportedTypes = [ 'simple', 'variable' ];
+
+	return supportedTypes.includes( product.type || 'simple' );
+};

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/utils/render-frontend.tsx

@@ -0,0 +1,260 @@
+/**
+ * External dependencies
+ */
+import { render, Suspense } from '@wordpress/element';
+import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundary';
+
+// Some blocks take care of rendering their inner blocks automatically. For
+// example, the empty cart. In those cases, we don't want to trigger the render
+// function of inner components on load. Instead, the wrapper block can trigger
+// the event `wc-blocks_render_blocks_frontend` to render its inner blocks.
+const selectorsToSkipOnLoad = [ '.wp-block-woocommerce-cart' ];
+
+type BlockProps<
+	TProps extends Record< string, unknown >,
+	TAttribute extends Record< string, unknown >
+> = TProps & {
+	attributes?: TAttribute;
+};
+
+type BlockType<
+	TProps extends Record< string, unknown >,
+	TAttribute extends Record< string, unknown >
+> = ( props: BlockProps< TProps, TAttribute > ) => JSX.Element | null;
+
+export type GetPropsFn<
+	TProps extends Record< string, unknown >,
+	TAttributes extends Record< string, unknown >
+> = ( el: HTMLElement, i: number ) => BlockProps< TProps, TAttributes >;
+
+interface RenderBlockParams<
+	TProps extends Record< string, unknown >,
+	TAttributes extends Record< string, unknown >
+> {
+	// React component to use as a replacement.
+	Block: BlockType< TProps, TAttributes > | null;
+	// Container to replace with the Block component.
+	container: HTMLElement;
+	// Attributes object for the block.
+	attributes: TAttributes;
+	// Props object for the block.
+	props: BlockProps< TProps, TAttributes >;
+	// Props object for the error boundary.
+	errorBoundaryProps?: Record< string, unknown >;
+}
+
+/**
+ * Renders a block component in a single `container` node.
+ */
+export const renderBlock = <
+	TProps extends Record< string, unknown >,
+	TAttributes extends Record< string, unknown >
+>( {
+	Block,
+	container,
+	attributes = {} as TAttributes,
+	props = {} as BlockProps< TProps, TAttributes >,
+	errorBoundaryProps = {},
+}: RenderBlockParams< TProps, TAttributes > ): void => {
+	render(
+		<BlockErrorBoundary { ...errorBoundaryProps }>
+			<Suspense fallback={ <div className="wc-block-placeholder" /> }>
+				{ Block && <Block { ...props } attributes={ attributes } /> }
+			</Suspense>
+		</BlockErrorBoundary>,
+		container,
+		() => {
+			if ( container.classList ) {
+				container.classList.remove( 'is-loading' );
+			}
+		}
+	);
+};
+
+interface RenderBlockInContainersParams<
+	TProps extends Record< string, unknown >,
+	TAttributes extends Record< string, unknown >
+> {
+	// React component to use as a replacement.
+	Block: BlockType< TProps, TAttributes > | null;
+	// Containers to replace with the Block component.
+	containers: NodeListOf< Element >;
+	// Function to generate the props object for the block.
+	getProps?: GetPropsFn< TProps, TAttributes >;
+	// Function to generate the props object for the error boundary.
+	getErrorBoundaryProps?: (
+		el: HTMLElement,
+		i: number
+	) => Record< string, unknown >;
+}
+
+/**
+ * Renders a block component in each `containers` node.
+ */
+const renderBlockInContainers = <
+	TProps extends Record< string, unknown >,
+	TAttributes extends Record< string, unknown >
+>( {
+	Block,
+	containers,
+	getProps = () => ( {} as BlockProps< TProps, TAttributes > ),
+	getErrorBoundaryProps = () => ( {} ),
+}: RenderBlockInContainersParams< TProps, TAttributes > ): void => {
+	if ( containers.length === 0 ) {
+		return;
+	}
+
+	// Use Array.forEach for IE11 compatibility.
+	Array.prototype.forEach.call( containers, ( el, i ) => {
+		const props = getProps( el, i );
+
+		const errorBoundaryProps = getErrorBoundaryProps( el, i );
+		const attributes = {
+			...el.dataset,
+			...( props.attributes || {} ),
+		};
+
+		renderBlock( {
+			Block,
+			container: el,
+			props,
+			attributes,
+			errorBoundaryProps,
+		} );
+	} );
+};
+
+// Given an element and a list of wrappers, check if the element is inside at
+// least one of the wrappers.
+const isElementInsideWrappers = (
+	el: Element,
+	wrappers: NodeListOf< Element >
+): boolean => {
+	return Array.prototype.some.call(
+		wrappers,
+		( wrapper ) => wrapper.contains( el ) && ! wrapper.isSameNode( el )
+	);
+};
+
+interface RenderBlockOutsideWrappersParams<
+	TProps extends Record< string, unknown >,
+	TAttributes extends Record< string, unknown >
+> extends RenderFrontendParams< TProps, TAttributes > {
+	// All elements matched by the selector which are inside the wrapper will be ignored.
+	wrappers?: NodeListOf< Element >;
+}
+
+/**
+ * Renders the block frontend in the elements matched by the selector which are
+ * outside the wrapper elements.
+ */
+const renderBlockOutsideWrappers = <
+	TProps extends Record< string, unknown >,
+	TAttributes extends Record< string, unknown >
+>( {
+	Block,
+	getProps,
+	getErrorBoundaryProps,
+	selector,
+	wrappers,
+}: RenderBlockOutsideWrappersParams< TProps, TAttributes > ): void => {
+	const containers = document.body.querySelectorAll( selector );
+	// Filter out blocks inside the wrappers.
+	if ( wrappers && wrappers.length > 0 ) {
+		Array.prototype.filter.call( containers, ( el ) => {
+			return ! isElementInsideWrappers( el, wrappers );
+		} );
+	}
+	renderBlockInContainers( {
+		Block,
+		containers,
+		getProps,
+		getErrorBoundaryProps,
+	} );
+};
+
+interface RenderBlockInsideWrapperParams<
+	TProps extends Record< string, unknown >,
+	TAttributes extends Record< string, unknown >
+> extends RenderFrontendParams< TProps, TAttributes > {
+	// Wrapper element to query the selector inside.
+	wrapper: HTMLElement;
+}
+
+/**
+ * Renders the block frontend in the elements matched by the selector inside the
+ * wrapper element.
+ */
+const renderBlockInsideWrapper = <
+	TProps extends Record< string, unknown >,
+	TAttributes extends Record< string, unknown >
+>( {
+	Block,
+	getProps,
+	getErrorBoundaryProps,
+	selector,
+	wrapper,
+}: RenderBlockInsideWrapperParams< TProps, TAttributes > ): void => {
+	const containers = wrapper.querySelectorAll( selector );
+	renderBlockInContainers( {
+		Block,
+		containers,
+		getProps,
+		getErrorBoundaryProps,
+	} );
+};
+
+interface RenderFrontendParams<
+	TProps extends Record< string, unknown >,
+	TAttributes extends Record< string, unknown >
+> {
+	// React component to use as a replacement.
+	Block: BlockType< TProps, TAttributes > | null;
+	// CSS selector to match the elements to replace.
+	selector: string;
+	// Function to generate the props object for the block.
+	getProps?: GetPropsFn< TProps, TAttributes >;
+	// Function to generate the props object for the error boundary.
+	getErrorBoundaryProps?: (
+		el: HTMLElement,
+		i: number
+	) => Record< string, unknown >;
+}
+
+/**
+ * Renders the block frontend on page load. If the block is contained inside a
+ * wrapper element that should be excluded from initial load, it adds the
+ * appropriate event listeners to render the block when the
+ * `wc-blocks_render_blocks_frontend` event is triggered.
+ */
+export const renderFrontend = <
+	TProps extends Record< string, unknown >,
+	TAttributes extends Record< string, unknown >
+>(
+	props:
+		| RenderBlockOutsideWrappersParams< TProps, TAttributes >
+		| RenderBlockInsideWrapperParams< TProps, TAttributes >
+): void => {
+	const wrappersToSkipOnLoad = document.body.querySelectorAll(
+		selectorsToSkipOnLoad.join( ',' )
+	);
+
+	const { Block, getProps, getErrorBoundaryProps, selector } = props;
+
+	renderBlockOutsideWrappers( {
+		Block,
+		getProps,
+		getErrorBoundaryProps,
+		selector,
+		wrappers: wrappersToSkipOnLoad,
+	} );
+	// For each wrapper, add an event listener to render the inner blocks when
+	// `wc-blocks_render_blocks_frontend` event is triggered.
+	Array.prototype.forEach.call( wrappersToSkipOnLoad, ( wrapper ) => {
+		wrapper.addEventListener( 'wc-blocks_render_blocks_frontend', () => {
+			renderBlockInsideWrapper( { ...props, wrapper } );
+		} );
+	} );
+};
+
+export default renderFrontend;

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/utils/shipping-rates.js

@@ -0,0 +1,19 @@
+/**
+ * Get the number of packages in a shippingRates array.
+ *
+ * @param {Array} shippingRates Shipping rates and packages array.
+ */
+export const getShippingRatesPackageCount = ( shippingRates ) => {
+	return shippingRates.length;
+};
+
+/**
+ * Get the number of rates in a shippingRates array.
+ *
+ * @param {Array} shippingRates Shipping rates and packages array.
+ */
+export const getShippingRatesRateCount = ( shippingRates ) => {
+	return shippingRates.reduce( function ( count, shippingPackage ) {
+		return count + shippingPackage.shipping_rates.length;
+	}, 0 );
+};

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/utils/test/address.ts

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { emptyHiddenAddressFields } from '@woocommerce/base-utils';
+
+describe( 'emptyHiddenAddressFields', () => {
+	it( "Removes state from an address where the country doesn't use states", () => {
+		const address = {
+			first_name: 'Jonny',
+			last_name: 'Awesome',
+			company: 'WordPress',
+			address_1: '123 Address Street',
+			address_2: 'Address 2',
+			city: 'Vienna',
+			postcode: '1120',
+			country: 'AT',
+			state: 'CA', // This should be removed.
+			email: 'jonny.awesome@email.com',
+			phone: '',
+		};
+		const filteredAddress = emptyHiddenAddressFields( address );
+		expect( filteredAddress ).toHaveProperty( 'state', '' );
+	} );
+} );

wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/utils/test/errors.js

@@ -0,0 +1,42 @@
+/**
+ * Internal dependencies
+ */
+import { formatError } from '../errors';
+
+describe( 'formatError', () => {
+	test( 'should format general errors', async () => {
+		const error = await formatError( {
+			message: 'Lorem Ipsum',
+		} );
+		const expectedError = {
+			message: 'Lorem Ipsum',
+			type: 'general',
+		};
+
+		expect( error ).toEqual( expectedError );
+	} );
+
+	test( 'should format API errors', async () => {
+		const error = await formatError( {
+			json: () => Promise.resolve( { message: 'Lorem Ipsum' } ),
+		} );
+		const expectedError = {
+			message: 'Lorem Ipsum',
+			type: 'api',
+		};
+
+		expect( error ).toEqual( expectedError );
+	} );
+
+	test( 'should format JSON parse errors', async () => {
+		const error = await formatError( {
+			json: () => Promise.reject( { message: 'Lorem Ipsum' } ),
+		} );
+		const expectedError = {
+			message: 'Lorem Ipsum',
+			type: 'general',
+		};
+
+		expect( error ).toEqual( expectedError );
+	} );
+} );