feat: Use XControls in NextQueries and Layout

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',

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);

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',

src/components/column-picker.vue

@@ -24,6 +24,7 @@
     Grid4ColIcon
   } from '@empathyco/x-components';
   import { useDevice } from '../composables/use-device.composable';
+  import { useExperienceControls } from '../composables/use-experience-controls.composable';
 
   export default defineComponent({
     components: {
@@ -34,8 +35,14 @@
     },
     setup() {
       const { isMobile } = useDevice();
+      const { getControlFromPath } = useExperienceControls();
+
+      const columns = computed(() =>
+        isMobile.value ? [2, 1] : getControlFromPath('layout.columnSelector', [4, 2])
+      );
+
       return {
-        values: computed(() => (isMobile.value ? [2, 1] : [4, 2])),
+        values: columns,
         icons: { 1: 'Grid1ColIcon', 2: 'Grid2ColIcon', 4: 'Grid4ColIcon' }
       };
     }

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 { useExperienceControls } from '../../composables/use-experience-controls.composable';
   import DisplayClickProvider from './display-click-provider.vue';
 
   export default defineComponent({
@@ -61,19 +61,11 @@
     },
     setup() {
       const { isAnyQueryLoadedInPreview } = useQueriesPreview();
-
-      const experienceControls = inject<Dictionary>('experienceControls', {});
-
-      const resultsPerCarousel = computed(() => {
-        const resultsPerCarousel: number =
-          experienceControls.value?.controls?.semanticQueries?.resultsPerCarousels;
-
-        return resultsPerCarousel ?? undefined;
-      });
+      const { getControlFromPath } = useExperienceControls();
 
       return {
         isAnyQueryLoadedInPreview,
-        resultsPerCarousel
+        resultsPerCarousel: getControlFromPath('semanticQueries.resultsPerCarousels')
       };
     }
   });

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,7 @@
   import { NextQueriesList } from '@empathyco/x-components/next-queries';
   import { useDevice } from '../../../composables/use-device.composable';
   import Result from '../../results/result.vue';
+  import { useExperienceControls } from '../../../composables/use-experience-controls.composable';
   import NextQueryPreview from './custom-next-query-preview.vue';
 
   export default defineComponent({
@@ -75,7 +76,13 @@
     },
     setup() {
       const { isMobile } = useDevice();
-      return { staggeredFadeAndSlide: StaggeredFadeAndSlide, columns: isMobile.value ? 2 : 4 };
+      const { getControlFromPath } = useExperienceControls();
+
+      return {
+        staggeredFadeAndSlide: StaggeredFadeAndSlide,
+        columns: isMobile.value ? 2 : 4,
+        maxNextQueriesPerGroup: getControlFromPath('nextQueries.maxItems', 1)
+      };
     }
   });
 </script>

src/composables/use-experience-controls.composable.ts

@@ -0,0 +1,30 @@
+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.
+ * A defaultValue can be set as a safeguard in case the controls response was empty.
+ *
+ * @returns An object containing the function to search for a configuration
+ * and set the experience controls property value.
+ */
+export const useExperienceControls = (): {
+  getControlFromPath: <SomeType>(path: string, defaultValue?: SomeType) => ComputedRef<SomeType>;
+} => {
+  const experienceControls = (useStore('experienceControls') as ExperienceControlsState).controls;
+
+  const getControlFromPath = <SomeType>(
+    path: string,
+    defaultValue?: SomeType
+  ): ComputedRef<SomeType> => {
+    return computed(() => {
+      return getSafePropertyChain(experienceControls, path, defaultValue) as SomeType;
+    });
+  };
+
+  return {
+    getControlFromPath
+  };
+};

src/composables/use-store.composable.ts

@@ -0,0 +1,16 @@
+// 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';
+
+/**
+ * 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;
+}