feat(facets): implement separate facets configuration

Author: victorcg88

packages/x-adapter-platform/src/schemas/requests/facets-request.schema.ts

@@ -12,5 +12,5 @@ export const facetsRequestSchema = createMutableSchema<FacetsRequest, PlatformFa
   query: 'query',
   origin: 'origin',
   filter: ({ filters }) => mapFilters(filters),
-  extraParams: 'extraParams',
+  extraParams: ({ extraParams: { separateFacets, ...rest } = {} }) => rest,
 })

packages/x-adapter-platform/src/schemas/requests/search-request.schema.ts

@@ -15,5 +15,8 @@ export const searchRequestSchema = createMutableSchema<SearchRequest, PlatformSe
   rows: 'rows',
   sort: 'sort',
   filter: ({ filters }) => mapFilters(filters),
-  extraParams: 'extraParams',
+  extraParams: ({ extraParams: { separateFacets, ...rest } = {} }) => ({
+    ...rest,
+    facets: !separateFacets,
+  }),
 })

packages/x-components/src/utils/filters.ts

@@ -1,23 +1,92 @@
-import type { Filter, RawFilter } from '@empathyco/x-types'
+import type { FacetsRequest, Filter, RawFilter } from '@empathyco/x-types'
 
 /**
  * Compares if two lists contains the same filters.
  *
- * @param someFilters - A list of filters to compare.
- * @param anotherFilters - Another list of filters to compare.
+ * @param filtersA - A list of filters to compare.
+ * @param filtersB - Another list of filters to compare.
  *
  * @returns True if the two lists of filters are equal, which means that they have the same
  * filters. The position of the filter does not matter for this check.
  *
  * @public
  */
-export function areFiltersDifferent(someFilters: Filter[], anotherFilters: Filter[]): boolean {
+export function areFiltersDifferent(filtersA: Filter[], filtersB: Filter[]): boolean {
   return (
-    someFilters.length !== anotherFilters.length ||
-    someFilters.some(filter => !anotherFilters.find(otherFilter => otherFilter.id === filter.id))
+    filtersA.length !== filtersB.length ||
+    filtersA.some(filter => !filtersB.find(otherFilter => otherFilter.id === filter.id))
   )
 }
 
+/**
+ * Compares if two filter dictionaries are different, ignoring empty filter arrays.
+ *
+ * @param filtersA - A filter dictionary to compare.
+ * @param filtersB - Another filter dictionary to compare.
+ *
+ * @returns True if the filter dictionaries are different, false if they are equivalent.
+ * Empty objects (\{\}) and objects with only empty arrays (\{brand: [], category: []\}) are
+ * treated as equivalent since they both represent no active filters.
+ *
+ * @public
+ */
+export function areFilterDictionaryDifferent(
+  filtersA: Record<string, Filter[]>,
+  filtersB: Record<string, Filter[]>,
+): boolean {
+  const allKeys = new Set([...Object.keys(filtersA), ...Object.keys(filtersB)])
+
+  for (const key of allKeys) {
+    const arrayA = filtersA[key] || []
+    const arrayB = filtersB[key] || []
+
+    // Skip if both arrays are empty (equivalent to no filters)
+    if (arrayA.length === 0 && arrayB.length === 0) {
+      continue
+    }
+
+    // Compare the filter arrays (handles length and content differences)
+    if (areFiltersDifferent(arrayA, arrayB)) {
+      return true
+    }
+  }
+
+  return false
+}
+
+/**
+ * Compares if two facets requests are different.
+ *
+ * @param requestA - A facets request.
+ * @param requestB - Another facets request.
+ *
+ * @returns True if the requests are different, false if they are equivalent.
+ * Handles semantic equivalence of filter states (empty object vs object with empty arrays).
+ *
+ * @public
+ */
+export function areRequestsDifferent(
+  requestA: FacetsRequest | null,
+  requestB: FacetsRequest | null,
+): boolean {
+  // Reference equality check
+  if (requestA === requestB) return false
+
+  // Null transition check
+  if (requestA === null || requestB === null) return true
+
+  // Compare query
+  if (requestA.query !== requestB.query) return true
+
+  // Compare extraParams (shallow, simple)
+  if (JSON.stringify(requestA.extraParams || {}) !== JSON.stringify(requestB.extraParams || {}))
+    return true
+
+  // Use semantic filter comparison to avoid duplicate emissions
+  // when filters go from {} to {brand: [], category: []}
+  return areFilterDictionaryDifferent(requestA.filters || {}, requestB.filters || {})
+}
+
 /**
  * Helper method which creates the filter entity from the filter ir of the url.
  *

packages/x-components/src/views/home/Home.vue

@@ -724,7 +724,7 @@ export default defineComponent({
   setup() {
     const x = use$x()
     const stores = ['Spain', 'Portugal', 'Italy']
-    const initialExtraParams = { store: 'Portugal' }
+    const initialExtraParams = { store: 'Portugal', separateFacets: false }
     const searchInputPlaceholderMessages = [
       'Find shirts',
       'Find shoes',

packages/x-components/src/x-modules/facets/events.types.ts

@@ -1,6 +1,7 @@
 import type {
   EditableNumberRangeFilter,
   Facet,
+  FacetsRequest,
   Filter,
   HierarchicalFilter,
   NumberRangeFilter,
@@ -98,4 +99,10 @@ export interface FacetsXEvents {
    * Payload: The facets query.
    */
   FacetsQueryChanged: string
+  /**
+   * Any property of the search request has been updated.
+   * Payload: The new facets request or `null` if there is not enough data in the state to
+   * conform a valid request.
+   */
+  FacetsRequestUpdated: FacetsRequest | null
 }

