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

package/dist/index.cjs

@@ -15166,6 +15166,40 @@ const GFONT_CORMORANT = `
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap">
 `;
 
+class DataLayerMonitor {
+    constructor() {
+        if (!window.dataLayer) {
+            return;
+        }
+        this.originalPush = window.dataLayer.push;
+    }
+    static getInstance() {
+        if (!DataLayerMonitor.instance) {
+            DataLayerMonitor.instance = new DataLayerMonitor();
+        }
+        return DataLayerMonitor.instance;
+    }
+    setListener(listener) {
+        this.listener = listener;
+    }
+    start() {
+        window.dataLayer.push = (...args) => {
+            const result = this.originalPush.apply(window.dataLayer, args);
+            const pushedEvent = args[0];
+            if (this.listener) {
+                this.listener(pushedEvent);
+            }
+            return result;
+        };
+    }
+    stop() {
+        if (this.originalPush) {
+            window.dataLayer.push = this.originalPush;
+        }
+        this.listener = undefined;
+    }
+}
+
 class IntersectionObserverService {
     constructor(defaultOptions = {}) {
         this.observers = new Map();
@@ -15208,6 +15242,10 @@ class IntersectionObserverService {
 
 class LocalStorage {
     constructor() {
+        if (typeof window.localStorage === 'undefined') {
+            console.warn('Local storage is not supported in this environment');
+            return;
+        }
         this.spots = new Map();
         // Sync local storage with the current state
         this.syncLocalStorage();
@@ -15221,7 +15259,7 @@ class LocalStorage {
         return LocalStorage.instance;
     }
     syncLocalStorage() {
-        const localStorageData = localStorage.getItem(LocalStorage.localStorageKey);
+        const localStorageData = window.localStorage.getItem(LocalStorage.localStorageKey);
         // TODO: Encrypt the data before storing it in the local storage
         if (localStorageData) {
             try {
@@ -15240,30 +15278,41 @@ class LocalStorage {
         }
     }
     setSpot(spotId, data) {
+        var _a;
         data.createdAt = Date.now();
-        this.spots.set(spotId, data);
+        (_a = this.spots) === null || _a === void 0 ? void 0 : _a.set(spotId, data);
         this.updateLocalStorage();
     }
-    getSpot(spotId) {
-        return this.spots.get(spotId);
-    }
     removeSpot(spotId) {
-        this.spots.delete(spotId);
+        var _a;
+        (_a = this.spots) === null || _a === void 0 ? void 0 : _a.delete(spotId);
         this.updateLocalStorage();
     }
+    getSpot(spotId) {
+        var _a;
+        return (_a = this.spots) === null || _a === void 0 ? void 0 : _a.get(spotId);
+    }
+    getSpots() {
+        if (!this.spots)
+            return undefined;
+        return this.mapToObj(this.spots);
+    }
     updateLocalStorage() {
+        if (!this.spots)
+            return undefined;
         const data = this.mapToObj(this.spots);
         localStorage.setItem(LocalStorage.localStorageKey, JSON.stringify(data));
     }
     clearLocalStorage() {
-        localStorage.removeItem(LocalStorage.localStorageKey);
+        window.localStorage.removeItem(LocalStorage.localStorageKey);
     }
     removeExpiredSpots() {
+        var _a;
         const currentTime = Date.now();
-        this.spots.forEach((spot, spotId) => {
-            var _a;
+        (_a = this.spots) === null || _a === void 0 ? void 0 : _a.forEach((spot, spotId) => {
+            var _a, _b;
             if (currentTime - ((_a = spot.createdAt) !== null && _a !== void 0 ? _a : 0) > LocalStorage.spotExpirationTime) {
-                this.spots.delete(spotId);
+                (_b = this.spots) === null || _b === void 0 ? void 0 : _b.delete(spotId);
             }
         });
         this.updateLocalStorage();
@@ -18045,6 +18094,73 @@ class PubSub {
  * unsubscribeLogin();
  */
 
+// @TODO: Add support for user to push events to our own data layer, if they don't use any analytics tool.
+// window.rmnDataLayer = window.rmnDataLayer || [];
+// For the moment, we will only focus on sites that use Google Analytics,
+// but we will add support for other analytics tools in the future.
+var AnalyticsTool;
+(function (AnalyticsTool) {
+    AnalyticsTool["GoogleAnalytics"] = "google-analytics";
+    AnalyticsTool["Other"] = "Other";
+})(AnalyticsTool || (AnalyticsTool = {}));
+class UserMonitor {
+    constructor() {
+        const analyticsTool = this.detectAnalyticsTool();
+        console.info({ analyticsTool });
+        switch (analyticsTool) {
+            case AnalyticsTool.GoogleAnalytics:
+                this.implementedMonitor = DataLayerMonitor.getInstance();
+                break;
+            case AnalyticsTool.Other:
+            default:
+                console.warn('This site uses an unsupported analytics tool.');
+                break;
+        }
+        if (analyticsTool === AnalyticsTool.Other) {
+            return;
+        }
+        this.localStorage = LocalStorage.getInstance();
+    }
+    static getInstance() {
+        if (!UserMonitor.instance) {
+            UserMonitor.instance = new UserMonitor();
+        }
+        return UserMonitor.instance;
+    }
+    start() {
+        if (!this.implementedMonitor)
+            return;
+        this.implementedMonitor.setListener((pushedEvent) => {
+            var _a;
+            console.info({ pushedEvent });
+            console.info({ spots: (_a = this.localStorage) === null || _a === void 0 ? void 0 : _a.getSpots() });
+        });
+        this.implementedMonitor.start();
+    }
+    detectAnalyticsTool() {
+        let analyticsTool = AnalyticsTool.Other;
+        // Check for Google Analytics
+        if (typeof window.ga !== 'undefined') {
+            analyticsTool = AnalyticsTool.GoogleAnalytics;
+        }
+        // Check for Google Analytics 4
+        if (typeof window.gtag !== 'undefined') {
+            analyticsTool = AnalyticsTool.GoogleAnalytics;
+        }
+        // Check for Google Tag Manager
+        if (typeof window.google_tag_manager !== 'undefined') {
+            analyticsTool = AnalyticsTool.GoogleAnalytics;
+        }
+        // @TODO: Add support for other analytics tools
+        // Check for Heap Analytics
+        // Check for Mixpanel
+        // Check for Woopra
+        // Check for Segment
+        // Check for Amplitude
+        return analyticsTool;
+    }
+}
+
 class EventService {
     constructor() {
         this.pubSub = PubSub.getInstance();
@@ -18052,6 +18168,8 @@ class EventService {
         this.activeSpots = new Map();
         this.spotStates = new Map();
         this.intersectionObserver = new IntersectionObserverService();
+        // Start the user monitor, which will track and check user interactions
+        UserMonitor.getInstance().start();
     }
     static getInstance() {
         if (!EventService.instance) {
@@ -18496,6 +18614,10 @@ class LiquidCommerceRmnClient {
      */
     async injectSpotElement(params) {
         var _a;
+        if (typeof window === 'undefined' || typeof document === 'undefined') {
+            console.warn('LiquidCommerce Rmn Sdk: Methods which create elements are only available in browser environments.');
+            return;
+        }
         const config = params.config;
         let inject = params.inject;
         if (!inject.length) {
@@ -18556,7 +18678,7 @@ class LiquidCommerceRmnClient {
             placement.removeAttribute('class');
             Object.assign(placement.style, {
                 width: '100%',
-                height: 'auto',
+                height: '100%',
                 display: 'flex',
                 justifyContent: 'center',
             });

package/dist/index.esm.js

@@ -15164,6 +15164,40 @@ const GFONT_CORMORANT = `
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap">
 `;
 
+class DataLayerMonitor {
+    constructor() {
+        if (!window.dataLayer) {
+            return;
+        }
+        this.originalPush = window.dataLayer.push;
+    }
+    static getInstance() {
+        if (!DataLayerMonitor.instance) {
+            DataLayerMonitor.instance = new DataLayerMonitor();
+        }
+        return DataLayerMonitor.instance;
+    }
+    setListener(listener) {
+        this.listener = listener;
+    }
+    start() {
+        window.dataLayer.push = (...args) => {
+            const result = this.originalPush.apply(window.dataLayer, args);
+            const pushedEvent = args[0];
+            if (this.listener) {
+                this.listener(pushedEvent);
+            }
+            return result;
+        };
+    }
+    stop() {
+        if (this.originalPush) {
+            window.dataLayer.push = this.originalPush;
+        }
+        this.listener = undefined;
+    }
+}
+
 class IntersectionObserverService {
     constructor(defaultOptions = {}) {
         this.observers = new Map();
@@ -15206,6 +15240,10 @@ class IntersectionObserverService {
 
 class LocalStorage {
     constructor() {
+        if (typeof window.localStorage === 'undefined') {
+            console.warn('Local storage is not supported in this environment');
+            return;
+        }
         this.spots = new Map();
         // Sync local storage with the current state
         this.syncLocalStorage();
@@ -15219,7 +15257,7 @@ class LocalStorage {
         return LocalStorage.instance;
     }
     syncLocalStorage() {
-        const localStorageData = localStorage.getItem(LocalStorage.localStorageKey);
+        const localStorageData = window.localStorage.getItem(LocalStorage.localStorageKey);
         // TODO: Encrypt the data before storing it in the local storage
         if (localStorageData) {
             try {
@@ -15238,30 +15276,41 @@ class LocalStorage {
         }
     }
     setSpot(spotId, data) {
+        var _a;
         data.createdAt = Date.now();
-        this.spots.set(spotId, data);
+        (_a = this.spots) === null || _a === void 0 ? void 0 : _a.set(spotId, data);
         this.updateLocalStorage();
     }
-    getSpot(spotId) {
-        return this.spots.get(spotId);
-    }
     removeSpot(spotId) {
-        this.spots.delete(spotId);
+        var _a;
+        (_a = this.spots) === null || _a === void 0 ? void 0 : _a.delete(spotId);
         this.updateLocalStorage();
     }
+    getSpot(spotId) {
+        var _a;
+        return (_a = this.spots) === null || _a === void 0 ? void 0 : _a.get(spotId);
+    }
+    getSpots() {
+        if (!this.spots)
+            return undefined;
+        return this.mapToObj(this.spots);
+    }
     updateLocalStorage() {
+        if (!this.spots)
+            return undefined;
         const data = this.mapToObj(this.spots);
         localStorage.setItem(LocalStorage.localStorageKey, JSON.stringify(data));
     }
     clearLocalStorage() {
-        localStorage.removeItem(LocalStorage.localStorageKey);
+        window.localStorage.removeItem(LocalStorage.localStorageKey);
     }
     removeExpiredSpots() {
+        var _a;
         const currentTime = Date.now();
-        this.spots.forEach((spot, spotId) => {
-            var _a;
+        (_a = this.spots) === null || _a === void 0 ? void 0 : _a.forEach((spot, spotId) => {
+            var _a, _b;
             if (currentTime - ((_a = spot.createdAt) !== null && _a !== void 0 ? _a : 0) > LocalStorage.spotExpirationTime) {
-                this.spots.delete(spotId);
+                (_b = this.spots) === null || _b === void 0 ? void 0 : _b.delete(spotId);
             }
         });
         this.updateLocalStorage();
@@ -18043,6 +18092,73 @@ class PubSub {
  * unsubscribeLogin();
  */
 
+// @TODO: Add support for user to push events to our own data layer, if they don't use any analytics tool.
+// window.rmnDataLayer = window.rmnDataLayer || [];
+// For the moment, we will only focus on sites that use Google Analytics,
+// but we will add support for other analytics tools in the future.
+var AnalyticsTool;
+(function (AnalyticsTool) {
+    AnalyticsTool["GoogleAnalytics"] = "google-analytics";
+    AnalyticsTool["Other"] = "Other";
+})(AnalyticsTool || (AnalyticsTool = {}));
+class UserMonitor {
+    constructor() {
+        const analyticsTool = this.detectAnalyticsTool();
+        console.info({ analyticsTool });
+        switch (analyticsTool) {
+            case AnalyticsTool.GoogleAnalytics:
+                this.implementedMonitor = DataLayerMonitor.getInstance();
+                break;
+            case AnalyticsTool.Other:
+            default:
+                console.warn('This site uses an unsupported analytics tool.');
+                break;
+        }
+        if (analyticsTool === AnalyticsTool.Other) {
+            return;
+        }
+        this.localStorage = LocalStorage.getInstance();
+    }
+    static getInstance() {
+        if (!UserMonitor.instance) {
+            UserMonitor.instance = new UserMonitor();
+        }
+        return UserMonitor.instance;
+    }
+    start() {
+        if (!this.implementedMonitor)
+            return;
+        this.implementedMonitor.setListener((pushedEvent) => {
+            var _a;
+            console.info({ pushedEvent });
+            console.info({ spots: (_a = this.localStorage) === null || _a === void 0 ? void 0 : _a.getSpots() });
+        });
+        this.implementedMonitor.start();
+    }
+    detectAnalyticsTool() {
+        let analyticsTool = AnalyticsTool.Other;
+        // Check for Google Analytics
+        if (typeof window.ga !== 'undefined') {
+            analyticsTool = AnalyticsTool.GoogleAnalytics;
+        }
+        // Check for Google Analytics 4
+        if (typeof window.gtag !== 'undefined') {
+            analyticsTool = AnalyticsTool.GoogleAnalytics;
+        }
+        // Check for Google Tag Manager
+        if (typeof window.google_tag_manager !== 'undefined') {
+            analyticsTool = AnalyticsTool.GoogleAnalytics;
+        }
+        // @TODO: Add support for other analytics tools
+        // Check for Heap Analytics
+        // Check for Mixpanel
+        // Check for Woopra
+        // Check for Segment
+        // Check for Amplitude
+        return analyticsTool;
+    }
+}
+
 class EventService {
     constructor() {
         this.pubSub = PubSub.getInstance();
@@ -18050,6 +18166,8 @@ class EventService {
         this.activeSpots = new Map();
         this.spotStates = new Map();
         this.intersectionObserver = new IntersectionObserverService();
+        // Start the user monitor, which will track and check user interactions
+        UserMonitor.getInstance().start();
     }
     static getInstance() {
         if (!EventService.instance) {
@@ -18494,6 +18612,10 @@ class LiquidCommerceRmnClient {
      */
     async injectSpotElement(params) {
         var _a;
+        if (typeof window === 'undefined' || typeof document === 'undefined') {
+            console.warn('LiquidCommerce Rmn Sdk: Methods which create elements are only available in browser environments.');
+            return;
+        }
         const config = params.config;
         let inject = params.inject;
         if (!inject.length) {
@@ -18554,7 +18676,7 @@ class LiquidCommerceRmnClient {
             placement.removeAttribute('class');
             Object.assign(placement.style, {
                 width: '100%',
-                height: 'auto',
+                height: '100%',
                 display: 'flex',
                 justifyContent: 'center',
             });

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

@@ -56,7 +56,7 @@ export interface IBuyNowEvent {
     placementId: string;
     spotId: string;
 }
-export interface IEventMap {
+export interface IRmnEventMap {
     [RMN_SPOT_EVENT.LIFECYCLE_STATE]: ILifecycleState;
     [RMN_SPOT_EVENT.CLICK]: IClickEvent;
     [RMN_SPOT_EVENT.IMPRESSION]: IImpressionEvent;

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

@@ -1,5 +1,5 @@
 import { RMN_SPOT_EVENT } from 'enums';
-import type { IEventMap, ILifecycleState, IRegisterSpotParams } from './event.interface';
+import type { ILifecycleState, IRegisterSpotParams, IRmnEventMap } from './event.interface';
 export declare class EventService {
     private static instance;
     private pubSub;
@@ -9,8 +9,8 @@ export declare class EventService {
     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;
+    subscribe(eventType: RMN_SPOT_EVENT, callback: (data: IRmnEventMap[RMN_SPOT_EVENT]) => void): () => void;
+    publish(eventType: RMN_SPOT_EVENT, data: IRmnEventMap[RMN_SPOT_EVENT]): void;
     registerSpot(params: IRegisterSpotParams): void;
     unregisterSpot(placementId: string): void;
     /**

package/dist/types/modules/event/helpers/datalayer.monitor.d.ts

@@ -0,0 +1,10 @@
+export declare class DataLayerMonitor {
+    private static instance;
+    private readonly originalPush;
+    private listener?;
+    private constructor();
+    static getInstance(): DataLayerMonitor;
+    setListener(listener: (data: any) => void): void;
+    start(): void;
+    stop(): void;
+}

package/dist/types/modules/event/helpers/index.d.ts

@@ -1,3 +1,4 @@
+export * from './datalayer.monitor';
 export * from './intersection.service';
 export * from './localstorage.service';
 export * from './resize.service';

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

@@ -1,6 +1,6 @@
 export declare class IntersectionObserverService {
     private observers;
-    private defaultOptions;
+    private readonly defaultOptions;
     constructor(defaultOptions?: IntersectionObserverInit);
     observe(element: HTMLElement, callback: (entry: IntersectionObserverEntry) => void, options?: IntersectionObserverInit): void;
     unobserve(element: HTMLElement): void;

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

@@ -1,5 +1,9 @@
 import type { RMN_SPOT_TYPE } from 'enums';
 import type { ISpotEvent } from 'modules/selection';
+export type LocalStorageSpotsMapType = Map<string, // spotId
+ILocalStorageSpot>;
+export type LocalStorageSpotsObjType = Record<string, // spotId
+ILocalStorageSpot>;
 export interface ILocalStorageSpot {
     spotId: string;
     spotType: RMN_SPOT_TYPE;
@@ -8,7 +12,7 @@ export interface ILocalStorageSpot {
     createdAt?: number;
 }
 export declare class LocalStorage {
-    private spots;
+    private spots?;
     private static instance;
     private static readonly localStorageKey;
     private static readonly spotExpirationTime;
@@ -16,10 +20,11 @@ export declare class LocalStorage {
     static getInstance(): LocalStorage;
     private syncLocalStorage;
     setSpot(spotId: string, data: ILocalStorageSpot): void;
-    getSpot(spotId: string): ILocalStorageSpot | undefined;
     removeSpot(spotId: string): void;
+    getSpot(spotId: string): ILocalStorageSpot | undefined;
+    getSpots(): LocalStorageSpotsObjType | undefined;
     private updateLocalStorage;
-    clearLocalStorage(): void;
+    private clearLocalStorage;
     private removeExpiredSpots;
     private mapToObj;
     private objToMap;

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

@@ -18,7 +18,7 @@ export interface ISizeChangedEvent extends CustomEvent {
 }
 export declare class ResizeObserverService {
     private element;
-    private container;
+    private readonly container;
     private resizeObserver;
     private maxSize;
     private minSize;

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

@@ -2,3 +2,4 @@ export * from './event.constant';
 export * from './event.interface';
 export * from './event.service';
 export * from './helpers';
+export * from './user.monitor';

package/dist/types/modules/event/user.monitor.d.ts

@@ -0,0 +1,13 @@
+export declare enum AnalyticsTool {
+    GoogleAnalytics = "google-analytics",
+    Other = "Other"
+}
+export declare class UserMonitor {
+    private static instance;
+    private readonly implementedMonitor?;
+    private readonly localStorage?;
+    private constructor();
+    static getInstance(): UserMonitor;
+    start(): void;
+    private detectAnalyticsTool;
+}

package/dist/types/types.d.ts

@@ -1,10 +1,11 @@
-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 { IAddToCartEvent, IAddToWishlistEvent, IBuyNowEvent, IClickEvent, IImpressionEvent, ILifecycleState, ILSDisplayConfig, ILSDom, ILSIdentifier, ILSState, IPurchaseEvent, IRmnEventMap, } from 'modules/event';
 export type { ISpots, RmnFilterType, RmnSpotType } from 'modules/selection';
 export { ISpot, ISpotEvent, ISpotSelectionParams } from 'modules/selection';
 import type { RMN_ENV, RMN_SPOT_EVENT } from 'enums';
 import type { IInjectSpotElementParams } from 'modules/element';
+import type { IRmnEventMap } from 'modules/event';
 import type { ISpots, ISpotSelectionParams } from 'modules/selection';
 export interface IRmnClient {
     spotSelection(params: ISpotSelectionParams): Promise<ISpots | {
@@ -13,8 +14,8 @@ export interface IRmnClient {
     injectSpotElement(params: IInjectSpotElementParams): Promise<void>;
 }
 export interface IRmnEventManager {
-    subscribe: (eventType: RMN_SPOT_EVENT, callback: (data: IEventMap[RMN_SPOT_EVENT]) => void) => () => void;
-    publish: (eventType: RMN_SPOT_EVENT, data: IEventMap[RMN_SPOT_EVENT]) => void;
+    subscribe: (eventType: RMN_SPOT_EVENT, callback: (data: IRmnEventMap[RMN_SPOT_EVENT]) => void) => () => void;
+    publish: (eventType: RMN_SPOT_EVENT, data: IRmnEventMap[RMN_SPOT_EVENT]) => void;
     destroySpot: (placementId: string) => void;
 }
 export interface IRmnConfig {

package/package.json

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