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

Braze SDK for web sites and other JS platforms.

import r, { OPTIONS as z } 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 le from "../display/in-app-message-to-html.js";
import { logInAppMessageImpression } from "../log-in-app-message-impression.js";
import {
  ORIENTATION as pe,
  WindowUtils as no,
} from "../../util/window-utils.js";
import { isURIJavascriptOrData as tt } from "../../util/url-utils.js";
import { KeyCodes as ie } 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 ae } from "../../util/color-utils.js";
import { isIFrame as At } from "../utils/in-app-message-utils.js";
import fe from "../../l10n/l10n-manager-factory.js";
export function showInAppMessage(e, t, s) {
  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._h();
  const o = e instanceof HtmlMessage;
  if (o && !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.vo())) {
    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.No();
    if (
      (t === pe.PORTRAIT &&
        e.orientation === InAppMessage.Orientation.LANDSCAPE) ||
      (t === pe.LANDSCAPE &&
        e.orientation === InAppMessage.Orientation.PORTRAIT)
    ) {
      const s = t === pe.PORTRAIT ? "portrait" : "landscape",
        o =
          e.orientation === InAppMessage.Orientation.PORTRAIT
            ? "portrait"
            : "landscape";
      return (
        N.info(
          `Not showing ${o} in-app message ${e.message} because the screen is currently ${s}`,
        ),
        !1
      );
    }
  }
  if (!r.tr()) {
    let t = !1;
    if (e.buttons && e.buttons.length > 0) {
      const s = e.buttons;
      for (let e = 0; e < s.length; e++)
        if (s[e].clickAction === InAppMessage.ClickAction.URI) {
          const o = s[e].uri;
          t = tt(o);
        }
    } else e.clickAction === InAppMessage.ClickAction.URI && (t = tt(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)),
    e.language && !o && (i.lang = e.language),
    e.jo() && (i.id = e.htmlId),
    r.ee(z.Ko) && (i.style.zIndex = (r.ee(z.Ko) + 1).toString()),
    t.appendChild(i),
    e.lo())
  ) {
    const t = document.createElement("style");
    (t.innerHTML = e.css),
      (t.id = e.do()),
      null != r.ee(z.er) && t.setAttribute("nonce", r.ee(z.er)),
      document.getElementsByTagName("head")[0].appendChild(t);
  }
  const n = e instanceof SlideUpMessage,
    a = le(
      e,
      (t) => {
        if (e.vo() && e.Po()) {
          const s = document.createElement("div");
          if (
            ((s.className = "ab-page-blocker"),
            e.lo() || (s.style.backgroundColor = ae(e.frameColor)),
            r.ee(z.Ko) && (s.style.zIndex = r.ee(z.Ko).toString()),
            i.appendChild(s),
            !r.ee(z.Lh))
          ) {
            const o = new Date().valueOf();
            s.onclick = (s) => {
              new Date().valueOf() - o > InAppMessage.Ph &&
                (e.ll(t), s.stopPropagation());
            };
          }
          i.appendChild(t), t.focus(), e.Ah(i);
        } else if (n) {
          const s = document.querySelectorAll(".ab-slideup");
          let o = null;
          for (let e = s.length - 1; e >= 0; e--)
            if (s[e] !== t) {
              o = s[e];
              break;
            }
          if (e.slideFrom === InAppMessage.SlideFrom.TOP) {
            let e = 0;
            null != o && (e = o.offsetTop + o.offsetHeight),
              (t.style.top = Math.max(e, 0) + "px");
          } else {
            let e = 0;
            null != o &&
              (e =
                (window.innerHeight || document.documentElement.clientHeight) -
                o.offsetTop),
              (t.style.bottom = Math.max(e, 0) + "px");
          }
        } else if (o && !r.ee(z.Lh)) {
          const s = e;
          At(t) &&
            t.contentWindow &&
            t.contentWindow.addEventListener("keydown", function (e) {
              e.keyCode === ie.Oh && s.closeMessage();
            });
        }
        logInAppMessageImpression(e),
          e.dismissType === InAppMessage.DismissType.AUTO_DISMISS &&
            setTimeout(() => {
              i.contains(t) && e.ll(t);
            }, e.duration),
          "function" == typeof s && s();
      },
      (e) => {
        N.info(e);
      },
      r.ee(z.Qo),
      r.ee(z.Ko),
      r.ee(z.er),
      t,
      fe.ea().Ro(),
    );
  return (o || n) && (i.appendChild(a), e.Ah(i)), !0;
}