@suprsend/web-sdk 1.0.0 → 1.2.0

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@suprsend/web-sdk",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "This is sdk used to integrate suprsend functionality in javascript applications",
   "main": "dist/cjs_bundle.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "rm -rf dist && webpack --env module_type=commonjs --env filename=cjs_bundle.js  && webpack --env module_type=window --env filename=cdn_bundle.js",
-    "publish-sdk": "npm run build && npm publish"
+    "publish_sdk": "npm run build && npm publish"
   },
   "keywords": [
     "suprsend",
@@ -27,10 +27,11 @@
     "@babel/core": "^7.18.5",
     "@babel/preset-env": "^7.18.2",
     "babel-loader": "^8.2.5",
-    "webpack": "^5.51.1",
+    "webpack": "^5.76.0",
     "webpack-cli": "^4.8.0"
   },
   "dependencies": {
-    "libphonenumber-js": "^1.10.7"
+    "libphonenumber-js": "^1.10.7",
+    "mitt": "^3.0.0"
   }
 }

package/src/config.js

@@ -4,9 +4,10 @@ const config = {
   api_url: "https://hub.suprsend.com",
   sdk_version: package_data.version,
   batch_size: 20,
-  flush_interval: 3000,
+  flush_interval: 3000, // in ms
   service_worker_file: "serviceworker.js",
-  sw_delay: 5000, //in ms,
+  sw_delay: 5000, // in ms,
+  preference_debounce: 1000, // in ms
 };
 
 export default config;

package/src/encryption.js

@@ -236,15 +236,22 @@ const getUtf8Bytes = (str) =>
     [...unescape(encodeURIComponent(str))].map((c) => c.charCodeAt(0))
   );
 
