react-native-revnix 1.6.0 → 1.8.0

package/src/ui/RevnixBlockPaywall.tsx

@@ -26,6 +26,7 @@ import {
   Pressable,
   ScrollView,
   StatusBar,
+  Switch,
   Text,
   View,
   type ColorValue,
@@ -60,22 +61,27 @@ import {
   type ResolvedBackgroundImage,
 } from "../blocks/background.js";
 import { detectLocale, linkLabels, localizeBlockDoc } from "../blocks/locale.js";
-import { resolveTags } from "../blocks/tags.js";
+import { resolveTags, timerText } from "../blocks/tags.js";
 import {
   canvasMetrics,
   effectiveStyle,
   isVisible,
   packageContext,
   selectedPackageId,
+  toggleSelection,
 } from "../blocks/selection.js";
 import type { SelectionContext } from "../blocks/selection.js";
 import {
   DESIGN_CANVAS,
   hasCloseAction,
+  onboardingScreen,
+  stepScreen,
+  type BlockAction,
   type BlockStyle,
   type PaywallBlock,
   type PaywallBlockDoc,
   type ProductsBlock,
+  type TimerBlock,
 } from "../blocks/types.js";
 import type { RevnixPaywallPackage } from "./RevnixPaywall.js";
 
@@ -597,6 +603,7 @@ interface RenderContext {
   onTerms?: () => void;
   onPrivacy?: () => void;
   onClose?: () => void;
+  navigate: (action: BlockAction | undefined) => (() => void) | undefined;
   footer?: { termsUrl?: string; privacyUrl?: string };
   heroImageUrl?: string;
   gradient?: RevnixGradientComponent;
@@ -607,6 +614,7 @@ interface RenderContext {
   style: StyleContext;
   /** Host purchase in flight: purchase buttons disable and spin. */
   loading: boolean;
+  shownAt: number;
 }
 
 /** Text blocks always render inside a View: a style may carry both typography
@@ -618,13 +626,14 @@ function BlockText({
   ctx,
   inherited,
   onPress,
+  pressLabel,
 }: {
   text: string;
   style: BlockStyle | undefined;
   ctx: RenderContext;
   inherited: InheritedText;
-  /** Set when the design marks this element as the close (REV-252). */
   onPress?: () => void;
+  pressLabel?: string;
 }) {
   const styleCtx = { ...ctx.style, fontSize: inherited.fontSize };
   // The block's own typography is folded into the inherited set first, so
@@ -657,7 +666,7 @@ function BlockText({
     return (
       <Pressable
         accessibilityRole="button"
-        accessibilityLabel="Close"
+        accessibilityLabel={pressLabel}
         hitSlop={8}
         onPress={onPress}
         style={toViewStyle(style, styleCtx)}
@@ -669,16 +678,139 @@ function BlockText({
   return <View style={toViewStyle(style, styleCtx)}>{body}</View>;
 }
 
-/** The press handler for a block the design marks as the close, or undefined
- *  when it is not one (or the host wired no dismissal). One helper so text,
- *  image and button blocks cannot drift on what "action: close" means. */
-function closePress(
-  block: { action?: "close" },
+function Timer({
+  block,
+  style,
+  ctx,
+  inherited,
+}: {
+  block: TimerBlock;
+  style: BlockStyle | undefined;
+  ctx: RenderContext;
+  inherited: InheritedText;
+}) {
+  const [now, setNow] = React.useState(Date.now);
+  React.useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, []);
+  const text = timerText(block, ctx.shownAt, now);
+  if (text === null) return null;
+  return <BlockText text={text} style={style} ctx={ctx} inherited={inherited} />;
+}
+
+function Carousel({
+  pages,
+  autoAdvance,
+  doc,
+}: {
+  pages: React.ReactNode[];
+  autoAdvance?: number;
+  doc: PaywallBlockDoc;
+}) {
+  const scroller = React.useRef<ScrollView>(null);
+  const [size, setSize] = React.useState({ width: 0, height: 0 });
+  const [page, setPage] = React.useState(0);
+  React.useEffect(() => {
+    if (!autoAdvance || size.width === 0 || pages.length < 2) return;
+    const id = setInterval(() => {
+      scroller.current?.scrollTo({
+        x: ((page + 1) % pages.length) * size.width,
+        animated: true,
+      });
+    }, autoAdvance * 1000);
+    return () => clearInterval(id);
+  }, [autoAdvance, size.width, page, pages.length]);
+  return (
+    <View
+      style={{ flex: 1 }}
+      onLayout={(e) =>
+        setSize({
+          width: e.nativeEvent.layout.width,
+          height: e.nativeEvent.layout.height,
+        })
+      }
+    >
+      <ScrollView
+        ref={scroller}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        scrollEventThrottle={16}
+        onScroll={(e) => {
+          if (size.width > 0) {
+            setPage(Math.round(e.nativeEvent.contentOffset.x / size.width));
+          }
+        }}
+      >
+        {pages.map((node, i) => (
+          <View key={i} style={size}>
+            {node}
+          </View>
+        ))}
+      </ScrollView>
+      {pages.length > 1 ? (
+        <Dots count={pages.length} active={page} doc={doc} style={{ bottom: 8 }} />
+      ) : null}
+    </View>
+  );
+}
+
+function Dots({
+  count,
+  active,
+  doc,
+  style,
+}: {
+  count: number;
+  active: number;
+  doc: PaywallBlockDoc;
+  style: ViewStyle;
+}) {
+  return (
+    <View
+      pointerEvents="none"
+      style={[
+        {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          flexDirection: "row",
+          justifyContent: "center",
+          gap: 6,
+        },
+        style,
+      ]}
+    >
+      {Array.from({ length: count }, (_, i) => (
+        <View
+          key={i}
+          style={{
+            width: 6,
+            height: 6,
+            borderRadius: 3,
+            backgroundColor:
+              i === active ? doc.accent : withAlpha(doc.textColor, 0.3),
+          }}
+        />
+      ))}
+    </View>
+  );
+}
+
+function actionPress(
+  block: { action?: BlockAction },
   ctx: RenderContext
 ): (() => void) | undefined {
-  return block.action === "close" && ctx.onClose ? ctx.onClose : undefined;
+  return block.action === "close" ? ctx.onClose : ctx.navigate(block.action);
 }
 
+const ACTION_LABEL: Record<BlockAction, string> = {
+  close: "Close",
+  next: "Next",
+  back: "Back",
+};
+
 /** Typography that is NOT inherited (decoration) — everything else already
  *  arrives through the inherited set. */
 function textOnly(s: BlockStyle | undefined, ctx: StyleContext) {
@@ -844,6 +976,11 @@ function Block({
   selection?: SelectionContext;
 }): React.ReactElement | null {
   const { doc } = ctx;
+  React.useEffect(() => {
+    if (block.type === "video") {
+      ctx.onDiagnostic?.("video drawn as its poster: no built-in player");
+    }
+  }, [block.type]);
   const styleCtx = { ...ctx.style, fontSize: inherited.fontSize };
   // A pinned card judges its own context; every other block inherits the
   // nearest plan card's. (A repeat card is judged per instance below.)
@@ -872,13 +1009,53 @@ function Block({
           style={style}
           ctx={ctx}
           inherited={inherited}
-          onPress={closePress(block, ctx)}
+          onPress={actionPress(block, ctx)}
+          pressLabel={block.action === "close" ? "Close" : undefined}
         />
       );
 
-    case "image": {
-      const url = block.url || ctx.heroImageUrl;
-      const round = block.shape === "circle";
+    case "timer":
+      return <Timer block={block} style={style} ctx={ctx} inherited={inherited} />;
+
+    case "toggle": {
+      const toggle = toggleSelection(block, ctx.packages, ctx.selectedId);
+      if (!toggle) return null;
+      const flip = () => ctx.onSelect(toggle.target);
+      return (
+        <Pressable
+          accessibilityRole="switch"
+          accessibilityState={{ checked: toggle.on }}
+          onPress={flip}
+          style={[{ flexDirection: "row", alignItems: "center", gap: 12 }, view]}
+        >
+          <BlockFill block={block} ctx={ctx} />
+          <Text
+            style={[
+              { flex: 1 },
+              inheritedTextStyle(text, ctx.style),
+              textOnly(style, styleCtx),
+            ]}
+          >
+            {resolveTags(
+              block.label,
+              ctx.packages.find((p) => p.packageId === ctx.selectedId),
+              ctx.packages
+            )}
+          </Text>
+          <Switch
+            value={toggle.on}
+            onValueChange={flip}
+            trackColor={{ true: doc.accent }}
+          />
+        </Pressable>
+      );
+    }
+
+    case "image":
+    case "video": {
+      const image = block.type === "image";
+      const url = image ? block.url || ctx.heroImageUrl : block.poster;
+      const round = image && block.shape === "circle";
       const s = style;
       // A converted design sizes its own slot; the 160pt default is only for
       // a slot dropped into a flow column, and must not fight it.
@@ -889,17 +1066,17 @@ function Block({
           s.aspectRatio !== undefined ||
           (s.top !== undefined && s.bottom !== undefined) ||
           s.flex !== undefined);
-      // An icon the design marks as the close (REV-252). Same rule as text:
-      // the whole box is the target, and the style lands on the Pressable so
-      // a pinned icon keeps its offsets.
-      const closeImage = closePress(block, ctx);
-      const ImageBox = closeImage ? Pressable : View;
+      const action = block.type === "image" ? block.action : undefined;
+      const imagePress = actionPress({ action }, ctx);
+      const ImageBox = imagePress ? Pressable : View;
       return (
         <ImageBox
-          accessibilityRole={closeImage ? "button" : undefined}
-          accessibilityLabel={closeImage ? "Close" : undefined}
-          hitSlop={closeImage ? 8 : undefined}
-          onPress={closeImage}
+          accessibilityRole={imagePress ? "button" : undefined}
+          accessibilityLabel={
+            imagePress && action ? ACTION_LABEL[action] : undefined
+          }
+          hitSlop={imagePress ? 8 : undefined}
+          onPress={imagePress}
           style={[
             sized ? null : { height: 160 },
             { borderRadius: round ? 9999 : sized ? 0 : 16, overflow: "hidden", flexShrink: 0 },
@@ -913,7 +1090,7 @@ function Block({
               resizeMode={block.fit ?? "cover"}
               style={{ width: "100%", height: "100%" }}
             />
-          ) : (
+          ) : image ? (
             <View
               style={{
                 width: "100%",
@@ -921,7 +1098,7 @@ function Block({
                 backgroundColor: withAlpha("#7d879b", 0.2),
               }}
             />
-          )}
+          ) : null}
         </ImageBox>
       );
     }
@@ -980,17 +1157,18 @@ function Block({
       // A button the design marks as the close dismisses instead of buying,
       // and takes no accent fill: the CTA must stay the one accented thing on
       // the screen, or a "Not now" competes with "Subscribe" for the eye.
-      const close = closePress(block, ctx);
+      const close = block.action === "close" ? ctx.onClose : undefined;
+      const navigates = block.action === "next" || block.action === "back";
       // A purchase in flight: the button keeps its box and fill, loses its
       // label to a spinner in the ink colour, and ignores taps. A close
       // button is never blocked — the user can always leave.
-      const busy = !close && ctx.loading;
+      const busy = !close && !navigates && ctx.loading;
       return (
         <Pressable
           accessibilityRole="button"
           accessibilityState={{ disabled: busy, busy }}
           disabled={busy}
-          onPress={close ?? ctx.onPurchase}
+          onPress={navigates ? actionPress(block, ctx) : (close ?? ctx.onPurchase)}
           style={({ pressed }) => [
             {
               backgroundColor: close ? "transparent" : doc.accent,
@@ -1101,21 +1279,24 @@ function Block({
 
     case "card": {
       const layout = block.layout ?? "column";
+      const carousel = layout === "carousel";
       const base: ViewStyle =
         layout === "stack"
           ? { position: "relative" }
-          : layout === "grid"
-            ? {
-                position: "relative",
-                flexDirection: "row",
-                flexWrap: "wrap",
-                gap: style?.gap ?? 10,
-              }
-            : {
-                position: "relative",
-                flexDirection: layout === "row" ? "row" : "column",
-                gap: style?.gap ?? 10,
-              };
+          : carousel
+            ? { position: "relative", overflow: "hidden" }
+            : layout === "grid"
+              ? {
+                  position: "relative",
+                  flexDirection: "row",
+                  flexWrap: "wrap",
+                  gap: style?.gap ?? 10,
+                }
+              : {
+                  position: "relative",
+                  flexDirection: layout === "row" ? "row" : "column",
+                  gap: style?.gap ?? 10,
+                };
 
       const tracks = layout === "grid" ? gridTracks(block) : null;
       const renderChildren = (
@@ -1202,6 +1383,9 @@ function Block({
         base,
         layout === "stack" ? null : { borderRadius: 16 },
         view,
+        carousel
+          ? { height: typeof style?.height === "number" ? style.height : 220 }
+          : null,
       ];
 
       const cardPackage =
@@ -1222,7 +1406,15 @@ function Block({
           radius={style?.radius ?? (layout === "stack" ? undefined : 16)}
           onPress={pinned ? () => ctx.onSelect(cardPackage!.packageId) : undefined}
         >
-          {renderChildren(cardPackage, context)}
+          {carousel ? (
+            <Carousel
+              pages={renderChildren(cardPackage, context)}
+              autoAdvance={block.autoAdvance}
+              doc={doc}
+            />
+          ) : (
+            renderChildren(cardPackage, context)
+          )}
         </CardBox>
       );
     }
@@ -1243,6 +1435,14 @@ export function RevnixBlockPaywall(props: RevnixBlockPaywallProps) {
   const [internalSelected, setInternalSelected] = React.useState<
     string | undefined
   >(undefined);
+  const [shownAt] = React.useState(Date.now);
+  const [screenIndex, setScreenIndex] = React.useState(0);
+  const [screenDoc, setScreenDoc] = React.useState(props.doc);
+  if (screenDoc !== props.doc) {
+    setScreenDoc(props.doc);
+    setScreenIndex(0);
+  }
+  const screen = onboardingScreen(doc, screenIndex);
   // Contract §1: host → own tap → design highlight → first package, each
   // only when the offering carries it.
   const selectedId = selectedPackageId(
@@ -1286,15 +1486,20 @@ export function RevnixBlockPaywall(props: RevnixBlockPaywallProps) {
     onTerms: props.onTerms,
     onPrivacy: props.onPrivacy,
     onClose: props.onClose,
+    navigate: (action) => {
+      const to = stepScreen(doc, screenIndex, action);
+      return to === undefined ? undefined : () => setScreenIndex(to);
+    },
     footer: props.footer,
     heroImageUrl: props.heroImageUrl,
     gradient: props.gradient,
     onDiagnostic: props.onDiagnostic,
     style: styleCtx,
     loading: props.loading === true,
+    shownAt,
   };
 
-  const children = doc.blocks.map((block) => (
+  const children = screen.blocks.map((block) => (
     <Block
       key={block.id}
       block={block}
@@ -1312,7 +1517,7 @@ export function RevnixBlockPaywall(props: RevnixBlockPaywallProps) {
     props.safeAreaTop ??
     (Platform.OS === "android" ? (StatusBar.currentHeight ?? 0) : 0);
   const fallbackClose =
-    props.onClose && !hasCloseAction(doc.blocks) ? (
+    props.onClose && !hasCloseAction(screen.blocks) ? (
       <FallbackClose
         doc={doc}
         onPress={props.onClose}
@@ -1352,6 +1557,7 @@ export function RevnixBlockPaywall(props: RevnixBlockPaywallProps) {
         style={[{ flex: 1 }, props.style]}
       >
         <ScrollView
+          key={screenIndex}
           contentContainerStyle={{ height: canvasHeight }}
           // A designed screen never shows a scrollbar — the web preview has
           // none, and in an RTL app the indicator lands on the left edge of
@@ -1388,6 +1594,14 @@ export function RevnixBlockPaywall(props: RevnixBlockPaywallProps) {
               }}
             >
               {children}
+              {screen.dots ? (
+                <Dots
+                  count={screen.dots.count}
+                  active={screen.dots.active}
+                  doc={doc}
+                  style={{ top: 20, zIndex: 50 }}
+                />
+              ) : null}
             </View>
           </View>
         </ScrollView>
@@ -1405,6 +1619,7 @@ export function RevnixBlockPaywall(props: RevnixBlockPaywallProps) {
       style={[{ flex: 1 }, props.style]}
     >
       <ScrollView
+        key={screenIndex}
         contentContainerStyle={{
           gap: 12,
           paddingHorizontal: 20,
@@ -1417,6 +1632,14 @@ export function RevnixBlockPaywall(props: RevnixBlockPaywallProps) {
       >
         {children}
       </ScrollView>
+      {screen.dots ? (
+        <Dots
+          count={screen.dots.count}
+          active={screen.dots.active}
+          doc={doc}
+          style={{ top: 20 + safeAreaTop, zIndex: 50 }}
+        />
+      ) : null}
       {fallbackClose}
     </ScreenBackground>
   );

package/src/ui/RevnixPaywall.tsx

@@ -65,7 +65,16 @@ function asBlockDoc(value: unknown): PaywallBlockDoc | null {
     typeof doc.textColor === "string" &&
     typeof doc.accent === "string" &&
     typeof doc.accentInk === "string"
-    ? (doc as PaywallBlockDoc)
+    ? {
+        ...(doc as PaywallBlockDoc),
+        ...(doc.screens !== undefined
+          ? {
+              screens: Array.isArray(doc.screens)
+                ? doc.screens.filter((s) => Array.isArray(s) && s.length > 0)
+                : [],
+            }
+          : {}),
+      }
     : null;
 }
 
@@ -480,7 +489,7 @@ export function RevnixPaywall(props: RevnixPaywallProps) {
   // arrives after a placeholder (or is swapped by an A/B assignment) would
   // otherwise crash on "rendered more hooks than during the previous render".
   const { config } = props;
-  const blocks = asBlockDoc(config.blocks);
+  const blocks = React.useMemo(() => asBlockDoc(config.blocks), [config.blocks]);
   // Both sinks fire when both are wired; nil when neither is, which is what
   // stops the renderer building a message nobody will read.
   const renderDiagnostic =

package/src/version.ts

@@ -1,4 +1,4 @@
 // L3: the single source of the SDK version inside src/. Must match
 // package.json "version" — version.test.ts fails the build when they drift
 // (they had: client.ts said 0.7.0 while the package shipped 0.9.0).
-export const SDK_VERSION = "1.6.0";
+export const SDK_VERSION = "1.8.0";