@liquidcommercedev/rmn-sdk 1.4.6-beta.7 → 1.4.6-beta.8

package/dist/index.cjs

@@ -56,9 +56,7 @@ 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["INJECT_SPOTS"] = "INJECT_SPOTS";
-    RMN_SPOT_EVENT["MOUNTED"] = "MOUNTED";
-    RMN_SPOT_EVENT["UNMOUNTED"] = "UNMOUNTED";
+    RMN_SPOT_EVENT["LIFECYCLE_STATE"] = "LIFECYCLE_STATE";
     RMN_SPOT_EVENT["IMPRESSION"] = "IMPRESSION";
     RMN_SPOT_EVENT["CLICK"] = "CLICK";
     RMN_SPOT_EVENT["PURCHASE"] = "PURCHASE";
@@ -16828,11 +16826,11 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
                 align-items: flex-start;
                 width: 100%;
                 height: fit-content;
-                gap: 5px;
+                gap: 8px;
             }
 
             .${prefix}__header {
-                font-size: 18px;
+                font-size: 24px;
                 margin: 0;
                 font-family: "Cormorant";
                 font-style: normal;
@@ -16890,10 +16888,6 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
                     height: 50%;
                 }
 
-                .${prefix}__header {
-                    font-size: 22px;
-                }
-
                 .${prefix}__description {
                     font-size: 12px;
                 }
@@ -16905,7 +16899,7 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
 
             @container (min-width: 1024px) {
                 .${prefix}__header {
-                    font-size: 24px;
+                    font-size: 26px;
                 }
 
                 .${prefix}__description {
@@ -16966,7 +16960,7 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         display: flex;
         flex-direction: column;
         background-color: transparent;
-        gap: 5px;
+        gap: 6px;
         color: inherit;
         cursor: pointer;
     }
@@ -16985,7 +16979,7 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         height: 40%;
         display: flex;
         flex-direction: row;
-        gap: 5px;
+         gap: 6px;
     }
 
     .${prefix}__secondary-image {
@@ -17007,7 +17001,7 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         align-items: center;
         width: 50%;
         height: 100%;
-        gap: 5px;
+        gap: 10px;
         padding: 0 10px;
         box-sizing: border-box;
     }
@@ -17153,7 +17147,7 @@ const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         display: flex;
         flex-direction: column-reverse;
         background-color: transparent;
-        gap: 5px;
+        gap: 6px;
         cursor: pointer;
         container-type: inline-size;
         position: relative;
@@ -17178,7 +17172,7 @@ const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         align-items: center;
         width: 100%;
         height: 100%;
-        gap: 5px;
+        gap: 10px;
         padding: 0 10px;
         box-sizing: border-box;
     }
