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

package/dist/index.cjs

@@ -18388,11 +18388,38 @@ class EventService {
                 },
             };
         }
-        this.spotStates.set(placementId, { ...currentState, ...updates });
+        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));
         }
     }
+    deepMerge(current, updates) {
+        return {
+            identifier: {
+                ...current.identifier,
+                ...updates.identifier,
+            },
+            dom: updates.dom
+                ? {
+                    ...current.dom,
+                    ...updates.dom,
+                }
+                : current.dom,
+            state: updates.state
+                ? {
+                    ...current.state,
+                    ...updates.state,
+                }
+                : current.state,
+            displayConfig: updates.displayConfig
+                ? {
+                    ...current.displayConfig,
+                    ...updates.displayConfig,
+                }
+                : current.displayConfig,
+        };
+    }
     async handleClick({ placementId, spot, spotElement, }) {
         var _a, _b, _c;
         // Publish click event
@@ -18747,10 +18774,12 @@ class LiquidCommerceRmnClient {
         const config = params.config;
         let inject = params.inject;
         if (!inject.length) {
+            // Handle no spots error state
             this.eventService.handleSpotState('all', {
                 state: {
                     error: 'No spot elements provided for injection.',
                     loading: false,
+                    mounted: false,
                 },
             });
             return;
@@ -18769,9 +18798,12 @@ class LiquidCommerceRmnClient {
         // const response = await this.useSpotSelectionExample(inject);
         // Handle the response
         if (typeof response === 'object' && 'error' in response) {
+            // Handle request error state
             this.eventService.handleSpotState('all', {
                 state: {
                     error: response.error,
+                    mounted: false,
+                    loading: false,
                 },
             });
             return;
@@ -18780,9 +18812,11 @@ class LiquidCommerceRmnClient {
             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)) {
+                // Handle no spots found error state
                 this.eventService.handleSpotState(item.placementId, {
                     state: {
                         error: `No spots found for type "${item.spotType}".`,
+                        mounted: false,
                         loading: false,
                     },
                 });
@@ -18791,9 +18825,11 @@ class LiquidCommerceRmnClient {
             const placementId = item.placementId.replace('#', '');
             const placement = document.getElementById(placementId);
             if (!placement) {
+                // Handle placement not found error state
                 this.eventService.handleSpotState(item.placementId, {
                     state: {
                         error: `Placement not found for id "${placementId}".`,
+                        mounted: false,
                         loading: false,
                     },
                 });
@@ -18808,12 +18844,14 @@ class LiquidCommerceRmnClient {
                 display: 'flex',
                 justifyContent: 'center',
             });
+            // Handle single spot
             if (spots.length === 1) {
                 const isInjected = this.injectOneSpotElement(item, placement, spots[0], itemConfig);
                 if (!isInjected) {
                     continue;
                 }
             }
+            // Handle multiple spots (carousel)
             if (spots.length > 1) {
                 const isInjected = this.injectCarouselSpotElement(placement, spots, itemConfig);
                 if (!isInjected) {
@@ -18857,18 +18895,24 @@ class LiquidCommerceRmnClient {
         const carouselSlides = [];
         for (const spotItem of spots) {
             this.eventService.handleSpotState(placement.id, {
+                identifier: {
+                    placementId: placement.id,
+                    spotType: spotItem.spot,
+                    spotId: spotItem.id,
+                },
                 displayConfig: {
+                    isSingleItem: false,
                     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.eventService.handleSpotState(placement.id, {
                     state: {
                         error: `Failed to inject carousel spot item element. Could not create element for type "${spot.spot}".`,
+                        mounted: false,
                         loading: false,
                     },
                 });
@@ -18901,6 +18945,7 @@ class LiquidCommerceRmnClient {
             this.eventService.handleSpotState(placement.id, {
                 state: {
                     error: `Failed to inject spot carousel element. Could not create spot carousel element.`,
+                    mounted: false,
                     loading: false,
                 },
             });
@@ -18910,10 +18955,12 @@ class LiquidCommerceRmnClient {
         this.eventService.handleSpotState(placement.id, {
             dom: {
                 spotElement: carouselElement,
+                visibleOnViewport: false,
             },
             state: {
                 mounted: true,
                 loading: false,
+                error: undefined,
             },
         });
         return true;
@@ -18930,18 +18977,25 @@ 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, {
+            identifier: {
+                placementId: injectItem.placementId,
+                spotType: injectItem.spotType,
+                spotId: spot.id,
+            },
             displayConfig: {
                 isSingleItem: true,
+                isCarousel: false,
+                isCarouselItem: false,
             },
-        }, false);
-        // Create the spot template element
+        });
+        const spotData = this.elementService.overrideSpotColors(spot, config === null || config === void 0 ? void 0 : config.colors);
         const content = SPOT_TEMPLATE_HTML_ELEMENT(spotData, { overlay: config === null || config === void 0 ? void 0 : config.overlay });
         if (!content) {
             this.eventService.handleSpotState(injectItem.placementId, {
                 state: {
                     error: `Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`,
+                    mounted: false,
                     loading: false,
                 },
             });
@@ -18962,6 +19016,7 @@ class LiquidCommerceRmnClient {
             this.eventService.handleSpotState(injectItem.placementId, {
                 state: {
                     error: `Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`,
+                    mounted: false,
                     loading: false,
                 },
             });
@@ -18976,10 +19031,12 @@ class LiquidCommerceRmnClient {
         this.eventService.handleSpotState(injectItem.placementId, {
             dom: {
                 spotElement,
+                visibleOnViewport: false,
             },
             state: {
                 mounted: true,
                 loading: false,
+                error: undefined,
             },
         });
         return true;
@@ -19000,6 +19057,8 @@ class LiquidCommerceRmnClient {
                 this.eventService.handleSpotState(item.placementId, {
                     state: {
                         error: `Duplicate placement id (${item.placementId}) found. Please provide a unique placement id for each spot element.`,
+                        mounted: false,
+                        loading: false,
                     },
                 });
                 return false;
@@ -19015,6 +19074,8 @@ class LiquidCommerceRmnClient {
                 this.eventService.handleSpotState(item.placementId, {
                     state: {
                         error: `Invalid spot type (${item.spotType}) found. Please provide a valid spot type for each spot element.`,
+                        mounted: false,
+                        loading: false,
                     },
                 });
                 continue;
@@ -19023,6 +19084,7 @@ class LiquidCommerceRmnClient {
         }
         return newInject;
     }
+    // Initialize spots with loading state and identifiers
     updateSpotsState(inject) {
         for (const item of inject) {
             this.eventService.handleSpotState(item.placementId, {
@@ -19032,6 +19094,8 @@ class LiquidCommerceRmnClient {
                 },
                 state: {
                     loading: true,
+                    mounted: false,
+                    error: undefined,
                 },
             });
         }

package/dist/index.esm.js

@@ -18386,11 +18386,38 @@ class EventService {
                 },
             };
         }
-        this.spotStates.set(placementId, { ...currentState, ...updates });
+        const merged = this.deepMerge(currentState, updates);
+        this.spotStates.set(placementId, merged);
         if (publish) {
             this.pubSub.publish(RMN_SPOT_EVENT.LIFECYCLE_STATE, this.spotStates.get(placementId));
         }
     }
+    deepMerge(current, updates) {
+        return {
+            identifier: {
+                ...current.identifier,
+                ...updates.identifier,
+            },
+            dom: updates.dom
+                ? {
+                    ...current.dom,
+                    ...updates.dom,
+                }
+                : current.dom,
+            state: updates.state
+                ? {
+                    ...current.state,
+                    ...updates.state,
+                }
+                : current.state,
+            displayConfig: updates.displayConfig
+                ? {
+                    ...current.displayConfig,
+                    ...updates.displayConfig,
+                }
+                : current.displayConfig,
+        };
+    }
     async handleClick({ placementId, spot, spotElement, }) {
         var _a, _b, _c;
         // Publish click event
@@ -18745,10 +18772,12 @@ class LiquidCommerceRmnClient {
         const config = params.config;
         let inject = params.inject;
         if (!inject.length) {
+            // Handle no spots error state
             this.eventService.handleSpotState('all', {
                 state: {
                     error: 'No spot elements provided for injection.',
                     loading: false,
+                    mounted: false,
                 },
             });
             return;
@@ -18767,9 +18796,12 @@ class LiquidCommerceRmnClient {
         // const response = await this.useSpotSelectionExample(inject);
         // Handle the response
         if (typeof response === 'object' && 'error' in response) {
+            // Handle request error state
             this.eventService.handleSpotState('all', {
                 state: {
                     error: response.error,
+                    mounted: false,
+                    loading: false,
                 },
             });
             return;
@@ -18778,9 +18810,11 @@ class LiquidCommerceRmnClient {
             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)) {
+                // Handle no spots found error state
                 this.eventService.handleSpotState(item.placementId, {
                     state: {
                         error: `No spots found for type "${item.spotType}".`,
+                        mounted: false,
                         loading: false,
                     },
                 });
@@ -18789,9 +18823,11 @@ class LiquidCommerceRmnClient {
             const placementId = item.placementId.replace('#', '');
             const placement = document.getElementById(placementId);
             if (!placement) {
+                // Handle placement not found error state
                 this.eventService.handleSpotState(item.placementId, {
                     state: {
                         error: `Placement not found for id "${placementId}".`,
+                        mounted: false,
                         loading: false,
                     },
                 });
@@ -18806,12 +18842,14 @@ class LiquidCommerceRmnClient {
                 display: 'flex',
                 justifyContent: 'center',
             });
+            // Handle single spot
             if (spots.length === 1) {
                 const isInjected = this.injectOneSpotElement(item, placement, spots[0], itemConfig);
                 if (!isInjected) {
                     continue;
                 }
             }
+            // Handle multiple spots (carousel)
             if (spots.length > 1) {
                 const isInjected = this.injectCarouselSpotElement(placement, spots, itemConfig);
                 if (!isInjected) {
@@ -18855,18 +18893,24 @@ class LiquidCommerceRmnClient {
         const carouselSlides = [];
         for (const spotItem of spots) {
             this.eventService.handleSpotState(placement.id, {
+                identifier: {
+                    placementId: placement.id,
+                    spotType: spotItem.spot,
+                    spotId: spotItem.id,
+                },
                 displayConfig: {
+                    isSingleItem: false,
                     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.eventService.handleSpotState(placement.id, {
                     state: {
                         error: `Failed to inject carousel spot item element. Could not create element for type "${spot.spot}".`,
+                        mounted: false,
                         loading: false,
                     },
                 });
@@ -18899,6 +18943,7 @@ class LiquidCommerceRmnClient {
             this.eventService.handleSpotState(placement.id, {
                 state: {
                     error: `Failed to inject spot carousel element. Could not create spot carousel element.`,
+                    mounted: false,
                     loading: false,
                 },
             });
@@ -18908,10 +18953,12 @@ class LiquidCommerceRmnClient {
         this.eventService.handleSpotState(placement.id, {
             dom: {
                 spotElement: carouselElement,
+                visibleOnViewport: false,
             },
             state: {
                 mounted: true,
                 loading: false,
+                error: undefined,
             },
         });
         return true;
@@ -18928,18 +18975,25 @@ 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, {
+            identifier: {
+                placementId: injectItem.placementId,
+                spotType: injectItem.spotType,
+                spotId: spot.id,
+            },
             displayConfig: {
                 isSingleItem: true,
+                isCarousel: false,
+                isCarouselItem: false,
             },
-        }, false);
-        // Create the spot template element
+        });
+        const spotData = this.elementService.overrideSpotColors(spot, config === null || config === void 0 ? void 0 : config.colors);
         const content = SPOT_TEMPLATE_HTML_ELEMENT(spotData, { overlay: config === null || config === void 0 ? void 0 : config.overlay });
         if (!content) {
             this.eventService.handleSpotState(injectItem.placementId, {
                 state: {
                     error: `Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`,
+                    mounted: false,
                     loading: false,
                 },
             });
@@ -18960,6 +19014,7 @@ class LiquidCommerceRmnClient {
             this.eventService.handleSpotState(injectItem.placementId, {
                 state: {
                     error: `Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`,
+                    mounted: false,
                     loading: false,
                 },
             });
@@ -18974,10 +19029,12 @@ class LiquidCommerceRmnClient {
         this.eventService.handleSpotState(injectItem.placementId, {
             dom: {
                 spotElement,
+                visibleOnViewport: false,
             },
             state: {
                 mounted: true,
                 loading: false,
+                error: undefined,
             },
         });
         return true;
@@ -18998,6 +19055,8 @@ class LiquidCommerceRmnClient {
                 this.eventService.handleSpotState(item.placementId, {
                     state: {
                         error: `Duplicate placement id (${item.placementId}) found. Please provide a unique placement id for each spot element.`,
+                        mounted: false,
+                        loading: false,
                     },
                 });
                 return false;
@@ -19013,6 +19072,8 @@ class LiquidCommerceRmnClient {
                 this.eventService.handleSpotState(item.placementId, {
                     state: {
                         error: `Invalid spot type (${item.spotType}) found. Please provide a valid spot type for each spot element.`,
+                        mounted: false,
+                        loading: false,
                     },
                 });
                 continue;
@@ -19021,6 +19082,7 @@ class LiquidCommerceRmnClient {
         }
         return newInject;
     }
+    // Initialize spots with loading state and identifiers
     updateSpotsState(inject) {
         for (const item of inject) {
             this.eventService.handleSpotState(item.placementId, {
@@ -19030,6 +19092,8 @@ class LiquidCommerceRmnClient {
                 },
                 state: {
                     loading: true,
+                    mounted: false,
+                    error: undefined,
                 },
             });
         }

package/dist/types/modules/event/event.service.d.ts

@@ -23,6 +23,7 @@ export declare class EventService {
      * @returns {void}
      */
     handleSpotState(placementId: string, updates: Partial<ILifecycleState>, publish?: boolean): void;
+    private deepMerge;
     private handleClick;
     private handleIntersectionObserver;
     private fireImpressionEvent;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@liquidcommercedev/rmn-sdk",
   "description": "LiquidCommerce RMN SDK",
   "author": "LiquidCommerce Tech",
-  "version": "1.5.0-beta.6",
+  "version": "1.5.0-beta.7",
   "homepage": "https://docs.liquidcommerce.co/rmn-sdk",
   "main": "./dist/index.cjs",
   "module": "./dist/index.esm.js",