@magicpixel/rn-mp-client-sdk 0.12.0 → 1.12.1

package/src/eedl/eedl.ts

@@ -1,22 +1,39 @@
 import { Utils } from '../common/utils';
 import type { EventProcessorFn, MapLike, TypedAny } from '../common/app-types';
 import { Logger } from '../common/logger';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { customAlphabet } from 'nanoid/non-secure';
+
+const eventsToPersist: Record<string, string> = {
+  user_info: '_mpPendingUserInfo',
+  mp_purchase: '_mpPendingPurchase',
+};
+
+// UUID v4 generator for React Native
+const getUUIDV4 = customAlphabet(
+  '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
+  36
+);
 
 export class MpDataLayerHelper {
   isReady = false;
   _masterDataLayer: MapLike = {};
+  _persistedVars: MapLike = {};
   eventProcessors: Record<string, any> = {};
   stateTracker: Array<any> = [];
   dlInitEvent: string;
   receivedInitialEvent = false;
   eventQueue: Array<any> = [];
+  private isEntryPoint = 0;
 
   constructor(
     private readonly dlEventName: string,
     private readonly dlInitMode: string,
-    dlInitEvent: string
+    dlInitEvent: string,
+    private readonly storageKeyName: string = '_mpdls'
   ) {
     this.dlInitEvent = dlInitEvent;
+    this.resetEntryPointInfo();
 
     if (this.dlInitMode !== 'manual') {
       this.isReady = true;
@@ -27,7 +44,9 @@ export class MpDataLayerHelper {
     }
   }
 
-  init(globalEventListeners: Record<string, EventProcessorFn>): void {
+  async init(
+    globalEventListeners: Record<string, EventProcessorFn>
+  ): Promise<void> {
     // register any global event listeners passed through to the init command
     const globalEventListenerKeys = Object.keys(globalEventListeners || {});
     if (globalEventListenerKeys?.length > 0) {
@@ -37,13 +56,34 @@ export class MpDataLayerHelper {
         }
       }
     }
+
+    // Load persisted events from AsyncStorage
+    for (const key of Object.keys(eventsToPersist)) {
+      try {
+        const persistedEvent = await AsyncStorage.getItem(eventsToPersist[key]);
+        if (persistedEvent) {
+          const event: { eventName: string; eventPayload: any } =
+            JSON.parse(persistedEvent);
+          this.pushEvent(event.eventName, event.eventPayload);
+        }
+      } catch (err) {
+        Logger.logError('Error parsing persisted event', err);
+      }
+    }
   }
 
   pushEvent(eventName: string, payload: MapLike): void {
     Logger.logDbg('EV Push Event:: ', JSON.stringify(payload));
-    if (eventName === 'set') {
-      // process regardless
-      this.processQItems(eventName, payload);
+    if (
+      eventName === 'set' ||
+      eventName === 'persist' ||
+      eventName === 'clear' ||
+      eventName === 'user_info'
+    ) {
+      // process regardless - fire and forget for async operations
+      this.processQItems(eventName, payload).catch((err) =>
+        Logger.logError('Error processing event', err)
+      );
     } else {
       if (!this.receivedInitialEvent) {
         // set only if this is not true already
@@ -55,17 +95,28 @@ export class MpDataLayerHelper {
       } else if (!this.isReady) {
         this.eventQueue.push([eventName, payload]);
       } else {
-        this.processQItems(eventName, payload);
+        // fire and forget for async operations
+        this.processQItems(eventName, payload).catch((err) =>
+          Logger.logError('Error processing event', err)
+        );
       }
     }
   }
 
-  processQItems(eventName: string, payload: MapLike): void {
+  async processQItems(eventName: string, payload: MapLike): Promise<void> {
     try {
       if (eventName === 'set') {
         this.setDl(payload);
+      } else if (eventName === 'persist') {
+        await this.storeData(payload?.key, payload?.value);
+      } else if (eventName === 'clear') {
+        if (Array.isArray(payload) && payload.length > 0) {
+          await this.deleteData(payload as string[]);
+        }
+      } else if (eventName === 'user_info') {
+        this.setUserData(payload);
       } else {
-        this.eventProcessor(eventName, payload);
+        await this.eventProcessor(eventName, payload);
       }
       /* Make sure nothing is written below this line. If you do so, remember to return on error conditions above */
     } catch (err) {
@@ -89,19 +140,166 @@ export class MpDataLayerHelper {
     return this._masterDataLayer;
   }
 
+  private setUserData(payload: {
+    pid?: string;
+    email?: string;
+    phone?: string;
+    country?: string;
+    city?: string;
+    state?: string;
+    fName?: string;
+    lName?: string;
+    zip?: string;
+  }): void {
+    if (
+      payload?.zip &&
+      payload?.zip?.length > 0 &&
+      payload?.zip?.indexOf('-') > -1
+    ) {
+      payload.zip = payload.zip.split('-')[0].trim();
+    }
+
+    const uif: any = {};
+    this._persistedVars = this._persistedVars || {};
+    this._persistedVars.uif = this._persistedVars.uif || {};
+
+    if (payload.pid) {
+      this._persistedVars.uif.user_pid = payload.pid;
+      uif.pid = payload.pid;
+    }
+
+    if (payload.email) {
+      this._persistedVars.uif.user_email = payload.email;
+      uif.e = payload.email;
+    }
+
+    if (payload.phone) {
+      this._persistedVars.uif.user_phone = payload.phone;
+      uif.p = payload.phone;
+    }
+
+    if (payload.country) {
+      this._persistedVars.uif.user_country = payload.country;
+      uif.cy = payload.country;
+    }
+
+    if (payload.city) {
+      this._persistedVars.uif.user_city = payload.city;
+      uif.ct = payload.city;
+    }
+
+    if (payload.state) {
+      this._persistedVars.uif.user_state = payload.state;
+      uif.st = payload.state;
+    }
+
+    if (payload.fName) {
+      this._persistedVars.uif.fn = payload.fName;
+      uif.fn = payload.fName;
+    }
+
+    if (payload.lName) {
+      this._persistedVars.uif.ln = payload.lName;
+      uif.ln = payload.lName;
+    }
+
+    if (payload.zip) {
+      this._persistedVars.uif.zip_code = payload.zip;
+      uif.z = payload.zip;
+    }
+
+    if (Object.keys(uif).length > 0) {
+      this.storeData('uif', uif);
+    }
+  }
+
+  private async deleteData(chips: string[]): Promise<void> {
+    const fullData = await this.getFullData();
+    for (const chip of chips) {
+      if (typeof chip === 'string') {
+        delete fullData[chip];
+      }
+    }
+    await this.storeFullData(fullData);
+  }
+
+  private async storeData(chip: string, value: any): Promise<void> {
+    if (typeof chip !== 'undefined' && typeof value !== 'undefined') {
+      const fullData = await this.getFullData();
+      fullData[chip] = value;
+      await this.storeFullData(fullData);
+      this._persistedVars[chip] = value;
+    } else {
+      Logger.logError('Both key and value are required for persisting data');
+    }
+  }
+
+  private async reloadPersistedVars(): Promise<void> {
+    this._persistedVars = await this.getFullData();
+  }
+
+  private async getFullData(): Promise<MapLike> {
+    try {
+      const storedData = await AsyncStorage.getItem(this.storageKeyName);
+      if (storedData) {
+        return JSON.parse(storedData);
+      }
+    } catch (err) {
+      Logger.logError('Error reloading persisted variables', err);
+    }
+    return {};
+  }
+
+  private async storeFullData(fullData: MapLike): Promise<void> {
+    this._persistedVars = fullData;
+    try {
+      await AsyncStorage.setItem(this.storageKeyName, JSON.stringify(fullData));
+    } catch (err) {
+      Logger.logError('Error storing data', err);
+    }
+  }
+
+  // private async getStoredData<T = any>(chip: string, defValue: T): Promise<T> {
+  //   let value: T;
+  //   try {
+  //     const storedData = await AsyncStorage.getItem(this.storageKeyName);
+  //     if (storedData) {
+  //       const parsedData = JSON.parse(storedData);
+  //       value = parsedData[chip];
+  //     }
+  //   } catch (err) {
+  //     Logger.logError('Error parsing stored data', err);
+  //   }
+  //   return value ?? defValue;
+  // }
+
   /**
    * Private event processor. Idea is that whenever an event is detected, we create a copy of the master data layer,
    * add the event variables, and trigger the event requested when initializing the data layer helper
    * @param eventName
    * @param model
    */
-  eventProcessor(eventName: string, model: TypedAny | undefined): void {
+  async eventProcessor(
+    eventName: string,
+    model: TypedAny | undefined
+  ): Promise<void> {
+    model = model ?? {};
+
     /**
      * The following If block clears the data layer when the initial event is received.
      * This is done to prevent value carry overs from one page to another in single page apps
      */
     if (eventName === 'reset' || eventName === this.dlInitEvent) {
       this.reset();
+
+      // add an init event based uuid to the core data model
+      model['page_load_uid'] = getUUIDV4();
+      model['is_entry_point'] = this.getIsEntryPointValue();
+      if (model['is_entry_point'] === 1) {
+        // Note: In React Native, we don't have document.referrer, so we'll use a placeholder
+        model['entry_point_referrer'] = '';
+      }
+
       this.setDl(model);
       model = undefined;
     }
@@ -114,6 +312,11 @@ export class MpDataLayerHelper {
       model = {};
     }
 
+    await this.reloadPersistedVars();
+
+    // get persisted values and add them into the event model
+    model['p'] = this._persistedVars ?? {};
+
     // generate a unique id for each event automatically
     model['ev._id'] = Utils.getUniqueID();
 
@@ -122,17 +325,21 @@ export class MpDataLayerHelper {
 
     model['ev._eventName'] = eventName;
 
+    model['ev._persistKey'] = eventsToPersist[eventName] || null;
+
     model = Utils.flattenObject(model);
 
     // create a clone of master data layer and merge event model to it
     const _clone = Object.assign({}, this._masterDataLayer, model);
     const eventTs = Date.now();
 
-    const eventPayload = {
-      eventName: eventName,
-      eventTs: eventTs,
-      model: _clone,
-    };
+    const eventPayload = JSON.parse(
+      JSON.stringify({
+        eventName: eventName,
+        eventTs: eventTs,
+        model: _clone,
+      })
+    );
 
     // add to state tracker
     this.stateTracker.push(eventPayload);
@@ -202,7 +409,9 @@ export class MpDataLayerHelper {
       // drain queue only if the initial configured event has been received,
       // otherwise mark isReady but dont drain the queue. queue will be drained first when the init
       // event is received
-      this.drainQueue();
+      this.drainQueue().catch((err) =>
+        Logger.logError('Error draining queue', err)
+      );
     } else {
       Logger.logDbg(
         `Initial event (${this.dlInitEvent}) NOT received. Events will be queued`
@@ -210,7 +419,7 @@ export class MpDataLayerHelper {
     }
   }
 
-  drainQueue(): void {
+  async drainQueue(): Promise<void> {
     Logger.logDbg('drainQueue...');
     // create a copy of the array
     const _temp = [...this.eventQueue];
@@ -222,7 +431,7 @@ export class MpDataLayerHelper {
     );
     if (initialEventObjectIndex > -1) {
       // splice and execute it
-      this.processQItems(
+      await this.processQItems(
         _temp[initialEventObjectIndex][0],
         _temp[initialEventObjectIndex][1]
       );
@@ -230,7 +439,21 @@ export class MpDataLayerHelper {
     }
     // continue with other items
     for (const item of _temp) {
-      this.processQItems(item[0], item[1]);
+      await this.processQItems(item[0], item[1]);
     }
   }
+
+  getIsEntryPointValue(): number {
+    // In React Native, we'll use a simple approach for entry point tracking
+    // This could be enhanced with proper session storage implementation
+    const currentValue = this.isEntryPoint;
+    this.isEntryPoint = 0; // Reset after first use
+    return currentValue;
+  }
+
+  resetEntryPointInfo(): void {
+    // In React Native, we'll default to entry point = 1 for the first session
+    // This could be enhanced with proper referrer tracking if needed
+    this.isEntryPoint = 1;
+  }
 }

package/src/index.tsx

@@ -16,6 +16,7 @@ import { QcProcessor } from './processors/qc.processor';
 import { NetworkService } from './common/network-service';
 import { EventBus } from './common/event-bus';
 import { VisitIdProcessor } from './processors/visit-id.processor';
+import { GeoLocationProcessor } from './processors/geo-location.processor';
 
 const DL_INIT_EVENT = 'page_load';
 
@@ -23,7 +24,8 @@ class MagicPixelImpl {
   private static dl: MpDataLayerHelper = new MpDataLayerHelper(
     'mpDlEvent',
     'manual',
-    DL_INIT_EVENT
+    DL_INIT_EVENT,
+    '_mpRnDataLayer'
   );
   private static customerInfo: AppCustomerInfo;
   private static customerIdentifiers: MapLike = {};
@@ -60,6 +62,16 @@ class MagicPixelImpl {
       Logger.logDbg('No facebook client id found. not setting');
     }
 
+    // Initialize EEDL with any global event listeners
+    await this.dl.init({});
+
+    // Make geo location API call after initialization
+    try {
+      await GeoLocationProcessor.makeGeoLocationApiCall();
+    } catch (err) {
+      Logger.logError('Error making geo location API call:', err);
+    }
+
     MagicPixelEventBus.on('mpDlEvent', async (evtName, payload) => {
       Logger.logDbg('mpDlEvent:: ', evtName, JSON.stringify(payload));
       const eventName: string = payload.eventName;
@@ -281,7 +293,7 @@ class MagicPixelImpl {
         DataStore.getSSTDownStream(),
         evtName,
         evtId
-      ).catch((err: any) => {
+      ).catch((err) => {
         Reporter.reportError('l::postSST', err);
       });
     }
@@ -326,7 +338,10 @@ class MagicPixelImpl {
   static recordPageLoad(pageLoadInfo: AppPageLoad): void {
     pageLoadInfo.is_entry = this.firstAppLaunch ? 1 : 0;
 
-    if (this.deepLinkUrl) {
+    // Use stored deepLinkUrl if it exists AND either:
+    // - deep_link_url wasn't provided in pageLoadInfo, OR
+    // - deep_link_url is empty/falsy (defensive programming for developer mistakes)
+    if (this.deepLinkUrl && !pageLoadInfo.deep_link_url) {
       pageLoadInfo.deep_link_url = this.deepLinkUrl;
     }
 
@@ -362,6 +377,86 @@ class MagicPixelImpl {
     this.deepLinkUrl = undefined;
     this.firstAppLaunch = false;
   }
+
+  /**
+   * Set user information for tracking
+   * @param userInfo User information object
+   */
+  static setUserInfo(userInfo: {
+    pid?: string;
+    email?: string;
+    phone?: string;
+    country?: string;
+    city?: string;
+    state?: string;
+    fName?: string;
+    lName?: string;
+    zip?: string;
+  }): void {
+    this.dl.pushEvent('user_info', userInfo);
+  }
+
+  /**
+   * Persist custom data to storage
+   * @param key Storage key
+   * @param value Value to store
+   */
+  static persistData(key: string, value: any): void {
+    this.dl.pushEvent('persist', { key, value });
+  }
+
+  /**
+   * Clear specific persisted data
+   * @param keys Array of keys to clear
+   */
+  static clearPersistedData(keys: string[]): void {
+    this.dl.pushEvent('clear', keys);
+  }
+
+  /**
+   * Set data layer variables
+   * @param data Data to set in the data layer
+   */
+  static setDataLayer(data: MapLike): void {
+    this.dl.pushEvent('set', data);
+  }
+
+  /**
+   * Register a custom event processor
+   * @param eventType Event type to listen for
+   * @param processor Function to process the event
+   */
+  static registerEventProcessor(
+    eventType: string,
+    processor: (payload: any) => void
+  ): void {
+    this.dl.registerProcessor(eventType, processor);
+  }
+
+  /**
+   * Get current data layer state
+   * @returns Current data layer object
+   */
+  static getDataLayer(): MapLike {
+    return this.dl.getDl();
+  }
+
+  /**
+   * Get event state tracker
+   * @returns Array of all tracked events
+   */
+  static getEventState(): any[] {
+    return this.dl.getState();
+  }
+
+  /**
+   * Check if a specific event has happened
+   * @param eventName Event name to check
+   * @returns True if event has occurred
+   */
+  static hasEventHappened(eventName: string): boolean {
+    return this.dl.hasEventHappened(eventName);
+  }
 }
 
 export const MagicPixelEventBus = EventBus;

package/src/models/geo-api-response.ts

@@ -0,0 +1,13 @@
+export interface GeoResponse {
+  ip: string;
+  city: string;
+  country: string;
+  region: string;
+  loc: string;
+  postal: string;
+}
+
+export interface GeoApiResponse {
+  status: 'OK' | 'KO';
+  info: GeoResponse;
+}