feat: filter query preview

packages/x-components/src/x-modules/facets/wiring.ts

@@ -1,12 +1,37 @@
 import { Facet } from '@empathyco/x-types';
 import { UrlParams } from '../../types/url-params';
 import { createRawFilters } from '../../utils/filters';
-import { wireCommit, wireService, wireServiceWithoutPayload } from '../../wiring/wires.factory';
+import { wireService, wireServiceWithoutPayload } from '../../wiring/wires.factory';
 import { filter, mapWire } from '../../wiring/wires.operators';
 import { createWiring } from '../../wiring/wiring.utils';
-import { XEventPayload } from '../../wiring/index';
+import {
+  namespacedWireCommit,
+  namespacedWireCommitWithoutPayload,
+  XEventPayload
+} from '../../wiring/index';
 import { DefaultFacetsService } from './service/facets.service';
 
+/**
+ * `facets` {@link XModuleName | XModule name}.
+ *
+ * @internal
+ */
+const moduleName = 'facets';
+
+/**
+ * WireCommit for {@link FacetsXModule}.
+ *
+ * @internal
+ */
+const wireCommit = namespacedWireCommit(moduleName);
+
+/**
+ * WireCommitWithoutPayload for {@link FacetsXModule}.
+ *
+ * @internal
+ */
+const wireCommitWithoutPayload = namespacedWireCommitWithoutPayload(moduleName);
+
 /**
  * Wires factory for {@link DefaultFacetsService}.
  */
@@ -125,12 +150,22 @@ const setQuery = wireFacetsService('setQuery');
  * @internal
  */
 const clearStickyFilters = filter<XEventPayload<'SearchResponseChanged'>>(
-  wireCommit('x/facets/clearStickyFilters'),
+  wireCommitWithoutPayload('clearStickyFilters'),
   ({ eventPayload }) => {
     return eventPayload.totalResults === 0;
   }
 );
 
+/**
+ * Sets the filters of the facets module from a selectedQueryPreview's filters.
+ *
+ * @public
+ */
+export const setSelectedFiltersFromPreview = wireCommit(
+  'setFilters',
+  ({ eventPayload: { filters } }) => (filters ? createRawFilters(filters) : [])
+);
+
 /**
  * Wiring configuration for the {@link FacetsXModule | facets module}.
  *
@@ -181,5 +216,8 @@ export const facetsWiring = createWiring({
   },
   SearchResponseChanged: {
     clearStickyFilters
+  },
+  UserAcceptedAQueryPreview: {
+    setSelectedFiltersFromPreview
   }
 });

packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview-button.spec.ts

@@ -11,7 +11,11 @@ import { QueryPreviewInfo } from '../../store/index';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/index';
 
 function renderQueryPreviewButton({
-  queryPreviewInfo = { query: 'milk', extraParams: { store: 'Magrathea' } },
+  queryPreviewInfo = {
+    query: 'milk',
+    extraParams: { store: 'Magrathea' },
+    filters: ['fit:regular']
+  },
   template = `<QueryPreviewButton v-bind="$attrs" />`
 }: RenderQueryPreviewButtonOptions = {}): RenderQueryPreviewButtonAPI {
   const localVue = createLocalVue();
@@ -98,7 +102,8 @@ describe('query preview button', () => {
       query: 'milk',
       extraParams: {
         store: 'Magrathea'
-      }
+      },
+      filters: ['fit:regular']
     });
 
     await updateExtraParams({ warehouse: 42 });
@@ -110,7 +115,8 @@ describe('query preview button', () => {
       extraParams: {
         store: 'Magrathea',
         warehouse: 42
-      }
+      },
+      filters: ['fit:regular']
     });
   });
 });

packages/x-components/src/x-modules/queries-preview/components/query-preview-button.vue

@@ -75,7 +75,9 @@
      * @internal
      */
     protected get events(): Partial<XEventsTypes> {
-      return { UserAcceptedAQueryPreview: this.fullQueryPreviewInfo };
+      return {
+        UserAcceptedAQueryPreview: this.fullQueryPreviewInfo
+      };
     }
   }
 </script>

packages/x-components/src/x-modules/search/wiring.ts

@@ -6,6 +6,7 @@ import {
 } from '../../wiring/namespaced-wires.factory';
 import { WirePayload } from '../../wiring/wiring.types';
 import { createWiring } from '../../wiring/wiring.utils';
+import { createRawFilters } from '../../utils/filters';
 import { InternalSearchRequest } from './types';
 
 /**
@@ -14,6 +15,7 @@ import { InternalSearchRequest } from './types';
  * @internal
  */
 const moduleName = 'search';
+
 /**
  * WireCommit for {@link SearchXModule}.
  *
@@ -202,6 +204,16 @@ export const setSearchExtraParamsFromPreview = wireCommit(
   ({ eventPayload: { extraParams } }) => extraParams
 );
 
+/**
+ * Sets the search state `selectedFilters` with the selectedQueryPreview's filters.
+ *
+ * @public
+ */
+export const setSearchSelectedFiltersFromPreview = wireCommit(
+  'setSelectedFilters',
+  ({ eventPayload: { filters } }) => (filters ? createRawFilters(filters) : [])
+);
+
 /**
  * Search wiring.
  *
@@ -265,6 +277,7 @@ export const searchWiring = createWiring({
   UserAcceptedAQueryPreview: {
     setSearchQueryFromPreview,
     setSearchExtraParamsFromPreview,
+    setSearchSelectedFiltersFromPreview,
     saveOriginWire
   },
   QueryPreviewUnselected: {

packages/x-components/src/x-modules/url/wiring.ts

@@ -1,5 +1,6 @@
 import { namespacedWireCommit } from '../../wiring/namespaced-wires.factory';
 import { createWiring } from '../../wiring/wiring.utils';
+import { createRawFilters } from '../../utils/filters';
 
 /**
  * WireCommit for {@link UrlXModule}.
@@ -63,6 +64,16 @@ export const setUrlParamsFromPreview = wireCommit(
   ({ eventPayload: { extraParams } }) => extraParams
 );
 
+/**
+ * Sets the filters of the url module from a selectedQueryPreview's filters.
+ *
+ * @public
+ */
+export const setUrlSelectedFiltersFromPreview = wireCommit(
+  'setFilters',
+  ({ eventPayload: { filters } }) => (filters ? createRawFilters(filters) : [])
+);
+
 /**
  * Sets the scroll of the url module.
  *
@@ -98,7 +109,8 @@ export const urlWiring = createWiring({
   },
   UserAcceptedAQueryPreview: {
     setUrlQueryFromPreview,
-    setUrlParamsFromPreview
+    setUrlParamsFromPreview,
+    setUrlSelectedFiltersFromPreview
   },
   UserClearedQuery: {
     setUrlQuery