Upgrade wp-prettier to 2.6.2 and reformat the codebase (https://github.com/woocommerce/woocommerce-blocks/pull/6566)

* Remove mixed tabs and spaces in tsconfig.json

* Update formatting in json files

* Upgrade wp-prettier to 2.6.2

plugins/woocommerce-blocks/.markdownlint.json

@@ -1,5 +1,3 @@
-
-
 {
 	"default": true,
 	"MD003": { "style": "atx" },
@@ -9,7 +7,7 @@
 	"MD025": false,
 	"MD029": false,
 	"MD033": false,
-	"MD046": {"style": "fenced"},
+	"MD046": { "style": "fenced" },
 	"no-hard-tabs": false,
 	"whitespace": false
 }

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/block.js

@@ -37,9 +37,8 @@ const Block = ( { className, showFormElements } ) => {
 		className,
 		'wc-block-components-product-add-to-cart',
 		{
-			'wc-block-components-product-add-to-cart--placeholder': isEmpty(
+			'wc-block-components-product-add-to-cart--placeholder':
-				product
+				isEmpty( product ),
-			),
 		}
 	);
 

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/attribute-select-control.js

@@ -32,11 +32,8 @@ const AttributeSelectControl = ( {
 		'woo-gutenberg-products-block'
 	),
 } ) => {
-	const {
+	const { getValidationError, setValidationErrors, clearValidationError } =
-		getValidationError,
+		useValidationContext();
-		setValidationErrors,
-		clearValidationError,
-	} = useValidationContext();
 	const errorId = attributeName;
 	const error = getValidationError( errorId ) || {};
 
@@ -60,10 +57,10 @@ const AttributeSelectControl = ( {
 	] );
 
 	// Remove validation errors when unmounted.
-	useEffect( () => () => void clearValidationError( errorId ), [
+	useEffect(
-		errorId,
+		() => () => void clearValidationError( errorId ),
-		clearValidationError,
+		[ errorId, clearValidationError ]
-	] );
+	);
 
 	return (
 		<div className="wc-block-components-product-add-to-cart-attribute-picker__container">

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/shared/add-to-cart-button.js

@@ -45,7 +45,8 @@ const AddToCartButton = () => {
 			}
 			return true;
 		};
-		const unsubscribeProcessing = eventRegistration.onAddToCartAfterProcessingWithSuccess(
+		const unsubscribeProcessing =
+			eventRegistration.onAddToCartAfterProcessingWithSuccess(
 				onSuccess,
 				0
 			);

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/block.js

@@ -52,7 +52,8 @@ const Block = ( props ) => {
 				'wp-block-button',
 				'wc-block-components-product-button',
 				{
-					[ `${ parentClassName }__product-add-to-cart` ]: parentClassName,
+					[ `${ parentClassName }__product-add-to-cart` ]:
+						parentClassName,
 				}
 			) }
 		>

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/block.tsx

@@ -49,7 +49,8 @@ const Block = ( props: Props ): JSX.Element | null => {
 				'wc-block-components-product-category-list',
 				colorProps.className,
 				{
-					[ `${ parentClassName }__product-category-list` ]: parentClassName,
+					[ `${ parentClassName }__product-category-list` ]:
+						parentClassName,
 				}
 			) }
 			style={ { ...colorProps.style, ...typographyProps.style } }

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/block.js

@@ -60,7 +60,8 @@ export const Block = ( props ) => {
 					className,
 					'wc-block-components-product-image',
 					{
-						[ `${ parentClassName }__product-image` ]: parentClassName,
+						[ `${ parentClassName }__product-image` ]:
+							parentClassName,
 					},
 					borderProps.className
 				) }

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/edit.js

@@ -23,12 +23,8 @@ import withProductSelector from '../shared/with-product-selector';
 import { BLOCK_TITLE, BLOCK_ICON } from './constants';
 
 const Edit = ( { attributes, setAttributes } ) => {
-	const {
+	const { showProductLink, imageSizing, showSaleBadge, saleBadgeAlign } =
-		showProductLink,
+		attributes;
-		imageSizing,
-		showSaleBadge,
-		saleBadgeAlign,
-	} = attributes;
 
 	const blockProps = useBlockProps();
 

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/test/block.test.js

@@ -46,8 +46,7 @@ const productWithImages = {
 			id: 56,
 			src: 'logo-1.jpg',
 			thumbnail: 'logo-1-324x324.jpg',
-			srcset:
+			srcset: 'logo-1.jpg 800w, logo-1-300x300.jpg 300w, logo-1-150x150.jpg 150w, logo-1-768x767.jpg 768w, logo-1-324x324.jpg 324w, logo-1-416x415.jpg 416w, logo-1-100x100.jpg 100w',
-				'logo-1.jpg 800w, logo-1-300x300.jpg 300w, logo-1-150x150.jpg 150w, logo-1-768x767.jpg 768w, logo-1-324x324.jpg 324w, logo-1-416x415.jpg 416w, logo-1-100x100.jpg 100w',
 			sizes: '(max-width: 800px) 100vw, 800px',
 			name: 'logo-1.jpg',
 			alt: '',
@@ -56,8 +55,7 @@ const productWithImages = {
 			id: 55,
 			src: 'beanie-with-logo-1.jpg',
 			thumbnail: 'beanie-with-logo-1-324x324.jpg',
-			srcset:
+			srcset: 'beanie-with-logo-1.jpg 800w, beanie-with-logo-1-300x300.jpg 300w, beanie-with-logo-1-150x150.jpg 150w, beanie-with-logo-1-768x768.jpg 768w, beanie-with-logo-1-324x324.jpg 324w, beanie-with-logo-1-416x416.jpg 416w, beanie-with-logo-1-100x100.jpg 100w',
-				'beanie-with-logo-1.jpg 800w, beanie-with-logo-1-300x300.jpg 300w, beanie-with-logo-1-150x150.jpg 150w, beanie-with-logo-1-768x768.jpg 768w, beanie-with-logo-1-324x324.jpg 324w, beanie-with-logo-1-416x416.jpg 416w, beanie-with-logo-1-100x100.jpg 100w',
 			sizes: '(max-width: 800px) 100vw, 800px',
 			name: 'beanie-with-logo-1.jpg',
 			alt: '',

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/block.js

@@ -79,7 +79,8 @@ const Block = ( props ) => {
 			// This is the regular or original price when the `price` value is a sale price.
 			regularPrice={ prices.regular_price }
 			regularPriceClassName={ classnames( {
-				[ `${ parentClassName }__product-price__regular` ]: parentClassName,
+				[ `${ parentClassName }__product-price__regular` ]:
+					parentClassName,
 			} ) }
 		/>
 	);

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/block.js

@@ -48,11 +48,16 @@ const Block = ( props ) => {
 				colorProps.className,
 				'wc-block-components-product-stock-indicator',
 				{
-					[ `${ parentClassName }__stock-indicator` ]: parentClassName,
+					[ `${ parentClassName }__stock-indicator` ]:
-					'wc-block-components-product-stock-indicator--in-stock': inStock,
+						parentClassName,
-					'wc-block-components-product-stock-indicator--out-of-stock': ! inStock,
+					'wc-block-components-product-stock-indicator--in-stock':
-					'wc-block-components-product-stock-indicator--low-stock': !! lowStock,
+						inStock,
-					'wc-block-components-product-stock-indicator--available-on-backorder': !! isBackordered,
+					'wc-block-components-product-stock-indicator--out-of-stock':
+						! inStock,
+					'wc-block-components-product-stock-indicator--low-stock':
+						!! lowStock,
+					'wc-block-components-product-stock-indicator--available-on-backorder':
+						!! isBackordered,
 				}
 			) }
 			style={ { ...colorProps.style, ...typographyProps.style } }

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/summary/block.js

@@ -43,7 +43,8 @@ const Block = ( props ) => {
 					className,
 					`wc-block-components-product-summary`,
 					{
-						[ `${ parentClassName }__product-summary` ]: parentClassName,
+						[ `${ parentClassName }__product-summary` ]:
+							parentClassName,
 					}
 				) }
 			/>
@@ -65,7 +66,8 @@ const Block = ( props ) => {
 				colorProps.className,
 				`wc-block-components-product-summary`,
 				{
-					[ `${ parentClassName }__product-summary` ]: parentClassName,
+					[ `${ parentClassName }__product-summary` ]:
+						parentClassName,
 				}
 			) }
 			source={ source }

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/block.js

@@ -45,7 +45,8 @@ const Block = ( props ) => {
 				colorProps.className,
 				'wc-block-components-product-tag-list',
 				{
-					[ `${ parentClassName }__product-tag-list` ]: parentClassName,
+					[ `${ parentClassName }__product-tag-list` ]:
+						parentClassName,
 				}
 			) }
 			style={ { ...colorProps.style, ...typographyProps.style } }

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/block.tsx

