@empathyco/x-components 6.0.0-alpha.5 → 6.0.0-alpha.51

package/js/x-modules/tagging/components/tagging.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"tagging.vue.js","sources":["../../../../../src/x-modules/tagging/components/tagging.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { computed, defineComponent, inject, onMounted, watch } from 'vue';\n  import { SnippetConfig } from '../../../x-installer/api/api.types';\n  import { taggingXModule } from '../x-module';\n  import { TaggingConfig } from '../config.types';\n  import { useXBus } from '../../../composables/use-x-bus';\n  /**\n   * This component enables and manages the sending of information to the\n   * [Empathy Tagging API](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html).\n   * It allows you to activate or deactivate the session id management through the `consent` prop.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Tagging',\n    xModule: taggingXModule.name,\n    props: {\n      /**\n       * The TTL in milliseconds for storing the clicked result info.\n       */\n      clickedResultStorageTTLMs: {\n        type: Number,\n        default: 30000\n      },\n      /**\n       * The Object key of the {@link @empathyco/x-types#Result} clicked by the user\n       * that will be used as id for the storage. By default, the Result url will be used.\n       */\n      clickedResultStorageKey: {\n        type: String,\n        default: 'url'\n      },\n      /**\n       * The session TTL in milliseconds.\n       */\n      sessionTTLMs: Number,\n      /**\n       * The debounce time in milliseconds to track the query.\n       */\n      queryTaggingDebounceMs: {\n        type: Number,\n        default: 2000\n      },\n      /**\n       * The consent to be emitted.\n       */\n      consent: {\n        type: Boolean,\n        default: null\n      }\n    },\n    setup(props) {\n      const xBus = useXBus();\n\n      /**\n       * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n       */\n      const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig');\n\n      /**\n       * The active consent, selected from the `consent` prop and the `snippetConfig.consent`\n       * property. False by default.\n       *\n       * @remarks If the consent is undefined in the prop and in the snippetConfig, it will return\n       * false.\n       *\n       * @returns A boolean that represents if the consent is accepted or not.\n       */\n      const activeConsent = computed(() => props.consent ?? snippetConfig?.consent ?? false);\n\n      /**\n       * The tagging config to be emitted.\n       */\n      const taggingConfig = computed<TaggingConfig>(() => {\n        return {\n          queryTaggingDebounceMs: props.queryTaggingDebounceMs,\n          sessionTTLMs: props.sessionTTLMs as number,\n          clickedResultStorageTTLMs: props.clickedResultStorageTTLMs,\n          clickedResultStorageKey: props.clickedResultStorageKey\n        };\n      });\n\n      /**\n       * Emits the {@link TaggingXEvents.PDPIsLoaded} XEvent if the snippet config contains\n       * a product id.\n       */\n      onMounted(() => {\n        if (snippetConfig?.productId) {\n          xBus.emit('PDPIsLoaded', snippetConfig.productId);\n        }\n      });\n\n      /**\n       * Emmits the consent when it changes.\n       */\n      watch(activeConsent, () => xBus.emit('ConsentProvided', activeConsent.value), {\n        immediate: true\n      });\n\n      /**\n       * Emmits the tagging config when it changes.\n       */\n      watch(taggingConfig, () => xBus.emit('TaggingConfigProvided', taggingConfig.value), {\n        immediate: true\n      });\n\n      // eslint-disable-next-line @typescript-eslint/no-empty-function\n      return () => {};\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`ConsentProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`TaggingConfigProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component manages the tagging of the API to track the different features. This component\ndoesn't render elements to the DOM.\n\n```vue\n<template>\n  <Tagging />\n</template>\n\n<script>\n  import { Tagging } from '@empathyco/x-components/tagging';\n\n  export default {\n    name: 'TaggingDemo',\n    components: {\n      Tagging\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the `Tagging` component will emit `ConsentProvided` with payload false by default\nif the consent is not provided, the `TaggingConfigProvided` event will be emitted only if the props\n`queryTaggingDebounceMs`, `sessionDurationMs`, `clickedResultStorageTTLMs` or\n`clickedResultStorageKey`are defined.\n\nEvery time the user clicks a result the information for the clicked product will be stored on the\nbrowser during 30 seconds which is the default value for the prop `clickedResultStorageTTLMs`. To\ndistinguish the storage information for the different results the product url will be used since\n`clickedResultStorageKey` default value is 'url'.\n\n```vue\n<template>\n  <Tagging :consent=\"true\" :queryTaggingDebounceMs=\"300\" :sessionDurationMs=\"30000\" />\n</template>\n\n<script>\n  import { Tagging } from '@empathyco/x-components/tagging';\n\n  export default {\n    name: 'TaggingDemo',\n    components: {\n      Tagging\n    }\n  };\n</script>\n```\n\nIn this example, the clicked result information will be stored on the browser during 60 seconds and\nthe product id will be used as storage key.\n\n```vue\n<template>\n  <Tagging :clickedResultStorageTTLMs=\"60000\" :clickedResultStorageKey=\"'id'\" />\n</template>\n\n<script>\n  import { Tagging } from '@empathyco/x-components/tagging';\n\n  export default {\n    name: 'TaggingDemo',\n    components: {\n      Tagging\n    }\n  };\n</script>\n```\n\n### Play with events\n\nThe `Tagging` will emit the `ConsentProvided` when the component is loaded and the consent is set by\nthe prop or getting the value from the snippet config.\n\nThe `Tagging` will emit the `TaggingConfigProvided` when the component is loaded with the new\n[`TaggingConfig`](./../../api/x-components.taggingconfig.md) using the prop values.\n</docs>\n"],"names":[],"mappings":";;;;AAME;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,cAAc,CAAC,IAAI;AAC5B,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,yBAAyB,EAAE;AACzB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD;;;AAGE;AACF,QAAA,uBAAuB,EAAE;AACvB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD;;AAEE;AACF,QAAA,YAAY,EAAE,MAAM;AACpB;;AAEE;AACF,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;AACD;;AAEE;AACF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAG;AACd,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAE,CAAA;AAEtB;;AAEE;AACF,QAAA,MAAM,aAAY,GAAI,MAAM,CAA4B,eAAe,CAAC,CAAA;AAExE;;;;;;;;AAQE;AACF,QAAA,MAAM,aAAY,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,OAAM,IAAK,aAAa,EAAE,OAAQ,IAAG,KAAK,CAAC,CAAA;AAEtF;;AAEE;AACF,QAAA,MAAM,gBAAgB,QAAQ,CAAgB,MAAM;YAClD,OAAO;gBACL,sBAAsB,EAAE,KAAK,CAAC,sBAAsB;gBACpD,YAAY,EAAE,KAAK,CAAC,YAAsB;gBAC1C,yBAAyB,EAAE,KAAK,CAAC,yBAAyB;gBAC1D,uBAAuB,EAAE,KAAK,CAAC,uBAAsB;aACtD,CAAA;AACH,SAAC,CAAC,CAAA;AAEF;;;AAGE;QACF,SAAS,CAAC,MAAM;YACd,IAAI,aAAa,EAAE,SAAS,EAAE;gBAC5B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,aAAa,CAAC,SAAS,CAAC,CAAA;AACnD,aAAA;AACF,SAAC,CAAC,CAAA;AAEF;;AAEE;AACF,QAAA,KAAK,CAAC,aAAa,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE;AAC5E,YAAA,SAAS,EAAE,IAAG;AACf,SAAA,CAAC,CAAA;AAEF;;AAEE;AACF,QAAA,KAAK,CAAC,aAAa,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE;AAClF,YAAA,SAAS,EAAE,IAAG;AACf,SAAA,CAAC,CAAA;;AAGF,QAAA,OAAO,MAAO,GAAC,CAAA;KACjB;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"tagging.vue.js","sources":["../../../../../src/x-modules/tagging/components/tagging.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { computed, defineComponent, inject, onMounted, watch } from 'vue';\n  import { SnippetConfig } from '../../../x-installer/api/api.types';\n  import { taggingXModule } from '../x-module';\n  import { TaggingConfig } from '../config.types';\n  import { useXBus } from '../../../composables/use-x-bus';\n  /**\n   * This component enables and manages the sending of information to the\n   * [Empathy Tagging API](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html).\n   * It allows you to activate or deactivate the session id management through the `consent` prop.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Tagging',\n    xModule: taggingXModule.name,\n    props: {\n      /**\n       * The TTL in milliseconds for storing the result info.\n       */\n      storageTTLMs: {\n        type: Number,\n        default: 30000\n      },\n      /**\n       * The Object key of the {@link @empathyco/x-types#Result} clicked or added to the cart by the user\n       * that will be used as id for the storage.\n       * By default, the Result url will be used.\n       */\n      storageKey: {\n        type: String,\n        default: 'url'\n      },\n      /**\n       * The session TTL in milliseconds.\n       */\n      sessionTTLMs: Number,\n      /**\n       * The debounce time in milliseconds to track the query.\n       */\n      queryTaggingDebounceMs: {\n        type: Number,\n        default: 2000\n      },\n      /**\n       * The consent to be emitted.\n       */\n      consent: {\n        type: Boolean,\n        default: null\n      }\n    },\n    setup(props) {\n      const xBus = useXBus();\n\n      /**\n       * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n       */\n      const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig');\n\n      /**\n       * The active consent, selected from the `consent` prop and the `snippetConfig.consent`\n       * property. False by default.\n       *\n       * @remarks If the consent is undefined in the prop and in the snippetConfig, it will return\n       * false.\n       *\n       * @returns A boolean that represents if the consent is accepted or not.\n       */\n      const activeConsent = computed(() => props.consent ?? snippetConfig?.consent ?? false);\n\n      /**\n       * The tagging config to be emitted.\n       */\n      const taggingConfig = computed<TaggingConfig>(() => {\n        return {\n          queryTaggingDebounceMs: props.queryTaggingDebounceMs,\n          sessionTTLMs: props.sessionTTLMs as number,\n          storageTTLMs: props.storageTTLMs,\n          storageKey: props.storageKey\n        };\n      });\n\n      /**\n       * Emits the {@link TaggingXEvents.PDPIsLoaded} XEvent if the snippet config contains\n       * a product id.\n       */\n      onMounted(() => {\n        if (snippetConfig?.productId) {\n          xBus.emit('PDPIsLoaded', snippetConfig.productId);\n        }\n      });\n\n      /**\n       * Emmits the consent when it changes.\n       */\n      watch(activeConsent, () => xBus.emit('ConsentProvided', activeConsent.value), {\n        immediate: true\n      });\n\n      /**\n       * Emmits the tagging config when it changes.\n       */\n      watch(taggingConfig, () => xBus.emit('TaggingConfigProvided', taggingConfig.value), {\n        immediate: true\n      });\n\n      // eslint-disable-next-line @typescript-eslint/no-empty-function\n      return () => {};\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`ConsentProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`TaggingConfigProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component manages the tagging of the API to track the different features. This component\ndoesn't render elements to the DOM.\n\n```vue\n<template>\n  <Tagging />\n</template>\n\n<script>\n  import { Tagging } from '@empathyco/x-components/tagging';\n\n  export default {\n    name: 'TaggingDemo',\n    components: {\n      Tagging\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the `Tagging` component will emit `ConsentProvided` with payload false by default\nif the consent is not provided, the `TaggingConfigProvided` event will be emitted only if the props\n`queryTaggingDebounceMs`, `sessionDurationMs`, `storageTTLMs` or `storageKey`are defined.\n\nEvery time the user clicks a result or adds a result to the cart, the information for the product\nwill be stored on the browser during 30 seconds which is the default value for the prop\n`storageTTLMs`. To distinguish the storage information for the different results the product url\nwill be used since `storageKey` default value is 'url'.\n\n```vue\n<template>\n  <Tagging :consent=\"true\" :queryTaggingDebounceMs=\"300\" :sessionDurationMs=\"30000\" />\n</template>\n\n<script>\n  import { Tagging } from '@empathyco/x-components/tagging';\n\n  export default {\n    name: 'TaggingDemo',\n    components: {\n      Tagging\n    }\n  };\n</script>\n```\n\nIn this example, the clicked or added to cart result information will be stored on the browser\nduring 60 seconds and the product id will be used as storage key\n\n```vue\n<template>\n  <Tagging :storageTTLMs=\"60000\" :storageKey=\"'id'\" />\n</template>\n\n<script>\n  import { Tagging } from '@empathyco/x-components/tagging';\n\n  export default {\n    name: 'TaggingDemo',\n    components: {\n      Tagging\n    }\n  };\n</script>\n```\n\n### Play with events\n\nThe `Tagging` will emit the `ConsentProvided` when the component is loaded and the consent is set by\nthe prop or getting the value from the snippet config.\n\nThe `Tagging` will emit the `TaggingConfigProvided` when the component is loaded with the new\n[`TaggingConfig`](./../../api/x-components.taggingconfig.md) using the prop values.\n</docs>\n"],"names":[],"mappings":";;;;AAME;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,cAAc,CAAC,IAAI;AAC5B,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD;;AAEE;AACF,QAAA,YAAY,EAAE,MAAM;AACpB;;AAEE;AACF,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;AACD;;AAEE;AACF,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAG;AACd,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAE,CAAA;AAEtB;;AAEE;AACF,QAAA,MAAM,aAAY,GAAI,MAAM,CAA4B,eAAe,CAAC,CAAA;AAExE;;;;;;;;AAQE;AACF,QAAA,MAAM,aAAY,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,OAAM,IAAK,aAAa,EAAE,OAAQ,IAAG,KAAK,CAAC,CAAA;AAEtF;;AAEE;AACF,QAAA,MAAM,gBAAgB,QAAQ,CAAgB,MAAM;YAClD,OAAO;gBACL,sBAAsB,EAAE,KAAK,CAAC,sBAAsB;gBACpD,YAAY,EAAE,KAAK,CAAC,YAAsB;gBAC1C,YAAY,EAAE,KAAK,CAAC,YAAY;gBAChC,UAAU,EAAE,KAAK,CAAC,UAAS;aAC5B,CAAA;AACH,SAAC,CAAC,CAAA;AAEF;;;AAGE;QACF,SAAS,CAAC,MAAM;YACd,IAAI,aAAa,EAAE,SAAS,EAAE;gBAC5B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,aAAa,CAAC,SAAS,CAAC,CAAA;AACnD,aAAA;AACF,SAAC,CAAC,CAAA;AAEF;;AAEE;AACF,QAAA,KAAK,CAAC,aAAa,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE;AAC5E,YAAA,SAAS,EAAE,IAAG;AACf,SAAA,CAAC,CAAA;AAEF;;AAEE;AACF,QAAA,KAAK,CAAC,aAAa,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE;AAClF,YAAA,SAAS,EAAE,IAAG;AACf,SAAA,CAAC,CAAA;;AAGF,QAAA,OAAO,MAAO,GAAC,CAAA;KACjB;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/tagging/service/{pdp-add-to-cart.service.js → external-tagging.service.js}

