Use product components as internal dependencies

assets/js/atomic/blocks/product-elements/price/block.js

@@ -28,7 +28,7 @@ import {
  *                                   context will be used if this is not provided.
  * @return {*} The component.
  */
-const Block = ( props ) => {
+export const Block = ( props ) => {
 	const { className, textAlign } = props;
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();

assets/js/atomic/blocks/product-elements/rating/block.js

@@ -27,7 +27,7 @@ import {
  * @param {string} [props.className] CSS Class name for the component.
  * @return {*} The component.
  */
-const Block = ( props ) => {
+export const Block = ( props ) => {
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
 	const rating = getAverageRating( product );

assets/js/atomic/blocks/product-elements/sale-badge/block.js

@@ -30,7 +30,7 @@ import {
  * @param {string} [props.align]     Alignment of the badge.
  * @return {*} The component.
  */
-const Block = ( props ) => {
+export const Block = ( props ) => {
 	const { className, align } = props;
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();

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

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

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

@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import {
+	InnerBlockLayoutContextProvider,
+	ProductDataContextProvider,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { ProductResponseItem } from '@woocommerce/type-defs/product-response';
+
+/**
+ * Internal dependencies
+ */
+import { Block as ProductImage } from '../../../atomic/blocks/product-elements/image/block';
+import { Block as ProductName } from '../../../atomic/blocks/product-elements/title/block';
+import { Block as ProductRating } from '../../../atomic/blocks/product-elements/rating/block';
+import { Block as ProductSaleBadge } from '../../../atomic/blocks/product-elements/sale-badge/block';
+import { Block as ProductPrice } from '../../../atomic/blocks/product-elements/price/block';
+import { AddToCartButton } from '../../../atomic/blocks/product-elements/add-to-cart/shared';
+
+interface CrossSellsProducProps {
+	crossSellsProduct: ProductResponseItem;
+	isLoading: boolean;
+}
+
+const CartCrossSellsProduct = ( {
+	crossSellsProduct,
+	isLoading,
+}: CrossSellsProducProps ): JSX.Element => {
+	const { product } = useProductDataContext();
+	const { permalink } = product;
+
+	return (
+		<div>
+			<InnerBlockLayoutContextProvider
+				parentName={ 'woocommerce/cart-cross-sells-block' }
+				parentClassName={ 'wp-block-cart-cross-sells-product' }
+			>
+				<ProductDataContextProvider
+					product={ crossSellsProduct }
+					isLoading={ isLoading }
+				>
+					<a href={ permalink }>
+						<ProductImage />
+						<ProductName />
+						<ProductRating />
+						<ProductSaleBadge product={ product } />
+						<ProductPrice />
+					</a>
+					<AddToCartButton />
+				</ProductDataContextProvider>
+			</InnerBlockLayoutContextProvider>
+		</div>
+	);
+};
+
+export default CartCrossSellsProduct;

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

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

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

@@ -9,11 +9,11 @@ import { useStoreCart } from '@woocommerce/base-context/hooks';
 import CartCrossSellsProductList from '../../cart-cross-sells-product-list';
 
 const Block = ( { className }: { className: string } ): JSX.Element => {
-	const { crossSellsItems, cartIsLoading } = useStoreCart();
+	const { crossSellsProducts, cartIsLoading } = useStoreCart();
 	return (
 		<CartCrossSellsProductList
+			crossSellsProducts={ crossSellsProducts }
 			className={ className }
-			crossSellsItems={ crossSellsItems }
 			isLoading={ cartIsLoading }
 		/>
 	);

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

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