@liquidcommercedev/rmn-sdk 1.4.6-beta.3 → 1.4.6-beta.5

package/dist/index.cjs

@@ -44,6 +44,7 @@ exports.RMN_SPOT_TYPE = void 0;
 exports.RMN_FILTER_PROPERTIES = void 0;
 (function (RMN_FILTER_PROPERTIES) {
     RMN_FILTER_PROPERTIES["KEYWORDS"] = "keywords";
+    RMN_FILTER_PROPERTIES["PAGE_LOCATION"] = "pageLocation";
     RMN_FILTER_PROPERTIES["PARENTCO"] = "parentCo";
     RMN_FILTER_PROPERTIES["BRAND"] = "brand";
     RMN_FILTER_PROPERTIES["CATEGORY"] = "category";
@@ -55,6 +56,9 @@ exports.RMN_FILTER_PROPERTIES = void 0;
 })(exports.RMN_FILTER_PROPERTIES || (exports.RMN_FILTER_PROPERTIES = {}));
 exports.RMN_SPOT_EVENT = void 0;
 (function (RMN_SPOT_EVENT) {
+    RMN_SPOT_EVENT["MOUNTED"] = "MOUNTED";
+    RMN_SPOT_EVENT["UNMOUNTED"] = "UNMOUNTED";
+    RMN_SPOT_EVENT["RESIZED"] = "RESIZED";
     RMN_SPOT_EVENT["IMPRESSION"] = "IMPRESSION";
     RMN_SPOT_EVENT["CLICK"] = "CLICK";
     RMN_SPOT_EVENT["PURCHASE"] = "PURCHASE";
@@ -15163,6 +15167,46 @@ 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">
 `;
 
+class IntersectionObserverService {
+    constructor(defaultOptions = {}) {
+        this.observers = new Map();
+        this.defaultOptions = {
+            root: null,
+            rootMargin: '0px',
+            threshold: 0.5,
+            ...defaultOptions,
+        };
+    }
+    observe(element, callback, options = {}) {
+        const mergedOptions = { ...this.defaultOptions, ...options };
+        const ioCallback = (entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    callback(entry);
+                }
+            });
+        };
+        const observer = new IntersectionObserver(ioCallback, mergedOptions);
+        this.observers.set(element, observer);
+        observer.observe(element);
+    }
+    unobserve(element) {
+        const observer = this.observers.get(element);
+        if (observer) {
+            observer.unobserve(element);
+            observer.disconnect();
+            this.observers.delete(element);
+        }
+    }
+    unobserveAll() {
+        this.observers.forEach((observer, element) => {
+            observer.unobserve(element);
+            observer.disconnect();
+        });
+        this.observers.clear();
+    }
+}
+
 class ResizeObserverService {
     constructor({ element, maxSize, minScale }) {
         this.element = element;
@@ -15468,8 +15512,9 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
                 this.addEventListener('spotSizeChanged', this.handleCarouselSizeChanged.bind(this));
             }
         }
-        handleCarouselSizeChanged(event) {
-            console.info('Carousel Size Changed', event);
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        handleCarouselSizeChanged(_event) {
+            // console.info('Carousel Size Changed', event);
         }
         render() {
             var _a;
@@ -15695,7 +15740,7 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
          * #########################################################
          */
         handleSpotSizeChanged(event) {
-            console.info('Spot Size Changed', event);
+            // console.info('Spot Size Changed', event);
             // Adjust text elements font size based on the scale factor
             this.adjustFontSize(event.detail.scale);
         }
@@ -15707,8 +15752,8 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
             elements === null || elements === void 0 ? void 0 : elements.forEach((element) => {
                 if (element instanceof HTMLElement) {
                     if (!this.originalFontSizes.has(element)) {
-                        const orignalSize = parseFloat(window.getComputedStyle(element).fontSize);
-                        this.originalFontSizes.set(element, orignalSize);
+                        const originalSize = parseFloat(window.getComputedStyle(element).fontSize);
+                        this.originalFontSizes.set(element, originalSize);
                     }
                     const originalSize = this.originalFontSizes.get(element);
                     const newFontSize = originalSize * scaleFactor;
@@ -17539,11 +17584,12 @@ function rbSmallDiscoverToutTemplate(spot, config) {
 }
 
 /**
- * Creates the spot html string based on the provided spot data.
+ * Returns the HTML element for the given spot.
  *
- * @param {ISpot} spot - The spot data.
+ * @param {ISpot} spot - The spot object.
+ * @param {ISpotTemplateConfig} config - The spot template configuration.
  *
- * @return {string} - The spot html string.
+ * @return {HTMLElement | null} - The HTML element for the given spot or null if the spot template is not found.
  */
 const SPOT_TEMPLATE_HTML_ELEMENT = (spot, config) => {
     const templates = {
@@ -17616,6 +17662,228 @@ const SPOT_TEMPLATE_HTML_ELEMENT = (spot, config) => {
     return spotHtmlStringToElement(spotHtmlString);
 };
 
+/**
+ * PubSub class
+ * Manages event subscriptions and publications
+ * @template IEventMap A record type defining the structure of events and their data
+ */
+class PubSub {
+    constructor() {
+        /**
+         * Object to store subscribers for each event type
+         */
+        this.subscribers = {};
+    }
+    /**
+     * 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 IEventMap {
+ *   userLogin: { username: string; timestamp: number };
+ *   pageView: { url: string; timestamp: number };
+ * }
+ *
+ * const pubSub = new PubSub<IEventMap>();
+ *
+ * // 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 EventService {
+    constructor() {
+        this.pubSub = new PubSub();
+        this.activeSpots = new Map();
+        this.intersectionObserver = new IntersectionObserverService();
+    }
+    static getInstance() {
+        if (!EventService.instance) {
+            EventService.instance = new EventService();
+        }
+        return EventService.instance;
+    }
+    registerSpot({ placementId, element, spot }) {
+        this.activeSpots.set(spot.id, {
+            placementId,
+            element,
+            impressionTracked: false,
+        });
+        // Handle resize observer
+        // this.handleResizeObserver(placementId, spot, element);
+        // Handle intersection observer
+        this.handleIntersectionObserver(placementId, spot, element);
+        // Attach click event listener
+        element.addEventListener('click', async () => {
+            var _a, _b;
+            this.pubSub.publish(exports.RMN_SPOT_EVENT.CLICK, {
+                placementId,
+                spotId: spot.id,
+                element,
+            });
+            // Fire click event
+            await this.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 : '',
+            });
+        });
+        // Publish spot created event
+        this.pubSub.publish(exports.RMN_SPOT_EVENT.MOUNTED, {
+            placementId,
+            spotId: spot.id,
+            spotType: spot.spot,
+            spotVariant: spot.variant,
+            element,
+        });
+    }
+    unregisterSpot(spotId) {
+        const spotData = this.activeSpots.get(spotId);
+        if (spotData) {
+            this.intersectionObserver.unobserve(spotData.element);
+            // this.resizeObserver?.disconnect();
+            this.pubSub.publish(exports.RMN_SPOT_EVENT.UNMOUNTED, {
+                placementId: spotData.placementId,
+                spotId,
+            });
+            this.activeSpots.delete(spotId);
+        }
+    }
+    // private handleResizeObserver(placementId: string, spot: ISpot, element: HTMLElement): void {
+    //   // this.resizeObserver = new ResizeObserverService({
+    //   //   element,
+    //   //   maxSize: {
+    //   //     width: spot.width,
+    //   //     height: spot.height,
+    //   //   },
+    //   //   minScale: 0.25,
+    //   // });
+    //
+    //   const sizeChangedCb = (event: ISizeChangedEvent) => {
+    //     // Publish spot resized event
+    //     this.pubSub.publish(RMN_SPOT_EVENT.RESIZED, {
+    //       placementId,
+    //       spotId: spot.id,
+    //       scale: event.detail.scale,
+    //       previousDimensions: {
+    //         width: event.detail.width,
+    //         height: event.detail.height,
+    //       },
+    //       currentDimensions: {
+    //         width: event.detail.newWidth,
+    //         height: event.detail.newHeight,
+    //       },
+    //     });
+    //   };
+    //
+    //   element.addEventListener('spotSizeChanged', sizeChangedCb as EventListener);
+    // }
+    handleIntersectionObserver(placementId, spot, element) {
+        const spotIsVisibleCb = async () => {
+            var _a, _b;
+            this.pubSub.publish(exports.RMN_SPOT_EVENT.IMPRESSION, {
+                placementId,
+                spotId: spot.id,
+                element,
+            });
+            this.intersectionObserver.unobserve(element);
+            this.activeSpots.set(spot.id, {
+                placementId,
+                element,
+                impressionTracked: true,
+            });
+            // Fire impression event
+            await this.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 : '',
+            });
+        };
+        this.intersectionObserver.observe(element, spotIsVisibleCb);
+    }
+    subscribe(eventType, callback) {
+        return this.pubSub.subscribe(eventType, callback);
+    }
+    publish(eventType, data) {
+        this.pubSub.publish(eventType, data);
+    }
+    /**
+     * Fires an event using the navigator.sendBeacon method and redirects the user if the event is a click event.
+     *
+     * @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 }) {
+        const didFireEvent = navigator.sendBeacon(eventUrl);
+        if (didFireEvent && event === exports.RMN_SPOT_EVENT.CLICK) {
+            window.location.href = this.getRedirectUrlFromPayload(eventUrl);
+        }
+    }
+    /**
+     * Extracts and decodes a URL from a base64-encoded query parameter.
+     *
+     * @param {string} url - The URL containing the base64-encoded query parameter.
+     * @returns {string} - The decoded URL or an empty string if decoding fails.
+     */
+    getRedirectUrlFromPayload(url) {
+        var _a, _b;
+        const base64String = (_a = new URL(url).searchParams.get('e')) !== null && _a !== void 0 ? _a : '';
+        try {
+            const data = JSON.parse(atob(base64String));
+            return (_b = data.ur) !== null && _b !== void 0 ? _b : '';
+        }
+        catch (_c) {
+            return '';
+        }
+    }
+}
+
 const SELECTION_API_PATH = '/spots/selection';
 
 class SelectionService extends BaseApi {
@@ -17650,46 +17918,39 @@ class LiquidCommerceRmnClient {
     constructor(auth) {
         this.selectionService = SelectionService.getInstance(auth);
         this.elementService = ElementService.getInstance();
+        this.eventService = EventService.getInstance();
     }
     /**
      * Makes a selection request on our server based on the provided data.
      *
      * To create a spot html element, use the RmnCreateSpotElement function.
      *
-     * @param {ISpotSelectionParams} data - Spots selection parameters.
+     * @param {ISpotSelectionParams} params - Spots selection parameters.
      *
      * @return {Promise<ISpots>} - The spots response object.
      */
-    async spotSelection(data) {
-        return this.selectionService.spotSelection(data);
+    async spotSelection(params) {
+        return this.selectionService.spotSelection(params);
     }
     /**
      * Injects the spot elements into their provided placement.
      *
-     * @param {IInjectSpotElement[]} data - The spot element's data.
-     * @param {IInjectSpotElementConfig} config - The configuration object.
+     * @param {IInjectSpotElementParams} params - Parameters for injecting spot elements.
      *
      * @return {Promise<void>} - A promise that resolves when the spot elements are injected.
      */
-    async injectSpotElement(data, config) {
-        if (!data.length) {
-            console.warn('RmnSdk: Failed to request spot selection. No spot elements provided.');
+    async injectSpotElement(params) {
+        var _a;
+        const { inject, config } = params;
+        if (!inject.length) {
+            console.warn('RmnSdk: Failed to inject spot element. Please provide at least one spot element to inject.');
             return;
         }
-        const spotSelectionRequest = data.map((item) => {
-            var _a;
-            return ({
-                spot: item.spotType,
-                count: (_a = item === null || item === void 0 ? void 0 : item.count) !== null && _a !== void 0 ? _a : 1,
-            });
-        });
-        const response = await this.spotSelection({
-            spots: spotSelectionRequest,
-            url: config === null || config === void 0 ? void 0 : config.url,
-        });
-        const normalizedData = this.normalizeDataSpotType(data);
-        for (const item of normalizedData) {
-            const spots = response[item.spotType];
+        this.preventDuplicateSpotPlacementIds(inject);
+        const response = await this.spotSelectionRequest(params);
+        for (const item of inject) {
+            const itemConfig = (_a = item.config) !== null && _a !== void 0 ? _a : config;
+            const spots = response[item.placementId];
             if (!(spots === null || spots === void 0 ? void 0 : spots.length)) {
                 console.warn(`RmnSdk: Failed to inject spot element. No spots found for type "${item.spotType}".`);
                 continue;
@@ -17701,13 +17962,42 @@ class LiquidCommerceRmnClient {
                 continue;
             }
             if (spots.length === 1) {
-                this.injectOneSpotElement(item, placement, spots[0], config);
+                this.injectOneSpotElement(item, placement, spots[0], itemConfig);
             }
             if (spots.length > 1) {
-                this.injectCarouselSpotElement(placement, spots, config);
+                this.injectCarouselSpotElement(placement, spots, itemConfig);
             }
         }
     }
+    /**
+     * Returns the event manager instance.
+     *
+     * @return {EventService} - The event manager instance.
+     */
+    eventManager() {
+        return this.eventService;
+    }
+    /**
+     * Makes a selection request on our server based on the provided data.
+     *
+     * @param {IInjectSpotElementParams} params - Parameters for injecting spot elements.
+     *
+     * @return {Promise<ISpots>} - The spots response object.
+     */
+    async spotSelectionRequest(params) {
+        const { inject, filter, config } = params;
+        const request = {
+            url: config === null || config === void 0 ? void 0 : config.url,
+            filter,
+            spots: inject.map((item) => ({
+                placementId: item.placementId,
+                spot: item.spotType,
+                count: item === null || item === void 0 ? void 0 : item.count,
+                ...item === null || item === void 0 ? void 0 : item.filter,
+            })),
+        };
+        return this.spotSelection(request);
+    }
     /**
      * Injects a carousel element with the provided spots into the placement.
      *
@@ -17727,6 +18017,11 @@ class LiquidCommerceRmnClient {
                 console.warn(`RmnSdk: Failed to inject carousel spot element. Could not create element for type "${spot.spot}".`);
                 return;
             }
+            this.eventSpotElement({
+                spot,
+                placementId: placement.id,
+                element: content,
+            });
             carouselSlides.push(content);
         }
         const { maxWidth, maxHeight } = spots.reduce((max, spot) => ({
@@ -17778,28 +18073,37 @@ class LiquidCommerceRmnClient {
             console.warn(`RmnSdk: Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`);
             return;
         }
+        this.eventSpotElement({
+            spot,
+            placementId: injectItem.placementId,
+            element: spotElement,
+        });
         placement.replaceChildren(spotElement);
     }
+    eventSpotElement({ spot, placementId, element, }) {
+        this.eventService.registerSpot({
+            placementId,
+            element,
+            spot,
+        });
+    }
     /**
-     * Normalizes the spot type data by adding a number suffix to the spot type.
+     * Prevents duplicate placement ids in the inject data.
+     *
+     * @param {IInjectSpotElement[]} inject - The inject data.
      *
-     * @param {IInjectSpotElement[]} spots - The spot type data.
+     * @throws {Error} - If a duplicate placement id is found.
      *
-     * @return {IInjectSpotElement[]} - The normalized spot type data.
+     * @return {void}
      */
-    normalizeDataSpotType(spots) {
-        const spotTypeCounts = {};
-        return spots.map((spot) => {
-            const { spotType } = spot;
-            spotTypeCounts[spotType] = (spotTypeCounts[spotType] || 0) + 1;
-            if (spotTypeCounts[spotType] === 1) {
-                return spot;
+    preventDuplicateSpotPlacementIds(inject) {
+        const placementIds = new Set();
+        for (const item of inject) {
+            if (placementIds.has(item.placementId)) {
+                throw new Error(`RmnSdk: Duplicate placement id (${item.placementId}) found. Please provide a unique placement id for each spot element.`);
             }
-            return {
-                ...spot,
-                spotType: `${spotType}${spotTypeCounts[spotType]}`,
-            };
-        });
+            placementIds.add(item.placementId);
+        }
     }
 }
 /**