@magicpixel/rn-mp-client-sdk 0.2.0

package/src/common/data-store.ts

@@ -0,0 +1,333 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import type {
+  DeJsvHelper,
+  MapLike,
+  QcInfoItem,
+  RunQueueModel,
+  SdkInitOptions,
+  UrlInfo,
+  VisitInfo,
+  VisitorInfo,
+} from './app-types';
+import { Logger } from './logger';
+import type {
+  ClientSdkDeItem,
+  ClientSdkPrItem,
+  ClientSdkQcItem,
+  ClientSdkTagItem,
+  MpClientSdk,
+} from '../models/mp-client-sdk';
+import { Platform } from 'react-native';
+import { DeviceType, getDeviceTypeAsync } from 'expo-device';
+
+export class DataStore {
+  private static isDataStoreInitialized = false;
+  private static dataElements: MapLike = {};
+  private static validQcList: string[];
+  private static validQcInfoList: Array<QcInfoItem> = [];
+  private static transFunctions: MapLike = {};
+  private static prStatus = true;
+  private static clientSdk: MpClientSdk;
+  private static urls: UrlInfo;
+  private static debugId: string;
+  private static visitorInfo: VisitorInfo;
+  private static visitInfo: VisitInfo;
+  private static pageLang = 'en';
+  private static mpEnvShort: 'stg' | 'prd';
+  private static devicePlatform = 'unknown';
+  private static deviceType = 'mobile';
+  private static runQueue: RunQueueModel[] = [];
+  private static isProcessing = false;
+  private static sdkInitOptions: SdkInitOptions;
+
+  static async init(clientSdk: MpClientSdk): Promise<void> {
+    this.clientSdk = clientSdk;
+    this.setMpEnv(clientSdk?.s?.ev === 'staging' ? 'stg' : 'prd');
+    if (typeof Platform !== 'undefined' && typeof Platform.OS !== 'undefined') {
+      this.devicePlatform = Platform.OS.toLowerCase();
+    }
+
+    const dType = await getDeviceTypeAsync();
+    if (dType === DeviceType.PHONE) {
+      this.deviceType = 'mobile';
+    } else if (dType === DeviceType.TABLET) {
+      this.deviceType = 'tablet';
+    } else {
+      this.deviceType = 'unknown';
+    }
+
+    this.resetCollectorUrl(
+      clientSdk.s.c_url,
+      clientSdk.s.ev,
+      clientSdk.s.v_id,
+      clientSdk.s.p_id
+    );
+    this.isDataStoreInitialized = true;
+  }
+
+  static resetCollectorUrl(
+    baseCollectorUrl: string,
+    sdkEnv: string,
+    vendorId: string,
+    projectId: string
+  ): boolean {
+    const tagsBaseUrl = `${baseCollectorUrl}/${
+      sdkEnv === 'staging' ? 's' : 'p'
+    }/${vendorId}/${projectId}`;
+    this.urls = {
+      tfUrl: tagsBaseUrl + '/sst',
+      errUrl: tagsBaseUrl + '/err',
+      rptUrl: tagsBaseUrl + '/report',
+      infoUrl: tagsBaseUrl + '/info',
+      baseUrl: baseCollectorUrl,
+      attrInfoUrl: baseCollectorUrl + `/idl/${vendorId}/attrInfo`,
+      idlUrl:
+        baseCollectorUrl +
+        `/idl/${vendorId}/idl${sdkEnv === 'staging' ? '-staging' : ''}`,
+    };
+    return true;
+  }
+
+  static enQueueTMFire(
+    sseOnly: boolean,
+    name: string,
+    dcrName: string,
+    eventId: string,
+    dcrPayload?: Record<string, any>
+  ): void {
+    this.runQueue.push({ sseOnly, name, dcrName, eventId, dcrPayload });
+  }
+
+  static isDataStoreReady(): boolean {
+    return this.isDataStoreInitialized;
+  }
+
+  static getSdkPcKey(): string {
+    return this.clientSdk.pcKey;
+  }
+
+  static getSdkInitOptions(): SdkInitOptions {
+    return this.sdkInitOptions;
+  }
+
+  static setSdkInitOptions(options: SdkInitOptions): void {
+    this.sdkInitOptions = options;
+  }
+
+  static deQueueTMFire(): RunQueueModel {
+    return this.runQueue.length > 0 ? this.runQueue.pop() : null;
+  }
+
+  static isTagManagerProcessing(): boolean {
+    return this.isProcessing;
+  }
+
+  static setTagManagerProcessing(status: boolean): void {
+    this.isProcessing = status;
+  }
+
+  static getSdkDataElements(): MapLike<ClientSdkDeItem> {
+    return this.clientSdk?.d || {};
+  }
+
+  static getSdkQC(): ClientSdkQcItem[] {
+    return this.clientSdk?.qc || [];
+  }
+
+  static hasOneSSTTag(): boolean {
+    return this.clientSdk.s.sst;
+  }
+
+  static getSSTDownStream(): 'j' | 'n' {
+    return this.clientSdk.s.dws_s_t;
+  }
+
+  static getClientDownStream(): 'j' | 'n' {
+    return this.clientSdk.s.dws_c_t;
+  }
+
+  static getClientSdk(): MpClientSdk {
+    return this.clientSdk;
+  }
+
+  static getSSTUrl(): string {
+    return this.urls.tfUrl;
+  }
+
+  static getAttrInfoUrl(): string {
+    return this.urls.attrInfoUrl;
+  }
+
+  static setVisitInfo(visitInfo: VisitInfo): void {
+    this.visitInfo = visitInfo;
+  }
+
+  static visitInfoToString(): string {
+    return this.visitInfo
+      ? `${this.visitInfo.visitVer}|${this.visitInfo.visitId}|${this.visitInfo.visitTs}|${this.visitInfo.visitCt}|${this.visitInfo.visitDepth}`
+      : undefined;
+  }
+
+  static setVisitorInfo(visitorInfo: VisitorInfo): void {
+    this.visitorInfo = visitorInfo;
+  }
+
+  static getDebugId(): string {
+    return this.debugId;
+  }
+
+  static getErrorReportUrl(): string {
+    return this.urls.errUrl;
+  }
+
+  static getIdlUrl(): string {
+    return this.urls?.idlUrl;
+  }
+
+  static getSdkVersion(): string {
+    // TODO: Fix this
+    return 'na';
+  }
+
+  static setDebugId(dbgId: string): void {
+    this.debugId = dbgId;
+  }
+
+  static shouldFireSstForEvent(eventName: string): boolean {
+    return this.clientSdk?.sseMpDlE?.indexOf(eventName) > -1;
+  }
+
+  static getUrlInfo(): UrlInfo {
+    return this.urls;
+  }
+
+  static getSdkTags(): MapLike<ClientSdkTagItem> {
+    return this?.clientSdk?.t ?? {};
+  }
+
+  static getSdkProviders(): MapLike<ClientSdkPrItem> {
+    return this?.clientSdk?.p ?? {};
+  }
+
+  static getPrivacyCompliance(): boolean {
+    return this.prStatus;
+  }
+
+  static setPrivacyCompliance(status: boolean): void {
+    this.prStatus = status;
+  }
+
+  static async storeData(key: string, value: any): Promise<void> {
+    await AsyncStorage.setItem(key, JSON.stringify(value));
+  }
+
+  static async getDataFromStorage<T>(key: string): Promise<T> {
+    const value = await AsyncStorage.getItem(key);
+    return value ? JSON.parse(value) : value;
+  }
+
+  static getDataElements(): MapLike {
+    return this.dataElements;
+  }
+
+  static setDataElements(de: MapLike): void {
+    this.dataElements = de;
+  }
+
+  static getPageLang(): string {
+    return this.pageLang;
+  }
+
+  static getDeviceOs(): string {
+    return this.devicePlatform;
+  }
+
+  static getDataElementHelpers(): DeJsvHelper {
+    return {
+      log: Logger.logDbg,
+      err: Logger.logError,
+    };
+  }
+
+  static getPageName(): string {
+    return (this.getDataElementValue('page_name') as string) || 'none';
+  }
+
+  static getDataElementValue(param: string): string | boolean | number {
+    return this.dataElements[param];
+  }
+
+  static setPageLang(lang: string): void {
+    this.pageLang = lang || 'en';
+  }
+
+  static getSdkPageLangKey(): string {
+    return this.clientSdk.langKey;
+  }
+
+  static setDataElement(key: string, value: any): void {
+    this.dataElements[key] = value;
+  }
+
+  static setValidQc(qcList: string[], qcInfo: QcInfoItem[]): void {
+    this.validQcList = qcList;
+    this.validQcInfoList = qcInfo;
+  }
+
+  static getValidQcList(): string[] {
+    return this.validQcList || [];
+  }
+
+  static getValidQcInfo(): QcInfoItem[] {
+    return this.validQcInfoList || [];
+  }
+
+  static setTransFunctions(elements: MapLike): MapLike {
+    this.transFunctions = elements;
+    return this.transFunctions;
+  }
+
+  static getTransFunctions(): MapLike {
+    return this.transFunctions;
+  }
+
+  static getOperatingSystem(): string {
+    return this.devicePlatform;
+  }
+
+  static getVisitId(): string {
+    return this.visitInfo?.visitId;
+  }
+
+  static getDeviceType(): string {
+    return this.deviceType;
+  }
+
+  static getDeviceId(): string {
+    return this.visitorInfo?.dId;
+  }
+
+  static getMpId(): string {
+    return this.visitorInfo?.mId;
+  }
+
+  static getVisitorInfoAsString(): string | undefined {
+    return this.visitorInfo ? JSON.stringify(this.visitorInfo) : undefined;
+  }
+
+  static getOrgId(): string {
+    return this?.clientSdk?.s?.v_id;
+  }
+
+  static getCoreVersion(): string {
+    return this?.clientSdk?.s?.v;
+  }
+
+  static getMpEnv(): 'stg' | 'prd' {
+    return this.mpEnvShort;
+  }
+
+  static setMpEnv(shortEnv: 'stg' | 'prd'): void {
+    this.mpEnvShort = shortEnv;
+  }
+}

