diff --git a/assets/js/atomic/blocks/product-elements/add-to-cart/block.js b/assets/js/atomic/blocks/product-elements/add-to-cart/block.js index c2e55e6023a..7baba132098 100644 --- a/assets/js/atomic/blocks/product-elements/add-to-cart/block.js +++ b/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( - product - ), + 'wc-block-components-product-add-to-cart--placeholder': + isEmpty( product ), } ); diff --git a/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/attribute-select-control.js b/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/attribute-select-control.js index df5a81ff6e5..adaf84d472e 100644 --- a/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/attribute-select-control.js +++ b/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 { - getValidationError, - setValidationErrors, - clearValidationError, - } = useValidationContext(); + const { getValidationError, 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 ), [ - errorId, - clearValidationError, - ] ); + useEffect( + () => () => void clearValidationError( errorId ), + [ errorId, clearValidationError ] + ); return (
diff --git a/assets/js/atomic/blocks/product-elements/add-to-cart/shared/add-to-cart-button.js b/assets/js/atomic/blocks/product-elements/add-to-cart/shared/add-to-cart-button.js index e7b9d7b110f..27c4aa24aea 100644 --- a/assets/js/atomic/blocks/product-elements/add-to-cart/shared/add-to-cart-button.js +++ b/assets/js/atomic/blocks/product-elements/add-to-cart/shared/add-to-cart-button.js @@ -45,10 +45,11 @@ const AddToCartButton = () => { } return true; }; - const unsubscribeProcessing = eventRegistration.onAddToCartAfterProcessingWithSuccess( - onSuccess, - 0 - ); + const unsubscribeProcessing = + eventRegistration.onAddToCartAfterProcessingWithSuccess( + onSuccess, + 0 + ); return () => { unsubscribeProcessing(); }; diff --git a/assets/js/atomic/blocks/product-elements/button/block.js b/assets/js/atomic/blocks/product-elements/button/block.js index dd256977aae..39502458492 100644 --- a/assets/js/atomic/blocks/product-elements/button/block.js +++ b/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, } ) } > diff --git a/assets/js/atomic/blocks/product-elements/category-list/block.tsx b/assets/js/atomic/blocks/product-elements/category-list/block.tsx index 3fc4bbe8c44..afbf64c5914 100644 --- a/assets/js/atomic/blocks/product-elements/category-list/block.tsx +++ b/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 } } diff --git a/assets/js/atomic/blocks/product-elements/image/block.js b/assets/js/atomic/blocks/product-elements/image/block.js index 70d7630f80e..d5c296036b9 100644 --- a/assets/js/atomic/blocks/product-elements/image/block.js +++ b/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 ) } diff --git a/assets/js/atomic/blocks/product-elements/image/edit.js b/assets/js/atomic/blocks/product-elements/image/edit.js index d1a49967610..f0deda5fc50 100644 --- a/assets/js/atomic/blocks/product-elements/image/edit.js +++ b/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 { - showProductLink, - imageSizing, - showSaleBadge, - saleBadgeAlign, - } = attributes; + const { showProductLink, imageSizing, showSaleBadge, saleBadgeAlign } = + attributes; const blockProps = useBlockProps(); diff --git a/assets/js/atomic/blocks/product-elements/image/test/block.test.js b/assets/js/atomic/blocks/product-elements/image/test/block.test.js index f7002908285..802f2a516a0 100644 --- a/assets/js/atomic/blocks/product-elements/image/test/block.test.js +++ b/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: - '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', + 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', 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: - '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', + 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', sizes: '(max-width: 800px) 100vw, 800px', name: 'beanie-with-logo-1.jpg', alt: '', diff --git a/assets/js/atomic/blocks/product-elements/price/block.js b/assets/js/atomic/blocks/product-elements/price/block.js index 2f748f50e6a..3831aa10be6 100644 --- a/assets/js/atomic/blocks/product-elements/price/block.js +++ b/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, } ) } /> ); diff --git a/assets/js/atomic/blocks/product-elements/stock-indicator/block.js b/assets/js/atomic/blocks/product-elements/stock-indicator/block.js index 82b737a5f75..66b1d56aa89 100644 --- a/assets/js/atomic/blocks/product-elements/stock-indicator/block.js +++ b/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, - 'wc-block-components-product-stock-indicator--in-stock': inStock, - '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, + [ `${ parentClassName }__stock-indicator` ]: + parentClassName, + 'wc-block-components-product-stock-indicator--in-stock': + inStock, + '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 } } diff --git a/assets/js/atomic/blocks/product-elements/summary/block.js b/assets/js/atomic/blocks/product-elements/summary/block.js index 716bb7fc127..aa387969df6 100644 --- a/assets/js/atomic/blocks/product-elements/summary/block.js +++ b/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 } diff --git a/assets/js/atomic/blocks/product-elements/tag-list/block.js b/assets/js/atomic/blocks/product-elements/tag-list/block.js index 685dec13502..39d3aad3381 100644 --- a/assets/js/atomic/blocks/product-elements/tag-list/block.js +++ b/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 } } diff --git a/assets/js/atomic/blocks/product-elements/title/block.tsx b/assets/js/atomic/blocks/product-elements/title/block.tsx index aad699b032c..7070803b976 100644 --- a/assets/js/atomic/blocks/product-elements/title/block.tsx +++ b/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 { children }; @@ -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(), } diff --git a/assets/js/base/components/cart-checkout/address-form/address-form.tsx b/assets/js/base/components/cart-checkout/address-form/address-form.tsx index e90fec28c07..3b3a4e238be 100644 --- a/assets/js/base/components/cart-checkout/address-form/address-form.tsx +++ b/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 { - getValidationError, - setValidationErrors, - clearValidationError, - } = useValidationContext(); + const { getValidationError, setValidationErrors, clearValidationError } = + useValidationContext(); const currentFields = useShallowEqual( fields ); diff --git a/assets/js/base/components/cart-checkout/address-form/test/index.js b/assets/js/base/components/cart-checkout/address-form/test/index.js index 200f190db75..3b04d30e847 100644 --- a/assets/js/base/components/cart-checkout/address-form/test/index.js +++ b/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 { - defaultAddressFields, - setShippingAddress, - shippingAddress, - } = useCheckoutAddress(); + const { defaultAddressFields, setShippingAddress, shippingAddress } = + useCheckoutAddress(); return ( { const [ address, setAddress ] = useState( initialAddress ); - const { - hasValidationErrors, - showAllValidationErrors, - } = useValidationContext(); + const { hasValidationErrors, showAllValidationErrors } = + useValidationContext(); const validateSubmit = () => { showAllValidationErrors(); diff --git a/assets/js/base/components/cart-checkout/shipping-rates-control-package/package-rates.tsx b/assets/js/base/components/cart-checkout/shipping-rates-control-package/package-rates.tsx index 045ddb79164..ff3318d776c 100644 --- a/assets/js/base/components/cart-checkout/shipping-rates-control-package/package-rates.tsx +++ b/assets/js/base/components/cart-checkout/shipping-rates-control-package/package-rates.tsx @@ -62,12 +62,8 @@ const PackageRates = ( { ); } - const { - label, - secondaryLabel, - description, - secondaryDescription, - } = renderOption( rates[ 0 ] ); + const { label, secondaryLabel, description, secondaryDescription } = + renderOption( rates[ 0 ] ); return ( { - const [ isShippingCalculatorOpen, setIsShippingCalculatorOpen ] = useState( - false - ); + const [ isShippingCalculatorOpen, setIsShippingCalculatorOpen ] = + useState( false ); const { shippingAddress, cartHasCalculatedShipping, diff --git a/assets/js/base/components/combobox/index.tsx b/assets/js/base/components/combobox/index.tsx index c29df06c5c4..f0a492fa948 100644 --- a/assets/js/base/components/combobox/index.tsx +++ b/assets/js/base/components/combobox/index.tsx @@ -55,11 +55,8 @@ const Combobox = ( { instanceId = '0', autoComplete = 'off', }: ComboboxProps ): JSX.Element => { - const { - getValidationError, - setValidationErrors, - clearValidationError, - } = useValidationContext(); + const { getValidationError, 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 diff --git a/assets/js/base/components/country-input/country-input.tsx b/assets/js/base/components/country-input/country-input.tsx index 7ef10861325..5a8d6a1a8dd 100644 --- a/assets/js/base/components/country-input/country-input.tsx +++ b/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 && diff --git a/assets/js/base/components/country-input/stories/index.tsx b/assets/js/base/components/country-input/stories/index.tsx index a065b72d2f4..bc2ffa59475 100644 --- a/assets/js/base/components/country-input/stories/index.tsx +++ b/assets/js/base/components/country-input/stories/index.tsx @@ -44,10 +44,8 @@ const Template: Story< CountryInputWithCountriesProps > = ( args ) => { const [ selectedCountry, selectCountry ] = useState< CountryCode | '' >( '' ); - const { - clearValidationError, - showValidationError, - } = useValidationContext(); + const { clearValidationError, showValidationError } = + useValidationContext(); useEffect( () => { showValidationError( 'country' ); diff --git a/assets/js/base/components/drawer/index.tsx b/assets/js/base/components/drawer/index.tsx index ff7a4345ec5..ff4c3cb0586 100644 --- a/assets/js/base/components/drawer/index.tsx +++ b/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--with-slide-in': slideIn, - 'wc-block-components-drawer__screen-overlay--with-slide-out': slideOut, + 'wc-block-components-drawer__screen-overlay--is-hidden': + ! isOpen, + 'wc-block-components-drawer__screen-overlay--with-slide-in': + slideIn, + 'wc-block-components-drawer__screen-overlay--with-slide-out': + slideOut, } ) } closeButtonLabel={ __( diff --git a/assets/js/base/components/price-slider/utils.ts b/assets/js/base/components/price-slider/utils.ts index c712315cdbb..496d1c8d480 100644 --- a/assets/js/base/components/price-slider/utils.ts +++ b/assets/js/base/components/price-slider/utils.ts @@ -6,36 +6,42 @@ 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 = ( { - maxConstraint, - minorUnit, -}: { - maxConstraint: number; - minorUnit: number; -} ) => ( { floatValue }: NumberFormatValues ): boolean => { - const maxPrice = maxConstraint / 10 ** minorUnit; +export const isValidMaxValue = + ( { + maxConstraint, + minorUnit, + }: { + maxConstraint: number; + minorUnit: number; + } ) => + ( { 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 = ( { - minConstraint, - currentMaxValue, - minorUnit, -}: { - minConstraint: number; - currentMaxValue: number; - minorUnit: number; -} ) => ( { floatValue }: NumberFormatValues ): boolean => { - const minPrice = minConstraint / 10 ** minorUnit; - const currentMaxPrice = currentMaxValue / 10 ** minorUnit; +export const isValidMinValue = + ( { + minConstraint, + currentMaxValue, + minorUnit, + }: { + minConstraint: number; + currentMaxValue: number; + minorUnit: number; + } ) => + ( { floatValue }: NumberFormatValues ): boolean => { + const minPrice = minConstraint / 10 ** minorUnit; + const currentMaxPrice = currentMaxValue / 10 ** minorUnit; - return ( - floatValue !== undefined && - floatValue >= minPrice && - floatValue < currentMaxPrice - ); -}; + return ( + floatValue !== undefined && + floatValue >= minPrice && + floatValue < currentMaxPrice + ); + }; diff --git a/assets/js/base/components/product-list/product-list.tsx b/assets/js/base/components/product-list/product-list.tsx index e8b47a7a0c9..c2d0ca4b2e0 100644 --- a/assets/js/base/components/product-list/product-list.tsx +++ b/assets/js/base/components/product-list/product-list.tsx @@ -142,9 +142,8 @@ const ProductList = ( { currentPage, } ) ); - const { products, totalProducts, productsLoading } = useStoreProducts( - queryState - ); + const { products, totalProducts, productsLoading } = + useStoreProducts( queryState ); const { parentClassName, parentName } = useInnerBlockLayoutContext(); const totalQuery = extractPaginationAndSortAttributes( queryState ); const { dispatchStoreEvent } = useStoreEvents(); diff --git a/assets/js/base/components/product-list/types.ts b/assets/js/base/components/product-list/types.ts index 8588811563c..983bbb8372e 100644 --- a/assets/js/base/components/product-list/types.ts +++ b/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 = ( - orderName: string -) => +export type GetSortArgs = ( orderName: string ) => | { orderby: string; order: string; diff --git a/assets/js/base/components/radio-control-accordion/index.js b/assets/js/base/components/radio-control-accordion/index.js index 90dff648602..6d01e3bd5af 100644 --- a/assets/js/base/components/radio-control-accordion/index.js +++ b/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, } ) } > diff --git a/assets/js/base/components/radio-control/option.tsx b/assets/js/base/components/radio-control/option.tsx index 3ff328592d7..00af90e8749 100644 --- a/assets/js/base/components/radio-control/option.tsx +++ b/assets/js/base/components/radio-control/option.tsx @@ -15,13 +15,8 @@ const Option = ( { onChange, option, }: RadioControlOptionProps ): JSX.Element => { - const { - value, - label, - description, - secondaryLabel, - secondaryDescription, - } = option; + const { value, 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, } ) } /> { '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 } diff --git a/assets/js/base/context/event-emit/emitter-callback.ts b/assets/js/base/context/event-emit/emitter-callback.ts index d5efc6520f4..92445a2317c 100644 --- a/assets/js/base/context/event-emit/emitter-callback.ts +++ b/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 = ( - type: string, - observerDispatch: React.Dispatch< ActionType > -) => ( callback: ActionCallbackType, priority = 10 ): ( () => void ) => { - const action = actions.addEventCallback( type, callback, priority ); - observerDispatch( action ); - return () => { - observerDispatch( actions.removeEventCallback( type, action.id ) ); +export const emitterCallback = + ( type: string, observerDispatch: React.Dispatch< ActionType > ) => + ( callback: ActionCallbackType, priority = 10 ): ( () => void ) => { + const action = actions.addEventCallback( type, callback, priority ); + observerDispatch( action ); + return () => { + observerDispatch( actions.removeEventCallback( type, action.id ) ); + }; }; -}; diff --git a/assets/js/base/context/hooks/cart/test/use-store-cart-item-quantity.js b/assets/js/base/context/hooks/cart/test/use-store-cart-item-quantity.js index 6108655a7c3..2fe44a1e3de 100644 --- a/assets/js/base/context/hooks/cart/test/use-store-cart-item-quantity.js +++ b/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 } = renderer.root.findByType( - 'div' - ).props; + const { setItemQuantity, quantity } = + renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query expect( quantity ).toBe( 1 ); @@ -106,10 +104,8 @@ describe( 'useStoreCartItemQuantity', () => { setItemQuantity( 2 ); } ); - //eslint-disable-next-line testing-library/await-async-query - const { quantity: newQuantity } = renderer.root.findByType( - 'div' - ).props; + const { quantity: newQuantity } = + renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query 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; + const { removeItem } = renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query act( () => { removeItem(); @@ -148,8 +143,7 @@ describe( 'useStoreCartItemQuantity', () => { ); } ); - //eslint-disable-next-line testing-library/await-async-query - const { setItemQuantity } = renderer.root.findByType( 'div' ).props; + const { setItemQuantity } = renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query act( () => { setItemQuantity( 2 ); @@ -182,10 +176,8 @@ describe( 'useStoreCartItemQuantity', () => { ); } ); - //eslint-disable-next-line testing-library/await-async-query - const { cartItemQuantityErrors } = renderer.root.findByType( - 'div' - ).props; + const { cartItemQuantityErrors } = + renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query 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; + const { isPendingDelete } = renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query expect( isPendingDelete ).toBe( true ); } ); diff --git a/assets/js/base/context/hooks/cart/test/use-store-cart.js b/assets/js/base/context/hooks/cart/test/use-store-cart.js index 9a63fb9c175..ffd5d7e1666 100644 --- a/assets/js/base/context/hooks/cart/test/use-store-cart.js +++ b/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 } = renderer.root.findByType( - 'div' - ).props; - const { - receiveCart: defaultReceiveCart, - ...remaining - } = defaultCartData; + const { results, receiveCart } = + renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query + 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 } = renderer.root.findByType( - 'div' - ).props; + const { results, receiveCart } = + renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query 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 } = renderer.root.findByType( - 'div' - ).props; + const { results, receiveCart } = + renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query expect( results ).toEqual( previewCartData ); expect( receiveCart ).toEqual( receiveCartMock ); diff --git a/assets/js/base/context/hooks/cart/use-store-cart-item-quantity.ts b/assets/js/base/context/hooks/cart/use-store-cart-item-quantity.ts index e6395a2e6b6..d5d96fa1d22 100644 --- a/assets/js/base/context/hooks/cart/use-store-cart-item-quantity.ts +++ b/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 { - key: cartItemKey = '', - quantity: cartItemQuantity = 1, - } = verifiedCartItem; + const { key: cartItemKey = '', 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( - storeKey - ); + const { removeItemFromCart, changeCartItemQuantity } = + useDispatch( storeKey ); // Update local state when server updates. useEffect( () => setQuantity( cartItemQuantity ), [ cartItemQuantity ] ); diff --git a/assets/js/base/context/hooks/cart/use-store-cart.ts b/assets/js/base/context/hooks/cart/use-store-cart.ts index f14252e0505..ff130605775 100644 --- a/assets/js/base/context/hooks/cart/use-store-cart.ts +++ b/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( - 'getCartData' - ); + const cartIsLoading = + ! store.hasFinishedResolution( 'getCartData' ); const isLoadingRates = store.isCustomerDataUpdating(); const { receiveCart } = dispatch( storeKey ); diff --git a/assets/js/base/context/hooks/collections/test/use-collection.js b/assets/js/base/context/hooks/collections/test/use-collection.js index a959b56d9d7..2d1cb5178d4 100644 --- a/assets/js/base/context/hooks/collections/test/use-collection.js +++ b/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 } = testRenderer.root.findByType( - 'div' - ).props; + const { results, isLoading } = + testRenderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query return { results, isLoading, @@ -56,10 +54,12 @@ describe( 'useCollection', () => { ); - const getTestComponent = () => ( { options } ) => { - const items = useCollection( options ); - return
; - }; + const getTestComponent = + () => + ( { options } ) => { + const items = useCollection( options ); + return
; + }; const setUpMocks = () => { mocks = { diff --git a/assets/js/base/context/hooks/collections/use-collection-data.ts b/assets/js/base/context/hooks/collections/use-collection-data.ts index 0d246958156..1e887193191 100644 --- a/assets/js/base/context/hooks/collections/use-collection-data.ts +++ b/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 [ - calculateAttributesQueryState, - setCalculateAttributesQueryState, - ] = useQueryStateByKey( 'calculate_attribute_counts', [], context ); - const [ - calculatePriceRangeQueryState, - setCalculatePriceRangeQueryState, - ] = useQueryStateByKey( 'calculate_price_range', null, context ); + const [ calculateAttributesQueryState, setCalculateAttributesQueryState ] = + useQueryStateByKey( 'calculate_attribute_counts', [], context ); + const [ calculatePriceRangeQueryState, setCalculatePriceRangeQueryState ] = + useQueryStateByKey( 'calculate_price_range', null, context ); const [ calculateStockStatusQueryState, setCalculateStockStatusQueryState, diff --git a/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts b/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts index 9ee6a9e4f6d..7e460a3eb62 100644 --- a/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts +++ b/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts @@ -64,11 +64,8 @@ export const usePaymentMethodInterface = (): PaymentMethodInterface => { selectShippingRate, needsShipping, } = useShippingData(); - const { - billingAddress, - shippingAddress, - setShippingAddress, - } = useCustomerDataContext(); + const { billingAddress, 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: - 'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4228', + link: 'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4228', } ); setExpressPaymentError( errorMessage ); diff --git a/assets/js/base/context/hooks/shipping/use-select-shipping-rate.ts b/assets/js/base/context/hooks/shipping/use-select-shipping-rate.ts index 7f25cd55bd1..22b2a669f00 100644 --- a/assets/js/base/context/hooks/shipping/use-select-shipping-rate.ts +++ b/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 diff --git a/assets/js/base/context/hooks/shipping/use-shipping-data.ts b/assets/js/base/context/hooks/shipping/use-shipping-data.ts index c1e0136da47..1759a0aba49 100644 --- a/assets/js/base/context/hooks/shipping/use-shipping-data.ts +++ b/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( - shippingRates - ); + const derivedSelectedRates = + deriveSelectedShippingRates( shippingRates ); if ( isObject( derivedSelectedRates ) && ! isShallowEqual( selectedRates.current, derivedSelectedRates ) diff --git a/assets/js/base/context/hooks/test/use-store-products.js b/assets/js/base/context/hooks/test/use-store-products.js index cf72d6520e0..5695994b662 100644 --- a/assets/js/base/context/hooks/test/use-store-products.js +++ b/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 { - products, - totalProducts, - productsLoading, - } = testRenderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query + const { products, totalProducts, productsLoading } = + testRenderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query return { products, totalProducts, @@ -36,10 +33,12 @@ describe( 'useStoreProducts', () => { ); - const getTestComponent = () => ( { query } ) => { - const items = useStoreProducts( query ); - return
; - }; + const getTestComponent = + () => + ( { query } ) => { + const items = useStoreProducts( query ); + return
; + }; const setUpMocks = () => { mocks = { diff --git a/assets/js/base/context/hooks/use-checkout-address.ts b/assets/js/base/context/hooks/use-checkout-address.ts index 445bd559489..4b06b7fcb0c 100644 --- a/assets/js/base/context/hooks/use-checkout-address.ts +++ b/assets/js/base/context/hooks/use-checkout-address.ts @@ -37,10 +37,8 @@ interface CheckoutAddress { */ export const useCheckoutAddress = (): CheckoutAddress => { const { needsShipping } = useShippingData(); - const { - useShippingAsBilling, - setUseShippingAsBilling, - } = useCheckoutContext(); + const { useShippingAsBilling, setUseShippingAsBilling } = + useCheckoutContext(); const { billingAddress, setBillingAddress, diff --git a/assets/js/base/context/hooks/use-checkout-submit.js b/assets/js/base/context/hooks/use-checkout-submit.js index 728fa7a4947..391749dd211 100644 --- a/assets/js/base/context/hooks/use-checkout-submit.js +++ b/assets/js/base/context/hooks/use-checkout-submit.js @@ -25,10 +25,8 @@ export const useCheckoutSubmit = () => { hasError, } = useCheckoutContext(); const { paymentMethods = {} } = usePaymentMethods(); - const { - activePaymentMethod, - currentStatus: paymentStatus, - } = usePaymentMethodDataContext(); + const { activePaymentMethod, currentStatus: paymentStatus } = + usePaymentMethodDataContext(); const paymentMethod = paymentMethods[ activePaymentMethod ] || {}; const waitingForProcessing = isProcessing || isAfterProcessing || isBeforeProcessing; diff --git a/assets/js/base/context/hooks/use-validation.ts b/assets/js/base/context/hooks/use-validation.ts index 5489a41d68b..8145d5a6dd3 100644 --- a/assets/js/base/context/hooks/use-validation.ts +++ b/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( - errorsObject - ).map( ( [ validationErrorId, error ] ) => [ - `${ prefix }-${ validationErrorId }`, - error, - ] ) + Object.entries( errorsObject ).map( + ( [ validationErrorId, error ] ) => [ + `${ prefix }-${ validationErrorId }`, + error, + ] + ) ) ), [ setValidationErrors ] diff --git a/assets/js/base/context/providers/add-to-cart-form/form-state/index.js b/assets/js/base/context/providers/add-to-cart-form/form-state/index.js index d657915005b..83f181ee4a0 100644 --- a/assets/js/base/context/providers/add-to-cart-form/form-state/index.js +++ b/assets/js/base/context/providers/add-to-cart-form/form-state/index.js @@ -101,25 +101,23 @@ export const AddToCartFormStateContextProvider = ( { const currentObservers = useShallowEqual( observers ); const { createErrorNotice } = useDispatch( 'core/notices' ); const { setValidationErrors } = useValidationContext(); - const { - isSuccessResponse, - isErrorResponse, - isFailResponse, - } = useEmitResponse(); + const { isSuccessResponse, isErrorResponse, isFailResponse } = + useEmitResponse(); /** * @type {AddToCartFormEventRegistration} */ const eventRegistration = useMemo( () => ( { - onAddToCartAfterProcessingWithSuccess: emitterObservers( - observerDispatch - ).onAddToCartAfterProcessingWithSuccess, - onAddToCartAfterProcessingWithError: emitterObservers( - observerDispatch - ).onAddToCartAfterProcessingWithError, - onAddToCartBeforeProcessing: emitterObservers( observerDispatch ) - .onAddToCartBeforeProcessing, + onAddToCartAfterProcessingWithSuccess: + emitterObservers( observerDispatch ) + .onAddToCartAfterProcessingWithSuccess, + onAddToCartAfterProcessingWithError: + emitterObservers( observerDispatch ) + .onAddToCartAfterProcessingWithError, + onAddToCartBeforeProcessing: + emitterObservers( observerDispatch ) + .onAddToCartBeforeProcessing, } ), [ observerDispatch ] ); diff --git a/assets/js/base/context/providers/add-to-cart-form/form/submit/index.js b/assets/js/base/context/providers/add-to-cart-form/form/submit/index.js index bb6f165a8f5..9f0b3d6071b 100644 --- a/assets/js/base/context/providers/add-to-cart-form/form/submit/index.js +++ b/assets/js/base/context/providers/add-to-cart-form/form/submit/index.js @@ -30,10 +30,8 @@ const FormSubmit = () => { isProcessing, requestParams, } = useAddToCartFormContext(); - const { - hasValidationErrors, - showAllValidationErrors, - } = useValidationContext(); + const { hasValidationErrors, showAllValidationErrors } = + useValidationContext(); const { createErrorNotice, removeNotice } = useDispatch( 'core/notices' ); const { receiveCart } = useStoreCart(); const [ isSubmitting, setIsSubmitting ] = useState( false ); @@ -51,10 +49,11 @@ const FormSubmit = () => { // Subscribe to emitter before processing. useEffect( () => { - const unsubscribeProcessing = eventRegistration.onAddToCartBeforeProcessing( - checkValidationContext, - 0 - ); + const unsubscribeProcessing = + eventRegistration.onAddToCartBeforeProcessing( + checkValidationContext, + 0 + ); return () => { unsubscribeProcessing(); }; diff --git a/assets/js/base/context/providers/cart-checkout/checkout-state/index.tsx b/assets/js/base/context/providers/cart-checkout/checkout-state/index.tsx index ff648e413a3..54317b23bc6 100644 --- a/assets/js/base/context/providers/cart-checkout/checkout-state/index.tsx +++ b/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 { - isSuccessResponse, - isErrorResponse, - isFailResponse, - shouldRetry, - } = useEmitResponse(); - const { - checkoutNotices, - paymentNotices, - expressPaymentNotices, - } = useCheckoutNotices(); + const { isSuccessResponse, isErrorResponse, isFailResponse, 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( - response - ); + const paymentResult = + 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( - observerResponses - ); + const errorResponse = + handleErrorResponse( observerResponses ); if ( errorResponse !== null ) { // irrecoverable error so set complete if ( ! shouldRetry( errorResponse ) ) { diff --git a/assets/js/base/context/providers/cart-checkout/checkout-state/utils.ts b/assets/js/base/context/providers/cart-checkout/checkout-state/utils.ts index 56c74eeeca6..5e93314a7a8 100644 --- a/assets/js/base/context/providers/cart-checkout/checkout-state/utils.ts +++ b/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( - value - ); + paymentResult.paymentDetails[ key ] = + decodeEntities( value ); } ); } diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/constants.ts b/assets/js/base/context/providers/cart-checkout/payment-methods/constants.ts index 28d2f2de72e..a5d8e208795 100644 --- a/assets/js/base/context/providers/cart-checkout/payment-methods/constants.ts +++ b/assets/js/base/context/providers/cart-checkout/payment-methods/constants.ts @@ -24,17 +24,18 @@ 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 = { - currentStatus: STATUS.PRISTINE, - shouldSavePaymentMethod: false, - activePaymentMethod: '', - paymentMethodData: { - payment_method: '', - }, - errorMessage: '', - paymentMethods: {}, - expressPaymentMethods: {}, -}; +export const DEFAULT_PAYMENT_DATA_CONTEXT_STATE: PaymentMethodDataContextState = + { + currentStatus: STATUS.PRISTINE, + shouldSavePaymentMethod: false, + activePaymentMethod: '', + paymentMethodData: { + payment_method: '', + }, + errorMessage: '', + paymentMethods: {}, + expressPaymentMethods: {}, + }; export const DEFAULT_PAYMENT_METHOD_DATA: PaymentMethodDataContextType = { setPaymentStatus: () => ( { diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx b/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx index b8bbd14e3b4..833f71fe0e4 100644 --- a/assets/js/base/context/providers/cart-checkout/payment-methods/payment-method-data-context.tsx +++ b/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( - 'core/notices' - ); + const { createErrorNotice: addErrorNotice, removeNotice } = + useDispatch( 'core/notices' ); const { isSuccessResponse, isErrorResponse, @@ -93,10 +92,8 @@ export const PaymentMethodDataProvider = ( { DEFAULT_PAYMENT_DATA_CONTEXT_STATE ); - const { - dispatchActions, - setPaymentStatus, - } = usePaymentMethodDataDispatchers( dispatch ); + const { dispatchActions, setPaymentStatus } = + usePaymentMethodDataDispatchers( dispatch ); const paymentMethodsInitialized = usePaymentMethods( dispatchActions.setRegisteredPaymentMethods diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/test/payment-method-data-context.js b/assets/js/base/context/providers/cart-checkout/payment-methods/test/payment-method-data-context.js index 53a0228b933..d764761abc1 100644 --- a/assets/js/base/context/providers/cart-checkout/payment-methods/test/payment-method-data-context.js +++ b/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 { - activePaymentMethod, - paymentMethodData, - } = usePaymentMethodDataContext(); + const { activePaymentMethod, paymentMethodData } = + usePaymentMethodDataContext(); return ( <> diff --git a/assets/js/base/context/providers/cart-checkout/payment-methods/use-payment-method-registration.ts b/assets/js/base/context/providers/cart-checkout/payment-methods/use-payment-method-registration.ts index 3b7733da226..42a993cb22d 100644 --- a/assets/js/base/context/providers/cart-checkout/payment-methods/use-payment-method-registration.ts +++ b/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, diff --git a/assets/js/base/context/providers/cart-checkout/shipping/index.js b/assets/js/base/context/providers/cart-checkout/shipping/index.js index a3700f50713..e17b2ae15c4 100644 --- a/assets/js/base/context/providers/cart-checkout/shipping/index.js +++ b/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 ) - .onSuccess, + onShippingRateSuccess: + emitterObservers( observerDispatch ).onSuccess, onShippingRateFail: emitterObservers( observerDispatch ).onFail, - onShippingRateSelectSuccess: emitterObservers( observerDispatch ) - .onSelectSuccess, - onShippingRateSelectFail: emitterObservers( observerDispatch ) - .onSelectFail, + onShippingRateSelectSuccess: + emitterObservers( observerDispatch ).onSelectSuccess, + onShippingRateSelectFail: + emitterObservers( observerDispatch ).onSelectFail, } ), [ observerDispatch ] ); diff --git a/assets/js/base/hocs/with-reviews.js b/assets/js/base/hocs/with-reviews.js index 16de44cc9bc..09441947d16 100644 --- a/assets/js/base/hocs/with-reviews.js +++ b/assets/js/base/hocs/with-reviews.js @@ -92,13 +92,8 @@ const withReviews = ( OriginalComponent ) => { } getArgs( reviewsToSkip ) { - const { - categoryIds, - order, - orderby, - productId, - reviewsToDisplay, - } = this.props; + const { categoryIds, order, orderby, productId, reviewsToDisplay } = + this.props; const args = { order, orderby, @@ -214,9 +209,8 @@ const withReviews = ( OriginalComponent ) => { } } - const { - displayName = OriginalComponent.name || 'Component', - } = OriginalComponent; + const { displayName = OriginalComponent.name || 'Component' } = + OriginalComponent; WrappedComponent.displayName = `WithReviews( ${ displayName } )`; return WrappedComponent; diff --git a/assets/js/base/hooks/test/use-position-relative-to-viewport.js b/assets/js/base/hooks/test/use-position-relative-to-viewport.js index 0b18403ea9d..1b0255554c5 100644 --- a/assets/js/base/hooks/test/use-position-relative-to-viewport.js +++ b/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 [ - referenceElement, - positionRelativeToViewport, - ] = usePositionRelativeToViewport(); + const [ referenceElement, positionRelativeToViewport ] = + usePositionRelativeToViewport(); return ( <> diff --git a/assets/js/base/hooks/test/use-previous.js b/assets/js/base/hooks/test/use-previous.js index 0018116ca25..1115c9a9df9 100644 --- a/assets/js/base/hooks/test/use-previous.js +++ b/assets/js/base/hooks/test/use-previous.js @@ -25,8 +25,8 @@ describe( 'usePrevious', () => { renderer = TestRenderer.create( ); } ); const testValue = renderer.root.findByType( 'div' ).props.testValue; - const testPreviousValue = renderer.root.findByType( 'div' ).props - .previousValue; + const testPreviousValue = + renderer.root.findByType( 'div' ).props.previousValue; expect( testValue ).toBe( 1 ); expect( testPreviousValue ).toBe( undefined ); @@ -43,8 +43,8 @@ describe( 'usePrevious', () => { renderer.update( ); } ); testValue = renderer.root.findByType( 'div' ).props.testValue; - testPreviousValue = renderer.root.findByType( 'div' ).props - .previousValue; + testPreviousValue = + renderer.root.findByType( 'div' ).props.previousValue; expect( testValue ).toBe( 2 ); expect( testPreviousValue ).toBe( 1 ); @@ -52,8 +52,8 @@ describe( 'usePrevious', () => { renderer.update( ); } ); testValue = renderer.root.findByType( 'div' ).props.testValue; - testPreviousValue = renderer.root.findByType( 'div' ).props - .previousValue; + testPreviousValue = + 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 - .previousValue; + testPreviousValue = + 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 - .previousValue; + testPreviousValue = + renderer.root.findByType( 'div' ).props.previousValue; expect( testValue ).toBe( 3 ); expect( testPreviousValue ).toBe( 1 ); } ); diff --git a/assets/js/base/hooks/use-position-relative-to-viewport.js b/assets/js/base/hooks/use-position-relative-to-viewport.js index 06e94e7f457..8072bb1e772 100644 --- a/assets/js/base/hooks/use-position-relative-to-viewport.js +++ b/assets/js/base/hooks/use-position-relative-to-viewport.js @@ -43,10 +43,8 @@ const style = { * ``` */ export const usePositionRelativeToViewport = () => { - const [ - positionRelativeToViewport, - setPositionRelativeToViewport, - ] = useState( '' ); + const [ positionRelativeToViewport, setPositionRelativeToViewport ] = + useState( '' ); const referenceElementRef = useRef( null ); const intersectionObserver = useRef( new IntersectionObserver( diff --git a/assets/js/blocks-registry/payment-methods/express-payment-method-config.ts b/assets/js/blocks-registry/payment-methods/express-payment-method-config.ts index 98c1b7ceda1..83a6cc0bc3f 100644 --- a/assets/js/blocks-registry/payment-methods/express-payment-method-config.ts +++ b/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; diff --git a/assets/js/blocks-registry/payment-methods/extensions-config.ts b/assets/js/blocks-registry/payment-methods/extensions-config.ts index 3edbbd4f6e3..25fdb7a38dc 100644 --- a/assets/js/blocks-registry/payment-methods/extensions-config.ts +++ b/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, diff --git a/assets/js/blocks-registry/payment-methods/payment-method-config-helper.ts b/assets/js/blocks-registry/payment-methods/payment-method-config-helper.ts index f0e28a28d98..3f0868f124d 100644 --- a/assets/js/blocks-registry/payment-methods/payment-method-config-helper.ts +++ b/assets/js/blocks-registry/payment-methods/payment-method-config-helper.ts @@ -17,58 +17,66 @@ import { } from './extensions-config'; // Filter out payment methods by supported features and cart requirement. -export const canMakePaymentWithFeaturesCheck = ( - canMakePayment: CanMakePaymentCallback, - features: string[] -): CanMakePaymentCallback => ( canPayArgument ) => { - const requirements = canPayArgument?.paymentRequirements || []; - const featuresSupportRequirements = requirements.every( ( requirement ) => - features.includes( requirement ) - ); - return featuresSupportRequirements && canMakePayment( canPayArgument ); -}; +export const canMakePaymentWithFeaturesCheck = + ( + canMakePayment: CanMakePaymentCallback, + features: string[] + ): CanMakePaymentCallback => + ( canPayArgument ) => { + const requirements = canPayArgument?.paymentRequirements || []; + const featuresSupportRequirements = requirements.every( + ( requirement ) => features.includes( requirement ) + ); + return featuresSupportRequirements && canMakePayment( canPayArgument ); + }; // Filter out payment methods by callbacks registered by extensions. -export const canMakePaymentWithExtensions = ( - canMakePayment: CanMakePaymentCallback, - extensionsCallbacks: NamespacedCanMakePaymentExtensionsCallbacks, - paymentMethodName: PaymentMethodName -): CanMakePaymentCallback => ( canPayArgument ) => { - // Validate whether the payment method is available based on its own criteria first. - let canPay = canMakePayment( canPayArgument ); +export const canMakePaymentWithExtensions = + ( + canMakePayment: CanMakePaymentCallback, + extensionsCallbacks: NamespacedCanMakePaymentExtensionsCallbacks, + paymentMethodName: PaymentMethodName + ): CanMakePaymentCallback => + ( canPayArgument ) => { + // Validate whether the payment method is available based on its own criteria first. + let canPay = canMakePayment( canPayArgument ); - if ( canPay ) { - // Gather all callbacks for paymentMethodName. - const namespacedCallbacks: Record< - ExtensionNamespace, - CanMakePaymentExtensionCallback - > = {}; + if ( canPay ) { + // Gather all callbacks for paymentMethodName. + const namespacedCallbacks: Record< + ExtensionNamespace, + CanMakePaymentExtensionCallback + > = {}; - Object.entries( extensionsCallbacks ).forEach( - ( [ namespace, callbacks ] ) => { - namespacedCallbacks[ namespace ] = - callbacks[ paymentMethodName ]; - } - ); + Object.entries( extensionsCallbacks ).forEach( + ( [ namespace, callbacks ] ) => { + namespacedCallbacks[ namespace ] = + callbacks[ paymentMethodName ]; + } + ); - canPay = Object.keys( namespacedCallbacks ).every( ( namespace ) => { - try { - return namespacedCallbacks[ namespace ]( canPayArgument ); - } catch ( err ) { - // eslint-disable-next-line no-console - console.error( - `Error when executing callback for ${ paymentMethodName } in ${ namespace }`, - err - ); - // .every() expects a return value at the end of every arrow function and - // this ensures that the error is ignored when computing the whole result. - return true; - } - } ); - } + canPay = Object.keys( namespacedCallbacks ).every( + ( namespace ) => { + try { + return namespacedCallbacks[ namespace ]( + canPayArgument + ); + } catch ( err ) { + // eslint-disable-next-line no-console + console.error( + `Error when executing callback for ${ paymentMethodName } in ${ namespace }`, + err + ); + // .every() expects a return value at the end of every arrow function and + // this ensures that the error is ignored when computing the whole result. + return true; + } + } + ); + } - return canPay; -}; + 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< - PaymentMethodName, - CanMakePaymentCallback - >[] ).some( ( callbacks ) => paymentMethodName in callbacks ) + return ( + Object.values( extensionsConfig.canMakePayment ) as Record< + PaymentMethodName, + CanMakePaymentCallback + >[] + ).some( ( callbacks ) => paymentMethodName in callbacks ) ? canMakePaymentWithExtensions( canPay, extensionsConfig.canMakePayment, diff --git a/assets/js/blocks-registry/payment-methods/payment-method-config.tsx b/assets/js/blocks-registry/payment-methods/payment-method-config.tsx index 8c0278ec664..8385b872228 100644 --- a/assets/js/blocks-registry/payment-methods/payment-method-config.tsx +++ b/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: - 'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3686', + link: 'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3686', } ); } diff --git a/assets/js/blocks-registry/payment-methods/registry.ts b/assets/js/blocks-registry/payment-methods/registry.ts index e71246da713..cc76e9be183 100644 --- a/assets/js/blocks-registry/payment-methods/registry.ts +++ b/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: - 'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3404', + link: '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: - 'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3404', + link: 'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/3404', } ); } else { paymentMethodConfig = new ExpressPaymentMethodConfig( options ); diff --git a/assets/js/blocks-registry/payment-methods/test/payment-method-config-helper.ts b/assets/js/blocks-registry/payment-methods/test/payment-method-config-helper.ts index 1cc9b279e2a..2951725c3d7 100644 --- a/assets/js/blocks-registry/payment-methods/test/payment-method-config-helper.ts +++ b/assets/js/blocks-registry/payment-methods/test/payment-method-config-helper.ts @@ -153,11 +153,12 @@ 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( - canMakePayment, - canMakePaymentExtensionsCallbacks, - 'cod' - )( canMakePaymentArgument ); + const canMakePaymentWithExtensionsResult = + helpers.canMakePaymentWithExtensions( + canMakePayment, + canMakePaymentExtensionsCallbacks, + 'cod' + )( canMakePaymentArgument ); expect( canMakePaymentWithExtensionsResult ).toBe( false ); expect( trueCallback ).not.toHaveBeenCalled(); } ); diff --git a/assets/js/blocks/active-filters/active-attribute-filters.js b/assets/js/blocks/active-filters/active-attribute-filters.js index b7b879820ea..789fdd9fb05 100644 --- a/assets/js/blocks/active-filters/active-attribute-filters.js +++ b/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( diff --git a/assets/js/blocks/active-filters/block.js b/assets/js/blocks/active-filters/block.js index 2f8cd9e1db5..44182e7445b 100644 --- a/assets/js/blocks/active-filters/block.js +++ b/assets/js/blocks/active-filters/block.js @@ -125,9 +125,8 @@ const ActiveFiltersBlock = ( { } ); }, [ productAttributes, blockAttributes.displayStyle ] ); - const [ productRatings, setProductRatings ] = useQueryStateByKey( - 'ratings' - ); + const [ productRatings, setProductRatings ] = + useQueryStateByKey( 'ratings' ); /** * Parse the filter URL to set the active rating fitlers. diff --git a/assets/js/blocks/attribute-filter/block.js b/assets/js/blocks/attribute-filter/block.js index b48ddbcd227..03ae366c021 100644 --- a/assets/js/blocks/attribute-filter/block.js +++ b/assets/js/blocks/attribute-filter/block.js @@ -81,9 +81,8 @@ const AttributeFilterBlock = ( { isString ); - const [ hasSetPhpFilterDefaults, setHasSetPhpFilterDefaults ] = useState( - false - ); + const [ hasSetPhpFilterDefaults, setHasSetPhpFilterDefaults ] = + useState( false ); const attributeObject = blockAttributes.isPreview && ! blockAttributes.attributeId @@ -103,37 +102,31 @@ const AttributeFilterBlock = ( { const borderProps = useBorderProps( blockAttributes ); const [ queryState ] = useQueryStateByContext(); - const [ - productAttributesQuery, - setProductAttributesQuery, - ] = useQueryStateByKey( 'attributes', [] ); - - const { - results: attributeTerms, - isLoading: attributeTermsLoading, - } = useCollection( { - namespace: '/wc/store/v1', - resourceName: 'products/attributes/terms', - resourceValues: [ attributeObject?.id || 0 ], - shouldSelect: blockAttributes.attributeId > 0, - } ); + const [ productAttributesQuery, setProductAttributesQuery ] = + useQueryStateByKey( 'attributes', [] ); + + const { results: attributeTerms, isLoading: attributeTermsLoading } = + useCollection( { + namespace: '/wc/store/v1', + resourceName: 'products/attributes/terms', + resourceValues: [ attributeObject?.id || 0 ], + shouldSelect: blockAttributes.attributeId > 0, + } ); const filterAvailableTerms = blockAttributes.displayStyle !== 'dropdown' && blockAttributes.queryType === 'and'; - const { - results: filteredCounts, - isLoading: filteredCountsLoading, - } = useCollectionData( { - queryAttribute: { - taxonomy: attributeObject?.taxonomy, - queryType: blockAttributes.queryType, - }, - queryState: { - ...queryState, - attributes: filterAvailableTerms ? queryState.attributes : null, - }, - } ); + const { results: filteredCounts, isLoading: filteredCountsLoading } = + useCollectionData( { + queryAttribute: { + taxonomy: attributeObject?.taxonomy, + queryType: blockAttributes.queryType, + }, + queryState: { + ...queryState, + attributes: filterAvailableTerms ? queryState.attributes : null, + }, + } ); /** * Get count data about a given term by ID. diff --git a/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment-methods.js b/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment-methods.js index c173cc399bd..10630c08a33 100644 --- a/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment-methods.js +++ b/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: - 'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4228', + link: '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, } ) } ) : null; diff --git a/assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-card.js b/assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-card.js index f9914c96cd0..57210eef3d6 100644 --- a/assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-card.js +++ b/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 { - shouldSavePayment, - setShouldSavePayment, - } = usePaymentMethodDataContext(); + const { shouldSavePayment, setShouldSavePayment } = + usePaymentMethodDataContext(); const { customerId } = useCheckoutContext(); return ( diff --git a/assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-options.js b/assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-options.js index 51ae62304eb..d0c8e4d95d7 100644 --- a/assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-options.js +++ b/assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-options.js @@ -34,10 +34,8 @@ const PaymentMethodOptions = () => { customerPaymentMethods, } = usePaymentMethodDataContext(); const { paymentMethods } = usePaymentMethods(); - const { - activePaymentMethod, - ...paymentMethodInterface - } = usePaymentMethodInterface(); + const { activePaymentMethod, ...paymentMethodInterface } = + usePaymentMethodInterface(); const { noticeContexts } = useEmitResponse(); const { removeNotice } = useDispatch( 'core/notices' ); const { dispatchCheckoutEvent } = useStoreEvents(); diff --git a/assets/js/blocks/cart-checkout-shared/payment-methods/test/payment-methods.js b/assets/js/blocks/cart-checkout-shared/payment-methods/test/payment-methods.js index da89b041d3d..0a79fffae42 100644 --- a/assets/js/blocks/cart-checkout-shared/payment-methods/test/payment-methods.js +++ b/assets/js/blocks/cart-checkout-shared/payment-methods/test/payment-methods.js @@ -32,14 +32,16 @@ jest.mock( '../saved-payment-method-options', () => ( { onChange } ) => { jest.mock( '@woocommerce/base-components/radio-control-accordion', - () => ( { onChange } ) => ( - <> - Payment method options - - - ) + () => + ( { onChange } ) => + ( + <> + Payment method options + + + ) ); const registerMockPaymentMethods = () => { @@ -103,10 +105,8 @@ describe( 'PaymentMethods', () => { test( 'selecting new payment method', async () => { const ShowActivePaymentMethod = () => { - const { - activePaymentMethod, - activeSavedToken, - } = usePaymentMethodDataContext(); + const { activePaymentMethod, activeSavedToken } = + usePaymentMethodDataContext(); return ( <>
diff --git a/assets/js/blocks/cart-checkout-shared/use-forced-layout.ts b/assets/js/blocks/cart-checkout-shared/use-forced-layout.ts index 39deab87852..bece364977e 100644 --- a/assets/js/blocks/cart-checkout-shared/use-forced-layout.ts +++ b/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( - 'core/block-editor' - ); + const { insertBlock, replaceInnerBlocks } = + useDispatch( 'core/block-editor' ); const { innerBlocks, registeredBlockTypes } = useSelect( ( select ) => { return { - innerBlocks: select( 'core/block-editor' ).getBlocks( - clientId - ), + innerBlocks: + select( 'core/block-editor' ).getBlocks( clientId ), registeredBlockTypes: currentRegisteredBlocks.current.map( ( blockName ) => getBlockType( blockName ) ), @@ -110,9 +108,10 @@ export const useForcedLayout = ( { } // Is the forced block part of the default template, find it's original position. - const defaultTemplatePosition = currentDefaultTemplate.current.findIndex( - ( [ blockName ] ) => blockName === block.name - ); + const defaultTemplatePosition = + currentDefaultTemplate.current.findIndex( + ( [ blockName ] ) => blockName === block.name + ); switch ( defaultTemplatePosition ) { case -1: diff --git a/assets/js/blocks/cart-checkout-shared/use-view-switcher.tsx b/assets/js/blocks/cart-checkout-shared/use-view-switcher.tsx index 8d1fdc63c2c..ead1af9d067 100644 --- a/assets/js/blocks/cart-checkout-shared/use-view-switcher.tsx +++ b/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 { - getBlock, - getSelectedBlockClientId, - getBlockParentsByBlockName, - } = select( blockEditorStore ); + const { getBlock, getSelectedBlockClientId, getBlockParentsByBlockName } = + select( blockEditorStore ); const selectedBlockClientId = getSelectedBlockClientId(); useEffect( () => { diff --git a/assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx b/assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx index 999d299d9f0..af32e5f9551 100644 --- a/assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx +++ b/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 { - quantity, - setItemQuantity, - removeItem, - isPendingDelete, - } = useStoreCartItemQuantity( lineItem ); + const { quantity, 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( - purchaseAmountSingle - ); + const saleAmountSingle = + regularAmountSingle.subtract( purchaseAmountSingle ); const saleAmount = saleAmountSingle.multiply( quantity ); const totalsCurrency = getCurrencyFromPriceResponse( totals ); let lineSubtotal = parseInt( totals.line_subtotal, 10 ); diff --git a/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/edit.tsx index 1bfbfff15f4..8d7fc22c17c 100644 --- a/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/edit.tsx +++ b/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; diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/edit.tsx index c541b07611b..ccaaf05677f 100644 --- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/edit.tsx +++ b/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, } ) } /> diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/edit.tsx index d7b925202c9..9d3c3df688a 100644 --- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/edit.tsx +++ b/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, } ) } /> diff --git a/assets/js/blocks/cart/inner-blocks/empty-cart-block/edit.tsx b/assets/js/blocks/cart/inner-blocks/empty-cart-block/edit.tsx index 73995b42f9c..7b7a909b23c 100644 --- a/assets/js/blocks/cart/inner-blocks/empty-cart-block/edit.tsx +++ b/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(); diff --git a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx index 49875f5804d..c2aea4d84bb 100644 --- a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx +++ b/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 [ - positionReferenceElement, - positionRelativeToViewport, - ] = usePositionRelativeToViewport(); + const [ positionReferenceElement, positionRelativeToViewport ] = + usePositionRelativeToViewport(); const [ showSpinner, setShowSpinner ] = useState( false ); useEffect( () => { diff --git a/assets/js/blocks/cart/inner-blocks/register-components.ts b/assets/js/blocks/cart/inner-blocks/register-components.ts index 6db34a47bba..bf4ac082f28 100644 --- a/assets/js/blocks/cart/inner-blocks/register-components.ts +++ b/assets/js/blocks/cart/inner-blocks/register-components.ts @@ -16,170 +16,187 @@ __webpack_public_path__ = WC_BLOCKS_BUILD_URL; registerCheckoutBlock( { metadata: metadata.FILLED_CART, - component: lazy( () => - import( - /* webpackChunkName: "cart-blocks/filled-cart" */ - './filled-cart-block/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "cart-blocks/filled-cart" */ + './filled-cart-block/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.EMPTY_CART, - component: lazy( () => - import( - /* webpackChunkName: "cart-blocks/empty-cart" */ - './empty-cart-block/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "cart-blocks/empty-cart" */ + './empty-cart-block/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CART_ITEMS, - component: lazy( () => - import( - /* webpackChunkName: "cart-blocks/cart-items" */ - './cart-items-block/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "cart-blocks/cart-items" */ + './cart-items-block/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CART_LINE_ITEMS, - component: lazy( () => - import( - /* webpackChunkName: "cart-blocks/cart-line-items" */ - './cart-line-items-block/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "cart-blocks/cart-line-items" */ + './cart-line-items-block/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CART_TOTALS, - component: lazy( () => - import( - /* webpackChunkName: "cart-blocks/cart-totals" */ - './cart-totals-block/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "cart-blocks/cart-totals" */ + './cart-totals-block/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CART_EXPRESS_PAYMENT, - component: lazy( () => - import( - /* webpackChunkName: "cart-blocks/cart-express-payment" */ - './cart-express-payment-block/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "cart-blocks/cart-express-payment" */ + './cart-express-payment-block/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.PROCEED_TO_CHECKOUT, - component: lazy( () => - import( - /* webpackChunkName: "cart-blocks/proceed-to-checkout" */ - './proceed-to-checkout-block/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "cart-blocks/proceed-to-checkout" */ + './proceed-to-checkout-block/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CART_ACCEPTED_PAYMENT_METHODS, - component: lazy( () => - import( - /* webpackChunkName: "cart-blocks/cart-accepted-payment-methods" */ - './cart-accepted-payment-methods-block/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "cart-blocks/cart-accepted-payment-methods" */ + './cart-accepted-payment-methods-block/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CART_ORDER_SUMMARY, - component: lazy( () => - import( - /* webpackChunkName: "cart-blocks/cart-order-summary" */ - './cart-order-summary-block/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "cart-blocks/cart-order-summary" */ + './cart-order-summary-block/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CART_ORDER_SUMMARY_HEADING, - component: lazy( () => - import( - /* webpackChunkName: "cart-blocks/order-summary-heading" */ - './cart-order-summary-heading/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "cart-blocks/order-summary-heading" */ + './cart-order-summary-heading/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CART_ORDER_SUMMARY_SUBTOTAL, - component: lazy( () => - import( - /* webpackChunkName: "cart-blocks/order-summary-subtotal" */ - './cart-order-summary-subtotal/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "cart-blocks/order-summary-subtotal" */ + './cart-order-summary-subtotal/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CART_ORDER_SUMMARY_FEE, - component: lazy( () => - import( - /* webpackChunkName: "cart-blocks/order-summary-fee" */ - './cart-order-summary-fee/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "cart-blocks/order-summary-fee" */ + './cart-order-summary-fee/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CART_ORDER_SUMMARY_DISCOUNT, - component: lazy( () => - import( - /* webpackChunkName: "cart-blocks/order-summary-discount" */ - './cart-order-summary-discount/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "cart-blocks/order-summary-discount" */ + './cart-order-summary-discount/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CART_ORDER_SUMMARY_COUPON_FORM, - component: lazy( () => - import( - /* webpackChunkName: "cart-blocks/order-summary-coupon-form" */ - './cart-order-summary-coupon-form/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "cart-blocks/order-summary-coupon-form" */ + './cart-order-summary-coupon-form/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CART_ORDER_SUMMARY_SHIPPING, - component: lazy( () => - import( - /* webpackChunkName: "cart-blocks/order-summary-shipping" */ - './cart-order-summary-shipping/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "cart-blocks/order-summary-shipping" */ + './cart-order-summary-shipping/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CART_ORDER_SUMMARY_TAXES, - component: lazy( () => - import( - /* webpackChunkName: "cart-blocks/order-summary-taxes" */ - './cart-order-summary-taxes/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "cart-blocks/order-summary-taxes" */ + './cart-order-summary-taxes/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CART_ORDER_SUMMARY_HEADING, - component: lazy( () => - import( - /* webpackChunkName: "cart-blocks/order-summary-heading" */ - './cart-order-summary-heading/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "cart-blocks/order-summary-heading" */ + './cart-order-summary-heading/frontend' + ) ), } ); diff --git a/assets/js/blocks/checkout/block.tsx b/assets/js/blocks/checkout/block.tsx index 3c5112d8da4..17204ba34c0 100644 --- a/assets/js/blocks/checkout/block.tsx +++ b/assets/js/blocks/checkout/block.tsx @@ -104,14 +104,10 @@ const ScrollOnError = ( { }: { scrollToTop: ( props: Record< string, unknown > ) => void; } ): null => { - const { - hasError: checkoutHasError, - isIdle: checkoutIsIdle, - } = useCheckoutContext(); - const { - hasValidationErrors, - showAllValidationErrors, - } = useValidationContext(); + const { hasError: checkoutHasError, isIdle: checkoutIsIdle } = + useCheckoutContext(); + const { hasValidationErrors, showAllValidationErrors } = + useValidationContext(); const hasErrorsToDisplay = checkoutIsIdle && diff --git a/assets/js/blocks/checkout/context.ts b/assets/js/blocks/checkout/context.ts index 6e5be401cc0..7293a909e3a 100644 --- a/assets/js/blocks/checkout/context.ts +++ b/assets/js/blocks/checkout/context.ts @@ -41,17 +41,17 @@ export const CheckoutBlockContext = createContext< CheckoutBlockContextProps >( } ); -export const CheckoutBlockControlsContext = createContext< - CheckoutBlockControlsContextProps ->( { - addressFieldControls: () => null, - accountControls: () => null, -} ); +export const CheckoutBlockControlsContext = + createContext< CheckoutBlockControlsContextProps >( { + addressFieldControls: () => null, + accountControls: () => null, + } ); export const useCheckoutBlockContext = (): CheckoutBlockContextProps => { return useContext( CheckoutBlockContext ); }; -export const useCheckoutBlockControlsContext = (): CheckoutBlockControlsContextProps => { - return useContext( CheckoutBlockControlsContext ); -}; +export const useCheckoutBlockControlsContext = + (): CheckoutBlockControlsContextProps => { + return useContext( CheckoutBlockControlsContext ); + }; diff --git a/assets/js/blocks/checkout/form-step/form-step-block.tsx b/assets/js/blocks/checkout/form-step/form-step-block.tsx index 240df907b63..d4eaee87de3 100644 --- a/assets/js/blocks/checkout/form-step/form-step-block.tsx +++ b/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 ( diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/edit.tsx index 0a19dac5d6a..692b9c4f20c 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/edit.tsx +++ b/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/edit.tsx @@ -39,9 +39,8 @@ export const Edit = ( { showPhoneField, requirePhoneField, } = useCheckoutBlockContext(); - const { - addressFieldControls: Controls, - } = useCheckoutBlockControlsContext(); + const { addressFieldControls: Controls } = + useCheckoutBlockControlsContext(); const { showBillingFields } = useCheckoutAddress(); if ( ! showBillingFields ) { diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/block.tsx index 7621be71f49..9c1d5b3e27e 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/block.tsx +++ b/assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/block.tsx @@ -20,11 +20,8 @@ const Block = ( { }: { allowCreateAccount: boolean; } ): JSX.Element => { - const { - customerId, - shouldCreateAccount, - setShouldCreateAccount, - } = useCheckoutContext(); + const { customerId, shouldCreateAccount, setShouldCreateAccount } = + useCheckoutContext(); const { billingAddress, setEmail } = useCheckoutAddress(); const { dispatchCheckoutEvent } = useStoreEvents(); diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/edit.tsx index 94c65db9dcb..e93ad860a0b 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/edit.tsx +++ b/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 ), diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/edit.tsx index 01072c5fb22..c5fb4f5aa40 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/edit.tsx +++ b/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 { - addressFieldControls: Controls, - } = useCheckoutBlockControlsContext(); + const { addressFieldControls: Controls } = + 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, diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/test/block.js b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/test/block.js index aced808a6d9..cd2de576659 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/test/block.js +++ b/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: - 'Hoodie - Blue, Yes × 1, Beanie × 1', + value: 'Hoodie - Blue, Yes × 1, Beanie × 1', }, ], selected: false, @@ -128,8 +127,7 @@ jest.mock( '@woocommerce/base-context/hooks', () => ( { meta_data: [ { key: 'Items', - value: - 'Hoodie - Blue, Yes × 1, Beanie × 1', + value: 'Hoodie - Blue, Yes × 1, Beanie × 1', }, ], selected: false, @@ -153,8 +151,7 @@ jest.mock( '@woocommerce/base-context/hooks', () => ( { meta_data: [ { key: 'Items', - value: - 'Hoodie - Blue, Yes × 1, Beanie × 1', + value: 'Hoodie - Blue, Yes × 1, Beanie × 1', }, ], selected: true, @@ -476,8 +473,7 @@ describe( 'Checkout Order Summary', () => { meta_data: [ { key: 'Items', - value: - 'Hoodie - Blue, Yes × 1, Beanie × 1', + value: 'Hoodie - Blue, Yes × 1, Beanie × 1', }, ], selected: true, diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx index 30a8ae4353c..03e34d428be 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx +++ b/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( - 'wc/checkout' - ); + const { applyCoupon, isApplyingCoupon } = + useStoreCartCoupons( 'wc/checkout' ); if ( ! couponsEnabled ) { return null; diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx index cf9fd4d6df9..4068d6a5719 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx +++ b/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( - 'wc/checkout' - ); + const { removeCoupon, isRemovingCoupon } = + useStoreCartCoupons( 'wc/checkout' ); const totalsCurrency = getCurrencyFromPriceResponse( cartTotals ); return ( diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/edit.tsx index d7b925202c9..9d3c3df688a 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/edit.tsx +++ b/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, } ) } /> diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/edit.tsx index b10d8e02868..645f5541623 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/edit.tsx +++ b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/edit.tsx @@ -38,9 +38,8 @@ export const Edit = ( { showPhoneField, requirePhoneField, } = useCheckoutBlockContext(); - const { - addressFieldControls: Controls, - } = useCheckoutBlockControlsContext(); + const { addressFieldControls: Controls } = + useCheckoutBlockControlsContext(); return ( { return null; } - const shippingRatesPackageCount = getShippingRatesPackageCount( - shippingRates - ); + const shippingRatesPackageCount = + getShippingRatesPackageCount( shippingRates ); if ( ! isEditor && diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx index 098f68dc5ee..cef8fc5ec20 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx +++ b/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 { - getValidationError, - setValidationErrors, - clearValidationError, - } = validation; + const { getValidationError, setValidationErrors, clearValidationError } = + validation; const error = getValidationError( validationErrorId ) || {}; const hasError = error.message && ! error.hidden; diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/test/edit.js b/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/test/edit.js index f46b8340848..1523f7003cb 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/test/edit.js +++ b/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/test/edit.js @@ -91,8 +91,7 @@ describe( 'Edit', () => { const { container } = render( terms and privacy', + text: 'I agree to the terms and privacy', checkbox: true, } } setAttributes={ () => void 0 } diff --git a/assets/js/blocks/checkout/inner-blocks/register-components.ts b/assets/js/blocks/checkout/inner-blocks/register-components.ts index a6837e41ee0..0c4fd7b7888 100644 --- a/assets/js/blocks/checkout/inner-blocks/register-components.ts +++ b/assets/js/blocks/checkout/inner-blocks/register-components.ts @@ -17,178 +17,197 @@ __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( () => - import( - /* webpackChunkName: "checkout-blocks/fields" */ './checkout-fields-block/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "checkout-blocks/fields" */ './checkout-fields-block/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CHECKOUT_EXPRESS_PAYMENT, - component: lazy( () => - import( - /* webpackChunkName: "checkout-blocks/express-payment" */ './checkout-express-payment-block/block' - ) + component: lazy( + () => + import( + /* webpackChunkName: "checkout-blocks/express-payment" */ './checkout-express-payment-block/block' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CHECKOUT_CONTACT_INFORMATION, - component: lazy( () => - import( - /* webpackChunkName: "checkout-blocks/contact-information" */ './checkout-contact-information-block/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "checkout-blocks/contact-information" */ './checkout-contact-information-block/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CHECKOUT_SHIPPING_ADDRESS, - component: lazy( () => - import( - /* webpackChunkName: "checkout-blocks/shipping-address" */ './checkout-shipping-address-block/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "checkout-blocks/shipping-address" */ './checkout-shipping-address-block/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CHECKOUT_BILLING_ADDRESS, - component: lazy( () => - import( - /* webpackChunkName: "checkout-blocks/billing-address" */ './checkout-billing-address-block/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "checkout-blocks/billing-address" */ './checkout-billing-address-block/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CHECKOUT_SHIPPING_METHODS, - component: lazy( () => - import( - /* webpackChunkName: "checkout-blocks/shipping-methods" */ './checkout-shipping-methods-block/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "checkout-blocks/shipping-methods" */ './checkout-shipping-methods-block/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CHECKOUT_PAYMENT, - component: lazy( () => - import( - /* webpackChunkName: "checkout-blocks/payment" */ './checkout-payment-block/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "checkout-blocks/payment" */ './checkout-payment-block/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CHECKOUT_ORDER_NOTE, - component: lazy( () => - import( - /* webpackChunkName: "checkout-blocks/order-note" */ './checkout-order-note-block/block' - ) + component: lazy( + () => + import( + /* webpackChunkName: "checkout-blocks/order-note" */ './checkout-order-note-block/block' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CHECKOUT_TERMS, - component: lazy( () => - import( - /* webpackChunkName: "checkout-blocks/terms" */ './checkout-terms-block/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "checkout-blocks/terms" */ './checkout-terms-block/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CHECKOUT_ACTIONS, - component: lazy( () => - import( - /* webpackChunkName: "checkout-blocks/actions" */ './checkout-actions-block/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "checkout-blocks/actions" */ './checkout-actions-block/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CHECKOUT_TOTALS, - component: lazy( () => - import( - /* webpackChunkName: "checkout-blocks/totals" */ './checkout-totals-block/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "checkout-blocks/totals" */ './checkout-totals-block/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CHECKOUT_ORDER_SUMMARY, - component: lazy( () => - import( - /* webpackChunkName: "checkout-blocks/order-summary" */ './checkout-order-summary-block/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "checkout-blocks/order-summary" */ './checkout-order-summary-block/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CHECKOUT_ORDER_SUMMARY_CART_ITEMS, - component: lazy( () => - import( - /* webpackChunkName: "checkout-blocks/order-summary-cart-items" */ - './checkout-order-summary-cart-items/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "checkout-blocks/order-summary-cart-items" */ + './checkout-order-summary-cart-items/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CHECKOUT_ORDER_SUMMARY_SUBTOTAL, - component: lazy( () => - import( - /* webpackChunkName: "checkout-blocks/order-summary-subtotal" */ - './checkout-order-summary-subtotal/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "checkout-blocks/order-summary-subtotal" */ + './checkout-order-summary-subtotal/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CHECKOUT_ORDER_SUMMARY_FEE, - component: lazy( () => - import( - /* webpackChunkName: "checkout-blocks/order-summary-fee" */ - './checkout-order-summary-fee/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "checkout-blocks/order-summary-fee" */ + './checkout-order-summary-fee/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CHECKOUT_ORDER_SUMMARY_DISCOUNT, - component: lazy( () => - import( - /* webpackChunkName: "checkout-blocks/order-summary-discount" */ - './checkout-order-summary-discount/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "checkout-blocks/order-summary-discount" */ + './checkout-order-summary-discount/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CHECKOUT_ORDER_SUMMARY_COUPON_FORM, - component: lazy( () => - import( - /* webpackChunkName: "checkout-blocks/order-summary-coupon-form" */ - './checkout-order-summary-coupon-form/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "checkout-blocks/order-summary-coupon-form" */ + './checkout-order-summary-coupon-form/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CHECKOUT_ORDER_SUMMARY_SHIPPING, - component: lazy( () => - import( - /* webpackChunkName: "checkout-blocks/order-summary-shipping" */ - './checkout-order-summary-shipping/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "checkout-blocks/order-summary-shipping" */ + './checkout-order-summary-shipping/frontend' + ) ), } ); registerCheckoutBlock( { metadata: metadata.CHECKOUT_ORDER_SUMMARY_TAXES, - component: lazy( () => - import( - /* webpackChunkName: "checkout-blocks/order-summary-taxes" */ - './checkout-order-summary-taxes/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "checkout-blocks/order-summary-taxes" */ + './checkout-order-summary-taxes/frontend' + ) ), } ); diff --git a/assets/js/blocks/featured-items/block-controls.tsx b/assets/js/blocks/featured-items/block-controls.tsx index 789490665f4..79d3754e4b3 100644 --- a/assets/js/blocks/featured-items/block-controls.tsx +++ b/assets/js/blocks/featured-items/block-controls.tsx @@ -136,39 +136,37 @@ export const BlockControls = ( { ); }; -export const withBlockControls = ( { - cropLabel, - editLabel, -}: BlockControlsConfiguration ) => < T extends EditorBlock< 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; - const item = category || product; +export const withBlockControls = + ( { cropLabel, editLabel }: BlockControlsConfiguration ) => + < T extends EditorBlock< 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; + const item = category || product; - const { backgroundImageId, backgroundImageSrc } = useBackgroundImage( { - item, - mediaId, - mediaSrc, - blockName: name, - } ); + const { backgroundImageId, backgroundImageSrc } = useBackgroundImage( { + item, + mediaId, + mediaSrc, + blockName: name, + } ); - return ( - <> - - - - ); -}; + return ( + <> + + + + ); + }; diff --git a/assets/js/blocks/featured-items/image-editor.tsx b/assets/js/blocks/featured-items/image-editor.tsx index bd426d52e75..843ba04d582 100644 --- a/assets/js/blocks/featured-items/image-editor.tsx +++ b/assets/js/blocks/featured-items/image-editor.tsx @@ -92,35 +92,37 @@ export const ImageEditor = ( { ); }; -export const withImageEditor = < T extends EditorBlock< T > >( - Component: ComponentType< T > -) => ( props: WithImageEditorProps< T > ) => { - const [ isEditingImage, setIsEditingImage ] = props.useEditingImage; +export const withImageEditor = + < T extends EditorBlock< T > >( Component: ComponentType< 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; + const { attributes, backgroundImageSize, name, setAttributes } = props; + const { mediaId, mediaSrc } = attributes; + const item = + name === BLOCK_NAMES.featuredProduct + ? props.product + : props.category; - const { backgroundImageId, backgroundImageSrc } = useBackgroundImage( { - item, - mediaId, - mediaSrc, - blockName: name, - } ); + const { backgroundImageId, backgroundImageSrc } = useBackgroundImage( { + item, + mediaId, + mediaSrc, + blockName: name, + } ); - if ( isEditingImage ) { - return ( - - ); - } + if ( isEditingImage ) { + return ( + + ); + } - return ; -}; + return ; + }; diff --git a/assets/js/blocks/featured-items/inspector-controls.tsx b/assets/js/blocks/featured-items/inspector-controls.tsx index ab81c80df73..0daaaf72c0f 100644 --- a/assets/js/blocks/featured-items/inspector-controls.tsx +++ b/assets/js/blocks/featured-items/inspector-controls.tsx @@ -287,70 +287,72 @@ export const InspectorControls = ( { ); }; -export const withInspectorControls = < T extends EditorBlock< T > >( - Component: ComponentType< T > -) => ( props: WithInspectorControlsProps< T > ) => { - const { attributes, name, setAttributes } = props; - const { - alt, - dimRatio, - focalPoint, - hasParallax, - isRepeated, - imageFit, - mediaId, - mediaSrc, - overlayColor, - overlayGradient, - showDesc, - showPrice, - } = attributes; +export const withInspectorControls = + < T extends EditorBlock< T > >( Component: ComponentType< T > ) => + ( props: WithInspectorControlsProps< T > ) => { + const { attributes, name, setAttributes } = props; + const { + alt, + dimRatio, + focalPoint, + hasParallax, + isRepeated, + imageFit, + mediaId, + mediaSrc, + overlayColor, + overlayGradient, + showDesc, + showPrice, + } = attributes; - const item = - name === BLOCK_NAMES.featuredProduct ? props.product : props.category; + const item = + name === BLOCK_NAMES.featuredProduct + ? props.product + : props.category; - const { setGradient } = useGradient( { - gradientAttribute: 'overlayGradient', - customGradientAttribute: 'overlayGradient', - } ); - const { backgroundImageSrc } = useBackgroundImage( { - item, - mediaId, - mediaSrc, - blockName: name, - } ); + const { setGradient } = useGradient( { + gradientAttribute: 'overlayGradient', + customGradientAttribute: 'overlayGradient', + } ); + const { backgroundImageSrc } = useBackgroundImage( { + item, + mediaId, + mediaSrc, + blockName: name, + } ); - const contentPanel = - name === BLOCK_NAMES.featuredProduct ? ( - - setAttributes( { - showPrice: ! showPrice, - } ) - } - /> - ) : undefined; + const contentPanel = + name === BLOCK_NAMES.featuredProduct ? ( + + setAttributes( { + showPrice: ! showPrice, + } ) + } + /> + ) : undefined; - return ( - <> - - - - ); -}; + return ( + <> + + + + ); + }; diff --git a/assets/js/blocks/featured-items/utils.ts b/assets/js/blocks/featured-items/utils.ts index 140053be7f2..d4a7d9162d4 100644 --- a/assets/js/blocks/featured-items/utils.ts +++ b/assets/js/blocks/featured-items/utils.ts @@ -61,9 +61,8 @@ export function getBackgroundImageStyles( { ...( url && { backgroundImage: `url(${ url })`, } ), - backgroundPosition: calculatePercentPositionFromCoordinates( - focalPoint - ), + backgroundPosition: + calculatePercentPositionFromCoordinates( focalPoint ), ...( ! isRepeated && { backgroundRepeat: 'no-repeat', backgroundSize: imageFit === 'cover' ? imageFit : 'auto', diff --git a/assets/js/blocks/featured-items/with-api-error.tsx b/assets/js/blocks/featured-items/with-api-error.tsx index 36bd29c4df9..a49ce87ec97 100644 --- a/assets/js/blocks/featured-items/with-api-error.tsx +++ b/assets/js/blocks/featured-items/with-api-error.tsx @@ -33,27 +33,27 @@ type APIErrorProps< T extends Block > = | ( T & APIErrorProductProps ) | ( T & APIErrorCategoryProps ); -export const withApiError = < T extends Block >( - Component: ComponentType< T > -) => ( props: APIErrorProps< T > ) => { - const { error, isLoading, name } = props; - - const className = getClassPrefixFromName( name ); - const onRetry = - name === BLOCK_NAMES.featuredCategory - ? props.getCategory - : props.getProduct; - - if ( error ) { - return ( - - ); - } - - return ; -}; +export const withApiError = + < T extends Block >( Component: ComponentType< T > ) => + ( props: APIErrorProps< T > ) => { + const { error, isLoading, name } = props; + + const className = getClassPrefixFromName( name ); + const onRetry = + name === BLOCK_NAMES.featuredCategory + ? props.getCategory + : props.getProduct; + + if ( error ) { + return ( + + ); + } + + return ; + }; diff --git a/assets/js/blocks/featured-items/with-edit-mode.tsx b/assets/js/blocks/featured-items/with-edit-mode.tsx index 02db002e9dc..7e4e91fdf1e 100644 --- a/assets/js/blocks/featured-items/with-edit-mode.tsx +++ b/assets/js/blocks/featured-items/with-edit-mode.tsx @@ -40,94 +40,90 @@ interface EditModeRequiredProps< T > { type EditModeProps< T extends EditorBlock< T > > = T & EditModeRequiredProps< T >; -export const withEditMode = ( { - description, - editLabel, - icon, - label, -}: EditModeConfiguration ) => < T extends EditorBlock< T > >( - Component: ComponentType< T > -) => ( props: EditModeProps< T > ) => { - const { - attributes, - debouncedSpeak, - name, - setAttributes, - triggerUrlUpdate = () => void null, - } = props; +export const withEditMode = + ( { description, editLabel, icon, label }: EditModeConfiguration ) => + < T extends EditorBlock< T > >( Component: ComponentType< T > ) => + ( props: EditModeProps< T > ) => { + const { + attributes, + debouncedSpeak, + name, + setAttributes, + triggerUrlUpdate = () => void null, + } = props; - const className = getClassPrefixFromName( name ); + const className = getClassPrefixFromName( name ); - const onDone = () => { - setAttributes( { editMode: false } ); - debouncedSpeak( editLabel ); - }; + const onDone = () => { + setAttributes( { editMode: false } ); + debouncedSpeak( editLabel ); + }; - if ( attributes.editMode ) { - return ( - } - label={ label } - className={ className } - > - { description } -
- { name === BLOCK_NAMES.featuredCategory && ( - // Ignoring this TS error for now as it seems that `ProductCategoryControl` - // types might be too strict. - // @todo Convert `ProductCategoryControl` to TypeScript - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - { - const id = value[ 0 ] ? value[ 0 ].id : 0; - setAttributes( { - categoryId: id, - mediaId: 0, - mediaSrc: '', - } ); - triggerUrlUpdate(); - } } - isSingle - /> - ) } - { name === BLOCK_NAMES.featuredProduct && ( - } + label={ label } + className={ className } + > + { description } +
+ { name === BLOCK_NAMES.featuredCategory && ( + // Ignoring this TS error for now as it seems that `ProductCategoryControl` + // types might be too strict. + // @todo Convert `ProductCategoryControl` to TypeScript // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - showVariations - onChange={ ( - value: ProductResponseItem[] = [] - ) => { - const id = value[ 0 ] ? value[ 0 ].id : 0; - setAttributes( { - productId: id, - mediaId: 0, - mediaSrc: '', - } ); - triggerUrlUpdate(); - } } - /> - ) } - -
- - ); - } + { + const id = value[ 0 ] ? value[ 0 ].id : 0; + setAttributes( { + categoryId: id, + mediaId: 0, + mediaSrc: '', + } ); + triggerUrlUpdate(); + } } + isSingle + /> + ) } + { name === BLOCK_NAMES.featuredProduct && ( + { + const id = value[ 0 ] ? value[ 0 ].id : 0; + setAttributes( { + productId: id, + mediaId: 0, + mediaSrc: '', + } ); + triggerUrlUpdate(); + } } + /> + ) } + +
+ + ); + } - return ; -}; + return ; + }; diff --git a/assets/js/blocks/featured-items/with-editing-image.tsx b/assets/js/blocks/featured-items/with-editing-image.tsx index 1e36e8c7738..d9e860441ef 100644 --- a/assets/js/blocks/featured-items/with-editing-image.tsx +++ b/assets/js/blocks/featured-items/with-editing-image.tsx @@ -15,20 +15,20 @@ interface EditingImageRequiredProps { type EditingImageProps< T extends EditorBlock< T > > = T & EditingImageRequiredProps; -export const withEditingImage = < T extends EditorBlock< T > >( - Component: ComponentType< T > -) => ( props: EditingImageProps< T > ) => { - const [ isEditingImage, setIsEditingImage ] = useState( false ); - const { isSelected } = props; +export const withEditingImage = + < T extends EditorBlock< T > >( Component: ComponentType< T > ) => + ( props: EditingImageProps< T > ) => { + const [ isEditingImage, setIsEditingImage ] = useState( false ); + const { isSelected } = props; - useEffect( () => { - setIsEditingImage( false ); - }, [ isSelected ] ); + useEffect( () => { + setIsEditingImage( false ); + }, [ isSelected ] ); - return ( - - ); -}; + return ( + + ); + }; diff --git a/assets/js/blocks/featured-items/with-featured-item.tsx b/assets/js/blocks/featured-items/with-featured-item.tsx index f411ea269c4..77130ee8a1f 100644 --- a/assets/js/blocks/featured-items/with-featured-item.tsx +++ b/assets/js/blocks/featured-items/with-featured-item.tsx @@ -97,227 +97,226 @@ type FeaturedItemProps< T extends EditorBlock< T > > = | ( T & FeaturedCategoryProps< T > ) | ( T & FeaturedProductProps< T > ); -export const withFeaturedItem = ( { - emptyMessage, - icon, - label, -}: WithFeaturedItemConfig ) => < T extends EditorBlock< T > >( - Component: ComponentType< T > -) => ( props: FeaturedItemProps< T > ) => { - const [ isEditingImage ] = props.useEditingImage; +export const withFeaturedItem = + ( { emptyMessage, icon, label }: WithFeaturedItemConfig ) => + < T extends EditorBlock< T > >( Component: ComponentType< T > ) => + ( props: FeaturedItemProps< T > ) => { + const [ isEditingImage ] = props.useEditingImage; - const { - attributes, - category, - isLoading, - isSelected, - name, - product, - setAttributes, - } = props; - const { mediaId, mediaSrc } = attributes; - const item = category || product; - const [ backgroundImageSize, setBackgroundImageSize ] = useState( {} ); - - const { backgroundImageSrc } = useBackgroundImage( { - item, - mediaId, - mediaSrc, - blockName: name, - } ); - - const className = getClassPrefixFromName( name ); + const { + attributes, + category, + isLoading, + isSelected, + name, + product, + setAttributes, + } = props; + const { mediaId, mediaSrc } = attributes; + const item = category || product; + const [ backgroundImageSize, setBackgroundImageSize ] = useState( {} ); - const onResize = useCallback( - ( _event, _direction, elt ) => { - setAttributes( { minHeight: parseInt( elt.style.height, 10 ) } ); - }, - [ setAttributes ] - ); + const { backgroundImageSrc } = useBackgroundImage( { + item, + mediaId, + mediaSrc, + blockName: name, + } ); - const renderButton = () => { - const { categoryId, linkText, productId } = attributes; + const className = getClassPrefixFromName( name ); - return ( - + const onResize = useCallback( + ( _event, _direction, elt ) => { + setAttributes( { + minHeight: parseInt( elt.style.height, 10 ), + } ); + }, + [ setAttributes ] ); - }; - const renderNoItem = () => ( - } - label={ label } - > - { isLoading ? : emptyMessage } - - ); + const renderButton = () => { + const { categoryId, linkText, productId } = attributes; - const renderItem = () => { - const { - contentAlign, - dimRatio, - focalPoint, - hasParallax, - isRepeated, - imageFit, - minHeight, - overlayColor, - overlayGradient, - showDesc, - showPrice, - style, - textColor, - } = attributes; + return ( + + ); + }; - const classes = classnames( - className, - { - 'is-selected': - isSelected && - attributes.categoryId !== 'preview' && - attributes.productId !== 'preview', - 'is-loading': ! item && isLoading, - 'is-not-found': ! item && ! isLoading, - 'has-background-dim': dimRatio !== 0, - 'is-repeated': isRepeated, - }, - dimRatioToClass( dimRatio ), - contentAlign !== 'center' && `has-${ contentAlign }-content` + const renderNoItem = () => ( + } + label={ label } + > + { isLoading ? : emptyMessage } + ); - const containerStyle = { - borderRadius: style?.border?.radius, - color: textColor - ? `var(--wp--preset--color--${ textColor })` - : style?.color?.text, - }; + const renderItem = () => { + const { + contentAlign, + dimRatio, + focalPoint, + hasParallax, + isRepeated, + imageFit, + minHeight, + overlayColor, + overlayGradient, + showDesc, + showPrice, + style, + textColor, + } = attributes; - const wrapperStyle = { - ...getSpacingClassesAndStyles( attributes ).style, - minHeight, - }; + const classes = classnames( + className, + { + 'is-selected': + isSelected && + attributes.categoryId !== 'preview' && + attributes.productId !== 'preview', + 'is-loading': ! item && isLoading, + 'is-not-found': ! item && ! isLoading, + 'has-background-dim': dimRatio !== 0, + 'is-repeated': isRepeated, + }, + dimRatioToClass( dimRatio ), + contentAlign !== 'center' && `has-${ contentAlign }-content` + ); - const isImgElement = ! isRepeated && ! hasParallax; + const containerStyle = { + borderRadius: style?.border?.radius, + color: textColor + ? `var(--wp--preset--color--${ textColor })` + : style?.color?.text, + }; - const backgroundImageStyle = getBackgroundImageStyles( { - focalPoint, - imageFit, - isImgElement, - isRepeated, - url: backgroundImageSrc, - } ); + const wrapperStyle = { + ...getSpacingClassesAndStyles( attributes ).style, + minHeight, + }; - const overlayStyle = { - background: overlayGradient, - backgroundColor: overlayColor, - }; + const isImgElement = ! isRepeated && ! hasParallax; - return ( - <> - -
-
+ const backgroundImageStyle = getBackgroundImageStyles( { + focalPoint, + imageFit, + isImgElement, + isRepeated, + url: backgroundImageSrc, + } ); + + const overlayStyle = { + background: overlayGradient, + backgroundColor: overlayColor, + }; + + return ( + <> + +
- { backgroundImageSrc && - ( isImgElement ? ( - { { - setBackgroundImageSize( { - height: - e.currentTarget?.naturalHeight, - width: - e.currentTarget?.naturalWidth, - } ); - } } - /> - ) : ( -
- ) ) } -

- { ! isEmpty( product?.variation ) && ( -

- ) } - { showDesc && ( + className={ `${ className }__wrapper` } + style={ wrapperStyle } + >
- ) } - { showPrice && ( -
{ + setBackgroundImageSize( { + height: e.currentTarget + ?.naturalHeight, + width: e.currentTarget + ?.naturalWidth, + } ); + } } + /> + ) : ( +
+ ) ) } +

- ) } -
- { renderButton() } + { ! isEmpty( product?.variation ) && ( +

+ ) } + { showDesc && ( +
+ ) } + { showPrice && ( +
+ ) } +
+ { renderButton() } +
-

- - ); - }; + + ); + }; + + if ( isEditingImage ) { + return ( + + ); + } - if ( isEditingImage ) { return ( - + <> + + { item ? renderItem() : renderNoItem() } + ); - } - - return ( - <> - - { item ? renderItem() : renderNoItem() } - - ); -}; + }; diff --git a/assets/js/blocks/featured-items/with-update-button-attributes.tsx b/assets/js/blocks/featured-items/with-update-button-attributes.tsx index 94ff7dcef64..9a58bc975d6 100644 --- a/assets/js/blocks/featured-items/with-update-button-attributes.tsx +++ b/assets/js/blocks/featured-items/with-update-button-attributes.tsx @@ -36,55 +36,55 @@ type WithUpdateButtonProps< T extends EditorBlock< T > > = | ( T & WithUpdateButtonCategoryProps< T > ) | ( T & WithUpdateButtonProductProps< T > ); -export const withUpdateButtonAttributes = < T extends EditorBlock< T > >( - Component: ComponentType< T > -) => ( props: WithUpdateButtonProps< T > ) => { - const [ doUrlUpdate, setDoUrlUpdate ] = useState( false ); - const { attributes, category, clientId, product } = props; - const item = category || product; +export const withUpdateButtonAttributes = + < T extends EditorBlock< T > >( Component: ComponentType< T > ) => + ( props: WithUpdateButtonProps< T > ) => { + const [ doUrlUpdate, setDoUrlUpdate ] = useState( false ); + const { attributes, category, clientId, product } = props; + const item = category || product; - const { editMode } = attributes; - const permalink = - ( item as WP_REST_API_Category )?.link || - ( item as ProductResponseItem )?.permalink; + const { editMode } = attributes; + const permalink = + ( item as WP_REST_API_Category )?.link || + ( item as ProductResponseItem )?.permalink; - const Block = useSelect( ( select ) => { - return select( 'core/block-editor' ).getBlock( clientId ); - } ); - const InnerButton = Block?.innerBlocks[ 0 ]; - const buttonBlockId = InnerButton?.clientId || ''; - const currentButtonAttributes = useMemo( - () => InnerButton?.attributes || {}, - [ InnerButton ] - ); - const { url } = currentButtonAttributes; + const Block = useSelect( ( select ) => { + return select( 'core/block-editor' ).getBlock( clientId ); + } ); + const InnerButton = Block?.innerBlocks[ 0 ]; + const buttonBlockId = InnerButton?.clientId || ''; + const currentButtonAttributes = useMemo( + () => InnerButton?.attributes || {}, + [ InnerButton ] + ); + const { url } = currentButtonAttributes; - const { updateBlockAttributes } = useDispatch( 'core/block-editor' ); + const { updateBlockAttributes } = useDispatch( 'core/block-editor' ); - useEffect( () => { - if ( - doUrlUpdate && - buttonBlockId && - ! editMode && - permalink && - url && - permalink !== url - ) { - updateBlockAttributes( buttonBlockId, { - url: permalink, - } ); - setDoUrlUpdate( false ); - } - }, [ - buttonBlockId, - doUrlUpdate, - editMode, - permalink, - updateBlockAttributes, - url, - ] ); + useEffect( () => { + if ( + doUrlUpdate && + buttonBlockId && + ! editMode && + permalink && + url && + permalink !== url + ) { + updateBlockAttributes( buttonBlockId, { + url: permalink, + } ); + setDoUrlUpdate( false ); + } + }, [ + buttonBlockId, + doUrlUpdate, + editMode, + permalink, + updateBlockAttributes, + url, + ] ); - const triggerUrlUpdate = () => setDoUrlUpdate( true ); + const triggerUrlUpdate = () => setDoUrlUpdate( true ); - return ; -}; + return ; + }; diff --git a/assets/js/blocks/mini-cart/block.tsx b/assets/js/blocks/mini-cart/block.tsx index 8fb3025523f..9c73f54ea0f 100644 --- a/assets/js/blocks/mini-cart/block.tsx +++ b/assets/js/blocks/mini-cart/block.tsx @@ -67,9 +67,8 @@ const MiniCartBlock = ( { const [ isOpen, setIsOpen ] = useState< boolean >( isInitiallyOpen ); // We already rendered the HTML drawer placeholder, so we want to skip the // slide in animation. - const [ skipSlideIn, setSkipSlideIn ] = useState< boolean >( - isInitiallyOpen - ); + const [ skipSlideIn, setSkipSlideIn ] = + useState< boolean >( isInitiallyOpen ); const [ contentsNode, setContentsNode ] = useState< HTMLDivElement | null >( null ); @@ -154,11 +153,12 @@ const MiniCartBlock = ( { isBoolean ); - const preFetchedCartTotals = getSettingWithCoercion< CartResponseTotals | null >( - 'cartTotals', - null, - isCartResponseTotals - ); + const preFetchedCartTotals = + getSettingWithCoercion< CartResponseTotals | null >( + 'cartTotals', + null, + isCartResponseTotals + ); const preFetchedCartItemsCount = getSettingWithCoercion< number >( 'cartItemsCount', diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx index 2c8c3db875f..d991483cacd 100644 --- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx +++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/edit.tsx @@ -20,11 +20,11 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => { const allowedBlocks = getAllowedBlocks( innerBlockAreas.FILLED_MINI_CART ); const { currentView } = useEditorContext(); - const defaultTemplate = ( [ + const defaultTemplate = [ [ 'woocommerce/mini-cart-title-block', {} ], [ 'woocommerce/mini-cart-items-block', {} ], [ 'woocommerce/mini-cart-footer-block', {} ], - ].filter( Boolean ) as unknown ) as TemplateArray; + ].filter( Boolean ) as unknown as TemplateArray; useForcedLayout( { clientId, diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-items-block/edit.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-items-block/edit.tsx index dd7b4fcdb91..6005b8e74f3 100644 --- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-items-block/edit.tsx +++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-items-block/edit.tsx @@ -14,9 +14,9 @@ export const Edit = (): JSX.Element => { className: 'wc-block-mini-cart__items', } ); - const defaultTemplate = ( [ + const defaultTemplate = [ [ 'woocommerce/mini-cart-products-table-block', {} ], - ].filter( Boolean ) as unknown ) as TemplateArray; + ].filter( Boolean ) as unknown as TemplateArray; return (
diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/register-components.ts b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/register-components.ts index d29a13b2d83..79aa25254e3 100644 --- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/register-components.ts +++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/register-components.ts @@ -21,63 +21,70 @@ __webpack_public_path__ = WC_BLOCKS_BUILD_URL; registerCheckoutBlock( { metadata: filledMiniCartMetadata, - component: lazy( () => - import( - /* webpackChunkName: "mini-cart-contents-block/filled-cart" */ './filled-mini-cart-contents-block/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "mini-cart-contents-block/filled-cart" */ './filled-mini-cart-contents-block/frontend' + ) ), } ); registerCheckoutBlock( { metadata: emptyMiniCartContentsMetadata, - component: lazy( () => - import( - /* webpackChunkName: "mini-cart-contents-block/empty-cart" */ './empty-mini-cart-contents-block/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "mini-cart-contents-block/empty-cart" */ './empty-mini-cart-contents-block/frontend' + ) ), } ); registerCheckoutBlock( { metadata: miniCartTitleMetadata, - component: lazy( () => - import( - /* webpackChunkName: "mini-cart-contents-block/title" */ './mini-cart-title-block/block' - ) + component: lazy( + () => + import( + /* webpackChunkName: "mini-cart-contents-block/title" */ './mini-cart-title-block/block' + ) ), } ); registerCheckoutBlock( { metadata: miniCartItemsMetadata, - component: lazy( () => - import( - /* webpackChunkName: "mini-cart-contents-block/items" */ './mini-cart-items-block/frontend' - ) + component: lazy( + () => + import( + /* webpackChunkName: "mini-cart-contents-block/items" */ './mini-cart-items-block/frontend' + ) ), } ); registerCheckoutBlock( { metadata: miniCartProductsTableMetadata, - component: lazy( () => - import( - /* webpackChunkName: "mini-cart-contents-block/products-table" */ './mini-cart-products-table-block/block' - ) + component: lazy( + () => + import( + /* webpackChunkName: "mini-cart-contents-block/products-table" */ './mini-cart-products-table-block/block' + ) ), } ); registerCheckoutBlock( { metadata: miniCartFooterMetadata, - component: lazy( () => - import( - /* webpackChunkName: "mini-cart-contents-block/footer" */ './mini-cart-footer-block/block' - ) + component: lazy( + () => + import( + /* webpackChunkName: "mini-cart-contents-block/footer" */ './mini-cart-footer-block/block' + ) ), } ); registerCheckoutBlock( { metadata: miniCartShoppingButtonMetadata, - component: lazy( () => - import( - /* webpackChunkName: "mini-cart-contents-block/shopping-button" */ './mini-cart-shopping-button-block/block' - ) + component: lazy( + () => + import( + /* webpackChunkName: "mini-cart-contents-block/shopping-button" */ './mini-cart-shopping-button-block/block' + ) ), } ); diff --git a/assets/js/blocks/price-filter/block.tsx b/assets/js/blocks/price-filter/block.tsx index 750b5b273e6..7568ff3ac3c 100644 --- a/assets/js/blocks/price-filter/block.tsx +++ b/assets/js/blocks/price-filter/block.tsx @@ -100,9 +100,8 @@ const PriceFilterBlock = ( { * Important: Only used on the PHP rendered Block pages to track * the price filter defaults coming from the URL */ - const [ hasSetPhpFilterDefaults, setHasSetPhpFilterDefaults ] = useState( - false - ); + const [ hasSetPhpFilterDefaults, setHasSetPhpFilterDefaults ] = + useState( false ); const minPriceParam = getUrlParameter( 'min_price' ); const maxPriceParam = getUrlParameter( 'max_price' ); @@ -315,7 +314,8 @@ const PriceFilterBlock = ( { return null; } - const TagName = `h${ attributes.headingLevel }` as keyof JSX.IntrinsicElements; + const TagName = + `h${ attributes.headingLevel }` as keyof JSX.IntrinsicElements; return ( <> diff --git a/assets/js/blocks/price-filter/edit.tsx b/assets/js/blocks/price-filter/edit.tsx index f58e6f422a7..df830023625 100644 --- a/assets/js/blocks/price-filter/edit.tsx +++ b/assets/js/blocks/price-filter/edit.tsx @@ -32,12 +32,8 @@ export default function ( { attributes, setAttributes, }: BlockEditProps< Attributes > ) { - const { - heading, - headingLevel, - showInputFields, - showFilterButton, - } = attributes; + const { heading, headingLevel, showInputFields, showFilterButton } = + attributes; const blockProps = useBlockProps(); diff --git a/assets/js/blocks/product-categories/block.js b/assets/js/blocks/product-categories/block.js index 725ab502324..854d1565734 100644 --- a/assets/js/blocks/product-categories/block.js +++ b/assets/js/blocks/product-categories/block.js @@ -43,13 +43,8 @@ const EmptyPlaceholder = () => ( */ const ProductCategoriesBlock = ( { attributes, setAttributes, name } ) => { const getInspectorControls = () => { - const { - hasCount, - hasImage, - hasEmpty, - isDropdown, - isHierarchical, - } = attributes; + const { hasCount, hasImage, hasEmpty, isDropdown, isHierarchical } = + attributes; return ( diff --git a/assets/js/blocks/product-categories/index.js b/assets/js/blocks/product-categories/index.js index 270524f0a02..9715d879d34 100644 --- a/assets/js/blocks/product-categories/index.js +++ b/assets/js/blocks/product-categories/index.js @@ -156,12 +156,8 @@ registerBlockType( 'woocommerce/product-categories', { return attributes; }, save( props ) { - const { - hasCount, - hasEmpty, - isDropdown, - isHierarchical, - } = props.attributes; + const { hasCount, hasEmpty, isDropdown, isHierarchical } = + props.attributes; const data = {}; if ( hasCount ) { data[ 'data-has-count' ] = true; diff --git a/assets/js/blocks/stock-filter/block.tsx b/assets/js/blocks/stock-filter/block.tsx index 633e2cbdd81..00344a3ac61 100644 --- a/assets/js/blocks/stock-filter/block.tsx +++ b/assets/js/blocks/stock-filter/block.tsx @@ -56,9 +56,8 @@ const StockStatusFilterBlock = ( { isBoolean ); - const [ hasSetPhpFilterDefaults, setHasSetPhpFilterDefaults ] = useState( - false - ); + const [ hasSetPhpFilterDefaults, setHasSetPhpFilterDefaults ] = + useState( false ); const { outofstock, ...otherStockStatusOptions } = getSetting( 'stockStatusOptions', @@ -86,18 +85,14 @@ const StockStatusFilterBlock = ( { ); const [ queryState ] = useQueryStateByContext(); - const [ - productStockStatusQuery, - setProductStockStatusQuery, - ] = useQueryStateByKey( 'stock_status', [] ); + const [ productStockStatusQuery, setProductStockStatusQuery ] = + useQueryStateByKey( 'stock_status', [] ); - const { - results: filteredCounts, - isLoading: filteredCountsLoading, - } = useCollectionData( { - queryStock: true, - queryState, - } ); + const { results: filteredCounts, isLoading: filteredCountsLoading } = + useCollectionData( { + queryStock: true, + queryState, + } ); /** * Get count data about a given status by slug. @@ -354,7 +349,8 @@ const StockStatusFilterBlock = ( { return null; } - const TagName = `h${ blockAttributes.headingLevel }` as keyof JSX.IntrinsicElements; + const TagName = + `h${ blockAttributes.headingLevel }` as keyof JSX.IntrinsicElements; const isLoading = ! blockAttributes.isPreview && ! STOCK_STATUS_OPTIONS.current; const isDisabled = ! blockAttributes.isPreview && filteredCountsLoading; diff --git a/assets/js/blocks/stock-filter/edit.tsx b/assets/js/blocks/stock-filter/edit.tsx index e754763f39a..05bdf6dd6b1 100644 --- a/assets/js/blocks/stock-filter/edit.tsx +++ b/assets/js/blocks/stock-filter/edit.tsx @@ -25,13 +25,8 @@ const Edit = ( { attributes, setAttributes, }: BlockEditProps< Attributes > ) => { - const { - className, - heading, - headingLevel, - showCounts, - showFilterButton, - } = attributes; + const { className, heading, headingLevel, showCounts, showFilterButton } = + attributes; const blockProps = useBlockProps( { className: classnames( 'wc-block-stock-filter', className ), diff --git a/assets/js/data/cart/actions.ts b/assets/js/data/cart/actions.ts index 05ac2b2ee5c..2b5afb94816 100644 --- a/assets/js/data/cart/actions.ts +++ b/assets/js/data/cart/actions.ts @@ -33,9 +33,9 @@ import { ReturnOrGeneratorYieldUnion } from '../mapped-types'; export const receiveCart = ( response: CartResponse ): { type: string; response: Cart } => { - const cart = ( mapKeys( response, ( _, key ) => + const cart = mapKeys( response, ( _, key ) => camelCase( key ) - ) as unknown ) as Cart; + ) as unknown as Cart; return { type: types.RECEIVE_CART, response: cart, @@ -55,9 +55,9 @@ export const receiveCart = ( export const receiveCartContents = ( response: CartResponse ): { type: string; response: Partial< Cart > } => { - const cart = ( mapKeys( response, ( _, key ) => + const cart = mapKeys( response, ( _, key ) => camelCase( key ) - ) as unknown ) as Cart; + ) as unknown as Cart; const { shippingAddress, billingAddress, ...cartWithoutAddress } = cart; return { type: types.RECEIVE_CART, diff --git a/assets/js/data/cart/index.ts b/assets/js/data/cart/index.ts index a4bc7a8b98b..a17a1d490c3 100644 --- a/assets/js/data/cart/index.ts +++ b/assets/js/data/cart/index.ts @@ -34,9 +34,9 @@ declare module '@wordpress/data' { function dispatch( key: typeof CART_STORE_KEY ): DispatchFromMap< typeof actions >; - function select( - key: typeof CART_STORE_KEY - ): SelectFromMap< typeof selectors > & { + function select( key: typeof CART_STORE_KEY ): SelectFromMap< + typeof selectors + > & { hasFinishedResolution: ( selector: string ) => boolean; }; } diff --git a/assets/js/data/cart/test/selectors.js b/assets/js/data/cart/test/selectors.js index 66d6bfa54fa..f38bcd567ef 100644 --- a/assets/js/data/cart/test/selectors.js +++ b/assets/js/data/cart/test/selectors.js @@ -45,12 +45,10 @@ const state = { images: [ { id: 48, - src: - 'http://local.wordpress.test/wp-content/uploads/2019/12/album-1.jpg', + src: 'http://local.wordpress.test/wp-content/uploads/2019/12/album-1.jpg', thumbnail: 'http://local.wordpress.test/wp-content/uploads/2019/12/album-1-324x324.jpg', - srcset: - 'http://local.wordpress.test/wp-content/uploads/2019/12/album-1.jpg 800w, http://local.wordpress.test/wp-content/uploads/2019/12/album-1-324x324.jpg 324w, http://local.wordpress.test/wp-content/uploads/2019/12/album-1-100x100.jpg 100w, http://local.wordpress.test/wp-content/uploads/2019/12/album-1-416x416.jpg 416w, http://local.wordpress.test/wp-content/uploads/2019/12/album-1-300x300.jpg 300w, http://local.wordpress.test/wp-content/uploads/2019/12/album-1-150x150.jpg 150w, http://local.wordpress.test/wp-content/uploads/2019/12/album-1-768x768.jpg 768w', + srcset: 'http://local.wordpress.test/wp-content/uploads/2019/12/album-1.jpg 800w, http://local.wordpress.test/wp-content/uploads/2019/12/album-1-324x324.jpg 324w, http://local.wordpress.test/wp-content/uploads/2019/12/album-1-100x100.jpg 100w, http://local.wordpress.test/wp-content/uploads/2019/12/album-1-416x416.jpg 416w, http://local.wordpress.test/wp-content/uploads/2019/12/album-1-300x300.jpg 300w, http://local.wordpress.test/wp-content/uploads/2019/12/album-1-150x150.jpg 150w, http://local.wordpress.test/wp-content/uploads/2019/12/album-1-768x768.jpg 768w', sizes: '(max-width: 800px) 100vw, 800px', name: 'album-1.jpg', alt: '', @@ -85,12 +83,10 @@ const state = { images: [ { id: 40, - src: - 'http://local.wordpress.test/wp-content/uploads/2019/12/beanie-2.jpg', + src: 'http://local.wordpress.test/wp-content/uploads/2019/12/beanie-2.jpg', thumbnail: 'http://local.wordpress.test/wp-content/uploads/2019/12/beanie-2-324x324.jpg', - srcset: - 'http://local.wordpress.test/wp-content/uploads/2019/12/beanie-2.jpg 801w, http://local.wordpress.test/wp-content/uploads/2019/12/beanie-2-324x324.jpg 324w, http://local.wordpress.test/wp-content/uploads/2019/12/beanie-2-100x100.jpg 100w, http://local.wordpress.test/wp-content/uploads/2019/12/beanie-2-416x416.jpg 416w, http://local.wordpress.test/wp-content/uploads/2019/12/beanie-2-300x300.jpg 300w, http://local.wordpress.test/wp-content/uploads/2019/12/beanie-2-150x150.jpg 150w, http://local.wordpress.test/wp-content/uploads/2019/12/beanie-2-768x768.jpg 768w', + srcset: 'http://local.wordpress.test/wp-content/uploads/2019/12/beanie-2.jpg 801w, http://local.wordpress.test/wp-content/uploads/2019/12/beanie-2-324x324.jpg 324w, http://local.wordpress.test/wp-content/uploads/2019/12/beanie-2-100x100.jpg 100w, http://local.wordpress.test/wp-content/uploads/2019/12/beanie-2-416x416.jpg 416w, http://local.wordpress.test/wp-content/uploads/2019/12/beanie-2-300x300.jpg 300w, http://local.wordpress.test/wp-content/uploads/2019/12/beanie-2-150x150.jpg 150w, http://local.wordpress.test/wp-content/uploads/2019/12/beanie-2-768x768.jpg 768w', sizes: '(max-width: 801px) 100vw, 801px', name: 'beanie-2.jpg', alt: '', diff --git a/assets/js/data/collections/resolvers.js b/assets/js/data/collections/resolvers.js index 86b6109bdc0..5a1a37f6689 100644 --- a/assets/js/data/collections/resolvers.js +++ b/assets/js/data/collections/resolvers.js @@ -54,10 +54,8 @@ export function* getCollection( namespace, resourceName, query, ids ) { } try { - const { - response = DEFAULT_EMPTY_ARRAY, - headers, - } = yield apiFetchWithHeaders( { path: route + queryString } ); + const { response = DEFAULT_EMPTY_ARRAY, headers } = + yield apiFetchWithHeaders( { path: route + queryString } ); if ( headers && headers.get && headers.has( 'last-modified' ) ) { // Do any invalidation before the collection is received to prevent diff --git a/assets/js/data/constants.ts b/assets/js/data/constants.ts index 339cf2557a7..996dbbd8105 100644 --- a/assets/js/data/constants.ts +++ b/assets/js/data/constants.ts @@ -5,12 +5,12 @@ */ export const API_BLOCK_NAMESPACE = 'wc/blocks'; -export const EMPTY_CART_COUPONS: [ ] = []; -export const EMPTY_CART_ITEMS: [ ] = []; -export const EMPTY_CART_FEES: [ ] = []; -export const EMPTY_CART_ITEM_ERRORS: [ ] = []; -export const EMPTY_CART_ERRORS: [ ] = []; -export const EMPTY_SHIPPING_RATES: [ ] = []; -export const EMPTY_PAYMENT_REQUIREMENTS: [ ] = []; +export const EMPTY_CART_COUPONS: [] = []; +export const EMPTY_CART_ITEMS: [] = []; +export const EMPTY_CART_FEES: [] = []; +export const EMPTY_CART_ITEM_ERRORS: [] = []; +export const EMPTY_CART_ERRORS: [] = []; +export const EMPTY_SHIPPING_RATES: [] = []; +export const EMPTY_PAYMENT_REQUIREMENTS: [] = []; export const EMPTY_EXTENSIONS: Record< string, unknown > = {}; -export const EMPTY_TAX_LINES: [ ] = []; +export const EMPTY_TAX_LINES: [] = []; diff --git a/assets/js/data/default-states.ts b/assets/js/data/default-states.ts index 29ff0e7fe79..8fe8ec2b698 100644 --- a/assets/js/data/default-states.ts +++ b/assets/js/data/default-states.ts @@ -27,8 +27,8 @@ export interface CartState { errors: Array< ResponseError >; } -export const EMPTY_PENDING_QUANTITY: [ ] = []; -export const EMPTY_PENDING_DELETE: [ ] = []; +export const EMPTY_PENDING_QUANTITY: [] = []; +export const EMPTY_PENDING_DELETE: [] = []; export const defaultCartState: CartState = { cartItemsPendingQuantity: EMPTY_PENDING_QUANTITY, diff --git a/assets/js/data/mapped-types.ts b/assets/js/data/mapped-types.ts index ec447656341..01c711c8653 100644 --- a/assets/js/data/mapped-types.ts +++ b/assets/js/data/mapped-types.ts @@ -62,19 +62,17 @@ export type TailParameters< F extends Function > = F extends ( /** * Obtain the type finally returned by the generator when it's done iterating. */ -export type GeneratorReturnType< - T extends ( ...args: any[] ) => Generator -> = T extends ( ...args: any ) => Generator< any, infer R, any > ? R : never; +export type GeneratorReturnType< T extends ( ...args: any[] ) => Generator > = + T extends ( ...args: any ) => Generator< any, infer R, any > ? R : never; /** * Usually we use ReturnType of all the action creators to deduce all the actions. * This works until one of the action creators is a generator and doesn't actually "Return" an action. * This type helper allows for actions to be both functions and generators */ -export type ReturnOrGeneratorYieldUnion< - T extends ( ...args: any ) => any -> = T extends ( ...args: any ) => infer Return - ? Return extends Generator< infer T, infer U, any > - ? T | U - : Return - : never; +export type ReturnOrGeneratorYieldUnion< T extends ( ...args: any ) => any > = + T extends ( ...args: any ) => infer Return + ? Return extends Generator< infer T, infer U, any > + ? T | U + : Return + : never; diff --git a/assets/js/data/schema/selectors.js b/assets/js/data/schema/selectors.js index 9d85b64b60b..92f45285582 100644 --- a/assets/js/data/schema/selectors.js +++ b/assets/js/data/schema/selectors.js @@ -32,47 +32,49 @@ import { STORE_KEY } from './constants'; * @return {string} The route if it is available. */ export const getRoute = createRegistrySelector( - ( select ) => ( state, namespace, resourceName, ids = [] ) => { - const hasResolved = select( - STORE_KEY - ).hasFinishedResolution( 'getRoutes', [ namespace ] ); - state = state.routes; - let error = ''; - if ( ! state[ namespace ] ) { - error = sprintf( - 'There is no route for the given namespace (%s) in the store', - namespace + ( select ) => + ( state, namespace, resourceName, ids = [] ) => { + const hasResolved = select( STORE_KEY ).hasFinishedResolution( + 'getRoutes', + [ namespace ] ); - } else if ( ! state[ namespace ][ resourceName ] ) { - error = sprintf( - 'There is no route for the given resource name (%s) in the store', - resourceName - ); - } - if ( error !== '' ) { - if ( hasResolved ) { - throw new Error( error ); - } - return ''; - } - const route = getRouteFromResourceEntries( - state[ namespace ][ resourceName ], - ids - ); - if ( route === '' ) { - if ( hasResolved ) { - throw new Error( - sprintf( - 'While there is a route for the given namespace (%1$s) and resource name (%2$s), there is no route utilizing the number of ids you included in the select arguments. The available routes are: (%3$s)', - namespace, - resourceName, - JSON.stringify( state[ namespace ][ resourceName ] ) - ) + state = state.routes; + let error = ''; + if ( ! state[ namespace ] ) { + error = sprintf( + 'There is no route for the given namespace (%s) in the store', + namespace ); + } else if ( ! state[ namespace ][ resourceName ] ) { + error = sprintf( + 'There is no route for the given resource name (%s) in the store', + resourceName + ); + } + if ( error !== '' ) { + if ( hasResolved ) { + throw new Error( error ); + } + return ''; } + const route = getRouteFromResourceEntries( + state[ namespace ][ resourceName ], + ids + ); + if ( route === '' ) { + if ( hasResolved ) { + throw new Error( + sprintf( + 'While there is a route for the given namespace (%1$s) and resource name (%2$s), there is no route utilizing the number of ids you included in the select arguments. The available routes are: (%3$s)', + namespace, + resourceName, + JSON.stringify( state[ namespace ][ resourceName ] ) + ) + ); + } + } + return route; } - return route; - } ); /** @@ -85,9 +87,10 @@ export const getRoute = createRegistrySelector( */ export const getRoutes = createRegistrySelector( ( select ) => ( state, namespace ) => { - const hasResolved = select( - STORE_KEY - ).hasFinishedResolution( 'getRoutes', [ namespace ] ); + const hasResolved = select( STORE_KEY ).hasFinishedResolution( + 'getRoutes', + [ namespace ] + ); const routes = state.routes[ namespace ]; if ( ! routes ) { if ( hasResolved ) { diff --git a/assets/js/data/schema/test/selectors.js b/assets/js/data/schema/test/selectors.js index ded81504bfe..0e7bc205cff 100644 --- a/assets/js/data/schema/test/selectors.js +++ b/assets/js/data/schema/test/selectors.js @@ -34,9 +34,11 @@ const testState = deepFreeze( { } ); describe( 'getRoute', () => { - const invokeTest = ( namespace, resourceName, ids = [] ) => () => { - return getRoute( testState, namespace, resourceName, ids ); - }; + const invokeTest = + ( namespace, resourceName, ids = [] ) => + () => { + return getRoute( testState, namespace, resourceName, ids ); + }; describe( 'with throwing errors', () => { beforeEach( () => mockHasFinishedResolution.mockReturnValue( true ) ); it( 'throws an error if there is no route for the given namespace', () => { @@ -78,10 +80,11 @@ describe( 'getRoute', () => { } ); test( 'when there is a route with placeholders', () => { expect( - invokeTest( 'wc/blocks', 'products/attributes/terms', [ - 10, - 20, - ] )() + invokeTest( + 'wc/blocks', + 'products/attributes/terms', + [ 10, 20 ] + )() ).toBe( 'wc/blocks/products/attributes/10/terms/20' ); } ); } ); diff --git a/assets/js/editor-components/external-link-card/stories/index.tsx b/assets/js/editor-components/external-link-card/stories/index.tsx index 276d916b267..6c1f23fbd71 100644 --- a/assets/js/editor-components/external-link-card/stories/index.tsx +++ b/assets/js/editor-components/external-link-card/stories/index.tsx @@ -21,7 +21,6 @@ export const Default = Template.bind( {} ); Default.args = { description: 'This is the description of the link, perhaps a bit of a longer paragraph or a summary of a blog post, or whatever could give more context', - href: - 'https://woocommerce.com/posts/seven-tips-to-extend-holiday-sales-momentum/', + href: 'https://woocommerce.com/posts/seven-tips-to-extend-holiday-sales-momentum/', title: 'Seven tips to extend holiday sales momentum', }; diff --git a/assets/js/editor-components/product-tag-control/index.js b/assets/js/editor-components/product-tag-control/index.js index a2386d6f7e3..0b6ed524227 100644 --- a/assets/js/editor-components/product-tag-control/index.js +++ b/assets/js/editor-components/product-tag-control/index.js @@ -93,13 +93,8 @@ class ProductTagControl extends Component { render() { const { list, loading } = this.state; - const { - isCompact, - onChange, - onOperatorChange, - operator, - selected, - } = this.props; + const { isCompact, onChange, onOperatorChange, operator, selected } = + this.props; const messages = { clear: __( diff --git a/assets/js/editor-components/search-list-control/types.ts b/assets/js/editor-components/search-list-control/types.ts index 6c01296eb49..c1737693c54 100644 --- a/assets/js/editor-components/search-list-control/types.ts +++ b/assets/js/editor-components/search-list-control/types.ts @@ -13,7 +13,7 @@ export type SearchListItemType = { breadcrumbs: string[]; }; -export type SearchListItemsType = SearchListItemType[] | [ ]; +export type SearchListItemsType = SearchListItemType[] | []; export interface SearchListMessages { // A more detailed label for the "Clear all" button, read to screen reader users. diff --git a/assets/js/editor-components/search-list-control/utils.tsx b/assets/js/editor-components/search-list-control/utils.tsx index 43c65adfbee..f98d8796f26 100644 --- a/assets/js/editor-components/search-list-control/utils.tsx +++ b/assets/js/editor-components/search-list-control/utils.tsx @@ -41,7 +41,7 @@ export const defaultMessages = { export const buildTermsTree = ( filteredList: SearchListItemsType, list = filteredList -): SearchListItemType[] | [ ] => { +): SearchListItemType[] | [] => { const termsByParent = groupBy( filteredList, 'parent' ); const listById = keyBy( list, 'id' ); const builtParents = [ '0' ]; @@ -90,7 +90,7 @@ export const getFilteredList = ( list: SearchListItemsType, search: string, isHierarchical: boolean -): SearchListItemType[] | [ ] => { +): SearchListItemType[] | [] => { if ( ! search ) { return isHierarchical ? buildTermsTree( list ) : list; } diff --git a/assets/js/extensions/google-analytics/utils.ts b/assets/js/extensions/google-analytics/utils.ts index f5e43762b60..e4b22a73c19 100644 --- a/assets/js/extensions/google-analytics/utils.ts +++ b/assets/js/extensions/google-analytics/utils.ts @@ -79,40 +79,40 @@ export const trackEvent = ( let currentStep = -1; -export const trackCheckoutStep = ( step: number ) => ( { - storeCart, -}: { - storeCart: StoreCart; -} ): void => { - if ( currentStep === step ) { - return; - } - trackEvent( step === 0 ? 'begin_checkout' : 'checkout_progress', { - items: storeCart.cartItems.map( getProductFieldObject ), - coupon: storeCart.cartCoupons[ 0 ]?.code || '', - currency: storeCart.cartTotals.currency_code, - value: ( - parseInt( storeCart.cartTotals.total_price, 10 ) / - 10 ** storeCart.cartTotals.currency_minor_unit - ).toString(), - checkout_step: step, - } ); - currentStep = step; -}; +export const trackCheckoutStep = + ( step: number ) => + ( { storeCart }: { storeCart: StoreCart } ): void => { + if ( currentStep === step ) { + return; + } + trackEvent( step === 0 ? 'begin_checkout' : 'checkout_progress', { + items: storeCart.cartItems.map( getProductFieldObject ), + coupon: storeCart.cartCoupons[ 0 ]?.code || '', + currency: storeCart.cartTotals.currency_code, + value: ( + parseInt( storeCart.cartTotals.total_price, 10 ) / + 10 ** storeCart.cartTotals.currency_minor_unit + ).toString(), + checkout_step: step, + } ); + currentStep = step; + }; -export const trackCheckoutOption = ( { - step, - option, - value, -}: { - step: number; - option: string; - value: string; -} ) => (): void => { - trackEvent( 'set_checkout_option', { - checkout_step: step, - checkout_option: option, +export const trackCheckoutOption = + ( { + step, + option, value, - } ); - currentStep = step; -}; + }: { + step: number; + option: string; + value: string; + } ) => + (): void => { + trackEvent( 'set_checkout_option', { + checkout_step: step, + checkout_option: option, + value, + } ); + currentStep = step; + }; diff --git a/assets/js/filters/exclude-draft-status-from-analytics.js b/assets/js/filters/exclude-draft-status-from-analytics.js index f935bf8eedb..b97d3e484c9 100644 --- a/assets/js/filters/exclude-draft-status-from-analytics.js +++ b/assets/js/filters/exclude-draft-status-from-analytics.js @@ -19,12 +19,14 @@ addFilter( return optionsGroup; }; - const actionableStatusesOptions = settings.woocommerce_actionable_order_statuses.options.map( - removeCheckoutDraft - ); - const excludedStatusesOptions = settings.woocommerce_excluded_report_order_statuses.options.map( - removeCheckoutDraft - ); + const actionableStatusesOptions = + settings.woocommerce_actionable_order_statuses.options.map( + removeCheckoutDraft + ); + const excludedStatusesOptions = + settings.woocommerce_excluded_report_order_statuses.options.map( + removeCheckoutDraft + ); return { ...settings, diff --git a/assets/js/middleware/store-api-nonce.js b/assets/js/middleware/store-api-nonce.js index 2da91f2a8e3..d533d5a3c0a 100644 --- a/assets/js/middleware/store-api-nonce.js +++ b/assets/js/middleware/store-api-nonce.js @@ -103,9 +103,8 @@ const storeNonceMiddleware = ( options, next ) => { // Add nonce to sub-requests if ( Array.isArray( options?.data?.requests ) ) { - options.data.requests = options.data.requests.map( - appendNonceHeader - ); + options.data.requests = + options.data.requests.map( appendNonceHeader ); } } return next( options, next ); diff --git a/assets/js/previews/reviews.js b/assets/js/previews/reviews.js index b2ee378a443..f41c2d4607e 100644 --- a/assets/js/previews/reviews.js +++ b/assets/js/previews/reviews.js @@ -23,8 +23,8 @@ export const previewReviews = [ 'woo-gutenberg-products-block' ) }

\n`, reviewer_avatar_urls: { - '48': blocksConfig.defaultAvatar, - '96': blocksConfig.defaultAvatar, + 48: blocksConfig.defaultAvatar, + 96: blocksConfig.defaultAvatar, }, rating: 5, verified: true, @@ -47,8 +47,8 @@ export const previewReviews = [ 'woo-gutenberg-products-block' ) }

\n`, reviewer_avatar_urls: { - '48': blocksConfig.defaultAvatar, - '96': blocksConfig.defaultAvatar, + 48: blocksConfig.defaultAvatar, + 96: blocksConfig.defaultAvatar, }, rating: null, verified: false, diff --git a/assets/js/shared/hocs/with-filtered-attributes.js b/assets/js/shared/hocs/with-filtered-attributes.js index e3e95488f2e..1a482be565a 100644 --- a/assets/js/shared/hocs/with-filtered-attributes.js +++ b/assets/js/shared/hocs/with-filtered-attributes.js @@ -8,17 +8,19 @@ import { getValidBlockAttributes } from '@woocommerce/base-utils'; * * @param {Object} blockAttributes Component being wrapped. */ -export const withFilteredAttributes = ( blockAttributes ) => ( - OriginalComponent -) => { - return ( ownProps ) => { - const validBlockAttributes = getValidBlockAttributes( - blockAttributes, - ownProps - ); +export const withFilteredAttributes = + ( blockAttributes ) => ( OriginalComponent ) => { + return ( ownProps ) => { + const validBlockAttributes = getValidBlockAttributes( + blockAttributes, + ownProps + ); - return ( - - ); + return ( + + ); + }; }; -}; diff --git a/bin/hook-docs/actions/index.js b/bin/hook-docs/actions/index.js index 9e3c1ec3d8a..821a168b6d6 100644 --- a/bin/hook-docs/actions/index.js +++ b/bin/hook-docs/actions/index.js @@ -32,8 +32,7 @@ const generate = ( hooks ) => { const jsonDocs = [ { html: '' }, { - html: - '', + html: '', }, { h1: 'Actions' }, { h2: 'Table of Contents' }, diff --git a/bin/hook-docs/filters/index.js b/bin/hook-docs/filters/index.js index a5d2fde3937..2d114ad10d3 100644 --- a/bin/hook-docs/filters/index.js +++ b/bin/hook-docs/filters/index.js @@ -32,8 +32,7 @@ const generate = ( hooks ) => { const jsonDocs = [ { html: '' }, { - html: - '', + html: '', }, { h1: 'Filters' }, { h2: 'Table of Contents' }, diff --git a/bin/webpack-configs.js b/bin/webpack-configs.js index 2d2ad7684e7..b2e8374333d 100644 --- a/bin/webpack-configs.js +++ b/bin/webpack-configs.js @@ -711,10 +711,8 @@ const getStylingConfig = ( options = {} ) => { includePaths: [ 'assets/css/abstracts' ], }, additionalData: ( content, loaderContext ) => { - const { - resourcePath, - rootContext, - } = loaderContext; + const { resourcePath, rootContext } = + loaderContext; const relativePath = path.relative( rootContext, resourcePath diff --git a/package-lock.json b/package-lock.json index 444ae211ac0..1605dad4d41 100644 --- a/package-lock.json +++ b/package-lock.json @@ -93,6 +93,7 @@ "@wordpress/html-entities": "3.2.3", "@wordpress/i18n": "4.2.4", "@wordpress/is-shallow-equal": "4.2.1", + "@wordpress/prettier-config": "^1.1.1", "@wordpress/scripts": "22.3.0", "autoprefixer": "10.3.7", "axios": "0.21.4", @@ -138,10 +139,10 @@ "patch-package": "6.4.7", "postcss": "8.2.13", "postcss-loader": "4.2.0", - "prettier": "npm:wp-prettier@2.0.5", + "prettier": "npm:wp-prettier@2.6.2", "progress-bar-webpack-plugin": "2.1.0", "promptly": "3.2.0", - "puppeteer": "^13.7.0", + "puppeteer": "13.7.0", "react-docgen": "5.4.0", "react-test-renderer": "17.0.2", "request-promise": "4.2.6", @@ -39459,10 +39460,19 @@ }, "node_modules/prettier": { "name": "wp-prettier", - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-2.0.5.tgz", - "integrity": "sha512-5GCgdeevIXwR3cW4Qj5XWC5MO1iSCz8+IPn0mMw6awAt/PBiey8yyO7MhePRsaMqghJAhg6Q3QLYWSnUHWkG6A==", - "dev": true + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-2.6.2.tgz", + "integrity": "sha512-AV33EzqiFJ3fj+mPlKABN59YFPReLkDxQnj067Z3uEOeRQf3g05WprL0RDuqM7UBhSRo9W1rMSC2KvZmjE5UOA==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } }, "node_modules/prettier-linter-helpers": { "version": "1.0.0", @@ -79483,9 +79493,9 @@ "optional": true }, "prettier": { - "version": "npm:wp-prettier@2.0.5", - "resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-2.0.5.tgz", - "integrity": "sha512-5GCgdeevIXwR3cW4Qj5XWC5MO1iSCz8+IPn0mMw6awAt/PBiey8yyO7MhePRsaMqghJAhg6Q3QLYWSnUHWkG6A==", + "version": "npm:wp-prettier@2.6.2", + "resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-2.6.2.tgz", + "integrity": "sha512-AV33EzqiFJ3fj+mPlKABN59YFPReLkDxQnj067Z3uEOeRQf3g05WprL0RDuqM7UBhSRo9W1rMSC2KvZmjE5UOA==", "dev": true }, "prettier-linter-helpers": { diff --git a/package.json b/package.json index 7d76bf4bb2d..3272692faf5 100644 --- a/package.json +++ b/package.json @@ -143,6 +143,7 @@ "@wordpress/i18n": "4.2.4", "@wordpress/is-shallow-equal": "4.2.1", "@wordpress/scripts": "22.3.0", + "@wordpress/prettier-config": "^1.1.1", "autoprefixer": "10.3.7", "axios": "0.21.4", "babel-plugin-explicit-exports-references": "^1.0.2", @@ -187,7 +188,7 @@ "patch-package": "6.4.7", "postcss": "8.2.13", "postcss-loader": "4.2.0", - "prettier": "npm:wp-prettier@2.0.5", + "prettier": "npm:wp-prettier@2.6.2", "progress-bar-webpack-plugin": "2.1.0", "promptly": "3.2.0", "puppeteer": "13.7.0", diff --git a/packages/checkout/components/discounts-meta/index.js b/packages/checkout/components/discounts-meta/index.js index 267adf39db4..3f87627a7e8 100644 --- a/packages/checkout/components/discounts-meta/index.js +++ b/packages/checkout/components/discounts-meta/index.js @@ -11,10 +11,8 @@ import TotalsWrapper from '../totals-wrapper'; const slotName = '__experimentalDiscountsMeta'; -const { - Fill: ExperimentalDiscountsMeta, - Slot: DiscountsMetaSlot, -} = createSlotFill( slotName ); +const { Fill: ExperimentalDiscountsMeta, Slot: DiscountsMetaSlot } = + createSlotFill( slotName ); const Slot = ( { className, extensions, cart, context } ) => { const { fills } = useSlot( slotName ); diff --git a/packages/checkout/components/order-meta/index.js b/packages/checkout/components/order-meta/index.js index 7c86bc632ee..39c7a096107 100644 --- a/packages/checkout/components/order-meta/index.js +++ b/packages/checkout/components/order-meta/index.js @@ -11,9 +11,8 @@ import TotalsWrapper from '../totals-wrapper'; const slotName = '__experimentalOrderMeta'; -const { Fill: ExperimentalOrderMeta, Slot: OrderMetaSlot } = createSlotFill( - slotName -); +const { Fill: ExperimentalOrderMeta, Slot: OrderMetaSlot } = + createSlotFill( slotName ); const Slot = ( { className, extensions, cart, context } ) => { const { fills } = useSlot( slotName ); diff --git a/packages/checkout/filter-registry/index.ts b/packages/checkout/filter-registry/index.ts index 854ddc510cf..da3674d9269 100644 --- a/packages/checkout/filter-registry/index.ts +++ b/packages/checkout/filter-registry/index.ts @@ -49,8 +49,7 @@ export const __experimentalRegisterCheckoutFilters = ( deprecated( 'snackbarNotices', { alternative: 'snackbarNoticeVisibility', plugin: 'WooCommerce Blocks', - link: - 'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4417', + link: 'https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4417', } ); } @@ -63,8 +62,7 @@ export const __experimentalRegisterCheckoutFilters = ( deprecated( 'couponName', { alternative: 'coupons', plugin: 'WooCommerce Blocks', - link: - 'https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/bb921d21f42e21f38df2b1c87b48e07aa4cb0538/docs/extensibility/available-filters.md#coupons', + link: 'https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/bb921d21f42e21f38df2b1c87b48e07aa4cb0538/docs/extensibility/available-filters.md#coupons', } ); } diff --git a/packages/prices/utils/price.ts b/packages/prices/utils/price.ts index 40b76974de3..54a7779d744 100644 --- a/packages/prices/utils/price.ts +++ b/packages/prices/utils/price.ts @@ -178,13 +178,8 @@ export const formatPrice = ( const currency: Currency = getCurrency( currencyData ); - const { - minorUnit, - prefix, - suffix, - decimalSeparator, - thousandSeparator, - } = currency; + const { minorUnit, prefix, suffix, decimalSeparator, thousandSeparator } = + currency; const formattedPrice: number = priceInt / 10 ** minorUnit; diff --git a/storybook/custom-controls/currency.ts b/storybook/custom-controls/currency.ts index ce6b175a615..2c1d39e8f1f 100644 --- a/storybook/custom-controls/currency.ts +++ b/storybook/custom-controls/currency.ts @@ -25,15 +25,13 @@ export const currencies: Record< string, Currency > = { }, } as const; -export const currenciesAPIShape: Record< - string, - CurrencyResponse -> = Object.fromEntries( - Object.entries( currencies ).map( ( [ key, value ] ) => [ - key, - snakecaseKeys( value ), - ] ) -); +export const currenciesAPIShape: Record< string, CurrencyResponse > = + Object.fromEntries( + Object.entries( currencies ).map( ( [ key, value ] ) => [ + key, + snakecaseKeys( value ), + ] ) + ); export const currencyControl = { control: 'select', diff --git a/tests/e2e/config/custom-matchers/__fixtures__/best-selling-products.fixture.json b/tests/e2e/config/custom-matchers/__fixtures__/best-selling-products.fixture.json index 83be6820f4d..592c5ded3ea 100644 --- a/tests/e2e/config/custom-matchers/__fixtures__/best-selling-products.fixture.json +++ b/tests/e2e/config/custom-matchers/__fixtures__/best-selling-products.fixture.json @@ -1 +1,4 @@ -{"title":"Best Selling Products Block","pageContent":""} \ No newline at end of file +{ + "title": "Best Selling Products Block", + "pageContent": "" +} diff --git a/tests/e2e/config/custom-matchers/__fixtures__/featured-category.fixture.json b/tests/e2e/config/custom-matchers/__fixtures__/featured-category.fixture.json index 60f0ae7b0d9..b6c77eb3381 100644 --- a/tests/e2e/config/custom-matchers/__fixtures__/featured-category.fixture.json +++ b/tests/e2e/config/custom-matchers/__fixtures__/featured-category.fixture.json @@ -1 +1,4 @@ -{"title":"Featured Category Block","pageContent":""} \ No newline at end of file +{ + "title": "Featured Category Block", + "pageContent": "" +} diff --git a/tests/e2e/config/custom-matchers/__fixtures__/hand-picked-products.fixture.json b/tests/e2e/config/custom-matchers/__fixtures__/hand-picked-products.fixture.json index 907b84ea5ec..4b2f1de3f43 100644 --- a/tests/e2e/config/custom-matchers/__fixtures__/hand-picked-products.fixture.json +++ b/tests/e2e/config/custom-matchers/__fixtures__/hand-picked-products.fixture.json @@ -1 +1,4 @@ -{"title":"Hand-picked Products Block","pageContent":""} \ No newline at end of file +{ + "title": "Hand-picked Products Block", + "pageContent": "" +} diff --git a/tests/e2e/config/custom-matchers/__fixtures__/newest-products.fixture.json b/tests/e2e/config/custom-matchers/__fixtures__/newest-products.fixture.json index 5ffe302fc75..d3aa952f8b7 100644 --- a/tests/e2e/config/custom-matchers/__fixtures__/newest-products.fixture.json +++ b/tests/e2e/config/custom-matchers/__fixtures__/newest-products.fixture.json @@ -1 +1,4 @@ -{"title":"Newest Products Block","pageContent":""} \ No newline at end of file +{ + "title": "Newest Products Block", + "pageContent": "" +} diff --git a/tests/e2e/config/custom-matchers/__fixtures__/product-categories-list.fixture.json b/tests/e2e/config/custom-matchers/__fixtures__/product-categories-list.fixture.json index 7e6a4d9e3bb..6f6baf27aef 100644 --- a/tests/e2e/config/custom-matchers/__fixtures__/product-categories-list.fixture.json +++ b/tests/e2e/config/custom-matchers/__fixtures__/product-categories-list.fixture.json @@ -1 +1,4 @@ -{"title":"Product Categories List Block","pageContent":""} \ No newline at end of file +{ + "title": "Product Categories List Block", + "pageContent": "" +} diff --git a/tests/e2e/config/custom-matchers/__fixtures__/top-rated-products.fixture.json b/tests/e2e/config/custom-matchers/__fixtures__/top-rated-products.fixture.json index 4adb6788563..a3190e493b4 100644 --- a/tests/e2e/config/custom-matchers/__fixtures__/top-rated-products.fixture.json +++ b/tests/e2e/config/custom-matchers/__fixtures__/top-rated-products.fixture.json @@ -1 +1,4 @@ -{"title":"Top Rated Products Block","pageContent":""} \ No newline at end of file +{ + "title": "Top Rated Products Block", + "pageContent": "" +} diff --git a/tests/e2e/config/setup.js b/tests/e2e/config/setup.js index 10a2684115d..3b57bb981a1 100644 --- a/tests/e2e/config/setup.js +++ b/tests/e2e/config/setup.js @@ -49,14 +49,8 @@ module.exports = async ( globalConfig ) => { enablePaymentGateways(), setupPageSettings(), ] ).catch( console.log ); - const [ - taxes, - coupons, - categories, - tags, - shippingZones, - attributes, - ] = results; + const [ taxes, coupons, categories, tags, shippingZones, attributes ] = + results; // Create products after categories. const products = await createProducts( categories, tags, attributes ); diff --git a/tests/e2e/fixtures/fixture-data.js b/tests/e2e/fixtures/fixture-data.js index af7ae386864..382a03c6732 100644 --- a/tests/e2e/fixtures/fixture-data.js +++ b/tests/e2e/fixtures/fixture-data.js @@ -152,14 +152,12 @@ const Products = () => [ downloads: [ { name: 'Woo Single', - file: - 'http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/cd_4_angle.jpg', + file: 'http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/cd_4_angle.jpg', }, ], images: [ { - src: - 'http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/cd_4_angle.jpg', + src: 'http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/cd_4_angle.jpg', }, ], categories: [ 'Music' ], @@ -172,8 +170,7 @@ const Products = () => [ downloadable: false, images: [ { - src: - 'http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/cd_4_angle.jpg', + src: 'http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/cd_4_angle.jpg', }, ], attributes: [ @@ -194,8 +191,7 @@ const Products = () => [ downloadable: false, images: [ { - src: - 'http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/cd_4_angle.jpg', + src: 'http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/cd_4_angle.jpg', }, ], attributes: [ @@ -216,14 +212,12 @@ const Products = () => [ downloads: [ { name: 'Woo Single 2', - file: - 'http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/cd_4_angle.jpg', + file: 'http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/cd_4_angle.jpg', }, ], images: [ { - src: - 'http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/cd_4_angle.jpg', + src: 'http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/cd_4_angle.jpg', }, ], categories: [ 'Music' ], @@ -238,14 +232,12 @@ const Products = () => [ downloads: [ { name: 'Woo Single 2', - file: - 'http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/cd_4_angle.jpg', + file: 'http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/cd_4_angle.jpg', }, ], images: [ { - src: - 'http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/cd_4_angle.jpg', + src: 'http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/cd_4_angle.jpg', }, ], categories: [ 'Music' ], diff --git a/tests/e2e/fixtures/fixture-loaders.js b/tests/e2e/fixtures/fixture-loaders.js index a343985336b..f734d8c0b74 100644 --- a/tests/e2e/fixtures/fixture-loaders.js +++ b/tests/e2e/fixtures/fixture-loaders.js @@ -1,8 +1,8 @@ /** * External dependencies */ -const WooCommerceRestApi = require( '@woocommerce/woocommerce-rest-api' ) - .default; +const WooCommerceRestApi = + require( '@woocommerce/woocommerce-rest-api' ).default; const glob = require( 'glob-promise' ); const { dirname } = require( 'path' ); const { readJson } = require( 'fs-extra' ); diff --git a/tests/e2e/specs/backend/active-filters.test.js b/tests/e2e/specs/backend/active-filters.test.js index 157a0c31f08..6c81df7e098 100644 --- a/tests/e2e/specs/backend/active-filters.test.js +++ b/tests/e2e/specs/backend/active-filters.test.js @@ -50,9 +50,7 @@ describe( `${ block.name } Block`, () => { await page.click( '.components-toolbar button[aria-label="Heading 6"]' ); - await expect( - page - ).toMatchElement( + await expect( page ).toMatchElement( `.wp-block[data-type="${ block.slug }"] h6 textarea`, { text: 'New Title' } ); diff --git a/tests/e2e/specs/backend/attribute-filter.test.js b/tests/e2e/specs/backend/attribute-filter.test.js index 7b1eebe40a7..a5b4678b6bf 100644 --- a/tests/e2e/specs/backend/attribute-filter.test.js +++ b/tests/e2e/specs/backend/attribute-filter.test.js @@ -62,9 +62,7 @@ describe( `${ block.name } Block`, () => { await page.click( '.components-toolbar button[aria-label="Heading 6"]' ); - await expect( - page - ).toMatchElement( + await expect( page ).toMatchElement( `.wp-block[data-type="${ block.slug }"] h6 textarea`, { text: 'New Title' } ); diff --git a/tests/e2e/specs/backend/price-filter.test.js b/tests/e2e/specs/backend/price-filter.test.js index 7a9750a08ca..6acd0887d0e 100644 --- a/tests/e2e/specs/backend/price-filter.test.js +++ b/tests/e2e/specs/backend/price-filter.test.js @@ -53,9 +53,7 @@ describe( `${ block.name } Block`, () => { await page.click( '.components-toolbar button[aria-label="Heading 6"]' ); - await expect( - page - ).toMatchElement( + await expect( page ).toMatchElement( `.wp-block[data-type="${ block.slug }"] h6 textarea`, { text: 'New Title' } ); @@ -67,9 +65,7 @@ describe( `${ block.name } Block`, () => { await page.click( '.components-toolbar button[aria-label="Heading 3"]' ); - await expect( - page - ).not.toMatchElement( + await expect( page ).not.toMatchElement( `.wp-block[data-type="${ block.slug }"] h6 textarea`, { text: 'New Title' } ); diff --git a/tests/e2e/specs/frontend/legacy-template-blocks.test.ts b/tests/e2e/specs/frontend/legacy-template-blocks.test.ts index 584ab749e5a..0cd13d14589 100644 --- a/tests/e2e/specs/frontend/legacy-template-blocks.test.ts +++ b/tests/e2e/specs/frontend/legacy-template-blocks.test.ts @@ -55,10 +55,8 @@ describe( 'Classic Template blocks', () => { await page.waitForSelector( productArchivePage.productsList ); await page.waitForSelector( productArchivePage.resultsCount ); - const { - displayedCount, - shouldHavePaginationUI, - } = await extractPaginationData(); + const { displayedCount, shouldHavePaginationUI } = + await extractPaginationData(); if ( shouldHavePaginationUI ) { await expect( page ).toMatchElement( @@ -93,10 +91,8 @@ describe( 'Classic Template blocks', () => { await page.waitForSelector( productArchivePage.productsList ); await page.waitForSelector( productArchivePage.resultsCount ); - const { - displayedCount, - shouldHavePaginationUI, - } = await extractPaginationData(); + const { displayedCount, shouldHavePaginationUI } = + await extractPaginationData(); if ( shouldHavePaginationUI ) { await expect( page ).toMatchElement( @@ -131,10 +127,8 @@ describe( 'Classic Template blocks', () => { await page.waitForSelector( productArchivePage.productsList ); await page.waitForSelector( productArchivePage.resultsCount ); - const { - displayedCount, - shouldHavePaginationUI, - } = await extractPaginationData(); + const { displayedCount, shouldHavePaginationUI } = + await extractPaginationData(); if ( shouldHavePaginationUI ) { await expect( page ).toMatchElement( diff --git a/tests/e2e/specs/shopper/cart-checkout/account.test.js b/tests/e2e/specs/shopper/cart-checkout/account.test.js index f49d30c85d9..89943d6400a 100644 --- a/tests/e2e/specs/shopper/cart-checkout/account.test.js +++ b/tests/e2e/specs/shopper/cart-checkout/account.test.js @@ -52,8 +52,7 @@ describe( 'Shopper → Checkout → Account', () => { //Enable shoppers to sign up at checkout option. // eslint-disable-next-line jest/no-standalone-expect await expect( page ).toClick( 'label', { - text: - 'Allow shoppers to sign up for a user account during checkout', + text: 'Allow shoppers to sign up for a user account during checkout', } ); await saveOrPublish(); await merchant.logout(); diff --git a/tests/e2e/utils.js b/tests/e2e/utils.js index 74471db59af..b81f23da141 100644 --- a/tests/e2e/utils.js +++ b/tests/e2e/utils.js @@ -44,8 +44,7 @@ export const DEFAULT_TIMEOUT = 30000; const SELECTORS = { canvas: 'iframe[name="editor-canvas"]', inserter: { - search: - '.components-search-control__input,.block-editor-inserter__search input,.block-editor-inserter__search-input,input.block-editor-inserter__search', + search: '.components-search-control__input,.block-editor-inserter__search input,.block-editor-inserter__search-input,input.block-editor-inserter__search', }, templatesListTable: { actionsContainer: '.edit-site-list-table__actions', diff --git a/tests/js/jestPreprocess.js b/tests/js/jestPreprocess.js index 40bf8c2621e..9baa877eae3 100644 --- a/tests/js/jestPreprocess.js +++ b/tests/js/jestPreprocess.js @@ -6,6 +6,5 @@ const babelOptions = { ], }; -module.exports = require( 'babel-jest' ).default.createTransformer( - babelOptions -); +module.exports = + require( 'babel-jest' ).default.createTransformer( babelOptions ); diff --git a/tests/utils/shopper.js b/tests/utils/shopper.js index be2c75fff41..705449b549a 100644 --- a/tests/utils/shopper.js +++ b/tests/utils/shopper.js @@ -69,9 +69,7 @@ export const shopper = { await expect( page ).toMatchElement( 'span', { text: productTitle, } ); - await expect( - page - ).toMatchElement( + await expect( page ).toMatchElement( 'div.wc-block-components-order-summary-item__quantity', { text: quantity } ); diff --git a/tests/utils/taxes.ts b/tests/utils/taxes.ts index c3bf4a5e08f..f4ffedc3ce1 100644 --- a/tests/utils/taxes.ts +++ b/tests/utils/taxes.ts @@ -72,8 +72,8 @@ export async function getTaxesFromOrderSummaryPage( ) ) .filter( ( node ) => { - const taxLabel = node.getElementsByTagName( 'th' )[ 0 ] - .innerHTML; + const taxLabel = + node.getElementsByTagName( 'th' )[ 0 ].innerHTML; return taxRatesEval.some( // We need to remove the ":" on the end of the string before we compare ( taxRate ) => taxRate.name === taxLabel.slice( 0, -1 )