Cart block: show products on backorder (https://github.com/woocommerce/woocommerce-blocks/pull/2833)

* Show backorder notice in the Cart block

* Don't render variation <div> if empty

* Create ProductBackorderNotification component

* Add product backorder notification to the checkout block

* Fix classname and comment

* Rename notification->badge and don't show low stock badge if backorder is shown

* Use ternary to dispaly backorder/low stock badge

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/index.js

@@ -4,6 +4,7 @@ export { default as FormStep } from './form-step';
 export { default as OrderSummary } from './order-summary';
 export { default as PlaceOrderButton } from './place-order-button';
 export { default as Policies } from './policies';
+export { default as ProductBackorderBadge } from './product-backorder-badge';
 export { default as ProductImage } from './product-image';
 export { default as ProductLowStockBadge } from './product-low-stock-badge';
 export { default as ProductSummary } from './product-summary';

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/order-summary-item.js

@@ -5,6 +5,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { getCurrency } from '@woocommerce/base-utils';
 import Label from '@woocommerce/base-components/label';
 import {
+	ProductBackorderBadge,
 	ProductImage,
 	ProductLowStockBadge,
 	ProductMetadata,
@@ -18,6 +19,7 @@ const OrderSummaryItem = ( { cartItem } ) => {
 	const {
 		images,
 		low_stock_remaining: lowStockRemaining = null,
+		show_backorder_badge: showBackorderBadge = false,
 		name,
 		permalink,
 		prices,
@@ -60,7 +62,15 @@ const OrderSummaryItem = ( { cartItem } ) => {
 						value={ linePrice }
 					/>
 				</div>
-				<ProductLowStockBadge lowStockRemaining={ lowStockRemaining } />
+				{ showBackorderBadge ? (
+					<ProductBackorderBadge />
+				) : (
+					lowStockRemaining && (
+						<ProductLowStockBadge
+							lowStockRemaining={ lowStockRemaining }
+						/>
+					)
+				) }
 				<ProductMetadata
 					shortDescription={ shortDescription }
 					fullDescription={ fullDescription }

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-backorder-badge/index.js

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ProductBadge from '../product-badge';
+
+/**
+ * Returns a backorder badge.
+ */
+const ProductBackorderBadge = () => {
+	return (
+		<ProductBadge className="wc-block-components-product-backorder-badge">
+			{ __( 'Available on backorder', 'woo-gutenberg-products-block' ) }
+		</ProductBadge>
+	);
+};
+
+export default ProductBackorderBadge;

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-badge/index.js

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const ProductBadge = ( { children, className } ) => {
+	return (
+		<div
+			className={ classNames(
+				'wc-block-components-product-badge',
+				className
+			) }
+		>
+			{ children }
+		</div>
+	);
+};
+
+ProductBadge.propTypes = {
+	className: PropTypes.string,
+};
+
+export default ProductBadge;

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-badge/style.scss

@@ -1,4 +1,4 @@
-.wc-block-components-sale-badge {
+.wc-block-components-product-badge {
 	@include font-size(smaller);
 	border-radius: 2px;
 	border: 1px solid;

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-low-stock-badge/index.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import './style.scss';
+import ProductBadge from '../product-badge';
 
 /**
  * Returns a low stock badge.
@@ -18,13 +18,13 @@ const ProductLowStockBadge = ( { lowStockRemaining } ) => {
 	}
 
 	return (
-		<div className="wc-block-components-product-low-stock-badge">
+		<ProductBadge className="wc-block-components-product-low-stock-badge">
 			{ sprintf(
 				/* translators: %d stock amount (number of items in stock for product) */
 				__( '%d left in stock', 'woo-gutenberg-products-block' ),
 				lowStockRemaining
 			) }
-		</div>
+		</ProductBadge>
 	);
 };
 

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-low-stock-badge/style.scss

@@ -1,10 +0,0 @@
-.wc-block-components-product-low-stock-badge {
-	@include font-size(smaller);
-	border-radius: 2px;
-	border: 1px solid;
-	display: inline-block;
-	font-weight: 600;
-	padding: 0 0.66em;
-	text-transform: uppercase;
-	white-space: nowrap;
-}

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-sale-badge/index.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import './style.scss';
+import ProductBadge from '../product-badge';
 
 /**
  * ProductSaleBadge
@@ -25,7 +25,7 @@ const ProductSaleBadge = ( { currency, saleAmount } ) => {
 		return null;
 	}
 	return (
-		<div className="wc-block-components-sale-badge">
+		<ProductBadge className="wc-block-components-sale-badge">
 			{ __experimentalCreateInterpolateElement(
 				/* translators: <price/> will be replaced by the discount amount */
 				__( 'Save <price/>', 'woo-gutenberg-products-block' ),
@@ -38,7 +38,7 @@ const ProductSaleBadge = ( { currency, saleAmount } ) => {
 					),
 				}
 			) }
