initial commit

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/empty-cart/index.js

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { SHOP_URL } from '@woocommerce/block-settings';
+import { Icon, cart } from '@woocommerce/icons';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const EmptyCart = () => {
+	return (
+		<div className="wc-block-checkout-empty">
+			<Icon
+				className="wc-block-checkout-empty__image"
+				alt=""
+				srcElement={ cart }
+				size={ 100 }
+			/>
+			<strong className="wc-block-checkout-empty__title">
+				{ __( 'Your cart is empty!', 'woocommerce' ) }
+			</strong>
+			<p className="wc-block-checkout-empty__description">
+				{ __(
+					"Checkout is not available whilst your cart is empty—please take a look through our store and come back when you're ready to place an order.",
+					'woocommerce'
+				) }
+			</p>
+			{ SHOP_URL && (
+				<span className="wp-block-button">
+					<a href={ SHOP_URL } className="wp-block-button__link">
+						{ __( 'Browse store', 'woocommerce' ) }
+					</a>
+				</span>
+			) }
+		</div>
+	);
+};
+
+export default EmptyCart;

packages/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/empty-cart/style.scss

@@ -0,0 +1,21 @@
+.wc-block-checkout-empty {
+	padding: $gap-largest;
+	text-align: center;
+	width: 100%;
+
+	.wc-block-checkout-empty__image {
+		max-width: 150px;
+		margin: 0 auto 1em;
+		display: block;
+		color: inherit;
+	}
+	.wc-block-checkout-empty__title {
+		display: block;
+		margin: 0;
+		font-weight: bold;
+	}
+	.wc-block-checkout-empty__description {
+		display: block;
+		margin: 0.25em 0 1em 0;
+	}
+}