Add subtotal and sale badge filters - PR to correct branch (https://github.com/woocommerce/woocommerce-blocks/pull/3826)

* Replace filters with an extendibility API to hook into Cart and Checkout blocks

* Update docs

* Add a validate argument

* Add docs comments

* Add tests

* Add validation function

* Prefix validateElementOrString with __experimental

* Update experimental docs

* Typo

* Update comment

* Update JS docs

* Use an object for applyCheckoutFilter args

* Args doesn't need to be an object

* Wrap validation function execution in a try/catch block

* Only accept strings for the totalLabel filter

* Change applyCheckoutFilter signature

* Apply filters for subtotal and sale badge in CartLineItemRow

* Append suffix to prices and SaleBadge if passed in as a prop

* Add subtotal filter to OrderSummaryItem

* Add tests for OrderSummaryItem and ProductPrice

* Rename test for ProductPrice

* Update checkout filter registration plugin name

* Remove obsolete snapshop

* Remove suffix and change to format

This is because we want to make the entire price string editable, not just the part after it.

* Change formatting on SaleBadge to use createInterpolateElement

* Remove tests that are no longer needed.

* Update ProductPrice tests to reflect changes to format prop

* Check that subtotalPriceFormat contains <price/> in OrderSummaryItem

* Fix cart block styling to stop badges overflowing the container

* Add <price/> placeholder in OrderSummaryItem price filter

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

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

@@ -8,6 +8,7 @@ import ProductName from '@woocommerce/base-components/product-name';
 import { getCurrency } from '@woocommerce/price-format';
 import PropTypes from 'prop-types';
 import Dinero from 'dinero.js';
+import { __experimentalApplyCheckoutFilter } from '@woocommerce/blocks-checkout';
 
 /**
  * Internal dependencies
@@ -50,6 +51,16 @@ const OrderSummaryItem = ( { cartItem } ) => {
 		.multiply( quantity )
 		.convertPrecision( currency.minorUnit )
 		.getAmount();
+	const subtotalPriceFormat = __experimentalApplyCheckoutFilter( {
+		filterName: 'subtotalPriceFormat',
+		defaultValue: '<price/>',
+		arg: {
+			lineItem: cartItem,
+		},
+		// Only accept strings.
+		validation: ( value ) =>
+			typeof value === 'string' && value.includes( '<price/>' ),
+	} );
 
 	return (
 		<div className="wc-block-components-order-summary-item">
@@ -79,6 +90,7 @@ const OrderSummaryItem = ( { cartItem } ) => {
 					className="wc-block-components-order-summary-item__individual-prices"
 					priceClassName="wc-block-components-order-summary-item__individual-price"
 					regularPriceClassName="wc-block-components-order-summary-item__regular-individual-price"
+					format={ subtotalPriceFormat }
 				/>
 				{ showBackorderBadge ? (
 					<ProductBackorderBadge />

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { createInterpolateElement } from 'wordpress-element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
 import PropTypes from 'prop-types';
 
@@ -17,27 +17,35 @@ import ProductBadge from '../product-badge';
  * @param {Object} props            Incoming props.
  * @param {Object} props.currency   Currency object.
  * @param {number} props.saleAmount Discounted amount.
- *
+ * @param {string} [props.format]   Format to change the price.
  * @return {*} The component.
  */
-const ProductSaleBadge = ( { currency, saleAmount } ) => {
+const ProductSaleBadge = ( { currency, saleAmount, format = '<price/>' } ) => {
 	if ( ! saleAmount || saleAmount <= 0 ) {
 		return null;
 	}
+	if ( ! format.includes( '<price/>' ) ) {
+		format = '<price/>';
+		// eslint-disable-next-line no-console
+		console.error( 'Price formats need to include the `<price/>` tag.' );
+	}
+
+	const formattedMessage = sprintf(
+		/* translators: %s will be replaced by the discount amount */
+		__( `Save %s`, 'woo-gutenberg-products-block' ),
+		format
+	);
+
 	return (
 		<ProductBadge className="wc-block-components-sale-badge">
-			{ createInterpolateElement(
-				/* translators: <price/> will be replaced by the discount amount */
-				__( 'Save <price/>', 'woo-gutenberg-products-block' ),
-				{
-					price: (
-						<FormattedMonetaryAmount
-							currency={ currency }
-							value={ saleAmount }
-						/>
-					),
-				}
-			) }
+			{ createInterpolateElement( formattedMessage, {
+				price: (
+					<FormattedMonetaryAmount
+						currency={ currency }
+						value={ saleAmount }
+					/>
+				),
+			} ) }
 		</ProductBadge>
 	);
 };

plugins/woocommerce-blocks/assets/js/base/components/product-price/index.js

@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import { createInterpolateElement } from 'wordpress-element';
 
 /**
  * Internal dependencies
@@ -12,7 +13,6 @@ import PropTypes from 'prop-types';
 import './style.scss';
 
 const PriceRange = ( {
-	className,
 	currency,
 	maxPrice,
 	minPrice,
@@ -20,7 +20,7 @@ const PriceRange = ( {
 	priceStyle,
 } ) => {
 	return (
-		<span className={ className }>
+		<>
 			<FormattedMonetaryAmount
 				className={ classNames(
 					'wc-block-components-product-price__value',
@@ -40,12 +40,11 @@ const PriceRange = ( {
 				value={ maxPrice }
 				style={ priceStyle }
 			/>
-		</span>
+		</>
 	);
 };
 
 const SalePrice = ( {
-	className,
 	currency,
 	regularPriceClassName,
 	regularPriceStyle,
@@ -55,7 +54,7 @@ const SalePrice = ( {
 	price,
 } ) => {
 	return (
-		<span className={ className }>
+		<>
 			<span className="screen-reader-text">
 				{ __( 'Previous price:', 'woo-gutenberg-products-block' ) }
 			</span>
@@ -93,7 +92,7 @@ const SalePrice = ( {
 				) }
 				value={ price }
 			/>
-		</span>
+		</>
 	);
 };
 
@@ -101,6 +100,7 @@ const ProductPrice = ( {
 	align,
 	className,
 	currency,
+	format = '<price/>',
 	maxPrice = null,
 	minPrice = null,
 	price = null,
@@ -119,12 +119,26 @@ const ProductPrice = ( {
 		}
 	);
 
+	if ( ! format.includes( '<price/>' ) ) {
+		format = '<price/>';
+		// eslint-disable-next-line no-console
+		console.error( 'Price formats need to include the `<price/>` tag.' );
+	}
+
 	const isDiscounted = regularPrice && price !== regularPrice;
 
+	let priceComponent = (
+		<span
+			className={ classNames(
+				'wc-block-components-product-price__value',
+				priceClassName
+			) }
+		/>
+	);
+
 	if ( isDiscounted ) {
-		return (
+		priceComponent = (
 			<SalePrice
-				className={ wrapperClassName }
 				currency={ currency }
 				price={ price }
 				priceClassName={ priceClassName }
@@ -137,9 +151,8 @@ const ProductPrice = ( {
 	}
 
 	if ( minPrice !== null && maxPrice !== null ) {
-		return (
+		priceComponent = (
 			<PriceRange
-				className={ wrapperClassName }
 				currency={ currency }
 				maxPrice={ maxPrice }
 				minPrice={ minPrice }
@@ -150,29 +163,24 @@ const ProductPrice = ( {
 	}
 
 	if ( price !== null ) {
-		return (
-			<span className={ wrapperClassName }>
-				<FormattedMonetaryAmount
-					className={ classNames(
-						'wc-block-components-product-price__value',
-						priceClassName
-					) }
-					currency={ currency }
-					value={ price }
-					style={ priceStyle }
-				/>
-			</span>
+		priceComponent = (
+			<FormattedMonetaryAmount
+				className={ classNames(
+					'wc-block-components-product-price__value',
+					priceClassName
+				) }
+				currency={ currency }
+				value={ price }
+				style={ priceStyle }
+			/>
 		);
 	}
 
 	return (
 		<span className={ wrapperClassName }>
-			<span
-				className={ classNames(
-					'wc-block-components-product-price__value',
-					priceClassName
-				) }
-			/>
+			{ createInterpolateElement( format, {
+				price: priceComponent,
+			} ) }
 		</span>
 	);
 };
@@ -181,6 +189,7 @@ ProductPrice.propTypes = {
 	align: PropTypes.oneOf( [ 'left', 'center', 'right' ] ),
 	className: PropTypes.string,
 	currency: PropTypes.object,
+	format: PropTypes.string,
 	price: PropTypes.oneOfType( [ PropTypes.number, PropTypes.string ] ),
 	priceClassName: PropTypes.string,
 	priceStyle: PropTypes.object,

plugins/woocommerce-blocks/assets/js/base/components/product-price/test/__snapshots__/index.js.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProductPrice should apply the format if one is provided 1`] = `
+<span
+  className="price wc-block-components-product-price"
+>
+  pre price 
+  <span
+    className="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-product-price__value"
+  >
+    £0.50
+  </span>
+   Test format
+</span>
+`;
+
+exports[`ProductPrice should use default price if no format is provided 1`] = `
+<span
+  className="price wc-block-components-product-price"
+>
+  <span
+    className="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-product-price__value"
+  >
+    £0.50
+  </span>
+</span>
+`;

plugins/woocommerce-blocks/assets/js/base/components/product-price/test/index.js

@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import TestRenderer from 'react-test-renderer';
+
+/**
+ * Internal dependencies
+ */
+import ProductPrice from '../index';
+
+describe( 'ProductPrice', () => {
+	const currency = {
+		code: 'GBP',
+		currency_code: 'GBP',
+		currency_decimal_separator: '.',
+		currency_minor_unit: 2,
+		currency_prefix: '£',
+		currency_suffix: '',
+		currency_symbol: '£',
+		currency_thousand_separator: ',',
+		decimalSeparator: '.',
+		minorUnit: 2,
+		prefix: '£',
+		price: '61400',
+		price_range: null,
+		raw_prices: {
+			precision: 6,
+			price: '614000000',
+			regular_price: '614000000',
+			sale_price: '614000000',
+		},
+		regular_price: '61400',
+		sale_price: '61400',
+		suffix: '',
+		symbol: '£',
+		thousandSeparator: ',',
+	};
+
+	test( 'should use default price if no format is provided', () => {
+		const component = TestRenderer.create(
+			<ProductPrice
+				price={ 50 }
+				regularPrice={ 100 }
+				currency={ currency }
+			/>
+		);
+
+		expect( component.toJSON() ).toMatchSnapshot();
+	} );
+
+	test( 'should apply the format if one is provided', () => {
+		const component = TestRenderer.create(
+			<ProductPrice
+				price={ 50 }
+				regularPrice={ 100 }
+				currency={ currency }
+				format="pre price <price/> Test format"
+			/>
+		);
+
+		expect( component.toJSON() ).toMatchSnapshot();
+	} );
+} );

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

@@ -17,6 +17,7 @@ import {
 } from '@woocommerce/base-components/cart-checkout';
 import { getCurrency } from '@woocommerce/price-format';
 import Dinero from 'dinero.js';
+import { __experimentalApplyCheckoutFilter } from '@woocommerce/blocks-checkout';
 
 /**
  * @typedef {import('@woocommerce/type-defs/cart').CartItem} CartItem
@@ -99,6 +100,27 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
 	const isProductHiddenFromCatalog =
 		catalogVisibility === 'hidden' || catalogVisibility === 'search';
 
+	const subtotalPriceFormat = __experimentalApplyCheckoutFilter( {
+		filterName: 'subtotalPriceFormat',
+		defaultValue: '<price/>',
+		arg: {
+			lineItem,
+		},
+		// Only accept strings.
+		validation: ( value ) =>
+			typeof value === 'string' && value.includes( '<price/>' ),
+	} );
+	const saleBadgePriceFormat = __experimentalApplyCheckoutFilter( {
+		filterName: 'saleBadgePriceFormat',
+		defaultValue: '<price/>',
+		arg: {
+			lineItem,
+		},
+		// Only accept strings.
+		validation: ( value ) =>
+			typeof value === 'string' && value.includes( '<price/>' ),
+	} );
+
 	return (
 		<tr
 			className={ classnames( 'wc-block-cart-items__row', {
@@ -146,6 +168,7 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
 							purchaseAmountSingle,
 							currency
 						) }
+						format={ subtotalPriceFormat }
 					/>
 				</div>
 
@@ -155,6 +178,7 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
 						saleAmountSingle,
 						currency
 					) }
+					format={ saleBadgePriceFormat }
 				/>
 
 				<ProductMetadata
@@ -194,6 +218,7 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
 							saleAmount,
 							currency
 						) }
+						format={ saleBadgePriceFormat }
 					/>
 				) }
 			</td>

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss

@@ -26,7 +26,6 @@ table.wc-block-cart-items td {
 
 .editor-styles-wrapper table.wc-block-cart-items,
 table.wc-block-cart-items {
-	table-layout: fixed;
 	width: 100%;
 
 	.wc-block-cart-items__header {
@@ -38,10 +37,6 @@ table.wc-block-cart-items {
 		}
 		.wc-block-cart-items__header-product {
 			visibility: hidden;
-			min-width: 300px;
-		}
-		.wc-block-cart-items__header-quantity {
-			width: 116px;
 		}
 		.wc-block-cart-items__header-total {
 			width: 100px;
@@ -70,12 +65,6 @@ table.wc-block-cart-items {
 			@include font-size(regular);
 			text-align: right;
 			line-height: 1.25;
-
-			.wc-block-components-product-price__regular,
-			.wc-block-components-product-price__value {
-				display: block;
-				font-weight: bold;
-			}
 		}
 		.wc-block-components-product-metadata {
 			margin-bottom: 0.75em;

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss

@@ -4,6 +4,7 @@
 
 .wc-block-checkout__sidebar {
 	.wc-block-components-product-name {
+		display: block;
 		color: inherit;
 		flex-grow: 1;
 		// Required by IE11.