@guidelytech/react-native 0.14.0 → 0.16.0

package/README.md

@@ -76,7 +76,7 @@ tasks).
 
 | | |
 |---|---|
-| `useGuidely()` | Client: `identify(id, traits?, account?)`, `setAccount`, `updateTraits`, `reset()`, `track(name, props?)`, `screen(name)`, `startGuide(idOrKey)`, `stopGuide()`, `dismissGuide()`, `openChecklist(key)`, `closeChecklist(key)`, `completeChecklistTask(key, taskId)`, `openResourceCenter()`, `closeResourceCenter()`, `refresh()`, `setConsent()`, `on(event, cb)`, `getGuides()`, `getActiveGuide()`, `getState()`, `startSessionRecording()`, `stopSessionRecording()`, `isRecording()`, `getSessionId()` |
+| `useGuidely()` | Client: `identify(id, traits?, account?)`, `setAccount`, `updateTraits`, `reset()`, `track(name, props?)`, `screen(name)`, `startGuide(idOrKey)`, `stopGuide()`, `dismissGuide()`, `openChecklist(key)`, `closeChecklist(key)`, `completeChecklistTask(key, taskId)`, `openResourceCenter()`, `closeResourceCenter()`, `openArticle(articleId)`, `refresh()`, `setConsent()`, `on(event, cb)`, `getGuides()`, `getActiveGuide()`, `getState()`, `startSessionRecording()`, `stopSessionRecording()`, `isRecording()`, `getSessionId()` |
 | `useGuidelyReady()` | `true` once config is loaded |
 | `useGuidelyIdentify(id, traits?, account?)` | Identify when the signed-in user changes |
 | `useGuidelyScreen(name)` | Report a screen view from a component |

package/dist/index.cjs

@@ -165,7 +165,7 @@ function FlagsProvider({ children, client: external, payload, ...options }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FlagsContext.Provider, { value, children });
 }
 
