@braze/web-sdk 4.8.3 → 4.9.0

package/src/InAppMessage/display/in-app-message-to-html.js

@@ -2,10 +2,10 @@ import {
   addPassiveEventListener as oe,
   buildSvg as ae,
   detectSwipe as d,
-  DIRECTIONS as c
+  DIRECTIONS as c,
 } from "../../util/dom-utils.js";
 import { createCloseButton as o } from "../../util/component-utils.js";
-import { isTransparent as ne, toRgba as me } from "../../util/color-utils.js";
+import { isTransparent as ne, toRgba as le } from "../../util/color-utils.js";
 import FullScreenMessage from "../models/full-screen-message.js";
 import HtmlMessage from "../models/html-message.js";
 import InAppMessage from "../models/in-app-message.js";
@@ -14,174 +14,175 @@ import SlideUpMessage from "../models/slide-up-message.js";
 import { logInAppMessageClick } from "../log-in-app-message-click.js";
 import { _handleBrazeAction as m } from "../../Core/handle-braze-action.js";
 import at from "./html-message-to-html.js";
-import le from "./modal-utils.js";
+import ce from "./modal-utils.js";
 import r from "../../../shared-lib/braze-shared-lib.js";
-export default function ce(e, a, s, n, t, i, l) {
+export default function de(e, a, t, n, s, i, l, u = document.body) {
   if (((e.ke = document.activeElement), e instanceof HtmlMessage))
-    return at(e, a, s, t, i, l);
-  const u = (function(e, a, s, n, t, i) {
-    let l = null;
-    const c = document.createElement("div");
-    (c.className = "ab-in-app-message ab-start-hidden ab-background"),
-      i && (c.style.zIndex = (i + 1).toString()),
+    return at(e, a, t, s, i, l);
+  const b = (function (e, a, t, n, s, i, l = document.body) {
+    let c = null;
+    const d = document.createElement("div");
+    (d.className = "ab-in-app-message ab-start-hidden ab-background"),
+      i && (d.style.zIndex = (i + 1).toString()),
       e.xe() &&
-        ((c.className += " ab-modal-interactions"),
-        c.setAttribute("tabindex", "-1")),
-      e.ye() ||
-        ((c.style.color = me(e.textColor)),
-        (c.style.backgroundColor = me(e.backgroundColor)),
-        ne(e.backgroundColor) && (c.className += " ab-no-shadow"));
-    const d = () => {
-        -1 !== c.className.indexOf("ab-start-hidden") &&
-          ((c.className = c.className.replace("ab-start-hidden", "")),
+        ((d.className += " ab-modal-interactions"),
+        d.setAttribute("tabindex", "-1")),
+      e.Ae() ||
+        ((d.style.color = le(e.textColor)),
+        (d.style.backgroundColor = le(e.backgroundColor)),
+        ne(e.backgroundColor) && (d.className += " ab-no-shadow"));
+    const u = () => {
+        -1 !== d.className.indexOf("ab-start-hidden") &&
+          ((d.className = d.className.replace("ab-start-hidden", "")),
           document.querySelectorAll(".ab-iam-img-loading").length > 0
             ? n(
                 `Cannot show in-app message ${e.message} because another message is being shown.`,
-                InAppMessage.Me.ze
+                InAppMessage.Ie.Le,
               )
-            : s(c));
+            : t(d));
       },
-      u = (o = !0) => {
-        const a = document.querySelectorAll(".ab-iam-root");
-        a &&
-          a.length > 0 &&
-          (a[0].classList.remove("ab-iam-img-loading"),
-          l && (clearTimeout(l), (l = null)),
-          o
-            ? d()
-            : r.j.error(
-                `Cannot show in-app message ${e.message} because the image failed to load.`
-              ));
+      b = (o = !0) => {
+        let a = document.querySelectorAll(".ab-iam-root");
+        (a && 0 !== a.length) || (a = l.querySelectorAll(".ab-iam-root")),
+          a &&
+            a.length > 0 &&
+            (a[0].classList.remove("ab-iam-img-loading"),
+            c && (clearTimeout(c), (c = null)),
+            o
+              ? u()
+              : r.j.error(
+                  `Cannot show in-app message ${e.message} because the image failed to load.`,
+                ));
       };
     e.imageStyle === InAppMessage.ImageStyle.GRAPHIC &&
-      (c.className += " graphic"),
+      (d.className += " graphic"),
       e.orientation === InAppMessage.Orientation.LANDSCAPE &&
-        (c.className += " landscape"),
+        (d.className += " landscape"),
       null != e.buttons &&
         0 === e.buttons.length &&
         (e.clickAction !== InAppMessage.ClickAction.NONE &&
-          (c.className += " ab-clickable"),
-        (c.onclick = o => (
-          e.he(c, () => {
+          (d.className += " ab-clickable"),
+        (d.onclick = (o) => (
+          e.ye(d, () => {
             logInAppMessageClick(e),
               e.clickAction === InAppMessage.ClickAction.URI
                 ? m(
                     e.uri || "",
-                    t || e.openTarget === InAppMessage.OpenTarget.BLANK,
-                    o
+                    s || e.openTarget === InAppMessage.OpenTarget.BLANK,
+                    o,
                   )
                 : e.clickAction === InAppMessage.ClickAction.NEWS_FEED && a();
           }),
           o.stopPropagation(),
           !1
         )));
-    const b = o(
+    const p = o(
       "Close Message",
-      e.ye() ? void 0 : me(e.closeButtonColor),
+      e.Ae() ? void 0 : le(e.closeButtonColor),
       () => {
-        e.he(c);
-      }
+        e.ye(d);
+      },
     );
-    c.appendChild(b), i && (b.style.zIndex = (i + 2).toString());
-    const p = document.createElement("div");
-    p.className = "ab-message-text";
-    const g = (e.messageAlignment || e.Le).toLowerCase();
-    p.className += " " + g + "-aligned";
-    let f = !1;
-    const h = document.createElement("div");
-    if (((h.className = "ab-image-area"), e.imageUrl)) {
+    d.appendChild(p), i && (p.style.zIndex = (i + 2).toString());
+    const g = document.createElement("div");
+    g.className = "ab-message-text";
+    const f = (e.messageAlignment || e.Te).toLowerCase();
+    g.className += " " + f + "-aligned";
+    let h = !1;
+    const j = document.createElement("div");
+    if (((j.className = "ab-image-area"), e.imageUrl)) {
       if (e.cropType === InAppMessage.CropType.CENTER_CROP) {
         const o = document.createElement("span");
         (o.className = "ab-center-cropped-img"),
           (o.style.backgroundImage = "url(" + e.imageUrl + ")"),
           o.setAttribute("role", "img"),
           o.setAttribute("aria-label", "Modal Image"),
-          e.Ie(o),
-          h.appendChild(o);
+          e.Be(o),
+          j.appendChild(o);
       } else {
         const o = document.createElement("img");
         if (
           (o.setAttribute("src", e.imageUrl),
-          e.Ie(o),
+          e.Be(o),
           0 === document.querySelectorAll(".ab-iam-img-loading").length)
         ) {
-          f = !0;
+          h = !0;
           const e = document.querySelectorAll(".ab-iam-root");
           e && e.length > 0 && e[0].classList.add("ab-iam-img-loading"),
-            (l = window.setTimeout(() => {
-              u(!1);
+            (c = window.setTimeout(() => {
+              b(!1);
             }, 6e4)),
             (o.onload = () => {
-              u();
+              b();
             }),
             (o.onerror = () => {
-              u(!1);
+              b(!1);
             });
         }
-        h.appendChild(o);
+        j.appendChild(o);
       }
-      c.appendChild(h), (p.className += " ab-with-image");
+      d.appendChild(j), (g.className += " ab-with-image");
     } else if (e.icon) {
-      h.className += " ab-icon-area";
+      j.className += " ab-icon-area";
       const o = document.createElement("span");
       (o.className = "ab-icon"),
-        e.ye() ||
-          ((o.style.backgroundColor = me(e.iconBackgroundColor)),
-          (o.style.color = me(e.iconColor)));
+        e.Ae() ||
+          ((o.style.backgroundColor = le(e.iconBackgroundColor)),
+          (o.style.color = le(e.iconColor)));
       const a = document.createElement("i");
       (a.className = "fa"),
         a.appendChild(document.createTextNode(e.icon)),
         a.setAttribute("aria-hidden", "true"),
         o.appendChild(a),
-        h.appendChild(o),
-        c.appendChild(h),
-        (p.className += " ab-with-icon");
+        j.appendChild(o),
+        d.appendChild(j),
+        (g.className += " ab-with-icon");
     }
-    if ((oe(p, "touchstart"), e.header && e.header.length > 0)) {
+    if ((oe(g, "touchstart"), e.header && e.header.length > 0)) {
       const o = document.createElement("h1");
-      (o.className = "ab-message-header"), (e.Te = r.Z.Y()), (o.id = e.Te);
+      (o.className = "ab-message-header"), (e.De = r.Z.Y()), (o.id = e.De);
       const a = (
         e.headerAlignment || InAppMessage.TextAlignment.CENTER
       ).toLowerCase();
       (o.className += " " + a + "-aligned"),
-        e.ye() || (o.style.color = me(e.headerTextColor)),
+        e.Ae() || (o.style.color = le(e.headerTextColor)),
         o.appendChild(document.createTextNode(e.header)),
-        p.appendChild(o);
+        g.appendChild(o);
     }
-    return p.appendChild(e.Be()), c.appendChild(p), f || d(), (e.qe = c), c;
-  })(e, a, s, n, t, i);
+    return g.appendChild(e.Ge()), d.appendChild(g), h || u(), (e.Me = d), d;
+  })(e, a, t, n, s, i, u);
   if (e instanceof FullScreenMessage || e instanceof ModalMessage) {
     const o = e instanceof FullScreenMessage ? "ab-fullscreen" : "ab-modal";
-    (u.className += ` ${o} ab-centered`),
-      le.De(e, a, u, t),
-      le.Ge(u),
-      le.He(e.Te, u);
+    (b.className += ` ${o} ab-centered`),
+      ce.He(e, a, b, s),
+      ce.Je(b),
+      ce.Ke(e.De, b);
   } else if (e instanceof SlideUpMessage) {
-    u.className += " ab-slideup";
-    const o = u.getElementsByClassName("ab-close-button")[0];
+    b.className += " ab-slideup";
+    const o = b.getElementsByClassName("ab-close-button")[0];
     if (null != o) {
       const a = ae(
         "0 0 11.38 19.44",
         "M11.38 9.72l-9.33 9.72L0 17.3l7.27-7.58L0 2.14 2.05 0l9.33 9.72z",
-        e.ye() ? void 0 : me(e.closeButtonColor)
+        e.Ae() ? void 0 : le(e.closeButtonColor),
       );
       a.setAttribute("class", "ab-chevron"), o.appendChild(a);
     }
-    let a, s;
-    d(u, c.W, e => {
-      (u.className += " ab-swiped-left"),
+    let a, t;
+    d(b, c.W, (e) => {
+      (b.className += " ab-swiped-left"),
         null != o && null != o.onclick && o.onclick(e);
     }),
-      d(u, c.X, e => {
-        (u.className += " ab-swiped-right"),
+      d(b, c.X, (e) => {
+        (b.className += " ab-swiped-right"),
           null != o && null != o.onclick && o.onclick(e);
       }),
       e.slideFrom === InAppMessage.SlideFrom.TOP
-        ? ((a = c.Je), (s = " ab-swiped-up"))
-        : ((a = c.Ke), (s = " ab-swiped-down")),
-      d(u, a, e => {
-        (u.className += s), null != o && null != o.onclick && o.onclick(e);
+        ? ((a = c.Oe), (t = " ab-swiped-up"))
+        : ((a = c.Qe), (t = " ab-swiped-down")),
+      d(b, a, (e) => {
+        (b.className += t), null != o && null != o.onclick && o.onclick(e);
       });
   }
-  return u;
+  return b;
 }

package/src/InAppMessage/display/modal-utils.js

@@ -1,20 +1,20 @@
 import InAppMessage from "../models/in-app-message.js";
 import { _handleBrazeAction as m } from "../../Core/handle-braze-action.js";
 import { logInAppMessageButtonClick } from "../log-in-app-message-button-click.js";
-import { toRgba as me } from "../../util/color-utils.js";
+import { toRgba as le } from "../../util/color-utils.js";
 import { addPassiveEventListener as oe } from "../../util/dom-utils.js";
 import { KeyCodes as lt } from "../../util/key-codes.js";
-const le = {
-  Ge: t => {
+const ce = {
+  Je: (t) => {
     const o = t.querySelectorAll(
-      ".ab-close-button, .ab-message-text, .ab-message-button"
+      ".ab-close-button, .ab-message-text, .ab-message-button",
     );
     let e;
     for (let t = 0; t < o.length; t++) (e = o[t]), (e.tabIndex = 0);
     if (o.length > 0) {
       const e = o[0],
         s = o[o.length - 1];
-      t.addEventListener("keydown", o => {
+      t.addEventListener("keydown", (o) => {
         const a = document.activeElement;
         o.keyCode === lt.oo &&
           (o.shiftKey || (a !== s && a !== t)
@@ -25,26 +25,26 @@ const le = {
       });
     }
   },
-  He: (t, o) => {
+  Ke: (t, o) => {
     o.setAttribute("role", "dialog"),
       o.setAttribute("aria-modal", "true"),
       o.setAttribute("aria-label", "Modal Message"),
       t && o.setAttribute("aria-labelledby", t);
   },
-  De: (t, o, e, s) => {
+  He: (t, o, e, s) => {
     if (t.buttons && t.buttons.length > 0) {
       const a = document.createElement("div");
       (a.className = "ab-message-buttons"), e.appendChild(a);
       const l = e.getElementsByClassName("ab-message-text")[0];
       null != l && (l.className += " ab-with-buttons");
-      const n = a => l => (
-        t.he(e, () => {
+      const n = (a) => (l) => (
+        t.ye(e, () => {
           logInAppMessageButtonClick(a, t),
             a.clickAction === InAppMessage.ClickAction.URI
               ? m(
                   a.uri || "",
                   s || t.openTarget === InAppMessage.OpenTarget.BLANK,
-                  l
+                  l,
                 )
               : a.clickAction === InAppMessage.ClickAction.NEWS_FEED && o();
         }),
@@ -60,14 +60,14 @@ const le = {
         let l = e.text;
         "" === e.text && (l = " "),
           s.appendChild(document.createTextNode(l)),
-          t.ye() ||
-            ((s.style.backgroundColor = me(e.backgroundColor)),
-            (s.style.color = me(e.textColor)),
-            (s.style.borderColor = me(e.borderColor))),
+          t.Ae() ||
+            ((s.style.backgroundColor = le(e.backgroundColor)),
+            (s.style.color = le(e.textColor)),
+            (s.style.borderColor = le(e.borderColor))),
           (s.onclick = n(e)),
           a.appendChild(s);
       }
     }
-  }
+  },
 };
-export default le;
+export default ce;

package/src/InAppMessage/get-deferred-in-app-message.js

@@ -0,0 +1,5 @@
+import e from "../managers/braze-instance.js";
+import se from "./in-app-message-manager-factory.js";
+export function getDeferredInAppMessage() {
+  if (e.rr()) return se.m().Re();
+}

package/src/InAppMessage/in-app-message-factory.js

@@ -12,135 +12,155 @@ export function newInAppMessageFromJson(e) {
   let s = e.type;
   null != s && (s = s.toUpperCase());
   const o = e.message,
-    m = e.text_align_message,
-    l = e.slide_from,
-    n = e.extras,
-    t = e.trigger_id,
+    n = e.text_align_message,
+    m = e.slide_from,
+    t = e.extras,
+    l = e.trigger_id,
     i = e.click_action,
     f = e.uri,
     p = e.open_target,
     a = e.message_close,
-    d = e.duration,
-    u = e.icon,
+    u = e.duration,
+    d = e.icon,
     g = e.image_url,
-    j = e.image_style,
-    w = e.icon_color,
-    c = e.icon_bg_color,
+    c = e.image_style,
+    j = e.icon_color,
+    w = e.icon_bg_color,
     b = e.bg_color,
     h = e.text_color,
     v = e.close_btn_color,
     I = e.header,
-    k = e.text_align_header,
-    x = e.header_text_color,
-    y = e.frame_color,
-    z = [];
-  let A = e.btns;
-  null == A && (A = []);
-  for (let e = 0; e < A.length; e++) z.push(InAppMessageButton.fromJson(A[e]));
-  const F = e.crop_type,
-    J = e.orientation,
-    M = e.animate_in,
-    q = e.animate_out;
-  let B,
-    C = e.html_id,
-    D = e.css;
+    x = e.text_align_header,
+    z = e.header_text_color,
+    A = e.frame_color,
+    F = [];
+  let M = e.btns;
+  null == M && (M = []);
+  for (let e = 0; e < M.length; e++) F.push(InAppMessageButton.fromJson(M[e]));
+  const k = e.crop_type,
+    y = e.orientation,
+    J = e.animate_in,
+    S = e.animate_out;
+  let q,
+    B = e.html_id,
+    C = e.css;
   if (
-    ((null != C && "" !== C && null != D && "" !== D) ||
-      ((C = void 0), (D = void 0)),
-    s === ModalMessage.es || s === InAppMessage.Ee.Ne)
+    ((null != B && "" !== B && null != C && "" !== C) ||
+      ((B = void 0), (C = void 0)),
+    s === ModalMessage.es || s === InAppMessage.qe.Se)
   )
-    B = new ModalMessage(
+    q = new ModalMessage(
       o,
-      m,
       n,
       t,
+      l,
       i,
       f,
       p,
       a,
-      d,
       u,
+      d,
       g,
+      c,
       j,
       w,
-      c,
       b,
       h,
       v,
-      M,
-      q,
+      J,
+      S,
       I,
-      k,
       x,
-      y,
       z,
+      A,
       F,
+      k,
+      B,
       C,
-      D
     );
   else if (s === FullScreenMessage.es)
-    B = new FullScreenMessage(
+    q = new FullScreenMessage(
       o,
-      m,
       n,
       t,
+      l,
       i,
       f,
       p,
       a,
-      d,
       u,
+      d,
       g,
+      c,
       j,
       w,
-      c,
       b,
       h,
       v,
-      M,
-      q,
+      J,
+      S,
       I,
-      k,
       x,
-      y,
       z,
+      A,
       F,
-      J,
+      k,
+      y,
+      B,
       C,
-      D
     );
   else if (s === SlideUpMessage.es)
-    B = new SlideUpMessage(
+    q = new SlideUpMessage(
       o,
-      m,
-      l,
       n,
+      m,
       t,
+      l,
       i,
       f,
       p,
       a,
-      d,
       u,
+      d,
       g,
+      j,
       w,
-      c,
       b,
       h,
       v,
-      M,
-      q,
+      J,
+      S,
+      B,
       C,
-      D
     );
   else {
-    if (s !== HtmlMessage.es && s !== InAppMessage.Ee.Pe)
+    if (
+      s !== HtmlMessage.es &&
+      s !== InAppMessage.qe.Ee &&
+      s !== InAppMessage.qe.Ue
+    )
       return void r.j.error("Ignoring message with unknown type " + s);
     {
       const s = e.message_fields;
-      (B = new HtmlMessage(o, n, t, a, d, M, q, y, C, D, s)),
-        (B.trusted = e.trusted || !1);
+      (q = new HtmlMessage(o, t, l, a, u, J, S, A, B, C, s)),
+        (q.trusted = e.trusted || !1);
     }
   }
-  return (B.Ce = s), B;
+  return (q.Pe = s), q;
+}
+export function buttonsFromSerializedInAppMessage(e) {
+  const s = [];
+  for (const o of e)
+    s.push(
+      new InAppMessageButton(
+        o.text,
+        o.backgroundColor,
+        o.textColor,
+        o.borderColor,
+        o.clickAction,
+        o.uri,
+        o.id,
+      ),
+    );
+  return s;
 }

package/src/InAppMessage/in-app-message-manager-factory.js

@@ -1,16 +1,16 @@
 import aa from "./in-app-message-manager.js";
 import e from "../managers/braze-instance.js";
-const ea = {
+const se = {
   i: null,
   t: !1,
   m: () => (
-    ea.o(), ea.i || (ea.i = new aa(e.ar(), e.aa(), e.l(), e.ir())), ea.i
+    se.o(), se.i || (se.i = new aa(e.ar(), e.aa(), e.l(), e.ir())), se.i
   ),
   o: () => {
-    ea.t || (e.g(ea), (ea.t = !0));
+    se.t || (e.g(se), (se.t = !0));
   },
   destroy: () => {
-    (ea.i = null), (ea.t = !1);
-  }
+    (se.i = null), (se.t = !1);
+  },
 };
-export default ea;
+export default se;