Allow extensions to extend Cart Item Name in Cart and Checkout. (https://github.com/woocommerce/woocommerce-blocks/pull/3807)

* Add validation function

* Prefix validateElementOrString with __experimental

* Update experimental docs

* Typo

* 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

* Add validation function

* Add Product name filter

* rebase

* update second filter call

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

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

@@ -6,6 +6,7 @@ import Label from '@woocommerce/base-components/label';
 import ProductPrice from '@woocommerce/base-components/product-price';
 import ProductName from '@woocommerce/base-components/product-name';
 import { getCurrency } from '@woocommerce/price-format';
+import { __experimentalApplyCheckoutFilter } from '@woocommerce/blocks-checkout';
 import PropTypes from 'prop-types';
 import Dinero from 'dinero.js';
 import { __experimentalApplyCheckoutFilter } from '@woocommerce/blocks-checkout';
@@ -23,7 +24,7 @@ const OrderSummaryItem = ( { cartItem } ) => {
 		images,
 		low_stock_remaining: lowStockRemaining = null,
 		show_backorder_badge: showBackorderBadge = false,
-		name,
+		name: initialName,
 		permalink,
 		prices,
 		quantity,
@@ -31,8 +32,19 @@ const OrderSummaryItem = ( { cartItem } ) => {
 		description: fullDescription,
 		item_data: itemData = [],
 		variation,
+		extensions,
 	} = cartItem;
 
+	const name = __experimentalApplyCheckoutFilter( {
+		filterName: 'itemName',
+		defaultValue: initialName,
+		arg: {
+			extensions,
+			context: 'summary',
+		},
+		validation: ( value ) => typeof value === 'string',
+	} );
+
 	const currency = getCurrency( prices );
 	const regularPriceSingle = Dinero( {
 		amount: parseInt( prices.raw_prices.regular_price, 10 ),

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

@@ -16,6 +16,7 @@ import {
 	ProductSaleBadge,
 } from '@woocommerce/base-components/cart-checkout';
 import { getCurrency } from '@woocommerce/price-format';
+import { __experimentalApplyCheckoutFilter } from '@woocommerce/blocks-checkout';
 import Dinero from 'dinero.js';
 import { __experimentalApplyCheckoutFilter } from '@woocommerce/blocks-checkout';
 
@@ -42,7 +43,7 @@ const getAmountFromRawPrice = ( priceObject, currency ) => {
  */
 const CartLineItemRow = ( { lineItem = {} } ) => {
 	const {
-		name = '',
+		name: initialName = '',
 		catalog_visibility: catalogVisibility = '',
 		short_description: shortDescription = '',
 		description: fullDescription = '',
@@ -72,6 +73,7 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
 				sale_price: '0',
 			},
 		},
+		extensions,
 	} = lineItem;
 
 	const {
@@ -81,6 +83,15 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
 		isPendingDelete,
 	} = useStoreCartItemQuantity( lineItem );
 
+	const name = __experimentalApplyCheckoutFilter( {
+		filterName: 'itemName',
+		defaultValue: initialName,
+		arg: {
+			extensions,
+			context: 'cart',
+		},
+		validation: ( value ) => typeof value === 'string',
+	} );
 	const currency = getCurrency( prices );
 	const regularAmountSingle = Dinero( {
 		amount: parseInt( prices.raw_prices.regular_price, 10 ),