initial commit

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,
+} );