@mrrocket/sdk 0.17.0 → 0.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/CHANGELOG.md +7 -1
  2. package/dist/browser/mrrocket-flows.js +9 -2
  3. package/dist/browser/mrrocket-messenger.js +3 -3
  4. package/dist/browser/mrrocket.js +1 -1
  5. package/dist/browser.d.ts +1 -1
  6. package/dist/browser.js +2 -1
  7. package/dist/browser.js.map +1 -1
  8. package/dist/client.d.ts +23 -3
  9. package/dist/client.js +15 -1
  10. package/dist/client.js.map +1 -1
  11. package/dist/context.d.ts +3 -1
  12. package/dist/context.js.map +1 -1
  13. package/dist/core.d.ts +3 -1
  14. package/dist/core.js +1 -1
  15. package/dist/core.js.map +1 -1
  16. package/dist/finish-web.d.ts +18 -0
  17. package/dist/finish-web.js +139 -0
  18. package/dist/finish-web.js.map +1 -0
  19. package/dist/flows-ui.d.ts +1 -10
  20. package/dist/flows-ui.js +105 -6
  21. package/dist/flows-ui.js.map +1 -1
  22. package/dist/flows-web.d.ts +8 -1
  23. package/dist/flows-web.js +8 -0
  24. package/dist/flows-web.js.map +1 -1
  25. package/dist/flows.d.ts +159 -7
  26. package/dist/flows.js +240 -28
  27. package/dist/flows.js.map +1 -1
  28. package/dist/icons.d.ts +24 -0
  29. package/dist/icons.js +61 -0
  30. package/dist/icons.js.map +1 -0
  31. package/dist/index.d.ts +4 -2
  32. package/dist/index.js +5 -0
  33. package/dist/index.js.map +1 -1
  34. package/dist/messenger-ui.js +78 -53
  35. package/dist/messenger-ui.js.map +1 -1
  36. package/dist/onboarding-state.d.ts +23 -0
  37. package/dist/onboarding-state.js +43 -0
  38. package/dist/onboarding-state.js.map +1 -0
  39. package/dist/react-native/index.d.cts +177 -15
  40. package/dist/react-native/index.d.ts +177 -15
  41. package/dist/react-native/index.js +776 -270
  42. package/dist/react-native/index.js.map +1 -1
  43. package/package.json +1 -1
