Revert "Add "Filter Products by Stock" block (#4145)"

This reverts commit 0cd4909.

assets/js/base/components/product-list/container.js

@@ -9,7 +9,10 @@ import PropTypes from 'prop-types';
  */
 import ProductList from './product-list';
 
-const ProductListContainer = ( { attributes } ) => {
+const ProductListContainer = ( {
+	attributes,
+	hideOutOfStockItems = false,
+} ) => {
 	const [ currentPage, setPage ] = useState( 1 );
 	const [ currentSort, setSort ] = useState( attributes.orderby );
 	useEffect( () => {
@@ -28,6 +31,7 @@ const ProductListContainer = ( { attributes } ) => {
 	return (
 		<ProductList
 			attributes={ attributes }
+			hideOutOfStockItems={ hideOutOfStockItems }
 			currentPage={ currentPage }
 			onPageChange={ onPageChange }
 			onSortChange={ onSortChange }

assets/js/base/components/product-list/product-list.js

@@ -27,7 +27,12 @@ import ProductSortSelect from './product-sort-select';
 import ProductListItem from './product-list-item';
 import './style.scss';
 
-const generateQuery = ( { sortValue, currentPage, attributes } ) => {
+const generateQuery = ( {
+	sortValue,
+	currentPage,
+	attributes,
+	hideOutOfStockItems,
+} ) => {
 	const { columns, rows } = attributes;
 	const getSortArgs = ( orderName ) => {
 		switch ( orderName ) {
@@ -57,6 +62,9 @@ const generateQuery = ( { sortValue, currentPage, attributes } ) => {
 		catalog_visibility: 'catalog',
 		per_page: columns * rows,
 		page: currentPage,
+		...( hideOutOfStockItems && {
+			stock_status: [ 'instock', 'onbackorder' ],
+		} ),
 	};
 };
 
@@ -110,24 +118,14 @@ const ProductList = ( {
 	onSortChange,
 	sortValue,
 	scrollToTop,
+	hideOutOfStockItems = false,
 } ) => {
-	// These are possible filters.
-	const [ productAttributes, setProductAttributes ] = useQueryStateByKey(
-		'attributes',
-		[]
-	);
-	const [ productStockStatus, setProductStockStatus ] = useQueryStateByKey(
-		'stock_status',
-		[]
-	);
-	const [ minPrice, setMinPrice ] = useQueryStateByKey( 'min_price' );
-	const [ maxPrice, setMaxPrice ] = useQueryStateByKey( 'max_price' );
-
 	const [ queryState ] = useSynchronizedQueryState(
 		generateQuery( {
 			attributes,
 			sortValue,
 			currentPage,
+			hideOutOfStockItems,
 		} )
 	);
 	const { products, totalProducts, productsLoading } = useStoreProducts(
@@ -137,6 +135,14 @@ const ProductList = ( {
 	const totalQuery = extractPaginationAndSortAttributes( queryState );
 	const { dispatchStoreEvent } = useStoreEvents();
 
+	// These are possible filters.
+	const [ productAttributes, setProductAttributes ] = useQueryStateByKey(
+		'attributes',
+		[]
+	);
+	const [ minPrice, setMinPrice ] = useQueryStateByKey( 'min_price' );
+	const [ maxPrice, setMaxPrice ] = useQueryStateByKey( 'max_price' );
+
 	// Only update previous query totals if the query is different and the total number of products is a finite number.
 	const previousQueryTotals = usePrevious(
 		{ totalQuery, totalProducts },
@@ -203,7 +209,6 @@ const ProductList = ( {
 	const hasProducts = products.length !== 0 || productsLoading;
 	const hasFilters =
 		productAttributes.length > 0 ||
-		productStockStatus.length > 0 ||
 		Number.isFinite( minPrice ) ||
 		Number.isFinite( maxPrice );
 
@@ -219,7 +224,6 @@ const ProductList = ( {
 				<NoMatchingProducts
 					resetCallback={ () => {
 						setProductAttributes( [] );
-						setProductStockStatus( [] );
 						setMinPrice( null );
 						setMaxPrice( null );
 					} }
@@ -250,6 +254,7 @@ const ProductList = ( {
 
 ProductList.propTypes = {
 	attributes: PropTypes.object.isRequired,
+	hideOutOfStockItems: PropTypes.bool,
 	// From withScrollToTop.
 	scrollToTop: PropTypes.func,
 };

assets/js/base/context/hooks/collections/use-collection-data.js

@@ -36,7 +36,6 @@ const buildCollectionDataQuery = ( collectionDataQueryState ) => {
 export const useCollectionData = ( {
 	queryAttribute,
 	queryPrices,
-	queryStock,
 	queryState,
 } ) => {
 	let context = useQueryStateContext();
@@ -51,14 +50,9 @@ export const useCollectionData = ( {
 		calculatePriceRangeQueryState,
 		setCalculatePriceRangeQueryState,
 	] = useQueryStateByKey( 'calculate_price_range', null, context );
-	const [
-		calculateStockStatusQueryState,
-		setCalculateStockStatusQueryState,
-	] = useQueryStateByKey( 'calculate_stock_status_counts', null, context );
 
 	const currentQueryAttribute = useShallowEqual( queryAttribute || {} );
 	const currentQueryPrices = useShallowEqual( queryPrices );
-	const currentQueryStock = useShallowEqual( queryStock );
 
 	useEffect( () => {
 		if (
@@ -99,19 +93,6 @@ export const useCollectionData = ( {
 		calculatePriceRangeQueryState,
 	] );
 
-	useEffect( () => {
-		if (
-			calculateStockStatusQueryState !== currentQueryStock &&
-			currentQueryStock !== undefined
-		) {
-			setCalculateStockStatusQueryState( currentQueryStock );
-		}
-	}, [
-		currentQueryStock,
-		setCalculateStockStatusQueryState,
-		calculateStockStatusQueryState,
-	] );
-
 	// Defer the select query so all collection-data query vars can be gathered.
 	const [ shouldSelect, setShouldSelect ] = useState( false );
 	const [ debouncedShouldSelect ] = useDebounce( shouldSelect, 200 );

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

@@ -3,7 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useQueryStateByKey } from '@woocommerce/base-context/hooks';
-import { getSetting } from '@woocommerce/settings';
 import { useMemo } from '@wordpress/element';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
@@ -32,39 +31,9 @@ const ActiveFiltersBlock = ( {
 		'attributes',
 		[]
 	);
-	const [ productStockStatus, setProductStockStatus ] = useQueryStateByKey(
-		'stock_status',
-		[]
-	);
 	const [ minPrice, setMinPrice ] = useQueryStateByKey( 'min_price' );
 	const [ maxPrice, setMaxPrice ] = useQueryStateByKey( 'max_price' );
 
-	const STOCK_STATUS_OPTIONS = getSetting( 'stockStatusOptions', [] );
-	const activeStockStatusFilters = useMemo( () => {
-		if ( productStockStatus.length > 0 ) {
-			return productStockStatus.map( ( slug ) => {
-				return renderRemovableListItem( {
-					type: __( 'Stock Status', 'woo-gutenberg-products-block' ),
-					name: STOCK_STATUS_OPTIONS[ slug ],
-					removeCallback: () => {
-						const newStatuses = productStockStatus.filter(
-							( status ) => {
-								return status !== slug;
-							}
-						);
-						setProductStockStatus( newStatuses );
-					},
-					displayStyle: blockAttributes.displayStyle,
-				} );
-			} );
-		}
-	}, [
-		STOCK_STATUS_OPTIONS,
-		productStockStatus,
-		setProductStockStatus,
-		blockAttributes.displayStyle,
-	] );
-
 	const activePriceFilters = useMemo( () => {
 		if ( ! Number.isFinite( minPrice ) && ! Number.isFinite( maxPrice ) ) {
 			return null;
@@ -106,7 +75,6 @@ const ActiveFiltersBlock = ( {
 	const hasFilters = () => {
 		return (
 			productAttributes.length > 0 ||
-			productStockStatus.length > 0 ||
 			Number.isFinite( minPrice ) ||
 			Number.isFinite( maxPrice )
 		);
@@ -157,7 +125,6 @@ const ActiveFiltersBlock = ( {
 					) : (
 						<>
 							{ activePriceFilters }
-							{ activeStockStatusFilters }
 							{ activeAttributeFilters }
 						</>
 					) }
@@ -168,7 +135,6 @@ const ActiveFiltersBlock = ( {
 						setMinPrice( undefined );
 						setMaxPrice( undefined );
 						setProductAttributes( [] );
-						setProductStockStatus( [] );
 					} }
 				>
 					<Label

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

@@ -13,7 +13,6 @@ import {
 import { useCallback, useEffect, useState, useMemo } from '@wordpress/element';
 import CheckboxList from '@woocommerce/base-components/checkbox-list';
 import DropdownSelector from '@woocommerce/base-components/dropdown-selector';
-import Label from '@woocommerce/base-components/filter-element-label';
 import FilterSubmitButton from '@woocommerce/base-components/filter-submit-button';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -23,6 +22,7 @@ import { decodeEntities } from '@wordpress/html-entities';
  */
 import { getAttributeFromID } from '../../utils/attributes';
 import { updateAttributeFilter } from '../../utils/attributes-query';
+import Label from './label';
 import { previewAttributeObject, previewOptions } from './preview';
 import './style.scss';
 

assets/js/base/components/filter-element-label/index.js → assets/js/blocks/attribute-filter/label.js

@@ -5,18 +5,13 @@ import { _n, sprintf } from '@wordpress/i18n';
 import Label from '@woocommerce/base-components/label';
 
 /**
- * Internal dependencies
- */
-import './style.scss';
-
-/**
- * The label for an filter elements.
+ * The label for an attribute term filter.
  *
  * @param {Object} props Incoming props for the component.
  * @param {string} props.name The name for the label.
- * @param {number} props.count The count of products this status is attached to.
+ * @param {number} props.count The count of products this attribute is attached to.
  */
-const FilterElementLabel = ( { name, count } ) => {
+const AttributeFilterLabel = ( { name, count } ) => {
 	return (
 		<>
 			{ name }
@@ -35,12 +30,12 @@ const FilterElementLabel = ( { name, count } ) => {
 					) }
 					wrapperElement="span"
 					wrapperProps={ {
-						className: 'wc-filter-element-label-list-count',
+						className: 'wc-block-attribute-filter-list-count',
 					} }
 				/>
 			) }
 		</>
 	);
 };
 
-export default FilterElementLabel;
+export default AttributeFilterLabel;

assets/js/blocks/attribute-filter/preview.js

@@ -1,7 +1,7 @@
 /**
- * External dependencies
+ * Internal dependencies
  */
-import Label from '@woocommerce/base-components/filter-element-label';
+import Label from './label';
 
 export const previewOptions = [
 	{

assets/js/blocks/attribute-filter/style.scss

@@ -1,6 +1,15 @@
 .wc-block-attribute-filter {
 	margin-bottom: $gap-large;
 
+	.wc-block-attribute-filter-list-count {
+		&::before {
+			content: " (";
+		}
+		&::after {
+			content: ")";
+		}
+	}
+
 	.wc-block-attribute-filter-list {
 		margin: 0;
 
@@ -16,6 +25,10 @@
 				display: inline-block;
 			}
 		}
+
+		.wc-block-attribute-filter-list-count {
+			float: right;
+		}
 	}
 
 	.is-single .wc-block-attribute-filter-list-count,

assets/js/blocks/products/all-products/block.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { ProductListContainer } from '@woocommerce/base-components/product-list';
 import { InnerBlockLayoutContextProvider } from '@woocommerce/shared-context';
 import { gridBlockPreview } from '@woocommerce/resource-previews';
+import { getSetting } from '@woocommerce/settings';
 
 /**
  * The All Products Block.
@@ -25,6 +26,8 @@ class Block extends Component {
 			return gridBlockPreview;
 		}
 
+		const hideOutOfStockItems = getSetting( 'hideOutOfStockItems', false );
+
 		/**
 		 * Todo classes
 		 *
@@ -39,6 +42,7 @@ class Block extends Component {
 				<ProductListContainer
 					attributes={ attributes }
 					urlParameterSuffix={ urlParameterSuffix }
+					hideOutOfStockItems={ hideOutOfStockItems }
 				/>
 			</InnerBlockLayoutContextProvider>
 		);