(
+
+ { value }
+
+ ) }
+ value={ price }
+ />
+
+ );
+};
+
+export interface ProductPriceProps {
+ /**
+ * Where to align the wrapper
+ *
+ * Applies the `wc-block-components-product-price--align-${ align }` utility
+ * class to the wrapper.
+ */
+ align?: 'left' | 'center' | 'right' | undefined;
+ /**
+ * CSS class for the wrapper
+ */
+ className?: string | undefined;
+ /**
+ * Currency configuration object
+ */
+ currency?: Currency | Record< string, never >;
+ /**
+ * The string version of the element to use for the price interpolation
+ *
+ * **Note:** It should contain `
+ { createInterpolateElement( format, {
+ price: priceComponent,
+ } ) }
+
+ );
+};
+
+export default ProductPrice;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/product-price/stories/index.stories.tsx b/plugins/woocommerce-blocks/assets/js/base/components/product-price/stories/index.stories.tsx
new file mode 100644
index 00000000000..a47a74570be
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/product-price/stories/index.stories.tsx
@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import type { Story, Meta } from '@storybook/react';
+import { currencyControl } from '@woocommerce/storybook-controls';
+
+/**
+ * Internal dependencies
+ */
+import ProductPrice, { ProductPriceProps } from '..';
+
+const ALLOWED_ALIGN_VALUES = [ 'left', 'center', 'right' ];
+
+export default {
+ title: 'Base Components/ProductPrice',
+ component: ProductPrice,
+ argTypes: {
+ align: {
+ control: { type: 'radio' },
+ options: ALLOWED_ALIGN_VALUES,
+ },
+ currency: currencyControl,
+ },
+ args: {
+ align: 'left',
+ format: '
+ pre price
+
+ Previous price:
+
+
+ £1.00
+
+
+ Discounted price:
+
+
+ £0.50
+
+ Test format
+
+`;
+
+exports[`ProductPrice should use default price if no format is provided 1`] = `
+
+
+ Previous price:
+
+
+ £1.00
+
+
+ Discounted price:
+
+
+ £0.50
+
+
+`;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/product-price/test/index.js b/plugins/woocommerce-blocks/assets/js/base/components/product-price/test/index.js
new file mode 100644
index 00000000000..7a75da69e13
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/product-price/test/index.js
@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import TestRenderer from 'react-test-renderer';
+
+/**
+ * Internal dependencies
+ */
+import ProductPrice from '../index';
+
+describe( 'ProductPrice', () => {
+ const currency = {
+ code: 'GBP',
+ currency_code: 'GBP',
+ currency_decimal_separator: '.',
+ currency_minor_unit: 2,
+ currency_prefix: '£',
+ currency_suffix: '',
+ currency_symbol: '£',
+ currency_thousand_separator: ',',
+ decimalSeparator: '.',
+ minorUnit: 2,
+ prefix: '£',
+ price: '61400',
+ price_range: null,
+ raw_prices: {
+ precision: 6,
+ price: '614000000',
+ regular_price: '614000000',
+ sale_price: '614000000',
+ },
+ regular_price: '61400',
+ sale_price: '61400',
+ suffix: '',
+ symbol: '£',
+ thousandSeparator: ',',
+ };
+
+ test( 'should use default price if no format is provided', () => {
+ const component = TestRenderer.create(
+ %f ', rating )
+ ),
+ };
+
+ return (
+
+
+
+ { ratedProductsCount !== null ? (
+
+ ({ ratedProductsCount })
+
+ ) : null }
+
+ {
+ const newQuantity = quantity - step;
+ onChange( newQuantity );
+ speak(
+ sprintf(
+ /* translators: %s refers to the item's new quantity in the cart. */
+ __(
+ 'Quantity reduced to %s.',
+ 'woo-gutenberg-products-block'
+ ),
+ newQuantity
+ )
+ );
+ normalizeQuantity( newQuantity );
+ } }
+ >
+ －
+
+ {
+ const newQuantity = quantity + step;
+ onChange( newQuantity );
+ speak(
+ sprintf(
+ /* translators: %s refers to the item's new quantity in the cart. */
+ __(
+ 'Quantity increased to %s.',
+ 'woo-gutenberg-products-block'
+ ),
+ newQuantity
+ )
+ );
+ normalizeQuantity( newQuantity );
+ } }
+ >
+ ＋
+
+
+ );
+};
+
+export default QuantitySelector;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/stories/index.stories.tsx b/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/stories/index.stories.tsx
new file mode 100644
index 00000000000..321c8404ae9
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/stories/index.stories.tsx
@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { useArgs } from '@storybook/client-api';
+import type { Story, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import QuantitySelector, { QuantitySelectorProps } from '..';
+
+export default {
+ title: 'Base Components/QuantitySelector',
+ component: QuantitySelector,
+ args: {
+ itemName: 'widgets',
+ quantity: 1,
+ },
+} as Meta< QuantitySelectorProps >;
+
+const Template: Story< QuantitySelectorProps > = ( args ) => {
+ const [ {}, setArgs ] = useArgs();
+
+ const onChange = ( newVal: number ) => {
+ args.onChange?.( newVal );
+ setArgs( { quantity: newVal } );
+ };
+
+ return
+ { buttonText }
+
+ );
+ }
+
+ /**
+ * Handles the click event for the read more/less button.
+ */
+ onClick( e: MouseEvent< HTMLAnchorElement, MouseEvent > ): void {
+ e.preventDefault();
+
+ const { isExpanded } = this.state;
+
+ this.setState( {
+ isExpanded: ! isExpanded,
+ } );
+ }
+
+ render(): JSX.Element | null {
+ const { className } = this.props;
+ const { content, summary, clampEnabled, isExpanded } = this.state;
+
+ if ( ! content ) {
+ return null;
+ }
+
+ if ( clampEnabled === false ) {
+ return (
+
+ );
+ }
+
+ return (
+
+ { ( ! isExpanded || clampEnabled === null ) && (
+
+ ) }
+ { ( isExpanded || clampEnabled === null ) && (
+
+ { content }
+
+ ) }
+ { this.getButton() }
+
+ No! Alderaan is peaceful. We have no weapons. You can't
+ possibly…
+
+
+ As you wish. But with the blast shield down, I can't even see!
+ How am I supposed to fight? Look, I ain't in this for your
+ revolution, and I'm not in it for you, Princess. I expect to be
+ well paid. I'm in it for the money.
+
+
+ You mean it controls your actions?
+
+ { ' ' }
+ She must have hidden the plans in the escape pod.
+ { ' ' }
+
+ Send a detachment down to retrieve them, and see to it
+ personally, Commander.
+
+ There'll be no one to stop us this time!
+
+ Escape is not his plan. I must face him, alone.
+
+ Partially, but it also obeys your commands.
+
+ Leave that to me. Send a distress signal, and inform the Senate
+ that all on board were killed.
+
+
+ A tremor in the Force. The last time I felt it was in the
+ presence of my old master.
+
+
+
+
+);
+
+const Template: Story< ReadMoreProps > = ( args ) => Lorem ipsum dolor sit amet, consectetur. .
';
+
+const longContent =
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a condimentum diam. Donec finibus enim eros, et lobortis magna varius quis. Nulla lacinia tellus ac neque aliquet, in porttitor metus interdum. Maecenas vestibulum nisi et auctor vestibulum. Maecenas vehicula, lacus et pellentesque tempor, orci nulla mattis purus, id porttitor augue magna et metus. Aenean hendrerit aliquet massa ac convallis. Mauris vestibulum neque in condimentum porttitor. Donec viverra, orci a accumsan vehicula, dui massa lobortis lorem, et cursus est purus pulvinar elit. Vestibulum vitae tincidunt ex, ut vulputate nisi.
' +
+ 'Morbi tristique iaculis felis, sed porta urna tincidunt vitae. Etiam nisl sem, eleifend non varius quis, placerat a arcu. Donec consectetur nunc at orci fringilla pulvinar. Nam hendrerit tellus in est aliquet varius id in diam. Donec eu ullamcorper ante. Ut ultricies, felis vel sodales aliquet, nibh massa vestibulum ipsum, sed dignissim mi nunc eget lacus. Curabitur mattis placerat magna a aliquam. Nullam diam elit, cursus nec erat ullamcorper, tempor eleifend mauris. Nunc placerat nunc ut enim ornare tempus. Fusce porta molestie ante eget faucibus. Fusce eu lectus sit amet diam auctor lacinia et in diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eu lacus lobortis, faucibus est vel, pulvinar odio. Duis feugiat tortor quis dui euismod varius.
';
+
+describe( 'ReadMore Component', () => {
+ describe( 'Test the truncateHtml function', () => {
+ it( 'Truncate long HTML content to length of 10', () => {
+ const truncatedContent = truncateHtml( longContent, 10 );
+
+ expect( truncatedContent ).toEqual( 'Lorem ipsum...
' );
+ } );
+ it( 'Truncate long HTML content, but avoid cutting off HTML tags.', () => {
+ const truncatedContent = truncateHtml( longContent, 40 );
+
+ expect( truncatedContent ).toEqual(
+ 'Lorem ipsum dolor sit amet, consectetur...
'
+ );
+ } );
+ it( 'No need to truncate short HTML content.', () => {
+ const truncatedContent = truncateHtml( shortContent, 100 );
+
+ expect( truncatedContent ).toEqual(
+ 'Lorem ipsum dolor sit amet, consectetur. .
'
+ );
+ } );
+ } );
+} );
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/read-more/trim-html.js b/plugins/woocommerce-blocks/assets/js/base/components/read-more/trim-html.js
new file mode 100644
index 00000000000..3adb9f2bcde
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/read-more/trim-html.js
@@ -0,0 +1,157 @@
+// Copy-pasted from https://github.com/brankosekulic/trimHtml/blob/master/index.js
+// the published npm version of this code contains a bug that causes it throw exceptions.
+export function trimHtml( html, options ) {
+ options = options || {};
+
+ const limit = options.limit || 100,
+ preserveTags =
+ typeof options.preserveTags !== 'undefined'
+ ? options.preserveTags
+ : true,
+ wordBreak =
+ typeof options.wordBreak !== 'undefined'
+ ? options.wordBreak
+ : false,
+ suffix = options.suffix || '...',
+ moreLink = options.moreLink || '',
+ moreText = options.moreText || '»',
+ preserveWhiteSpace = options.preserveWhiteSpace || false;
+
+ const arr = html
+ .replace( //g, '>\n' )
+ .replace( /\n\n/g, '\n' )
+ .replace( /^\n/g, '' )
+ .replace( /\n$/g, '' )
+ .split( '\n' );
+
+ let sum = 0,
+ row,
+ cut,
+ add,
+ rowCut,
+ tagMatch,
+ tagName,
+ // eslint-disable-next-line prefer-const
+ tagStack = [],
+ more = false;
+
+ for ( let i = 0; i < arr.length; i++ ) {
+ row = arr[ i ];
+
+ // count multiple spaces as one character
+ if ( ! preserveWhiteSpace ) {
+ rowCut = row.replace( /[ ]+/g, ' ' );
+ } else {
+ rowCut = row;
+ }
+
+ if ( ! row.length ) {
+ continue;
+ }
+
+ const charArr = getCharArr( rowCut );
+
+ if ( row[ 0 ] !== '<' ) {
+ if ( sum >= limit ) {
+ row = '';
+ } else if ( sum + charArr.length >= limit ) {
+ cut = limit - sum;
+
+ if ( charArr[ cut - 1 ] === ' ' ) {
+ while ( cut ) {
+ cut -= 1;
+ if ( charArr[ cut - 1 ] !== ' ' ) {
+ break;
+ }
+ }
+ } else {
+ add = charArr.slice( cut ).indexOf( ' ' );
+
+ // break on halh of word
+ if ( ! wordBreak ) {
+ if ( add !== -1 ) {
+ cut += add;
+ } else {
+ cut = row.length;
+ }
+ }
+ }
+
+ row = charArr.slice( 0, cut ).join( '' ) + suffix;
+
+ if ( moreLink ) {
+ row +=
+ '' +
+ moreText +
+ ' ';
+ }
+
+ sum = limit;
+ more = true;
+ } else {
+ sum += charArr.length;
+ }
+ } else if ( ! preserveTags ) {
+ row = '';
+ } else if ( sum >= limit ) {
+ tagMatch = row.match( /[a-zA-Z]+/ );
+ tagName = tagMatch ? tagMatch[ 0 ] : '';
+
+ if ( tagName ) {
+ if ( row.substring( 0, 2 ) !== ' {
+ const trimmed = trimHtml( html, {
+ suffix: ellipsis,
+ limit: length,
+ } );
+
+ return trimmed.html;
+};
+
+/**
+ * Move string markers. Used by calculateLength.
+ *
+ * @param {Markers} markers Markers for clamped content.
+ * @param {number} currentHeight Current height of clamped content.
+ * @param {number} maxHeight Max height of the clamped content.
+ */
+const moveMarkers = (
+ markers: Markers,
+ currentHeight: number,
+ maxHeight: number
+): Markers => {
+ if ( currentHeight <= maxHeight ) {
+ markers.start = markers.middle + 1;
+ } else {
+ markers.end = markers.middle - 1;
+ }
+
+ return markers;
+};
+
+/**
+ * Calculate how long the content can be based on the maximum number of lines allowed, and client height.
+ *
+ * @param {string} originalContent Content to be clamped.
+ * @param {HTMLElement} targetElement Element which will contain the clamped content.
+ * @param {number} maxHeight Max height of the clamped content.
+ */
+const calculateLength = (
+ originalContent: string,
+ targetElement: HTMLElement,
+ maxHeight: number
+): number => {
+ let markers: Markers = {
+ start: 0,
+ middle: 0,
+ end: originalContent.length,
+ };
+
+ while ( markers.start <= markers.end ) {
+ markers.middle = Math.floor( ( markers.start + markers.end ) / 2 );
+
+ // We set the innerHTML directly in the DOM here so we can reliably check the clientHeight later in moveMarkers.
+ targetElement.innerHTML = truncateHtml(
+ originalContent,
+ markers.middle
+ );
+
+ markers = moveMarkers( markers, targetElement.clientHeight, maxHeight );
+ }
+
+ return markers.middle;
+};
+
+/**
+ * Clamp lines calculates the height of a line of text and then limits it to the
+ * value of the lines prop. Content is updated once limited.
+ *
+ * @param {string} originalContent Content to be clamped.
+ * @param {HTMLElement} targetElement Element which will contain the clamped content.
+ * @param {number} maxHeight Max height of the clamped content.
+ * @param {string} ellipsis Character to append to clamped content.
+ * @return {string} clamped content
+ */
+export const clampLines = (
+ originalContent: string,
+ targetElement: HTMLElement,
+ maxHeight: number,
+ ellipsis: string
+): string => {
+ const length = calculateLength( originalContent, targetElement, maxHeight );
+
+ return truncateHtml( originalContent, length - ellipsis.length, ellipsis );
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/reviews/index.js b/plugins/woocommerce-blocks/assets/js/base/components/reviews/index.js
new file mode 100644
index 00000000000..0aaa93a805e
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/reviews/index.js
@@ -0,0 +1,3 @@
+export { default as ReviewList } from './review-list/';
+export { default as ReviewListItem } from './review-list-item/';
+export { default as ReviewSortSelect } from './review-sort-select/';
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list-item/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list-item/index.tsx
new file mode 100644
index 00000000000..022dd5df277
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list-item/index.tsx
@@ -0,0 +1,226 @@
+/**
+ * External dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import classNames from 'classnames';
+import ReadMore from '@woocommerce/base-components/read-more';
+import { ReviewBlockAttributes } from '@woocommerce/blocks/reviews/attributes';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import type { Review } from '../types';
+
+function getReviewImage(
+ review: Review,
+ imageType: string,
+ isLoading: boolean
+): JSX.Element {
+ if ( isLoading || ! review ) {
+ return (
+
+ );
+ }
+
+ return (
+
+ { imageType === 'product' ? (
+
+ ) : (
+ // The alt text is left empty on purpose, as it's considered a decorative image.
+ // More can be found here: https://www.w3.org/WAI/tutorials/images/decorative/.
+ // Github discussion for a context: https://github.com/woocommerce/woocommerce-blocks/pull/7651#discussion_r1019560494.
+
+ ) }
+ { review.verified && (
+
+ { __( 'Verified buyer', 'woo-gutenberg-products-block' ) }
+
+ ) }
+
+
+
+ );
+}
+
+function getReviewProductName( review: Review ): JSX.Element {
+ return (
+
+ );
+}
+
+function getReviewerName( review: Review ): JSX.Element {
+ const { reviewer = '' } = review;
+ return (
+
+ { reviewer }
+
+ );
+}
+
+function getReviewDate( review: Review ): JSX.Element {
+ const {
+ date_created: dateCreated,
+ formatted_date_created: formattedDateCreated,
+ } = review;
+ return (
+
+ { formattedDateCreated }
+
+ );
+}
+
+function getReviewRating( review: Review ): JSX.Element {
+ const { rating } = review;
+ const starStyle = {
+ width: ( rating / 5 ) * 100 + '%' /* stylelint-disable-line */,
+ };
+ const ratingText = sprintf(
+ /* translators: %f is referring to the average rating value */
+ __( 'Rated %f out of 5', 'woo-gutenberg-products-block' ),
+ rating
+ );
+ const ratingHTML = {
+ __html: sprintf(
+ /* translators: %s is referring to the average rating value */
+ __( 'Rated %s out of 5', 'woo-gutenberg-products-block' ),
+ sprintf( '%f ', rating )
+ ),
+ };
+ return (
+
+ );
+}
+
+interface ReviewListItemProps {
+ attributes: ReviewBlockAttributes;
+ review?: Review;
+}
+
+const ReviewListItem = ( { attributes, review = {} }: ReviewListItemProps ) => {
+ const {
+ imageType,
+ showReviewDate,
+ showReviewerName,
+ showReviewImage,
+ showReviewRating: showReviewRatingAttr,
+ showReviewContent,
+ showProductName,
+ } = attributes;
+ const { rating } = review;
+ const isLoading = ! ( Object.keys( review ).length > 0 );
+ const showReviewRating = Number.isFinite( rating ) && showReviewRatingAttr;
+
+ return (
+
+ { ( showProductName ||
+ showReviewDate ||
+ showReviewerName ||
+ showReviewImage ||
+ showReviewRating ) && (
+
+ { showReviewImage &&
+ getReviewImage( review, imageType, isLoading ) }
+ { ( showProductName ||
+ showReviewerName ||
+ showReviewRating ||
+ showReviewDate ) && (
+
+ { showReviewRating && getReviewRating( review ) }
+ { showProductName &&
+ getReviewProductName( review ) }
+ { showReviewerName && getReviewerName( review ) }
+ { showReviewDate && getReviewDate( review ) }
+
+ ) }
+
+ );
+};
+
+/**
+ * BE AWARE. ReviewListItem expects product data that is equivalent to what is
+ * made available for output in a public view. Thus content that may contain
+ * html data is not sanitized further.
+ *
+ * Currently the following data is trusted (assumed to already be sanitized):
+ * - `review.review` (review content)
+ * - `review.product_name` (the product title)
+ */
+export default ReviewListItem;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list-item/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list-item/style.scss
new file mode 100644
index 00000000000..4692a198bf7
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list-item/style.scss
@@ -0,0 +1,212 @@
+.is-loading {
+ .wc-block-components-review-list-item__text {
+ @include placeholder();
+ @include force-content();
+ display: block;
+ width: 60%;
+ }
+
+ .wc-block-components-review-list-item__info {
+ .wc-block-components-review-list-item__image {
+ @include placeholder();
+ @include force-content();
+ }
+
+ .wc-block-components-review-list-item__meta {
+ .wc-block-components-review-list-item__author {
+ @include placeholder();
+ @include font-size(regular);
+ @include force-content();
+ width: 80px;
+ }
+
+ .wc-block-components-review-list-item__product {
+ display: none;
+ }
+
+ .wc-block-components-review-list-item__rating {
+ .wc-block-components-review-list-item__rating__stars > span {
+ display: none;
+ }
+ }
+ }
+
+ .wc-block-components-review-list-item__published-date {
+ @include placeholder();
+ @include force-content();
+ height: 1em;
+ width: 120px;
+ }
+ }
+}
+
+.editor-styles-wrapper .wc-block-components-review-list-item__item,
+.wc-block-components-review-list-item__item {
+ margin: 0 0 $gap-large * 2;
+ list-style: none;
+}
+
+.wc-block-components-review-list-item__info {
+ display: grid;
+ grid-template-columns: 1fr;
+ margin-bottom: $gap-large;
+}
+
+.wc-block-components-review-list-item__meta {
+ grid-column: 1;
+ grid-row: 1;
+}
+
+.wc-block-components-review-list-item__item--has-image {
+ .wc-block-components-review-list-item__info {
+ grid-template-columns: calc(3em + #{$gap}) 1fr;
+ }
+ .wc-block-components-review-list-item__meta {
+ grid-column: 2;
+ }
+}
+
+.wc-block-components-review-list-item__image {
+ align-items: center;
+ display: flex;
+ height: 3em;
+ grid-column: 1;
+ grid-row: 1 / 3;
+ justify-content: center;
+ position: relative;
+ width: 3em;
+
+ > img {
+ display: block;
+ max-height: 100%;
+ object-fit: contain;
+ }
+}
+
+.wc-block-components-review-list-item__verified {
+ width: 21px;
+ height: 21px;
+ text-indent: 21px;
+ margin: 0;
+ line-height: 21px;
+ overflow: hidden;
+ position: absolute;
+ right: -7px;
+ bottom: -7px;
+
+ &::before {
+ width: 21px;
+ height: 21px;
+ background: transparent url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="none"%3E%3Ccircle cx="10.5" cy="10.5" r="10.5" fill="%23fff"/%3E%3Cpath fill="%23008A21" fill-rule="evenodd" d="M2.1667 10.5003c0-4.6 3.7333-8.3333 8.3333-8.3333s8.3334 3.7333 8.3334 8.3333S15.1 18.8337 10.5 18.8337s-8.3333-3.7334-8.3333-8.3334zm2.5 0l4.1666 4.1667 7.5001-7.5-1.175-1.1833-6.325 6.325-2.9917-2.9834-1.175 1.175z" clip-rule="evenodd"/%3E%3Cmask id="a" width="17" height="17" x="2" y="2" maskUnits="userSpaceOnUse"%3E%3Cpath fill="%23fff" fill-rule="evenodd" d="M2.1667 10.5003c0-4.6 3.7333-8.3333 8.3333-8.3333s8.3334 3.7333 8.3334 8.3333S15.1 18.8337 10.5 18.8337s-8.3333-3.7334-8.3333-8.3334zm2.5 0l4.1666 4.1667 7.5001-7.5-1.175-1.1833-6.325 6.325-2.9917-2.9834-1.175 1.175z" clip-rule="evenodd"/%3E%3C/mask%3E%3Cg mask="url(%23a)"%3E%3Cpath fill="%23008A21" d="M.5.5h20v20H.5z"/%3E%3C/g%3E%3C/svg%3E') center center no-repeat; /* stylelint-disable-line */
+ display: block;
+ content: "";
+ }
+}
+
+.wc-block-components-review-list-item__meta {
+ display: flex;
+ align-items: center;
+ flex-flow: row wrap;
+
+ &::after {
+ // Force wrap after star rating.
+ order: 3;
+ content: "";
+ flex-basis: 100%;
+ }
+}
+
+.wc-block-components-review-list-item__product {
+ display: block;
+ font-weight: bold;
+ order: 1;
+ margin-right: $gap * 0.5;
+}
+
+.wc-block-components-review-list-item__author {
+ display: block;
+ font-weight: bold;
+ order: 1;
+ margin-right: $gap * 0.5;
+}
+
+.wc-block-components-review-list-item__product + .wc-block-components-review-list-item__author {
+ font-weight: normal;
+ order: 4;
+}
+
+.wc-block-components-review-list-item__published-date {
+ order: 5;
+}
+
+.wc-block-components-review-list-item__product + .wc-block-components-review-list-item__author + .wc-block-components-review-list-item__published-date {
+ padding-left: $gap * 0.5;
+ position: relative;
+
+ &::before {
+ content: "";
+ display: inline-block;
+ margin-left: -$gap * 0.5;
+ border-right: 1px solid currentColor;
+ opacity: 0.5;
+ height: 1em;
+ vertical-align: middle;
+ position: absolute;
+ top: calc(50% + 0.1em);
+ transform: translateY(-50%);
+ }
+}
+
+.wc-block-components-review-list-item__author:first-child + .wc-block-components-review-list-item__published-date,
+.wc-block-components-review-list-item__rating + .wc-block-components-review-list-item__author + .wc-block-components-review-list-item__published-date {
+ &::before {
+ display: none;
+ }
+}
+
+.wc-block-components-review-list-item__rating {
+ order: 2;
+
+ > .wc-block-components-review-list-item__rating__stars {
+ @include font-size(regular);
+ display: block;
+ top: 0;
+ overflow: hidden;
+ position: relative;
+ height: 1em;
+ line-height: 1;
+ width: 5.3em;
+ font-family: star; /* stylelint-disable-line */
+ font-weight: 400;
+ }
+
+ > .wc-block-components-review-list-item__rating__stars::before {
+ content: "\53\53\53\53\53";
+ opacity: 0.25;
+ float: left;
+ top: 0;
+ left: 0;
+ position: absolute;
+ }
+
+ > .wc-block-components-review-list-item__rating__stars span {
+ overflow: hidden;
+ float: left;
+ top: 0;
+ left: 0;
+ position: absolute;
+ padding-top: 1.5em;
+ }
+
+ > .wc-block-components-review-list-item__rating__stars span::before {
+ content: "\53\53\53\53\53";
+ top: 0;
+ position: absolute;
+ left: 0;
+ color: #e6a237;
+ }
+}
+
+.wc-block-components-review-list-item__text p {
+ font-size: inherit;
+}
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list/index.tsx
new file mode 100644
index 00000000000..49c5fe5652d
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list/index.tsx
@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import { getSetting } from '@woocommerce/settings';
+import { ReviewBlockAttributes } from '@woocommerce/blocks/reviews/attributes';
+
+/**
+ * Internal dependencies
+ */
+import ReviewListItem from '../review-list-item';
+import type { Review } from '../types';
+import './style.scss';
+interface ReviewListProps {
+ attributes: ReviewBlockAttributes;
+ reviews: Review[];
+}
+
+const ReviewList = ( {
+ attributes,
+ reviews,
+}: ReviewListProps ): JSX.Element => {
+ const showAvatars = getSetting< boolean >( 'showAvatars', true );
+ const reviewRatingsEnabled = getSetting< boolean >(
+ 'reviewRatingsEnabled',
+ true
+ );
+ const showReviewImage =
+ ( showAvatars || attributes.imageType === 'product' ) &&
+ attributes.showReviewImage;
+ const showReviewRating =
+ reviewRatingsEnabled && attributes.showReviewRating;
+ const attrs = {
+ ...attributes,
+ showReviewImage,
+ showReviewRating,
+ };
+
+ return (
+
+ { reviews.length === 0 ? (
+
+ );
+};
+
+export default ReviewList;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list/style.scss
new file mode 100644
index 00000000000..0dba384868a
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list/style.scss
@@ -0,0 +1,4 @@
+// Duplicate class for specificity in the editor.
+.wc-block-components-review-list.wc-block-components-review-list {
+ margin: 0;
+}
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-sort-select/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-sort-select/index.tsx
new file mode 100644
index 00000000000..e8cb9928644
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-sort-select/index.tsx
@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { SortSelect } from '@woocommerce/blocks-components';
+import type { ChangeEventHandler } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+interface ReviewSortSelectProps {
+ onChange: ChangeEventHandler;
+ readOnly?: boolean;
+ value: 'most-recent' | 'highest-rating' | 'lowest-rating';
+}
+
+const ReviewSortSelect = ( {
+ onChange,
+ readOnly,
+ value,
+}: ReviewSortSelectProps ): JSX.Element => {
+ return (
+
+ { children }
+
+ );
+ }
+);
+
+export default Main;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/sidebar-layout.tsx b/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/sidebar-layout.tsx
new file mode 100644
index 00000000000..47ed2d6026f
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/sidebar-layout.tsx
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { ContainerWidthContextProvider } from '@woocommerce/base-context';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+interface SidebarLayoutProps {
+ children: JSX.Element | JSX.Element[];
+ className: string;
+}
+
+const SidebarLayout = ( {
+ children,
+ className,
+}: SidebarLayoutProps ): JSX.Element => {
+ return (
+
+ { children }
+
+ );
+};
+
+export default SidebarLayout;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/sidebar.tsx b/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/sidebar.tsx
new file mode 100644
index 00000000000..891cbe698cd
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/sidebar.tsx
@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { ForwardRefProps } from './types';
+
+const Sidebar = forwardRef< HTMLInputElement, ForwardRefProps >(
+ ( { children, className = '' }, ref ): JSX.Element => {
+ return (
+
+ { children }
+
+ );
+ }
+);
+
+export default Sidebar;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss
new file mode 100644
index 00000000000..bda62cc2bd8
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss
@@ -0,0 +1,78 @@
+.wc-block-components-sidebar-layout {
+ display: flex;
+ flex-wrap: wrap;
+ margin: 0 auto $gap;
+ position: relative;
+
+ .wc-block-must-login-prompt {
+ display: block;
+ }
+
+ .wc-block-components-main {
+ box-sizing: border-box;
+ margin: 0;
+ padding-right: math.percentage(math.div($gap-largest, 1060px)); // ~1060px is the default width of the content area in Storefront.
+ width: 65%;
+ }
+}
+
+.wc-block-components-sidebar {
+ box-sizing: border-box;
+ margin: 0;
+ padding-left: math.percentage(math.div($gap-large, 1060px));
+ width: 35%;
+
+ .wc-block-components-panel > h2 {
+ @include font-size(regular);
+ @include reset-box();
+ }
+}
+
+.is-medium,
+.is-small,
+.is-mobile {
+ &.wc-block-components-sidebar-layout {
+ flex-direction: column;
+ margin: 0 auto $gap;
+
+ .wc-block-components-main {
+ padding: 0;
+ width: 100%;
+ }
+ .wc-block-components-sidebar {
+ padding: 0;
+ width: 100%;
+ }
+ }
+}
+
+.is-large {
+ .wc-block-components-sidebar {
+ .wc-block-components-totals-item,
+ .wc-block-components-panel,
+ .wc-block-components-totals-coupon {
+ padding-left: $gap;
+ padding-right: $gap;
+ }
+ .wc-block-components-panel {
+ .wc-block-components-totals-item {
+ padding: 0;
+ }
+ }
+ }
+}
+
+.wc-block-components-sidebar .wc-block-components-panel > h2 {
+ @include reset-typography();
+ .wc-block-components-panel__button {
+ font-weight: 400;
+ }
+}
+
+// For Twenty Twenty we need to increase specificity a bit more.
+.theme-twentytwenty {
+ .wc-block-components-sidebar .wc-block-components-panel > h2 {
+ @include font-size(large);
+ @include reset-box();
+ }
+}
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/types.ts b/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/types.ts
new file mode 100644
index 00000000000..99cb8bbf75c
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/types.ts
@@ -0,0 +1,4 @@
+export type ForwardRefProps = {
+ children: JSX.Element | JSX.Element[];
+ className?: string;
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/skeleton/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/skeleton/index.tsx
new file mode 100644
index 00000000000..58191761770
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/skeleton/index.tsx
@@ -0,0 +1,37 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+export interface SkeletonProps {
+ numberOfLines?: number;
+ tag?: keyof JSX.IntrinsicElements;
+ maxWidth?: string;
+}
+
+export const Skeleton = ( {
+ numberOfLines = 1,
+ tag: Tag = 'div',
+ maxWidth = '100%',
+}: SkeletonProps ): JSX.Element => {
+ const skeletonLines = Array.from(
+ { length: numberOfLines },
+ ( _: undefined, index ) => (
+
+ { skeletonLines }
+
+ );
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/skeleton/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/skeleton/style.scss
new file mode 100644
index 00000000000..a19cfec013e
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/skeleton/style.scss
@@ -0,0 +1,19 @@
+.wc-block-components-skeleton {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ width: 100%;
+
+}
+
+.wc-block-components-skeleton-text-line {
+ height: 0.85em;
+ width: 100%;
+ position: relative;
+ background: $universal-border-light;
+ border-radius: $universal-border-radius;
+
+ &:last-child {
+ width: 80%;
+ }
+}
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/constants.ts b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/constants.ts
new file mode 100644
index 00000000000..bdc1149a5d4
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/constants.ts
@@ -0,0 +1 @@
+export const SNACKBAR_TIMEOUT = 10000;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/docs/docs.mdx b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/docs/docs.mdx
new file mode 100644
index 00000000000..b52bb45da9d
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/docs/docs.mdx
@@ -0,0 +1,90 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+
+import * as SnackbarListStories from '../stories/index.stories.tsx';
+import * as SnackbarStories from '../stories/snackbar.stories.tsx';
+
+;
+```
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/index.tsx
new file mode 100644
index 00000000000..af7e92e4f5f
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/index.tsx
@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import type { NoticeType } from '@woocommerce/types';
+import { useReducedMotion } from '@wordpress/compose';
+import { useRef } from '@wordpress/element';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import Snackbar from './snackbar';
+
+export type SnackbarListProps = {
+ // Class name to be added to the container.
+ className?: string | undefined;
+ // List of notices to be rendered.
+ notices: NoticeType[];
+ // Callback to be called when a notice is dismissed.
+ onRemove: ( id: string ) => void;
+};
+
+/**
+ * A temporary informational UI displayed at the bottom of store pages.
+ */
+const SnackbarList = ( {
+ notices,
+ className,
+ onRemove = () => void 0,
+}: SnackbarListProps ): JSX.Element => {
+ const listRef = useRef< HTMLDivElement | null >( null );
+ const isReducedMotion = useReducedMotion();
+
+ const removeNotice = ( notice: NoticeType ) => () =>
+ onRemove( notice?.id || '' );
+
+ return (
+
+ { isReducedMotion ? (
+ notices.map( ( notice ) => {
+ const { content, ...restNotice } = notice;
+ return (
+
+ { notice.content }
+
+ );
+ } )
+ ) : (
+
+ { notices.map( ( notice ) => {
+ const { content, ...restNotice } = notice;
+ return (
+
+
+ { content }
+
+
+ );
+ } ) }
+
+ ) }
+
+ );
+};
+
+export default SnackbarList;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/snackbar.tsx b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/snackbar.tsx
new file mode 100644
index 00000000000..a4758e1ea2e
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/snackbar.tsx
@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import NoticeBanner, { NoticeBannerProps } from '../notice-banner';
+import { SNACKBAR_TIMEOUT } from './constants';
+
+export interface SnackbarProps extends NoticeBannerProps {
+ // A ref to the list that contains the snackbar.
+ listRef?: React.MutableRefObject< HTMLDivElement | null >;
+}
+
+export const Snackbar = ( {
+ onRemove = () => void 0,
+ children,
+ listRef,
+ className,
+ ...notice
+}: SnackbarProps ) => {
+ // Only set up the timeout dismiss if we're not explicitly dismissing.
+ useEffect( () => {
+ const timeoutHandle = setTimeout( () => {
+ onRemove();
+ }, SNACKBAR_TIMEOUT );
+
+ return () => clearTimeout( timeoutHandle );
+ }, [ onRemove ] );
+
+ return (
+ {
+ // Prevent focus loss by moving it to the list element.
+ if ( listRef && listRef.current ) {
+ listRef.current.focus();
+ }
+ onRemove();
+ } }
+ >
+ { children }
+
+ );
+};
+
+export default Snackbar;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/stories/index.stories.tsx b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/stories/index.stories.tsx
new file mode 100644
index 00000000000..73c4874efaa
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/snackbar-list/stories/index.stories.tsx
@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import type { StoryFn, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import SnackbarList, { SnackbarListProps } from '../';
+
+export default {
+ title: 'Base Components/SnackbarList',
+ args: {
+ notices: [
+ {
+ id: '1',
+ content: 'This is a snackbar notice.',
+ status: 'success',
+ isDismissible: true,
+ },
+ ],
+ className: undefined,
+ onRemove: () => void 0,
+ },
+ argTypes: {
+ className: {
+ description: 'Additional class name to give to the notice.',
+ control: 'text',
+ },
+ notices: {
+ description:
+ 'A list of notices to display as snackbars. Each notice must have an `id` and `content` prop.',
+ disable: true,
+ },
+ onRemove: {
+ description:
+ 'Function called when dismissing the notice. When the close icon is clicked or the Escape key is pressed, this function will be called. This is also called when the notice times out after 10000ms.',
+ disable: true,
+ },
+ },
+ component: SnackbarList,
+} as Meta< SnackbarListProps >;
+
+const Template: StoryFn< SnackbarListProps > = ( args ) => {
+ return
+ { summaryText }
+
+ );
+};
+
+export default Summary;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/summary/test/index.js b/plugins/woocommerce-blocks/assets/js/base/components/summary/test/index.js
new file mode 100644
index 00000000000..71c9f9e505a
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/summary/test/index.js
@@ -0,0 +1,109 @@
+/**
+ * Internal dependencies
+ */
+import { generateSummary } from '../utils';
+
+describe( 'Summary Component', () => {
+ describe( 'Test the generateSummary utility', () => {
+ const testContent =
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
';
+
+ it( 'Default', async () => {
+ const result = generateSummary( testContent );
+
+ expect( result.trim() ).toEqual(
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore…
'
+ );
+ } );
+ it( 'No max words - return full description', async () => {
+ const result = generateSummary( testContent, 100000 );
+
+ expect( result.trim() ).toEqual(
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
'
+ );
+ } );
+ it( 'Limit to 3 words', async () => {
+ const result = generateSummary( testContent, 3 );
+
+ expect( result.trim() ).toEqual(
+ 'Lorem ipsum dolor…
'
+ );
+ } );
+ it( 'Limit to 1 word', async () => {
+ const result = generateSummary( testContent, 1 );
+
+ expect( result.trim() ).toEqual( 'Lorem…
' );
+ } );
+ it( 'Limit to 15 characters, including spaces.', async () => {
+ const result = generateSummary(
+ testContent,
+ 15,
+ 'characters_including_spaces'
+ );
+
+ expect( result.trim() ).toEqual( 'Lorem ipsum dol…
' );
+ } );
+ it( 'Limit to 15 characters, excluding spaces.', async () => {
+ const result = generateSummary(
+ testContent,
+ 15,
+ 'characters_excluding_spaces'
+ );
+
+ expect( result.trim() ).toEqual(
+ 'Lorem ipsum dolor…
'
+ );
+ } );
+ } );
+ describe( 'Test the generateSummary utility with HTML tags in strings', () => {
+ const testContent =
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
';
+
+ it( 'Limit string to 10 characters', async () => {
+ const result = generateSummary(
+ testContent,
+ 10,
+ 'characters_excluding_spaces'
+ );
+
+ expect( result.trim() ).toEqual( 'Lorem ipsum…
' );
+ } );
+ it( 'Limit string to 5 words', async () => {
+ const result = generateSummary( testContent, 5, 'words' );
+
+ expect( result.trim() ).toEqual(
+ 'Lorem ipsum dolor sit amet…
'
+ );
+ } );
+ it( 'First paragraph only - tags are not stripped.', async () => {
+ const result = generateSummary( testContent, 9999, 'words' );
+
+ expect( result.trim() ).toEqual(
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
'
+ );
+ } );
+ } );
+ describe( 'Test the generateSummary utility with special chars', () => {
+ const testContent =
+ '我不知道这是否行得通。
我是用中文写的说明，因此我们可以测试如何修剪产品摘要中的单词。
';
+
+ it( 'Default', async () => {
+ const result = generateSummary(
+ testContent,
+ 15,
+ 'characters_excluding_spaces'
+ );
+
+ expect( result.trim() ).toEqual( '我不知道这是否行得通。
' );
+ } );
+ it( 'Limit to 3 words', async () => {
+ const result = generateSummary(
+ testContent,
+ 3,
+ 'characters_excluding_spaces'
+ );
+
+ expect( result.trim() ).toEqual( '我不知…
' );
+ } );
+ } );
+} );
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/summary/utils.ts b/plugins/woocommerce-blocks/assets/js/base/components/summary/utils.ts
new file mode 100644
index 00000000000..16019e16097
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/summary/utils.ts
@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import { autop } from '@wordpress/autop';
+import { trimCharacters, trimWords } from '@woocommerce/utils';
+import { count, CountType } from '@wordpress/wordcount';
+
+/**
+ * Get first paragraph from some HTML text, or return whole string.
+ *
+ * @param {string} source Source text.
+ * @return {string} First paragraph found in string.
+ */
+const getFirstParagraph = ( source: string ) => {
+ const pIndex = source.indexOf( '' );
+
+ if ( pIndex === -1 ) {
+ return source;
+ }
+
+ return source.substr( 0, pIndex + 4 );
+};
+
+/**
+ * Generates the summary text from a string of text.
+ *
+ * @param {string} source Source text.
+ * @param {number} maxLength Limit number of countType returned if text has multiple paragraphs.
+ * @param {string} countType What is being counted. One of words, characters_excluding_spaces, or characters_including_spaces.
+ * @return {string} Generated summary.
+ */
+export const generateSummary = (
+ source: string,
+ maxLength = 15,
+ countType: CountType = 'words'
+) => {
+ const sourceWithParagraphs = autop( source );
+ const sourceWordCount = count( sourceWithParagraphs, countType );
+
+ if ( sourceWordCount <= maxLength ) {
+ return sourceWithParagraphs;
+ }
+
+ const firstParagraph = getFirstParagraph( sourceWithParagraphs );
+ const firstParagraphWordCount = count( firstParagraph, countType );
+
+ if ( firstParagraphWordCount <= maxLength ) {
+ return firstParagraph;
+ }
+
+ if ( countType === 'words' ) {
+ return trimWords( firstParagraph, maxLength );
+ }
+
+ return trimCharacters(
+ firstParagraph,
+ maxLength,
+ countType === 'characters_including_spaces'
+ );
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/tabs/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/tabs/index.tsx
new file mode 100644
index 00000000000..e70e6e3e8a0
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/tabs/index.tsx
@@ -0,0 +1,123 @@
+/**
+ * External dependencies
+ */
+import { withInstanceId } from '@wordpress/compose';
+import classnames from 'classnames';
+import { __ } from '@wordpress/i18n';
+import { useTabState, Tab, TabList, TabPanel } from 'reakit/Tab';
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+export interface TabsProps {
+ /**
+ * Component wrapper classname
+ */
+ className?: string;
+ /**
+ * Event handler triggered when a tab is selected
+ */
+ onSelect?: ( tabName: string ) => void;
+ /**
+ * Array of tab objects
+ */
+ tabs: Array< {
+ name: string;
+ title: string;
+ content: JSX.Element;
+ ariaLabel?: string;
+ } >;
+ /**
+ * Classname to be applied to the active tab
+ */
+ activeClass?: string;
+ /**
+ * Name of the tab to be selected by default
+ */
+ initialTabName?: string | undefined;
+ /**
+ * Aria label for the tablist
+ */
+ ariaLabel?: string;
+ /**
+ * Instance ID for the component
+ */
+ instanceId: number;
+ /**
+ * ID for the component
+ */
+ id?: string;
+}
+
+/**
+ * Exporting the component for Storybook. Use the default export instead.
+ */
+export const __TabsWithoutInstanceId = ( {
+ className,
+ onSelect = () => null,
+ tabs,
+ activeClass = 'is-active',
+ initialTabName,
+ ariaLabel = __( 'Tabbed Content', 'woo-gutenberg-products-block' ),
+ instanceId,
+ id,
+}: TabsProps ): JSX.Element | null => {
+ const initialTab = initialTabName
+ ? { selectedId: `${ instanceId }-${ initialTabName }` }
+ : undefined;
+ const tabState = useTabState( initialTab );
+ if ( tabs.length === 0 ) {
+ return null;
+ }
+ return (
+
+
+ { tabs.map( ( { name, title, ariaLabel: tabAriaLabel } ) => (
+ onSelect( name ) }
+ type="button"
+ key={ name }
+ aria-label={ tabAriaLabel }
+ >
+
+ { title }
+
+
+ ) ) }
+
+
+ { tabs.map( ( { name, content } ) => (
+
+ { tabState.selectedId === `${ instanceId }-${ name }` &&
+ content }
+
+ ) ) }
+
+ );
+};
+
+export default withInstanceId( __TabsWithoutInstanceId );
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/tabs/stories/index.stories.tsx b/plugins/woocommerce-blocks/assets/js/base/components/tabs/stories/index.stories.tsx
new file mode 100644
index 00000000000..1be8237ade7
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/tabs/stories/index.stories.tsx
@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import type { Story, Meta } from '@storybook/react';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { __TabsWithoutInstanceId as Tabs, TabsProps } from '..';
+
+export default {
+ title: 'Base Components/Tabs',
+ component: Tabs,
+ args: {
+ tabs: [
+ {
+ name: 'firstTab',
+ title: 'First Tab',
+ content: Content of the first tab
,
+ },
+ {
+ name: 'secondTab',
+ title: 'Second Tab',
+ content: Content of the second tab
,
+ },
+ ],
+ initialTabName: 'firstTab',
+ },
+ argTypes: {
+ initialTabName: {
+ control: {
+ type: 'select',
+ options: [ 'firstTab', 'secondTab' ],
+ },
+ },
+ },
+} as Meta< TabsProps >;
+
+const Template: Story< TabsProps > = ( args ) => {
+ const [ initialTab, setInitialTab ] = useState( args.initialTabName );
+
+ return (
+ {
+ setInitialTab( newTabName );
+ } }
+ { ...args }
+ />
+ );
+};
+
+export const Default = Template.bind( {} );
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/tabs/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/tabs/style.scss
new file mode 100644
index 00000000000..19a1055940b
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/components/tabs/style.scss
@@ -0,0 +1,60 @@
+.wc-block-components-tabs {
+ .wc-block-components-tabs__list {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ width: 100%;
+ > .wc-block-components-tabs__item {
+ border: none;
+ flex: auto;
+ background: transparent;
+ padding: $gap-small $gap;
+ color: inherit;
+ outline-offset: -1px;
+ text-align: center;
+ transition: box-shadow 0.1s linear;
+ box-shadow: inset 0 -1px currentColor;
+ border-radius: 0;
+ &.is-active {
+ box-shadow: inset 0 -3px currentColor;
+ font-weight: 600;
+ position: relative;
+ }
+ &:focus {
+ outline-offset: -1px;
+ outline: 1px dotted currentColor;
+ }
+ &:hover,
+ &:active {
+ background: transparent;
+ }
+ .wc-block-components-tabs__item-content {
+ @include font-size(regular);
+ line-height: 1;
+ width: fit-content;
+ display: inline-block;
+ font-weight: bold;
+
+ > img,
+ > svg {
+ height: 1.2em;
+ vertical-align: middle;
+ margin: 0.2em 0 -0.2em;
+ }
+
+ .wc-block-components-payment-method-icons {
+ margin: 0.2em 0 -0.2em;
+
+ .wc-block-components-payment-method-icon {
+ height: 1.2em;
+ vertical-align: middle;
+ }
+ }
+ }
+ }
+ }
+ .wc-block-components-tabs__content {
+ padding: $gap 0;
+ text-transform: none;
+ }
+}
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/event-emit/emitter-callback.ts b/plugins/woocommerce-blocks/assets/js/base/context/event-emit/emitter-callback.ts
new file mode 100644
index 00000000000..92445a2317c
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/event-emit/emitter-callback.ts
@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import { actions } from './reducer';
+import type { ActionType, ActionCallbackType } from './types';
+
+export const emitterCallback =
+ ( type: string, observerDispatch: React.Dispatch< ActionType > ) =>
+ ( callback: ActionCallbackType, priority = 10 ): ( () => void ) => {
+ const action = actions.addEventCallback( type, callback, priority );
+ observerDispatch( action );
+ return () => {
+ observerDispatch( actions.removeEventCallback( type, action.id ) );
+ };
+ };
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/event-emit/emitters.ts b/plugins/woocommerce-blocks/assets/js/base/context/event-emit/emitters.ts
new file mode 100644
index 00000000000..c4ce28ceb9e
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/event-emit/emitters.ts
@@ -0,0 +1,101 @@
+/**
+ * Internal dependencies
+ */
+import {
+ getObserversByPriority,
+ isErrorResponse,
+ isFailResponse,
+ ObserverResponse,
+ responseTypes,
+} from './utils';
+import type { EventObserversType } from './types';
+import { isObserverResponse } from '../../../types/type-guards/observers';
+
+/**
+ * Emits events on registered observers for the provided type and passes along
+ * the provided data.
+ *
+ * This event emitter will silently catch promise errors, but doesn't care
+ * otherwise if any errors are caused by observers. So events that do care
+ * should use `emitEventWithAbort` instead.
+ *
+ * @param {Object} observers The registered observers to omit to.
+ * @param {string} eventType The event type being emitted.
+ * @param {*} data Data passed along to the observer when it is invoked.
+ *
+ * @return {Promise} A promise that resolves to true after all observers have executed.
+ */
+export const emitEvent = async (
+ observers: EventObserversType,
+ eventType: string,
+ data: unknown
+): Promise< unknown > => {
+ const observersByType = getObserversByPriority( observers, eventType );
+ const observerResponses = [];
+ for ( const observer of observersByType ) {
+ try {
+ const observerResponse = await Promise.resolve(
+ observer.callback( data )
+ );
+ if ( typeof observerResponse === 'object' ) {
+ observerResponses.push( observerResponse );
+ }
+ } catch ( e ) {
+ // we don't care about errors blocking execution, but will console.error for troubleshooting.
+ // eslint-disable-next-line no-console
+ console.error( e );
+ }
+ }
+ return observerResponses.length ? observerResponses : true;
+};
+
+/**
+ * Emits events on registered observers for the provided type and passes along
+ * the provided data. This event emitter will abort if an observer throws an
+ * error or if the response includes an object with an error type property.
+ *
+ * Any successful observer responses before abort will be included in the returned package.
+ *
+ * @param {Object} observers The registered observers to omit to.
+ * @param {string} eventType The event type being emitted.
+ * @param {*} data Data passed along to the observer when it is invoked.
+ *
+ * @return {Promise} Returns a promise that resolves to either boolean, or an array of responses
+ * from registered observers that were invoked up to the point of an error.
+ */
+export const emitEventWithAbort = async (
+ observers: EventObserversType,
+ eventType: string,
+ data: unknown
+): Promise< ObserverResponse[] > => {
+ const observerResponses: ObserverResponse[] = [];
+ const observersByType = getObserversByPriority( observers, eventType );
+ for ( const observer of observersByType ) {
+ try {
+ const response = await Promise.resolve( observer.callback( data ) );
+ if ( ! isObserverResponse( response ) ) {
+ continue;
+ }
+ if ( ! response.hasOwnProperty( 'type' ) ) {
+ throw new Error(
+ 'Returned objects from event emitter observers must return an object with a type property'
+ );
+ }
+ if ( isErrorResponse( response ) || isFailResponse( response ) ) {
+ observerResponses.push( response );
+ // early abort.
+ return observerResponses;
+ }
+ // all potential abort conditions have been considered push the
+ // response to the array.
+ observerResponses.push( response );
+ } catch ( e ) {
+ // We don't handle thrown errors but just console.log for troubleshooting.
+ // eslint-disable-next-line no-console
+ console.error( e );
+ observerResponses.push( { type: responseTypes.ERROR } );
+ return observerResponses;
+ }
+ }
+ return observerResponses;
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/event-emit/index.ts b/plugins/woocommerce-blocks/assets/js/base/context/event-emit/index.ts
new file mode 100644
index 00000000000..a9729d4b198
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/event-emit/index.ts
@@ -0,0 +1,5 @@
+export * from './reducer';
+export * from './emitters';
+export * from './emitter-callback';
+export * from './types';
+export * from './utils';
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/event-emit/reducer.ts b/plugins/woocommerce-blocks/assets/js/base/context/event-emit/reducer.ts
new file mode 100644
index 00000000000..65d8b19ce1d
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/event-emit/reducer.ts
@@ -0,0 +1,64 @@
+/**
+ * Internal dependencies
+ */
+import {
+ ACTION,
+ ActionType,
+ ActionCallbackType,
+ EventObserversType,
+} from './types';
+
+export function generateUniqueId() {
+ return Math.floor( Math.random() * Date.now() ).toString();
+}
+
+export const actions = {
+ addEventCallback: (
+ eventType: string,
+ callback: ActionCallbackType,
+ priority = 10
+ ): ActionType => {
+ return {
+ id: generateUniqueId(),
+ type: ACTION.ADD_EVENT_CALLBACK,
+ eventType,
+ callback,
+ priority,
+ };
+ },
+ removeEventCallback: ( eventType: string, id: string ): ActionType => {
+ return {
+ id,
+ type: ACTION.REMOVE_EVENT_CALLBACK,
+ eventType,
+ };
+ },
+};
+
+const initialState = {} as EventObserversType;
+
+/**
+ * Handles actions for emitters
+ */
+export const reducer = (
+ state = initialState,
+ { type, eventType, id, callback, priority }: ActionType
+): typeof initialState => {
+ const newEvents = state.hasOwnProperty( eventType )
+ ? new Map( state[ eventType ] )
+ : new Map();
+ switch ( type ) {
+ case ACTION.ADD_EVENT_CALLBACK:
+ newEvents.set( id, { priority, callback } );
+ return {
+ ...state,
+ [ eventType ]: newEvents,
+ };
+ case ACTION.REMOVE_EVENT_CALLBACK:
+ newEvents.delete( id );
+ return {
+ ...state,
+ [ eventType ]: newEvents,
+ };
+ }
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/event-emit/test/emitters.js b/plugins/woocommerce-blocks/assets/js/base/context/event-emit/test/emitters.js
new file mode 100644
index 00000000000..e6c0075c694
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/event-emit/test/emitters.js
@@ -0,0 +1,119 @@
+/**
+ * Internal dependencies
+ */
+import { emitEvent, emitEventWithAbort } from '../emitters';
+
+describe( 'Testing emitters', () => {
+ let observerMocks = {};
+ let observerA;
+ let observerB;
+ let observerPromiseWithResolvedValue;
+ beforeEach( () => {
+ observerA = jest.fn().mockReturnValue( true );
+ observerB = jest.fn().mockReturnValue( true );
+ observerPromiseWithResolvedValue = jest.fn().mockResolvedValue( 10 );
+ observerMocks = new Map( [
+ [ 'observerA', { priority: 10, callback: observerA } ],
+ [ 'observerB', { priority: 10, callback: observerB } ],
+ [
+ 'observerReturnValue',
+ { priority: 10, callback: jest.fn().mockReturnValue( 10 ) },
+ ],
+ [
+ 'observerPromiseWithReject',
+ {
+ priority: 10,
+ callback: jest.fn().mockRejectedValue( 'an error' ),
+ },
+ ],
+ [
+ 'observerPromiseWithResolvedValue',
+ { priority: 10, callback: observerPromiseWithResolvedValue },
+ ],
+ [
+ 'observerSuccessType',
+ {
+ priority: 10,
+ callback: jest.fn().mockReturnValue( { type: 'success' } ),
+ },
+ ],
+ ] );
+ } );
+ describe( 'Testing emitEvent()', () => {
+ it( 'invokes all observers', async () => {
+ const observers = { test: observerMocks };
+ const response = await emitEvent( observers, 'test', 'foo' );
+ expect( console ).toHaveErroredWith( 'an error' );
+ expect( observerA ).toHaveBeenCalledTimes( 1 );
+ expect( observerB ).toHaveBeenCalledWith( 'foo' );
+ expect( response ).toEqual( [ { type: 'success' } ] );
+ } );
+ } );
+ describe( 'Testing emitEventWithAbort()', () => {
+ it( 'does not abort on any return value other than an object with an error or fail type property', async () => {
+ observerMocks.delete( 'observerPromiseWithReject' );
+ const observers = { test: observerMocks };
+ const response = await emitEventWithAbort(
+ observers,
+ 'test',
+ 'foo'
+ );
+ expect( console ).not.toHaveErrored();
+ expect( observerB ).toHaveBeenCalledTimes( 1 );
+ expect( observerPromiseWithResolvedValue ).toHaveBeenCalled();
+ expect( response ).toEqual( [ { type: 'success' } ] );
+ } );
+ it( 'Aborts on a return value with an object that has a a fail type property', async () => {
+ const validObjectResponse = jest
+ .fn()
+ .mockReturnValue( { type: 'failure' } );
+ observerMocks.set( 'observerValidObject', {
+ priority: 5,
+ callback: validObjectResponse,
+ } );
+ const observers = { test: observerMocks };
+ const response = await emitEventWithAbort(
+ observers,
+ 'test',
+ 'foo'
+ );
+ expect( console ).not.toHaveErrored();
+ expect( validObjectResponse ).toHaveBeenCalledTimes( 1 );
+ expect( observerPromiseWithResolvedValue ).not.toHaveBeenCalled();
+ expect( response ).toEqual( [ { type: 'failure' } ] );
+ } );
+ it( 'throws an error on an object returned from observer without a type property', async () => {
+ const failingObjectResponse = jest.fn().mockReturnValue( {} );
+ observerMocks.set( 'observerInvalidObject', {
+ priority: 5,
+ callback: failingObjectResponse,
+ } );
+ const observers = { test: observerMocks };
+ const response = await emitEventWithAbort(
+ observers,
+ 'test',
+ 'foo'
+ );
+ expect( console ).toHaveErrored();
+ expect( failingObjectResponse ).toHaveBeenCalledTimes( 1 );
+ expect( observerPromiseWithResolvedValue ).not.toHaveBeenCalled();
+ expect( response ).toEqual( [ { type: 'error' } ] );
+ } );
+ } );
+ describe( 'Test Priority', () => {
+ it( 'executes observers in expected order by priority', async () => {
+ const a = jest.fn();
+ const b = jest.fn().mockReturnValue( { type: 'error' } );
+ const observers = {
+ test: new Map( [
+ [ 'observerA', { priority: 200, callback: a } ],
+ [ 'observerB', { priority: 10, callback: b } ],
+ ] ),
+ };
+ await emitEventWithAbort( observers, 'test', 'foo' );
+ expect( console ).not.toHaveErrored();
+ expect( b ).toHaveBeenCalledTimes( 1 );
+ expect( a ).not.toHaveBeenCalled();
+ } );
+ } );
+} );
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/event-emit/types.ts b/plugins/woocommerce-blocks/assets/js/base/context/event-emit/types.ts
new file mode 100644
index 00000000000..27bdac799f9
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/event-emit/types.ts
@@ -0,0 +1,18 @@
+export enum ACTION {
+ ADD_EVENT_CALLBACK = 'add_event_callback',
+ REMOVE_EVENT_CALLBACK = 'remove_event_callback',
+}
+
+export type ActionCallbackType = ( ...args: unknown[] ) => unknown;
+
+export type ActionType = {
+ type: ACTION;
+ eventType: string;
+ id: string;
+ callback?: ActionCallbackType;
+ priority?: number;
+};
+
+export type ObserverType = { priority: number; callback: ActionCallbackType };
+export type ObserversType = Map< string, ObserverType >;
+export type EventObserversType = Record< string, ObserversType >;
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/event-emit/utils.ts b/plugins/woocommerce-blocks/assets/js/base/context/event-emit/utils.ts
new file mode 100644
index 00000000000..f9749e2d018
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/event-emit/utils.ts
@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import { FieldValidationStatus, isObject } from '@woocommerce/types';
+
+/**
+ * Internal dependencies
+ */
+import type { EventObserversType, ObserverType } from './types';
+
+export const getObserversByPriority = (
+ observers: EventObserversType,
+ eventType: string
+): ObserverType[] => {
+ return observers[ eventType ]
+ ? Array.from( observers[ eventType ].values() ).sort( ( a, b ) => {
+ return a.priority - b.priority;
+ } )
+ : [];
+};
+
+export enum responseTypes {
+ SUCCESS = 'success',
+ FAIL = 'failure',
+ ERROR = 'error',
+}
+
+export enum noticeContexts {
+ CART = 'wc/cart',
+ CHECKOUT = 'wc/checkout',
+ PAYMENTS = 'wc/checkout/payments',
+ EXPRESS_PAYMENTS = 'wc/checkout/express-payments',
+ CONTACT_INFORMATION = 'wc/checkout/contact-information',
+ SHIPPING_ADDRESS = 'wc/checkout/shipping-address',
+ BILLING_ADDRESS = 'wc/checkout/billing-address',
+ SHIPPING_METHODS = 'wc/checkout/shipping-methods',
+ CHECKOUT_ACTIONS = 'wc/checkout/checkout-actions',
+}
+
+export interface ResponseType extends Record< string, unknown > {
+ type: responseTypes;
+ retry?: boolean;
+}
+
+/**
+ * Observers of checkout/cart events can return a response object to indicate success/error/failure. They may also
+ * optionally pass metadata.
+ */
+export interface ObserverResponse {
+ type: responseTypes;
+ meta?: Record< string, unknown > | undefined;
+ validationErrors?: Record< string, FieldValidationStatus > | undefined;
+}
+
+const isResponseOf = (
+ response: unknown,
+ type: string
+): response is ResponseType => {
+ return isObject( response ) && 'type' in response && response.type === type;
+};
+
+export const isSuccessResponse = (
+ response: unknown
+): response is ObserverFailResponse => {
+ return isResponseOf( response, responseTypes.SUCCESS );
+};
+interface ObserverSuccessResponse extends ObserverResponse {
+ type: responseTypes.SUCCESS;
+}
+export const isErrorResponse = (
+ response: unknown
+): response is ObserverSuccessResponse => {
+ return isResponseOf( response, responseTypes.ERROR );
+};
+interface ObserverErrorResponse extends ObserverResponse {
+ type: responseTypes.ERROR;
+}
+
+interface ObserverFailResponse extends ObserverResponse {
+ type: responseTypes.FAIL;
+}
+export const isFailResponse = (
+ response: unknown
+): response is ObserverErrorResponse => {
+ return isResponseOf( response, responseTypes.FAIL );
+};
+
+export const shouldRetry = ( response: unknown ): boolean => {
+ return (
+ ! isObject( response ) ||
+ typeof response.retry === 'undefined' ||
+ response.retry === true
+ );
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/index.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/index.ts
new file mode 100644
index 00000000000..8f510164b6b
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/index.ts
@@ -0,0 +1,3 @@
+export * from './use-store-cart';
+export * from './use-store-cart-coupons';
+export * from './use-store-cart-item-quantity';
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/test/use-store-cart-item-quantity.js b/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/test/use-store-cart-item-quantity.js
new file mode 100644
index 00000000000..4c3baf5d110
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/test/use-store-cart-item-quantity.js
@@ -0,0 +1,216 @@
+/**
+ * External dependencies
+ */
+import TestRenderer, { act } from 'react-test-renderer';
+import { createRegistry, RegistryProvider } from '@wordpress/data';
+import { CART_STORE_KEY, CHECKOUT_STORE_KEY } from '@woocommerce/block-data';
+
+/**
+ * Internal dependencies
+ */
+import * as mockUseStoreCart from '../use-store-cart';
+import { useStoreCartItemQuantity } from '../use-store-cart-item-quantity';
+import { config as checkoutStoreConfig } from '../../../../../data/checkout';
+
+jest.mock( '../use-store-cart', () => ( {
+ useStoreCart: jest.fn(),
+} ) );
+
+jest.mock( '@woocommerce/block-data', () => ( {
+ __esModule: true,
+ CART_STORE_KEY: 'test/cart/store',
+ CHECKOUT_STORE_KEY: 'test/checkout/store',
+} ) );
+
+// Make debounce instantaneous.
+jest.mock( 'use-debounce', () => ( {
+ useDebounce: ( a ) => [ a ],
+} ) );
+
+describe( 'useStoreCartItemQuantity', () => {
+ let registry, renderer;
+
+ const getWrappedComponents = ( Component ) => (
+
+
+ );
+
+ const getTestComponent = ( options ) => () => {
+ const props = useStoreCartItemQuantity( options );
+ return
;
+ };
+
+ let mockRemoveItemFromCart;
+ let mockChangeCartItemQuantity;
+ const setupMocks = ( { isPendingDelete, isPendingQuantity } ) => {
+ // Register mock cart store
+ mockRemoveItemFromCart = jest
+ .fn()
+ .mockReturnValue( { type: 'removeItemFromCartAction' } );
+ mockChangeCartItemQuantity = jest
+ .fn()
+ .mockReturnValue( { type: 'changeCartItemQuantityAction' } );
+
+ registry.registerStore( CART_STORE_KEY, {
+ reducer: () => ( {} ),
+ actions: {
+ removeItemFromCart: mockRemoveItemFromCart,
+ changeCartItemQuantity: mockChangeCartItemQuantity,
+ },
+ selectors: {
+ isItemPendingDelete: jest
+ .fn()
+ .mockReturnValue( isPendingDelete ),
+ isItemPendingQuantity: jest
+ .fn()
+ .mockReturnValue( isPendingQuantity ),
+ },
+ } );
+
+ // Register actual checkout store
+ registry.registerStore( CHECKOUT_STORE_KEY, checkoutStoreConfig );
+ };
+
+ beforeEach( () => {
+ registry = createRegistry();
+ renderer = null;
+ } );
+
+ afterEach( () => {
+ mockRemoveItemFromCart.mockReset();
+ mockChangeCartItemQuantity.mockReset();
+ } );
+
+ describe( 'with no errors and not pending', () => {
+ beforeEach( () => {
+ setupMocks( { isPendingDelete: false, isPendingQuantity: false } );
+ mockUseStoreCart.useStoreCart.mockReturnValue( {
+ cartErrors: {},
+ } );
+ } );
+
+ it( 'update quantity value should happen instantly', () => {
+ const TestComponent = getTestComponent( {
+ key: '123',
+ quantity: 1,
+ } );
+
+ act( () => {
+ renderer = TestRenderer.create(
+ getWrappedComponents( TestComponent )
+ );
+ } );
+
+ const { setItemQuantity, quantity } =
+ renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
+
+ expect( quantity ).toBe( 1 );
+
+ act( () => {
+ setItemQuantity( 2 );
+ } );
+
+ const { quantity: newQuantity } =
+ renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
+
+ expect( newQuantity ).toBe( 2 );
+ } );
+
+ it( 'removeItem should call the dispatch action', () => {
+ const TestComponent = getTestComponent( {
+ key: '123',
+ quantity: 1,
+ } );
+
+ act( () => {
+ renderer = TestRenderer.create(
+ getWrappedComponents( TestComponent )
+ );
+ } );
+
+ const { removeItem } = renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
+
+ act( () => {
+ removeItem();
+ } );
+
+ expect( mockRemoveItemFromCart ).toHaveBeenCalledWith( '123' );
+ } );
+
+ it( 'setItemQuantity should call the dispatch action', () => {
+ const TestComponent = getTestComponent( {
+ key: '123',
+ quantity: 1,
+ } );
+
+ act( () => {
+ renderer = TestRenderer.create(
+ getWrappedComponents( TestComponent )
+ );
+ } );
+
+ const { setItemQuantity } = renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
+
+ act( () => {
+ setItemQuantity( 2 );
+ } );
+
+ expect( mockChangeCartItemQuantity.mock.calls ).toEqual( [
+ [ '123', 2 ],
+ ] );
+ } );
+ } );
+
+ it( 'should expose store errors', () => {
+ const mockCartErrors = [ { message: 'Test error' } ];
+ setupMocks( {
+ isPendingDelete: false,
+ isPendingQuantity: false,
+ } );
+ mockUseStoreCart.useStoreCart.mockReturnValue( {
+ cartErrors: mockCartErrors,
+ } );
+
+ const TestComponent = getTestComponent( {
+ key: '123',
+ quantity: 1,
+ } );
+
+ act( () => {
+ renderer = TestRenderer.create(
+ getWrappedComponents( TestComponent )
+ );
+ } );
+
+ const { cartItemQuantityErrors } =
+ renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
+
+ expect( cartItemQuantityErrors ).toEqual( mockCartErrors );
+ } );
+
+ it( 'isPendingDelete should depend on the value provided by the store', () => {
+ setupMocks( {
+ isPendingDelete: true,
+ isPendingQuantity: false,
+ } );
+ mockUseStoreCart.useStoreCart.mockReturnValue( {
+ cartErrors: {},
+ } );
+
+ const TestComponent = getTestComponent( {
+ key: '123',
+ quantity: 1,
+ } );
+
+ act( () => {
+ renderer = TestRenderer.create(
+ getWrappedComponents( TestComponent )
+ );
+ } );
+
+ const { isPendingDelete } = renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
+
+ expect( isPendingDelete ).toBe( true );
+ } );
+} );
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/test/use-store-cart.jsx b/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/test/use-store-cart.jsx
new file mode 100644
index 00000000000..84b97c12abd
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/test/use-store-cart.jsx
@@ -0,0 +1,273 @@
+/**
+ * External dependencies
+ */
+import TestRenderer, { act } from 'react-test-renderer';
+import { createRegistry, RegistryProvider } from '@wordpress/data';
+import { previewCart } from '@woocommerce/resource-previews';
+import { CART_STORE_KEY as storeKey } from '@woocommerce/block-data';
+
+/**
+ * Internal dependencies
+ */
+import { defaultCartData, useStoreCart } from '../use-store-cart';
+import { useEditorContext } from '../../../providers/editor-context';
+
+jest.mock( '../../../providers/editor-context', () => ( {
+ useEditorContext: jest.fn(),
+} ) );
+
+jest.mock( '@woocommerce/block-data', () => ( {
+ ...jest.requireActual( '@woocommerce/block-data' ),
+ __esModule: true,
+ CART_STORE_KEY: 'test/store',
+} ) );
+
+describe( 'useStoreCart', () => {
+ let registry, renderer;
+
+ const receiveCartMock = () => {};
+ const receiveCartContentsMock = () => {};
+
+ const previewCartData = {
+ cartCoupons: previewCart.coupons,
+ cartItems: previewCart.items,
+ crossSellsProducts: previewCart.cross_sells,
+ cartFees: previewCart.fees,
+ cartItemsCount: previewCart.items_count,
+ cartItemsWeight: previewCart.items_weight,
+ cartNeedsPayment: previewCart.needs_payment,
+ cartNeedsShipping: previewCart.needs_shipping,
+ cartTotals: previewCart.totals,
+ cartIsLoading: false,
+ cartItemErrors: [],
+ cartErrors: [],
+ billingData: {
+ first_name: '',
+ last_name: '',
+ company: '',
+ address_1: '',
+ address_2: '',
+ city: '',
+ state: '',
+ postcode: '',
+ country: '',
+ email: '',
+ phone: '',
+ },
+ billingAddress: {
+ first_name: '',
+ last_name: '',
+ company: '',
+ address_1: '',
+ address_2: '',
+ city: '',
+ state: '',
+ postcode: '',
+ country: '',
+ email: '',
+ phone: '',
+ },
+ shippingAddress: {
+ first_name: '',
+ last_name: '',
+ company: '',
+ address_1: '',
+ address_2: '',
+ city: '',
+ state: '',
+ postcode: '',
+ country: '',
+ phone: '',
+ },
+ shippingRates: previewCart.shipping_rates,
+ extensions: {},
+ isLoadingRates: false,
+ cartHasCalculatedShipping: true,
+ };
+
+ const mockCartItems = [ { key: '1', id: 1, name: 'Lorem Ipsum' } ];
+ const mockShippingAddress = {
+ city: 'New York',
+ };
+ const mockCartData = {
+ coupons: [],
+ items: mockCartItems,
+ fees: [],
+ itemsCount: 1,
+ itemsWeight: 10,
+ needsPayment: true,
+ needsShipping: true,
+ billingAddress: {},
+ shippingAddress: mockShippingAddress,
+ shippingRates: [],
+ hasCalculatedShipping: true,
+ extensions: {},
+ errors: [],
+ paymentRequirements: [],
+ receiveCart: undefined,
+ receiveCartContents: undefined,
+ };
+ const mockCartTotals = {
+ currency_code: 'USD',
+ };
+ const mockCartIsLoading = false;
+ const mockCartErrors = [];
+ const mockStoreCartData = {
+ cartCoupons: [],
+ cartItems: mockCartItems,
+ cartItemErrors: [],
+ cartItemsCount: 1,
+ cartItemsWeight: 10,
+ cartNeedsPayment: true,
+ cartNeedsShipping: true,
+ cartTotals: mockCartTotals,
+ cartIsLoading: mockCartIsLoading,
+ cartErrors: mockCartErrors,
+ cartFees: [],
+ billingData: {},
+ billingAddress: {},
+ shippingAddress: mockShippingAddress,
+ shippingRates: [],
+ extensions: {},
+ isLoadingRates: false,
+ cartHasCalculatedShipping: true,
+ paymentRequirements: [],
+ receiveCart: undefined,
+ receiveCartContents: undefined,
+ };
+
+ const getWrappedComponents = ( Component ) => (
+
+
+ );
+
+ const getTestComponent = ( options ) => () => {
+ const { receiveCart, receiveCartContents, ...results } =
+ useStoreCart( options );
+ return (
+
+ );
+ };
+
+ const setUpMocks = () => {
+ const mocks = {
+ selectors: {
+ getCartData: jest.fn().mockReturnValue( mockCartData ),
+ getCartErrors: jest.fn().mockReturnValue( mockCartErrors ),
+ getCartTotals: jest.fn().mockReturnValue( mockCartTotals ),
+ hasFinishedResolution: jest
+ .fn()
+ .mockReturnValue( ! mockCartIsLoading ),
+ isCustomerDataUpdating: jest.fn().mockReturnValue( false ),
+ },
+ };
+ registry.registerStore( storeKey, {
+ reducer: () => ( {} ),
+ selectors: mocks.selectors,
+ } );
+ };
+
+ beforeEach( () => {
+ registry = createRegistry();
+ renderer = null;
+ setUpMocks();
+ } );
+
+ afterEach( () => {
+ useEditorContext.mockReset();
+ } );
+
+ describe( 'in frontend', () => {
+ beforeEach( () => {
+ useEditorContext.mockReturnValue( {
+ isEditor: false,
+ } );
+ } );
+
+ it( 'return default data when shouldSelect is false', () => {
+ const TestComponent = getTestComponent( {
+ shouldSelect: false,
+ } );
+
+ act( () => {
+ renderer = TestRenderer.create(
+ getWrappedComponents( TestComponent )
+ );
+ } );
+
+ const props = renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
+ const results = props[ 'data-results' ];
+ const receiveCart = props[ 'data-receiveCart' ];
+ const receiveCartContents = props[ 'data-receiveCartContents' ];
+
+ const {
+ receiveCart: defaultReceiveCart,
+ receiveCartContents: defaultReceiveCartContents,
+ ...remaining
+ } = defaultCartData;
+ expect( results ).toEqual( remaining );
+ expect( receiveCart ).toEqual( defaultReceiveCart );
+ expect( receiveCartContents ).toEqual( defaultReceiveCartContents );
+ } );
+
+ it( 'return store data when shouldSelect is true', () => {
+ const TestComponent = getTestComponent( {
+ shouldSelect: true,
+ } );
+
+ act( () => {
+ renderer = TestRenderer.create(
+ getWrappedComponents( TestComponent )
+ );
+ } );
+
+ const props = renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
+ const results = props[ 'data-results' ];
+ const receiveCart = props[ 'data-receiveCart' ];
+ const receiveCartContents = props[ 'data-receiveCartContents' ];
+
+ expect( results ).toEqual( mockStoreCartData );
+ expect( receiveCart ).toBeUndefined();
+ expect( receiveCartContents ).toBeUndefined();
+ } );
+ } );
+
+ describe( 'in editor', () => {
+ beforeEach( () => {
+ useEditorContext.mockReturnValue( {
+ isEditor: true,
+ previewData: {
+ previewCart: {
+ ...previewCart,
+ receiveCart: receiveCartMock,
+ receiveCartContents: receiveCartContentsMock,
+ },
+ },
+ } );
+ } );
+
+ it( 'return preview data in editor', () => {
+ const TestComponent = getTestComponent();
+
+ act( () => {
+ renderer = TestRenderer.create(
+ getWrappedComponents( TestComponent )
+ );
+ } );
+
+ const props = renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
+ const results = props[ 'data-results' ];
+ const receiveCart = props[ 'data-receiveCart' ];
+ const receiveCartContents = props[ 'data-receiveCartContents' ];
+
+ expect( results ).toEqual( previewCartData );
+ expect( receiveCart ).toEqual( receiveCartMock );
+ expect( receiveCartContents ).toEqual( receiveCartContentsMock );
+ } );
+ } );
+} );
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/use-store-cart-coupons.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/use-store-cart-coupons.ts
new file mode 100644
index 00000000000..81a25490dc4
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/use-store-cart-coupons.ts
@@ -0,0 +1,131 @@
+/**
+ * External dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { CART_STORE_KEY, VALIDATION_STORE_KEY } from '@woocommerce/block-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import type { StoreCartCoupon } from '@woocommerce/types';
+import { applyCheckoutFilter } from '@woocommerce/blocks-checkout';
+
+/**
+ * Internal dependencies
+ */
+import { useStoreCart } from './use-store-cart';
+
+/**
+ * This is a custom hook for loading the Store API /cart/coupons endpoint and an
+ * action for adding a coupon _to_ the cart.
+ * See also: https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/trunk/src/RestApi/StoreApi
+ */
+export const useStoreCartCoupons = ( context = '' ): StoreCartCoupon => {
+ const { cartCoupons, cartIsLoading } = useStoreCart();
+ const { createErrorNotice } = useDispatch( 'core/notices' );
+ const { createNotice } = useDispatch( 'core/notices' );
+ const { setValidationErrors } = useDispatch( VALIDATION_STORE_KEY );
+
+ const {
+ isApplyingCoupon,
+ isRemovingCoupon,
+ }: Pick< StoreCartCoupon, 'isApplyingCoupon' | 'isRemovingCoupon' > =
+ useSelect(
+ ( select ) => {
+ const store = select( CART_STORE_KEY );
+
+ return {
+ isApplyingCoupon: store.isApplyingCoupon(),
+ isRemovingCoupon: store.isRemovingCoupon(),
+ };
+ },
+ [ createErrorNotice, createNotice ]
+ );
+
+ const { applyCoupon, removeCoupon } = useDispatch( CART_STORE_KEY );
+
+ const applyCouponWithNotices = ( couponCode: string ) => {
+ return applyCoupon( couponCode )
+ .then( () => {
+ if (
+ applyCheckoutFilter( {
+ filterName: 'showApplyCouponNotice',
+ defaultValue: true,
+ arg: { couponCode, context },
+ } )
+ ) {
+ createNotice(
+ 'info',
+ sprintf(
+ /* translators: %s coupon code. */
+ __(
+ 'Coupon code "%s" has been applied to your cart.',
+ 'woo-gutenberg-products-block'
+ ),
+ couponCode
+ ),
+ {
+ id: 'coupon-form',
+ type: 'snackbar',
+ context,
+ }
+ );
+ }
+ return Promise.resolve( true );
+ } )
+ .catch( ( error ) => {
+ setValidationErrors( {
+ coupon: {
+ message: decodeEntities( error.message ),
+ hidden: false,
+ },
+ } );
+ return Promise.resolve( false );
+ } );
+ };
+
+ const removeCouponWithNotices = ( couponCode: string ) => {
+ return removeCoupon( couponCode )
+ .then( () => {
+ if (
+ applyCheckoutFilter( {
+ filterName: 'showRemoveCouponNotice',
+ defaultValue: true,
+ arg: { couponCode, context },
+ } )
+ ) {
+ createNotice(
+ 'info',
+ sprintf(
+ /* translators: %s coupon code. */
+ __(
+ 'Coupon code "%s" has been removed from your cart.',
+ 'woo-gutenberg-products-block'
+ ),
+ couponCode
+ ),
+ {
+ id: 'coupon-form',
+ type: 'snackbar',
+ context,
+ }
+ );
+ }
+ return Promise.resolve( true );
+ } )
+ .catch( ( error ) => {
+ createErrorNotice( error.message, {
+ id: 'coupon-form',
+ context,
+ } );
+ return Promise.resolve( false );
+ } );
+ };
+
+ return {
+ appliedCoupons: cartCoupons,
+ isLoading: cartIsLoading,
+ applyCoupon: applyCouponWithNotices,
+ removeCoupon: removeCouponWithNotices,
+ isApplyingCoupon,
+ isRemovingCoupon,
+ };
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/use-store-cart-event-listeners.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/use-store-cart-event-listeners.ts
new file mode 100644
index 00000000000..3cdb35083c0
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/use-store-cart-event-listeners.ts
@@ -0,0 +1,121 @@
+/**
+ * External dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { CART_STORE_KEY } from '@woocommerce/block-data';
+import { dispatch } from '@wordpress/data';
+import {
+ translateJQueryEventToNative,
+ getNavigationType,
+} from '@woocommerce/base-utils';
+
+interface StoreCartListenersType {
+ // Counts the number of consumers of this hook so we can remove listeners when no longer needed.
+ count: number;
+ // Function to remove all registered listeners.
+ remove: () => void;
+}
+
+interface CartDataCustomEvent extends Event {
+ detail?:
+ | {
+ preserveCartData?: boolean | undefined;
+ }
+ | undefined;
+}
+
+declare global {
+ interface Window {
+ wcBlocksStoreCartListeners: StoreCartListenersType;
+ }
+}
+
+const refreshData = ( event: CartDataCustomEvent ): void => {
+ const eventDetail = event?.detail;
+ if ( ! eventDetail || ! eventDetail.preserveCartData ) {
+ dispatch( CART_STORE_KEY ).invalidateResolutionForStore();
+ }
+};
+
+/**
+ * Refreshes data if the pageshow event is triggered by the browser history.
+ *
+ * - In Chrome, `back_forward` will be returned by getNavigationType() when the browser history is used.
+ * - In safari we instead need to use `event.persisted` which is true when page cache is used.
+ */
+const refreshCachedCartData = ( event: PageTransitionEvent ): void => {
+ if ( event?.persisted || getNavigationType() === 'back_forward' ) {
+ dispatch( CART_STORE_KEY ).invalidateResolutionForStore();
+ }
+};
+
+const setUp = (): void => {
+ if ( ! window.wcBlocksStoreCartListeners ) {
+ window.wcBlocksStoreCartListeners = {
+ count: 0,
+ remove: () => void null,
+ };
+ }
+};
+
+// Checks if there are any listeners registered.
+const hasListeners = (): boolean => {
+ return window.wcBlocksStoreCartListeners?.count > 0;
+};
+
+// Add listeners if there are none, otherwise just increment the count.
+const addListeners = (): void => {
+ setUp();
+
+ if ( hasListeners() ) {
+ window.wcBlocksStoreCartListeners.count++;
+ return;
+ }
+ document.body.addEventListener( 'wc-blocks_added_to_cart', refreshData );
+ document.body.addEventListener(
+ 'wc-blocks_removed_from_cart',
+ refreshData
+ );
+ window.addEventListener( 'pageshow', refreshCachedCartData );
+
+ const removeJQueryAddedToCartEvent = translateJQueryEventToNative(
+ 'added_to_cart',
+ `wc-blocks_added_to_cart`
+ ) as () => () => void;
+ const removeJQueryRemovedFromCartEvent = translateJQueryEventToNative(
+ 'removed_from_cart',
+ `wc-blocks_removed_from_cart`
+ ) as () => () => void;
+
+ window.wcBlocksStoreCartListeners.count = 1;
+ window.wcBlocksStoreCartListeners.remove = () => {
+ document.body.removeEventListener(
+ 'wc-blocks_added_to_cart',
+ refreshData
+ );
+ document.body.removeEventListener(
+ 'wc-blocks_removed_from_cart',
+ refreshData
+ );
+ window.removeEventListener( 'pageshow', refreshCachedCartData );
+ removeJQueryAddedToCartEvent();
+ removeJQueryRemovedFromCartEvent();
+ };
+};
+
+const removeListeners = (): void => {
+ if ( window.wcBlocksStoreCartListeners.count === 1 ) {
+ window.wcBlocksStoreCartListeners.remove();
+ }
+ window.wcBlocksStoreCartListeners.count--;
+};
+
+/**
+ * This will keep track of jQuery and DOM events that invalidate the store resolution.
+ */
+export const useStoreCartEventListeners = (): void => {
+ useEffect( () => {
+ addListeners();
+ return removeListeners;
+ }, [] );
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/use-store-cart-item-quantity.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/use-store-cart-item-quantity.ts
new file mode 100644
index 00000000000..5998e7a3cf5
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/use-store-cart-item-quantity.ts
@@ -0,0 +1,163 @@
+/**
+ * External dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCallback, useState, useEffect } from '@wordpress/element';
+import {
+ CART_STORE_KEY,
+ CHECKOUT_STORE_KEY,
+ processErrorResponse,
+} from '@woocommerce/block-data';
+import { useDebounce } from 'use-debounce';
+import { usePrevious } from '@woocommerce/base-hooks';
+import {
+ CartItem,
+ StoreCartItemQuantity,
+ isNumber,
+ isObject,
+ isString,
+ objectHasProp,
+} from '@woocommerce/types';
+
+/**
+ * Internal dependencies
+ */
+import { useStoreCart } from './use-store-cart';
+
+/**
+ * Ensures the object passed has props key: string and quantity: number
+ */
+const cartItemHasQuantityAndKey = (
+ cartItem: unknown /* Object that may have quantity and key */
+): cartItem is Partial< CartItem > =>
+ isObject( cartItem ) &&
+ objectHasProp( cartItem, 'key' ) &&
+ objectHasProp( cartItem, 'quantity' ) &&
+ isString( cartItem.key ) &&
+ isNumber( cartItem.quantity );
+
+/**
+ * This is a custom hook for loading the Store API /cart/ endpoint and actions for removing or changing item quantity.
+ *
+ * @see https://github.com/woocommerce/woocommerce-gutenberg-products-block/tree/trunk/src/RestApi/StoreApi
+ *
+ * @param {CartItem} cartItem The cartItem to get quantity info from and will have quantity updated on.
+ * @return {StoreCartItemQuantity} An object exposing data and actions relating to cart items.
+ */
+export const useStoreCartItemQuantity = (
+ cartItem: CartItem | Record< string, unknown >
+): StoreCartItemQuantity => {
+ const verifiedCartItem = { key: '', quantity: 1 };
+
+ if ( cartItemHasQuantityAndKey( cartItem ) ) {
+ verifiedCartItem.key = cartItem.key;
+ verifiedCartItem.quantity = cartItem.quantity;
+ }
+ const { key: cartItemKey = '', quantity: cartItemQuantity = 1 } =
+ verifiedCartItem;
+ const { cartErrors } = useStoreCart();
+ const { __internalIncrementCalculating, __internalDecrementCalculating } =
+ useDispatch( CHECKOUT_STORE_KEY );
+
+ // Store quantity in hook state. This is used to keep the UI updated while server request is updated.
+ const [ quantity, setQuantity ] = useState< number >( cartItemQuantity );
+ const [ debouncedQuantity ] = useDebounce< number >( quantity, 400 );
+ const previousDebouncedQuantity = usePrevious( debouncedQuantity );
+ const { removeItemFromCart, changeCartItemQuantity } =
+ useDispatch( CART_STORE_KEY );
+
+ // Update local state when server updates.
+ useEffect( () => setQuantity( cartItemQuantity ), [ cartItemQuantity ] );
+
+ // Track when things are already pending updates.
+ const isPending = useSelect(
+ ( select ) => {
+ if ( ! cartItemKey ) {
+ return {
+ quantity: false,
+ delete: false,
+ };
+ }
+ const store = select( CART_STORE_KEY );
+ return {
+ quantity: store.isItemPendingQuantity( cartItemKey ),
+ delete: store.isItemPendingDelete( cartItemKey ),
+ };
+ },
+ [ cartItemKey ]
+ );
+
+ const removeItem = useCallback( () => {
+ if ( cartItemKey ) {
+ return removeItemFromCart( cartItemKey ).catch( ( error ) => {
+ processErrorResponse( error );
+ } );
+ }
+ return Promise.resolve( false );
+ }, [ cartItemKey, removeItemFromCart ] );
+
+ // Observe debounced quantity value, fire action to update server on change.
+ useEffect( () => {
+ if (
+ cartItemKey &&
+ isNumber( previousDebouncedQuantity ) &&
+ Number.isFinite( previousDebouncedQuantity ) &&
+ previousDebouncedQuantity !== debouncedQuantity
+ ) {
+ changeCartItemQuantity( cartItemKey, debouncedQuantity ).catch(
+ ( error ) => {
+ processErrorResponse( error );
+ }
+ );
+ }
+ }, [
+ cartItemKey,
+ changeCartItemQuantity,
+ debouncedQuantity,
+ previousDebouncedQuantity,
+ ] );
+
+ useEffect( () => {
+ if ( isPending.delete ) {
+ __internalIncrementCalculating();
+ } else {
+ __internalDecrementCalculating();
+ }
+ return () => {
+ if ( isPending.delete ) {
+ __internalDecrementCalculating();
+ }
+ };
+ }, [
+ __internalDecrementCalculating,
+ __internalIncrementCalculating,
+ isPending.delete,
+ ] );
+
+ useEffect( () => {
+ if ( isPending.quantity || debouncedQuantity !== quantity ) {
+ __internalIncrementCalculating();
+ } else {
+ __internalDecrementCalculating();
+ }
+ return () => {
+ if ( isPending.quantity || debouncedQuantity !== quantity ) {
+ __internalDecrementCalculating();
+ }
+ };
+ }, [
+ __internalIncrementCalculating,
+ __internalDecrementCalculating,
+ isPending.quantity,
+ debouncedQuantity,
+ quantity,
+ ] );
+
+ return {
+ isPendingDelete: isPending.delete,
+ quantity,
+ setItemQuantity: setQuantity,
+ removeItem,
+ cartItemQuantityErrors: cartErrors,
+ };
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/use-store-cart.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/use-store-cart.ts
new file mode 100644
index 00000000000..135de0ddc3b
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/use-store-cart.ts
@@ -0,0 +1,256 @@
+/** @typedef { import('@woocommerce/type-defs/hooks').StoreCart } StoreCart */
+
+/**
+ * External dependencies
+ */
+import fastDeepEqual from 'fast-deep-equal/es6';
+import { useRef } from '@wordpress/element';
+import {
+ CART_STORE_KEY as storeKey,
+ EMPTY_CART_COUPONS,
+ EMPTY_CART_ITEMS,
+ EMPTY_CART_CROSS_SELLS,
+ EMPTY_CART_FEES,
+ EMPTY_CART_ITEM_ERRORS,
+ EMPTY_CART_ERRORS,
+ EMPTY_SHIPPING_RATES,
+ EMPTY_TAX_LINES,
+ EMPTY_PAYMENT_METHODS,
+ EMPTY_PAYMENT_REQUIREMENTS,
+ EMPTY_EXTENSIONS,
+} from '@woocommerce/block-data';
+import { useSelect } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import type {
+ StoreCart,
+ CartResponseTotals,
+ CartResponseFeeItem,
+ CartResponseBillingAddress,
+ CartResponseShippingAddress,
+ CartResponseCouponItem,
+ CartResponseCoupons,
+} from '@woocommerce/types';
+import { emptyHiddenAddressFields } from '@woocommerce/base-utils';
+
+/**
+ * Internal dependencies
+ */
+import { useEditorContext } from '../../providers/editor-context';
+import { useStoreCartEventListeners } from './use-store-cart-event-listeners';
+
+declare module '@wordpress/html-entities' {
+ // eslint-disable-next-line @typescript-eslint/no-shadow
+ export function decodeEntities< T >( coupon: T ): T;
+}
+const defaultShippingAddress: CartResponseShippingAddress = {
+ first_name: '',
+ last_name: '',
+ company: '',
+ address_1: '',
+ address_2: '',
+ city: '',
+ state: '',
+ postcode: '',
+ country: '',
+ phone: '',
+};
+
+const defaultBillingAddress: CartResponseBillingAddress = {
+ ...defaultShippingAddress,
+ email: '',
+};
+
+const defaultCartTotals: CartResponseTotals = {
+ total_items: '',
+ total_items_tax: '',
+ total_fees: '',
+ total_fees_tax: '',
+ total_discount: '',
+ total_discount_tax: '',
+ total_shipping: '',
+ total_shipping_tax: '',
+ total_price: '',
+ total_tax: '',
+ tax_lines: EMPTY_TAX_LINES,
+ currency_code: '',
+ currency_symbol: '',
+ currency_minor_unit: 2,
+ currency_decimal_separator: '',
+ currency_thousand_separator: '',
+ currency_prefix: '',
+ currency_suffix: '',
+};
+
+const decodeValues = (
+ object: Record< string, unknown >
+): Record< string, unknown > =>
+ Object.fromEntries(
+ Object.entries( object ).map( ( [ key, value ] ) => [
+ key,
+ decodeEntities( value ),
+ ] )
+ );
+
+/**
+ * @constant
+ * @type {StoreCart} Object containing cart data.
+ */
+export const defaultCartData: StoreCart = {
+ cartCoupons: EMPTY_CART_COUPONS,
+ cartItems: EMPTY_CART_ITEMS,
+ cartFees: EMPTY_CART_FEES,
+ cartItemsCount: 0,
+ cartItemsWeight: 0,
+ crossSellsProducts: EMPTY_CART_CROSS_SELLS,
+ cartNeedsPayment: true,
+ cartNeedsShipping: true,
+ cartItemErrors: EMPTY_CART_ITEM_ERRORS,
+ cartTotals: defaultCartTotals,
+ cartIsLoading: true,
+ cartErrors: EMPTY_CART_ERRORS,
+ billingAddress: defaultBillingAddress,
+ shippingAddress: defaultShippingAddress,
+ shippingRates: EMPTY_SHIPPING_RATES,
+ isLoadingRates: false,
+ cartHasCalculatedShipping: false,
+ paymentMethods: EMPTY_PAYMENT_METHODS,
+ paymentRequirements: EMPTY_PAYMENT_REQUIREMENTS,
+ receiveCart: () => undefined,
+ receiveCartContents: () => undefined,
+ extensions: EMPTY_EXTENSIONS,
+};
+
+/**
+ * This is a custom hook that is wired up to the `wc/store/cart` data
+ * store.
+ *
+ * @param {Object} options An object declaring the various
+ * collection arguments.
+ * @param {boolean} options.shouldSelect If false, the previous results will be
+ * returned and internal selects will not
+ * fire.
+ *
+ * @return {StoreCart} Object containing cart data.
+ */
+
+export const useStoreCart = (
+ options: { shouldSelect: boolean } = { shouldSelect: true }
+): StoreCart => {
+ const { isEditor, previewData } = useEditorContext();
+ const previewCart = previewData?.previewCart;
+ const { shouldSelect } = options;
+ const currentResults = useRef();
+
+ // This will keep track of jQuery and DOM events that invalidate the store resolution.
+ useStoreCartEventListeners();
+
+ const results: StoreCart = useSelect(
+ ( select, { dispatch } ) => {
+ if ( ! shouldSelect ) {
+ return defaultCartData;
+ }
+
+ if ( isEditor ) {
+ return {
+ cartCoupons: previewCart.coupons,
+ cartItems: previewCart.items,
+ crossSellsProducts: previewCart.cross_sells,
+ cartFees: previewCart.fees,
+ cartItemsCount: previewCart.items_count,
+ cartItemsWeight: previewCart.items_weight,
+ cartNeedsPayment: previewCart.needs_payment,
+ cartNeedsShipping: previewCart.needs_shipping,
+ cartItemErrors: EMPTY_CART_ITEM_ERRORS,
+ cartTotals: previewCart.totals,
+ cartIsLoading: false,
+ cartErrors: EMPTY_CART_ERRORS,
+ billingData: defaultBillingAddress,
+ billingAddress: defaultBillingAddress,
+ shippingAddress: defaultShippingAddress,
+ extensions: EMPTY_EXTENSIONS,
+ shippingRates: previewCart.shipping_rates,
+ isLoadingRates: false,
+ cartHasCalculatedShipping:
+ previewCart.has_calculated_shipping,
+ paymentRequirements: previewCart.paymentRequirements,
+ receiveCart:
+ typeof previewCart?.receiveCart === 'function'
+ ? previewCart.receiveCart
+ : () => undefined,
+ receiveCartContents:
+ typeof previewCart?.receiveCartContents === 'function'
+ ? previewCart.receiveCartContents
+ : () => undefined,
+ };
+ }
+
+ const store = select( storeKey );
+ const cartData = store.getCartData();
+ const cartErrors = store.getCartErrors();
+ const cartTotals = store.getCartTotals();
+ const cartIsLoading =
+ ! store.hasFinishedResolution( 'getCartData' );
+
+ const isLoadingRates = store.isCustomerDataUpdating();
+ const { receiveCart, receiveCartContents } = dispatch( storeKey );
+ const billingAddress = decodeValues( cartData.billingAddress );
+ const shippingAddress = cartData.needsShipping
+ ? decodeValues( cartData.shippingAddress )
+ : billingAddress;
+ const cartFees =
+ cartData.fees.length > 0
+ ? cartData.fees.map( ( fee: CartResponseFeeItem ) =>
+ decodeValues( fee )
+ )
+ : EMPTY_CART_FEES;
+
+ // Add a text property to the coupon to allow extensions to modify
+ // the text used to display the coupon, without affecting the
+ // functionality when it comes to removing the coupon.
+ const cartCoupons: CartResponseCoupons =
+ cartData.coupons.length > 0
+ ? cartData.coupons.map(
+ ( coupon: CartResponseCouponItem ) => ( {
+ ...coupon,
+ label: coupon.code,
+ } )
+ )
+ : EMPTY_CART_COUPONS;
+
+ return {
+ cartCoupons,
+ cartItems: cartData.items,
+ crossSellsProducts: cartData.crossSells,
+ cartFees,
+ cartItemsCount: cartData.itemsCount,
+ cartItemsWeight: cartData.itemsWeight,
+ cartNeedsPayment: cartData.needsPayment,
+ cartNeedsShipping: cartData.needsShipping,
+ cartItemErrors: cartData.errors,
+ cartTotals,
+ cartIsLoading,
+ cartErrors,
+ billingData: emptyHiddenAddressFields( billingAddress ),
+ billingAddress: emptyHiddenAddressFields( billingAddress ),
+ shippingAddress: emptyHiddenAddressFields( shippingAddress ),
+ extensions: cartData.extensions,
+ shippingRates: cartData.shippingRates,
+ isLoadingRates,
+ cartHasCalculatedShipping: cartData.hasCalculatedShipping,
+ paymentRequirements: cartData.paymentRequirements,
+ receiveCart,
+ receiveCartContents,
+ };
+ },
+ [ shouldSelect ]
+ );
+
+ if (
+ ! currentResults.current ||
+ ! fastDeepEqual( currentResults.current, results )
+ ) {
+ currentResults.current = results;
+ }
+
+ return currentResults.current;
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/collections/index.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/collections/index.ts
new file mode 100644
index 00000000000..e47d0e132a3
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/collections/index.ts
@@ -0,0 +1,3 @@
+export * from './use-collection-data';
+export * from './use-collection-header';
+export * from './use-collection';
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/collections/test/use-collection.jsx b/plugins/woocommerce-blocks/assets/js/base/context/hooks/collections/test/use-collection.jsx
new file mode 100644
index 00000000000..c64cb1e440d
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/collections/test/use-collection.jsx
@@ -0,0 +1,301 @@
+/**
+ * External dependencies
+ */
+import TestRenderer, { act } from 'react-test-renderer';
+import { createRegistry, RegistryProvider } from '@wordpress/data';
+import { Component as ReactComponent } from '@wordpress/element';
+import { COLLECTIONS_STORE_KEY as storeKey } from '@woocommerce/block-data';
+
+/**
+ * Internal dependencies
+ */
+import { useCollection } from '../use-collection';
+
+jest.mock( '@woocommerce/block-data', () => ( {
+ __esModule: true,
+ COLLECTIONS_STORE_KEY: 'test/store',
+} ) );
+
+class TestErrorBoundary extends ReactComponent {
+ constructor( props ) {
+ super( props );
+ this.state = { hasError: false, error: {} };
+ }
+ static getDerivedStateFromError( error ) {
+ // Update state so the next render will show the fallback UI.
+ return { hasError: true, error };
+ }
+
+ render() {
+ if ( this.state.hasError ) {
+ return
;
+ }
+
+ return this.props.children;
+ }
+}
+
+describe( 'useCollection', () => {
+ let registry, mocks, renderer;
+ const getProps = ( testRenderer ) => {
+ const { results, isLoading } =
+ testRenderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
+ return {
+ results,
+ isLoading,
+ };
+ };
+
+ const getWrappedComponents = ( Component, props ) => (
+
+
+
+
+ );
+
+ const getTestComponent =
+ () =>
+ ( { options } ) => {
+ const items = useCollection( options );
+ return
;
+ };
+
+ const setUpMocks = () => {
+ mocks = {
+ selectors: {
+ getCollectionError: jest.fn().mockReturnValue( false ),
+ getCollection: jest
+ .fn()
+ .mockImplementation( () => ( { foo: 'bar' } ) ),
+ hasFinishedResolution: jest.fn().mockReturnValue( true ),
+ },
+ };
+ registry.registerStore( storeKey, {
+ reducer: () => ( {} ),
+ selectors: mocks.selectors,
+ } );
+ };
+
+ beforeEach( () => {
+ registry = createRegistry();
+ mocks = {};
+ renderer = null;
+ setUpMocks();
+ } );
+ it(
+ 'should throw an error if an options object is provided without ' +
+ 'a namespace property',
+ () => {
+ const TestComponent = getTestComponent();
+ act( () => {
+ renderer = TestRenderer.create(
+ getWrappedComponents( TestComponent, {
+ options: {
+ resourceName: 'products',
+ query: { bar: 'foo' },
+ },
+ } )
+ );
+ } );
+ //eslint-disable-next-line testing-library/await-async-query
+ const props = renderer.root.findByType( 'div' ).props;
+ expect( props[ 'data-error' ].message ).toMatch( /options object/ );
+ expect( console ).toHaveErrored( /your React components:/ );
+ renderer.unmount();
+ }
+ );
+ it(
+ 'should throw an error if an options object is provided without ' +
+ 'a resourceName property',
+ () => {
+ const TestComponent = getTestComponent();
+ act( () => {
+ renderer = TestRenderer.create(
+ getWrappedComponents( TestComponent, {
+ options: {
+ namespace: 'test/store',
+ query: { bar: 'foo' },
+ },
+ } )
+ );
+ } );
+ //eslint-disable-next-line testing-library/await-async-query
+ const props = renderer.root.findByType( 'div' ).props;
+ expect( props[ 'data-error' ].message ).toMatch( /options object/ );
+ expect( console ).toHaveErrored( /your React components:/ );
+ renderer.unmount();
+ }
+ );
+ it(
+ 'should return expected behaviour for equivalent query on props ' +
+ 'across renders',
+ () => {
+ const TestComponent = getTestComponent();
+ act( () => {
+ renderer = TestRenderer.create(
+ getWrappedComponents( TestComponent, {
+ options: {
+ namespace: 'test/store',
+ resourceName: 'products',
+ query: { bar: 'foo' },
+ },
+ } )
+ );
+ } );
+ const { results } = getProps( renderer );
+ // rerender
+ act( () => {
+ renderer.update(
+ getWrappedComponents( TestComponent, {
+ options: {
+ namespace: 'test/store',
+ resourceName: 'products',
+ query: { bar: 'foo' },
+ },
+ } )
+ );
+ } );
+ // re-render should result in same products object because although
+ // query-state is a different instance, it's still equivalent.
+ const { results: newResults } = getProps( renderer );
+ expect( newResults ).toBe( results );
+ // now let's change the query passed through to verify new object
+ // is created.
+ // remember this won't actually change the results because the mock
+ // selector is returning an equivalent object when it is called,
+ // however it SHOULD be a new object instance.
+ act( () => {
+ renderer.update(
+ getWrappedComponents( TestComponent, {
+ options: {
+ namespace: 'test/store',
+ resourceName: 'products',
+ query: { foo: 'bar' },
+ },
+ } )
+ );
+ } );
+ const { results: resultsVerification } = getProps( renderer );
+ expect( resultsVerification ).not.toBe( results );
+ expect( resultsVerification ).toEqual( results );
+ renderer.unmount();
+ }
+ );
+ it(
+ 'should return expected behaviour for equivalent resourceValues on' +
+ ' props across renders',
+ () => {
+ const TestComponent = getTestComponent();
+ act( () => {
+ renderer = TestRenderer.create(
+ getWrappedComponents( TestComponent, {
+ options: {
+ namespace: 'test/store',
+ resourceName: 'products',
+ resourceValues: [ 10, 20 ],
+ },
+ } )
+ );
+ } );
+ const { results } = getProps( renderer );
+ // rerender
+ act( () => {
+ renderer.update(
+ getWrappedComponents( TestComponent, {
+ options: {
+ namespace: 'test/store',
+ resourceName: 'products',
+ resourceValues: [ 10, 20 ],
+ },
+ } )
+ );
+ } );
+ // re-render should result in same products object because although
+ // query-state is a different instance, it's still equivalent.
+ const { results: newResults } = getProps( renderer );
+ expect( newResults ).toBe( results );
+ // now let's change the query passed through to verify new object
+ // is created.
+ // remember this won't actually change the results because the mock
+ // selector is returning an equivalent object when it is called,
+ // however it SHOULD be a new object instance.
+ act( () => {
+ renderer.update(
+ getWrappedComponents( TestComponent, {
+ options: {
+ namespace: 'test/store',
+ resourceName: 'products',
+ resourceValues: [ 20, 10 ],
+ },
+ } )
+ );
+ } );
+ const { results: resultsVerification } = getProps( renderer );
+ expect( resultsVerification ).not.toBe( results );
+ expect( resultsVerification ).toEqual( results );
+ renderer.unmount();
+ }
+ );
+ it( 'should return previous query results if `shouldSelect` is false', () => {
+ mocks.selectors.getCollection.mockImplementation(
+ ( state, ...args ) => {
+ return args;
+ }
+ );
+ const TestComponent = getTestComponent();
+ act( () => {
+ renderer = TestRenderer.create(
+ getWrappedComponents( TestComponent, {
+ options: {
+ namespace: 'test/store',
+ resourceName: 'products',
+ resourceValues: [ 10, 20 ],
+ },
+ } )
+ );
+ } );
+ const { results } = getProps( renderer );
+ // rerender but with shouldSelect to false
+ act( () => {
+ renderer.update(
+ getWrappedComponents( TestComponent, {
+ options: {
+ namespace: 'test/store',
+ resourceName: 'productsb',
+ resourceValues: [ 10, 30 ],
+ shouldSelect: false,
+ },
+ } )
+ );
+ } );
+ const { results: results2 } = getProps( renderer );
+ expect( results2 ).toBe( results );
+ // expect 2 calls because internally, useSelect invokes callback twice
+ // on mount.
+ expect( mocks.selectors.getCollection ).toHaveBeenCalledTimes( 2 );
+
+ // rerender again but set shouldSelect to true again and we should see
+ // new results
+ act( () => {
+ renderer.update(
+ getWrappedComponents( TestComponent, {
+ options: {
+ namespace: 'test/store',
+ resourceName: 'productsb',
+ resourceValues: [ 10, 30 ],
+ shouldSelect: true,
+ },
+ } )
+ );
+ } );
+ const { results: results3 } = getProps( renderer );
+ expect( results3 ).not.toEqual( results );
+ expect( results3 ).toEqual( [
+ 'test/store',
+ 'productsb',
+ {},
+ [ 10, 30 ],
+ ] );
+ } );
+} );
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/collections/use-collection-data.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/collections/use-collection-data.ts
new file mode 100644
index 00000000000..07bb5afdbd2
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/collections/use-collection-data.ts
@@ -0,0 +1,171 @@
+/**
+ * External dependencies
+ */
+import { useState, useEffect, useMemo } from '@wordpress/element';
+import { useDebounce } from 'use-debounce';
+import { objectHasProp } from '@woocommerce/types';
+import { sort } from 'fast-sort';
+import { useShallowEqual } from '@woocommerce/base-hooks';
+
+/**
+ * Internal dependencies
+ */
+import { useQueryStateByContext, useQueryStateByKey } from '../use-query-state';
+import { useCollection } from './use-collection';
+import { useQueryStateContext } from '../../providers/query-state-context';
+
+const buildCollectionDataQuery = (
+ collectionDataQueryState: Record< string, unknown >
+) => {
+ const query = collectionDataQueryState;
+
+ if (
+ Array.isArray( collectionDataQueryState.calculate_attribute_counts )
+ ) {
+ query.calculate_attribute_counts = sort(
+ collectionDataQueryState.calculate_attribute_counts.map(
+ ( { taxonomy, queryType } ) => {
+ return {
+ taxonomy,
+ query_type: queryType,
+ };
+ }
+ )
+ ).asc( [ 'taxonomy', 'query_type' ] );
+ }
+
+ return query;
+};
+
+interface UseCollectionDataProps {
+ queryAttribute?: {
+ taxonomy: string;
+ queryType: string;
+ };
+ queryPrices?: boolean;
+ queryStock?: boolean;
+ queryRating?: boolean;
+ queryState: Record< string, unknown >;
+ isEditor?: boolean;
+}
+
+export const useCollectionData = ( {
+ queryAttribute,
+ queryPrices,
+ queryStock,
+ queryRating,
+ queryState,
+ isEditor = false,
+}: UseCollectionDataProps ) => {
+ let context = useQueryStateContext();
+ context = `${ context }-collection-data`;
+
+ const [ collectionDataQueryState ] = useQueryStateByContext( context );
+ const [ calculateAttributesQueryState, setCalculateAttributesQueryState ] =
+ useQueryStateByKey( 'calculate_attribute_counts', [], context );
+ const [ calculatePriceRangeQueryState, setCalculatePriceRangeQueryState ] =
+ useQueryStateByKey( 'calculate_price_range', null, context );
+ const [
+ calculateStockStatusQueryState,
+ setCalculateStockStatusQueryState,
+ ] = useQueryStateByKey( 'calculate_stock_status_counts', null, context );
+ const [ calculateRatingQueryState, setCalculateRatingQueryState ] =
+ useQueryStateByKey( 'calculate_rating_counts', null, context );
+
+ const currentQueryAttribute = useShallowEqual( queryAttribute || {} );
+ const currentQueryPrices = useShallowEqual( queryPrices );
+ const currentQueryStock = useShallowEqual( queryStock );
+ const currentQueryRating = useShallowEqual( queryRating );
+
+ useEffect( () => {
+ if (
+ typeof currentQueryAttribute === 'object' &&
+ Object.keys( currentQueryAttribute ).length
+ ) {
+ const foundAttribute = calculateAttributesQueryState.find(
+ ( attribute ) => {
+ return (
+ objectHasProp( currentQueryAttribute, 'taxonomy' ) &&
+ attribute.taxonomy === currentQueryAttribute.taxonomy
+ );
+ }
+ );
+
+ if ( ! foundAttribute ) {
+ setCalculateAttributesQueryState( [
+ ...calculateAttributesQueryState,
+ currentQueryAttribute,
+ ] );
+ }
+ }
+ }, [
+ currentQueryAttribute,
+ calculateAttributesQueryState,
+ setCalculateAttributesQueryState,
+ ] );
+
+ useEffect( () => {
+ if (
+ calculatePriceRangeQueryState !== currentQueryPrices &&
+ currentQueryPrices !== undefined
+ ) {
+ setCalculatePriceRangeQueryState( currentQueryPrices );
+ }
+ }, [
+ currentQueryPrices,
+ setCalculatePriceRangeQueryState,
+ calculatePriceRangeQueryState,
+ ] );
+
+ useEffect( () => {
+ if (
+ calculateStockStatusQueryState !== currentQueryStock &&
+ currentQueryStock !== undefined
+ ) {
+ setCalculateStockStatusQueryState( currentQueryStock );
+ }
+ }, [
+ currentQueryStock,
+ setCalculateStockStatusQueryState,
+ calculateStockStatusQueryState,
+ ] );
+
+ useEffect( () => {
+ if (
+ calculateRatingQueryState !== currentQueryRating &&
+ currentQueryRating !== undefined
+ ) {
+ setCalculateRatingQueryState( currentQueryRating );
+ }
+ }, [
+ currentQueryRating,
+ setCalculateRatingQueryState,
+ calculateRatingQueryState,
+ ] );
+
+ // Defer the select query so all collection-data query vars can be gathered.
+ const [ shouldSelect, setShouldSelect ] = useState( isEditor );
+ const [ debouncedShouldSelect ] = useDebounce( shouldSelect, 200 );
+
+ if ( ! shouldSelect ) {
+ setShouldSelect( true );
+ }
+
+ const collectionDataQueryVars = useMemo( () => {
+ return buildCollectionDataQuery( collectionDataQueryState );
+ }, [ collectionDataQueryState ] );
+
+ return useCollection( {
+ namespace: '/wc/store/v1',
+ resourceName: 'products/collection-data',
+ query: {
+ ...queryState,
+ page: undefined,
+ per_page: undefined,
+ orderby: undefined,
+ order: undefined,
+ ...collectionDataQueryVars,
+ },
+ shouldSelect: debouncedShouldSelect,
+ } );
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/collections/use-collection-header.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/collections/use-collection-header.ts
new file mode 100644
index 00000000000..51f1ad2cd97
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/collections/use-collection-header.ts
@@ -0,0 +1,98 @@
+/**
+ * External dependencies
+ */
+import { COLLECTIONS_STORE_KEY as storeKey } from '@woocommerce/block-data';
+import { useSelect } from '@wordpress/data';
+import { useShallowEqual } from '@woocommerce/base-hooks';
+
+/**
+ * Internal dependencies
+ */
+import { useCollectionOptions } from '.';
+
+/**
+ * This is a custom hook that is wired up to the `wc/store/collections` data
+ * store. Given a header key and a collections option object, this will ensure a
+ * component is kept up to date with the collection header value matching that
+ * query in the store state.
+ *
+ * @param {string} headerKey Used to indicate which header value to
+ * return for the given collection query.
+ * Example: `'x-wp-total'`
+ * @param {Object} options An object declaring the various
+ * collection arguments.
+ * @param {string} options.namespace The namespace for the collection.
+ * Example: `'/wc/blocks'`
+ * @param {string} options.resourceName The name of the resource for the
+ * collection. Example:
+ * `'products/attributes'`
+ * @param {Array} options.resourceValues An array of values (in correct order)
+ * that are substituted in the route
+ * placeholders for the collection route.
+ * Example: `[10, 20]`
+ * @param {Object} options.query An object of key value pairs for the
+ * query to execute on the collection
+ * (optional). Example:
+ * `{ order: 'ASC', order_by: 'price' }`
+ *
+ * @return {Object} This hook will return an object with two properties:
+ * - value Whatever value is attached to the specified
+ * header.
+ * - isLoading A boolean indicating whether the header is
+ * loading (true) or not.
+ */
+
+export const useCollectionHeader = (
+ headerKey: string,
+ options: Omit< useCollectionOptions, 'shouldSelect' >
+): {
+ value: unknown;
+ isLoading: boolean;
+} => {
+ const {
+ namespace,
+ resourceName,
+ resourceValues = [],
+ query = {},
+ } = options;
+ if ( ! namespace || ! resourceName ) {
+ throw new Error(
+ 'The options object must have valid values for the namespace and ' +
+ 'the resource name properties.'
+ );
+ }
+ // ensure we feed the previous reference if it's equivalent
+ const currentQuery = useShallowEqual( query );
+ const currentResourceValues = useShallowEqual( resourceValues );
+ const { value, isLoading = true } = useSelect(
+ ( select ) => {
+ const store = select( storeKey );
+ // filter out query if it is undefined.
+ const args = [
+ headerKey,
+ namespace,
+ resourceName,
+ currentQuery,
+ currentResourceValues,
+ ];
+ return {
+ value: store.getCollectionHeader( ...args ),
+ isLoading: store.hasFinishedResolution(
+ 'getCollectionHeader',
+ args
+ ),
+ };
+ },
+ [
+ headerKey,
+ namespace,
+ resourceName,
+ currentResourceValues,
+ currentQuery,
+ ]
+ );
+ return {
+ value,
+ isLoading,
+ };
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/collections/use-collection.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/collections/use-collection.ts
new file mode 100644
index 00000000000..a616f33e48c
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/collections/use-collection.ts
@@ -0,0 +1,126 @@
+/**
+ * External dependencies
+ */
+import { COLLECTIONS_STORE_KEY as storeKey } from '@woocommerce/block-data';
+import { useSelect } from '@wordpress/data';
+import { useRef } from '@wordpress/element';
+import { useShallowEqual, useThrowError } from '@woocommerce/base-hooks';
+import { isError } from '@woocommerce/types';
+
+/**
+ * This is a custom hook that is wired up to the `wc/store/collections` data
+ * store. Given a collections option object, this will ensure a component is
+ * kept up to date with the collection matching that query in the store state.
+ *
+ * @throws {Object} Throws an exception object if there was a problem with the
+ * API request, to be picked up by BlockErrorBoundry.
+ *
+ * @param {Object} options An object declaring the various
+ * collection arguments.
+ * @param {string} options.namespace The namespace for the collection.
+ * Example: `'/wc/blocks'`
+ * @param {string} options.resourceName The name of the resource for the
+ * collection. Example:
+ * `'products/attributes'`
+ * @param {Array} [options.resourceValues] An array of values (in correct order)
+ * that are substituted in the route
+ * placeholders for the collection route.
+ * Example: `[10, 20]`
+ * @param {Object} [options.query] An object of key value pairs for the
+ * query to execute on the collection
+ * Example:
+ * `{ order: 'ASC', order_by: 'price' }`
+ * @param {boolean} [options.shouldSelect] If false, the previous results will be
+ * returned and internal selects will not
+ * fire.
+ *
+ * @return {Object} This hook will return an object with two properties:
+ * - results An array of collection items returned.
+ * - isLoading A boolean indicating whether the collection is
+ * loading (true) or not.
+ */
+
+export interface useCollectionOptions {
+ namespace: string;
+ resourceName: string;
+ resourceValues?: number[];
+ query?: Record< string, unknown >;
+ shouldSelect?: boolean;
+ isEditor?: boolean;
+}
+
+export const useCollection = < T >(
+ options: useCollectionOptions
+): {
+ results: T[];
+ isLoading: boolean;
+} => {
+ const {
+ namespace,
+ resourceName,
+ resourceValues = [],
+ query = {},
+ shouldSelect = true,
+ } = options;
+ if ( ! namespace || ! resourceName ) {
+ throw new Error(
+ 'The options object must have valid values for the namespace and ' +
+ 'the resource properties.'
+ );
+ }
+ const currentResults = useRef< { results: T[]; isLoading: boolean } >( {
+ results: [],
+ isLoading: true,
+ } );
+ // ensure we feed the previous reference if it's equivalent
+ const currentQuery = useShallowEqual( query );
+ const currentResourceValues = useShallowEqual( resourceValues );
+ const throwError = useThrowError();
+ const results = useSelect(
+ ( select ) => {
+ if ( ! shouldSelect ) {
+ return null;
+ }
+
+ const store = select( storeKey );
+ const args = [
+ namespace,
+ resourceName,
+ currentQuery,
+ currentResourceValues,
+ ];
+ const error = store.getCollectionError( ...args );
+
+ if ( error ) {
+ if ( isError( error ) ) {
+ throwError( error );
+ } else {
+ throw new Error(
+ 'TypeError: `error` object is not an instance of Error constructor'
+ );
+ }
+ }
+
+ return {
+ results: store.getCollection< T[] >( ...args ),
+ isLoading: ! store.hasFinishedResolution(
+ 'getCollection',
+ args
+ ),
+ };
+ },
+ [
+ namespace,
+ resourceName,
+ currentResourceValues,
+ currentQuery,
+ shouldSelect,
+ ]
+ );
+ // if selector was not bailed, then update current results. Otherwise return
+ // previous results
+ if ( results !== null ) {
+ currentResults.current = results;
+ }
+ return currentResults.current;
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/index.js b/plugins/woocommerce-blocks/assets/js/base/context/hooks/index.js
new file mode 100644
index 00000000000..7c58ba2d1d3
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/index.js
@@ -0,0 +1,14 @@
+export * from './cart';
+export * from './collections';
+export * from './shipping';
+export * from './payment-methods';
+export * from './use-store-events';
+export * from './use-query-state';
+export * from './use-store-products';
+export * from './use-store-add-to-cart';
+export * from './use-customer-data';
+export * from './use-checkout-address';
+export * from './use-checkout-submit';
+export * from './use-checkout-extension-data';
+export * from './use-show-shipping-total-warning';
+export * from './use-validation';
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/index.js b/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/index.js
new file mode 100644
index 00000000000..f3db97b060f
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/index.js
@@ -0,0 +1,2 @@
+export { usePaymentMethodInterface } from './use-payment-method-interface';
+export * from './use-payment-methods';
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/test/use-payment-method-interface.js b/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/test/use-payment-method-interface.js
new file mode 100644
index 00000000000..de6323dd515
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/test/use-payment-method-interface.js
@@ -0,0 +1,61 @@
+/**
+ * Internal dependencies
+ */
+import { prepareTotalItems } from '../utils';
+
+describe( 'prepareTotalItems', () => {
+ const fixture = {
+ total_items: '200',
+ total_items_tax: '20',
+ total_fees: '100',
+ total_fees_tax: '10',
+ total_discount: '350',
+ total_discount_tax: '50',
+ total_shipping: '50',
+ total_shipping_tax: '5',
+ total_tax: '30',
+ };
+ const expected = [
+ {
+ key: 'total_items',
+ label: 'Subtotal:',
+ value: 200,
+ valueWithTax: 220,
+ },
+ {
+ key: 'total_fees',
+ label: 'Fees:',
+ value: 100,
+ valueWithTax: 110,
+ },
+ {
+ key: 'total_discount',
+ label: 'Discount:',
+ value: 350,
+ valueWithTax: 400,
+ },
+ {
+ key: 'total_tax',
+ label: 'Taxes:',
+ value: 30,
+ valueWithTax: 30,
+ },
+ ];
+ const expectedWithShipping = [
+ ...expected,
+ {
+ key: 'total_shipping',
+ label: 'Shipping:',
+ value: 50,
+ valueWithTax: 55,
+ },
+ ];
+ it( 'returns expected values when needsShipping is false', () => {
+ expect( prepareTotalItems( fixture, false ) ).toEqual( expected );
+ } );
+ it( 'returns expected values when needsShipping is true', () => {
+ expect( prepareTotalItems( fixture, true ) ).toEqual(
+ expectedWithShipping
+ );
+ } );
+} );
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts
new file mode 100644
index 00000000000..ac45027d9b1
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts
@@ -0,0 +1,245 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+import { useCallback, useEffect, useRef } from '@wordpress/element';
+import PaymentMethodLabel from '@woocommerce/base-components/cart-checkout/payment-method-label';
+import PaymentMethodIcons from '@woocommerce/base-components/cart-checkout/payment-method-icons';
+import { getSetting } from '@woocommerce/settings';
+import deprecated from '@wordpress/deprecated';
+import LoadingMask from '@woocommerce/base-components/loading-mask';
+import type { PaymentMethodInterface } from '@woocommerce/types';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+ CHECKOUT_STORE_KEY,
+ PAYMENT_STORE_KEY,
+ CART_STORE_KEY,
+} from '@woocommerce/block-data';
+import { ValidationInputError } from '@woocommerce/blocks-components';
+
+/**
+ * Internal dependencies
+ */
+import { useStoreCart } from '../cart/use-store-cart';
+import { useStoreCartCoupons } from '../cart/use-store-cart-coupons';
+import { noticeContexts, responseTypes } from '../../event-emit';
+import { useCheckoutEventsContext } from '../../providers/cart-checkout/checkout-events';
+import { usePaymentEventsContext } from '../../providers/cart-checkout/payment-events';
+import { useShippingDataContext } from '../../providers/cart-checkout/shipping';
+import { prepareTotalItems } from './utils';
+import { useShippingData } from '../shipping/use-shipping-data';
+
+/**
+ * Returns am interface to use as payment method props.
+ */
+export const usePaymentMethodInterface = (): PaymentMethodInterface => {
+ const {
+ onCheckoutBeforeProcessing,
+ onCheckoutValidationBeforeProcessing,
+ onCheckoutAfterProcessingWithSuccess,
+ onCheckoutAfterProcessingWithError,
+ onSubmit,
+ onCheckoutSuccess,
+ onCheckoutFail,
+ onCheckoutValidation,
+ } = useCheckoutEventsContext();
+
+ const { isCalculating, isComplete, isIdle, isProcessing, customerId } =
+ useSelect( ( select ) => {
+ const store = select( CHECKOUT_STORE_KEY );
+ return {
+ isComplete: store.isComplete(),
+ isIdle: store.isIdle(),
+ isProcessing: store.isProcessing(),
+ customerId: store.getCustomerId(),
+ isCalculating: store.isCalculating(),
+ };
+ } );
+ const { paymentStatus, activePaymentMethod, shouldSavePayment } = useSelect(
+ ( select ) => {
+ const store = select( PAYMENT_STORE_KEY );
+
+ return {
+ // The paymentStatus is exposed to third parties via the payment method interface so the API must not be changed
+ paymentStatus: {
+ get isPristine() {
+ deprecated( 'isPristine', {
+ since: '9.6.0',
+ alternative: 'isIdle',
+ plugin: 'WooCommerce Blocks',
+ link: 'https://github.com/woocommerce/woocommerce-blocks/pull/8110',
+ } );
+ return store.isPaymentIdle();
+ }, // isPristine is the same as isIdle
+ isIdle: store.isPaymentIdle(),
+ isStarted: store.isExpressPaymentStarted(),
+ isProcessing: store.isPaymentProcessing(),
+ get isFinished() {
+ deprecated( 'isFinished', {
+ since: '9.6.0',
+ plugin: 'WooCommerce Blocks',
+ link: 'https://github.com/woocommerce/woocommerce-blocks/pull/8110',
+ } );
+ return (
+ store.hasPaymentError() || store.isPaymentReady()
+ );
+ },
+ hasError: store.hasPaymentError(),
+ get hasFailed() {
+ deprecated( 'hasFailed', {
+ since: '9.6.0',
+ plugin: 'WooCommerce Blocks',
+ link: 'https://github.com/woocommerce/woocommerce-blocks/pull/8110',
+ } );
+ return store.hasPaymentError();
+ },
+ get isSuccessful() {
+ deprecated( 'isSuccessful', {
+ since: '9.6.0',
+ plugin: 'WooCommerce Blocks',
+ link: 'https://github.com/woocommerce/woocommerce-blocks/pull/8110',
+ } );
+ return store.isPaymentReady();
+ },
+ isReady: store.isPaymentReady(),
+ isDoingExpressPayment: store.isExpressPaymentMethodActive(),
+ },
+ activePaymentMethod: store.getActivePaymentMethod(),
+ shouldSavePayment: store.getShouldSavePaymentMethod(),
+ };
+ }
+ );
+
+ const { __internalSetExpressPaymentError } =
+ useDispatch( PAYMENT_STORE_KEY );
+
+ const { onPaymentProcessing, onPaymentSetup } = usePaymentEventsContext();
+ const {
+ shippingErrorStatus,
+ shippingErrorTypes,
+ onShippingRateSuccess,
+ onShippingRateFail,
+ onShippingRateSelectSuccess,
+ onShippingRateSelectFail,
+ } = useShippingDataContext();
+ const {
+ shippingRates,
+ isLoadingRates,
+ selectedRates,
+ isSelectingRate,
+ selectShippingRate,
+ needsShipping,
+ } = useShippingData();
+
+ const { billingAddress, shippingAddress } = useSelect( ( select ) =>
+ select( CART_STORE_KEY ).getCustomerData()
+ );
+ const { setShippingAddress } = useDispatch( CART_STORE_KEY );
+ const { cartItems, cartFees, cartTotals, extensions } = useStoreCart();
+ const { appliedCoupons } = useStoreCartCoupons();
+ const currentCartTotals = useRef(
+ prepareTotalItems( cartTotals, needsShipping )
+ );
+ const currentCartTotal = useRef( {
+ label: __( 'Total', 'woo-gutenberg-products-block' ),
+ value: parseInt( cartTotals.total_price, 10 ),
+ } );
+
+ useEffect( () => {
+ currentCartTotals.current = prepareTotalItems(
+ cartTotals,
+ needsShipping
+ );
+ currentCartTotal.current = {
+ label: __( 'Total', 'woo-gutenberg-products-block' ),
+ value: parseInt( cartTotals.total_price, 10 ),
+ };
+ }, [ cartTotals, needsShipping ] );
+
+ const deprecatedSetExpressPaymentError = useCallback(
+ ( errorMessage = '' ) => {
+ deprecated(
+ 'setExpressPaymentError should only be used by Express Payment Methods (using the provided onError handler).',
+ {
+ alternative: '',
+ plugin: 'woocommerce-gutenberg-products-block',
+ link: 'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4228',
+ }
+ );
+ __internalSetExpressPaymentError( errorMessage );
+ },
+ [ __internalSetExpressPaymentError ]
+ );
+
+ return {
+ activePaymentMethod,
+ billing: {
+ appliedCoupons,
+ billingAddress,
+ billingData: billingAddress,
+ cartTotal: currentCartTotal.current,
+ cartTotalItems: currentCartTotals.current,
+ currency: getCurrencyFromPriceResponse( cartTotals ),
+ customerId,
+ displayPricesIncludingTax: getSetting(
+ 'displayCartPricesIncludingTax',
+ false
+ ) as boolean,
+ },
+ cartData: {
+ cartItems,
+ cartFees,
+ extensions,
+ },
+ checkoutStatus: {
+ isCalculating,
+ isComplete,
+ isIdle,
+ isProcessing,
+ },
+ components: {
+ LoadingMask,
+ PaymentMethodIcons,
+ PaymentMethodLabel,
+ ValidationInputError,
+ },
+ emitResponse: {
+ noticeContexts,
+ responseTypes,
+ },
+ eventRegistration: {
+ onCheckoutAfterProcessingWithError,
+ onCheckoutAfterProcessingWithSuccess,
+ onCheckoutBeforeProcessing,
+ onCheckoutValidationBeforeProcessing,
+ onCheckoutSuccess,
+ onCheckoutFail,
+ onCheckoutValidation,
+ onPaymentProcessing,
+ onPaymentSetup,
+ onShippingRateFail,
+ onShippingRateSelectFail,
+ onShippingRateSelectSuccess,
+ onShippingRateSuccess,
+ },
+ onSubmit,
+ paymentStatus,
+ setExpressPaymentError: deprecatedSetExpressPaymentError,
+ shippingData: {
+ isSelectingRate,
+ needsShipping,
+ selectedRates,
+ setSelectedRates: selectShippingRate,
+ setShippingAddress,
+ shippingAddress,
+ shippingRates,
+ shippingRatesLoading: isLoadingRates,
+ },
+ shippingStatus: {
+ shippingErrorStatus,
+ shippingErrorTypes,
+ },
+ shouldSavePayment,
+ };
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/use-payment-methods.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/use-payment-methods.ts
new file mode 100644
index 00000000000..fda8fdc03a8
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/use-payment-methods.ts
@@ -0,0 +1,100 @@
+/**
+ * External dependencies
+ */
+import { useShallowEqual } from '@woocommerce/base-hooks';
+import type {
+ PaymentMethods,
+ ExpressPaymentMethods,
+ PaymentMethodConfigInstance,
+ ExpressPaymentMethodConfigInstance,
+} from '@woocommerce/types';
+import {
+ getPaymentMethods,
+ getExpressPaymentMethods,
+} from '@woocommerce/blocks-registry';
+import { useSelect } from '@wordpress/data';
+import { PAYMENT_STORE_KEY } from '@woocommerce/block-data';
+
+interface PaymentMethodState {
+ paymentMethods: PaymentMethods;
+ isInitialized: boolean;
+}
+interface ExpressPaymentMethodState {
+ paymentMethods: ExpressPaymentMethods;
+ isInitialized: boolean;
+}
+
+const usePaymentMethodState = (
+ express = false
+): PaymentMethodState | ExpressPaymentMethodState => {
+ const {
+ paymentMethodsInitialized,
+ expressPaymentMethodsInitialized,
+ availablePaymentMethods,
+ availableExpressPaymentMethods,
+ } = useSelect( ( select ) => {
+ const store = select( PAYMENT_STORE_KEY );
+
+ return {
+ paymentMethodsInitialized: store.paymentMethodsInitialized(),
+ expressPaymentMethodsInitialized:
+ store.expressPaymentMethodsInitialized(),
+ availableExpressPaymentMethods:
+ store.getAvailableExpressPaymentMethods(),
+ availablePaymentMethods: store.getAvailablePaymentMethods(),
+ };
+ } );
+
+ const availablePaymentMethodNames = Object.values(
+ availablePaymentMethods
+ ).map( ( { name } ) => name );
+ const availableExpressPaymentMethodNames = Object.values(
+ availableExpressPaymentMethods
+ ).map( ( { name } ) => name );
+
+ const registeredPaymentMethods = getPaymentMethods();
+ const registeredExpressPaymentMethods = getExpressPaymentMethods();
+
+ // Remove everything from registeredPaymentMethods that is not in availablePaymentMethodNames.
+ const paymentMethods = Object.keys( registeredPaymentMethods ).reduce(
+ ( acc: Record< string, PaymentMethodConfigInstance >, key ) => {
+ if ( availablePaymentMethodNames.includes( key ) ) {
+ acc[ key ] = registeredPaymentMethods[ key ];
+ }
+ return acc;
+ },
+ {}
+ );
+ // Remove everything from registeredExpressPaymentMethods that is not in availableExpressPaymentMethodNames.
+ const expressPaymentMethods = Object.keys(
+ registeredExpressPaymentMethods
+ ).reduce(
+ ( acc: Record< string, ExpressPaymentMethodConfigInstance >, key ) => {
+ if ( availableExpressPaymentMethodNames.includes( key ) ) {
+ acc[ key ] = registeredExpressPaymentMethods[ key ];
+ }
+ return acc;
+ },
+ {}
+ );
+
+ const currentPaymentMethods = useShallowEqual( paymentMethods );
+ const currentExpressPaymentMethods = useShallowEqual(
+ expressPaymentMethods
+ );
+
+ return {
+ paymentMethods: express
+ ? currentExpressPaymentMethods
+ : currentPaymentMethods,
+ isInitialized: express
+ ? expressPaymentMethodsInitialized
+ : paymentMethodsInitialized,
+ };
+};
+
+export const usePaymentMethods = ():
+ | PaymentMethodState
+ | ExpressPaymentMethodState => usePaymentMethodState( false );
+export const useExpressPaymentMethods = (): ExpressPaymentMethodState =>
+ usePaymentMethodState( true );
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/utils.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/utils.ts
new file mode 100644
index 00000000000..2e8f2e086ba
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/utils.ts
@@ -0,0 +1,85 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+ CartResponseTotals,
+ objectHasProp,
+ isString,
+} from '@woocommerce/types';
+
+export interface CartTotalItem {
+ key: string;
+ label: string;
+ value: number;
+ valueWithTax: number;
+}
+
+/**
+ * Prepares the total items into a shape usable for display as passed on to
+ * registered payment methods.
+ *
+ * @param {Object} totals Current cart total items
+ * @param {boolean} needsShipping Whether or not shipping is needed.
+ */
+export const prepareTotalItems = (
+ totals: CartResponseTotals,
+ needsShipping: boolean
+): CartTotalItem[] => {
+ const newTotals = [];
+
+ const factory = ( label: string, property: string ): CartTotalItem => {
+ const taxProperty = property + '_tax';
+ const value =
+ objectHasProp( totals, property ) && isString( totals[ property ] )
+ ? parseInt( totals[ property ] as string, 10 )
+ : 0;
+ const tax =
+ objectHasProp( totals, taxProperty ) &&
+ isString( totals[ taxProperty ] )
+ ? parseInt( totals[ taxProperty ] as string, 10 )
+ : 0;
+ return {
+ key: property,
+ label,
+ value,
+ valueWithTax: value + tax,
+ };
+ };
+
+ newTotals.push(
+ factory(
+ __( 'Subtotal:', 'woo-gutenberg-products-block' ),
+ 'total_items'
+ )
+ );
+
+ newTotals.push(
+ factory( __( 'Fees:', 'woo-gutenberg-products-block' ), 'total_fees' )
+ );
+
+ newTotals.push(
+ factory(
+ __( 'Discount:', 'woo-gutenberg-products-block' ),
+ 'total_discount'
+ )
+ );
+
+ newTotals.push( {
+ key: 'total_tax',
+ label: __( 'Taxes:', 'woo-gutenberg-products-block' ),
+ value: parseInt( totals.total_tax, 10 ),
+ valueWithTax: parseInt( totals.total_tax, 10 ),
+ } );
+
+ if ( needsShipping ) {
+ newTotals.push(
+ factory(
+ __( 'Shipping:', 'woo-gutenberg-products-block' ),
+ 'total_shipping'
+ )
+ );
+ }
+
+ return newTotals;
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/shipping/index.js b/plugins/woocommerce-blocks/assets/js/base/context/hooks/shipping/index.js
new file mode 100644
index 00000000000..0a9e7fe0065
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/shipping/index.js
@@ -0,0 +1,2 @@
+export * from './use-shipping-data';
+export * from './types';
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/shipping/types.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/shipping/types.ts
new file mode 100644
index 00000000000..d191ada754c
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/shipping/types.ts
@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import { Cart } from '@woocommerce/type-defs/cart';
+
+export interface ShippingData {
+ needsShipping: Cart[ 'needsShipping' ];
+ hasCalculatedShipping: Cart[ 'hasCalculatedShipping' ];
+ shippingRates: Cart[ 'shippingRates' ];
+ isLoadingRates: boolean;
+ selectedRates: Record< string, string | unknown >;
+ // Returns a function that accepts a shipping rate ID and a package ID.
+ selectShippingRate: (
+ newShippingRateId: string,
+ packageId?: string | number | undefined
+ ) => void;
+ // Only true when ALL packages support local pickup. If true, we can show the collection/delivery toggle
+ isCollectable: boolean;
+ // True when a rate is currently being selected and persisted to the server.
+ isSelectingRate: boolean;
+ // True when the user has chosen a local pickup method.
+ hasSelectedLocalPickup: boolean;
+}
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/shipping/use-shipping-data.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/shipping/use-shipping-data.ts
new file mode 100644
index 00000000000..0bb63870e87
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/shipping/use-shipping-data.ts
@@ -0,0 +1,141 @@
+/**
+ * External dependencies
+ */
+import {
+ CART_STORE_KEY as storeKey,
+ processErrorResponse,
+} from '@woocommerce/block-data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { isObject } from '@woocommerce/types';
+import { useEffect, useRef, useCallback } from '@wordpress/element';
+import {
+ hasCollectableRate,
+ deriveSelectedShippingRates,
+} from '@woocommerce/base-utils';
+import isShallowEqual from '@wordpress/is-shallow-equal';
+import { previewCart } from '@woocommerce/resource-previews';
+
+/**
+ * Internal dependencies
+ */
+import { useStoreEvents } from '../use-store-events';
+import type { ShippingData } from './types';
+
+export const useShippingData = (): ShippingData => {
+ const {
+ shippingRates,
+ needsShipping,
+ hasCalculatedShipping,
+ isLoadingRates,
+ isCollectable,
+ isSelectingRate,
+ } = useSelect( ( select ) => {
+ const isEditor = !! select( 'core/editor' );
+ const store = select( storeKey );
+ const rates = isEditor
+ ? previewCart.shipping_rates
+ : store.getShippingRates();
+ return {
+ shippingRates: rates,
+ needsShipping: isEditor
+ ? previewCart.needs_shipping
+ : store.getNeedsShipping(),
+ hasCalculatedShipping: isEditor
+ ? previewCart.has_calculated_shipping
+ : store.getHasCalculatedShipping(),
+ isLoadingRates: isEditor ? false : store.isCustomerDataUpdating(),
+ isCollectable: rates.every(
+ ( { shipping_rates: packageShippingRates } ) =>
+ packageShippingRates.find( ( { method_id: methodId } ) =>
+ hasCollectableRate( methodId )
+ )
+ ),
+ isSelectingRate: isEditor
+ ? false
+ : store.isShippingRateBeingSelected(),
+ };
+ } );
+
+ // set selected rates on ref so it's always current.
+ const selectedRates = useRef< Record< string, string > >( {} );
+ useEffect( () => {
+ const derivedSelectedRates =
+ deriveSelectedShippingRates( shippingRates );
+ if (
+ isObject( derivedSelectedRates ) &&
+ ! isShallowEqual( selectedRates.current, derivedSelectedRates )
+ ) {
+ selectedRates.current = derivedSelectedRates;
+ }
+ }, [ shippingRates ] );
+
+ const { selectShippingRate: dispatchSelectShippingRate } = useDispatch(
+ storeKey
+ ) as {
+ selectShippingRate: unknown;
+ } as {
+ selectShippingRate: (
+ newShippingRateId: string,
+ packageId?: string | number | null
+ ) => Promise< unknown >;
+ };
+
+ const hasSelectedLocalPickup = hasCollectableRate(
+ Object.values( selectedRates.current ).map(
+ ( rate ) => rate.split( ':' )[ 0 ]
+ )
+ );
+ // Selects a shipping rate, fires an event, and catch any errors.
+ const { dispatchCheckoutEvent } = useStoreEvents();
+ const selectShippingRate = useCallback(
+ (
+ newShippingRateId: string,
+ packageId?: string | number | undefined
+ ): void => {
+ let selectPromise;
+
+ if ( typeof newShippingRateId === 'undefined' ) {
+ return;
+ }
+
+ /**
+ * Picking location handling
+ *
+ * Forces pickup location to be selected for all packages since we don't allow a mix of shipping and pickup.
+ */
+ if ( hasCollectableRate( newShippingRateId.split( ':' )[ 0 ] ) ) {
+ selectPromise = dispatchSelectShippingRate(
+ newShippingRateId,
+ null
+ );
+ } else {
+ selectPromise = dispatchSelectShippingRate(
+ newShippingRateId,
+ packageId
+ );
+ }
+ selectPromise
+ .then( () => {
+ dispatchCheckoutEvent( 'set-selected-shipping-rate', {
+ shippingRateId: newShippingRateId,
+ } );
+ } )
+ .catch( ( error ) => {
+ processErrorResponse( error );
+ } );
+ },
+ [ dispatchSelectShippingRate, dispatchCheckoutEvent ]
+ );
+
+ return {
+ isSelectingRate,
+ selectedRates: selectedRates.current,
+ selectShippingRate,
+ shippingRates,
+ needsShipping,
+ hasCalculatedShipping,
+ isLoadingRates,
+ isCollectable,
+ hasSelectedLocalPickup,
+ };
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/test/use-checkout-submit.js b/plugins/woocommerce-blocks/assets/js/base/context/hooks/test/use-checkout-submit.js
new file mode 100644
index 00000000000..10e3114a249
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/test/use-checkout-submit.js
@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import TestRenderer, { act } from 'react-test-renderer';
+import { createRegistry, RegistryProvider } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { useCheckoutSubmit } from '../use-checkout-submit';
+import {
+ CHECKOUT_STORE_KEY,
+ config as checkoutStoreConfig,
+} from '../../../../data/checkout';
+import {
+ PAYMENT_STORE_KEY,
+ config as paymentDataStoreConfig,
+} from '../../../../data/payment';
+
+jest.mock( '../../providers/cart-checkout/checkout-events', () => {
+ const original = jest.requireActual(
+ '../../providers/cart-checkout/checkout-events'
+ );
+ return {
+ ...original,
+ useCheckoutEventsContext: () => {
+ return { onSubmit: jest.fn() };
+ },
+ };
+} );
+
+describe( 'useCheckoutSubmit', () => {
+ let registry, renderer;
+
+ const getWrappedComponents = ( Component ) => (
+
+
+ );
+
+ const getTestComponent = () => () => {
+ const data = useCheckoutSubmit();
+ return
;
+ };
+
+ beforeEach( () => {
+ registry = createRegistry( {
+ [ CHECKOUT_STORE_KEY ]: checkoutStoreConfig,
+ [ PAYMENT_STORE_KEY ]: paymentDataStoreConfig,
+ } );
+ renderer = null;
+ } );
+
+ it( 'onSubmit calls the correct action in the checkout events context', () => {
+ const TestComponent = getTestComponent();
+
+ act( () => {
+ renderer = TestRenderer.create(
+ getWrappedComponents( TestComponent )
+ );
+ } );
+
+ //eslint-disable-next-line testing-library/await-async-query
+ const { onSubmit } = renderer.root.findByType( 'div' ).props;
+
+ onSubmit();
+
+ expect( onSubmit ).toHaveBeenCalledTimes( 1 );
+ } );
+} );
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/test/use-query-state.jsx b/plugins/woocommerce-blocks/assets/js/base/context/hooks/test/use-query-state.jsx
new file mode 100644
index 00000000000..ded16addb0f
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/test/use-query-state.jsx
@@ -0,0 +1,263 @@
+/**
+ * External dependencies
+ */
+import TestRenderer, { act } from 'react-test-renderer';
+import { createRegistry, RegistryProvider } from '@wordpress/data';
+import { QUERY_STATE_STORE_KEY as storeKey } from '@woocommerce/block-data';
+
+/**
+ * Internal dependencies
+ */
+import {
+ useQueryStateByContext,
+ useQueryStateByKey,
+ useSynchronizedQueryState,
+} from '../use-query-state';
+
+jest.mock( '@woocommerce/block-data', () => ( {
+ __esModule: true,
+ QUERY_STATE_STORE_KEY: 'test/store',
+} ) );
+
+describe( 'Testing Query State Hooks', () => {
+ let registry, mocks;
+ beforeAll( () => {
+ registry = createRegistry();
+ mocks = {};
+ } );
+ /**
+ * Test helper to return a tuple containing the expected query value and the
+ * expected query state action creator from the given rendered test instance.
+ *
+ * @param {Object} testRenderer An instance of the created test component.
+ *
+ * @return {Array} A tuple containing the expected query value as the first
+ * element and the expected query action creator as the
+ * second argument.
+ */
+ const getProps = ( testRenderer ) => {
+ //eslint-disable-next-line testing-library/await-async-query
+ const props = testRenderer.root.findByType( 'div' ).props;
+ return [ props[ 'data-queryState' ], props[ 'data-setQueryState' ] ];
+ };
+
+ /**
+ * Returns the given component wrapped in the registry provider for
+ * instantiating using the TestRenderer using the current prepared registry
+ * for the TestRenderer to instantiate with.
+ *
+ * @param {*} Component The test component to wrap.
+ * @param {Object} props Props to feed the wrapped component.
+ *
+ * @return {*} Wrapped component.
+ */
+ const getWrappedComponent = ( Component, props ) => (
+
+
+ );
+
+ /**
+ * Returns a TestComponent for the provided hook to test with, and the
+ * expected PropKeys for obtaining the values to be fed to the hook as
+ * arguments.
+ *
+ * @param {Function} hookTested The hook being tested to use in the
+ * test comopnent.
+ * @param {Array} propKeysForArgs An array of keys for the props that
+ * will be used on the test component that
+ * will have values fed to the tested
+ * hook.
+ *
+ * @return {*} A component ready for testing with!
+ */
+ const getTestComponent = ( hookTested, propKeysForArgs ) => ( props ) => {
+ const args = propKeysForArgs.map( ( key ) => props[ key ] );
+ const [ queryValue, setQueryValue ] = hookTested( ...args );
+ return (
+
+ );
+ };
+
+ /**
+ * A helper for setting up the `mocks` object and the `registry` mock before
+ * each test.
+ *
+ * @param {string} actionMockName This should be the name of the action
+ * that the hook returns. This will be
+ * mocked using `mocks.action` when
+ * registered in the mock registry.
+ * @param {string} selectorMockName This should be the mame of the selector
+ * that the hook uses. This will be mocked
+ * using `mocks.selector` when registered
+ * in the mock registry.
+ */
+ const setupMocks = ( actionMockName, selectorMockName ) => {
+ mocks.action = jest.fn().mockReturnValue( { type: 'testAction' } );
+ mocks.selector = jest.fn().mockReturnValue( { foo: 'bar' } );
+ registry.registerStore( storeKey, {
+ reducer: () => ( {} ),
+ actions: {
+ [ actionMockName ]: mocks.action,
+ },
+ selectors: {
+ [ selectorMockName ]: mocks.selector,
+ },
+ } );
+ };
+ describe( 'useQueryStateByContext', () => {
+ const TestComponent = getTestComponent( useQueryStateByContext, [
+ 'context',
+ ] );
+ let renderer;
+ beforeEach( () => {
+ renderer = null;
+ setupMocks( 'setValueForQueryContext', 'getValueForQueryContext' );
+ } );
+ afterEach( () => {
+ act( () => {
+ renderer.unmount();
+ } );
+ } );
+ it(
+ 'calls useSelect with the provided context and returns expected' +
+ ' values',
+ () => {
+ const { action, selector } = mocks;
+ act( () => {
+ renderer = TestRenderer.create(
+ getWrappedComponent( TestComponent, {
+ context: 'test-context',
+ } )
+ );
+ } );
+ const [ queryState, setQueryState ] = getProps( renderer );
+ // the {} is because all selectors are called internally in the
+ // registry with the first argument being the state which is empty.
+ expect( selector ).toHaveBeenLastCalledWith(
+ {},
+ 'test-context',
+ undefined
+ );
+ expect( queryState ).toEqual( { foo: 'bar' } );
+ expect( action ).not.toHaveBeenCalled();
+
+ //execute dispatcher and make sure it's called.
+ act( () => {
+ setQueryState( { foo: 'bar' } );
+ } );
+ expect( action ).toHaveBeenCalledWith( 'test-context', {
+ foo: 'bar',
+ } );
+ }
+ );
+ } );
+ describe( 'useQueryStateByKey', () => {
+ const TestComponent = getTestComponent( useQueryStateByKey, [
+ 'queryKey',
+ undefined,
+ 'context',
+ ] );
+ let renderer;
+ beforeEach( () => {
+ renderer = null;
+ setupMocks( 'setQueryValue', 'getValueForQueryKey' );
+ } );
+ afterEach( () => {
+ act( () => {
+ renderer.unmount();
+ } );
+ } );
+ it(
+ 'calls useSelect with the provided context and returns expected' +
+ ' values',
+ () => {
+ const { selector, action } = mocks;
+ act( () => {
+ renderer = TestRenderer.create(
+ getWrappedComponent( TestComponent, {
+ context: 'test-context',
+ queryKey: 'someValue',
+ } )
+ );
+ } );
+ const [ queryState, setQueryState ] = getProps( renderer );
+ // the {} is because all selectors are called internally in the
+ // registry with the first argument being the state which is empty.
+ expect( selector ).toHaveBeenLastCalledWith(
+ {},
+ 'test-context',
+ 'someValue',
+ undefined
+ );
+ expect( queryState ).toEqual( { foo: 'bar' } );
+ expect( action ).not.toHaveBeenCalled();
+
+ //execute dispatcher and make sure it's called.
+ act( () => {
+ setQueryState( { foo: 'bar' } );
+ } );
+ expect( action ).toHaveBeenCalledWith(
+ 'test-context',
+ 'someValue',
+ { foo: 'bar' }
+ );
+ }
+ );
+ } );
+ // Note: these tests only add partial coverage because the state is not
+ // actually updated by the action dispatch via our mocks.
+ describe( 'useSynchronizedQueryState', () => {
+ const TestComponent = getTestComponent( useSynchronizedQueryState, [
+ 'synchronizedQuery',
+ 'context',
+ ] );
+ const initialQuery = { a: 'b' };
+ let renderer;
+ beforeEach( () => {
+ setupMocks( 'setValueForQueryContext', 'getValueForQueryContext' );
+ } );
+ it( 'returns provided query state on initial render', () => {
+ const { action, selector } = mocks;
+ act( () => {
+ renderer = TestRenderer.create(
+ getWrappedComponent( TestComponent, {
+ context: 'test-context',
+ synchronizedQuery: initialQuery,
+ } )
+ );
+ } );
+ const [ queryState ] = getProps( renderer );
+ expect( queryState ).toBe( initialQuery );
+ expect( selector ).toHaveBeenLastCalledWith(
+ {},
+ 'test-context',
+ undefined
+ );
+ expect( action ).toHaveBeenCalledWith( 'test-context', {
+ foo: 'bar',
+ a: 'b',
+ } );
+ } );
+ it( 'returns merged queryState on subsequent render', () => {
+ act( () => {
+ renderer.update(
+ getWrappedComponent( TestComponent, {
+ context: 'test-context',
+ synchronizedQuery: initialQuery,
+ } )
+ );
+ } );
+ // note our test doesn't interact with an actual reducer so the
+ // store state is not updated. Here we're just verifying that
+ // what is is returned by the state selector mock is returned.
+ // However we DO expect this to be a new object.
+ const [ queryState ] = getProps( renderer );
+ expect( queryState ).not.toBe( initialQuery );
+ expect( queryState ).toEqual( { foo: 'bar' } );
+ } );
+ } );
+} );
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/test/use-store-products.js b/plugins/woocommerce-blocks/assets/js/base/context/hooks/test/use-store-products.js
new file mode 100644
index 00000000000..5695994b662
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/test/use-store-products.js
@@ -0,0 +1,109 @@
+/**
+ * External dependencies
+ */
+import TestRenderer, { act } from 'react-test-renderer';
+import { createRegistry, RegistryProvider } from '@wordpress/data';
+import { COLLECTIONS_STORE_KEY as storeKey } from '@woocommerce/block-data';
+
+/**
+ * Internal dependencies
+ */
+import { useStoreProducts } from '../use-store-products';
+
+jest.mock( '@woocommerce/block-data', () => ( {
+ __esModule: true,
+ COLLECTIONS_STORE_KEY: 'test/store',
+} ) );
+
+describe( 'useStoreProducts', () => {
+ let registry, mocks, renderer;
+ const getProps = ( testRenderer ) => {
+ const { products, totalProducts, productsLoading } =
+ testRenderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
+ return {
+ products,
+ totalProducts,
+ productsLoading,
+ };
+ };
+
+ const getWrappedComponents = ( Component, props ) => (
+
+
+ );
+
+ const getTestComponent =
+ () =>
+ ( { query } ) => {
+ const items = useStoreProducts( query );
+ return
;
+ };
+
+ const setUpMocks = () => {
+ mocks = {
+ selectors: {
+ getCollectionError: jest.fn().mockReturnValue( false ),
+ getCollection: jest
+ .fn()
+ .mockImplementation( () => ( { foo: 'bar' } ) ),
+ getCollectionHeader: jest.fn().mockReturnValue( 22 ),
+ hasFinishedResolution: jest.fn().mockReturnValue( true ),
+ },
+ };
+ registry.registerStore( storeKey, {
+ reducer: () => ( {} ),
+ selectors: mocks.selectors,
+ } );
+ };
+
+ beforeEach( () => {
+ registry = createRegistry();
+ mocks = {};
+ renderer = null;
+ setUpMocks();
+ } );
+ it(
+ 'should return expected behaviour for equivalent query on props ' +
+ 'across renders',
+ () => {
+ const TestComponent = getTestComponent();
+ act( () => {
+ renderer = TestRenderer.create(
+ getWrappedComponents( TestComponent, {
+ query: { bar: 'foo' },
+ } )
+ );
+ } );
+ const { products } = getProps( renderer );
+ // rerender
+ act( () => {
+ renderer.update(
+ getWrappedComponents( TestComponent, {
+ query: { bar: 'foo' },
+ } )
+ );
+ } );
+ // re-render should result in same products object because although
+ // query-state is a different instance, it's still equivalent.
+ const { products: newProducts } = getProps( renderer );
+ expect( newProducts ).toBe( products );
+ // now let's change the query passed through to verify new object
+ // is created.
+ // remember this won't actually change the results because the mock
+ // selector is returning an equivalent object when it is called,
+ // however it SHOULD be a new object instance.
+ act( () => {
+ renderer.update(
+ getWrappedComponents( TestComponent, {
+ query: { foo: 'bar' },
+ } )
+ );
+ } );
+ const { products: productsVerification } = getProps( renderer );
+ expect( productsVerification ).not.toBe( products );
+ expect( productsVerification ).toEqual( products );
+ renderer.unmount();
+ }
+ );
+} );
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/tsconfig.json b/plugins/woocommerce-blocks/assets/js/base/context/hooks/tsconfig.json
new file mode 100644
index 00000000000..78cca9b6115
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/tsconfig.json
@@ -0,0 +1,16 @@
+{
+ "extends": "../../../../../tsconfig.base.json",
+ "compilerOptions": {},
+ "include": [
+ ".",
+ "../../../../../packages/checkout/index.js",
+ "../../../../../packages/prices/index.js",
+ "../providers/cart-checkout/checkout-events/index.tsx",
+ "../providers/cart-checkout/payment-events/index.tsx",
+ "../providers/cart-checkout/shipping/index.js",
+ "../../components/cart-checkout/totals/shipping",
+ "../../../editor-components/utils/*",
+ "../../../data/index.ts"
+ ],
+ "exclude": [ "**/test/**" ]
+}
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-checkout-address.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-checkout-address.ts
new file mode 100644
index 00000000000..15d52462c21
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-checkout-address.ts
@@ -0,0 +1,89 @@
+/**
+ * External dependencies
+ */
+import {
+ defaultAddressFields,
+ AddressFields,
+ ShippingAddress,
+ BillingAddress,
+ getSetting,
+} from '@woocommerce/settings';
+import { useCallback } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data';
+
+/**
+ * Internal dependencies
+ */
+import { useCustomerData } from './use-customer-data';
+import { useShippingData } from './shipping/use-shipping-data';
+
+interface CheckoutAddress {
+ shippingAddress: ShippingAddress;
+ billingAddress: BillingAddress;
+ setShippingAddress: ( data: Partial< ShippingAddress > ) => void;
+ setBillingAddress: ( data: Partial< BillingAddress > ) => void;
+ setEmail: ( value: string ) => void;
+ useShippingAsBilling: boolean;
+ setUseShippingAsBilling: ( useShippingAsBilling: boolean ) => void;
+ defaultAddressFields: AddressFields;
+ showShippingFields: boolean;
+ showBillingFields: boolean;
+ forcedBillingAddress: boolean;
+ useBillingAsShipping: boolean;
+ needsShipping: boolean;
+ showShippingMethods: boolean;
+}
+
+/**
+ * Custom hook for exposing address related functionality for the checkout address form.
+ */
+export const useCheckoutAddress = (): CheckoutAddress => {
+ const { needsShipping } = useShippingData();
+ const { useShippingAsBilling, prefersCollection } = useSelect(
+ ( select ) => ( {
+ useShippingAsBilling:
+ select( CHECKOUT_STORE_KEY ).getUseShippingAsBilling(),
+ prefersCollection: select( CHECKOUT_STORE_KEY ).prefersCollection(),
+ } )
+ );
+ const { __internalSetUseShippingAsBilling } =
+ useDispatch( CHECKOUT_STORE_KEY );
+ const {
+ billingAddress,
+ setBillingAddress,
+ shippingAddress,
+ setShippingAddress,
+ } = useCustomerData();
+
+ const setEmail = useCallback(
+ ( value: string ) =>
+ void setBillingAddress( {
+ email: value,
+ } ),
+ [ setBillingAddress ]
+ );
+
+ const forcedBillingAddress: boolean = getSetting(
+ 'forcedBillingAddress',
+ false
+ );
+ return {
+ shippingAddress,
+ billingAddress,
+ setShippingAddress,
+ setBillingAddress,
+ setEmail,
+ defaultAddressFields,
+ useShippingAsBilling,
+ setUseShippingAsBilling: __internalSetUseShippingAsBilling,
+ needsShipping,
+ showShippingFields:
+ ! forcedBillingAddress && needsShipping && ! prefersCollection,
+ showShippingMethods: needsShipping && ! prefersCollection,
+ showBillingFields:
+ ! needsShipping || ! useShippingAsBilling || !! prefersCollection,
+ forcedBillingAddress,
+ useBillingAsShipping: forcedBillingAddress || !! prefersCollection,
+ };
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-checkout-extension-data.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-checkout-extension-data.ts
new file mode 100644
index 00000000000..4660071b717
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-checkout-extension-data.ts
@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback, useRef } from '@wordpress/element';
+import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data';
+
+/**
+ * Internal dependencies
+ */
+import type { CheckoutState } from '../../../data/checkout/default-state';
+
+/**
+ * Custom hook for setting custom checkout data which is passed to the wc/store/checkout endpoint when processing orders.
+ */
+export const useCheckoutExtensionData = (): {
+ extensionData: CheckoutState[ 'extensionData' ];
+ setExtensionData: (
+ namespace: string,
+ key: string,
+ value: unknown
+ ) => void;
+} => {
+ const { __internalSetExtensionData } = useDispatch( CHECKOUT_STORE_KEY );
+ const extensionData = useSelect( ( select ) =>
+ select( CHECKOUT_STORE_KEY ).getExtensionData()
+ );
+ const extensionDataRef = useRef( extensionData );
+
+ const setExtensionData = useCallback(
+ ( namespace, key, value ) => {
+ __internalSetExtensionData( namespace, {
+ [ key ]: value,
+ } );
+ },
+ [ __internalSetExtensionData ]
+ );
+
+ return {
+ extensionData: extensionDataRef.current,
+ setExtensionData,
+ };
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-checkout-submit.js b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-checkout-submit.js
new file mode 100644
index 00000000000..b10d443e08c
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-checkout-submit.js
@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import { CHECKOUT_STORE_KEY, PAYMENT_STORE_KEY } from '@woocommerce/block-data';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { useCheckoutEventsContext } from '../providers';
+import { usePaymentMethods } from './payment-methods/use-payment-methods';
+
+/**
+ * Returns the submitButtonText, onSubmit interface from the checkout context,
+ * and an indication of submission status.
+ */
+export const useCheckoutSubmit = () => {
+ const {
+ isCalculating,
+ isBeforeProcessing,
+ isProcessing,
+ isAfterProcessing,
+ isComplete,
+ hasError,
+ } = useSelect( ( select ) => {
+ const store = select( CHECKOUT_STORE_KEY );
+ return {
+ isCalculating: store.isCalculating(),
+ isBeforeProcessing: store.isBeforeProcessing(),
+ isProcessing: store.isProcessing(),
+ isAfterProcessing: store.isAfterProcessing(),
+ isComplete: store.isComplete(),
+ hasError: store.hasError(),
+ };
+ } );
+ const { activePaymentMethod, isExpressPaymentMethodActive } = useSelect(
+ ( select ) => {
+ const store = select( PAYMENT_STORE_KEY );
+
+ return {
+ activePaymentMethod: store.getActivePaymentMethod(),
+ isExpressPaymentMethodActive:
+ store.isExpressPaymentMethodActive(),
+ };
+ }
+ );
+
+ const { onSubmit } = useCheckoutEventsContext();
+
+ const { paymentMethods = {} } = usePaymentMethods();
+ const paymentMethod = paymentMethods[ activePaymentMethod ] || {};
+ const waitingForProcessing =
+ isProcessing || isAfterProcessing || isBeforeProcessing;
+ const waitingForRedirect = isComplete && ! hasError;
+ const paymentMethodButtonLabel = paymentMethod.placeOrderButtonLabel;
+
+ return {
+ paymentMethodButtonLabel,
+ onSubmit,
+ isCalculating,
+ isDisabled: isProcessing || isExpressPaymentMethodActive,
+ waitingForProcessing,
+ waitingForRedirect,
+ };
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-customer-data.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-customer-data.ts
new file mode 100644
index 00000000000..1f970fde032
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-customer-data.ts
@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { CART_STORE_KEY as storeKey } from '@woocommerce/block-data';
+import type { BillingAddress, ShippingAddress } from '@woocommerce/settings';
+
+export interface CustomerDataType {
+ isInitialized: boolean;
+ billingAddress: BillingAddress;
+ shippingAddress: ShippingAddress;
+ setBillingAddress: ( data: Partial< BillingAddress > ) => void;
+ setShippingAddress: ( data: Partial< ShippingAddress > ) => void;
+}
+
+/**
+ * This is a custom hook for syncing customer address data (billing and shipping) with the server.
+ */
+export const useCustomerData = (): CustomerDataType => {
+ const { customerData, isInitialized } = useSelect( ( select ) => {
+ const store = select( storeKey );
+ return {
+ customerData: store.getCustomerData(),
+ isInitialized: store.hasFinishedResolution( 'getCartData' ),
+ };
+ } );
+ const { setShippingAddress, setBillingAddress } = useDispatch( storeKey );
+
+ return {
+ isInitialized,
+ billingAddress: customerData.billingAddress,
+ shippingAddress: customerData.shippingAddress,
+ setBillingAddress,
+ setShippingAddress,
+ };
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-product-attributes.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-product-attributes.ts
new file mode 100644
index 00000000000..be1e5e0f24a
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-product-attributes.ts
@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import { useEffect, useRef, useState } from '@wordpress/element';
+import { getAttributes, getTerms } from '@woocommerce/editor-components/utils';
+import {
+ AttributeObject,
+ AttributeTerm,
+ AttributeWithTerms,
+} from '@woocommerce/types';
+import { formatError } from '@woocommerce/base-utils';
+
+export default function useProductAttributes( shouldLoadAttributes: boolean ) {
+ const [ errorLoadingAttributes, setErrorLoadingAttributes ] =
+ useState< Awaited< ReturnType< typeof formatError > > | null >( null );
+ const [ isLoadingAttributes, setIsLoadingAttributes ] = useState( false );
+ const [ productsAttributes, setProductsAttributes ] = useState<
+ AttributeWithTerms[]
+ >( [] );
+ const hasLoadedAttributes = useRef( false );
+
+ useEffect( () => {
+ if (
+ ! shouldLoadAttributes ||
+ isLoadingAttributes ||
+ hasLoadedAttributes.current
+ )
+ return;
+
+ async function fetchAttributesWithTerms() {
+ setIsLoadingAttributes( true );
+
+ try {
+ const attributes: AttributeObject[] = await getAttributes();
+ const attributesWithTerms: AttributeWithTerms[] = [];
+
+ for ( const attribute of attributes ) {
+ const terms: AttributeTerm[] = await getTerms(
+ attribute.id
+ );
+
+ attributesWithTerms.push( {
+ ...attribute,
+ // Manually adding the parent id because of a Rest API bug
+ // returning always `0` as parent.
+ // see https://github.com/woocommerce/woocommerce-blocks/issues/8501
+ parent: 0,
+ terms: terms.map( ( term ) => ( {
+ ...term,
+ attr_slug: attribute.taxonomy,
+ parent: attribute.id,
+ } ) ),
+ } );
+ }
+
+ setProductsAttributes( attributesWithTerms );
+ hasLoadedAttributes.current = true;
+ } catch ( e ) {
+ if ( e instanceof Error ) {
+ setErrorLoadingAttributes( await formatError( e ) );
+ }
+ } finally {
+ setIsLoadingAttributes( false );
+ }
+ }
+
+ fetchAttributesWithTerms();
+
+ return () => {
+ hasLoadedAttributes.current = true;
+ };
+ }, [ isLoadingAttributes, shouldLoadAttributes ] );
+
+ return {
+ errorLoadingAttributes,
+ isLoadingAttributes,
+ productsAttributes,
+ };
+}
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-query-state.js b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-query-state.js
new file mode 100644
index 00000000000..8a61ca9e900
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-query-state.js
@@ -0,0 +1,149 @@
+/**
+ * External dependencies
+ */
+import { QUERY_STATE_STORE_KEY as storeKey } from '@woocommerce/block-data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useRef, useEffect, useCallback } from '@wordpress/element';
+import isShallowEqual from '@wordpress/is-shallow-equal';
+import { useShallowEqual, usePrevious } from '@woocommerce/base-hooks';
+
+/**
+ * Internal dependencies
+ */
+
+import { useQueryStateContext } from '../providers/query-state-context';
+
+/**
+ * A custom hook that exposes the current query state and a setter for the query
+ * state store for the given context.
+ *
+ * "Query State" is a wp.data store that keeps track of an arbitrary object of
+ * query keys and their values.
+ *
+ * @param {string} [context] What context to retrieve the query state for. If not
+ * provided, this hook will attempt to get the context
+ * from the query state context provided by the
+ * QueryStateContextProvider
+ *
+ * @return {Array} An array that has two elements. The first element is the
+ * query state value for the given context. The second element
+ * is a dispatcher function for setting the query state.
+ */
+export const useQueryStateByContext = ( context ) => {
+ const queryStateContext = useQueryStateContext();
+ context = context || queryStateContext;
+ const queryState = useSelect(
+ ( select ) => {
+ const store = select( storeKey );
+ return store.getValueForQueryContext( context, undefined );
+ },
+ [ context ]
+ );
+ const { setValueForQueryContext } = useDispatch( storeKey );
+ const setQueryState = useCallback(
+ ( value ) => {
+ setValueForQueryContext( context, value );
+ },
+ [ context, setValueForQueryContext ]
+ );
+
+ return [ queryState, setQueryState ];
+};
+
+/**
+ * A custom hook that exposes the current query state value and a setter for the
+ * given context and query key.
+ *
+ * "Query State" is a wp.data store that keeps track of an arbitrary object of
+ * query keys and their values.
+ *
+ * @param {*} queryKey The specific query key to retrieve the value for.
+ * @param {*} [defaultValue] Default value if query does not exist.
+ * @param {string} [context] What context to retrieve the query state for. If
+ * not provided will attempt to use what is provided
+ * by query state context.
+ *
+ * @return {*} Whatever value is set at the query state index using the
+ * provided context and query key.
+ */
+export const useQueryStateByKey = ( queryKey, defaultValue, context ) => {
+ const queryStateContext = useQueryStateContext();
+ context = context || queryStateContext;
+ const queryValue = useSelect(
+ ( select ) => {
+ const store = select( storeKey );
+ return store.getValueForQueryKey( context, queryKey, defaultValue );
+ },
+ [ context, queryKey ]
+ );
+
+ const { setQueryValue } = useDispatch( storeKey );
+ const setQueryValueByKey = useCallback(
+ ( value ) => {
+ setQueryValue( context, queryKey, value );
+ },
+ [ context, queryKey, setQueryValue ]
+ );
+
+ return [ queryValue, setQueryValueByKey ];
+};
+
+/**
+ * A custom hook that works similarly to useQueryStateByContext. However, this
+ * hook allows for synchronizing with a provided queryState object.
+ *
+ * This hook does the following things with the provided `synchronizedQuery`
+ * object:
+ *
+ * - whenever synchronizedQuery varies between renders, the queryState will be
+ * updated to a merged object of the internal queryState and the provided
+ * object. Note, any values from the same properties between objects will
+ * be set from synchronizedQuery.
+ * - if there are no changes between renders, then the existing internal
+ * queryState is always returned.
+ * - on initial render, the synchronizedQuery value is returned.
+ *
+ * Typically, this hook would be used in a scenario where there may be external
+ * triggers for updating the query state (i.e. initial population of query
+ * state by hydration or component attributes, or routing url changes that
+ * affect query state).
+ *
+ * @param {Object} synchronizedQuery A provided query state object to
+ * synchronize internal query state with.
+ * @param {string} [context] What context to retrieve the query state
+ * for. If not provided, will be pulled from
+ * the QueryStateContextProvider in the tree.
+ */
+export const useSynchronizedQueryState = ( synchronizedQuery, context ) => {
+ const queryStateContext = useQueryStateContext();
+ context = context || queryStateContext;
+ const [ queryState, setQueryState ] = useQueryStateByContext( context );
+ const currentQueryState = useShallowEqual( queryState );
+ const currentSynchronizedQuery = useShallowEqual( synchronizedQuery );
+ const previousSynchronizedQuery = usePrevious( currentSynchronizedQuery );
+ // used to ensure we allow initial synchronization to occur before
+ // returning non-synced state.
+ const isInitialized = useRef( false );
+ // update queryState anytime incoming synchronizedQuery changes
+ useEffect( () => {
+ if (
+ ! isShallowEqual(
+ previousSynchronizedQuery,
+ currentSynchronizedQuery
+ )
+ ) {
+ setQueryState(
+ Object.assign( {}, currentQueryState, currentSynchronizedQuery )
+ );
+ isInitialized.current = true;
+ }
+ }, [
+ currentQueryState,
+ currentSynchronizedQuery,
+ previousSynchronizedQuery,
+ setQueryState,
+ ] );
+ return isInitialized.current
+ ? [ queryState, setQueryState ]
+ : [ synchronizedQuery, setQueryState ];
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-show-shipping-total-warning.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-show-shipping-total-warning.ts
new file mode 100644
index 00000000000..f1299f24d3f
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-show-shipping-total-warning.ts
@@ -0,0 +1,110 @@
+/**
+ * External dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { CART_STORE_KEY, CHECKOUT_STORE_KEY } from '@woocommerce/block-data';
+import { useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { hasShippingRate } from '@woocommerce/base-components/cart-checkout/totals/shipping/utils';
+import { hasCollectableRate } from '@woocommerce/base-utils';
+import { isString } from '@woocommerce/types';
+
+/**
+ * Internal dependencies
+ */
+import { useShippingData } from './shipping/use-shipping-data';
+
+export const useShowShippingTotalWarning = () => {
+ const context = 'woocommerce/checkout-totals-block';
+ const errorNoticeId = 'wc-blocks-totals-shipping-warning';
+
+ const { shippingRates } = useShippingData();
+ const hasRates = hasShippingRate( shippingRates );
+ const {
+ prefersCollection,
+ isRateBeingSelected,
+ shippingNotices,
+ cartData,
+ } = useSelect( ( select ) => {
+ return {
+ cartData: select( CART_STORE_KEY ).getCartData(),
+ prefersCollection: select( CHECKOUT_STORE_KEY ).prefersCollection(),
+ isRateBeingSelected:
+ select( CART_STORE_KEY ).isShippingRateBeingSelected(),
+ shippingNotices: select( 'core/notices' ).getNotices( context ),
+ };
+ } );
+ const { createInfoNotice, removeNotice } = useDispatch( 'core/notices' );
+
+ useEffect( () => {
+ if ( ! hasRates || isRateBeingSelected ) {
+ // Early return because shipping rates were not yet loaded from the cart data store, or the user is changing
+ // rate, no need to alter the notice until we know what the actual rate is.
+ return;
+ }
+
+ const selectedRates = cartData?.shippingRates?.reduce(
+ ( acc: string[], rate ) => {
+ const selectedRateForPackage = rate.shipping_rates.find(
+ ( shippingRate ) => {
+ return shippingRate.selected;
+ }
+ );
+ if (
+ typeof selectedRateForPackage?.method_id !== 'undefined'
+ ) {
+ acc.push( selectedRateForPackage?.method_id );
+ }
+ return acc;
+ },
+ []
+ );
+ const isPickupRateSelected = Object.values( selectedRates ).some(
+ ( rate: unknown ) => {
+ if ( isString( rate ) ) {
+ return hasCollectableRate( rate );
+ }
+ return false;
+ }
+ );
+
+ // There is a mismatch between the method the user chose (pickup or shipping) and the currently selected rate.
+ if (
+ hasRates &&
+ ! prefersCollection &&
+ ! isRateBeingSelected &&
+ isPickupRateSelected &&
+ shippingNotices.length === 0
+ ) {
+ createInfoNotice(
+ __(
+ 'Totals will be recalculated when a valid shipping method is selected.',
+ 'woo-gutenberg-products-block'
+ ),
+ {
+ id: 'wc-blocks-totals-shipping-warning',
+ isDismissible: false,
+ context,
+ }
+ );
+ return;
+ }
+
+ // Don't show the notice if they have selected local pickup, or if they have selected a valid regular shipping rate.
+ if (
+ ( prefersCollection || ! isPickupRateSelected ) &&
+ shippingNotices.length > 0
+ ) {
+ removeNotice( errorNoticeId, context );
+ }
+ }, [
+ cartData?.shippingRates,
+ createInfoNotice,
+ hasRates,
+ isRateBeingSelected,
+ prefersCollection,
+ removeNotice,
+ shippingNotices,
+ shippingRates,
+ ] );
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-store-add-to-cart.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-store-add-to-cart.ts
new file mode 100644
index 00000000000..7495ac7d95c
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-store-add-to-cart.ts
@@ -0,0 +1,95 @@
+/**
+ * External dependencies
+ */
+import { useState, useEffect, useRef } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { CART_STORE_KEY as storeKey } from '@woocommerce/block-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import type { CartItem } from '@woocommerce/types';
+
+/**
+ * Internal dependencies
+ */
+import { useStoreCart } from './cart/use-store-cart';
+
+/**
+ * @typedef {import('@woocommerce/type-defs/hooks').StoreCartItemAddToCart} StoreCartItemAddToCart
+ */
+
+interface StoreAddToCart {
+ cartQuantity: number;
+ addingToCart: boolean;
+ cartIsLoading: boolean;
+ addToCart: ( quantity?: number ) => Promise< boolean >;
+}
+/**
+ * Get the quantity of a product in the cart.
+ *
+ * @param {Object} cartItems Array of items.
+ * @param {number} productId The product id to look for.
+ * @return {number} Quantity in the cart.
+ */
+const getQuantityFromCartItems = (
+ cartItems: Array< CartItem >,
+ productId: number
+): number => {
+ const productItem = cartItems.find( ( { id } ) => id === productId );
+
+ return productItem ? productItem.quantity : 0;
+};
+
+/**
+ * A custom hook for exposing cart related data for a given product id and an
+ * action for adding a single quantity of the product _to_ the cart.
+ *
+ *
+ * @param {number} productId The product id to be added to the cart.
+ *
+ * @return {StoreCartItemAddToCart} An object exposing data and actions relating
+ * to add to cart functionality.
+ */
+export const useStoreAddToCart = ( productId: number ): StoreAddToCart => {
+ const { addItemToCart } = useDispatch( storeKey );
+ const { cartItems, cartIsLoading } = useStoreCart();
+ const { createErrorNotice, removeNotice } = useDispatch( 'core/notices' );
+
+ const [ addingToCart, setAddingToCart ] = useState( false );
+ const currentCartItemQuantity = useRef(
+ getQuantityFromCartItems( cartItems, productId )
+ );
+
+ const addToCart = ( quantity = 1 ) => {
+ setAddingToCart( true );
+ return addItemToCart( productId, quantity )
+ .then( () => {
+ removeNotice( 'add-to-cart' );
+ } )
+ .catch( ( error ) => {
+ createErrorNotice( decodeEntities( error.message ), {
+ id: 'add-to-cart',
+ context: 'wc/all-products',
+ isDismissible: true,
+ } );
+ } )
+ .finally( () => {
+ setAddingToCart( false );
+ } );
+ };
+
+ useEffect( () => {
+ const quantity = getQuantityFromCartItems( cartItems, productId );
+
+ if ( quantity !== currentCartItemQuantity.current ) {
+ currentCartItemQuantity.current = quantity;
+ }
+ }, [ cartItems, productId ] );
+
+ return {
+ cartQuantity: Number.isFinite( currentCartItemQuantity.current )
+ ? currentCartItemQuantity.current
+ : 0,
+ addingToCart,
+ cartIsLoading,
+ addToCart,
+ };
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-store-events.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-store-events.ts
new file mode 100644
index 00000000000..9da16d58f0b
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-store-events.ts
@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import { doAction } from '@wordpress/hooks';
+import { select } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+
+type StoreEvent = (
+ eventName: string,
+ eventParams?: Partial< Record< string, unknown > >
+) => void;
+
+/**
+ * Abstraction on top of @wordpress/hooks for dispatching events via doAction for 3rd parties to hook into.
+ */
+export const useStoreEvents = (): {
+ dispatchStoreEvent: StoreEvent;
+ dispatchCheckoutEvent: StoreEvent;
+} => {
+ const dispatchStoreEvent = useCallback( ( eventName, eventParams = {} ) => {
+ try {
+ doAction(
+ `experimental__woocommerce_blocks-${ eventName }`,
+ eventParams
+ );
+ } catch ( e ) {
+ // We don't handle thrown errors but just console.log for troubleshooting.
+ // eslint-disable-next-line no-console
+ console.error( e );
+ }
+ }, [] );
+
+ const dispatchCheckoutEvent = useCallback(
+ ( eventName, eventParams = {} ) => {
+ try {
+ doAction(
+ `experimental__woocommerce_blocks-checkout-${ eventName }`,
+ {
+ ...eventParams,
+ storeCart: select( 'wc/store/cart' ).getCartData(),
+ }
+ );
+ } catch ( e ) {
+ // We don't handle thrown errors but just console.log for troubleshooting.
+ // eslint-disable-next-line no-console
+ console.error( e );
+ }
+ },
+ []
+ );
+
+ return { dispatchStoreEvent, dispatchCheckoutEvent };
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-store-products.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-store-products.ts
new file mode 100644
index 00000000000..4ccf5f4969d
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-store-products.ts
@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import { Query, ProductResponseItem } from '@woocommerce/types';
+/**
+ * Internal dependencies
+ */
+import { useCollectionHeader, useCollection } from './collections';
+
+/**
+ * This is a custom hook that is wired up to the `wc/store/collections` data
+ * store for the `wc/store/v1/products` route. Given a query object, this
+ * will ensure a component is kept up to date with the products matching that
+ * query in the store state.
+ *
+ * @param {Object} query An object containing any query arguments to be
+ * included with the collection request for the
+ * products. Does not have to be included.
+ *
+ * @return {Object} This hook will return an object with three properties:
+ * - products An array of product objects.
+ * - totalProducts The total number of products that match
+ * the given query parameters.
+ * - productsLoading A boolean indicating whether the products
+ * are still loading or not.
+ */
+export const useStoreProducts = (
+ query: Query
+): {
+ products: ProductResponseItem[];
+ totalProducts: number;
+ productsLoading: boolean;
+} => {
+ const collectionOptions = {
+ namespace: '/wc/store/v1',
+ resourceName: 'products',
+ };
+ const { results: products, isLoading: productsLoading } =
+ useCollection< ProductResponseItem >( {
+ ...collectionOptions,
+ query,
+ } );
+ const { value: totalProducts } = useCollectionHeader( 'x-wp-total', {
+ ...collectionOptions,
+ query,
+ } );
+ return {
+ products,
+ totalProducts: parseInt( totalProducts as string, 10 ),
+ productsLoading,
+ };
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-validation.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-validation.ts
new file mode 100644
index 00000000000..918f74e43c4
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-validation.ts
@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import type {
+ ValidationData,
+ ValidationContextError,
+} from '@woocommerce/types';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
+
+/**
+ * Custom hook for setting for adding errors to the validation system.
+ */
+export const useValidation = (): ValidationData => {
+ const { clearValidationError, hideValidationError, setValidationErrors } =
+ useDispatch( VALIDATION_STORE_KEY );
+
+ const prefix = 'extensions-errors';
+
+ const { hasValidationErrors, getValidationError } = useSelect(
+ ( mapSelect ) => {
+ const store = mapSelect( VALIDATION_STORE_KEY );
+ return {
+ hasValidationErrors: store.hasValidationErrors(),
+ getValidationError: ( validationErrorId: string ) =>
+ store.getValidationError(
+ `${ prefix }-${ validationErrorId }`
+ ),
+ };
+ }
+ );
+
+ return {
+ hasValidationErrors,
+ getValidationError,
+ clearValidationError: useCallback(
+ ( validationErrorId: string ) =>
+ clearValidationError( `${ prefix }-${ validationErrorId }` ),
+ [ clearValidationError ]
+ ),
+ hideValidationError: useCallback(
+ ( validationErrorId: string ) =>
+ hideValidationError( `${ prefix }-${ validationErrorId }` ),
+ [ hideValidationError ]
+ ),
+ setValidationErrors: useCallback(
+ ( errorsObject: Record< string, ValidationContextError > ) =>
+ setValidationErrors(
+ Object.fromEntries(
+ Object.entries( errorsObject ).map(
+ ( [ validationErrorId, error ] ) => [
+ `${ prefix }-${ validationErrorId }`,
+ error,
+ ]
+ )
+ )
+ ),
+ [ setValidationErrors ]
+ ),
+ };
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/index.ts b/plugins/woocommerce-blocks/assets/js/base/context/index.ts
new file mode 100644
index 00000000000..68f05b7dbf8
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/index.ts
@@ -0,0 +1,3 @@
+export * from './event-emit';
+export * from './hooks';
+export * from './providers';
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/form-state/actions.js b/plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/form-state/actions.js
new file mode 100644
index 00000000000..b1a053ab2fc
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/form-state/actions.js
@@ -0,0 +1,58 @@
+/**
+ * Internal dependencies
+ */
+import { ACTION_TYPES } from './constants';
+
+const {
+ SET_PRISTINE,
+ SET_IDLE,
+ SET_DISABLED,
+ SET_PROCESSING,
+ SET_BEFORE_PROCESSING,
+ SET_AFTER_PROCESSING,
+ SET_PROCESSING_RESPONSE,
+ SET_HAS_ERROR,
+ SET_NO_ERROR,
+ SET_QUANTITY,
+ SET_REQUEST_PARAMS,
+} = ACTION_TYPES;
+
+/**
+ * All the actions that can be dispatched for the checkout.
+ */
+export const actions = {
+ setPristine: () => ( {
+ type: SET_PRISTINE,
+ } ),
+ setIdle: () => ( {
+ type: SET_IDLE,
+ } ),
+ setDisabled: () => ( {
+ type: SET_DISABLED,
+ } ),
+ setProcessing: () => ( {
+ type: SET_PROCESSING,
+ } ),
+ setBeforeProcessing: () => ( {
+ type: SET_BEFORE_PROCESSING,
+ } ),
+ setAfterProcessing: () => ( {
+ type: SET_AFTER_PROCESSING,
+ } ),
+ setProcessingResponse: ( data ) => ( {
+ type: SET_PROCESSING_RESPONSE,
+ data,
+ } ),
+ setHasError: ( hasError = true ) => {
+ const type = hasError ? SET_HAS_ERROR : SET_NO_ERROR;
+ return { type };
+ },
+ setQuantity: ( quantity ) => ( {
+ type: SET_QUANTITY,
+ quantity,
+ } ),
+ setRequestParams: ( data ) => ( {
+ type: SET_REQUEST_PARAMS,
+ data,
+ } ),
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/form-state/constants.js b/plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/form-state/constants.js
new file mode 100644
index 00000000000..c9ebea0b330
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/form-state/constants.js
@@ -0,0 +1,32 @@
+/**
+ * @type {import("@woocommerce/type-defs/add-to-cart-form").AddToCartFormStatusConstants}
+ */
+export const STATUS = {
+ PRISTINE: 'pristine',
+ IDLE: 'idle',
+ DISABLED: 'disabled',
+ PROCESSING: 'processing',
+ BEFORE_PROCESSING: 'before_processing',
+ AFTER_PROCESSING: 'after_processing',
+};
+
+export const DEFAULT_STATE = {
+ status: STATUS.PRISTINE,
+ hasError: false,
+ quantity: 0,
+ processingResponse: null,
+ requestParams: {},
+};
+export const ACTION_TYPES = {
+ SET_PRISTINE: 'set_pristine',
+ SET_IDLE: 'set_idle',
+ SET_DISABLED: 'set_disabled',
+ SET_PROCESSING: 'set_processing',
+ SET_BEFORE_PROCESSING: 'set_before_processing',
+ SET_AFTER_PROCESSING: 'set_after_processing',
+ SET_PROCESSING_RESPONSE: 'set_processing_response',
+ SET_HAS_ERROR: 'set_has_error',
+ SET_NO_ERROR: 'set_no_error',
+ SET_QUANTITY: 'set_quantity',
+ SET_REQUEST_PARAMS: 'set_request_params',
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/form-state/event-emit.js b/plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/form-state/event-emit.js
new file mode 100644
index 00000000000..b95573477d4
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/form-state/event-emit.js
@@ -0,0 +1,46 @@
+/**
+ * Internal dependencies
+ */
+import {
+ emitterCallback,
+ reducer,
+ emitEvent,
+ emitEventWithAbort,
+} from '../../../event-emit';
+
+const EMIT_TYPES = {
+ ADD_TO_CART_BEFORE_PROCESSING: 'add_to_cart_before_processing',
+ ADD_TO_CART_AFTER_PROCESSING_WITH_SUCCESS:
+ 'add_to_cart_after_processing_with_success',
+ ADD_TO_CART_AFTER_PROCESSING_WITH_ERROR:
+ 'add_to_cart_after_processing_with_error',
+};
+
+/**
+ * Receives a reducer dispatcher and returns an object with the callback registration function for
+ * the add to cart emit events.
+ *
+ * Calling the event registration function with the callback will register it for the event emitter
+ * and will return a dispatcher for removing the registered callback (useful for implementation
+ * in `useEffect`).
+ *
+ * @param {Function} dispatcher The emitter reducer dispatcher.
+ *
+ * @return {Object} An object with the add to cart form emitter registration
+ */
+const emitterObservers = ( dispatcher ) => ( {
+ onAddToCartAfterProcessingWithSuccess: emitterCallback(
+ EMIT_TYPES.ADD_TO_CART_AFTER_PROCESSING_WITH_SUCCESS,
+ dispatcher
+ ),
+ onAddToCartProcessingWithError: emitterCallback(
+ EMIT_TYPES.ADD_TO_CART_AFTER_PROCESSING_WITH_ERROR,
+ dispatcher
+ ),
+ onAddToCartBeforeProcessing: emitterCallback(
+ EMIT_TYPES.ADD_TO_CART_BEFORE_PROCESSING,
+ dispatcher
+ ),
+} );
+
+export { EMIT_TYPES, emitterObservers, reducer, emitEvent, emitEventWithAbort };
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/form-state/index.js b/plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/form-state/index.js
new file mode 100644
index 00000000000..a34fd894368
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/form-state/index.js
@@ -0,0 +1,324 @@
+/**
+ * External dependencies
+ */
+import {
+ createContext,
+ useContext,
+ useReducer,
+ useMemo,
+ useEffect,
+} from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useShallowEqual } from '@woocommerce/base-hooks';
+import {
+ productIsPurchasable,
+ productSupportsAddToCartForm,
+} from '@woocommerce/base-utils';
+import { useDispatch } from '@wordpress/data';
+import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
+
+/**
+ * Internal dependencies
+ */
+import { actions } from './actions';
+import { reducer } from './reducer';
+import { DEFAULT_STATE, STATUS } from './constants';
+import {
+ EMIT_TYPES,
+ emitterObservers,
+ emitEvent,
+ emitEventWithAbort,
+ reducer as emitReducer,
+} from './event-emit';
+import { isErrorResponse, isFailResponse } from '../../../event-emit';
+import { removeNoticesByStatus } from '../../../../../utils/notices';
+
+/**
+ * @typedef {import('@woocommerce/type-defs/add-to-cart-form').AddToCartFormDispatchActions} AddToCartFormDispatchActions
+ * @typedef {import('@woocommerce/type-defs/add-to-cart-form').AddToCartFormEventRegistration} AddToCartFormEventRegistration
+ * @typedef {import('@woocommerce/type-defs/contexts').AddToCartFormContext} AddToCartFormContext
+ */
+
+const AddToCartFormContext = createContext( {
+ product: {},
+ productType: 'simple',
+ productIsPurchasable: true,
+ productHasOptions: false,
+ supportsFormElements: true,
+ showFormElements: false,
+ quantity: 0,
+ minQuantity: 1,
+ maxQuantity: 99,
+ requestParams: {},
+ isIdle: false,
+ isDisabled: false,
+ isProcessing: false,
+ isBeforeProcessing: false,
+ isAfterProcessing: false,
+ hasError: false,
+ eventRegistration: {
+ onAddToCartAfterProcessingWithSuccess: ( callback ) => void callback,
+ onAddToCartAfterProcessingWithError: ( callback ) => void callback,
+ onAddToCartBeforeProcessing: ( callback ) => void callback,
+ },
+ dispatchActions: {
+ resetForm: () => void null,
+ submitForm: () => void null,
+ setQuantity: ( quantity ) => void quantity,
+ setHasError: ( hasError ) => void hasError,
+ setAfterProcessing: ( response ) => void response,
+ setRequestParams: ( data ) => void data,
+ },
+} );
+
+/**
+ * @return {AddToCartFormContext} Returns the add to cart form data context value
+ */
+export const useAddToCartFormContext = () => {
+ // @ts-ignore
+ return useContext( AddToCartFormContext );
+};
+
+/**
+ * Add to cart form state provider.
+ *
+ * This provides provides an api interface exposing add to cart form state.
+ *
+ * @param {Object} props Incoming props for the provider.
+ * @param {Object} props.children The children being wrapped.
+ * @param {Object} [props.product] The product for which the form belongs to.
+ * @param {boolean} [props.showFormElements] Should form elements be shown.
+ */
+export const AddToCartFormStateContextProvider = ( {
+ children,
+ product,
+ showFormElements,
+} ) => {
+ const [ addToCartFormState, dispatch ] = useReducer(
+ reducer,
+ DEFAULT_STATE
+ );
+ const [ observers, observerDispatch ] = useReducer( emitReducer, {} );
+ const currentObservers = useShallowEqual( observers );
+ const { createErrorNotice } = useDispatch( 'core/notices' );
+ const { setValidationErrors } = useDispatch( VALIDATION_STORE_KEY );
+
+ /**
+ * @type {AddToCartFormEventRegistration}
+ */
+ const eventRegistration = useMemo(
+ () => ( {
+ onAddToCartAfterProcessingWithSuccess:
+ emitterObservers( observerDispatch )
+ .onAddToCartAfterProcessingWithSuccess,
+ onAddToCartAfterProcessingWithError:
+ emitterObservers( observerDispatch )
+ .onAddToCartAfterProcessingWithError,
+ onAddToCartBeforeProcessing:
+ emitterObservers( observerDispatch )
+ .onAddToCartBeforeProcessing,
+ } ),
+ [ observerDispatch ]
+ );
+
+ /**
+ * @type {AddToCartFormDispatchActions}
+ */
+ const dispatchActions = useMemo(
+ () => ( {
+ resetForm: () => void dispatch( actions.setPristine() ),
+ submitForm: () => void dispatch( actions.setBeforeProcessing() ),
+ setQuantity: ( quantity ) =>
+ void dispatch( actions.setQuantity( quantity ) ),
+ setHasError: ( hasError ) =>
+ void dispatch( actions.setHasError( hasError ) ),
+ setRequestParams: ( data ) =>
+ void dispatch( actions.setRequestParams( data ) ),
+ setAfterProcessing: ( response ) => {
+ dispatch( actions.setProcessingResponse( response ) );
+ void dispatch( actions.setAfterProcessing() );
+ },
+ } ),
+ []
+ );
+
+ /**
+ * This Effect is responsible for disabling or enabling the form based on the provided product.
+ */
+ useEffect( () => {
+ const status = addToCartFormState.status;
+ const willBeDisabled =
+ ! product.id || ! productIsPurchasable( product );
+
+ if ( status === STATUS.DISABLED && ! willBeDisabled ) {
+ dispatch( actions.setIdle() );
+ } else if ( status !== STATUS.DISABLED && willBeDisabled ) {
+ dispatch( actions.setDisabled() );
+ }
+ }, [ addToCartFormState.status, product, dispatch ] );
+
+ /**
+ * This Effect performs events before processing starts.
+ */
+ useEffect( () => {
+ const status = addToCartFormState.status;
+
+ if ( status === STATUS.BEFORE_PROCESSING ) {
+ removeNoticesByStatus( 'error', 'wc/add-to-cart' );
+ emitEvent(
+ currentObservers,
+ EMIT_TYPES.ADD_TO_CART_BEFORE_PROCESSING,
+ {}
+ ).then( ( response ) => {
+ if ( response !== true ) {
+ if ( Array.isArray( response ) ) {
+ response.forEach(
+ ( { errorMessage, validationErrors } ) => {
+ if ( errorMessage ) {
+ createErrorNotice( errorMessage, {
+ context: 'wc/add-to-cart',
+ } );
+ }
+ if ( validationErrors ) {
+ setValidationErrors( validationErrors );
+ }
+ }
+ );
+ }
+ dispatch( actions.setIdle() );
+ } else {
+ dispatch( actions.setProcessing() );
+ }
+ } );
+ }
+ }, [
+ addToCartFormState.status,
+ setValidationErrors,
+ createErrorNotice,
+ dispatch,
+ currentObservers,
+ product?.id,
+ ] );
+
+ /**
+ * This Effect performs events after processing is complete.
+ */
+ useEffect( () => {
+ if ( addToCartFormState.status === STATUS.AFTER_PROCESSING ) {
+ // @todo: This data package differs from what is passed through in
+ // the checkout state context. Should we introduce a "context"
+ // property in the data package for this emitted event so that
+ // observers are able to know what context the event is firing in?
+ const data = {
+ processingResponse: addToCartFormState.processingResponse,
+ };
+
+ const handleErrorResponse = ( observerResponses ) => {
+ let handled = false;
+ observerResponses.forEach( ( response ) => {
+ const { message, messageContext } = response;
+ if (
+ ( isErrorResponse( response ) ||
+ isFailResponse( response ) ) &&
+ message
+ ) {
+ const errorOptions = messageContext
+ ? { context: messageContext }
+ : undefined;
+ handled = true;
+ createErrorNotice( message, errorOptions );
+ }
+ } );
+ return handled;
+ };
+
+ if ( addToCartFormState.hasError ) {
+ // allow things to customize the error with a fallback if nothing customizes it.
+ emitEventWithAbort(
+ currentObservers,
+ EMIT_TYPES.ADD_TO_CART_AFTER_PROCESSING_WITH_ERROR,
+ data
+ ).then( ( observerResponses ) => {
+ if ( ! handleErrorResponse( observerResponses ) ) {
+ // no error handling in place by anything so let's fall back to default
+ const message =
+ data.processingResponse?.message ||
+ __(
+ 'Something went wrong. Please contact us for assistance.',
+ 'woo-gutenberg-products-block'
+ );
+ createErrorNotice( message, {
+ id: 'add-to-cart',
+ context: `woocommerce/single-product/${
+ product?.id || 0
+ }`,
+ } );
+ }
+ dispatch( actions.setIdle() );
+ } );
+ return;
+ }
+
+ emitEventWithAbort(
+ currentObservers,
+ EMIT_TYPES.ADD_TO_CART_AFTER_PROCESSING_WITH_SUCCESS,
+ data
+ ).then( ( observerResponses ) => {
+ if ( handleErrorResponse( observerResponses ) ) {
+ // this will set an error which will end up
+ // triggering the onAddToCartAfterProcessingWithError emitter.
+ // and then setting to IDLE state.
+ dispatch( actions.setHasError( true ) );
+ } else {
+ dispatch( actions.setIdle() );
+ }
+ } );
+ }
+ }, [
+ addToCartFormState.status,
+ addToCartFormState.hasError,
+ addToCartFormState.processingResponse,
+ dispatchActions,
+ createErrorNotice,
+ currentObservers,
+ product?.id,
+ ] );
+
+ const supportsFormElements = productSupportsAddToCartForm( product );
+
+ /**
+ * @type {AddToCartFormContext}
+ */
+ const contextData = {
+ product,
+ productType: product.type || 'simple',
+ productIsPurchasable: productIsPurchasable( product ),
+ productHasOptions: product.has_options || false,
+ supportsFormElements,
+ showFormElements: showFormElements && supportsFormElements,
+ quantity:
+ addToCartFormState.quantity || product?.add_to_cart?.minimum || 1,
+ minQuantity: product?.add_to_cart?.minimum || 1,
+ maxQuantity: product?.add_to_cart?.maximum || 99,
+ multipleOf: product?.add_to_cart?.multiple_of || 1,
+ requestParams: addToCartFormState.requestParams,
+ isIdle: addToCartFormState.status === STATUS.IDLE,
+ isDisabled: addToCartFormState.status === STATUS.DISABLED,
+ isProcessing: addToCartFormState.status === STATUS.PROCESSING,
+ isBeforeProcessing:
+ addToCartFormState.status === STATUS.BEFORE_PROCESSING,
+ isAfterProcessing:
+ addToCartFormState.status === STATUS.AFTER_PROCESSING,
+ hasError: addToCartFormState.hasError,
+ eventRegistration,
+ dispatchActions,
+ };
+ return (
+
+ { children }
+
+ );
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/form-state/reducer.js b/plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/form-state/reducer.js
new file mode 100644
index 00000000000..6fe069913e1
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/form-state/reducer.js
@@ -0,0 +1,154 @@
+/**
+ * Internal dependencies
+ */
+import { ACTION_TYPES, DEFAULT_STATE, STATUS } from './constants';
+
+const {
+ SET_PRISTINE,
+ SET_IDLE,
+ SET_DISABLED,
+ SET_PROCESSING,
+ SET_BEFORE_PROCESSING,
+ SET_AFTER_PROCESSING,
+ SET_PROCESSING_RESPONSE,
+ SET_HAS_ERROR,
+ SET_NO_ERROR,
+ SET_QUANTITY,
+ SET_REQUEST_PARAMS,
+} = ACTION_TYPES;
+
+const {
+ PRISTINE,
+ IDLE,
+ DISABLED,
+ PROCESSING,
+ BEFORE_PROCESSING,
+ AFTER_PROCESSING,
+} = STATUS;
+
+/**
+ * Reducer for the checkout state
+ *
+ * @param {Object} state Current state.
+ * @param {Object} action Incoming action object.
+ * @param {number} action.quantity Incoming quantity.
+ * @param {string} action.type Type of action.
+ * @param {Object} action.data Incoming payload for action.
+ */
+export const reducer = ( state = DEFAULT_STATE, { quantity, type, data } ) => {
+ let newState;
+ switch ( type ) {
+ case SET_PRISTINE:
+ newState = DEFAULT_STATE;
+ break;
+ case SET_IDLE:
+ newState =
+ state.status !== IDLE
+ ? {
+ ...state,
+ status: IDLE,
+ }
+ : state;
+ break;
+ case SET_DISABLED:
+ newState =
+ state.status !== DISABLED
+ ? {
+ ...state,
+ status: DISABLED,
+ }
+ : state;
+ break;
+ case SET_QUANTITY:
+ newState =
+ quantity !== state.quantity
+ ? {
+ ...state,
+ quantity,
+ }
+ : state;
+ break;
+ case SET_REQUEST_PARAMS:
+ newState = {
+ ...state,
+ requestParams: {
+ ...state.requestParams,
+ ...data,
+ },
+ };
+ break;
+ case SET_PROCESSING_RESPONSE:
+ newState = {
+ ...state,
+ processingResponse: data,
+ };
+ break;
+ case SET_PROCESSING:
+ newState =
+ state.status !== PROCESSING
+ ? {
+ ...state,
+ status: PROCESSING,
+ hasError: false,
+ }
+ : state;
+ // clear any error state.
+ newState =
+ newState.hasError === false
+ ? newState
+ : { ...newState, hasError: false };
+ break;
+ case SET_BEFORE_PROCESSING:
+ newState =
+ state.status !== BEFORE_PROCESSING
+ ? {
+ ...state,
+ status: BEFORE_PROCESSING,
+ hasError: false,
+ }
+ : state;
+ break;
+ case SET_AFTER_PROCESSING:
+ newState =
+ state.status !== AFTER_PROCESSING
+ ? {
+ ...state,
+ status: AFTER_PROCESSING,
+ }
+ : state;
+ break;
+ case SET_HAS_ERROR:
+ newState = state.hasError
+ ? state
+ : {
+ ...state,
+ hasError: true,
+ };
+ newState =
+ state.status === PROCESSING ||
+ state.status === BEFORE_PROCESSING
+ ? {
+ ...newState,
+ status: IDLE,
+ }
+ : newState;
+ break;
+ case SET_NO_ERROR:
+ newState = state.hasError
+ ? {
+ ...state,
+ hasError: false,
+ }
+ : state;
+ break;
+ }
+ // automatically update state to idle from pristine as soon as it initially changes.
+ if (
+ newState !== state &&
+ type !== SET_PRISTINE &&
+ newState.status === PRISTINE
+ ) {
+ newState.status = IDLE;
+ }
+ return newState;
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/form/index.js b/plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/form/index.js
new file mode 100644
index 00000000000..16ae0ea744f
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/form/index.js
@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import { AddToCartFormStateContextProvider } from '../form-state';
+import FormSubmit from './submit';
+
+/**
+ * Add to cart form provider.
+ *
+ * This wraps the add to cart form and provides an api interface for children via various hooks.
+ *
+ * @param {Object} props Incoming props for the provider.
+ * @param {Object} props.children The children being wrapped.
+ * @param {Object} [props.product] The product for which the form belongs to.
+ * @param {boolean} [props.showFormElements] Should form elements be shown.
+ */
+export const AddToCartFormContextProvider = ( {
+ children,
+ product,
+ showFormElements,
+} ) => {
+ return (
+
+ { children }
+
+ );
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/form/submit/index.js b/plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/form/submit/index.js
new file mode 100644
index 00000000000..601ac9acb6d
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/form/submit/index.js
@@ -0,0 +1,157 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import triggerFetch from '@wordpress/api-fetch';
+import { useEffect, useCallback, useState } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import { triggerAddedToCartEvent } from '@woocommerce/base-utils';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
+
+/**
+ * Internal dependencies
+ */
+import { useAddToCartFormContext } from '../../form-state';
+import { useStoreCart } from '../../../../hooks/cart/use-store-cart';
+
+/**
+ * FormSubmit.
+ *
+ * Subscribes to add to cart form context and triggers processing via the API.
+ */
+const FormSubmit = () => {
+ const {
+ dispatchActions,
+ product,
+ quantity,
+ eventRegistration,
+ hasError,
+ isProcessing,
+ requestParams,
+ } = useAddToCartFormContext();
+ const { showAllValidationErrors } = useDispatch( VALIDATION_STORE_KEY );
+ const hasValidationErrors = useSelect( ( select ) => {
+ const store = select( VALIDATION_STORE_KEY );
+ return store.hasValidationErrors;
+ } );
+ const { createErrorNotice, removeNotice } = useDispatch( 'core/notices' );
+ const { receiveCart } = useStoreCart();
+ const [ isSubmitting, setIsSubmitting ] = useState( false );
+ const doSubmit = ! hasError && isProcessing;
+
+ const checkValidationContext = useCallback( () => {
+ if ( hasValidationErrors() ) {
+ showAllValidationErrors();
+ return {
+ type: 'error',
+ };
+ }
+ return true;
+ }, [ hasValidationErrors, showAllValidationErrors ] );
+
+ // Subscribe to emitter before processing.
+ useEffect( () => {
+ const unsubscribeProcessing =
+ eventRegistration.onAddToCartBeforeProcessing(
+ checkValidationContext,
+ 0
+ );
+ return () => {
+ unsubscribeProcessing();
+ };
+ }, [ eventRegistration, checkValidationContext ] );
+
+ // Triggers form submission to the API.
+ const submitFormCallback = useCallback( () => {
+ setIsSubmitting( true );
+ removeNotice(
+ 'add-to-cart',
+ `woocommerce/single-product/${ product?.id || 0 }`
+ );
+
+ const fetchData = {
+ id: product.id || 0,
+ quantity,
+ ...requestParams,
+ };
+
+ triggerFetch( {
+ path: '/wc/store/v1/cart/add-item',
+ method: 'POST',
+ data: fetchData,
+ cache: 'no-store',
+ parse: false,
+ } )
+ .then( ( fetchResponse ) => {
+ // Update nonce.
+ triggerFetch.setNonce( fetchResponse.headers );
+
+ // Handle response.
+ fetchResponse.json().then( function ( response ) {
+ if ( ! fetchResponse.ok ) {
+ // We received an error response.
+ if ( response.body && response.body.message ) {
+ createErrorNotice(
+ decodeEntities( response.body.message ),
+ {
+ id: 'add-to-cart',
+ context: `woocommerce/single-product/${
+ product?.id || 0
+ }`,
+ }
+ );
+ } else {
+ createErrorNotice(
+ __(
+ 'Something went wrong. Please contact us for assistance.',
+ 'woo-gutenberg-products-block'
+ ),
+ {
+ id: 'add-to-cart',
+ context: `woocommerce/single-product/${
+ product?.id || 0
+ }`,
+ }
+ );
+ }
+ dispatchActions.setHasError();
+ } else {
+ receiveCart( response );
+ }
+ triggerAddedToCartEvent( { preserveCartData: true } );
+ dispatchActions.setAfterProcessing( response );
+ setIsSubmitting( false );
+ } );
+ } )
+ .catch( ( error ) => {
+ error.json().then( function ( response ) {
+ // If updated cart state was returned, also update that.
+ if ( response.data?.cart ) {
+ receiveCart( response.data.cart );
+ }
+ dispatchActions.setHasError();
+ dispatchActions.setAfterProcessing( response );
+ setIsSubmitting( false );
+ } );
+ } );
+ }, [
+ product,
+ createErrorNotice,
+ removeNotice,
+ receiveCart,
+ dispatchActions,
+ quantity,
+ requestParams,
+ ] );
+
+ useEffect( () => {
+ if ( doSubmit && ! isSubmitting ) {
+ submitFormCallback();
+ }
+ }, [ doSubmit, submitFormCallback, isSubmitting ] );
+
+ return null;
+};
+
+export default FormSubmit;
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/index.js b/plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/index.js
new file mode 100644
index 00000000000..c2bc898070b
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/index.js
@@ -0,0 +1,2 @@
+export * from './form';
+export * from './form-state';
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/cart-events/event-emit.ts b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/cart-events/event-emit.ts
new file mode 100644
index 00000000000..ac6ed876084
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/cart-events/event-emit.ts
@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+ emitterCallback,
+ reducer,
+ emitEvent,
+ emitEventWithAbort,
+ ActionType,
+} from '../../../event-emit';
+
+// These events are emitted when the Cart status is BEFORE_PROCESSING and AFTER_PROCESSING
+// to enable third parties to hook into the cart process
+const EVENTS = {
+ PROCEED_TO_CHECKOUT: 'cart_proceed_to_checkout',
+};
+
+type EventEmittersType = Record< string, ReturnType< typeof emitterCallback > >;
+
+/**
+ * Receives a reducer dispatcher and returns an object with the
+ * various event emitters for the payment processing events.
+ *
+ * Calling the event registration function with the callback will register it
+ * for the event emitter and will return a dispatcher for removing the
+ * registered callback (useful for implementation in `useEffect`).
+ *
+ * @param {Function} observerDispatch The emitter reducer dispatcher.
+ * @return {Object} An object with the various payment event emitter registration functions
+ */
+const useEventEmitters = (
+ observerDispatch: React.Dispatch< ActionType >
+): EventEmittersType => {
+ const eventEmitters = useMemo(
+ () => ( {
+ onProceedToCheckout: emitterCallback(
+ EVENTS.PROCEED_TO_CHECKOUT,
+ observerDispatch
+ ),
+ } ),
+ [ observerDispatch ]
+ );
+ return eventEmitters;
+};
+
+export { EVENTS, useEventEmitters, reducer, emitEvent, emitEventWithAbort };
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/cart-events/index.tsx b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/cart-events/index.tsx
new file mode 100644
index 00000000000..90a4998f94a
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/cart-events/index.tsx
@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+
+import {
+ createContext,
+ useContext,
+ useReducer,
+ useRef,
+ useEffect,
+} from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+ useEventEmitters,
+ reducer as emitReducer,
+ emitEventWithAbort,
+ EVENTS,
+} from './event-emit';
+import type { emitterCallback } from '../../../event-emit';
+
+type CartEventsContextType = {
+ // Used to register a callback that will fire when the cart has been processed and has an error.
+ onProceedToCheckout: ReturnType< typeof emitterCallback >;
+ // Used to register a callback that will fire when the cart has been processed and has an error.
+ dispatchOnProceedToCheckout: () => Promise< unknown[] >;
+};
+
+const CartEventsContext = createContext< CartEventsContextType >( {
+ onProceedToCheckout: () => () => void null,
+ dispatchOnProceedToCheckout: () => new Promise( () => void null ),
+} );
+
+export const useCartEventsContext = () => {
+ return useContext( CartEventsContext );
+};
+
+/**
+ * Checkout Events provider
+ * Emit Checkout events and provide access to Checkout event handlers
+ *
+ * @param {Object} props Incoming props for the provider.
+ * @param {Object} props.children The children being wrapped.
+ */
+export const CartEventsProvider = ( {
+ children,
+}: {
+ children: React.ReactNode;
+} ): JSX.Element => {
+ const [ observers, observerDispatch ] = useReducer( emitReducer, {} );
+ const currentObservers = useRef( observers );
+ const { onProceedToCheckout } = useEventEmitters( observerDispatch );
+
+ // set observers on ref so it's always current.
+ useEffect( () => {
+ currentObservers.current = observers;
+ }, [ observers ] );
+
+ const dispatchOnProceedToCheckout = async () => {
+ return await emitEventWithAbort(
+ currentObservers.current,
+ EVENTS.PROCEED_TO_CHECKOUT,
+ null
+ );
+ };
+
+ const cartEvents = {
+ onProceedToCheckout,
+ dispatchOnProceedToCheckout,
+ };
+ return (
+
+ { children }
+
+ );
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/cart-events/test/index.tsx b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/cart-events/test/index.tsx
new file mode 100644
index 00000000000..48ab11154a7
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/cart-events/test/index.tsx
@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { useCartEventsContext } from '@woocommerce/base-context';
+import { useEffect } from '@wordpress/element';
+import { render, screen, waitFor } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { CartEventsProvider } from '../index';
+import Block from '../../../../../../blocks/cart/inner-blocks/proceed-to-checkout-block/block';
+
+describe( 'CartEventsProvider', () => {
+ it( 'allows observers to unsubscribe', async () => {
+ const mockObserver = jest.fn().mockReturnValue( { type: 'error' } );
+ const MockObserverComponent = () => {
+ const { onProceedToCheckout } = useCartEventsContext();
+ useEffect( () => {
+ const unsubscribe = onProceedToCheckout( () => {
+ mockObserver();
+ unsubscribe();
+ } );
+ }, [ onProceedToCheckout ] );
+ return Mock observer
;
+ };
+
+ render(
+
+
+
+
+ );
+ expect( screen.getByText( 'Mock observer' ) ).toBeInTheDocument();
+ const button = screen.getByText( 'Proceed to Checkout' );
+
+ // Forcibly set the button URL to # to prevent JSDOM error: `["Error: Not implemented: navigation (except hash changes)`
+ button.parentElement?.removeAttribute( 'href' );
+
+ // Click twice. The observer should unsubscribe after the first click.
+ button.click();
+ button.click();
+ await waitFor( () => {
+ expect( mockObserver ).toHaveBeenCalledTimes( 1 );
+ } );
+ } );
+} );
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/cart/index.js b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/cart/index.js
new file mode 100644
index 00000000000..dfa4307b157
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/cart/index.js
@@ -0,0 +1,23 @@
+/**
+ * Internal dependencies
+ */
+import { CheckoutProvider } from '../checkout-provider';
+
+/**
+ * Cart provider
+ * This wraps the Cart and provides an api interface for the Cart to
+ * children via various hooks.
+ *
+ * @param {Object} props Incoming props for the provider.
+ * @param {Object} [props.children] The children being wrapped.
+ * @param {string} [props.redirectUrl] Initialize what the cart will
+ * redirect to after successful
+ * submit.
+ */
+export const CartProvider = ( { children, redirectUrl } ) => {
+ return (
+
+ { children }
+
+ );
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/checkout-events/event-emit.ts b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/checkout-events/event-emit.ts
new file mode 100644
index 00000000000..a8826a10def
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/checkout-events/event-emit.ts
@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+ emitterCallback,
+ reducer,
+ emitEvent,
+ emitEventWithAbort,
+ ActionType,
+} from '../../../event-emit';
+
+// These events are emitted when the Checkout status is BEFORE_PROCESSING and AFTER_PROCESSING
+// to enable third parties to hook into the checkout process
+const EVENTS = {
+ CHECKOUT_SUCCESS: 'checkout_success',
+ CHECKOUT_FAIL: 'checkout_fail',
+ CHECKOUT_VALIDATION: 'checkout_validation',
+};
+
+type EventEmittersType = Record< string, ReturnType< typeof emitterCallback > >;
+
+/**
+ * Receives a reducer dispatcher and returns an object with the
+ * various event emitters for the payment processing events.
+ *
+ * Calling the event registration function with the callback will register it
+ * for the event emitter and will return a dispatcher for removing the
+ * registered callback (useful for implementation in `useEffect`).
+ *
+ * @param {Function} observerDispatch The emitter reducer dispatcher.
+ * @return {Object} An object with the various payment event emitter registration functions
+ */
+const useEventEmitters = (
+ observerDispatch: React.Dispatch< ActionType >
+): EventEmittersType => {
+ const eventEmitters = useMemo(
+ () => ( {
+ onCheckoutSuccess: emitterCallback(
+ EVENTS.CHECKOUT_SUCCESS,
+ observerDispatch
+ ),
+ onCheckoutFail: emitterCallback(
+ EVENTS.CHECKOUT_FAIL,
+ observerDispatch
+ ),
+ onCheckoutValidation: emitterCallback(
+ EVENTS.CHECKOUT_VALIDATION,
+ observerDispatch
+ ),
+ } ),
+ [ observerDispatch ]
+ );
+ return eventEmitters;
+};
+
+export { EVENTS, useEventEmitters, reducer, emitEvent, emitEventWithAbort };
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/checkout-events/index.tsx b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/checkout-events/index.tsx
new file mode 100644
index 00000000000..ff888086b7f
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/checkout-events/index.tsx
@@ -0,0 +1,319 @@
+/**
+ * External dependencies
+ */
+
+import {
+ createContext,
+ useContext,
+ useReducer,
+ useRef,
+ useMemo,
+ useEffect,
+ useCallback,
+} from '@wordpress/element';
+import { usePrevious } from '@woocommerce/base-hooks';
+import deprecated from '@wordpress/deprecated';
+import { useDispatch, useSelect } from '@wordpress/data';
+import {
+ CHECKOUT_STORE_KEY,
+ PAYMENT_STORE_KEY,
+ VALIDATION_STORE_KEY,
+} from '@woocommerce/block-data';
+
+/**
+ * Internal dependencies
+ */
+import { useEventEmitters, reducer as emitReducer } from './event-emit';
+import { emitterCallback, noticeContexts } from '../../../event-emit';
+import { useStoreEvents } from '../../../hooks/use-store-events';
+import {
+ getExpressPaymentMethods,
+ getPaymentMethods,
+} from '../../../../../blocks-registry/payment-methods/registry';
+import { useEditorContext } from '../../editor-context';
+
+type CheckoutEventsContextType = {
+ // Submits the checkout and begins processing.
+ onSubmit: () => void;
+ // Deprecated in favour of onCheckoutSuccess.
+ onCheckoutAfterProcessingWithSuccess: ReturnType< typeof emitterCallback >;
+ // Deprecated in favour of onCheckoutFail.
+ onCheckoutAfterProcessingWithError: ReturnType< typeof emitterCallback >;
+ // Deprecated in favour of onCheckoutValidationBeforeProcessing.
+ onCheckoutBeforeProcessing: ReturnType< typeof emitterCallback >;
+ // Deprecated in favour of onCheckoutValidation.
+ onCheckoutValidationBeforeProcessing: ReturnType< typeof emitterCallback >;
+ // Used to register a callback that will fire if the api call to /checkout is successful
+ onCheckoutSuccess: ReturnType< typeof emitterCallback >;
+ // Used to register a callback that will fire if the api call to /checkout fails
+ onCheckoutFail: ReturnType< typeof emitterCallback >;
+ // Used to register a callback that will fire when the checkout performs validation on the form
+ onCheckoutValidation: ReturnType< typeof emitterCallback >;
+};
+
+const CheckoutEventsContext = createContext< CheckoutEventsContextType >( {
+ onSubmit: () => void null,
+ onCheckoutAfterProcessingWithSuccess: () => () => void null, // deprecated for onCheckoutSuccess
+ onCheckoutAfterProcessingWithError: () => () => void null, // deprecated for onCheckoutFail
+ onCheckoutBeforeProcessing: () => () => void null, // deprecated for onCheckoutValidationBeforeProcessing
+ onCheckoutValidationBeforeProcessing: () => () => void null, // deprecated for onCheckoutValidation
+ onCheckoutSuccess: () => () => void null,
+ onCheckoutFail: () => () => void null,
+ onCheckoutValidation: () => () => void null,
+} );
+
+export const useCheckoutEventsContext = () => {
+ return useContext( CheckoutEventsContext );
+};
+
+/**
+ * Checkout Events provider
+ * Emit Checkout events and provide access to Checkout event handlers
+ *
+ * @param {Object} props Incoming props for the provider.
+ * @param {Object} props.children The children being wrapped.
+ * @param {string} props.redirectUrl Initialize what the checkout will redirect to after successful submit.
+ */
+export const CheckoutEventsProvider = ( {
+ children,
+ redirectUrl,
+}: {
+ children: React.ReactChildren;
+ redirectUrl: string;
+} ): JSX.Element => {
+ const paymentMethods = getPaymentMethods();
+ const expressPaymentMethods = getExpressPaymentMethods();
+ const { isEditor } = useEditorContext();
+
+ const { __internalUpdateAvailablePaymentMethods } =
+ useDispatch( PAYMENT_STORE_KEY );
+
+ // Update the payment method store when paymentMethods or expressPaymentMethods changes.
+ // Ensure this happens in the editor even if paymentMethods is empty. This won't happen instantly when the objects
+ // are updated, but on the next re-render.
+ useEffect( () => {
+ if (
+ ! isEditor &&
+ Object.keys( paymentMethods ).length === 0 &&
+ Object.keys( expressPaymentMethods ).length === 0
+ ) {
+ return;
+ }
+ __internalUpdateAvailablePaymentMethods();
+ }, [
+ isEditor,
+ paymentMethods,
+ expressPaymentMethods,
+ __internalUpdateAvailablePaymentMethods,
+ ] );
+
+ const {
+ __internalSetRedirectUrl,
+ __internalEmitValidateEvent,
+ __internalEmitAfterProcessingEvents,
+ __internalSetBeforeProcessing,
+ } = useDispatch( CHECKOUT_STORE_KEY );
+
+ const {
+ checkoutRedirectUrl,
+ checkoutStatus,
+ isCheckoutBeforeProcessing,
+ isCheckoutAfterProcessing,
+ checkoutHasError,
+ checkoutOrderId,
+ checkoutOrderNotes,
+ checkoutCustomerId,
+ } = useSelect( ( select ) => {
+ const store = select( CHECKOUT_STORE_KEY );
+ return {
+ checkoutRedirectUrl: store.getRedirectUrl(),
+ checkoutStatus: store.getCheckoutStatus(),
+ isCheckoutBeforeProcessing: store.isBeforeProcessing(),
+ isCheckoutAfterProcessing: store.isAfterProcessing(),
+ checkoutHasError: store.hasError(),
+ checkoutOrderId: store.getOrderId(),
+ checkoutOrderNotes: store.getOrderNotes(),
+ checkoutCustomerId: store.getCustomerId(),
+ };
+ } );
+
+ if ( redirectUrl && redirectUrl !== checkoutRedirectUrl ) {
+ __internalSetRedirectUrl( redirectUrl );
+ }
+
+ const { setValidationErrors } = useDispatch( VALIDATION_STORE_KEY );
+ const { dispatchCheckoutEvent } = useStoreEvents();
+ const { checkoutNotices, paymentNotices, expressPaymentNotices } =
+ useSelect( ( select ) => {
+ const { getNotices } = select( 'core/notices' );
+ const checkoutContexts = Object.values( noticeContexts ).filter(
+ ( context ) =>
+ context !== noticeContexts.PAYMENTS &&
+ context !== noticeContexts.EXPRESS_PAYMENTS
+ );
+ const allCheckoutNotices = checkoutContexts.reduce(
+ ( acc, context ) => {
+ return [ ...acc, ...getNotices( context ) ];
+ },
+ []
+ );
+ return {
+ checkoutNotices: allCheckoutNotices,
+ paymentNotices: getNotices( noticeContexts.PAYMENTS ),
+ expressPaymentNotices: getNotices(
+ noticeContexts.EXPRESS_PAYMENTS
+ ),
+ };
+ }, [] );
+
+ const [ observers, observerDispatch ] = useReducer( emitReducer, {} );
+ const currentObservers = useRef( observers );
+ const { onCheckoutValidation, onCheckoutSuccess, onCheckoutFail } =
+ useEventEmitters( observerDispatch );
+
+ // set observers on ref so it's always current.
+ useEffect( () => {
+ currentObservers.current = observers;
+ }, [ observers ] );
+
+ /**
+ * @deprecated use onCheckoutValidation instead
+ *
+ * To prevent the deprecation message being shown at render time
+ * we need an extra function between useMemo and event emitters
+ * so that the deprecated message gets shown only at invocation time.
+ * (useMemo calls the passed function at render time)
+ * See: https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4039/commits/a502d1be8828848270993264c64220731b0ae181
+ */
+ const onCheckoutBeforeProcessing = useMemo( () => {
+ return function ( ...args: Parameters< typeof onCheckoutValidation > ) {
+ deprecated( 'onCheckoutBeforeProcessing', {
+ alternative: 'onCheckoutValidation',
+ plugin: 'WooCommerce Blocks',
+ } );
+ return onCheckoutValidation( ...args );
+ };
+ }, [ onCheckoutValidation ] );
+
+ /**
+ * @deprecated use onCheckoutValidation instead
+ */
+ const onCheckoutValidationBeforeProcessing = useMemo( () => {
+ return function ( ...args: Parameters< typeof onCheckoutValidation > ) {
+ deprecated( 'onCheckoutValidationBeforeProcessing', {
+ since: '9.7.0',
+ alternative: 'onCheckoutValidation',
+ plugin: 'WooCommerce Blocks',
+ link: 'https://github.com/woocommerce/woocommerce-blocks/pull/8381',
+ } );
+ return onCheckoutValidation( ...args );
+ };
+ }, [ onCheckoutValidation ] );
+
+ /**
+ * @deprecated use onCheckoutSuccess instead
+ */
+ const onCheckoutAfterProcessingWithSuccess = useMemo( () => {
+ return function ( ...args: Parameters< typeof onCheckoutSuccess > ) {
+ deprecated( 'onCheckoutAfterProcessingWithSuccess', {
+ since: '9.7.0',
+ alternative: 'onCheckoutSuccess',
+ plugin: 'WooCommerce Blocks',
+ link: 'https://github.com/woocommerce/woocommerce-blocks/pull/8381',
+ } );
+ return onCheckoutSuccess( ...args );
+ };
+ }, [ onCheckoutSuccess ] );
+
+ /**
+ * @deprecated use onCheckoutFail instead
+ */
+ const onCheckoutAfterProcessingWithError = useMemo( () => {
+ return function ( ...args: Parameters< typeof onCheckoutFail > ) {
+ deprecated( 'onCheckoutAfterProcessingWithError', {
+ since: '9.7.0',
+ alternative: 'onCheckoutFail',
+ plugin: 'WooCommerce Blocks',
+ link: 'https://github.com/woocommerce/woocommerce-blocks/pull/8381',
+ } );
+ return onCheckoutFail( ...args );
+ };
+ }, [ onCheckoutFail ] );
+
+ // Emit CHECKOUT_VALIDATE event and set the error state based on the response of
+ // the registered callbacks
+ useEffect( () => {
+ if ( isCheckoutBeforeProcessing ) {
+ __internalEmitValidateEvent( {
+ observers: currentObservers.current,
+ setValidationErrors,
+ } );
+ }
+ }, [
+ isCheckoutBeforeProcessing,
+ setValidationErrors,
+ __internalEmitValidateEvent,
+ ] );
+
+ const previousStatus = usePrevious( checkoutStatus );
+ const previousHasError = usePrevious( checkoutHasError );
+
+ // Emit CHECKOUT_SUCCESS and CHECKOUT_FAIL events
+ // and set checkout errors according to the callback responses
+ useEffect( () => {
+ if (
+ checkoutStatus === previousStatus &&
+ checkoutHasError === previousHasError
+ ) {
+ return;
+ }
+
+ if ( isCheckoutAfterProcessing ) {
+ __internalEmitAfterProcessingEvents( {
+ observers: currentObservers.current,
+ notices: {
+ checkoutNotices,
+ paymentNotices,
+ expressPaymentNotices,
+ },
+ } );
+ }
+ }, [
+ checkoutStatus,
+ checkoutHasError,
+ checkoutRedirectUrl,
+ checkoutOrderId,
+ checkoutCustomerId,
+ checkoutOrderNotes,
+ isCheckoutAfterProcessing,
+ isCheckoutBeforeProcessing,
+ previousStatus,
+ previousHasError,
+ checkoutNotices,
+ expressPaymentNotices,
+ paymentNotices,
+ __internalEmitValidateEvent,
+ __internalEmitAfterProcessingEvents,
+ ] );
+
+ const onSubmit = useCallback( () => {
+ dispatchCheckoutEvent( 'submit' );
+ __internalSetBeforeProcessing();
+ }, [ dispatchCheckoutEvent, __internalSetBeforeProcessing ] );
+
+ const checkoutEventHandlers = {
+ onSubmit,
+ onCheckoutBeforeProcessing,
+ onCheckoutValidationBeforeProcessing,
+ onCheckoutAfterProcessingWithSuccess,
+ onCheckoutAfterProcessingWithError,
+ onCheckoutSuccess,
+ onCheckoutFail,
+ onCheckoutValidation,
+ };
+ return (
+
+ { children }
+
+ );
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/checkout-processor.ts b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/checkout-processor.ts
new file mode 100644
index 00000000000..e35c5d4fa2e
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/checkout-processor.ts
@@ -0,0 +1,344 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import triggerFetch from '@wordpress/api-fetch';
+import {
+ useEffect,
+ useRef,
+ useCallback,
+ useState,
+ useMemo,
+} from '@wordpress/element';
+import {
+ emptyHiddenAddressFields,
+ removeAllNotices,
+} from '@woocommerce/base-utils';
+import { useDispatch, useSelect, select as selectStore } from '@wordpress/data';
+import {
+ CHECKOUT_STORE_KEY,
+ PAYMENT_STORE_KEY,
+ VALIDATION_STORE_KEY,
+ CART_STORE_KEY,
+ processErrorResponse,
+} from '@woocommerce/block-data';
+import {
+ getPaymentMethods,
+ getExpressPaymentMethods,
+} from '@woocommerce/blocks-registry';
+import {
+ ApiResponse,
+ CheckoutResponseSuccess,
+ CheckoutResponseError,
+ assertResponseIsValid,
+} from '@woocommerce/types';
+
+/**
+ * Internal dependencies
+ */
+import { preparePaymentData, processCheckoutResponseHeaders } from './utils';
+import { useCheckoutEventsContext } from './checkout-events';
+import { useShippingDataContext } from './shipping';
+import { useStoreCart } from '../../hooks/cart/use-store-cart';
+
+/**
+ * CheckoutProcessor component.
+ *
+ * Subscribes to checkout context and triggers processing via the API.
+ */
+const CheckoutProcessor = () => {
+ const { onCheckoutValidation } = useCheckoutEventsContext();
+
+ const {
+ hasError: checkoutHasError,
+ redirectUrl,
+ isProcessing: checkoutIsProcessing,
+ isBeforeProcessing: checkoutIsBeforeProcessing,
+ isComplete: checkoutIsComplete,
+ orderNotes,
+ shouldCreateAccount,
+ extensionData,
+ customerId,
+ } = useSelect( ( select ) => {
+ const store = select( CHECKOUT_STORE_KEY );
+ return {
+ hasError: store.hasError(),
+ redirectUrl: store.getRedirectUrl(),
+ isProcessing: store.isProcessing(),
+ isBeforeProcessing: store.isBeforeProcessing(),
+ isComplete: store.isComplete(),
+ orderNotes: store.getOrderNotes(),
+ shouldCreateAccount: store.getShouldCreateAccount(),
+ extensionData: store.getExtensionData(),
+ customerId: store.getCustomerId(),
+ };
+ } );
+
+ const { __internalSetHasError, __internalProcessCheckoutResponse } =
+ useDispatch( CHECKOUT_STORE_KEY );
+
+ const hasValidationErrors = useSelect(
+ ( select ) => select( VALIDATION_STORE_KEY ).hasValidationErrors
+ );
+ const { shippingErrorStatus } = useShippingDataContext();
+
+ const { billingAddress, shippingAddress } = useSelect( ( select ) =>
+ select( CART_STORE_KEY ).getCustomerData()
+ );
+
+ const { cartNeedsPayment, cartNeedsShipping, receiveCartContents } =
+ useStoreCart();
+
+ const {
+ activePaymentMethod,
+ paymentMethodData,
+ isExpressPaymentMethodActive,
+ hasPaymentError,
+ isPaymentReady,
+ shouldSavePayment,
+ } = useSelect( ( select ) => {
+ const store = select( PAYMENT_STORE_KEY );
+
+ return {
+ activePaymentMethod: store.getActivePaymentMethod(),
+ paymentMethodData: store.getPaymentMethodData(),
+ isExpressPaymentMethodActive: store.isExpressPaymentMethodActive(),
+ hasPaymentError: store.hasPaymentError(),
+ isPaymentReady: store.isPaymentReady(),
+ shouldSavePayment: store.getShouldSavePaymentMethod(),
+ };
+ }, [] );
+
+ const paymentMethods = getPaymentMethods();
+ const expressPaymentMethods = getExpressPaymentMethods();
+ const currentBillingAddress = useRef( billingAddress );
+ const currentShippingAddress = useRef( shippingAddress );
+ const currentRedirectUrl = useRef( redirectUrl );
+ const [ isProcessingOrder, setIsProcessingOrder ] = useState( false );
+
+ const paymentMethodId = useMemo( () => {
+ const merged = {
+ ...expressPaymentMethods,
+ ...paymentMethods,
+ };
+ return merged?.[ activePaymentMethod ]?.paymentMethodId;
+ }, [ activePaymentMethod, expressPaymentMethods, paymentMethods ] );
+
+ const checkoutWillHaveError =
+ ( hasValidationErrors() && ! isExpressPaymentMethodActive ) ||
+ hasPaymentError ||
+ shippingErrorStatus.hasError;
+
+ const paidAndWithoutErrors =
+ ! checkoutHasError &&
+ ! checkoutWillHaveError &&
+ ( isPaymentReady || ! cartNeedsPayment ) &&
+ checkoutIsProcessing;
+
+ // Determine if checkout has an error.
+ useEffect( () => {
+ if (
+ checkoutWillHaveError !== checkoutHasError &&
+ ( checkoutIsProcessing || checkoutIsBeforeProcessing ) &&
+ ! isExpressPaymentMethodActive
+ ) {
+ __internalSetHasError( checkoutWillHaveError );
+ }
+ }, [
+ checkoutWillHaveError,
+ checkoutHasError,
+ checkoutIsProcessing,
+ checkoutIsBeforeProcessing,
+ isExpressPaymentMethodActive,
+ __internalSetHasError,
+ ] );
+
+ // Keep the billing, shipping and redirectUrl current
+ useEffect( () => {
+ currentBillingAddress.current = billingAddress;
+ currentShippingAddress.current = shippingAddress;
+ currentRedirectUrl.current = redirectUrl;
+ }, [ billingAddress, shippingAddress, redirectUrl ] );
+
+ const checkValidation = useCallback( () => {
+ if ( hasValidationErrors() ) {
+ // If there is a shipping rates validation error, return the error message to be displayed.
+ if (
+ selectStore( VALIDATION_STORE_KEY ).getValidationError(
+ 'shipping-rates-error'
+ ) !== undefined
+ ) {
+ return {
+ errorMessage: __(
+ 'Sorry, this order requires a shipping option.',
+ 'woo-gutenberg-products-block'
+ ),
+ };
+ }
+ return false;
+ }
+ if ( hasPaymentError ) {
+ return {
+ errorMessage: __(
+ 'There was a problem with your payment option.',
+ 'woo-gutenberg-products-block'
+ ),
+ context: 'wc/checkout/payments',
+ };
+ }
+ if ( shippingErrorStatus.hasError ) {
+ return {
+ errorMessage: __(
+ 'There was a problem with your shipping option.',
+ 'woo-gutenberg-products-block'
+ ),
+ context: 'wc/checkout/shipping-methods',
+ };
+ }
+
+ return true;
+ }, [ hasValidationErrors, hasPaymentError, shippingErrorStatus.hasError ] );
+
+ // Validate the checkout using the CHECKOUT_VALIDATION_BEFORE_PROCESSING event
+ useEffect( () => {
+ let unsubscribeProcessing: () => void;
+ if ( ! isExpressPaymentMethodActive ) {
+ unsubscribeProcessing = onCheckoutValidation( checkValidation, 0 );
+ }
+ return () => {
+ if (
+ ! isExpressPaymentMethodActive &&
+ typeof unsubscribeProcessing === 'function'
+ ) {
+ unsubscribeProcessing();
+ }
+ };
+ }, [
+ onCheckoutValidation,
+ checkValidation,
+ isExpressPaymentMethodActive,
+ ] );
+
+ // Redirect when checkout is complete and there is a redirect url.
+ useEffect( () => {
+ if ( currentRedirectUrl.current ) {
+ window.location.href = currentRedirectUrl.current;
+ }
+ }, [ checkoutIsComplete ] );
+
+ // POST to the Store API and process and display any errors, or set order complete
+ const processOrder = useCallback( async () => {
+ if ( isProcessingOrder ) {
+ return;
+ }
+ setIsProcessingOrder( true );
+ removeAllNotices();
+
+ const paymentData = cartNeedsPayment
+ ? {
+ payment_method: paymentMethodId,
+ payment_data: preparePaymentData(
+ paymentMethodData,
+ shouldSavePayment,
+ activePaymentMethod
+ ),
+ }
+ : {};
+
+ const data = {
+ shipping_address: cartNeedsShipping
+ ? emptyHiddenAddressFields( currentShippingAddress.current )
+ : undefined,
+ billing_address: emptyHiddenAddressFields(
+ currentBillingAddress.current
+ ),
+ customer_note: orderNotes,
+ create_account: shouldCreateAccount,
+ ...paymentData,
+ extensions: { ...extensionData },
+ };
+
+ triggerFetch( {
+ path: '/wc/store/v1/checkout',
+ method: 'POST',
+ data,
+ cache: 'no-store',
+ parse: false,
+ } )
+ .then( ( response: unknown ) => {
+ assertResponseIsValid< CheckoutResponseSuccess >( response );
+ processCheckoutResponseHeaders( response.headers );
+ if ( ! response.ok ) {
+ throw response;
+ }
+ return response.json();
+ } )
+ .then( ( responseJson: CheckoutResponseSuccess ) => {
+ __internalProcessCheckoutResponse( responseJson );
+ setIsProcessingOrder( false );
+ } )
+ .catch( ( errorResponse: ApiResponse< CheckoutResponseError > ) => {
+ processCheckoutResponseHeaders( errorResponse?.headers );
+ try {
+ // This attempts to parse a JSON error response where the status code was 4xx/5xx.
+ errorResponse
+ .json()
+ .then(
+ ( response ) => response as CheckoutResponseError
+ )
+ .then( ( response: CheckoutResponseError ) => {
+ if ( response.data?.cart ) {
+ // We don't want to receive the address here because it will overwrite fields.
+ receiveCartContents( response.data.cart );
+ }
+ processErrorResponse( response );
+ __internalProcessCheckoutResponse( response );
+ } );
+ } catch {
+ let errorMessage = __(
+ 'Something went wrong when placing the order. Check your email for order updates before retrying.',
+ 'woo-gutenberg-products-block'
+ );
+
+ if ( customerId !== 0 ) {
+ errorMessage = __(
+ "Something went wrong when placing the order. Check your account's order history or your email for order updates before retrying.",
+ 'woo-gutenberg-products-block'
+ );
+ }
+ processErrorResponse( {
+ code: 'unknown_error',
+ message: errorMessage,
+ data: null,
+ } );
+ }
+ __internalSetHasError( true );
+ setIsProcessingOrder( false );
+ } );
+ }, [
+ isProcessingOrder,
+ cartNeedsPayment,
+ paymentMethodId,
+ paymentMethodData,
+ shouldSavePayment,
+ activePaymentMethod,
+ orderNotes,
+ shouldCreateAccount,
+ extensionData,
+ cartNeedsShipping,
+ receiveCartContents,
+ __internalSetHasError,
+ __internalProcessCheckoutResponse,
+ ] );
+
+ // Process order if conditions are good.
+ useEffect( () => {
+ if ( paidAndWithoutErrors && ! isProcessingOrder ) {
+ processOrder();
+ }
+ }, [ processOrder, paidAndWithoutErrors, isProcessingOrder ] );
+
+ return null;
+};
+
+export default CheckoutProcessor;
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/checkout-provider.js b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/checkout-provider.js
new file mode 100644
index 00000000000..0a919839e9a
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/checkout-provider.js
@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { PluginArea } from '@wordpress/plugins';
+import { CURRENT_USER_IS_ADMIN } from '@woocommerce/settings';
+import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundary';
+/**
+ * Internal dependencies
+ */
+import { PaymentEventsProvider } from './payment-events';
+import { ShippingDataProvider } from './shipping';
+import { CheckoutEventsProvider } from './checkout-events';
+import CheckoutProcessor from './checkout-processor';
+
+/**
+ * Checkout provider
+ * This wraps the checkout and provides an api interface for the checkout to
+ * children via various hooks.
+ *
+ * @param {Object} props Incoming props for the provider.
+ * @param {Object} props.children The children being wrapped.
+ * component.
+ * @param {string} [props.redirectUrl] Initialize what the checkout will
+ * redirect to after successful
+ * submit.
+ */
+export const CheckoutProvider = ( { children, redirectUrl } ) => {
+ return (
+
+
+
+ { children }
+ { /* If the current user is an admin, we let BlockErrorBoundary render
+ the error, or we simply die silently. */ }
+ null
+ }
+ >
+
+
+
+
+ );
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/index.js b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/index.js
new file mode 100644
index 00000000000..67d6fb0b8e6
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/index.js
@@ -0,0 +1,7 @@
+export * from './payment-events';
+export * from './shipping';
+export * from './checkout-events';
+export * from './cart-events';
+export * from './cart';
+export * from './checkout-processor';
+export * from './checkout-provider';
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/payment-events/event-emit.ts b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/payment-events/event-emit.ts
new file mode 100644
index 00000000000..af211ca4b86
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/payment-events/event-emit.ts
@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+ reducer,
+ emitEvent,
+ emitEventWithAbort,
+ emitterCallback,
+ ActionType,
+} from '../../../event-emit';
+
+const EMIT_TYPES = {
+ PAYMENT_SETUP: 'payment_setup',
+};
+
+type EventEmittersType = Record< string, ReturnType< typeof emitterCallback > >;
+
+/**
+ * Receives a reducer dispatcher and returns an object with the
+ * various event emitters for the payment processing events.
+ *
+ * Calling the event registration function with the callback will register it
+ * for the event emitter and will return a dispatcher for removing the
+ * registered callback (useful for implementation in `useEffect`).
+ *
+ * @param {Function} observerDispatch The emitter reducer dispatcher.
+ * @return {Object} An object with the various payment event emitter registration functions
+ */
+const useEventEmitters = (
+ observerDispatch: React.Dispatch< ActionType >
+): EventEmittersType => {
+ const eventEmitters = useMemo(
+ () => ( {
+ onPaymentSetup: emitterCallback(
+ EMIT_TYPES.PAYMENT_SETUP,
+ observerDispatch
+ ),
+ } ),
+ [ observerDispatch ]
+ );
+ return eventEmitters;
+};
+
+export { EMIT_TYPES, useEventEmitters, reducer, emitEvent, emitEventWithAbort };
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/payment-events/index.tsx b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/payment-events/index.tsx
new file mode 100644
index 00000000000..76da086024b
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/payment-events/index.tsx
@@ -0,0 +1,161 @@
+/**
+ * External dependencies
+ */
+import {
+ createContext,
+ useContext,
+ useReducer,
+ useRef,
+ useEffect,
+ useMemo,
+} from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import {
+ CHECKOUT_STORE_KEY,
+ PAYMENT_STORE_KEY,
+ VALIDATION_STORE_KEY,
+} from '@woocommerce/block-data';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import { useEventEmitters, reducer as emitReducer } from './event-emit';
+import { emitterCallback } from '../../../event-emit';
+
+type PaymentEventsContextType = {
+ // Event registration callback for registering observers for the payment processing event.
+ onPaymentProcessing: ReturnType< typeof emitterCallback >;
+ onPaymentSetup: ReturnType< typeof emitterCallback >;
+};
+
+const PaymentEventsContext = createContext< PaymentEventsContextType >( {
+ onPaymentProcessing: () => () => () => void null,
+ onPaymentSetup: () => () => () => void null,
+} );
+
+export const usePaymentEventsContext = () => {
+ return useContext( PaymentEventsContext );
+};
+
+/**
+ * PaymentEventsProvider is automatically included in the CheckoutProvider.
+ *
+ * This provides the api interface (via the context hook) for payment status and data.
+ *
+ * @param {Object} props Incoming props for provider
+ * @param {Object} props.children The wrapped components in this provider.
+ */
+export const PaymentEventsProvider = ( {
+ children,
+}: {
+ children: React.ReactNode;
+} ): JSX.Element => {
+ const {
+ isProcessing: checkoutIsProcessing,
+ isIdle: checkoutIsIdle,
+ isCalculating: checkoutIsCalculating,
+ hasError: checkoutHasError,
+ } = useSelect( ( select ) => {
+ const store = select( CHECKOUT_STORE_KEY );
+ return {
+ isProcessing: store.isProcessing(),
+ isIdle: store.isIdle(),
+ hasError: store.hasError(),
+ isCalculating: store.isCalculating(),
+ };
+ } );
+ const { isPaymentReady } = useSelect( ( select ) => {
+ const store = select( PAYMENT_STORE_KEY );
+
+ return {
+ // The PROCESSING status represents before the checkout runs the observers
+ // registered for the payment_setup event.
+ isPaymentProcessing: store.isPaymentProcessing(),
+ // the READY status represents when the observers have finished processing and payment data
+ // synced with the payment store, ready to be sent to the StoreApi
+ isPaymentReady: store.isPaymentReady(),
+ };
+ } );
+
+ const { setValidationErrors } = useDispatch( VALIDATION_STORE_KEY );
+ const [ observers, observerDispatch ] = useReducer( emitReducer, {} );
+ const { onPaymentSetup } = useEventEmitters( observerDispatch );
+ const currentObservers = useRef( observers );
+
+ // ensure observers are always current.
+ useEffect( () => {
+ currentObservers.current = observers;
+ }, [ observers ] );
+
+ const {
+ __internalSetPaymentProcessing,
+ __internalSetPaymentIdle,
+ __internalEmitPaymentProcessingEvent,
+ } = useDispatch( PAYMENT_STORE_KEY );
+
+ // flip payment to processing if checkout processing is complete and there are no errors
+ useEffect( () => {
+ if (
+ checkoutIsProcessing &&
+ ! checkoutHasError &&
+ ! checkoutIsCalculating
+ ) {
+ __internalSetPaymentProcessing();
+
+ // Note: the nature of this event emitter is that it will bail on any
+ // observer that returns a response that !== true. However, this still
+ // allows for other observers that return true for continuing through
+ // to the next observer (or bailing if there's a problem).
+ __internalEmitPaymentProcessingEvent(
+ currentObservers.current,
+ setValidationErrors
+ );
+ }
+ }, [
+ checkoutIsProcessing,
+ checkoutHasError,
+ checkoutIsCalculating,
+ __internalSetPaymentProcessing,
+ __internalEmitPaymentProcessingEvent,
+ setValidationErrors,
+ ] );
+
+ // When checkout is returned to idle, and the payment setup has not completed, set payment status to idle
+ useEffect( () => {
+ if ( checkoutIsIdle && ! isPaymentReady ) {
+ __internalSetPaymentIdle();
+ }
+ }, [ checkoutIsIdle, isPaymentReady, __internalSetPaymentIdle ] );
+
+ // if checkout has an error sync payment status back to idle.
+ useEffect( () => {
+ if ( checkoutHasError && isPaymentReady ) {
+ __internalSetPaymentIdle();
+ }
+ }, [ checkoutHasError, isPaymentReady, __internalSetPaymentIdle ] );
+
+ /**
+ * @deprecated use onPaymentSetup instead
+ */
+ const onPaymentProcessing = useMemo( () => {
+ return function ( ...args: Parameters< typeof onPaymentSetup > ) {
+ deprecated( 'onPaymentProcessing', {
+ alternative: 'onPaymentSetup',
+ plugin: 'WooCommerce Blocks',
+ } );
+ return onPaymentSetup( ...args );
+ };
+ }, [ onPaymentSetup ] );
+
+ const paymentContextData = {
+ onPaymentProcessing,
+ onPaymentSetup,
+ };
+
+ return (
+
+ { children }
+
+ );
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/shipping/constants.ts b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/shipping/constants.ts
new file mode 100644
index 00000000000..5a311b4523f
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/shipping/constants.ts
@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import type { CartShippingAddress } from '@woocommerce/types';
+
+/**
+ * Internal dependencies
+ */
+import type { ShippingDataContextType, ShippingErrorTypes } from './types';
+
+export const ERROR_TYPES = {
+ NONE: 'none',
+ INVALID_ADDRESS: 'invalid_address',
+ UNKNOWN: 'unknown_error',
+} as ShippingErrorTypes;
+
+export const shippingErrorCodes = {
+ INVALID_COUNTRY: 'woocommerce_rest_cart_shipping_rates_invalid_country',
+ MISSING_COUNTRY: 'woocommerce_rest_cart_shipping_rates_missing_country',
+ INVALID_STATE: 'woocommerce_rest_cart_shipping_rates_invalid_state',
+};
+
+export const DEFAULT_SHIPPING_ADDRESS = {
+ first_name: '',
+ last_name: '',
+ company: '',
+ address_1: '',
+ address_2: '',
+ city: '',
+ state: '',
+ postcode: '',
+ country: '',
+} as CartShippingAddress;
+
+export const DEFAULT_SHIPPING_CONTEXT_DATA = {
+ shippingErrorStatus: {
+ isPristine: true,
+ isValid: false,
+ hasInvalidAddress: false,
+ hasError: false,
+ },
+ dispatchErrorStatus: ( status ) => status,
+ shippingErrorTypes: ERROR_TYPES,
+ onShippingRateSuccess: () => () => void null,
+ onShippingRateFail: () => () => void null,
+ onShippingRateSelectSuccess: () => () => void null,
+ onShippingRateSelectFail: () => () => void null,
+} as ShippingDataContextType;
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/shipping/event-emit.js b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/shipping/event-emit.js
new file mode 100644
index 00000000000..5c0a389722d
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/shipping/event-emit.js
@@ -0,0 +1,37 @@
+/**
+ * Internal dependencies
+ */
+import { emitterCallback, reducer, emitEvent } from '../../../event-emit';
+
+const EMIT_TYPES = {
+ SHIPPING_RATES_SUCCESS: 'shipping_rates_success',
+ SHIPPING_RATES_FAIL: 'shipping_rates_fail',
+ SHIPPING_RATE_SELECT_SUCCESS: 'shipping_rate_select_success',
+ SHIPPING_RATE_SELECT_FAIL: 'shipping_rate_select_fail',
+};
+
+/**
+ * Receives a reducer dispatcher and returns an object with the onSuccess and
+ * onFail callback registration points for the shipping option emit events.
+ *
+ * Calling the event registration function with the callback will register it
+ * for the event emitter and will return a dispatcher for removing the
+ * registered callback (useful for implementation in `useEffect`).
+ *
+ * @param {Function} dispatcher A reducer dispatcher
+ * @return {Object} An object with `onSuccess` and `onFail` emitter registration.
+ */
+const emitterObservers = ( dispatcher ) => ( {
+ onSuccess: emitterCallback( EMIT_TYPES.SHIPPING_RATES_SUCCESS, dispatcher ),
+ onFail: emitterCallback( EMIT_TYPES.SHIPPING_RATES_FAIL, dispatcher ),
+ onSelectSuccess: emitterCallback(
+ EMIT_TYPES.SHIPPING_RATE_SELECT_SUCCESS,
+ dispatcher
+ ),
+ onSelectFail: emitterCallback(
+ EMIT_TYPES.SHIPPING_RATE_SELECT_FAIL,
+ dispatcher
+ ),
+} );
+
+export { EMIT_TYPES, emitterObservers, reducer, emitEvent };
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/shipping/index.tsx b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/shipping/index.tsx
new file mode 100644
index 00000000000..9393de50701
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/shipping/index.tsx
@@ -0,0 +1,203 @@
+/**
+ * External dependencies
+ */
+import {
+ createContext,
+ useContext,
+ useReducer,
+ useEffect,
+ useMemo,
+ useRef,
+} from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data';
+
+/**
+ * Internal dependencies
+ */
+import type {
+ ShippingDataContextType,
+ ShippingDataProviderProps,
+} from './types';
+import { ERROR_TYPES, DEFAULT_SHIPPING_CONTEXT_DATA } from './constants';
+import { hasInvalidShippingAddress } from './utils';
+import { errorStatusReducer } from './reducers';
+import {
+ EMIT_TYPES,
+ emitterObservers,
+ reducer as emitReducer,
+ emitEvent,
+} from './event-emit';
+import { useStoreCart } from '../../../hooks/cart/use-store-cart';
+import { useShippingData } from '../../../hooks/shipping/use-shipping-data';
+
+const { NONE, INVALID_ADDRESS, UNKNOWN } = ERROR_TYPES;
+const ShippingDataContext = createContext( DEFAULT_SHIPPING_CONTEXT_DATA );
+
+export const useShippingDataContext = (): ShippingDataContextType => {
+ return useContext( ShippingDataContext );
+};
+
+/**
+ * The shipping data provider exposes the interface for shipping in the checkout/cart.
+ */
+export const ShippingDataProvider = ( {
+ children,
+}: ShippingDataProviderProps ) => {
+ const { __internalIncrementCalculating, __internalDecrementCalculating } =
+ useDispatch( CHECKOUT_STORE_KEY );
+ const { shippingRates, isLoadingRates, cartErrors } = useStoreCart();
+ const { selectedRates, isSelectingRate } = useShippingData();
+ const [ shippingErrorStatus, dispatchErrorStatus ] = useReducer(
+ errorStatusReducer,
+ NONE
+ );
+ const [ observers, observerDispatch ] = useReducer( emitReducer, {} );
+ const currentObservers = useRef( observers );
+ const eventObservers = useMemo(
+ () => ( {
+ onShippingRateSuccess:
+ emitterObservers( observerDispatch ).onSuccess,
+ onShippingRateFail: emitterObservers( observerDispatch ).onFail,
+ onShippingRateSelectSuccess:
+ emitterObservers( observerDispatch ).onSelectSuccess,
+ onShippingRateSelectFail:
+ emitterObservers( observerDispatch ).onSelectFail,
+ } ),
+ [ observerDispatch ]
+ );
+
+ // set observers on ref so it's always current.
+ useEffect( () => {
+ currentObservers.current = observers;
+ }, [ observers ] );
+
+ // increment/decrement checkout calculating counts when shipping is loading.
+ useEffect( () => {
+ if ( isLoadingRates ) {
+ __internalIncrementCalculating();
+ } else {
+ __internalDecrementCalculating();
+ }
+ }, [
+ isLoadingRates,
+ __internalIncrementCalculating,
+ __internalDecrementCalculating,
+ ] );
+
+ // increment/decrement checkout calculating counts when shipping rates are being selected.
+ useEffect( () => {
+ if ( isSelectingRate ) {
+ __internalIncrementCalculating();
+ } else {
+ __internalDecrementCalculating();
+ }
+ }, [
+ __internalIncrementCalculating,
+ __internalDecrementCalculating,
+ isSelectingRate,
+ ] );
+
+ // set shipping error status if there are shipping error codes
+ useEffect( () => {
+ if (
+ cartErrors.length > 0 &&
+ hasInvalidShippingAddress( cartErrors )
+ ) {
+ dispatchErrorStatus( { type: INVALID_ADDRESS } );
+ } else {
+ dispatchErrorStatus( { type: NONE } );
+ }
+ }, [ cartErrors ] );
+
+ const currentErrorStatus = useMemo(
+ () => ( {
+ isPristine: shippingErrorStatus === NONE,
+ isValid: shippingErrorStatus === NONE,
+ hasInvalidAddress: shippingErrorStatus === INVALID_ADDRESS,
+ hasError:
+ shippingErrorStatus === UNKNOWN ||
+ shippingErrorStatus === INVALID_ADDRESS,
+ } ),
+ [ shippingErrorStatus ]
+ );
+
+ // emit events.
+ useEffect( () => {
+ if (
+ ! isLoadingRates &&
+ ( shippingRates.length === 0 || currentErrorStatus.hasError )
+ ) {
+ emitEvent(
+ currentObservers.current,
+ EMIT_TYPES.SHIPPING_RATES_FAIL,
+ {
+ hasInvalidAddress: currentErrorStatus.hasInvalidAddress,
+ hasError: currentErrorStatus.hasError,
+ }
+ );
+ }
+ }, [
+ shippingRates,
+ isLoadingRates,
+ currentErrorStatus.hasError,
+ currentErrorStatus.hasInvalidAddress,
+ ] );
+
+ useEffect( () => {
+ if (
+ ! isLoadingRates &&
+ shippingRates.length > 0 &&
+ ! currentErrorStatus.hasError
+ ) {
+ emitEvent(
+ currentObservers.current,
+ EMIT_TYPES.SHIPPING_RATES_SUCCESS,
+ shippingRates
+ );
+ }
+ }, [ shippingRates, isLoadingRates, currentErrorStatus.hasError ] );
+
+ // emit shipping rate selection events.
+ useEffect( () => {
+ if ( isSelectingRate ) {
+ return;
+ }
+ if ( currentErrorStatus.hasError ) {
+ emitEvent(
+ currentObservers.current,
+ EMIT_TYPES.SHIPPING_RATE_SELECT_FAIL,
+ {
+ hasError: currentErrorStatus.hasError,
+ hasInvalidAddress: currentErrorStatus.hasInvalidAddress,
+ }
+ );
+ } else {
+ emitEvent(
+ currentObservers.current,
+ EMIT_TYPES.SHIPPING_RATE_SELECT_SUCCESS,
+ selectedRates.current
+ );
+ }
+ }, [
+ selectedRates,
+ isSelectingRate,
+ currentErrorStatus.hasError,
+ currentErrorStatus.hasInvalidAddress,
+ ] );
+
+ const ShippingData: ShippingDataContextType = {
+ shippingErrorStatus: currentErrorStatus,
+ dispatchErrorStatus,
+ shippingErrorTypes: ERROR_TYPES,
+ ...eventObservers,
+ };
+
+ return (
+ <>
+
+ { children }
+
+
+ );
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/shipping/reducers.js b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/shipping/reducers.js
new file mode 100644
index 00000000000..1b24a0049a2
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/shipping/reducers.js
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import { ERROR_TYPES } from './constants';
+
+/**
+ * Reducer for shipping status state
+ *
+ * @param {string} state The current status.
+ * @param {Object} action The incoming action.
+ * @param {string} action.type The type of action.
+ */
+export const errorStatusReducer = ( state, { type } ) => {
+ if ( Object.values( ERROR_TYPES ).includes( type ) ) {
+ return type;
+ }
+ return state;
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/shipping/types.ts b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/shipping/types.ts
new file mode 100644
index 00000000000..6d5ef09b54b
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/shipping/types.ts
@@ -0,0 +1,42 @@
+/**
+ * Internal dependencies
+ */
+import type { emitterCallback } from '../../../event-emit';
+
+export type ShippingErrorStatus = {
+ isPristine: boolean;
+ isValid: boolean;
+ hasInvalidAddress: boolean;
+ hasError: boolean;
+};
+
+export type ShippingErrorTypes = {
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ NONE: 'none';
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ INVALID_ADDRESS: 'invalid_address';
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ UNKNOWN: 'unknown_error';
+};
+
+export type ShippingDataContextType = {
+ // A function for dispatching a shipping rate error status.
+ dispatchErrorStatus: React.Dispatch< {
+ type: string;
+ } >;
+ onShippingRateFail: ReturnType< typeof emitterCallback >;
+ // Used to register a callback to be invoked when shipping rate is selected unsuccessfully
+ onShippingRateSelectFail: ReturnType< typeof emitterCallback >;
+ // Used to register a callback to be invoked when shipping rate is selected.
+ onShippingRateSelectSuccess: ReturnType< typeof emitterCallback >;
+ // Used to register a callback to be invoked when shipping rates are retrieved.
+ onShippingRateSuccess: ReturnType< typeof emitterCallback >;
+ // The current shipping error status.
+ shippingErrorStatus: ShippingErrorStatus;
+ // The error type constants for the shipping rate error status.
+ shippingErrorTypes: ShippingErrorTypes;
+};
+
+export interface ShippingDataProviderProps {
+ children: JSX.Element | JSX.Element[];
+}
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/shipping/utils.js b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/shipping/utils.js
new file mode 100644
index 00000000000..0f8a603ff95
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/shipping/utils.js
@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import { shippingErrorCodes } from './constants';
+
+export const hasInvalidShippingAddress = ( errors ) => {
+ return errors.some( ( error ) => {
+ if (
+ error.code &&
+ Object.values( shippingErrorCodes ).includes( error.code )
+ ) {
+ return true;
+ }
+ return false;
+ } );
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/utils.ts b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/utils.ts
new file mode 100644
index 00000000000..da9044f111a
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/utils.ts
@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import triggerFetch from '@wordpress/api-fetch';
+import { dispatch } from '@wordpress/data';
+import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data';
+
+/**
+ * Utility function for preparing payment data for the request.
+ */
+export const preparePaymentData = (
+ //Arbitrary payment data provided by the payment method.
+ paymentData: Record< string, unknown >,
+ //Whether to save the payment method info to user account.
+ shouldSave: boolean,
+ //The current active payment method.
+ activePaymentMethod: string
+): { key: string; value: unknown }[] => {
+ const apiData = Object.keys( paymentData ).map( ( property ) => {
+ const value = paymentData[ property ];
+ return { key: property, value };
+ }, [] );
+ const savePaymentMethodKey = `wc-${ activePaymentMethod }-new-payment-method`;
+ apiData.push( {
+ key: savePaymentMethodKey,
+ value: shouldSave,
+ } );
+ return apiData;
+};
+
+/**
+ * Process headers from an API response an dispatch updates.
+ */
+export const processCheckoutResponseHeaders = (
+ headers: Headers | undefined
+): void => {
+ if ( ! headers ) {
+ return;
+ }
+ const { __internalSetCustomerId } = dispatch( CHECKOUT_STORE_KEY );
+ if (
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore -- this does exist because it's monkey patched in
+ // middleware/store-api-nonce.
+ triggerFetch.setNonce &&
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore -- this does exist because it's monkey patched in
+ // middleware/store-api-nonce.
+ typeof triggerFetch.setNonce === 'function'
+ ) {
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore -- this does exist because it's monkey patched in
+ // middleware/store-api-nonce.
+ triggerFetch.setNonce( headers );
+ }
+
+ // Update user using headers.
+ if ( headers?.get( 'User-ID' ) ) {
+ __internalSetCustomerId(
+ parseInt( headers.get( 'User-ID' ) || '0', 10 )
+ );
+ }
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/container-width-context.tsx b/plugins/woocommerce-blocks/assets/js/base/context/providers/container-width-context.tsx
new file mode 100644
index 00000000000..3c03a107049
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/container-width-context.tsx
@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+import { useContainerQueries } from '@woocommerce/base-hooks';
+import classNames from 'classnames';
+
+export type ContainerWidthContextProps = {
+ hasContainerWidth: boolean;
+ containerClassName: string;
+ isMobile: boolean;
+ isSmall: boolean;
+ isMedium: boolean;
+ isLarge: boolean;
+};
+
+const ContainerWidthContext: React.Context< ContainerWidthContextProps > =
+ createContext< ContainerWidthContextProps >( {
+ hasContainerWidth: false,
+ containerClassName: '',
+ isMobile: false,
+ isSmall: false,
+ isMedium: false,
+ isLarge: false,
+ } );
+
+export const useContainerWidthContext = (): ContainerWidthContextProps => {
+ return useContext( ContainerWidthContext );
+};
+
+interface ContainerWidthContextProviderProps {
+ children: JSX.Element | JSX.Element[];
+ className: string;
+}
+
+/**
+ * Provides an interface to useContainerQueries so children can see what size is being used by the
+ * container.
+ */
+export const ContainerWidthContextProvider = ( {
+ children,
+ className = '',
+}: ContainerWidthContextProviderProps ): JSX.Element => {
+ const [ resizeListener, containerClassName ] = useContainerQueries();
+
+ const contextValue = {
+ hasContainerWidth: containerClassName !== '',
+ containerClassName,
+ isMobile: containerClassName === 'is-mobile',
+ isSmall: containerClassName === 'is-small',
+ isMedium: containerClassName === 'is-medium',
+ isLarge: containerClassName === 'is-large',
+ };
+
+ return (
+
+
+ { resizeListener }
+ { children }
+
+
+ );
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/editor-context.tsx b/plugins/woocommerce-blocks/assets/js/base/context/providers/editor-context.tsx
new file mode 100644
index 00000000000..664bbc7a341
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/editor-context.tsx
@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import { createContext, useContext, useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+interface EditorContextType {
+ // Indicates whether in the editor context.
+ isEditor: boolean;
+
+ // The post ID being edited.
+ currentPostId: number;
+
+ // The current view name, if using a view switcher.
+ currentView: string;
+
+ // Object containing preview data for the editor.
+ previewData: Record< string, unknown >;
+
+ // Get data by name.
+ getPreviewData: ( name: string ) => Record< string, unknown >;
+
+ // Indicates whether in the preview context.
+ isPreview?: boolean;
+}
+
+const EditorContext = createContext( {
+ isEditor: false,
+ currentPostId: 0,
+ currentView: '',
+ previewData: {},
+ getPreviewData: () => ( {} ),
+} as EditorContextType );
+
+export const useEditorContext = (): EditorContextType => {
+ return useContext( EditorContext );
+};
+
+export const EditorProvider = ( {
+ children,
+ currentPostId = 0,
+ previewData = {},
+ currentView = '',
+ isPreview = false,
+}: {
+ children: React.ReactChildren;
+ currentPostId?: number | undefined;
+ previewData?: Record< string, unknown > | undefined;
+ currentView?: string | undefined;
+ isPreview?: boolean | undefined;
+} ) => {
+ const editingPostId = useSelect(
+ ( select ): number =>
+ currentPostId
+ ? currentPostId
+ : select( 'core/editor' ).getCurrentPostId(),
+ [ currentPostId ]
+ );
+
+ const getPreviewData = useCallback(
+ ( name: string ): Record< string, unknown > => {
+ if ( previewData && name in previewData ) {
+ return previewData[ name ] as Record< string, unknown >;
+ }
+ return {};
+ },
+ [ previewData ]
+ );
+
+ const editorData: EditorContextType = {
+ isEditor: true,
+ currentPostId: editingPostId,
+ currentView,
+ previewData,
+ getPreviewData,
+ isPreview,
+ };
+
+ return (
+
+ { children }
+
+ );
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/index.js b/plugins/woocommerce-blocks/assets/js/base/context/providers/index.js
new file mode 100644
index 00000000000..d02577e0b64
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/index.js
@@ -0,0 +1,6 @@
+export * from './editor-context';
+export * from './add-to-cart-form';
+export * from './cart-checkout';
+export * from './container-width-context';
+export * from './editor-context';
+export * from './query-state-context';
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/query-state-context.js b/plugins/woocommerce-blocks/assets/js/base/context/providers/query-state-context.js
new file mode 100644
index 00000000000..dce9a2c4b0e
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/query-state-context.js
@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/**
+ * Query state context is the index for used for a query state store. By
+ * exposing this via context, it allows for all children blocks to be
+ * synchronized to the same query state defined by the parent in the tree.
+ *
+ * Defaults to 'page' for general global query state shared among all blocks
+ * in a view.
+ *
+ * @member {Object} QueryStateContext A react context object
+ */
+const QueryStateContext = createContext( 'page' );
+
+export const useQueryStateContext = () => useContext( QueryStateContext );
+export const QueryStateContextProvider = QueryStateContext.Provider;
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/test/utils.js b/plugins/woocommerce-blocks/assets/js/base/context/test/utils.js
new file mode 100644
index 00000000000..b1432e9813e
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/test/utils.js
@@ -0,0 +1,53 @@
+/**
+ * Internal dependencies
+ */
+import { assertValidContextValue } from '../utils';
+
+describe( 'assertValidContextValue', () => {
+ const contextName = 'testContext';
+ const validationMap = {
+ cheeseburger: {
+ required: false,
+ type: 'string',
+ },
+ amountKetchup: {
+ required: true,
+ type: 'number',
+ },
+ };
+ it.each`
+ testValue
+ ${ {} }
+ ${ 10 }
+ ${ { amountKetchup: '10' } }
+ `(
+ 'The value of $testValue is expected to trigger an Error',
+ ( { testValue } ) => {
+ const invokeTest = () => {
+ assertValidContextValue(
+ contextName,
+ validationMap,
+ testValue
+ );
+ };
+ expect( invokeTest ).toThrow();
+ }
+ );
+ it.each`
+ testValue
+ ${ { amountKetchup: 20 } }
+ ${ { cheeseburger: 'fries', amountKetchup: 20 } }
+ `(
+ 'The value of $testValue is not expected to trigger an Error',
+ ( { testValue } ) => {
+ const invokeTest = () => {
+ assertValidContextValue(
+ contextName,
+ validationMap,
+ testValue
+ );
+ };
+ expect( invokeTest ).not.toThrow();
+ }
+ );
+} );
diff --git a/plugins/woocommerce-blocks/assets/js/base/context/utils.js b/plugins/woocommerce-blocks/assets/js/base/context/utils.js
new file mode 100644
index 00000000000..e2a7d8b6372
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/context/utils.js
@@ -0,0 +1,61 @@
+/**
+ * This is an assertion utility for validating that the incoming value prop
+ * value on a given context provider is valid and throws an error if it isn't.
+ *
+ * Note: this asserts values that are expected to be an object.
+ *
+ * The validationMap is expected to be an object in the following shape.
+ *
+ * {
+ * [expectedPropertyName]: {
+ * required: [expectedRequired]
+ * type: [expectedType]
+ * }
+ * }
+ *
+ * @param {string} contextName The name of the context provider being
+ * validated.
+ * @param {Object} validationMap A map for validating the incoming value against.
+ * @param {Object} value The value being validated.
+ *
+ * @throws {Error}
+ */
+export const assertValidContextValue = (
+ contextName,
+ validationMap,
+ value
+) => {
+ if ( typeof value !== 'object' ) {
+ throw new Error(
+ `${ contextName } expects an object for its context value`
+ );
+ }
+ const errors = [];
+ for ( const expectedProperty in validationMap ) {
+ if (
+ validationMap[ expectedProperty ].required &&
+ typeof value[ expectedProperty ] === 'undefined'
+ ) {
+ errors.push(
+ `The ${ expectedProperty } is required and is not present.`
+ );
+ } else if (
+ typeof value[ expectedProperty ] !== 'undefined' &&
+ typeof value[ expectedProperty ] !==
+ validationMap[ expectedProperty ].type
+ ) {
+ errors.push(
+ `The ${ expectedProperty } must be of ${
+ validationMap[ expectedProperty ].type
+ } and instead was ${ typeof value[ expectedProperty ] }`
+ );
+ }
+ }
+ if ( errors.length > 0 ) {
+ throw new Error(
+ `There was a problem with the value passed in on ${ contextName }:\n ${ errors.join(
+ '\n'
+ ) }`
+ );
+ }
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/hocs/test/with-reviews.jsx b/plugins/woocommerce-blocks/assets/js/base/hocs/test/with-reviews.jsx
new file mode 100644
index 00000000000..3ceb37f1148
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/hocs/test/with-reviews.jsx
@@ -0,0 +1,167 @@
+// We need to disable the following eslint check as it's only applicable
+// to testing-library/react not `react-test-renderer` used here
+/* eslint-disable testing-library/await-async-query */
+/**
+ * External dependencies
+ */
+import TestRenderer from 'react-test-renderer';
+
+/**
+ * Internal dependencies
+ */
+import withReviews from '../with-reviews';
+import * as mockUtils from '../../../blocks/reviews/utils';
+import * as mockBaseUtils from '../../utils/errors';
+
+jest.mock( '../../../blocks/reviews/utils', () => ( {
+ getSortArgs: () => ( {
+ order: 'desc',
+ orderby: 'date_gmt',
+ } ),
+ getReviews: jest.fn(),
+} ) );
+
+jest.mock( '../../utils/errors', () => ( {
+ formatError: jest.fn(),
+} ) );
+
+const mockReviews = [
+ { reviewer: 'Alice', review: 'Lorem ipsum', rating: 2 },
+ { reviewer: 'Bob', review: 'Dolor sit amet', rating: 3 },
+ { reviewer: 'Carol', review: 'Consectetur adipiscing elit', rating: 5 },
+];
+const defaultArgs = {
+ offset: 0,
+ order: 'desc',
+ orderby: 'date_gmt',
+ per_page: 2,
+ product_id: 1,
+};
+const TestComponent = withReviews( ( props ) => {
+ return (
+
+ );
+} );
+const render = () => {
+ return TestRenderer.create(
+
+
+
+) );
+
+const focusedMock = jest.fn();
+const scrollIntoViewMock = jest.fn();
+
+const mockedButton = {
+ focus: focusedMock,
+ scrollIntoView: scrollIntoViewMock,
+};
+const render = ( { inView } ) => {
+ const getBoundingClientRect = () => ( {
+ bottom: inView ? 0 : -10,
+ } );
+ return TestRenderer.create(
+ ) }
+ { positionRelativeToViewport === 'visible' && (
+
+ ) }
+ { positionRelativeToViewport === 'above' && (
+
+ ) }
+
+ );
+ };
+
+ return render(
+ );
+ };
+
+ let renderer;
+ beforeEach( () => ( renderer = null ) );
+
+ it( 'should be undefined at first pass', () => {
+ act( () => {
+ renderer = TestRenderer.create(
;
+ };
+ let renderer;
+ beforeEach( () => ( renderer = null ) );
+ it.each`
+ testValueA | aType | testValueB | bType
+ ${ { a: 'b', foo: 'bar' } } | ${ 'object' } | ${ { foo: 'bar', a: 'b' } } | ${ 'object' }
+ ${ [ 'b', 'bar' ] } | ${ 'array' } | ${ [ 'b', 'bar' ] } | ${ 'array' }
+ ${ 1 } | ${ 'number' } | ${ 1 } | ${ 'number' }
+ ${ '1' } | ${ 'string' } | ${ '1' } | ${ 'string' }
+ ${ true } | ${ 'bool' } | ${ true } | ${ 'bool' }
+ `(
+ '$testValueA ($aType) and $testValueB ($bType) are expected to be equal',
+ ( { testValueA, testValueB } ) => {
+ let testPropValue;
+ act( () => {
+ renderer = TestRenderer.create(
+
+ * { resizeListener }
+ * Your content here
+ *
+ * );
+ * };
+ * ```
+ */
+export const useContainerQueries = (): [ React.ReactElement, string ] => {
+ const [ resizeListener, { width } ] = useResizeObserver();
+
+ let className = '';
+ if ( width > 700 ) {
+ className = 'is-large';
+ } else if ( width > 520 ) {
+ className = 'is-medium';
+ } else if ( width > 400 ) {
+ className = 'is-small';
+ } else if ( width ) {
+ className = 'is-mobile';
+ }
+
+ return [ resizeListener, className ];
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/hooks/use-is-mounted.ts b/plugins/woocommerce-blocks/assets/js/base/hooks/use-is-mounted.ts
new file mode 100644
index 00000000000..2ebccd86833
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/hooks/use-is-mounted.ts
@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { useCallback, useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Returns a boolean value based on whether the current component has been mounted.
+ *
+ * @return {boolean} If the component has been mounted.
+ *
+ * @example
+ *
+ * ```js
+ * const App = () => {
+ * const isMounted = useIsMounted();
+ *
+ * if ( ! isMounted() ) {
+ * return null;
+ * }
+ *
+ * return ;
+ * };
+ * ```
+ */
+
+export function useIsMounted() {
+ const isMounted = useRef( false );
+
+ useEffect( () => {
+ isMounted.current = true;
+
+ return () => {
+ isMounted.current = false;
+ };
+ }, [] );
+
+ return useCallback( () => isMounted.current, [] );
+}
diff --git a/plugins/woocommerce-blocks/assets/js/base/hooks/use-local-storage-state.ts b/plugins/woocommerce-blocks/assets/js/base/hooks/use-local-storage-state.ts
new file mode 100644
index 00000000000..019b621f59d
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/hooks/use-local-storage-state.ts
@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import type { Dispatch, SetStateAction } from 'react';
+
+export const useLocalStorageState = < T >(
+ key: string,
+ initialValue: T
+): [ T, Dispatch< SetStateAction< T > > ] => {
+ const [ state, setState ] = useState< T >( () => {
+ const valueInLocalStorage = window.localStorage.getItem( key );
+ if ( valueInLocalStorage ) {
+ try {
+ return JSON.parse( valueInLocalStorage );
+ } catch {
+ // eslint-disable-next-line no-console
+ console.error(
+ `Value for key '${ key }' could not be retrieved from localStorage because it can't be parsed.`
+ );
+ }
+ }
+ return initialValue;
+ } );
+ useEffect( () => {
+ try {
+ window.localStorage.setItem( key, JSON.stringify( state ) );
+ } catch {
+ // eslint-disable-next-line no-console
+ console.error(
+ `Value for key '${ key }' could not be saved in localStorage because it can't be converted into a string.`
+ );
+ }
+ }, [ key, state ] );
+
+ return [ state, setState ];
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/hooks/use-position-relative-to-viewport.js b/plugins/woocommerce-blocks/assets/js/base/hooks/use-position-relative-to-viewport.js
new file mode 100644
index 00000000000..8072bb1e772
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/hooks/use-position-relative-to-viewport.js
@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import { useRef, useLayoutEffect, useState } from '@wordpress/element';
+
+/** @typedef {import('react')} React */
+
+/** @type {React.CSSProperties} */
+const style = {
+ bottom: 0,
+ left: 0,
+ opacity: 0,
+ pointerEvents: 'none',
+ position: 'absolute',
+ right: 0,
+ top: 0,
+ zIndex: -1,
+};
+
+/**
+ * Returns an element and a string (`above`, `visible` or `below`) based on the
+ * element position relative to the viewport.
+ * _Note: `usePositionRelativeToViewport` will return an empty position (``)
+ * until after first render_
+ *
+ * @return {Array} An array of {Element} `referenceElement` and {string} `positionRelativeToViewport`.
+ *
+ * @example
+ *
+ * ```js
+ * const App = () => {
+ * const [ referenceElement, positionRelativeToViewport ] = useContainerQueries();
+ *
+ * return (
+ * <>
+ * { referenceElement }
+ * { positionRelativeToViewport === 'below' && Reference element is below the viewport.
}
+ * { positionRelativeToViewport === 'visible' && Reference element is visible in the viewport.
}
+ * { positionRelativeToViewport === 'above' && Reference element is above the viewport.
}
+ *
+ * );
+ * };
+ * ```
+ */
+export const usePositionRelativeToViewport = () => {
+ const [ positionRelativeToViewport, setPositionRelativeToViewport ] =
+ useState( '' );
+ const referenceElementRef = useRef( null );
+ const intersectionObserver = useRef(
+ new IntersectionObserver(
+ ( entries ) => {
+ if ( entries[ 0 ].isIntersecting ) {
+ setPositionRelativeToViewport( 'visible' );
+ } else {
+ setPositionRelativeToViewport(
+ entries[ 0 ].boundingClientRect.top > 0
+ ? 'below'
+ : 'above'
+ );
+ }
+ },
+ { threshold: 1.0 }
+ )
+ );
+
+ useLayoutEffect( () => {
+ const referenceElementNode = referenceElementRef.current;
+ const observer = intersectionObserver.current;
+
+ if ( referenceElementNode ) {
+ observer.observe( referenceElementNode );
+ }
+
+ return () => {
+ observer.unobserve( referenceElementNode );
+ };
+ }, [] );
+
+ const referenceElement = (
+
+ );
+
+ return [ referenceElement, positionRelativeToViewport ];
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/hooks/use-previous.ts b/plugins/woocommerce-blocks/assets/js/base/hooks/use-previous.ts
new file mode 100644
index 00000000000..55c2b581a3a
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/hooks/use-previous.ts
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { useRef, useEffect } from '@wordpress/element';
+
+interface Validation< T > {
+ ( value: T, previousValue: T | undefined ): boolean;
+}
+/**
+ * Use Previous based on https://usehooks.com/useprevious/.
+ *
+ * @param {*} value
+ * @param {Function} [validation] Function that needs to validate for the value
+ * to be updated.
+ */
+export function usePrevious< T >(
+ value: T,
+ validation?: Validation< T >
+): T | undefined {
+ const ref = useRef< T >();
+
+ useEffect( () => {
+ if (
+ ref.current !== value &&
+ ( ! validation || validation( value, ref.current ) )
+ ) {
+ ref.current = value;
+ }
+ }, [ value, validation ] );
+
+ return ref.current;
+}
diff --git a/plugins/woocommerce-blocks/assets/js/base/hooks/use-shallow-equal.ts b/plugins/woocommerce-blocks/assets/js/base/hooks/use-shallow-equal.ts
new file mode 100644
index 00000000000..a2536f181bd
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/hooks/use-shallow-equal.ts
@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { useRef } from '@wordpress/element';
+import isShallowEqual from '@wordpress/is-shallow-equal';
+
+/**
+ * A custom hook that compares the provided value across renders and returns the
+ * previous instance if shallow equality with previous instance exists.
+ *
+ * This is particularly useful when non-primitive types are used as
+ * dependencies for react hooks.
+ *
+ * @param {*} value Value to keep the same if satisfies shallow equality.
+ *
+ * @return {*} The previous cached instance of the value if the current has shallow equality with it.
+ */
+export function useShallowEqual< T >( value: T ): T {
+ const ref = useRef< T >( value );
+ if ( ! isShallowEqual( value, ref.current ) ) {
+ ref.current = value;
+ }
+ return ref.current;
+}
diff --git a/plugins/woocommerce-blocks/assets/js/base/hooks/use-spoken-message.ts b/plugins/woocommerce-blocks/assets/js/base/hooks/use-spoken-message.ts
new file mode 100644
index 00000000000..a7f5f4aa32a
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/hooks/use-spoken-message.ts
@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { useEffect, renderToString } from '@wordpress/element';
+import { speak } from '@wordpress/a11y';
+
+/**
+ * Custom hook which announces the message with the given politeness, if a
+ * valid message is provided.
+ */
+export const useSpokenMessage = (
+ message: string | React.ReactNode | undefined,
+ politeness: 'polite' | 'assertive' | undefined
+) => {
+ const spokenMessage =
+ typeof message === 'string' ? message : renderToString( message );
+
+ useEffect( () => {
+ if ( spokenMessage ) {
+ speak( spokenMessage, politeness );
+ }
+ }, [ spokenMessage, politeness ] );
+};
+
+export default useSpokenMessage;
diff --git a/plugins/woocommerce-blocks/assets/js/base/hooks/use-style-props.ts b/plugins/woocommerce-blocks/assets/js/base/hooks/use-style-props.ts
new file mode 100644
index 00000000000..363887b01fd
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/hooks/use-style-props.ts
@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { isString, isObject } from '@woocommerce/types';
+import type { Style as StyleEngineProperties } from '@wordpress/style-engine/src/types';
+import type { CSSProperties } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { useTypographyProps } from './use-typography-props';
+import {
+ getColorClassesAndStyles,
+ getBorderClassesAndStyles,
+ getSpacingClassesAndStyles,
+} from '../utils';
+
+export type StyleProps = {
+ className: string;
+ style: CSSProperties;
+};
+
+type BlockAttributes = Record< string, unknown > & {
+ style?: StyleEngineProperties | string | undefined;
+};
+
+type StyleAttributes = Record< string, unknown > & {
+ style: StyleEngineProperties;
+};
+
+/**
+ * Parses incoming props.
+ *
+ * This may include style properties at the top level, or may include a nested `style` object. This ensures the expected
+ * values are present and converts any string based values to objects as required.
+ */
+const parseStyleAttributes = ( rawProps: BlockAttributes ): StyleAttributes => {
+ const props = isObject( rawProps )
+ ? rawProps
+ : {
+ style: {},
+ };
+
+ let style = props.style;
+
+ if ( isString( style ) ) {
+ style = JSON.parse( style ) || {};
+ }
+
+ if ( ! isObject( style ) ) {
+ style = {};
+ }
+
+ return {
+ ...props,
+ style,
+ };
+};
+
+/**
+ * Returns the CSS class names and inline styles for a block when provided with its props/attributes.
+ *
+ * This hook (and its utilities) borrow functionality from the Gutenberg Block Editor package--something we don't want
+ * to import on the frontend.
+ */
+export const useStyleProps = ( props: BlockAttributes ): StyleProps => {
+ const styleAttributes = parseStyleAttributes( props );
+ const colorProps = getColorClassesAndStyles( styleAttributes );
+ const borderProps = getBorderClassesAndStyles( styleAttributes );
+ const spacingProps = getSpacingClassesAndStyles( styleAttributes );
+ const typographyProps = useTypographyProps( styleAttributes );
+
+ return {
+ className: classnames(
+ typographyProps.className,
+ colorProps.className,
+ borderProps.className,
+ spacingProps.className
+ ),
+ style: {
+ ...typographyProps.style,
+ ...colorProps.style,
+ ...borderProps.style,
+ ...spacingProps.style,
+ },
+ };
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/hooks/use-throw-error.ts b/plugins/woocommerce-blocks/assets/js/base/hooks/use-throw-error.ts
new file mode 100644
index 00000000000..85334dac446
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/hooks/use-throw-error.ts
@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import { useState, useCallback } from '@wordpress/element';
+
+/**
+ * Helper method for throwing an error in a React Hook.
+ *
+ * @see https://github.com/facebook/react/issues/14981
+ */
+export const useThrowError = (): ( ( error: Error ) => void ) => {
+ const [ , setState ] = useState();
+ return useCallback( ( error: Error ): void => {
+ setState( () => {
+ throw error;
+ } );
+ }, [] );
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/hooks/use-typography-props.ts b/plugins/woocommerce-blocks/assets/js/base/hooks/use-typography-props.ts
new file mode 100644
index 00000000000..0557f9a3c97
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/hooks/use-typography-props.ts
@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { isObject, isString } from '@woocommerce/types';
+import type { Style as StyleEngineProperties } from '@wordpress/style-engine/src/types';
+
+/**
+ * Internal dependencies
+ */
+import type { StyleProps } from './use-style-props';
+
+type blockAttributes = {
+ style: StyleEngineProperties;
+ // String identifier for the font size preset--not an absolute value.
+ fontSize?: string | undefined;
+ // String identifier for the font family preset, not the actual font family.
+ fontFamily?: string | undefined;
+};
+
+export const useTypographyProps = ( props: blockAttributes ): StyleProps => {
+ const typography = isObject( props.style.typography )
+ ? props.style.typography
+ : {};
+ const classNameFallback = isString( typography.fontFamily )
+ ? typography.fontFamily
+ : '';
+ const className = props.fontFamily
+ ? `has-${ props.fontFamily }-font-family`
+ : classNameFallback;
+
+ return {
+ className,
+ style: {
+ fontSize: props.fontSize
+ ? `var(--wp--preset--font-size--${ props.fontSize })`
+ : typography.fontSize,
+ fontStyle: typography.fontStyle,
+ fontWeight: typography.fontWeight,
+ letterSpacing: typography.letterSpacing,
+ lineHeight: typography.lineHeight,
+ textDecoration: typography.textDecoration,
+ textTransform: typography.textTransform,
+ },
+ };
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/utils/address.ts b/plugins/woocommerce-blocks/assets/js/base/utils/address.ts
new file mode 100644
index 00000000000..9a41a7e93eb
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/utils/address.ts
@@ -0,0 +1,176 @@
+/**
+ * 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 {
+ AddressFields,
+ defaultAddressFields,
+ ShippingAddress,
+ BillingAddress,
+} from '@woocommerce/settings';
+import { decodeEntities } from '@wordpress/html-entities';
+import {
+ SHIPPING_COUNTRIES,
+ SHIPPING_STATES,
+} from '@woocommerce/block-settings';
+
+/**
+ * Compare two addresses and see if they are the same.
+ */
+export const isSameAddress = < T extends ShippingAddress | BillingAddress >(
+ address1: T,
+ address2: T
+): boolean => {
+ return Object.keys( defaultAddressFields ).every(
+ ( field: string ) =>
+ address1[ field as keyof T ] === address2[ field as keyof T ]
+ );
+};
+
+/**
+ * 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
+ ) as ( keyof AddressFields )[];
+ 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;
+};
+
+/*
+ * Formats a shipping address for display.
+ *
+ * @param {Object} address The address to format.
+ * @return {string | null} The formatted address or null if no address is provided.
+ */
+export const formatShippingAddress = (
+ address: ShippingAddress | BillingAddress
+): string | null => {
+ // We bail early if we don't have an address.
+ if ( Object.values( address ).length === 0 ) {
+ return null;
+ }
+ const formattedCountry =
+ typeof SHIPPING_COUNTRIES[ address.country ] === 'string'
+ ? decodeEntities( SHIPPING_COUNTRIES[ address.country ] )
+ : '';
+
+ const formattedState =
+ typeof SHIPPING_STATES[ address.country ] === 'object' &&
+ typeof SHIPPING_STATES[ address.country ][ address.state ] === 'string'
+ ? decodeEntities(
+ SHIPPING_STATES[ address.country ][ address.state ]
+ )
+ : address.state;
+
+ const addressParts = [];
+
+ addressParts.push( address.postcode.toUpperCase() );
+ addressParts.push( address.city );
+ addressParts.push( formattedState );
+ addressParts.push( formattedCountry );
+
+ const formattedLocation = addressParts.filter( Boolean ).join( ', ' );
+
+ if ( ! formattedLocation ) {
+ return null;
+ }
+
+ return formattedLocation;
+};
+
+/**
+ * Checks that all required fields in an address are completed based on the settings in countryLocale.
+ */
+export const isAddressComplete = (
+ address: ShippingAddress | BillingAddress
+): boolean => {
+ if ( ! address.country ) {
+ return false;
+ }
+ const fields = Object.keys(
+ defaultAddressFields
+ ) as ( keyof AddressFields )[];
+ const addressFields = prepareAddressFields( fields, {}, address.country );
+
+ return addressFields.every(
+ ( { key = '', hidden = false, required = false } ) => {
+ if ( hidden || ! required ) {
+ return true;
+ }
+ return isValidAddressKey( key, address ) && address[ key ] !== '';
+ }
+ );
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/utils/camel-case-keys.ts b/plugins/woocommerce-blocks/assets/js/base/utils/camel-case-keys.ts
new file mode 100644
index 00000000000..0d49edd101d
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/utils/camel-case-keys.ts
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import { camelCase } from 'change-case';
+
+/**
+ * Internal dependencies
+ */
+import { mapKeys } from './map-keys';
+
+export const camelCaseKeys = ( obj: object ) =>
+ mapKeys( obj, ( _, key ) => camelCase( key ) );
diff --git a/plugins/woocommerce-blocks/assets/js/base/utils/create-notice.ts b/plugins/woocommerce-blocks/assets/js/base/utils/create-notice.ts
new file mode 100644
index 00000000000..90343f8d786
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/utils/create-notice.ts
@@ -0,0 +1,77 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import type { Options as NoticeOptions } from '@wordpress/notices';
+import { select, dispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { noticeContexts } from '../context/event-emit/utils';
+
+export const DEFAULT_ERROR_MESSAGE = __(
+ 'Something went wrong. Please contact us to get assistance.',
+ 'woo-gutenberg-products-block'
+);
+
+/**
+ * Returns a list of all notice contexts defined by Blocks.
+ *
+ * Contexts are defined in enum format, but this returns an array of strings instead.
+ */
+export const getNoticeContexts = () => {
+ return Object.values( noticeContexts );
+};
+
+/**
+ * Wrapper for @wordpress/notices createNotice.
+ */
+export const createNotice = (
+ status: 'error' | 'warning' | 'info' | 'success',
+ message: string,
+ options: Partial< NoticeOptions >
+) => {
+ const noticeContext = options?.context;
+ const suppressNotices =
+ select( 'wc/store/payment' ).isExpressPaymentMethodActive();
+
+ if ( suppressNotices || noticeContext === undefined ) {
+ return;
+ }
+
+ dispatch( 'core/notices' ).createNotice( status, message, {
+ isDismissible: true,
+ ...options,
+ context: noticeContext,
+ } );
+};
+
+/**
+ * Remove notices from all contexts.
+ *
+ * @todo Remove this when supported in Gutenberg.
+ * @see https://github.com/WordPress/gutenberg/pull/44059
+ */
+export const removeAllNotices = () => {
+ const containers = select(
+ 'wc/store/store-notices'
+ ).getRegisteredContainers();
+ const { removeNotice } = dispatch( 'core/notices' );
+ const { getNotices } = select( 'core/notices' );
+
+ containers.forEach( ( container ) => {
+ getNotices( container ).forEach( ( notice ) => {
+ removeNotice( notice.id, container );
+ } );
+ } );
+};
+
+export const removeNoticesWithContext = ( context: string ) => {
+ const { removeNotice } = dispatch( 'core/notices' );
+ const { getNotices } = select( 'core/notices' );
+
+ getNotices( context ).forEach( ( notice ) => {
+ removeNotice( notice.id, context );
+ } );
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/utils/debounce.ts b/plugins/woocommerce-blocks/assets/js/base/utils/debounce.ts
new file mode 100644
index 00000000000..5cb6f5be092
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/utils/debounce.ts
@@ -0,0 +1,34 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type DebouncedFunction< T extends ( ...args: any[] ) => any > = ( (
+ ...args: Parameters< T >
+) => void ) & { flush: () => void };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const debounce = < T extends ( ...args: any[] ) => any >(
+ func: T,
+ wait: number,
+ immediate?: boolean
+): DebouncedFunction< T > => {
+ let timeout: ReturnType< typeof setTimeout > | null;
+ let latestArgs: Parameters< T > | null = null;
+
+ const debounced = ( ( ...args: Parameters< T > ) => {
+ latestArgs = args;
+ if ( timeout ) clearTimeout( timeout );
+ timeout = setTimeout( () => {
+ timeout = null;
+ if ( ! immediate && latestArgs ) func( ...latestArgs );
+ }, wait );
+ if ( immediate && ! timeout ) func( ...args );
+ } ) as DebouncedFunction< T >;
+
+ debounced.flush = () => {
+ if ( timeout && latestArgs ) {
+ func( ...latestArgs );
+ clearTimeout( timeout );
+ timeout = null;
+ }
+ };
+
+ return debounced;
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/utils/derive-selected-shipping-rates.ts b/plugins/woocommerce-blocks/assets/js/base/utils/derive-selected-shipping-rates.ts
new file mode 100644
index 00000000000..2b0118db6bd
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/utils/derive-selected-shipping-rates.ts
@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { CartShippingRate } from '@woocommerce/types';
+
+/**
+ * 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 > =>
+ Object.fromEntries(
+ shippingRates.map(
+ ( { package_id: packageId, shipping_rates: packageRates } ) => [
+ packageId,
+ packageRates.find( ( rate ) => rate.selected )?.rate_id || '',
+ ]
+ )
+ );
diff --git a/plugins/woocommerce-blocks/assets/js/base/utils/errors.ts b/plugins/woocommerce-blocks/assets/js/base/utils/errors.ts
new file mode 100644
index 00000000000..1879f3d4047
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/utils/errors.ts
@@ -0,0 +1,41 @@
+export interface ErrorObject {
+ /**
+ * Human-readable error message to display.
+ */
+ message: string;
+ /**
+ * Context in which the error was triggered. That will determine how the error is displayed to the user.
+ */
+ type: 'api' | 'general' | string;
+}
+
+type SimpleError = {
+ message: string;
+ type?: string;
+};
+
+export const formatError = async (
+ error: SimpleError | Response
+): Promise< ErrorObject > => {
+ if ( 'json' in error ) {
+ try {
+ const parsedError = await error.json();
+ return {
+ message: parsedError.message,
+ type: parsedError.type || 'api',
+ };
+ } catch ( e ) {
+ return {
+ // We could only return this if e is instanceof Error but, to avoid changing runtime
+ // behaviour, we'll just cast it instead.
+ message: ( e as Error ).message,
+ type: 'general',
+ };
+ }
+ } else {
+ return {
+ message: error.message,
+ type: error.type || 'general',
+ };
+ }
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/utils/get-icons-from-payment-methods.ts b/plugins/woocommerce-blocks/assets/js/base/utils/get-icons-from-payment-methods.ts
new file mode 100644
index 00000000000..3e8a8f05023
--- /dev/null
+++ b/plugins/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/types';
+
+/**
+ * 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 );
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/utils/get-inline-styles.ts b/plugins/woocommerce-blocks/assets/js/base/utils/get-inline-styles.ts
new file mode 100644
index 00000000000..62101ad2cd8
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/utils/get-inline-styles.ts
@@ -0,0 +1,142 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { paramCase as kebabCase } from 'change-case';
+import { getCSSRules } from '@wordpress/style-engine';
+import { isObject } from '@woocommerce/types';
+import type { Style as StyleEngineProperties } from '@wordpress/style-engine/src/types';
+
+/**
+ * Returns the inline styles to add depending on the style object
+ *
+ * @param {Object} styles Styles configuration.
+ * @return {Object} Flattened CSS variables declaration.
+ */
+function getInlineStyles( styles = {} ) {
+ const output = {} as Record< string, unknown >;
+
+ getCSSRules( styles, { selector: '' } ).forEach( ( rule ) => {
+ output[ rule.key ] = rule.value;
+ } );
+
+ return output;
+}
+
+/**
+ * Get the classname for a given color.
+ */
+function getColorClassName(
+ colorContextName: string | undefined,
+ colorSlug: string | undefined
+): string {
+ if ( ! colorContextName || ! colorSlug ) {
+ return '';
+ }
+ return `has-${ kebabCase( colorSlug ) }-${ colorContextName }`;
+}
+
+/**
+ * Generates a CSS class name consisting of all the applicable border color
+ * classes given the current block attributes.
+ */
+function getBorderClassName( attributes: {
+ style?: StyleEngineProperties;
+ borderColor?: string;
+} ) {
+ const { borderColor, style } = attributes;
+ const borderColorClass = borderColor
+ ? getColorClassName( 'border-color', borderColor )
+ : '';
+
+ return classnames( {
+ 'has-border-color': !! borderColor || !! style?.border?.color,
+ [ borderColorClass ]: !! borderColorClass,
+ } );
+}
+
+function getGradientClassName( gradientSlug: string | undefined ) {
+ if ( ! gradientSlug ) {
+ return undefined;
+ }
+ return `has-${ gradientSlug }-gradient-background`;
+}
+
+/**
+ * Provides the CSS class names and inline styles for a block's color support
+ * attributes.
+ */
+export function getColorClassesAndStyles( props: {
+ style?: StyleEngineProperties;
+ backgroundColor?: string | undefined;
+ textColor?: string | undefined;
+ gradient?: string | undefined;
+} ) {
+ const { backgroundColor, textColor, gradient, style } = props;
+
+ // Collect color CSS classes.
+ const backgroundClass = getColorClassName(
+ 'background-color',
+ backgroundColor
+ );
+ const textClass = getColorClassName( 'color', textColor );
+
+ const gradientClass = getGradientClassName( gradient );
+ const hasGradient = gradientClass || style?.color?.gradient;
+
+ // Determine color CSS class name list.
+ const className = classnames( textClass, gradientClass, {
+ // Don't apply the background class if there's a gradient.
+ [ backgroundClass ]: ! hasGradient && !! backgroundClass,
+ 'has-text-color': textColor || style?.color?.text,
+ 'has-background':
+ backgroundColor ||
+ style?.color?.background ||
+ gradient ||
+ style?.color?.gradient,
+ 'has-link-color': isObject( style?.elements?.link )
+ ? style?.elements?.link?.color
+ : undefined,
+ } );
+
+ // Collect inline styles for colors.
+ const colorStyles = style?.color || {};
+
+ return {
+ className,
+ style: getInlineStyles( { color: colorStyles } ),
+ };
+}
+
+/**
+ * Provides the CSS class names and inline styles for a block's border support
+ * attributes.
+ */
+export function getBorderClassesAndStyles( props: {
+ style?: StyleEngineProperties;
+ borderColor?: string;
+} ) {
+ const border = props.style?.border || {};
+ const className = getBorderClassName( props );
+
+ return {
+ className,
+ style: getInlineStyles( { border } ),
+ };
+}
+
+/**
+ * Provides the CSS class names and inline styles for a block's spacing support
+ * attributes.
+ */
+export function getSpacingClassesAndStyles( props: {
+ style?: StyleEngineProperties;
+} ) {
+ const spacingStyles = props.style?.spacing || {};
+ const styleProp = getInlineStyles( { spacing: spacingStyles } );
+
+ return {
+ className: undefined,
+ style: styleProp,
+ };
+}
diff --git a/plugins/woocommerce-blocks/assets/js/base/utils/get-navigation-type.ts b/plugins/woocommerce-blocks/assets/js/base/utils/get-navigation-type.ts
new file mode 100644
index 00000000000..93b02b7de1a
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/utils/get-navigation-type.ts
@@ -0,0 +1,18 @@
+/**
+ * Returns the navigation type for the page load.
+ */
+export const getNavigationType = () => {
+ if (
+ window.performance &&
+ window.performance.getEntriesByType( 'navigation' ).length
+ ) {
+ return (
+ window.performance.getEntriesByType(
+ 'navigation'
+ )[ 0 ] as PerformanceNavigationTiming
+ ).type;
+ }
+ return '';
+};
+
+export default getNavigationType;
diff --git a/plugins/woocommerce-blocks/assets/js/base/utils/get-valid-block-attributes.js b/plugins/woocommerce-blocks/assets/js/base/utils/get-valid-block-attributes.js
new file mode 100644
index 00000000000..d005070b993
--- /dev/null
+++ b/plugins/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;
diff --git a/plugins/woocommerce-blocks/assets/js/base/utils/index.js b/plugins/woocommerce-blocks/assets/js/base/utils/index.js
new file mode 100644
index 00000000000..a59f6a41397
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/utils/index.js
@@ -0,0 +1,18 @@
+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';
+export * from './create-notice';
+export * from './get-navigation-type';
+export * from './map-keys';
+export * from './camel-case-keys';
+export * from './snake-case-keys';
+export * from './debounce';
+export * from './keyby';
+export * from './pick';
+export * from './get-inline-styles';
diff --git a/plugins/woocommerce-blocks/assets/js/base/utils/keyby.ts b/plugins/woocommerce-blocks/assets/js/base/utils/keyby.ts
new file mode 100644
index 00000000000..496635e148f
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/utils/keyby.ts
@@ -0,0 +1,7 @@
+export const keyBy = < T >( array: T[], key: keyof T ) => {
+ return array.reduce( ( acc, value ) => {
+ const computedKey = key ? String( value[ key ] ) : String( value );
+ acc[ computedKey ] = value;
+ return acc;
+ }, {} as Record< string, T > );
+};
diff --git a/plugins/woocommerce-blocks/assets/js/base/utils/lazy-load-script.ts b/plugins/woocommerce-blocks/assets/js/base/utils/lazy-load-script.ts
new file mode 100644
index 00000000000..2a282dbef71
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/base/utils/lazy-load-script.ts
@@ -0,0 +1,160 @@
+/**
+ * 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;
+}
+
+declare global {
+ interface Window {
+ wc: {
+ wcBlocksRegistry: Record< string, unknown >;
+ };
+ }
+}
+
+/**
+ * In WP, registered scripts are loaded into the page with an element like this:
+ * ``
+ * 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, src = '' ): boolean => {
+ // If the store is using a plugin to concatenate scripts, we might have some
+ // cases where we don't detect whether a script has already been loaded.
+ // Because of that, we add an extra protection to the wc-blocks-registry-js
+ // script, to avoid ending up with two registries.
+ if ( scriptId === 'wc-blocks-registry-js' ) {
+ if ( typeof window?.wc?.wcBlocksRegistry === 'object' ) {
+ return true;
+ }
+ }
+
+ const srcParts = src.split( '?' );
+ if ( srcParts?.length > 1 ) {
+ src = srcParts[ 0 ];
+ }
+ const selector = src
+ ? `script#${ scriptId }, script[src*="${ src }"]`
+ : `script#${ scriptId }`;
+ const scriptElements = document.querySelectorAll( selector );
+
+ 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, attributes?.src )
+ ) {
+ 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 ` This \"coffee\" is very strong ."
+);
+```
+
+returns:
+
+```text
+alert('bad script!') This “coffee” is very strong .
+```
+
+This formatter should be used when returning HTML from the StoreAPI regardless of whether the HTML is user generated or not. This will ensure the consumer/client can display the HTML safely and without encoding issues.
+
+
+
+---
+
+[We're hiring!](https://woocommerce.com/careers/) Come work with us!
+
+🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-blocks/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/third-party-developers/extensibility/rest-api/extend-rest-api-formatters.md)
+
+
diff --git a/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/rest-api/extend-rest-api-update-cart.md b/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/rest-api/extend-rest-api-update-cart.md
new file mode 100644
index 00000000000..43005d2db1a
--- /dev/null
+++ b/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/rest-api/extend-rest-api-update-cart.md
@@ -0,0 +1,194 @@
+# Updating the cart with the Store API
+
+## Table of Contents
+
+- [The problem](#the-problem)
+- [The solution](#the-solution)
+- [Basic usage](#basic-usage)
+- [Things to consider](#things-to-consider)
+ - [Extensions cannot update the client-side cart state themselves](#extensions-cannot-update-the-client-side-cart-state-themselves)
+ - [Only one callback for a given namespace may be registered](#only-one-callback-for-a-given-namespace-may-be-registered)
+- [API Definition](#api-definition)
+ - [PHP](#php)
+ - [JavaScript](#javascript)
+- [Putting it all together](#putting-it-all-together)
+ - [The "Redeem" button](#the-redeem-button)
+ - [Registering a callback to run when the `cart/extensions` endpoint is hit](#registering-a-callback-to-run-when-the-cartextensions-endpoint-is-hit)
+
+## The problem
+
+You're an extension developer, and your extension does some server-side processing as a result of some client-side input, i.e. a shopper filling in an input field in the Cart sidebar, and then pressing a button.
+
+This server-side processing causes the state of the cart to change, and you want to update the data displayed in the client-side Cart or Checkout block.
+
+You can't simply update the client-side cart state yourself. This is restricted to prevent malfunctioning extensions inadvertently updating it with malformed or invalid data which will cause the whole block to break.
+
+## The solution
+
+`ExtendSchema` offers the ability for extensions to register callback functions to be executed when signalled to do so by the client-side Cart or Checkout.
+
+WooCommerce Blocks also provides a front-end function called `extensionCartUpdate` which can be called by client-side code, this will send data (specified by you when calling `extensionCartUpdate`) to the `cart/extensions` endpoint. When this endpoint gets hit, any relevant (based on the namespace provided to `extensionCartUpdate`) callbacks get executed, and the latest server-side cart data gets returned and the block is updated with this new data.
+
+## Basic usage
+
+In your extension's server-side integration code:
+
+```php
+add_action('woocommerce_blocks_loaded', function() {
+ woocommerce_store_api_register_update_callback(
+ [
+ 'namespace' => 'extension-unique-namespace',
+ 'callback' => /* Add your callable here */
+ ]
+ );
+} );
+```
+
+and on the client side:
+
+```ts
+const { extensionCartUpdate } = wc.blocksCheckout;
+
+extensionCartUpdate( {
+ namespace: 'extension-unique-namespace',
+ data: {
+ key: 'value',
+ another_key: 100,
+ third_key: {
+ fourth_key: true,
+ },
+ },
+} );
+```
+
+## Things to consider
+
+### Extensions cannot update the client-side cart state themselves
+
+You may be wondering why it's not possible to just make a custom AJAX endpoint for your extension that will update the cart. As mentioned, extensions are not permitted to update the client-side cart's state, because doing this incorrectly would cause the entire block to break, preventing the user from continuing their checkout. Instead you _must_ do this through the `extensionCartUpdate` function.
+
+### Only one callback for a given namespace may be registered
+
+With this in mind, if your extension has several client-side interactions that result in different code paths being executed on the server-side, you may wish to pass additional data through in `extensionsCartUpdate`. For example if you have two actions the user can take, one to _add_ a discount, and the other to _remove_ it, you may wish to pass a key called `action` along with the other data to `extensionsCartUpdate`. Then in your callback, you can check this value to distinguish which code path you should execute.
+
+Example:
+
+```php
+ 'extension-unique-namespace',
+ 'callback' => function( $data ) {
+ if ( $data['action'] === 'add' ) {
+ add_discount( );
+ }
+ if ( $data['action'] === 'remove' ) {
+ remove_discount();
+ }
+ }
+ ]
+ );
+} );
+```
+
+If you try to register again, under the same namespace, the previously registered callback will be overwritten.
+
+## API Definition
+
+### PHP
+
+`ExtendSchema::register_update_callback`: Used to register a callback to be executed when the `cart/extensions` endpoint gets hit with a given namespace. It takes an array of arguments
+
+| Attribute | Type | Required | Description |
+| ----------- | ---------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `namespace` | `string` | Yes | The namespace of your extension. This is used to determine which extension's callbacks should be executed. |
+| `callback` | `Callable` | Yes | The function/method (or Callable) that will be executed when the `cart/extensions` endpoint is hit with a `namespace` that matches the one supplied. The callable should take a single argument. The data passed into the callback via this argument will be an array containing whatever data you choose to pass to it. The callable does not need to return anything, if it does, then its return value will not be used. |
+
+### JavaScript
+
+`extensionCartUpdate`: Used to signal that you want your registered callback to be executed, and to pass data to the callback. It takes an object as its only argument.
+
+| Attribute | Type | Required | Description |
+| ----------- | -------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `namespace` | `string` | Yes | The namespace of your extension. This is used to determine which extension's callbacks should be executed. |
+| `data` | `Object` | No | The data you want to pass to your callback. Anything in the `data` key will be passed as the first (and only) argument to your callback as an associative array. |
+
+## Putting it all together
+
+You are the author of an extension that lets the shopper redeem points that they earn on your website for a discount on their order. There is a text field where the shopper can enter how many points they want to redeem, and a submit button that will apply the redemption.
+
+Your extension adds these UI elements to the sidebar in the Cart and Checkout blocks using the [`DiscountsMeta`](../checkout-block/available-slot-fills.md) Slot.
+
+More information on how to use Slots is available in our [Slots and Fills documentation](../checkout-block/slot-fills.md).
+
+Once implemented, the sidebar has a control added to it like this:
+
+
+
+### The "Redeem" button
+
+In your UI, you are tracking the value the shopper enters into the `Enter amount` box using a React `useState` variable. The variable in this example shall be called `pointsInputValue`.
+
+When the `Redeem` button gets clicked, you want to tell the server how many points to apply to the shopper's basket, based on what they entered into the box, apply the relevant discount, update the server-side cart, and then show the updated price in the client-side sidebar.
+
+To do this, you will need to use `extensionCartUpdate` to tell the server you want to execute your callback, and have the new cart state loaded into the UI. The `onClick` handler of the button may look like this:
+
+```js
+const { extensionCartUpdate } = window.wc.blocksCheckout;
+
+const buttonClickHandler = () => {
+ extensionCartUpdate( {
+ namespace: 'super-coupons',
+ data: {
+ pointsInputValue,
+ },
+ } );
+};
+```
+
+### Registering a callback to run when the `cart/extensions` endpoint is hit
+
+So far, we haven't registered a callback with WooCommerce Blocks yet, so when `extensionCartUpdate` causes the `cart/extensions` endpoint to get hit, nothing will happen.
+
+Much like adding data to the Store API (described in more detail in [Exposing your data in the Store API](./extend-rest-api-add-data.md).) we can add the callback by invoking the `register_update_callback` method on the `ExtendSchema` class from WooCommerce Blocks.
+
+We have written a function called `redeem_points` which applies a discount to the WooCommerce cart. This function does not return anything. Note, the actual implementation of this function is not the focus of this document, so has been omitted. All that is important to note is that it modifies the WooCommerce cart.
+
+```php
+ 'super-coupons',
+ 'callback' => function( $data ) {
+ redeem_points( $data['points'] );
+ },
+ ]
+ );
+} );
+```
+
+Now that this is registered, when the button is pressed, the `cart/extensions` endpoint is hit, with a `namespace` of `super-coupons` our `redeem_points` function will be executed. After this has finished processing, the client-side cart will be updated by WooCommerce Blocks.
+
+
+
+---
+
+[We're hiring!](https://woocommerce.com/careers/) Come work with us!
+
+🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-blocks/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/third-party-developers/extensibility/rest-api/extend-rest-api-update-cart.md)
+
+
diff --git a/plugins/woocommerce-blocks/global.d.ts b/plugins/woocommerce-blocks/global.d.ts
new file mode 100644
index 00000000000..4a5fa2360d7
--- /dev/null
+++ b/plugins/woocommerce-blocks/global.d.ts
@@ -0,0 +1,3 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+declare let __webpack_public_path__: string;
diff --git a/plugins/woocommerce-blocks/images/block-error.svg b/plugins/woocommerce-blocks/images/block-error.svg
new file mode 100644
index 00000000000..0baffa77759
--- /dev/null
+++ b/plugins/woocommerce-blocks/images/block-error.svg
@@ -0,0 +1 @@
+
+
diff --git a/plugins/woocommerce-blocks/images/blocks/mini-cart/cart-drawer-rtl.svg b/plugins/woocommerce-blocks/images/blocks/mini-cart/cart-drawer-rtl.svg
new file mode 100644
index 00000000000..1c5650cb565
--- /dev/null
+++ b/plugins/woocommerce-blocks/images/blocks/mini-cart/cart-drawer-rtl.svg
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/plugins/woocommerce-blocks/images/blocks/mini-cart/cart-drawer.svg b/plugins/woocommerce-blocks/images/blocks/mini-cart/cart-drawer.svg
new file mode 100644
index 00000000000..ba1f54e5f4e
--- /dev/null
+++ b/plugins/woocommerce-blocks/images/blocks/mini-cart/cart-drawer.svg
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/beach-landscape-sea-coast-nature-person.jpg b/plugins/woocommerce-blocks/images/pattern-placeholders/beach-landscape-sea-coast-nature-person.jpg
new file mode 100644
index 00000000000..db991a33130
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/beach-landscape-sea-coast-nature-person.jpg differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/desk-table-wood-chair-floor-home-square.png b/plugins/woocommerce-blocks/images/pattern-placeholders/desk-table-wood-chair-floor-home-square.png
new file mode 100644
index 00000000000..d60cc051986
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/desk-table-wood-chair-floor-home-square.png differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/drinkware-liquid-tableware-dishware-bottle-fluid.jpg b/plugins/woocommerce-blocks/images/pattern-placeholders/drinkware-liquid-tableware-dishware-bottle-fluid.jpg
new file mode 100644
index 00000000000..72a107b52b6
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/drinkware-liquid-tableware-dishware-bottle-fluid.jpg differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/fresh-lettuce-washed.png b/plugins/woocommerce-blocks/images/pattern-placeholders/fresh-lettuce-washed.png
new file mode 100644
index 00000000000..b6c8b432d83
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/fresh-lettuce-washed.png differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/fresh-organic-tomatoes.png b/plugins/woocommerce-blocks/images/pattern-placeholders/fresh-organic-tomatoes.png
new file mode 100644
index 00000000000..1d00fbda7bc
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/fresh-organic-tomatoes.png differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/leather-guitar-typewriter-red-gadget-sofa.png b/plugins/woocommerce-blocks/images/pattern-placeholders/leather-guitar-typewriter-red-gadget-sofa.png
new file mode 100644
index 00000000000..4a14de79c6e
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/leather-guitar-typewriter-red-gadget-sofa.png differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/man-person-music-black-and-white-white-photography.jpg b/plugins/woocommerce-blocks/images/pattern-placeholders/man-person-music-black-and-white-white-photography.jpg
new file mode 100644
index 00000000000..5962aec96cf
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/man-person-music-black-and-white-white-photography.jpg differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/man-person-winter-photography-statue-coat.png b/plugins/woocommerce-blocks/images/pattern-placeholders/man-person-winter-photography-statue-coat.png
new file mode 100644
index 00000000000..47cec8f251e
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/man-person-winter-photography-statue-coat.png differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/music-needle-turntable-black-and-white-white-photography.jpg b/plugins/woocommerce-blocks/images/pattern-placeholders/music-needle-turntable-black-and-white-white-photography.jpg
new file mode 100644
index 00000000000..2e733a6c924
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/music-needle-turntable-black-and-white-white-photography.jpg differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/music-technology-play-equipment-studio-gadget.png b/plugins/woocommerce-blocks/images/pattern-placeholders/music-technology-play-equipment-studio-gadget.png
new file mode 100644
index 00000000000..367c4cc1ce4
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/music-technology-play-equipment-studio-gadget.png differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/pattern-fashion-clothing-outerwear-wool-scarf.png b/plugins/woocommerce-blocks/images/pattern-placeholders/pattern-fashion-clothing-outerwear-wool-scarf.png
new file mode 100644
index 00000000000..d78b4eafc59
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/pattern-fashion-clothing-outerwear-wool-scarf.png differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/plant-white-leaf-flower-vase-green.jpg b/plugins/woocommerce-blocks/images/pattern-placeholders/plant-white-leaf-flower-vase-green.jpg
new file mode 100644
index 00000000000..a3534a239aa
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/plant-white-leaf-flower-vase-green.jpg differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/portrait.png b/plugins/woocommerce-blocks/images/pattern-placeholders/portrait.png
new file mode 100644
index 00000000000..ef3643c37ce
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/portrait.png differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/road-sport-vintage-wheel-retro-old.jpg b/plugins/woocommerce-blocks/images/pattern-placeholders/road-sport-vintage-wheel-retro-old.jpg
new file mode 100644
index 00000000000..c047dd8114f
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/road-sport-vintage-wheel-retro-old.jpg differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/russet-organic-potatoes.png b/plugins/woocommerce-blocks/images/pattern-placeholders/russet-organic-potatoes.png
new file mode 100644
index 00000000000..acdcd7f4f40
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/russet-organic-potatoes.png differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/sweet-organic-lemons.png b/plugins/woocommerce-blocks/images/pattern-placeholders/sweet-organic-lemons.png
new file mode 100644
index 00000000000..2a7ea0aded9
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/sweet-organic-lemons.png differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/table-floor-home-living-room-furniture-room-square.png b/plugins/woocommerce-blocks/images/pattern-placeholders/table-floor-home-living-room-furniture-room-square.png
new file mode 100644
index 00000000000..59034891a46
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/table-floor-home-living-room-furniture-room-square.png differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/table-floor-home-living-room-furniture-room.png b/plugins/woocommerce-blocks/images/pattern-placeholders/table-floor-home-living-room-furniture-room.png
new file mode 100644
index 00000000000..1c5f1c6723a
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/table-floor-home-living-room-furniture-room.png differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/table-floor-interior-atmosphere-living-room-furniture-square-lg.png b/plugins/woocommerce-blocks/images/pattern-placeholders/table-floor-interior-atmosphere-living-room-furniture-square-lg.png
new file mode 100644
index 00000000000..a672811227a
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/table-floor-interior-atmosphere-living-room-furniture-square-lg.png differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/table-floor-interior-atmosphere-living-room-furniture-square.png b/plugins/woocommerce-blocks/images/pattern-placeholders/table-floor-interior-atmosphere-living-room-furniture-square.png
new file mode 100644
index 00000000000..21eac226341
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/table-floor-interior-atmosphere-living-room-furniture-square.png differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/table-white-chair-floor-shelf-lamp-square-lg.png b/plugins/woocommerce-blocks/images/pattern-placeholders/table-white-chair-floor-shelf-lamp-square-lg.png
new file mode 100644
index 00000000000..79af2817821
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/table-white-chair-floor-shelf-lamp-square-lg.png differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/table-wood-chair-floor-living-room-furniture-vertical.png b/plugins/woocommerce-blocks/images/pattern-placeholders/table-wood-chair-floor-living-room-furniture-vertical.png
new file mode 100644
index 00000000000..4def8200193
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/table-wood-chair-floor-living-room-furniture-vertical.png differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/table-wood-house-chair-floor-window.jpg b/plugins/woocommerce-blocks/images/pattern-placeholders/table-wood-house-chair-floor-window.jpg
new file mode 100644
index 00000000000..0ddfca97ea1
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/table-wood-house-chair-floor-window.jpg differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/tea-leaf-meal-food-herb-produce.jpg b/plugins/woocommerce-blocks/images/pattern-placeholders/tea-leaf-meal-food-herb-produce.jpg
new file mode 100644
index 00000000000..475e752c14e
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/tea-leaf-meal-food-herb-produce.jpg differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/technology-joystick-gadget-console-games-playstation.png b/plugins/woocommerce-blocks/images/pattern-placeholders/technology-joystick-gadget-console-games-playstation.png
new file mode 100644
index 00000000000..e0681543102
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/technology-joystick-gadget-console-games-playstation.png differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/technology-white-camera-photography-vintage-photographer.png b/plugins/woocommerce-blocks/images/pattern-placeholders/technology-white-camera-photography-vintage-photographer.png
new file mode 100644
index 00000000000..649598ad2ca
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/technology-white-camera-photography-vintage-photographer.png differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/tree-branch-plant-wood-leaf-flower.jpg b/plugins/woocommerce-blocks/images/pattern-placeholders/tree-branch-plant-wood-leaf-flower.jpg
new file mode 100644
index 00000000000..37914ca3821
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/tree-branch-plant-wood-leaf-flower.jpg differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/watch-hand-brand-jewellery-strap-platinum.jpg b/plugins/woocommerce-blocks/images/pattern-placeholders/watch-hand-brand-jewellery-strap-platinum.jpg
new file mode 100644
index 00000000000..cd1bdfe4f48
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/watch-hand-brand-jewellery-strap-platinum.jpg differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/white-black-black-and-white-photograph-monochrome-photography.jpg b/plugins/woocommerce-blocks/images/pattern-placeholders/white-black-black-and-white-photograph-monochrome-photography.jpg
new file mode 100644
index 00000000000..2f6cb36580a
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/white-black-black-and-white-photograph-monochrome-photography.jpg differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/white-vase-decoration-pattern-ceramic-lamp.jpg b/plugins/woocommerce-blocks/images/pattern-placeholders/white-vase-decoration-pattern-ceramic-lamp.jpg
new file mode 100644
index 00000000000..7d918a08b09
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/white-vase-decoration-pattern-ceramic-lamp.jpg differ
diff --git a/plugins/woocommerce-blocks/images/pattern-placeholders/writing-typing-keyboard-technology-white-vintage.jpg b/plugins/woocommerce-blocks/images/pattern-placeholders/writing-typing-keyboard-technology-white-vintage.jpg
new file mode 100644
index 00000000000..d1dac3cf823
Binary files /dev/null and b/plugins/woocommerce-blocks/images/pattern-placeholders/writing-typing-keyboard-technology-white-vintage.jpg differ
diff --git a/plugins/woocommerce-blocks/images/payment-methods/alipay.svg b/plugins/woocommerce-blocks/images/payment-methods/alipay.svg
new file mode 100644
index 00000000000..57fea30c771
--- /dev/null
+++ b/plugins/woocommerce-blocks/images/payment-methods/alipay.svg
@@ -0,0 +1,10 @@
+
+
diff --git a/plugins/woocommerce-blocks/images/payment-methods/amex.svg b/plugins/woocommerce-blocks/images/payment-methods/amex.svg
new file mode 100644
index 00000000000..8b7bdea58c1
--- /dev/null
+++ b/plugins/woocommerce-blocks/images/payment-methods/amex.svg
@@ -0,0 +1,6 @@
+
+
+
+
diff --git a/plugins/woocommerce-blocks/images/payment-methods/bancontact.svg b/plugins/woocommerce-blocks/images/payment-methods/bancontact.svg
new file mode 100644
index 00000000000..b9424f73a6f
--- /dev/null
+++ b/plugins/woocommerce-blocks/images/payment-methods/bancontact.svg
@@ -0,0 +1,8 @@
+
+
diff --git a/plugins/woocommerce-blocks/images/payment-methods/diners.svg b/plugins/woocommerce-blocks/images/payment-methods/diners.svg
new file mode 100644
index 00000000000..46466d7ef2f
--- /dev/null
+++ b/plugins/woocommerce-blocks/images/payment-methods/diners.svg
@@ -0,0 +1,8 @@
+
+
+
+
diff --git a/plugins/woocommerce-blocks/images/payment-methods/discover.svg b/plugins/woocommerce-blocks/images/payment-methods/discover.svg
new file mode 100644
index 00000000000..12b9f5b0b84
--- /dev/null
+++ b/plugins/woocommerce-blocks/images/payment-methods/discover.svg
@@ -0,0 +1,7 @@
+
+
+
+
diff --git a/plugins/woocommerce-blocks/images/payment-methods/eps.svg b/plugins/woocommerce-blocks/images/payment-methods/eps.svg
new file mode 100644
index 00000000000..56ab2ac607a
--- /dev/null
+++ b/plugins/woocommerce-blocks/images/payment-methods/eps.svg
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/plugins/woocommerce-blocks/images/payment-methods/giropay.svg b/plugins/woocommerce-blocks/images/payment-methods/giropay.svg
new file mode 100644
index 00000000000..b785fca9d12
--- /dev/null
+++ b/plugins/woocommerce-blocks/images/payment-methods/giropay.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/plugins/woocommerce-blocks/images/payment-methods/ideal.svg b/plugins/woocommerce-blocks/images/payment-methods/ideal.svg
new file mode 100644
index 00000000000..1b8e81799c6
--- /dev/null
+++ b/plugins/woocommerce-blocks/images/payment-methods/ideal.svg
@@ -0,0 +1,7 @@
+
+
diff --git a/plugins/woocommerce-blocks/images/payment-methods/jcb.svg b/plugins/woocommerce-blocks/images/payment-methods/jcb.svg
new file mode 100644
index 00000000000..42fdc6e8026
--- /dev/null
+++ b/plugins/woocommerce-blocks/images/payment-methods/jcb.svg
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/plugins/woocommerce-blocks/images/payment-methods/laser.svg b/plugins/woocommerce-blocks/images/payment-methods/laser.svg
new file mode 100644
index 00000000000..19719d7cb91
--- /dev/null
+++ b/plugins/woocommerce-blocks/images/payment-methods/laser.svg
@@ -0,0 +1,33 @@
+
+
diff --git a/plugins/woocommerce-blocks/images/payment-methods/maestro.svg b/plugins/woocommerce-blocks/images/payment-methods/maestro.svg
new file mode 100644
index 00000000000..9f87056f3bd
--- /dev/null
+++ b/plugins/woocommerce-blocks/images/payment-methods/maestro.svg
@@ -0,0 +1,9 @@
+
+
+
+
diff --git a/plugins/woocommerce-blocks/images/payment-methods/mastercard.svg b/plugins/woocommerce-blocks/images/payment-methods/mastercard.svg
new file mode 100644
index 00000000000..fd226f6df6a
--- /dev/null
+++ b/plugins/woocommerce-blocks/images/payment-methods/mastercard.svg
@@ -0,0 +1,9 @@
+
+
+
+
diff --git a/plugins/woocommerce-blocks/images/payment-methods/multibanco.svg b/plugins/woocommerce-blocks/images/payment-methods/multibanco.svg
new file mode 100644
index 00000000000..89e92cc9f75
--- /dev/null
+++ b/plugins/woocommerce-blocks/images/payment-methods/multibanco.svg
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/plugins/woocommerce-blocks/images/payment-methods/p24.svg b/plugins/woocommerce-blocks/images/payment-methods/p24.svg
new file mode 100644
index 00000000000..618af71e60b
--- /dev/null
+++ b/plugins/woocommerce-blocks/images/payment-methods/p24.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/plugins/woocommerce-blocks/images/payment-methods/sepa.svg b/plugins/woocommerce-blocks/images/payment-methods/sepa.svg
new file mode 100644
index 00000000000..db827d032a0
--- /dev/null
+++ b/plugins/woocommerce-blocks/images/payment-methods/sepa.svg
@@ -0,0 +1,7 @@
+
+
diff --git a/plugins/woocommerce-blocks/images/payment-methods/sofort.svg b/plugins/woocommerce-blocks/images/payment-methods/sofort.svg
new file mode 100644
index 00000000000..687078b467a
--- /dev/null
+++ b/plugins/woocommerce-blocks/images/payment-methods/sofort.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/plugins/woocommerce-blocks/images/payment-methods/unionpay.svg b/plugins/woocommerce-blocks/images/payment-methods/unionpay.svg
new file mode 100644
index 00000000000..7a716bd036c
--- /dev/null
+++ b/plugins/woocommerce-blocks/images/payment-methods/unionpay.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/plugins/woocommerce-blocks/images/payment-methods/visa.svg b/plugins/woocommerce-blocks/images/payment-methods/visa.svg
new file mode 100644
index 00000000000..750d51f416b
--- /dev/null
+++ b/plugins/woocommerce-blocks/images/payment-methods/visa.svg
@@ -0,0 +1,7 @@
+
+
+
+
diff --git a/plugins/woocommerce-blocks/images/payment-methods/wechat.svg b/plugins/woocommerce-blocks/images/payment-methods/wechat.svg
new file mode 100644
index 00000000000..956e1727ad7
--- /dev/null
+++ b/plugins/woocommerce-blocks/images/payment-methods/wechat.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
diff --git a/plugins/woocommerce-blocks/images/previews/beanie.jpg b/plugins/woocommerce-blocks/images/previews/beanie.jpg
new file mode 100644
index 00000000000..b725e78afde
Binary files /dev/null and b/plugins/woocommerce-blocks/images/previews/beanie.jpg differ
diff --git a/plugins/woocommerce-blocks/images/previews/cap.jpg b/plugins/woocommerce-blocks/images/previews/cap.jpg
new file mode 100644
index 00000000000..fd29cdf55a8
Binary files /dev/null and b/plugins/woocommerce-blocks/images/previews/cap.jpg differ
diff --git a/plugins/woocommerce-blocks/images/previews/collection.jpg b/plugins/woocommerce-blocks/images/previews/collection.jpg
new file mode 100644
index 00000000000..890f6c5e340
Binary files /dev/null and b/plugins/woocommerce-blocks/images/previews/collection.jpg differ
diff --git a/plugins/woocommerce-blocks/images/previews/hoodie-with-logo.jpg b/plugins/woocommerce-blocks/images/previews/hoodie-with-logo.jpg
new file mode 100644
index 00000000000..9609e3bf856
Binary files /dev/null and b/plugins/woocommerce-blocks/images/previews/hoodie-with-logo.jpg differ
diff --git a/plugins/woocommerce-blocks/images/previews/hoodie-with-pocket.jpg b/plugins/woocommerce-blocks/images/previews/hoodie-with-pocket.jpg
new file mode 100644
index 00000000000..72c3272d0cb
Binary files /dev/null and b/plugins/woocommerce-blocks/images/previews/hoodie-with-pocket.jpg differ
diff --git a/plugins/woocommerce-blocks/images/previews/hoodie-with-zipper.jpg b/plugins/woocommerce-blocks/images/previews/hoodie-with-zipper.jpg
new file mode 100644
index 00000000000..f9b27c9fd35
Binary files /dev/null and b/plugins/woocommerce-blocks/images/previews/hoodie-with-zipper.jpg differ
diff --git a/plugins/woocommerce-blocks/images/previews/long-sleeve-tee.jpg b/plugins/woocommerce-blocks/images/previews/long-sleeve-tee.jpg
new file mode 100644
index 00000000000..64c7d9d9e69
Binary files /dev/null and b/plugins/woocommerce-blocks/images/previews/long-sleeve-tee.jpg differ
diff --git a/plugins/woocommerce-blocks/images/previews/pennant.jpg b/plugins/woocommerce-blocks/images/previews/pennant.jpg
new file mode 100644
index 00000000000..61f64b7cda8
Binary files /dev/null and b/plugins/woocommerce-blocks/images/previews/pennant.jpg differ
diff --git a/plugins/woocommerce-blocks/images/previews/polo.jpg b/plugins/woocommerce-blocks/images/previews/polo.jpg
new file mode 100644
index 00000000000..6766cc216c7
Binary files /dev/null and b/plugins/woocommerce-blocks/images/previews/polo.jpg differ
diff --git a/plugins/woocommerce-blocks/images/previews/tshirt.jpg b/plugins/woocommerce-blocks/images/previews/tshirt.jpg
new file mode 100644
index 00000000000..d775d53efd3
Binary files /dev/null and b/plugins/woocommerce-blocks/images/previews/tshirt.jpg differ
diff --git a/plugins/woocommerce-blocks/images/template-placeholders/archive-product.svg b/plugins/woocommerce-blocks/images/template-placeholders/archive-product.svg
new file mode 100644
index 00000000000..19f8d9b5b6f
--- /dev/null
+++ b/plugins/woocommerce-blocks/images/template-placeholders/archive-product.svg
@@ -0,0 +1 @@
+
+
diff --git a/plugins/woocommerce-blocks/images/template-placeholders/single-product.svg b/plugins/woocommerce-blocks/images/template-placeholders/single-product.svg
new file mode 100644
index 00000000000..2e5a47b5b7e
--- /dev/null
+++ b/plugins/woocommerce-blocks/images/template-placeholders/single-product.svg
@@ -0,0 +1 @@
+A Function Component
,
+};
+
+registerCheckoutBlock( options );
+```
+
+### Options
+
+The following options are available:
+
+#### `metadata` (object, required)
+
+This is a your blocks metadata (from `blocks.json`). It needs to define at least a `name` (block name), and `parent` (the areas on checkout) to be valid.
+
+#### `component` (function, required)
+
+This is a React component that should replace the Block on the frontend. It will be fed any attributes from the Block and have access to any public context providers under the Checkout context.
+
+You should provide either a _React Component_ or a `React.lazy()` component if you wish to lazy load for performance reasons.
+
+## `getRegisteredBlocks( blockName )`
+
+Returns an array of registered block objects available within a specific parent block/area.
+
+### Usage
+
+```js
+// Aliased import
+import { getRegisteredBlocks } from '@woocommerce/blocks-checkout';
+
+// Global import
+// const { getRegisteredBlocks } = wc.blocksCheckout;
+
+const registeredBlocks = getRegisteredBlocks(
+ 'woocommerce/checkout-totals-block'
+);
+```
+
+## `hasInnerBlocks( blockName )`
+
+Check if a block/area supports inner block registration.
+
+### Usage
+
+```js
+// Aliased import
+import { hasInnerBlocks } from '@woocommerce/blocks-checkout';
+
+// Global import
+// const { hasInnerBlocks } = wc.blocksCheckout;
+
+const isValid = hasInnerBlocks( 'woocommerce/checkout-totals-block' ); // true
+```
+
+
+
+---
+
+[We're hiring!](https://woocommerce.com/careers/) Come work with us!
+
+🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-blocks/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./packages/checkout/blocks-registry/README.md)
+
+
+
diff --git a/plugins/woocommerce-blocks/packages/checkout/blocks-registry/get-registered-blocks.ts b/plugins/woocommerce-blocks/packages/checkout/blocks-registry/get-registered-blocks.ts
new file mode 100644
index 00000000000..9572a05d085
--- /dev/null
+++ b/plugins/woocommerce-blocks/packages/checkout/blocks-registry/get-registered-blocks.ts
@@ -0,0 +1,27 @@
+/**
+ * Internal dependencies
+ */
+import { innerBlockAreas, RegisteredBlock } from './types';
+import { registeredBlocks } from './registered-blocks';
+
+/**
+ * Check if a block/area supports inner block registration.
+ */
+export const hasInnerBlocks = ( block: string ): block is innerBlockAreas => {
+ return Object.values( innerBlockAreas ).includes(
+ block as innerBlockAreas
+ );
+};
+
+/**
+ * Returns an array of registered block objects available within a specific parent block/area.
+ */
+export const getRegisteredBlocks = (
+ block: string
+): Array< RegisteredBlock > => {
+ return hasInnerBlocks( block )
+ ? Object.values( registeredBlocks ).filter( ( { metadata } ) =>
+ ( metadata?.parent || [] ).includes( block )
+ )
+ : [];
+};
diff --git a/plugins/woocommerce-blocks/packages/checkout/blocks-registry/index.ts b/plugins/woocommerce-blocks/packages/checkout/blocks-registry/index.ts
new file mode 100644
index 00000000000..3e7f319a52f
--- /dev/null
+++ b/plugins/woocommerce-blocks/packages/checkout/blocks-registry/index.ts
@@ -0,0 +1,3 @@
+export * from './get-registered-blocks';
+export * from './register-checkout-block';
+export * from './types';
diff --git a/plugins/woocommerce-blocks/packages/checkout/blocks-registry/inserter.png b/plugins/woocommerce-blocks/packages/checkout/blocks-registry/inserter.png
new file mode 100644
index 00000000000..27f2ee43b35
Binary files /dev/null and b/plugins/woocommerce-blocks/packages/checkout/blocks-registry/inserter.png differ
diff --git a/plugins/woocommerce-blocks/packages/checkout/blocks-registry/register-checkout-block.ts b/plugins/woocommerce-blocks/packages/checkout/blocks-registry/register-checkout-block.ts
new file mode 100644
index 00000000000..cb1c6150fdf
--- /dev/null
+++ b/plugins/woocommerce-blocks/packages/checkout/blocks-registry/register-checkout-block.ts
@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import { registerBlockComponent } from '@woocommerce/blocks-registry';
+
+/**
+ * Internal dependencies
+ */
+import {
+ assertBlockName,
+ assertBlockParent,
+ assertOption,
+ assertBlockComponent,
+} from './utils';
+import { registeredBlocks } from './registered-blocks';
+import type { CheckoutBlockOptions } from './types';
+
+/**
+ * Main API for registering a new checkout block within areas.
+ */
+export const registerCheckoutBlock = (
+ options: CheckoutBlockOptions
+): void => {
+ assertOption( options, 'metadata', 'object' );
+ assertBlockName( options.metadata.name );
+ assertBlockParent( options.metadata.parent );
+ assertBlockComponent( options, 'component' );
+
+ /**
+ * This ensures the frontend component for the checkout block is available.
+ */
+ registerBlockComponent( {
+ blockName: options.metadata.name as string,
+ component: options.component,
+ } );
+
+ // Infer the `force` value from whether the block is locked or not. But
+ // allow overriding it on block registration.
+ const force =
+ typeof options.force === 'boolean'
+ ? options.force
+ : Boolean( options.metadata?.attributes?.lock?.default?.remove );
+
+ /**
+ * Store block metadata for later lookup.
+ */
+ registeredBlocks[ options.metadata.name ] = {
+ blockName: options.metadata.name,
+ metadata: options.metadata,
+ component: options.component,
+ force,
+ };
+};
diff --git a/plugins/woocommerce-blocks/packages/checkout/blocks-registry/registered-blocks.ts b/plugins/woocommerce-blocks/packages/checkout/blocks-registry/registered-blocks.ts
new file mode 100644
index 00000000000..dae2961550d
--- /dev/null
+++ b/plugins/woocommerce-blocks/packages/checkout/blocks-registry/registered-blocks.ts
@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import type { RegisteredBlocks } from './types';
+
+const registeredBlocks: RegisteredBlocks = {};
+
+export { registeredBlocks };
diff --git a/plugins/woocommerce-blocks/packages/checkout/blocks-registry/test/index.js b/plugins/woocommerce-blocks/packages/checkout/blocks-registry/test/index.js
new file mode 100644
index 00000000000..65350eb96ea
--- /dev/null
+++ b/plugins/woocommerce-blocks/packages/checkout/blocks-registry/test/index.js
@@ -0,0 +1,93 @@
+/**
+ * Internal dependencies
+ */
+import {
+ getRegisteredBlocks,
+ registerCheckoutBlock,
+ innerBlockAreas,
+} from '../index';
+
+describe( 'checkout blocks registry', () => {
+ const component = () => {
+ return null;
+ };
+
+ describe( 'registerCheckoutBlock', () => {
+ const invokeTest = ( blockName, options ) => () => {
+ return registerCheckoutBlock( blockName, options );
+ };
+ it( 'throws an error when registered block is missing `blockName`', () => {
+ expect(
+ invokeTest( {
+ metadata: {
+ name: null,
+ parent: innerBlockAreas.CHECKOUT_FIELDS,
+ },
+ component,
+ } )
+ ).toThrowError( /blockName/ );
+ expect(
+ invokeTest( {
+ metadata: {
+ name: '',
+ parent: innerBlockAreas.CHECKOUT_FIELDS,
+ },
+ component,
+ } )
+ ).toThrowError( /blockName/ );
+ } );
+ it( 'throws an error when registered block is missing a valid parent', () => {
+ expect(
+ invokeTest( {
+ metadata: {
+ name: 'test/block-name',
+ parent: [],
+ },
+ component,
+ } )
+ ).toThrowError( /parent/ );
+ expect(
+ invokeTest( {
+ metadata: {
+ name: 'test/block-name',
+ parent: 'invalid-parent',
+ },
+ component,
+ } )
+ ).toThrowError( /parent/ );
+ expect(
+ invokeTest( {
+ metadata: {
+ name: 'test/block-name',
+ parent: [
+ 'invalid-parent',
+ innerBlockAreas.CHECKOUT_FIELDS,
+ ],
+ },
+ component,
+ } )
+ ).not.toThrowError( /parent/ );
+ } );
+ it( 'throws an error when registered block is missing `component`', () => {
+ expect(
+ invokeTest( {
+ metadata: {
+ name: 'test/block-name',
+ parent: innerBlockAreas.CHECKOUT_FIELDS,
+ },
+ } )
+ ).toThrowError( /component/ );
+ } );
+ } );
+
+ describe( 'getRegisteredBlocks', () => {
+ it( 'gets an empty array when checkout area has no registered blocks', () => {
+ expect(
+ getRegisteredBlocks( innerBlockAreas.CONTACT_INFORMATION )
+ ).toEqual( [] );
+ } );
+ it( 'gets an empty array when the area is not defined', () => {
+ expect( getRegisteredBlocks( 'not-defined' ) ).toEqual( [] );
+ } );
+ } );
+} );
diff --git a/plugins/woocommerce-blocks/packages/checkout/blocks-registry/types.ts b/plugins/woocommerce-blocks/packages/checkout/blocks-registry/types.ts
new file mode 100644
index 00000000000..1a4ec9d1bac
--- /dev/null
+++ b/plugins/woocommerce-blocks/packages/checkout/blocks-registry/types.ts
@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import type { LazyExoticComponent } from '@wordpress/element';
+import type { BlockConfiguration } from '@wordpress/blocks';
+import type { RegisteredBlockComponent } from '@woocommerce/types';
+
+export enum innerBlockAreas {
+ CHECKOUT = 'woocommerce/checkout',
+ CHECKOUT_FIELDS = 'woocommerce/checkout-fields-block',
+ CHECKOUT_TOTALS = 'woocommerce/checkout-totals-block',
+ CONTACT_INFORMATION = 'woocommerce/checkout-contact-information-block',
+ SHIPPING_ADDRESS = 'woocommerce/checkout-shipping-address-block',
+ BILLING_ADDRESS = 'woocommerce/checkout-billing-address-block',
+ SHIPPING_METHOD = 'woocommerce/checkout-shipping-method-block',
+ SHIPPING_METHODS = 'woocommerce/checkout-shipping-methods-block',
+ PICKUP_LOCATION = 'woocommerce/checkout-pickup-options-block',
+ PAYMENT_METHODS = 'woocommerce/checkout-payment-methods-block',
+ CART = 'woocommerce/cart',
+ EMPTY_CART = 'woocommerce/empty-cart-block',
+ FILLED_CART = 'woocommerce/filled-cart-block',
+ CART_ITEMS = 'woocommerce/cart-items-block',
+ CART_CROSS_SELLS = 'woocommerce/cart-cross-sells-block',
+ CART_TOTALS = 'woocommerce/cart-totals-block',
+ MINI_CART = 'woocommerce/mini-cart-contents',
+ EMPTY_MINI_CART = 'woocommerce/empty-mini-cart-contents-block',
+ FILLED_MINI_CART = 'woocommerce/filled-mini-cart-contents-block',
+ MINI_CART_TITLE = 'woocommerce/mini-cart-title-block',
+ MINI_CART_ITEMS = 'woocommerce/mini-cart-items-block',
+ MINI_CART_FOOTER = 'woocommerce/mini-cart-footer-block',
+ CART_ORDER_SUMMARY = 'woocommerce/cart-order-summary-block',
+ CHECKOUT_ORDER_SUMMARY = 'woocommerce/checkout-order-summary-block',
+}
+
+interface CheckoutBlockOptionsMetadata extends Partial< BlockConfiguration > {
+ name: string;
+ parent: string[];
+}
+
+export type RegisteredBlock = {
+ blockName: string;
+ metadata: CheckoutBlockOptionsMetadata;
+ component: RegisteredBlockComponent;
+ force: boolean;
+};
+
+export type RegisteredBlocks = Record< string, RegisteredBlock >;
+
+export type CheckoutBlockOptions = {
+ metadata: CheckoutBlockOptionsMetadata;
+ force?: boolean;
+ component:
+ | LazyExoticComponent< React.ComponentType< unknown > >
+ | ( () => JSX.Element | null )
+ | null;
+};
diff --git a/plugins/woocommerce-blocks/packages/checkout/blocks-registry/utils.ts b/plugins/woocommerce-blocks/packages/checkout/blocks-registry/utils.ts
new file mode 100644
index 00000000000..eb8ed5724e0
--- /dev/null
+++ b/plugins/woocommerce-blocks/packages/checkout/blocks-registry/utils.ts
@@ -0,0 +1,122 @@
+/**
+ * External dependencies
+ */
+import { isObject } from '@woocommerce/types';
+
+/**
+ * Internal dependencies
+ */
+import { hasInnerBlocks } from './get-registered-blocks';
+
+/**
+ * Asserts that an option is of the given type. Otherwise, throws an error.
+ *
+ * @throws Will throw an error if the type of the option doesn't match the expected type.
+ */
+export const assertType = (
+ optionName: string,
+ option: unknown,
+ expectedType: unknown
+): void => {
+ const actualType = typeof option;
+ if ( actualType !== expectedType ) {
+ throw new Error(
+ `Incorrect value for the ${ optionName } argument when registering a checkout block. It was a ${ actualType }, but must be a ${ expectedType }.`
+ );
+ }
+};
+
+/**
+ * Validate the block name.
+ *
+ * @throws Will throw an error if the block name is invalid.
+ */
+export const assertBlockName = ( blockName: string ): void => {
+ assertType( 'blockName', blockName, 'string' );
+
+ if ( ! blockName ) {
+ throw new Error(
+ `Value for the blockName argument must not be empty.`
+ );
+ }
+};
+
+/**
+ * Validate the block parent.
+ *
+ * @throws Will throw an error if the block name is invalid.
+ */
+export const assertBlockParent = ( blockParent: string | string[] ): void => {
+ if ( typeof blockParent !== 'string' && ! Array.isArray( blockParent ) ) {
+ throw new Error(
+ `Incorrect value for the parent argument when registering a checkout block. It was a ${ typeof blockParent }, but must be a string or array of strings.`
+ );
+ }
+
+ if ( typeof blockParent === 'string' && ! hasInnerBlocks( blockParent ) ) {
+ throw new Error(
+ `When registering a checkout block, the parent must be a valid inner block area.`
+ );
+ }
+
+ if (
+ Array.isArray( blockParent ) &&
+ ! blockParent.some( ( parent ) => hasInnerBlocks( parent ) )
+ ) {
+ throw new Error(
+ `When registering a checkout block, the parent must be a valid inner block area.`
+ );
+ }
+};
+
+/**
+ * Asserts that an option is of the given type. Otherwise, throws an error.
+ *
+ * @throws Will throw an error if the type of the option doesn't match the expected type.
+ * @param {Object} options Object containing the option to validate.
+ * @param {string} optionName Name of the option to validate.
+ * @param {string} expectedType Type expected for the option.
+ */
+export const assertOption = (
+ options: unknown,
+ optionName: string,
+ expectedType: string
+): void => {
+ if ( ! isObject( options ) ) {
+ return;
+ }
+ const actualType = typeof options[ optionName ];
+ if ( actualType !== expectedType ) {
+ throw new Error(
+ `Incorrect value for the ${ optionName } argument when registering a block component. It was a ${ actualType }, but must be a ${ expectedType }.`
+ );
+ }
+};
+
+/**
+ * Asserts that an option is a valid react element or lazy callback. Otherwise, throws an error.
+ *
+ * @throws Will throw an error if the type of the option doesn't match the expected type.
+ */
+export const assertBlockComponent = (
+ options: Record< string, unknown >,
+ optionName: string
+): void => {
+ const optionValue = options[ optionName ];
+
+ if ( optionValue ) {
+ if ( typeof optionValue === 'function' ) {
+ return;
+ }
+ if (
+ isObject( optionValue ) &&
+ optionValue.$$typeof &&
+ optionValue.$$typeof === Symbol.for( 'react.lazy' )
+ ) {
+ return;
+ }
+ }
+ throw new Error(
+ `Incorrect value for the ${ optionName } argument when registering a block component. Component must be a valid React Element or Lazy callback.`
+ );
+};
diff --git a/plugins/woocommerce-blocks/packages/checkout/components/README.md b/plugins/woocommerce-blocks/packages/checkout/components/README.md
new file mode 100644
index 00000000000..9f7bf428f78
--- /dev/null
+++ b/plugins/woocommerce-blocks/packages/checkout/components/README.md
@@ -0,0 +1,31 @@
+# Components
+
+A library of components to be used for creating common UI elements shared between features of the WooCommerce Cart and Checkout Blocks.
+
+## Usage
+
+When WooCommerce Blocks is installed and activated, these components can be accessed by importing from the `blocks-checkout` package.
+
+```ts
+// Aliased import
+import { Button } from '@woocommerce/blocks-components';
+
+// Global import
+// const { Button } = wc.blocksCheckout;
+
+export default function MyButton() {
+ return Click Me! ;
+}
+```
+
+These components are here so they can be consumed by extensions.
+
+
+
+---
+
+[We're hiring!](https://woocommerce.com/careers/) Come work with us!
+
+🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-blocks/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./packages/checkout/components/README.md)
+
+
diff --git a/plugins/woocommerce-blocks/packages/checkout/components/checkbox-control/index.tsx b/plugins/woocommerce-blocks/packages/checkout/components/checkbox-control/index.tsx
new file mode 100644
index 00000000000..6379c1bad12
--- /dev/null
+++ b/plugins/woocommerce-blocks/packages/checkout/components/checkbox-control/index.tsx
@@ -0,0 +1 @@
+export { CheckboxControl } from '@woocommerce/blocks-components';
diff --git a/plugins/woocommerce-blocks/packages/checkout/components/discounts-meta/index.js b/plugins/woocommerce-blocks/packages/checkout/components/discounts-meta/index.js
new file mode 100644
index 00000000000..b0cf6eb3ee8
--- /dev/null
+++ b/plugins/woocommerce-blocks/packages/checkout/components/discounts-meta/index.js
@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { createSlotFill, hasValidFills, useSlot } from '../../slot';
+import TotalsWrapper from '../../../components/totals-wrapper';
+
+const slotName = '__experimentalDiscountsMeta';
+
+const { Fill: ExperimentalDiscountsMeta, Slot: DiscountsMetaSlot } =
+ createSlotFill( slotName );
+
+const Slot = ( { className, extensions, cart, context } ) => {
+ const { fills } = useSlot( slotName );
+ return (
+ hasValidFills( fills ) && (
+
+
+ )
+ );
+};
+
+ExperimentalDiscountsMeta.Slot = Slot;
+
+export default ExperimentalDiscountsMeta;
diff --git a/plugins/woocommerce-blocks/packages/checkout/components/error-boundary/index.js b/plugins/woocommerce-blocks/packages/checkout/components/error-boundary/index.js
new file mode 100644
index 00000000000..e55800dea49
--- /dev/null
+++ b/plugins/woocommerce-blocks/packages/checkout/components/error-boundary/index.js
@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import { Component } from '@wordpress/element';
+
+class CheckoutSlotErrorBoundary extends Component {
+ state = { errorMessage: '', hasError: false };
+
+ static getDerivedStateFromError( error ) {
+ if (
+ typeof error.statusText !== 'undefined' &&
+ typeof error.status !== 'undefined'
+ ) {
+ return {
+ errorMessage: (
+ <>
+ { error.status }
+ { ': ' + error.statusText }
+
+ ),
+ hasError: true,
+ };
+ }
+
+ return { errorMessage: error.message, hasError: true };
+ }
+
+ render() {
+ const { renderError } = this.props;
+ const { errorMessage, hasError } = this.state;
+
+ if ( hasError ) {
+ if ( typeof renderError === 'function' ) {
+ return renderError( errorMessage );
+ }
+ return { errorMessage }
;
+ }
+
+ return this.props.children;
+ }
+}
+
+export default CheckoutSlotErrorBoundary;
diff --git a/plugins/woocommerce-blocks/packages/checkout/components/index.ts b/plugins/woocommerce-blocks/packages/checkout/components/index.ts
new file mode 100644
index 00000000000..3c1f860b81b
--- /dev/null
+++ b/plugins/woocommerce-blocks/packages/checkout/components/index.ts
@@ -0,0 +1,18 @@
+export * from '../../components/totals';
+export { default as TotalsWrapper } from '../../components/totals-wrapper';
+export { default as ExperimentalOrderMeta } from './order-meta';
+export { default as ExperimentalDiscountsMeta } from './discounts-meta';
+export { default as ExperimentalOrderShippingPackages } from './order-shipping-packages';
+export { default as ExperimentalOrderLocalPickupPackages } from './order-local-pickup-packages';
+export { default as Panel } from '../../components/panel';
+export { default as Button } from '../../components/button';
+export { default as Label } from './label';
+export { default as StoreNoticesContainer } from '../../components/store-notices-container';
+export { CheckboxControl } from './checkbox-control';
+export {
+ default as ValidatedTextInput,
+ ValidatedTextInputHandle,
+} from '../../components/text-input/validated-text-input';
+export { default as TextInput } from '../../components/text-input/text-input';
+export { default as ValidationInputError } from '../../components/validation-input-error';
+export { default as StoreNotice } from '../../components/store-notice';
diff --git a/plugins/woocommerce-blocks/packages/checkout/components/label/index.ts b/plugins/woocommerce-blocks/packages/checkout/components/label/index.ts
new file mode 100644
index 00000000000..b74c7e6df27
--- /dev/null
+++ b/plugins/woocommerce-blocks/packages/checkout/components/label/index.ts
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import Label from '../../../components/label';
+
+export default Label;
diff --git a/plugins/woocommerce-blocks/packages/checkout/components/order-local-pickup-packages/index.tsx b/plugins/woocommerce-blocks/packages/checkout/components/order-local-pickup-packages/index.tsx
new file mode 100644
index 00000000000..9f7b3eba123
--- /dev/null
+++ b/plugins/woocommerce-blocks/packages/checkout/components/order-local-pickup-packages/index.tsx
@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import {
+ Cart,
+ CartShippingPackageShippingRate,
+} from '@woocommerce/type-defs/cart';
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { createSlotFill } from '../../slot';
+import type { RadioControlOption } from '../../../../packages/components/radio-control/types';
+
+const slotName = '__experimentalOrderLocalPickupPackages';
+const {
+ Fill: ExperimentalOrderLocalPickupPackages,
+ Slot: OrderLocalPickupPackagesSlot,
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+} = createSlotFill( slotName );
+
+interface ExperimentalOrderLocalPickupPackagesProps {
+ extensions: Record< string, unknown >;
+ cart: Cart;
+ components: Record< string, Component >;
+ renderPickupLocation: (
+ option: CartShippingPackageShippingRate,
+ packageCount: number
+ ) => RadioControlOption;
+}
+const Slot = ( {
+ extensions,
+ cart,
+ components,
+ renderPickupLocation,
+}: ExperimentalOrderLocalPickupPackagesProps ) => {
+ return (
+
+
+ )
+ );
+};
+
+ExperimentalOrderMeta.Slot = Slot;
+
+export default ExperimentalOrderMeta;
diff --git a/plugins/woocommerce-blocks/packages/checkout/components/order-shipping-packages/index.js b/plugins/woocommerce-blocks/packages/checkout/components/order-shipping-packages/index.js
new file mode 100644
index 00000000000..39137a2ccec
--- /dev/null
+++ b/plugins/woocommerce-blocks/packages/checkout/components/order-shipping-packages/index.js
@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { createSlotFill } from '../../slot';
+
+const slotName = '__experimentalOrderShippingPackages';
+const {
+ Fill: ExperimentalOrderShippingPackages,
+ Slot: OrderShippingPackagesSlot,
+} = createSlotFill( slotName );
+
+const Slot = ( {
+ className,
+ noResultsMessage,
+ renderOption,
+ extensions,
+ cart,
+ components,
+ context,
+ collapsible,
+ showItems,
+} ) => {
+ return (
+
+ You got an error!
+ { errorMessage }
+ Contact support at{ ' ' }
+
help@example.com
+
+
+ );
+};
+
+registerPlugin( 'my-plugin', { render } );
+```
+
+## Available Slot Fills
+
+Slot Fills are implemented throughout the Cart and Checkout Blocks, as well as some components. For a list of available Slot Fills, [see this document](../../../docs/third-party-developers/extensibility/checkout-block/available-slot-fills.md).
+
+
+
+---
+
+[We're hiring!](https://woocommerce.com/careers/) Come work with us!
+
+🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-blocks/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./packages/checkout/slot/README.md)
+
+
+
diff --git a/plugins/woocommerce-blocks/packages/checkout/slot/index.js b/plugins/woocommerce-blocks/packages/checkout/slot/index.js
new file mode 100644
index 00000000000..1d6bf6d7672
--- /dev/null
+++ b/plugins/woocommerce-blocks/packages/checkout/slot/index.js
@@ -0,0 +1,120 @@
+/**
+ * External dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+import { CURRENT_USER_IS_ADMIN } from '@woocommerce/settings';
+import { Children, cloneElement } from '@wordpress/element';
+import {
+ createSlotFill as baseCreateSlotFill,
+ __experimentalUseSlot,
+ useSlot as __useSlot, //eslint-disable-line
+} from 'wordpress-components';
+
+/**
+ * Internal dependencies
+ */
+import BlockErrorBoundary from '../components/error-boundary';
+
+/**
+ * This function is used in case __experimentalUseSlot is removed and useSlot is not released, it tries to mock
+ * the return value of that slot.
+ *
+ * @return {Object} The hook mocked return, currently:
+ * fills, a null array of length 2.
+ */
+const mockedUseSlot = () => {
+ /**
+ * If we're here, it means useSlot was never graduated and __experimentalUseSlot is removed, so we should change our code.
+ *
+ */
+ deprecated( '__experimentalUseSlot', {
+ plugin: 'woocommerce-gutenberg-products-block',
+ } );
+ // We're going to mock its value
+ return {
+ fills: new Array( 2 ),
+ };
+};
+
+/**
+ * Checks if this slot has any valid fills. A valid fill is one that isn't falsy.
+ *
+ * @param {Array} fills The list of fills to check for a valid one in.
+ * @return {boolean} True if this slot contains any valid fills.
+ */
+export const hasValidFills = ( fills ) =>
+ Array.isArray( fills ) && fills.filter( Boolean ).length > 0;
+
+/**
+ * A hook that is used inside a slotFillProvider to return information on the a slot.
+ *
+ * @param {string} slotName The slot name to be hooked into.
+ * @return {Object} slot data.
+ */
+let useSlot;
+
+if ( typeof __useSlot === 'function' ) {
+ useSlot = __useSlot;
+} else if ( typeof __experimentalUseSlot === 'function' ) {
+ useSlot = __experimentalUseSlot;
+} else {
+ useSlot = mockedUseSlot;
+}
+
+export { useSlot };
+
+/**
+ * Abstracts @wordpress/components createSlotFill, wraps Fill in an error boundary and passes down fillProps.
+ *
+ * @param {string} slotName The generated slotName, based down to createSlotFill.
+ * @param {null|function(Element):Element} [onError] Returns an element to display the error if the current use is an admin.
+ *
+ * @return {Object} Returns a newly wrapped Fill and Slot.
+ */
+export const createSlotFill = ( slotName, onError = null ) => {
+ const { Fill: BaseFill, Slot: BaseSlot } = baseCreateSlotFill( slotName );
+
+ /**
+ * A Fill that will get rendered inside associate slot.
+ * If the code inside has a error, it would be caught ad removed.
+ * The error is only visible to admins.
+ *
+ * @param {Object} props Items props.
+ * @param {Array} props.children Children to be rendered.
+ */
+ const Fill = ( { children } ) => (
+
+ { ( fillProps ) =>
+ Children.map( children, ( fill ) => (
+ null would render nothing.
+ */
+ renderError={
+ CURRENT_USER_IS_ADMIN ? onError : () => null
+ }
+ >
+ { cloneElement( fill, fillProps ) }
+
+ ) )
+ }
+
+ );
+
+ /**
+ * A Slot that will get rendered inside our tree.
+ * This forces Slot to use the Portal implementation that allows events to be bubbled to react tree instead of dom tree.
+ *
+ * @param {Object} [props] Slot props.
+ * @param {string} props.className Class name to be used on slot.
+ * @param {Object} props.fillProps Props to be passed to fills.
+ * @param {Element|string} props.as Element used to render the slot, defaults to div.
+ *
+ */
+ const Slot = ( props ) =>
+ { /* The is required to give the placeholder content and therefore height, without it the placeholder rows do not render */ }
+
+
+ ) );
+ }, [] );
+
+ const renderedShowMore = useMemo( () => {
+ const optionCount = options.length;
+ const remainingOptionsCount = optionCount - limit;
+ return (
+ ! showExpanded && (
+
+ {
+ setShowExpanded( true );
+ } }
+ aria-expanded={ false }
+ aria-label={ sprintf(
+ /* translators: %s is referring the remaining count of options */
+ _n(
+ 'Show %s more option',
+ 'Show %s more options',
+ remainingOptionsCount,
+ 'woo-gutenberg-products-block'
+ ),
+ remainingOptionsCount
+ ) }
+ >
+ { sprintf(
+ /* translators: %s number of options to reveal. */
+ _n(
+ 'Show %s more',
+ 'Show %s more',
+ remainingOptionsCount,
+ 'woo-gutenberg-products-block'
+ ),
+ remainingOptionsCount
+ ) }
+
+
+ )
+ );
+ }, [ options, limit, showExpanded ] );
+
+ const renderedShowLess = useMemo( () => {
+ return (
+ showExpanded && (
+
+ {
+ setShowExpanded( false );
+ } }
+ aria-expanded={ true }
+ aria-label={ __(
+ 'Show less options',
+ 'woo-gutenberg-products-block'
+ ) }
+ >
+ { __( 'Show less', 'woo-gutenberg-products-block' ) }
+
+
+ )
+ );
+ }, [ showExpanded ] );
+
+ const renderedOptions = useMemo( () => {
+ // Truncate options if > the limit + 5.
+ const optionCount = options.length;
+ const shouldTruncateOptions = optionCount > limit + 5;
+ return (
+ <>
+ { options.map( ( option, index ) => (
+
+ = limit && { hidden: true } ) }
+ >
+ {
+ onChange( option.value );
+ } }
+ disabled={ isDisabled }
+ />
+
+ { shouldTruncateOptions &&
+ index === limit - 1 &&
+ renderedShowMore }
+
+ ) ) }
+ { shouldTruncateOptions && renderedShowLess }
+
+ );
+ }, [
+ options,
+ onChange,
+ checked,
+ showExpanded,
+ limit,
+ renderedShowLess,
+ renderedShowMore,
+ isDisabled,
+ ] );
+
+ const classes = classNames(
+ 'wc-block-checkbox-list',
+ 'wc-block-components-checkbox-list',
+ {
+ 'is-loading': isLoading,
+ },
+ className
+ );
+
+ return (
+
+ { isLoading ? placeholder : renderedOptions }
+
+ );
+};
+
+export default CheckboxList;
diff --git a/plugins/woocommerce-blocks/packages/components/checkbox-list/stories/index.stories.tsx b/plugins/woocommerce-blocks/packages/components/checkbox-list/stories/index.stories.tsx
new file mode 100644
index 00000000000..ad0ddc342d5
--- /dev/null
+++ b/plugins/woocommerce-blocks/packages/components/checkbox-list/stories/index.stories.tsx
@@ -0,0 +1,118 @@
+/**
+ * External dependencies
+ */
+import type { Story, Meta } from '@storybook/react';
+import { useArgs } from '@storybook/client-api';
+
+/**
+ * Internal dependencies
+ */
+import CheckboxList, { type CheckboxListProps } from '..';
+
+export default {
+ title: 'External Components/Checkbox List',
+ component: CheckboxList,
+ argTypes: {
+ className: {
+ control: 'text',
+ table: {
+ type: {
+ summary: 'string',
+ },
+ },
+ },
+ isLoading: {
+ table: {
+ type: {
+ summary: 'boolean',
+ },
+ },
+ control: 'boolean',
+ description: 'Is the component loading?',
+ },
+ isDisabled: {
+ table: {
+ type: {
+ summary: 'boolean',
+ },
+ },
+ type: 'boolean',
+ control: 'boolean',
+ description: 'Is the component disabled?',
+ },
+ limit: {
+ type: 'number',
+ table: {
+ type: {
+ summary: 'number',
+ },
+ },
+ control: 'number',
+ defaultValue: 2,
+ description:
+ 'If there are more checkboxes than the limit + 5 then show a `show more` button.',
+ },
+ checked: {
+ control: 'array',
+ table: {
+ type: {
+ summary: 'boolean',
+ },
+ },
+ description:
+ 'An array of strings containing the values of which checkboxes are checked',
+ },
+ options: {
+ table: {
+ type: {
+ summary: 'array',
+ },
+ },
+ description:
+ 'The list of options to show. This should be an array of objects containing a `label` and `value` property.',
+ control: 'array',
+ },
+ onChange: {
+ table: {
+ type: {
+ summary: 'function',
+ },
+ },
+ action: 'toggled',
+ },
+ },
+} as Meta< CheckboxListProps >;
+
+const Template: Story< CheckboxListProps > = ( args ) => {
+ const [ { checked, onChange: argsOnChange }, updateArgs ] = useArgs();
+ const onChange = ( checkedOption: string ) => {
+ argsOnChange( checkedOption );
+ if ( checked?.includes( checkedOption ) ) {
+ updateArgs( {
+ checked: checked.filter(
+ ( option: string ) => option !== checkedOption
+ ),
+ } );
+ return;
+ }
+ checked.push( checkedOption );
+ updateArgs( { ...args, checked } );
+ };
+
+ return
+
+ { text }
+
+ { showScreenReaderText && (
+ { screenReaderText }
+ ) }
+ { children }
+
+ );
+};
+export default Chip;
diff --git a/plugins/woocommerce-blocks/packages/components/chip/index.ts b/plugins/woocommerce-blocks/packages/components/chip/index.ts
new file mode 100644
index 00000000000..7e83fec240d
--- /dev/null
+++ b/plugins/woocommerce-blocks/packages/components/chip/index.ts
@@ -0,0 +1,2 @@
+export { default as Chip } from './chip';
+export { default as RemovableChip } from './removable-chip';
diff --git a/plugins/woocommerce-blocks/packages/components/chip/removable-chip.tsx b/plugins/woocommerce-blocks/packages/components/chip/removable-chip.tsx
new file mode 100644
index 00000000000..fd5b5b9a50b
--- /dev/null
+++ b/plugins/woocommerce-blocks/packages/components/chip/removable-chip.tsx
@@ -0,0 +1,108 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { __, sprintf } from '@wordpress/i18n';
+import { Icon, closeSmall } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Chip, { ChipProps } from './chip';
+
+export interface RemovableChipProps extends ChipProps {
+ /**
+ * Aria label content.
+ */
+ ariaLabel?: string;
+ /**
+ * CSS class used.
+ */
+ className?: string;
+ /**
+ * Whether action is disabled or not.
+ */
+ disabled?: boolean;
+ /**
+ * Function to call when remove event is fired.
+ */
+ onRemove?: () => void;
+ /**
+ * Whether to expand click area for remove event.
+ */
+ removeOnAnyClick?: boolean;
+}
+
+/**
+ * Component used to render a "chip" -- an item containing some text with
+ * an X button to remove/dismiss each chip.
+ */
+export const RemovableChip = ( {
+ ariaLabel = '',
+ className = '',
+ disabled = false,
+ onRemove = () => void 0,
+ removeOnAnyClick = false,
+ text,
+ screenReaderText = '',
+ ...props
+}: RemovableChipProps ): JSX.Element => {
+ const RemoveElement = removeOnAnyClick ? 'span' : 'button';
+
+ if ( ! ariaLabel ) {
+ const ariaLabelText =
+ screenReaderText && typeof screenReaderText === 'string'
+ ? screenReaderText
+ : text;
+ ariaLabel =
+ typeof ariaLabelText !== 'string'
+ ? /* translators: Remove chip. */
+ __( 'Remove', 'woo-gutenberg-products-block' )
+ : sprintf(
+ /* translators: %s text of the chip to remove. */
+ __( 'Remove "%s"', 'woo-gutenberg-products-block' ),
+ ariaLabelText
+ );
+ }
+
+ const clickableElementProps = {
+ 'aria-label': ariaLabel,
+ disabled,
+ onClick: onRemove,
+ onKeyDown: ( e: React.KeyboardEvent ) => {
+ if ( e.key === 'Backspace' || e.key === 'Delete' ) {
+ onRemove();
+ }
+ },
+ };
+
+ const chipProps = removeOnAnyClick ? clickableElementProps : {};
+ const removeProps = removeOnAnyClick
+ ? { 'aria-hidden': true }
+ : clickableElementProps;
+
+ return (
+
+
+
+
+ );
+};
+
+export default RemovableChip;
diff --git a/plugins/woocommerce-blocks/packages/components/chip/stories/chip.stories.tsx b/plugins/woocommerce-blocks/packages/components/chip/stories/chip.stories.tsx
new file mode 100644
index 00000000000..21d0a54c55c
--- /dev/null
+++ b/plugins/woocommerce-blocks/packages/components/chip/stories/chip.stories.tsx
@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import type { Story, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Chip, { ChipProps } from '../chip';
+const availableElements = [ 'li', 'div', 'span' ];
+const availableRadii = [ 'none', 'small', 'medium', 'large' ];
+
+export default {
+ title: 'External Components/Chip',
+ component: Chip,
+ argTypes: {
+ element: {
+ control: 'radio',
+ options: availableElements,
+ },
+ className: {
+ control: 'text',
+ },
+ radius: {
+ control: 'radio',
+ options: availableRadii,
+ },
+ },
+} as Meta< ChipProps >;
+
+const Template: Story< ChipProps > = ( args ) =>
+
+ Test
+
+ Lorem Ipsum
+
+`;
+
+exports[`Chip should render defined radius 1`] = `
+
+
+ Test
+
+
+`;
+
+exports[`Chip should render nodes as the text 1`] = `
+
+
+
+ Test
+
+
+
+`;
+
+exports[`Chip should render screen reader text 1`] = `
+
+
+ Test
+
+
+ Test 2
+
+
+`;
+
+exports[`Chip should render text 1`] = `
+
+
+ Test
+
+
+`;
+
+exports[`Chip with custom wrapper should render a chip made up of a div instead of a li 1`] = `
+
+
+ Test
+
+
+`;
+
+exports[`RemovableChip should render custom aria label 1`] = `
+
+
+
+ Test
+
+
+
+
+
+
+
+`;
+
+exports[`RemovableChip should render default aria label if text is a node 1`] = `
+
+
+
+ Test
+
+
+
+ Test 2
+
+
+
+
+
+
+`;
+
+exports[`RemovableChip should render screen reader text aria label 1`] = `
+
+
+ Test
+
+
+ Test 2
+
+
+
+
+
+
+`;
+
+exports[`RemovableChip should render text and the remove button 1`] = `
+
+
+ Test
+
+
+
+
+
+
+`;
+
+exports[`RemovableChip should render with disabled remove button 1`] = `
+
+
+ Test
+
+
+
+
+
+
+`;
+
+exports[`RemovableChip with removeOnAnyClick should be a button when removeOnAnyClick is set to true 1`] = `
+
+
+ Test
+
+
+
+
+
+
+`;
diff --git a/plugins/woocommerce-blocks/packages/components/chip/test/index.js b/plugins/woocommerce-blocks/packages/components/chip/test/index.js
new file mode 100644
index 00000000000..f666b1ab1ff
--- /dev/null
+++ b/plugins/woocommerce-blocks/packages/components/chip/test/index.js
@@ -0,0 +1,109 @@
+/**
+ * External dependencies
+ */
+import TestRenderer from 'react-test-renderer';
+
+/**
+ * Internal dependencies
+ */
+import { Chip, RemovableChip } from '..';
+
+describe( 'Chip', () => {
+ test( 'should render text', () => {
+ const component = TestRenderer.create( Test