From 4326f6f6eef14b62ffd52b9f9c020dcfb860ff79 Mon Sep 17 00:00:00 2001
From: Guillermo Cacheda <cachedacodes@gmail.com>
Date: Mon, 16 Oct 2023 14:11:01 +0200
Subject: [PATCH] feat: apply experience controls for the semantic queries
 (#326)

EMP-2375
---
 package-lock.json                             | 55 ++++++++++---------
 package.json                                  | 14 ++---
 src/App.vue                                   |  8 +++
 src/adapter/adapter.ts                        | 31 ++++++++++-
 .../search/custom-semantic-queries.vue        | 17 +++++-
 src/shims-x-components.d.ts                   |  7 +++
 src/x-components/plugin.options.ts            |  7 +++
 .../wiring/semantic-queries.wiring.ts         |  7 +++
 8 files changed, 107 insertions(+), 39 deletions(-)
 create mode 100644 src/shims-x-components.d.ts
 create mode 100644 src/x-components/wiring/semantic-queries.wiring.ts

diff --git a/package-lock.json b/package-lock.json
index b2d8417d..f0a95b65 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,13 +9,13 @@
       "version": "1.0.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@empathyco/x-adapter": "^8.0.0-alpha.33",
-        "@empathyco/x-adapter-platform": "^1.0.0-alpha.83",
-        "@empathyco/x-archetype-utils": "^1.0.0-alpha.3",
-        "@empathyco/x-components": "^3.0.0-alpha.414",
-        "@empathyco/x-deep-merge": "^1.3.0-alpha.29",
-        "@empathyco/x-types": "^10.0.0-alpha.72",
-        "@empathyco/x-utils": "^1.0.0-alpha.20",
+        "@empathyco/x-adapter": "^8.0.0-alpha.34",
+        "@empathyco/x-adapter-platform": "^1.0.0-alpha.88",
+        "@empathyco/x-archetype-utils": "^1.0.0-alpha.4",
+        "@empathyco/x-components": "^3.0.0-alpha.422",
+        "@empathyco/x-deep-merge": "^1.3.0-alpha.34",
+        "@empathyco/x-types": "^10.0.0-alpha.75",
+        "@empathyco/x-utils": "^1.0.0-alpha.23",
         "tslib": "~2.4.1",
         "vue": "~2.7.14",
         "vue-class-component": "~7.2.6",
@@ -2089,12 +2089,12 @@
       }
     },
     "node_modules/@empathyco/x-adapter-platform": {
-      "version": "1.0.0-alpha.85",
-      "resolved": "https://registry.npmjs.org/@empathyco/x-adapter-platform/-/x-adapter-platform-1.0.0-alpha.85.tgz",
-      "integrity": "sha512-RrXFWUgqSDwAzlvYLCHHPmKgKkQKNKwmptvoiHXd3CAX0Jab6JCTG+c9t2MmDYV9hCAxDrjbFEtRMwX1M2sM5w==",
+      "version": "1.0.0-alpha.88",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-adapter-platform/-/x-adapter-platform-1.0.0-alpha.88.tgz",
+      "integrity": "sha512-efA/kQvy+k+zdczN0bwUbxzxNb1rl+0EU1Wshf74ihbpWIPiQT5cOTNCvj1ZuvK3UmG6uzVsioiCrlO7Yn/Aig==",
       "dependencies": {
         "@empathyco/x-adapter": "^8.0.0-alpha.34",
-        "@empathyco/x-types": "^10.0.0-alpha.73",
+        "@empathyco/x-types": "^10.0.0-alpha.75",
         "@empathyco/x-utils": "^1.0.0-alpha.23",
         "tslib": "~2.5.0"
       },
@@ -2125,11 +2125,11 @@
       "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
     },
     "node_modules/@empathyco/x-archetype-utils": {
-      "version": "1.0.0-alpha.3",
-      "resolved": "https://registry.npmjs.org/@empathyco/x-archetype-utils/-/x-archetype-utils-1.0.0-alpha.3.tgz",
-      "integrity": "sha512-M3INzSFM0SKtwEk0P6gCRKuTQtg+KgPcLkqJAq9NWS0axiuwz7dBwWDCimITTN1550Fcofcz3SCURwthlYI33w==",
+      "version": "1.0.0-alpha.4",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-archetype-utils/-/x-archetype-utils-1.0.0-alpha.4.tgz",
+      "integrity": "sha512-Hn7KcE9zWj6JSOex8WQqze0Q9L4+6X293I3EMOU6Xmng5LKoQY/UpgnF7Fp0nEJSp6SfJvZ9YehHHWhLrrFd3Q==",
       "dependencies": {
-        "@empathyco/x-deep-merge": "^2.0.0-alpha.2",
+        "@empathyco/x-deep-merge": "^2.0.0-alpha.3",
         "tslib": "~2.5.0",
         "vue-i18n": "~8.28.2"
       },
@@ -2142,11 +2142,11 @@
       }
     },
     "node_modules/@empathyco/x-archetype-utils/node_modules/@empathyco/x-deep-merge": {
-      "version": "2.0.0-alpha.2",
-      "resolved": "https://registry.npmjs.org/@empathyco/x-deep-merge/-/x-deep-merge-2.0.0-alpha.2.tgz",
-      "integrity": "sha512-C1/jZ/70oceI9Uxc9tGv692AKuzgl/BAFE1lYN5T1ubgduexI+Z8JgHbV6FTZQBKyGrap3E/o32/5i04naieAQ==",
+      "version": "2.0.0-alpha.3",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-deep-merge/-/x-deep-merge-2.0.0-alpha.3.tgz",
+      "integrity": "sha512-qvHvEVt3FoZXdlfxvEQExxF/q6F+wgTKdd9TIOxWUjZUlajrLdLXXWPnmBp5iEnz4Xzz4yxeHKdPRV1kv9aU2g==",
       "dependencies": {
-        "@empathyco/x-utils": "^1.0.0-alpha.22",
+        "@empathyco/x-utils": "^1.0.0-alpha.23",
         "tslib": "~2.5.0"
       },
       "engines": {
@@ -2183,17 +2183,17 @@
       "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
     },
     "node_modules/@empathyco/x-components": {
-      "version": "3.0.0-alpha.414",
-      "resolved": "https://registry.npmjs.org/@empathyco/x-components/-/x-components-3.0.0-alpha.414.tgz",
-      "integrity": "sha512-STKDMja1Xe6LoIjHZ5thYIZNGa8+c+sV2f8Met/TFf6MjVPe16vjlSOlU1KDRv5ZMhc/IQl6F2t4EvZ4C9yS0w==",
+      "version": "3.0.0-alpha.422",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-components/-/x-components-3.0.0-alpha.422.tgz",
+      "integrity": "sha512-prYfv/TVvJUTnbxrsembCqyhdfuVrlpGoEW0speP/9G2Xm2DzE+E5NMvugYkzNaVU+hkZHx3S2eRK5Z1TH8yoA==",
       "dependencies": {
         "@empathyco/x-adapter": "^8.0.0-alpha.34",
-        "@empathyco/x-adapter-platform": "^1.0.0-alpha.85",
+        "@empathyco/x-adapter-platform": "^1.0.0-alpha.88",
         "@empathyco/x-bus": "^1.0.0-alpha.4",
         "@empathyco/x-deep-merge": "^2.0.0-alpha.3",
         "@empathyco/x-logger": "^1.2.0-alpha.11",
         "@empathyco/x-storage-service": "^2.0.0-alpha.15",
-        "@empathyco/x-types": "^10.0.0-alpha.73",
+        "@empathyco/x-types": "^10.0.0-alpha.75",
         "@empathyco/x-utils": "^1.0.0-alpha.23",
         "@vue/devtools-api": "~6.5.0",
         "@vueuse/core": "~10.1.0",
@@ -2373,11 +2373,12 @@
       }
     },
     "node_modules/@empathyco/x-types": {
-      "version": "10.0.0-alpha.73",
-      "resolved": "https://registry.npmjs.org/@empathyco/x-types/-/x-types-10.0.0-alpha.73.tgz",
-      "integrity": "sha512-brIP6+ewUGG10gEGLVuokC7Q3A/pn8o+74gm7zbqrEA/+xAVEvCSAbBsJ3X6BobCYP7BMfMD1SVoQ9mkPeA2wg==",
+      "version": "10.0.0-alpha.75",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-types/-/x-types-10.0.0-alpha.75.tgz",
+      "integrity": "sha512-JwTmYhIDu7wv82e7L5G2sbTloEd+KGXm2jNZlrwhg3NAS8XPRG7WAyGBXtWi106TAz7MW6p3hPclpwR4s9/cYg==",
       "dependencies": {
         "@empathyco/x-adapter": "^8.0.0-alpha.34",
+        "@empathyco/x-utils": "^1.0.0-alpha.23",
         "tslib": "~2.5.0"
       },
       "engines": {
diff --git a/package.json b/package.json
index fe91bb7d..6b2f76fe 100644
--- a/package.json
+++ b/package.json
@@ -29,13 +29,13 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@empathyco/x-adapter": "^8.0.0-alpha.33",
-    "@empathyco/x-adapter-platform": "^1.0.0-alpha.83",
-    "@empathyco/x-archetype-utils": "^1.0.0-alpha.3",
-    "@empathyco/x-components": "^3.0.0-alpha.414",
-    "@empathyco/x-deep-merge": "^1.3.0-alpha.29",
-    "@empathyco/x-types": "^10.0.0-alpha.72",
-    "@empathyco/x-utils": "^1.0.0-alpha.20",
+    "@empathyco/x-adapter": "^8.0.0-alpha.34",
+    "@empathyco/x-adapter-platform": "^1.0.0-alpha.88",
+    "@empathyco/x-archetype-utils": "^1.0.0-alpha.4",
+    "@empathyco/x-components": "^3.0.0-alpha.422",
+    "@empathyco/x-deep-merge": "^1.3.0-alpha.34",
+    "@empathyco/x-types": "^10.0.0-alpha.75",
+    "@empathyco/x-utils": "^1.0.0-alpha.23",
     "tslib": "~2.4.1",
     "vue": "~2.7.14",
     "vue-class-component": "~7.2.6",
diff --git a/src/App.vue b/src/App.vue
index 9babad81..0278d5b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,12 +4,14 @@
     <SnippetCallbacks />
     <Tagging />
     <UrlHandler />
+    <ExperienceControls />
     <MainModal v-if="isOpen" />
   </div>
 </template>
 
 <script lang="ts">
   import { SnippetCallbacks, SnippetConfig, XOn, XProvide } from '@empathyco/x-components';
+  import { ExperienceControls } from '@empathyco/x-components/experience-controls';
   import { Tagging } from '@empathyco/x-components/tagging';
   import { QueryPreviewInfo } from '@empathyco/x-components/queries-preview';
   import { UrlHandler } from '@empathyco/x-components/url';
@@ -25,6 +27,7 @@
       SnippetConfigExtraParams,
       Tagging,
       UrlHandler,
+      ExperienceControls,
       MainModal: () => import('./components/custom-main-modal.vue').then(m => m.default)
     }
   })