@@ -9,11 +9,11 @@ import '../../../plugins/x-bus.js';
 import { XPlugin } from '../../../plugins/x-plugin.js';
 
 /**
- * Default implementation for the {@link PDPAddToCartService}.
+ * Default implementation for the {@link ExternalTaggingService}.
  *
  * @public
  */
-class DefaultPDPAddToCartService {
+class DefaultExternalTaggingService {
     constructor(localStorageService = new BrowserStorageService(localStorage, 'x'), sessionStorageService = new BrowserStorageService(sessionStorage, 'x')) {
         this.localStorageService = localStorageService;
         this.sessionStorageService = sessionStorageService;
@@ -21,25 +21,41 @@ class DefaultPDPAddToCartService {
     get store() {
         return XPlugin.store;
     }
-    get clickedResultStorageKey() {
-        return this.store.state.x.tagging.config.clickedResultStorageKey;
+    get storageKey() {
+        return this.store.state.x.tagging.config.storageKey;
     }
-    get clickedResultStorageTTLMs() {
-        return this.store.state.x.tagging.config.clickedResultStorageTTLMs;
+    get storageTTLMs() {
+        return this.store.state.x.tagging.config.storageTTLMs;
     }
     /**
      * Stores in the local storage the information from the Result clicked by the user
-     * in order to be able to track later on.
+     * in order to be able to track the add to cart later on the result's PDP.
      *
      * @param result - The result to store.
      *
      * @public
      */
     storeResultClicked(result) {
-        const key = result[this.clickedResultStorageKey];
-        const storageId = this.getStorageId(key);
+        const key = result[this.storageKey];
+        const storageId = this.getStorageId(DefaultExternalTaggingService.RESULT_CLICKED_ID_KEY, key);
         if (storageId) {
-            this.localStorageService.setItem(storageId, result, this.clickedResultStorageTTLMs);
+            this.localStorageService.setItem(storageId, result, this.storageTTLMs);
+        }
+    }
+    /**
+     * Stores in the session storage the information from the Result added to the cart
+     * by the user in order to be able to track the checkout later on when the checkout
+     * process has been completed by shopper.
+     *
+     * @param result - The result to store.
+     *
+     * @public
+     */
+    storeAddToCart(result) {
+        const key = result[this.storageKey];
+        const storageId = this.getStorageId(DefaultExternalTaggingService.ADD_TO_CART_ID_KEY, key);
+        if (storageId) {
+            this.sessionStorageService.setItem(storageId, result);
         }
     }
     /**
@@ -51,7 +67,7 @@ class DefaultPDPAddToCartService {
      * @public
      */
     moveToSessionStorage(id) {
-        const storageId = this.getStorageId(id);
+        const storageId = this.getStorageId(DefaultExternalTaggingService.RESULT_CLICKED_ID_KEY, id);
         if (storageId) {
             const result = this.localStorageService.removeItem(storageId);
             if (result) {
@@ -60,41 +76,50 @@ class DefaultPDPAddToCartService {
         }
     }
     /**
-     * Checks if the session storage contains a result information for given id or the current url
-     * and tracks the add to cart if exists.
+     * Checks if the session storage contains a result information for a given id or the current url.
+     * If exists, it tracks the add to cart and saves the add to cart information into session
+     * storage.
      *
      * @param id - The id of the result to track.
      *
      * @public
      */
     trackAddToCart(id) {
-        const storageId = this.clickedResultStorageKey === 'url' ? this.getStorageId() : this.getStorageId(id);
+        const storageId = this.storageKey === 'url'
+            ? this.getStorageId(DefaultExternalTaggingService.RESULT_CLICKED_ID_KEY)
+            : this.getStorageId(DefaultExternalTaggingService.RESULT_CLICKED_ID_KEY, id);
         if (storageId) {
             const result = this.sessionStorageService.getItem(storageId);
             if (result?.tagging?.add2cart) {
                 result.tagging.add2cart.params.location = 'pdp';
                 this.store.dispatch('x/tagging/track', result.tagging.add2cart);
+                /**
+                 * Done after tracking the add to cart to avoid tracking the checkout without
+                 * an add to cart, in case the tracking fails.
+                 */
+                this.storeAddToCart(result);
             }
         }
     }
     /**
      * Calculates the browser storage key for the given id.
      *
+     * @param keyPrefix - The key prefix to use in the storage.
      * @param id - The id to be used for the storage key.
      *
      * @returns The complete key to be used for storage.
      *
      * @internal
      */
-    getStorageId(id) {
-        if (this.clickedResultStorageKey === 'url') {
+    getStorageId(keyPrefix, id) {
+        if (this.storageKey === 'url') {
             let url = id ?? window.location.href;
             url = url.replace(/\s|\+/g, '%20');
             const pathName = this.getPathName(url);
-            return `${DefaultPDPAddToCartService.RESULT_CLICKED_ID_KEY}-${pathName}`;
+            return `${keyPrefix}-${pathName}`;
         }
         else if (id) {
-            return `${DefaultPDPAddToCartService.RESULT_CLICKED_ID_KEY}-${id}`;
+            return `${keyPrefix}-${id}`;
         }
         else {
             this.showWarningMessage();
@@ -107,7 +132,7 @@ class DefaultPDPAddToCartService {
      * @internal
      */
     showWarningMessage() {
-        if (this.clickedResultStorageKey !== 'url') {
+        if (this.storageKey !== 'url') {
             //TODO: add here logger
             //eslint-disable-next-line no-console
             console.warn('No product id was provided but the storage was not configured to use the url');
@@ -143,15 +168,21 @@ class DefaultPDPAddToCartService {
     }
 }
 /**
- * Session id key to use as key in the storage.
+ * Session id key to use as key in the storage for result clicks.
+ *
+ * @public
+ */
+DefaultExternalTaggingService.RESULT_CLICKED_ID_KEY = 'add-to-cart';
+/**
+ * Session id key to use as key in the storage for add to carts.
  *
  * @public
  */
-DefaultPDPAddToCartService.RESULT_CLICKED_ID_KEY = 'add-to-cart';
+DefaultExternalTaggingService.ADD_TO_CART_ID_KEY = 'checkout';
 /**
- * Global instance of the {@link PDPAddToCartService}.
+ * Global instance of the {@link ExternalTaggingService}.
  */
-DefaultPDPAddToCartService.instance = new DefaultPDPAddToCartService();
+DefaultExternalTaggingService.instance = new DefaultExternalTaggingService();
 
-export { DefaultPDPAddToCartService };
-//# sourceMappingURL=pdp-add-to-cart.service.js.map
+export { DefaultExternalTaggingService };
+//# sourceMappingURL=external-tagging.service.js.map

package/js/x-modules/tagging/service/external-tagging.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"external-tagging.service.js","sources":["../../../../../src/x-modules/tagging/service/external-tagging.service.ts"],"sourcesContent":["import { Store } from 'vuex';\nimport { Result } from '@empathyco/x-types';\nimport { BrowserStorageService, StorageService } from '@empathyco/x-storage-service';\nimport { RootXStoreState } from '../../../store/index';\nimport { XPlugin } from '../../../plugins/index';\nimport { ExternalTaggingService } from './types';\n\n/**\n * Default implementation for the {@link ExternalTaggingService}.\n *\n * @public\n */\nexport class DefaultExternalTaggingService implements ExternalTaggingService {\n  /**\n   * Session id key to use as key in the storage for result clicks.\n   *\n   * @public\n   */\n  public static readonly RESULT_CLICKED_ID_KEY = 'add-to-cart';\n\n  /**\n   * Session id key to use as key in the storage for add to carts.\n   *\n   * @public\n   */\n  public static readonly ADD_TO_CART_ID_KEY = 'checkout';\n\n  /**\n   * Global instance of the {@link ExternalTaggingService}.\n   */\n  public static instance: ExternalTaggingService = new DefaultExternalTaggingService();\n\n  public constructor(\n    protected localStorageService: StorageService = new BrowserStorageService(localStorage, 'x'),\n    protected sessionStorageService: StorageService = new BrowserStorageService(sessionStorage, 'x')\n  ) {}\n\n  protected get store(): Store<RootXStoreState> {\n    return XPlugin.store;\n  }\n\n  protected get storageKey(): string {\n    return this.store.state.x.tagging.config.storageKey as string;\n  }\n\n  protected get storageTTLMs(): number {\n    return this.store.state.x.tagging.config.storageTTLMs as number;\n  }\n\n  /**\n   * Stores in the local storage the information from the Result clicked by the user\n   * in order to be able to track the add to cart later on the result's PDP.\n   *\n   * @param result - The result to store.\n   *\n   * @public\n   */\n  storeResultClicked(result: Result): void {\n    const key = result[this.storageKey as keyof Result] as string;\n    const storageId = this.getStorageId(DefaultExternalTaggingService.RESULT_CLICKED_ID_KEY, key);\n    if (storageId) {\n      this.localStorageService.setItem(storageId, result, this.storageTTLMs);\n    }\n  }\n\n  /**\n   * Stores in the session storage the information from the Result added to the cart\n   * by the user in order to be able to track the checkout later on when the checkout\n   * process has been completed by shopper.\n   *\n   * @param result - The result to store.\n   *\n   * @public\n   */\n  storeAddToCart(result: Result): void {\n    const key = result[this.storageKey as keyof Result] as string;\n    const storageId = this.getStorageId(DefaultExternalTaggingService.ADD_TO_CART_ID_KEY, key);\n    if (storageId) {\n      this.sessionStorageService.setItem(storageId, result);\n    }\n  }\n\n  /**\n   * Checks if the local storage contains a result information for the given id and moves\n   * the result info from the local storage to the session storage.\n   *\n   * @param id - The id of the result to move to the session storage.\n   *\n   * @public\n   */\n  moveToSessionStorage(id?: string): void {\n    const storageId = this.getStorageId(DefaultExternalTaggingService.RESULT_CLICKED_ID_KEY, id);\n    if (storageId) {\n      const result = this.localStorageService.removeItem(storageId);\n      if (result) {\n        this.sessionStorageService.setItem(storageId, result);\n      }\n    }\n  }\n\n  /**\n   * Checks if the session storage contains a result information for a given id or the current url.\n   * If exists, it tracks the add to cart and saves the add to cart information into session\n   * storage.\n   *\n   * @param id - The id of the result to track.\n   *\n   * @public\n   */\n  trackAddToCart(id?: string): void {\n    const storageId =\n      this.storageKey === 'url'\n        ? this.getStorageId(DefaultExternalTaggingService.RESULT_CLICKED_ID_KEY)\n        : this.getStorageId(DefaultExternalTaggingService.RESULT_CLICKED_ID_KEY, id);\n    if (storageId) {\n      const result = this.sessionStorageService.getItem<Result>(storageId);\n      if (result?.tagging?.add2cart) {\n        result.tagging.add2cart.params.location = 'pdp';\n        this.store.dispatch('x/tagging/track', result.tagging.add2cart);\n        /**\n         * Done after tracking the add to cart to avoid tracking the checkout without\n         * an add to cart, in case the tracking fails.\n         */\n        this.storeAddToCart(result);\n      }\n    }\n  }\n\n  /**\n   * Calculates the browser storage key for the given id.\n   *\n   * @param keyPrefix - The key prefix to use in the storage.\n   * @param id - The id to be used for the storage key.\n   *\n   * @returns The complete key to be used for storage.\n   *\n   * @internal\n   */\n  protected getStorageId(keyPrefix: string, id?: string): string | null {\n    if (this.storageKey === 'url') {\n      let url = id ?? window.location.href;\n      url = url.replace(/\\s|\\+/g, '%20');\n      const pathName = this.getPathName(url);\n      return `${keyPrefix}-${pathName}`;\n    } else if (id) {\n      return `${keyPrefix}-${id}`;\n    } else {\n      this.showWarningMessage();\n      return null;\n    }\n  }\n\n  /**\n   * Logs a warning message in case the tracking cannot be done.\n   *\n   * @internal\n   */\n  protected showWarningMessage(): void {\n    if (this.storageKey !== 'url') {\n      //TODO: add here logger\n      //eslint-disable-next-line no-console\n      console.warn('No product id was provided but the storage was not configured to use the url');\n    }\n  }\n\n  /**\n   * Returns the pathname for a given url.\n   *\n   * @param url - The url to get the pathname from.\n   *\n   * @returns The pathname of the url.\n   *\n   * @internal\n   */\n  protected getPathName(url: string): string {\n    let urlObject: URL;\n    try {\n      // Check if the url is relative or absolute path\n      if (/^(\\.\\.\\/|\\.\\/|\\/)/.test(url)) {\n        urlObject = new URL(url, location.origin);\n      } else {\n        urlObject = new URL(url);\n      }\n      return urlObject.pathname;\n    } catch (e) {\n      //TODO: add here logger\n      //eslint-disable-next-line no-console\n      console.warn(`There was a problem with url ${url}`);\n      return url;\n    }\n  }\n}\n"],"names":[],"mappings":"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"}

package/js/x-modules/tagging/store/emitters.js

@@ -10,7 +10,7 @@ const taggingEmitters = createStoreEmitters(taggingXStoreModule, {
     ConsentChanged: state => state.consent,
     SearchTaggingReceived: state => state.queryTaggingInfo,
     ResultURLTrackingEnabled: {
-        selector: state => state.config.clickedResultStorageKey,
+        selector: state => state.config.storageKey,
         filter: newValue => newValue === 'url'
     }
 });

package/js/x-modules/tagging/store/emitters.js.map

@@ -1 +1 @@
-{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/tagging/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store/utils/store-emitters.utils';\nimport { taggingXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the tagging module.\n *\n * @internal\n */\nexport const taggingEmitters = createStoreEmitters(taggingXStoreModule, {\n  ConsentChanged: state => state.consent!,\n  SearchTaggingReceived: state => state.queryTaggingInfo!,\n  ResultURLTrackingEnabled: {\n    selector: state => state.config.clickedResultStorageKey!,\n    filter: newValue => newValue === 'url'\n  }\n});\n"],"names":[],"mappings":";;;AAGA;;;;AAIG;AACU,MAAA,eAAe,GAAG,mBAAmB,CAAC,mBAAmB,EAAE;AACtE,IAAA,cAAc,EAAE,KAAK,IAAI,KAAK,CAAC,OAAQ;AACvC,IAAA,qBAAqB,EAAE,KAAK,IAAI,KAAK,CAAC,gBAAiB;AACvD,IAAA,wBAAwB,EAAE;QACxB,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,uBAAwB;AACxD,QAAA,MAAM,EAAE,QAAQ,IAAI,QAAQ,KAAK,KAAK;AACvC,KAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/tagging/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store/utils/store-emitters.utils';\nimport { taggingXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the tagging module.\n *\n * @internal\n */\nexport const taggingEmitters = createStoreEmitters(taggingXStoreModule, {\n  ConsentChanged: state => state.consent!,\n  SearchTaggingReceived: state => state.queryTaggingInfo!,\n  ResultURLTrackingEnabled: {\n    selector: state => state.config.storageKey!,\n    filter: newValue => newValue === 'url'\n  }\n});\n"],"names":[],"mappings":";;;AAGA;;;;AAIG;AACU,MAAA,eAAe,GAAG,mBAAmB,CAAC,mBAAmB,EAAE;AACtE,IAAA,cAAc,EAAE,KAAK,IAAI,KAAK,CAAC,OAAQ;AACvC,IAAA,qBAAqB,EAAE,KAAK,IAAI,KAAK,CAAC,gBAAiB;AACvD,IAAA,wBAAwB,EAAE;QACxB,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,UAAW;AAC3C,QAAA,MAAM,EAAE,QAAQ,IAAI,QAAQ,KAAK,KAAK;AACvC,KAAA;AACF,CAAA;;;;"}

package/js/x-modules/tagging/store/module.js

@@ -11,12 +11,16 @@ const taggingXStoreModule = {
         config: {
             sessionTTLMs: 30 * 60 * 1000,
             queryTaggingDebounceMs: 2000,
-            clickedResultStorageKey: null,
-            clickedResultStorageTTLMs: null
+            storageKey: null,
+            storageTTLMs: null
         },
         consent: null,
         noResultsTaggingEnabled: false,
-        queryTaggingInfo: null
+        queryTaggingInfo: null,
+        toolingTaggingInfo: {
+            toolingDisplayClick: null,
+            toolingDisplayAdd2Cart: null
+        }
     }),
     getters: {},
     mutations: {

package/js/x-modules/tagging/store/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/tagging/store/module.ts"],"sourcesContent":["import { TaggingRequest } from '@empathyco/x-types';\nimport { mergeConfig, setConfig } from '../../../store/utils/config-store.utils';\nimport { track } from './actions/track.action';\nimport { TaggingXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the tagging module.\n *\n * @internal\n */\nexport const taggingXStoreModule: TaggingXStoreModule = {\n  state: () => ({\n    config: {\n      sessionTTLMs: 30 * 60 * 1000,\n      queryTaggingDebounceMs: 2000,\n      clickedResultStorageKey: null,\n      clickedResultStorageTTLMs: null\n    },\n    consent: null,\n    noResultsTaggingEnabled: false,\n    queryTaggingInfo: null\n  }),\n  getters: {},\n  mutations: {\n    setConsent(state, consent) {\n      state.consent = consent;\n    },\n    setQueryTaggingInfo(state, queryTaggingInfo: TaggingRequest) {\n      state.queryTaggingInfo = queryTaggingInfo;\n    },\n    setNoResultsTaggingEnabled(state, module) {\n      if (module === 'semanticQueries') {\n        state.noResultsTaggingEnabled = true;\n      }\n    },\n    setConfig,\n    mergeConfig\n  },\n  actions: {\n    track\n  }\n};\n"],"names":[],"mappings":";;;AAKA;;;;AAIG;AACU,MAAA,mBAAmB,GAAwB;AACtD,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,MAAM,EAAE;AACN,YAAA,YAAY,EAAE,EAAE,GAAG,EAAE,GAAG,IAAI;AAC5B,YAAA,sBAAsB,EAAE,IAAI;AAC5B,YAAA,uBAAuB,EAAE,IAAI;AAC7B,YAAA,yBAAyB,EAAE,IAAI;AAChC,SAAA;AACD,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,uBAAuB,EAAE,KAAK;AAC9B,QAAA,gBAAgB,EAAE,IAAI;KACvB,CAAC;AACF,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,SAAS,EAAE;QACT,UAAU,CAAC,KAAK,EAAE,OAAO,EAAA;AACvB,YAAA,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;SACzB;QACD,mBAAmB,CAAC,KAAK,EAAE,gBAAgC,EAAA;AACzD,YAAA,KAAK,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;SAC3C;QACD,0BAA0B,CAAC,KAAK,EAAE,MAAM,EAAA;YACtC,IAAI,MAAM,KAAK,iBAAiB,EAAE;AAChC,gBAAA,KAAK,CAAC,uBAAuB,GAAG,IAAI,CAAC;AACtC,aAAA;SACF;QACD,SAAS;QACT,WAAW;AACZ,KAAA;AACD,IAAA,OAAO,EAAE;QACP,KAAK;AACN,KAAA;;;;;"}
+{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/tagging/store/module.ts"],"sourcesContent":["import { TaggingRequest } from '@empathyco/x-types';\nimport { mergeConfig, setConfig } from '../../../store/utils/config-store.utils';\nimport { track } from './actions/track.action';\nimport { TaggingXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the tagging module.\n *\n * @internal\n */\nexport const taggingXStoreModule: TaggingXStoreModule = {\n  state: () => ({\n    config: {\n      sessionTTLMs: 30 * 60 * 1000,\n      queryTaggingDebounceMs: 2000,\n      storageKey: null,\n      storageTTLMs: null\n    },\n    consent: null,\n    noResultsTaggingEnabled: false,\n    queryTaggingInfo: null,\n    toolingTaggingInfo: {\n      toolingDisplayClick: null,\n      toolingDisplayAdd2Cart: null\n    }\n  }),\n  getters: {},\n  mutations: {\n    setConsent(state, consent) {\n      state.consent = consent;\n    },\n    setQueryTaggingInfo(state, queryTaggingInfo: TaggingRequest) {\n      state.queryTaggingInfo = queryTaggingInfo;\n    },\n    setNoResultsTaggingEnabled(state, module) {\n      if (module === 'semanticQueries') {\n        state.noResultsTaggingEnabled = true;\n      }\n    },\n    setConfig,\n    mergeConfig\n  },\n  actions: {\n    track\n  }\n};\n"],"names":[],"mappings":";;;AAKA;;;;AAIG;AACU,MAAA,mBAAmB,GAAwB;AACtD,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,MAAM,EAAE;AACN,YAAA,YAAY,EAAE,EAAE,GAAG,EAAE,GAAG,IAAI;AAC5B,YAAA,sBAAsB,EAAE,IAAI;AAC5B,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,YAAY,EAAE,IAAI;AACnB,SAAA;AACD,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,uBAAuB,EAAE,KAAK;AAC9B,QAAA,gBAAgB,EAAE,IAAI;AACtB,QAAA,kBAAkB,EAAE;AAClB,YAAA,mBAAmB,EAAE,IAAI;AACzB,YAAA,sBAAsB,EAAE,IAAI;AAC7B,SAAA;KACF,CAAC;AACF,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,SAAS,EAAE;QACT,UAAU,CAAC,KAAK,EAAE,OAAO,EAAA;AACvB,YAAA,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;SACzB;QACD,mBAAmB,CAAC,KAAK,EAAE,gBAAgC,EAAA;AACzD,YAAA,KAAK,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;SAC3C;QACD,0BAA0B,CAAC,KAAK,EAAE,MAAM,EAAA;YACtC,IAAI,MAAM,KAAK,iBAAiB,EAAE;AAChC,gBAAA,KAAK,CAAC,uBAAuB,GAAG,IAAI,CAAC;AACtC,aAAA;SACF;QACD,SAAS;QACT,WAAW;AACZ,KAAA;AACD,IAAA,OAAO,EAAE;QACP,KAAK;AACN,KAAA;;;;;"}

package/js/x-modules/tagging/wiring.js

@@ -6,7 +6,7 @@ import { filter, mapWire } from '../../wiring/wires.operators.js';
 import { createWiring } from '../../wiring/wiring.utils.js';
 import { createOrigin } from '../../utils/origin.js';
 import '../../utils/storage.js';
-import { DefaultPDPAddToCartService } from './service/pdp-add-to-cart.service.js';
+import { DefaultExternalTaggingService } from './service/external-tagging.service.js';
 
 /**
  * `tagging` {@link XModuleName | XModule name}.
@@ -35,21 +35,27 @@ const wireDispatch = namespacedWireDispatch(moduleName);
  */
 const wireSessionServiceWithoutPayload = wireServiceWithoutPayload(DefaultSessionService.instance);
 /**
- * Wires factory for {@link DefaultPDPAddToCartService}.
+ * Wires factory for {@link DefaultExternalTaggingService}.
  */
-const wirePDPAddToCartService = wireService(DefaultPDPAddToCartService.instance);
+const wireExternalTaggingService = wireService(DefaultExternalTaggingService.instance);
 /**
  * Stores the given result on the local storage.
  *
  * @public
  */
-const storeClickedResultWire = wirePDPAddToCartService('storeResultClicked');
+const storeClickedResultWire = wireExternalTaggingService('storeResultClicked');
+/**
+ * Stores the result added to cart on the local storage.
+ *
+ * @public
+ */
+const storeAddToCartWire = wireExternalTaggingService('storeAddToCart');
 /**
  * Moves the result information from the local storage to session storage.
  *
  * @public
  */
-const moveClickedResultToSessionWire = mapWire(wirePDPAddToCartService('moveToSessionStorage'), (payload) => {
+const moveClickedResultToSessionWire = mapWire(wireExternalTaggingService('moveToSessionStorage'), (payload) => {
     return payload === 'url' ? undefined : payload;
 });
 /**
@@ -57,7 +63,7 @@ const moveClickedResultToSessionWire = mapWire(wirePDPAddToCartService('moveToSe
  *
  * @public
  */
-const trackAddToCartFromSessionStorage = wirePDPAddToCartService('trackAddToCart');
+const trackAddToCartFromSessionStorage = wireExternalTaggingService('trackAddToCart');
 /**
  * Clears the session id.
  *
@@ -135,6 +141,24 @@ const trackAddToCartWire = createTrackWire('add2cart');
  * @public
  */
 const trackDisplayClickedWire = createTrackDisplayWire('displayClick');
+/**
+ * Performs a track of a display result being clicked.
+ *
+ * @public
+ */
+const trackToolingDisplayClickedWire = createTrackToolingDisplayWire();
+/**
+ * Performs a track of a display result being clicked.
+ *
+ * @public
+ */
+const trackToolingAdd2CartWire = createTrackToolingAdd2CartWire();
+/**
+ * Performs a track of a clicked related prompt.
+ *
+ * @public
+ */
+const trackRelatedPromptToolingDisplayClickWire = createTrackRelatedPromptToolingDisplayClickWire();
 /**
  * Performs a track of a display element appearing.
  *
@@ -198,6 +222,69 @@ function createTrackDisplayWire(property) {
         return taggingInfo;
     }), ({ eventPayload: { tagging } }) => !!tagging?.[property]);
 }
+/**
+ * Update the tooling tagging params with the result information.
+ *
+ * @param taggingRequest - The tooling tagging request to be updated.
+ * @param result - The clicked result.
+ * @returns The tagging request updated.
+ *
+ * @internal
+ */
+function updateToolingTaggingWithResult(taggingRequest, result) {
+    taggingRequest.params.productId = result.id;
+    taggingRequest.params.title = result.name;
+    taggingRequest.params.url = result.url;
+    return taggingRequest;
+}
+/**
+ * Factory helper to create a wire for the track of the tooling display click.
+ *
+ * @returns A new wire for the tooling display click of the taggable element.
+ *
+ * @public
+ */
+function createTrackToolingDisplayWire() {
+    return filter(wireDispatch('track', ({ eventPayload, metadata }) => {
+        const taggingInfo = metadata.toolingTagging;
+        const resultInfo = eventPayload;
+        updateToolingTaggingWithResult(taggingInfo, resultInfo);
+        return taggingInfo;
+    }), ({ metadata }) => !!metadata?.toolingTagging);
+}
+/**
+ * Factory helper to create a wire for the track of the tooling display add to cart.
+ *
+ * @returns A new wire for the tooling display add to cart of the taggable element.
+ *
+ * @public
+ */
+function createTrackToolingAdd2CartWire() {
+    return filter(wireDispatch('track', ({ eventPayload, metadata }) => {
+        const taggingInfo = metadata.toolingAdd2CartTagging;
+        const resultInfo = eventPayload;
+        updateToolingTaggingWithResult(taggingInfo, resultInfo);
+        return taggingInfo;
+    }), ({ metadata }) => !!metadata?.toolingAdd2CartTagging);
+}
+/**
+ * Factory helper to create a wire for the track of the tooling display click in a related prompt.
+ *
+ * @returns A new wire for the tooling display click of the taggable element.
+ *
+ * @public
+ */
+function createTrackRelatedPromptToolingDisplayClickWire() {
+    return filter(wireDispatch('track', ({ metadata }) => {
+        const relatedPrompt = metadata.relatedPrompt;
+        const taggingInfo = relatedPrompt.tagging
+            ?.toolingDisplayClickTagging;
+        taggingInfo.params.productId = 'EXPAND';
+        taggingInfo.params.title = relatedPrompt.suggestionText;
+        taggingInfo.params.url = 'none';
+        return taggingInfo;
+    }), ({ metadata }) => metadata?.selectedPrompt === -1);
+}
 /**
  * Factory helper to create a wire to set the queryTagging.
  *
@@ -244,7 +331,8 @@ const taggingWiring = createWiring({
     },
     UserClickedResultAddToCart: {
         trackAddToCartWire,
-        trackResultClickedWire
+        trackResultClickedWire,
+        storeAddToCartWire
     },
     UserClickedPDPAddToCart: {
         trackAddToCartFromSessionStorage
@@ -261,8 +349,17 @@ const taggingWiring = createWiring({
     },
     ModuleRegistered: {
         setNoResultsTaggingEnabledWire
+    },
+    UserClickedARelatedPromptResult: {
+        trackToolingDisplayClickedWire
+    },
+    UserClickedARelatedPromptAdd2Cart: {
+        trackToolingAdd2CartWire
+    },
+    UserSelectedARelatedPrompt: {
+        trackRelatedPromptToolingDisplayClickWire
     }
 });
 
-export { createSetQueryTaggingFromQueryPreview, createTrackDisplayWire, createTrackWire, setConsent, setNoResultsTaggingEnabledWire, setQueryTaggingFromQueryPreview, setQueryTaggingInfo, setTaggingConfig, taggingWiring, trackAddToCartWire, trackBannerClickedWire, trackDisplayClickedWire, trackElementDisplayedWire, trackNoResultsQueryWithSemanticsWire, trackNoResultsQueryWithSemanticsWireDebounced, trackQueryWire, trackResultClickedWire };
+export { createSetQueryTaggingFromQueryPreview, createTrackDisplayWire, createTrackRelatedPromptToolingDisplayClickWire, createTrackToolingAdd2CartWire, createTrackToolingDisplayWire, createTrackWire, setConsent, setNoResultsTaggingEnabledWire, setQueryTaggingFromQueryPreview, setQueryTaggingInfo, setTaggingConfig, taggingWiring, trackAddToCartWire, trackBannerClickedWire, trackDisplayClickedWire, trackElementDisplayedWire, trackNoResultsQueryWithSemanticsWire, trackNoResultsQueryWithSemanticsWireDebounced, trackQueryWire, trackRelatedPromptToolingDisplayClickWire, trackResultClickedWire, trackToolingAdd2CartWire, trackToolingDisplayClickedWire };
 //# sourceMappingURL=wiring.js.map

package/js/x-modules/tagging/wiring.js.map

@@ -1 +1 @@
-{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/tagging/wiring.ts"],"sourcesContent":["import { SemanticQuery, Taggable, Tagging, TaggingRequest } from '@empathyco/x-types';\nimport { DefaultSessionService } from '@empathyco/x-utils';\nimport {\n  namespacedWireCommit,\n  namespacedWireDispatch\n} from '../../wiring/namespaced-wires.factory';\nimport { namespacedDebounce } from '../../wiring/namespaced-wires.operators';\nimport { wireService, wireServiceWithoutPayload } from '../../wiring/wires.factory';\nimport { filter, mapWire } from '../../wiring/wires.operators';\nimport { DisplayWireMetadata, Wire } from '../../wiring/wiring.types';\nimport { createWiring } from '../../wiring/wiring.utils';\nimport { createOrigin } from '../../utils/index';\nimport { FeatureLocation } from '../../types/index';\nimport { DefaultPDPAddToCartService } from './service/pdp-add-to-cart.service';\n\n/**\n * `tagging` {@link XModuleName | XModule name}.\n *\n * @internal\n */\nconst moduleName = 'tagging';\n\n/**\n * Debounce function for the module.\n */\nconst moduleDebounce = namespacedDebounce(moduleName);\n\n/**\n * WireCommit for {@link TaggingXModule}.\n *\n * @internal\n */\nconst wireCommit = namespacedWireCommit(moduleName);\n\n/**\n * WireDispatch for {@link TaggingXModule}.\n *\n * @internal\n */\nconst wireDispatch = namespacedWireDispatch(moduleName);\n\n/**\n * Wires without payload factory for {@link DefaultSessionService}.\n */\nconst wireSessionServiceWithoutPayload = wireServiceWithoutPayload(DefaultSessionService.instance);\n\n/**\n * Wires factory for {@link DefaultPDPAddToCartService}.\n */\nconst wirePDPAddToCartService = wireService(DefaultPDPAddToCartService.instance);\n\n/**\n * Stores the given result on the local storage.\n *\n * @public\n */\nconst storeClickedResultWire = wirePDPAddToCartService('storeResultClicked');\n\n/**\n * Moves the result information from the local storage to session storage.\n *\n * @public\n */\nconst moveClickedResultToSessionWire = mapWire(\n  wirePDPAddToCartService('moveToSessionStorage'),\n  (payload: string) => {\n    return payload === 'url' ? undefined : payload;\n  }\n);\n\n/**\n * Triggers the add to cart tracking.\n *\n * @public\n */\nconst trackAddToCartFromSessionStorage = wirePDPAddToCartService('trackAddToCart');\n\n/**\n * Clears the session id.\n *\n * @public\n */\nconst clearSessionWire = filter(\n  wireSessionServiceWithoutPayload('clearSessionId'),\n  ({ eventPayload: consent }) => !consent\n);\n\n/**\n * Sets the tagging state `consent`.\n *\n * @public\n */\nexport const setConsent = wireCommit('setConsent');\n\n/**\n * Sets the tagging state `noResultsTaggingEnabled`.\n *\n * @public\n */\nexport const setNoResultsTaggingEnabledWire = wireCommit('setNoResultsTaggingEnabled');\n\n/**\n * Sets the tagging config state.\n *\n * @public\n */\nexport const setTaggingConfig = wireCommit('mergeConfig');\n\n/**\n * Tracks the tagging of the query.\n *\n * @public\n */\nexport const trackQueryWire = filter(\n  wireDispatch('track'),\n  ({ eventPayload, store }) =>\n    (eventPayload as TaggingRequest).params.totalHits > 0 ||\n    !store.state.x.tagging.noResultsTaggingEnabled\n);\n\n/**\n * Sets the tagging state of the query tagging info using a debounce which ends if the user\n * accepts a query.\n *\n * @public\n */\nexport const setQueryTaggingInfo = moduleDebounce(\n  wireCommit('setQueryTaggingInfo'),\n  ({ state }) => state.config.queryTaggingDebounceMs,\n  {\n    cancelOn: 'UserClearedQuery',\n    forceOn: [\n      'UserClickedAResult',\n      'UserClickedAPromoted',\n      'UserClickedABanner',\n      'UserClickedARedirection',\n      'UserReachedResultsListEnd'\n    ]\n  }\n);\n\n/**\n * Sets the tagging state of the query tagging info using.\n *\n * @public\n */\nexport const setQueryTaggingFromQueryPreview = createSetQueryTaggingFromQueryPreview();\n\n/**\n * Tracks the tagging of the result.\n *\n * @public\n */\nexport const trackResultClickedWire = createTrackWire('click');\n\n/**\n * Tracks the tagging of the banner.\n *\n * @public\n */\nexport const trackBannerClickedWire = createTrackWire('click');\n\n/**\n * Performs a track of a result added to the cart.\n *\n * @public\n */\nexport const trackAddToCartWire = createTrackWire('add2cart');\n\n/**\n * Performs a track of a display result being clicked.\n *\n * @public\n */\nexport const trackDisplayClickedWire = createTrackDisplayWire('displayClick');\n\n/**\n * Performs a track of a display element appearing.\n *\n * @public\n */\nexport const trackElementDisplayedWire = createTrackDisplayWire('display');\n\n/**\n * Factory helper to create a wire for the track of a taggable element.\n *\n * @param property - Key of the tagging object to track.\n * @returns A new wire for the given property of the taggable element.\n *\n * @public\n */\nexport function createTrackWire(property: keyof Tagging): Wire<Taggable> {\n  return filter(\n    wireDispatch('track', ({ eventPayload: { tagging }, metadata: { location } }) => {\n      const taggingInfo: TaggingRequest = tagging[property];\n      taggingInfo.params.location = location as string;\n      return taggingInfo;\n    }),\n    ({ eventPayload: { tagging }, metadata: { ignoreInModules } }) =>\n      !!tagging?.[property] && !ignoreInModules?.includes(moduleName)\n  );\n}\n\n/**\n * Performs a track of a query with no results that used semantics as fallback.\n * The totalHits will be changed to -1 if semantic queries are found in order to differentiate\n * it from scenarios where the user encounters a no-results page without any semantic queries.\n *\n * @public\n */\nexport const trackNoResultsQueryWithSemanticsWire = filter(\n  wireDispatch('track', ({ eventPayload, state }) => {\n    const { queryTaggingInfo } = state;\n    const totalHits = (eventPayload as SemanticQuery[]).length > 0 ? -1 : 0;\n    return {\n      params: { ...queryTaggingInfo?.params, totalHits },\n      url: queryTaggingInfo?.url ?? ''\n    };\n  }),\n  ({ store }) => Number(store.state.x.tagging.queryTaggingInfo?.params.totalHits)! === 0\n);\n\n/**.\n * Debounced version of {@link trackNoResultsQueryWithSemanticsWire}\n *\n * @public\n */\nexport const trackNoResultsQueryWithSemanticsWireDebounced = moduleDebounce(\n  trackNoResultsQueryWithSemanticsWire,\n  ({ state }) => state.config.queryTaggingDebounceMs,\n  { cancelOn: 'QueryPreviewUnmounted' }\n);\n\n/**\n * Factory helper to create a wire for the track of the display click.\n *\n * @param property - Key of the tagging object to track.\n * @returns A new wire for the display click of the taggable element.\n *\n * @public\n */\nexport function createTrackDisplayWire(property: keyof Tagging): Wire<Taggable> {\n  return filter(\n    wireDispatch('track', ({ eventPayload: { tagging }, metadata }) => {\n      const taggingInfo: TaggingRequest = tagging[property];\n      const location = metadata.location as FeatureLocation;\n\n      taggingInfo.params.location = location;\n      taggingInfo.params.displayFamily = createOrigin({\n        feature: metadata.feature,\n        location\n      })!;\n      taggingInfo.params.q = (metadata as DisplayWireMetadata).displayOriginalQuery;\n\n      return taggingInfo;\n    }),\n    ({ eventPayload: { tagging } }) => !!tagging?.[property]\n  );\n}\n\n/**\n * Factory helper to create a wire to set the queryTagging.\n *\n * @returns A new wire for the query of a result of a queryPreview.\n *\n * @public\n */\nexport function createSetQueryTaggingFromQueryPreview(): Wire<Taggable> {\n  return filter(\n    wireCommit(\n      'setQueryTaggingInfo',\n      ({ metadata: { queryTagging } }) => queryTagging as TaggingRequest\n    ),\n    ({ metadata: { queryTagging } }) => !!queryTagging\n  );\n}\n\n/**\n * Wiring configuration for the {@link TaggingXModule | tagging module}.\n *\n * @internal\n */\nexport const taggingWiring = createWiring({\n  ConsentProvided: {\n    setConsent\n  },\n  ConsentChanged: {\n    clearSessionWire\n  },\n  PDPIsLoaded: {\n    moveClickedResultToSessionWire\n  },\n  ResultURLTrackingEnabled: {\n    moveClickedResultToSessionWire\n  },\n  SearchTaggingChanged: {\n    setQueryTaggingInfo\n  },\n  SearchTaggingReceived: {\n    trackQueryWire\n  },\n  TrackableElementDisplayed: {\n    trackElementDisplayedWire\n  },\n  TaggingConfigProvided: {\n    setTaggingConfig\n  },\n  UserClickedAResult: {\n    trackResultClickedWire,\n    storeClickedResultWire\n  },\n  UserClickedResultAddToCart: {\n    trackAddToCartWire,\n    trackResultClickedWire\n  },\n  UserClickedPDPAddToCart: {\n    trackAddToCartFromSessionStorage\n  },\n  UserClickedABanner: {\n    trackBannerClickedWire\n  },\n  UserClickedADisplayResult: {\n    trackDisplayClickedWire,\n    setQueryTaggingFromQueryPreview\n  },\n  SemanticQueriesResponseChanged: {\n    trackNoResultsQueryWithSemanticsWireDebounced\n  },\n  ModuleRegistered: {\n    setNoResultsTaggingEnabledWire\n  }\n});\n"],"names":[],"mappings":";;;;;;;;;;AAeA;;;;AAIG;AACH,MAAM,UAAU,GAAG,SAAS,CAAC;AAE7B;;AAEG;AACH,MAAM,cAAc,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAEtD;;;;AAIG;AACH,MAAM,UAAU,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAC;AAEpD;;;;AAIG;AACH,MAAM,YAAY,GAAG,sBAAsB,CAAC,UAAU,CAAC,CAAC;AAExD;;AAEG;AACH,MAAM,gCAAgC,GAAG,yBAAyB,CAAC,qBAAqB,CAAC,QAAQ,CAAC,CAAC;AAEnG;;AAEG;AACH,MAAM,uBAAuB,GAAG,WAAW,CAAC,0BAA0B,CAAC,QAAQ,CAAC,CAAC;AAEjF;;;;AAIG;AACH,MAAM,sBAAsB,GAAG,uBAAuB,CAAC,oBAAoB,CAAC,CAAC;AAE7E;;;;AAIG;AACH,MAAM,8BAA8B,GAAG,OAAO,CAC5C,uBAAuB,CAAC,sBAAsB,CAAC,EAC/C,CAAC,OAAe,KAAI;IAClB,OAAO,OAAO,KAAK,KAAK,GAAG,SAAS,GAAG,OAAO,CAAC;AACjD,CAAC,CACF,CAAC;AAEF;;;;AAIG;AACH,MAAM,gCAAgC,GAAG,uBAAuB,CAAC,gBAAgB,CAAC,CAAC;AAEnF;;;;AAIG;AACH,MAAM,gBAAgB,GAAG,MAAM,CAC7B,gCAAgC,CAAC,gBAAgB,CAAC,EAClD,CAAC,EAAE,YAAY,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,CACxC,CAAC;AAEF;;;;AAIG;MACU,UAAU,GAAG,UAAU,CAAC,YAAY,EAAE;AAEnD;;;;AAIG;MACU,8BAA8B,GAAG,UAAU,CAAC,4BAA4B,EAAE;AAEvF;;;;AAIG;MACU,gBAAgB,GAAG,UAAU,CAAC,aAAa,EAAE;AAE1D;;;;AAIG;AACU,MAAA,cAAc,GAAG,MAAM,CAClC,YAAY,CAAC,OAAO,CAAC,EACrB,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,KACrB,YAA+B,CAAC,MAAM,CAAC,SAAS,GAAG,CAAC;IACrD,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,uBAAuB,EAChD;AAEF;;;;;AAKG;MACU,mBAAmB,GAAG,cAAc,CAC/C,UAAU,CAAC,qBAAqB,CAAC,EACjC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,sBAAsB,EAClD;AACE,IAAA,QAAQ,EAAE,kBAAkB;AAC5B,IAAA,OAAO,EAAE;QACP,oBAAoB;QACpB,sBAAsB;QACtB,oBAAoB;QACpB,yBAAyB;QACzB,2BAA2B;AAC5B,KAAA;AACF,CAAA,EACD;AAEF;;;;AAIG;AACU,MAAA,+BAA+B,GAAG,qCAAqC,GAAG;AAEvF;;;;AAIG;MACU,sBAAsB,GAAG,eAAe,CAAC,OAAO,EAAE;AAE/D;;;;AAIG;MACU,sBAAsB,GAAG,eAAe,CAAC,OAAO,EAAE;AAE/D;;;;AAIG;MACU,kBAAkB,GAAG,eAAe,CAAC,UAAU,EAAE;AAE9D;;;;AAIG;MACU,uBAAuB,GAAG,sBAAsB,CAAC,cAAc,EAAE;AAE9E;;;;AAIG;MACU,yBAAyB,GAAG,sBAAsB,CAAC,SAAS,EAAE;AAE3E;;;;;;;AAOG;AACG,SAAU,eAAe,CAAC,QAAuB,EAAA;IACrD,OAAO,MAAM,CACX,YAAY,CAAC,OAAO,EAAE,CAAC,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAI;AAC9E,QAAA,MAAM,WAAW,GAAmB,OAAO,CAAC,QAAQ,CAAC,CAAC;AACtD,QAAA,WAAW,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAkB,CAAC;AACjD,QAAA,OAAO,WAAW,CAAC;AACrB,KAAC,CAAC,EACF,CAAC,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,QAAQ,EAAE,EAAE,eAAe,EAAE,EAAE,KAC3D,CAAC,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,UAAU,CAAC,CAClE,CAAC;AACJ,CAAC;AAED;;;;;;AAMG;AACU,MAAA,oCAAoC,GAAG,MAAM,CACxD,YAAY,CAAC,OAAO,EAAE,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,KAAI;AAChD,IAAA,MAAM,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;AACnC,IAAA,MAAM,SAAS,GAAI,YAAgC,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IACxE,OAAO;QACL,MAAM,EAAE,EAAE,GAAG,gBAAgB,EAAE,MAAM,EAAE,SAAS,EAAE;AAClD,QAAA,GAAG,EAAE,gBAAgB,EAAE,GAAG,IAAI,EAAE;KACjC,CAAC;AACJ,CAAC,CAAC,EACF,CAAC,EAAE,KAAK,EAAE,KAAK,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,EAAE,MAAM,CAAC,SAAS,CAAE,KAAK,CAAC,EACtF;AAEF;;;;AAIG;AACU,MAAA,6CAA6C,GAAG,cAAc,CACzE,oCAAoC,EACpC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,sBAAsB,EAClD,EAAE,QAAQ,EAAE,uBAAuB,EAAE,EACrC;AAEF;;;;;;;AAOG;AACG,SAAU,sBAAsB,CAAC,QAAuB,EAAA;AAC5D,IAAA,OAAO,MAAM,CACX,YAAY,CAAC,OAAO,EAAE,CAAC,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,QAAQ,EAAE,KAAI;AAChE,QAAA,MAAM,WAAW,GAAmB,OAAO,CAAC,QAAQ,CAAC,CAAC;AACtD,QAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,QAA2B,CAAC;AAEtD,QAAA,WAAW,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AACvC,QAAA,WAAW,CAAC,MAAM,CAAC,aAAa,GAAG,YAAY,CAAC;YAC9C,OAAO,EAAE,QAAQ,CAAC,OAAO;YACzB,QAAQ;AACT,SAAA,CAAE,CAAC;QACJ,WAAW,CAAC,MAAM,CAAC,CAAC,GAAI,QAAgC,CAAC,oBAAoB,CAAC;AAE9E,QAAA,OAAO,WAAW,CAAC;KACpB,CAAC,EACF,CAAC,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,KAAK,CAAC,CAAC,OAAO,GAAG,QAAQ,CAAC,CACzD,CAAC;AACJ,CAAC;AAED;;;;;;AAMG;SACa,qCAAqC,GAAA;AACnD,IAAA,OAAO,MAAM,CACX,UAAU,CACR,qBAAqB,EACrB,CAAC,EAAE,QAAQ,EAAE,EAAE,YAAY,EAAE,EAAE,KAAK,YAA8B,CACnE,EACD,CAAC,EAAE,QAAQ,EAAE,EAAE,YAAY,EAAE,EAAE,KAAK,CAAC,CAAC,YAAY,CACnD,CAAC;AACJ,CAAC;AAED;;;;AAIG;AACI,MAAM,aAAa,GAAG,YAAY,CAAC;AACxC,IAAA,eAAe,EAAE;QACf,UAAU;AACX,KAAA;AACD,IAAA,cAAc,EAAE;QACd,gBAAgB;AACjB,KAAA;AACD,IAAA,WAAW,EAAE;QACX,8BAA8B;AAC/B,KAAA;AACD,IAAA,wBAAwB,EAAE;QACxB,8BAA8B;AAC/B,KAAA;AACD,IAAA,oBAAoB,EAAE;QACpB,mBAAmB;AACpB,KAAA;AACD,IAAA,qBAAqB,EAAE;QACrB,cAAc;AACf,KAAA;AACD,IAAA,yBAAyB,EAAE;QACzB,yBAAyB;AAC1B,KAAA;AACD,IAAA,qBAAqB,EAAE;QACrB,gBAAgB;AACjB,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,sBAAsB;QACtB,sBAAsB;AACvB,KAAA;AACD,IAAA,0BAA0B,EAAE;QAC1B,kBAAkB;QAClB,sBAAsB;AACvB,KAAA;AACD,IAAA,uBAAuB,EAAE;QACvB,gCAAgC;AACjC,KAAA;AACD,IAAA,kBAAkB,EAAE;QAClB,sBAAsB;AACvB,KAAA;AACD,IAAA,yBAAyB,EAAE;QACzB,uBAAuB;QACvB,+BAA+B;AAChC,KAAA;AACD,IAAA,8BAA8B,EAAE;QAC9B,6CAA6C;AAC9C,KAAA;AACD,IAAA,gBAAgB,EAAE;QAChB,8BAA8B;AAC/B,KAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/tagging/wiring.ts"],"sourcesContent":["import {\n  RelatedPrompt,\n  Result,\n  SemanticQuery,\n  Taggable,\n  Tagging,\n  TaggingRequest\n} from '@empathyco/x-types';\nimport { DefaultSessionService } from '@empathyco/x-utils';\nimport {\n  namespacedWireCommit,\n  namespacedWireDispatch\n} from '../../wiring/namespaced-wires.factory';\nimport { namespacedDebounce } from '../../wiring/namespaced-wires.operators';\nimport { wireService, wireServiceWithoutPayload } from '../../wiring/wires.factory';\nimport { filter, mapWire } from '../../wiring/wires.operators';\nimport { DisplayWireMetadata, Wire } from '../../wiring/wiring.types';\nimport { createWiring } from '../../wiring/wiring.utils';\nimport { createOrigin } from '../../utils/index';\nimport { FeatureLocation } from '../../types/index';\nimport { DefaultExternalTaggingService } from './service/external-tagging.service';\n\n/**\n * `tagging` {@link XModuleName | XModule name}.\n *\n * @internal\n */\nconst moduleName = 'tagging';\n\n/**\n * Debounce function for the module.\n */\nconst moduleDebounce = namespacedDebounce(moduleName);\n\n/**\n * WireCommit for {@link TaggingXModule}.\n *\n * @internal\n */\nconst wireCommit = namespacedWireCommit(moduleName);\n\n/**\n * WireDispatch for {@link TaggingXModule}.\n *\n * @internal\n */\nconst wireDispatch = namespacedWireDispatch(moduleName);\n\n/**\n * Wires without payload factory for {@link DefaultSessionService}.\n */\nconst wireSessionServiceWithoutPayload = wireServiceWithoutPayload(DefaultSessionService.instance);\n\n/**\n * Wires factory for {@link DefaultExternalTaggingService}.\n */\nconst wireExternalTaggingService = wireService(DefaultExternalTaggingService.instance);\n\n/**\n * Stores the given result on the local storage.\n *\n * @public\n */\nconst storeClickedResultWire = wireExternalTaggingService('storeResultClicked');\n\n/**\n * Stores the result added to cart on the local storage.\n *\n * @public\n */\nconst storeAddToCartWire = wireExternalTaggingService('storeAddToCart');\n\n/**\n * Moves the result information from the local storage to session storage.\n *\n * @public\n */\nconst moveClickedResultToSessionWire = mapWire(\n  wireExternalTaggingService('moveToSessionStorage'),\n  (payload: string) => {\n    return payload === 'url' ? undefined : payload;\n  }\n);\n\n/**\n * Triggers the add to cart tracking.\n *\n * @public\n */\nconst trackAddToCartFromSessionStorage = wireExternalTaggingService('trackAddToCart');\n\n/**\n * Clears the session id.\n *\n * @public\n */\nconst clearSessionWire = filter(\n  wireSessionServiceWithoutPayload('clearSessionId'),\n  ({ eventPayload: consent }) => !consent\n);\n\n/**\n * Sets the tagging state `consent`.\n *\n * @public\n */\nexport const setConsent = wireCommit('setConsent');\n\n/**\n * Sets the tagging state `noResultsTaggingEnabled`.\n *\n * @public\n */\nexport const setNoResultsTaggingEnabledWire = wireCommit('setNoResultsTaggingEnabled');\n\n/**\n * Sets the tagging config state.\n *\n * @public\n */\nexport const setTaggingConfig = wireCommit('mergeConfig');\n\n/**\n * Tracks the tagging of the query.\n *\n * @public\n */\nexport const trackQueryWire = filter(\n  wireDispatch('track'),\n  ({ eventPayload, store }) =>\n    ((eventPayload as TaggingRequest).params.totalHits as number) > 0 ||\n    !store.state.x.tagging.noResultsTaggingEnabled\n);\n\n/**\n * Sets the tagging state of the query tagging info using a debounce which ends if the user\n * accepts a query.\n *\n * @public\n */\nexport const setQueryTaggingInfo = moduleDebounce(\n  wireCommit('setQueryTaggingInfo'),\n  ({ state }) => state.config.queryTaggingDebounceMs,\n  {\n    cancelOn: 'UserClearedQuery',\n    forceOn: [\n      'UserClickedAResult',\n      'UserClickedAPromoted',\n      'UserClickedABanner',\n      'UserClickedARedirection',\n      'UserReachedResultsListEnd'\n    ]\n  }\n);\n\n/**\n * Sets the tagging state of the query tagging info using.\n *\n * @public\n */\nexport const setQueryTaggingFromQueryPreview = createSetQueryTaggingFromQueryPreview();\n\n/**\n * Tracks the tagging of the result.\n *\n * @public\n */\nexport const trackResultClickedWire = createTrackWire('click');\n\n/**\n * Tracks the tagging of the banner.\n *\n * @public\n */\nexport const trackBannerClickedWire = createTrackWire('click');\n\n/**\n * Performs a track of a result added to the cart.\n *\n * @public\n */\nexport const trackAddToCartWire = createTrackWire('add2cart');\n\n/**\n * Performs a track of a display result being clicked.\n *\n * @public\n */\nexport const trackDisplayClickedWire = createTrackDisplayWire('displayClick');\n\n/**\n * Performs a track of a display result being clicked.\n *\n * @public\n */\nexport const trackToolingDisplayClickedWire = createTrackToolingDisplayWire();\n\n/**\n * Performs a track of a display result being clicked.\n *\n * @public\n */\nexport const trackToolingAdd2CartWire = createTrackToolingAdd2CartWire();\n\n/**\n * Performs a track of a clicked related prompt.\n *\n * @public\n */\nexport const trackRelatedPromptToolingDisplayClickWire =\n  createTrackRelatedPromptToolingDisplayClickWire();\n\n/**\n * Performs a track of a display element appearing.\n *\n * @public\n */\nexport const trackElementDisplayedWire = createTrackDisplayWire('display');\n\n/**\n * Factory helper to create a wire for the track of a taggable element.\n *\n * @param property - Key of the tagging object to track.\n * @returns A new wire for the given property of the taggable element.\n *\n * @public\n */\nexport function createTrackWire(property: keyof Tagging): Wire<Taggable> {\n  return filter(\n    wireDispatch('track', ({ eventPayload: { tagging }, metadata: { location } }) => {\n      const taggingInfo: TaggingRequest = tagging[property];\n      taggingInfo.params.location = location as string;\n      return taggingInfo;\n    }),\n    ({ eventPayload: { tagging }, metadata: { ignoreInModules } }) =>\n      !!tagging?.[property] && !ignoreInModules?.includes(moduleName)\n  );\n}\n\n/**\n * Performs a track of a query with no results that used semantics as fallback.\n * The totalHits will be changed to -1 if semantic queries are found in order to differentiate\n * it from scenarios where the user encounters a no-results page without any semantic queries.\n *\n * @public\n */\nexport const trackNoResultsQueryWithSemanticsWire = filter(\n  wireDispatch('track', ({ eventPayload, state }) => {\n    const { queryTaggingInfo } = state;\n    const totalHits = (eventPayload as SemanticQuery[]).length > 0 ? -1 : 0;\n    return {\n      params: { ...queryTaggingInfo?.params, totalHits },\n      url: queryTaggingInfo?.url ?? ''\n    };\n  }),\n  ({ store }) => Number(store.state.x.tagging.queryTaggingInfo?.params.totalHits)! === 0\n);\n\n/**.\n * Debounced version of {@link trackNoResultsQueryWithSemanticsWire}\n *\n * @public\n */\nexport const trackNoResultsQueryWithSemanticsWireDebounced = moduleDebounce(\n  trackNoResultsQueryWithSemanticsWire,\n  ({ state }) => state.config.queryTaggingDebounceMs,\n  { cancelOn: 'QueryPreviewUnmounted' }\n);\n\n/**\n * Factory helper to create a wire for the track of the display click.\n *\n * @param property - Key of the tagging object to track.\n * @returns A new wire for the display click of the taggable element.\n *\n * @public\n */\nexport function createTrackDisplayWire(property: keyof Tagging): Wire<Taggable> {\n  return filter(\n    wireDispatch('track', ({ eventPayload: { tagging }, metadata }) => {\n      const taggingInfo: TaggingRequest = tagging[property];\n      const location = metadata.location as FeatureLocation;\n\n      taggingInfo.params.location = location;\n      taggingInfo.params.displayFamily = createOrigin({\n        feature: metadata.feature,\n        location\n      })!;\n      taggingInfo.params.q = (metadata as DisplayWireMetadata).displayOriginalQuery;\n\n      return taggingInfo;\n    }),\n    ({ eventPayload: { tagging } }) => !!tagging?.[property]\n  );\n}\n\n/**\n * Update the tooling tagging params with the result information.\n *\n * @param taggingRequest - The tooling tagging request to be updated.\n * @param result - The clicked result.\n * @returns The tagging request updated.\n *\n * @internal\n */\nfunction updateToolingTaggingWithResult(\n  taggingRequest: TaggingRequest,\n  result: Result\n): TaggingRequest {\n  taggingRequest.params.productId = result.id;\n  taggingRequest.params.title = result.name!;\n  taggingRequest.params.url = result.url!;\n\n  return taggingRequest;\n}\n\n/**\n * Factory helper to create a wire for the track of the tooling display click.\n *\n * @returns A new wire for the tooling display click of the taggable element.\n *\n * @public\n */\nexport function createTrackToolingDisplayWire(): Wire<Taggable> {\n  return filter(\n    wireDispatch('track', ({ eventPayload, metadata }) => {\n      const taggingInfo: TaggingRequest = metadata.toolingTagging as TaggingRequest;\n      const resultInfo = eventPayload as Result;\n\n      updateToolingTaggingWithResult(taggingInfo, resultInfo);\n\n      return taggingInfo;\n    }),\n    ({ metadata }) => !!metadata?.toolingTagging\n  );\n}\n\n/**\n * Factory helper to create a wire for the track of the tooling display add to cart.\n *\n * @returns A new wire for the tooling display add to cart of the taggable element.\n *\n * @public\n */\nexport function createTrackToolingAdd2CartWire(): Wire<Taggable> {\n  return filter(\n    wireDispatch('track', ({ eventPayload, metadata }) => {\n      const taggingInfo: TaggingRequest = metadata.toolingAdd2CartTagging as TaggingRequest;\n      const resultInfo = eventPayload as Result;\n\n      updateToolingTaggingWithResult(taggingInfo, resultInfo);\n\n      return taggingInfo;\n    }),\n    ({ metadata }) => !!metadata?.toolingAdd2CartTagging\n  );\n}\n\n/**\n * Factory helper to create a wire for the track of the tooling display click in a related prompt.\n *\n * @returns A new wire for the tooling display click of the taggable element.\n *\n * @public\n */\nexport function createTrackRelatedPromptToolingDisplayClickWire() {\n  return filter(\n    wireDispatch('track', ({ metadata }) => {\n      const relatedPrompt = metadata.relatedPrompt as RelatedPrompt;\n      const taggingInfo: TaggingRequest = relatedPrompt.tagging\n        ?.toolingDisplayClickTagging as TaggingRequest;\n\n      taggingInfo.params.productId = 'EXPAND';\n      taggingInfo.params.title = relatedPrompt.suggestionText;\n      taggingInfo.params.url = 'none';\n\n      return taggingInfo;\n    }),\n    ({ metadata }) => metadata?.selectedPrompt === -1\n  );\n}\n\n/**\n * Factory helper to create a wire to set the queryTagging.\n *\n * @returns A new wire for the query of a result of a queryPreview.\n *\n * @public\n */\nexport function createSetQueryTaggingFromQueryPreview(): Wire<Taggable> {\n  return filter(\n    wireCommit(\n      'setQueryTaggingInfo',\n      ({ metadata: { queryTagging } }) => queryTagging as TaggingRequest\n    ),\n    ({ metadata: { queryTagging } }) => !!queryTagging\n  );\n}\n\n/**\n * Wiring configuration for the {@link TaggingXModule | tagging module}.\n *\n * @internal\n */\nexport const taggingWiring = createWiring({\n  ConsentProvided: {\n    setConsent\n  },\n  ConsentChanged: {\n    clearSessionWire\n  },\n  PDPIsLoaded: {\n    moveClickedResultToSessionWire\n  },\n  ResultURLTrackingEnabled: {\n    moveClickedResultToSessionWire\n  },\n  SearchTaggingChanged: {\n    setQueryTaggingInfo\n  },\n  SearchTaggingReceived: {\n    trackQueryWire\n  },\n  TrackableElementDisplayed: {\n    trackElementDisplayedWire\n  },\n  TaggingConfigProvided: {\n    setTaggingConfig\n  },\n  UserClickedAResult: {\n    trackResultClickedWire,\n    storeClickedResultWire\n  },\n  UserClickedResultAddToCart: {\n    trackAddToCartWire,\n    trackResultClickedWire,\n    storeAddToCartWire\n  },\n  UserClickedPDPAddToCart: {\n    trackAddToCartFromSessionStorage\n  },\n  UserClickedABanner: {\n    trackBannerClickedWire\n  },\n  UserClickedADisplayResult: {\n    trackDisplayClickedWire,\n    setQueryTaggingFromQueryPreview\n  },\n  SemanticQueriesResponseChanged: {\n    trackNoResultsQueryWithSemanticsWireDebounced\n  },\n  ModuleRegistered: {\n    setNoResultsTaggingEnabledWire\n  },\n  UserClickedARelatedPromptResult: {\n    trackToolingDisplayClickedWire\n  },\n  UserClickedARelatedPromptAdd2Cart: {\n    trackToolingAdd2CartWire\n  },\n  UserSelectedARelatedPrompt: {\n    trackRelatedPromptToolingDisplayClickWire\n  }\n});\n"],"names":[],"mappings":"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"}

package/js/x-modules/url/components/url-handler.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"url-handler.vue.js","sources":["../../../../../src/x-modules/url/components/url-handler.vue"],"sourcesContent":["<template>\n  <GlobalEvents @pageshow=\"onPageShow\" @popstate=\"emitEvents\" target=\"window\" />\n</template>\n\n<script lang=\"ts\">\n  import { Dictionary, objectFilter } from '@empathyco/x-utils';\n  import { computed, defineComponent, inject, onMounted, ref } from 'vue';\n  import { GlobalEvents } from 'vue-global-events';\n  import { FeatureLocation } from '../../../types/origin';\n  import { UrlParams } from '../../../types/url-params';\n  import { isArrayEmpty } from '../../../utils/array';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { SnippetConfig } from '../../../x-installer/api/api.types';\n  import { initialUrlState } from '../store/initial-state';\n  import { UrlParamValue } from '../store/types';\n  import { urlXModule } from '../x-module';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n\n  interface ParsedUrlParams {\n    all: UrlParams;\n    extra: Dictionary<unknown>;\n  }\n\n  /**\n   * This component manages the browser URL parameters to preserve them through reloads and browser\n   * history navigation. It allow to configure the default url parameter names using its attributes.\n   * This component doesn't render elements to the DOM.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'UrlHandler',\n    components: {\n      GlobalEvents\n    },\n    xModule: urlXModule.name,\n    setup: function (props, { attrs }) {\n      const $x = use$x();\n\n      const initialExtraParams = useState('url', ['initialExtraParams']).initialExtraParams;\n\n      /**\n       * The {@link SnippetConfig} provided by an ancestor.\n       *\n       * @internal\n       */\n      const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig');\n\n      /**\n       * Flag to know if the params were already loaded from the URL.\n       *\n       * @internal\n       */\n      const urlLoaded = ref(false);\n\n      /**\n       * The page URL. It is used to compare against the current URL to check navigation state.\n       *\n       * @internal\n       */\n      const url = ref<URL | undefined>(undefined);\n\n      /**\n       * Flag to know if the page has been persisted by the browser's back-forward cache.\n       *\n       * @internal\n       */\n      const isPagePersisted = ref(false);\n\n      /**\n       * Computed to know which params we must get from URL. It gets the params names from the initial\n       * state, to get all default params names, and also from the `$attrs` to get the extra params\n       * names to take into account.\n       *\n       * @returns An array with the name of the params.\n       *\n       * @internal\n       */\n      const managedParamsNames = computed(() => {\n        return Object.keys({ ...initialUrlState, ...attrs });\n      });\n\n      /**\n       * Returns the mapping of the param keys used in the URL is configured through $attrs. This way\n       * we can support any param and extra param, no matters its name.\n       *\n       * @param paramName - The param name to get the Url key.\n       * @returns The key used in the URL for the `paramName` passed.\n       *\n       * @internal\n       */\n      const getUrlKey = (paramName: string): string => {\n        const paramValue = attrs[paramName];\n        return typeof paramValue === 'string' ? paramValue : paramName;\n      };\n\n      /**\n       * Deletes all the parameters in the passed URL.\n       *\n       * @param url - The URL to remove parameters from.\n       * @internal\n       */\n      const deleteUrlParameters = (url: URL): void => {\n        managedParamsNames.value.forEach(paramName =>\n          url.searchParams.delete(getUrlKey(paramName))\n        );\n      };\n\n      /**\n       * Sorts the params in a tuple array [key,value] to generate always the same URL with the params\n       * in the same order.\n       *\n       * @param urlParams - The {@link UrlParams} to sort.\n       * @returns An array of tuples with the key-value of each paramter, sorted by key.\n       * @internal\n       */\n      const sortParams = (urlParams: UrlParams): Array<[string, unknown]> => {\n        return Object.entries(urlParams).sort(([param1], [param2]) => {\n          return param1 < param2 ? -1 : 1;\n        });\n      };\n\n      /**\n       * Set all the provided parameters to the url with the mapped key.\n       *\n       * @param url - The current URL.\n       * @param urlParams - The list of parameters to add.\n       * @remarks The params are filtered because there maybe received extra params which will not be\n       * managed by URL. This is defined by the `managedParamsNames` computed. Also, the parameters\n       * are sorted Alphabetically to produce always the same URL with the same parameters.This is\n       * important for SEO purposes.\n       *\n       * @internal\n       */\n      const setUrlParameters = (url: URL, urlParams: UrlParams): void => {\n        // Only when there is a query the rest of the parameters are valid.\n        if (!urlParams.query) {\n          return;\n        }\n        const filteredParams = objectFilter(urlParams, paramName =>\n          managedParamsNames.value.includes(paramName as string)\n        );\n        const sortedParameters = sortParams(filteredParams);\n        sortedParameters.forEach(([paramName, paramValue]) => {\n          const urlParamKey = getUrlKey(paramName);\n          if (Array.isArray(paramValue)) {\n            paramValue.forEach(value => {\n              url.searchParams.append(urlParamKey, String(value));\n            });\n          } else {\n            url.searchParams.set(urlParamKey, String(paramValue));\n          }\n        });\n      };\n\n      /**\n       * Updates the browser URL with the passed `newUrlParams` and using the browser history method\n       * passed as `historyMethod`. It only updates the browser history if the new URL is different\n       * from the current.\n       *\n       * @param newUrlParams - The new params to add to the browser URL.\n       * @param historyMethod - The browser history method used to add the new URL.\n       *\n       * @internal\n       */\n      const updateUrl = (\n        newUrlParams: UrlParams,\n        historyMethod: History['pushState'] | History['replaceState']\n      ): void => {\n        if (urlLoaded.value) {\n          const newUrl = new URL(window.location.href);\n          deleteUrlParameters(newUrl);\n          setUrlParameters(newUrl, newUrlParams);\n\n          newUrl.href = newUrl.href.replace(/\\+/g, '%20');\n\n          if (newUrl.href !== window.location.href) {\n            historyMethod({ ...window.history.state }, document.title, newUrl.href);\n          }\n          url.value = newUrl;\n        }\n      };\n\n      /**\n       * Updates the browser URL with the new {@link UrlParams} using the history `pushState` method.\n       *\n       * @param newUrlParams - The new params to update browser URL.\n       */\n      $x.on('PushableUrlStateUpdated', false).subscribe((newUrlParams: UrlParams) => {\n        updateUrl(newUrlParams, window.history.pushState.bind(window.history));\n      });\n\n      /**\n       * Updates the browser URL with the new {@link UrlParams} using the history `replaceState`\n       * method.\n       *\n       * @param newUrlParams - The new params to update browser URL.\n       */\n      $x.on('ReplaceableUrlStateUpdated', false).subscribe((newUrlParams: UrlParams) => {\n        updateUrl(newUrlParams, window.history.replaceState.bind(window.history));\n      });\n\n      /**\n       * Handler of the\n       * [pageshow](https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event)\n       * event.\n       *\n       * @remarks The pageshow event is listened to check if the browser has performed a navigation\n       * using the back-forward cache. This information is available in the\n       * PageTransitionEvent.persisted property.\n       *\n       * @param event - The page transition event.\n       * @internal\n       */\n      const onPageShow = (event: PageTransitionEvent) => {\n        isPagePersisted.value = event.persisted;\n        if (event.persisted) {\n          // The internal url is reset due to the back-forward cache storing the previous value which\n          // is no longer valid.\n          url.value = undefined;\n        }\n      };\n\n      /**\n       * Returns the URL param value parsed depending on its type in the initial store state. As we\n       * can not know what type can have an extra param, all extra params are parsed as strings. We\n       * know if it is an extra param because it is not in the initial state.\n       *\n       * @param name - The name of the param in {@link UrlParams}.\n       * @param value - The `URLSearchParams` value as an arry of strings.\n       * @returns The parsed value.\n       *\n       * @internal\n       */\n      const parseUrlParam = (name: string, value: string[]): UrlParamValue => {\n        switch (typeof initialUrlState[name]) {\n          case 'number':\n            return Number(value[0]);\n          case 'boolean':\n            return value[0].toLowerCase() === 'true';\n          case 'string':\n            return value[0];\n          default:\n            // array\n            return value;\n        }\n      };\n\n      /**\n       * Gets the {@link UrlParams} from the URL, including only the params defined by `paramsNames`.\n       *\n       * @returns ParsedUrlParams obtained from URL.\n       * @internal\n       */\n      const parseUrlParams = (): ParsedUrlParams => {\n        const urlSearchParams = new URL(window.location.href).searchParams;\n        return managedParamsNames.value.reduce<ParsedUrlParams>(\n          (params, name) => {\n            const urlKey = getUrlKey(name);\n            if (urlSearchParams.has(urlKey)) {\n              if (name in initialUrlState) {\n                const urlValue = urlSearchParams.getAll(urlKey);\n                params.all[name] = parseUrlParam(name, urlValue);\n              } else {\n                params.all[name] = params.extra[name] = urlSearchParams.get(urlKey);\n              }\n            }\n            return params;\n          },\n          { all: { ...initialUrlState }, extra: { ...initialExtraParams.value } }\n        );\n      };\n\n      /**\n       * Check if the navigation is from a product page.\n       *\n       * @remarks Due to Safari 14 not supporting the new and standard PerformanceNavigationTiming\n       * API, we are falling back to the deprecated one, PerformanceNavigation. We also fallback to\n       * this API whenever we get a navigationType equal to reload, because Safari has a bug that the\n       * navigationType is permanently set to reload after you have reload the page and it never\n       * resets. As some browsers have a back-forward cache implemented, we also take into account if\n       * the page is persisted.\n       *\n       * @returns True if the navigation is from a product page, false otherwise.\n       * @internal\n       */\n      const isNavigatingFromPdp = (): boolean => {\n        const isPagePersistedValue = isPagePersisted.value;\n        const navigationEntries = window.performance.getEntriesByType('navigation');\n        const navigationType = (navigationEntries[0] as PerformanceNavigationTiming)?.type;\n        const useFallbackStrategy =\n          !navigationEntries.length &&\n          (isArrayEmpty(navigationEntries) || navigationType === 'reload');\n\n        // Reset internal isPagePersisted property value\n        isPagePersisted.value = false;\n\n        if (useFallbackStrategy) {\n          const isNavigatingInSpa = !!snippetConfig?.isSpa && navigationType === 'navigate';\n          return navigationType === 'back_forward' || isNavigatingInSpa || isPagePersistedValue;\n        } else {\n          const isNavigatingInSpa = !!snippetConfig?.isSpa && navigationType === 'navigate';\n          return navigationType === 'back_forward' || isNavigatingInSpa || isPagePersistedValue;\n        }\n      };\n\n      /**\n       * Detects the {@link FeatureLocation} used to build the\n       * {@link QueryOriginInit} data.\n       *\n       * @returns The {@link FeatureLocation}.\n       * @internal\n       */\n      const detectLocation = (): FeatureLocation => {\n        const currentUrl = new URL(window.location.href);\n        const previousUrl = url.value;\n        url.value = currentUrl;\n\n        const isInternalNavigation =\n          previousUrl?.search !== currentUrl.search &&\n          previousUrl?.pathname === currentUrl.pathname;\n        if (isInternalNavigation) {\n          return 'url_history';\n        }\n\n        if (isNavigatingFromPdp()) {\n          return 'url_history_pdp';\n        }\n\n        return 'external';\n      };\n\n      /**\n       * Creates the wire metadata to include in every emitted {@link XEvent}.\n       *\n       * @returns The {@link WireMetadata}.\n       * @internal\n       */\n      const createWireMetadata = (): Pick<WireMetadata, 'feature' | 'location'> => {\n        return {\n          feature: 'url',\n          location: detectLocation()\n        };\n      };\n\n      /**\n       * Emits the {@link UrlXEvents.ParamsLoadedFromUrl} XEvent,\n       * the {@link UrlXEvents.ExtraParamsLoadedFromUrl} XEvent and, if there is query, also emits\n       * the {@link XEventsTypes.UserOpenXProgrammatically}.\n       *\n       * @internal\n       */\n      const emitEvents = () => {\n        const { all, extra } = parseUrlParams();\n        const metadata = createWireMetadata();\n        $x.emit('ParamsLoadedFromUrl', all, metadata);\n        $x.emit('ExtraParamsLoadedFromUrl', extra, metadata);\n        if (all.query) {\n          $x.emit('UserOpenXProgrammatically', undefined, metadata);\n        }\n        urlLoaded.value = true;\n      };\n\n      /**\n       * To emit the Url events just when the URL is load, and before the components mounted events\n       * and state changes, we do it in the created of this component.\n       */\n      onMounted(() => {\n        emitEvents();\n      });\n\n      return {\n        onPageShow,\n        emitEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`ParamsLoadedFromUrl`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`ExtraParamsLoadedFromUrl`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserOpenXProgrammatically`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component manages the browser URL parameters to preserve them through reloads and browser\nhistory navigation. It allow to configure the default url parameter names using its attributes. This\ncomponent doesn't render elements to the DOM.\n\n_Try to make some requests and take a look to the url!_\n\n```vue\n<template>\n  <UrlHandler />\n</template>\n\n<script>\n  import { UrlHandler } from '@empathyco/x-components/url-handler';\n\n  export default {\n    name: 'UrlHandlerDemo',\n    components: {\n      UrlHandler\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the `UrlHandler` component changes the following query parameter names:\n\n- `query` to be `q`.\n- `page` to be `p`.\n- `filter` to be `f`\n- `sort` to be `s`\n\n_Try to make some requests and take a look to the url!_\n\n```vue\n<template>\n  <UrlHandler query=\"q\" page=\"p\" filter=\"f\" sort=\"s\" />\n</template>\n\n<script>\n  import { UrlHandler } from '@empathyco/x-components/url-handler';\n\n  export default {\n    name: 'UrlHandlerDemo',\n    components: {\n      UrlHandler\n    }\n  };\n</script>\n```\n\n### Play with events\n\nThe `UrlHandler` will emit the `ParamsLoadedFromUrl` when the page is loaded.\n\nThe `UrlHandler` will emit the `ExtraParamsLoadedFromUrl` when the page is loaded with an extra\nparam configured and with a value in URL.\n\nThe `UrlHandler` will emit the `UserOpenXProgrammatically` when the page is loaded with a query in\nthe URL.\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock"],"mappings":";;;;;kCACEA,gBAA8E,CAAA,cAAA,CAAA,CAAA;AAAxC,EAAA,OAAAC,SAAA,EAAoB,EAAAC,WAAA,CAAA,uBAAA,EAAA;AAAA,IAAE,YAAO,IAAQ,CAAA,UAAA;AAAA,IAAA,UAAA,EAAA,IAAA,CAAA,UAAA;;;;;;;;"}
+{"version":3,"file":"url-handler.vue.js","sources":["../../../../../src/x-modules/url/components/url-handler.vue"],"sourcesContent":["<template>\n  <GlobalEvents @pageshow=\"onPageShow\" @popstate=\"emitEvents\" target=\"window\" />\n</template>\n\n<script lang=\"ts\">\n  import { Dictionary, objectFilter } from '@empathyco/x-utils';\n  import { computed, defineComponent, inject, onMounted, ref } from 'vue';\n  import { GlobalEvents } from 'vue-global-events';\n  import { FeatureLocation } from '../../../types/origin';\n  import { UrlParams } from '../../../types/url-params';\n  import { isArrayEmpty } from '../../../utils/array';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { SnippetConfig } from '../../../x-installer/api/api.types';\n  import { initialUrlState } from '../store/initial-state';\n  import { UrlParamValue } from '../store/types';\n  import { urlXModule } from '../x-module';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n\n  interface ParsedUrlParams {\n    all: UrlParams;\n    extra: Dictionary<unknown>;\n  }\n\n  /**\n   * This component manages the browser URL parameters to preserve them through reloads and browser\n   * history navigation. It allow to configure the default url parameter names using its attributes.\n   * This component doesn't render elements to the DOM.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'UrlHandler',\n    components: {\n      GlobalEvents\n    },\n    xModule: urlXModule.name,\n    setup: function (props, { attrs }) {\n      const $x = use$x();\n\n      const initialExtraParams = useState('url', ['initialExtraParams']).initialExtraParams;\n\n      /**\n       * The {@link SnippetConfig} provided by an ancestor.\n       *\n       * @internal\n       */\n      const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig');\n\n      /**\n       * Flag to know if the params were already loaded from the URL.\n       *\n       * @internal\n       */\n      const urlLoaded = ref(false);\n\n      /**\n       * The page URL. It is used to compare against the current URL to check navigation state.\n       *\n       * @internal\n       */\n      const url = ref<URL | undefined>(undefined);\n\n      /**\n       * Flag to know if the page has been persisted by the browser's back-forward cache.\n       *\n       * @internal\n       */\n      const isPagePersisted = ref(false);\n\n      /**\n       * Computed to know which params we must get from URL. It gets the params names from the initial\n       * state, to get all default params names, and also from the `$attrs` to get the extra params\n       * names to take into account.\n       *\n       * @returns An array with the name of the params.\n       *\n       * @internal\n       */\n      const managedParamsNames = computed(() => {\n        return Object.keys({ ...initialUrlState, ...attrs });\n      });\n\n      /**\n       * Returns the mapping of the param keys used in the URL is configured through $attrs. This way\n       * we can support any param and extra param, no matters its name.\n       *\n       * @param paramName - The param name to get the Url key.\n       * @returns The key used in the URL for the `paramName` passed.\n       *\n       * @internal\n       */\n      const getUrlKey = (paramName: string): string => {\n        const paramValue = attrs[paramName];\n        return typeof paramValue === 'string' ? paramValue : paramName;\n      };\n\n      /**\n       * Deletes all the parameters in the passed URL.\n       *\n       * @param url - The URL to remove parameters from.\n       * @internal\n       */\n      const deleteUrlParameters = (url: URL): void => {\n        managedParamsNames.value.forEach(paramName =>\n          url.searchParams.delete(getUrlKey(paramName))\n        );\n      };\n\n      /**\n       * Sorts the params in a tuple array [key,value] to generate always the same URL with the params\n       * in the same order.\n       *\n       * @param urlParams - The {@link UrlParams} to sort.\n       * @returns An array of tuples with the key-value of each paramter, sorted by key.\n       * @internal\n       */\n      const sortParams = (urlParams: UrlParams): Array<[string, unknown]> => {\n        return Object.entries(urlParams).sort(([param1], [param2]) => {\n          return param1 < param2 ? -1 : 1;\n        });\n      };\n\n      /**\n       * Set all the provided parameters to the url with the mapped key.\n       *\n       * @param url - The current URL.\n       * @param urlParams - The list of parameters to add.\n       * @remarks The params are filtered because there maybe received extra params which will not be\n       * managed by URL. This is defined by the `managedParamsNames` computed. Also, the parameters\n       * are sorted Alphabetically to produce always the same URL with the same parameters.This is\n       * important for SEO purposes.\n       *\n       * @internal\n       */\n      const setUrlParameters = (url: URL, urlParams: UrlParams): void => {\n        // Only when there is a query the rest of the parameters are valid.\n        if (!urlParams.query) {\n          return;\n        }\n        const filteredParams = objectFilter(urlParams, paramName =>\n          managedParamsNames.value.includes(paramName as string)\n        );\n        const sortedParameters = sortParams(filteredParams);\n        sortedParameters.forEach(([paramName, paramValue]) => {\n          const urlParamKey = getUrlKey(paramName);\n          if (Array.isArray(paramValue)) {\n            paramValue.forEach(value => {\n              url.searchParams.append(urlParamKey, String(value));\n            });\n          } else {\n            url.searchParams.set(urlParamKey, String(paramValue));\n          }\n        });\n      };\n\n      /**\n       * Updates the browser URL with the passed `newUrlParams` and using the browser history method\n       * passed as `historyMethod`. It only updates the browser history if the new URL is different\n       * from the current.\n       *\n       * @param newUrlParams - The new params to add to the browser URL.\n       * @param historyMethod - The browser history method used to add the new URL.\n       *\n       * @internal\n       */\n      const updateUrl = (\n        newUrlParams: UrlParams,\n        historyMethod: History['pushState'] | History['replaceState']\n      ): void => {\n        if (urlLoaded.value) {\n          const newUrl = new URL(window.location.href);\n          deleteUrlParameters(newUrl);\n          setUrlParameters(newUrl, newUrlParams);\n\n          // Normalize '+' characters into '%20' for spaces in url params.\n          newUrl.search = newUrl.search.replace(/\\+/g, '%20');\n\n          if (newUrl.href !== window.location.href) {\n            historyMethod({ ...window.history.state }, document.title, newUrl.href);\n          }\n          url.value = newUrl;\n        }\n      };\n\n      /**\n       * Updates the browser URL with the new {@link UrlParams} using the history `pushState` method.\n       *\n       * @param newUrlParams - The new params to update browser URL.\n       */\n      $x.on('PushableUrlStateUpdated', false).subscribe((newUrlParams: UrlParams) => {\n        updateUrl(newUrlParams, window.history.pushState.bind(window.history));\n      });\n\n      /**\n       * Updates the browser URL with the new {@link UrlParams} using the history `replaceState`\n       * method.\n       *\n       * @param newUrlParams - The new params to update browser URL.\n       */\n      $x.on('ReplaceableUrlStateUpdated', false).subscribe((newUrlParams: UrlParams) => {\n        updateUrl(newUrlParams, window.history.replaceState.bind(window.history));\n      });\n\n      /**\n       * Handler of the\n       * [pageshow](https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event)\n       * event.\n       *\n       * @remarks The pageshow event is listened to check if the browser has performed a navigation\n       * using the back-forward cache. This information is available in the\n       * PageTransitionEvent.persisted property.\n       *\n       * @param event - The page transition event.\n       * @internal\n       */\n      const onPageShow = (event: PageTransitionEvent) => {\n        isPagePersisted.value = event.persisted;\n        if (event.persisted) {\n          // The internal url is reset due to the back-forward cache storing the previous value which\n          // is no longer valid.\n          url.value = undefined;\n        }\n      };\n\n      /**\n       * Returns the URL param value parsed depending on its type in the initial store state. As we\n       * can not know what type can have an extra param, all extra params are parsed as strings. We\n       * know if it is an extra param because it is not in the initial state.\n       *\n       * @param name - The name of the param in {@link UrlParams}.\n       * @param value - The `URLSearchParams` value as an arry of strings.\n       * @returns The parsed value.\n       *\n       * @internal\n       */\n      const parseUrlParam = (name: string, value: string[]): UrlParamValue => {\n        switch (typeof initialUrlState[name]) {\n          case 'number':\n            return Number(value[0]);\n          case 'boolean':\n            return value[0].toLowerCase() === 'true';\n          case 'string':\n            return value[0];\n          default:\n            // array\n            return value;\n        }\n      };\n\n      /**\n       * Gets the {@link UrlParams} from the URL, including only the params defined by `paramsNames`.\n       *\n       * @returns ParsedUrlParams obtained from URL.\n       * @internal\n       */\n      const parseUrlParams = (): ParsedUrlParams => {\n        const urlSearchParams = new URL(window.location.href).searchParams;\n        return managedParamsNames.value.reduce<ParsedUrlParams>(\n          (params, name) => {\n            const urlKey = getUrlKey(name);\n            if (urlSearchParams.has(urlKey)) {\n              if (name in initialUrlState) {\n                const urlValue = urlSearchParams.getAll(urlKey);\n                params.all[name] = parseUrlParam(name, urlValue);\n              } else {\n                params.all[name] = params.extra[name] = urlSearchParams.get(urlKey);\n              }\n            }\n            return params;\n          },\n          { all: { ...initialUrlState }, extra: { ...initialExtraParams.value } }\n        );\n      };\n\n      /**\n       * Check if the navigation is from a product page.\n       *\n       * @remarks Due to Safari 14 not supporting the new and standard PerformanceNavigationTiming\n       * API, we are falling back to the deprecated one, PerformanceNavigation. We also fallback to\n       * this API whenever we get a navigationType equal to reload, because Safari has a bug that the\n       * navigationType is permanently set to reload after you have reload the page and it never\n       * resets. As some browsers have a back-forward cache implemented, we also take into account if\n       * the page is persisted.\n       *\n       * @returns True if the navigation is from a product page, false otherwise.\n       * @internal\n       */\n      const isNavigatingFromPdp = (): boolean => {\n        const isPagePersistedValue = isPagePersisted.value;\n        const navigationEntries = window.performance.getEntriesByType('navigation');\n        const navigationType = (navigationEntries[0] as PerformanceNavigationTiming)?.type;\n        const useFallbackStrategy =\n          !navigationEntries.length &&\n          (isArrayEmpty(navigationEntries) || navigationType === 'reload');\n\n        // Reset internal isPagePersisted property value\n        isPagePersisted.value = false;\n\n        if (useFallbackStrategy) {\n          const isNavigatingInSpa = !!snippetConfig?.isSpa && navigationType === 'navigate';\n          return navigationType === 'back_forward' || isNavigatingInSpa || isPagePersistedValue;\n        } else {\n          const isNavigatingInSpa = !!snippetConfig?.isSpa && navigationType === 'navigate';\n          return navigationType === 'back_forward' || isNavigatingInSpa || isPagePersistedValue;\n        }\n      };\n\n      /**\n       * Detects the {@link FeatureLocation} used to build the\n       * {@link QueryOriginInit} data.\n       *\n       * @returns The {@link FeatureLocation}.\n       * @internal\n       */\n      const detectLocation = (): FeatureLocation => {\n        const currentUrl = new URL(window.location.href);\n        const previousUrl = url.value;\n        url.value = currentUrl;\n\n        const isInternalNavigation =\n          previousUrl?.search !== currentUrl.search &&\n          previousUrl?.pathname === currentUrl.pathname;\n        if (isInternalNavigation) {\n          return 'url_history';\n        }\n\n        if (isNavigatingFromPdp()) {\n          return 'url_history_pdp';\n        }\n\n        return 'external';\n      };\n\n      /**\n       * Creates the wire metadata to include in every emitted {@link XEvent}.\n       *\n       * @returns The {@link WireMetadata}.\n       * @internal\n       */\n      const createWireMetadata = (): Pick<WireMetadata, 'feature' | 'location'> => {\n        return {\n          feature: 'url',\n          location: detectLocation()\n        };\n      };\n\n      /**\n       * Emits the {@link UrlXEvents.ParamsLoadedFromUrl} XEvent,\n       * the {@link UrlXEvents.ExtraParamsLoadedFromUrl} XEvent and, if there is query, also emits\n       * the {@link XEventsTypes.UserOpenXProgrammatically}.\n       *\n       * @internal\n       */\n      const emitEvents = () => {\n        const { all, extra } = parseUrlParams();\n        const metadata = createWireMetadata();\n        $x.emit('ParamsLoadedFromUrl', all, metadata);\n        $x.emit('ExtraParamsLoadedFromUrl', extra, metadata);\n        if (all.query) {\n          $x.emit('UserOpenXProgrammatically', undefined, metadata);\n        }\n        urlLoaded.value = true;\n      };\n\n      /**\n       * To emit the Url events just when the URL is load, and before the components mounted events\n       * and state changes, we do it in the created of this component.\n       */\n      onMounted(() => {\n        emitEvents();\n      });\n\n      return {\n        onPageShow,\n        emitEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`ParamsLoadedFromUrl`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`ExtraParamsLoadedFromUrl`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserOpenXProgrammatically`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component manages the browser URL parameters to preserve them through reloads and browser\nhistory navigation. It allow to configure the default url parameter names using its attributes. This\ncomponent doesn't render elements to the DOM.\n\n_Try to make some requests and take a look to the url!_\n\n```vue\n<template>\n  <UrlHandler />\n</template>\n\n<script>\n  import { UrlHandler } from '@empathyco/x-components/url-handler';\n\n  export default {\n    name: 'UrlHandlerDemo',\n    components: {\n      UrlHandler\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the `UrlHandler` component changes the following query parameter names:\n\n- `query` to be `q`.\n- `page` to be `p`.\n- `filter` to be `f`\n- `sort` to be `s`\n\n_Try to make some requests and take a look to the url!_\n\n```vue\n<template>\n  <UrlHandler query=\"q\" page=\"p\" filter=\"f\" sort=\"s\" />\n</template>\n\n<script>\n  import { UrlHandler } from '@empathyco/x-components/url-handler';\n\n  export default {\n    name: 'UrlHandlerDemo',\n    components: {\n      UrlHandler\n    }\n  };\n</script>\n```\n\n### Play with events\n\nThe `UrlHandler` will emit the `ParamsLoadedFromUrl` when the page is loaded.\n\nThe `UrlHandler` will emit the `ExtraParamsLoadedFromUrl` when the page is loaded with an extra\nparam configured and with a value in URL.\n\nThe `UrlHandler` will emit the `UserOpenXProgrammatically` when the page is loaded with a query in\nthe URL.\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock"],"mappings":";;;;;kCACEA,gBAA8E,CAAA,cAAA,CAAA,CAAA;AAAxC,EAAA,OAAAC,SAAA,EAAoB,EAAAC,WAAA,CAAA,uBAAA,EAAA;AAAA,IAAE,YAAO,IAAQ,CAAA,UAAA;AAAA,IAAA,UAAA,EAAA,IAAA,CAAA,UAAA;;;;;;;;"}