feat(commerce): commerce search box + query suggest (#3461)

* create search box controller

* simplify controller definition

* remove unnecessary mock

* apply review suggestions

* apply more review suggestions

* reset pagination before search

* group state tests

* Revert "reset pagination before search"

This reverts commit 4429385.

packages/headless/src/api/commerce/commerce-api-client.ts

@@ -10,6 +10,11 @@ import {
 } from './commerce-api-error-response';
 import {buildRequest, CommerceAPIRequest} from './common/request';
 import {CommerceSuccessResponse} from './common/response';
+import {
+  buildQuerySuggestRequest,
+  QuerySuggestRequest,
+} from './search/query-suggest/query-suggest-request';
+import {QuerySuggestSuccessResponse} from './search/query-suggest/query-suggest-response';
 import {CommerceSearchRequest} from './search/request';
 
 export interface AsyncThunkCommerceOptions<
@@ -59,7 +64,23 @@ export class CommerceAPIClient {
     });
   }
 
-  private async query(options: PlatformClientCallOptions) {
+  async querySuggest(
+    req: QuerySuggestRequest
+  ): Promise<CommerceAPIResponse<QuerySuggestSuccessResponse>> {
+    const requestOptions = buildQuerySuggestRequest(req);
+    return this.query<QuerySuggestSuccessResponse>({
+      ...requestOptions,
+      requestParams: {
+        ...requestOptions.requestParams,
+        query: req?.query,
+      },
+      ...this.options,
+    });
+  }
+
+  private async query<T = CommerceSuccessResponse>(
+    options: PlatformClientCallOptions
+  ) {
     const response = await PlatformClient.call(options);
 
     if (response instanceof Error) {
@@ -68,7 +89,7 @@ export class CommerceAPIClient {
 
     const body = await response.json();
     return response.ok
-      ? {success: body as CommerceSuccessResponse}
+      ? {success: body as T}
       : {error: body as CommerceAPIErrorStatusResponse};
   }
 }

packages/headless/src/api/commerce/common/request.ts

@@ -56,7 +56,7 @@ const prepareRequestParams = (req: CommerceAPIRequest) => {
 };
 
 export const baseRequest = (
-  req: CommerceAPIRequest,
+  req: BaseParam & TrackingIdParam,
   path: string
 ): Pick<
   PlatformClientCallOptions,

packages/headless/src/api/commerce/search/query-suggest/query-suggest-request.ts

@@ -0,0 +1,41 @@
+import {BaseParam} from '../../../platform-service-params';
+import {
+  ClientIdParam,
+  CurrencyParam,
+  LanguageParam,
+  QueryParam,
+  TrackingIdParam,
+  ContextParam,
+  CountryParam,
+} from '../../commerce-api-params';
+import {baseRequest} from '../../common/request';
+
+export type QuerySuggestRequest = BaseParam &
+  TrackingIdParam &
+  LanguageParam &
+  CountryParam &
+  CurrencyParam &
+  ClientIdParam &
+  ContextParam &
+  QueryParam;
+
+export const buildQuerySuggestRequest = (req: QuerySuggestRequest) => {
+  return {
+    ...baseRequest(req, 'search/querySuggest'),
+    requestParams: prepareRequestParams(req),
+  };
+};
+
+const prepareRequestParams = (req: QuerySuggestRequest) => {
+  const {trackingId, query, clientId, context, language, country, currency} =
+    req;
+  return {
+    trackingId,
+    query,
+    clientId,
+    context,
+    language,
+    country,
+    currency,
+  };
+};

packages/headless/src/api/commerce/search/query-suggest/query-suggest-response.ts

@@ -0,0 +1,39 @@
+import {
+  SearchAPIErrorWithExceptionInBody,
+  SearchAPIErrorWithStatusCode,
+} from '../../../search/search-api-error-response';
+
+/**
+ * A Coveo ML query suggestion.
+ */
+export interface QuerySuggestCompletion {
+  /**
+   * The original query expression.
+   */
+  expression: string;
+
+  /**
+   * The highlighted query completion suggestion.
+   */
+  highlighted: string;
+}
+
+/**
+ * A response from the Coveo ML query suggest service.
+ */
+export interface QuerySuggestSuccessResponse {
+  /**
+   * Contains an array of query suggestions.
+   */
+  completions: QuerySuggestCompletion[];
+
+  /**
+   * The query suggest response ID.
+   */
+  responseId: string;
+}
+
+export type QuerySuggest =
+  | QuerySuggestSuccessResponse
+  | SearchAPIErrorWithExceptionInBody
+  | SearchAPIErrorWithStatusCode;

packages/headless/src/commerce.index.ts

@@ -107,3 +107,11 @@ export {buildProductListingFacetGenerator} from './controllers/commerce/product-
 
 export type {Search} from './controllers/commerce/search/headless-search';
 export {buildSearch} from './controllers/commerce/search/headless-search';
+
+export {updateQuery} from './features/commerce/query/query-actions';
+
+export {buildSearchBox} from './controllers/commerce/search-box/headless-search-box';
+export type {
+  SearchBox,
+  SearchBoxState,
+} from './controllers/commerce/search-box/headless-search-box';

packages/headless/src/controllers/commerce/search-box/headless-search-box-options.ts

@@ -0,0 +1,23 @@
+import {Schema} from '@coveo/bueno';
+import {
+  searchBoxOptionDefinitions as coreSearchBoxOptionDefinitions,
+  SearchBoxOptions as CoreSearchBoxOptions,
+} from '../../core/search-box/headless-core-search-box-options';
+
+export type SearchBoxOptions = Pick<
+  CoreSearchBoxOptions,
+  'id' | 'highlightOptions' | 'clearFilters'
+>;
+
+type DefaultSearchBoxOptions = Pick<SearchBoxOptions, 'clearFilters'>;
+
+export const defaultSearchBoxOptions: Required<DefaultSearchBoxOptions> = {
+  clearFilters: true,
+};
+
+const {id, highlightOptions, clearFilters} = coreSearchBoxOptionDefinitions;
+export const searchBoxOptionDefinitions = {id, highlightOptions, clearFilters};
+
+export const searchBoxOptionsSchema = new Schema<Required<SearchBoxOptions>>(
+  searchBoxOptionDefinitions
+);