Add Did you Mean in Instant Result

10up · felipeelia · Aug 8, 2023 · Jul 20, 2023 · Jul 28, 2023 · Jul 28, 2023
commit 0d7727c3a154be1e0bf31f5b7fd8c65c7edf0ae8
diff --git a/assets/js/api-search/index.js b/assets/js/api-search/index.js
@@ -107,6 +107,7 @@ export const ApiSearchProvider = ({
 		searchResults: [],
 		searchedTerm: '',
 		totalResults: 0,
+		suggestedTerms: [],
 	});
 
 	/**
@@ -119,7 +120,7 @@ export const ApiSearchProvider = ({
 	stateRef.current = state;
 
 	/**
-	 * Clear facet contraints.
+	 * Clear facet constraints.
 	 *
 	 * @returns {void}
 	 */
@@ -128,7 +129,7 @@ export const ApiSearchProvider = ({
 	}, []);
 
 	/**
-	 * Clear search resu;ts.
+	 * Clear search results.
 	 *
 	 * @returns {void}
 	 */
@@ -325,8 +326,16 @@ export const ApiSearchProvider = ({
 	/**
 	 * Provide state to context.
 	 */
-	const { aggregations, args, isLoading, isOn, searchResults, searchTerm, totalResults } =
-		stateRef.current;
+	const {
+		aggregations,
+		args,
+		isLoading,
+		isOn,
+		searchResults,
+		searchTerm,
+		totalResults,
+		suggestedTerms,
+	} = stateRef.current;
 
 	// eslint-disable-next-line react/jsx-no-constructed-context-values
 	const contextValue = {
@@ -347,6 +356,7 @@ export const ApiSearchProvider = ({
 		previousPage,
 		totalResults,
 		turnOff,
+		suggestedTerms,
 	};
 
 	return <Context.Provider value={contextValue}>{children}</Context.Provider>;

diff --git a/assets/js/api-search/src/reducer.js b/assets/js/api-search/src/reducer.js
@@ -56,6 +56,7 @@ export default (state, action) => {
 			const {
 				hits: { hits, total },
 				aggregations,
+				suggest,
 			} = action.response;
 
 			/**
@@ -67,6 +68,7 @@ export default (state, action) => {
 			newState.searchResults = hits;
 			newState.searchTerm = newState.args.search;
 			newState.totalResults = totalNumber;
+			newState.suggestedTerms = suggest?.ep_suggestion?.[0]?.options || [];
 
 			break;
 		}

diff --git a/assets/js/instant-results/components/layout/results.js b/assets/js/instant-results/components/layout/results.js
@@ -11,6 +11,7 @@ import { useApiSearch } from '../../../api-search';
 import Pagination from '../results/pagination';
 import Result from '../results/result';
 import Sort from '../tools/sort';
+import DidYouMean from '../results/didYouMean';
 
 /**
  * Search results component.
@@ -75,7 +76,7 @@ export default () => {
 
 				<Sort />
 			</header>
-
+			<DidYouMean />
 			{searchResults.map((hit) => (
 				<Result key={hit._id} hit={hit} />
 			))}

diff --git a/assets/js/instant-results/components/results/didYouMean.js b/assets/js/instant-results/components/results/didYouMean.js
@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+import { WPElement } from '@wordpress/element';
+
+import { useApiSearch } from '../../../api-search';
+
+/**
+ * Did you mean component.
+ *
+ * @returns {WPElement} Component element.
+ */
+export default () => {
+	const { suggestedTerms, searchFor, totalResults } = useApiSearch();
+
+	const { isDidYouMean, searchBehavior } = window.epInstantResults;
+
+	const onClick = (term) => {
+		searchFor(term);
+	};
+
+	// Get other terms by excluding the first term from suggestedTerms
+	const otherTerms = suggestedTerms.slice(1);
+
+	return (
+		<>
+			{isDidYouMean && suggestedTerms && suggestedTerms?.[0]?.text && (
+				<div className="ep-spell-suggestion">
+					{__('Did you Mean: ', 'elasticpress')}
+					{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+					<a onClick={() => onClick(suggestedTerms?.[0]?.text)} href="#">
+						{suggestedTerms?.[0]?.text}
+					</a>
+				</div>
+			)}
+
+			{searchBehavior === 'list' && totalResults === 0 && otherTerms.length > 0 && (
+				<>
+					<p>{__('Other suggestions', 'elasticpress')}</p>
+					<ul>
+						{otherTerms.map((term) => (
+							<li key={term.text}>
+								{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+								<a href="#" onClick={() => onClick(term.text)}>
+									{term.text}
+								</a>
+							</li>
+						))}
+					</ul>
+				</>
+			)}
+		</>
+	);
+};
diff --git a/includes/classes/Feature/InstantResults/InstantResults.php b/includes/classes/Feature/InstantResults/InstantResults.php
@@ -301,6 +301,8 @@ public function enqueue_frontend_assets() {
 		 */
 		$api_endpoint = apply_filters( 'ep_instant_results_search_endpoint', "api/v1/search/posts/{$this->index}", $this->index );
 
+		$did_you_mean_settings = \ElasticPress\Features::factory()->get_registered_feature( 'did-you-mean' )->get_settings();
+
 		wp_localize_script(
 			'elasticpress-instant-results',
 			'epInstantResults',
@@ -318,6 +320,8 @@ public function enqueue_frontend_assets() {
 				'postTypeLabels' => $this->get_post_type_labels(),
 				'termCount'      => $this->settings['term_count'],
 				'requestIdBase'  => Utils\get_request_id_base(),
+				'isDidYouMean'   => $did_you_mean_settings['active'],
+				'searchBehavior' => $did_you_mean_settings['search_behavior'],
 			)
 		);
 	}
@@ -952,7 +956,7 @@ public function get_facets_for_admin() {
 	 */
 	public function get_args_schema() {
 		/**
-		 * The number of resutls per page for Instant Results.
+		 * The number of results per page for Instant Results.
 		 *
 		 * @since 4.5.0
 		 * @hook ep_instant_results_per_page