@braze/web-sdk/src/InAppMessage/ui/show-in-app-message.js

Braze SDK for web sites and other JS platforms.

import r, { OPTIONS as w } from "../../managers/braze-instance.js";
import ControlMessage from "../models/control-message.js";
import HtmlMessage from "../models/html-message.js";
import InAppMessage from "../models/in-app-message.js";
import SlideUpMessage from "../models/slide-up-message.js";
import me from "../display/get-animation-effect.js";
import de from "../display/in-app-message-to-html.js";
import { logInAppMessageImpression } from "../log-in-app-message-impression.js";
import {
  ORIENTATION as fe,
  WindowUtils as no,
} from "../../util/window-utils.js";
import { isURIJavascriptOrData as X } from "../../util/url-utils.js";
import { KeyCodes as mt } from "../../util/key-codes.js";
import { setupInAppMessageUI as ss } from "../../ui/js/index.js";
import { logger as N } from "../../../shared-lib/index.js";
import { toRgba as le } from "../../util/color-utils.js";
import { BRAZE_MUST_BE_INITIALIZED_ERROR as p } from "../../common/constants.js";
import { isIFrame as It } from "../utils/in-app-message-utils.js";
import ge from "../../l10n/l10n-manager-factory.js";
export function showInAppMessage(e, t, o) {
  if (!r.rr()) return;
  if ((ss(), null == e)) return !1;
  if (e instanceof ControlMessage)
    return (
      N.info(
        "User received control for a multivariate test, logging to Braze servers.",
      ),
      logInAppMessageImpression(e),
      !0
    );
  if (!(e instanceof InAppMessage)) return !1;
  if (e.constructor === InAppMessage) return !1;
  e.Lh();
  const s = e instanceof HtmlMessage;
  if (s && !e.trusted && !r.tr())
    return (
      N.error(
        'HTML in-app messages are disabled. Use the "allowUserSuppliedJavascript" option for braze.initialize to enable these messages.',
      ),
      !1
    );
  if ((null == t && (t = document.body), e.wo())) {
    if (t.querySelectorAll(".ab-modal-interactions").length > 0)
      return (
        N.info(
          `Cannot show in-app message ${e.message} because another message is being shown.`,
        ),
        !1
      );
  }
  if (no.Uo()) {
    const t = no.Jo();
    if (
      (t === fe.PORTRAIT &&
        e.orientation === InAppMessage.Orientation.LANDSCAPE) ||
      (t === fe.LANDSCAPE &&
        e.orientation === InAppMessage.Orientation.PORTRAIT)
    ) {
      const o = t === fe.PORTRAIT ? "portrait" : "landscape",
        s =
          e.orientation === InAppMessage.Orientation.PORTRAIT
            ? "portrait"
            : "landscape";
      return (
        N.info(
          `Not showing ${s} in-app message ${e.message} because the screen is currently ${o}`,
        ),
        !1
      );
    }
  }
  if (!r.tr()) {
    let t = !1;
    if (e.buttons && e.buttons.length > 0) {
      const o = e.buttons;
      for (let e = 0; e < o.length; e++)
        if (o[e].clickAction === InAppMessage.ClickAction.URI) {
          const s = o[e].uri;
          t = X(s);
        }
    } else e.clickAction === InAppMessage.ClickAction.URI && (t = X(e.uri));
    if (t)
      return (
        N.error(
          'Javascript click actions are disabled. Use the "allowUserSuppliedJavascript" option for braze.initialize to enable these actions.',
        ),
        !1
      );
  }
  const i = document.createElement("div");
  if (
    ((i.className = "ab-iam-root v3"),
    (i.className += me(e)),
    i.setAttribute("role", "complementary"),
    e.bo() && (i.id = e.htmlId),
    r.ee(w.No) && (i.style.zIndex = (r.ee(w.No) + 1).toString()),
    t.appendChild(i),
    e.lo())
  ) {
    const t = document.createElement("style");
    (t.innerHTML = e.css),
      (t.id = e.do()),
      null != r.ee(w.er) && t.setAttribute("nonce", r.ee(w.er)),
      document.getElementsByTagName("head")[0].appendChild(t);
  }
  const n = e instanceof SlideUpMessage,
    a = de(
      e,
      () => {
        import("../../Feed/ui/show-feed.js").then((e) => {
          r._t() ? e.showFeed() : N.error(p);
        });
      },
      (t) => {
        if (e.wo() && e.Po()) {
          const o = document.createElement("div");
          if (
            ((o.className = "ab-page-blocker"),
            e.lo() || (o.style.backgroundColor = le(e.frameColor)),
            r.ee(w.No) && (o.style.zIndex = r.ee(w.No).toString()),
            i.appendChild(o),
            !r.ee(w.mh))
          ) {
            const s = new Date().valueOf();
            o.onclick = (o) => {
              new Date().valueOf() - s > InAppMessage.ph &&
                (e.ll(t), o.stopPropagation());
            };
          }
          i.appendChild(t), t.focus(), e.Ah(i);
        } else if (n) {
          const o = document.querySelectorAll(".ab-slideup");
          let s = null;
          for (let e = o.length - 1; e >= 0; e--)
            if (o[e] !== t) {
              s = o[e];
              break;
            }
          if (e.slideFrom === InAppMessage.SlideFrom.TOP) {
            let e = 0;
            null != s && (e = s.offsetTop + s.offsetHeight),
              (t.style.top = Math.max(e, 0) + "px");
          } else {
            let e = 0;
            null != s &&
              (e =
                (window.innerHeight || document.documentElement.clientHeight) -
                s.offsetTop),
              (t.style.bottom = Math.max(e, 0) + "px");
          }
        } else if (s && !r.ee(w.mh)) {
          const o = e;
          It(t) &&
            t.contentWindow &&
            t.contentWindow.addEventListener("keydown", function (e) {
              e.keyCode === mt._h && o.closeMessage();
            });
        }
        logInAppMessageImpression(e),
          e.dismissType === InAppMessage.DismissType.AUTO_DISMISS &&
            setTimeout(() => {
              i.contains(t) && e.ll(t);
            }, e.duration),
          "function" == typeof o && o();
      },
      (e) => {
        N.info(e);
      },
      r.ee(w.Ko),
      r.ee(w.No),
      r.ee(w.er),
      t,
      ge.ea().Oo(),
    );
  return (s || n) && (i.appendChild(a), e.Ah(i)), !0;
}