fix: CXSPA-8494 check for keyword redirect before loading default results (#20072)

Co-authored-by: Artur Lasocha <[email protected]>
Co-authored-by: Konrad Dzikowski <[email protected]>
Co-authored-by: lasoh <[email protected]>

Author: 4 people

Diff for: projects/core/src/product/facade/searchbox.service.ts

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Injectable } from '@angular/core';
-import { select } from '@ngrx/store';
-import { Observable } from 'rxjs';
+import { inject, Injectable } from '@angular/core';
+import { select, ActionsSubject } from '@ngrx/store';
+import { Observable, filter, take } from 'rxjs';
 import { ProductSearchPage, Suggestion } from '../../model/index';
 import { SearchConfig } from '../model/index';
 import { ProductActions } from '../store/actions/index';
@@ -17,6 +17,8 @@ import { ProductSearchService } from './product-search.service';
   providedIn: 'root',
 })
 export class SearchboxService extends ProductSearchService {
+  private actionsSubject = inject(ActionsSubject);
+
   /**
    * dispatch the search for the search box
    */
@@ -32,6 +34,24 @@ export class SearchboxService extends ProductSearchService {
     );
   }
 
+  /**
+   * Performs search and returns an Observable that emits when the search is completed
+   */
+  searchWithCompletion(
+    query: string,
+    searchConfig?: SearchConfig
+  ): Observable<boolean> {
+    this.search(query, searchConfig);
+    return this.actionsSubject.pipe(
+      filter(
+        (action: any) =>
+          action.type === ProductActions.SEARCH_PRODUCTS_SUCCESS ||
+          action.type === ProductActions.SEARCH_PRODUCTS_FAIL
+      ),
+      take(1)
+    );
+  }
+
   getResults(): Observable<ProductSearchPage> {
     return this.store.pipe(select(ProductSelectors.getAuxSearchResults));
   }
@@ -59,4 +79,22 @@ export class SearchboxService extends ProductSearchService {
       })
     );
   }
+
+  /**
+   * Performs suggestions search and returns an Observable that emits when the operation is completed
+   */
+  searchSuggestionsWithCompletion(
+    query: string,
+    searchConfig?: SearchConfig
+  ): Observable<boolean> {
+    this.searchSuggestions(query, searchConfig);
+    return this.actionsSubject.pipe(
+      filter(
+        (action: any) =>
+          action.type === ProductActions.GET_PRODUCT_SUGGESTIONS_SUCCESS ||
+          action.type === ProductActions.GET_PRODUCT_SUGGESTIONS_FAIL
+      ),
+      take(1)
+    );
+  }
 }

Diff for: projects/storefrontlib/cms-components/navigation/search-box/search-box-component.service.spec.ts