@@ -17788,6 +17782,7 @@ class EventService {
     constructor() {
         this.pubSub = new PubSub();
         this.activeSpots = new Map();
+        this.spotStates = new Map();
         this.intersectionObserver = new IntersectionObserverService();
     }
     static getInstance() {
@@ -17796,6 +17791,46 @@ class EventService {
         }
         return EventService.instance;
     }
+    subscribe(eventType, callback) {
+        return this.pubSub.subscribe(eventType, callback);
+    }
+    publish(eventType, data) {
+        this.pubSub.publish(eventType, data);
+    }
+    handleSpotState(placementId, updates, publish = true) {
+        let currentState = this.spotStates.get(placementId);
+        if (!currentState) {
+            currentState = {
+                identifier: {
+                    placementId,
+                    spotId: '',
+                    spotType: '',
+                },
+                dom: {
+                    element: undefined,
+                    visible: false,
+                },
+                state: {
+                    mounted: false,
+                    unmounted: false,
+                    loading: false,
+                    error: undefined,
+                },
+                displayConfig: {
+                    isCarousel: false,
+                    isCarouselItem: false,
+                    isSingleItem: false,
+                },
+            };
+        }
+        this.spotStates.set(placementId, {
+            ...currentState,
+            ...updates,
+        });
+        if (publish) {
+            this.pubSub.publish(exports.RMN_SPOT_EVENT.LIFECYCLE_STATE, this.spotStates.get(placementId));
+        }
+    }
     registerSpot({ placementId, element, spot }) {
         this.activeSpots.set(spot.id, {
             placementId,
@@ -17818,23 +17853,20 @@ class EventService {
                 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.handleSpotState(spotData.placementId, {
+                dom: {
+                    element: undefined,
+                    visible: false,
+                },
+                state: {
+                    unmounted: true,
+                    mounted: false,
+                },
             });
             this.activeSpots.delete(spotId);
         }
@@ -17853,6 +17885,12 @@ class EventService {
                 element,
                 impressionTracked: true,
             });
+            this.handleSpotState(placementId, {
+                dom: {
+                    element,
+                    visible: true,
+                },
+            });
             // Fire impression event
             await this.fireEvent({
                 event: exports.RMN_SPOT_EVENT.IMPRESSION,
@@ -17861,12 +17899,6 @@ class EventService {
         };
         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.
      *
@@ -17932,6 +17964,21 @@ class SelectionService extends BaseApi {
 
 class LiquidCommerceRmnClient {
     constructor(auth) {
+        /**
+         * Returns the event manager instance.
+         *
+         * @return {EventService} - The event manager instance.
+         */
+        this.eventManager = {
+            subscribe: (eventType, callback
+            /* eslint-disable arrow-body-style */
+            ) => {
+                return this.eventService.subscribe(eventType, callback);
+            },
+            publish: (eventType, data) => {
+                this.eventService.publish(eventType, data);
+            },
+        };
         this.selectionService = SelectionService.getInstance(auth);
         this.elementService = ElementService.getInstance();
         this.eventService = EventService.getInstance();
@@ -17959,36 +18006,56 @@ class LiquidCommerceRmnClient {
         var _a;
         const config = params.config;
         let inject = params.inject;
-        this.eventService.publish(exports.RMN_SPOT_EVENT.INJECT_SPOTS, {
-            isLoading: true,
-            isCompleted: false,
-            error: null,
-        });
         if (!inject.length) {
-            this.eventError('RmnSdk: Failed to inject spot element. Please provide at least one spot element to inject.');
+            this.eventService.handleSpotState('all', {
+                state: {
+                    error: 'No spot elements provided for injection.',
+                    loading: false,
+                },
+            });
             return;
         }
+        // Update the state of the spots to loading
+        this.updateSpotsState(inject);
+        // Prevent duplicate placement ids
         const hasDuplicatePlacementIds = this.preventDuplicateSpotPlacementIds(inject);
         if (!hasDuplicatePlacementIds) {
             return;
         }
+        // Prevent non-existent spot types
         inject = this.preventNonExistentSpotTypes(inject);
+        // Make the spot selection request
         const response = await this.spotSelectionRequest({ ...params, inject });
+        // Handle the response
         if (typeof response === 'object' && 'error' in response) {
-            this.eventError(response.error);
+            this.eventService.handleSpotState('all', {
+                state: {
+                    error: response.error,
+                },
+            });
             return;
         }
         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)) {
-                this.eventError(`RmnSdk: Failed to inject spot element. No spots found for type "${item.spotType}".`, { placementId: item.placementId, type: item.spotType });
+                this.eventService.handleSpotState(item.placementId, {
+                    state: {
+                        error: `No spots found for type "${item.spotType}".`,
+                        loading: false,
+                    },
+                });
                 continue;
             }
             const placementId = item.placementId.replace('#', '');
             const placement = document.getElementById(placementId);
             if (!placement) {
-                this.eventError(`RmnSdk: Failed to inject spot element. Placement not found for id "#${placementId}".`, { placementId, type: item.spotType });
+                this.eventService.handleSpotState(item.placementId, {
+                    state: {
+                        error: `Placement not found for id "${placementId}".`,
+                        loading: false,
+                    },
+                });
                 continue;
             }
             if (spots.length === 1) {
@@ -18005,14 +18072,6 @@ class LiquidCommerceRmnClient {
             }
         }
     }
-    /**
-     * 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.
      *
@@ -18025,12 +18084,14 @@ class LiquidCommerceRmnClient {
         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,
-            })),
+            spots: inject.map((item) => {
+                return {
+                    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);
     }
@@ -18047,23 +18108,39 @@ class LiquidCommerceRmnClient {
         var _a;
         const carouselSlides = [];
         for (const spotItem of spots) {
+            this.eventService.handleSpotState(placement.id, {
+                displayConfig: {
+                    isCarousel: true,
+                    isCarouselItem: true,
+                    isSingleItem: false,
+                },
+            }, false);
             const spot = this.elementService.overrideSpotColors(spotItem, config === null || config === void 0 ? void 0 : config.colors);
             const content = SPOT_TEMPLATE_HTML_ELEMENT(spot, { overlay: config === null || config === void 0 ? void 0 : config.overlay });
             if (!content) {
-                this.eventError(`RmnSdk: Failed to inject carousel spot element. Could not create element for type "${spot.spot}".`, { placementId: placement.id, type: spot.spot });
+                this.eventService.handleSpotState(placement.id, {
+                    state: {
+                        error: `Failed to inject carousel spot item element. Could not create element for type "${spot.spot}".`,
+                        loading: false,
+                    },
+                });
                 continue;
             }
-            this.eventSpotElement({
+            this.eventService.registerSpot({
                 spot,
                 placementId: placement.id,
                 element: content,
             });
             carouselSlides.push(content);
         }
-        const { maxWidth, maxHeight } = spots.reduce((max, spot) => ({
-            maxWidth: Math.max(max.maxWidth, spot.width),
-            maxHeight: Math.max(max.maxHeight, spot.height),
-        }), { maxWidth: 0, maxHeight: 0 });
+        // Get the max width and height of the spots
+        const { maxWidth, maxHeight } = spots.reduce((max, spot) => {
+            return {
+                maxWidth: Math.max(max.maxWidth, spot.width),
+                maxHeight: Math.max(max.maxHeight, spot.height),
+            };
+        }, { maxWidth: 0, maxHeight: 0 });
+        // Create the carousel element
         const carouselElement = this.elementService.createCarouselElement({
             slides: carouselSlides,
             config: {
@@ -18075,10 +18152,24 @@ class LiquidCommerceRmnClient {
             },
         });
         if (!carouselElement) {
-            this.eventError(`RmnSdk: Failed to inject spot carousel element. Could not create spot carousel element.`, { placementId: placement.id });
+            this.eventService.handleSpotState(placement.id, {
+                state: {
+                    error: `Failed to inject spot carousel element. Could not create spot carousel element.`,
+                    loading: false,
+                },
+            });
             return false;
         }
         placement.replaceChildren(carouselElement);
+        this.eventService.handleSpotState(placement.id, {
+            dom: {
+                element: carouselElement,
+            },
+            state: {
+                mounted: true,
+                loading: false,
+            },
+        });
         return true;
     }
     /**
@@ -18094,11 +18185,23 @@ class LiquidCommerceRmnClient {
     injectOneSpotElement(injectItem, placement, spot, config) {
         var _a;
         const spotData = this.elementService.overrideSpotColors(spot, config === null || config === void 0 ? void 0 : config.colors);
+        this.eventService.handleSpotState(injectItem.placementId, {
+            displayConfig: {
+                isSingleItem: true,
+            },
+        }, false);
+        // Create the spot template element
         const content = SPOT_TEMPLATE_HTML_ELEMENT(spotData, { overlay: config === null || config === void 0 ? void 0 : config.overlay });
         if (!content) {
-            this.eventError(`RmnSdk: Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`, { placementId: injectItem.placementId, type: injectItem.spotType });
+            this.eventService.handleSpotState(injectItem.placementId, {
+                state: {
+                    error: `Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`,
+                    loading: false,
+                },
+            });
             return false;
         }
+        // Create the spot element
         const spotElement = this.elementService.createSpotElement({
             content,
             config: {
@@ -18110,23 +18213,30 @@ class LiquidCommerceRmnClient {
             },
         });
         if (!spotElement) {
-            this.eventError(`RmnSdk: Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`, { placementId: injectItem.placementId, type: injectItem.spotType });
+            this.eventService.handleSpotState(injectItem.placementId, {
+                state: {
+                    error: `Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`,
+                    loading: false,
+                },
+            });
             return false;
         }
-        this.eventSpotElement({
-            spot,
+        this.eventService.registerSpot({
+            spot: spotData,
             placementId: injectItem.placementId,
             element: spotElement,
         });
         placement.replaceChildren(spotElement);
-        return true;
-    }
-    eventSpotElement({ spot, placementId, element, }) {
-        this.eventService.registerSpot({
-            placementId,
-            element,
-            spot,
+        this.eventService.handleSpotState(injectItem.placementId, {
+            dom: {
+                element: spotElement,
+            },
+            state: {
+                mounted: true,
+                loading: false,
+            },
         });
+        return true;
     }
     /**
      * Prevents duplicate placement ids in the inject data.
@@ -18141,7 +18251,11 @@ class LiquidCommerceRmnClient {
         const placementIds = new Set();
         for (const item of inject) {
             if (placementIds.has(item.placementId)) {
-                this.eventError(`RmnSdk: Duplicate placement id (${item.placementId}) found. Please provide a unique placement id for each spot element.`, { placementId: item.placementId, type: item.spotType });
+                this.eventService.handleSpotState(item.placementId, {
+                    state: {
+                        error: `Duplicate placement id (${item.placementId}) found. Please provide a unique placement id for each spot element.`,
+                    },
+                });
                 return false;
             }
             placementIds.add(item.placementId);
@@ -18152,22 +18266,29 @@ class LiquidCommerceRmnClient {
         const newInject = [];
         for (const item of inject) {
             if (!Object.values(exports.RMN_SPOT_TYPE).includes(item.spotType)) {
-                this.eventError(`RmnSdk: Invalid spot type (${item.spotType}) found. Please provide a valid spot type for each spot element.`, { placementId: item.placementId, type: item.spotType });
+                this.eventService.handleSpotState(item.placementId, {
+                    state: {
+                        error: `Invalid spot type (${item.spotType}) found. Please provide a valid spot type for each spot element.`,
+                    },
+                });
                 continue;
             }
             newInject.push(item);
         }
         return newInject;
     }
-    eventError(error, spot) {
-        this.eventService.publish(exports.RMN_SPOT_EVENT.INJECT_SPOTS, {
-            isLoading: false,
-            isCompleted: true,
-            error: {
-                message: error,
-                spot,
-            },
-        });
+    updateSpotsState(inject) {
+        for (const item of inject) {
+            this.eventService.handleSpotState(item.placementId, {
+                identifier: {
+                    placementId: item.placementId,
+                    spotType: item.spotType,
+                },
+                state: {
+                    loading: true,
+                },
+            });
+        }
     }
 }
 /**