react-native-revnix 1.6.0 → 1.8.0

package/dist/types.d.ts

@@ -129,7 +129,39 @@ export interface RevnixConfig {
      *  Never throws into your app: an exception from this handler is reported
      *  through `onDiagnostic` and swallowed. */
     onAttribution?: (attribution: RevnixAttribution) => void;
+    /** Opt-in device integrity evidence (Apple App Attest / Google Play
+     *  Integrity) attached to every install report and `setAttribution` call.
+     *  Pair it with the dashboard's "Require device integrity" setting, which
+     *  strips attribution from installs that arrive without evidence. In React
+     *  Native pass `nativeDeviceIntegrity` from "react-native-revnix/store";
+     *  it needs iOS 14+ with App Attest, or Google Play services on Android.
+     *  Simulators and emulators return nothing.
+     *
+     *  Called at most once per customer id and bounded to 10s. A rejection,
+     *  timeout, or missing/malformed result sends the request without
+     *  evidence and reports `op: "deviceIntegrity"` through `onDiagnostic`. */
+    deviceIntegrity?: (customerId: string) => Promise<IntegrityEvidence | null | undefined>;
+    /** Google Advertising ID source, stored on the customer as `gps_adid` at
+     *  launch and resent only when it changes. In React Native pass
+     *  `nativeAdvertisingId` from "react-native-revnix/store"; it needs
+     *  `play-services-ads-identifier` and the `AD_ID` permission in the app and
+     *  answers null on iOS and on opt-out, and rejects when the id cannot be
+     *  read. A null answer deletes a previously stored `gps_adid`; a
+     *  rejection changes nothing and reports `op: "advertisingId"`. */
+    advertisingId?: () => Promise<string | null | undefined>;
 }
+/** Device integrity evidence for `POST /v1/installs` and `/v1/attribution`.
+ *  iOS: an App Attest key id and its attestation (standard base64) over
+ *  SHA-256 of the customer id. Android: a classic Play Integrity token whose
+ *  nonce is base64url (no padding) of SHA-256 of the customer id. */
+export type IntegrityEvidence = {
+    platform: "ios";
+    keyId: string;
+    attestation: string;
+} | {
+    platform: "android";
+    token: string;
+};
 /** AT11: the install-attribution verdict — GET
  *  /v1/customers/{id}/attribution. `installMatch: "unknown"` (no install
  *  recorded yet, a normal cold-start race) is never sent to hosts as such;

package/dist/ui/RevnixBlockPaywall.js

@@ -276,7 +276,7 @@ function FallbackClose({ doc, onPress, safeAreaTop, }) {
 /** Text blocks always render inside a View: a style may carry both typography
  *  and box properties (a round chip is a 34pt circle with a centered glyph),
  *  and RN cannot centre a glyph inside <Text> the way flexbox does. */
-function BlockText({ text, style, ctx, inherited, onPress, }) {
+function BlockText({ text, style, ctx, inherited, onPress, pressLabel, }) {
     const styleCtx = { ...ctx.style, fontSize: inherited.fontSize };
     // The block's own typography is folded into the inherited set first, so
     // em letter-spacing and unitless line-height resolve against whichever font
@@ -291,16 +291,73 @@ function BlockText({ text, style, ctx, inherited, onPress, }) {
     // wrapping a styled View would leave a pinned chip resolving its offsets
     // against a zero-sized parent.
     if (onPress) {
-        return (React.createElement(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: "Close", hitSlop: 8, onPress: onPress, style: (0, style_js_1.toViewStyle)(style, styleCtx) }, body));
+        return (React.createElement(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: pressLabel, hitSlop: 8, onPress: onPress, style: (0, style_js_1.toViewStyle)(style, styleCtx) }, body));
     }
     return React.createElement(react_native_1.View, { style: (0, style_js_1.toViewStyle)(style, styleCtx) }, body);
 }