-		</div>
+		</ProductBadge>
 	);
 };
 

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-variation-data/index.js

@@ -9,7 +9,7 @@ import classNames from 'classnames';
  * Returns a formatted element containing variation details.
  */
 const ProductVariationData = ( { className, variation = [] } ) => {
-	if ( ! variation ) {
+	if ( ! variation || variation.length === 0 ) {
 		return null;
 	}
 

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js

@@ -9,6 +9,7 @@ import { getCurrency } from '@woocommerce/base-utils';
 import { useStoreCartItemQuantity } from '@woocommerce/base-hooks';
 import { Icon, trash } from '@woocommerce/icons';
 import {
+	ProductBackorderBadge,
 	ProductImage,
 	ProductLowStockBadge,
 	ProductMetadata,
@@ -45,6 +46,7 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
 		short_description: shortDescription = '',
 		description: fullDescription = '',
 		low_stock_remaining: lowStockRemaining = null,
+		show_backorder_badge: showBackorderBadge = false,
 		quantity_limit: quantityLimit = 99,
 		permalink = '',
 		images = [],
@@ -111,7 +113,16 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
 					name={ name }
 					disabled={ isPendingDelete }
 				/>
-				<ProductLowStockBadge lowStockRemaining={ lowStockRemaining } />
+				{ showBackorderBadge ? (
+					<ProductBackorderBadge />
+				) : (
+					lowStockRemaining && (
+						<ProductLowStockBadge
+							lowStockRemaining={ lowStockRemaining }
+						/>
+					)
+				) }
+				{ showBackorderBadge && <ProductBackorderBadge /> }
 				<ProductMetadata
 					shortDescription={ shortDescription }
 					fullDescription={ fullDescription }

plugins/woocommerce-blocks/assets/js/previews/cart.js

@@ -35,6 +35,7 @@ export const previewCart = {
 			permalink: 'https://example.org',
 			low_stock_remaining: 2,
 			backorders_allowed: false,
+			show_backorder_badge: false,
 			sold_individually: false,
 			images: [
 				{
@@ -103,6 +104,7 @@ export const previewCart = {
 			sku: 'woo-cap',
 			permalink: 'https://example.org',
 			backorders_allowed: false,
+			show_backorder_badge: false,
 			sold_individually: false,
 			images: [
 				{

plugins/woocommerce-blocks/assets/js/type-defs/cart.js

@@ -143,6 +143,10 @@
  * @property {boolean}             backorders_allowed  True if backorders are
  *                                                     allowed past stock
  *                                                     availability.
+ * @property {boolean}             show_backorder_badge  Whether a notification
+ *                                                     should be shown about the
+ *                                                     product being available on
+ *                                                     backorder.
  * @property {boolean}             sold_individually   If true, only one item of
  *                                                     this product is allowed
  *                                                     for purchase in a single

plugins/woocommerce-blocks/src/StoreApi/Schemas/CartItemSchema.php

@@ -105,6 +105,12 @@ class CartItemSchema extends ProductSchema {
 				'context'     => [ 'view', 'edit' ],
 				'readonly'    => true,
 			],
+			'show_backorder_badge' => [
+				'description' => __( 'True if the product is on backorder.', 'woo-gutenberg-products-block' ),
+				'type'        => [ 'boolean' ],
+				'context'     => [ 'view', 'edit' ],
+				'readonly'    => true,
+			],
 			'sold_individually'    => [
 				'description' => __( 'If true, only one item of this product is allowed for purchase in a single order.', 'woo-gutenberg-products-block' ),
 				'type'        => 'boolean',
@@ -290,6 +296,7 @@ class CartItemSchema extends ProductSchema {
 			'sku'                  => $this->prepare_html_response( $product->get_sku() ),
 			'low_stock_remaining'  => $this->get_low_stock_remaining( $product ),
 			'backorders_allowed'   => (bool) $product->backorders_allowed(),
+			'show_backorder_badge' => (bool) $product->backorders_require_notification() && $product->is_on_backorder( $cart_item['quantity'] ),
 			'sold_individually'    => $product->is_sold_individually(),
 			'permalink'            => $product->get_permalink(),
 			'images'               => $this->get_images( $product ),

plugins/woocommerce-blocks/src/StoreApi/docs/cart-items.md

@@ -35,6 +35,7 @@ curl "https://example-store.com/wp-json/wc/store/cart/items"
     "sku": "woo-beanie",
     "low_stock_remaining": null,
     "backorders_allowed": false,
+    "show_backorder_badge": false,
     "sold_individually": false,
     "permalink": "https:\/\/local.wordpress.test\/product\/beanie\/",
     "images": [
@@ -106,6 +107,7 @@ curl "https://example-store.com/wp-json/wc/store/cart/items"
     "sku": "wp-pennant",
     "low_stock_remaining": null,
     "backorders_allowed": false,
+    "show_backorder_badge": false,
     "sold_individually": false,
     "permalink": "https:\/\/local.wordpress.test\/product\/wordpress-pennant\/",
     "images": [
@@ -199,6 +201,7 @@ curl "https://example-store.com/wp-json/wc/store/cart/items/e369853df766fa44e1ed
   "sku": "wp-pennant",
   "low_stock_remaining": null,
   "backorders_allowed": false,
+  "show_backorder_badge": false,
   "sold_individually": false,
   "permalink": "https:\/\/local.wordpress.test\/product\/wordpress-pennant\/",
   "images": [

plugins/woocommerce-blocks/src/StoreApi/docs/cart.md

@@ -115,6 +115,7 @@ All endpoints under `/cart` (listed in this doc) return responses in the same fo
       "sku": "woo-beanie",
       "low_stock_remaining": null,
       "backorders_allowed": false,
+      "show_backorder_badge": false,
       "sold_individually": false,
       "permalink": "https:\/\/local.wordpress.test\/product\/beanie\/",
       "images": [
@@ -174,6 +175,7 @@ All endpoints under `/cart` (listed in this doc) return responses in the same fo
       "sku": "wp-pennant",
       "low_stock_remaining": null,
       "backorders_allowed": false,
+      "show_backorder_badge": false,
       "sold_individually": false,
       "permalink": "https:\/\/local.wordpress.test\/product\/wordpress-pennant\/",
       "images": [

plugins/woocommerce-blocks/tests/php/StoreApi/Routes/CartItems.php

@@ -229,6 +229,7 @@ class CartItems extends TestCase {
 		$this->assertArrayHasKey( 'variation', $data );
 		$this->assertArrayHasKey( 'low_stock_remaining', $data );
 		$this->assertArrayHasKey( 'backorders_allowed', $data );
+		$this->assertArrayHasKey( 'show_backorder_badge', $data );
 		$this->assertArrayHasKey( 'short_description', $data );
 	}