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

package/dist/index.esm.js

@@ -60,6 +60,7 @@ var RMN_SPOT_EVENT;
     RMN_SPOT_EVENT["CLICK"] = "CLICK";
     RMN_SPOT_EVENT["PURCHASE"] = "PURCHASE";
     RMN_SPOT_EVENT["ADD_TO_CART"] = "ADD_TO_CART";
+    RMN_SPOT_EVENT["REMOVE_FROM_CART"] = "REMOVE_FROM_CART";
     RMN_SPOT_EVENT["ADD_TO_WISHLIST"] = "ADD_TO_WISHLIST";
     RMN_SPOT_EVENT["BUY_NOW"] = "BUY_NOW";
 })(RMN_SPOT_EVENT || (RMN_SPOT_EVENT = {}));
@@ -15164,6 +15165,132 @@ 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">
 `;
 
+function getEventTypeFromRawEvent(event) {
+    if (!event) {
+        return null;
+    }
+    if (event.includes('cart')) {
+        if (event.includes('add')) {
+            return RMN_SPOT_EVENT.ADD_TO_CART;
+        }
+        if (event.includes('remove')) {
+            return RMN_SPOT_EVENT.REMOVE_FROM_CART;
+        }
+    }
+    if (event.includes('purchase')) {
+        return RMN_SPOT_EVENT.PURCHASE;
+    }
+    // if(event.includes('refund')) {
+    //   return RMN_SPOT_EVENT.REFUND;
+    // }
+    if (event.includes('wishlist') && event.includes('add')) {
+        return RMN_SPOT_EVENT.ADD_TO_WISHLIST;
+    }
+    return null;
+}
+/**
+ * Recursively extracts ID values from a nested data structure.
+ * Searches for specified property names and collects their primitive values (strings/numbers).
+ *
+ * @param data - The data structure to search through (can be nested objects/arrays)
+ * @param propertyNames - Array of property names to look for (defaults to ['id', 'upc', 'groupingId', 'sku', 'productId'])
+ * @returns Array of extracted ID values (strings/numbers only)
+ *
+ * @example
+ * const data = {
+ *   id: [1, 2, 3],
+ *   nested: { id: 'abc' },
+ *   items: [{ id: 456 }]
+ * };
+ * extractDeepIds(data); // Returns [1, 2, 3, 'abc', 456]
+ */
+function extractDeepIds(data, propertyNames = ['id', 'upc', 'groupingId', 'sku', 'productId']) {
+    const ids = [];
+    // Set for faster property name lookups
+    const propertySet = new Set(propertyNames);
+    /**
+     * Processes a value and extracts IDs if it matches criteria
+     * @param value - The value to process
+     * @param currentKey - The property name of the current value
+     */
+    const processValue = (value, currentKey) => {
+        // Early exit for null/undefined values
+        if (value == null)
+            return;
+        // If current key matches our target properties
+        if (currentKey && propertySet.has(currentKey)) {
+            if (Array.isArray(value)) {
+                // Filter and push valid array values in one pass
+                ids.push(...value.filter((item) => typeof item === 'string' || typeof item === 'number'));
+            }
+            else if (typeof value === 'string' || typeof value === 'number') {
+                ids.push(value);
+            }
+            return; // Stop processing this branch after handling the ID
+        }
+        // Recursively process nested structures
+        if (Array.isArray(value)) {
+            value.forEach((item) => processValue(item));
+        }
+        else if (typeof value === 'object') {
+            // Process all enumerable properties
+            for (const [key, val] of Object.entries(value)) {
+                processValue(val, key);
+            }
+        }
+    };
+    processValue(data);
+    return ids; // No need to filter nulls as we handle that during collection
+}
+
+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) {
+                const normalizedData = this.cleanEventData(pushedEvent);
+                if (normalizedData) {
+                    this.listener(normalizedData);
+                }
+            }
+            return result;
+        };
+    }
+    cleanEventData(data) {
+        const eventName = getEventTypeFromRawEvent(data.event);
+        if (!eventName) {
+            return null;
+        }
+        const productIds = extractDeepIds(data.value);
+        return {
+            event: eventName,
+            productIds,
+        };
+    }
+    stop() {
+        if (this.originalPush) {
+            window.dataLayer.push = this.originalPush;
+        }
+        this.listener = undefined;
+    }
+}
+
 class IntersectionObserverService {
     constructor(defaultOptions = {}) {
         this.observers = new Map();
@@ -15204,6 +15331,14 @@ class IntersectionObserverService {
     }
 }
 
+var ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX;
+(function (ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX) {
+    ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX[ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX["SPOT_ID"] = 0] = "SPOT_ID";
+    ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX[ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX["SPOT_TYPE"] = 1] = "SPOT_TYPE";
+    ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX[ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX["EVENTS"] = 2] = "EVENTS";
+    ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX[ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX["PRODUCT_IDS"] = 3] = "PRODUCT_IDS";
+    ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX[ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX["CREATED_AT"] = 4] = "CREATED_AT";
+})(ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX || (ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX = {}));
 class LocalStorage {
     constructor() {
         if (typeof window.localStorage === 'undefined') {
@@ -15229,7 +15364,11 @@ class LocalStorage {
             try {
                 const parsedData = JSON.parse(localStorageData);
                 if (parsedData && typeof parsedData === 'object') {
-                    this.spots = this.objToMap(parsedData);
+                    const data = {};
+                    for (const [key, value] of Object.entries(parsedData)) {
+                        data[key] = this.arrayToObject(value);
+                    }
+                    this.spots = this.objectToMap(data);
                 }
                 else {
                     this.clearLocalStorage();
@@ -15242,26 +15381,34 @@ class LocalStorage {
         }
     }
     setSpot(spotId, data) {
-        if (!this.spots)
-            return;
+        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) {
-        var _a;
-        return (_a = this.spots) === null || _a === void 0 ? void 0 : _a.get(spotId);
-    }
     removeSpot(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.mapToObject(this.spots);
+    }
     updateLocalStorage() {
         if (!this.spots)
-            return;
-        const data = this.mapToObj(this.spots);
-        localStorage.setItem(LocalStorage.localStorageKey, JSON.stringify(data));
+            return undefined;
+        const data = this.mapToObject(this.spots);
+        const dataArray = {};
+        for (const [key, value] of Object.entries(data)) {
+            dataArray[key] = this.objectToArray(value);
+        }
+        window.localStorage.setItem(LocalStorage.localStorageKey, JSON.stringify(dataArray));
     }
     clearLocalStorage() {
         window.localStorage.removeItem(LocalStorage.localStorageKey);
@@ -15277,12 +15424,24 @@ class LocalStorage {
         });
         this.updateLocalStorage();
     }
-    mapToObj(map) {
+    mapToObject(map) {
         return Object.fromEntries(map);
     }
-    objToMap(obj) {
+    objectToMap(obj) {
         return new Map(Object.entries(obj));
     }
+    objectToArray(obj) {
+        return [obj.spotId, obj.spotType, obj.events, obj.productIds, obj.createdAt];
+    }
+    arrayToObject(arr) {
+        return {
+            spotId: arr[ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX.SPOT_ID],
+            spotType: arr[ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX.SPOT_TYPE],
+            events: arr[ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX.EVENTS],
+            productIds: arr[ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX.PRODUCT_IDS],
+            createdAt: arr[ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX.CREATED_AT],
+        };
+    }
 }
 LocalStorage.localStorageKey = 'lc_rmn';
 LocalStorage.spotExpirationTime = 1000 * 60 * 60 * 24 * 7; // 7 days
@@ -17976,7 +18135,7 @@ const SPOT_TEMPLATE_HTML_ELEMENT = (spot, config) => {
 /**
  * PubSub class
  * Manages event subscriptions and publications
- * @template IEventMap A record type defining the structure of events and their data
+ * @template IRmnEventMap A record type defining the structure of events and their data
  */
 class PubSub {
     constructor() {
@@ -18030,12 +18189,12 @@ class PubSub {
 /**
  * Usage Example:
  *
- * interface IEventMap {
+ * interface IRmnEventMap {
  *   userLogin: { username: string; timestamp: number };
  *   pageView: { url: string; timestamp: number };
  * }
  *
- * const pubSub = new PubSub<IEventMap>();
+ * const pubSub = new PubSub<IRmnEventMap>();
  *
  * // Subscribe to events
  * const unsubscribeLogin = pubSub.subscribe('userLogin', (data) => {
@@ -18054,6 +18213,78 @@ 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();
+        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((eventData) => {
+            var _a;
+            this.matchAndFireEvent(eventData, (_a = this.localStorage) === null || _a === void 0 ? void 0 : _a.getSpots());
+        });
+        this.implementedMonitor.start();
+    }
+    matchAndFireEvent(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _eventData, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _spots) {
+        // console.info({ eventData, spots });
+    }
+    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();
@@ -18061,6 +18292,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) {
@@ -18505,6 +18738,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) {

package/dist/types/enums.d.ts

@@ -55,6 +55,7 @@ export declare enum RMN_SPOT_EVENT {
     CLICK = "CLICK",
     PURCHASE = "PURCHASE",
     ADD_TO_CART = "ADD_TO_CART",
+    REMOVE_FROM_CART = "REMOVE_FROM_CART",
     ADD_TO_WISHLIST = "ADD_TO_WISHLIST",
     BUY_NOW = "BUY_NOW"
 }

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

@@ -44,6 +44,10 @@ export interface IAddToCartEvent {
     placementId: string;
     spotId: string;
 }
+export interface IRemoveFromCartEvent {
+    placementId: string;
+    spotId: string;
+}
 export interface IAddToWishlistEvent {
     placementId: string;
     spotId: string;
@@ -61,6 +65,7 @@ export interface IRmnEventMap {
     [RMN_SPOT_EVENT.CLICK]: IClickEvent;
     [RMN_SPOT_EVENT.IMPRESSION]: IImpressionEvent;
     [RMN_SPOT_EVENT.ADD_TO_CART]: IAddToCartEvent;
+    [RMN_SPOT_EVENT.REMOVE_FROM_CART]: IRemoveFromCartEvent;
     [RMN_SPOT_EVENT.ADD_TO_WISHLIST]: IAddToWishlistEvent;
     [RMN_SPOT_EVENT.PURCHASE]: IPurchaseEvent;
     [RMN_SPOT_EVENT.BUY_NOW]: IBuyNowEvent;

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

@@ -0,0 +1,21 @@
+import type { RMN_SPOT_EVENT } from 'enums';
+export interface IDataLayerEvent {
+    event?: string;
+    value?: any[];
+    [key: string]: any;
+}
+export interface INormalizedEventData {
+    event: RMN_SPOT_EVENT;
+    productIds: Array<string | number>;
+}
+export declare class DataLayerMonitor {
+    private static instance;
+    private readonly originalPush;
+    private listener?;
+    private constructor();
+    static getInstance(): DataLayerMonitor;
+    setListener(listener: (data: INormalizedEventData) => void): void;
+    start(): void;
+    private cleanEventData;
+    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/localstorage.service.d.ts

@@ -7,6 +7,27 @@ export interface ILocalStorageSpot {
     productIds: Array<string | number>;
     createdAt?: number;
 }
+export type LocalStorageSpotsMapType = Map<string, // spotId
+ILocalStorageSpot>;
+export type LocalStorageSpotsObjectType = Record<string, // spotId
+ILocalStorageSpot>;
+export type LocalStorageSpotArray = [
+    string,
+    RMN_SPOT_TYPE,
+    ISpotEvent[],
+    Array<string | number>,
+    // PRODUCT_IDS = 3
+    number | undefined
+];
+export declare enum ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX {
+    SPOT_ID = 0,
+    SPOT_TYPE = 1,
+    EVENTS = 2,
+    PRODUCT_IDS = 3,
+    CREATED_AT = 4
+}
+export type LocalStorageSpotsArrayType = Record<string, // spotId
+LocalStorageSpotArray>;
 export declare class LocalStorage {
     private spots?;
     private static instance;
@@ -16,11 +37,14 @@ 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(): LocalStorageSpotsObjectType | undefined;
     private updateLocalStorage;
-    clearLocalStorage(): void;
+    private clearLocalStorage;
     private removeExpiredSpots;
-    private mapToObj;
-    private objToMap;
+    private mapToObject;
+    private objectToMap;
+    private objectToArray;
+    private arrayToObject;
 }

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

@@ -0,0 +1,24 @@
+import { RMN_SPOT_EVENT } from 'enums';
+export interface IExtractIdsProps {
+    id?: string | number;
+    upc?: string | number;
+    [key: string]: string | number | undefined;
+}
+export declare function getEventTypeFromRawEvent(event?: string): RMN_SPOT_EVENT | null;
+/**
+ * Recursively extracts ID values from a nested data structure.
+ * Searches for specified property names and collects their primitive values (strings/numbers).
+ *
+ * @param data - The data structure to search through (can be nested objects/arrays)
+ * @param propertyNames - Array of property names to look for (defaults to ['id', 'upc', 'groupingId', 'sku', 'productId'])
+ * @returns Array of extracted ID values (strings/numbers only)
+ *
+ * @example
+ * const data = {
+ *   id: [1, 2, 3],
+ *   nested: { id: 'abc' },
+ *   items: [{ id: 456 }]
+ * };
+ * extractDeepIds(data); // Returns [1, 2, 3, 'abc', 456]
+ */
+export declare function extractDeepIds(data: any, propertyNames?: readonly string[]): Array<string | number>;

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/pubsub.d.ts

@@ -10,11 +10,11 @@ export type PubSubUnsubscribe = () => void;
 /**
  * PubSub class
  * Manages event subscriptions and publications
- * @template IEventMap A record type defining the structure of events and their data
+ * @template IRmnEventMap A record type defining the structure of events and their data
  */
-export declare class PubSub<IEventMap> {
+export declare class PubSub<IRmnEventMap> {
     private static instance;
-    static getInstance<IEventMap>(): PubSub<IEventMap>;
+    static getInstance<IRmnEventMap>(): PubSub<IRmnEventMap>;
     /**
      * Object to store subscribers for each event type
      */
@@ -30,7 +30,7 @@ export declare class PubSub<IEventMap> {
      *   console.log(`User ${data.username} logged in`);
      * });
      */
-    subscribe<K extends keyof IEventMap>(eventType: K, callback: PubSubCallback<IEventMap[K]>): PubSubUnsubscribe;
+    subscribe<K extends keyof IRmnEventMap>(eventType: K, callback: PubSubCallback<IRmnEventMap[K]>): PubSubUnsubscribe;
     /**
      * Publish an event
      * @param eventType - The type of event to publish
@@ -39,17 +39,17 @@ export declare class PubSub<IEventMap> {
      * @Example:
      * pubSub.publish('userLogin', { username: 'john_doe', timestamp: Date.now() });
      */
-    publish<K extends keyof IEventMap>(eventType: K, data: IEventMap[K]): void;
+    publish<K extends keyof IRmnEventMap>(eventType: K, data: IRmnEventMap[K]): void;
 }
 /**
  * Usage Example:
  *
- * interface IEventMap {
+ * interface IRmnEventMap {
  *   userLogin: { username: string; timestamp: number };
  *   pageView: { url: string; timestamp: number };
  * }
  *
- * const pubSub = new PubSub<IEventMap>();
+ * const pubSub = new PubSub<IRmnEventMap>();
  *
  * // Subscribe to events
  * const unsubscribeLogin = pubSub.subscribe('userLogin', (data) => {

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

@@ -0,0 +1,14 @@
+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 matchAndFireEvent;
+    private detectAnalyticsTool;
+}

package/dist/types/types.d.ts

@@ -1,6 +1,6 @@
 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 { IAddToCartEvent, IAddToWishlistEvent, IBuyNowEvent, IClickEvent, IImpressionEvent, ILifecycleState, ILSDisplayConfig, ILSDom, ILSIdentifier, ILSState, IPurchaseEvent, IRemoveFromCartEvent, 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';

package/package.json

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