POV: Create Cross-Sells product list

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

@@ -150,6 +150,7 @@ export const useStoreCart = (
 				return {
 					cartCoupons: previewCart.coupons,
 					cartItems: previewCart.items,
+					crossSellsItems: previewCart.cross_sells,
 					cartFees: previewCart.fees,
 					cartItemsCount: previewCart.items_count,
 					cartItemsWeight: previewCart.items_weight,
@@ -211,6 +212,7 @@ export const useStoreCart = (
 			return {
 				cartCoupons,
 				cartItems: cartData.items,
+				crossSellsItems: cartData.cross_sells,
 				cartFees,
 				cartItemsCount: cartData.itemsCount,
 				cartItemsWeight: cartData.itemsWeight,

assets/js/blocks/cart/cart-cross-sells-product-list/cart-cross-sells-item.tsx

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { ProductImage } from '@woocommerce/base-components/cart-checkout';
+import ProductName from '@woocommerce/base-components/product-name';
+import ProductPrice from '@woocommerce/base-components/product-price';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+
+/**
+ * Internal dependencies
+ */
+import { AddToCartButton } from '../../../atomic/blocks/product-elements/add-to-cart/shared';
+
+const CartCrossSellsItem = ( { crossSellsItem } ): JSX.Element => {
+	const { images, name, prices, permalink } = crossSellsItem;
+	const priceCurrency = getCurrencyFromPriceResponse( prices );
+
+	return (
+		<div>
+			<ProductDataContextProvider
+				product={ product }
+				isLoading={ isLoading }
+			>
+				<a href={ permalink }>
+					<ProductImage
+						image={ images.length ? images[ 0 ] : {} }
+						fallbackAlt={ name }
+					/>
+					<ProductName disabled={ true } name={ name } />
+					<div>[ Product rating ]</div>
+					<ProductPrice
+						currency={ priceCurrency }
+						price={ prices.price }
+						regularPrice={ prices.regular_price }
+						className="wc-block-components-cross-sells-item__individual-prices"
+						priceClassName="wc-block-components-cross-sells-item__individual-price"
+						regularPriceClassName="wc-block-components-cross-sells-item__regular-individual-price"
+						format={ '<price/>' }
+					/>
+				</a>
+				<AddToCartButton />
+			</ProductDataContextProvider>
+		</div>
+	);
+};
+
+export default CartCrossSellsItem;

assets/js/blocks/cart/cart-cross-sells-product-list/index.tsx

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { CartResponseItem } from '@woocommerce/type-defs/cart-response';
+
+/**
+ * Internal dependencies
+ */
+import CartCrossSellsItem from './cart-cross-sells-item';
+
+const placeholderRows = [ ...Array( 3 ) ].map( ( _x, i ) => (
+	<CartCrossSellsItem crossSellsItem={ {} } key={ i } />
+) );
+
+interface CrossSellsProducListProps {
+	crossSellsItems: CartResponseItem[];
+	isLoading: boolean;
+	className?: string;
+}
+
+const CartCrossSellsProductList = ( {
+	crossSellsItems = [],
+	isLoading = false,
+}: CrossSellsProducListProps ): JSX.Element => {
+	const products = isLoading
+		? placeholderRows
+		: crossSellsItems.map( ( crossSellsItem ) => {
+				return (
+					<CartCrossSellsItem
+						key={ crossSellsItem.key }
+						crossSellsItem={ crossSellsItem }
+					/>
+				);
+		  } );
+
+	return <>{ products }</>;
+};
+
+export default CartCrossSellsProductList;

assets/js/blocks/cart/inner-blocks/cart-cross-sells-products/block.tsx

@@ -1,10 +1,22 @@
-const Block = (): JSX.Element => {
-	const divStyle = {
-		border: '1px solid',
-		padding: '5px 10px',
-		textAlign: 'center',
-	};
-	return <div style={ divStyle }>CROSS SELLS PRODUCTS</div>;
+/**
+ * External dependencies
+ */
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+
+/**
+ * Internal dependencies
+ */
+import CartCrossSellsProductList from '../../cart-cross-sells-product-list';
+
+const Block = ( { className }: { className: string } ): JSX.Element => {
+	const { crossSellsItems, cartIsLoading } = useStoreCart();
+	return (
+		<CartCrossSellsProductList
+			className={ className }
+			crossSellsItems={ crossSellsItems }
+			isLoading={ cartIsLoading }
+		/>
+	);
 };
 
 export default Block;

assets/js/blocks/cart/inner-blocks/cart-cross-sells-products/edit.tsx

@@ -7,6 +7,7 @@ import { useBlockProps } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import Block from './block';
+import './editor.scss';
 
 export const Edit = ( {
 	attributes,

assets/js/blocks/cart/inner-blocks/cart-cross-sells-products/editor.scss

@@ -0,0 +1,36 @@
+.wp-block-woocommerce-cart-cross-sells-products-block {
+  display: flex;
+  flex-wrap: wrap;
+
+  div {
+    flex: 0 0 30%;
+    list-style: none;
+    padding-right: 5%;
+    text-align: center;
+
+    &:nth-child(3n + 3) {
+      padding-right: 0%;
+    }
+
+    a {
+      display: block;
+      color: unset;
+
+      .wc-block-components-product-name {
+        font-weight: 600;
+      }
+    }
+
+    .wc-block-components-product-add-to-cart-button:not(.is-link) {
+      background-color: #eeeeee;
+      color: #333333;
+      margin-top: 1em;
+
+      &:focus, &:hover {
+        background-color: #d5d5d5;
+        border-color: #d5d5d5;
+        color: #333333;
+      }
+    }
+  }
+}

assets/js/types/type-defs/hooks.ts

@@ -34,6 +34,7 @@ export interface StoreCartCoupon {
 export interface StoreCart {
 	cartCoupons: CartResponseCoupons;
 	cartItems: Array< CartResponseItem >;
+	crossSellsItems: Array< CartResponseItem >;
 	cartFees: Array< CartResponseFeeItem >;
 	cartItemsCount: number;
 	cartItemsWeight: number;