diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/order-summary-item.js b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/order-summary-item.js index d245a08e07c..2114c3d056d 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/order-summary-item.js +++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/order-summary-item.js @@ -13,7 +13,7 @@ import { import PropTypes from 'prop-types'; import Dinero from 'dinero.js'; import { getSetting } from '@woocommerce/settings'; -import { useCallback, useMemo } from '@wordpress/element'; +import { useMemo } from '@wordpress/element'; import { useStoreCart } from '@woocommerce/base-context/hooks'; /** @@ -24,21 +24,23 @@ import ProductImage from '../product-image'; import ProductLowStockBadge from '../product-low-stock-badge'; import ProductMetadata from '../product-metadata'; +const productPriceValidation = ( value ) => mustContain( value, '' ); + const OrderSummaryItem = ( { cartItem } ) => { const { images, - low_stock_remaining: lowStockRemaining = null, - show_backorder_badge: showBackorderBadge = false, + low_stock_remaining: lowStockRemaining, + show_backorder_badge: showBackorderBadge, name: initialName, permalink, prices, quantity, short_description: shortDescription, description: fullDescription, - item_data: itemData = [], + item_data: itemData, variation, totals, - extensions = {}, + extensions, } = cartItem; // Prepare props to pass to the __experimentalApplyCheckoutFilter filter. @@ -46,11 +48,6 @@ const OrderSummaryItem = ( { cartItem } ) => { // eslint-disable-next-line no-unused-vars const { receiveCart, ...cart } = useStoreCart(); - const productPriceValidation = useCallback( - ( value ) => mustContain( value, '' ), - [] - ); - const arg = useMemo( () => ( { context: 'summary', diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/test/index.js b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/test/index.js index 6c0cba4379a..352eb722b9d 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/test/index.js +++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/test/index.js @@ -12,7 +12,7 @@ import OrderSummary from '../index'; jest.mock( '@woocommerce/base-context', () => ( { ...jest.requireActual( '@woocommerce/base-context' ), useContainerWidthContext: () => ( { - isLarge: false, + isLarge: true, hasContainerWidth: true, } ), } ) ); 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 e4a3b8a45ff..969c95352ba 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 @@ -16,6 +16,10 @@ import { getSetting } from '@woocommerce/settings'; */ import './style.scss'; +const filteredCartCouponsFilterArg = { + context: 'summary', +}; + const TotalsDiscount = ( { cartCoupons = [], currency, @@ -42,9 +46,7 @@ const TotalsDiscount = ( { : discountValue; const filteredCartCoupons = __experimentalApplyCheckoutFilter( { - arg: { - context: 'summary', - }, + arg: filteredCartCouponsFilterArg, filterName: 'coupons', defaultValue: cartCoupons, } ); diff --git a/plugins/woocommerce-blocks/assets/js/base/components/product-name/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/product-name/index.tsx index 7f982585644..bed6ad8ce67 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/product-name/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/base/components/product-name/index.tsx @@ -21,10 +21,10 @@ export default ( { permalink = '', ...props }: { - className: string; - disabled: boolean; + className?: string; + disabled?: boolean; name: string; - permalink: string; + permalink?: string; } ): JSX.Element => { const classes = classnames( 'wc-block-components-product-name', className ); return disabled ? ( diff --git a/plugins/woocommerce-blocks/assets/js/base/context/providers/store-snackbar-notices/components/snackbar-notices-container.js b/plugins/woocommerce-blocks/assets/js/base/context/providers/store-snackbar-notices/components/snackbar-notices-container.js index 2444eb02445..b78ac2e39d5 100644 --- a/plugins/woocommerce-blocks/assets/js/base/context/providers/store-snackbar-notices/components/snackbar-notices-container.js +++ b/plugins/woocommerce-blocks/assets/js/base/context/providers/store-snackbar-notices/components/snackbar-notices-container.js @@ -5,6 +5,8 @@ import { SnackbarList } from 'wordpress-components'; import classnames from 'classnames'; import { __experimentalApplyCheckoutFilter } from '@woocommerce/blocks-checkout'; +const EMPTY_SNACKBAR_NOTICES = {}; + const SnackbarNoticesContainer = ( { className, notices, @@ -19,10 +21,13 @@ const SnackbarNoticesContainer = ( { ( notice ) => notice.type === 'snackbar' ); - const noticeVisibility = snackbarNotices.reduce( ( acc, { content } ) => { - acc[ content ] = true; - return acc; - }, {} ); + const noticeVisibility = + snackbarNotices.length > 0 + ? snackbarNotices.reduce( ( acc, { content } ) => { + acc[ content ] = true; + return acc; + }, {} ) + : EMPTY_SNACKBAR_NOTICES; const filteredNotices = __experimentalApplyCheckoutFilter( { filterName: 'snackbarNoticeVisibility', diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.tsx index 4340a95df08..2cf2248dda2 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.tsx @@ -27,7 +27,7 @@ import { mustContain, } from '@woocommerce/blocks-checkout'; import Dinero from 'dinero.js'; -import { useCallback, useMemo } from '@wordpress/element'; +import { useMemo } from '@wordpress/element'; import type { CartItem } from '@woocommerce/type-defs/cart'; import { objectHasProp } from '@woocommerce/types'; import { getSetting } from '@woocommerce/settings'; @@ -46,6 +46,8 @@ const getAmountFromRawPrice = ( return priceObject.convertPrecision( currency.minorUnit ).getAmount(); }; +const productPriceValidation = ( value ) => mustContain( value, '' ); + /** * Cart line item table row component. * @@ -99,7 +101,7 @@ const CartLineItemRow = ( { line_subtotal: '0', line_subtotal_tax: '0', }, - extensions = {}, + extensions, } = lineItem; const { @@ -110,11 +112,6 @@ const CartLineItemRow = ( { } = useStoreCartItemQuantity( lineItem ); const { dispatchStoreEvent } = useStoreEvents(); - const productPriceValidation = useCallback( - ( value ) => mustContain( value, '' ), - [] - ); - // Prepare props to pass to the __experimentalApplyCheckoutFilter filter. // We need to pluck out receiveCart. // eslint-disable-next-line no-unused-vars @@ -308,4 +305,5 @@ const CartLineItemRow = ( { ); }; + export default CartLineItemRow; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/test/__snapshots__/block.js.snap b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/test/__snapshots__/block.js.snap index 7285f5f26a6..452f531e9de 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/test/__snapshots__/block.js.snap +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/test/__snapshots__/block.js.snap @@ -427,57 +427,6 @@ exports[`Testing cart Contains a Taxes section if Core options are set to show i -
-
-
-
- + { isOpen && ( +
+ { children } +
+ ) }
); }; diff --git a/plugins/woocommerce-blocks/packages/checkout/registry/index.ts b/plugins/woocommerce-blocks/packages/checkout/registry/index.ts index 64da6711762..d60b5150160 100644 --- a/plugins/woocommerce-blocks/packages/checkout/registry/index.ts +++ b/plugins/woocommerce-blocks/packages/checkout/registry/index.ts @@ -90,7 +90,7 @@ const getCheckoutFilters = ( filterName: string ): CheckoutFilterFunction[] => { export const __experimentalApplyCheckoutFilter = < T >( { filterName, defaultValue, - extensions = {}, + extensions = null, arg = null, validation = returnTrue, }: { @@ -99,7 +99,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 > | 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. */ @@ -111,7 +111,7 @@ export const __experimentalApplyCheckoutFilter = < T >( { let value = defaultValue; filters.forEach( ( filter ) => { try { - const newValue = filter( value, extensions, arg ); + const newValue = filter( value, extensions || {}, arg ); if ( typeof newValue !== typeof value ) { throw new Error( sprintf(