diff --git a/packages/x-components/src/x-modules/query-suggestions/config.types.ts b/packages/x-components/src/x-modules/query-suggestions/config.types.ts index 979278f7f5..6a246574d0 100644 --- a/packages/x-components/src/x-modules/query-suggestions/config.types.ts +++ b/packages/x-components/src/x-modules/query-suggestions/config.types.ts @@ -33,4 +33,26 @@ export interface QuerySuggestionsConfig { * ``` */ hideIfEqualsQuery: boolean; + /** + * Hides the query suggestions if it has been already searched during the session. + * + * @example + * When set to true: + * ``` + * query = 'shorts'; + * query = 'trousers'; + * suggestions = ['t-shirt', 'shorts', 'dress'] + * // Suggests ['t-shirt', 'dress'] + * ``` + * + * @example + * When set to false: + * ``` + * query = 'shorts'; + * query = 'trousers'; + * suggestions = ['t-shirt', 'shorts', 'dress'] + * // Suggests ['t-shirt', 'shorts', 'dress'] + * ``` + */ + hideSessionQueries: boolean; } diff --git a/packages/x-components/src/x-modules/query-suggestions/store/__tests__/getter.spec.ts b/packages/x-components/src/x-modules/query-suggestions/store/__tests__/getter.spec.ts index 3954b7869c..2471a9f641 100644 --- a/packages/x-components/src/x-modules/query-suggestions/store/__tests__/getter.spec.ts +++ b/packages/x-components/src/x-modules/query-suggestions/store/__tests__/getter.spec.ts @@ -6,6 +6,7 @@ import { normalizeString } from '../../../../utils'; import { getQuerySuggestionsStub } from '../../../../__stubs__/query-suggestions-stubs.factory'; import { querySuggestionsXStoreModule } from '../module'; import { QuerySuggestionsState } from '../types'; +import { createHistoryQuery } from '../../../../__stubs__/history-queries-stubs.factory'; import { resetQuerySuggestionsStateWith } from './utils'; describe('testing query suggestions module getters', () => { @@ -113,5 +114,42 @@ describe('testing query suggestions module getters', () => { expect(gettersQuerySuggestions).toHaveLength(suggestionsStub.length); } ); + + it('should hide queries that are equal to any history query and hideSessionQueries is true', () => { + const querySearch = 'dress'; + const suggestionsStub = getQuerySuggestionsStub(querySearch); + const historyQueriesStub = createHistoryQuery({ query: 'dress suggestion 1' }); + resetQuerySuggestionsStateWith(store, { + config: { hideSessionQueries: true }, + suggestions: suggestionsStub, + searchedQueries: [historyQueriesStub], + query: querySearch + }); + + const gettersQuerySuggestions: Suggestion[] = store.getters[getters.querySuggestions]; + + const queriesSuggested = gettersQuerySuggestions.map( + (suggestion: Suggestion) => suggestion.query + ); + + expect(gettersQuerySuggestions).toHaveLength(suggestionsStub.length - 1); + expect(queriesSuggested).toEqual(['dress suggestion 0', 'dress suggestion 2']); + }); + + it('should show all suggestions when hideSessionQueries is false', () => { + const querySearch = 'dress'; + const suggestionsStub = getQuerySuggestionsStub(querySearch); + const historyQueriesStub = createHistoryQuery({ query: 'dress suggestion 1' }); + resetQuerySuggestionsStateWith(store, { + config: { hideSessionQueries: false }, + suggestions: suggestionsStub, + searchedQueries: [historyQueriesStub], + query: querySearch + }); + + const gettersQuerySuggestions: Suggestion[] = store.getters[getters.querySuggestions]; + + expect(gettersQuerySuggestions).toHaveLength(suggestionsStub.length); + }); }); }); diff --git a/packages/x-components/src/x-modules/query-suggestions/store/getters/query-suggestions.getter.ts b/packages/x-components/src/x-modules/query-suggestions/store/getters/query-suggestions.getter.ts index 7bfdc64af1..b88d7ca9ac 100644 --- a/packages/x-components/src/x-modules/query-suggestions/store/getters/query-suggestions.getter.ts +++ b/packages/x-components/src/x-modules/query-suggestions/store/getters/query-suggestions.getter.ts @@ -1,4 +1,4 @@ -import { Suggestion } from '@empathyco/x-types'; +import { HistoryQuery, Suggestion } from '@empathyco/x-types'; import { GettersClass } from '../../../../store/getters.types'; import { normalizeString } from '../../../../utils/normalize'; import { QuerySuggestionsState, QuerySuggestionsXStoreModule } from '../types'; @@ -16,11 +16,24 @@ export class QuerySuggestionsGetter implements GettersClass historyQuery.query); if (!query || !config.hideIfEqualsQuery) { - return suggestions; + return config.hideSessionQueries + ? suggestions.filter(({ query }) => !queriesToFilter.includes(query)) + : suggestions; } - return suggestions.filter(this.isInQuerySuggestions(normalizeString(query))); + const filteredSuggestions = suggestions.filter( + this.isInQuerySuggestions(normalizeString(query)) + ); + return config.hideSessionQueries + ? filteredSuggestions.filter(({ query }) => !queriesToFilter.includes(query)) + : filteredSuggestions; } /** diff --git a/packages/x-components/src/x-modules/query-suggestions/store/module.ts b/packages/x-components/src/x-modules/query-suggestions/store/module.ts index 91bce9cfdc..a4e353aafd 100644 --- a/packages/x-components/src/x-modules/query-suggestions/store/module.ts +++ b/packages/x-components/src/x-modules/query-suggestions/store/module.ts @@ -21,11 +21,13 @@ export const querySuggestionsXStoreModule: QuerySuggestionsXStoreModule = { state: () => ({ query: '', suggestions: [], + searchedQueries: [], status: 'initial', config: { debounceInMs: 200, maxItemsToRequest: 10, - hideIfEqualsQuery: true + hideIfEqualsQuery: true, + hideSessionQueries: true }, params: {} }), @@ -39,6 +41,9 @@ export const querySuggestionsXStoreModule: QuerySuggestionsXStoreModule = { setSuggestions(state, suggestions) { state.suggestions = suggestions; }, + setSearchedQueries(state, searchedQueries) { + state.searchedQueries = searchedQueries; + }, setStatus, setParams(state, params) { state.params = params; diff --git a/packages/x-components/src/x-modules/query-suggestions/store/types.ts b/packages/x-components/src/x-modules/query-suggestions/store/types.ts index 3e5de1182e..60a09c3af2 100644 --- a/packages/x-components/src/x-modules/query-suggestions/store/types.ts +++ b/packages/x-components/src/x-modules/query-suggestions/store/types.ts @@ -1,4 +1,4 @@ -import { QuerySuggestionsRequest, Suggestion } from '@empathyco/x-types'; +import { HistoryQuery, QuerySuggestionsRequest, Suggestion } from '@empathyco/x-types'; import { Dictionary } from '@empathyco/x-utils'; import { XActionContext, XStoreModule } from '../../../store'; import { QueryMutations, QueryState } from '../../../store/utils/query.utils'; @@ -15,6 +15,8 @@ import { ConfigMutations } from '../../../store/utils/config-store.utils'; export interface QuerySuggestionsState extends StatusState, QueryState { /** The suggestions for the query of the state. */ suggestions: Suggestion[]; + /** The list of the searched queries, related to the `query` property of the state. */ + searchedQueries: HistoryQuery[]; /** The configuration of the query suggestions module. */ config: QuerySuggestionsConfig; /** The extra params property of the state. */ @@ -59,6 +61,12 @@ export interface QuerySuggestionsMutations * @param params - The new extra params. */ setParams(params: Dictionary): void; + /** + * Sets the searched queries of the module. + * + * @param searchedQueries - The searched queries to save to the state. + */ + setSearchedQueries(searchedQueries: HistoryQuery[]): void; } /** diff --git a/packages/x-components/src/x-modules/query-suggestions/wiring.ts b/packages/x-components/src/x-modules/query-suggestions/wiring.ts index aad2e125ff..08025b4750 100644 --- a/packages/x-components/src/x-modules/query-suggestions/wiring.ts +++ b/packages/x-components/src/x-modules/query-suggestions/wiring.ts @@ -69,6 +69,13 @@ export const setQuerySuggestionsExtraParamsFromPreview = wireCommit( */ export const setQuerySuggestionsExtraParams = wireCommit('setParams'); +/** + * Sets the query suggestions state `searchedQueries` with the list of history queries. + * + * @public + */ +export const setSearchedQueriesInSuggestions = wireCommit('setSearchedQueries'); + /** * Clears the query-suggestions module query. * @@ -145,5 +152,8 @@ export const querySuggestionsWiring = createWiring({ }, QueryPreviewUnselected: { setQuerySuggestionsExtraParams + }, + SessionHistoryQueriesChanged: { + setSearchedQueriesInSuggestions } });