@mrrocket/sdk 0.17.0 → 0.21.0

package/dist/flows.js

@@ -1,4 +1,5 @@
 // src/flows.ts
+import { currentLocale, t, tf } from "./i18n.js";
 var CANCEL_EVENT = "$cancel_flow";
 var ONBOARDING_EVENT = "$onboarding";
 var INAPP_EVENT = "$inapp";
@@ -8,23 +9,54 @@ var PLAIN_CANCEL = {
   question: "",
   reasons: [],
   offers: {},
-  confirm: { title: "Cancel your subscription?", body: "You keep access until the end of the billing period.", button: "Cancel subscription" },
+  // Read when it is shown, so it follows the visitor's language.
+  get confirm() {
+    return { title: t("Cancel your subscription?"), body: t("You keep access until the end of the billing period."), button: t("Cancel subscription") };
+  },
   offersFor: "business"
 };
-var FAILED = "Something went wrong. Please try again.";
 var PROGRESS_KEY = "mrrocket:onboarding";
 var eventSlug = (s) => s.trim().toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "");
 var SIGNUP = /* @__PURE__ */ new Set(["signed_up", "signup", "sign_up", "registered", "account_created", "user_signed_up"]);
 var matchesTrigger = (trigger, event) => {
-  const t = eventSlug(trigger);
+  const t2 = eventSlug(trigger);
   const e = eventSlug(event);
-  if (!t || !e) return false;
-  return t === e || SIGNUP.has(t) && SIGNUP.has(e);
+  if (!t2 || !e) return false;
+  return t2 === e || SIGNUP.has(t2) && 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 FROM_CHECKLIST = "From a checklist";
 var isPageTrigger = (trigger) => trigger.trim().startsWith("/");
-var manual = (trigger) => eventSlug(trigger) === "from_a_checklist";
+var FROM_CODE = "From your code";
+var NEEDS_NEWER = "Needs tracking code 0.18.0";
+var momentOf = (f) => f.when ?? f.trigger;
+var manual = (trigger) => eventSlug(trigger) === "from_a_checklist" || eventSlug(trigger) === "from_your_code" || eventSlug(trigger) === eventSlug(NEEDS_NEWER);
+var AFTER_PREFIX = "after:";
+var afterOf = (trigger) => {
+  const t2 = (trigger ?? "").trim();
+  return t2.toLowerCase().startsWith(AFTER_PREFIX) ? t2.slice(AFTER_PREFIX.length).trim() || null : null;
+};
+var opensOf = (step) => step.opens ?? (step.startsTour ? { kind: "tour", id: step.startsTour } : void 0);
+var OTHER_PREFIX = "other:";
+var scaleOf = (q) => {
+  const min = q?.min ?? 0;
+  const max = q?.max ?? 10;
+  return Array.from({ length: Math.max(0, Math.min(max - min, 20) + 1) }, (_, i) => min + i);
+};
+var answerOk = (q, value) => {
+  if (!q || value == null) return false;
+  if (q.type === "choice") {
+    if (q.other && value.startsWith(OTHER_PREFIX)) return value.slice(OTHER_PREFIX.length).trim().length > 0;
+    return (q.options ?? []).some((o) => o.id === value);
+  }
+  if (q.type === "scale") return scaleOf(q).some((n) => String(n) === value);
+  return value.trim().length > 0 && value.length <= 500;
+};
+var answerLabel = (q, value) => {
+  if (q?.type !== "choice") return value.trim();
+  if (q.other && value.startsWith(OTHER_PREFIX)) return value.slice(OTHER_PREFIX.length).trim();
+  return q.options?.find((o) => o.id === value)?.label ?? value;
+};
 var videoEmbed = (url) => {
   const u = (url ?? "").trim();
   if (!/^https?:\/\//i.test(u)) return null;
@@ -46,12 +78,14 @@ var runId = () => `cf_${Math.random().toString(36).slice(2, 10)}${Date.now().toS
 var discounted = (amount, percent) => Math.round(amount * (1 - percent / 100) * 100) / 100;
 var money = (amount, currency) => {
   try {
-    return new Intl.NumberFormat(void 0, { style: "currency", currency }).format(amount);
+    return new Intl.NumberFormat(currentLocale(), { style: "currency", currency }).format(amount);
   } catch {
     return `${amount.toFixed(2)} ${currency}`;
   }
 };
-var offerButton = (o) => o.kind === "contact" ? "Send to the team" : o.kind === "pause" ? "Pause instead" : o.kind === "downgrade" ? "Switch plan" : "Accept offer";
+var offerButton = (o) => o.kind === "contact" ? t("Send to the team") : o.kind === "pause" ? t("Pause instead") : o.kind === "downgrade" ? t("Switch plan") : t("Accept offer");
+var monthsWord = (n) => n === 1 ? t("1 month") : tf("{n} months", { n });
+var forMonths = (n) => tf("for {months}", { months: monthsWord(n) });
 var safeUrl = (url) => {
   const u = (url ?? "").trim();
   return /^https?:\/\//i.test(u) || /^\/(?!\/)/.test(u) ? u : void 0;
@@ -90,7 +124,12 @@ var createFlows = (env) => {
   const now = () => env.now?.() ?? Date.now();
   let timer = null;
   let returnTo = null;
+  const answers = /* @__PURE__ */ new Map();
+  const drafts = /* @__PURE__ */ new Map();
+  const celebrated = /* @__PURE__ */ new Set();
+  let finaleNow = null;
   const flows = () => config?.onboarding ?? [];
+  const drawn = () => flows().filter((f) => f.shownBy !== "code");
   const flowById = (id) => id ? flows().find((f) => f.id === id) : void 0;
   const prog = (id) => {
     let p = progress.get(id);
@@ -164,6 +203,14 @@ var createFlows = (env) => {
   };
   const keyOf = (pid) => `${PROGRESS_KEY}:${pid ?? "visitor"}`;
   const eventsKeyOf = (pid) => `${PROGRESS_KEY}:events:${pid ?? "visitor"}`;
+  const answersKeyOf = (pid) => `${PROGRESS_KEY}:answers:${pid ?? "visitor"}`;
+  const celebrate = (f) => {
+    if (!f.finish || f.finish === "none" || f.shownBy === "code" || celebrated.has(f.id)) return;
+    const p = progress.get(f.id);
+    if (!p || p.dismissed || walkLine(f, nodesOf(f), p, false).at !== "end") return;
+    celebrated.add(f.id);
+    finaleNow = { kind: f.finish, key: `${f.id}:${now()}` };
+  };
   const save = () => {
     dirty = false;
     const store = env.storage?.();
@@ -179,6 +226,7 @@ var createFlows = (env) => {
       };
     try {
       store.set(keyOf(env.personId()), JSON.stringify(out));
+      if (answers.size) store.set(answersKeyOf(env.personId()), JSON.stringify(Object.fromEntries(answers)));
       if (seenEvents.size) store.set(eventsKeyOf(env.personId()), JSON.stringify([...seenEvents].slice(-200)));
     } catch {
     }
@@ -231,8 +279,17 @@ var createFlows = (env) => {
         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 } : {} };
+          const o = opensOf(s);
+          const t2 = o && (o.kind === "tour" || o.kind === "modal") && o.id !== flow.id ? flowById(o.id) : void 0;
+          const target = t2 && t2.shownBy !== "code" && nodesOf(t2).length ? t2 : void 0;
+          const opens = o && (o.kind === "page" ? !!o.target.trim() : o.kind === "code" || !!target) ? o : void 0;
+          return {
+            step: s,
+            done: p.done.has(s.id),
+            ...target && o?.kind === "tour" ? { tour: target } : {},
+            ...opens ? { opens } : {},
+            ...target ? { target } : {}
+          };
         })
       };
     }
@@ -243,7 +300,16 @@ var createFlows = (env) => {
     const rest = line.slice(index + 1);
     const fork = rest.findIndex((n) => n.kind === "condition");
     const ahead = (fork < 0 ? rest : rest.slice(0, fork)).filter(isStep).length;
-    return { type: "step", flow, step, index: w.before, total: w.before + 1 + ahead, last: !ahead && fork < 0 };
+    return {
+      type: "step",
+      flow,
+      step,
+      index: w.before,
+      total: w.before + 1 + ahead,
+      last: !ahead && fork < 0,
+      // 0.18.0: a question's answer so far, and whether there is one before it to go back to.
+      ...step.kind === "question" ? { answer: drafts.get(step.id) ?? (step.question ? answers.get(step.question.key) : void 0), back: w.before > 0 } : {}
+    };
   };
   const view = () => {
     if (cancel) {
@@ -270,23 +336,25 @@ var createFlows = (env) => {
     if (ob) return ob;
     if (active && !holding) {
       const back = returnTo;
-      const ended = active;
+      const ended2 = 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)) {
+        if (item && !item.event && !progress.get(ended2)?.dismissed && !p.done.has(item.id)) {
           markDone(p, item.id);
           record({ flow: list.id, step: item.id, kind: "checklist", action: "completed" });
+          celebrate(list);
         }
         active = list.id;
         const again = onboardingView();
         if (again) return again;
         if (!holding) active = null;
       } else if (known) {
-        const after = flowById(ended)?.trigger;
+        const was = flowById(ended2);
+        const after = was ? momentOf(was) : void 0;
         Promise.resolve().then(() => autoStart(after));
       }
     }
@@ -314,22 +382,64 @@ var createFlows = (env) => {
     emit();
     return true;
   };
-  const allowed = (f) => f.audience !== "signed_in" || !!env.personId();
+  const allowed = (f) => f.audience === "answered" ? !!f.answered && answers.get(f.answered.question) === f.answered.option : f.audience !== "signed_in" || !!env.personId();
+  const predecessorEnded = (id) => {
+    const g = flowById(id);
+    return !g || finished(g);
+  };
+  const due = (f, trigger = momentOf(f)) => {
+    const path = env.path?.();
+    const pred = afterOf(trigger);
+    if (pred) return predecessorEnded(pred);
+    if (manual(trigger)) return false;
+    if (isPageTrigger(trigger)) return path !== void 0 && pageMatches(trigger, path);
+    if (startsOnLoad(trigger)) return true;
+    for (const e of seenEvents) if (matchesTrigger(trigger, e)) return true;
+    return false;
+  };
   const autoStart = (after) => {
     if (!auto || active || !known) return;
     if (!env.personId() && !env.storage?.()) return;
     const path = env.path?.();
     const same = after && !manual(after) ? eventSlug(after) : "";
-    const next = flows().find(
-      (f) => (isPageTrigger(f.trigger) ? path !== void 0 && pageMatches(f.trigger, path) : startsOnLoad(f.trigger) || !!same && eventSlug(f.trigger) === same) && allowed(f) && nodesOf(f).length && !finished(f)
+    const next = drawn().find(
+      (f) => (afterOf(momentOf(f)) ? predecessorEnded(afterOf(momentOf(f))) : isPageTrigger(momentOf(f)) ? path !== void 0 && pageMatches(momentOf(f), path) : startsOnLoad(momentOf(f)) || !!same && eventSlug(momentOf(f)) === same) && allowed(f) && nodesOf(f).length && !finished(f)
     );
     if (next) start(next);
   };
+  const openItem = (list, stepId, target) => {
+    const p = prog(target.id);
+    p.done.clear();
+    p.at.clear();
+    p.dismissed = false;
+    returnTo = { flow: list.id, step: stepId };
+    active = target.id;
+    env.track(ONBOARDING_EVENT, { flow: target.id, action: "started", from: list.id });
+    save();
+    emit();
+  };
+  const answerStep = (flow, step, raw) => {
+    const q = step.question;
+    const value = q.type === "text" ? raw.trim().slice(0, 500) : raw.startsWith(OTHER_PREFIX) ? OTHER_PREFIX + raw.slice(OTHER_PREFIX.length).trim().slice(0, 490) : raw;
+    answers.set(q.key, value);
+    drafts.delete(step.id);
+    markDone(prog(flow.id), step.id);
+    env.track(ONBOARDING_EVENT, { flow: flow.id, step: step.id, kind: "question", action: "completed", question: q.key, answer: value, label: answerLabel(q, value) });
+    celebrate(flow);
+    save();
+  };
+  const ended = (f) => {
+    save();
+    if (finished(f)) Promise.resolve().then(() => autoStart());
+    emit();
+  };
   const refresh = () => {
     const pid = env.personId();
     if (progressFor !== null && progressFor !== pid) {
       progress.clear();
       seenEvents.clear();
+      answers.clear();
+      drafts.clear();
       handled.clear();
       active = null;
       returnTo = null;
@@ -346,6 +456,10 @@ var createFlows = (env) => {
           if (seen) {
             for (const e of JSON.parse(seen)) if (typeof e === "string") seenEvents.add(e);
           }
+          const said = await store.get(answersKeyOf(pid));
+          if (said) {
+            for (const [k, v] of Object.entries(JSON.parse(said))) if (typeof v === "string") answers.set(k, v);
+          }
         } catch {
         }
       }
@@ -356,6 +470,7 @@ var createFlows = (env) => {
         if (state && env.personId() === pid) {
           merge(state.onboarding);
           for (const e of state.events ?? []) if (typeof e === "string") seenEvents.add(eventSlug(e));
+          for (const [k, v] of Object.entries(state.answers ?? {})) if (typeof v === "string" && !answers.has(k)) answers.set(k, v);
           messages = (state.messages ?? []).filter((m) => m && m.id && m.title);
         }
       }
@@ -416,7 +531,7 @@ var createFlows = (env) => {
       () => finish(c, r),
       () => {
         c.busy = false;
-        c.error = FAILED;
+        c.error = t("Something went wrong. Please try again.");
         emit();
       }
     );
@@ -449,27 +564,33 @@ var createFlows = (env) => {
       if (fresh) seenEvents.add(slug);
       const flow = flowById(active);
       let ticked = false;
-      if (flow) {
-        const p = prog(flow.id);
-        for (const s of stepsIn(nodesOf(flow)))
+      const lists = [...flow ? [flow] : [], ...flows().filter((f) => f.shownBy === "code" && f.id !== flow?.id)];
+      for (const l of lists) {
+        const p = prog(l.id);
+        let here = false;
+        for (const s of stepsIn(nodesOf(l)))
           if (s.kind === "checklist" && s.event && !p.done.has(s.id) && matchesTrigger(s.event, name)) {
             markDone(p, s.id);
-            ticked = true;
-            env.track(ONBOARDING_EVENT, { flow: flow.id, step: s.id, kind: s.kind, action: "completed" });
+            here = true;
+            env.track(ONBOARDING_EVENT, { flow: l.id, step: s.id, kind: s.kind, action: "completed" });
           }
+        if (here) {
+          ticked = true;
+          celebrate(l);
+        }
       }
-      if (ticked || fresh && flow) {
+      if (ticked || fresh && (flow || lists.length)) {
         save();
         emit();
       } else if (fresh) save();
       if (!auto || !env.personId() && !env.storage?.()) return;
-      const next = flows().find((f) => nodesOf(f).length && !manual(f.trigger) && matchesTrigger(f.trigger, name) && allowed(f) && !finished(f));
+      const next = drawn().find((f) => nodesOf(f).length && !manual(momentOf(f)) && matchesTrigger(momentOf(f), name) && allowed(f) && !finished(f));
       if (next) start(next);
     },
     openCancelFlow,
     startOnboarding: (id) => {
-      const f = id ? flowById(id) : flows().find((x) => nodesOf(x).length && !manual(x.trigger) && !finished(x));
-      if (!f || !nodesOf(f).length) return false;
+      const f = id ? flowById(id) : drawn().find((x) => nodesOf(x).length && !manual(momentOf(x)) && !afterOf(momentOf(x)) && !finished(x));
+      if (!f || !nodesOf(f).length || f.shownBy === "code") return false;
       const p = prog(f.id);
       p.dismissed = false;
       return start(f);
@@ -490,8 +611,8 @@ var createFlows = (env) => {
       answer: (text) => {
         const c = cancel;
         if (!c || c.busy || c.screen !== "followup") return;
-        const t = text.slice(0, 500);
-        c.answer = t.trim() ? t : void 0;
+        const t2 = text.slice(0, 500);
+        c.answer = t2.trim() ? t2 : void 0;
         emit();
       },
       next: () => {
@@ -560,8 +681,17 @@ var createFlows = (env) => {
       next: () => {
         const v = onboardingView();
         if (v?.type !== "step") return;
+        if (v.step.kind === "question") {
+          const q = v.step.question;
+          const a = drafts.get(v.step.id) ?? (q ? answers.get(q.key) : void 0);
+          if (!q || !answerOk(q, a)) return;
+          answerStep(v.flow, v.step, a);
+          emit();
+          return;
+        }
         markDone(prog(v.flow.id), v.step.id);
         env.track(ONBOARDING_EVENT, { flow: v.flow.id, step: v.step.id, kind: v.step.kind, action: "completed" });
+        celebrate(v.flow);
         save();
         emit();
         const url = v.step.kind === "modal" ? safeUrl(v.step.url) : void 0;
@@ -574,6 +704,7 @@ var createFlows = (env) => {
         if (!item || item.done) return;
         markDone(prog(v.flow.id), stepId);
         env.track(ONBOARDING_EVENT, { flow: v.flow.id, step: stepId, kind: "checklist", action: "completed" });
+        celebrate(v.flow);
         save();
         emit();
       },
@@ -590,20 +721,123 @@ var createFlows = (env) => {
       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 });
+        const target = v.items.find((i) => i.step.id === stepId)?.target;
+        if (!target) return false;
+        openItem(v.flow, stepId, target);
+        return true;
+      },
+      open: (stepId) => {
+        const v = onboardingView();
+        if (v?.type !== "checklist") return false;
+        const it = v.items.find((i) => i.step.id === stepId);
+        const o = it?.opens;
+        if (!it || !o) return false;
+        env.track(ONBOARDING_EVENT, { flow: v.flow.id, step: stepId, kind: "checklist", action: "opened", opens: o.kind });
+        if ((o.kind === "tour" || o.kind === "modal") && it.target) {
+          openItem(v.flow, stepId, it.target);
+          return true;
+        }
+        if (!it.done && !it.step.event) {
+          markDone(prog(v.flow.id), stepId);
+          env.track(ONBOARDING_EVENT, { flow: v.flow.id, step: stepId, kind: "checklist", action: "completed" });
+          celebrate(v.flow);
+        }
         save();
         emit();
+        if (o.kind === "page") env.navigate?.(o.target.trim());
+        else env.task?.(stepId, v.flow);
         return true;
+      },
+      answer: (value) => {
+        const v = onboardingView();
+        if (v?.type !== "step" || v.step.kind !== "question") return;
+        drafts.set(v.step.id, String(value).slice(0, 500));
+        emit();
+      },
+      skip: () => {
+        const v = onboardingView();
+        const q = v?.type === "step" && v.step.kind === "question" ? v.step.question : void 0;
+        if (v?.type !== "step" || !q?.optional) return;
+        drafts.delete(v.step.id);
+        markDone(prog(v.flow.id), v.step.id);
+        env.track(ONBOARDING_EVENT, { flow: v.flow.id, step: v.step.id, kind: "question", action: "completed", question: q.key, skipped: true });
+        celebrate(v.flow);
+        save();
+        emit();
+      },
+      back: () => {
+        const v = onboardingView();
+        if (v?.type !== "step" || v.step.kind !== "question" || !v.back) return;
+        const line = stepsIn(nodesOf(v.flow));
+        const at = line.findIndex((s) => s.id === v.step.id);
+        const p = prog(v.flow.id);
+        for (let i = at - 1; i >= 0; i--)
+          if (p.done.has(line[i].id)) {
+            p.done.delete(line[i].id);
+            p.at.delete(line[i].id);
+            break;
+          }
+        save();
+        emit();
+      },
+      item: (id) => {
+        const f = flowById(id);
+        if (!f) return null;
+        const p = progress.get(f.id);
+        const steps = stepsIn(nodesOf(f)).map((s) => {
+          const a = s.question ? answers.get(s.question.key) : void 0;
+          return { ...s, done: !!p?.done.has(s.id), ...a !== void 0 ? { answer: a } : {} };
+        });
+        const done = steps.length > 0 && steps.every((s) => s.done);
+        const dismissed = !!p?.dismissed;
+        return { item: f, steps, done, dismissed, eligible: !done && !dismissed && allowed(f) && due(f) };
+      },
+      seen: (id) => {
+        const f = flowById(id);
+        if (!f || f.shownBy !== "code" || !known) return;
+        if (!shown.has(`f:${f.id}`)) {
+          shown.add(`f:${f.id}`);
+          env.track(ONBOARDING_EVENT, { flow: f.id, action: "started" });
+        }
+        const p = progress.get(f.id);
+        for (const s of stepsIn(nodesOf(f)))
+          if (!p?.done.has(s.id) && !shown.has(`s:${s.id}`)) {
+            shown.add(`s:${s.id}`);
+            env.track(ONBOARDING_EVENT, { flow: f.id, step: s.id, kind: s.kind, action: "shown" });
+            if (s.kind !== "checklist") break;
+          }
+      },
+      complete: (id, stepId) => {
+        const f = flowById(id);
+        const s = f && stepsIn(nodesOf(f)).find((x) => x.id === stepId);
+        if (!f || !s || s.kind === "question") return;
+        const p = prog(f.id);
+        if (p.done.has(s.id)) return;
+        markDone(p, s.id);
+        env.track(ONBOARDING_EVENT, { flow: f.id, step: s.id, kind: s.kind, action: "completed" });
+        ended(f);
+      },
+      dismissItem: (id) => {
+        const f = flowById(id);
+        if (!f) return;
+        const p = prog(f.id);
+        if (p.dismissed) return;
+        p.dismissed = true;
+        env.track(ONBOARDING_EVENT, { flow: f.id, action: "dismissed" });
+        if (active === f.id) active = null;
+        ended(f);
+      },
+      answerItem: (id, question, value) => {
+        const f = flowById(id);
+        const s = f && stepsIn(nodesOf(f)).find((x) => x.kind === "question" && (x.id === question || x.question?.key === question));
+        if (!f || !s?.question || !answerOk(s.question, value)) return;
+        answerStep(f, s, value);
+        ended(f);
       }
     },
+    finale: () => finaleNow,
+    accent: () => config?.onboardingAccent,
+    answers: () => Object.fromEntries(answers),
     message: {
       click: () => {
         const v = view();
@@ -626,26 +860,38 @@ var createFlows = (env) => {
   return controller;
 };
 export {
+  AFTER_PREFIX,
   CANCEL_EVENT,
   FROM_CHECKLIST,
+  FROM_CODE,
   INAPP_EVENT,
+  NEEDS_NEWER,
   ONBOARDING_EVENT,
+  OTHER_PREFIX,
   PLAIN_CANCEL,
   REVIEW_EVENT,
+  afterOf,
+  answerLabel,
+  answerOk,
   createFlows,
   discounted,
   eventSlug,
+  forMonths,
   isPageTrigger,
   matchesTrigger,
   mediaOf,
+  momentOf,
   money,
   monthsSince,
+  monthsWord,
   nodesOf,
   offerButton,
+  opensOf,
   pageMatches,
   ruleMatches,
   runId,
   safeUrl,
+  scaleOf,
   startsOnLoad,
   videoEmbed,
   waitMs