From cf615e7dad52c17578a758f873bed0b5afbe6f83 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Mon, 6 Nov 2023 12:44:31 +0100
Subject: [PATCH 01/15] feat(nextQueries): set maxNextQueriesPerGroup using
 xControls

EMP-2722
---
 src/components/search/results/results.vue     | 16 +++++++--
 .../use-experience-controls.composable.ts     | 35 +++++++++++++++++++
 2 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 src/composables/use-experience-controls.composable.ts

diff --git a/src/components/search/results/results.vue b/src/components/search/results/results.vue
index a027c07a..a40f23fd 100644
--- a/src/components/search/results/results.vue
+++ b/src/components/search/results/results.vue
@@ -5,7 +5,7 @@
         <NextQueriesList
           :offset="24"
           :frequency="48"
-          :maxNextQueriesPerGroup="1"
+          :maxNextQueriesPerGroup="maxNextQueriesPerGroup"
           :showOnlyAfterOffset="$x.partialResults.length > 0"
         >
           <BaseVariableColumnGrid
@@ -55,6 +55,8 @@
   import { NextQueriesList } from '@empathyco/x-components/next-queries';
   import { useDevice } from '../../../composables/use-device.composable';
   import Result from '../../results/result.vue';
+  // eslint-disable-next-line max-len
+  import { useExperienceControlsHelpers } from '../../../composables/use-experience-controls.composable';
   import NextQueryPreview from './custom-next-query-preview.vue';
 
   export default defineComponent({
@@ -75,7 +77,17 @@
     },
     setup() {
       const { isMobile } = useDevice();
-      return { staggeredFadeAndSlide: StaggeredFadeAndSlide, columns: isMobile.value ? 2 : 4 };
+      const { maxItems } = useExperienceControlsHelpers({
+        xmodule: 'nextQueries',
+        prop: 'maxItems',
+        defaultValue: 1
+      });
+
+      return {
+        staggeredFadeAndSlide: StaggeredFadeAndSlide,
+        columns: isMobile.value ? 2 : 4,
+        maxNextQueriesPerGroup: maxItems
+      };
     }
   });
 </script>
diff --git a/src/composables/use-experience-controls.composable.ts b/src/composables/use-experience-controls.composable.ts
new file mode 100644
index 00000000..707dcce0
--- /dev/null
+++ b/src/composables/use-experience-controls.composable.ts
@@ -0,0 +1,35 @@
+import { computed, ComputedRef, inject } from 'vue';
+import { Dictionary } from '@empathyco/x-utils';
+
+type ExperienceControlsHelpers = {
+  maxItems: ComputedRef<number>;
+};
+
+/**
+ * Experience controls values per x-modules.
+ *
+ * @param xmodule - The name of the x-module whose config will be set with xControls.
+ * @param prop - The name of the property that will be configured.
+ * @param defaultValue - A default value to set if xControls value is unavailable.
+ *
+ * @returns The experience controls utils.
+ */
+export const useExperienceControlsHelpers = ({
+  xmodule,
+  prop,
+  defaultValue
+}: {
+  xmodule: string;
+  prop: string;
+  defaultValue?: string | number | boolean;
+}): ExperienceControlsHelpers => {
+  const experienceControls = inject<Dictionary>('experienceControls', {});
+
+  const maxItems = computed(() => {
+    return experienceControls.value?.controls?.[xmodule]?.[prop] ?? (defaultValue as number);
+  });
+
+  return {
+    maxItems
+  };
+};

From 554f8ef95c25a744345196b5c47434a06c3f2f67 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Mon, 6 Nov 2023 13:01:02 +0100
Subject: [PATCH 02/15] feat(layout): set columns using xControls

EMP-2722
---
 src/components/column-picker.vue               |  9 ++++++++-
 src/components/search/results/results.vue      |  2 +-
 .../use-experience-controls.composable.ts      | 18 ++++++++++++------
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/column-picker.vue b/src/components/column-picker.vue
index f0aa012f..02801654 100644
--- a/src/components/column-picker.vue
+++ b/src/components/column-picker.vue
@@ -24,6 +24,7 @@
     Grid4ColIcon
   } from '@empathyco/x-components';
   import { useDevice } from '../composables/use-device.composable';
