initial commit

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/block.json

@@ -0,0 +1,26 @@
+{
+	"name": "woocommerce/cart-express-payment-block",
+	"version": "1.0.0",
+	"title": "Express Checkout",
+	"description": "Provide an express payment option for your customers.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false,
+		"inserter": false
+	},
+	"attributes": {
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": true,
+				"move": true
+			}
+		}
+	},
+	"parent": [ "woocommerce/cart-totals-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/block.tsx

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { CartExpressPayment } from '../../../payment-methods';
+
+const Block = (): JSX.Element | null => {
+	const { cartNeedsPayment } = useStoreCart();
+
+	if ( ! cartNeedsPayment ) {
+		return null;
+	}
+
+	return (
+		<div className="wc-block-cart__payment-options">
+			<CartExpressPayment />
+		</div>
+	);
+};
+
+export default Block;

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/edit.tsx

@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useBlockProps } from '@wordpress/block-editor';
+import { Placeholder, Button } from 'wordpress-components';
+import { useExpressPaymentMethods } from '@woocommerce/base-context/hooks';
+import { Icon, card } from '@woocommerce/icons';
+import { ADMIN_URL } from '@woocommerce/settings';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import './editor.scss';
+
+/**
+ * Renders a placeholder in the editor.
+ */
+const NoExpressPaymentMethodsPlaceholder = () => {
+	return (
+		<Placeholder
+			icon={ <Icon srcElement={ card } /> }
+			label={ __( 'Express Checkout', 'woo-gutenberg-products-block' ) }
+			className="wp-block-woocommerce-checkout-express-payment-block-placeholder"
+		>
+			<span className="wp-block-woocommerce-checkout-express-payment-block-placeholder__description">
+				{ __(
+					"Your store doesn't have any Payment Methods that support the Express Checkout Block. If they are added, they will be shown here.",
+					'woo-gutenberg-products-block'
+				) }
+			</span>
+			<Button
+				isPrimary
+				href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=checkout` }
+				target="_blank"
+				rel="noopener noreferrer"
+				className="wp-block-woocommerce-checkout-express-payment-block-placeholder__button"
+			>
+				{ __(
+					'Configure Payment Methods',
+					'woo-gutenberg-products-block'
+				) }
+			</Button>
+		</Placeholder>
+	);
+};
+
+export const Edit = (): JSX.Element | null => {
+	const { paymentMethods, isInitialized } = useExpressPaymentMethods();
+	const hasExpressPaymentMethods = Object.keys( paymentMethods ).length > 0;
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			'wp-block-woocommerce-cart-express-payment-block--has-express-payment-methods': hasExpressPaymentMethods,
+		} ),
+	} );
+
+	if ( ! isInitialized ) {
+		return null;
+	}
+
+	return (
+		<div { ...blockProps }>
+			{ hasExpressPaymentMethods ? (
+				<Block />
+			) : (
+				<NoExpressPaymentMethodsPlaceholder />
+			) }
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/editor.scss

@@ -0,0 +1,29 @@
+// Adjust padding and margins in the editor to improve selected block outlines.
+.wp-block-woocommerce-cart-express-payment-block {
+	margin: 14px 0 28px;
+
+	.components-placeholder__label svg {
+		font-size: 1em;
+	}
+
+	.wc-block-components-express-payment-continue-rule--checkout {
+		margin-bottom: 0;
+	}
+
+	&.wp-block-woocommerce-cart-express-payment-block--has-express-payment-methods {
+		padding: 14px 0;
+		margin: -14px 0 14px 0 !important;
+		position: relative;
+	}
+}
+
+.wp-block-woocommerce-checkout-express-payment-block-placeholder {
+	* {
+		pointer-events: all; // Overrides parent disabled component in editor context
+	}
+
+	.wp-block-woocommerce-checkout-express-payment-block-placeholder__description {
+		display: block;
+		margin: 0 0 1em;
+	}
+}

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/index.tsx

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { Icon, card } from '@woocommerce/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: <Icon srcElement={ card } />,
+		foreground: '#874FB9',
+	},
+	edit: Edit,
+	save: Save,
+} );

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-items-block/block.json

@@ -0,0 +1,26 @@
+{
+	"name": "woocommerce/cart-items-block",
+	"version": "1.0.0",
+	"title": "Cart Items block",
+	"description": "Column containing cart items.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false,
+		"inserter": false
+	},
+	"attributes": {
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": true,
+				"move": true
+			}
+		}
+	},
+	"parent": [ "woocommerce/filled-cart-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-items-block/edit.tsx

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+import { Main } from '@woocommerce/base-components/sidebar-layout';
+import { innerBlockAreas } from '@woocommerce/blocks-checkout';
+
+/**
+ * Internal dependencies
+ */
+import { useForcedLayout } from '../../use-forced-layout';
+import { getAllowedBlocks } from '../../editor-utils';
+
+export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
+	const blockProps = useBlockProps();
+	const allowedBlocks = getAllowedBlocks( innerBlockAreas.CART_ITEMS );
+
+	useForcedLayout( {
+		clientId,
+		template: allowedBlocks,
+	} );
+	return (
+		<Main className="wc-block-cart__main">
+			<div { ...blockProps }>
+				<InnerBlocks
+					allowedBlocks={ allowedBlocks }
+					templateLock={ false }
+					renderAppender={ InnerBlocks.ButtonBlockAppender }
+				/>
+			</div>
+		</Main>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return (
+		<div { ...useBlockProps.save() }>
+			<InnerBlocks.Content />
+		</div>
+	);
+};

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-items-block/frontend.tsx

@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+import { Main } from '@woocommerce/base-components/sidebar-layout';
+
+const FrontendBlock = ( {
+	children,
+}: {
+	children: JSX.Element;
+} ): JSX.Element => {
+	return <Main className="wc-block-cart__main">{ children }</Main>;
+};
+
+export default FrontendBlock;

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-items-block/index.tsx

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { Icon, column } from '@wordpress/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: <Icon icon={ column } />,
+		foreground: '#874FB9',
+	},
+	edit: Edit,
+	save: Save,
+} );

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-line-items-block/block.json

@@ -0,0 +1,26 @@
+{
+	"name": "woocommerce/cart-line-items-block",
+	"version": "1.0.0",
+	"title": "Cart Line Items",
+	"description": "Block containing current line items in Cart.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false,
+		"inserter": false
+	},
+	"attributes": {
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": true,
+				"move": true
+			}
+		}
+	},
+	"parent": [ "woocommerce/cart-items-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-line-items-block/block.tsx

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+/**
+ * Internal dependencies
+ */
+import CartLineItemsTable from '../../full-cart/cart-line-items-table';
+
+const Block = (): JSX.Element => {
+	const { cartItems, cartIsLoading } = useStoreCart();
+	return (
+		<CartLineItemsTable
+			lineItems={ cartItems }
+			isLoading={ cartIsLoading }
+		/>
+	);
+};
+
+export default Block;

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-line-items-block/edit.tsx

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export const Edit = (): JSX.Element => {
+	const blockProps = useBlockProps();
+
+	return (
+		<div { ...blockProps }>
+			<Block />
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-line-items-block/index.tsx

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { Icon, column } from '@wordpress/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: <Icon icon={ column } />,
+		foreground: '#874FB9',
+	},
+	edit: Edit,
+	save: Save,
+} );

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-order-summary-block/attributes.tsx

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import { getSetting } from '@woocommerce/settings';
+
+export default {
+	showRateAfterTaxName: {
+		type: 'boolean',
+		default: getSetting( 'displayCartPricesIncludingTax', false ),
+	},
+	lock: {
+		type: 'object',
+		default: {
+			move: true,
+			remove: true,
+		},
+	},
+};

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-order-summary-block/block.json

@@ -0,0 +1,26 @@
+{
+	"name": "woocommerce/cart-order-summary-block",
+	"version": "1.0.0",
+	"title": "Order Summary",
+	"description": "Show customers a summary of their order.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false,
+		"inserter": false
+	},
+	"attributes": {
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": true,
+				"move": true
+			}
+		}
+	},
+	"parent": [ "woocommerce/cart-totals-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-order-summary-block/block.tsx

@@ -0,0 +1,121 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	TotalsCoupon,
+	TotalsDiscount,
+	TotalsFooterItem,
+	TotalsShipping,
+} from '@woocommerce/base-components/cart-checkout';
+import {
+	Subtotal,
+	TotalsFees,
+	TotalsTaxes,
+	TotalsWrapper,
+	ExperimentalOrderMeta,
+	ExperimentalDiscountsMeta,
+} from '@woocommerce/blocks-checkout';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+import {
+	useStoreCartCoupons,
+	useStoreCart,
+} from '@woocommerce/base-context/hooks';
+import { getSetting } from '@woocommerce/settings';
+import Title from '@woocommerce/base-components/title';
+
+/**
+ * Internal dependencies
+ */
+
+const Block = ( {
+	showRateAfterTaxName = false,
+	isShippingCalculatorEnabled = true,
+}: {
+	showRateAfterTaxName: boolean;
+	isShippingCalculatorEnabled: boolean;
+} ): JSX.Element => {
+	const { cartFees, cartTotals, cartNeedsShipping } = useStoreCart();
+
+	const {
+		applyCoupon,
+		removeCoupon,
+		isApplyingCoupon,
+		isRemovingCoupon,
+		appliedCoupons,
+	} = useStoreCartCoupons();
+
+	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
+
+	// Prepare props to pass to the ExperimentalOrderMeta slot fill.
+	// We need to pluck out receiveCart.
+	// eslint-disable-next-line no-unused-vars
+	const { extensions, ...cart } = useStoreCart();
+	const slotFillProps = {
+		extensions,
+		cart,
+	};
+
+	const discountsSlotFillProps = {
+		extensions,
+		cart,
+	};
+
+	return (
+		<>
+			<Title headingLevel="2" className="wc-block-cart__totals-title">
+				{ __( 'Cart totals', 'woo-gutenberg-products-block' ) }
+			</Title>
+			<TotalsWrapper>
+				<Subtotal currency={ totalsCurrency } values={ cartTotals } />
+				<TotalsFees currency={ totalsCurrency } cartFees={ cartFees } />
+				<TotalsDiscount
+					cartCoupons={ appliedCoupons }
+					currency={ totalsCurrency }
+					isRemovingCoupon={ isRemovingCoupon }
+					removeCoupon={ removeCoupon }
+					values={ cartTotals }
+				/>
+			</TotalsWrapper>
+			{ getSetting( 'couponsEnabled', true ) && (
+				<TotalsWrapper>
+					<TotalsCoupon
+						onSubmit={ applyCoupon }
+						isLoading={ isApplyingCoupon }
+					/>
+				</TotalsWrapper>
+			) }
+			<ExperimentalDiscountsMeta.Slot { ...discountsSlotFillProps } />
+			{ cartNeedsShipping && (
+				<TotalsWrapper>
+					<TotalsShipping
+						showCalculator={ isShippingCalculatorEnabled }
+						showRateSelector={ true }
+						values={ cartTotals }
+						currency={ totalsCurrency }
+					/>
+				</TotalsWrapper>
+			) }
+			{ ! getSetting( 'displayCartPricesIncludingTax', false ) &&
+				parseInt( cartTotals.total_tax, 10 ) > 0 && (
+					<TotalsWrapper>
+						<TotalsTaxes
+							showRateAfterTaxName={ showRateAfterTaxName }
+							currency={ totalsCurrency }
+							values={ cartTotals }
+						/>
+					</TotalsWrapper>
+				) }
+			<TotalsWrapper>
+				<TotalsFooterItem
+					currency={ totalsCurrency }
+					values={ cartTotals }
+				/>
+			</TotalsWrapper>
+
+			<ExperimentalOrderMeta.Slot { ...slotFillProps } />
+		</>
+	);
+};
+
+export default Block;

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-order-summary-block/edit.tsx

@@ -0,0 +1,109 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
+import { Disabled, PanelBody, ToggleControl } from '@wordpress/components';
+import { getSetting } from '@woocommerce/settings';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export const Edit = ( {
+	attributes,
+	setAttributes,
+}: {
+	attributes: {
+		showRateAfterTaxName: boolean;
+		isShippingCalculatorEnabled: boolean;
+		lock: {
+			move: boolean;
+			remove: boolean;
+		};
+	};
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ): JSX.Element => {
+	const { showRateAfterTaxName, isShippingCalculatorEnabled } = attributes;
+	const blockProps = useBlockProps();
+	const taxesEnabled = getSetting( 'taxesEnabled' ) as boolean;
+	const displayItemizedTaxes = getSetting(
+		'displayItemizedTaxes',
+		false
+	) as boolean;
+	const displayCartPricesIncludingTax = getSetting(
+		'displayCartPricesIncludingTax',
+		false
+	) as boolean;
+	return (
+		<div { ...blockProps }>
+			<InspectorControls>
+				{ getSetting( 'shippingEnabled', true ) && (
+					<PanelBody
+						title={ __(
+							'Shipping rates',
+							'woo-gutenberg-products-block'
+						) }
+					>
+						<ToggleControl
+							label={ __(
+								'Shipping calculator',
+								'woo-gutenberg-products-block'
+							) }
+							help={ __(
+								'Allow customers to estimate shipping by entering their address.',
+								'woo-gutenberg-products-block'
+							) }
+							checked={ isShippingCalculatorEnabled }
+							onChange={ () =>
+								setAttributes( {
+									isShippingCalculatorEnabled: ! isShippingCalculatorEnabled,
+								} )
+							}
+						/>
+					</PanelBody>
+				) }
+				{ taxesEnabled &&
+					displayItemizedTaxes &&
+					! displayCartPricesIncludingTax && (
+						<PanelBody
+							title={ __(
+								'Taxes',
+								'woo-gutenberg-products-block'
+							) }
+						>
+							<ToggleControl
+								label={ __(
+									'Show rate after tax name',
+									'woo-gutenberg-products-block'
+								) }
+								help={ __(
+									'Show the percentage rate alongside each tax line in the summary.',
+									'woo-gutenberg-products-block'
+								) }
+								checked={ showRateAfterTaxName }
+								onChange={ () =>
+									setAttributes( {
+										showRateAfterTaxName: ! showRateAfterTaxName,
+									} )
+								}
+							/>
+						</PanelBody>
+					) }
+			</InspectorControls>
+			<Disabled>
+				<Block
+					showRateAfterTaxName={ attributes.showRateAfterTaxName }
+					isShippingCalculatorEnabled={
+						attributes.isShippingCalculatorEnabled
+					}
+				/>
+			</Disabled>
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-order-summary-block/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { Icon, totals } from '@woocommerce/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import attributes from './attributes';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: <Icon srcElement={ totals } />,
+		foreground: '#874FB9',
+	},
+	attributes,
+	edit: Edit,
+	save: Save,
+} );

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-totals-block/block.json

@@ -0,0 +1,33 @@
+{
+	"name": "woocommerce/cart-totals-block",
+	"version": "1.0.0",
+	"title": "Cart Totals",
+	"description": "Column containing the cart totals.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false,
+		"inserter": false
+	},
+	"attributes": {
+		"checkbox": {
+			"type": "boolean",
+			"default": false
+		},
+		"text": {
+			"type": "string",
+			"required": false
+		},
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": true
+			}
+		}
+	},
+	"parent": [ "woocommerce/filled-cart-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-totals-block/edit.tsx

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+import { Sidebar } from '@woocommerce/base-components/sidebar-layout';
+import { innerBlockAreas } from '@woocommerce/blocks-checkout';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { useForcedLayout } from '../../use-forced-layout';
+import { getAllowedBlocks } from '../../editor-utils';
+
+export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
+	const blockProps = useBlockProps();
+	const allowedBlocks = getAllowedBlocks( innerBlockAreas.CART_TOTALS );
+
+	useForcedLayout( {
+		clientId,
+		template: allowedBlocks,
+	} );
+
+	return (
+		<Sidebar className="wc-block-cart__sidebar">
+			<div { ...blockProps }>
+				<InnerBlocks
+					allowedBlocks={ allowedBlocks }
+					templateLock={ false }
+				/>
+			</div>
+		</Sidebar>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return (
+		<div { ...useBlockProps.save() }>
+			<InnerBlocks.Content />
+		</div>
+	);
+};

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-totals-block/frontend.tsx

@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import { Sidebar } from '@woocommerce/base-components/sidebar-layout';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const FrontendBlock = ( {
+	children,
+}: {
+	children: JSX.Element;
+} ): JSX.Element => {
+	return <Sidebar className="wc-block-cart__sidebar">{ children }</Sidebar>;
+};
+
+export default FrontendBlock;

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-totals-block/index.tsx

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { Icon, column } from '@wordpress/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: <Icon icon={ column } />,
+		foreground: '#874FB9',
+	},
+	edit: Edit,
+	save: Save,
+} );

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-totals-block/style.scss

@@ -0,0 +1,8 @@
+.is-mobile,
+.is-small,
+.is-medium {
+	.wc-block-cart__sidebar {
+		margin-bottom: $gap-large;
+		order: 0;
+	}
+}

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/empty-cart-block/block.json

@@ -0,0 +1,26 @@
+{
+	"name": "woocommerce/empty-cart-block",
+	"version": "1.0.0",
+	"title": "Empty Cart",
+	"description": "Contains blocks that are displayed when the cart is empty.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false,
+		"inserter": false
+	},
+	"attributes": {
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": true,
+				"move": true
+			}
+		}
+	},
+	"parent": [ "woocommerce/cart-i2" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/empty-cart-block/edit.tsx

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+import { innerBlockAreas } from '@woocommerce/blocks-checkout';
+
+/**
+ * Internal dependencies
+ */
+import { useForcedLayout } from '../../use-forced-layout';
+import { getAllowedBlocks } from '../../editor-utils';
+import { useCartBlockContext } from '../../context';
+
+export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
+	const blockProps = useBlockProps();
+	const { currentView } = useCartBlockContext();
+	const allowedBlocks = getAllowedBlocks( innerBlockAreas.EMPTY_CART );
+
+	useForcedLayout( {
+		clientId,
+		template: allowedBlocks,
+	} );
+
+	return (
+		<div
+			{ ...blockProps }
+			hidden={ currentView !== 'woocommerce/empty-cart-block' }
+		>
+			This is the empty cart block.
+			<InnerBlocks
+				allowedBlocks={ allowedBlocks }
+				templateLock={ false }
+			/>
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return (
+		<div { ...useBlockProps.save() }>
+			<InnerBlocks.Content />
+		</div>
+	);
+};

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/empty-cart-block/frontend.tsx

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useEffect } from '@wordpress/element';
+import { dispatchEvent } from '@woocommerce/base-utils';
+
+const FrontendBlock = ( {
+	children,
+}: {
+	children: JSX.Element;
+} ): JSX.Element | null => {
+	const { cartItems, cartIsLoading } = useStoreCart();
+	useEffect( () => {
+		dispatchEvent( 'wc-blocks_render_blocks_frontend', {
+			element: document.body.querySelector(
+				'.wp-block-woocommerce-cart'
+			),
+		} );
+	}, [] );
+	if ( ! cartIsLoading && cartItems.length === 0 ) {
+		return <>{ children }</>;
+	}
+	return null;
+};
+
+export default FrontendBlock;

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/empty-cart-block/index.tsx

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { Icon, removeCart } from '@woocommerce/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: <Icon srcElement={ removeCart } />,
+		foreground: '#874FB9',
+	},
+	edit: Edit,
+	save: Save,
+} );

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/filled-cart-block/block.json

@@ -0,0 +1,26 @@
+{
+	"name": "woocommerce/filled-cart-block",
+	"version": "1.0.0",
+	"title": "Filled Cart",
+	"description": "Contains blocks that are displayed when the cart contains products.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false,
+		"inserter": false
+	},
+	"attributes": {
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": true,
+				"move": true
+			}
+		}
+	},
+	"parent": [ "woocommerce/cart-i2" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/filled-cart-block/edit.tsx

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+import { innerBlockAreas } from '@woocommerce/blocks-checkout';
+import { SidebarLayout } from '@woocommerce/base-components/sidebar-layout';
+
+/**
+ * Internal dependencies
+ */
+import { useForcedLayout } from '../../use-forced-layout';
+import { getAllowedBlocks } from '../../editor-utils';
+import { Columns } from './../../columns';
+import './editor.scss';
+import { useCartBlockContext } from '../../context';
+
+export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
+	const blockProps = useBlockProps();
+	const { currentView } = useCartBlockContext();
+	const allowedBlocks = getAllowedBlocks( innerBlockAreas.FILLED_CART );
+
+	useForcedLayout( {
+		clientId,
+		template: allowedBlocks,
+	} );
+	return (
+		<div
+			{ ...blockProps }
+			hidden={ currentView !== 'woocommerce/filled-cart-block' }
+		>
+			<Columns>
+				<SidebarLayout className={ 'wc-block-cart' }>
+					<InnerBlocks
+						allowedBlocks={ allowedBlocks }
+						templateLock={ false }
+					/>
+				</SidebarLayout>
+			</Columns>
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return (
+		<div { ...useBlockProps.save() }>
+			<InnerBlocks.Content />
+		</div>
+	);
+};

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/filled-cart-block/editor.scss

@@ -0,0 +1,23 @@
+.wp-block-woocommerce-filled-cart-block {
+	.wc-block-components-sidebar-layout {
+		display: block;
+	}
+	.block-editor-block-list__layout {
+		display: flex;
+		flex-flow: row wrap;
+		align-items: flex-start;
+	}
+	.wc-block-components-main,
+	.wc-block-components-sidebar,
+	.block-editor-block-list__layout {
+		> :first-child {
+			margin-top: 0;
+		}
+	}
+	.wp-block-woocommerce-cart-totals-block,
+	.wp-block-woocommerce-cart-items-block {
+		.block-editor-block-list__layout {
+			display: block;
+		}
+	}
+}

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/filled-cart-block/frontend.tsx

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { SidebarLayout } from '@woocommerce/base-components/sidebar-layout';
+import { useStoreCart, useStoreNotices } from '@woocommerce/base-context/hooks';
+import { useEffect } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+
+const FrontendBlock = ( {
+	children,
+}: {
+	children: JSX.Element;
+} ): JSX.Element | null => {
+	const { cartItems, cartIsLoading, cartItemErrors } = useStoreCart();
+	const { addErrorNotice } = useStoreNotices();
+
+	// Ensures any cart errors listed in the API response get shown.
+	useEffect( () => {
+		cartItemErrors.forEach( ( error ) => {
+			addErrorNotice( decodeEntities( error.message ), {
+				isDismissible: true,
+				id: error.code,
+			} );
+		} );
+	}, [ addErrorNotice, cartItemErrors ] );
+	// @todo pass attributes to inner most blocks.
+	const hasDarkControls = false;
+	if ( cartIsLoading || cartItems.length >= 1 ) {
+		return (
+			<SidebarLayout
+				className={ classnames( 'wc-block-cart', {
+					'has-dark-controls': hasDarkControls,
+				} ) }
+			>
+				{ children }
+			</SidebarLayout>
+		);
+	}
+	return null;
+};
+
+export default FrontendBlock;

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/filled-cart-block/index.tsx

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { Icon, filledCart } from '@woocommerce/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: <Icon srcElement={ filledCart } />,
+		foreground: '#874FB9',
+	},
+	edit: Edit,
+	save: Save,
+} );

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/index.tsx

@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import './filled-cart-block';
+import './cart-items-block';
+import './cart-line-items-block';
+import './cart-totals-block';
+import './cart-order-summary-block';
+import './cart-express-payment-block';
+import './proceed-to-checkout-block';
+import './empty-cart-block';

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/proceed-to-checkout-block/attributes.tsx

@@ -0,0 +1,13 @@
+export default {
+	checkoutPageId: {
+		type: 'number',
+		default: 0,
+	},
+	lock: {
+		type: 'object',
+		default: {
+			move: true,
+			remove: true,
+		},
+	},
+};

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/proceed-to-checkout-block/block.json

@@ -0,0 +1,25 @@
+{
+	"name": "woocommerce/proceed-to-checkout-block",
+	"version": "1.0.0",
+	"title": "Proceed to checkout",
+	"description": "Allow customers proceed to Checkout.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false,
+		"inserter": false
+	},
+	"attributes": {
+		"lock": {
+			"default": {
+				"remove": true,
+				"move": true
+			}
+		}
+	},
+	"parent": [ "woocommerce/cart-totals-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/proceed-to-checkout-block/block.tsx

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import { getSetting } from '@woocommerce/settings';
+
+/**
+ * Internal dependencies
+ */
+import CheckoutButton from '../../checkout-button';
+
+const Block = ( {
+	checkoutPageId,
+}: {
+	checkoutPageId: number;
+} ): JSX.Element => {
+	return (
+		<CheckoutButton
+			link={ getSetting( 'page-' + checkoutPageId, false ) }
+		/>
+	);
+};
+
+export default Block;

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/proceed-to-checkout-block/edit.tsx

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import PageSelector from '@woocommerce/editor-components/page-selector';
+import { Disabled } from '@wordpress/components';
+import { CART_PAGE_ID } from '@woocommerce/block-settings';
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+export const Edit = ( {
+	attributes,
+	setAttributes,
+}: {
+	attributes: {
+		checkoutPageId: number;
+	};
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ): JSX.Element => {
+	const blockProps = useBlockProps();
+	const { checkoutPageId = 0 } = attributes;
+	const { current: savedCheckoutPageId } = useRef( checkoutPageId );
+	const currentPostId = useSelect(
+		( select ) => {
+			if ( ! savedCheckoutPageId ) {
+				const store = select( 'core/editor' );
+				return store.getCurrentPostId();
+			}
+			return savedCheckoutPageId;
+		},
+		[ savedCheckoutPageId ]
+	);
+
+	return (
+		<div { ...blockProps }>
+			<InspectorControls>
+				{ ! (
+					currentPostId === CART_PAGE_ID && savedCheckoutPageId === 0
+				) && (
+					<PageSelector
+						pageId={ checkoutPageId }
+						setPageId={ ( id ) =>
+							setAttributes( { checkoutPageId: id } )
+						}
+						labels={ {
+							title: __(
+								'Proceed to Checkout button',
+								'woo-gutenberg-products-block'
+							),
+							default: __(
+								'WooCommerce Checkout Page',
+								'woo-gutenberg-products-block'
+							),
+						} }
+					/>
+				) }
+			</InspectorControls>
+			<Disabled>
+				<Block checkoutPageId={ checkoutPageId } />
+			</Disabled>
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/proceed-to-checkout-block/frontend.tsx

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import withFilteredAttributes from '@woocommerce/base-hocs/with-filtered-attributes';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import attributes from './attributes';
+
+export default withFilteredAttributes( attributes )( Block );

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/proceed-to-checkout-block/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { Icon, button } from '@wordpress/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import attributes from './attributes';
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: <Icon icon={ button } />,
+		foreground: '#874FB9',
+	},
+	attributes,
+	edit: Edit,
+	save: Save,
+} );

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/register-components.ts

@@ -0,0 +1,108 @@
+/**
+ * External dependencies
+ */
+import { lazy } from '@wordpress/element';
+import { WC_BLOCKS_BUILD_URL } from '@woocommerce/block-settings';
+import { registerCheckoutBlock } from '@woocommerce/blocks-checkout';
+
+// Modify webpack publicPath at runtime based on location of WordPress Plugin.
+// eslint-disable-next-line no-undef,camelcase
+__webpack_public_path__ = WC_BLOCKS_BUILD_URL;
+
+/**
+ * Internal dependencies
+ */
+import filledCartMetadata from './filled-cart-block/block.json';
+import emptyCartMetadata from './empty-cart-block/block.json';
+import cartItemsMetadata from './cart-items-block/block.json';
+import cartExpressPaymentMetadata from './cart-express-payment-block/block.json';
+import cartLineItemsMetadata from './cart-line-items-block/block.json';
+import cartOrderSummaryMetadata from './cart-order-summary-block/block.json';
+import cartTotalsMetadata from './cart-totals-block/block.json';
+import cartProceedToCheckoutMetadata from './proceed-to-checkout-block/block.json';
+
+registerCheckoutBlock( {
+	metadata: filledCartMetadata,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/filled-cart" */ './filled-cart-block/frontend'
+		)
+	),
+} );
+registerCheckoutBlock( {
+	metadata: emptyCartMetadata,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/empty-cart" */ './empty-cart-block/frontend'
+		)
+	),
+} );
+registerCheckoutBlock( {
+	metadata: filledCartMetadata,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/filled-cart" */ './filled-cart-block/frontend'
+		)
+	),
+} );
+registerCheckoutBlock( {
+	metadata: emptyCartMetadata,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/empty-cart" */ './empty-cart-block/frontend'
+		)
+	),
+} );
+registerCheckoutBlock( {
+	metadata: cartItemsMetadata,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/items" */ './cart-items-block/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: cartLineItemsMetadata,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/line-items" */ './cart-line-items-block/block'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: cartTotalsMetadata,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/totals" */ './cart-totals-block/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: cartOrderSummaryMetadata,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/order-summary" */ './cart-order-summary-block/block'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: cartExpressPaymentMetadata,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/express-payment" */ './cart-express-payment-block/block'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: cartProceedToCheckoutMetadata,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/checkout-button" */ './proceed-to-checkout-block/frontend'
+		)
+	),
+} );