-// ../shared/dist/chunk-XJXXVV3C.js
+// ../shared/dist/chunk-7PWYIAJI.js
 function fnv1a(input) {
   let h = 2166136261;
   for (let i = 0; i < input.length; i++) {
@@ -574,6 +574,16 @@ function isSafeMediaUrl(url) {
     return false;
   }
 }
+function videoThumbnailUrl(url) {
+  const embed = url ? toEmbedUrl(url) : null;
+  if (embed?.provider !== "youtube") return null;
+  const id = embed.src.split("/embed/")[1]?.split("?")[0];
+  return id ? `https://i.ytimg.com/vi/${id}/hqdefault.jpg` : null;
+}
+function stepVideo(step) {
+  if (!step.videoUrl || !isSafeMediaUrl(step.videoUrl)) return null;
+  return { url: step.videoUrl, poster: (step.imageUrl && isSafeMediaUrl(step.imageUrl) ? step.imageUrl : null) ?? videoThumbnailUrl(step.videoUrl) };
+}
 var MAX_COLLECTION_DEPTH = 3;
 function matchesAudiences(required, member) {
   if (!required || required.length === 0) return true;
@@ -643,6 +653,13 @@ function unreadAnnouncements(items, lastSeenAt) {
   if (Number.isNaN(seen)) return items.length;
   return items.filter((a) => Date.parse(a.publishedAt) > seen).length;
 }
+var ARTICLE_HREF_PREFIX = "#guidely-article:";
+var ARTICLE_ID = /^[A-Za-z0-9_-]{1,64}$/;
+function articleIdFromHref(href) {
+  if (!href || !href.startsWith(ARTICLE_HREF_PREFIX)) return null;
+  const id = href.slice(ARTICLE_HREF_PREFIX.length);
+  return ARTICLE_ID.test(id) ? id : null;
+}
 var CAPTURE_SCREENSHOT_MAX_BYTES = 8 * 1024 * 1024;
 var DEFAULT_LOCALE = "en";
 function normalizeLocale(input) {
@@ -2969,7 +2986,7 @@ var PersistentStore = class {
 
 // src/core/client.ts
 var SDK_NAME = "@guidelytech/react-native";
-var SDK_VERSION = "0.14.0";
+var SDK_VERSION = "0.16.0";
 var DEFAULT_API_URL = "https://guidelytech.com";
 var PAGE_SCOPED = /* @__PURE__ */ new Set(["page_load", "url_match", "element_click", "element_visible", "delay"]);
 var CACHED_START_MS = 1500;
@@ -3021,6 +3038,8 @@ var GuidelyClient = class {
     __publicField(this, "expanded", /* @__PURE__ */ new Set());
     __publicField(this, "surveyView", null);
     __publicField(this, "resourceCenterOpen", false);
+    /** The article a help-article link asked the resource center to show (`seq` tells repeats apart). */
+    __publicField(this, "resourceCenterArticle", null);
     __publicField(this, "cleanups", []);
     __publicField(this, "timers", /* @__PURE__ */ new Set());
     __publicField(this, "visibilityWatchers", /* @__PURE__ */ new Map());
@@ -3613,7 +3632,7 @@ var GuidelyClient = class {
     const opts = this.options.sessionReplay ?? {};
     const ids = new Set((r?.blockSelectors ?? []).map((sel) => guidelyIdFromSelector(sel)).filter((id) => !!id));
     const rects = await Promise.all(Array.from(ids, (id) => this.targets.measure(id)));
-    return { maskAllText: !!opts.maskAllText || !!r?.maskAllText, maskAllImages: !!opts.maskAllImages, blockRects: rects.filter((rect) => !!rect) };
+    return { maskAllText: !!opts.maskAllText || !!r?.maskAllText, maskAllImages: !!opts.maskAllImages || !!r?.maskAllImages, blockRects: rects.filter((rect) => !!rect) };
   }
   /**
    * Records this session even when it was not sampled (still needs `sessionReplay.enabled`, replay
@@ -4186,6 +4205,8 @@ var GuidelyClient = class {
    */
   navigate(url) {
     if (!url) return;
+    const articleId = articleIdFromHref(url);
+    if (articleId) return this.openArticle(articleId);
     try {
       if (this.options.onNavigate?.(url) === true) return;
       if (/^[a-z][a-z0-9+.-]*:/i.test(url)) this.bridge.openExternal(url);
@@ -4209,7 +4230,7 @@ var GuidelyClient = class {
     for (const f of [...this.flows.values(), ...this.active ? [this.active] : []]) if (f.view) steps.push({ ...f.view, expanded: this.expanded.has(f.guide.id) });
     const checklists = [];
     this.checklists.forEach((w, id) => checklists.push({ guide: w.guide, progress: this.getChecklistProgress(id), open: w.open }));
-    this.ui = { steps, checklists, survey: this.surveyView, resourceCenterOpen: this.resourceCenterOpen, theme: this.themeFor(), messenger: !!this.messenger };
+    this.ui = { steps, checklists, survey: this.surveyView, resourceCenterOpen: this.resourceCenterOpen, resourceCenterArticle: this.resourceCenterArticle, theme: this.themeFor(), messenger: !!this.messenger };
     for (const cb of Array.from(this.uiListeners)) {
       try {
         cb();
@@ -4229,6 +4250,12 @@ var GuidelyClient = class {
   closeStep(guideId) {
     this.flowFor(guideId)?.controller.dismiss();
   }
+  /** The video on a step was tapped: records `guide_video_clicked`, then opens the video outside the app. */
+  openVideo(guideId, url) {
+    const v = this.flowFor(guideId)?.view;
+    if (v) this.enqueue("guide_video_clicked", { guideId: v.guide.id, guideVersion: v.guide.version, stepId: v.step.id, stepIndex: v.index, properties: { videoUrl: url } });
+    this.navigate(url);
+  }
   /** The dimmed backdrop behind a step was tapped. */
   backdropPressed(guideId) {
     const f = this.flowFor(guideId);
@@ -4501,10 +4528,40 @@ var GuidelyClient = class {
     this.emitter.emit("resource-center:open");
     this.notify();
   }
+  /**
+   * Opens one help article: in Scout's Help tab when the messenger is on, otherwise in the resource
+   * center. Help-article links in guides and articles (`#guidely-article:<id>`) call this.
+   */
+  openArticle(articleId) {
+    if (this.messenger) {
+      this.whenHydrated(() => void this.messenger?.openArticle(articleId));
+      return;
+    }
+    if (!this.getResourceCenter()) {
+      this.log("openArticle: the resource center is not enabled or published for this environment");
+      return;
+    }
+    this.resourceCenterArticle = { id: articleId, seq: (this.resourceCenterArticle?.seq ?? 0) + 1 };
+    if (this.resourceCenterOpen) this.notify();
+    else this.openResourceCenter();
+  }
+  /** A resource-center article with its body: from the config, or fetched when the config left it out. */
+  async loadArticle(articleId) {
+    const listed = this.getResourceCenter()?.articles.find((a) => a.id === articleId);
+    if (listed && !listed.bodyOmitted) return listed;
+    try {
+      const locale = this.articleLocale();
+      const res = await this.api.get(`/articles/${encodeURIComponent(articleId)}`, locale ? { params: { locale } } : {});
+      return res.ok && res.data ? res.data.article : null;
+    } catch {
+      return null;
+    }
+  }
   closeResourceCenter() {
     if (this.messenger) return this.closeMessenger();
     if (!this.resourceCenterOpen) return;
     this.resourceCenterOpen = false;
+    this.resourceCenterArticle = null;
     this.notify();
   }
   // ---------------------------------------------------------------------------
@@ -5850,7 +5907,7 @@ var styles4 = import_react_native5.StyleSheet.create({
 var import_react4 = require("react");
 var import_react_native6 = require("react-native");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-function ResourceCenter({ client, palette: p, open, topInset, bottomInset }) {
+function ResourceCenter({ client, palette: p, open, articleRequest, topInset, bottomInset }) {
   const rc = client.getResourceCenter();
   const [query, setQuery] = (0, import_react4.useState)("");
   const [results, setResults] = (0, import_react4.useState)(null);
@@ -5863,6 +5920,19 @@ function ResourceCenter({ client, palette: p, open, topInset, bottomInset }) {
       setArticle(null);
     }
   }, [open]);
+  (0, import_react4.useEffect)(() => {
+    if (!open || !articleRequest) return;
+    let alive = true;
+    void client.loadArticle(articleRequest.id).then((a) => {
+      if (!alive || !a) return;
+      if (a.externalUrl) return client.navigate(a.externalUrl);
+      client.articleViewed(a);
+      setArticle(a);
+    });
+    return () => {
+      alive = false;
+    };
+  }, [client, open, articleRequest?.seq]);
   (0, import_react4.useEffect)(() => {
     const q = query.trim();
     if (q.length < 2) {
@@ -6044,7 +6114,7 @@ function positionCard(target, size, viewport, insets, placement, offset) {
 // src/ui/StepCard.tsx
 var import_react_native7 = require("react-native");
 var import_jsx_runtime7 = (
-  // An empty description marks the image as decorative: screen readers skip it.
+  // The video opens outside the app (browser or the provider's app), like a new tab on the web.
   require("react/jsx-runtime")
 );
 function StepCard({ view, client, palette: p, width, style, compact }) {
@@ -6053,16 +6123,33 @@ function StepCard({ view, client, palette: p, width, style, compact }) {
   const body = step.type === "custom" ? step.customHtml || step.body : step.body;
   const showProgress = step.showProgress && view.total > 1;
   const onLink = (url) => client.navigate(url);
+  const video = stepVideo(step);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Surface, { palette: p, style: [{ width }, style], children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { accessible: false, accessibilityViewIsModal: view.asModal || step.type === "modal", style: compact ? styles6.compact : styles6.inner, children: [
-    step.imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_react_native7.Image,
+    video ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      import_react_native7.Pressable,
       {
-        source: { uri: step.imageUrl },
-        style: [styles6.image, { borderRadius: Math.max(0, p.radius - 4) }],
-        resizeMode: "cover",
-        accessibilityIgnoresInvertColors: true,
-        ...step.imageAlt?.trim() ? { accessible: true, accessibilityRole: "image", accessibilityLabel: step.imageAlt.trim() } : { accessible: false, importantForAccessibility: "no" }
+        onPress: () => client.openVideo(guide.id, video.url),
+        accessibilityRole: "button",
+        accessibilityLabel: step.title ? `Play video: ${step.title}` : "Play video",
+        accessibilityHint: "Opens the video outside the app",
+        style: [styles6.video, { borderRadius: Math.max(0, p.radius - 4) }],
+        children: [
+          video.poster ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Image, { source: { uri: video.poster }, style: import_react_native7.StyleSheet.absoluteFill, resizeMode: "cover", accessibilityIgnoresInvertColors: true, accessible: false }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: styles6.play, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: styles6.playTriangle }) })
+        ]
       }
+    ) : step.imageUrl ? (
+      // An empty description marks the image as decorative: screen readers skip it.
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        import_react_native7.Image,
+        {
+          source: { uri: step.imageUrl },
+          style: [styles6.image, { borderRadius: Math.max(0, p.radius - 4) }],
+          resizeMode: "cover",
+          accessibilityIgnoresInvertColors: true,
+          ...step.imageAlt?.trim() ? { accessible: true, accessibilityRole: "image", accessibilityLabel: step.imageAlt.trim() } : { accessible: false, importantForAccessibility: "no" }
+        }
+      )
     ) : null,
     step.title ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: styles6.header, children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { accessibilityRole: "header", style: [styles6.title, { color: p.text, fontFamily: p.fontFamily }], children: step.title }),
@@ -6092,6 +6179,10 @@ var styles6 = import_react_native7.StyleSheet.create({
   inner: { padding: 16, gap: 10 },
   compact: { paddingHorizontal: 14, paddingVertical: 10, gap: 6 },
   image: { width: "100%", height: 140, marginBottom: 2 },
+  video: { width: "100%", aspectRatio: 16 / 9, maxHeight: 200, marginBottom: 2, overflow: "hidden", backgroundColor: "#0f172a", alignItems: "center", justifyContent: "center" },
+  play: { width: 52, height: 52, borderRadius: 26, backgroundColor: "rgba(15,23,42,0.72)", alignItems: "center", justifyContent: "center", paddingLeft: 4 },
+  // A CSS-border triangle: no icon font needed.
+  playTriangle: { width: 0, height: 0, borderTopWidth: 10, borderBottomWidth: 10, borderLeftWidth: 16, borderTopColor: "transparent", borderBottomColor: "transparent", borderLeftColor: "#fff" },
   header: { flexDirection: "row", alignItems: "flex-start", gap: 8 },
   title: { flex: 1, fontSize: 17, fontWeight: "700", lineHeight: 22 },
   flex: { flex: 1 },
@@ -6683,7 +6774,7 @@ function GuidelyOverlay({ client, insets: insetsProp, launcherOffset }) {
     ) : null,
     ui.survey ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Survey, { view: ui.survey, client, palette: palette(client.themeFor(ui.survey.guide), scheme), geometry }) : null,
     ui.steps.map((s) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StepLayer, { view: s, client, palette: palette(client.themeFor(s.guide), scheme, s.guide.config.appearance), geometry }, s.key)),
-    messenger ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MessengerSheet, { store: messenger, client, palette: basePalette, topInset: insets.top, bottomInset: insets.bottom }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ResourceCenter, { client, palette: basePalette, open: ui.resourceCenterOpen, topInset: insets.top, bottomInset: insets.bottom })
+    messenger ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MessengerSheet, { store: messenger, client, palette: basePalette, topInset: insets.top, bottomInset: insets.bottom }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ResourceCenter, { client, palette: basePalette, open: ui.resourceCenterOpen, articleRequest: ui.resourceCenterArticle ?? null, topInset: insets.top, bottomInset: insets.bottom })
   ] });
 }
 var styles9 = import_react_native10.StyleSheet.create({