package/src/common/event-bus.ts

@@ -0,0 +1,35 @@
+import type { EventBusCallback } from './app-types';
+import { Logger } from './logger';
+
+export class EventBus {
+  private static eventRegister: Map<string, Array<EventBusCallback>> = new Map<
+    string,
+    Array<EventBusCallback>
+  >();
+
+  static on(eventName: string, callback: EventBusCallback): void {
+    Logger.logDbg(`Registering Listener for event: ${eventName}`);
+    if (!this.eventRegister.has(eventName)) {
+      this.eventRegister.set(eventName, [callback]);
+    } else {
+      this.eventRegister.get(eventName).push(callback);
+    }
+  }
+
+  static triggerEvent(eventName: string, payload: any): void {
+    if (this.eventRegister.has(eventName)) {
+      for (const cb of this.eventRegister.get(eventName)) {
+        try {
+          Logger.logDbg(
+            `Sending event ${eventName} to all listeners. Count = ${
+              this.eventRegister.get(eventName).length
+            }`
+          );
+          cb(eventName, payload);
+        } catch (err) {
+          Logger.logError('Unable to process callback for event: ' + eventName);
+        }
+      }
+    }
+  }
+}

package/src/common/logger.ts

@@ -0,0 +1,19 @@
+export class Logger {
+  static logDbg(...args: any): void {
+    if (console && console.log) {
+      console.log(...args);
+    }
+  }
+
+  static logWarn(...args: any): void {
+    if (console && console.warn) {
+      console.warn(...args);
+    }
+  }
+
+  static logError(...args: any): void {
+    if (console && console.error) {
+      console.error(...args);
+    }
+  }
+}