-/** 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, ctx) {
-    return block.action === "close" && ctx.onClose ? ctx.onClose : undefined;
+function Timer({ block, style, ctx, inherited, }) {
+    const [now, setNow] = React.useState(Date.now);
+    React.useEffect(() => {
+        const id = setInterval(() => setNow(Date.now()), 1000);
+        return () => clearInterval(id);
+    }, []);
+    const text = (0, tags_js_1.timerText)(block, ctx.shownAt, now);
+    if (text === null)
+        return null;
+    return React.createElement(BlockText, { text: text, style: style, ctx: ctx, inherited: inherited });
+}
+function Carousel({ pages, autoAdvance, doc, }) {
+    const scroller = React.useRef(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 (React.createElement(react_native_1.View, { style: { flex: 1 }, onLayout: (e) => setSize({
+            width: e.nativeEvent.layout.width,
+            height: e.nativeEvent.layout.height,
+        }) },
+        React.createElement(react_native_1.ScrollView, { ref: scroller, horizontal: true, pagingEnabled: true, showsHorizontalScrollIndicator: false, scrollEventThrottle: 16, onScroll: (e) => {
+                if (size.width > 0) {
+                    setPage(Math.round(e.nativeEvent.contentOffset.x / size.width));
+                }
+            } }, pages.map((node, i) => (React.createElement(react_native_1.View, { key: i, style: size }, node)))),
+        pages.length > 1 ? (React.createElement(Dots, { count: pages.length, active: page, doc: doc, style: { bottom: 8 } })) : null));
 }
+function Dots({ count, active, doc, style, }) {
+    return (React.createElement(react_native_1.View, { pointerEvents: "none", style: [
+            {
+                position: "absolute",
+                left: 0,
+                right: 0,
+                flexDirection: "row",
+                justifyContent: "center",
+                gap: 6,
+            },
+            style,
+        ] }, Array.from({ length: count }, (_, i) => (React.createElement(react_native_1.View, { key: i, style: {
+            width: 6,
+            height: 6,
+            borderRadius: 3,
+            backgroundColor: i === active ? doc.accent : (0, color_js_1.withAlpha)(doc.textColor, 0.3),
+        } })))));
+}
+function actionPress(block, ctx) {
+    return block.action === "close" ? ctx.onClose : ctx.navigate(block.action);
+}
+const ACTION_LABEL = {
+    close: "Close",
+    next: "Next",
+    back: "Back",
+};
 /** Typography that is NOT inherited (decoration) — everything else already
  *  arrives through the inherited set. */
 function textOnly(s, ctx) {
@@ -399,6 +456,11 @@ function gridTracks(block) {
 }
 function Block({ block, ctx, pkg, inherited, selection, }) {
     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.)
@@ -420,10 +482,28 @@ function Block({ block, ctx, pkg, inherited, selection, }) {
     const size = text.fontSize;
     switch (block.type) {
         case "text":
-            return (React.createElement(BlockText, { text: (0, tags_js_1.resolveTags)(block.text, pkg, ctx.packages), style: style, ctx: ctx, inherited: inherited, onPress: closePress(block, ctx) }));
-        case "image": {
-            const url = block.url || ctx.heroImageUrl;
-            const round = block.shape === "circle";
+            return (React.createElement(BlockText, { text: (0, tags_js_1.resolveTags)(block.text, pkg, ctx.packages), style: style, ctx: ctx, inherited: inherited, onPress: actionPress(block, ctx), pressLabel: block.action === "close" ? "Close" : undefined }));
+        case "timer":
+            return React.createElement(Timer, { block: block, style: style, ctx: ctx, inherited: inherited });
+        case "toggle": {
+            const toggle = (0, selection_js_1.toggleSelection)(block, ctx.packages, ctx.selectedId);
+            if (!toggle)
+                return null;
+            const flip = () => ctx.onSelect(toggle.target);
+            return (React.createElement(react_native_1.Pressable, { accessibilityRole: "switch", accessibilityState: { checked: toggle.on }, onPress: flip, style: [{ flexDirection: "row", alignItems: "center", gap: 12 }, view] },
+                React.createElement(BlockFill, { block: block, ctx: ctx }),
+                React.createElement(react_native_1.Text, { style: [
+                        { flex: 1 },
+                        (0, style_js_1.inheritedTextStyle)(text, ctx.style),
+                        textOnly(style, styleCtx),
+                    ] }, (0, tags_js_1.resolveTags)(block.label, ctx.packages.find((p) => p.packageId === ctx.selectedId), ctx.packages)),
+                React.createElement(react_native_1.Switch, { value: toggle.on, onValueChange: flip, trackColor: { true: doc.accent } })));
+        }
+        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.
@@ -433,22 +513,20 @@ function Block({ block, ctx, pkg, inherited, selection, }) {
                     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 ? react_native_1.Pressable : react_native_1.View;
-            return (React.createElement(ImageBox, { accessibilityRole: closeImage ? "button" : undefined, accessibilityLabel: closeImage ? "Close" : undefined, hitSlop: closeImage ? 8 : undefined, onPress: closeImage, style: [
+            const action = block.type === "image" ? block.action : undefined;
+            const imagePress = actionPress({ action }, ctx);
+            const ImageBox = imagePress ? react_native_1.Pressable : react_native_1.View;
+            return (React.createElement(ImageBox, { 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 },
                     view,
                 ] },
                 React.createElement(BlockFill, { block: block, ctx: ctx }),
-                url ? (React.createElement(react_native_1.Image, { source: { uri: url }, resizeMode: block.fit ?? "cover", style: { width: "100%", height: "100%" } })) : (React.createElement(react_native_1.View, { style: {
+                url ? (React.createElement(react_native_1.Image, { source: { uri: url }, resizeMode: block.fit ?? "cover", style: { width: "100%", height: "100%" } })) : image ? (React.createElement(react_native_1.View, { style: {
                         width: "100%",
                         height: "100%",
                         backgroundColor: (0, color_js_1.withAlpha)("#7d879b", 0.2),
-                    } }))));
+                    } })) : null));
         }
         case "list":
             return (React.createElement(react_native_1.View, { style: [{ flexDirection: "column", gap: style?.gap ?? 8 }, view] },
@@ -479,12 +557,13 @@ function Block({ block, ctx, pkg, inherited, selection, }) {
             // 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;
-            return (React.createElement(react_native_1.Pressable, { accessibilityRole: "button", accessibilityState: { disabled: busy, busy }, disabled: busy, onPress: close ?? ctx.onPurchase, style: ({ pressed }) => [
+            const busy = !close && !navigates && ctx.loading;
+            return (React.createElement(react_native_1.Pressable, { accessibilityRole: "button", accessibilityState: { disabled: busy, busy }, disabled: busy, onPress: navigates ? actionPress(block, ctx) : (close ?? ctx.onPurchase), style: ({ pressed }) => [
                     {
                         backgroundColor: close ? "transparent" : doc.accent,
                         borderRadius: 12,
@@ -557,20 +636,23 @@ function Block({ block, ctx, pkg, inherited, selection, }) {
             return (React.createElement(react_native_1.View, { style: [block.flex ? { flexGrow: 1 } : { height: 16 }, view] }));
         case "card": {
             const layout = block.layout ?? "column";
+            const carousel = layout === "carousel";
             const base = 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 = (context, childSelection, childText = text) => block.children.map((child, i) => {
                 const node = (React.createElement(Block, { key: child.id, block: child, ctx: ctx, pkg: context, inherited: childText, selection: childSelection }));
@@ -614,6 +696,9 @@ function Block({ block, ctx, pkg, inherited, selection, }) {
                 base,
                 layout === "stack" ? null : { borderRadius: 16 },
                 view,
+                carousel
+                    ? { height: typeof style?.height === "number" ? style.height : 220 }
+                    : null,
             ];
             const cardPackage = block.packageIndex !== undefined
                 ? (ctx.packages[block.packageIndex] ?? pkg)
@@ -622,7 +707,7 @@ function Block({ block, ctx, pkg, inherited, selection, }) {
             // how hand-styled plan rows (a highlighted annual beside a plain
             // monthly) become tappable without a products block.
             const pinned = block.packageIndex !== undefined && cardPackage !== undefined;
-            return (React.createElement(CardBox, { style: boxStyle, fill: style?.fill, doc: doc, gradient: ctx.gradient, radius: style?.radius ?? (layout === "stack" ? undefined : 16), onPress: pinned ? () => ctx.onSelect(cardPackage.packageId) : undefined }, renderChildren(cardPackage, context)));
+            return (React.createElement(CardBox, { style: boxStyle, fill: style?.fill, doc: doc, gradient: ctx.gradient, radius: style?.radius ?? (layout === "stack" ? undefined : 16), onPress: pinned ? () => ctx.onSelect(cardPackage.packageId) : undefined }, carousel ? (React.createElement(Carousel, { pages: renderChildren(cardPackage, context), autoAdvance: block.autoAdvance, doc: doc })) : (renderChildren(cardPackage, context))));
         }
     }
 }
@@ -634,6 +719,14 @@ function RevnixBlockPaywall(props) {
     // re-runs on every selection tap.
     const doc = React.useMemo(() => (0, locale_js_1.localizeBlockDoc)(props.doc, props.locale ?? (0, locale_js_1.detectLocale)()), [props.doc, props.locale]);
     const [internalSelected, setInternalSelected] = React.useState(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 = (0, types_js_1.onboardingScreen)(doc, screenIndex);
     // Contract §1: host → own tap → design highlight → first package, each
     // only when the offering carries it.
     const selectedId = (0, selection_js_1.selectedPackageId)(packages, props.selectedPackageId, internalSelected, props.highlightPackageId);
@@ -669,21 +762,26 @@ function RevnixBlockPaywall(props) {
         onTerms: props.onTerms,
         onPrivacy: props.onPrivacy,
         onClose: props.onClose,
+        navigate: (action) => {
+            const to = (0, types_js_1.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) => (React.createElement(Block, { key: block.id, block: block, ctx: ctx, pkg: packages.find((p) => p.packageId === selectedId) ?? packages[0], inherited: rootText })));
+    const children = screen.blocks.map((block) => (React.createElement(Block, { key: block.id, block: block, ctx: ctx, pkg: packages.find((p) => p.packageId === selectedId) ?? packages[0], inherited: rootText })));
     // REV-252: the renderer's own close, drawn only for a design that authors
     // none. Rendered as a sibling of the tree — outside the canvas scale — so
     // it keeps its tap size and its distance from the screen edge whatever the
     // device width does to the design.
     const safeAreaTop = props.safeAreaTop ??
         (react_native_1.Platform.OS === "android" ? (react_native_1.StatusBar.currentHeight ?? 0) : 0);
-    const fallbackClose = props.onClose && !(0, types_js_1.hasCloseAction)(doc.blocks) ? (React.createElement(FallbackClose, { doc: doc, onPress: props.onClose, safeAreaTop: safeAreaTop })) : null;
+    const fallbackClose = props.onClose && !(0, types_js_1.hasCloseAction)(screen.blocks) ? (React.createElement(FallbackClose, { doc: doc, onPress: props.onClose, safeAreaTop: safeAreaTop })) : null;
     const [width, setWidth] = React.useState(null);
     const [viewportHeight, setViewportHeight] = React.useState(null);
     if (doc.layout === "canvas") {
@@ -704,7 +802,7 @@ function RevnixBlockPaywall(props) {
         const canvasHeight = metrics?.scaledHeight ?? types_js_1.DESIGN_CANVAS.height;
         const left = metrics?.left ?? 0;
         return (React.createElement(ScreenBackground, { doc: doc, gradient: props.gradient, blur: props.blur, onDiagnostic: props.onDiagnostic, style: [{ flex: 1 }, props.style] },
-            React.createElement(react_native_1.ScrollView, { contentContainerStyle: { height: canvasHeight }, 
+            React.createElement(react_native_1.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
                 // the artwork. When nothing overflows, scrolling is off entirely so
@@ -728,15 +826,18 @@ function RevnixBlockPaywall(props) {
                                 { translateY: -((canvasHeight / scale) * (1 - scale)) / 2 },
                                 { scale },
                             ],
-                        } }, children))),
+                        } },
+                        children,
+                        screen.dots ? (React.createElement(Dots, { count: screen.dots.count, active: screen.dots.active, doc: doc, style: { top: 20, zIndex: 50 } })) : null))),
             fallbackClose));
     }
     return (React.createElement(ScreenBackground, { doc: doc, gradient: props.gradient, blur: props.blur, onDiagnostic: props.onDiagnostic, style: [{ flex: 1 }, props.style] },
-        React.createElement(react_native_1.ScrollView, { contentContainerStyle: {
+        React.createElement(react_native_1.ScrollView, { key: screenIndex, contentContainerStyle: {
                 gap: 12,
                 paddingHorizontal: 20,
                 paddingTop: 18,
                 paddingBottom: 30,
             }, showsVerticalScrollIndicator: false, alwaysBounceVertical: false, overScrollMode: "never" }, children),
+        screen.dots ? (React.createElement(Dots, { count: screen.dots.count, active: screen.dots.active, doc: doc, style: { top: 20 + safeAreaTop, zIndex: 50 } })) : null,
         fallbackClose));
 }

package/dist/ui/RevnixPaywall.js

@@ -76,7 +76,16 @@ function asBlockDoc(value) {
         typeof doc.textColor === "string" &&
         typeof doc.accent === "string" &&
         typeof doc.accentInk === "string"
-        ? doc
+        ? {
+            ...doc,
+            ...(doc.screens !== undefined
+                ? {
+                    screens: Array.isArray(doc.screens)
+                        ? doc.screens.filter((s) => Array.isArray(s) && s.length > 0)
+                        : [],
+                }
+                : {}),
+        }
         : null;
 }
 exports.DEFAULT_PAYWALL_THEME = {
@@ -289,7 +298,7 @@ function RevnixPaywall(props) {
     // 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 = client?.reportRenderDiagnostic || props.onDiagnostic

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.6.0";
+export declare const SDK_VERSION = "1.8.0";

package/dist/version.js

@@ -4,4 +4,4 @@ exports.SDK_VERSION = void 0;
 // 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).
-exports.SDK_VERSION = "1.6.0";
+exports.SDK_VERSION = "1.8.0";

package/ios/RevnixStore.m

@@ -15,4 +15,8 @@ RCT_EXTERN_METHOD(finish:(NSString *)transactionId
                   resolver:(RCTPromiseResolveBlock)resolve
                   rejecter:(RCTPromiseRejectBlock)reject)
 
+RCT_EXTERN_METHOD(deviceIntegrity:(NSString *)customerId
+                  resolver:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject)
+
 @end

package/ios/RevnixStore.swift

@@ -1,3 +1,5 @@
+import CryptoKit
+import DeviceCheck
 import Foundation
 import React
 import StoreKit
@@ -88,6 +90,33 @@ class RevnixStore: RCTEventEmitter {
     }
   }
 
+  @objc(deviceIntegrity:resolver:rejecter:)
+  func deviceIntegrity(
+    _ customerId: String,
+    resolver resolve: @escaping RCTPromiseResolveBlock,
+    rejecter reject: @escaping RCTPromiseRejectBlock
+  ) {
+    let service = DCAppAttestService.shared
+    guard service.isSupported else {
+      resolve(nil)
+      return
+    }
+    Task {
+      do {
+        let keyId = try await service.generateKey()
+        let clientDataHash = Data(SHA256.hash(data: Data(customerId.utf8)))
+        let attestation = try await service.attestKey(keyId, clientDataHash: clientDataHash)
+        resolve([
+          "platform": "ios",
+          "keyId": keyId,
+          "attestation": attestation.base64EncodedString(),
+        ])
+      } catch {
+        resolve(nil)
+      }
+    }
+  }
+
   private static func payload(_ verification: VerificationResult<Transaction>) -> [String: Any] {
     let transaction = verification.unsafePayloadValue
     var payload: [String: Any] = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-revnix",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "description": "Revnix SDK for React, React Native & Next.js: purchase registration, entitlements, identity, and placements over the Revnix /v1 API.",
   "license": "MIT",
   "repository": {

package/src/blocks/locale.ts

@@ -125,7 +125,14 @@ function localizeBlock(
     case "text":
       return { ...block, text: at("text", block.text) };
     case "button":
+    case "toggle":
       return { ...block, label: at("label", block.label) };
+    case "timer":
+      return {
+        ...block,
+        format: opt("format", block.format),
+        expiredText: opt("expiredText", block.expiredText),
+      };
     case "list":
       return {
         ...block,
@@ -186,6 +193,13 @@ export function localizeBlockDoc(
     ...doc,
     defaultLocale: chain[0],
     blocks: doc.blocks.map((b) => localizeBlock(b, lookup)),
+    ...(doc.screens
+      ? {
+          screens: doc.screens.map((screen) =>
+            screen.map((b) => localizeBlock(b, lookup))
+          ),
+        }
+      : {}),
   };
 }
 

package/src/blocks/selection.ts

@@ -11,6 +11,7 @@ import type {
   CardBlock,
   PaywallBlock,
   PaywallBlockDoc,
+  ToggleBlock,
 } from "./types.js";
 import { DESIGN_CANVAS } from "./types.js";
 import { resolveTags } from "./tags.js";
@@ -33,6 +34,18 @@ export function selectedPackageId(
   return packages[0]?.packageId;
 }
 
+export function toggleSelection(
+  block: ToggleBlock,
+  packages: ReadonlyArray<{ packageId: string }>,
+  selectedId: string | undefined
+): { on: boolean; target: string } | null {
+  const on = packages[block.onPackageIndex];
+  const off = packages[block.offPackageIndex];
+  if (on === undefined || off === undefined) return null;
+  const isOn = on.packageId === selectedId;
+  return { on: isOn, target: (isOn ? off : on).packageId };
+}
+
 /** The context a package-bearing card opens for itself and its subtree. */
 export function packageContext(
   pkg: { packageId: string } | undefined,

package/src/blocks/tags.ts

@@ -11,6 +11,7 @@
 // approximated — a wrong price must never reach a customer silently.
 
 import type { RevnixPaywallPackage } from "../ui/RevnixPaywall.js";
+import type { TimerBlock } from "./types.js";
 
 /** Renewal cycles, in months. Lifetime and one-time products have no cycle. */
 const MONTHS: Record<string, number | undefined> = {
@@ -123,3 +124,40 @@ export function resolveTags(
     }
   });
 }
+
+export function formatCountdown(format: string, remaining: number): string {
+  const pad = (n: number) => String(n).padStart(2, "0");
+  let span = Infinity;
+  const part = (token: string, unit: number) => {
+    const value = Math.floor((remaining % span) / unit);
+    if (format.includes(token)) span = unit;
+    return value;
+  };
+  const days = part("{d}", 86400);
+  const hours = part("{hh}", 3600);
+  const minutes = part("{mm}", 60);
+  const seconds = part("{ss}", 1);
+  return format
+    .replace(/\{d\}/g, String(days))
+    .replace(/\{hh\}/g, pad(hours))
+    .replace(/\{mm\}/g, pad(minutes))
+    .replace(/\{ss\}/g, pad(seconds));
+}
+
+export function timerText(
+  block: TimerBlock,
+  shownAt: number,
+  now: number,
+): string | null {
+  const deadline =
+    block.endsAt !== undefined
+      ? Date.parse(block.endsAt)
+      : shownAt + (block.duration ?? 0) * 1000;
+  const remaining = Number.isNaN(deadline)
+    ? 0
+    : Math.max(0, Math.floor((deadline - now) / 1000));
+  if (remaining > 0) {
+    return formatCountdown(block.format ?? "{hh}:{mm}:{ss}", remaining);
+  }
+  return block.expiredText ?? null;
+}