@@ -127,6 +127,9 @@ describe('SearchBoxComponentService', () => {
     spyOn(service, 'launchSearchPage').and.callThrough();
 
     service.launchSearchPage(mockQueryString);
+
+    service.searchCompleted.next(true);
+
     expect(service.launchSearchPage).toHaveBeenCalled();
     expect(MockRoutingService.go).toHaveBeenCalledWith({
       cxRoute: 'search',

Diff for: projects/storefrontlib/cms-components/navigation/search-box/search-box-component.service.ts

@@ -13,9 +13,10 @@ import {
   SearchboxService,
   TranslationService,
   WindowRef,
+  ProductActions,
 } from '@spartacus/core';
-import { combineLatest, Observable, of, ReplaySubject } from 'rxjs';
-import { map, switchMap, tap } from 'rxjs/operators';
+import { combineLatest, Observable, of, ReplaySubject, Subject } from 'rxjs';
+import { map, switchMap, tap, filter, take } from 'rxjs/operators';
 import {
   SearchBoxProductSelectedEvent,
   SearchBoxSuggestionSelectedEvent,
@@ -30,10 +31,12 @@ const HAS_SEARCH_RESULT_CLASS = 'has-searchbox-results';
 export class SearchBoxComponentService {
   chosenWord = new ReplaySubject<string>();
   sharedEvent = new ReplaySubject<KeyboardEvent>();
+  searchCompleted = new Subject<boolean>();
 
   protected enableRecentSearches: boolean = false;
   protected enableTrendingSearches: boolean = false;
-
+  private currentQueryLength: number = 0;
+  private hasKeywordRedirect: boolean = false;
   constructor(
     public searchService: SearchboxService,
     protected routingService: RoutingService,
@@ -48,6 +51,10 @@ export class SearchBoxComponentService {
    * products or suggestions.
    */
   search(query: string, config: SearchBoxConfig): void {
+    this.hasKeywordRedirect = false;
+    this.currentQueryLength = query ? query.length : 0;
+    this.searchCompleted.next(false);
+
     if (
       !this.enableRecentSearches &&
       !this.enableTrendingSearches &&
@@ -63,16 +70,57 @@ export class SearchBoxComponentService {
       return;
     }
 
+    let productsComplete = !config.displayProducts;
+    let suggestionsComplete = !config.displaySuggestions;
+
     if (config.displayProducts) {
-      this.searchService.search(query, {
-        pageSize: config.maxProducts,
-      });
+      this.searchService
+        .searchWithCompletion(query, {
+          pageSize: config.maxProducts,
+        })
+        .subscribe((result: any) => {
+          if (
+            result?.type === ProductActions.SEARCH_PRODUCTS_SUCCESS &&
+            result?.payload?.keywordRedirectUrl
+          ) {
+            this.hasKeywordRedirect = true;
+          }
+          productsComplete = true;
+          this.checkSearchCompletion(productsComplete, suggestionsComplete);
+        });
     }
 
     if (config.displaySuggestions) {
-      this.searchService.searchSuggestions(query, {
-        pageSize: config.maxSuggestions,
-      });
+      this.searchService
+        .searchSuggestionsWithCompletion(query, {
+          pageSize: config.maxSuggestions,
+        })
+        .subscribe((result: any) => {
+          if (
+            result?.type === ProductActions.GET_PRODUCT_SUGGESTIONS_SUCCESS &&
+            result?.payload?.keywordRedirectUrl
+          ) {
+            this.hasKeywordRedirect = true;
+          }
+          suggestionsComplete = true;
+          this.checkSearchCompletion(productsComplete, suggestionsComplete);
+        });
+    }
+  }
+
+  /**
+   * Check if search operations are complete based on actual completion flags
+   */
+  private checkSearchCompletion(
+    productsComplete: boolean,
+    suggestionsComplete: boolean
+  ): void {
+    if (
+      productsComplete &&
+      suggestionsComplete &&
+      this.currentQueryLength > 0
+    ) {
+      this.searchCompleted.next(true);
     }
   }
 
@@ -107,6 +155,10 @@ export class SearchBoxComponentService {
   clearResults() {
     this.searchService.clearResults();
     this.toggleBodyClass(HAS_SEARCH_RESULT_CLASS, false);
+
+    // Reset search completion state
+    this.hasKeywordRedirect = false;
+    this.currentQueryLength = 0;
   }
 
   hasBodyClass(className: string): boolean {
@@ -261,12 +313,24 @@ export class SearchBoxComponentService {
 
   /**
    * Navigates to the search result page with a given query
+   * after waiting for all search operations to complete
    */
   launchSearchPage(query: string): void {
-    this.routingService.go({
-      cxRoute: 'search',
-      params: { query },
-    });
+    // Reset the completed state before starting new search
+    this.searchCompleted.next(false);
+    this.searchCompleted
+      .pipe(
+        filter((complete) => complete), // Only proceed when true
+        take(1) // Take only the first completion
+      )
+      .subscribe(() => {
+        if (!this.hasKeywordRedirect) {
+          this.routingService.go({
+            cxRoute: 'search',
+            params: { query },
+          });
+        }
+      });
   }
 
   private fetchTranslation(