@@ -58,6 +61,11 @@
       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);
diff --git a/src/adapter/adapter.ts b/src/adapter/adapter.ts
index bab67794..a1696ed9 100644
--- a/src/adapter/adapter.ts
+++ b/src/adapter/adapter.ts
@@ -5,9 +5,16 @@ import {
   PlatformResult,
   recommendationsRequestSchema,
   resultSchema,
-  semanticQueriesRequestSchema
+  semanticQueriesRequestSchema,
+  experienceControlsResponseSchema,
+  PlatformExperienceControlsResponse
 } from '@empathyco/x-adapter-platform';
-import { RecommendationsRequest, Result, SemanticQueriesRequest } from '@empathyco/x-types';
+import {
+  ExperienceControlsResponse,
+  RecommendationsRequest,
+  Result,
+  SemanticQueriesRequest
+} from '@empathyco/x-types';
 
 export const adapter = platformAdapter;
 
@@ -53,3 +60,23 @@ semanticQueriesRequestSchema.$override<
     };
   }
 });
+
+// TODO: Remove when the endpoint is propery created in the platform adapter
+// eslint-disable-next-line @typescript-eslint/no-unsafe-call
+const experienceControlsAdapter = adapter.experienceControls.extends({
+  endpoint: 'https://config-service.internal.test.empathy.co/public/configs'
+});
+platformAdapter.experienceControls = experienceControlsAdapter;
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-call
+experienceControlsResponseSchema.$override<
+  PlatformExperienceControlsResponse,
+  Partial<ExperienceControlsResponse>
+>({
+  events: {
+    SemanticQueriesConfigProvided: {
+      maxItemsToRequest: 'controls.semanticQueries.numberOfCarousels',
+      resultsPerCarousel: 'controls.semanticQueries.resultsPerCarousels'
+    }
+  }
+});
diff --git a/src/components/search/custom-semantic-queries.vue b/src/components/search/custom-semantic-queries.vue
index 1ffd98d5..40c653f0 100644
--- a/src/components/search/custom-semantic-queries.vue
+++ b/src/components/search/custom-semantic-queries.vue
@@ -26,7 +26,7 @@
           <DisplayClickProvider resultFeature="semantics">
             <div class="x-flex x-gap-16 x-pt-16 max-desktop:x-px-16">
               <Result
