Add checkout filter for coupon names (https://github.com/woocommerce/woocommerce-blocks/pull/4166)

* Make extensions optional, not all filters will need to pass this through

For example the CartCouponSchema has no option for extensibility (and I don't think it's needed at any rate) so extensions will always be an empty object. Rather than explicitly specifying this when running the filter, we can let it default to an empty object.

* Add filter for coupon code

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

@@ -5,7 +5,11 @@ import { __, sprintf } from '@wordpress/i18n';
 import LoadingMask from '@woocommerce/base-components/loading-mask';
 import { RemovableChip } from '@woocommerce/base-components/chip';
 import PropTypes from 'prop-types';
-import { TotalsItem } from '@woocommerce/blocks-checkout';
+import {
+	__experimentalApplyCheckoutFilter,
+	mustBeString,
+	TotalsItem,
+} from '@woocommerce/blocks-checkout';
 import { getSetting } from '@woocommerce/settings';
 
 /**
@@ -53,34 +57,48 @@ const TotalsDiscount = ( {
 						showSpinner={ false }
 					>
 						<ul className="wc-block-components-totals-discount__coupon-list">
-							{ cartCoupons.map( ( cartCoupon ) => (
-								<RemovableChip
-									key={ 'coupon-' + cartCoupon.code }
-									className="wc-block-components-totals-discount__coupon-list-item"
-									text={ cartCoupon.code }
-									screenReaderText={ sprintf(
-										/* translators: %s Coupon code. */
-										__(
-											'Coupon: %s',
-											'woo-gutenberg-products-block'
-										),
-										cartCoupon.code
-									) }
-									disabled={ isRemovingCoupon }
-									onRemove={ () => {
-										removeCoupon( cartCoupon.code );
-									} }
-									radius="large"
-									ariaLabel={ sprintf(
-										/* translators: %s is a coupon code. */
-										__(
-											'Remove coupon "%s"',
-											'woo-gutenberg-products-block'
-										),
-										cartCoupon.code
-									) }
-								/>
-							) ) }
+							{ cartCoupons.map( ( cartCoupon ) => {
+								const filteredCouponCode = __experimentalApplyCheckoutFilter(
+									{
+										validation: mustBeString,
+										arg: {
+											context: 'summary',
+											coupon: cartCoupon,
+										},
+										filterName: 'couponName',
+										defaultValue: cartCoupon.code,
+									}
+								);
+
+								return (
+									<RemovableChip
+										key={ 'coupon-' + cartCoupon.code }
+										className="wc-block-components-totals-discount__coupon-list-item"
+										text={ filteredCouponCode }
+										screenReaderText={ sprintf(
+											/* translators: %s Coupon code. */
+											__(
+												'Coupon: %s',
+												'woo-gutenberg-products-block'
+											),
+											filteredCouponCode
+										) }
+										disabled={ isRemovingCoupon }
+										onRemove={ () => {
+											removeCoupon( cartCoupon.code );
+										} }
+										radius="large"
+										ariaLabel={ sprintf(
+											/* translators: %s is a coupon code. */
+											__(
+												'Remove coupon "%s"',
+												'woo-gutenberg-products-block'
+											),
+											filteredCouponCode
+										) }
+									/>
+								);
+							} ) }
 						</ul>
 					</LoadingMask>
 				)

plugins/woocommerce-blocks/packages/checkout/registry/index.ts

@@ -61,7 +61,7 @@ const getCheckoutFilters = ( filterName: string ): CheckoutFilterFunction[] => {
 export const __experimentalApplyCheckoutFilter = < T >( {
 	filterName,
 	defaultValue,
-	extensions,
+	extensions = {},
 	arg = null,
 	validation = returnTrue,
 }: {
@@ -70,7 +70,7 @@ export const __experimentalApplyCheckoutFilter = < T >( {
 	/** Default value to filter. */
 	defaultValue: T;
 	/** Values extend to REST API response. */
-	extensions: Record< string, unknown >;
+	extensions?: Record< string, unknown >;
 	/** Object containing arguments for the filter function. */
 	arg: CheckoutFilterArguments;
 	/** Function that needs to return true when the filtered value is passed in order for the filter to be applied. */