diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/discount/index.js b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/discount/index.js
index 9ab8e09c7cd..44f6f9df448 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/discount/index.js
+++ b/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 }
>
- { cartCoupons.map( ( cartCoupon ) => (
- {
- 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 (
+ {
+ removeCoupon( cartCoupon.code );
+ } }
+ radius="large"
+ ariaLabel={ sprintf(
+ /* translators: %s is a coupon code. */
+ __(
+ 'Remove coupon "%s"',
+ 'woo-gutenberg-products-block'
+ ),
+ filteredCouponCode
+ ) }
+ />
+ );
+ } ) }
)
diff --git a/plugins/woocommerce-blocks/packages/checkout/registry/index.ts b/plugins/woocommerce-blocks/packages/checkout/registry/index.ts
index cc49a8ddb6d..6e92f00c0ae 100644
--- a/plugins/woocommerce-blocks/packages/checkout/registry/index.ts
+++ b/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. */