@mrrocket/sdk 0.12.0 → 0.14.0

package/dist/react-native/index.js

@@ -41,6 +41,7 @@ __export(native_exports, {
   useMessenger: () => useMessenger,
   useNavigationTracking: () => useNavigationTracking,
   useOnboarding: () => useOnboarding,
+  usePaywall: () => usePaywall,
   usePush: () => usePush,
   useText: () => useText,
   useVariant: () => useVariant
@@ -49,7 +50,7 @@ module.exports = __toCommonJS(native_exports);
 var import_react3 = require("react");
 
 // src/core.ts
-var SDK_VERSION = "0.12.0";
+var SDK_VERSION = "0.14.0";
 var propOf = (person, name) => {
   const want = name.trim().toLowerCase();
   for (const [k, v] of Object.entries(person)) if (k.toLowerCase() === want) return v;
@@ -805,6 +806,131 @@ var createFlows = (env) => {
   return controller;
 };
 
+// src/paywall.ts
+var PAYWALL_EVENT = "$paywall";
+var paywallPages = (config, w, distinctId) => {
+  const e = w.experiment ? config?.experiments.find((x) => x.key === w.experiment) : void 0;
+  const id = e ? assign(e, distinctId) : w.variants[0]?.id;
+  const v = w.variants.find((x) => x.id === id) ?? w.variants[0];
+  return v ? { variant: v.id, pages: v.pages, test: e?.status === "running" && !e.winner ? e.key : void 0 } : null;
+};
+var createPaywallHost = (env) => {
+  let run = null;
+  const listeners = /* @__PURE__ */ new Set();
+  const emit = () => {
+    for (const l of [...listeners]) {
+      try {
+        l();
+      } catch {
+      }
+    }
+  };
+  const base = () => run ? { paywall: run.w.id, placement: run.w.placement, variant: run.variant } : {};
+  const show = () => {
+    if (run && !run.seen.has(run.index)) {
+      run.seen.add(run.index);
+      env.track(PAYWALL_EVENT, { ...base(), page: run.pages[run.index].id, index: run.index, action: "page" });
+    }
+    emit();
+  };
+  const end = (r) => {
+    const c = run;
+    if (!c) return;
+    run = null;
+    if (r.outcome === "closed") c.options.onClose?.(r);
+    c.resolve(r);
+    emit();
+  };
+  const result = (outcome) => ({
+    outcome,
+    index: run?.index ?? 0,
+    ...run ? { paywall: run.w.id, variant: run.variant } : {},
+    ...outcome !== "closed" && run ? { plan: run.plans.find((p) => p.id === run.plan) } : {}
+  });
+  const buy = () => {
+    const c = run;
+    const plan = c?.plans.find((p) => p.id === c.plan);
+    if (!c || !plan || c.busy) return;
+    if (!c.options.onPurchase) return end(result("chosen"));
+    c.busy = true;
+    c.error = void 0;
+    emit();
+    Promise.resolve().then(() => c.options.onPurchase?.(plan)).then(
+      (ok) => {
+        c.busy = false;
+        if (run !== c) return;
+        if (ok === false) return emit();
+        env.track(PAYWALL_EVENT, { ...base(), page: c.pages[c.index].id, index: c.index, plan: plan.id, action: "purchased" });
+        end(result("purchased"));
+      },
+      () => {
+        c.busy = false;
+        c.error = "The purchase did not go through. Please try again.";
+        emit();
+      }
+    );
+  };
+  return {
+    open: (placement, options = {}) => {
+      if (run) return run.promise;
+      const config = env.config();
+      const w = config?.paywalls?.find((x) => x.placement === placement);
+      const picked = w ? paywallPages(config, w, env.distinctId()) : null;
+      if (!w || !picked?.pages.length) return Promise.resolve({ outcome: "closed", index: 0 });
+      const own = new Map((options.plans ?? []).map((p) => [p.id, p]));
+      const plans = w.plans.map((p) => own.get(p.id) ?? p);
+      let resolve = () => {
+      };
+      const promise = new Promise((r) => resolve = r);
+      const plan = plans.some((p) => p.id === w.highlight) ? w.highlight : plans[0]?.id;
+      run = { w, variant: picked.variant, pages: picked.pages, plans, index: 0, plan, busy: false, seen: /* @__PURE__ */ new Set(), options, resolve, promise };
+      if (picked.test) env.track("$exposure", { experiment: picked.test, variant: picked.variant });
+      show();
+      return promise;
+    },
+    view: () => run ? {
+      paywall: run.w,
+      variant: run.variant,
+      page: run.pages[run.index],
+      index: run.index,
+      total: run.pages.length,
+      last: run.index === run.pages.length - 1,
+      plans: run.plans,
+      plan: run.plan,
+      busy: run.busy,
+      error: run.error
+    } : null,
+    subscribe: (l) => {
+      listeners.add(l);
+      return () => listeners.delete(l);
+    },
+    next: () => {
+      if (!run || run.busy) return;
+      if (run.pages[run.index].kind === "plans" || run.index === run.pages.length - 1) return buy();
+      run.index++;
+      run.error = void 0;
+      show();
+    },
+    back: () => {
+      if (!run || run.busy || !run.index) return;
+      run.index--;
+      run.error = void 0;
+      emit();
+    },
+    pick: (id) => {
+      if (!run || run.busy || !run.plans.some((p) => p.id === id)) return;
+      run.plan = id;
+      run.error = void 0;
+      emit();
+    },
+    close: () => {
+      if (!run || run.busy) return;
+      env.track(PAYWALL_EVENT, { ...base(), index: run.index, action: "closed" });
+      end(result("closed"));
+    }
+  };
+};
+
 // src/rage.ts
 var RageDetector = class {
   constructor(windowMs = 1e3, radius = 30, count = 3) {
@@ -1072,6 +1198,7 @@ var createClient = (options, deps) => {
   const errorQueue = [];
   const errorsSeen = /* @__PURE__ */ new Set();
   let errorsSent = 0;
+  const paywall = createPaywallHost({ config: () => config, distinctId: () => distinctId(), track: (event, props) => record(event, props) });
   const flows = createFlows({
     track: (event, props) => record(event, props),
     personId: () => consent !== "off" ? identified : void 0,
@@ -1632,6 +1759,8 @@ var createClient = (options, deps) => {
     },
     openCancelFlow: (o) => flows.openCancelFlow(o),
     startOnboarding: (id) => flows.startOnboarding(id),
+    openPaywall: (placement, o) => paywall.open(placement, o),
+    paywall,
     registerForPush,
     unregisterForPush,
     flows,
@@ -1697,19 +1826,21 @@ var RN = require("react-native");
 var LIGHT = { bg: "#ffffff", fg: "#1c1d20", muted: "#5d6068", soft: "#f4f5f7", line: "#e4e5e8" };
 var DARK = { bg: "#17181b", fg: "#f1f2f4", muted: "#a9acb3", soft: "#232428", line: "#2e2f35" };
 var months = (n) => `${n} ${n === 1 ? "month" : "months"}`;
-var MRRocketFlows = ({ flows, appearance = {} }) => {
+var MRRocketFlows = ({ flows, paywall, appearance = {} }) => {
   const scheme = RN.useColorScheme?.();
   const dark = appearance.theme === "dark" || (appearance.theme ?? "auto") === "auto" && scheme === "dark";
   const p = { ...dark ? DARK : LIGHT, accent: appearance.accent ?? "#3f76ff", danger: "#d92d20" };
   const [, setTick] = (0, import_react.useState)(0);
   (0, import_react.useEffect)(() => flows.subscribe(() => setTick((t) => t + 1)), [flows]);
+  (0, import_react.useEffect)(() => paywall?.subscribe(() => setTick((t) => t + 1)), [paywall]);
+  const pw = paywall?.view() ?? null;
   const v = flows.view();
   const [comment, setComment] = (0, import_react.useState)("");
   const screen = v?.type === "cancel" ? v.screen : null;
   (0, import_react.useEffect)(() => {
     if (!screen) setComment("");
   }, [screen]);
-  if (!v) return null;
+  if (!v && !pw) return null;
   const text2 = (children, style = {}) => (0, import_react.createElement)(RN.Text, { style: { color: p.fg, fontSize: 15, ...style } }, children);
   const muted = (children, style = {}) => text2(children, { color: p.muted, fontSize: 13, ...style });
   const title = (children) => (0, import_react.createElement)(RN.Text, { accessibilityRole: "header", style: { color: p.fg, fontSize: 18, fontWeight: "700" } }, children);
@@ -1778,6 +1909,71 @@ var MRRocketFlows = ({ flows, appearance = {} }) => {
     accessibilityLabel: placeholder,
     style: { minHeight: 72, borderWidth: 1, borderColor: p.line, borderRadius: 10, padding: 10, color: p.fg, textAlignVertical: "top" }
   });
+  const paywallSheet = (w) => {
+    const pg = w.page;
+    const host = paywall;
+    return sheet(
+      [
+        (0, import_react.createElement)(
+          RN.View,
+          { key: "top", style: { flexDirection: "row", alignItems: "center", gap: 4 } },
+          ...w.total > 1 ? Array.from(
+            { length: w.total },
+            (_, i) => (0, import_react.createElement)(RN.View, { key: i, style: { width: 16, height: 4, borderRadius: 4, backgroundColor: i <= w.index ? p.accent : p.line } })
+          ) : [],
+          close("Close", host.close)
+        ),
+        title(pg.title),
+        pg.body ? muted(pg.body, { fontSize: 15 }) : null,
+        ...pg.kind === "benefits" ? (pg.items ?? []).map(
+          (item, i) => (0, import_react.createElement)(
+            RN.View,
+            { key: `b${i}`, style: { flexDirection: "row", gap: 10, alignItems: "flex-start" } },
+            text2("\u2713", { color: p.accent, fontWeight: "700" }),
+            text2(item, { flex: 1 })
+          )
+        ) : [],
+        ...pg.kind === "proof" ? (pg.quotes ?? []).map(
+          (q, i) => (0, import_react.createElement)(RN.View, { key: `q${i}`, style: { backgroundColor: p.soft, borderRadius: 12, padding: 12, gap: 6 } }, text2(q.text), q.by ? muted(q.by) : null)
+        ) : [],
+        pg.kind === "plans" ? (0, import_react.createElement)(
+          RN.View,
+          { key: "plans", accessibilityRole: "radiogroup", style: { gap: 6 } },
+          ...w.plans.map(
+            (plan) => (0, import_react.createElement)(
+              RN.Pressable,
+              {
+                key: plan.id,
+                onPress: () => host.pick(plan.id),
+                accessibilityRole: "radio",
+                accessibilityLabel: `${plan.name}, ${plan.price}`,
+                accessibilityState: { checked: w.plan === plan.id },
+                style: {
+                  minHeight: 52,
+                  paddingHorizontal: 12,
+                  borderRadius: 10,
+                  borderWidth: 1,
+                  borderColor: w.plan === plan.id ? p.accent : p.line,
+                  backgroundColor: w.plan === plan.id ? p.soft : p.bg,
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: 10
+                }
+              },
+              (0, import_react.createElement)(RN.View, { style: { flex: 1 } }, text2(plan.name, { fontWeight: "600" }), plan.note ? muted(plan.note) : null),
+              text2(plan.price, { fontWeight: "700" })
+            )
+          )
+        ) : null,
+        w.error ? text2(w.error, { color: p.danger, fontSize: 13 }) : null,
+        btn(w.busy ? "One moment\u2026" : pg.button || "Continue", "primary", host.next, w.busy || pg.kind === "plans" && !w.plan),
+        w.index ? btn("Back", "quiet", host.back, w.busy) : null
+      ],
+      host.close
+    );
+  };
+  if (pw) return paywallSheet(pw);
+  if (!v) return null;
   if (v.type === "cancel") {
     const top = (0, import_react.createElement)(
       RN.View,
@@ -3067,7 +3263,7 @@ var MRRocketProvider = ({ client: given, children, consent, flows = true, appear
     Ctx.Provider,
     { value: client },
     heatmaps ? (0, import_react3.createElement)(RN4.View, { style: { flex: 1 }, onTouchStartCapture: (e) => touch(e, false), onTouchEndCapture: (e) => touch(e, true) }, children) : children,
-    flows ? (0, import_react3.createElement)(MRRocketFlows, { flows: client.flows, appearance }) : null,
+    flows ? (0, import_react3.createElement)(MRRocketFlows, { flows: client.flows, paywall: client.paywall, appearance }) : null,
     surveys ? (0, import_react3.createElement)(MRRocketSurveys, { client, appearance }) : null,
     feedback ? (0, import_react3.createElement)(MRRocketFeedback, { client, appearance, options: feedback }) : null,
     messenger ? (0, import_react3.createElement)(MRRocketMessenger, { client, appearance, options: messenger }) : null
@@ -3104,6 +3300,10 @@ var usePush = () => {
   const client = useClient();
   return { register: client.registerForPush, unregister: client.unregisterForPush };
 };
+var usePaywall = () => {
+  const client = useClient();
+  return { open: client.openPaywall };
+};
 var useOnboarding = () => {
   const client = useClient();
   return { start: client.startOnboarding };