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

package/dist/index.esm.js

@@ -54,8 +54,7 @@ var RMN_FILTER_PROPERTIES;
 })(RMN_FILTER_PROPERTIES || (RMN_FILTER_PROPERTIES = {}));
 var RMN_SPOT_EVENT;
 (function (RMN_SPOT_EVENT) {
-    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";
@@ -16825,11 +16824,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;
@@ -16887,10 +16886,6 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
                     height: 50%;
                 }
 
-                .${prefix}__header {
-                    font-size: 22px;
-                }
-
                 .${prefix}__description {
                     font-size: 12px;
                 }
@@ -16902,7 +16897,7 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
 
             @container (min-width: 1024px) {
                 .${prefix}__header {
-                    font-size: 24px;
+                    font-size: 26px;
                 }
 
                 .${prefix}__description {
@@ -16963,7 +16958,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;
     }
@@ -16982,7 +16977,7 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         height: 40%;
         display: flex;
         flex-direction: row;
-        gap: 5px;
+         gap: 6px;
     }
 
     .${prefix}__secondary-image {
@@ -17004,7 +16999,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;
     }
@@ -17150,7 +17145,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;
@@ -17175,7 +17170,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;
     }
@@ -17785,6 +17780,7 @@ class EventService {
     constructor() {
         this.pubSub = new PubSub();
         this.activeSpots = new Map();
+        this.spotStates = new Map();
         this.intersectionObserver = new IntersectionObserverService();
     }
     static getInstance() {
@@ -17793,6 +17789,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(RMN_SPOT_EVENT.LIFECYCLE_STATE, this.spotStates.get(placementId));
+        }
+    }
     registerSpot({ placementId, element, spot }) {
         this.activeSpots.set(spot.id, {
             placementId,
@@ -17815,23 +17851,20 @@ class EventService {
                 eventUrl: (_b = (_a = spot.events.find((event) => event.event === RMN_SPOT_EVENT.CLICK)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '',
             });
         });
-        // Publish spot created event
-        this.pubSub.publish(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(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);
         }
@@ -17850,6 +17883,12 @@ class EventService {
                 element,
                 impressionTracked: true,
             });
+            this.handleSpotState(placementId, {
+                dom: {
+                    element,
+                    visible: true,
+                },
+            });
             // Fire impression event
             await this.fireEvent({
                 event: RMN_SPOT_EVENT.IMPRESSION,
@@ -17858,12 +17897,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.
      *
@@ -17911,24 +17944,39 @@ class SelectionService extends BaseApi {
      *
      * @param {ISpotSelectionParams} data - Spots selection parameters.
      *
-     * @return {Promise<ISpots>} - The spots response object.
+     * @return {Promise<ISpots | { error: string }>} - The spots response object.
      */
     async spotSelection(data) {
         const { isOk, val, isErr } = await this.post(SELECTION_API_PATH, data, {});
         if (isErr) {
-            throw new Error(`There was an error during spot selection: (${isErr === null || isErr === void 0 ? void 0 : isErr.errorMessage})`);
+            return { error: `There was an error during spot selection: (${isErr === null || isErr === void 0 ? void 0 : isErr.errorMessage})` };
         }
         if (isOk && val && val.data && (val === null || val === void 0 ? void 0 : val.refresh.token)) {
             this.authInfo.authenticated = true;
             this.authInfo.token = val.refresh.token;
             return val.data.spots;
         }
-        throw new Error('Spot selection response was not successful');
+        return { error: 'Spot selection response was not successful' };
     }
 }
 
 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();
@@ -17940,7 +17988,7 @@ class LiquidCommerceRmnClient {
      *
      * @param {ISpotSelectionParams} params - Spots selection parameters.
      *
-     * @return {Promise<ISpots>} - The spots response object.
+     * @return {Promise<ISpots | {error : string}>} - The spots response object.
      */
     async spotSelection(params) {
         return this.selectionService.spotSelection(params);
@@ -17954,60 +18002,94 @@ class LiquidCommerceRmnClient {
      */
     async injectSpotElement(params) {
         var _a;
-        const { inject, config } = params;
+        const config = params.config;
+        let inject = params.inject;
         if (!inject.length) {
-            console.warn('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.eventService.handleSpotState('all', {
+                state: {
+                    error: response.error,
+                },
+            });
             return;
         }
-        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}".`);
+                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) {
-                console.warn(`RmnSdk: Failed to inject spot element. Placement not found for id "#${placementId}".`);
+                this.eventService.handleSpotState(item.placementId, {
+                    state: {
+                        error: `Placement not found for id "${placementId}".`,
+                        loading: false,
+                    },
+                });
                 continue;
             }
             if (spots.length === 1) {
-                this.injectOneSpotElement(item, placement, spots[0], itemConfig);
+                const isInjected = this.injectOneSpotElement(item, placement, spots[0], itemConfig);
+                if (!isInjected) {
+                    continue;
+                }
             }
             if (spots.length > 1) {
-                this.injectCarouselSpotElement(placement, spots, itemConfig);
+                const isInjected = this.injectCarouselSpotElement(placement, spots, itemConfig);
+                if (!isInjected) {
+                    continue;
+                }
             }
         }
     }
-    /**
-     * 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.
+     * @return {Promise<ISpots | {error: string}>} - 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,
-            })),
+            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);
     }
@@ -18024,23 +18106,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) {
-                console.warn(`RmnSdk: Failed to inject carousel spot element. Could not create element for type "${spot.spot}".`);
-                return;
+                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: {
@@ -18052,10 +18150,25 @@ class LiquidCommerceRmnClient {
             },
         });
         if (!carouselElement) {
-            console.warn(`RmnSdk: Failed to inject spot carousel element. Could not create spot carousel element.`);
-            return;
+            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;
     }
     /**
      * Injects a single spot element into the provided placement.
@@ -18070,11 +18183,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) {
-            console.warn(`RmnSdk: Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`);
-            return;
+            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: {
@@ -18086,22 +18211,30 @@ class LiquidCommerceRmnClient {
             },
         });
         if (!spotElement) {
-            console.warn(`RmnSdk: Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`);
-            return;
+            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);
-    }
-    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.
@@ -18116,10 +18249,44 @@ class LiquidCommerceRmnClient {
         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.`);
+                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);
         }
+        return true;
+    }
+    preventNonExistentSpotTypes(inject) {
+        const newInject = [];
+        for (const item of inject) {
+            if (!Object.values(RMN_SPOT_TYPE).includes(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;
+    }
+    updateSpotsState(inject) {
+        for (const item of inject) {
+            this.eventService.handleSpotState(item.placementId, {
+                identifier: {
+                    placementId: item.placementId,
+                    spotType: item.spotType,
+                },
+                state: {
+                    loading: true,
+                },
+            });
+        }
     }
 }
 /**

package/dist/types/enums.d.ts

@@ -49,8 +49,7 @@ export declare enum RMN_FILTER_PROPERTIES {
     SECTION = "section"
 }
 export declare enum RMN_SPOT_EVENT {
-    MOUNTED = "MOUNTED",
-    UNMOUNTED = "UNMOUNTED",
+    LIFECYCLE_STATE = "LIFECYCLE_STATE",
     IMPRESSION = "IMPRESSION",
     CLICK = "CLICK",
     PURCHASE = "PURCHASE",

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

@@ -4,16 +4,31 @@ export interface IFireEventParams {
     event: RMN_SPOT_EVENT;
     eventUrl: string;
 }
-export interface IMountedEvent {
+export interface ILSIdentifier {
     placementId: string;
     spotId: string;
     spotType: string;
-    spotVariant: string;
-    element: HTMLElement;
 }
-export interface IUnMountedEvent {
-    placementId: string;
-    spotId: string;
+export interface ILSDom {
+    visible: boolean;
+    element?: HTMLElement;
+}
+export interface ILSState {
+    mounted: boolean;
+    unmounted: boolean;
+    loading: boolean;
+    error?: string;
+}
+export interface ILSDisplayConfig {
+    isCarousel: boolean;
+    isCarouselItem: boolean;
+    isSingleItem: boolean;
+}
+export interface ILifecycleState {
+    identifier: Partial<ILSIdentifier>;
+    dom?: Partial<ILSDom>;
+    state?: Partial<ILSState>;
+    displayConfig?: Partial<ILSDisplayConfig>;
 }
 export interface IClickEvent {
     placementId: string;
@@ -42,8 +57,7 @@ export interface IBuyNowEvent {
     spotId: string;
 }
 export interface IEventMap {
-    [RMN_SPOT_EVENT.MOUNTED]: IMountedEvent;
-    [RMN_SPOT_EVENT.UNMOUNTED]: IUnMountedEvent;
+    [RMN_SPOT_EVENT.LIFECYCLE_STATE]: ILifecycleState;
     [RMN_SPOT_EVENT.CLICK]: IClickEvent;
     [RMN_SPOT_EVENT.IMPRESSION]: IImpressionEvent;
     [RMN_SPOT_EVENT.ADD_TO_CART]: IAddToCartEvent;

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

@@ -1,16 +1,19 @@
-import type { IEventMap, IRegisterSpotParams } from './event.interface';
+import { RMN_SPOT_EVENT } from 'enums';
+import type { IEventMap, ILifecycleState, IRegisterSpotParams } from './event.interface';
 export declare class EventService {
     private static instance;
     private pubSub;
     private intersectionObserver;
+    private spotStates;
     private activeSpots;
     private constructor();
     static getInstance(): EventService;
+    subscribe(eventType: RMN_SPOT_EVENT, callback: (data: IEventMap[RMN_SPOT_EVENT]) => void): () => void;
+    publish(eventType: RMN_SPOT_EVENT, data: IEventMap[RMN_SPOT_EVENT]): void;
+    handleSpotState(placementId: string, updates: Partial<ILifecycleState>, publish?: boolean): void;
     registerSpot({ placementId, element, spot }: IRegisterSpotParams): void;
     unregisterSpot(spotId: string): void;
     private handleIntersectionObserver;
-    subscribe<K extends keyof IEventMap>(eventType: K, callback: (data: IEventMap[K]) => void): () => void;
-    publish<K extends keyof IEventMap>(eventType: K, data: IEventMap[K]): void;
     /**
      * Fires an event using the navigator.sendBeacon method and redirects the user if the event is a click event.
      *

package/dist/types/modules/selection/selection.interface.d.ts

@@ -33,5 +33,7 @@ export interface ISpot {
 }
 export type ISpots = Record<PlacementIdType, ISpot[]>;
 export interface ISelectionService {
-    spotSelection(data: ISpotSelectionParams): Promise<ISpots>;
+    spotSelection(data: ISpotSelectionParams): Promise<ISpots | {
+        error: string;
+    }>;
 }

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

@@ -10,7 +10,9 @@ export declare class SelectionService extends BaseApi implements ISelectionServi
      *
      * @param {ISpotSelectionParams} data - Spots selection parameters.
      *
-     * @return {Promise<ISpots>} - The spots response object.
+     * @return {Promise<ISpots | { error: string }>} - The spots response object.
      */
-    spotSelection(data: ISpotSelectionParams): Promise<ISpots>;
+    spotSelection(data: ISpotSelectionParams): Promise<ISpots | {
+        error: string;
+    }>;
 }