packages/x-components/src/x-modules/facets/store/actions/fetch-and-save-facets-response.action.ts

@@ -9,18 +9,14 @@ const { fetchAndSave, cancelPrevious } = createFetchAndSaveActions<
   FacetsRequest | null,
   FacetsResponse | null
 >({
-  async fetch({ dispatch, getters }) {
-    return getters.request
-      ? dispatch('fetchFacetsResponse', getters.request)
-      : Promise.resolve(null)
+  async fetch({ dispatch }, request) {
+    return request ? dispatch('fetchFacetsResponse', request) : Promise.resolve(null)
   },
   onSuccess({ commit, getters }, response) {
     if (response !== null) {
       const selectedFilters = getters.selectedFilters
       const selectedIds = new Set(
-        Object.values(selectedFilters ?? {})
-          .filter((f: Filter) => f.selected)
-          .map((f: Filter) => f.id),
+        selectedFilters.filter((f: Filter) => f.selected).map((f: Filter) => f.id),
       )
       const facetsWithSelectedFilters: Facet[] = []
 

packages/x-components/src/x-modules/facets/store/emitters.ts

@@ -1,5 +1,5 @@
 import { createStoreEmitters } from '../../../store/utils/store-emitters.utils'
-import { areFiltersDifferent } from '../../../utils/filters'
+import { areFiltersDifferent, areRequestsDifferent } from '../../../utils/filters'
 import { isNewQuery } from '../../../utils/is-new-query'
 import { facetsXStoreModule } from './module'
 
@@ -27,4 +27,8 @@ export const facetsEmitters = createStoreEmitters(facetsXStoreModule, {
     selector: state => state.query,
     filter: isNewQuery,
   },
+  FacetsRequestUpdated: {
+    selector: (_, getters) => getters.request,
+    filter: areRequestsDifferent,
+  },
 })

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

@@ -2,7 +2,11 @@ import type { Facet } from '@empathyco/x-types'
 import type { UrlParams } from '../../types/url-params'
 import type { XEventPayload } from '../../wiring/index'
 import { createRawFilters } from '../../utils/filters'
-import { namespacedWireCommit, namespacedWireCommitWithoutPayload } from '../../wiring/index'
+import {
+  namespacedWireCommit,
+  namespacedWireCommitWithoutPayload,
+  namespacedWireDispatch,
+} from '../../wiring'
 import { wireService, wireServiceWithoutPayload } from '../../wiring/wires.factory'
 import { filter, mapWire } from '../../wiring/wires.operators'
 import { createWiring } from '../../wiring/wiring.utils'
@@ -29,6 +33,13 @@ const wireCommit = namespacedWireCommit(moduleName)
  */
 const wireCommitWithoutPayload = namespacedWireCommitWithoutPayload(moduleName)
 
+/**
+ * WireDispatch for {@link FacetsXModule}.
+ *
+ * @internal
+ */
+const wireDispatch = namespacedWireDispatch(moduleName)
+
 /**
  * Wires factory for {@link DefaultFacetsService}.
  */
@@ -180,6 +191,30 @@ export const setFiltersFromHistoryQueries = wireCommit(
  */
 export const setQueryFromPreview = wireCommit('setQuery', ({ eventPayload: { query } }) => query)
 
+/**
+ * Sets the facets state `params`.
+ *
+ * @public
+ */
+export const setFacetsExtraParams = wireCommit('setParams')
+
+/**
+ * Requests and stores the facets response.
+ *
+ * @public
+ */
+export const fetchAndSaveFacetsResponseWire = wireDispatch('fetchAndSaveFacetsResponse')
+
+/**
+ * Filtered version of fetchAndSaveFacetsResponseWire that only executes when separateFacets are enabled.
+ *
+ * @internal
+ */
+const fetchAndSaveFacetsResponseWireIfEnabled = filter(
+  fetchAndSaveFacetsResponseWire,
+  ({ store }) => !!store.state.x.facets.params.separateFacets,
+)
+
 /**
  * Wiring configuration for the {@link FacetsXModule | facets module}.
  *
@@ -238,4 +273,13 @@ export const facetsWiring = createWiring({
   UserSelectedAHistoryQuery: {
     setFiltersFromHistoryQueries,
   },
+  ExtraParamsChanged: {
+    setFacetsExtraParams,
+  },
+  UserOpenedFacetsAside: {
+    fetchAndSaveFacetsResponseWireIfEnabled,
+  },
+  FacetsRequestUpdated: {
+    fetchAndSaveFacetsResponseWireIfEnabled,
+  },
 })