feat: query preview components allow adding extra params to the reque…

…st (#1270) EMP-1554 --------- Co-authored-by: acondal <[email protected]> Co-authored-by: mariorey <[email protected]>
empathyco · Sep 15, 2023 · 84143a2 · 84143a2
1 parent ce1b2f9
commit 84143a2
Show file tree

Hide file tree

Showing 29 changed files with 894 additions and 249 deletions.
diff --git a/packages/x-components/src/plugins/x-emitters.ts b/packages/x-components/src/plugins/x-emitters.ts
@@ -31,9 +31,9 @@ export function registerStoreEmitters(
       selector(store.state.x[name], safeGettersProxy);
     const emit: (
       newValue: XEventPayload<typeof event>,
-      oldValue: XEventPayload<typeof event>
+      oldValue?: XEventPayload<typeof event>
     ) => void = (newValue, oldValue) => {
-      if (filter(newValue, oldValue)) {
+      if (filter(newValue, oldValue, store.state.x[name])) {
         bus.emit(event, newValue, { ...metadata, moduleName: name, oldValue });
       }
     };

diff --git a/packages/x-components/src/store/utils/store-emitters.utils.ts b/packages/x-components/src/store/utils/store-emitters.utils.ts
@@ -35,17 +35,19 @@ export interface StateSelector<ReturnType, State extends Dictionary, Getters ext
   extends WatchOptions {
   selector: SimpleStateSelector<ReturnType, State, Getters>;
   /**
-   * Checks if the value of the selector has changed.
+   * Asserts if the event should really be emitted taking into account the new and old values and
+   * the module state.
    *
    * @remarks
    * This function exist because Vue will not stop reactivity propagation if the observed variable
    * is an `object`, an `Array`, or the `deep` mode has been enabled.
    *
    * @param newValue - The new value.
    * @param oldValue - The old value.
+   * @param state - The state of the {@link XModule} where this selector is used.
    * @returns True if the value has really changed.
    */
-  filter?(newValue: ReturnType, oldValue: ReturnType): boolean;
+  filter?(newValue: ReturnType, oldValue: ReturnType, state: State): boolean;
   metadata?: Partial<WireMetadata>;
 }
 

diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
@@ -248,12 +248,17 @@
               <LocationProvider location="no_results">
                 <QueryPreviewList
                   :debounceTimeMs="250"
-                  :queries="queriesToPreview"
-                  #default="{ query, totalResults, results }"
+                  :queriesPreviewInfo="queriesPreviewInfo"
+                  #default="{ queryPreviewInfo, totalResults, results }"
                   data-test="brand-recommendation"
                 >
                   <div class="x-flex x-flex-col x-gap-8 x-mb-16">
-                    <h1 class="x-title2">{{ query }} ({{ totalResults }})</h1>
+                    <QueryPreviewButton
+                      class="x-w-fit x-button-xl x-button-ghost"
+                      :queryPreviewInfo="queryPreviewInfo"
+                    >
+                      {{ `${queryPreviewInfo.query} (${totalResults})` }}
+                    </QueryPreviewButton>
                     <SlidingPanel :resetOnContentChange="false">
                       <div class="x-flex x-gap-8">
                         <Result
@@ -348,8 +353,8 @@
                 </h1>
                 <LocationProvider :location="$x.noResults ? 'no_results' : 'low_results'">
                   <QueryPreviewList
-                    :queries="queries"
-                    #default="{ query, results }"
+                    :queries-preview-info="queries.map(q => ({ query: q }))"
+                    #default="{ queryPreviewInfo: { query }, results }"
                     queryFeature="semantics"
                   >
                     <div
@@ -496,6 +501,8 @@
   import SemanticQueries from '../../x-modules/semantic-queries/components/semantic-queries.vue';
   import SemanticQuery from '../../x-modules/semantic-queries/components/semantic-query.vue';
   import { useQueriesPreview } from '../../x-modules/queries-preview/composables/use-queries-preview.composable';
+  import { QueryPreviewInfo } from '../../x-modules/queries-preview/store/types';
+  import QueryPreviewButton from '../../x-modules/queries-preview/components/query-preview-button.vue';
   import Aside from './aside.vue';
   import PredictiveLayer from './predictive-layer.vue';
   import Result from './result.vue';
@@ -507,6 +514,7 @@
       infiniteScroll
     },
     components: {
+      QueryPreviewButton,
       DisplayResultProvider,
       FallbackDisclaimer,
       QueryPreviewList,
@@ -615,7 +623,29 @@
       }
     };
 
-    protected queriesToPreview = ['sunglasses', 'handbag', 'earrings', 'jeans', 't-shirt'];
+    protected queriesPreviewInfo: QueryPreviewInfo[] = [
+      {
+        query: 'cortina',
+        extraParams: { store: 'Gijón' }
+      },
+      {
+        query: 'marni summer dress'
+      },
+      {
+        query: 'woven hat'
+      },
+      {
+        query: 'jeans',
+        extraParams: { store: 'Gijón' }
+      },
+      {
+        query: 't-shirt'
+      }
+    ];
+
+    protected get queries(): string[] {
+      return this.queriesPreviewInfo.map(item => item.query);
+    }
 
     toggleE2EAdapter(): void {
       adapterConfig.e2e = !adapterConfig.e2e;

diff --git a/packages/x-components/src/x-installer/api/api.types.ts b/packages/x-components/src/x-installer/api/api.types.ts
@@ -3,6 +3,7 @@ import { XBus } from '@empathyco/x-bus';
 import { DocumentDirection } from '../../plugins/x-plugin.types';
 import { XEvent, XEventPayload, XEventsTypes } from '../../wiring/events.types';
 import { WireMetadata } from '../../wiring/wiring.types';
+import { QueryPreviewInfo } from '../../x-modules/queries-preview/index';
 
 /**
  * Interface with the API functions exposes as X
@@ -126,17 +127,3 @@ export interface SnippetConfig {
  * @public
  */
 export type NormalisedSnippetConfig = RequiredProperties<SnippetConfig, 'uiLang'>;
-
-/**
- * Information to render a query preview with.
- *
- * @public
- */
-export interface QueryPreviewInfo {
-  /** The query to search for. */
-  query: string;
-  /** An optional title for the container. */
-  title?: string;
-  /** Any other additional information to render the preview with. */
-  [extra: string]: unknown;
-}
diff --git a/packages/x-components/src/x-modules/history-queries/wiring.ts b/packages/x-components/src/x-modules/history-queries/wiring.ts
@@ -39,13 +39,34 @@ const wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleNa
  */
 export const addQueryToHistoryQueries = wireDispatch('addQueryToHistory');
 
+/**
+ * Saves the selectedQueryPreview query into the history queries.
+ *
+ * @public
+ */
+export const addQueryToHistoryQueriesFromPreview = wireDispatch(
+  'addQueryToHistory',
+  ({ eventPayload: { query } }) => query
+);
+
 /**
  * Sets the query of the history queries module. Used for searching into the history queries.
  *
  * @public
  */
 export const setHistoryQueriesQuery = wireCommit('setQuery');
 
+/**
+ * Sets the query of the history queries module from a selectedQueryPreview's query.
+ * Used for searching into the history queries.
+ *
+ * @public
+ */
+export const setHistoryQueriesQueryFromPreview = wireCommit(
+  'setQuery',
+  ({ eventPayload: { query } }) => query
+);
+
 /**
  * Sets the history queries state `query` from url.
  *
@@ -169,5 +190,9 @@ export const historyQueriesWiring = createWiring({
   },
   SearchResponseChanged: {
     updateHistoryQueriesWithSearchResponse
+  },
+  UserAcceptedAQueryPreview: {
+    setHistoryQueriesQueryFromPreview,
+    addQueryToHistoryQueriesFromPreview
   }
 });
diff --git a/packages/x-components/src/x-modules/identifier-results/wiring.ts b/packages/x-components/src/x-modules/identifier-results/wiring.ts
@@ -39,6 +39,16 @@ const wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleNa
  */
 export const setIdentifierResultsQuery = wireDispatch('saveQuery');
 
+/**
+ * Sets the identifier-results module query from a selectedQueryPreview's query.
+ *
+ * @public
+ */
+export const setIdentifierResultsQueryFromPreview = wireDispatch(
+  'saveQuery',
+  ({ eventPayload: { query } }) => query
+);
+
 /**
  * Clears the identifier-results module query.
  *
@@ -127,5 +137,9 @@ export const identifierResultsWiring = createWiring({
   },
   UserClickedOutOfMainModal: {
     clearIdentifierResultsQuery
+  },
+  UserAcceptedAQueryPreview: {
+    setIdentifierResultsQueryFromPreview,
+    saveIdentifierResultsOriginWire
   }
 });
diff --git a/packages/x-components/src/x-modules/next-queries/wiring.ts b/packages/x-components/src/x-modules/next-queries/wiring.ts
@@ -45,6 +45,16 @@ const wireDispatch: NamespacedWireDispatch<typeof moduleName> = namespacedWireDi
  */
 export const setNextQueriesQuery = wireCommit('setQuery');
 
+/**
+ * Sets the next queries state `query` with a selectedQueryPreview's query.
+ *
+ * @public
+ */
+export const setNextQueriesQueryFromPreview = wireCommit(
+  'setParams',
+  ({ eventPayload: { query } }) => query
+);
+
 /**
  * Sets the next queries state `query` from url.
  *
@@ -59,6 +69,16 @@ const setUrlParams = wireDispatch('setUrlParams');
  */
 export const setNextQueriesExtraParams = wireCommit('setParams');
 
+/**
+ * Sets the next queries state `params` with a selectedQueryPreview's extraParams.
+ *
+ * @public
+ */
+export const setNextQueriesExtraParamsFromPreview = wireCommit(
+  'setParams',
+  ({ eventPayload: { extraParams } }) => extraParams
+);
+
 /**
  * Requests and stores the next queries.
  *
@@ -129,5 +149,9 @@ export const nextQueriesWiring = createWiring({
   },
   NextQueryPreviewMountedHook: {
     fetchAndSaveNextQueryPreviewWire
+  },
+  UserAcceptedAQueryPreview: {
+    setNextQueriesQueryFromPreview,
+    setNextQueriesExtraParamsFromPreview
   }
 });
diff --git a/packages/x-components/src/x-modules/popular-searches/wiring.ts b/packages/x-components/src/x-modules/popular-searches/wiring.ts
@@ -12,7 +12,7 @@ import { createWiring } from '../../wiring/wiring.utils';
  */
 const moduleName = 'popularSearches';
 /**
- * WireDispatchfor {@link PopularSearchesXModule}.
+ * WireDispatch for {@link PopularSearchesXModule}.
  *
  * @internal
  */