@mrrocket/sdk 0.16.0 → 0.18.0

package/dist/flows.js

@@ -22,6 +22,41 @@ 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 FROM_CHECKLIST = "From a checklist";
+var isPageTrigger = (trigger) => trigger.trim().startsWith("/");
+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 t = (trigger ?? "").trim();
+  return t.toLowerCase().startsWith(AFTER_PREFIX) ? t.slice(AFTER_PREFIX.length).trim() || null : null;
+};
+var opensOf = (step) => step.opens ?? (step.startsTour ? { kind: "tour", id: step.startsTour } : void 0);
+var answerOk = (q, value) => {
+  if (!q || value == null) return false;
+  if (q.type === "choice") return (q.options ?? []).some((o) => o.id === value);
+  return value.trim().length > 0 && value.length <= 500;
+};
+var answerLabel = (q, value) => q?.type === "choice" ? q.options?.find((o) => o.id === value)?.label ?? value : value.trim();
+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) => {
@@ -69,7 +104,13 @@ var createFlows = (env) => {
   const seenEvents = /* @__PURE__ */ new Set();
   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);
@@ -143,6 +184,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?.();
@@ -158,6 +207,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 {
     }
@@ -206,7 +256,23 @@ 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 o = opensOf(s);
+          const t = o && (o.kind === "tour" || o.kind === "modal") && o.id !== flow.id ? flowById(o.id) : void 0;
+          const target = t && t.shownBy !== "code" && nodesOf(t).length ? t : 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 } : {}
+          };
+        })
+      };
     }
     if (!shown.has(`s:${step.id}`)) {
       shown.add(`s:${step.id}`);
@@ -215,7 +281,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) {
@@ -240,7 +315,30 @@ var createFlows = (env) => {
     }
     const ob = onboardingView();
     if (ob) return ob;
-    if (active && !holding) active = null;
+    if (active && !holding) {
+      const back = returnTo;
+      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(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 was = flowById(ended2);
+        const after = was ? momentOf(was) : void 0;
+        Promise.resolve().then(() => autoStart(after));
+      }
+    }
     const m = messages.find((x) => !handled.has(x.id));
     return m ? { type: "message", message: m } : null;
   };
@@ -265,19 +363,67 @@ var createFlows = (env) => {
     emit();
     return true;
   };
-  const autoStart = () => {
+  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 next = flows().find((f) => startsOnLoad(f.trigger) && nodesOf(f).length && !finished(f));
+    const path = env.path?.();
+    const same = after && !manual(after) ? eventSlug(after) : "";
+    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;
+    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;
       loadedFor = void 0;
     }
     progressFor = pid;
@@ -291,6 +437,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 {
         }
       }
@@ -301,6 +451,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);
         }
       }
@@ -387,33 +538,40 @@ 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);
       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 && matchesTrigger(f.trigger, name) && !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 && !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);
@@ -504,10 +662,21 @@ 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;
+        if (url) env.openUrl?.(url);
       },
       check: (stepId) => {
         const v = onboardingView();
@@ -516,6 +685,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();
       },
@@ -524,11 +694,120 @@ 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 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();
+      },
+      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();
@@ -551,24 +830,36 @@ var createFlows = (env) => {
   return controller;
 };
 export {
+  AFTER_PREFIX,
   CANCEL_EVENT,
+  FROM_CHECKLIST,
+  FROM_CODE,
   INAPP_EVENT,
+  NEEDS_NEWER,
   ONBOARDING_EVENT,
   PLAIN_CANCEL,
   REVIEW_EVENT,
+  afterOf,
+  answerLabel,
+  answerOk,
   createFlows,
   discounted,
   eventSlug,
+  isPageTrigger,
   matchesTrigger,
+  mediaOf,
+  momentOf,
   money,
   monthsSince,
   nodesOf,
   offerButton,
+  opensOf,
   pageMatches,
   ruleMatches,
   runId,
   safeUrl,
   startsOnLoad,
+  videoEmbed,
   waitMs
 };
 //# sourceMappingURL=flows.js.map