Create Cross-Sells product list

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

@@ -25,7 +25,7 @@ import { withProductDataContext } from '@woocommerce/shared-hocs';
  *                                   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 './style.scss';
  * @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 './style.scss';
  * @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/test/use-store-cart.js

@@ -30,6 +30,7 @@ describe( 'useStoreCart', () => {
 	const previewCartData = {
 		cartCoupons: previewCart.coupons,
 		cartItems: previewCart.items,
+		crossSellsProducts: previewCart.cross_sells,
 		cartFees: previewCart.fees,
 		cartItemsCount: previewCart.items_count,
 		cartItemsWeight: previewCart.items_weight,

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

@@ -9,6 +9,7 @@ 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,
@@ -99,6 +100,7 @@ export const defaultCartData: StoreCart = {
 	cartFees: EMPTY_CART_FEES,
 	cartItemsCount: 0,
 	cartItemsWeight: 0,
+	crossSellsProducts: EMPTY_CART_CROSS_SELLS,
 	cartNeedsPayment: true,
 	cartNeedsShipping: true,
 	cartItemErrors: EMPTY_CART_ITEM_ERRORS,
@@ -150,6 +152,7 @@ export const useStoreCart = (
 				return {
 					cartCoupons: previewCart.coupons,
 					cartItems: previewCart.items,
+					crossSellsProducts: previewCart.cross_sells,
 					cartFees: previewCart.fees,
 					cartItemsCount: previewCart.items_count,
 					cartItemsWeight: previewCart.items_weight,
@@ -211,6 +214,7 @@ export const useStoreCart = (
 			return {
 				cartCoupons,
 				cartItems: cartData.items,
+				crossSellsProducts: cartData.crossSells,
 				cartFees,
 				cartItemsCount: cartData.itemsCount,
 				cartItemsWeight: cartData.itemsWeight,

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

@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import {
+	InnerBlockLayoutContextProvider,
+	ProductDataContextProvider,
+} 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/block';
+
+interface CrossSellsProductProps {
+	crossSellsProduct: ProductResponseItem;
+	isLoading: boolean;
+}
+
+const CartCrossSellsProduct = ( {
+	crossSellsProduct,
+	isLoading,
+}: CrossSellsProductProps ): JSX.Element => {
+	return (
+		<div className="cross-sells-product">
+			<InnerBlockLayoutContextProvider
+				parentName={ 'woocommerce/cart-cross-sells-block' }
+				parentClassName={ 'wp-block-cart-cross-sells-product' }
+			>
+				<ProductDataContextProvider
+					product={ crossSellsProduct }
+					isLoading={ isLoading }
+				>
+					<div>
+						<ProductImage />
+						<ProductName />
+						<ProductRating />
+						<ProductSaleBadge />
+						<ProductPrice />
+					</div>
+					<AddToCartButton />
+				</ProductDataContextProvider>
+			</InnerBlockLayoutContextProvider>
+		</div>
+	);
+};
+
+export default CartCrossSellsProduct;

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

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import { ProductResponseItem } from '@woocommerce/type-defs/product-response';
+
+/**
+ * Internal dependencies
+ */
+import CartCrossSellsProduct from './cart-cross-sells-product';
+
+const placeholderRows = [ ...Array( 3 ) ].map( ( _x, i ) => (
+	<CartCrossSellsProduct crossSellsProduct={ {} } key={ i } />
+) );
+
+interface CrossSellsProductListProps {
+	crossSellsProducts: ProductResponseItem[];
+	isLoading: boolean;
+	className?: string;
+	columns: number;
+}
+
+const CartCrossSellsProductList = ( {
+	crossSellsProducts,
+	isLoading = false,
+	columns,
+}: CrossSellsProductListProps ): JSX.Element => {
+	const products = isLoading
+		? placeholderRows
+		: crossSellsProducts.map( ( crossSellsProduct, i ) => {
+				if ( i >= columns ) return null;
+
+				return (
+					<CartCrossSellsProduct
+						crossSellsProduct={ crossSellsProduct }
+						isLoading={ isLoading }
+						key={ crossSellsProduct.id }
+					/>
+				);
+		  } );
+
+	return <div>{ products }</div>;
+};
+
+export default CartCrossSellsProductList;

assets/js/blocks/cart/inner-blocks/cart-cross-sells-block/block.json

@@ -0,0 +1,17 @@
+{
+	"name": "woocommerce/cart-cross-sells-block",
+	"version": "1.0.0",
+	"title": "Cart Cross-Sells block",
+	"description": "Shows the Cross-Sells block.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false,
+		"inserter": true
+	},
+	"parent": [ "woocommerce/cart-items-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}

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

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import type { TemplateArray } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+
+export const Edit = (): JSX.Element => {
+	const blockProps = useBlockProps( {
+		className: 'wc-block-cart__cross-sells',
+	} );
+	const defaultTemplate = [
+		[
+			'core/heading',
+			{
+				content: __(
+					'You may be interested in…',
+					'woo-gutenberg-products-block'
+				),
+				level: 3,
+			},
+			,
+			[],
+		],
+		[ 'woocommerce/cart-cross-sells-products-block', {}, [] ],
+	] as TemplateArray;
+
+	return (
+		<div { ...blockProps }>
+			<InnerBlocks template={ defaultTemplate } templateLock={ false } />
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return (
+		<div { ...useBlockProps.save() }>
+			<InnerBlocks.Content />
+		</div>
+	);
+};

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

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+
+interface Props {
+	children?: JSX.Element | JSX.Element[];
+	className?: string;
+}
+
+const FrontendBlock = ( {
+	children,
+	className = '',
+}: Props ): JSX.Element | null => {
+	const { crossSellsProducts, cartIsLoading } = useStoreCart();
+
+	if ( cartIsLoading || crossSellsProducts.length < 1 ) {
+		return null;
+	}
+
+	return <div className={ className }>{ children }</div>;
+};
+
+export default FrontendBlock;

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

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { Icon, column } from '@wordpress/icons';
+import { registerExperimentalBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerExperimentalBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ column }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	edit: Edit,
+	save: Save,
+} );

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

@@ -0,0 +1,23 @@
+{
+	"name": "woocommerce/cart-cross-sells-products-block",
+	"version": "1.0.0",
+	"title": "Cart Cross-Sells products",
+	"description": "Shows the Cross-Sells products.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false,
+		"inserter": false
+	},
+	"attributes": {
+		"columns": {
+			"type": "number",
+			"default": 3
+		}
+	},
+	"parent": [ "woocommerce/cart-cross-sells-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}

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

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+
+/**
+ * Internal dependencies
+ */
+import CartCrossSellsProductList from '../../cart-cross-sells-product-list';
+import metadata from './block.json';
+
+interface BlockProps {
+	className?: string;
+	columns: number;
+}
+
+const Block = ( { className, columns }: BlockProps ): JSX.Element => {
+	const { crossSellsProducts, cartIsLoading } = useStoreCart();
+
+	if ( typeof columns === 'undefined' ) {
+		columns = metadata.attributes.columns.default;
+	}
+
+	return (
+		<CartCrossSellsProductList
+			className={ className }
+			columns={ columns }
+			crossSellsProducts={ crossSellsProducts }
+			isLoading={ cartIsLoading }
+		/>
+	);
+};
+
+export default Block;

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

@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { PanelBody, RangeControl } from '@wordpress/components';
+import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
+import { getSetting } from '@woocommerce/settings';
+import Noninteractive from '@woocommerce/base-components/noninteractive';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import './editor.scss';
+
+interface Attributes {
+	className?: string;
+	columns: number;
+}
+
+interface Props {
+	attributes: Attributes;
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+}
+
+export const Edit = ( { attributes, setAttributes }: Props ): JSX.Element => {
+	const { className, columns } = attributes;
+	const blockProps = useBlockProps();
+
+	return (
+		<div { ...blockProps }>
+			<InspectorControls>
+				<PanelBody
+					title={ __( 'Settings', 'woo-gutenberg-products-block' ) }
+				>
+					<RangeControl
+						label={ __(
+							'Cross-Sells products to show',
+							'woo-gutenberg-products-block'
+						) }
+						value={ columns }
+						onChange={ ( value ) =>
+							setAttributes( { columns: value } )
+						}
+						min={ getSetting( 'min_columns', 1 ) }
+						max={ getSetting( 'max_columns', 6 ) }
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<Noninteractive>
+				<Block columns={ columns } className={ className } />
+			</Noninteractive>
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};