@braze/web-sdk 5.4.0 → 5.6.0

package/index.d.ts

@@ -1,5 +1,5 @@
 /*
-* Type definitions for @braze/web-sdk v5.4.0
+* Type definitions for @braze/web-sdk v5.6.0
 * Project: https://github.com/braze-inc/braze-web-sdk
 * (c) Braze, Inc. 2024 - http://braze.com
 * License available at https://github.com/braze-inc/braze-web-sdk/blob/master/LICENSE
@@ -1648,6 +1648,20 @@ export class FeatureFlag {
   getTimestampProperty(key: string): number | null;
 }
 
+export class Banner {
+  /** Analytics / tracking string. */
+  id: string;
+
+  /** The placement ID this banner is matched to. */
+  placementId: string;
+
+  /** HTML to display for the banner. */
+  html: string;
+
+  /** Whether this banner is a control banner. */
+  isControl: boolean;
+}
+
 /**
  * Automatically display in-app messages when they are triggered. This method should be called before
  *   calling `openSession`.
@@ -2138,7 +2152,7 @@ export function openSession(): void;
  * - Create a `service-worker.js` file with the content below and place it in the root directory of your website:
  *
  * ```
- * self.importScripts('https://js.appboycdn.com/web-sdk-develop/5.4/service-worker.js');
+ * self.importScripts('https://js.appboycdn.com/web-sdk-develop/5.6/service-worker.js');
  * ```
  *
  * For more details, see [Our Product Documentation](https://www.braze.com/docs/developer_guide/platform_integration_guides/web/push_notifications/integration).
@@ -2418,6 +2432,95 @@ export function logFeatureFlagImpression(
   featureFlagId: string,
 ): boolean | undefined;
 
+/**
+ * Requests banners by a list of placement IDs from the Braze backend.
+ * Note that this method can only be called once per session.
+ *
+ * @param placementIds - A list of placement IDs for banners.
+ * @param successCallback - Callback that is invoked when the banners refresh request has been successfully completed.
+ *   This callback is useful for determining when a request has completed regardless of whether new banners were returned.
+ * @param errorCallback - Callback that is invoked when an error occurs during the refresh.
+ */
+export function requestBannersRefresh(
+  placementIds: string[],
+  successCallback?: () => void,
+  errorCallback?: () => void,
+): void;
+
+/**
+ * Gets a Banner by its placement ID.
+ *
+ * @param placementId - The placement ID of the banner.
+ * @returns - An object of type `Banner`, if a banner with the given placement ID exists. The method returns null if
+ *   the banner does not exist, or if banners are disabled. Returns undefined if the SDK has not been initialized.
+ */
+export function getBanner(placementId: string): Banner | null | undefined;
+
+/**
+ * Renders a Banner into the provided parent node by replacing all children of the parent node. The Banner will be styled
+ *  to use the entire width and height of the parent node. If the `allowUserSuppliedJavascript` initialization option is
+ *  not set to `true`, this method will no-op. Once the Banner is inserted into the DOM, it will automatically log impressions
+ *  and listen for updates from the Braze backend.
+ *
+ * @param banner - The `Banner` to insert onto the page.
+ * @param parentNode - The HTML element to render the banner into.
+ */
+export function insertBanner(banner: Banner, parentNode: HTMLElement): void;
+
+/**
+ * Logs that the user clicked the given banner. This should generally be called through the Braze JavaScript bridge
+ *   inside the Banner's HTML as defined in the Braze dashboard.
+ *
+ * @param banner - The `Banner` object which received the click.
+ * @param buttonId - An optional button ID to associate with this click for analytics.
+ *
+ * @returns - Whether the click was logged successfully, or undefined if the SDK is not intialized.
+ */
+export function logBannerClick(
+  banner: Banner,
+  buttonId?: string,
+): boolean | undefined;
+
+/**
+ * Logs that the user saw the given banners. This is done automatically when you use Braze's display module
+ *   and should only be called if you're bypassing that and manually building the DOM for displaying the banners in
+ *   your own code.
+ *
+ * @param placementIds - The placement IDs of the banners that received impressions.
+ *
+ * @returns - Whether the impressions were logged successfully, or undefiend if the SDK is not initialized.
+ */
+export function logBannerImpressions(
+  placementIds: Array<string>,
+): boolean | undefined;
+
+/**
+ * Gets all available banners.
+ *
+ * @returns - A map of placement IDs to `Banner` objects.
+ *  If the banner has expired, the placement ID will map to a null value instead.
+ *  Returns undefined if the SDK has not been initialized.
+ */
+export function getAllBanners(): Record<string, Banner | null> | undefined;
+
+/**
+ * Subscribe to banners updates. The subscriber callback will be called whenever banners are updated. This method
+ *   should be called before calling `openSession`.
+ *
+ * @param subscriber - The callback function to handle new banners. This function is always called first with the
+ *   available cached map of placement IDs to `Banner` objects, and will also be called when banner updates are available.
+ *   If you want to be notified when a refresh has completed regardless of whether new banners are available,
+ *   you should use the `successCallback` of `requestBannersRefresh`.
+ *
+ * @returns The identifier of the subscription created. This can be passed to `removeSubscription` to cancel the subscription.
+ *    Returns undefined if the SDK has not been initialized.
+ */
+export function subscribeToBannersUpdates(
+  subscriber: (banners: Record<string, Banner | null>) => void,
+): string | undefined;
+
+
+
 /**
  * Getter method to determine if the Braze SDK has been initialized.
  */
