diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue index 194515d13d..46c5826959 100644 --- a/packages/x-components/src/views/home/Home.vue +++ b/packages/x-components/src/views/home/Home.vue @@ -369,7 +369,7 @@
{{ query }} - +
import Vue from 'vue'; import { Component } from 'vue-property-decorator'; - import { SemanticQuery as SemanticQueryModel } from '@empathyco/x-types'; + import { SemanticQuery as SemanticQueryModel, TaggingRequest } from '@empathyco/x-types'; import { xComponentMixin } from '../../../components/x-component.mixin'; import { semanticQueriesXModule } from '../x-module'; import { NoElement } from '../../../components/no-element'; - import { State } from '../../../components'; + import { State, XOn } from '../../../components'; import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'; - import SemanticQuery from './semantic-query.vue'; /** * Retrieves a list of semantic queries from the state and exposes them in the slots. @@ -59,7 +58,7 @@ @Component({ inheritAttrs: false, mixins: [xComponentMixin(semanticQueriesXModule)], - components: { BaseSuggestions, SemanticQuery, NoElement } + components: { BaseSuggestions, NoElement } }) export default class SemanticQueries extends Vue { /** @@ -88,6 +87,25 @@ findSemanticQuery(query: string): SemanticQueryModel | undefined { return this.suggestions.find(suggestion => suggestion.query === query); } + + /** + * The queryTagging from the search module state. + */ + @State('search', 'queryTagging') + public queryTagging!: TaggingRequest; + + /** + * Emits `QueryTaggingWithNoResults` event when the semantic queries response changed. + * + * @param semanticQueries - The new semantic queries list. + */ + @XOn('SemanticQueriesResponseChanged') + emitQueryTaggingFromSemantics(semanticQueries: SemanticQueryModel[]): void { + if (this.queryTagging.params.totalHits === '0') { + const totalHits = semanticQueries.length > 0 ? '-1' : '0'; + this.$x.emit('QueryTaggingWithNoResults', { queryTagging: this.queryTagging, totalHits }); + } + } } diff --git a/packages/x-components/src/x-modules/semantic-queries/events.types.ts b/packages/x-components/src/x-modules/semantic-queries/events.types.ts index 85d078a9e6..62ebd14d4a 100644 --- a/packages/x-components/src/x-modules/semantic-queries/events.types.ts +++ b/packages/x-components/src/x-modules/semantic-queries/events.types.ts @@ -13,6 +13,12 @@ export interface SemanticQueriesXEvents { */ SemanticQueryRequestUpdated: SemanticQueriesRequest | null; + /** + * The response list of semantic queries has changed. + * Payload: The new {@link SemanticQuery | semantic query} list. + */ + SemanticQueriesResponseChanged: SemanticQuery[]; + /** * The user has selected a semantic query. * Payload: The {@link SemanticQuery | semantic query} selected. diff --git a/packages/x-components/src/x-modules/semantic-queries/store/emitters.ts b/packages/x-components/src/x-modules/semantic-queries/store/emitters.ts index b06da63d18..018d3099ac 100644 --- a/packages/x-components/src/x-modules/semantic-queries/store/emitters.ts +++ b/packages/x-components/src/x-modules/semantic-queries/store/emitters.ts @@ -7,5 +7,6 @@ import { semanticQueriesXStoreModule } from './module'; * @internal */ export const semanticQueriesEmitters = createStoreEmitters(semanticQueriesXStoreModule, { - SemanticQueryRequestUpdated: (_, getters) => getters.request + SemanticQueryRequestUpdated: (_, getters) => getters.request, + SemanticQueriesResponseChanged: state => state.semanticQueries }); diff --git a/packages/x-components/src/x-modules/tagging/store/actions/index.ts b/packages/x-components/src/x-modules/tagging/store/actions/index.ts index 1a4bcf841a..fede61c36c 100644 --- a/packages/x-components/src/x-modules/tagging/store/actions/index.ts +++ b/packages/x-components/src/x-modules/tagging/store/actions/index.ts @@ -1 +1,3 @@ export * from './track.action'; +export * from './update-query-tagging-info.action'; +export * from './track-query-with-results.action'; diff --git a/packages/x-components/src/x-modules/tagging/store/actions/track-query-with-results.action.ts b/packages/x-components/src/x-modules/tagging/store/actions/track-query-with-results.action.ts new file mode 100644 index 0000000000..5f13bd03c5 --- /dev/null +++ b/packages/x-components/src/x-modules/tagging/store/actions/track-query-with-results.action.ts @@ -0,0 +1,19 @@ +import { TaggingXStoreModule } from '../types'; + +/** + * Default implementation for the {@link TaggingActions.trackQueryWithResults}. + * + * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions, + * provided by Vuex. + * @param taggingInfo - The information of the event to track. + * + * @public + */ +export const trackQueryWithResults: TaggingXStoreModule['actions']['trackQueryWithResults'] = ( + { state, dispatch }, + taggingInfo +) => { + if (state.queryTaggingInfo!.params.totalHits > 0 || !state.hasSemantics) { + dispatch('track', taggingInfo); + } +}; diff --git a/packages/x-components/src/x-modules/tagging/store/actions/update-query-tagging-info.action.ts b/packages/x-components/src/x-modules/tagging/store/actions/update-query-tagging-info.action.ts new file mode 100644 index 0000000000..ea1590785e --- /dev/null +++ b/packages/x-components/src/x-modules/tagging/store/actions/update-query-tagging-info.action.ts @@ -0,0 +1,18 @@ +import { TaggingXStoreModule } from '../types'; + +/** + * Default implementation for the {@link TaggingActions.updateQueryTaggingInfo}. + * + * @param context - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions, + * provided by Vuex. + * @param tagging - The information of the event to track. + * + * @public + */ +export const updateQueryTaggingInfo: TaggingXStoreModule['actions']['updateQueryTaggingInfo'] = ( + { commit, state, dispatch }, + tagging +) => { + commit('updateTotalHits', tagging.totalHits); + dispatch('track', state.queryTaggingInfo!); +}; diff --git a/packages/x-components/src/x-modules/tagging/store/module.ts b/packages/x-components/src/x-modules/tagging/store/module.ts index 9b199c9dfa..c6356f7bbc 100644 --- a/packages/x-components/src/x-modules/tagging/store/module.ts +++ b/packages/x-components/src/x-modules/tagging/store/module.ts @@ -2,6 +2,8 @@ import { TaggingRequest } from '@empathyco/x-types'; import { mergeConfig, setConfig } from '../../../store/utils/config-store.utils'; import { track } from './actions/track.action'; import { TaggingXStoreModule } from './types'; +import { updateQueryTaggingInfo } from './actions/update-query-tagging-info.action'; +import { trackQueryWithResults } from './actions/index'; /** * {@link XStoreModule} For the tagging module. @@ -17,6 +19,7 @@ export const taggingXStoreModule: TaggingXStoreModule = { clickedResultStorageTTLMs: null }, consent: null, + hasSemantics: false, queryTaggingInfo: null }), getters: {}, @@ -27,10 +30,20 @@ export const taggingXStoreModule: TaggingXStoreModule = { setQueryTaggingInfo(state, queryTaggingInfo: TaggingRequest) { state.queryTaggingInfo = queryTaggingInfo; }, + updateTotalHits(state, totalHits: string) { + state.queryTaggingInfo!.params.totalHits = totalHits; + }, + setHasSemantics(state, module) { + if (module === 'semanticQueries') { + state.hasSemantics = true; + } + }, setConfig, mergeConfig }, actions: { - track + track, + updateQueryTaggingInfo, + trackQueryWithResults } }; diff --git a/packages/x-components/src/x-modules/tagging/store/types.ts b/packages/x-components/src/x-modules/tagging/store/types.ts index 909fe8d928..aefbb9088f 100644 --- a/packages/x-components/src/x-modules/tagging/store/types.ts +++ b/packages/x-components/src/x-modules/tagging/store/types.ts @@ -2,6 +2,7 @@ import { TaggingRequest } from '@empathyco/x-types'; import { XStoreModule } from '../../../store'; import { TaggingConfig } from '../config.types'; import { ConfigMutations } from '../../../store/utils/config-store.utils'; +import { XModuleName } from '../../x-modules.types'; /** * Tagging store state. * @@ -12,6 +13,10 @@ export interface TaggingState { * The current consent for tracking. */ consent: boolean | null; + /** + * Value to know if Semantics module is register. + */ + hasSemantics: boolean; /** * Configuration for the `Tagging` module. */ @@ -47,6 +52,18 @@ export interface TaggingMutations extends ConfigMutations { * @param queryTaggingInfo - The new {@link TaggingState.queryTaggingInfo}. */ setQueryTaggingInfo(queryTaggingInfo: TaggingRequest): void; + /** + * Sets the totalHits property. + * + * @param totalHits - The new value of totalHits in {@link TaggingState.queryTaggingInfo}. + */ + updateTotalHits(totalHits: string): void; + /** + * Sets the hasSemantics property. + * + * @param module - The name of the register module. + */ + setHasSemantics(module: XModuleName): void; } /** @@ -61,6 +78,18 @@ export interface TaggingActions { * @param tagging - The information of the event to track. */ track(tagging: TaggingRequest | TaggingRequest[]): void; + /** + * Filters queryTagging and tracks user interaction. + * + * @param tagging - The information of the event to track. + */ + trackQueryWithResults(tagging: TaggingRequest | TaggingRequest[]): void; + /** + * Updates query tagging information. + * + * @param tagging - The information of the event to update and set. + */ + updateQueryTaggingInfo(tagging: SemanticsQueryTaggingPayload): void; } /** @@ -74,3 +103,19 @@ export type TaggingXStoreModule = XStoreModule< TaggingMutations, TaggingActions >; + +/** + * Payload to use in the `updateQueryTaggingInfo` action. + * + * @public + */ +export interface SemanticsQueryTaggingPayload { + /** + * The query tagging info. + */ + queryTagging: TaggingRequest; + /** + * The param to modify. + */ + totalHits: string; +} diff --git a/packages/x-components/src/x-modules/tagging/wiring.ts b/packages/x-components/src/x-modules/tagging/wiring.ts index 86674bf6f6..376bdc2f76 100644 --- a/packages/x-components/src/x-modules/tagging/wiring.ts +++ b/packages/x-components/src/x-modules/tagging/wiring.ts @@ -92,6 +92,13 @@ const clearSessionWire = filter( */ export const setConsent = wireCommit('setConsent'); +/** + * Sets the tagging state `hasSemantics`. + * + * @public + */ +export const setHasSemantics = wireCommit('setHasSemantics'); + /** * Sets the tagging config state. * @@ -104,7 +111,7 @@ export const setTaggingConfig = wireCommit('mergeConfig'); * * @public */ -export const trackQueryWire = wireDispatch('track'); +export const trackQueryWire = wireDispatch('trackQueryWithResults'); /** * Sets the tagging state of the query tagging info using a debounce which ends if the user @@ -127,6 +134,16 @@ export const setQueryTaggingInfo = moduleDebounce( } ); +/** + * Updates the totalHits param and tracks the new tagging of the query. + * + * @public + */ +export const setQueryTaggingWithNoResults = moduleDebounce( + wireDispatch('updateQueryTaggingInfo'), + ({ state }) => state.config.queryTaggingDebounceMs +); + /** * Sets the tagging state of the query tagging info using. * @@ -280,5 +297,11 @@ export const taggingWiring = createWiring({ UserClickedADisplayResult: { trackDisplayClickedWire, setQueryTaggingFromQueryPreview + }, + QueryTaggingWithNoResults: { + setQueryTaggingWithNoResults + }, + ModuleRegistered: { + setHasSemantics } });