@userflow-tech/react-native 0.2.0 → 0.3.1

package/src/surfaces/MadeWithUserflow.tsx

@@ -11,13 +11,14 @@ export interface MadeWithUserflowProps {
   /** Theme main foreground (`fontColor`) — matches web `--userflow-main-foreground-color`. */
   color: string;
   /**
-   * Bubble content inset (modal 24 / tooltip 24). Applied as horizontal + bottom
-   * padding so the legend aligns with the step body, matching the modal mockup.
+   * Bubble content inset (modal 24 / tooltip 24). Only used when `embedded`,
+   * to pull the legend back out to the card edge.
    */
   contentPadding: number;
   /**
-   * When true, horizontal inset comes from the parent ScrollView; only vertical
-   * spacing and bottom inset are applied here (modal body).
+   * When true, the footer sits inside a ScrollView whose start padding is
+   * `contentPadding` and owns the gap above itself (modal body). Otherwise the
+   * parent supplies {@link MADE_WITH_USERFLOW_GAP} and the footer spans the card.
    */
   embedded?: boolean;
 }
@@ -26,8 +27,9 @@ export interface MadeWithUserflowProps {
  * Web "Made with Userflow" attribution (FlowChrome). Shown when the company
  * has `flowBranding` enabled; opens the Userflow homepage with UTM params.
  *
- * Rendered as a card footer (not absolutely pinned to the card corner) so left
- * and bottom insets match the surface content padding.
+ * Sits in the card corner (Figma: 8pt from the start and bottom edges) rather
+ * than on the content inset. Rendered in flow instead of absolutely so a
+ * scaled-up label pushes the card taller instead of overlapping the body.
  */
 export function MadeWithUserflow({
   company,
@@ -48,11 +50,10 @@ export function MadeWithUserflow({
         embedded
           ? {
               marginTop: MADE_WITH_USERFLOW_GAP,
-              paddingBottom: contentPadding,
+              marginStart: MADE_WITH_USERFLOW_INSET - contentPadding,
             }
           : {
-              paddingHorizontal: contentPadding,
-              paddingBottom: contentPadding,
+              paddingStart: MADE_WITH_USERFLOW_INSET,
             },
       ]}
       pointerEvents="box-none"
@@ -81,9 +82,13 @@ export function MadeWithUserflow({
 /** Gap between step content/buttons and the branding footer (web spacer height). */
 export const MADE_WITH_USERFLOW_GAP = 16;
 
+/** Legend offset from the card's start and bottom edges. */
+export const MADE_WITH_USERFLOW_INSET = 8;
+
 const styles = StyleSheet.create({
   footer: {
     flexShrink: 0,
+    paddingBottom: MADE_WITH_USERFLOW_INSET,
   },
   link: {
     flexDirection: 'row',
@@ -98,6 +103,6 @@ const styles = StyleSheet.create({
   label: {
     fontSize: 12,
     fontWeight: '500',
-    lineHeight: 14,
+    lineHeight: 16,
   },
 });

package/src/surfaces/ModalSurface.tsx

@@ -13,12 +13,12 @@ import type { LookupAttribute } from '../content/types';
 
 import { CardFade } from './CardFade';
 import { CLOSE_BUTTON_INSET, CLOSE_BUTTON_SIZE, CloseButton } from './CloseButton';
-import { resolveCloseButtonColor } from './resolveCloseButtonColor';
 import { MadeWithUserflow } from './MadeWithUserflow';
 import { ProgressBar } from './ProgressBar';
 import { ABSOLUTE_FILL } from './absoluteFill';
 import { parseBackdropOpacity } from './parseBackdropOpacity';
 import { resolveStepProgress } from './progress';
+import { resolveCloseButtonColor } from './resolveCloseButtonColor';
 import {
   resolveModalButtonsAlign,
   resolveModalCardMaxHeight,

package/src/surfaces/TooltipSurface.tsx

@@ -22,6 +22,7 @@ import { autoAnchorRegistry } from '../anchors/AutoAnchorRegistry';
 import { addAnimationFrameCallback, removeAnimationFrameCallback } from '../anchors/animationFrame';
 import { fiberScanRoot } from '../anchors/fiber/FiberScanRoot';
 import type { AnyFiber } from '../anchors/fiber/fiberInternals';
+import { clipToScrollViewports } from '../anchors/fiber/visibleRect';
 import {
   clearFiberAnchorCache,
   invalidateFiberAnchor,
@@ -230,6 +231,9 @@ export function TooltipSurface({
   const resolveEpochRef = React.useRef(0);
   /** Latest resolved host fiber (for scroll-ancestor walk + rAF remeasure). */
   const hostFiberRef = React.useRef<AnyFiber | null>(null);
+  /** Target rect clipped to scroll viewports, for tap detection only. */
+  const clippedPressRef = React.useRef<Rect | null>(null);
+  const clipGenRef = React.useRef(0);
   const hostMeasureRef = React.useRef<
     ((callback: (x: number, y: number, width: number, height: number) => void) => void) | null
   >(null);
@@ -333,6 +337,18 @@ export function TooltipSurface({
     }
     targetRef.current = next;
     setTarget(next);
+    if (next == null) {
+      clippedPressRef.current = null;
+      return;
+    }
+    clippedPressRef.current = next;
+    const fiber = hostFiberRef.current;
+    const gen = (clipGenRef.current += 1);
+    if (!fiber) return;
+    void clipToScrollViewports(fiber, next).then((clipped) => {
+      if (clipGenRef.current !== gen) return;
+      clippedPressRef.current = clipped;
+    });
   }, []);
 
   const markMeasureAttempted = React.useCallback(() => {
@@ -815,7 +831,7 @@ export function TooltipSurface({
     }
 
     targetPressMonitor.set({
-      getRect: () => targetRef.current,
+      getRect: () => clippedPressRef.current,
       onPress: () => {
         // Native touches are async relative to commits, so re-check the phase.
         if (exitingRef.current) return;

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