Graduate `__experimentalApplyCheckoutFilter` and `__experimentalRegisterCheckoutFilters` to stable. (https://github.com/woocommerce/woocommerce-blocks/pull/8346)
* Add wrapper for __experimentalRegisterCheckoutFilters and deprecate it * Update internal references from __experimentalRegisterCheckoutFilters * Add wrapper for deprecated __experimentalApplyCheckoutFilter * Update references from `__experimentalApplyCheckoutFilter`
This commit is contained in:
Thomas Roberts
GitHub
parent
a7c730fbd0
commit
3797418079
|
|
@ -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: '<price/>',
|
||||
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: '<price/>',
|
||||
extensions,
|
||||
|
|
@ -118,7 +115,7 @@ const OrderSummaryItem = ( { cartItem }: OrderSummaryProps ): JSX.Element => {
|
|||
validation: productPriceValidation,
|
||||
} );
|
||||
|
||||
const cartItemClassNameFilter = __experimentalApplyCheckoutFilter( {
|
||||
const cartItemClassNameFilter = applyCheckoutFilter( {
|
||||
filterName: 'cartItemClass',
|
||||
defaultValue: '',
|
||||
extensions,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 },
|
||||
|
|
|
|||
|
|
@ -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: '<price/>',
|
||||
extensions,
|
||||
|
|
@ -179,7 +176,7 @@ const CartLineItemRow: React.ForwardRefExoticComponent<
|
|||
validation: productPriceValidation,
|
||||
} );
|
||||
|
||||
const subtotalPriceFormat = __experimentalApplyCheckoutFilter( {
|
||||
const subtotalPriceFormat = applyCheckoutFilter( {
|
||||
filterName: 'subtotalPriceFormat',
|
||||
defaultValue: '<price/>',
|
||||
extensions,
|
||||
|
|
@ -187,7 +184,7 @@ const CartLineItemRow: React.ForwardRefExoticComponent<
|
|||
validation: productPriceValidation,
|
||||
} );
|
||||
|
||||
const saleBadgePriceFormat = __experimentalApplyCheckoutFilter( {
|
||||
const saleBadgePriceFormat = applyCheckoutFilter( {
|
||||
filterName: 'saleBadgePriceFormat',
|
||||
defaultValue: '<price/>',
|
||||
extensions,
|
||||
|
|
@ -195,7 +192,7 @@ const CartLineItemRow: React.ForwardRefExoticComponent<
|
|||
validation: productPriceValidation,
|
||||
} );
|
||||
|
||||
const showRemoveItemLink = __experimentalApplyCheckoutFilter( {
|
||||
const showRemoveItemLink = applyCheckoutFilter( {
|
||||
filterName: 'showRemoveItemLink',
|
||||
defaultValue: true,
|
||||
extensions,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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 ||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
} );
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@
|
|||
|
||||
## Table of Contents <!-- omit in toc -->
|
||||
|
||||
- [\_\_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).
|
||||
|
||||
<!-- FEEDBACK -->
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
} );
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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: () => {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
} )
|
||||
|
|
|
|||
Loading…
Reference in New Issue