@@ -33,7 +33,8 @@ interface TagNameProps extends HTMLAttributes< HTMLOrSVGElement > {
 const TagName = ( {
 	children,
 	headingLevel,
-	elementType: ElementType = `h${ headingLevel }` as keyof JSX.IntrinsicElements,
+	elementType:
+		ElementType = `h${ headingLevel }` as keyof JSX.IntrinsicElements,
 	...props
 }: TagNameProps ): JSX.Element => {
 	return <ElementType { ...props }>{ children }</ElementType>;
@@ -77,7 +78,8 @@ export const Block = ( props: Props ): JSX.Element => {
 					colorProps.className,
 					'wc-block-components-product-title',
 					{
-						[ `${ parentClassName }__product-title` ]: parentClassName,
+						[ `${ parentClassName }__product-title` ]:
+							parentClassName,
 						[ `wc-block-components-product-title--align-${ align }` ]:
 							align && isFeaturePluginBuild(),
 					}

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/address-form/address-form.tsx

@@ -78,20 +78,17 @@ interface AddressFormProps {
  */
 const AddressForm = ( {
 	id = '',
-	fields = ( Object.keys(
+	fields = Object.keys(
 		defaultAddressFields
-	) as unknown ) as ( keyof AddressFields )[],
+	) as unknown as ( keyof AddressFields )[],
 	fieldConfig = {} as Record< keyof AddressFields, Partial< AddressField > >,
 	instanceId,
 	onChange,
 	type = 'shipping',
 	values,
 }: AddressFormProps ): JSX.Element => {
-	const {
+	const { getValidationError, setValidationErrors, clearValidationError } =
-		getValidationError,
+		useValidationContext();
-		setValidationErrors,
-		clearValidationError,
-	} = useValidationContext();
 
 	const currentFields = useShallowEqual( fields );
 

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/address-form/test/index.js

@@ -81,11 +81,8 @@ const inputAddress = async ( {
 
 describe( 'AddressForm Component', () => {
 	const WrappedAddressForm = ( { type } ) => {
-		const {
+		const { defaultAddressFields, setShippingAddress, shippingAddress } =
-			defaultAddressFields,
+			useCheckoutAddress();
-			setShippingAddress,
-			shippingAddress,
-		} = useCheckoutAddress();
 
 		return (
 			<AddressForm

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/index.tsx

@@ -64,7 +64,8 @@ const FormStep = ( {
 				className,
 				'wc-block-components-checkout-step',
 				{
-					'wc-block-components-checkout-step--with-step-number': showStepNumber,
+					'wc-block-components-checkout-step--with-step-number':
+						showStepNumber,
 					'wc-block-components-checkout-step--disabled': disabled,
 				}
 			) }

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-calculator/address.tsx

@@ -25,10 +25,8 @@ const ShippingCalculatorAddress = ( {
 	addressFields,
 }: ShippingCalculatorAddressProps ): JSX.Element => {
 	const [ address, setAddress ] = useState( initialAddress );
-	const {
+	const { hasValidationErrors, showAllValidationErrors } =
-		hasValidationErrors,
+		useValidationContext();
-		showAllValidationErrors,
-	} = useValidationContext();
 
 	const validateSubmit = () => {
 		showAllValidationErrors();

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/package-rates.tsx

@@ -62,12 +62,8 @@ const PackageRates = ( {
 		);
 	}
 
-	const {
+	const { label, secondaryLabel, description, secondaryDescription } =
-		label,
+		renderOption( rates[ 0 ] );
-		secondaryLabel,
-		description,
-		secondaryDescription,
-	} = renderOption( rates[ 0 ] );
 
 	return (
 		<RadioControlOptionLayout

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/stories/index.tsx

@@ -21,8 +21,7 @@ const NZD: Currency = {
 };
 
 export default {
-	title:
+	title: 'WooCommerce Blocks/@base-components/cart-checkout/totals/FooterItem',
-		'WooCommerce Blocks/@base-components/cart-checkout/totals/FooterItem',
 	component: FooterItem,
 	args: {
 		currency: NZD,

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

@@ -131,9 +131,8 @@ export const TotalsShipping = ( {
 	isCheckout = false,
 	className,
 }: TotalShippingProps ): ReactElement => {
-	const [ isShippingCalculatorOpen, setIsShippingCalculatorOpen ] = useState(
+	const [ isShippingCalculatorOpen, setIsShippingCalculatorOpen ] =
-		false
+		useState( false );
-	);
 	const {
 		shippingAddress,
 		cartHasCalculatedShipping,

plugins/woocommerce-blocks/assets/js/base/components/combobox/index.tsx

@@ -55,11 +55,8 @@ const Combobox = ( {
 	instanceId = '0',
 	autoComplete = 'off',
 }: ComboboxProps ): JSX.Element => {
-	const {
+	const { getValidationError, setValidationErrors, clearValidationError } =
-		getValidationError,
+		useValidationContext();
-		setValidationErrors,
-		clearValidationError,
-	} = useValidationContext();
 
 	const controlRef = useRef< HTMLDivElement >( null );
 	const controlId = id || 'control-' + instanceId;
@@ -126,7 +123,8 @@ const Combobox = ( {
 						}
 
 						// Try to match.
-						const normalizedFilterValue = filterValue.toLocaleUpperCase();
+						const normalizedFilterValue =
+							filterValue.toLocaleUpperCase();
 						const foundOption = options.find(
 							( option ) =>
 								option.label

plugins/woocommerce-blocks/assets/js/base/components/country-input/country-input.tsx

@@ -64,7 +64,8 @@ export const CountryInput = ( {
 					autoComplete={ autoComplete }
 					value={ value }
 					onChange={ ( event ) => {
-						const textValue = event.target.value.toLocaleUpperCase();
+						const textValue =
+							event.target.value.toLocaleUpperCase();
 						const foundOption = options.find(
 							( option ) =>
 								( textValue.length !== 2 &&

plugins/woocommerce-blocks/assets/js/base/components/country-input/stories/index.tsx

@@ -44,10 +44,8 @@ const Template: Story< CountryInputWithCountriesProps > = ( args ) => {
 	const [ selectedCountry, selectCountry ] = useState< CountryCode | '' >(
 		''
 	);
-	const {
+	const { clearValidationError, showValidationError } =
-		clearValidationError,
+		useValidationContext();
-		showValidationError,
-	} = useValidationContext();
 
 	useEffect( () => {
 		showValidationError( 'country' );

plugins/woocommerce-blocks/assets/js/base/components/drawer/index.tsx

@@ -46,9 +46,12 @@ const Drawer = ( {
 			overlayClassName={ classNames(
 				'wc-block-components-drawer__screen-overlay',
 				{
-					'wc-block-components-drawer__screen-overlay--is-hidden': ! isOpen,
+					'wc-block-components-drawer__screen-overlay--is-hidden':
-					'wc-block-components-drawer__screen-overlay--with-slide-in': slideIn,
+						! isOpen,
-					'wc-block-components-drawer__screen-overlay--with-slide-out': slideOut,
+					'wc-block-components-drawer__screen-overlay--with-slide-in':
+						slideIn,
+					'wc-block-components-drawer__screen-overlay--with-slide-out':
+						slideOut,
 				}
 			) }
 			closeButtonLabel={ __(

plugins/woocommerce-blocks/assets/js/base/components/price-slider/utils.ts

@@ -6,30 +6,36 @@ import type { NumberFormatValues } from 'react-number-format';
 /**
   Check if that the value is minor than the max price and greater than 0.
  */
-export const isValidMaxValue = ( {
+export const isValidMaxValue =
+	( {
 		maxConstraint,
 		minorUnit,
-}: {
+	}: {
 		maxConstraint: number;
 		minorUnit: number;
-} ) => ( { floatValue }: NumberFormatValues ): boolean => {
+	} ) =>
+	( { floatValue }: NumberFormatValues ): boolean => {
 		const maxPrice = maxConstraint / 10 ** minorUnit;
 
-	return floatValue !== undefined && floatValue <= maxPrice && floatValue > 0;
+		return (
-};
+			floatValue !== undefined && floatValue <= maxPrice && floatValue > 0
+		);
+	};
 
 /**
   Check if that the value is minor than the max price and greater than 0.
  */
-export const isValidMinValue = ( {
+export const isValidMinValue =
+	( {
 		minConstraint,
 		currentMaxValue,
 		minorUnit,
-}: {
+	}: {
 		minConstraint: number;
 		currentMaxValue: number;
 		minorUnit: number;
-} ) => ( { floatValue }: NumberFormatValues ): boolean => {
+	} ) =>
+	( { floatValue }: NumberFormatValues ): boolean => {
 		const minPrice = minConstraint / 10 ** minorUnit;
 		const currentMaxPrice = currentMaxValue / 10 ** minorUnit;
 
@@ -38,4 +44,4 @@ export const isValidMinValue = ( {
 			floatValue >= minPrice &&
 			floatValue < currentMaxPrice
 		);
-};
+	};

plugins/woocommerce-blocks/assets/js/base/components/product-list/product-list.tsx

@@ -142,9 +142,8 @@ const ProductList = ( {
 			currentPage,
 		} )
 	);
-	const { products, totalProducts, productsLoading } = useStoreProducts(
+	const { products, totalProducts, productsLoading } =
-		queryState
+		useStoreProducts( queryState );
-	);
 	const { parentClassName, parentName } = useInnerBlockLayoutContext();
 	const totalQuery = extractPaginationAndSortAttributes( queryState );
 	const { dispatchStoreEvent } = useStoreEvents();

plugins/woocommerce-blocks/assets/js/base/components/product-list/types.ts

@@ -37,9 +37,7 @@ export type TotalQuery = Pick< Query, 'catalog_visibility' >;
 
 export type GenerateQuery = ( props: GenerateQueryProps ) => Query;
 
-export type GetSortArgs = (
+export type GetSortArgs = ( orderName: string ) =>
-	orderName: string
-) =>
 	| {
 			orderby: string;
 			order: string;

plugins/woocommerce-blocks/assets/js/base/components/radio-control-accordion/index.js

@@ -54,7 +54,8 @@ const RadioControlAccordion = ( {
 									className={ classnames(
 										'wc-block-components-radio-control-accordion-content',
 										{
-											'wc-block-components-radio-control-accordion-content-hide': ! checked,
+											'wc-block-components-radio-control-accordion-content-hide':
+												! checked,
 										}
 									) }
 								>

plugins/woocommerce-blocks/assets/js/base/components/radio-control/option.tsx

@@ -15,13 +15,8 @@ const Option = ( {
 	onChange,
 	option,
 }: RadioControlOptionProps ): JSX.Element => {
-	const {
+	const { value, label, description, secondaryLabel, secondaryDescription } =
-		value,
+		option;
-		label,
-		description,
-		secondaryLabel,
-		secondaryDescription,
-	} = option;
 	const onChangeValue = ( event: React.ChangeEvent< HTMLInputElement > ) =>
 		onChange( event.target.value );
 
@@ -30,7 +25,8 @@ const Option = ( {
 			className={ classnames(
 				'wc-block-components-radio-control__option',
 				{
-					'wc-block-components-radio-control__option-checked': checked,
+					'wc-block-components-radio-control__option-checked':
+						checked,
 				}
 			) }
 			htmlFor={ `${ name }-${ value }` }
@@ -47,7 +43,8 @@ const Option = ( {
 					[ `${ name }-${ value }__label` ]: label,
 					[ `${ name }-${ value }__secondary-label` ]: secondaryLabel,
 					[ `${ name }-${ value }__description` ]: description,
-					[ `${ name }-${ value }__secondary-description` ]: secondaryDescription,
+					[ `${ name }-${ value }__secondary-description` ]:
+						secondaryDescription,
 				} ) }
 			/>
 			<OptionLayout

plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list-item/index.js

@@ -168,7 +168,8 @@ const ReviewListItem = ( { attributes, review = {} } ) => {
 				'wc-block-components-review-list-item__item',
 				{
 					'is-loading': isLoading,
-					'wc-block-components-review-list-item__item--has-image': showReviewImage,
+					'wc-block-components-review-list-item__item--has-image':
+						showReviewImage,
 				}
 			) }
 			aria-hidden={ isLoading }

plugins/woocommerce-blocks/assets/js/base/context/event-emit/emitter-callback.ts

@@ -4,13 +4,12 @@
 import { actions } from './reducer';
 import type { ActionType, ActionCallbackType } from './types';
 
-export const emitterCallback = (
+export const emitterCallback =
-	type: string,
+	( type: string, observerDispatch: React.Dispatch< ActionType > ) =>
-	observerDispatch: React.Dispatch< ActionType >
+	( callback: ActionCallbackType, priority = 10 ): ( () => void ) => {
-) => ( callback: ActionCallbackType, priority = 10 ): ( () => void ) => {
 		const action = actions.addEventCallback( type, callback, priority );
 		observerDispatch( action );
 		return () => {
 			observerDispatch( actions.removeEventCallback( type, action.id ) );
 		};
-};
+	};

plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/test/use-store-cart-item-quantity.js

@@ -95,10 +95,8 @@ describe( 'useStoreCartItemQuantity', () => {
 				);
 			} );
 
-			//eslint-disable-next-line testing-library/await-async-query
+			const { setItemQuantity, quantity } =
-			const { setItemQuantity, quantity } = renderer.root.findByType(
+				renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
-				'div'
-			).props;
 
 			expect( quantity ).toBe( 1 );
 
@@ -106,10 +104,8 @@ describe( 'useStoreCartItemQuantity', () => {
 				setItemQuantity( 2 );
 			} );
 
-			//eslint-disable-next-line testing-library/await-async-query
+			const { quantity: newQuantity } =
-			const { quantity: newQuantity } = renderer.root.findByType(
+				renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
-				'div'
-			).props;
 
 			expect( newQuantity ).toBe( 2 );
 		} );
@@ -126,8 +122,7 @@ describe( 'useStoreCartItemQuantity', () => {
 				);
 			} );
 
-			//eslint-disable-next-line testing-library/await-async-query
+			const { removeItem } = renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
-			const { removeItem } = renderer.root.findByType( 'div' ).props;
 
 			act( () => {
 				removeItem();
@@ -148,8 +143,7 @@ describe( 'useStoreCartItemQuantity', () => {
 				);
 			} );
 
-			//eslint-disable-next-line testing-library/await-async-query
+			const { setItemQuantity } = renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
-			const { setItemQuantity } = renderer.root.findByType( 'div' ).props;
 
 			act( () => {
 				setItemQuantity( 2 );
@@ -182,10 +176,8 @@ describe( 'useStoreCartItemQuantity', () => {
 			);
 		} );
 
-		//eslint-disable-next-line testing-library/await-async-query
+		const { cartItemQuantityErrors } =
-		const { cartItemQuantityErrors } = renderer.root.findByType(
+			renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
-			'div'
-		).props;
 
 		expect( cartItemQuantityErrors ).toEqual( mockCartErrors );
 	} );
@@ -210,8 +202,7 @@ describe( 'useStoreCartItemQuantity', () => {
 			);
 		} );
 
-		//eslint-disable-next-line testing-library/await-async-query
+		const { isPendingDelete } = renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
-		const { isPendingDelete } = renderer.root.findByType( 'div' ).props;
 
 		expect( isPendingDelete ).toBe( true );
 	} );

plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/test/use-store-cart.js

@@ -189,14 +189,10 @@ describe( 'useStoreCart', () => {
 				);
 			} );
 
-			//eslint-disable-next-line testing-library/await-async-query
+			const { results, receiveCart } =
-			const { results, receiveCart } = renderer.root.findByType(
+				renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
-				'div'
+			const { receiveCart: defaultReceiveCart, ...remaining } =
-			).props;
+				defaultCartData;
-			const {
-				receiveCart: defaultReceiveCart,
-				...remaining
-			} = defaultCartData;
 			expect( results ).toEqual( remaining );
 			expect( receiveCart ).toEqual( defaultReceiveCart );
 		} );
@@ -212,10 +208,8 @@ describe( 'useStoreCart', () => {
 				);
 			} );
 
-			//eslint-disable-next-line testing-library/await-async-query
+			const { results, receiveCart } =
-			const { results, receiveCart } = renderer.root.findByType(
+				renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
-				'div'
-			).props;
 
 			expect( results ).toEqual( mockStoreCartData );
 			expect( receiveCart ).toBeUndefined();
@@ -244,10 +238,8 @@ describe( 'useStoreCart', () => {
 				);
 			} );
 
-			//eslint-disable-next-line testing-library/await-async-query
+			const { results, receiveCart } =
-			const { results, receiveCart } = renderer.root.findByType(
+				renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
-				'div'
-			).props;
 
 			expect( results ).toEqual( previewCartData );
 			expect( receiveCart ).toEqual( receiveCartMock );

plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/use-store-cart-item-quantity.ts

@@ -51,10 +51,8 @@ export const useStoreCartItemQuantity = (
 		verifiedCartItem.key = cartItem.key;
 		verifiedCartItem.quantity = cartItem.quantity;
 	}
-	const {
+	const { key: cartItemKey = '', quantity: cartItemQuantity = 1 } =
-		key: cartItemKey = '',
+		verifiedCartItem;
-		quantity: cartItemQuantity = 1,
-	} = verifiedCartItem;
 	const { cartErrors } = useStoreCart();
 	const { dispatchActions } = useCheckoutContext();
 
@@ -62,9 +60,8 @@ export const useStoreCartItemQuantity = (
 	const [ quantity, setQuantity ] = useState< number >( cartItemQuantity );
 	const [ debouncedQuantity ] = useDebounce< number >( quantity, 400 );
 	const previousDebouncedQuantity = usePrevious( debouncedQuantity );
-	const { removeItemFromCart, changeCartItemQuantity } = useDispatch(
+	const { removeItemFromCart, changeCartItemQuantity } =
-		storeKey
+		useDispatch( storeKey );
-	);
 
 	// Update local state when server updates.
 	useEffect( () => setQuantity( cartItemQuantity ), [ cartItemQuantity ] );

plugins/woocommerce-blocks/assets/js/base/context/hooks/cart/use-store-cart.ts

@@ -179,9 +179,8 @@ export const useStoreCart = (
 			const cartData = store.getCartData();
 			const cartErrors = store.getCartErrors();
 			const cartTotals = store.getCartTotals();
-			const cartIsLoading = ! store.hasFinishedResolution(
+			const cartIsLoading =
-				'getCartData'
+				! store.hasFinishedResolution( 'getCartData' );
-			);
 
 			const isLoadingRates = store.isCustomerDataUpdating();
 			const { receiveCart } = dispatch( storeKey );

plugins/woocommerce-blocks/assets/js/base/context/hooks/collections/test/use-collection.js

@@ -38,10 +38,8 @@ class TestErrorBoundary extends ReactComponent {
 describe( 'useCollection', () => {
 	let registry, mocks, renderer;
 	const getProps = ( testRenderer ) => {
-		//eslint-disable-next-line testing-library/await-async-query
+		const { results, isLoading } =
-		const { results, isLoading } = testRenderer.root.findByType(
+			testRenderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
-			'div'
-		).props;
 		return {
 			results,
 			isLoading,
@@ -56,7 +54,9 @@ describe( 'useCollection', () => {
 		</RegistryProvider>
 	);
 
-	const getTestComponent = () => ( { options } ) => {
+	const getTestComponent =
+		() =>
+		( { options } ) => {
 			const items = useCollection( options );
 			return <div { ...items } />;
 		};

plugins/woocommerce-blocks/assets/js/base/context/hooks/collections/use-collection-data.ts

@@ -57,14 +57,10 @@ export const useCollectionData = ( {
 	context = `${ context }-collection-data`;
 
 	const [ collectionDataQueryState ] = useQueryStateByContext( context );
-	const [
+	const [ calculateAttributesQueryState, setCalculateAttributesQueryState ] =
-		calculateAttributesQueryState,
+		useQueryStateByKey( 'calculate_attribute_counts', [], context );
-		setCalculateAttributesQueryState,
+	const [ calculatePriceRangeQueryState, setCalculatePriceRangeQueryState ] =
-	] = useQueryStateByKey( 'calculate_attribute_counts', [], context );
+		useQueryStateByKey( 'calculate_price_range', null, context );
-	const [
-		calculatePriceRangeQueryState,
-		setCalculatePriceRangeQueryState,
-	] = useQueryStateByKey( 'calculate_price_range', null, context );
 	const [
 		calculateStockStatusQueryState,
 		setCalculateStockStatusQueryState,

plugins/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts

@@ -64,11 +64,8 @@ export const usePaymentMethodInterface = (): PaymentMethodInterface => {
 		selectShippingRate,
 		needsShipping,
 	} = useShippingData();
-	const {
+	const { billingAddress, shippingAddress, setShippingAddress } =
-		billingAddress,
+		useCustomerDataContext();
-		shippingAddress,
-		setShippingAddress,
-	} = useCustomerDataContext();
 	const { cartItems, cartFees, cartTotals, extensions } = useStoreCart();
 	const { appliedCoupons } = useStoreCartCoupons();
 	const { noticeContexts, responseTypes } = useEmitResponse();
@@ -98,8 +95,7 @@ export const usePaymentMethodInterface = (): PaymentMethodInterface => {
 				{
 					alternative: '',
 					plugin: 'woocommerce-gutenberg-products-block',
-					link:
+					link: 'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4228',
-						'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4228',
 				}
 			);
 			setExpressPaymentError( errorMessage );

plugins/woocommerce-blocks/assets/js/base/context/hooks/shipping/use-select-shipping-rate.ts

@@ -23,11 +23,11 @@ export const useSelectShippingRate = (): SelectShippingRateType => {
 	const throwError = useThrowError();
 	const { dispatchCheckoutEvent } = useStoreEvents();
 
-	const { selectShippingRate: dispatchSelectShippingRate } = ( useDispatch(
+	const { selectShippingRate: dispatchSelectShippingRate } = useDispatch(
 		storeKey
 	) as {
 		selectShippingRate: unknown;
-	} ) as {
+	} as {
 		selectShippingRate: (
 			newShippingRateId: string,
 			packageId: string | number

plugins/woocommerce-blocks/assets/js/base/context/hooks/shipping/use-shipping-data.ts

@@ -43,9 +43,8 @@ export const useShippingData = (): ShippingData => {
 	// set selected rates on ref so it's always current.
 	const selectedRates = useRef< Record< string, unknown > >( {} );
 	useEffect( () => {
-		const derivedSelectedRates = deriveSelectedShippingRates(
+		const derivedSelectedRates =
-			shippingRates
+			deriveSelectedShippingRates( shippingRates );
-		);
 		if (
 			isObject( derivedSelectedRates ) &&
 			! isShallowEqual( selectedRates.current, derivedSelectedRates )

plugins/woocommerce-blocks/assets/js/base/context/hooks/test/use-store-products.js

@@ -18,11 +18,8 @@ jest.mock( '@woocommerce/block-data', () => ( {
 describe( 'useStoreProducts', () => {
 	let registry, mocks, renderer;
 	const getProps = ( testRenderer ) => {
-		const {
+		const { products, totalProducts, productsLoading } =
-			products,
+			testRenderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
-			totalProducts,
-			productsLoading,
-		} = testRenderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
 		return {
 			products,
 			totalProducts,
@@ -36,7 +33,9 @@ describe( 'useStoreProducts', () => {
 		</RegistryProvider>
 	);
 
-	const getTestComponent = () => ( { query } ) => {
+	const getTestComponent =
+		() =>
+		( { query } ) => {
 			const items = useStoreProducts( query );
 			return <div { ...items } />;
 		};

plugins/woocommerce-blocks/assets/js/base/context/hooks/use-checkout-address.ts

@@ -37,10 +37,8 @@ interface CheckoutAddress {
  */
 export const useCheckoutAddress = (): CheckoutAddress => {
 	const { needsShipping } = useShippingData();
-	const {
+	const { useShippingAsBilling, setUseShippingAsBilling } =
-		useShippingAsBilling,
+		useCheckoutContext();
-		setUseShippingAsBilling,
-	} = useCheckoutContext();
 	const {
 		billingAddress,
 		setBillingAddress,

plugins/woocommerce-blocks/assets/js/base/context/hooks/use-checkout-submit.js

@@ -25,10 +25,8 @@ export const useCheckoutSubmit = () => {
 		hasError,
 	} = useCheckoutContext();
 	const { paymentMethods = {} } = usePaymentMethods();
-	const {
+	const { activePaymentMethod, currentStatus: paymentStatus } =
-		activePaymentMethod,
+		usePaymentMethodDataContext();
-		currentStatus: paymentStatus,
-	} = usePaymentMethodDataContext();
 	const paymentMethod = paymentMethods[ activePaymentMethod ] || {};
 	const waitingForProcessing =
 		isProcessing || isAfterProcessing || isBeforeProcessing;

plugins/woocommerce-blocks/assets/js/base/context/hooks/use-validation.ts

@@ -46,12 +46,12 @@ export const useValidation = (): ValidationData => {
 			( errorsObject: Record< string, ValidationContextError > ) =>
 				setValidationErrors(
 					Object.fromEntries(
-						Object.entries(
+						Object.entries( errorsObject ).map(
-							errorsObject
+							( [ validationErrorId, error ] ) => [
-						).map( ( [ validationErrorId, error ] ) => [
 								`${ prefix }-${ validationErrorId }`,
 								error,
-						] )
+							]
+						)
 					)
 				),
 			[ setValidationErrors ]

plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/form-state/index.js

@@ -101,24 +101,22 @@ export const AddToCartFormStateContextProvider = ( {
 	const currentObservers = useShallowEqual( observers );
 	const { createErrorNotice } = useDispatch( 'core/notices' );
 	const { setValidationErrors } = useValidationContext();
-	const {
+	const { isSuccessResponse, isErrorResponse, isFailResponse } =
-		isSuccessResponse,
+		useEmitResponse();
-		isErrorResponse,
-		isFailResponse,
-	} = useEmitResponse();
 
 	/**
 	 * @type {AddToCartFormEventRegistration}
 	 */
 	const eventRegistration = useMemo(
 		() => ( {
-			onAddToCartAfterProcessingWithSuccess: emitterObservers(
+			onAddToCartAfterProcessingWithSuccess:
-				observerDispatch
+				emitterObservers( observerDispatch )
-			).onAddToCartAfterProcessingWithSuccess,
+					.onAddToCartAfterProcessingWithSuccess,
-			onAddToCartAfterProcessingWithError: emitterObservers(
+			onAddToCartAfterProcessingWithError:
-				observerDispatch
+				emitterObservers( observerDispatch )
-			).onAddToCartAfterProcessingWithError,
+					.onAddToCartAfterProcessingWithError,
-			onAddToCartBeforeProcessing: emitterObservers( observerDispatch )
+			onAddToCartBeforeProcessing:
+				emitterObservers( observerDispatch )
 					.onAddToCartBeforeProcessing,
 		} ),
 		[ observerDispatch ]

plugins/woocommerce-blocks/assets/js/base/context/providers/add-to-cart-form/form/submit/index.js

@@ -30,10 +30,8 @@ const FormSubmit = () => {
 		isProcessing,
 		requestParams,
 	} = useAddToCartFormContext();
-	const {
+	const { hasValidationErrors, showAllValidationErrors } =
-		hasValidationErrors,
+		useValidationContext();
-		showAllValidationErrors,
-	} = useValidationContext();
 	const { createErrorNotice, removeNotice } = useDispatch( 'core/notices' );
 	const { receiveCart } = useStoreCart();
 	const [ isSubmitting, setIsSubmitting ] = useState( false );
@@ -51,7 +49,8 @@ const FormSubmit = () => {
 
 	// Subscribe to emitter before processing.
 	useEffect( () => {
-		const unsubscribeProcessing = eventRegistration.onAddToCartBeforeProcessing(
+		const unsubscribeProcessing =
+			eventRegistration.onAddToCartBeforeProcessing(
 				checkValidationContext,
 				0
 			);

plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/checkout-state/index.tsx

@@ -81,17 +81,10 @@ export const CheckoutStateProvider = ( {
 
 	const { dispatchCheckoutEvent } = useStoreEvents();
 	const isCalculating = checkoutState.calculatingCount > 0;
-	const {
+	const { isSuccessResponse, isErrorResponse, isFailResponse, shouldRetry } =
-		isSuccessResponse,
+		useEmitResponse();
-		isErrorResponse,
+	const { checkoutNotices, paymentNotices, expressPaymentNotices } =
-		isFailResponse,
+		useCheckoutNotices();
-		shouldRetry,
-	} = useEmitResponse();
-	const {
-		checkoutNotices,
-		paymentNotices,
-		expressPaymentNotices,
-	} = useCheckoutNotices();
 
 	const [ observers, observerDispatch ] = useReducer( emitReducer, {} );
 	const currentObservers = useRef( observers );
@@ -147,9 +140,8 @@ export const CheckoutStateProvider = ( {
 			setExtensionData: ( extensionData ) =>
 				void dispatch( actions.setExtensionData( extensionData ) ),
 			setAfterProcessing: ( response ) => {
-				const paymentResult = getPaymentResultFromCheckoutResponse(
+				const paymentResult =
-					response
+					getPaymentResultFromCheckoutResponse( response );
-				);
 				dispatch(
 					actions.setRedirectUrl( paymentResult?.redirectUrl || '' )
 				);
@@ -244,9 +236,8 @@ export const CheckoutStateProvider = ( {
 					EMIT_TYPES.CHECKOUT_AFTER_PROCESSING_WITH_ERROR,
 					data
 				).then( ( observerResponses ) => {
-					const errorResponse = handleErrorResponse(
+					const errorResponse =
-						observerResponses
+						handleErrorResponse( observerResponses );
-					);
 					if ( errorResponse !== null ) {
 						// irrecoverable error so set complete
 						if ( ! shouldRetry( errorResponse ) ) {

plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/checkout-state/utils.ts

@@ -33,9 +33,8 @@ export const getPaymentResultFromCheckoutResponse = (
 		) {
 			response.payment_result.payment_details.forEach(
 				( { key, value }: { key: string; value: string } ) => {
-					paymentResult.paymentDetails[ key ] = decodeEntities(
+					paymentResult.paymentDetails[ key ] =
-						value
+						decodeEntities( value );
-					);
 				}
 			);
 		}

plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/payment-methods/constants.ts

@@ -24,7 +24,8 @@ export enum ACTION {
 }
 
 // Note - if fields are added/shape is changed, you may want to update PRISTINE reducer clause to preserve your new field.
-export const DEFAULT_PAYMENT_DATA_CONTEXT_STATE: PaymentMethodDataContextState = {
+export const DEFAULT_PAYMENT_DATA_CONTEXT_STATE: PaymentMethodDataContextState =
+	{
 		currentStatus: STATUS.PRISTINE,
 		shouldSavePaymentMethod: false,
 		activePaymentMethod: '',
@@ -34,7 +35,7 @@ export const DEFAULT_PAYMENT_DATA_CONTEXT_STATE: PaymentMethodDataContextState =
 		errorMessage: '',
 		paymentMethods: {},
 		expressPaymentMethods: {},
-};
+	};
 
 export const DEFAULT_PAYMENT_METHOD_DATA: PaymentMethodDataContextType = {
 	setPaymentStatus: () => ( {

plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx

@@ -70,9 +70,8 @@ export const PaymentMethodDataProvider = ( {
 	} = useCheckoutContext();
 	const { isEditor, getPreviewData } = useEditorContext();
 	const { setValidationErrors } = useValidationContext();
-	const { createErrorNotice: addErrorNotice, removeNotice } = useDispatch(
+	const { createErrorNotice: addErrorNotice, removeNotice } =
-		'core/notices'
+		useDispatch( 'core/notices' );
-	);
 	const {
 		isSuccessResponse,
 		isErrorResponse,
@@ -93,10 +92,8 @@ export const PaymentMethodDataProvider = ( {
 		DEFAULT_PAYMENT_DATA_CONTEXT_STATE
 	);
 
-	const {
+	const { dispatchActions, setPaymentStatus } =
-		dispatchActions,
+		usePaymentMethodDataDispatchers( dispatch );
-		setPaymentStatus,
-	} = usePaymentMethodDataDispatchers( dispatch );
 
 	const paymentMethodsInitialized = usePaymentMethods(
 		dispatchActions.setRegisteredPaymentMethods

plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/payment-methods/test/payment-method-data-context.js

@@ -230,10 +230,8 @@ describe( 'Testing Payment Method Data Context Provider with saved cards turned
 
 	it( 'resets saved payment method data after starting and closing an express payment method', async () => {
 		const TriggerActiveExpressPaymentMethod = () => {
-			const {
+			const { activePaymentMethod, paymentMethodData } =
-				activePaymentMethod,
+				usePaymentMethodDataContext();
-				paymentMethodData,
-			} = usePaymentMethodDataContext();
 			return (
 				<>
 					<CheckoutExpressPayment />

plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/payment-methods/use-payment-method-registration.ts

@@ -216,13 +216,14 @@ const usePaymentMethodRegistration = (
 export const usePaymentMethods = (
 	dispatcher: PaymentMethodsDispatcherType
 ): boolean => {
-	const standardMethods: PaymentMethods = getPaymentMethods() as PaymentMethods;
+	const standardMethods: PaymentMethods =
+		getPaymentMethods() as PaymentMethods;
 	const { noticeContexts } = useEmitResponse();
 	// Ensure all methods are present in order.
 	// Some payment methods may not be present in paymentGatewaySortOrder if they
 	// depend on state, e.g. COD can depend on shipping method.
 	const displayOrder = new Set( [
-		...( getSetting( 'paymentGatewaySortOrder', [] ) as [  ] ),
+		...( getSetting( 'paymentGatewaySortOrder', [] ) as [] ),
 		...Object.keys( standardMethods ),
 	] );
 	return usePaymentMethodRegistration(
@@ -243,7 +244,8 @@ export const usePaymentMethods = (
 export const useExpressPaymentMethods = (
 	dispatcher: PaymentMethodsDispatcherType
 ): boolean => {
-	const expressMethods: ExpressPaymentMethods = getExpressPaymentMethods() as ExpressPaymentMethods;
+	const expressMethods: ExpressPaymentMethods =
+		getExpressPaymentMethods() as ExpressPaymentMethods;
 	const { noticeContexts } = useEmitResponse();
 	return usePaymentMethodRegistration(
 		dispatcher,

plugins/woocommerce-blocks/assets/js/base/context/providers/cart-checkout/shipping/index.js

@@ -61,13 +61,13 @@ export const ShippingDataProvider = ( { children } ) => {
 	const currentObservers = useRef( observers );
 	const eventObservers = useMemo(
 		() => ( {
-			onShippingRateSuccess: emitterObservers( observerDispatch )
+			onShippingRateSuccess:
-				.onSuccess,
+				emitterObservers( observerDispatch ).onSuccess,
 			onShippingRateFail: emitterObservers( observerDispatch ).onFail,
-			onShippingRateSelectSuccess: emitterObservers( observerDispatch )
+			onShippingRateSelectSuccess:
-				.onSelectSuccess,
+				emitterObservers( observerDispatch ).onSelectSuccess,
-			onShippingRateSelectFail: emitterObservers( observerDispatch )
+			onShippingRateSelectFail:
-				.onSelectFail,
+				emitterObservers( observerDispatch ).onSelectFail,
 		} ),
 		[ observerDispatch ]
 	);

plugins/woocommerce-blocks/assets/js/base/hocs/with-reviews.js

@@ -92,13 +92,8 @@ const withReviews = ( OriginalComponent ) => {
 		}
 
 		getArgs( reviewsToSkip ) {
-			const {
+			const { categoryIds, order, orderby, productId, reviewsToDisplay } =
-				categoryIds,
+				this.props;
-				order,
-				orderby,
-				productId,
-				reviewsToDisplay,
-			} = this.props;
 			const args = {
 				order,
 				orderby,
@@ -214,9 +209,8 @@ const withReviews = ( OriginalComponent ) => {
 		}
 	}
 
-	const {
+	const { displayName = OriginalComponent.name || 'Component' } =
-		displayName = OriginalComponent.name || 'Component',
+		OriginalComponent;
-	} = OriginalComponent;
 	WrappedComponent.displayName = `WithReviews( ${ displayName } )`;
 
 	return WrappedComponent;

plugins/woocommerce-blocks/assets/js/base/hooks/test/use-position-relative-to-viewport.js

@@ -11,10 +11,8 @@ import { usePositionRelativeToViewport } from '../use-position-relative-to-viewp
 describe( 'usePositionRelativeToViewport', () => {
 	function setup() {
 		const TestComponent = () => {
-			const [
+			const [ referenceElement, positionRelativeToViewport ] =
-				referenceElement,
+				usePositionRelativeToViewport();
-				positionRelativeToViewport,
-			] = usePositionRelativeToViewport();
 
 			return (
 				<>

plugins/woocommerce-blocks/assets/js/base/hooks/test/use-previous.js

@@ -25,8 +25,8 @@ describe( 'usePrevious', () => {
 			renderer = TestRenderer.create( <TestComponent testValue={ 1 } /> );
 		} );
 		const testValue = renderer.root.findByType( 'div' ).props.testValue;
-		const testPreviousValue = renderer.root.findByType( 'div' ).props
+		const testPreviousValue =
-			.previousValue;
+			renderer.root.findByType( 'div' ).props.previousValue;
 
 		expect( testValue ).toBe( 1 );
 		expect( testPreviousValue ).toBe( undefined );
@@ -43,8 +43,8 @@ describe( 'usePrevious', () => {
 			renderer.update( <TestComponent testValue={ 2 } /> );
 		} );
 		testValue = renderer.root.findByType( 'div' ).props.testValue;
-		testPreviousValue = renderer.root.findByType( 'div' ).props
+		testPreviousValue =
-			.previousValue;
+			renderer.root.findByType( 'div' ).props.previousValue;
 		expect( testValue ).toBe( 2 );
 		expect( testPreviousValue ).toBe( 1 );
 
@@ -52,8 +52,8 @@ describe( 'usePrevious', () => {
 			renderer.update( <TestComponent testValue={ 3 } /> );
 		} );
 		testValue = renderer.root.findByType( 'div' ).props.testValue;
-		testPreviousValue = renderer.root.findByType( 'div' ).props
+		testPreviousValue =
-			.previousValue;
+			renderer.root.findByType( 'div' ).props.previousValue;
 		expect( testValue ).toBe( 3 );
 		expect( testPreviousValue ).toBe( 2 );
 	} );
@@ -73,8 +73,8 @@ describe( 'usePrevious', () => {
 			);
 		} );
 		testValue = renderer.root.findByType( 'div' ).props.testValue;
-		testPreviousValue = renderer.root.findByType( 'div' ).props
+		testPreviousValue =
-			.previousValue;
+			renderer.root.findByType( 'div' ).props.previousValue;
 		expect( testValue ).toBe( 'abc' );
 		expect( testPreviousValue ).toBe( 1 );
 
@@ -84,8 +84,8 @@ describe( 'usePrevious', () => {
 			);
 		} );
 		testValue = renderer.root.findByType( 'div' ).props.testValue;
-		testPreviousValue = renderer.root.findByType( 'div' ).props
+		testPreviousValue =
-			.previousValue;
+			renderer.root.findByType( 'div' ).props.previousValue;
 		expect( testValue ).toBe( 3 );
 		expect( testPreviousValue ).toBe( 1 );
 	} );

plugins/woocommerce-blocks/assets/js/base/hooks/use-position-relative-to-viewport.js

@@ -43,10 +43,8 @@ const style = {
  * ```
  */
 export const usePositionRelativeToViewport = () => {
-	const [
+	const [ positionRelativeToViewport, setPositionRelativeToViewport ] =
-		positionRelativeToViewport,
+		useState( '' );
-		setPositionRelativeToViewport,
-	] = useState( '' );
 	const referenceElementRef = useRef( null );
 	const intersectionObserver = useRef(
 		new IntersectionObserver(

plugins/woocommerce-blocks/assets/js/blocks-registry/payment-methods/express-payment-method-config.ts

@@ -16,7 +16,8 @@ import { getCanMakePayment } from './payment-method-config-helper';
 import { assertConfigHasProperties, assertValidElement } from './assertions';
 
 export default class ExpressPaymentMethodConfig
-	implements ExpressPaymentMethodConfigInstance {
+	implements ExpressPaymentMethodConfigInstance
+{
 	public name: string;
 	public content: ReactNode;
 	public edit: ReactNode;

plugins/woocommerce-blocks/assets/js/blocks-registry/payment-methods/extensions-config.ts

@@ -11,12 +11,14 @@ export type NamespacedCanMakePaymentExtensionsCallbacks = Record<
 	string,
 	CanMakePaymentExtensionCallbacks
 >;
-export type ExtensionNamespace = keyof NamespacedCanMakePaymentExtensionsCallbacks;
+export type ExtensionNamespace =
+	keyof NamespacedCanMakePaymentExtensionsCallbacks;
 export type PaymentMethodName = keyof CanMakePaymentExtensionCallbacks;
 
 // Keeps callbacks registered by extensions for different payment methods
 //  eslint-disable-next-line prefer-const
-export const canMakePaymentExtensionsCallbacks: NamespacedCanMakePaymentExtensionsCallbacks = {};
+export const canMakePaymentExtensionsCallbacks: NamespacedCanMakePaymentExtensionsCallbacks =
+	{};
 
 export const extensionsConfig = {
 	canMakePayment: canMakePaymentExtensionsCallbacks,

plugins/woocommerce-blocks/assets/js/blocks-registry/payment-methods/payment-method-config-helper.ts

@@ -17,23 +17,27 @@ import {
 } from './extensions-config';
 
 // Filter out payment methods by supported features and cart requirement.
-export const canMakePaymentWithFeaturesCheck = (
+export const canMakePaymentWithFeaturesCheck =
+	(
 		canMakePayment: CanMakePaymentCallback,
 		features: string[]
-): CanMakePaymentCallback => ( canPayArgument ) => {
+	): CanMakePaymentCallback =>
+	( canPayArgument ) => {
 		const requirements = canPayArgument?.paymentRequirements || [];
-	const featuresSupportRequirements = requirements.every( ( requirement ) =>
+		const featuresSupportRequirements = requirements.every(
-		features.includes( requirement )
+			( requirement ) => features.includes( requirement )
 		);
 		return featuresSupportRequirements && canMakePayment( canPayArgument );
-};
+	};
 
 // Filter out payment methods by callbacks registered by extensions.
-export const canMakePaymentWithExtensions = (
+export const canMakePaymentWithExtensions =
+	(
 		canMakePayment: CanMakePaymentCallback,
 		extensionsCallbacks: NamespacedCanMakePaymentExtensionsCallbacks,
 		paymentMethodName: PaymentMethodName
-): CanMakePaymentCallback => ( canPayArgument ) => {
+	): CanMakePaymentCallback =>
+	( canPayArgument ) => {
 		// Validate whether the payment method is available based on its own criteria first.
 		let canPay = canMakePayment( canPayArgument );
 
@@ -51,9 +55,12 @@ export const canMakePaymentWithExtensions = (
 				}
 			);
 
-		canPay = Object.keys( namespacedCallbacks ).every( ( namespace ) => {
+			canPay = Object.keys( namespacedCallbacks ).every(
+				( namespace ) => {
 					try {
-				return namespacedCallbacks[ namespace ]( canPayArgument );
+						return namespacedCallbacks[ namespace ](
+							canPayArgument
+						);
 					} catch ( err ) {
 						// eslint-disable-next-line no-console
 						console.error(
@@ -64,11 +71,12 @@ export const canMakePaymentWithExtensions = (
 						// this ensures that the error is ignored when computing the whole result.
 						return true;
 					}
-		} );
+				}
+			);
 		}
 
 		return canPay;
-};
+	};
 
 export const getCanMakePayment = (
 	canMakePayment: CanMakePaymentCallback,
@@ -77,10 +85,12 @@ export const getCanMakePayment = (
 ): CanMakePaymentCallback => {
 	const canPay = canMakePaymentWithFeaturesCheck( canMakePayment, features );
 	// Loop through all callbacks to check if there are any registered for this payment method.
-	return ( Object.values( extensionsConfig.canMakePayment ) as Record<
+	return (
+		Object.values( extensionsConfig.canMakePayment ) as Record<
 			PaymentMethodName,
 			CanMakePaymentCallback
-	>[] ).some( ( callbacks ) => paymentMethodName in callbacks )
+		>[]
+	 ).some( ( callbacks ) => paymentMethodName in callbacks )
 		? canMakePaymentWithExtensions(
 				canPay,
 				extensionsConfig.canMakePayment,

plugins/woocommerce-blocks/assets/js/blocks-registry/payment-methods/payment-method-config.tsx

@@ -26,7 +26,8 @@ const NullComponent = () => {
 };
 
 export default class PaymentMethodConfig
-	implements PaymentMethodConfigInstance {
+	implements PaymentMethodConfigInstance
+{
 	public name: string;
 	public content: ReactNode;
 	public edit: ReactNode;
@@ -142,8 +143,7 @@ export default class PaymentMethodConfig
 				{
 					alternative: 'Pass showSavedCards and showSaveOption',
 					plugin: 'woocommerce-gutenberg-products-block',
-					link:
+					link: 'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3686',
-						'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3686',
 				}
 			);
 		}

plugins/woocommerce-blocks/assets/js/blocks-registry/payment-methods/registry.ts

@@ -38,8 +38,7 @@ export const registerPaymentMethod = (
 		deprecated( 'Passing a callback to registerPaymentMethod()', {
 			alternative: 'a config options object',
 			plugin: 'woocommerce-gutenberg-products-block',
-			link:
+			link: 'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3404',
-				'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3404',
 		} );
 	} else {
 		paymentMethodConfig = new PaymentMethodConfig( options );
@@ -65,8 +64,7 @@ export const registerExpressPaymentMethod = (
 		deprecated( 'Passing a callback to registerExpressPaymentMethod()', {
 			alternative: 'a config options object',
 			plugin: 'woocommerce-gutenberg-products-block',
-			link:
+			link: 'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3404',
-				'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3404',
 		} );
 	} else {
 		paymentMethodConfig = new ExpressPaymentMethodConfig( options );

plugins/woocommerce-blocks/assets/js/blocks-registry/payment-methods/test/payment-method-config-helper.ts

@@ -153,7 +153,8 @@ describe( 'payment-method-config-helper', () => {
 	describe( 'canMakePaymentWithExtensions', () => {
 		it( "Returns false without executing the registered callbacks, if the payment method's canMakePayment callback returns false.", () => {
 			const canMakePayment = () => false;
-			const canMakePaymentWithExtensionsResult = helpers.canMakePaymentWithExtensions(
+			const canMakePaymentWithExtensionsResult =
+				helpers.canMakePaymentWithExtensions(
 					canMakePayment,
 					canMakePaymentExtensionsCallbacks,
 					'cod'

plugins/woocommerce-blocks/assets/js/blocks/active-filters/active-attribute-filters.js

@@ -101,7 +101,8 @@ const ActiveAttributeFilters = ( {
 
 								// Remove only the slug from the URL.
 								return removeArgsFromFilterUrl( {
-									[ `filter_${ attributeObject.name }` ]: slug,
+									[ `filter_${ attributeObject.name }` ]:
+										slug,
 								} );
 							}
 							removeAttributeFilterBySlug(

plugins/woocommerce-blocks/assets/js/blocks/active-filters/block.js

@@ -125,9 +125,8 @@ const ActiveFiltersBlock = ( {
 		} );
 	}, [ productAttributes, blockAttributes.displayStyle ] );
 
-	const [ productRatings, setProductRatings ] = useQueryStateByKey(
+	const [ productRatings, setProductRatings ] =
-		'ratings'
+		useQueryStateByKey( 'ratings' );
-	);
 
 	/**
 	 * Parse the filter URL to set the active rating fitlers.

plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block.js

@@ -81,9 +81,8 @@ const AttributeFilterBlock = ( {
 		isString
 	);
 
-	const [ hasSetPhpFilterDefaults, setHasSetPhpFilterDefaults ] = useState(
+	const [ hasSetPhpFilterDefaults, setHasSetPhpFilterDefaults ] =
-		false
+		useState( false );
-	);
 
 	const attributeObject =
 		blockAttributes.isPreview && ! blockAttributes.attributeId
@@ -103,15 +102,11 @@ const AttributeFilterBlock = ( {
 	const borderProps = useBorderProps( blockAttributes );
 
 	const [ queryState ] = useQueryStateByContext();
-	const [
+	const [ productAttributesQuery, setProductAttributesQuery ] =
-		productAttributesQuery,
+		useQueryStateByKey( 'attributes', [] );
-		setProductAttributesQuery,
-	] = useQueryStateByKey( 'attributes', [] );
 
-	const {
+	const { results: attributeTerms, isLoading: attributeTermsLoading } =
-		results: attributeTerms,
+		useCollection( {
-		isLoading: attributeTermsLoading,
-	} = useCollection( {
 			namespace: '/wc/store/v1',
 			resourceName: 'products/attributes/terms',
 			resourceValues: [ attributeObject?.id || 0 ],
@@ -121,10 +116,8 @@ const AttributeFilterBlock = ( {
 	const filterAvailableTerms =
 		blockAttributes.displayStyle !== 'dropdown' &&
 		blockAttributes.queryType === 'and';
-	const {
+	const { results: filteredCounts, isLoading: filteredCountsLoading } =
-		results: filteredCounts,
+		useCollectionData( {
-		isLoading: filteredCountsLoading,
-	} = useCollectionData( {
 			queryAttribute: {
 				taxonomy: attributeObject?.taxonomy,
 				queryType: blockAttributes.queryType,

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment-methods.js

@@ -98,8 +98,7 @@ const ExpressPaymentMethods = () => {
 				{
 					alternative: 'onError',
 					plugin: 'woocommerce-gutenberg-products-block',
-					link:
+					link: 'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4228',
-						'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4228',
 				}
 			);
 			if ( errorMessage ) {
@@ -132,7 +131,8 @@ const ExpressPaymentMethods = () => {
 							onClick: onExpressPaymentClick( id ),
 							onClose: onExpressPaymentClose,
 							onError: onExpressPaymentError,
-							setExpressPaymentError: deprecatedSetExpressPaymentError,
+							setExpressPaymentError:
+								deprecatedSetExpressPaymentError,
 						} ) }
 					</li>
 				) : null;

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-card.js

@@ -27,10 +27,8 @@ import PaymentMethodErrorBoundary from './payment-method-error-boundary';
  */
 const PaymentMethodCard = ( { children, showSaveOption } ) => {
 	const { isEditor } = useEditorContext();
-	const {
+	const { shouldSavePayment, setShouldSavePayment } =
-		shouldSavePayment,
+		usePaymentMethodDataContext();
-		setShouldSavePayment,
-	} = usePaymentMethodDataContext();
 	const { customerId } = useCheckoutContext();
 
 	return (

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-options.js

@@ -34,10 +34,8 @@ const PaymentMethodOptions = () => {
 		customerPaymentMethods,
 	} = usePaymentMethodDataContext();
 	const { paymentMethods } = usePaymentMethods();
-	const {
+	const { activePaymentMethod, ...paymentMethodInterface } =
-		activePaymentMethod,
+		usePaymentMethodInterface();
-		...paymentMethodInterface
-	} = usePaymentMethodInterface();
 	const { noticeContexts } = useEmitResponse();
 	const { removeNotice } = useDispatch( 'core/notices' );
 	const { dispatchCheckoutEvent } = useStoreEvents();

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/test/payment-methods.js

@@ -32,7 +32,9 @@ jest.mock( '../saved-payment-method-options', () => ( { onChange } ) => {
 
 jest.mock(
 	'@woocommerce/base-components/radio-control-accordion',
-	() => ( { onChange } ) => (
+	() =>
+		( { onChange } ) =>
+			(
 				<>
 					<span>Payment method options</span>
 					<button onClick={ () => onChange( 'credit-card' ) }>
@@ -103,10 +105,8 @@ describe( 'PaymentMethods', () => {
 
 	test( 'selecting new payment method', async () => {
 		const ShowActivePaymentMethod = () => {
-			const {
+			const { activePaymentMethod, activeSavedToken } =
-				activePaymentMethod,
+				usePaymentMethodDataContext();
-				activeSavedToken,
-			} = usePaymentMethodDataContext();
 			return (
 				<>
 					<div>

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/use-forced-layout.ts

@@ -42,16 +42,14 @@ export const useForcedLayout = ( {
 	const currentRegisteredBlocks = useRef( registeredBlocks );
 	const currentDefaultTemplate = useRef( defaultTemplate );
 
-	const { insertBlock, replaceInnerBlocks } = useDispatch(
+	const { insertBlock, replaceInnerBlocks } =
-		'core/block-editor'
+		useDispatch( 'core/block-editor' );
-	);
 
 	const { innerBlocks, registeredBlockTypes } = useSelect(
 		( select ) => {
 			return {
-				innerBlocks: select( 'core/block-editor' ).getBlocks(
+				innerBlocks:
-					clientId
+					select( 'core/block-editor' ).getBlocks( clientId ),
-				),
 				registeredBlockTypes: currentRegisteredBlocks.current.map(
 					( blockName ) => getBlockType( blockName )
 				),
@@ -110,7 +108,8 @@ export const useForcedLayout = ( {
 			}
 
 			// Is the forced block part of the default template, find it's original position.
-			const defaultTemplatePosition = currentDefaultTemplate.current.findIndex(
+			const defaultTemplatePosition =
+				currentDefaultTemplate.current.findIndex(
 					( [ blockName ] ) => blockName === block.name
 				);
 

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/use-view-switcher.tsx

@@ -29,11 +29,8 @@ export const useViewSwitcher = (
 	const initialView = views[ 0 ];
 	const [ currentView, setCurrentView ] = useState( initialView );
 	const { selectBlock } = useDispatch( 'core/block-editor' );
-	const {
+	const { getBlock, getSelectedBlockClientId, getBlockParentsByBlockName } =
-		getBlock,
+		select( blockEditorStore );
-		getSelectedBlockClientId,
-		getBlockParentsByBlockName,
-	} = select( blockEditorStore );
 	const selectedBlockClientId = getSelectedBlockClientId();
 
 	useEffect( () => {

plugins/woocommerce-blocks/assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx

@@ -114,12 +114,8 @@ const CartLineItemRow = forwardRef< HTMLTableRowElement, CartLineItemRowProps >(
 			extensions,
 		} = lineItem;
 
-		const {
+		const { quantity, setItemQuantity, removeItem, isPendingDelete } =
-			quantity,
+			useStoreCartItemQuantity( lineItem );
-			setItemQuantity,
-			removeItem,
-			isPendingDelete,
-		} = useStoreCartItemQuantity( lineItem );
 		const { dispatchStoreEvent } = useStoreEvents();
 
 		// Prepare props to pass to the __experimentalApplyCheckoutFilter filter.
@@ -150,9 +146,8 @@ const CartLineItemRow = forwardRef< HTMLTableRowElement, CartLineItemRowProps >(
 			amount: parseInt( prices.raw_prices.price, 10 ),
 			precision: prices.raw_prices.precision,
 		} );
-		const saleAmountSingle = regularAmountSingle.subtract(
+		const saleAmountSingle =
-			purchaseAmountSingle
+			regularAmountSingle.subtract( purchaseAmountSingle );
-		);
 		const saleAmount = saleAmountSingle.multiply( quantity );
 		const totalsCurrency = getCurrencyFromPriceResponse( totals );
 		let lineSubtotal = parseInt( totals.line_subtotal, 10 );

plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/edit.tsx

@@ -56,7 +56,8 @@ export const Edit = ( {
 	const hasExpressPaymentMethods = Object.keys( paymentMethods ).length > 0;
 	const blockProps = useBlockProps( {
 		className: classnames( {
-			'wp-block-woocommerce-cart-express-payment-block--has-express-payment-methods': hasExpressPaymentMethods,
+			'wp-block-woocommerce-cart-express-payment-block--has-express-payment-methods':
+				hasExpressPaymentMethods,
 		} ),
 	} );
 	const { className } = attributes;

plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/edit.tsx

@@ -52,7 +52,8 @@ export const Edit = ( {
 							checked={ isShippingCalculatorEnabled }
 							onChange={ () =>
 								setAttributes( {
-									isShippingCalculatorEnabled: ! isShippingCalculatorEnabled,
+									isShippingCalculatorEnabled:
+										! isShippingCalculatorEnabled,
 								} )
 							}
 						/>

plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/edit.tsx

@@ -56,7 +56,8 @@ export const Edit = ( {
 								checked={ showRateAfterTaxName }
 								onChange={ () =>
 									setAttributes( {
-										showRateAfterTaxName: ! showRateAfterTaxName,
+										showRateAfterTaxName:
+											! showRateAfterTaxName,
 									} )
 								}
 							/>

plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/empty-cart-block/edit.tsx

@@ -36,7 +36,7 @@ const browseStoreTemplate = SHOP_URL
 	  ]
 	: null;
 
-const defaultTemplate = ( [
+const defaultTemplate = [
 	[
 		'core/image',
 		{
@@ -79,7 +79,7 @@ const defaultTemplate = ( [
 			rows: 1,
 		},
 	],
-].filter( Boolean ) as unknown ) as TemplateArray;
+].filter( Boolean ) as unknown as TemplateArray;
 
 export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 	const blockProps = useBlockProps();

plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx

@@ -27,10 +27,8 @@ const Block = ( {
 } ): JSX.Element => {
 	const link = getSetting( 'page-' + checkoutPageId, false );
 	const { isCalculating } = useCheckoutContext();
-	const [
+	const [ positionReferenceElement, positionRelativeToViewport ] =
-		positionReferenceElement,
+		usePositionRelativeToViewport();
-		positionRelativeToViewport,
-	] = usePositionRelativeToViewport();
 	const [ showSpinner, setShowSpinner ] = useState( false );
 
 	useEffect( () => {

plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/register-components.ts

@@ -16,7 +16,8 @@ __webpack_public_path__ = WC_BLOCKS_BUILD_URL;
 
 registerCheckoutBlock( {
 	metadata: metadata.FILLED_CART,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "cart-blocks/filled-cart" */
 				'./filled-cart-block/frontend'
@@ -26,7 +27,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.EMPTY_CART,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "cart-blocks/empty-cart" */
 				'./empty-cart-block/frontend'
@@ -36,7 +38,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CART_ITEMS,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "cart-blocks/cart-items" */
 				'./cart-items-block/frontend'
@@ -46,7 +49,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CART_LINE_ITEMS,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "cart-blocks/cart-line-items" */
 				'./cart-line-items-block/frontend'
@@ -56,7 +60,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CART_TOTALS,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "cart-blocks/cart-totals" */
 				'./cart-totals-block/frontend'
@@ -66,7 +71,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CART_EXPRESS_PAYMENT,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "cart-blocks/cart-express-payment" */
 				'./cart-express-payment-block/frontend'
@@ -76,7 +82,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.PROCEED_TO_CHECKOUT,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "cart-blocks/proceed-to-checkout" */
 				'./proceed-to-checkout-block/frontend'
@@ -86,7 +93,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CART_ACCEPTED_PAYMENT_METHODS,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "cart-blocks/cart-accepted-payment-methods" */
 				'./cart-accepted-payment-methods-block/frontend'
@@ -96,7 +104,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CART_ORDER_SUMMARY,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "cart-blocks/cart-order-summary" */
 				'./cart-order-summary-block/frontend'
@@ -106,7 +115,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CART_ORDER_SUMMARY_HEADING,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "cart-blocks/order-summary-heading" */
 				'./cart-order-summary-heading/frontend'
@@ -116,7 +126,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CART_ORDER_SUMMARY_SUBTOTAL,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "cart-blocks/order-summary-subtotal" */
 				'./cart-order-summary-subtotal/frontend'
@@ -126,7 +137,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CART_ORDER_SUMMARY_FEE,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "cart-blocks/order-summary-fee" */
 				'./cart-order-summary-fee/frontend'
@@ -136,7 +148,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CART_ORDER_SUMMARY_DISCOUNT,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "cart-blocks/order-summary-discount" */
 				'./cart-order-summary-discount/frontend'
@@ -146,7 +159,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CART_ORDER_SUMMARY_COUPON_FORM,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "cart-blocks/order-summary-coupon-form" */
 				'./cart-order-summary-coupon-form/frontend'
@@ -156,7 +170,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CART_ORDER_SUMMARY_SHIPPING,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "cart-blocks/order-summary-shipping" */
 				'./cart-order-summary-shipping/frontend'
@@ -166,7 +181,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CART_ORDER_SUMMARY_TAXES,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "cart-blocks/order-summary-taxes" */
 				'./cart-order-summary-taxes/frontend'
@@ -176,7 +192,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CART_ORDER_SUMMARY_HEADING,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "cart-blocks/order-summary-heading" */
 				'./cart-order-summary-heading/frontend'

plugins/woocommerce-blocks/assets/js/blocks/checkout/block.tsx

@@ -104,14 +104,10 @@ const ScrollOnError = ( {
 }: {
 	scrollToTop: ( props: Record< string, unknown > ) => void;
 } ): null => {
-	const {
+	const { hasError: checkoutHasError, isIdle: checkoutIsIdle } =
-		hasError: checkoutHasError,
+		useCheckoutContext();
-		isIdle: checkoutIsIdle,
+	const { hasValidationErrors, showAllValidationErrors } =
-	} = useCheckoutContext();
+		useValidationContext();
-	const {
-		hasValidationErrors,
-		showAllValidationErrors,
-	} = useValidationContext();
 
 	const hasErrorsToDisplay =
 		checkoutIsIdle &&

plugins/woocommerce-blocks/assets/js/blocks/checkout/context.ts

@@ -41,17 +41,17 @@ export const CheckoutBlockContext = createContext< CheckoutBlockContextProps >(
 	}
 );
 
-export const CheckoutBlockControlsContext = createContext<
+export const CheckoutBlockControlsContext =
-	CheckoutBlockControlsContextProps
+	createContext< CheckoutBlockControlsContextProps >( {
->( {
 		addressFieldControls: () => null,
 		accountControls: () => null,
-} );
+	} );
 
 export const useCheckoutBlockContext = (): CheckoutBlockContextProps => {
 	return useContext( CheckoutBlockContext );
 };
 
-export const useCheckoutBlockControlsContext = (): CheckoutBlockControlsContextProps => {
+export const useCheckoutBlockControlsContext =
+	(): CheckoutBlockControlsContextProps => {
 		return useContext( CheckoutBlockControlsContext );
-};
+	};

plugins/woocommerce-blocks/assets/js/blocks/checkout/form-step/form-step-block.tsx

@@ -34,7 +34,8 @@ export const FormStepBlock = ( {
 	const { title = '', description = '', showStepNumber = true } = attributes;
 	const blockProps = useBlockProps( {
 		className: classnames( 'wc-block-components-checkout-step', className, {
-			'wc-block-components-checkout-step--with-step-number': showStepNumber,
+			'wc-block-components-checkout-step--with-step-number':
+				showStepNumber,
 		} ),
 	} );
 	return (

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/edit.tsx

@@ -39,9 +39,8 @@ export const Edit = ( {
 		showPhoneField,
 		requirePhoneField,
 	} = useCheckoutBlockContext();
-	const {
+	const { addressFieldControls: Controls } =
-		addressFieldControls: Controls,
+		useCheckoutBlockControlsContext();
-	} = useCheckoutBlockControlsContext();
 	const { showBillingFields } = useCheckoutAddress();
 
 	if ( ! showBillingFields ) {

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/block.tsx

@@ -20,11 +20,8 @@ const Block = ( {
 }: {
 	allowCreateAccount: boolean;
 } ): JSX.Element => {
-	const {
+	const { customerId, shouldCreateAccount, setShouldCreateAccount } =
-		customerId,
+		useCheckoutContext();
-		shouldCreateAccount,
-		setShouldCreateAccount,
-	} = useCheckoutContext();
 	const { billingAddress, setEmail } = useCheckoutAddress();
 	const { dispatchCheckoutEvent } = useStoreEvents();
 

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/edit.tsx

@@ -63,7 +63,8 @@ export const Edit = ( {
 	const blockProps = useBlockProps( {
 		className: classnames(
 			{
-				'wp-block-woocommerce-checkout-express-payment-block--has-express-payment-methods': hasExpressPaymentMethods,
+				'wp-block-woocommerce-checkout-express-payment-block--has-express-payment-methods':
+					hasExpressPaymentMethods,
 			},
 			attributes?.className
 		),

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/edit.tsx

@@ -34,11 +34,10 @@ export const Edit = ( {
 	} );
 	const allowedBlocks = getAllowedBlocks( innerBlockAreas.CHECKOUT_FIELDS );
 
-	const {
+	const { addressFieldControls: Controls } =
-		addressFieldControls: Controls,
+		useCheckoutBlockControlsContext();
-	} = useCheckoutBlockControlsContext();
 
-	const defaultTemplate = ( [
+	const defaultTemplate = [
 		[ 'woocommerce/checkout-express-payment-block', {}, [] ],
 		[ 'woocommerce/checkout-contact-information-block', {}, [] ],
 		[ 'woocommerce/checkout-shipping-address-block', {}, [] ],
@@ -48,7 +47,7 @@ export const Edit = ( {
 		[ 'woocommerce/checkout-order-note-block', {}, [] ],
 		[ 'woocommerce/checkout-terms-block', {}, [] ],
 		[ 'woocommerce/checkout-actions-block', {}, [] ],
-	].filter( Boolean ) as unknown ) as TemplateArray;
+	].filter( Boolean ) as unknown as TemplateArray;
 
 	useForcedLayout( {
 		clientId,

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/test/block.js

@@ -103,8 +103,7 @@ jest.mock( '@woocommerce/base-context/hooks', () => ( {
 						meta_data: [
 							{
 								key: 'Items',
-								value:
+								value: 'Hoodie - Blue, Yes × 1, Beanie × 1',
-									'Hoodie - Blue, Yes × 1, Beanie × 1',
 							},
 						],
 						selected: false,
@@ -128,8 +127,7 @@ jest.mock( '@woocommerce/base-context/hooks', () => ( {
 						meta_data: [
 							{
 								key: 'Items',
-								value:
+								value: 'Hoodie - Blue, Yes × 1, Beanie × 1',
-									'Hoodie - Blue, Yes × 1, Beanie × 1',
 							},
 						],
 						selected: false,
@@ -153,8 +151,7 @@ jest.mock( '@woocommerce/base-context/hooks', () => ( {
 						meta_data: [
 							{
 								key: 'Items',
-								value:
+								value: 'Hoodie - Blue, Yes × 1, Beanie × 1',
-									'Hoodie - Blue, Yes × 1, Beanie × 1',
 							},
 						],
 						selected: true,
@@ -476,8 +473,7 @@ describe( 'Checkout Order Summary', () => {
 							meta_data: [
 								{
 									key: 'Items',
-									value:
+									value: 'Hoodie - Blue, Yes × 1, Beanie × 1',
-										'Hoodie - Blue, Yes × 1, Beanie × 1',
 								},
 							],
 							selected: true,

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx

@@ -13,9 +13,8 @@ const Block = ( {
 } ): JSX.Element | null => {
 	const couponsEnabled = getSetting( 'couponsEnabled', true );
 
-	const { applyCoupon, isApplyingCoupon } = useStoreCartCoupons(
+	const { applyCoupon, isApplyingCoupon } =
-		'wc/checkout'
+		useStoreCartCoupons( 'wc/checkout' );
-	);
 
 	if ( ! couponsEnabled ) {
 		return null;

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx

@@ -27,9 +27,8 @@ const DiscountSlotFill = (): JSX.Element => {
 
 const Block = ( { className = '' }: { className?: string } ): JSX.Element => {
 	const { cartTotals, cartCoupons } = useStoreCart();
-	const { removeCoupon, isRemovingCoupon } = useStoreCartCoupons(
+	const { removeCoupon, isRemovingCoupon } =
-		'wc/checkout'
+		useStoreCartCoupons( 'wc/checkout' );
-	);
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/edit.tsx

@@ -56,7 +56,8 @@ export const Edit = ( {
 								checked={ showRateAfterTaxName }
 								onChange={ () =>
 									setAttributes( {
-										showRateAfterTaxName: ! showRateAfterTaxName,
+										showRateAfterTaxName:
+											! showRateAfterTaxName,
 									} )
 								}
 							/>

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/edit.tsx

@@ -38,9 +38,8 @@ export const Edit = ( {
 		showPhoneField,
 		requirePhoneField,
 	} = useCheckoutBlockContext();
-	const {
+	const { addressFieldControls: Controls } =
-		addressFieldControls: Controls,
+		useCheckoutBlockControlsContext();
-	} = useCheckoutBlockControlsContext();
 	return (
 		<FormStepBlock
 			setAttributes={ setAttributes }

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.tsx

@@ -60,9 +60,8 @@ const Block = (): JSX.Element | null => {
 		return null;
 	}
 
-	const shippingRatesPackageCount = getShippingRatesPackageCount(
+	const shippingRatesPackageCount =
-		shippingRates
+		getShippingRatesPackageCount( shippingRates );
-	);
 
 	if (
 		! isEditor &&

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx

@@ -32,11 +32,8 @@ const FrontendBlock = ( {
 	const { isDisabled } = useCheckoutSubmit();
 
 	const validationErrorId = 'terms-and-conditions-' + instanceId;
-	const {
+	const { getValidationError, setValidationErrors, clearValidationError } =
-		getValidationError,
+		validation;
-		setValidationErrors,
-		clearValidationError,
-	} = validation;
 
 	const error = getValidationError( validationErrorId ) || {};
 	const hasError = error.message && ! error.hidden;

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/test/edit.js

@@ -91,8 +91,7 @@ describe( 'Edit', () => {
 		const { container } = render(
 			<Edit
 				attributes={ {
-					text:
+					text: 'I agree to the <a href="/terms">terms</a> and <a href="/privacy">privacy</a>',
-						'I agree to the <a href="/terms">terms</a> and <a href="/privacy">privacy</a>',
 					checkbox: true,
 				} }
 				setAttributes={ () => void 0 }

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/register-components.ts

@@ -17,7 +17,8 @@ __webpack_public_path__ = WC_BLOCKS_BUILD_URL;
 // @todo When forcing all blocks at once, they will append based on the order they are registered. Introduce formal sorting param.
 registerCheckoutBlock( {
 	metadata: metadata.CHECKOUT_FIELDS,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "checkout-blocks/fields" */ './checkout-fields-block/frontend'
 			)
@@ -26,7 +27,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CHECKOUT_EXPRESS_PAYMENT,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "checkout-blocks/express-payment" */ './checkout-express-payment-block/block'
 			)
@@ -35,7 +37,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CHECKOUT_CONTACT_INFORMATION,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "checkout-blocks/contact-information" */ './checkout-contact-information-block/frontend'
 			)
@@ -44,7 +47,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CHECKOUT_SHIPPING_ADDRESS,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "checkout-blocks/shipping-address" */ './checkout-shipping-address-block/frontend'
 			)
@@ -53,7 +57,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CHECKOUT_BILLING_ADDRESS,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "checkout-blocks/billing-address" */ './checkout-billing-address-block/frontend'
 			)
@@ -62,7 +67,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CHECKOUT_SHIPPING_METHODS,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "checkout-blocks/shipping-methods" */ './checkout-shipping-methods-block/frontend'
 			)
@@ -71,7 +77,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CHECKOUT_PAYMENT,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "checkout-blocks/payment" */ './checkout-payment-block/frontend'
 			)
@@ -80,7 +87,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CHECKOUT_ORDER_NOTE,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "checkout-blocks/order-note" */ './checkout-order-note-block/block'
 			)
@@ -89,7 +97,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CHECKOUT_TERMS,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "checkout-blocks/terms" */ './checkout-terms-block/frontend'
 			)
@@ -98,7 +107,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CHECKOUT_ACTIONS,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "checkout-blocks/actions" */ './checkout-actions-block/frontend'
 			)
@@ -107,7 +117,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CHECKOUT_TOTALS,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "checkout-blocks/totals" */ './checkout-totals-block/frontend'
 			)
@@ -116,7 +127,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CHECKOUT_ORDER_SUMMARY,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "checkout-blocks/order-summary" */ './checkout-order-summary-block/frontend'
 			)
@@ -125,7 +137,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CHECKOUT_ORDER_SUMMARY_CART_ITEMS,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "checkout-blocks/order-summary-cart-items" */
 				'./checkout-order-summary-cart-items/frontend'
@@ -135,7 +148,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CHECKOUT_ORDER_SUMMARY_SUBTOTAL,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "checkout-blocks/order-summary-subtotal" */
 				'./checkout-order-summary-subtotal/frontend'
@@ -145,7 +159,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CHECKOUT_ORDER_SUMMARY_FEE,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "checkout-blocks/order-summary-fee" */
 				'./checkout-order-summary-fee/frontend'
@@ -155,7 +170,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CHECKOUT_ORDER_SUMMARY_DISCOUNT,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "checkout-blocks/order-summary-discount" */
 				'./checkout-order-summary-discount/frontend'
@@ -165,7 +181,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CHECKOUT_ORDER_SUMMARY_COUPON_FORM,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "checkout-blocks/order-summary-coupon-form" */
 				'./checkout-order-summary-coupon-form/frontend'
@@ -175,7 +192,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CHECKOUT_ORDER_SUMMARY_SHIPPING,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "checkout-blocks/order-summary-shipping" */
 				'./checkout-order-summary-shipping/frontend'
@@ -185,7 +203,8 @@ registerCheckoutBlock( {
 
 registerCheckoutBlock( {
 	metadata: metadata.CHECKOUT_ORDER_SUMMARY_TAXES,
-	component: lazy( () =>
+	component: lazy(
+		() =>
 			import(
 				/* webpackChunkName: "checkout-blocks/order-summary-taxes" */
 				'./checkout-order-summary-taxes/frontend'

plugins/woocommerce-blocks/assets/js/blocks/featured-items/block-controls.tsx

@@ -136,12 +136,10 @@ export const BlockControls = ( {
 	);
 };
 
-export const withBlockControls = ( {
+export const withBlockControls =
-	cropLabel,
+	( { cropLabel, editLabel }: BlockControlsConfiguration ) =>
-	editLabel,
+	< T extends EditorBlock< T > >( Component: ComponentType< T > ) =>
-}: BlockControlsConfiguration ) => < T extends EditorBlock< T > >(
+	( props: WithBlockControlsProps< T > ) => {
-	Component: ComponentType< T >
-) => ( props: WithBlockControlsProps< T > ) => {
 		const [ isEditingImage, setIsEditingImage ] = props.useEditingImage;
 		const { attributes, category, name, product, setAttributes } = props;
 		const { contentAlign, editMode, mediaId, mediaSrc } = attributes;
@@ -171,4 +169,4 @@ export const withBlockControls = ( {
 				<Component { ...props } />
 			</>
 		);
-};
+	};

plugins/woocommerce-blocks/assets/js/blocks/featured-items/image-editor.tsx

@@ -92,15 +92,17 @@ export const ImageEditor = ( {
 	);
 };
 
-export const withImageEditor = < T extends EditorBlock< T > >(
+export const withImageEditor =
-	Component: ComponentType< T >
+	< T extends EditorBlock< T > >( Component: ComponentType< T > ) =>
-) => ( props: WithImageEditorProps< T > ) => {
+	( props: WithImageEditorProps< T > ) => {
 		const [ isEditingImage, setIsEditingImage ] = props.useEditingImage;
 
 		const { attributes, backgroundImageSize, name, setAttributes } = props;
 		const { mediaId, mediaSrc } = attributes;
 		const item =
-		name === BLOCK_NAMES.featuredProduct ? props.product : props.category;
+			name === BLOCK_NAMES.featuredProduct
+				? props.product
+				: props.category;
 
 		const { backgroundImageId, backgroundImageSrc } = useBackgroundImage( {
 			item,
@@ -123,4 +125,4 @@ export const withImageEditor = < T extends EditorBlock< T > >(
 		}
 
 		return <Component { ...props } />;
-};
+	};

plugins/woocommerce-blocks/assets/js/blocks/featured-items/inspector-controls.tsx

@@ -287,9 +287,9 @@ export const InspectorControls = ( {
 	);
 };
 
-export const withInspectorControls = < T extends EditorBlock< T > >(
+export const withInspectorControls =
-	Component: ComponentType< T >
+	< T extends EditorBlock< T > >( Component: ComponentType< T > ) =>
-) => ( props: WithInspectorControlsProps< T > ) => {
+	( props: WithInspectorControlsProps< T > ) => {
 		const { attributes, name, setAttributes } = props;
 		const {
 			alt,
@@ -307,7 +307,9 @@ export const withInspectorControls = < T extends EditorBlock< T > >(
 		} = attributes;
 
 		const item =
-		name === BLOCK_NAMES.featuredProduct ? props.product : props.category;
+			name === BLOCK_NAMES.featuredProduct
+				? props.product
+				: props.category;
 
 		const { setGradient } = useGradient( {
 			gradientAttribute: 'overlayGradient',
@@ -353,4 +355,4 @@ export const withInspectorControls = < T extends EditorBlock< T > >(
 				<Component { ...props } />
 			</>
 		);
-};
+	};

plugins/woocommerce-blocks/assets/js/blocks/featured-items/utils.ts

@@ -61,9 +61,8 @@ export function getBackgroundImageStyles( {
 			...( url && {
 				backgroundImage: `url(${ url })`,
 			} ),
-			backgroundPosition: calculatePercentPositionFromCoordinates(
+			backgroundPosition:
-				focalPoint
+				calculatePercentPositionFromCoordinates( focalPoint ),
-			),
 			...( ! isRepeated && {
 				backgroundRepeat: 'no-repeat',
 				backgroundSize: imageFit === 'cover' ? imageFit : 'auto',