@mrrocket/sdk 0.16.0 → 0.17.0

package/dist/react-native/index.js

@@ -51,7 +51,7 @@ module.exports = __toCommonJS(native_exports);
 var import_react3 = require("react");
 
 // src/core.ts
-var SDK_VERSION = "0.16.0";
+var SDK_VERSION = "0.17.0";
 var propOf = (person, name) => {
   const want = name.trim().toLowerCase();
   for (const [k, v] of Object.entries(person)) if (k.toLowerCase() === want) return v;
@@ -242,9 +242,9 @@ var call = async (url, init, signal) => {
 };
 var createApi = (c) => {
   const base = `${c.host}/api/sdk`;
-  const who = { key: c.apiKey, distinctId: c.distinctId, user: c.user, userHash: c.userHash };
+  const who2 = { key: c.apiKey, distinctId: c.distinctId, user: c.user, userHash: c.userHash };
   const me = { key: c.apiKey, distinctId: c.distinctId, userHash: c.userHash };
-  const post = (path, body, signal) => call(`${base}${path}`, { method: "POST", body: JSON.stringify({ ...who, ...body }) }, signal);
+  const post = (path, body, signal) => call(`${base}${path}`, { method: "POST", body: JSON.stringify({ ...who2, ...body }) }, signal);
   return {
     list: (o, signal) => call(`${base}/feedback?${qs({ ...me, board: o.board, sort: o.sort, q: o.q })}`, void 0, signal),
     post: (id, signal) => call(`${base}/feedback/${encodeURIComponent(id)}?${qs(me)}`, void 0, signal),
@@ -358,6 +358,25 @@ var matchesTrigger = (trigger, event) => {
   return t === e || SIGNUP.has(t) && SIGNUP.has(e);
 };
 var startsOnLoad = (trigger) => /^(first (launch|visit|open|session|login|sign ?in|app open)|app (opened|launched)|on load|every visit|always)?$/i.test(trigger.trim());
+var isPageTrigger = (trigger) => trigger.trim().startsWith("/");
+var manual = (trigger) => eventSlug(trigger) === "from_a_checklist";
+var videoEmbed = (url) => {
+  const u = (url ?? "").trim();
+  if (!/^https?:\/\//i.test(u)) return null;
+  let m = u.match(/^https?:\/\/(?:www\.|m\.)?(?:youtube\.com\/(?:watch\?(?:.*&)?v=|embed\/|shorts\/|live\/)|youtu\.be\/|youtube-nocookie\.com\/embed\/)([\w-]{6,20})/i);
+  if (m) return { kind: "iframe", src: `https://www.youtube-nocookie.com/embed/${m[1]}?rel=0` };
+  m = u.match(/^https?:\/\/(?:www\.|player\.)?vimeo\.com\/(?:video\/)?(\d{4,12})/i);
+  if (m) return { kind: "iframe", src: `https://player.vimeo.com/video/${m[1]}?dnt=1` };
+  m = u.match(/^https?:\/\/(?:www\.)?loom\.com\/(?:share|embed)\/([\w-]{8,64})/i);
+  if (m) return { kind: "iframe", src: `https://www.loom.com/embed/${m[1]}` };
+  if (/\.(mp4|webm|mov|m4v)(\?|#|$)/i.test(u) || /\/media\/uploads\//.test(u)) return { kind: "file", src: u };
+  return null;
+};
+var mediaOf = (step) => {
+  const m = step.media;
+  if (!m || m.kind !== "image" && m.kind !== "video" || !/^https?:\/\//i.test(m.url ?? "")) return void 0;
+  return m.kind === "video" && !videoEmbed(m.url) ? void 0 : m;
+};
 var runId = () => `cf_${Math.random().toString(36).slice(2, 10)}${Date.now().toString(36)}`;
 var discounted = (amount, percent) => Math.round(amount * (1 - percent / 100) * 100) / 100;
 var money = (amount, currency) => {
@@ -405,6 +424,7 @@ var createFlows = (env) => {
   const seenEvents = /* @__PURE__ */ new Set();
   const now = () => env.now?.() ?? Date.now();
   let timer = null;
+  let returnTo = null;
   const flows = () => config?.onboarding ?? [];
   const flowById = (id) => id ? flows().find((f) => f.id === id) : void 0;
   const prog = (id) => {
@@ -542,7 +562,14 @@ var createFlows = (env) => {
           shown.add(`s:${i.id}`);
           env.track(ONBOARDING_EVENT, { flow: flow.id, step: i.id, kind: "checklist", action: "shown" });
         }
-      return { type: "checklist", flow, items: items.map((s) => ({ step: s, done: p.done.has(s.id) })) };
+      return {
+        type: "checklist",
+        flow,
+        items: items.map((s) => {
+          const tour = s.startsTour && s.startsTour !== flow.id ? flowById(s.startsTour) : void 0;
+          return { step: s, done: p.done.has(s.id), ...tour && nodesOf(tour).length ? { tour } : {} };
+        })
+      };
     }
     if (!shown.has(`s:${step.id}`)) {
       shown.add(`s:${step.id}`);
@@ -576,7 +603,28 @@ var createFlows = (env) => {
     }
     const ob = onboardingView();
     if (ob) return ob;
-    if (active && !holding) active = null;
+    if (active && !holding) {
+      const back = returnTo;
+      const ended = active;
+      returnTo = null;
+      active = null;
+      const list = back ? flowById(back.flow) : void 0;
+      if (back && list) {
+        const item = stepsIn(nodesOf(list)).find((s) => s.id === back.step);
+        const p = prog(list.id);
+        if (item && !item.event && !progress.get(ended)?.dismissed && !p.done.has(item.id)) {
+          markDone(p, item.id);
+          record({ flow: list.id, step: item.id, kind: "checklist", action: "completed" });
+        }
+        active = list.id;
+        const again = onboardingView();
+        if (again) return again;
+        if (!holding) active = null;
+      } else if (known) {
+        const after = flowById(ended)?.trigger;
+        Promise.resolve().then(() => autoStart(after));
+      }
+    }
     const m = messages.find((x) => !handled.has(x.id));
     return m ? { type: "message", message: m } : null;
   };
@@ -601,10 +649,15 @@ var createFlows = (env) => {
     emit();
     return true;
   };
-  const autoStart = () => {
+  const allowed = (f) => f.audience !== "signed_in" || !!env.personId();
+  const autoStart = (after) => {
     if (!auto || active || !known) return;
     if (!env.personId() && !env.storage?.()) return;
-    const next = flows().find((f) => startsOnLoad(f.trigger) && nodesOf(f).length && !finished(f));
+    const path = env.path?.();
+    const same2 = after && !manual(after) ? eventSlug(after) : "";
+    const next = flows().find(
+      (f) => (isPageTrigger(f.trigger) ? path !== void 0 && pageMatches(f.trigger, path) : startsOnLoad(f.trigger) || !!same2 && eventSlug(f.trigger) === same2) && allowed(f) && nodesOf(f).length && !finished(f)
+    );
     if (next) start(next);
   };
   const refresh = () => {
@@ -614,6 +667,7 @@ var createFlows = (env) => {
       seenEvents.clear();
       handled.clear();
       active = null;
+      returnTo = null;
       loadedFor = void 0;
     }
     progressFor = pid;
@@ -652,9 +706,9 @@ var createFlows = (env) => {
   };
   const offerAt = (c) => c.round > 1 ? { round: 2 } : c.rule >= 0 ? { rule: c.rule } : {};
   const toOffer = (c) => {
-    const who = { answer: c.answer, plan: c.options.plan, months: monthsSince(c.options.customerSince, env.now?.()) };
+    const who2 = { answer: c.answer, plan: c.options.plan, months: monthsSince(c.options.customerSince, env.now?.()) };
     const rules = c.flow.rules?.[c.reason] ?? [];
-    c.rule = rules.findIndex((r) => ruleMatches(r, who));
+    c.rule = rules.findIndex((r) => ruleMatches(r, who2));
     c.offer = c.rule < 0 ? c.flow.offers[c.reason] : rules[c.rule].offer ?? void 0;
     c.round = 1;
     c.screen = c.offer ? "offer" : "confirm";
@@ -723,6 +777,7 @@ var createFlows = (env) => {
     },
     refresh,
     onEvent: (name) => {
+      if (name === "$pageview") autoStart();
       if (!name || name.startsWith("$")) return;
       const slug = eventSlug(name);
       const fresh = !!slug && !seenEvents.has(slug);
@@ -743,12 +798,12 @@ var createFlows = (env) => {
         emit();
       } else if (fresh) save();
       if (!auto || !env.personId() && !env.storage?.()) return;
-      const next = flows().find((f) => nodesOf(f).length && matchesTrigger(f.trigger, name) && !finished(f));
+      const next = flows().find((f) => nodesOf(f).length && !manual(f.trigger) && matchesTrigger(f.trigger, name) && allowed(f) && !finished(f));
       if (next) start(next);
     },
     openCancelFlow,
     startOnboarding: (id) => {
-      const f = id ? flowById(id) : flows().find((x) => nodesOf(x).length && !finished(x));
+      const f = id ? flowById(id) : flows().find((x) => nodesOf(x).length && !manual(x.trigger) && !finished(x));
       if (!f || !nodesOf(f).length) return false;
       const p = prog(f.id);
       p.dismissed = false;
@@ -844,6 +899,8 @@ var createFlows = (env) => {
         env.track(ONBOARDING_EVENT, { flow: v.flow.id, step: v.step.id, kind: v.step.kind, action: "completed" });
         save();
         emit();
+        const url = v.step.kind === "modal" ? safeUrl(v.step.url) : void 0;
+        if (url) env.openUrl?.(url);
       },
       check: (stepId) => {
         const v = onboardingView();
@@ -860,9 +917,26 @@ var createFlows = (env) => {
         if (!v || v.type !== "step" && v.type !== "checklist") return;
         prog(v.flow.id).dismissed = true;
         env.track(ONBOARDING_EVENT, { flow: v.flow.id, ...v.type === "step" ? { step: v.step.id } : {}, action: "dismissed" });
-        active = null;
+        active = returnTo && returnTo.flow !== v.flow.id && flowById(returnTo.flow) ? returnTo.flow : null;
+        returnTo = null;
+        save();
+        emit();
+      },
+      startTour: (stepId) => {
+        const v = onboardingView();
+        if (v?.type !== "checklist") return false;
+        const tour = v.items.find((i) => i.step.id === stepId)?.tour;
+        if (!tour) return false;
+        const p = prog(tour.id);
+        p.done.clear();
+        p.at.clear();
+        p.dismissed = false;
+        returnTo = { flow: v.flow.id, step: stepId };
+        active = tour.id;
+        env.track(ONBOARDING_EVENT, { flow: tour.id, action: "started", from: v.flow.id });
         save();
         emit();
+        return true;
       }
     },
     message: {
@@ -1474,7 +1548,7 @@ var createClient = (options, deps) => {
     if (errorsSeen.has(mark)) return;
     errorsSeen.add(mark);
     errorsSent++;
-    const who = sendId();
+    const who2 = sendId();
     errorQueue.push({
       ...d,
       mechanism,
@@ -1483,7 +1557,7 @@ var createClient = (options, deps) => {
       ts: now(),
       crumbs: crumbs.slice(),
       ...release ? { release } : {},
-      ...who ? { distinctId: who } : {},
+      ...who2 ? { distinctId: who2 } : {},
       ...session ? { sessionId: session.id } : {}
     });
     recorder?.mark({ kind: "error", path: currentScreen ?? "/", label: clip2(d.message, 120) });
@@ -1598,20 +1672,20 @@ var createClient = (options, deps) => {
     await loadedNow();
     if (!apiKey || consent === "off") return { status: "error", reason: !apiKey ? "No public key." : "The consent is off." };
     if (!identified) return { status: "not-signed-in" };
-    const who = identified;
-    const userHash = hashOf(who);
+    const who2 = identified;
+    const userHash = hashOf(who2);
     try {
       const permission = await deps.push.permission(o.ask !== false);
       if (permission !== "granted") return { status: permission === "denied" ? "denied" : "not-asked" };
       const token = await deps.push.token(o.projectId);
       if (!token) return { status: "unavailable", reason: "This device has no push token (a simulator, or no EAS project id)." };
-      const status = await post("/api/sdk/push", JSON.stringify({ key: apiKey, distinctId: who, userHash, platform: "expo", token, app: context }));
+      const status = await post("/api/sdk/push", JSON.stringify({ key: apiKey, distinctId: who2, userHash, platform: "expo", token, app: context }));
       if (status < 200 || status >= 300) {
         warn(`Push registration was rejected with ${status || "no answer"}. Check the public key and the host.`);
         return { status: "error", reason: `MRRocket answered ${status || "nothing"}.` };
       }
       pushToken = token;
-      pushFor = who;
+      pushFor = who2;
       pushHash = userHash;
       listenForOpens();
       debug("Registered for push.");
@@ -2165,6 +2239,22 @@ var MRRocketFlows = ({ flows, paywall, appearance = {} }) => {
       ];
     return sheet([top, ...body, error], flows.cancel.close);
   }
+  const media = (s) => {
+    const m2 = mediaOf(s);
+    if (!m2) return null;
+    if (m2.kind === "image")
+      return RN.Image ? (0, import_react.createElement)(RN.Image, {
+        key: "media",
+        source: { uri: m2.url },
+        accessibilityLabel: m2.alt,
+        resizeMode: "cover",
+        style: { width: "100%", aspectRatio: 16 / 9, borderRadius: 10, backgroundColor: p.soft }
+      }) : null;
+    const v2 = videoEmbed(m2.url);
+    const open = v2?.kind === "file" ? v2.src : m2.url;
+    return RN.Linking ? btn("\u25B6 Watch the video", "secondary", () => void RN.Linking?.openURL(open).catch(() => {
+    })) : null;
+  };
   if (v.type === "step")
     return sheet(
       [
@@ -2174,6 +2264,7 @@ var MRRocketFlows = ({ flows, paywall, appearance = {} }) => {
           v.total > 1 ? muted(`Step ${v.index + 1} of ${v.total}`) : null,
           close("Close the tour", flows.onboarding.dismiss)
         ),
+        media(v.step),
         title(v.step.title),
         v.step.body ? muted(v.step.body, { fontSize: 15 }) : null,
         btn(v.step.button || (v.last ? "Done" : "Next"), "primary", flows.onboarding.next)
@@ -2194,13 +2285,14 @@ var MRRocketFlows = ({ flows, paywall, appearance = {} }) => {
         ),
         muted(`${done} of ${v.items.length} done`),
         ...v.items.map(
-          ({ step, done: d }) => (0, import_react.createElement)(
+          ({ step, done: d, tour }) => (0, import_react.createElement)(
             RN.Pressable,
             {
               key: step.id,
-              disabled: d || !!step.event,
-              onPress: () => flows.onboarding.check(step.id),
-              accessibilityRole: "checkbox",
+              // 0.17.0: an item that starts a tour opens it; finishing the tour ticks it.
+              disabled: d || !!step.event && !tour,
+              onPress: () => tour ? flows.onboarding.startTour(step.id) : flows.onboarding.check(step.id),
+              accessibilityRole: tour && !d ? "button" : "checkbox",
               accessibilityState: { checked: d },
               style: { flexDirection: "row", gap: 10, alignItems: "flex-start", paddingVertical: 6 }
             },
@@ -2672,7 +2764,7 @@ var SurveySheet = ({ survey, api, p, onDone }) => {
 var MRRocketSurveys = ({ client, appearance }) => {
   const p = usePalette(appearance);
   const [survey, setSurvey] = (0, import_react2.useState)(null);
-  const [who, setWho] = (0, import_react2.useState)(() => client.getDistinctId());
+  const [who2, setWho] = (0, import_react2.useState)(() => client.getDistinctId());
   (0, import_react2.useEffect)(() => client.subscribe(() => setWho(client.getDistinctId())), [client]);
   (0, import_react2.useEffect)(() => {
     let stop = false;
@@ -2693,7 +2785,7 @@ var MRRocketSurveys = ({ client, appearance }) => {
       clearTimeout(timer);
       ctrl.abort();
     };
-  }, [client, who]);
+  }, [client, who2]);
   const done = (0, import_react2.useCallback)(() => {
     setSurvey((cur) => {
       if (cur) client.markSurveyDone(cur.s.id);
@@ -2815,6 +2907,7 @@ var POLL_IDLE_MS = 3e4;
 var WAITING_FOR_MS = 10 * 6e4;
 var EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
 var whoLabel = { visitor: "You", team: "Team", ai: "AI agent", auto: "Team" };
+var who = (from, agentName) => from === "ai" && agentName?.trim() || whoLabel[from];
 var msgView = "home";
 var messengerOpen = opener();
 var openAt = (v = "home") => {
@@ -3199,7 +3292,7 @@ var MessengerSheet = ({
           k.text(`\u{1F4C4} ${a.title}`, { fontSize: 13 })
         )
       ),
-      m.at ? k.muted(`${mine ? "" : `${whoLabel[m.from]} \xB7 `}${isPending ? "Sending\u2026" : timeAgo(m.at)}`, { fontSize: 11, textAlign: mine ? "right" : "left", paddingHorizontal: 6 }) : null
+      m.at ? k.muted(`${mine ? "" : `${who(m.from, o.agentName)} \xB7 `}${isPending ? "Sending\u2026" : timeAgo(m.at)}`, { fontSize: 11, textAlign: mine ? "right" : "left", paddingHorizontal: 6 }) : null
     );
   };
   const row = (a) => (0, import_react2.createElement)(
@@ -3257,7 +3350,7 @@ var MessengerSheet = ({
             RN3.View,
             { key: "r", style: { flexDirection: "row", alignItems: "center", gap: 10 } },
             title ? teamMark(title, alpha(p.accent, 0.16), p.accent, 26) : null,
-            (0, import_react2.createElement)(RN3.View, { style: { flex: 1, gap: 1 } }, (0, import_react2.createElement)(RN3.Text, { numberOfLines: 1, style: { color: hu.fg, fontSize: 14, fontWeight: "500" } }, last.body || (last.attachments?.length ? `Sent ${last.attachments.length === 1 ? last.attachments[0].name : `${last.attachments.length} files`}` : "")), k.muted(`${last.from === "visitor" ? "You" : whoLabel[last.from]} \xB7 ${timeAgo(last.at)}`, { fontSize: 11.5 })),
+            (0, import_react2.createElement)(RN3.View, { style: { flex: 1, gap: 1 } }, (0, import_react2.createElement)(RN3.Text, { numberOfLines: 1, style: { color: hu.fg, fontSize: 14, fontWeight: "500" } }, last.body || (last.attachments?.length ? `Sent ${last.attachments.length === 1 ? last.attachments[0].name : `${last.attachments.length} files`}` : "")), k.muted(`${last.from === "visitor" ? "You" : who(last.from, o.agentName)} \xB7 ${timeAgo(last.at)}`, { fontSize: 11.5 })),
             chat.unseen.length ? (0, import_react2.createElement)(RN3.View, { style: { width: 8, height: 8, borderRadius: 4, backgroundColor: p.danger } }) : glyph("next", p.muted, 14)
           )
         ], { paddingVertical: 10, paddingHorizontal: 12 })
@@ -3292,7 +3385,6 @@ var MessengerSheet = ({
         RN3.View,
         { style: { paddingHorizontal: 12, paddingTop: 8, paddingBottom: 6, gap: 8 } },
         chat.error ? k.text(chat.error, { color: p.danger, fontSize: 12 }) : null,
-        needEmail ? k.field({ value: email, onChange: setEmail, placeholder: "Your email (optional), so we can follow up", email: true, max: 200, style: { borderWidth: emailOk ? 0 : 1, borderColor: p.danger, borderRadius: r.field, paddingHorizontal: 16, backgroundColor: hu.surface, ...surf } }) : null,
         // Photos picked for the next message, each with a way to take it out again.
         photos.length ? (0, import_react2.createElement)(
           RN3.View,
@@ -3320,6 +3412,15 @@ var MessengerSheet = ({
         (0, import_react2.createElement)(
           RN3.View,
           { style: { gap: 2, borderRadius: 20, paddingTop: 10, paddingBottom: 6, paddingRight: 6, paddingLeft: 16, backgroundColor: hu.surface, ...surf } },
+          // The optional email: the box's first line, under a hairline the message follows.
+          needEmail ? k.field({
+            value: email,
+            onChange: setEmail,
+            placeholder: "Email for our reply (optional)",
+            email: true,
+            max: 200,
+            style: { minHeight: 0, marginRight: 10, marginBottom: 4, paddingHorizontal: 0, paddingTop: 0, paddingBottom: 8, borderWidth: 0, borderRadius: 0, borderBottomWidth: 1, borderBottomColor: emailOk ? p.line : p.danger, backgroundColor: "transparent", fontSize: 13.5 }
+          }) : null,
           k.field({ value: body, onChange: setBody, placeholder: "Write a message\u2026", multiline: true, max: 4e3, style: { minHeight: 28, maxHeight: 120, borderWidth: 0, paddingHorizontal: 0, paddingVertical: 4, backgroundColor: "transparent" } }),
           (0, import_react2.createElement)(
             RN3.View,
@@ -3371,11 +3472,13 @@ var MessengerSheet = ({
         key: v,
         onPress: () => setView(v),
         accessibilityRole: "tab",
+        accessibilityLabel: name,
         accessibilityState: { selected: on },
-        style: { flex: 1, flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 6, height: 36, borderRadius: 18, ...on ? { backgroundColor: hu.segment, ...segLift } : {} }
+        // Only the open tab carries its name; the others are icons, so the bar fits a narrow phone.
+        style: { ...on ? { flex: 1 } : { width: 48 }, flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 6, height: 36, borderRadius: 18, ...on ? { backgroundColor: hu.segment, ...segLift } : {} }
       },
       glyph(icon, on ? hu.fg : hu.muted, 17),
-      k.text(name, { fontSize: 13.5, fontWeight: "500", color: on ? hu.fg : hu.muted }),
+      on ? k.text(name, { fontSize: 13.5, fontWeight: "500", color: hu.fg }) : null,
       badge ? (0, import_react2.createElement)(RN3.View, { style: { position: "absolute", top: 7, right: 12, width: 8, height: 8, borderRadius: 4, backgroundColor: p.danger } }) : null
     );
   };
@@ -3389,7 +3492,7 @@ var MessengerSheet = ({
   const head = (0, import_react2.createElement)(
     RN3.View,
     { key: "head", style: { flexDirection: "row", alignItems: "center", gap: 8, paddingLeft: 12, paddingRight: 12, paddingTop: 12, paddingBottom: 6, backgroundColor: ground } },
-    typeof view !== "string" ? back("help", "All articles") : view === "messages" ? back("home", "Back to home") : view === "home" && (o.logo || title) ? o.logo ? (0, import_react2.createElement)(RN3.Image, { key: "logo", source: { uri: o.logo }, accessibilityIgnoresInvertColors: true, style: { width: 28, height: 28, borderRadius: 8, marginLeft: 4 } }) : teamMark(title, alpha(p.accent, 0.16), p.accent, 28) : null,
+    typeof view !== "string" ? back("help", "All articles") : view === "messages" ? back("home", "Back to home") : view === "home" && (o.logo || title) ? o.logo ? (0, import_react2.createElement)(RN3.Image, { key: "logo", source: { uri: o.logo }, accessibilityIgnoresInvertColors: true, resizeMode: "contain", style: { height: 28, aspectRatio: 1, maxWidth: 132, borderRadius: 8, marginLeft: 4 } }) : teamMark(title, alpha(p.accent, 0.16), p.accent, 28) : null,
     // In the chat: who answers, in the middle.
     view === "messages" && title ? (0, import_react2.createElement)(
       RN3.View,
@@ -3453,6 +3556,7 @@ var MRRocketMessenger = ({ client, appearance, options: given = {} }) => {
     corners: look.corners,
     header: look.header,
     logo: look.logo,
+    agentName: look.agentName,
     ...defined
   } : given;
   const p = usePalette({ theme: appearance?.theme ?? look?.theme, accent: appearance?.accent ?? look?.accent });
@@ -3542,7 +3646,7 @@ var MRRocketMessenger = ({ client, appearance, options: given = {} }) => {
         elevation: 6
       }
     },
-    k.muted(`${whoLabel[banner.from]}${unseen > 1 ? ` \xB7 ${unseen} new` : ""}`, { fontWeight: "600", fontSize: 12 }),
+    k.muted(`${who(banner.from, options.agentName)}${unseen > 1 ? ` \xB7 ${unseen} new` : ""}`, { fontWeight: "600", fontSize: 12 }),
     (0, import_react2.createElement)(RN3.Text, { numberOfLines: 3, style: { color: p.fg, fontSize: 15, lineHeight: 20 } }, banner.body)
   ) : null;
   if (!launcher && !toast && !open) return null;