From 1c4b793f066166e8169d41bfc6f01228be7f9c8c Mon Sep 17 00:00:00 2001 From: Karol Manijak <20098064+kmanijak@users.noreply.github.com> Date: Fri, 5 Apr 2024 13:16:00 +0200 Subject: [PATCH] Product Collection: fix "Reset All" button in Editor filters (#46226) * Add deselect callabck to attribute filter * Add deselect callabck to created filter * Add deselect callabck to featured filter * Add deselect callabck to handpicked filter * Cleanup deselect callabck to keyword filter * Add deselect callabck to on salefilter * Add deselect callabck to order by option * Add deselect callabck to stock status filter * Add deselect callabck to price range filter * Add deselect callabck to price taxonomies filter * Call all the reset filer callbacks on reset * Add changelog * Remove unused variable * Replace hardcoded default filter values with the DEFAULT_FILTERS constant --- .../js/blocks/product-collection/constants.ts | 22 ++++++++++++++----- .../inspector-controls/attributes-control.tsx | 9 ++++++++ .../inspector-controls/created-control.tsx | 14 +++++++----- .../featured-products-control.tsx | 14 +++++++----- .../hand-picked-products-control.tsx | 15 ++++++++----- .../edit/inspector-controls/index.tsx | 9 ++++---- .../inspector-controls/keyword-control.tsx | 8 +++++-- .../inspector-controls/on-sale-control.tsx | 14 +++++++----- .../inspector-controls/order-by-control.tsx | 9 +++++--- .../price-range-control/index.tsx | 10 ++++++--- .../stock-status-control.tsx | 19 +++++++++++----- .../taxonomy-controls/index.tsx | 7 +++++- .../js/blocks/product-collection/types.ts | 10 ++++----- ...set-all-resets-also-the-collection-filters | 4 ++++ 14 files changed, 113 insertions(+), 51 deletions(-) create mode 100644 plugins/woocommerce/changelog/46156-product-collection-reset-all-resets-also-the-collection-filters diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/constants.ts b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/constants.ts index 3f772709858..8b588275dc5 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/constants.ts +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/constants.ts @@ -94,15 +94,25 @@ export const getDefaultSettings = ( query: getDefaultQuery( currentAttributes.query ), } ); -export const DEFAULT_FILTERS: Partial< ProductCollectionQuery > = { +export const DEFAULT_FILTERS: Pick< + ProductCollectionQuery, + | 'woocommerceOnSale' + | 'woocommerceStockStatus' + | 'woocommerceAttributes' + | 'woocommerceHandPickedProducts' + | 'taxQuery' + | 'featured' + | 'timeFrame' + | 'priceRange' +> = { woocommerceOnSale: DEFAULT_QUERY.woocommerceOnSale, - woocommerceStockStatus: getDefaultStockStatuses(), - woocommerceAttributes: [], + woocommerceStockStatus: DEFAULT_QUERY.woocommerceStockStatus, + woocommerceAttributes: DEFAULT_QUERY.woocommerceAttributes, + woocommerceHandPickedProducts: DEFAULT_QUERY.woocommerceHandPickedProducts, taxQuery: DEFAULT_QUERY.taxQuery, - woocommerceHandPickedProducts: [], featured: DEFAULT_QUERY.featured, - timeFrame: undefined, - priceRange: undefined, + timeFrame: DEFAULT_QUERY.timeFrame, + priceRange: DEFAULT_QUERY.priceRange, }; /** diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/attributes-control.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/attributes-control.tsx index 22eb3c4354f..e5cbd45d51d 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/attributes-control.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/attributes-control.tsx @@ -16,6 +16,7 @@ import { * Internal dependencies */ import { QueryControlProps } from '../../types'; +import { DEFAULT_FILTERS } from '../../constants'; const EDIT_ATTRIBUTES_URL = `${ ADMIN_URL }edit.php?post_type=product&page=product_attributes`; @@ -30,10 +31,18 @@ const AttributesControl = ( { } ) ); + const deselectCallback = () => { + setQueryAttribute( { + woocommerceAttributes: DEFAULT_FILTERS.woocommerceAttributes, + } ); + }; + return ( !! woocommerceAttributes?.length } + onDeselect={ deselectCallback } + resetAllFilter={ deselectCallback } > { const { query, setQueryAttribute } = props; const { timeFrame } = query; + const deselectCallback = () => { + setQueryAttribute( { + timeFrame: DEFAULT_FILTERS.timeFrame, + } ); + }; + return ( timeFrame?.operator && timeFrame?.value } - onDeselect={ () => { - setQueryAttribute( { - timeFrame: undefined, - } ); - } } + onDeselect={ deselectCallback } + resetAllFilter={ deselectCallback } > diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/featured-products-control.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/featured-products-control.tsx index 3fb5dec3166..37520910a8a 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/featured-products-control.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/featured-products-control.tsx @@ -14,19 +14,23 @@ import { * Internal dependencies */ import { QueryControlProps } from '../../types'; +import { DEFAULT_FILTERS } from '../../constants'; const FeaturedProductsControl = ( props: QueryControlProps ) => { const { query, setQueryAttribute } = props; + const deselectCallback = () => { + setQueryAttribute( { + featured: DEFAULT_FILTERS.featured, + } ); + }; + return ( query.featured === true } - onDeselect={ () => { - setQueryAttribute( { - featured: false, - } ); - } } + onDeselect={ deselectCallback } + resetAllFilter={ deselectCallback } > { + setQueryAttribute( { + woocommerceHandPickedProducts: + DEFAULT_FILTERS.woocommerceHandPickedProducts, + } ); + }; + return ( !! selectedProductIds?.length } - onDeselect={ () => { - setQueryAttribute( { - woocommerceHandPickedProducts: [], - } ); - } } + onDeselect={ deselectCallback } + resetAllFilter={ deselectCallback } > void )[] ) => { - setQueryAttribute( props, DEFAULT_FILTERS ); - resetAllFilters.forEach( ( resetFilter ) => - resetFilter() - ); + resetAllFilters.forEach( ( resetFilter ) => { + resetFilter(); + } ); } } className="wc-block-editor-product-collection-inspector-toolspanel__filters" > diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/keyword-control.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/keyword-control.tsx index 570a95630ea..f2868d48527 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/keyword-control.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/keyword-control.tsx @@ -33,12 +33,16 @@ const KeywordControl = ( props: QueryControlProps ) => { return onChangeDebounced.cancel; }, [ querySearch, onChangeDebounced ] ); + const deselectCallback = () => { + setQuerySearch( '' ); + }; + return ( !! querySearch } label={ __( 'Keyword', 'woocommerce' ) } - onDeselect={ () => setQuerySearch( '' ) } - resetAllFilter={ () => setQuerySearch( '' ) } + onDeselect={ deselectCallback } + resetAllFilter={ deselectCallback } > { const { query, setQueryAttribute } = props; + const deselectCallback = () => { + setQueryAttribute( { + woocommerceOnSale: DEFAULT_FILTERS.woocommerceOnSale, + } ); + }; + return ( query.woocommerceOnSale === true } isShownByDefault - onDeselect={ () => { - setQueryAttribute( { - woocommerceOnSale: false, - } ); - } } + onDeselect={ deselectCallback } + resetAllFilter={ deselectCallback } > { const { order, orderBy } = query; const defaultQuery = getDefaultQuery( query ); + const deselectCallback = () => { + setQueryAttribute( { orderBy: defaultQuery.orderBy } ); + }; + return ( { orderBy !== defaultQuery?.orderBy } isShownByDefault - onDeselect={ () => { - setQueryAttribute( defaultQuery ); - } } + onDeselect={ deselectCallback } + resetAllFilter={ deselectCallback } > { @@ -22,15 +23,18 @@ const PriceRangeControl = ( props: QueryControlProps ) => { const value = query.priceRange; + const deselectCallback = () => { + setQueryAttribute( { priceRange: DEFAULT_FILTERS.priceRange } ); + }; + return ( { return value?.min !== undefined || value?.max !== undefined; } } - onDeselect={ () => { - setQueryAttribute( { priceRange: undefined } ); - } } + onDeselect={ deselectCallback } + resetAllFilter={ deselectCallback } className="wc-block-product-price-range-control" > diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/stock-status-control.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/stock-status-control.tsx index 610133c58a4..cc117b67e11 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/stock-status-control.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/stock-status-control.tsx @@ -14,7 +14,11 @@ import { * Internal dependencies */ import { QueryControlProps } from '../../types'; -import { STOCK_STATUS_OPTIONS, getDefaultStockStatuses } from '../../constants'; +import { + STOCK_STATUS_OPTIONS, + DEFAULT_FILTERS, + getDefaultStockStatuses, +} from '../../constants'; /** * Gets the id of a specific stock status from its text label @@ -36,6 +40,12 @@ function getStockStatusIdByLabel( statusLabel: FormTokenField.Value ) { const StockStatusControl = ( props: QueryControlProps ) => { const { query, setQueryAttribute } = props; + const deselectCallback = () => { + setQueryAttribute( { + woocommerceStockStatus: DEFAULT_FILTERS.woocommerceStockStatus, + } ); + }; + return ( { getDefaultStockStatuses() ) } - onDeselect={ () => { - setQueryAttribute( { - woocommerceStockStatus: getDefaultStockStatuses(), - } ); - } } + onDeselect={ deselectCallback } + resetAllFilter={ deselectCallback } isShownByDefault > + setQueryAttribute( { taxQuery: DEFAULT_FILTERS.taxQuery } ); + return ( !! terms.length ) } - onDeselect={ () => setQueryAttribute( { taxQuery: {} } ) } + onDeselect={ deselectCallback } + resetAllFilter={ deselectCallback } > { taxonomies.map( ( taxonomy: Taxonomy ) => { const termIds = taxQuery?.[ taxonomy.slug ] || []; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/types.ts b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/types.ts index 37d71325497..6be90f5fa2b 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/types.ts +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/types.ts @@ -81,11 +81,11 @@ export interface ProductCollectionQuery { * ), * ``` */ - woocommerceStockStatus?: string[]; - woocommerceAttributes?: AttributeMetadata[]; - isProductCollectionBlock?: boolean; - woocommerceHandPickedProducts?: string[]; - priceRange?: undefined | PriceRange; + woocommerceStockStatus: string[]; + woocommerceAttributes: AttributeMetadata[]; + isProductCollectionBlock: boolean; + woocommerceHandPickedProducts: string[]; + priceRange: undefined | PriceRange; } export type ProductCollectionEditComponentProps = diff --git a/plugins/woocommerce/changelog/46156-product-collection-reset-all-resets-also-the-collection-filters b/plugins/woocommerce/changelog/46156-product-collection-reset-all-resets-also-the-collection-filters new file mode 100644 index 00000000000..abf8c8c034b --- /dev/null +++ b/plugins/woocommerce/changelog/46156-product-collection-reset-all-resets-also-the-collection-filters @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Product Collection: Fix the "Reset All" funtionality in Editor filters