fix: add error message for invalid query (#20090)

Co-authored-by: Gilberto Alvarado <[email protected]>

Author: kpawelczak

Diff for: projects/assets/src/translations/en/common.json

@@ -90,7 +90,8 @@
       "exactMatch": "{{ term }}",
       "empty": "Ask us anything"
     },
-    "closeSearchPanel": "Close"
+    "closeSearchPanel": "Close",
+    "queryError": "Your search query is incorrectly formatted. Please remove special characters like \":\" and try again."
   },
   "sorting": {
     "date": "Date",

Diff for: projects/core/src/product/store/effects/product-search.effect.spec.ts

@@ -12,6 +12,7 @@ import { SearchConfig } from '../../model/search-config';
 import { ProductActions } from '../actions/index';
 import * as fromEffects from './product-search.effect';
 import createSpy = jasmine.createSpy;
+import { GlobalMessageService } from '@spartacus/core';
 
 const searchResult: ProductSearchPage = { products: [] };
 const suggestionList: Occ.SuggestionList = { suggestions: [] };
@@ -21,6 +22,9 @@ class MockProductSearchConnector {
   getSuggestions = createSpy().and.returnValue(of(suggestionList.suggestions));
 }
 
+class MockGlobalMessageService implements Partial<GlobalMessageService> {
+  add = createSpy();
+}
 describe('ProductSearch Effects', () => {
   let actions$: Observable<Action>;
   let effects: fromEffects.ProductsSearchEffects;
@@ -29,6 +33,7 @@ describe('ProductSearch Effects', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       providers: [
+        { provide: GlobalMessageService, useClass: MockGlobalMessageService },
         {
           provide: ProductSearchConnector,
           useClass: MockProductSearchConnector,

Diff for: projects/core/src/product/store/effects/product-search.effect.ts

@@ -12,10 +12,16 @@ import { LoggerService } from '../../../logger';
 import { tryNormalizeHttpError } from '../../../util/try-normalize-http-error';
 import { ProductSearchConnector } from '../../connectors/search/product-search.connector';
 import { ProductActions } from '../actions/index';
+import { HttpErrorModel } from '../../../model';
+import {
+  GlobalMessageService,
+  GlobalMessageType,
+} from '../../../global-message';
 
 @Injectable()
 export class ProductsSearchEffects {
   protected logger = inject(LoggerService);
+  protected globalMessageService = inject(GlobalMessageService);
 
   searchProducts$: Observable<
     ProductActions.SearchProductsSuccess | ProductActions.SearchProductsFail
@@ -35,14 +41,27 @@ export class ProductsSearchEffects {
                     action.auxiliary
                   );
                 }),
-                catchError((error) =>
-                  of(
+                catchError((error) => {
+                  const normalizedError: HttpErrorModel = tryNormalizeHttpError(
+                    error,
+                    this.logger
+                  );
+                  if (
+                    normalizedError?.details?.[0].type ===
+                    'ArrayIndexOutOfBoundsError'
+                  ) {
+                    this.globalMessageService.add(
+                      { key: 'searchBox.queryError' },
+                      GlobalMessageType.MSG_TYPE_ERROR
+                    );
+                  }
+                  return of(
                     new ProductActions.SearchProductsFail(
-                      tryNormalizeHttpError(error, this.logger),
+                      normalizedError,
                       action.auxiliary
                     )
-                  )
-                )
+                  );
+                })
               );
           })
         )