@@ -0,0 +1,43 @@
1
+ // src/onboarding-state.ts
2
+ import { useEffect, useMemo, useState } from "react";
3
+ var none = [];
4
+ var useOnboardingItem = (flows, id, start) => {
5
+ const [state, setState] = useState(() => flows && id ? flows.onboarding.item(id) : null);
6
+ useEffect(() => {
7
+ if (!flows || !id) {
8
+ setState(null);
9
+ return;
10
+ }
11
+ const up = () => {
12
+ const s = flows.onboarding.item(id);
13
+ setState(s);
14
+ if (s && !s.done && !s.dismissed) flows.onboarding.seen(id);
15
+ };
16
+ up();
17
+ return flows.subscribe(up);
18
+ }, [flows, id]);
19
+ return useMemo(
20
+ () => ({
21
+ item: state?.item ?? null,
22
+ steps: state?.steps ?? none,
23
+ done: !!state?.done,
24
+ dismissed: !!state?.dismissed,
25
+ eligible: !!state?.eligible,
26
+ complete: (stepId) => {
27
+ if (flows && id) flows.onboarding.complete(id, stepId);
28
+ },
29
+ dismiss: () => {
30
+ if (flows && id) flows.onboarding.dismissItem(id);
31
+ },
32
+ answer: (question, value) => {
33
+ if (flows && id) flows.onboarding.answerItem(id, question, value);
34
+ },
35
+ start
36
+ }),
37
+ [state, flows, id, start]
38
+ );
39
+ };
40
+ export {
41
+ useOnboardingItem
42
+ };
43
+ //# sourceMappingURL=onboarding-state.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/onboarding-state.ts"],"sourcesContent":["/**\n * 0.18.0: `useOnboarding(id)` for an onboarding item the app draws itself (\"Shown by: your code\" in MRRocket): its\n * content and the person's progress, and the calls that report what they did. Shared by the Next.js provider and React\n * Native (only React here). The SDK draws nothing for such an item and never starts it; what the app reports still\n * reaches MRRocket (who saw it, who finished it, the answers on the contact), and the item after it follows as usual.\n *\n * const { item, steps, done, complete, dismiss, answer } = useOnboarding(\"flow_123\");\n * if (!item || done) return null;\n * return steps.map((s) => <Task key={s.id} title={s.title} done={s.done} onPress={() => complete(s.id)} />);\n */\nimport { useEffect, useMemo, useState } from \"react\";\nimport type { FlowsController, OnboardingFlow, OnboardingItemState } from \"./flows\";\n\nexport interface UseOnboarding {\n /** The item as MRRocket published it, or null while the config is loading, or when it is not live. */\n item: OnboardingFlow | null;\n /** Its steps (a tour's steps, a checklist's tasks, the questions), each with `done` (and a question's `answer`). */\n steps: OnboardingItemState[\"steps\"];\n /** Every step is done. */\n done: boolean;\n /** The person closed it. */\n dismissed: boolean;\n /** Its moment has come for this person (the trigger MRRocket set, and who it is for). */\n eligible: boolean;\n /** Marks a step done (a tour step, a task). */\n complete(stepId: string): void;\n /** The person closed it; the item after it follows. */\n dismiss(): void;\n /** Answers a question (its step id or its key) with an option's id or a text; it is kept on the contact. */\n answer(question: string, value: string): void;\n /** Starts an item the SDK draws (the first live one without an id). */\n start(id?: string): boolean;\n}\n\nconst none: OnboardingItemState[\"steps\"] = [];\n\n/** The hook behind `useOnboarding` on both platforms. */\nexport const useOnboardingItem = (flows: FlowsController | null | undefined, id: string | undefined, start: (id?: string) => boolean): UseOnboarding => {\n const [state, setState] = useState<OnboardingItemState | null>(() => (flows && id ? flows.onboarding.item(id) : null));\n useEffect(() => {\n if (!flows || !id) {\n setState(null);\n return;\n }\n const up = () => {\n const s = flows.onboarding.item(id);\n setState(s);\n // Asked for by the app: counted as seen (started, and its first open steps), once per page.\n if (s && !s.done && !s.dismissed) flows.onboarding.seen(id);\n };\n up();\n return flows.subscribe(up);\n }, [flows, id]);\n return useMemo(\n () => ({\n item: state?.item ?? null,\n steps: state?.steps ?? none,\n done: !!state?.done,\n dismissed: !!state?.dismissed,\n eligible: !!state?.eligible,\n complete: (stepId: string) => {\n if (flows && id) flows.onboarding.complete(id, stepId);\n },\n dismiss: () => {\n if (flows && id) flows.onboarding.dismissItem(id);\n },\n answer: (question: string, value: string) => {\n if (flows && id) flows.onboarding.answerItem(id, question, value);\n },\n start,\n }),\n [state, flows, id, start],\n );\n};\n"],"mappings":";AAUA,SAAS,WAAW,SAAS,gBAAgB;AAwB7C,IAAM,OAAqC,CAAC;AAGrC,IAAM,oBAAoB,CAAC,OAA2C,IAAwB,UAAmD;AACpJ,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAqC,MAAO,SAAS,KAAK,MAAM,WAAW,KAAK,EAAE,IAAI,IAAK;AACrH,YAAU,MAAM;AACZ,QAAI,CAAC,SAAS,CAAC,IAAI;AACf,eAAS,IAAI;AACb;AAAA,IACJ;AACA,UAAM,KAAK,MAAM;AACb,YAAM,IAAI,MAAM,WAAW,KAAK,EAAE;AAClC,eAAS,CAAC;AAEV,UAAI,KAAK,CAAC,EAAE,QAAQ,CAAC,EAAE,UAAW,OAAM,WAAW,KAAK,EAAE;AAAA,IAC9D;AACA,OAAG;AACH,WAAO,MAAM,UAAU,EAAE;AAAA,EAC7B,GAAG,CAAC,OAAO,EAAE,CAAC;AACd,SAAO;AAAA,IACH,OAAO;AAAA,MACH,MAAM,OAAO,QAAQ;AAAA,MACrB,OAAO,OAAO,SAAS;AAAA,MACvB,MAAM,CAAC,CAAC,OAAO;AAAA,MACf,WAAW,CAAC,CAAC,OAAO;AAAA,MACpB,UAAU,CAAC,CAAC,OAAO;AAAA,MACnB,UAAU,CAAC,WAAmB;AAC1B,YAAI,SAAS,GAAI,OAAM,WAAW,SAAS,IAAI,MAAM;AAAA,MACzD;AAAA,MACA,SAAS,MAAM;AACX,YAAI,SAAS,GAAI,OAAM,WAAW,YAAY,EAAE;AAAA,MACpD;AAAA,MACA,QAAQ,CAAC,UAAkB,UAAkB;AACzC,YAAI,SAAS,GAAI,OAAM,WAAW,WAAW,IAAI,UAAU,KAAK;AAAA,MACpE;AAAA,MACA;AAAA,IACJ;AAAA,IACA,CAAC,OAAO,OAAO,IAAI,KAAK;AAAA,EAC5B;AACJ;","names":[]}
@@ -281,7 +281,9 @@ type Api = ReturnType<typeof createApi>;
281
281
  * - `$onboarding` `{flow, step?, action: "started" | "shown" | "completed" | "dismissed"}`; since 0.11.0 a wait records
282
282
  * "shown" when the person reaches it and "completed" when it is over, a condition `{action: "answered", answer: "yes"
283
283
  * | "no"}` once it is decided; since 0.17.0 a tour a checklist task started records `{action: "started", from}` with
284
- * the checklist's id.
284
+ * the checklist's id; since 0.18.0 a question records `{kind: "question", action: "completed", question, answer,
285
+ * label}` (the question's key, the option's id or the typed text, the option's words), which MRRocket keeps on the
286
+ * contact, and a checklist task that opens something `{action: "opened", opens}`.
285
287
  * - `$inapp` `{message, journey, action: "shown" | "clicked" | "dismissed"}`; the journey moves the person on.
286
288
  */
287
289
 
@@ -350,7 +352,54 @@ interface CancelFlowConfig {
350
352
  */
351
353
  offersFor: "business";
352
354
  }
353
- type OnboardingStepKind = "tour" | "checklist" | "modal";
355
+ /** "question" (0.18.0): one question of a Questions item, a slide of its window. */
356
+ type OnboardingStepKind = "tour" | "checklist" | "modal" | "question";
357
+ /**
358
+ * 0.18.0: what a checklist task opens. `page`: a path or address on the web, a deep link (`myapp://…`) or a screen name
359
+ * in an app, handed to the app's `onNavigate` when it passes one; `tour` / `modal`: another item of the config, after
360
+ * which the checklist comes back; `code`: the app's `onTask(taskId, item)`.
361
+ */
362
+ type TaskOpens = {
363
+ kind: "page";
364
+ target: string;
365
+ } | {
366
+ kind: "tour";
367
+ id: string;
368
+ } | {
369
+ kind: "modal";
370
+ id: string;
371
+ } | {
372
+ kind: "code";
373
+ };
374
+ /**
375
+ * 0.18.0: a small picture beside a checklist task or above a modal's or the questions' heading: one of the SDK's own
376
+ * line icons (`FLOW_ICON_NAMES`, icons.ts), an emoji, or a picture (http(s)).
377
+ */
378
+ type FlowIcon = {
379
+ kind: "builtin";
380
+ name: string;
381
+ } | {
382
+ kind: "emoji";
383
+ value: string;
384
+ } | {
385
+ kind: "image";
386
+ url: string;
387
+ };
388
+ /** 0.18.0: what plays when someone finishes a checklist, a tour or the questions. */
389
+ type FinishAnimation = "none" | "confetti" | "fireworks" | "stars";
390
+ /** 0.18.0: one question of a Questions item: one choice of 2 to 6 options, or a short text. */
391
+ interface OnboardingQuestion {
392
+ /** The answer's name on the contact (`onboarding.<key>`) and in "People who answered …". */
393
+ key: string;
394
+ type: "choice" | "text";
395
+ /** Choice: the options, in order; `id` is what is stored, `label` what people read. */
396
+ options?: {
397
+ id: string;
398
+ label: string;
399
+ }[];
400
+ /** Text: the field's hint. */
401
+ placeholder?: string;
402
+ }
354
403
  /** 0.17.0: where a tour bubble sits next to its element; "auto" (and no value) puts it below, else above, as before. */