-                v-for="result in results"
+                v-for="result in results.slice(0, resultsPerCarousel)"
                 :key="result.id"
                 :result="result"
                 class="x-w-[calc(38vw-16px)] desktop:x-w-[216px]"
@@ -41,9 +41,10 @@
 
 <script lang="ts">
   import { ArrowRightIcon } from '@empathyco/x-components';
-  import { defineComponent } from 'vue';
+  import { computed, defineComponent, inject } 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 DisplayClickProvider from './display-click-provider.vue';
@@ -61,8 +62,18 @@
     setup() {
       const { isAnyQueryLoadedInPreview } = useQueriesPreview();
 
+      const experienceControls = inject<Dictionary>('experienceControls', {});
+
+      const resultsPerCarousel = computed(() => {
+        const resultsPerCarousel: number =
+          experienceControls.value?.controls?.semanticQueries?.resultsPerCarousels;
+
+        return resultsPerCarousel ?? undefined;
+      });
+
       return {
-        isAnyQueryLoadedInPreview
+        isAnyQueryLoadedInPreview,
+        resultsPerCarousel
       };
     }
   });
diff --git a/src/shims-x-components.d.ts b/src/shims-x-components.d.ts
new file mode 100644
index 00000000..6d9fc40a
--- /dev/null
+++ b/src/shims-x-components.d.ts
@@ -0,0 +1,7 @@
+import { SemanticQueriesConfig } from '@empathyco/x-components/semantic-queries';
+
+declare module '@empathyco/x-components' {
+  interface XEventsTypes {
+    SemanticQueriesConfigProvided: SemanticQueriesConfig;
+  }
+}
diff --git a/src/x-components/plugin.options.ts b/src/x-components/plugin.options.ts
index 788a2880..77bcb27f 100644
--- a/src/x-components/plugin.options.ts
+++ b/src/x-components/plugin.options.ts
@@ -5,8 +5,10 @@ import * as messages from '../i18n/messages';
 import store from '../store';
 import { adapter } from '../adapter/adapter';
 import { useDevice } from '../composables/use-device.composable';
+import { mergeSemanticQueriesConfigWire } from './wiring/semantic-queries.wiring';
 
 const device = useDevice();
+
 export const installXOptions: InstallXOptions = {
   adapter,
   store,
@@ -22,6 +24,11 @@ export const installXOptions: InstallXOptions = {
       config: {
         threshold: 50,
         maxItemsToRequest: 10
+      },
+      wiring: {
+        SemanticQueriesConfigProvided: {
+          mergeSemanticQueriesConfigWire
+        }
       }
     }
   },
diff --git a/src/x-components/wiring/semantic-queries.wiring.ts b/src/x-components/wiring/semantic-queries.wiring.ts
new file mode 100644
index 00000000..b832f05c
--- /dev/null
+++ b/src/x-components/wiring/semantic-queries.wiring.ts
@@ -0,0 +1,7 @@
+import { namespacedWireCommit } from '@empathyco/x-components';
+
+const moduleName = 'semanticQueries';
+
+const wireCommit = namespacedWireCommit(moduleName);
+
+export const mergeSemanticQueriesConfigWire = wireCommit('mergeConfig');