@@ -2435,10 +2538,9 @@ export type InitializationOptions = {
    */
   allowCrawlerActivity?: boolean;
   /**
-   * By default, the Braze Web SDK does not allow user-supplied Javascript click actions or enable HTML in-app messages,
-   *   as they allow Braze dashboard users to run Javascript on your site.
-   *   To indicate that you trust the Braze dashboard users to write non-malicious
-   *   Javascript click actions, set this property to true.
+   * By default, the Braze Web SDK does not allow user-supplied Javascript click actions, or enable HTML in-app messages
+   *  and Banners, as they allow Braze dashboard users to run Javascript on your site. To indicate that you trust the
+   *  Braze dashboard users to write non-malicious Javascript click actions, set this property to true.
    */
   allowUserSuppliedJavascript?: boolean;
   /**
@@ -2518,7 +2620,7 @@ export type InitializationOptions = {
    *   lifecycle of, set this option to true and the Braze SDK will not register or unregister a service worker. If you set this
    *   option to true, in order for push to function correctly you must register the service worker yourself BEFORE calling
    *   `requestPushPermission`, and ensure that it contains Braze's service worker code, either with
-   *   `self.importScripts('https://js.appboycdn.com/web-sdk-develop/5.4/service-worker.js');` or by including the content
+   *   `self.importScripts('https://js.appboycdn.com/web-sdk-develop/5.6/service-worker.js');` or by including the content
    *   of that file directly. When this option is true, the `serviceWorkerLocation` option is irrelevant and is ignored.
    */
   manageServiceWorkerExternally?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@braze/web-sdk",
-  "version": "5.4.0",
+  "version": "5.6.0",
   "description": "Braze SDK for web sites and other JS platforms.",
   "main": "src/index.js",
   "scripts": {

package/shared-lib/encoding-utils.js

@@ -1,5 +1,5 @@
 const ei = {
-  Tn: function (t) {
+  Jn: function (t) {
     const r = (t + "=".repeat((4 - (t.length % 4)) % 4))
         .replace(/\-/g, "+")
         .replace(/_/g, "/"),

package/shared-lib/event-types.js

@@ -1,34 +1,36 @@
-const i = {
+const d = {
     CustomEvent: "ce",
     Pr: "p",
-    Eu: "pc",
-    vc: "ca",
-    Ka: "i",
-    qs: "ie",
-    M: "cci",
-    R: "ccic",
-    I: "ccc",
-    F: "ccd",
-    ql: "ss",
-    xl: "se",
-    Gi: "si",
-    $i: "sc",
-    Ei: "sbc",
-    Cc: "sfe",
-    mo: "iec",
-    Bu: "lr",
-    _u: "uae",
-    O: "ci",
-    $: "cc",
-    Wu: "lcaa",
-    Ku: "lcar",
-    On: "inc",
-    Ln: "add",
-    Rn: "rem",
-    $n: "set",
-    Bn: "ncam",
-    Gu: "sgu",
-    Fr: "ffi",
+    mc: "pc",
+    Cc: "ca",
+    Mu: "i",
+    Li: "ie",
+    xt: "cci",
+    $t: "ccic",
+    lt: "ccc",
+    dt: "ccd",
+    Jl: "ss",
+    Gl: "se",
+    Nr: "si",
+    Cr: "sc",
+    Or: "sbc",
+    yc: "sfe",
+    zo: "iec",
+    dc: "lr",
+    cc: "uae",
+    yt: "ci",
+    ut: "cc",
+    vc: "lcaa",
+    gc: "lcar",
+    fu: "inc",
+    pu: "add",
+    bu: "rem",
+    au: "set",
+    du: "ncam",
+    bc: "sgu",
+    yr: "ffi",
+    ro: "bi",
+    fs: "bc",
   },
-  or = { Ar: "feed_displayed", Ec: "content_cards_displayed" };
-export { i as EventTypes, or as InternalEventTypes };
+  dr = { Fr: "feed_displayed", Mc: "content_cards_displayed" };
+export { d as EventTypes, dr as InternalEventTypes };

package/shared-lib/guid.js

@@ -1,5 +1,5 @@
-const p = {
-  W: function () {
+const G = {
+  Rt: function () {
     const t = (t = !1) => {
       const n = (Math.random().toString(16) + "000000000").substr(2, 8);
       return t ? "-" + n.substr(0, 4) + "-" + n.substr(4, 4) : n;
@@ -7,4 +7,4 @@ const p = {
     return t() + t(!0) + t(!0) + t();
   },
 };
-export default p;
+export default G;

package/shared-lib/indexed-db-adapter.js

@@ -1,4 +1,4 @@
-export default class A {
+export default class it {
   constructor(t, e) {
     (this.database = t),
       (this.vd = e),
@@ -64,11 +64,11 @@ export default class A {
             "...",
         );
         const n = null === (e = t.target) || void 0 === e ? void 0 : e.result;
-        for (const t in i.database.ss) {
+        for (const t in i.database.Os) {
           const e = t;
-          i.database.ss.hasOwnProperty(t) &&
-            !n.objectStoreNames.contains(i.database.ss[e]) &&
-            n.createObjectStore(i.database.ss[e]);
+          i.database.Os.hasOwnProperty(t) &&
+            !n.objectStoreNames.contains(i.database.Os[e]) &&
+            n.createObjectStore(i.database.Os[e]);
         }
       }),
       (o.onsuccess = (n) => {
@@ -216,7 +216,7 @@ export default class A {
         });
     }, n);
   }
-  re(t, e) {
+  me(t, e) {
     if (!this.isSupported()) return !1;
     const n = this;
     return this.Bd((o) => {
@@ -249,7 +249,7 @@ export default class A {
       };
     });
   }
-  Zt(t, e) {
+  Hs(t, e) {
     if (!this.isSupported()) return !1;
     const n = this;
     return this.Bd((o) => {
@@ -304,11 +304,11 @@ export default class A {
   clearData() {
     if (!this.isSupported()) return !1;
     const t = [];
-    for (const e in this.database.ss) {
+    for (const e in this.database.Os) {
       const n = e;
-      this.database.ss.hasOwnProperty(e) &&
-        this.database.ss[n] !== this.database.ss.ae &&
-        t.push(this.database.ss[n]);
+      this.database.Os.hasOwnProperty(e) &&
+        this.database.Os[n] !== this.database.Os.ie &&
+        t.push(this.database.Os[n]);
     }
     const e = this;
     return this.Bd(function (n) {
@@ -333,20 +333,20 @@ export default class A {
     });
   }
 }
-A.Yt = {
-  Qt: {
+it.Gs = {
+  _s: {
     Sd: "AppboyServiceWorkerAsyncStorage",
     VERSION: 6,
-    ss: {
-      La: "data",
+    Os: {
+      Xu: "data",
       hr: "pushClicks",
       cu: "pushSubscribed",
       Cd: "fallbackDevice",
-      ts: "cardUpdates",
-      ae: "optOut",
-      wr: "pendingData",
-      jh: "sdkAuthenticationSignature",
+      Ks: "cardUpdates",
+      ie: "optOut",
+      $r: "pendingData",
+      yh: "sdkAuthenticationSignature",
     },
-    ie: 1,
+    oe: 1,
   },
 };

package/shared-lib/logger.js

@@ -1,38 +1,38 @@
-const r = {
+const N = {
   init: function (n) {
-    (void 0 === n && void 0 !== r.zg) || (r.zg = !!n), r.t || (r.t = !0);
+    (void 0 === n && void 0 !== N.zg) || (N.zg = !!n), N.l || (N.l = !0);
   },
   destroy: function () {
-    (r.t = !1), (r.zg = void 0), (r.vd = void 0);
+    (N.l = !1), (N.zg = void 0), (N.vd = void 0);
   },
   setLogger: function (n) {
     "function" == typeof n
-      ? (r.init(), (r.vd = n))
-      : r.info("Ignoring setLogger call since logger is not a function");
+      ? (N.init(), (N.vd = n))
+      : N.info("Ignoring setLogger call since logger is not a function");
   },
   toggleLogging: function () {
-    r.init(),
-      r.zg
-        ? (console.log("Disabling Braze logging"), (r.zg = !1))
-        : (console.log("Enabled Braze logging"), (r.zg = !0));
+    N.init(),
+      N.zg
+        ? (console.log("Disabling Braze logging"), (N.zg = !1))
+        : (console.log("Enabled Braze logging"), (N.zg = !0));
   },
   info: function (n) {
-    if (r.zg) {
+    if (N.zg) {
       const o = "Braze: " + n;
-      null != r.vd ? r.vd(o) : console.log(o);
+      null != N.vd ? N.vd(o) : console.log(o);
     }
   },
   warn: function (n) {
-    if (r.zg) {
-      const o = "Braze SDK Warning: " + n + " (v5.4.0)";
-      null != r.vd ? r.vd(o) : console.warn(o);
+    if (N.zg) {
+      const o = "Braze SDK Warning: " + n + " (v5.6.0)";
+      null != N.vd ? N.vd(o) : console.warn(o);
     }
   },
   error: function (n) {
-    if (r.zg) {
-      const o = "Braze SDK Error: " + n + " (v5.4.0)";
-      null != r.vd ? r.vd(o) : console.error(o);
+    if (N.zg) {
+      const o = "Braze SDK Error: " + n + " (v5.6.0)";
+      null != N.vd ? N.vd(o) : console.error(o);
     }
   },
 };
-export default r;
+export default N;

package/shared-lib/supported-options.js

@@ -1,28 +1,28 @@
 export default {
-  Eo: "allowCrawlerActivity",
-  _o: "baseUrl",
-  Io: "noCookies",
-  So: "devicePropertyAllowlist",
-  ka: "disablePushTokenMaintenance",
-  Ao: "enableLogging",
-  No: "enableSdkAuthentication",
-  _a: "manageServiceWorkerExternally",
-  Oo: "minimumIntervalBetweenTriggerActionsInSeconds",
-  Ro: "sessionTimeoutInSeconds",
-  Po: "appVersion",
-  Lo: "appVersionNumber",
-  wa: "serviceWorkerLocation",
-  Ma: "safariWebsitePushId",
-  zn: "localization",
-  bo: "contentSecurityNonce",
-  Do: "allowUserSuppliedJavascript",
-  jo: "inAppMessageZIndex",
-  ho: "openInAppMessagesInNewTab",
+  Oo: "allowCrawlerActivity",
+  Ro: "baseUrl",
+  Lo: "noCookies",
+  Wo: "devicePropertyAllowlist",
+  Da: "disablePushTokenMaintenance",
+  Vo: "enableLogging",
+  Ko: "enableSdkAuthentication",
+  Ca: "manageServiceWorkerExternally",
+  Go: "minimumIntervalBetweenTriggerActionsInSeconds",
+  Yo: "sessionTimeoutInSeconds",
+  Ho: "appVersion",
+  Xo: "appVersionNumber",
+  _a: "serviceWorkerLocation",
+  Ba: "safariWebsitePushId",
+  Ea: "localization",
+  ir: "contentSecurityNonce",
+  er: "allowUserSuppliedJavascript",
+  Jo: "inAppMessageZIndex",
+  Do: "openInAppMessagesInNewTab",
   en: "openNewsFeedCardsInNewTab",
-  Lh: "requireExplicitInAppMessageDismissal",
-  Mo: "doNotLoadFontAwesome",
-  Uo: "deviceId",
-  ya: "serviceWorkerScope",
-  Wo: "sdkFlavor",
+  mh: "requireExplicitInAppMessageDismissal",
+  Zo: "doNotLoadFontAwesome",
+  Qo: "deviceId",
+  Aa: "serviceWorkerScope",
+  Wh: "sdkFlavor",
   tn: "openCardsInNewTab",
 };

package/src/Banner/banner-factory.js

@@ -0,0 +1,14 @@
+import Banner from "./banner.js";
+export function newBannerFromSerializedValue(n) {
+  return new Banner(n.id, n.o, n.html, n.t, n.i, n.u);
+}
+export function newBannerFromJson(n) {
+  return new Banner(
+    n.id,
+    n.placement_id,
+    n.html,
+    n.is_test_send,
+    n.is_control,
+    n.expires_at,
+  );
+}

package/src/Banner/banner-provider-factory.js

@@ -0,0 +1,19 @@
+import r from "../managers/braze-instance.js";
+import e from "./banner-provider.js";
+const i = {
+  l: !1,
+  provider: null,
+  m: () => (
+    i.p(),
+    i.provider ||
+      ((i.provider = new e(r.v(), r.g(), r.j(), r.P())), r._(i.provider)),
+    i.provider
+  ),
+  p: () => {
+    i.l || (r.h(i), (i.l = !0));
+  },
+  destroy: () => {
+    (i.provider = null), (i.l = !1);
+  },
+};
+export default i;

package/src/Banner/banner-provider.js

@@ -0,0 +1,198 @@
+import s from "../common/base-provider.js";
+import { STORAGE_KEYS as t } from "../managers/storage-manager.js";
+import {
+  newBannerFromJson as n,
+  newBannerFromSerializedValue as o,
+} from "./banner-factory.js";
+import h from "../util/request-header-utils.js";
+import l from "../util/net.js";
+import { randomInclusive as a } from "../util/math.js";
+import u from "../managers/subscription-manager.js";
+import r from "../managers/braze-instance.js";
+import c from "../common/event-logger.js";
+import { EventTypes as d } from "../../shared-lib/event-types.js";
+export default class e extends s {
+  constructor(s, t, i, e) {
+    super(),
+      (this.B = s),
+      (this.S = t),
+      (this.C = i),
+      (this.T = e),
+      (this.banners = {}),
+      (this.B = s),
+      (this.S = t),
+      (this.C = i),
+      (this.T = e),
+      (this.R = 10),
+      (this.I = null),
+      (this.q = null),
+      (this.F = new u()),
+      r.N(this.F),
+      (this.k = null),
+      (this.D = null);
+  }
+  U(s) {
+    if (this.L() && null != s && s.banners) {
+      this.banners = {};
+      const t = s.banners;
+      for (const s in t) {
+        const i = t[s];
+        let e = null;
+        null != i && null != i.banner && (e = n(i.banner)),
+          e && (this.banners[s] = e);
+      }
+      this.M(), this.F.X(this.banners);
+    }
+  }
+  $(s, t, i, e = !0) {
+    var n;
+    const r = () => {
+      "function" == typeof i && i();
+    };
+    if (!this.L())
+      return void (
+        null === (n = this.B) ||
+        void 0 === n ||
+        n.A(() => {
+          this.$(s, t, i);
+        })
+      );
+    const o = this.S;
+    if (!o) return void r();
+    e && this.G();
+    const u = o.H({}, !0),
+      c = [];
+    for (const t of s) c.push({ id: t });
+    u.placements = c;
+    const d = o.J(u, h.O.K);
+    let m = !1;
+    o.V(
+      u,
+      (n = -1) => {
+        if (!this.S) return void r();
+        const o = new Date().valueOf();
+        h.W(this.C, h.O.K, o),
+          -1 !== n && d.push(["X-Braze-Req-Tokens-Remaining", n.toString()]),
+          l.Y({
+            url: `${this.S.Z()}/banners/sync`,
+            headers: d,
+            data: u,
+            ss: (s) => {
+              if (!this.S.ts(u, s, d)) return (m = !0), void r();
+              this.S.es(),
+                this.U(s),
+                (m = !1),
+                h.ns(this.C, h.O.K, 1),
+                "function" == typeof t && t();
+            },
+            error: (s) => {
+              this.S.rs(s, "retrieving banners"), (m = !0), r();
+            },
+            os: () => {
+              if (((this.D = s), e && m && !this.q)) {
+                h.hs(this.C, h.O.K);
+                let e = this.I;
+                (null == e || e < 1e3 * this.R) && (e = 1e3 * this.R),
+                  this.ls(s, t, i, Math.min(3e5, a(1e3 * this.R, 3 * e)));
+              }
+            },
+          });
+      },
+      h.O.K,
+      i,
+    );
+  }
+  us() {
+    return this.D;
+  }
+  cs(s, t) {
+    const i = { id: s.id };
+    t && (i.bid = t);
+    return c.ds(d.fs, i).ss;
+  }
+  G() {
+    null != this.q && (clearTimeout(this.q), (this.q = null));
+  }
+  ls(s, t, i, e = 1e3 * this.R) {
+    this.G(),
+      (this.q = window.setTimeout(() => {
+        this.$(s, t, i);
+      }, e)),
+      (this.I = e);
+  }
+  vs() {
+    let s = {};
+    this.C && (s = this.C.ps(t.bs.gs));
+    const i = {};
+    for (const t in s) {
+      let e = null;
+      null != s[t] && (e = o(s[t])), e && (i[e.placementId] = e);
+    }
+    return i;
+  }
+  M() {
+    var s;
+    if (!this.C) return;
+    const i = {};
+    for (const t in this.banners) {
+      const e =
+        (null === (s = this.banners[t]) || void 0 === s ? void 0 : s.Bs()) ||
+        null;
+      i[t] = e;
+    }
+    this.C.js(t.bs.gs, i), this.ws();
+  }
+  ws() {
+    var s, i;
+    null === (s = this.C) ||
+      void 0 === s ||
+      s.js(t.bs.ys, null === (i = this.T) || void 0 === i ? void 0 : i.Ss());
+  }
+  Cs() {
+    var s;
+    return (
+      (null === (s = this.C) || void 0 === s ? void 0 : s.ps(t.bs.ys)) || null
+    );
+  }
+  Ts() {
+    return this.k;
+  }
+  Rs(s) {
+    this.k = s;
+  }
+  Is() {
+    var s;
+    const t = null === (s = this.T) || void 0 === s ? void 0 : s.Ss(),
+      i = this.Cs();
+    return null != i && t === i;
+  }
+  qs() {
+    var s;
+    const t = null === (s = this.T) || void 0 === s ? void 0 : s.Ss(),
+      i = this.Cs();
+    return null == i || t === i;
+  }
+  Fs(s) {
+    return this.F.Ns(s);
+  }
+  ks() {
+    var s;
+    return (
+      (null === (s = this.C) || void 0 === s ? void 0 : s.ps(t.bs.xs)) || {}
+    );
+  }
+  zs(s) {
+    this.C && this.C.js(t.bs.xs, s);
+  }
+  changeUser() {
+    this.Ds();
+  }
+  L() {
+    return !!this.B && (!!this.B.Us() || (0 !== this.B.Es() && this.Ds(), !1));
+  }
+  Ds() {
+    (this.banners = {}),
+      this.C && (this.C.Ls(t.bs.gs), this.C.Ls(t.bs.xs)),
+      this.F.X({});
+  }
+}