355
404
  type TourPlacement = "auto" | "top" | "bottom" | "left" | "right";
356
405
  /**
@@ -380,6 +429,12 @@ interface OnboardingStep {
380
429
  url?: string;
381
430
  /** 0.17.0, checklist items: the id of a tour (another flow) the item starts; finishing the tour ticks the item. */
382
431
  startsTour?: string;
432
+ /** 0.18.0, checklist items: what the task opens (read before `startsTour`, which MRRocket still sends for a tour). */
433
+ opens?: TaskOpens;
434
+ /** 0.18.0, checklist items: the task's icon. */
435
+ icon?: FlowIcon;
436
+ /** 0.18.0, question steps: the question (the step's `title` is what people read). */
437
+ question?: OnboardingQuestion;
383
438
  }
384
439
  /** A pause in a flow (0.11.0): the next step shows this long after the one before was done. */
385
440
  interface OnboardingWait {
@@ -412,10 +467,33 @@ interface OnboardingFlow {
412
467
  * of the app ("/settings", "/projects/*"), or "From a checklist" (only a checklist task starts it).
413
468
  */
414
469
  trigger: string;
415
- /** 0.17.0: "signed_in" starts it on its own only for someone the app identified. */
416
- audience?: "signed_in";
470
+ /**
471
+ * 0.17.0: "signed_in" starts it on its own only for someone the app identified. 0.18.0: "answered" only for someone
472
+ * who gave `answered.option` to the question `answered.question` (its key).
473
+ */
474
+ audience?: "signed_in" | "answered";
475
+ /** 0.18.0: with `audience: "answered"`, the question's key and the option's id (or the typed text). */
476
+ answered?: {
477
+ question: string;
478
+ option: string;
479
+ };
417
480
  /** What every version shows: with `nodes`, only the in-app steps before the first wait or condition. */
418
481
  steps: OnboardingStep[];
482
+ /** 0.18.0: the icon above a modal's or the questions' heading. */
483
+ icon?: FlowIcon;
484
+ /** 0.18.0: what plays when the person finishes it (a checklist, a tour, the questions). */
485
+ finish?: FinishAnimation;
486
+ /**
487
+ * 0.18.0: "code": the app draws it itself (`useOnboarding(id)`, `mrrocket.onboarding.get(id)`); the SDK draws
488
+ * nothing for it, never starts it, and still records what the app reports. Such an item's `trigger` is
489
+ * "From your code" (older versions never start it).
490
+ */
491
+ shownBy?: "code";
492
+ /**
493
+ * 0.18.0: the item's real moment (read instead of `trigger`, see `momentOf`) when `trigger` is one older versions
494
+ * never start: "From your code", or `NEEDS_NEWER` for questions and items that follow another or ask for an answer.
495
+ */
496
+ when?: string;
419
497
  /** 0.11.0+: the whole flow with its waits and conditions. Read instead of `steps` when it is there. */
420
498
  nodes?: OnboardingNode[];
421
499
  }
@@ -485,15 +563,22 @@ type FlowView = {
485
563
  /** The step for the dots, 1 to `steps`. */
486
564
  step: number;
487
565
  steps: number;
488
- } | {
566
+ }
567
+ /** `answer` (0.18.0): a question's answer so far (an option's id or the typed text); `back`: an earlier question to go back to. */
568
+ | {
489
569
  type: "step";
490
570
  flow: OnboardingFlow;
491
571
  step: OnboardingStep;
492
572
  index: number;
493
573
  total: number;
494
574
  last: boolean;
575
+ answer?: string;
576
+ back?: boolean;
495
577
  }
496
- /** `tour`: the tour the item starts (0.17.0), when the config has it. */
578
+ /**
579
+ * `tour`: the tour the item starts (0.17.0), when the config has it. `opens` (0.18.0): what tapping the task opens
580
+ * (a tour or modal only when the config has it); `target` the item it opens.
581
+ */
497
582
  | {
498
583
  type: "checklist";
499
584
  flow: OnboardingFlow;
@@ -501,6 +586,8 @@ type FlowView = {
501
586
  step: OnboardingStep;
502
587
  done: boolean;
503
588
  tour?: OnboardingFlow;
589
+ opens?: TaskOpens;
590
+ target?: OnboardingFlow;
504
591
  }[];
505
592
  } | {
506
593
  type: "message";
@@ -528,17 +615,54 @@ interface FlowsController {
528
615
  confirm(comment?: string): void;
529
616
  close(): void;
530
617
  };
531
- /** `startTour(stepId)` (0.17.0): the tour a checklist item starts; the checklist comes back when it ends. */
618
+ /**
619
+ * `startTour(stepId)` (0.17.0): the tour a checklist item starts; the checklist comes back when it ends.
620
+ * 0.18.0: `open(stepId)` does what the task opens (a page, a tour, a modal, the app's code); `answer(value)` picks an
621
+ * option or types the text of the question on screen, `back()` returns to the question before. `item(id)` and the
622
+ * calls after it are for an item the app draws itself (`shownBy: "code"`).
623
+ */
532
624
  onboarding: {
533
625
  next(): void;
534
626
  check(stepId: string): void;
535
627
  dismiss(): void;
536
628
  startTour(stepId: string): boolean;
629
+ open(stepId: string): boolean;
630
+ answer(value: string): void;
631
+ back(): void;
632
+ item(id: string): OnboardingItemState | null;
633
+ seen(id: string): void;
634
+ complete(id: string, stepId: string): void;
635
+ dismissItem(id: string): void;
636
+ answerItem(id: string, question: string, value: string): void;
537
637
  };
538
638
  message: {
539
639
  click(): void;
540
640
  dismiss(): void;
541
641
  };
642
+ /** 0.18.0: the animation to play now that someone finished an item (a new `key` each time), or null. */
643
+ finale(): {
644
+ kind: Exclude<FinishAnimation, "none">;
645
+ key: string;
646
+ } | null;
647
+ /** 0.18.0: the product's brand color from MRRocket, for the dialogs when the app passes no accent of its own. */
648
+ accent(): string | undefined;
649
+ /** 0.18.0: the person's answers to onboarding questions, by key. */
650
+ answers(): Record<string, string>;
651
+ }
652
+ /** 0.18.0: an item the app draws itself (`shownBy: "code"`), with the person's progress. */
653
+ interface OnboardingItemState {
654
+ item: OnboardingFlow;
655
+ /** Its steps (a tour's steps, a checklist's tasks, the questions), each with whether the person did it. */
656
+ steps: (OnboardingStep & {
657
+ done: boolean;
658
+ answer?: string;
659
+ })[];
660
+ /** Every step is done. */
661
+ done: boolean;
662
+ /** The person closed it. */
663
+ dismissed: boolean;
664
+ /** Its moment has come for this person (the trigger MRRocket set, and who it is for); your code may ignore it. */
665
+ eligible: boolean;
542
666
  }
543
667
 
544
668
  /**
@@ -658,7 +782,7 @@ interface PaywallHost {
658
782
 
659
783
  type VariantId = string;
660
784
  /** This build of the SDK. Sent with the config request so MRRocket knows what the site runs (error tracking, flags). */
661
- declare const SDK_VERSION = "0.17.0";
785
+ declare const SDK_VERSION = "0.18.0";
662
786
  /** One variant of an experiment. `changes` replaces texts that the page marks with `<Text id>`. */
663
787
  interface VariantConfig {
664
788
  id: VariantId;
@@ -711,6 +835,8 @@ interface CockpitConfig {
711
835
  cancelFlow?: CancelFlowConfig;
712
836
  /** The in-app steps of live onboarding flows (tours, checklists, modals). SDK 0.7.0+. */
713
837
  onboarding?: OnboardingFlow[];
838
+ /** The product's brand color ("#rrggbb") for the onboarding dialogs when the app passes no accent. SDK 0.18.0+. */
839
+ onboardingAccent?: string;
714
840
  /** A live Lifecycle journey has in-app messages: signed-in people ask `/api/sdk/inapp` for theirs. SDK 0.7.0+. */
715
841
  messages?: boolean;
716
842
  /** Page redirects set in MRRocket; the SDK sends visitors on before the page shows (`redirectFor`). SDK 0.7.0+. */
@@ -859,6 +985,14 @@ interface MRRocketOptions {
859
985
  debug?: boolean;
860
986
  /** Onboarding flows start on their own when the person does their trigger (default true). False: only `startOnboarding()`. */
861
987
  onboarding?: boolean;
988
+ /**
989
+ * 0.18.0: opens what a checklist task's "Opens: page or screen" names: a screen name or a path for your navigator
990
+ * (`(target) => router.push(target)`). Without it only a deep link or an address (`myapp://…`, `https://…`) opens,
991
+ * through `Linking`.
992
+ */
993
+ onNavigate?: (target: string) => void;
994
+ /** 0.18.0: a checklist task set to "Opens: your code" was tapped: `(taskId, item) => …`. */
995
+ onTask?: (taskId: string, item: OnboardingFlow) => void;
862
996
  /** Taps go to Heatmaps as clicks on the screen they happened on (default true; `MRRocketProvider` captures them). */
863
997
  heatmaps?: boolean;
864
998
  /**
@@ -1003,15 +1137,37 @@ interface MRRocketClient {
1003
1137
  /** The name of the screen a React Navigation state shows: the focused route, followed into nested navigators. */
1004
1138
  declare const activeRouteName: (state: unknown) => string | undefined;
1005
1139
 
1140
+ interface UseOnboarding {
1141
+ /** The item as MRRocket published it, or null while the config is loading, or when it is not live. */
1142
+ item: OnboardingFlow | null;
1143
+ /** Its steps (a tour's steps, a checklist's tasks, the questions), each with `done` (and a question's `answer`). */
1144
+ steps: OnboardingItemState["steps"];
1145
+ /** Every step is done. */
1146
+ done: boolean;
1147
+ /** The person closed it. */
1148
+ dismissed: boolean;
1149
+ /** Its moment has come for this person (the trigger MRRocket set, and who it is for). */
1150
+ eligible: boolean;
1151
+ /** Marks a step done (a tour step, a task). */
1152
+ complete(stepId: string): void;
1153
+ /** The person closed it; the item after it follows. */
1154
+ dismiss(): void;
1155
+ /** Answers a question (its step id or its key) with an option's id or a text; it is kept on the contact. */
1156
+ answer(question: string, value: string): void;
1157
+ /** Starts an item the SDK draws (the first live one without an id). */
1158
+ start(id?: string): boolean;
1159
+ }
1160
+
1006
1161
  interface NativeAppearance {
1007
1162
  theme?: "light" | "dark" | "auto";
1008
1163
  accent?: string;
1009
1164
  }
1010
- declare const MRRocketFlows: ({ flows, paywall, appearance }: {
1165
+ /** The dialogs, and (0.18.0) the finish animation over the app when someone just finished an item. */
1166
+ declare const MRRocketFlows: (props: {
1011
1167
  flows: FlowsController;
1012
1168
  paywall?: PaywallHost;
1013
1169
  appearance?: NativeAppearance;
1014
- }) => react.FunctionComponentElement<Record<string, unknown>> | null;
1170
+ }) => react.FunctionComponentElement<react.FragmentProps>;
1015
1171
 
1016
1172
  interface Palette {
1017
1173
  accent: string;
@@ -1209,10 +1365,16 @@ declare const usePaywall: () => {
1209
1365
  declare const useReview: () => {
1210
1366
  request: MRRocketClient["requestReview"];
1211
1367
  };
1212
- /** Starts an onboarding flow now (the first live one without an id), whatever its trigger. */
1213
- declare const useOnboarding: () => {
1214
- start: (id?: string) => boolean;
1215
- };
1368
+ /**
1369
+ * `start(id?)` starts an onboarding flow now (the first live one without an id), whatever its trigger. 0.18.0: with an
1370
+ * id, also the item you draw yourself ("Shown by: your code" in MRRocket): `item`, `steps` (each with `done`), `done`,
1371
+ * `complete(stepId)`, `dismiss()` and `answer(question, value)`; MRRocket still counts it and keeps the answers on the
1372
+ * contact.
1373
+ *
1374
+ * const { item, steps, done, complete } = useOnboarding("flow_123");
1375
+ * if (!item || done) return null;
1376
+ */
1377
+ declare const useOnboarding: (id?: string) => UseOnboarding;
1216
1378
  /** A feature flag from MRRocket › Build › Feature flags: true while it is on for this person; false while off, unknown or loading. */
1217
1379
  declare const useFlag: (key: string) => boolean;
1218
1380
  /** The variant of a multivariate flag ("control", "test" …), or null while it is off. */
@@ -1247,4 +1409,4 @@ declare const useExpoRouterTracking: () => void;
1247
1409
  */
1248
1410
  declare const useNavigationTracking: () => (state: unknown) => void;
1249
1411
 
1250
- export { type AppContext, type CancelFlowConfig, type CancelFlowOptions, type CancelFlowResult, type CancelOffer, type ChatMessage, type ChatThread, type CockpitConfig, type FeedbackPost, type FlagConfig, type FlowMedia, type FlowView, type IdentifyOptions, type InAppMessage, type KeyValueStorage, type MRRocketClient, MRRocketFeedback, MRRocketFlows, MRRocketMask, MRRocketMessenger, type MRRocketOptions, MRRocketProvider, type MRRocketProviderProps, MRRocketSurveys, type NativeAppearance, type NativeConsent, type NativeFeedbackOptions, type NativeMessengerOptions, type NativePushResult, type NativePushStatus, type NativeReviewResult, type OnboardingFlow, type OnboardingStep, type PaywallConfig, type PaywallOptions, type PaywallPage, type PaywallPlan, type PaywallResult, type RegisterForPushOptions, SDK_VERSION, type SurveyDefinition, type TourPlacement, type VariantId, activeRouteName, createMRRocket, getMRRocket, useCancelFlow, useExpoRouterTracking, useFeedback, useFlag, useFlagVariant, useMRRocket, useMessenger, useNavigationTracking, useOnboarding, usePaywall, usePush, useReview, useText, useVariant };
1412
+ export { type AppContext, type CancelFlowConfig, type CancelFlowOptions, type CancelFlowResult, type CancelOffer, type ChatMessage, type ChatThread, type CockpitConfig, type FeedbackPost, type FinishAnimation, type FlagConfig, type FlowIcon, type FlowMedia, type FlowView, type IdentifyOptions, type InAppMessage, type KeyValueStorage, type MRRocketClient, MRRocketFeedback, MRRocketFlows, MRRocketMask, MRRocketMessenger, type MRRocketOptions, MRRocketProvider, type MRRocketProviderProps, MRRocketSurveys, type NativeAppearance, type NativeConsent, type NativeFeedbackOptions, type NativeMessengerOptions, type NativePushResult, type NativePushStatus, type NativeReviewResult, type OnboardingFlow, type OnboardingItemState, type OnboardingQuestion, type OnboardingStep, type PaywallConfig, type PaywallOptions, type PaywallPage, type PaywallPlan, type PaywallResult, type RegisterForPushOptions, SDK_VERSION, type SurveyDefinition, type TaskOpens, type TourPlacement, type UseOnboarding, type VariantId, activeRouteName, createMRRocket, getMRRocket, useCancelFlow, useExpoRouterTracking, useFeedback, useFlag, useFlagVariant, useMRRocket, useMessenger, useNavigationTracking, useOnboarding, usePaywall, usePush, useReview, useText, useVariant };
@@ -281,7 +281,9 @@ type Api = ReturnType<typeof createApi>;
281
281
  * - `$onboarding` `{flow, step?, action: "started" | "shown" | "completed" | "dismissed"}`; since 0.11.0 a wait records
282
282
  * "shown" when the person reaches it and "completed" when it is over, a condition `{action: "answered", answer: "yes"
283
283
  * | "no"}` once it is decided; since 0.17.0 a tour a checklist task started records `{action: "started", from}` with
284
- * the checklist's id.
284
+ * the checklist's id; since 0.18.0 a question records `{kind: "question", action: "completed", question, answer,
285
+ * label}` (the question's key, the option's id or the typed text, the option's words), which MRRocket keeps on the
286
+ * contact, and a checklist task that opens something `{action: "opened", opens}`.
285
287
  * - `$inapp` `{message, journey, action: "shown" | "clicked" | "dismissed"}`; the journey moves the person on.
286
288
  */
287
289
 
@@ -350,7 +352,54 @@ interface CancelFlowConfig {
350
352
  */
351
353
  offersFor: "business";
352
354
  }
353
- type OnboardingStepKind = "tour" | "checklist" | "modal";
355
+ /** "question" (0.18.0): one question of a Questions item, a slide of its window. */
356
+ type OnboardingStepKind = "tour" | "checklist" | "modal" | "question";
357
+ /**
358
+ * 0.18.0: what a checklist task opens. `page`: a path or address on the web, a deep link (`myapp://…`) or a screen name
359
+ * in an app, handed to the app's `onNavigate` when it passes one; `tour` / `modal`: another item of the config, after
360
+ * which the checklist comes back; `code`: the app's `onTask(taskId, item)`.
361
+ */
362
+ type TaskOpens = {
363
+ kind: "page";
364
+ target: string;
365
+ } | {
366
+ kind: "tour";
367
+ id: string;
368
+ } | {
369
+ kind: "modal";
370
+ id: string;
371
+ } | {
372
+ kind: "code";
373
+ };
374
+ /**
375
+ * 0.18.0: a small picture beside a checklist task or above a modal's or the questions' heading: one of the SDK's own
376
+ * line icons (`FLOW_ICON_NAMES`, icons.ts), an emoji, or a picture (http(s)).
377
+ */
378
+ type FlowIcon = {
379
+ kind: "builtin";
380
+ name: string;
381
+ } | {
382
+ kind: "emoji";
383
+ value: string;
384
+ } | {
385
+ kind: "image";
386
+ url: string;
387
+ };
388
+ /** 0.18.0: what plays when someone finishes a checklist, a tour or the questions. */
389
+ type FinishAnimation = "none" | "confetti" | "fireworks" | "stars";
390
+ /** 0.18.0: one question of a Questions item: one choice of 2 to 6 options, or a short text. */
391
+ interface OnboardingQuestion {
392
+ /** The answer's name on the contact (`onboarding.<key>`) and in "People who answered …". */
393
+ key: string;
394
+ type: "choice" | "text";
395
+ /** Choice: the options, in order; `id` is what is stored, `label` what people read. */
396
+ options?: {
397
+ id: string;
398
+ label: string;
399
+ }[];
400
+ /** Text: the field's hint. */
401
+ placeholder?: string;
402
+ }
354
403
  /** 0.17.0: where a tour bubble sits next to its element; "auto" (and no value) puts it below, else above, as before. */
355
404
  type TourPlacement = "auto" | "top" | "bottom" | "left" | "right";
356
405
  /**
@@ -380,6 +429,12 @@ interface OnboardingStep {
380
429
  url?: string;
381
430
  /** 0.17.0, checklist items: the id of a tour (another flow) the item starts; finishing the tour ticks the item. */
382
431
  startsTour?: string;
432
+ /** 0.18.0, checklist items: what the task opens (read before `startsTour`, which MRRocket still sends for a tour). */
433
+ opens?: TaskOpens;
434
+ /** 0.18.0, checklist items: the task's icon. */
435
+ icon?: FlowIcon;
436
+ /** 0.18.0, question steps: the question (the step's `title` is what people read). */
437
+ question?: OnboardingQuestion;
383
438
  }
384
439
  /** A pause in a flow (0.11.0): the next step shows this long after the one before was done. */
385
440
  interface OnboardingWait {
@@ -412,10 +467,33 @@ interface OnboardingFlow {
412
467
  * of the app ("/settings", "/projects/*"), or "From a checklist" (only a checklist task starts it).
413
468
  */
414
469
  trigger: string;
415
- /** 0.17.0: "signed_in" starts it on its own only for someone the app identified. */
416
- audience?: "signed_in";
470
+ /**
471
+ * 0.17.0: "signed_in" starts it on its own only for someone the app identified. 0.18.0: "answered" only for someone
472
+ * who gave `answered.option` to the question `answered.question` (its key).
473
+ */
474
+ audience?: "signed_in" | "answered";
475
+ /** 0.18.0: with `audience: "answered"`, the question's key and the option's id (or the typed text). */
476
+ answered?: {
477
+ question: string;
478
+ option: string;
479
+ };
417
480
  /** What every version shows: with `nodes`, only the in-app steps before the first wait or condition. */
418
481
  steps: OnboardingStep[];
482
+ /** 0.18.0: the icon above a modal's or the questions' heading. */
483
+ icon?: FlowIcon;
484
+ /** 0.18.0: what plays when the person finishes it (a checklist, a tour, the questions). */
485
+ finish?: FinishAnimation;
486
+ /**
487
+ * 0.18.0: "code": the app draws it itself (`useOnboarding(id)`, `mrrocket.onboarding.get(id)`); the SDK draws
488
+ * nothing for it, never starts it, and still records what the app reports. Such an item's `trigger` is
489
+ * "From your code" (older versions never start it).
490
+ */
491
+ shownBy?: "code";
492
+ /**
493
+ * 0.18.0: the item's real moment (read instead of `trigger`, see `momentOf`) when `trigger` is one older versions
494
+ * never start: "From your code", or `NEEDS_NEWER` for questions and items that follow another or ask for an answer.
495
+ */
496
+ when?: string;
419
497
  /** 0.11.0+: the whole flow with its waits and conditions. Read instead of `steps` when it is there. */
420
498
  nodes?: OnboardingNode[];
421
499
  }
@@ -485,15 +563,22 @@ type FlowView = {
485
563
  /** The step for the dots, 1 to `steps`. */
486
564
  step: number;
487
565
  steps: number;
488
- } | {
566
+ }
567
+ /** `answer` (0.18.0): a question's answer so far (an option's id or the typed text); `back`: an earlier question to go back to. */
568
+ | {
489
569
  type: "step";
490
570
  flow: OnboardingFlow;
491
571
  step: OnboardingStep;
492
572
  index: number;
493
573
  total: number;
494
574
  last: boolean;
575
+ answer?: string;
576
+ back?: boolean;
495
577
  }
496
- /** `tour`: the tour the item starts (0.17.0), when the config has it. */
578
+ /**
579
+ * `tour`: the tour the item starts (0.17.0), when the config has it. `opens` (0.18.0): what tapping the task opens
580
+ * (a tour or modal only when the config has it); `target` the item it opens.
581
+ */
497
582
  | {
498
583
  type: "checklist";
499
584
  flow: OnboardingFlow;
@@ -501,6 +586,8 @@ type FlowView = {
501
586
  step: OnboardingStep;
502
587
  done: boolean;
503
588
  tour?: OnboardingFlow;
589
+ opens?: TaskOpens;
590
+ target?: OnboardingFlow;
504
591
  }[];
505
592
  } | {
506
593
  type: "message";
@@ -528,17 +615,54 @@ interface FlowsController {
528
615
  confirm(comment?: string): void;
529
616
  close(): void;
530
617
  };
531
- /** `startTour(stepId)` (0.17.0): the tour a checklist item starts; the checklist comes back when it ends. */
618
+ /**
619
+ * `startTour(stepId)` (0.17.0): the tour a checklist item starts; the checklist comes back when it ends.
620
+ * 0.18.0: `open(stepId)` does what the task opens (a page, a tour, a modal, the app's code); `answer(value)` picks an
621
+ * option or types the text of the question on screen, `back()` returns to the question before. `item(id)` and the
622
+ * calls after it are for an item the app draws itself (`shownBy: "code"`).
623
+ */
532
624
  onboarding: {
533
625
  next(): void;
534
626
  check(stepId: string): void;
535
627
  dismiss(): void;
536
628
  startTour(stepId: string): boolean;
629
+ open(stepId: string): boolean;
630
+ answer(value: string): void;
631
+ back(): void;
632
+ item(id: string): OnboardingItemState | null;
633
+ seen(id: string): void;
634
+ complete(id: string, stepId: string): void;
635
+ dismissItem(id: string): void;
636
+ answerItem(id: string, question: string, value: string): void;
537
637
  };
538
638
  message: {
539
639
  click(): void;
540
640
  dismiss(): void;
541
641
  };
642
+ /** 0.18.0: the animation to play now that someone finished an item (a new `key` each time), or null. */
643
+ finale(): {
644
+ kind: Exclude<FinishAnimation, "none">;
645
+ key: string;
646
+ } | null;
647
+ /** 0.18.0: the product's brand color from MRRocket, for the dialogs when the app passes no accent of its own. */
648
+ accent(): string | undefined;
649
+ /** 0.18.0: the person's answers to onboarding questions, by key. */
650
+ answers(): Record<string, string>;
651
+ }
652
+ /** 0.18.0: an item the app draws itself (`shownBy: "code"`), with the person's progress. */
653
+ interface OnboardingItemState {
654
+ item: OnboardingFlow;
655
+ /** Its steps (a tour's steps, a checklist's tasks, the questions), each with whether the person did it. */
656
+ steps: (OnboardingStep & {
657
+ done: boolean;
658
+ answer?: string;
659
+ })[];
660
+ /** Every step is done. */
661
+ done: boolean;
662
+ /** The person closed it. */
663
+ dismissed: boolean;
664
+ /** Its moment has come for this person (the trigger MRRocket set, and who it is for); your code may ignore it. */
665
+ eligible: boolean;
542
666
  }
543
667
 
544
668
  /**
@@ -658,7 +782,7 @@ interface PaywallHost {
658
782
 
659
783
  type VariantId = string;
660
784
  /** This build of the SDK. Sent with the config request so MRRocket knows what the site runs (error tracking, flags). */
661
- declare const SDK_VERSION = "0.17.0";
785
+ declare const SDK_VERSION = "0.18.0";
662
786
  /** One variant of an experiment. `changes` replaces texts that the page marks with `<Text id>`. */
663
787
  interface VariantConfig {
664
788
  id: VariantId;
@@ -711,6 +835,8 @@ interface CockpitConfig {
711
835
  cancelFlow?: CancelFlowConfig;
712
836
  /** The in-app steps of live onboarding flows (tours, checklists, modals). SDK 0.7.0+. */
713
837
  onboarding?: OnboardingFlow[];
838
+ /** The product's brand color ("#rrggbb") for the onboarding dialogs when the app passes no accent. SDK 0.18.0+. */
839
+ onboardingAccent?: string;
714
840
  /** A live Lifecycle journey has in-app messages: signed-in people ask `/api/sdk/inapp` for theirs. SDK 0.7.0+. */
715
841
  messages?: boolean;
716
842
  /** Page redirects set in MRRocket; the SDK sends visitors on before the page shows (`redirectFor`). SDK 0.7.0+. */
@@ -859,6 +985,14 @@ interface MRRocketOptions {
859
985
  debug?: boolean;
860
986
  /** Onboarding flows start on their own when the person does their trigger (default true). False: only `startOnboarding()`. */
861
987
  onboarding?: boolean;
988
+ /**
989
+ * 0.18.0: opens what a checklist task's "Opens: page or screen" names: a screen name or a path for your navigator
990
+ * (`(target) => router.push(target)`). Without it only a deep link or an address (`myapp://…`, `https://…`) opens,
991
+ * through `Linking`.
992
+ */
993
+ onNavigate?: (target: string) => void;
994
+ /** 0.18.0: a checklist task set to "Opens: your code" was tapped: `(taskId, item) => …`. */
995
+ onTask?: (taskId: string, item: OnboardingFlow) => void;
862
996
  /** Taps go to Heatmaps as clicks on the screen they happened on (default true; `MRRocketProvider` captures them). */
863
997
  heatmaps?: boolean;
864
998
  /**
@@ -1003,15 +1137,37 @@ interface MRRocketClient {
1003
1137
  /** The name of the screen a React Navigation state shows: the focused route, followed into nested navigators. */
1004
1138
  declare const activeRouteName: (state: unknown) => string | undefined;
1005
1139
 
1140
+ interface UseOnboarding {
1141
+ /** The item as MRRocket published it, or null while the config is loading, or when it is not live. */
1142
+ item: OnboardingFlow | null;
1143
+ /** Its steps (a tour's steps, a checklist's tasks, the questions), each with `done` (and a question's `answer`). */
1144
+ steps: OnboardingItemState["steps"];
1145
+ /** Every step is done. */
1146
+ done: boolean;
1147
+ /** The person closed it. */
1148
+ dismissed: boolean;
1149
+ /** Its moment has come for this person (the trigger MRRocket set, and who it is for). */
1150
+ eligible: boolean;
1151
+ /** Marks a step done (a tour step, a task). */
1152
+ complete(stepId: string): void;
1153
+ /** The person closed it; the item after it follows. */
1154
+ dismiss(): void;
1155
+ /** Answers a question (its step id or its key) with an option's id or a text; it is kept on the contact. */
1156
+ answer(question: string, value: string): void;
1157
+ /** Starts an item the SDK draws (the first live one without an id). */
1158
+ start(id?: string): boolean;
1159
+ }
1160
+
1006
1161
  interface NativeAppearance {
1007
1162
  theme?: "light" | "dark" | "auto";
1008
1163
  accent?: string;
1009
1164
  }
1010
- declare const MRRocketFlows: ({ flows, paywall, appearance }: {
1165
+ /** The dialogs, and (0.18.0) the finish animation over the app when someone just finished an item. */
1166
+ declare const MRRocketFlows: (props: {
1011
1167
  flows: FlowsController;
1012
1168
  paywall?: PaywallHost;
1013
1169
  appearance?: NativeAppearance;
1014
- }) => react.FunctionComponentElement<Record<string, unknown>> | null;
1170
+ }) => react.FunctionComponentElement<react.FragmentProps>;
1015
1171
 
1016
1172
  interface Palette {
1017
1173
  accent: string;
@@ -1209,10 +1365,16 @@ declare const usePaywall: () => {
1209
1365
  declare const useReview: () => {
1210
1366
  request: MRRocketClient["requestReview"];
1211
1367
  };
1212
- /** Starts an onboarding flow now (the first live one without an id), whatever its trigger. */
1213
- declare const useOnboarding: () => {
1214
- start: (id?: string) => boolean;
1215
- };
1368
+ /**
1369
+ * `start(id?)` starts an onboarding flow now (the first live one without an id), whatever its trigger. 0.18.0: with an
1370
+ * id, also the item you draw yourself ("Shown by: your code" in MRRocket): `item`, `steps` (each with `done`), `done`,
1371
+ * `complete(stepId)`, `dismiss()` and `answer(question, value)`; MRRocket still counts it and keeps the answers on the
1372
+ * contact.
1373
+ *
1374
+ * const { item, steps, done, complete } = useOnboarding("flow_123");
1375
+ * if (!item || done) return null;
1376
+ */
1377
+ declare const useOnboarding: (id?: string) => UseOnboarding;
1216
1378
  /** A feature flag from MRRocket › Build › Feature flags: true while it is on for this person; false while off, unknown or loading. */
1217
1379
  declare const useFlag: (key: string) => boolean;
1218
1380
  /** The variant of a multivariate flag ("control", "test" …), or null while it is off. */
@@ -1247,4 +1409,4 @@ declare const useExpoRouterTracking: () => void;
1247
1409
  */
1248
1410
  declare const useNavigationTracking: () => (state: unknown) => void;
1249
1411
 
1250
- export { type AppContext, type CancelFlowConfig, type CancelFlowOptions, type CancelFlowResult, type CancelOffer, type ChatMessage, type ChatThread, type CockpitConfig, type FeedbackPost, type FlagConfig, type FlowMedia, type FlowView, type IdentifyOptions, type InAppMessage, type KeyValueStorage, type MRRocketClient, MRRocketFeedback, MRRocketFlows, MRRocketMask, MRRocketMessenger, type MRRocketOptions, MRRocketProvider, type MRRocketProviderProps, MRRocketSurveys, type NativeAppearance, type NativeConsent, type NativeFeedbackOptions, type NativeMessengerOptions, type NativePushResult, type NativePushStatus, type NativeReviewResult, type OnboardingFlow, type OnboardingStep, type PaywallConfig, type PaywallOptions, type PaywallPage, type PaywallPlan, type PaywallResult, type RegisterForPushOptions, SDK_VERSION, type SurveyDefinition, type TourPlacement, type VariantId, activeRouteName, createMRRocket, getMRRocket, useCancelFlow, useExpoRouterTracking, useFeedback, useFlag, useFlagVariant, useMRRocket, useMessenger, useNavigationTracking, useOnboarding, usePaywall, usePush, useReview, useText, useVariant };
1412
+ export { type AppContext, type CancelFlowConfig, type CancelFlowOptions, type CancelFlowResult, type CancelOffer, type ChatMessage, type ChatThread, type CockpitConfig, type FeedbackPost, type FinishAnimation, type FlagConfig, type FlowIcon, type FlowMedia, type FlowView, type IdentifyOptions, type InAppMessage, type KeyValueStorage, type MRRocketClient, MRRocketFeedback, MRRocketFlows, MRRocketMask, MRRocketMessenger, type MRRocketOptions, MRRocketProvider, type MRRocketProviderProps, MRRocketSurveys, type NativeAppearance, type NativeConsent, type NativeFeedbackOptions, type NativeMessengerOptions, type NativePushResult, type NativePushStatus, type NativeReviewResult, type OnboardingFlow, type OnboardingItemState, type OnboardingQuestion, type OnboardingStep, type PaywallConfig, type PaywallOptions, type PaywallPage, type PaywallPlan, type PaywallResult, type RegisterForPushOptions, SDK_VERSION, type SurveyDefinition, type TaskOpens, type TourPlacement, type UseOnboarding, type VariantId, activeRouteName, createMRRocket, getMRRocket, useCancelFlow, useExpoRouterTracking, useFeedback, useFlag, useFlagVariant, useMRRocket, useMessenger, useNavigationTracking, useOnboarding, usePaywall, usePush, useReview, useText, useVariant };