package/src/common/network-service.ts

@@ -0,0 +1,85 @@
+import { Logger } from './logger';
+import type { MapLike, SdkInitOptions, VisitorInfo } from './app-types';
+import { DataStore } from './data-store';
+import { Reporter } from './reporter';
+import { Utils } from './utils';
+import type { MpClientSdk } from '../models/mp-client-sdk';
+
+export class NetworkService {
+  public static async fetchIdlInfo(url: string): Promise<VisitorInfo> {
+    const response = await NetworkService.sendNetworkRequest('get', url);
+    if (response) {
+      return response.json();
+    } else {
+      return null;
+    }
+  }
+
+  public static async refreshClientSdkJson(
+    sdkInitOptions: SdkInitOptions
+  ): Promise<void> {
+    try {
+      const response = await this.sendNetworkRequest(
+        'get',
+        `${sdkInitOptions.baseUrl}/${sdkInitOptions.projectId}${
+          sdkInitOptions.env === 'staging' ? '-staging' : ''
+        }.json?cb=${Utils.getUniqueID()}`
+      );
+
+      if (response) {
+        const sdkJson: MpClientSdk = await response.json();
+        Logger.logDbg('Client Sdk:: ', sdkJson);
+        // sdkJson.s.c_url = 'http://localhost:3001';
+        await DataStore.init(sdkJson);
+      }
+    } catch (err) {
+      Reporter.reportError('refreshClientSdk', err);
+      throw new Error('Unable to fetch MagicPixel SDK at this time.');
+    }
+  }
+
+  public static sendPostRequest(url: string, body: MapLike): void {
+    this.sendNetworkRequest('post', url, body).catch((err) => {
+      Logger.logError(err);
+    });
+  }
+
+  public static sendGetRequest(url: string): void {
+    this.sendNetworkRequest('get', url).catch((err) => {
+      Logger.logError(err);
+    });
+  }
+
+  private static async sendNetworkRequest(
+    method: 'get' | 'post',
+    url: string,
+    body?: MapLike
+  ): Promise<any> {
+    try {
+      Logger.logDbg(
+        `Sending ${method} request to ${url} with body ${JSON.stringify(body)}`
+      );
+      if (method === 'get') {
+        return await fetch(url, {
+          headers: {
+            'cache-control': 'no-store',
+          },
+        });
+      } else if (method === 'post') {
+        return await fetch(url, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'text/plain',
+            'cache-control': 'no-store',
+          },
+          body: JSON.stringify(body ?? '{}'),
+        });
+      } else {
+        throw new Error('Unsupported method: ' + method);
+      }
+    } catch (err) {
+      Logger.logError(err);
+      return null;
+    }
+  }
+}

