Product Search Results template: fix the preview when the Inherit Que…

…ry option is enabled (#7965)

* Product Search Results: fix the preview when the Inherit Query option is enabled

* create a component to make the code more readable

---------

Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>

assets/js/blocks/product-query/inspector-controls.tsx

@@ -8,6 +8,7 @@ import { useSelect } from '@wordpress/data';
 import { addFilter } from '@wordpress/hooks';
 import { ProductQueryFeedbackPrompt } from '@woocommerce/editor-components/feedback-prompt';
 import { EditorBlock } from '@woocommerce/types';
+import { usePrevious } from '@woocommerce/base-hooks';
 import {
 	FormTokenField,
 	ToggleControl,
@@ -33,6 +34,7 @@ import {
 } from './utils';
 import {
 	ALL_PRODUCT_QUERY_CONTROLS,
+	QUERY_DEFAULT_ATTRIBUTES,
 	QUERY_LOOP_ID,
 	STOCK_STATUS_OPTIONS,
 } from './constants';
@@ -88,6 +90,59 @@ function getStockStatusIdByLabel( statusLabel: FormTokenField.Value ) {
 	)?.[ 0 ];
 }
 
+export const WooInheritToggleControl = (
+	props: ProductQueryBlock & {
+		defaultWooQueryParams: Partial< ProductQueryArguments >;
+	}
+) => {
+	const queryObjectBeforeInheritEnabled = usePrevious(
+		props.attributes.query,
+		( value ) => {
+			return value.inherit === false;
+		}
+	);
+
+	return (
+		<ToggleControl
+			className="woo-inherit-query-toggle"
+			label={ __(
+				'Inherit query from template',
+				'woo-gutenberg-products-block'
+			) }
+			help={ __(
+				'Toggle to use the global query context that is set with the current template, such as variations of the product catalog or search. Disable to customize the filtering independently.',
+				'woo-gutenberg-products-block'
+			) }
+			checked={
+				isCustomInheritGlobalQueryImplementationEnabled
+					? props.attributes.query.__woocommerceInherit || false
+					: props.attributes.query.inherit || false
+			}
+			onChange={ ( inherit ) => {
+				if ( isCustomInheritGlobalQueryImplementationEnabled ) {
+					return setQueryAttribute( props, {
+						...QUERY_DEFAULT_ATTRIBUTES.query,
+						__woocommerceInherit: inherit,
+						// Restore the query object value before inherit was enabled.
+						...( inherit === false && {
+							...queryObjectBeforeInheritEnabled,
+						} ),
+					} );
+				}
+
+				setQueryAttribute( props, {
+					...props.defaultWooQueryParams,
+					inherit,
+					// Restore the query object value before inherit was enabled.
+					...( inherit === false && {
+						...queryObjectBeforeInheritEnabled,
+					} ),
+				} );
+			} }
+		/>
+	);
+};
+
 export const TOOLS_PANEL_CONTROLS = {
 	attributes: AttributesFilter,
 	onSale: ( props: ProductQueryBlock ) => {
@@ -149,41 +204,15 @@ export const TOOLS_PANEL_CONTROLS = {
 			</ToolsPanelItem>
 		);
 	},
-	wooInherit: ( props: ProductQueryBlock ) => {
-		return (
-			<ToggleControl
-				className="woo-inherit-query-toggle"
-				label={ __(
-					'Inherit query from template',
-					'woo-gutenberg-products-block'
-				) }
-				help={ __(
-					'Toggle to use the global query context that is set with the current template, such as variations of the product catalog or search. Disable to customize the filtering independently.',
-					'woo-gutenberg-products-block'
-				) }
-				checked={
-					isCustomInheritGlobalQueryImplementationEnabled
-						? props.attributes.query.__woocommerceInherit || false
-						: props.attributes.query.inherit || false
-				}
-				onChange={ ( inherit ) => {
-					if ( isCustomInheritGlobalQueryImplementationEnabled ) {
-						return setQueryAttribute( props, {
-							__woocommerceInherit: inherit,
-						} );
-					}
-					return setQueryAttribute( props, { inherit } );
-				} }
-			/>
-		);
-	},
+	wooInherit: WooInheritToggleControl,
 };
 
 const ProductQueryControls = ( props: ProductQueryBlock ) => {
 	const allowedControls = useAllowedControls( props.attributes );
 	const defaultWooQueryParams = useDefaultWooQueryParamsForVariation(
 		props.attributes.namespace
 	);
+
 	return (
 		<>
 			<InspectorControls>
@@ -203,7 +232,13 @@ const ProductQueryControls = ( props: ProductQueryBlock ) => {
 					{ Object.entries( TOOLS_PANEL_CONTROLS ).map(
 						( [ key, Control ] ) =>
 							allowedControls?.includes( key ) ? (
-								<Control { ...props } key={ key } />
+								<Control
+									{ ...props }
+									defaultWooQueryParams={
+										defaultWooQueryParams
+									}
+									key={ key }
+								/>
 							) : null
 					) }
 				</ToolsPanel>