-export default async function create_signature(str, date, method) {
+export default async function create_signature(
+  str,
+  date,
+  method,
+  route = `/${constants.api_events_route}`
+) {
   if (!window.crypto) {
     return;
   }
   const key = config.signing_key;
-  const message = `${method}\n${MD5(str)}\napplication/json\n${date}\n/${
-    constants.api_events_route
-  }`;
-
+  const content_type = "application/json";
+  let md5_str = "";
+  if (str) {
+    md5_str = MD5(str);
+  }
+  const message = `${method}\n${md5_str}\n${content_type}\n${date}\n${route}`;
   const keyBytes = getUtf8Bytes(key);
   const messageBytes = getUtf8Bytes(message);
 

package/src/index.d.ts

@@ -1,8 +1,120 @@
+import { Emitter } from "mitt";
+
 interface Dictionary {
   [key: string]: any;
 }
 
+export enum PreferenceOptions {
+  OPT_IN = "opt_in",
+  OPT_OUT = "opt_out",
+}
+
+export enum ChannelLevelPreferenceOptions {
+  ALL = "all",
+  REQUIRED = "required",
+}
+
+type EmitterEvents = {
+  preferences_updated?: null;
+  preferences_error: PreferenceErrorData;
+};
+
+interface CategoryChannel {
+  channel: string;
+  preference: PreferenceOptions;
+  is_editable: boolean;
+}
+
+interface Category {
+  name: string;
+  category: string;
+  description?: string | null;
+  preference: PreferenceOptions;
+  is_editable: boolean;
+  channels?: CategoryChannel[] | null;
+}
+
+interface Section {
+  name?: string | null;
+  description?: string | null;
+  subcategories?: Category[] | null;
+}
+
+interface ChannelPreference {
+  channel: string;
+  is_restricted: boolean;
+}
+
+interface PreferenceData {
+  sections: Section[] | null;
+  channel_preferences: ChannelPreference[] | null;
+}
+
+interface PreferenceErrorData {
+  error: boolean;
+  api_error?: boolean;
+  message: string;
+  status_code?: number | null;
+  error_obj?: Error | null;
+}
+
+interface GetPreferencesResponse extends PreferenceData, PreferenceErrorData {}
+
+interface GetCategoriesResponse extends PreferenceErrorData {
+  meta: { count: number; limit: number; offset: number };
+  results: Category[] | null;
+}
+
+interface GetOverAllChannelPreferencesResponse extends PreferenceErrorData {
+  channel_preferences: ChannelPreference[] | null;
+}
+
+interface Preferences {
+  data: PreferenceData;
+
+  get_preferences(args?: {
+    brand_id?: string;
+  }): Promise<GetPreferencesResponse>;
+
+  get_categories(args?: {
+    brand_id?: string;
+    limit?: number;
+    offset?: number;
+  }): Promise<GetCategoriesResponse>;
+
+  get_category(
+    category: string,
+    args?: { brand_id?: string }
+  ): Promise<Category>;
+
+  get_overall_channel_preferences(): Promise<GetOverAllChannelPreferencesResponse>;
+
+  update_category_preference(
+    category: string,
+    preference: PreferenceOptions,
+    args?: {
+      brand_id?: string;
+    }
+  ): void | PreferenceErrorData;
+
+  update_channel_preference_in_category(
+    channel: string,
+    preference: PreferenceOptions,
+    category: string,
+    args?: {
+      brand_id?: string;
+    }
+  ): void | PreferenceErrorData;
+
+  update_overall_channel_preference(
+    channel: string,
+    preference: ChannelLevelPreferenceOptions
+  ): void | PreferenceErrorData;
+}
+
 interface User {
+  preferences: Preferences;
+
   set(key: string, value: any): void;
   set(prop: Dictionary): void;
 
@@ -56,6 +168,7 @@ export interface SuprSend {
 
   user: User;
   web_push: WebPush;
+  emitter: Emitter<EmitterEvents>;
 }
 
 declare const suprsend: SuprSend;

package/src/index.js

@@ -4,6 +4,11 @@ import User from "./user";
 import WebPush from "./web_push";
 import { constants, internal_events } from "./constants";
 import { SSConfigurationError } from "./errors";
+import mitt from "mitt";
+export {
+  PreferenceOptions,
+  ChannelLevelPreferenceOptions,
+} from "./preferences";
 
 var suprSendInstance;
 export var initialisedAt;
@@ -22,8 +27,11 @@ class SuprSend {
       utils.set_cookie(constants.distinct_id, distinct_id);
     }
     suprSendInstance.distinct_id = distinct_id;
-    this.user = new User(suprSendInstance);
+
+    this.emitter = mitt();
+    this.user = new User(suprSendInstance, this.emitter);
     this.web_push = new WebPush(suprSendInstance);
+
     this.web_push.update_subscription();
     SuprSend._set_env_properties();
     if (!initialisedAt) {
@@ -165,7 +173,7 @@ class SuprSend {
       _user_identified: false,
     };
     utils.remove_local_storage_item(constants.super_properties_key);
-    this.user = new User(suprSendInstance);
+    this.user = new User(suprSendInstance, this.emitter);
     this.web_push = new WebPush(suprSendInstance);
     SuprSend._set_env_properties();
   }

package/src/preferences.js

@@ -0,0 +1,474 @@
+import create_signature from "./encryption";
+import config from "./config";
+import utils from "./utils";
+
+export const PreferenceOptions = { OPT_IN: "opt_in", OPT_OUT: "opt_out" };
+export const ChannelLevelPreferenceOptions = {
+  ALL: "all",
+  REQUIRED: "required",
+};
+
+class Preferences {
+  constructor(instance, emitter) {
+    this.ss_instance = instance;
+    this._preference_data;
+    this._preference_args;
+    this._emitter = emitter;
+
+    this._debounced_update_category_preferences = utils.debounce_by_type(
+      this._update_category_preferences,
+      config.preference_debounce
+    );
+    this._debounced_update_channel_preferences = utils.debounce_by_type(
+      this._update_channel_preferences,
+      config.preference_debounce
+    );
+  }
+
+  _validate_query_params(query_params = {}) {
+    let validated_params = {};
+    for (let key in query_params) {
+      if (query_params[key]) {
+        validated_params[key] = query_params[key];
+      }
+    }
+    return validated_params;
+  }
+
+  async _get_request(route = "", query_params = {}) {
+    const preference_base_url = `/v1/subscriber/${this.ss_instance.distinct_id}`;
+    const validated_query_params = this._validate_query_params(query_params);
+    const query_params_string = new URLSearchParams(
+      validated_query_params
+    ).toString();
+
+    const full_url_path = query_params_string
+      ? `${preference_base_url}/${route}/?${query_params_string}`
+      : `${preference_base_url}/${route}`;
+
+    const requested_date = new Date().toGMTString();
+    const signature = await create_signature(
+      "",
+      requested_date,
+      "GET",
+      full_url_path
+    );
+    const authorization = signature
+      ? `${config.env_key}:${signature}`
+      : config.env_key;
+
+    try {
+      const resp = await fetch(`${config.api_url}${full_url_path}`, {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: authorization,
+          "x-amz-date": requested_date,
+        },
+      });
+      if (resp.ok) {
+        const respData = resp.json();
+        return respData;
+      }
+      return {
+        error: true,
+        api_error: true,
+        status_code: resp.status,
+        message: resp.statusText,
+        error_obj: null,
+      };
+    } catch (e) {
+      return {
+        error: true,
+        api_error: false,
+        status_code: null,
+        message: e.message,
+        error_obj: e,
+      };
+    }
+  }
+
+  async _update_request(body, route, query_params) {
+    const preference_base_url = `/v1/subscriber/${this.ss_instance.distinct_id}`;
+    const validated_query_params = this._validate_query_params(query_params);
+    const query_params_string = new URLSearchParams(
+      validated_query_params
+    ).toString();
+
+    const full_url_path = query_params_string
+      ? `${preference_base_url}/${route}/?${query_params_string}`
+      : `${preference_base_url}/${route}`;
+
+    const requested_date = new Date().toGMTString();
+    const bodyString = JSON.stringify(body);
+    const signature = await create_signature(
+      bodyString,
+      requested_date,
+      "POST",
+      full_url_path
+    );
+    const authorization = signature
+      ? `${config.env_key}:${signature}`
+      : config.env_key;
+
+    try {
+      const resp = await fetch(`${config.api_url}${full_url_path}`, {
+        method: "POST",
+        body: bodyString,
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: authorization,
+          "x-amz-date": requested_date,
+        },
+      });
+      if (resp.ok) {
+        const respData = resp.json();
+        return respData;
+      }
+      return {
+        error: true,
+        api_error: true,
+        status_code: resp.status,
+        message: resp.statusText,
+        error_obj: null,
+      };
+    } catch (e) {
+      return {
+        error: true,
+        api_error: false,
+        status_code: null,
+        message: e.message,
+        error_obj: e,
+      };
+    }
+  }
+
+  _update_category_preferences = async (
+    category = "",
+    body = {},
+    subcategory,
+    args = {}
+  ) => {
+    let url_path = `category/${category}`;
+    const response = await this._update_request(body, url_path, args);
+    if (response?.error) {
+      this._emitter.emit("preferences_error", response);
+    } else {
+      Object.assign(subcategory, response);
+      this._emitter.emit("preferences_updated");
+    }
+    return response;
+  };
+
+  _update_channel_preferences = async (body = {}) => {
+    let url_path = "channel_preference";
+    const response = await this._update_request(body, url_path);
+    if (response?.error) {
+      this._emitter.emit("preferences_error", response);
+    } else {
+      await this.get_preferences(this._preference_args);
+      this._emitter.emit("preferences_updated");
+    }
+    return response;
+  };
+
+  set data(value) {
+    this._preference_data = value;
+  }
+
+  get data() {
+    return this._preference_data;
+  }
+
+  async get_preferences(args = {}) {
+    let url_path = "full_preference";
+    let query_params = { brand_id: args?.brand_id };
+
+    const response = await this._get_request(url_path, query_params);
+    if (!response?.error) {
+      this.data = response;
+    }
+    return response;
+  }
+
+  async get_categories(args = {}) {
+    let url_path = "category";
+    const query_params = {
+      brand_id: args?.brand_id,
+      limit: args?.limit,
+      offset: args?.offset,
+    };
+
+    const response = await this._get_request(url_path, query_params);
+    return response;
+  }
+
+  async get_category(category = "", args = {}) {
+    if (!category) {
+      return {
+        error: true,
+        message: "Category parameter is missing",
+      };
+    }
+
+    let url_path = `category/${category}`;
+    let query_params = { brand_id: args?.brand_id };
+
+    const response = await this._get_request(url_path, query_params);
+    return response;
+  }
+
+  async get_overall_channel_preferences() {
+    let url_path = `channel_preference`;
+    const response = await this._get_request(url_path);
+    return response;
+  }
+
+  update_category_preference(category = "", preference = "", args = {}) {
+    if (
+      !category ||
+      ![PreferenceOptions.OPT_IN, PreferenceOptions.OPT_OUT].includes(
+        preference
+      )
+    ) {
+      return {
+        error: true,
+        message: !category
+          ? "Category parameter is missing"
+          : "Preference parameter is invalid",
+      };
+    }
+
+    if (!this.data) {
+      return {
+        error: true,
+        message: "Call get_preferences method before performing action",
+      };
+    }
+
+    let category_data;
+    let data_updated = false;
+
+    // optimistic update in local store
+    for (let section of this.data.sections) {
+      let abort = false;
+      for (let subcategory of section.subcategories) {
+        if (subcategory.category === category) {
+          category_data = subcategory;
+          if (subcategory.is_editable) {
+            if (subcategory.preference !== preference) {
+              subcategory.preference = preference;
+              data_updated = true;
+              abort = true;
+              break;
+            } else {
+              // console.log(`category is already ${status}ed`);
+            }
+          } else {
+            return {
+              error: true,
+              message: "Category preference is not editable",
+            };
+          }
+        }
+      }
+      if (abort) break;
+    }
+
+    if (!category_data) {
+      return {
+        error: true,
+        message: "Category is not found",
+      };
+    }
+
+    if (!data_updated) {
+      return;
+    }
+
+    const opt_out_channels = [];
+    category_data.channels.forEach((channel) => {
+      if (channel.preference === PreferenceOptions.OPT_OUT) {
+        opt_out_channels.push(channel.channel);
+      }
+    });
+
+    const request_payload = {
+      preference: category_data.preference,
+      opt_out_channels,
+    };
+
+    this._debounced_update_category_preferences(
+      category,
+      category,
+      request_payload,
+      category_data,
+      { brand_id: args?.brand_id }
+    );
+  }
+
+  update_channel_preference_in_category(
+    channel = "",
+    preference = "",
+    category = "",
+    args = {}
+  ) {
+    if (!channel || !category) {
+      return {
+        error: true,
+        message: !channel
+          ? "Channel parameter is missing"
+          : "Category parameter is missing",
+      };
+    } else if (
+      ![PreferenceOptions.OPT_IN, PreferenceOptions.OPT_OUT].includes(
+        preference
+      )
+    ) {
+      return {
+        error: true,
+        message: "Preference parameter is invalid",
+      };
+    }
+
+    if (!this.data) {
+      return {
+        error: true,
+        message: "Call get_preferences method before performing action",
+      };
+    }
+
+    let category_data;
+    let selected_channel_data;
+    let data_updated = false;
+
+    // optimistic update in local store
+    for (let section of this.data.sections) {
+      let abort = false;
+      for (let subcategory of section.subcategories) {
+        if (subcategory.category === category) {
+          category_data = subcategory;
+          for (let channel_data of subcategory.channels) {
+            if (channel_data.channel === channel) {
+              selected_channel_data = channel_data;
+              if (channel_data.is_editable) {
+                if (channel_data.preference !== preference) {
+                  channel_data.preference = preference;
+                  if (preference === PreferenceOptions.OPT_IN) {
+                    subcategory.preference = PreferenceOptions.OPT_IN;
+                  }
+                  data_updated = true;
+                  abort = true;
+                  break;
+                } else {
+                  //  console.log(`channel is already ${preference}`);
+                }
+              } else {
+                return {
+                  error: true,
+                  message: "Channel preference is not editable",
+                };
+              }
+            }
+          }
+        }
+        if (abort) break;
+      }
+      if (abort) break;
+    }
+
+    if (!category_data) {
+      return {
+        error: true,
+        message: "Category not found",
+      };
+    }
+
+    if (!selected_channel_data) {
+      return {
+        error: true,
+        message: "Category's Channel not found",
+      };
+    }
+
+    if (!data_updated) {
+      return;
+    }
+
+    const opt_out_channels = [];
+    category_data.channels.forEach((channel) => {
+      if (channel.preference === PreferenceOptions.OPT_OUT) {
+        opt_out_channels.push(channel.channel);
+      }
+    });
+
+    const request_payload = {
+      preference: category_data.preference,
+      opt_out_channels,
+    };
+
+    this._debounced_update_category_preferences(
+      category,
+      category,
+      request_payload,
+      category_data,
+      { brand_id: args?.brand_id }
+    );
+  }
+
+  update_overall_channel_preference(channel = "", preference = "") {
+    if (
+      !channel ||
+      ![
+        ChannelLevelPreferenceOptions.ALL,
+        ChannelLevelPreferenceOptions.REQUIRED,
+      ].includes(preference)
+    ) {
+      return {
+        error: true,
+        message: !channel
+          ? "Channel parameter is missing"
+          : "Preference parameter is invalid",
+      };
+    }
+
+    if (!this.data) {
+      return {
+        error: true,
+        message: "Call get_preferences method before performing action",
+      };
+    }
+
+    let channel_data;
+    let data_updated = false;
+    const preference_restricted =
+      preference === ChannelLevelPreferenceOptions.REQUIRED;
+
+    for (let channel_item of this.data.channel_preferences) {
+      if (channel_item.channel === channel) {
+        channel_data = channel_item;
+        if (channel_item.is_restricted !== preference_restricted) {
+          channel_item.is_restricted = preference_restricted;
+          data_updated = true;
+          break;
+        }
+      }
+    }
+
+    if (!channel_data) {
+      return {
+        error: true,
+        message: "Channel data not found",
+      };
+    }
+
+    if (!data_updated) {
+      return;
+    }
+
+    this._debounced_update_channel_preferences(channel_data.channel, {
+      channel_preferences: [channel_data],
+    });
+  }
+}
+
+export default Preferences;