+  import { useExperienceControlsHelpers } from '../composables/use-experience-controls.composable';
 
   export default defineComponent({
     components: {
@@ -34,8 +35,14 @@
     },
     setup() {
       const { isMobile } = useDevice();
+      const { columns } = useExperienceControlsHelpers({
+        controls: 'layout',
+        prop: 'columnSelector',
+        defaultValue: [4, 2]
+      });
+
       return {
-        values: computed(() => (isMobile.value ? [2, 1] : [4, 2])),
+        values: computed(() => (isMobile.value ? [2, 1] : columns)),
         icons: { 1: 'Grid1ColIcon', 2: 'Grid2ColIcon', 4: 'Grid4ColIcon' }
       };
     }
diff --git a/src/components/search/results/results.vue b/src/components/search/results/results.vue
index a40f23fd..659736a1 100644
--- a/src/components/search/results/results.vue
+++ b/src/components/search/results/results.vue
@@ -78,7 +78,7 @@
     setup() {
       const { isMobile } = useDevice();
       const { maxItems } = useExperienceControlsHelpers({
-        xmodule: 'nextQueries',
+        controls: 'nextQueries',
         prop: 'maxItems',
         defaultValue: 1
       });
diff --git a/src/composables/use-experience-controls.composable.ts b/src/composables/use-experience-controls.composable.ts
index 707dcce0..a837c12a 100644
--- a/src/composables/use-experience-controls.composable.ts
+++ b/src/composables/use-experience-controls.composable.ts
@@ -3,33 +3,39 @@ import { Dictionary } from '@empathyco/x-utils';
 
 type ExperienceControlsHelpers = {
   maxItems: ComputedRef<number>;
+  columns: ComputedRef<Array<number>>;
 };
 
 /**
  * Experience controls values per x-modules.
  *
- * @param xmodule - The name of the x-module whose config will be set with xControls.
+ * @param controls - The name of the xControls controls object that will be used.
  * @param prop - The name of the property that will be configured.
  * @param defaultValue - A default value to set if xControls value is unavailable.
  *
  * @returns The experience controls utils.
  */
 export const useExperienceControlsHelpers = ({
-  xmodule,
+  controls,
   prop,
   defaultValue
 }: {
-  xmodule: string;
+  controls: string;
   prop: string;
-  defaultValue?: string | number | boolean;
+  defaultValue?: string | number | boolean | number[];
 }): ExperienceControlsHelpers => {
   const experienceControls = inject<Dictionary>('experienceControls', {});
 
   const maxItems = computed(() => {
-    return experienceControls.value?.controls?.[xmodule]?.[prop] ?? (defaultValue as number);
+    return experienceControls.value?.controls?.[controls]?.[prop] ?? (defaultValue as number);
+  });
+
+  const columns = computed(() => {
+    return experienceControls.value?.controls?.[controls]?.[prop] ?? (defaultValue as number[]);
   });
 
   return {
-    maxItems
+    maxItems,
+    columns
   };
 };

From de13239cf708fbb5270dd553ec855c0b42d22053 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Mon, 6 Nov 2023 13:52:57 +0100
Subject: [PATCH 03/15] chore: rename export in composable to avoid large
 length imports

EMP-2722
---
 src/components/column-picker.vue                      | 4 ++--
 src/components/search/results/results.vue             | 5 ++---
 src/composables/use-experience-controls.composable.ts | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/column-picker.vue b/src/components/column-picker.vue
index 02801654..79831b09 100644
--- a/src/components/column-picker.vue
+++ b/src/components/column-picker.vue
@@ -24,7 +24,7 @@
     Grid4ColIcon
   } from '@empathyco/x-components';
   import { useDevice } from '../composables/use-device.composable';
-  import { useExperienceControlsHelpers } from '../composables/use-experience-controls.composable';
+  import { useXControlsHelpers } from '../composables/use-experience-controls.composable';
 
   export default defineComponent({
     components: {
@@ -35,7 +35,7 @@
     },
     setup() {
       const { isMobile } = useDevice();
-      const { columns } = useExperienceControlsHelpers({
+      const { columns } = useXControlsHelpers({
         controls: 'layout',
         prop: 'columnSelector',
         defaultValue: [4, 2]
diff --git a/src/components/search/results/results.vue b/src/components/search/results/results.vue
index 659736a1..b461e062 100644
--- a/src/components/search/results/results.vue
+++ b/src/components/search/results/results.vue
@@ -55,8 +55,7 @@
   import { NextQueriesList } from '@empathyco/x-components/next-queries';
   import { useDevice } from '../../../composables/use-device.composable';
   import Result from '../../results/result.vue';
-  // eslint-disable-next-line max-len
-  import { useExperienceControlsHelpers } from '../../../composables/use-experience-controls.composable';
+  import { useXControlsHelpers } from '../../../composables/use-experience-controls.composable';
   import NextQueryPreview from './custom-next-query-preview.vue';
 
   export default defineComponent({
@@ -77,7 +76,7 @@
     },
     setup() {
       const { isMobile } = useDevice();
-      const { maxItems } = useExperienceControlsHelpers({
+      const { maxItems } = useXControlsHelpers({
         controls: 'nextQueries',
         prop: 'maxItems',
         defaultValue: 1
diff --git a/src/composables/use-experience-controls.composable.ts b/src/composables/use-experience-controls.composable.ts
index a837c12a..fd4ff5f4 100644
--- a/src/composables/use-experience-controls.composable.ts
+++ b/src/composables/use-experience-controls.composable.ts
@@ -15,7 +15,7 @@ type ExperienceControlsHelpers = {
  *
  * @returns The experience controls utils.
  */
-export const useExperienceControlsHelpers = ({
+export const useXControlsHelpers = ({
   controls,
   prop,
   defaultValue

From 293c79a7fadca4c077adeba0948c93123d2f753c Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Mon, 6 Nov 2023 13:54:15 +0100
Subject: [PATCH 04/15] feat: use xControls composable in semantics

EMP-2722
---
 .../search/custom-semantic-queries.vue          | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/components/search/custom-semantic-queries.vue b/src/components/search/custom-semantic-queries.vue
index e183ebed..2f8923aa 100644
--- a/src/components/search/custom-semantic-queries.vue
+++ b/src/components/search/custom-semantic-queries.vue
@@ -41,12 +41,12 @@
 
 <script lang="ts">
   import { ArrowRightIcon } from '@empathyco/x-components';
-  import { computed, defineComponent, inject } from 'vue';
+  import { defineComponent } from 'vue';
   import { SemanticQueries, SemanticQuery } from '@empathyco/x-components/semantic-queries';
   import { QueryPreviewList, useQueriesPreview } from '@empathyco/x-components/queries-preview';
-  import { Dictionary } from '@empathyco/x-utils';
   import CustomSlidingPanel from '../custom-sliding-panel.vue';
   import Result from '../results/result.vue';
+  import { useXControlsHelpers } from '../../composables/use-experience-controls.composable';
   import DisplayClickProvider from './display-click-provider.vue';
 
   export default defineComponent({
@@ -61,19 +61,14 @@
     },
     setup() {
       const { isAnyQueryLoadedInPreview } = useQueriesPreview();
-
-      const experienceControls = inject<Dictionary>('experienceControls', {});
-
-      const resultsPerCarousel = computed(() => {
-        const resultsPerCarousel: number =
-          experienceControls.value?.controls?.semanticQueries?.resultsPerCarousels;
-
-        return resultsPerCarousel ?? undefined;
+      const { maxItems } = useXControlsHelpers({
+        controls: 'semanticQueries',
+        prop: 'resultsPerCarousels'
       });
 
       return {
         isAnyQueryLoadedInPreview,
-        resultsPerCarousel
+        resultsPerCarousel: maxItems
       };
     }
   });

From 2fed1660f9143b55411b84db475bdd06c86a1e3a Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Tue, 7 Nov 2023 11:15:53 +0100
Subject: [PATCH 05/15] chore: change dress filter, collection not filterable
 anymore

EMP-2722
---
 public/snippet-script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/snippet-script.js b/public/snippet-script.js
index d97d3bae..7cb25acd 100644
--- a/public/snippet-script.js
+++ b/public/snippet-script.js
@@ -82,7 +82,7 @@ window.initX = {
     {
       query: 'dress',
       title: 'Autumn dresses by Marni',
-      filters: ['brand:marni', 'collection:autumn - 2022']
+      filters: ['brand:marni', 'categoryIds:12fad53d7']
     },
     {
       query: 'belted legging',

From d77c0801ec48ef951b0de3ac1a85e98f447129de Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Tue, 7 Nov 2023 11:27:47 +0100
Subject: [PATCH 06/15] feat: return one single computed to make composable
 scalable

EMP-2722
---
 src/components/column-picker.vue              |  2 +-
 .../search/custom-semantic-queries.vue        |  2 +-
 src/components/search/results/results.vue     |  2 +-
 .../use-experience-controls.composable.ts     | 26 +++++--------------
 4 files changed, 9 insertions(+), 23 deletions(-)

diff --git a/src/components/column-picker.vue b/src/components/column-picker.vue
index 79831b09..f47ce431 100644
--- a/src/components/column-picker.vue
+++ b/src/components/column-picker.vue
@@ -35,7 +35,7 @@
     },
     setup() {
       const { isMobile } = useDevice();
-      const { columns } = useXControlsHelpers({
+      const columns = useXControlsHelpers({
         controls: 'layout',
         prop: 'columnSelector',
         defaultValue: [4, 2]
diff --git a/src/components/search/custom-semantic-queries.vue b/src/components/search/custom-semantic-queries.vue
index 2f8923aa..39458462 100644
--- a/src/components/search/custom-semantic-queries.vue
+++ b/src/components/search/custom-semantic-queries.vue
@@ -61,7 +61,7 @@
     },
     setup() {
       const { isAnyQueryLoadedInPreview } = useQueriesPreview();
-      const { maxItems } = useXControlsHelpers({
+      const maxItems = useXControlsHelpers({
         controls: 'semanticQueries',
         prop: 'resultsPerCarousels'
       });
diff --git a/src/components/search/results/results.vue b/src/components/search/results/results.vue
index b461e062..c1596908 100644
--- a/src/components/search/results/results.vue
+++ b/src/components/search/results/results.vue
@@ -76,7 +76,7 @@
     },
     setup() {
       const { isMobile } = useDevice();
-      const { maxItems } = useXControlsHelpers({
+      const maxItems = useXControlsHelpers({
         controls: 'nextQueries',
         prop: 'maxItems',
         defaultValue: 1
diff --git a/src/composables/use-experience-controls.composable.ts b/src/composables/use-experience-controls.composable.ts
index fd4ff5f4..bfe4d2bb 100644
--- a/src/composables/use-experience-controls.composable.ts
+++ b/src/composables/use-experience-controls.composable.ts
@@ -1,17 +1,12 @@
 import { computed, ComputedRef, inject } from 'vue';
 import { Dictionary } from '@empathyco/x-utils';
 
-type ExperienceControlsHelpers = {
-  maxItems: ComputedRef<number>;
-  columns: ComputedRef<Array<number>>;
-};
-
 /**
  * Experience controls values per x-modules.
  *
- * @param controls - The name of the xControls controls object that will be used.
- * @param prop - The name of the property that will be configured.
- * @param defaultValue - A default value to set if xControls value is unavailable.
+ * @param controls - The name of the xControls object that will be used.
+ * @param prop - The name of the property value that will be set.
+ * @param defaultValue - A default value to set if xControls one is unavailable.
  *
  * @returns The experience controls utils.
  */
@@ -23,19 +18,10 @@ export const useXControlsHelpers = ({
   controls: string;
   prop: string;
   defaultValue?: string | number | boolean | number[];
-}): ExperienceControlsHelpers => {
+}): ComputedRef => {
   const experienceControls = inject<Dictionary>('experienceControls', {});
 
-  const maxItems = computed(() => {
-    return experienceControls.value?.controls?.[controls]?.[prop] ?? (defaultValue as number);
+  return computed(() => {
+    return experienceControls.value?.controls?.[controls]?.[prop] ?? defaultValue;
   });
-
-  const columns = computed(() => {
-    return experienceControls.value?.controls?.[controls]?.[prop] ?? (defaultValue as number[]);
-  });
-
-  return {
-    maxItems,
-    columns
-  };
 };

From 954379087d3d5a6544af931250233ccdaa95711d Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Tue, 7 Nov 2023 12:19:29 +0100
Subject: [PATCH 07/15] feat: use the full object property path instead of 2
 params

EMP-2722
---
 src/components/column-picker.vue               |  3 +--
 .../search/custom-semantic-queries.vue         |  3 +--
 src/components/search/results/results.vue      |  3 +--
 .../use-experience-controls.composable.ts      | 18 +++++++++---------
 4 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/components/column-picker.vue b/src/components/column-picker.vue
index f47ce431..b332acf2 100644
--- a/src/components/column-picker.vue
+++ b/src/components/column-picker.vue
@@ -36,8 +36,7 @@
     setup() {
       const { isMobile } = useDevice();
       const columns = useXControlsHelpers({
-        controls: 'layout',
-        prop: 'columnSelector',
+        path: 'layout.columnSelector',
         defaultValue: [4, 2]
       });
 
diff --git a/src/components/search/custom-semantic-queries.vue b/src/components/search/custom-semantic-queries.vue
index 39458462..b9948b08 100644
--- a/src/components/search/custom-semantic-queries.vue
+++ b/src/components/search/custom-semantic-queries.vue
@@ -62,8 +62,7 @@
     setup() {
       const { isAnyQueryLoadedInPreview } = useQueriesPreview();
       const maxItems = useXControlsHelpers({
-        controls: 'semanticQueries',
-        prop: 'resultsPerCarousels'
+        path: 'semanticQueries.resultsPerCarousels'
       });
 
       return {
diff --git a/src/components/search/results/results.vue b/src/components/search/results/results.vue
index c1596908..acf31a57 100644
--- a/src/components/search/results/results.vue
+++ b/src/components/search/results/results.vue
@@ -77,8 +77,7 @@
     setup() {
       const { isMobile } = useDevice();
       const maxItems = useXControlsHelpers({
-        controls: 'nextQueries',
-        prop: 'maxItems',
+        path: 'nextQueries.maxItems',
         defaultValue: 1
       });
 
diff --git a/src/composables/use-experience-controls.composable.ts b/src/composables/use-experience-controls.composable.ts
index bfe4d2bb..3921e209 100644
--- a/src/composables/use-experience-controls.composable.ts
+++ b/src/composables/use-experience-controls.composable.ts
@@ -2,26 +2,26 @@ import { computed, ComputedRef, inject } from 'vue';
 import { Dictionary } from '@empathyco/x-utils';
 
 /**
- * Experience controls values per x-modules.
+ * Given a controls' object property chain, gets the experience controls values from the response.
  *
- * @param controls - The name of the xControls object that will be used.
- * @param prop - The name of the property value that will be set.
+ * @param path - The chain of properties in an xControls object.
  * @param defaultValue - A default value to set if xControls one is unavailable.
  *
- * @returns The experience controls utils.
+ * @returns The experience controls property value.
  */
 export const useXControlsHelpers = ({
-  controls,
-  prop,
+  path,
   defaultValue
 }: {
-  controls: string;
-  prop: string;
+  path: string;
   defaultValue?: string | number | boolean | number[];
 }): ComputedRef => {
   const experienceControls = inject<Dictionary>('experienceControls', {});
 
+  const getByPath = function <T>(this: T, key: string): any {
+    return key.split('.').reduce((obj, prop) => (obj as any)[prop], this);
+  };
   return computed(() => {
-    return experienceControls.value?.controls?.[controls]?.[prop] ?? defaultValue;
+    return getByPath.call(experienceControls.value?.controls, path) ?? defaultValue;
   });
 };

From 9498705f180984910d365a64e58a4afd17e87cfd Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Tue, 7 Nov 2023 12:21:13 +0100
Subject: [PATCH 08/15] feat: use getSafePropertyChain utility function

EMP-2722
---
 src/composables/use-experience-controls.composable.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/composables/use-experience-controls.composable.ts b/src/composables/use-experience-controls.composable.ts
index 3921e209..a218372e 100644
--- a/src/composables/use-experience-controls.composable.ts
+++ b/src/composables/use-experience-controls.composable.ts
@@ -1,5 +1,5 @@
 import { computed, ComputedRef, inject } from 'vue';
-import { Dictionary } from '@empathyco/x-utils';
+import { Dictionary, getSafePropertyChain } from '@empathyco/x-utils';
 
 /**
  * Given a controls' object property chain, gets the experience controls values from the response.
@@ -18,10 +18,7 @@ export const useXControlsHelpers = ({
 }): ComputedRef => {
   const experienceControls = inject<Dictionary>('experienceControls', {});
 
-  const getByPath = function <T>(this: T, key: string): any {
-    return key.split('.').reduce((obj, prop) => (obj as any)[prop], this);
-  };
   return computed(() => {
-    return getByPath.call(experienceControls.value?.controls, path) ?? defaultValue;
+    return getSafePropertyChain(experienceControls.value.controls, path, defaultValue);
   });
 };

From 4cfca1e4d6b42dd4af2f5067c616c898b8956c60 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Tue, 7 Nov 2023 13:44:53 +0100
Subject: [PATCH 09/15] feat(composables): create use-store composable + use it
 in XControls composable

EMP-2722
---
 src/components/column-picker.vue                  |  2 +-
 src/components/search/custom-semantic-queries.vue |  2 +-
 .../search/results/custom-next-query-preview.vue  |  8 +++++++-
 src/components/search/results/results.vue         |  2 +-
 .../use-experience-controls.composable.ts         | 13 ++++++++-----
 src/composables/use-store.composable.ts           | 15 +++++++++++++++
 6 files changed, 33 insertions(+), 9 deletions(-)
 create mode 100644 src/composables/use-store.composable.ts

diff --git a/src/components/column-picker.vue b/src/components/column-picker.vue
index b332acf2..5af4ac70 100644
--- a/src/components/column-picker.vue
+++ b/src/components/column-picker.vue
@@ -36,7 +36,7 @@
     setup() {
       const { isMobile } = useDevice();
       const columns = useXControlsHelpers({
-        path: 'layout.columnSelector',
+        path: 'layout.columnSelector' as never,
         defaultValue: [4, 2]
       });
 
diff --git a/src/components/search/custom-semantic-queries.vue b/src/components/search/custom-semantic-queries.vue
index b9948b08..e578ff60 100644
--- a/src/components/search/custom-semantic-queries.vue
+++ b/src/components/search/custom-semantic-queries.vue
@@ -62,7 +62,7 @@
     setup() {
       const { isAnyQueryLoadedInPreview } = useQueriesPreview();
       const maxItems = useXControlsHelpers({
-        path: 'semanticQueries.resultsPerCarousels'
+        path: 'semanticQueries.resultsPerCarousels' as never
       });
 
       return {
diff --git a/src/components/search/results/custom-next-query-preview.vue b/src/components/search/results/custom-next-query-preview.vue
index 17f3dbde..a305fac8 100644
--- a/src/components/search/results/custom-next-query-preview.vue
+++ b/src/components/search/results/custom-next-query-preview.vue
@@ -45,6 +45,7 @@
   import Result from '../../results/result.vue';
   import CustomSlidingPanel from '../../custom-sliding-panel.vue';
   import DisplayClickProvider from '../display-click-provider.vue';
+  import { useXControlsHelpers } from '../../../composables/use-experience-controls.composable';
 
   export default defineComponent({
     components: {
@@ -61,7 +62,12 @@
     },
     setup() {
       const { isTabletOrLess } = useDevice();
-      const maxItemsToRender = computed(() => (isTabletOrLess.value ? undefined : 5));
+      const maxItems = useXControlsHelpers({
+        path: 'nextQueries.maxItems' as never,
+        defaultValue: 5
+      });
+
+      const maxItemsToRender = computed(() => (isTabletOrLess.value ? undefined : maxItems));
       return {
         maxItemsToRender
       };
diff --git a/src/components/search/results/results.vue b/src/components/search/results/results.vue
index acf31a57..0af31d6d 100644
--- a/src/components/search/results/results.vue
+++ b/src/components/search/results/results.vue
@@ -77,7 +77,7 @@
     setup() {
       const { isMobile } = useDevice();
       const maxItems = useXControlsHelpers({
-        path: 'nextQueries.maxItems',
+        path: 'nextQueries.maxItems' as never,
         defaultValue: 1
       });
 
diff --git a/src/composables/use-experience-controls.composable.ts b/src/composables/use-experience-controls.composable.ts
index a218372e..3c99101a 100644
--- a/src/composables/use-experience-controls.composable.ts
+++ b/src/composables/use-experience-controls.composable.ts
@@ -1,5 +1,7 @@
-import { computed, ComputedRef, inject } from 'vue';
-import { Dictionary, getSafePropertyChain } from '@empathyco/x-utils';
+import { computed, ComputedRef } from 'vue';
+import { getSafePropertyChain } from '@empathyco/x-utils';
+import { ExperienceControlsState } from '@empathyco/x-components/experience-controls';
+import { useStore } from './use-store.composable';
 
 /**
  * Given a controls' object property chain, gets the experience controls values from the response.
@@ -13,12 +15,13 @@ export const useXControlsHelpers = ({
   path,
   defaultValue
 }: {
-  path: string;
+  path: never;
   defaultValue?: string | number | boolean | number[];
 }): ComputedRef => {
-  const experienceControls = inject<Dictionary>('experienceControls', {});
+  const experienceControls = (useStore('experienceControls') as unknown as ExperienceControlsState)
+    .controls.controls;
 
   return computed(() => {
-    return getSafePropertyChain(experienceControls.value.controls, path, defaultValue);
+    return getSafePropertyChain(experienceControls, path, defaultValue);
   });
 };
diff --git a/src/composables/use-store.composable.ts b/src/composables/use-store.composable.ts
new file mode 100644
index 00000000..2248c564
--- /dev/null
+++ b/src/composables/use-store.composable.ts
@@ -0,0 +1,15 @@
+import { getCurrentInstance } from 'vue';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { RootXStoreState, StatusState, XModuleName, XModulesTree } from '@empathyco/x-components';
+
+/**
+ * Provides access to the global store object or to the specific store module if it's provided.
+ *
+ * @param storeModule - The {@link XModuleName}.
+ * @returns A state object.
+ */
+export function useStore(storeModule?: keyof XModulesTree): RootXStoreState | StatusState {
+  return storeModule
+    ? getCurrentInstance()!.proxy.$root.$store.state.x[storeModule]
+    : getCurrentInstance()!.proxy.$root.$store.state.x;
+}

From 74e6dd297421fc1b57f0c2dd7942b5d596713afd Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Tue, 7 Nov 2023 13:45:26 +0100
Subject: [PATCH 10/15] feat(app): rm provider as module is accessible using
 composable f()

EMP-2722
---
 src/App.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0278d5b3..877f2a0b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -61,11 +61,6 @@
       return this.snippetConfig.queriesPreview;
     }
 
-    @XProvide('experienceControls')
-    public get experienceControls(): QueryPreviewInfo[] | undefined {
-      return this.$store.state.x.experienceControls.controls;
-    }
-
     @Watch('snippetConfig.uiLang')
     syncLang(uiLang: string): void {
       this.$setLocale(uiLang);

From 9e8cd12e4f9ae654ebd46401bfdaac28acf2d512 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Tue, 7 Nov 2023 13:47:28 +0100
Subject: [PATCH 11/15] chore: rm test useXControls feat from
 custom-next-query-preview

EMP-2722
---
 .../search/results/custom-next-query-preview.vue          | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/search/results/custom-next-query-preview.vue b/src/components/search/results/custom-next-query-preview.vue
index a305fac8..17f3dbde 100644
--- a/src/components/search/results/custom-next-query-preview.vue
+++ b/src/components/search/results/custom-next-query-preview.vue
@@ -45,7 +45,6 @@
   import Result from '../../results/result.vue';
   import CustomSlidingPanel from '../../custom-sliding-panel.vue';
   import DisplayClickProvider from '../display-click-provider.vue';
-  import { useXControlsHelpers } from '../../../composables/use-experience-controls.composable';
 
   export default defineComponent({
     components: {
@@ -62,12 +61,7 @@
     },
     setup() {
       const { isTabletOrLess } = useDevice();
-      const maxItems = useXControlsHelpers({
-        path: 'nextQueries.maxItems' as never,
-        defaultValue: 5
-      });
-
-      const maxItemsToRender = computed(() => (isTabletOrLess.value ? undefined : maxItems));
+      const maxItemsToRender = computed(() => (isTabletOrLess.value ? undefined : 5));
       return {
         maxItemsToRender
       };

From 49f0f15e3d606d470c9885242d4881e0cb874f70 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Tue, 7 Nov 2023 13:48:36 +0100
Subject: [PATCH 12/15] chore: rename composable to avoid large string

EMP-2722
---
 src/components/column-picker.vue                      | 4 ++--
 src/components/search/custom-semantic-queries.vue     | 4 ++--
 src/components/search/results/results.vue             | 4 ++--
 src/composables/use-experience-controls.composable.ts | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/column-picker.vue b/src/components/column-picker.vue
index 5af4ac70..636d09cd 100644
--- a/src/components/column-picker.vue
+++ b/src/components/column-picker.vue
@@ -24,7 +24,7 @@
     Grid4ColIcon
   } from '@empathyco/x-components';
   import { useDevice } from '../composables/use-device.composable';
-  import { useXControlsHelpers } from '../composables/use-experience-controls.composable';
+  import { useXControls } from '../composables/use-experience-controls.composable';
 
   export default defineComponent({
     components: {
@@ -35,7 +35,7 @@
     },
     setup() {
       const { isMobile } = useDevice();
-      const columns = useXControlsHelpers({
+      const columns = useXControls({
         path: 'layout.columnSelector' as never,
         defaultValue: [4, 2]
       });
diff --git a/src/components/search/custom-semantic-queries.vue b/src/components/search/custom-semantic-queries.vue
index e578ff60..c42d5810 100644
--- a/src/components/search/custom-semantic-queries.vue
+++ b/src/components/search/custom-semantic-queries.vue
@@ -46,7 +46,7 @@
   import { QueryPreviewList, useQueriesPreview } from '@empathyco/x-components/queries-preview';
   import CustomSlidingPanel from '../custom-sliding-panel.vue';
   import Result from '../results/result.vue';
-  import { useXControlsHelpers } from '../../composables/use-experience-controls.composable';
+  import { useXControls } from '../../composables/use-experience-controls.composable';
   import DisplayClickProvider from './display-click-provider.vue';
 
   export default defineComponent({
@@ -61,7 +61,7 @@
     },
     setup() {
       const { isAnyQueryLoadedInPreview } = useQueriesPreview();
-      const maxItems = useXControlsHelpers({
+      const maxItems = useXControls({
         path: 'semanticQueries.resultsPerCarousels' as never
       });
 
diff --git a/src/components/search/results/results.vue b/src/components/search/results/results.vue
index 0af31d6d..4b7a740b 100644
--- a/src/components/search/results/results.vue
+++ b/src/components/search/results/results.vue
@@ -55,7 +55,7 @@
   import { NextQueriesList } from '@empathyco/x-components/next-queries';
   import { useDevice } from '../../../composables/use-device.composable';
   import Result from '../../results/result.vue';
-  import { useXControlsHelpers } from '../../../composables/use-experience-controls.composable';
+  import { useXControls } from '../../../composables/use-experience-controls.composable';
   import NextQueryPreview from './custom-next-query-preview.vue';
 
   export default defineComponent({
@@ -76,7 +76,7 @@
     },
     setup() {
       const { isMobile } = useDevice();
-      const maxItems = useXControlsHelpers({
+      const maxItems = useXControls({
         path: 'nextQueries.maxItems' as never,
         defaultValue: 1
       });
diff --git a/src/composables/use-experience-controls.composable.ts b/src/composables/use-experience-controls.composable.ts
index 3c99101a..b8984b43 100644
--- a/src/composables/use-experience-controls.composable.ts
+++ b/src/composables/use-experience-controls.composable.ts
@@ -11,7 +11,7 @@ import { useStore } from './use-store.composable';
  *
  * @returns The experience controls property value.
  */
-export const useXControlsHelpers = ({
+export const useXControls = ({
   path,
   defaultValue
 }: {

From 8b41dca775a13fe286ce3967ef3a7633cc7c6c50 Mon Sep 17 00:00:00 2001
From: anna condal <acondalv@gmail.com>
Date: Thu, 9 Nov 2023 15:26:19 +0100
Subject: [PATCH 13/15] Update
 src/composables/use-experience-controls.composable.ts

Co-authored-by: Guillermo Cacheda <cachedacodes@gmail.com>
---
 .../use-experience-controls.composable.ts     | 35 ++++++++++++-------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/composables/use-experience-controls.composable.ts b/src/composables/use-experience-controls.composable.ts
index b8984b43..8e14b8e8 100644
--- a/src/composables/use-experience-controls.composable.ts
+++ b/src/composables/use-experience-controls.composable.ts
@@ -11,17 +11,28 @@ import { useStore } from './use-store.composable';
  *
  * @returns The experience controls property value.
  */
-export const useXControls = ({
-  path,
-  defaultValue
-}: {
-  path: never;
-  defaultValue?: string | number | boolean | number[];
-}): ComputedRef => {
-  const experienceControls = (useStore('experienceControls') as unknown as ExperienceControlsState)
-    .controls.controls;
+// Rename
+export const useExperienceControls = (): {
+  getControlFromPath: <SomeType>(path: string, defaultValue?: SomeType) => ComputedRef<SomeType>;
+} => {
+  const experienceControls = (useStore('experienceControls') as ExperienceControlsState).controls
+    .controls;
 
-  return computed(() => {
-    return getSafePropertyChain(experienceControls, path, defaultValue);
-  });
+// extracted the current logic to a function. The function can be typed so the return type is known and also it infers the return type from the default value
+  const getControlFromPath = <SomeType>(
+    path: string,
+    defaultValue?: SomeType
+  ): ComputedRef<SomeType> => {
+    return computed(() => {
+      return getSafePropertyChain(
+        experienceControls,
+        path as ExtractPath<typeof experienceControls>,
+        defaultValue
+      ) as SomeType;
+    });
+  };
+
+  return {
+    getControlFromPath
+  };
 };

From 879ef278b0bafc3551fa6e3141fe1a2e22d7fe03 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Thu, 9 Nov 2023 15:36:43 +0100
Subject: [PATCH 14/15] chore: PR fixes

EMP-2722
---
 src/components/column-picker.vue                      |  7 ++-----
 src/components/search/custom-semantic-queries.vue     |  8 ++++----
 src/components/search/results/results.vue             |  7 ++-----
 src/composables/use-experience-controls.composable.ts | 11 ++++-------
 src/composables/use-store.composable.ts               |  1 +
 5 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/src/components/column-picker.vue b/src/components/column-picker.vue
index 636d09cd..3604704c 100644
--- a/src/components/column-picker.vue
+++ b/src/components/column-picker.vue
@@ -24,7 +24,7 @@
     Grid4ColIcon
   } from '@empathyco/x-components';
   import { useDevice } from '../composables/use-device.composable';
-  import { useXControls } from '../composables/use-experience-controls.composable';
+  import { useExperienceControls } from '../composables/use-experience-controls.composable';
 
   export default defineComponent({
     components: {
@@ -35,10 +35,7 @@
     },
     setup() {
       const { isMobile } = useDevice();
-      const columns = useXControls({
-        path: 'layout.columnSelector' as never,
-        defaultValue: [4, 2]
-      });
+      const columns = useExperienceControls().getControlFromPath('layout.columnSelector', [4, 2]);
 
       return {
         values: computed(() => (isMobile.value ? [2, 1] : columns)),
diff --git a/src/components/search/custom-semantic-queries.vue b/src/components/search/custom-semantic-queries.vue
index c42d5810..ba618078 100644
--- a/src/components/search/custom-semantic-queries.vue
+++ b/src/components/search/custom-semantic-queries.vue
@@ -46,7 +46,7 @@
   import { QueryPreviewList, useQueriesPreview } from '@empathyco/x-components/queries-preview';
   import CustomSlidingPanel from '../custom-sliding-panel.vue';
   import Result from '../results/result.vue';
-  import { useXControls } from '../../composables/use-experience-controls.composable';
+  import { useExperienceControls } from '../../composables/use-experience-controls.composable';
   import DisplayClickProvider from './display-click-provider.vue';
 
   export default defineComponent({
@@ -61,9 +61,9 @@
     },
     setup() {
       const { isAnyQueryLoadedInPreview } = useQueriesPreview();
-      const maxItems = useXControls({
-        path: 'semanticQueries.resultsPerCarousels' as never
-      });
+      const maxItems = useExperienceControls().getControlFromPath(
+        'semanticQueries.resultsPerCarousels'
+      );
 
       return {
         isAnyQueryLoadedInPreview,
diff --git a/src/components/search/results/results.vue b/src/components/search/results/results.vue
index 4b7a740b..6b732477 100644
--- a/src/components/search/results/results.vue
+++ b/src/components/search/results/results.vue
@@ -55,7 +55,7 @@
   import { NextQueriesList } from '@empathyco/x-components/next-queries';
   import { useDevice } from '../../../composables/use-device.composable';
   import Result from '../../results/result.vue';
-  import { useXControls } from '../../../composables/use-experience-controls.composable';
+  import { useExperienceControls } from '../../../composables/use-experience-controls.composable';
   import NextQueryPreview from './custom-next-query-preview.vue';
 
   export default defineComponent({
@@ -76,10 +76,7 @@
     },
     setup() {
       const { isMobile } = useDevice();
-      const maxItems = useXControls({
-        path: 'nextQueries.maxItems' as never,
-        defaultValue: 1
-      });
+      const maxItems = useExperienceControls().getControlFromPath('nextQueries.maxItems', 1);
 
       return {
         staggeredFadeAndSlide: StaggeredFadeAndSlide,
diff --git a/src/composables/use-experience-controls.composable.ts b/src/composables/use-experience-controls.composable.ts
index 8e14b8e8..cf534012 100644
--- a/src/composables/use-experience-controls.composable.ts
+++ b/src/composables/use-experience-controls.composable.ts
@@ -1,24 +1,21 @@
 import { computed, ComputedRef } from 'vue';
-import { getSafePropertyChain } from '@empathyco/x-utils';
+import { ExtractPath, getSafePropertyChain } from '@empathyco/x-utils';
 import { ExperienceControlsState } from '@empathyco/x-components/experience-controls';
 import { useStore } from './use-store.composable';
 
 /**
  * Given a controls' object property chain, gets the experience controls values from the response.
+ * A defaultValue can be set as a safeguard in case the controls response was empty.
  *
- * @param path - The chain of properties in an xControls object.
- * @param defaultValue - A default value to set if xControls one is unavailable.
- *
- * @returns The experience controls property value.
+ * @returns An object containing the function to search for a configuration
+ * and set the experience controls property value.
  */
-// Rename
 export const useExperienceControls = (): {
   getControlFromPath: <SomeType>(path: string, defaultValue?: SomeType) => ComputedRef<SomeType>;
 } => {
   const experienceControls = (useStore('experienceControls') as ExperienceControlsState).controls
     .controls;
 
-// extracted the current logic to a function. The function can be typed so the return type is known and also it infers the return type from the default value
   const getControlFromPath = <SomeType>(
     path: string,
     defaultValue?: SomeType
diff --git a/src/composables/use-store.composable.ts b/src/composables/use-store.composable.ts
index 2248c564..943ef6e5 100644
--- a/src/composables/use-store.composable.ts
+++ b/src/composables/use-store.composable.ts
@@ -1,3 +1,4 @@
+// TODO: Change when useStore composable is added in x-components
 import { getCurrentInstance } from 'vue';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { RootXStoreState, StatusState, XModuleName, XModulesTree } from '@empathyco/x-components';

From f6b110dcb5a3b92587ced94bd36cbd279ebdc292 Mon Sep 17 00:00:00 2001
From: Guillermo <cachedacodes@gmail.com>
Date: Mon, 13 Nov 2023 11:55:26 +0100
Subject: [PATCH 15/15] chore: refactor

---
 src/adapter/adapter.ts                                |  6 +++---
 src/components/column-picker.vue                      |  8 ++++++--
 src/components/search/custom-semantic-queries.vue     |  6 ++----
 src/components/search/results/results.vue             |  4 ++--
 src/composables/use-experience-controls.composable.ts | 11 +++--------
 5 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/adapter/adapter.ts b/src/adapter/adapter.ts
index 225b2b9f..d83818b9 100644
--- a/src/adapter/adapter.ts
+++ b/src/adapter/adapter.ts
@@ -6,8 +6,7 @@ import {
   recommendationsRequestSchema,
   resultSchema,
   semanticQueriesRequestSchema,
-  experienceControlsResponseSchema,
-  PlatformExperienceControlsResponse
+  experienceControlsResponseSchema
 } from '@empathyco/x-adapter-platform';
 import {
   ExperienceControlsResponse,
@@ -63,9 +62,10 @@ semanticQueriesRequestSchema.$override<
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-call
 experienceControlsResponseSchema.$override<
-  PlatformExperienceControlsResponse,
+  Partial<ExperienceControlsResponse>,
   Partial<ExperienceControlsResponse>
 >({
+  controls: ({ controls }) => controls,
   events: {
     SemanticQueriesConfigProvided: {
       maxItemsToRequest: 'controls.semanticQueries.numberOfCarousels',
diff --git a/src/components/column-picker.vue b/src/components/column-picker.vue
index 3604704c..ca91a75e 100644
--- a/src/components/column-picker.vue
+++ b/src/components/column-picker.vue
@@ -35,10 +35,14 @@
     },
     setup() {
       const { isMobile } = useDevice();
-      const columns = useExperienceControls().getControlFromPath('layout.columnSelector', [4, 2]);
+      const { getControlFromPath } = useExperienceControls();
+
+      const columns = computed(() =>
+        isMobile.value ? [2, 1] : getControlFromPath('layout.columnSelector', [4, 2])
+      );
 
       return {
-        values: computed(() => (isMobile.value ? [2, 1] : columns)),
+        values: columns,
         icons: { 1: 'Grid1ColIcon', 2: 'Grid2ColIcon', 4: 'Grid4ColIcon' }
       };
     }
diff --git a/src/components/search/custom-semantic-queries.vue b/src/components/search/custom-semantic-queries.vue
index ba618078..efbdf4fd 100644
--- a/src/components/search/custom-semantic-queries.vue
+++ b/src/components/search/custom-semantic-queries.vue
@@ -61,13 +61,11 @@
     },
     setup() {
       const { isAnyQueryLoadedInPreview } = useQueriesPreview();
-      const maxItems = useExperienceControls().getControlFromPath(
-        'semanticQueries.resultsPerCarousels'
-      );
+      const { getControlFromPath } = useExperienceControls();
 
       return {
         isAnyQueryLoadedInPreview,
-        resultsPerCarousel: maxItems
+        resultsPerCarousel: getControlFromPath('semanticQueries.resultsPerCarousels')
       };
     }
   });
diff --git a/src/components/search/results/results.vue b/src/components/search/results/results.vue
index 6b732477..5428bd14 100644
--- a/src/components/search/results/results.vue
+++ b/src/components/search/results/results.vue
@@ -76,12 +76,12 @@
     },
     setup() {
       const { isMobile } = useDevice();
-      const maxItems = useExperienceControls().getControlFromPath('nextQueries.maxItems', 1);
+      const { getControlFromPath } = useExperienceControls();
 
       return {
         staggeredFadeAndSlide: StaggeredFadeAndSlide,
         columns: isMobile.value ? 2 : 4,
-        maxNextQueriesPerGroup: maxItems
+        maxNextQueriesPerGroup: getControlFromPath('nextQueries.maxItems', 1)
       };
     }
   });
diff --git a/src/composables/use-experience-controls.composable.ts b/src/composables/use-experience-controls.composable.ts
index cf534012..28bf9f10 100644
--- a/src/composables/use-experience-controls.composable.ts
+++ b/src/composables/use-experience-controls.composable.ts
@@ -1,5 +1,5 @@
 import { computed, ComputedRef } from 'vue';
-import { ExtractPath, getSafePropertyChain } from '@empathyco/x-utils';
+import { getSafePropertyChain } from '@empathyco/x-utils';
 import { ExperienceControlsState } from '@empathyco/x-components/experience-controls';
 import { useStore } from './use-store.composable';
 
@@ -13,19 +13,14 @@ import { useStore } from './use-store.composable';
 export const useExperienceControls = (): {
   getControlFromPath: <SomeType>(path: string, defaultValue?: SomeType) => ComputedRef<SomeType>;
 } => {
-  const experienceControls = (useStore('experienceControls') as ExperienceControlsState).controls
-    .controls;
+  const experienceControls = (useStore('experienceControls') as ExperienceControlsState).controls;
 
   const getControlFromPath = <SomeType>(
     path: string,
     defaultValue?: SomeType
   ): ComputedRef<SomeType> => {
     return computed(() => {
-      return getSafePropertyChain(
-        experienceControls,
-        path as ExtractPath<typeof experienceControls>,
-        defaultValue
-      ) as SomeType;
+      return getSafePropertyChain(experienceControls, path, defaultValue) as SomeType;
     });
   };