diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx index c11a16eb2a4..968192ed6b6 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx +++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx @@ -10,10 +10,7 @@ import { getCurrencyFromPriceResponse, formatPrice, } from '@woocommerce/price-format'; -import { - __experimentalApplyCheckoutFilter, - mustContain, -} from '@woocommerce/blocks-checkout'; +import { applyCheckoutFilter, mustContain } from '@woocommerce/blocks-checkout'; import Dinero from 'dinero.js'; import { getSetting } from '@woocommerce/settings'; import { useMemo } from '@wordpress/element'; @@ -52,7 +49,7 @@ const OrderSummaryItem = ( { cartItem }: OrderSummaryProps ): JSX.Element => { extensions, } = cartItem; - // Prepare props to pass to the __experimentalApplyCheckoutFilter filter. + // Prepare props to pass to the applyCheckoutFilter filter. // We need to pluck out receiveCart. // eslint-disable-next-line no-unused-vars const { receiveCart, ...cart } = useStoreCart(); @@ -68,7 +65,7 @@ const OrderSummaryItem = ( { cartItem }: OrderSummaryProps ): JSX.Element => { const priceCurrency = getCurrencyFromPriceResponse( prices ); - const name = __experimentalApplyCheckoutFilter( { + const name = applyCheckoutFilter( { filterName: 'itemName', defaultValue: initialName, extensions, @@ -101,7 +98,7 @@ const OrderSummaryItem = ( { cartItem }: OrderSummaryProps ): JSX.Element => { amount: lineSubtotal, precision: totalsCurrency.minorUnit, } ).getAmount(); - const subtotalPriceFormat = __experimentalApplyCheckoutFilter( { + const subtotalPriceFormat = applyCheckoutFilter( { filterName: 'subtotalPriceFormat', defaultValue: '', extensions, @@ -110,7 +107,7 @@ const OrderSummaryItem = ( { cartItem }: OrderSummaryProps ): JSX.Element => { } ); // Allow extensions to filter how the price is displayed. Ie: prepending or appending some values. - const productPriceFormat = __experimentalApplyCheckoutFilter( { + const productPriceFormat = applyCheckoutFilter( { filterName: 'cartItemPrice', defaultValue: '', extensions, @@ -118,7 +115,7 @@ const OrderSummaryItem = ( { cartItem }: OrderSummaryProps ): JSX.Element => { validation: productPriceValidation, } ); - const cartItemClassNameFilter = __experimentalApplyCheckoutFilter( { + const cartItemClassNameFilter = applyCheckoutFilter( { filterName: 'cartItemClass', defaultValue: '', extensions, diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/discount/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/discount/index.tsx index d50332d87a0..4909c5ecd59 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/discount/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/discount/index.tsx @@ -4,10 +4,7 @@ import { __, sprintf } from '@wordpress/i18n'; import LoadingMask from '@woocommerce/base-components/loading-mask'; import { RemovableChip } from '@woocommerce/base-components/chip'; -import { - __experimentalApplyCheckoutFilter, - TotalsItem, -} from '@woocommerce/blocks-checkout'; +import { applyCheckoutFilter, TotalsItem } from '@woocommerce/blocks-checkout'; import { getSetting } from '@woocommerce/settings'; import { CartResponseCouponItemWithLabel, @@ -64,7 +61,7 @@ const TotalsDiscount = ( { ? discountValue + discountTaxValue : discountValue; - const filteredCartCoupons = __experimentalApplyCheckoutFilter( { + const filteredCartCoupons = applyCheckoutFilter( { arg: filteredCartCouponsFilterArg, filterName: 'coupons', defaultValue: cartCoupons, diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx index c32bc0c13ce..60a7a8f6fc8 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx @@ -5,10 +5,7 @@ import { __, sprintf } from '@wordpress/i18n'; import classNames from 'classnames'; import { createInterpolateElement } from '@wordpress/element'; import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount'; -import { - __experimentalApplyCheckoutFilter, - TotalsItem, -} from '@woocommerce/blocks-checkout'; +import { applyCheckoutFilter, TotalsItem } from '@woocommerce/blocks-checkout'; import { useStoreCart } from '@woocommerce/base-context/hooks'; import { getSetting } from '@woocommerce/settings'; import { @@ -60,11 +57,11 @@ const TotalsFooterItem = ( { tax_lines: taxLines, } = values; - // Prepare props to pass to the __experimentalApplyCheckoutFilter filter. + // Prepare props to pass to the applyCheckoutFilter filter. // We need to pluck out receiveCart. // eslint-disable-next-line no-unused-vars const { receiveCart, ...cart } = useStoreCart(); - const label = __experimentalApplyCheckoutFilter( { + const label = applyCheckoutFilter( { filterName: 'totalLabel', defaultValue: __( 'Total', 'woo-gutenberg-products-block' ), extensions: cart.extensions, diff --git a/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/use-store-cart-coupons.ts b/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/use-store-cart-coupons.ts index 2923fb7e031..81a25490dc4 100644 --- a/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/use-store-cart-coupons.ts +++ b/plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/use-store-cart-coupons.ts @@ -6,7 +6,7 @@ import { useDispatch, useSelect } from '@wordpress/data'; import { CART_STORE_KEY, VALIDATION_STORE_KEY } from '@woocommerce/block-data'; import { decodeEntities } from '@wordpress/html-entities'; import type { StoreCartCoupon } from '@woocommerce/types'; -import { __experimentalApplyCheckoutFilter } from '@woocommerce/blocks-checkout'; +import { applyCheckoutFilter } from '@woocommerce/blocks-checkout'; /** * Internal dependencies @@ -46,7 +46,7 @@ export const useStoreCartCoupons = ( context = '' ): StoreCartCoupon => { return applyCoupon( couponCode ) .then( () => { if ( - __experimentalApplyCheckoutFilter( { + applyCheckoutFilter( { filterName: 'showApplyCouponNotice', defaultValue: true, arg: { couponCode, context }, @@ -86,7 +86,7 @@ export const useStoreCartCoupons = ( context = '' ): StoreCartCoupon => { return removeCoupon( couponCode ) .then( () => { if ( - __experimentalApplyCheckoutFilter( { + applyCheckoutFilter( { filterName: 'showRemoveCouponNotice', defaultValue: true, arg: { couponCode, context }, diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx index 5ecfb80d399..fdf3976bdcf 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx @@ -20,10 +20,7 @@ import { ProductSaleBadge, } from '@woocommerce/base-components/cart-checkout'; import { getCurrencyFromPriceResponse } from '@woocommerce/price-format'; -import { - __experimentalApplyCheckoutFilter, - mustContain, -} from '@woocommerce/blocks-checkout'; +import { applyCheckoutFilter, mustContain } from '@woocommerce/blocks-checkout'; import Dinero from 'dinero.js'; import { forwardRef, useMemo } from '@wordpress/element'; import type { CartItem } from '@woocommerce/types'; @@ -118,7 +115,7 @@ const CartLineItemRow: React.ForwardRefExoticComponent< useStoreCartItemQuantity( lineItem ); const { dispatchStoreEvent } = useStoreEvents(); - // Prepare props to pass to the __experimentalApplyCheckoutFilter filter. + // Prepare props to pass to the applyCheckoutFilter filter. // We need to pluck out receiveCart. // eslint-disable-next-line no-unused-vars const { receiveCart, ...cart } = useStoreCart(); @@ -131,7 +128,7 @@ const CartLineItemRow: React.ForwardRefExoticComponent< [ lineItem, cart ] ); const priceCurrency = getCurrencyFromPriceResponse( prices ); - const name = __experimentalApplyCheckoutFilter( { + const name = applyCheckoutFilter( { filterName: 'itemName', defaultValue: initialName, extensions, @@ -163,7 +160,7 @@ const CartLineItemRow: React.ForwardRefExoticComponent< const isProductHiddenFromCatalog = catalogVisibility === 'hidden' || catalogVisibility === 'search'; - const cartItemClassNameFilter = __experimentalApplyCheckoutFilter( { + const cartItemClassNameFilter = applyCheckoutFilter( { filterName: 'cartItemClass', defaultValue: '', extensions, @@ -171,7 +168,7 @@ const CartLineItemRow: React.ForwardRefExoticComponent< } ); // Allow extensions to filter how the price is displayed. Ie: prepending or appending some values. - const productPriceFormat = __experimentalApplyCheckoutFilter( { + const productPriceFormat = applyCheckoutFilter( { filterName: 'cartItemPrice', defaultValue: '', extensions, @@ -179,7 +176,7 @@ const CartLineItemRow: React.ForwardRefExoticComponent< validation: productPriceValidation, } ); - const subtotalPriceFormat = __experimentalApplyCheckoutFilter( { + const subtotalPriceFormat = applyCheckoutFilter( { filterName: 'subtotalPriceFormat', defaultValue: '', extensions, @@ -187,7 +184,7 @@ const CartLineItemRow: React.ForwardRefExoticComponent< validation: productPriceValidation, } ); - const saleBadgePriceFormat = __experimentalApplyCheckoutFilter( { + const saleBadgePriceFormat = applyCheckoutFilter( { filterName: 'saleBadgePriceFormat', defaultValue: '', extensions, @@ -195,7 +192,7 @@ const CartLineItemRow: React.ForwardRefExoticComponent< validation: productPriceValidation, } ); - const showRemoveItemLink = __experimentalApplyCheckoutFilter( { + const showRemoveItemLink = applyCheckoutFilter( { filterName: 'showRemoveItemLink', defaultValue: true, extensions, diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/test/block.js b/plugins/woocommerce-blocks/assets/js/blocks/cart/test/block.js index 14ba47dc156..3eea7abf2fa 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart/test/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/test/block.js @@ -6,7 +6,7 @@ import { previewCart } from '@woocommerce/resource-previews'; import { dispatch } from '@wordpress/data'; import { CART_STORE_KEY as storeKey } from '@woocommerce/block-data'; import { default as fetchMock } from 'jest-fetch-mock'; -import { __experimentalRegisterCheckoutFilters } from '@woocommerce/blocks-checkout'; +import { registerCheckoutFilters } from '@woocommerce/blocks-checkout'; /** * Internal dependencies @@ -240,7 +240,7 @@ describe( 'Testing cart', () => { items: [ previewCart.items[ 0 ] ], }; - __experimentalRegisterCheckoutFilters( 'woo-blocks-test-extension', { + registerCheckoutFilters( 'woo-blocks-test-extension', { showRemoveItemLink: ( value, extensions, { cartItem } ) => { return cartItem.id !== cart.items[ 0 ].id; }, diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx index 4ad6356032a..b4c36a071fb 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx @@ -11,7 +11,7 @@ import { useCheckoutSubmit } from '@woocommerce/base-context/hooks'; import { noticeContexts } from '@woocommerce/base-context'; import { StoreNoticesContainer, - __experimentalApplyCheckoutFilter, + applyCheckoutFilter, } from '@woocommerce/blocks-checkout'; /** @@ -32,7 +32,7 @@ const Block = ( { placeOrderButtonLabel: string; } ): JSX.Element => { const { paymentMethodButtonLabel } = useCheckoutSubmit(); - const label = __experimentalApplyCheckoutFilter( { + const label = applyCheckoutFilter( { filterName: 'placeOrderButtonLabel', defaultValue: paymentMethodButtonLabel || diff --git a/plugins/woocommerce-blocks/docs/internal-developers/blocks/feature-flags-and-experimental-interfaces.md b/plugins/woocommerce-blocks/docs/internal-developers/blocks/feature-flags-and-experimental-interfaces.md index c03549c947d..44e2e521cc0 100644 --- a/plugins/woocommerce-blocks/docs/internal-developers/blocks/feature-flags-and-experimental-interfaces.md +++ b/plugins/woocommerce-blocks/docs/internal-developers/blocks/feature-flags-and-experimental-interfaces.md @@ -86,7 +86,6 @@ We also have individual features or code blocks behind a feature flag, this is a - `__experimentalDeRegisterPaymentMethod` function used to deregister a payment method, only used in tests ([experimental function](https://github.com/woocommerce/woocommerce-blocks/blob/f27456dd00fa0b21b29a935943defb18351edf48/assets/js/blocks-registry/payment-methods/registry.ts#L110-L114)). - `__experimentalDeRegisterExpressPaymentMethod` function used to deregister an express payment method, only used in tests ([experimental function](https://github.com/woocommerce/woocommerce-blocks/blob/f27456dd00fa0b21b29a935943defb18351edf48/assets/js/blocks-registry/payment-methods/registry.ts#L116-L120)). -- `__experimentalRegisterCheckoutFilters` and `__experimentalApplyCheckoutFilter` methods included with `@woocommerce/blocks-checkout` package. They allow registering and applying a filter to certain parts of the Cart and Checkout blocks ([experimental method 1](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/3e59ec9842464f783f6e087947e717fa0b0a7b1b/packages/checkout/registry/index.js#L2) | [experimental method 2](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/3e59ec9842464f783f6e087947e717fa0b0a7b1b/packages/checkout/registry/index.js#L17)). ### Slots diff --git a/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/available-filters.md b/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/available-filters.md index 275ec0ae1ad..0e5093a80c2 100644 --- a/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/available-filters.md +++ b/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/available-filters.md @@ -110,11 +110,11 @@ For this example, let's suppose we are building an extension that lets customers const replaceTotalWithDeposit = () => 'Deposit due today'; ``` -2. Now we need to register this filter function, and have it executed when the `totalLabel` filter is applied. We can access the `__experimentalRegisterCheckoutFilters` function on the `window.wc.blocksCheckout` object. As long as your extension's script is enqueued _after_ WooCommerce Blocks' scripts (i.e. by registering `wc-blocks-checkout` as a dependency), then this will be available. +2. Now we need to register this filter function, and have it executed when the `totalLabel` filter is applied. We can access the `registerCheckoutFilters` function on the `window.wc.blocksCheckout` object. As long as your extension's script is enqueued _after_ WooCommerce Blocks' scripts (i.e. by registering `wc-blocks-checkout` as a dependency), then this will be available. ```ts -const { __experimentalRegisterCheckoutFilters } = window.wc.blocksCheckout; -__experimentalRegisterCheckoutFilters( 'my-hypothetical-deposit-plugin', { +const { registerCheckoutFilters } = window.wc.blocksCheckout; +registerCheckoutFilters( 'my-hypothetical-deposit-plugin', { totalLabel: replaceTotalWithDeposit, } ); ``` @@ -140,11 +140,11 @@ const appendTextToPriceInCart = ( value, extensions, args ) => { }; ``` -2. Now we must register it. Refer to the first example for information about `__experimentalRegisterCheckoutFilters`. +2. Now we must register it. Refer to the first example for information about `registerCheckoutFilters`. ```ts -const { __experimentalRegisterCheckoutFilters } = window.wc.blocksCheckout; -__experimentalRegisterCheckoutFilters( 'my-hypothetical-price-plugin', { +const { registerCheckoutFilters } = window.wc.blocksCheckout; +registerCheckoutFilters( 'my-hypothetical-price-plugin', { subtotalPriceFormat: appendTextToPriceInCart, } ); ``` @@ -175,9 +175,9 @@ const filterCoupons = ( coupons ) => { We'd register our filter like this: ```ts -import { __experimentalRegisterCheckoutFilters } from '@woocommerce/blocks-checkout'; +import { registerCheckoutFilters } from '@woocommerce/blocks-checkout'; -__experimentalRegisterCheckoutFilters( 'automatic-coupon-extension', { +registerCheckoutFilters( 'automatic-coupon-extension', { coupons: filterCoupons, } ); ``` @@ -193,9 +193,9 @@ If you want to prevent a coupon apply notice from appearing, you can use the `sh The same can be done with the `showRemoveCouponNotice` filter to prevent a notice when a coupon is removed from the cart. ```ts -import { __experimentalRegisterCheckoutFilters } from '@woocommerce/blocks-checkout'; +import { registerCheckoutFilters } from '@woocommerce/blocks-checkout'; -__experimentalRegisterCheckoutFilters( 'example-extension', { +registerCheckoutFilters( 'example-extension', { showApplyCouponNotice: ( value, extensions, { couponCode } ) => { // Prevent a couponCode called '10off' from creating a notice. return couponCode === '10off' ? false : value; @@ -215,9 +215,9 @@ An important caveat to note is this does _not_ prevent the item from being remov removing it in the Mini Cart, or traditional shortcode cart. ```ts -import { __experimentalRegisterCheckoutFilters } from '@woocommerce/blocks-checkout'; +import { registerCheckoutFilters } from '@woocommerce/blocks-checkout'; -__experimentalRegisterCheckoutFilters( 'example-extension', { +registerCheckoutFilters( 'example-extension', { showRemoveItemLink: ( value, extensions, { cartItem } ) => { // Prevent items with ID 1 being removed from the cart. return cartItem.id !== 1; @@ -235,11 +235,11 @@ Let's assume a merchant want to change the label of the Place Order button _Plac const label = () => `Pay now`; ``` -2. Now we have to register this filter function, and have it executed when the `placeOrderButtonLabel` filter is applied. We can access the `__experimentalRegisterCheckoutFilters` function on the `window.wc.blocksCheckout` object. As long as your extension's script is enqueued _after_ WooCommerce Blocks' scripts (i.e. by registering `wc-blocks-checkout` as a dependency), then this will be available. +2. Now we have to register this filter function, and have it executed when the `placeOrderButtonLabel` filter is applied. We can access the `registerCheckoutFilters` function on the `window.wc.blocksCheckout` object. As long as your extension's script is enqueued _after_ WooCommerce Blocks' scripts (i.e. by registering `wc-blocks-checkout` as a dependency), then this will be available. ```ts -const { __experimentalRegisterCheckoutFilters } = window.wc.blocksCheckout; -__experimentalRegisterCheckoutFilters( 'custom-place-order-button-label', { +const { registerCheckoutFilters } = window.wc.blocksCheckout; +registerCheckoutFilters( 'custom-place-order-button-label', { placeOrderButtonLabel: label, } ); ``` diff --git a/plugins/woocommerce-blocks/packages/checkout/filter-registry/README.md b/plugins/woocommerce-blocks/packages/checkout/filter-registry/README.md index c90ff9f7d1b..31b04780f27 100644 --- a/plugins/woocommerce-blocks/packages/checkout/filter-registry/README.md +++ b/plugins/woocommerce-blocks/packages/checkout/filter-registry/README.md @@ -2,12 +2,12 @@ ## Table of Contents -- [\_\_experimentalRegisterCheckoutFilters](#__experimentalregistercheckoutfilters) +- [registerCheckoutFilters](#registercheckoutfilters) - [Usage](#usage) - [Options](#options) - [`namespace (string)`](#namespace-string) - [`filters (object)`](#filters-object) -- [\_\_experimentalApplyCheckoutFilter](#__experimentalapplycheckoutfilter) +- [applyCheckoutFilter](#applycheckoutfilter) - [Usage](#usage-1) - [Options](#options-1) - [`filterName (string, required)`](#filtername-string-required) @@ -19,7 +19,7 @@ The filter registry allows callbacks to be registered to manipulate certain values. This is similar to the traditional filter system in WordPress (where you register a callback with a specific filter and return a modified value). -## \_\_experimentalRegisterCheckoutFilters +## registerCheckoutFilters Registers a callback function with an available filter. This function has the following signature: @@ -44,16 +44,16 @@ type CheckoutFilterFunction = < T >( ```js // Aliased import -import { __experimentalRegisterCheckoutFilters } from '@woocommerce/blocks-checkout'; +import { registerCheckoutFilters } from '@woocommerce/blocks-checkout'; // Global import -// const { __experimentalRegisterCheckoutFilters } = wc.blocksCheckout; + const { registerCheckoutFilters } = wc.blocksCheckout; const callback = ( value ) => { return value; }; -__experimentalRegisterCheckoutFilters( 'my-extension-namespace', { +registerCheckoutFilters( 'my-extension-namespace', { filterName: callback, } ); ``` @@ -74,7 +74,7 @@ A list of filter names and functions (`CheckoutFilterFunction`) to execute when - `extensions` A n object containing extension data. If your extension has extended any of the store's API routes, one of the keys of this object will be your extension's namespace. The value will contain any data you add to the endpoint. Each key in the `extensions` object is an extension namespace, so a third party extension cannot interfere with _your_ extension's schema modifications, unless there is a naming collision, so please ensure your extension has a unique namespace that is unlikely to conflict with other extensions. - `args` - An object containing any additional data passed to the filter function. This usually (but not always) contains at least a key called `context`. The value of `context` will be (at the moment) either `cart` or `checkout`. This is provided to inform extensions about the exact location that the filter is being applied. The same filter can be applied in multiple places. -## \_\_experimentalApplyCheckoutFilter +## applyCheckoutFilter This function applies a filter, and all registered callbacks, to a given value. @@ -82,17 +82,17 @@ This function applies a filter, and all registered callbacks, to a given value. ```js // Aliased import -import { __experimentalApplyCheckoutFilter } from '@woocommerce/blocks-checkout'; +import { applyCheckoutFilter } from '@woocommerce/blocks-checkout'; // Global import -// const { __experimentalApplyCheckoutFilter } = wc.blocksCheckout; + const { applyCheckoutFilter } = wc.blocksCheckout; const options = { filterName: 'my-filter', defaultValue: 'Default Value', }; -const filteredValue = __experimentalApplyCheckoutFilter( options ); +const filteredValue = applyCheckoutFilter( options ); ``` ### Options @@ -121,7 +121,7 @@ A function that needs to return true when the filtered value is passed in order ## Available Filters -Filters are implemented throughout the Mini Cart, Cart and Checkout Blocks, as well as some components. For a list of filters, [see this document](../../../docs/third-party-developers/extensibility/checkout-block/available-filters.md). You can also search for [usage of `__experimentalApplyCheckoutFilter` within the source code](https://github.com/woocommerce/woocommerce-gutenberg-products-block/search?q=__experimentalApplyCheckoutFilter). +Filters are implemented throughout the Mini Cart, Cart and Checkout Blocks, as well as some components. For a list of filters, [see this document](../../../docs/third-party-developers/extensibility/checkout-block/available-filters.md). You can also search for [usage of `applyCheckoutFilter` within the source code](https://github.com/woocommerce/woocommerce-gutenberg-products-block/search?q=applyCheckoutFilter). diff --git a/plugins/woocommerce-blocks/packages/checkout/filter-registry/index.ts b/plugins/woocommerce-blocks/packages/checkout/filter-registry/index.ts index 91efcbb66a8..7522006f943 100644 --- a/plugins/woocommerce-blocks/packages/checkout/filter-registry/index.ts +++ b/plugins/woocommerce-blocks/packages/checkout/filter-registry/index.ts @@ -33,10 +33,11 @@ let checkoutFilters: Record< > = {}; const cachedValues: Record< string, T > = {}; + /** * Register filters for a specific extension. */ -export const __experimentalRegisterCheckoutFilters = ( +export const registerCheckoutFilters = ( namespace: string, filters: Record< string, CheckoutFilterFunction > ): void => { @@ -59,6 +60,24 @@ export const __experimentalRegisterCheckoutFilters = ( }; }; +/** + * Backward compatibility for __experimentalRegisterCheckoutFilters, this has been graduated to stable now. + * Remove after July 2023. + */ +export const __experimentalRegisterCheckoutFilters = ( + namespace: string, + filters: Record< string, CheckoutFilterFunction > +) => { + deprecated( '__experimentalRegisterCheckoutFilters', { + alternative: 'registerCheckoutFilters', + plugin: 'WooCommerce Blocks', + link: '', + since: '6.0.0', + hint: '__experimentalRegisterCheckoutFilters has graduated to stable and this experimental function will be removed.', + } ); + registerCheckoutFilters( namespace, filters ); +}; + /** * Get all filters with a specific name. * @@ -179,7 +198,7 @@ const shouldReRunFilters = < T >( /** * Apply a filter. */ -export const __experimentalApplyCheckoutFilter = < T >( { +export const applyCheckoutFilter = < T >( { filterName, defaultValue, extensions = null, @@ -234,3 +253,41 @@ export const __experimentalApplyCheckoutFilter = < T >( { cachedValues[ filterName ] = value; return value; }; + +/** + * Backward compatibility for __experimentalApplyCheckoutFilter, this has been graduated to stable now. + * Remove after July 2023. + */ +export const __experimentalApplyCheckoutFilter = < T >( { + filterName, + defaultValue, + extensions = null, + arg = null, + validation = returnTrue, +}: { + /** Name of the filter to apply. */ + filterName: string; + /** Default value to filter. */ + defaultValue: T; + /** Values extend to REST API response. */ + extensions?: Record< string, unknown > | null; + /** 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. */ + validation?: ( value: T ) => true | Error; +} ): T => { + deprecated( '__experimentalApplyCheckoutFilter', { + alternative: 'applyCheckoutFilter', + plugin: 'WooCommerce Blocks', + link: '', + since: '6.0.0', + hint: '__experimentalApplyCheckoutFilter has graduated to stable and this experimental function will be removed.', + } ); + return applyCheckoutFilter( { + filterName, + defaultValue, + extensions, + arg, + validation, + } ); +}; diff --git a/plugins/woocommerce-blocks/packages/checkout/filter-registry/test/admin.js b/plugins/woocommerce-blocks/packages/checkout/filter-registry/test/admin.js index 50d17783e56..aed5284b817 100644 --- a/plugins/woocommerce-blocks/packages/checkout/filter-registry/test/admin.js +++ b/plugins/woocommerce-blocks/packages/checkout/filter-registry/test/admin.js @@ -5,10 +5,7 @@ import { renderHook } from '@testing-library/react-hooks'; /** * Internal dependencies */ -import { - __experimentalRegisterCheckoutFilters, - __experimentalApplyCheckoutFilter, -} from '../'; +import { registerCheckoutFilters, applyCheckoutFilter } from '../'; jest.mock( '@woocommerce/settings', () => { const originalModule = jest.requireActual( '@woocommerce/settings' ); @@ -23,14 +20,14 @@ describe( 'Checkout registry (as admin user)', () => { test( 'should throw if the filter throws and user is an admin', () => { const filterName = 'ErrorTestFilter'; const value = 'Hello World'; - __experimentalRegisterCheckoutFilters( filterName, { + registerCheckoutFilters( filterName, { [ filterName ]: () => { throw new Error( 'test error' ); }, } ); const { result } = renderHook( () => - __experimentalApplyCheckoutFilter( { + applyCheckoutFilter( { filterName, defaultValue: value, } ) @@ -41,11 +38,11 @@ describe( 'Checkout registry (as admin user)', () => { test( 'should throw if validation throws and user is an admin', () => { const filterName = 'ValidationTestFilter'; const value = 'Hello World'; - __experimentalRegisterCheckoutFilters( filterName, { + registerCheckoutFilters( filterName, { [ filterName ]: ( val ) => val, } ); const { result } = renderHook( () => - __experimentalApplyCheckoutFilter( { + applyCheckoutFilter( { filterName, defaultValue: value, validation: () => { diff --git a/plugins/woocommerce-blocks/packages/checkout/filter-registry/test/index.js b/plugins/woocommerce-blocks/packages/checkout/filter-registry/test/index.js index 0bff625320c..b9a1d1057fb 100644 --- a/plugins/woocommerce-blocks/packages/checkout/filter-registry/test/index.js +++ b/plugins/woocommerce-blocks/packages/checkout/filter-registry/test/index.js @@ -5,10 +5,7 @@ import { renderHook } from '@testing-library/react-hooks'; /** * Internal dependencies */ -import { - __experimentalRegisterCheckoutFilters, - __experimentalApplyCheckoutFilter, -} from '../'; +import { registerCheckoutFilters, applyCheckoutFilter } from '../'; describe( 'Checkout registry', () => { const filterName = 'loremIpsum'; @@ -16,7 +13,7 @@ describe( 'Checkout registry', () => { test( 'should return default value if there are no filters', () => { const value = 'Hello World'; const { result: newValue } = renderHook( () => - __experimentalApplyCheckoutFilter( { + applyCheckoutFilter( { filterName, defaultValue: value, } ) @@ -26,12 +23,12 @@ describe( 'Checkout registry', () => { test( 'should return filtered value when a filter is registered', () => { const value = 'Hello World'; - __experimentalRegisterCheckoutFilters( filterName, { + registerCheckoutFilters( filterName, { [ filterName ]: ( val, extensions, args ) => val.toUpperCase() + args.punctuationSign, } ); const { result: newValue } = renderHook( () => - __experimentalApplyCheckoutFilter( { + applyCheckoutFilter( { filterName, defaultValue: value, arg: { @@ -45,11 +42,11 @@ describe( 'Checkout registry', () => { test( 'should not return filtered value if validation failed', () => { const value = 'Hello World'; - __experimentalRegisterCheckoutFilters( filterName, { + registerCheckoutFilters( filterName, { [ filterName ]: ( val ) => val.toUpperCase(), } ); const { result: newValue } = renderHook( () => - __experimentalApplyCheckoutFilter( { + applyCheckoutFilter( { filterName, defaultValue: value, validation: ( val ) => ! val.includes( 'HELLO' ), @@ -69,13 +66,13 @@ describe( 'Checkout registry', () => { // We use this new filter name here to avoid return the cached value for the filter const filterNameThatThrows = 'throw'; const value = 'Hello World'; - __experimentalRegisterCheckoutFilters( filterNameThatThrows, { + registerCheckoutFilters( filterNameThatThrows, { [ filterNameThatThrows ]: () => { throw error; }, } ); const { result: newValue } = renderHook( () => - __experimentalApplyCheckoutFilter( { + applyCheckoutFilter( { filterName: filterNameThatThrows, defaultValue: value, } )