@liquidcommercedev/rmn-sdk 1.5.0-beta.7 → 1.5.0-beta.9

package/dist/index.cjs

@@ -55,9 +55,13 @@ exports.RMN_FILTER_PROPERTIES = void 0;
     RMN_FILTER_PROPERTIES["PUBLISHERS"] = "publishers";
     RMN_FILTER_PROPERTIES["SECTION"] = "section";
 })(exports.RMN_FILTER_PROPERTIES || (exports.RMN_FILTER_PROPERTIES = {}));
+exports.RMN_EVENT = void 0;
+(function (RMN_EVENT) {
+    RMN_EVENT["LIFECYCLE_STATE"] = "LIFECYCLE_STATE";
+    RMN_EVENT["SPOT_EVENT"] = "SPOT_EVENT";
+})(exports.RMN_EVENT || (exports.RMN_EVENT = {}));
 exports.RMN_SPOT_EVENT = void 0;
 (function (RMN_SPOT_EVENT) {
-    RMN_SPOT_EVENT["LIFECYCLE_STATE"] = "LIFECYCLE_STATE";
     RMN_SPOT_EVENT["IMPRESSION"] = "IMPRESSION";
     RMN_SPOT_EVENT["CLICK"] = "CLICK";
     RMN_SPOT_EVENT["PURCHASE"] = "PURCHASE";
@@ -15167,6 +15171,12 @@ const GFONT_CORMORANT = `
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap">
 `;
 
+/**
+ * Determines the event type from a raw event string.
+ *
+ * @param {string} [event] - The raw event string to evaluate.
+ * @returns {RMN_SPOT_EVENT | null} - The corresponding RMN_SPOT_EVENT or null if no match is found.
+ */
 function getEventTypeFromRawEvent(event) {
     if (!event) {
         return null;
@@ -15195,7 +15205,7 @@ function getEventTypeFromRawEvent(event) {
  * Searches for specified property names and collects their primitive values (strings/numbers).
  *
  * @param data - The data structure to search through (can be nested objects/arrays)
- * @param propertyNames - Array of property names to look for (defaults to ['id', 'upc', 'groupingId', 'sku', 'productId'])
+ * @param propertyNames - Array of property names to look for
  * @returns Array of extracted ID values (strings/numbers only)
  *
  * @example
@@ -15206,10 +15216,27 @@ function getEventTypeFromRawEvent(event) {
  * };
  * extractDeepIds(data); // Returns [1, 2, 3, 'abc', 456]
  */
-function extractDeepIds(data, propertyNames = ['id', 'upc', 'groupingId', 'sku', 'productId']) {
+function extractDeepIds(data, propertyNames) {
     const ids = [];
+    const defaulPropertyNames = [
+        'id',
+        'upc',
+        'groupingId',
+        'sku',
+        'productId',
+        'item_id',
+        'isbn',
+        'asin',
+        'mpn',
+        'model_number',
+        'article_number',
+        'variant_id',
+        'item_number',
+        'catalog_id',
+        'reference_id',
+    ];
     // Set for faster property name lookups
-    const propertySet = new Set(propertyNames);
+    const propertySet = new Set(defaulPropertyNames);
     /**
      * Processes a value and extracts IDs if it matches criteria
      * @param value - The value to process
@@ -15244,54 +15271,106 @@ function extractDeepIds(data, propertyNames = ['id', 'upc', 'groupingId', 'sku',
     processValue(data);
     return ids; // No need to filter nulls as we handle that during collection
 }
-
-class DataLayerMonitor {
-    constructor() {
-        if (!window.dataLayer) {
-            return;
-        }
-        this.originalPush = window.dataLayer.push;
+// Fallback method using fetch if sendBeacon isn't available
+async function fallbackEventFire(url) {
+    try {
+        const racePromise = Promise.race([
+            // Promise #1: The fetch request
+            fetch(url, {
+                method: 'POST',
+                keepalive: true,
+            }),
+            // Promise #2: The timeout
+            new Promise((_, reject) => setTimeout(() => reject(new Error('Request timeout')), 2000)),
+        ]);
+        /**
+         * Prevent requests from hanging indefinitely
+         * Improve user experience by failing fast
+         * Handle slow network conditions gracefully
+         * Ensure resources are freed up in a timely manner
+         */
+        const response = await racePromise;
+        return response.ok;
     }
-    static getInstance() {
-        if (!DataLayerMonitor.instance) {
-            DataLayerMonitor.instance = new DataLayerMonitor();
+    catch (_a) {
+        return false;
+    }
+}
+/**
+ * Extracts and decodes a URL from a base64-encoded query parameter.
+ *
+ * @param {string} url - The URL containing the base64-encoded query parameter.
+ * @returns {string | null} - The decoded URL or null if not found or invalid.
+ */
+function getRedirectUrlFromPayload(url) {
+    try {
+        const base64String = new URL(url).searchParams.get('e');
+        if (!base64String) {
+            return null;
         }
-        return DataLayerMonitor.instance;
+        const data = JSON.parse(atob(base64String));
+        return data.ur || null;
     }
-    setListener(listener) {
-        this.listener = listener;
+    catch (_a) {
+        return null;
     }
-    start() {
-        window.dataLayer.push = (...args) => {
-            const result = this.originalPush.apply(window.dataLayer, args);
-            const pushedEvent = args[0];
-            if (this.listener) {
-                const normalizedData = this.cleanEventData(pushedEvent);
-                if (normalizedData) {
-                    this.listener(normalizedData);
-                }
+}
+/**
+ * Fires an event using the navigator.sendBeacon method or a fallback method if sendBeacon is not available.
+ * If the event is a click event and a redirect URL is found, it redirects the user to that URL.
+ *
+ * @param {IFireEventParams} params - The parameters for firing the event.
+ * @param {RMN_SPOT_EVENT} params.event - The event type.
+ * @param {string} params.eventUrl - The URL to which the event is sent.
+ * @returns {Promise<void>} - A promise that resolves when the event is fired.
+ */
+async function fireEvent({ event, eventUrl }) {
+    var _a;
+    try {
+        const didFireEvent = ((_a = navigator === null || navigator === void 0 ? void 0 : navigator.sendBeacon) === null || _a === void 0 ? void 0 : _a.call(navigator, eventUrl)) || (await fallbackEventFire(eventUrl));
+        if (!didFireEvent) {
+            return;
+        }
+        if (event === exports.RMN_SPOT_EVENT.CLICK) {
+            const redirectUrl = getRedirectUrlFromPayload(eventUrl);
+            if (redirectUrl) {
+                window.location.href = redirectUrl;
             }
-            return result;
-        };
-    }
-    cleanEventData(data) {
-        const eventName = getEventTypeFromRawEvent(data.event);
-        if (!eventName) {
-            return null;
         }
-        const productIds = extractDeepIds(data.value);
-        return {
-            event: eventName,
-            productIds,
-        };
     }
-    stop() {
-        if (this.originalPush) {
-            window.dataLayer.push = this.originalPush;
-        }
-        this.listener = undefined;
+    catch (_b) {
+        // Handle errors silently
     }
 }
+function calculateScaleFactor(elementScale) {
+    // Step 1: Apply square root for non-linear scaling
+    // This creates a more gradual scaling effect, especially for larger changes
+    // For example:
+    // - elementScale of 0.25 (1/4 size) becomes 0.5
+    // - elementScale of 1 (unchanged) remains 1
+    // - elementScale of 4 (4x size) becomes 2
+    const baseFactor = Math.sqrt(elementScale);
+    // Step 2: Apply additional dampening to further soften the scaling effect
+    // The dampening factor (0.5) can be adjusted:
+    // - Lower values (closer to 0) make scaling more subtle
+    // - Higher values (closer to 1) make scaling more pronounced
+    const dampening = 0.35;
+    // Calculate the scaleFactor:
+    // 1. (baseFactor - 1) represents the change from the original size
+    // 2. Multiply by dampening to reduce the effect
+    // 3. Add 1 to center the scaling around the original size
+    // For example, if baseFactor is 2:
+    // scaleFactor = 1 + (2 - 1) * 0.5 = 1.5
+    const scaleFactor = 1 + (baseFactor - 1) * dampening;
+    // Step 3: Define the allowed range for the scale factor
+    // This ensures that the font size never changes too drastically
+    const minScale = 0.35; // Font will never be smaller than 50% of original
+    const maxScale = 1.5; // Font will never be larger than 150% of original
+    // Step 4: Clamp the scale factor to the defined range
+    // Math.min ensures the value doesn't exceed maxScale
+    // Math.max ensures the value isn't less than minScale
+    return Math.max(minScale, Math.min(maxScale, scaleFactor));
+}
 
 class IntersectionObserverService {
     constructor(defaultOptions = {}) {
@@ -15341,7 +15420,7 @@ var ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX;
     ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX[ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX["PRODUCT_IDS"] = 3] = "PRODUCT_IDS";
     ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX[ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX["CREATED_AT"] = 4] = "CREATED_AT";
 })(ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX || (ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX = {}));
-class LocalStorage {
+class LocalStorageService {
     constructor() {
         if (typeof window.localStorage === 'undefined') {
             console.warn('Local storage is not supported in this environment');
@@ -15354,13 +15433,13 @@ class LocalStorage {
         this.removeExpiredSpots();
     }
     static getInstance() {
-        if (!LocalStorage.instance) {
-            LocalStorage.instance = new LocalStorage();
+        if (!LocalStorageService.instance) {
+            LocalStorageService.instance = new LocalStorageService();
         }
-        return LocalStorage.instance;
+        return LocalStorageService.instance;
     }
     syncLocalStorage() {
-        const localStorageData = window.localStorage.getItem(LocalStorage.localStorageKey);
+        const localStorageData = window.localStorage.getItem(LocalStorageService.localStorageKey);
         // TODO: Encrypt the data before storing it in the local storage
         if (localStorageData) {
             try {
@@ -15410,17 +15489,17 @@ class LocalStorage {
         for (const [key, value] of Object.entries(data)) {
             dataArray[key] = this.objectToArray(value);
         }
-        window.localStorage.setItem(LocalStorage.localStorageKey, JSON.stringify(dataArray));
+        window.localStorage.setItem(LocalStorageService.localStorageKey, JSON.stringify(dataArray));
     }
     clearLocalStorage() {
-        window.localStorage.removeItem(LocalStorage.localStorageKey);
+        window.localStorage.removeItem(LocalStorageService.localStorageKey);
     }
     removeExpiredSpots() {
         var _a;
         const currentTime = Date.now();
         (_a = this.spots) === null || _a === void 0 ? void 0 : _a.forEach((spot, spotId) => {
             var _a, _b;
-            if (currentTime - ((_a = spot.createdAt) !== null && _a !== void 0 ? _a : 0) > LocalStorage.spotExpirationTime) {
+            if (currentTime - ((_a = spot.createdAt) !== null && _a !== void 0 ? _a : 0) > LocalStorageService.spotExpirationTime) {
                 (_b = this.spots) === null || _b === void 0 ? void 0 : _b.delete(spotId);
             }
         });
@@ -15445,8 +15524,89 @@ class LocalStorage {
         };
     }
 }
-LocalStorage.localStorageKey = 'lc_rmn';
-LocalStorage.spotExpirationTime = 1000 * 60 * 60 * 24 * 7; // 7 days
+LocalStorageService.localStorageKey = 'lc_rmn';
+LocalStorageService.spotExpirationTime = 1000 * 60 * 60 * 24 * 7; // 7 days
+
+/**
+ * PubsubService class
+ * Manages event subscriptions and publications
+ * @template IRmnEventMap A record type defining the structure of events and their data
+ */
+class PubsubService {
+    constructor() {
+        /**
+         * Object to store subscribers for each event type
+         */
+        this.subscribers = {};
+    }
+    static getInstance() {
+        if (!PubsubService.instance) {
+            PubsubService.instance = new PubsubService();
+        }
+        return PubsubService.instance;
+    }
+    /**
+     * Subscribe to an event
+     * @param eventType - The type of event to subscribe to
+     * @param callback - The function to be called when the event is published
+     * @returns A function to unsubscribe from the event
+     *
+     * @Example:
+     * const unsubscribe = pubSub.subscribe('userLogin', (data) => {
+     *   console.log(`User ${data.username} logged in`);
+     * });
+     */
+    subscribe(eventType, callback) {
+        if (!this.subscribers[eventType]) {
+            this.subscribers[eventType] = [];
+        }
+        this.subscribers[eventType].push(callback);
+        // Return an unsubscribe function
+        return () => {
+            this.subscribers[eventType] = this.subscribers[eventType].filter((cb) => cb !== callback);
+        };
+    }
+    /**
+     * Publish an event
+     * @param eventType - The type of event to publish
+     * @param data - The data to be passed to the event subscribers
+     *
+     * @Example:
+     * pubSub.publish('userLogin', { username: 'john_doe', timestamp: Date.now() });
+     */
+    publish(eventType, data) {
+        if (!this.subscribers[eventType]) {
+            return;
+        }
+        this.subscribers[eventType].forEach((callback) => callback(data));
+    }
+}
+/**
+ * Usage Example:
+ *
+ * interface IRmnEventMap {
+ *   userLogin: { username: string; timestamp: number };
+ *   pageView: { url: string; timestamp: number };
+ * }
+ *
+ * const pubSub = new PubsubService<IRmnEventMap>();
+ *
+ * // Subscribe to events
+ * const unsubscribeLogin = pubSub.subscribe('userLogin', (data) => {
+ *   console.log(`User ${data.username} logged in at ${new Date(data.timestamp)}`);
+ * });
+ *
+ * pubSub.subscribe('pageView', (data) => {
+ *   console.log(`Page ${data.url} viewed at ${new Date(data.timestamp)}`);
+ * });
+ *
+ * // Publish events
+ * pubSub.publish('userLogin', { username: 'john_doe', timestamp: Date.now() });
+ * pubSub.publish('pageView', { url: '/home', timestamp: Date.now() });
+ *
+ * // Unsubscribe from an event
+ * unsubscribeLogin();
+ */
 
 class ResizeObserverService {
     constructor({ element, maxSize, minScale }) {
@@ -15516,36 +15676,6 @@ class ResizeObserverService {
     }
 }
 
-function calculateScaleFactor(elementScale) {
-    // Step 1: Apply square root for non-linear scaling
-    // This creates a more gradual scaling effect, especially for larger changes
-    // For example:
-    // - elementScale of 0.25 (1/4 size) becomes 0.5
-    // - elementScale of 1 (unchanged) remains 1
-    // - elementScale of 4 (4x size) becomes 2
-    const baseFactor = Math.sqrt(elementScale);
-    // Step 2: Apply additional dampening to further soften the scaling effect
-    // The dampening factor (0.5) can be adjusted:
-    // - Lower values (closer to 0) make scaling more subtle
-    // - Higher values (closer to 1) make scaling more pronounced
-    const dampening = 0.35;
-    // Calculate the scaleFactor:
-    // 1. (baseFactor - 1) represents the change from the original size
-    // 2. Multiply by dampening to reduce the effect
-    // 3. Add 1 to center the scaling around the original size
-    // For example, if baseFactor is 2:
-    // scaleFactor = 1 + (2 - 1) * 0.5 = 1.5
-    const scaleFactor = 1 + (baseFactor - 1) * dampening;
-    // Step 3: Define the allowed range for the scale factor
-    // This ensures that the font size never changes too drastically
-    const minScale = 0.35; // Font will never be smaller than 50% of original
-    const maxScale = 1.5; // Font will never be larger than 150% of original
-    // Step 4: Clamp the scale factor to the defined range
-    // Math.min ensures the value doesn't exceed maxScale
-    // Math.max ensures the value isn't less than minScale
-    return Math.max(minScale, Math.min(maxScale, scaleFactor));
-}
-
 const CAROUSEL_COMPONENT_STYLE = ({ width, height, fluid }) => `
     :host {
         position: relative;
@@ -15560,11 +15690,13 @@ const CAROUSEL_COMPONENT_STYLE = ({ width, height, fluid }) => `
         position: relative;
         height: 100%;
         width: 100%;
+        display: flex;
+        transition: transform 0.5s ease-in-out;
     }
 
     .slide {
-        display: none;
-
+        flex: 0 0 100%;
+        display: flex;
         justify-content: center;
         align-items: center;
         height: 100%;
@@ -15869,9 +16001,9 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
         renderSlides() {
             const slidesContainer = document.createElement('div');
             slidesContainer.className = 'slides';
-            this.slides.forEach((slide, index) => {
+            this.slides.forEach((slide) => {
                 const slideElement = document.createElement('div');
-                slideElement.className = `slide ${index === this.currentSlide ? 'active' : ''}`;
+                slideElement.className = 'slide';
                 if (slide instanceof HTMLElement) {
                     slideElement.appendChild(slide);
                 }
@@ -15950,10 +16082,9 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
         updateCarousel() {
             if (!this.slidesContainer)
                 return;
-            const slides = Array.from(this.slidesContainer.children);
-            slides.forEach((slide, index) => {
-                slide.classList.toggle('active', index === this.currentSlide);
-            });
+            // Calculate the translation distance based on current slide
+            const translateX = -this.currentSlide * 100;
+            this.slidesContainer.style.transform = `translateX(${translateX}%)`;
             this.updateDots();
         }
         updateDots() {
@@ -16377,12 +16508,13 @@ function spotHtmlStringToElement(htmlString) {
     spot.className = 'spot';
     spot.innerHTML = htmlString;
     Object.assign(spot.style, {
-        position: 'relative',
         display: 'block',
         width: '100%',
         height: '100%',
         margin: '0',
         padding: '0',
+        containerType: 'inline-size',
+        position: 'relative',
     });
     return spot;
 }
@@ -17252,7 +17384,6 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
                 box-sizing: border-box;
                 color: ${textColor};
                 cursor: pointer;
-                container-type: inline-size;
             }
 
             .${prefix}__text {
@@ -17268,7 +17399,7 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
             .${prefix}__header {
                 font-size: 24px;
                 margin: 0;
-                font-family: "Cormorant";
+                font-family: "Cormorant", system-ui;
                 font-style: normal;
                 font-weight: 300;
                 line-height: normal;
@@ -17387,7 +17518,6 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         height: 100%;
         display: block;
         position: relative;
-        container-type: inline-size;
     }
 
     .${prefix}__content {
@@ -17578,15 +17708,20 @@ function rbHomepageHeroThreeTileTemplate(spot, config) {
 const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextColor = textColor, primaryImage, mobilePrimaryImage = primaryImage, }, { prefix }) => `
   <style>
     .${prefix} {
+        width: 100%;
+        height: 100%;
+        background-color: transparent;
+        cursor: pointer;
+        position: relative;
+    }
+
+    .${prefix}__content {
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column-reverse;
         background-color: transparent;
         gap: 6px;
-        cursor: pointer;
-        container-type: inline-size;
-        position: relative;
     }
 
     .${prefix}__image {
@@ -17617,7 +17752,7 @@ const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         font-size: 18px;
         margin: 0;
         color: inherit;
-        font-family: "Cormorant";
+        font-family: "Cormorant", system-ui;
         font-style: normal;
         font-weight: 700;
         line-height: normal;
@@ -17659,7 +17794,7 @@ const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
     }
 
     @container (min-width: 768px) {
-        .${prefix} {
+        .${prefix}__content {
             flex-direction: row;
         }
         .${prefix}__image {
@@ -17714,12 +17849,14 @@ function rbHomepageHeroTwoTileTemplate(spot, config) {
     ${GFONT_CORMORANT}
     ${STYLES$4(spot, config)}
     <div class="${prefix}">
-        <div class="${prefix}__text">
-            ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
-            ${spot.description ? `<p class="${prefix}__description">${spot.description}</p>` : ''}
-            ${spot.ctaText ? `<span class="${prefix}__cta-button">${spot.ctaText}</span>` : ''}
-        </div>
-        <div class="${prefix}__image"></div>
+      <div class="${prefix}__content">
+          <div class="${prefix}__text">
+              ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
+              ${spot.description ? `<p class="${prefix}__description">${spot.description}</p>` : ''}
+              ${spot.ctaText ? `<span class="${prefix}__cta-button">${spot.ctaText}</span>` : ''}
+          </div>
+          <div class="${prefix}__image"></div>
+      </div>
     </div>
   `;
 }
@@ -17742,12 +17879,10 @@ const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
         overflow: hidden;
         cursor: pointer;
         color: ${textColor};
-        container-type: inline-size;
       }
 
       .${prefix}__text {
         padding: 20px;
-        width: 70%;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -17759,7 +17894,7 @@ const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
         color: inherit;
         margin: 0;
         font-size: 20px;
-        font-family: "Cormorant";
+        font-family: "Cormorant", system-ui;
         font-style: normal;
         font-weight: 300;
         line-height: normal;
@@ -17878,7 +18013,6 @@ const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
-      container-type: inline-size;
       position: relative;
     }
 
@@ -17948,12 +18082,7 @@ const STYLES$1 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
         border-radius: 5px;
         overflow: hidden;
         cursor: pointer;
-        container-type: inline-size;
-      }
-
-      .${prefix}__text {
-        padding: 10px;
-        width: 70%;
+        position: relative;
       }
 
       .${prefix}__header {
@@ -17964,6 +18093,7 @@ const STYLES$1 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
         font-style: normal;
         font-weight: 400;
         margin: 0;
+        padding: 10px;
       }
 
       @container (min-width: 640px) {
@@ -17981,9 +18111,7 @@ function rbSmallCategoryImageToutTemplate(spot, config) {
     ${GFONT_CORMORANT}
     ${STYLES$1(spot, config)}
     <div class="${prefix}">
-      <div class="${prefix}__text">
-        ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
-      </div>
+      ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
     </div>
   `;
 }
@@ -17998,7 +18126,6 @@ const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primar
       display: flex;
       flex-direction: column;
       border-radius: 5px;
-      container-type: inline-size;
     }
 
     .${prefix}__image {
@@ -18134,97 +18261,65 @@ const SPOT_TEMPLATE_HTML_ELEMENT = (spot, config) => {
     return spotHtmlStringToElement(spotHtmlString);
 };
 
-/**
- * PubSub class
- * Manages event subscriptions and publications
- * @template IRmnEventMap A record type defining the structure of events and their data
- */
-class PubSub {
+// For the moment, we will only focus on sites that use Google Analytics,
+// but we will add support for other analytics tools in the future.
+var AnalyticsTool;
+(function (AnalyticsTool) {
+    AnalyticsTool["GoogleAnalytics"] = "google-analytics";
+    AnalyticsTool["Other"] = "Other";
+})(AnalyticsTool || (AnalyticsTool = {}));
+
+class DataLayerMonitor {
     constructor() {
-        /**
-         * Object to store subscribers for each event type
-         */
-        this.subscribers = {};
+        if (!window.dataLayer) {
+            return;
+        }
+        this.originalPush = window.dataLayer.push;
     }
     static getInstance() {
-        if (!PubSub.instance) {
-            PubSub.instance = new PubSub();
+        if (!DataLayerMonitor.instance) {
+            DataLayerMonitor.instance = new DataLayerMonitor();
         }
-        return PubSub.instance;
+        return DataLayerMonitor.instance;
     }
-    /**
-     * Subscribe to an event
-     * @param eventType - The type of event to subscribe to
-     * @param callback - The function to be called when the event is published
-     * @returns A function to unsubscribe from the event
-     *
-     * @Example:
-     * const unsubscribe = pubSub.subscribe('userLogin', (data) => {
-     *   console.log(`User ${data.username} logged in`);
-     * });
-     */
-    subscribe(eventType, callback) {
-        if (!this.subscribers[eventType]) {
-            this.subscribers[eventType] = [];
+    setListener(listener) {
+        this.listener = listener;
+    }
+    start() {
+        window.dataLayer.push = (...args) => {
+            const result = this.originalPush.apply(window.dataLayer, args);
+            const pushedEvent = args[0];
+            if (this.listener) {
+                const normalizedData = this.cleanEventData(pushedEvent);
+                if (normalizedData) {
+                    this.listener(normalizedData);
+                }
+            }
+            return result;
+        };
+    }
+    cleanEventData(data) {
+        const eventName = getEventTypeFromRawEvent(data.event);
+        if (!eventName) {
+            return null;
         }
-        this.subscribers[eventType].push(callback);
-        // Return an unsubscribe function
-        return () => {
-            this.subscribers[eventType] = this.subscribers[eventType].filter((cb) => cb !== callback);
+        const productIds = extractDeepIds(data.value);
+        return {
+            event: eventName,
+            productIds,
         };
     }
-    /**
-     * Publish an event
-     * @param eventType - The type of event to publish
-     * @param data - The data to be passed to the event subscribers
-     *
-     * @Example:
-     * pubSub.publish('userLogin', { username: 'john_doe', timestamp: Date.now() });
-     */
-    publish(eventType, data) {
-        if (!this.subscribers[eventType]) {
-            return;
+    stop() {
+        if (this.originalPush) {
+            window.dataLayer.push = this.originalPush;
         }
-        this.subscribers[eventType].forEach((callback) => callback(data));
+        this.listener = undefined;
     }
 }
-/**
- * Usage Example:
- *
- * interface IRmnEventMap {
- *   userLogin: { username: string; timestamp: number };
- *   pageView: { url: string; timestamp: number };
- * }
- *
- * const pubSub = new PubSub<IRmnEventMap>();
- *
- * // Subscribe to events
- * const unsubscribeLogin = pubSub.subscribe('userLogin', (data) => {
- *   console.log(`User ${data.username} logged in at ${new Date(data.timestamp)}`);
- * });
- *
- * pubSub.subscribe('pageView', (data) => {
- *   console.log(`Page ${data.url} viewed at ${new Date(data.timestamp)}`);
- * });
- *
- * // Publish events
- * pubSub.publish('userLogin', { username: 'john_doe', timestamp: Date.now() });
- * pubSub.publish('pageView', { url: '/home', timestamp: Date.now() });
- *
- * // Unsubscribe from an event
- * unsubscribeLogin();
- */
 
 // @TODO: Add support for user to push events to our own data layer, if they don't use any analytics tool.
 // window.rmnDataLayer = window.rmnDataLayer || [];
-// For the moment, we will only focus on sites that use Google Analytics,
-// but we will add support for other analytics tools in the future.
-var AnalyticsTool;
-(function (AnalyticsTool) {
-    AnalyticsTool["GoogleAnalytics"] = "google-analytics";
-    AnalyticsTool["Other"] = "Other";
-})(AnalyticsTool || (AnalyticsTool = {}));
-class UserMonitor {
+class MonitorService {
     constructor() {
         const analyticsTool = this.detectAnalyticsTool();
         switch (analyticsTool) {
@@ -18239,29 +18334,97 @@ class UserMonitor {
         if (analyticsTool === AnalyticsTool.Other) {
             return;
         }
-        this.localStorage = LocalStorage.getInstance();
+        this.pubSubService = PubsubService.getInstance();
+        this.localStorageService = LocalStorageService.getInstance();
     }
     static getInstance() {
-        if (!UserMonitor.instance) {
-            UserMonitor.instance = new UserMonitor();
+        if (!MonitorService.instance) {
+            MonitorService.instance = new MonitorService();
         }
-        return UserMonitor.instance;
+        return MonitorService.instance;
     }
     start() {
         if (!this.implementedMonitor)
             return;
-        this.implementedMonitor.setListener((eventData) => {
+        this.implementedMonitor.setListener(async (eventData) => {
             var _a;
-            this.matchAndFireEvent(eventData, (_a = this.localStorage) === null || _a === void 0 ? void 0 : _a.getSpots());
+            await this.matchAndFireEvent(eventData, (_a = this.localStorageService) === null || _a === void 0 ? void 0 : _a.getSpots());
         });
         this.implementedMonitor.start();
     }
-    matchAndFireEvent(
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    _eventData, 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    _spots) {
-        // console.info({ eventData, spots });
+    async matchAndFireEvent(eventData, spots) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        if (!spots)
+            return;
+        const eventProductIds = new Set(eventData.productIds);
+        for (const spot of Object.values(spots)) {
+            if (!spot.productIds.length)
+                continue;
+            const hasCommonProductIds = spot.productIds.find((productId) => eventProductIds.has(productId));
+            if (hasCommonProductIds) {
+                switch (eventData.event) {
+                    case exports.RMN_SPOT_EVENT.ADD_TO_CART:
+                        await this.fireAndPublishSpotEvent({
+                            spotEvent: exports.RMN_SPOT_EVENT.ADD_TO_CART,
+                            eventUrl: (_b = (_a = spot.events.find((event) => event.event === exports.RMN_SPOT_EVENT.ADD_TO_CART)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '',
+                            placementId: '',
+                            spotId: spot.spotId,
+                            spotElement: undefined,
+                        });
+                        break;
+                    case exports.RMN_SPOT_EVENT.REMOVE_FROM_CART:
+                        await this.fireAndPublishSpotEvent({
+                            spotEvent: exports.RMN_SPOT_EVENT.REMOVE_FROM_CART,
+                            eventUrl: (_d = (_c = spot.events.find((event) => event.event === exports.RMN_SPOT_EVENT.REMOVE_FROM_CART)) === null || _c === void 0 ? void 0 : _c.url) !== null && _d !== void 0 ? _d : '',
+                            placementId: '',
+                            spotId: spot.spotId,
+                            spotElement: undefined,
+                        });
+                        break;
+                    case exports.RMN_SPOT_EVENT.PURCHASE:
+                        await this.fireAndPublishSpotEvent({
+                            spotEvent: exports.RMN_SPOT_EVENT.PURCHASE,
+                            eventUrl: (_f = (_e = spot.events.find((event) => event.event === exports.RMN_SPOT_EVENT.PURCHASE)) === null || _e === void 0 ? void 0 : _e.url) !== null && _f !== void 0 ? _f : '',
+                            placementId: '',
+                            spotId: spot.spotId,
+                            spotElement: undefined,
+                        });
+                        break;
+                    case exports.RMN_SPOT_EVENT.ADD_TO_WISHLIST:
+                        await this.fireAndPublishSpotEvent({
+                            spotEvent: exports.RMN_SPOT_EVENT.ADD_TO_WISHLIST,
+                            eventUrl: (_h = (_g = spot.events.find((event) => event.event === exports.RMN_SPOT_EVENT.ADD_TO_WISHLIST)) === null || _g === void 0 ? void 0 : _g.url) !== null && _h !== void 0 ? _h : '',
+                            placementId: '',
+                            spotId: spot.spotId,
+                            spotElement: undefined,
+                        });
+                        break;
+                    case exports.RMN_SPOT_EVENT.BUY_NOW:
+                        await this.fireAndPublishSpotEvent({
+                            spotEvent: exports.RMN_SPOT_EVENT.BUY_NOW,
+                            eventUrl: (_k = (_j = spot.events.find((event) => event.event === exports.RMN_SPOT_EVENT.BUY_NOW)) === null || _j === void 0 ? void 0 : _j.url) !== null && _k !== void 0 ? _k : '',
+                            placementId: '',
+                            spotId: spot.spotId,
+                            spotElement: undefined,
+                        });
+                        break;
+                }
+            }
+        }
+    }
+    async fireAndPublishSpotEvent({ spotEvent, eventUrl, placementId, spotId, spotElement, }) {
+        await fireEvent({
+            event: spotEvent,
+            eventUrl,
+        });
+        if (!this.pubSubService)
+            return;
+        this.pubSubService.publish(exports.RMN_EVENT.SPOT_EVENT, {
+            eventType: spotEvent,
+            placementId,
+            spotId,
+            spotElement,
+        });
     }
     detectAnalyticsTool() {
         let analyticsTool = AnalyticsTool.Other;
@@ -18289,13 +18452,13 @@ class UserMonitor {
 
 class EventService {
     constructor() {
-        this.pubSub = PubSub.getInstance();
-        this.localStorage = LocalStorage.getInstance();
+        this.pubSubService = PubsubService.getInstance();
+        this.localStorageService = LocalStorageService.getInstance();
         this.activeSpots = new Map();
         this.spotStates = new Map();
         this.intersectionObserver = new IntersectionObserverService();
         // Start the user monitor, which will track and check user interactions
-        UserMonitor.getInstance().start();
+        MonitorService.getInstance().start();
     }
     static getInstance() {
         if (!EventService.instance) {
@@ -18304,10 +18467,10 @@ class EventService {
         return EventService.instance;
     }
     subscribe(eventType, callback) {
-        return this.pubSub.subscribe(eventType, callback);
+        return this.pubSubService.subscribe(eventType, callback);
     }
     publish(eventType, data) {
-        this.pubSub.publish(eventType, data);
+        this.pubSubService.publish(eventType, data);
     }
     registerSpot(params) {
         const { placementId, spot, spotElement } = params;
@@ -18391,7 +18554,7 @@ class EventService {
         const merged = this.deepMerge(currentState, updates);
         this.spotStates.set(placementId, merged);
         if (publish) {
-            this.pubSub.publish(exports.RMN_SPOT_EVENT.LIFECYCLE_STATE, this.spotStates.get(placementId));
+            this.pubSubService.publish(exports.RMN_EVENT.LIFECYCLE_STATE, this.spotStates.get(placementId));
         }
     }
     deepMerge(current, updates) {
@@ -18422,19 +18585,18 @@ class EventService {
     }
     async handleClick({ placementId, spot, spotElement, }) {
         var _a, _b, _c;
-        // Publish click event
-        this.pubSub.publish(exports.RMN_SPOT_EVENT.CLICK, {
+        this.pubSubService.publish(exports.RMN_EVENT.SPOT_EVENT, {
+            eventType: exports.RMN_SPOT_EVENT.CLICK,
             placementId,
             spotId: spot.id,
             spotElement,
         });
-        // Fire click event
-        await this.fireEvent({
+        await fireEvent({
             event: exports.RMN_SPOT_EVENT.CLICK,
             eventUrl: (_b = (_a = spot.events.find((event) => event.event === exports.RMN_SPOT_EVENT.CLICK)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '',
         });
         // Save spot to local storage for event tracking
-        this.localStorage.setSpot(spot.id, {
+        this.localStorageService.setSpot(spot.id, {
             spotId: spot.id,
             spotType: spot.spot,
             events: spot.events,
@@ -18454,90 +18616,20 @@ class EventService {
         this.intersectionObserver.observe(spotElement, spotIsVisibleCallback);
     }
     fireImpressionEvent(placementId, spot, spotElement) {
-        this.pubSub.publish(exports.RMN_SPOT_EVENT.IMPRESSION, {
+        this.pubSubService.publish(exports.RMN_EVENT.SPOT_EVENT, {
+            eventType: exports.RMN_SPOT_EVENT.IMPRESSION,
             placementId,
             spotId: spot.id,
             spotElement,
         });
         (async () => {
             var _a, _b;
-            await this.fireEvent({
+            await fireEvent({
                 event: exports.RMN_SPOT_EVENT.IMPRESSION,
                 eventUrl: (_b = (_a = spot.events.find((event) => event.event === exports.RMN_SPOT_EVENT.IMPRESSION)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '',
             });
         })();
     }
-    /**
-     * Fires an event using the navigator.sendBeacon method or a fallback method if sendBeacon is not available.
-     * If the event is a click event and a redirect URL is found, it redirects the user to that URL.
-     *
-     * @param {IFireEventParams} params - The parameters for firing the event.
-     * @param {RMN_SPOT_EVENT} params.event - The event type.
-     * @param {string} params.eventUrl - The URL to which the event is sent.
-     * @returns {Promise<void>} - A promise that resolves when the event is fired.
-     */
-    async fireEvent({ event, eventUrl }) {
-        var _a;
-        try {
-            const didFireEvent = ((_a = navigator === null || navigator === void 0 ? void 0 : navigator.sendBeacon) === null || _a === void 0 ? void 0 : _a.call(navigator, eventUrl)) || (await this.fallbackEventFire(eventUrl));
-            if (!didFireEvent) {
-                return;
-            }
-            if (event === exports.RMN_SPOT_EVENT.CLICK) {
-                const redirectUrl = this.getRedirectUrlFromPayload(eventUrl);
-                if (redirectUrl) {
-                    window.location.href = redirectUrl;
-                }
-            }
-        }
-        catch (_b) {
-            // Handle errors silently
-        }
-    }
-    // Fallback method using fetch if sendBeacon isn't available
-    async fallbackEventFire(url) {
-        try {
-            const racePromise = Promise.race([
-                // Promise #1: The fetch request
-                fetch(url, {
-                    method: 'POST',
-                    keepalive: true,
-                }),
-                // Promise #2: The timeout
-                new Promise((_, reject) => setTimeout(() => reject(new Error('Request timeout')), 2000)),
-            ]);
-            /**
-             * Prevent requests from hanging indefinitely
-             * Improve user experience by failing fast
-             * Handle slow network conditions gracefully
-             * Ensure resources are freed up in a timely manner
-             */
-            const response = await racePromise;
-            return response.ok;
-        }
-        catch (_a) {
-            return false;
-        }
-    }
-    /**
-     * Extracts and decodes a URL from a base64-encoded query parameter.
-     *
-     * @param {string} url - The URL containing the base64-encoded query parameter.
-     * @returns {string | null} - The decoded URL or null if not found or invalid.
-     */
-    getRedirectUrlFromPayload(url) {
-        try {
-            const base64String = new URL(url).searchParams.get('e');
-            if (!base64String) {
-                return null;
-            }
-            const data = JSON.parse(atob(base64String));
-            return data.ur || null;
-        }
-        catch (_a) {
-            return null;
-        }
-    }
 }
 
 const SELECTION_API_PATH = '/spots/selection';