@userflow-tech/react-native 0.2.0 → 0.3.0

package/src/surfaces/bannerWebView/BannerWebViewBar.tsx

@@ -0,0 +1,312 @@
+import { DEFAULT_SERVER_ENDPOINT, genSessionDataLookup } from '@userflow-tech/core';
+import type { FlowActionFragment } from '@userflow-tech/protocol';
+import {
+  BannerEmbedMode,
+  EndFlowReasonInput,
+  type BannerSessionFragment,
+} from '@userflow-tech/protocol';
+import * as React from 'react';
+import {
+  Animated,
+  Platform,
+  useColorScheme,
+  useWindowDimensions,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+import { buildBootstrapHtml, EVAL_JS_BASE_URL, isBootstrapUrl } from '../../evalJs/bootstrap';
+import { parseBridgeMessage } from '../../evalJs/bridgeMessages';
+import { formatEvalJsError, getEvalJsBridgeHandlers } from '../../evalJs/evalJsBridge';
+import { evalJsController } from '../../evalJs/evalJsController';
+import { getEvalJsWebView, type EvalJsWebViewHandle } from '../../evalJs/getWebView';
+import { injectEvalPendingIntoWebView } from '../../evalJs/injectEvalPending';
+import type { EvalJsContext } from '../../evalJs/types';
+import { useEvalJsWebViewInjection } from '../../evalJs/useEvalJsWebViewInjection';
+import { getUserflowCore } from '../../runtime/userflowCore';
+import { getCurrentScreenLocation, subscribeScreenLocation } from '../../screenTracker';
+import {
+  bannerFrameStyle,
+  bannerInnerStyle,
+  resolveBannerBarBorderRadius,
+} from '../bannerBarLayout';
+import { bannerOverlayShadowStyle } from '../bannerBarTokens';
+import { useUserflowSafeAreaInsets } from '../safeArea';
+
+import { collectBannerAutoRunEvalCodes } from './bannerAutoRunEvalJs';
+import { markBannerAutoRunEvalComplete, shouldSkipBannerAutoRunEval } from './bannerAutoRunSession';
+import { buildCustomBannerBodyHtml } from './buildCustomBannerHtml';
+
+export interface BannerWebViewBarProps {
+  session: BannerSessionFragment;
+  onActions: (actions: FlowActionFragment[]) => void | Promise<void>;
+  onDismiss: (endReason: EndFlowReasonInput) => void;
+}
+
+function screenFromLocation(location: { path: string } | { screen: string } | null): {
+  name?: string;
+  path?: string;
+} {
+  if (!location) {
+    return {};
+  }
+  if ('path' in location) {
+    return location.path ? { path: location.path } : {};
+  }
+  return location.screen ? { name: location.screen } : {};
+}
+
+function useEvalJsScreen(): { name?: string; path?: string } {
+  const [screen, setScreen] = React.useState(() => screenFromLocation(getCurrentScreenLocation()));
+  React.useEffect(() => {
+    return subscribeScreenLocation((location) => {
+      setScreen(screenFromLocation(location));
+    });
+  }, []);
+  return screen;
+}
+
+export function BannerWebViewBar({
+  session,
+  onActions,
+  onDismiss,
+}: BannerWebViewBarProps): React.ReactElement | null {
+  const banner = session.version.banner;
+  const WebView = getEvalJsWebView();
+  const webRef = React.useRef<EvalJsWebViewHandle>(null);
+  const [pageReady, setPageReady] = React.useState(false);
+  const [contentHeight, setContentHeight] = React.useState(56);
+  const colorScheme = useColorScheme();
+  const viewport = useWindowDimensions();
+  const insets = useUserflowSafeAreaInsets();
+  const screen = useEvalJsScreen();
+  const lookupAttribute = React.useMemo(() => genSessionDataLookup(session.data), [session.data]);
+
+  const evalSnapshot = React.useSyncExternalStore(
+    evalJsController.subscribe,
+    evalJsController.getSnapshot,
+    evalJsController.getSnapshot,
+  );
+
+  const host = evalSnapshot.host;
+  const context = React.useMemo<EvalJsContext>(
+    () => ({
+      platform: Platform.OS,
+      colorScheme: colorScheme === 'dark' ? 'dark' : 'light',
+      safeAreaInsets: insets,
+      viewport: { width: viewport.width, height: viewport.height },
+      screen,
+      host,
+    }),
+    [colorScheme, host, insets, screen, viewport.height, viewport.width],
+  );
+
+  const serverEndpoint = getUserflowCore().getServerEndpoint() ?? DEFAULT_SERVER_ENDPOINT;
+
+  const skipAutoRunEval = shouldSkipBannerAutoRunEval(session.id);
+  const initialContext = React.useRef(context);
+  const html = React.useMemo(() => {
+    const body = buildCustomBannerBodyHtml(session, lookupAttribute, serverEndpoint, {
+      skipAutoRunEval,
+    });
+    return buildBootstrapHtml(initialContext.current, body);
+  }, [lookupAttribute, serverEndpoint, session, skipAutoRunEval]);
+
+  const opacity = React.useRef(new Animated.Value(banner?.animate ? 0 : 1)).current;
+
+  React.useEffect(() => {
+    if (!banner?.animate) {
+      opacity.setValue(1);
+      return;
+    }
+    opacity.setValue(0);
+    const animation = Animated.timing(opacity, {
+      toValue: 1,
+      duration: 200,
+      useNativeDriver: true,
+    });
+    animation.start();
+    return () => {
+      animation.stop();
+    };
+  }, [banner?.animate, opacity, session.id]);
+
+  React.useEffect(() => {
+    setPageReady(false);
+    setContentHeight(56);
+  }, [session.id, html]);
+
+  React.useEffect(() => {
+    if (!pageReady || skipAutoRunEval || !banner) {
+      return;
+    }
+    if (collectBannerAutoRunEvalCodes(banner, lookupAttribute).length === 0) {
+      return;
+    }
+    markBannerAutoRunEvalComplete(session.id);
+  }, [banner, lookupAttribute, pageReady, session.id, skipAutoRunEval]);
+
+  useEvalJsWebViewInjection(webRef, {
+    pageReady,
+    context,
+    pendingCount: evalSnapshot.pendingCount,
+  });
+
+  const openExternal = React.useCallback((url: string) => {
+    if (!url || isBootstrapUrl(url)) {
+      return;
+    }
+    getEvalJsBridgeHandlers().openUrl(url);
+  }, []);
+
+  const onMessage = React.useCallback(
+    (event: { nativeEvent: { data?: string } }) => {
+      let parsed: unknown = event.nativeEvent.data;
+      if (typeof parsed === 'string') {
+        try {
+          parsed = JSON.parse(parsed) as unknown;
+        } catch {
+          parsed = null;
+        }
+      }
+      if (parsed != null && typeof parsed === 'object' && !Array.isArray(parsed)) {
+        const record = parsed as Record<string, unknown>;
+        if (record.__userflow === 1 && record.type === 'bannerLayout') {
+          const height = record.height;
+          if (typeof height === 'number' && height > 0) {
+            const maxHeight = Math.floor(viewport.height * 0.92);
+            const next = Math.min(Math.ceil(height), maxHeight);
+            setContentHeight((prev) => (Math.abs(next - prev) <= 1 ? prev : next));
+          }
+          return;
+        }
+        if (record.__userflow === 1 && record.type === 'bannerButton') {
+          const buttonId = record.buttonId;
+          if (typeof buttonId === 'string' && banner) {
+            const button = banner.buttons.find((entry) => entry.id === buttonId);
+            if (button) {
+              void Promise.resolve(onActions(button.actions)).then(() => {
+                injectEvalPendingIntoWebView(webRef.current);
+              });
+            }
+          }
+          return;
+        }
+        if (record.__userflow === 1 && record.type === 'bannerDismiss') {
+          webRef.current?.injectJavaScript('window.__userflowBannerEvalDismissed=true;true;');
+          onDismiss(EndFlowReasonInput.USER_CLOSED);
+          return;
+        }
+      }
+
+      const message = parseBridgeMessage(event.nativeEvent.data);
+      if (!message) {
+        return;
+      }
+      const bridge = getEvalJsBridgeHandlers();
+      switch (message.type) {
+        case 'ready':
+          setPageReady(true);
+          webRef.current?.injectJavaScript(
+            'window.__userflowBannerLayout&&window.__userflowBannerLayout();true;',
+          );
+          return;
+        case 'close':
+          webRef.current?.injectJavaScript('window.__userflowBannerEvalDismissed=true;true;');
+          onDismiss(EndFlowReasonInput.USER_CLOSED);
+          return;
+        case 'endFlow':
+          webRef.current?.injectJavaScript('window.__userflowBannerEvalDismissed=true;true;');
+          onDismiss(EndFlowReasonInput.USER_CLOSED);
+          return;
+        case 'setLayout':
+          evalJsController.setLayout(message.layout);
+          return;
+        case 'track':
+          bridge.track(message.name, message.attributes);
+          return;
+        case 'updateUser':
+          bridge.updateUser(message.attributes);
+          return;
+        case 'updateGroup':
+          bridge.updateGroup(message.attributes, message.options);
+          return;
+        case 'openUrl':
+          bridge.openUrl(message.url);
+          return;
+        case 'error':
+          bridge.warn(formatEvalJsError(message.message, message.code));
+          return;
+        default:
+          return;
+      }
+    },
+    [banner, onActions, onDismiss, viewport.height],
+  );
+
+  if (!banner || !WebView) {
+    return null;
+  }
+
+  const overlay = banner.overlay !== false;
+  const frameStyle = bannerFrameStyle(banner);
+  const innerStyle = bannerInnerStyle(banner);
+  const overlayEdge = banner.embedMode === BannerEmbedMode.BODY_LAST ? 'bottom' : 'top';
+  const barRadius = resolveBannerBarBorderRadius(banner);
+  const webStyle: ViewStyle = {
+    width: '100%',
+    height: contentHeight,
+    backgroundColor: 'transparent',
+  };
+  const debugging = typeof __DEV__ !== 'undefined' && __DEV__ ? true : undefined;
+
+  return (
+    <View testID="userflow-banner-frame" style={frameStyle}>
+      <Animated.View style={[{ opacity }, overlay ? bannerOverlayShadowStyle(overlayEdge) : null]}>
+        <View
+          testID="userflow-banner-webview"
+          style={[
+            { borderRadius: barRadius ?? 0, overflow: 'hidden' as const },
+            innerStyle.maxWidth != null ? { maxWidth: innerStyle.maxWidth } : null,
+          ]}
+        >
+          <WebView
+            ref={webRef}
+            source={{ html, baseUrl: EVAL_JS_BASE_URL }}
+            style={webStyle}
+            javaScriptEnabled
+            domStorageEnabled
+            scrollEnabled={false}
+            bounces={false}
+            showsHorizontalScrollIndicator={false}
+            showsVerticalScrollIndicator={false}
+            originWhitelist={['*']}
+            setSupportMultipleWindows={false}
+            androidLayerType="hardware"
+            {...(debugging !== undefined ? { webviewDebuggingEnabled: debugging } : {})}
+            onMessage={onMessage}
+            onLoadEnd={() => {
+              setPageReady(true);
+              webRef.current?.injectJavaScript(
+                'window.__userflowBannerLayout&&window.__userflowBannerLayout();true;',
+              );
+            }}
+            onShouldStartLoadWithRequest={(request) => {
+              if (isBootstrapUrl(request.url)) {
+                return true;
+              }
+              openExternal(request.url);
+              return false;
+            }}
+            onOpenWindow={(event) => {
+              const url = event.nativeEvent.targetUrl;
+              if (url) {
+                openExternal(url);
+              }
+            }}
+          />
+        </View>
+      </Animated.View>
+    </View>
+  );
+}

package/src/surfaces/bannerWebView/bannerAutoRunEvalJs.ts

@@ -0,0 +1,44 @@
+import { interpolateVariables } from '@userflow-tech/core';
+import type { BannerFragment } from '@userflow-tech/protocol';
+import { FlowActionType } from '@userflow-tech/protocol';
+
+function buttonIsEvalJsOnly(button: BannerFragment['buttons'][number]): boolean {
+  const actions = button.actions.filter((action) => action.type != null);
+  if (actions.length === 0) {
+    return false;
+  }
+  return actions.every((action) => action.type === FlowActionType.EVAL_JS);
+}
+
+/**
+ * Evaluate JavaScript bodies from buttons whose **only** actions are EVAL_JS.
+ * Auto-run once when the WebView loads; click still runs the button action list.
+ */
+export function collectBannerAutoRunEvalCodes(
+  banner: BannerFragment,
+  lookupAttribute: (fqn: string) => string | null,
+): string[] {
+  const codes: string[] = [];
+  const seen = new Set<string>();
+  for (const button of banner.buttons) {
+    if (!buttonIsEvalJsOnly(button)) {
+      continue;
+    }
+    for (const action of button.actions) {
+      if (action.type !== FlowActionType.EVAL_JS) {
+        continue;
+      }
+      const raw = action.code ?? '';
+      if (!raw.trim()) {
+        continue;
+      }
+      const code = interpolateVariables(raw, lookupAttribute);
+      if (seen.has(code)) {
+        continue;
+      }
+      seen.add(code);
+      codes.push(code);
+    }
+  }
+  return codes;
+}

package/src/surfaces/bannerWebView/bannerAutoRunSession.ts

@@ -0,0 +1,19 @@
+/** Banner session ids whose eval-only auto-run already ran (survives temporary WebView unmount). */
+const autoRunCompletedSessionIds = new Set<string>();
+
+export function shouldSkipBannerAutoRunEval(sessionId: string): boolean {
+  return autoRunCompletedSessionIds.has(sessionId);
+}
+
+export function markBannerAutoRunEvalComplete(sessionId: string): void {
+  autoRunCompletedSessionIds.add(sessionId);
+}
+
+export function clearBannerAutoRunEvalSession(sessionId: string): void {
+  autoRunCompletedSessionIds.delete(sessionId);
+}
+
+/** @internal */
+export function resetBannerAutoRunSessionsForTests(): void {
+  autoRunCompletedSessionIds.clear();
+}

package/src/surfaces/bannerWebView/bannerNeedsWebView.ts

@@ -0,0 +1,38 @@
+import type { BannerFragment, ThemeFragment } from '@userflow-tech/protocol';
+import { FlowActionType } from '@userflow-tech/protocol';
+
+import { themeHasPublishedCustomCss } from './resolveCdnHost';
+
+let debugForceWebViewBanner = false;
+
+/** POC / local testing when the builder flag is not on the wire yet. */
+export function setDebugForceWebViewBanner(enabled: boolean): void {
+  debugForceWebViewBanner = enabled;
+}
+
+/** @internal */
+export function resetDebugForceWebViewBannerForTests(): void {
+  debugForceWebViewBanner = false;
+}
+
+function bannerHasEvalJsAction(banner: BannerFragment): boolean {
+  return banner.buttons.some((button) =>
+    button.actions.some((action) => action.type === FlowActionType.EVAL_JS),
+  );
+}
+
+/**
+ * Use the WebView banner renderer when any button runs Evaluate JavaScript
+ * (needs the shared eval page), when the theme has published custom CSS
+ * (`.userflow-custom-container-*` / `.userflow-custom-button-*` via CDN),
+ * or when {@link setDebugForceWebViewBanner} is true.
+ */
+export function bannerNeedsWebView(banner: BannerFragment, theme?: ThemeFragment | null): boolean {
+  if (debugForceWebViewBanner) {
+    return true;
+  }
+  if (theme != null && themeHasPublishedCustomCss(theme)) {
+    return true;
+  }
+  return bannerHasEvalJsAction(banner);
+}

package/src/surfaces/bannerWebView/bannerThemeStyles.ts

@@ -0,0 +1,91 @@
+import type { ThemeFragment } from '@userflow-tech/protocol';
+
+import { resolveBannerBackgroundColor, resolveBannerForegroundColor } from '../resolveBannerTheme';
+
+function readString(theme: ThemeFragment, key: string, fallback: string): string {
+  const value = theme[key];
+  if (typeof value === 'string' && value.trim()) {
+    return value.trim();
+  }
+  return fallback;
+}
+
+function readNumber(theme: ThemeFragment, key: string, fallback: number): number {
+  const value = theme[key];
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) {
+      return parsed;
+    }
+  }
+  return fallback;
+}
+
+function readCssLength(theme: ThemeFragment, key: string, fallbackPx: number): string {
+  const value = theme[key];
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return `${value}px`;
+  }
+  if (typeof value === 'string' && value.trim()) {
+    return value.trim();
+  }
+  return `${fallbackPx}px`;
+}
+
+function escapeHtmlAttribute(value: string): string {
+  return value.replace(/&/g, '&').replace(/"/g, '"');
+}
+
+/** Inline CSS custom properties for banner WebView (subset of web `getThemeRootStyles`). */
+export function bannerThemeInlineStyles(theme: ThemeFragment): Record<string, string> {
+  const bannerBg = resolveBannerBackgroundColor(theme);
+  const bannerFg = resolveBannerForegroundColor(theme);
+  const fontSize = typeof theme.fontSize === 'number' ? theme.fontSize : 16;
+  const lineHeight = readNumber(theme, 'lineHeight', Math.round(fontSize * 1.5));
+  return {
+    '--userflow-banner-background-color': bannerBg,
+    '--userflow-banner-foreground-color': bannerFg,
+    '--userflow-banner-hover-background-color': readString(
+      theme,
+      'bannerHoverBackgroundColor',
+      bannerBg,
+    ),
+    '--userflow-banner-active-background-color': readString(
+      theme,
+      'bannerActiveBackgroundColor',
+      bannerBg,
+    ),
+    '--userflow-banner-hover-foreground-color': readString(
+      theme,
+      'bannerHoverForegroundColor',
+      bannerFg,
+    ),
+    '--userflow-banner-active-foreground-color': readString(
+      theme,
+      'bannerActiveForegroundColor',
+      bannerFg,
+    ),
+    '--userflow-font-family': readString(theme, 'fontFamily', 'system-ui, sans-serif'),
+    '--userflow-font-size': `${fontSize}px`,
+    '--userflow-line-height': `${lineHeight}px`,
+    '--userflow-button-height': readCssLength(theme, 'buttonHeight', 32),
+    '--userflow-button-border-radius': readCssLength(theme, 'buttonBorderRadius', 6),
+    '--userflow-button-min-width': readCssLength(theme, 'buttonMinWidth', 0),
+    '--userflow-main-foreground-color': bannerFg,
+    '--userflow-link-color': readString(theme, 'linkColor', bannerFg),
+    '--userflow-h1-font-size': `${Math.round(fontSize * 1.25)}px`,
+    '--userflow-h2-font-size': `${Math.round(fontSize * 1.125)}px`,
+    '--userflow-font-weight-normal': '400',
+    '--userflow-font-weight-bold': '600',
+  };
+}
+
+export function bannerThemeStyleAttribute(theme: ThemeFragment): string {
+  const entries = bannerThemeInlineStyles(theme);
+  return Object.entries(entries)
+    .map(([key, value]) => `${key}:${escapeHtmlAttribute(value)}`)
+    .join(';');
+}

package/src/surfaces/bannerWebView/bannerWebFrameCss.ts

@@ -0,0 +1,145 @@
+/**
+ * Banner + bubble-button subset of web `bubble-frame.styl` for custom-banner WebViews.
+ * Custom theme CSS targets the same class names as userflow.js.
+ */
+export const BANNER_WEB_FRAME_CSS = `
+.userflowjs-theme-root {
+  line-height: var(--userflow-line-height, 24px);
+  color: var(--userflow-main-foreground-color, inherit);
+  font-weight: var(--userflow-font-weight-normal, 400);
+}
+.userflowjs-theme-root, .userflowjs-theme-root button {
+  font-family: var(--userflow-font-family, system-ui, sans-serif);
+  font-size: var(--userflow-font-size, 16px);
+}
+.userflowjs-theme-root b, .userflowjs-theme-root strong {
+  font-weight: var(--userflow-font-weight-bold, 600);
+}
+.userflowjs-theme-root a {
+  color: var(--userflow-link-color, inherit);
+  text-decoration: underline;
+}
+.userflowjs-theme-root h1 {
+  font-size: var(--userflow-h1-font-size, 1.25em);
+  font-weight: var(--userflow-font-weight-bold, 600);
+  margin: 0 0 16px;
+}
+.userflowjs-theme-root h2 {
+  font-size: var(--userflow-h2-font-size, 1.125em);
+  font-weight: var(--userflow-font-weight-bold, 600);
+  margin: 0 0 16px;
+}
+.userflowjs-theme-root p {
+  margin: 0 0 16px;
+}
+.userflowjs-button-reset {
+  outline: 0;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  cursor: pointer;
+}
+.userflowjs-bubble-button-base {
+  display: inline-block;
+  padding: calc((var(--userflow-button-height, 32px) - var(--userflow-line-height, 24px)) / 2) var(--userflow-font-size, 16px);
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-radius: 0.375em;
+  font-size: var(--userflow-font-size, 16px);
+  font-weight: var(--userflow-font-weight-bold, 600);
+  height: var(--userflow-button-height, 32px);
+  line-height: var(--userflow-line-height, 24px);
+  border: 0;
+  cursor: pointer;
+}
+.userflowjs-bubble-button {
+  display: inline-flex;
+  align-items: center;
+}
+.userflowjs-bubble-button--primary,
+.userflowjs-bubble-button--default,
+.userflowjs-bubble-button--banner-primary,
+.userflowjs-bubble-button--banner-secondary {
+  font-family: var(--userflow-font-family, system-ui, sans-serif);
+  border-radius: var(--userflow-button-border-radius, 0.375em);
+  min-width: var(--userflow-button-min-width, 0);
+  white-space: normal;
+  max-width: 100%;
+}
+.userflowjs-bubble-button--banner-primary {
+  background-color: var(--userflow-banner-foreground-color);
+  color: var(--userflow-banner-background-color);
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.userflowjs-bubble-button--banner-secondary {
+  background-color: var(--userflow-banner-background-color);
+  color: var(--userflow-banner-foreground-color);
+  border: 1px solid var(--userflow-banner-foreground-color);
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.userflowjs-banner-root {
+  position: relative;
+  background: var(--userflow-banner-background-color);
+  color: var(--userflow-banner-foreground-color);
+  padding: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+}
+.userflowjs-banner-root--content-layout-START .userflowjs-banner-inner {
+  justify-content: flex-start;
+}
+.userflowjs-banner-root--content-layout-CENTER .userflowjs-banner-inner {
+  justify-content: center;
+}
+.userflowjs-banner-root--content-layout-SPACE_BETWEEN .userflowjs-banner-inner {
+  justify-content: space-between;
+}
+.userflowjs-banner-inner {
+  flex: 1 1 auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 16px;
+  row-gap: 8px;
+  margin: 0 8px;
+  min-width: 0;
+}
+.userflowjs-banner-content {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  flex-shrink: 1;
+  min-width: 0;
+}
+.userflowjs-banner-buttons {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.userflowjs-banner-start-spacer {
+  flex: 1 1 0;
+  max-width: var(--userflow-button-height, 32px);
+  height: var(--userflow-button-height, 32px);
+}
+.userflowjs-banner-close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--userflow-button-height, 32px);
+  height: var(--userflow-button-height, 32px);
+  color: var(--userflow-banner-foreground-color);
+  background: transparent;
+  padding: 0;
+  border-radius: 4px;
+}
+.userflowjs-banner-close:hover {
+  background-color: var(--userflow-banner-hover-background-color, rgba(0,0,0,0.08));
+}
+`;