@userflow-tech/react-native 0.1.1 → 0.3.0

package/src/surfaces/bannerBarLayout.ts

@@ -0,0 +1,74 @@
+import type { BannerFragment } from '@userflow-tech/protocol';
+import { BannerContentLayout } from '@userflow-tech/protocol';
+import type { ViewStyle } from 'react-native';
+
+import {
+  BANNER_INNER_COLUMN_GAP,
+  BANNER_INNER_MARGIN_HORIZONTAL,
+  BANNER_INNER_ROW_GAP,
+  BANNER_OVERLAY_SCREEN_INSET_HORIZONTAL,
+} from './bannerBarTokens';
+import type { EdgeInsets } from './safeArea';
+
+export { BANNER_CLOSE_SLOT_SIZE, BANNER_ROOT_PADDING } from './bannerBarTokens';
+
+function optionalMargin(value: number | null | undefined): number | undefined {
+  return value == null ? undefined : value;
+}
+
+/** Outer frame: max embed width and builder outer margin (web `userflowjs-banner-frame`). */
+export function bannerFrameStyle(banner: BannerFragment): ViewStyle {
+  const hasMaxWidth = banner.maxWidth != null;
+
+  return {
+    alignSelf: hasMaxWidth ? 'center' : 'stretch',
+    ...(hasMaxWidth ? { maxWidth: banner.maxWidth! } : null),
+    marginTop: optionalMargin(banner.marginTop),
+    marginRight: optionalMargin(banner.marginRight),
+    marginBottom: optionalMargin(banner.marginBottom),
+    marginLeft: optionalMargin(banner.marginLeft),
+  };
+}
+
+/** Corner radius on the painted bar when configured in the builder. */
+export function resolveBannerBarBorderRadius(banner: BannerFragment): number | undefined {
+  return banner.borderRadius ?? undefined;
+}
+
+/** Horizontal inset for overlay hosts — at least Figma inset, or safe area when larger. */
+export function bannerOverlayHostPadding(insets: EdgeInsets): ViewStyle {
+  const horizontal = Math.max(BANNER_OVERLAY_SCREEN_INSET_HORIZONTAL, insets.left, insets.right);
+  return { paddingHorizontal: horizontal };
+}
+
+/** Flex justification for the inner row (web content-layout modifiers). */
+export function bannerInnerJustifyContent(
+  layout: BannerContentLayout,
+): ViewStyle['justifyContent'] {
+  switch (layout) {
+    case BannerContentLayout.CENTER:
+      return 'center';
+    case BannerContentLayout.SPACE_BETWEEN:
+      return 'space-between';
+    case BannerContentLayout.START:
+    default:
+      return 'flex-start';
+  }
+}
+
+export function bannerInnerStyle(banner: BannerFragment): ViewStyle {
+  const hasMaxContentWidth = banner.maxContentWidth != null;
+  return {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 0,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    columnGap: BANNER_INNER_COLUMN_GAP,
+    rowGap: BANNER_INNER_ROW_GAP,
+    marginHorizontal: BANNER_INNER_MARGIN_HORIZONTAL,
+    justifyContent: bannerInnerJustifyContent(banner.contentLayout),
+    ...(hasMaxContentWidth ? { maxWidth: banner.maxContentWidth!, width: '100%' } : null),
+  };
+}

package/src/surfaces/bannerBarTokens.ts

@@ -0,0 +1,34 @@
+import type { ViewStyle } from 'react-native';
+
+/**
+ * End-user banner chrome from Figma `Userflow - React native`
+ * (`BojC6qdlFUytdD1bRsNLV8`, node `1551-1208` — SDK Embed Banner) and web
+ * `userflowjs-banner-*` in bubble-frame.styl. Layout numbers match web
+ * `$padding-*` at 1rem = 16px.
+ */
+
+export const BANNER_ROOT_PADDING = 8;
+export const BANNER_INNER_MARGIN_HORIZONTAL = 8;
+export const BANNER_INNER_COLUMN_GAP = 16;
+export const BANNER_INNER_ROW_GAP = 8;
+export const BANNER_BUTTON_GAP = 8;
+export const BANNER_BUTTON_PADDING_HORIZONTAL = 12;
+/** Web `--userflow-button-height` default (36). Close control is square at this size. */
+export const BANNER_CLOSE_SLOT_SIZE = 36;
+export const BANNER_CLOSE_BORDER_RADIUS = 4;
+
+/** Overlay embed: horizontal inset from screen edges (Figma; excludes builder outer margin). */
+export const BANNER_OVERLAY_SCREEN_INSET_HORIZONTAL = 16;
+/** Figma Shadow/Card — separates a full-bleed overlay bar from app content. */
+const BANNER_SHADOW_COLOR = '#132b39';
+
+export function bannerOverlayShadowStyle(edge: 'top' | 'bottom'): ViewStyle {
+  const offsetY = edge === 'top' ? 4 : -4;
+  return {
+    shadowColor: BANNER_SHADOW_COLOR,
+    shadowOffset: { width: 0, height: offsetY },
+    shadowOpacity: 0.1,
+    shadowRadius: 12,
+    elevation: 8,
+  };
+}

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(';');
+}