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

package/dist/index.esm.js

@@ -54,9 +54,7 @@ var RMN_FILTER_PROPERTIES;
 })(RMN_FILTER_PROPERTIES || (RMN_FILTER_PROPERTIES = {}));
 var RMN_SPOT_EVENT;
 (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";
@@ -16826,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;
@@ -16888,10 +16886,6 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
                     height: 50%;
                 }
 
-                .${prefix}__header {
-                    font-size: 22px;
-                }
-
                 .${prefix}__description {
                     font-size: 12px;
                 }
@@ -16903,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 {
@@ -16964,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;
     }
@@ -16983,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 {
@@ -17005,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;
     }
@@ -17151,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;
@@ -17176,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;
     }
@@ -17786,6 +17780,7 @@ class EventService {
     constructor() {
         this.pubSub = new PubSub();
         this.activeSpots = new Map();
+        this.spotStates = new Map();
         this.intersectionObserver = new IntersectionObserverService();
     }
     static getInstance() {
@@ -17794,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,
@@ -17816,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);
         }
@@ -17851,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,
@@ -17859,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.
      *
@@ -17930,6 +17962,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();
@@ -17957,36 +18004,56 @@ class LiquidCommerceRmnClient {
         var _a;
         const config = params.config;
         let inject = params.inject;
-        this.eventService.publish(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) {
@@ -18003,14 +18070,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.
      *
@@ -18023,12 +18082,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);
     }
@@ -18045,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) {
-                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: {
@@ -18073,10 +18150,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;
     }
     /**
@@ -18092,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) {
-            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: {
@@ -18108,23 +18211,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.
@@ -18139,7 +18249,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);
@@ -18150,22 +18264,29 @@ class LiquidCommerceRmnClient {
         const newInject = [];
         for (const item of inject) {
             if (!Object.values(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(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,
+                },
+            });
+        }
     }
 }
 /**

package/dist/types/enums.d.ts

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

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

@@ -4,28 +4,31 @@ export interface IFireEventParams {
     event: RMN_SPOT_EVENT;
     eventUrl: string;
 }
-export interface IInjectSpotError {
-    message: string;
-    spot?: {
-        type?: string;
-        placementId?: string;
-    };
-}
-export interface IInjectSpotsEvent {
-    isLoading: boolean;
-    isCompleted: boolean;
-    error: null | IInjectSpotError;
-}
-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;
@@ -54,9 +57,7 @@ export interface IBuyNowEvent {
     spotId: string;
 }
 export interface IEventMap {
-    [RMN_SPOT_EVENT.INJECT_SPOTS]: IInjectSpotsEvent;
-    [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/rmn-client.d.ts

@@ -1,8 +1,9 @@
 import type { IAuthCredentials } from 'modules/auth';
 import type { IInjectSpotElementParams, IRmnCreateSpotElementConfig } from 'modules/element';
-import { EventService } from 'modules/event';
+import { type IEventMap } from 'modules/event';
 import type { ISpot, ISpots, ISpotSelectionParams } from 'modules/selection';
 import type { IRmnClient, IRmnConfig } from 'types';
+import type { RMN_SPOT_EVENT } from './enums';
 export declare class LiquidCommerceRmnClient implements IRmnClient {
     private readonly selectionService;
     private readonly elementService;
@@ -33,7 +34,10 @@ export declare class LiquidCommerceRmnClient implements IRmnClient {
      *
      * @return {EventService} - The event manager instance.
      */
-    eventManager(): EventService;
+    eventManager: {
+        subscribe: (eventType: RMN_SPOT_EVENT, callback: (data: IEventMap[RMN_SPOT_EVENT]) => void) => (() => void);
+        publish: (eventType: RMN_SPOT_EVENT, data: IEventMap[RMN_SPOT_EVENT]) => void;
+    };
     /**
      * Makes a selection request on our server based on the provided data.
      *
@@ -63,7 +67,6 @@ export declare class LiquidCommerceRmnClient implements IRmnClient {
      * @return {void}
      */
     private injectOneSpotElement;
-    private eventSpotElement;
     /**
      * Prevents duplicate placement ids in the inject data.
      *
@@ -75,7 +78,7 @@ export declare class LiquidCommerceRmnClient implements IRmnClient {
      */
     private preventDuplicateSpotPlacementIds;
     private preventNonExistentSpotTypes;
-    private eventError;
+    private updateSpotsState;
 }
 /**
  * Creates a new instance of the RmnClient.

package/dist/types/types.d.ts

@@ -1,9 +1,9 @@
-import type { EventService } from './modules/event';
+import type { IEventMap } from './modules/event';
 export type { IInjectSpotElement, IInjectSpotElementConfig, IInjectSpotElementParams, IRmnCreateSpotElementConfig, ISpotColors, ISpotOverlay, } from 'modules/element';
 export type { CarouselNavPositionType, ICarouselButtonOptions, ICarouselDotOptions, ICarouselOptions, } from 'modules/element/component/carousel';
 export type { ISpots, RmnFilterType, RmnSpotType } from 'modules/selection';
 export { ISpot, ISpotEvent, ISpotSelectionParams } from 'modules/selection';
-import type { RMN_ENV } from 'enums';
+import type { RMN_ENV, RMN_SPOT_EVENT } from 'enums';
 import type { IInjectSpotElementParams } from 'modules/element';
 import type { ISpots, ISpotSelectionParams } from 'modules/selection';
 export interface IRmnClient {
@@ -11,7 +11,10 @@ export interface IRmnClient {
         error: string;
     }>;
     injectSpotElement(params: IInjectSpotElementParams): Promise<void>;
-    eventManager(): EventService;
+    eventManager: {
+        subscribe: (eventType: RMN_SPOT_EVENT, callback: (data: IEventMap[RMN_SPOT_EVENT]) => void) => () => void;
+        publish: (eventType: RMN_SPOT_EVENT, data: IEventMap[RMN_SPOT_EVENT]) => void;
+    };
 }
 export interface IRmnConfig {
     env: RMN_ENV;