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

package/dist/index.cjs

@@ -62,6 +62,7 @@ exports.RMN_SPOT_EVENT = void 0;
     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";
 })(exports.RMN_SPOT_EVENT || (exports.RMN_SPOT_EVENT = {}));
@@ -15166,6 +15167,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 exports.RMN_SPOT_EVENT.ADD_TO_CART;
+        }
+        if (event.includes('remove')) {
+            return exports.RMN_SPOT_EVENT.REMOVE_FROM_CART;
+        }
+    }
+    if (event.includes('purchase')) {
+        return exports.RMN_SPOT_EVENT.PURCHASE;
+    }
+    // if(event.includes('refund')) {
+    //   return RMN_SPOT_EVENT.REFUND;
+    // }
+    if (event.includes('wishlist') && event.includes('add')) {
+        return exports.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();
@@ -15206,6 +15333,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') {
@@ -15231,7 +15366,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();
@@ -15244,26 +15383,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);
@@ -15279,12 +15426,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
@@ -17978,7 +18137,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() {
@@ -18032,12 +18191,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) => {
@@ -18056,6 +18215,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();
@@ -18063,6 +18294,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) {
@@ -18507,6 +18740,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) {