package/src/common/reporter.ts

@@ -0,0 +1,110 @@
+import type { MapLike, Report, ReportTagItem } from './app-types';
+import { Logger } from './logger';
+import { DataStore } from './data-store';
+import { Utils } from './utils';
+import { NetworkService } from './network-service';
+
+export class Reporter {
+  static reportMap: MapLike<Report> = {};
+
+  static initReporter(
+    envName: string,
+    envId: string,
+    deviceType: string,
+    language: string,
+    deviceOs: string, // device os is being used as a browser proxy
+    pageName: string,
+    evtName: string,
+    evtId: string,
+    clientTagsDownStream: 'j' | 'n',
+    clientSdkVersion: string,
+    initialItems: ReportTagItem[] = []
+  ): void {
+    this.reportMap[evtId] = {
+      envName,
+      envId,
+      pname: pageName || 'none',
+      evt: evtName,
+      evtId: evtId,
+      bw: Utils.bwToNum(deviceOs),
+      dt: Utils.dtToNum(deviceType),
+      ln: Utils.langToNum(language),
+      dm: 'na',
+      items: initialItems || [],
+      dws: clientTagsDownStream,
+      v: clientSdkVersion,
+      tagCt: 0,
+    };
+  }
+
+  static setExpectedTagCount(ct: number, evtId: string): void {
+    const reportParent = this.reportMap[evtId];
+    if (reportParent) {
+      reportParent.tagCt = ct;
+    }
+  }
+
+  static reportItem(item: ReportTagItem, evtId: string): void {
+    const reportParent = this.reportMap[evtId];
+    if (reportParent) {
+      reportParent.items.push(item);
+      if (
+        reportParent?.items?.length === reportParent?.tagCt &&
+        reportParent?.items?.length > 0
+      ) {
+        Logger.logDbg('Hit expected tag count. Reporting');
+        this.publishReport(evtId);
+      }
+    }
+  }
+
+  static publishReport(evtId: string): void {
+    const data = (this.reportMap[evtId] || {}) as MapLike;
+    const postUrl = `${DataStore.getUrlInfo().rptUrl}/${
+      data.dws ?? 'n'
+    }/${Utils.getUniqueID()}`;
+    Logger.logDbg('Posting Info: ', postUrl);
+    data.debugId = DataStore.getDebugId();
+    NetworkService.sendPostRequest(postUrl, data);
+  }
+
+  static reportError(methodMetaData: string, err: any): void {
+    Logger.logDbg('Reporting...', methodMetaData, err);
+    const data = {
+      message: err?.message,
+      stack: err?.stack || undefined,
+      version: DataStore.getSdkVersion(),
+    };
+
+    NetworkService.sendPostRequest(
+      `${DataStore.getErrorReportUrl()}/${Utils.getUniqueID()}`,
+      data
+    );
+  }
+
+  static async postSST(
+    data: MapLike,
+    envName: string,
+    envId: string,
+    serverTagDownStream: 'j' | 'n',
+    eventName: string,
+    evtId: string
+  ): Promise<void> {
+    data.env = envName;
+    data.envId = envId;
+    data.evtName = eventName;
+    data.dws = serverTagDownStream;
+    data.debugId = DataStore.getDebugId();
+    data.dm = 'n/a';
+    data.v = DataStore.getCoreVersion();
+    // return postHttp(`${getUrlInfo().tfUrl}/${getUniqueID()}`, 'POST', data);
+    NetworkService.sendPostRequest(
+      `${DataStore.getSSTUrl()}/${data.dws ?? 'n'}/${evtId}`,
+      data
+    );
+  }
+
+  static postAttrInfo(payload: MapLike): void {
+    return NetworkService.sendPostRequest(DataStore.getAttrInfoUrl(), payload);
+  }
+}