@namiml/expo-sdk 3.4.0-dev.202605060437

package/src/components/PaywallScreen.tsx

@@ -0,0 +1,245 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { ActivityIndicator, BackHandler, View, StyleSheet } from 'react-native';
+import type { IPaywall, TPages } from '@namiml/sdk-core';
+import { useFirstFocusReadyContext, usePaywallContext } from '../context/PaywallContext';
+import { NamiContentContainer } from './containers/NamiContentContainer';
+import { NamiBackgroundContainer } from './containers/NamiBackgroundContainer';
+import { NamiHeader } from './containers/NamiHeader';
+import { NamiFooter } from './containers/NamiFooter';
+import { parseColor } from '../utils/styles';
+import { getDeviceScaleFactor, NamiEventEmitter, NamiPaywallAction, PAYWALL_ACTION_EVENT, NamiReservedActions } from '@namiml/sdk-core';
+import { prepareAndLoadFontsWithTimeout } from '../utils/fonts';
+import { postImpression } from '../utils/impression';
+
+interface Props {
+  paywall: IPaywall;
+  onClose?: () => void;
+  onCommitted?: (paywall: IPaywall, pageName: string, formFactor?: string) => void;
+  holdInteractionUntilFocus?: boolean;
+  isActive?: boolean;
+}
+
+let KeplerTVFocusGuideView: React.ComponentType<any> | null = null;
+try {
+  KeplerTVFocusGuideView = require('@amazon-devices/react-native-kepler').TVFocusGuideView;
+} catch {
+  KeplerTVFocusGuideView = null;
+}
+
+const fontGateCache = new Map<string, 'ready' | 'fallback'>();
+
+export const PaywallScreen: React.FC<Props> = ({
+  paywall,
+  onClose,
+  onCommitted,
+  holdInteractionUntilFocus = false,
+  isActive = true,
+}) => {
+  const ctx = usePaywallContext();
+  const focusReadyCtx = useFirstFocusReadyContext();
+  const scaleFactor = getDeviceScaleFactor(ctx.state.formFactor);
+  const userInteractionEnabled = ctx.state.userInteractionEnabled !== false;
+  const currentPageName = ctx.state.selectedPaywall === paywall
+    ? ctx.state.currentPage
+    : paywall.template?.initialState?.currentPage ?? 'page1';
+
+  const page = useMemo(() => {
+    let currentPage: string;
+    if (ctx.state.selectedPaywall === paywall) {
+      currentPage = ctx.state.currentPage;
+    } else {
+      currentPage = paywall.template?.initialState?.currentPage ?? 'page1';
+    }
+
+    return paywall.template?.pages?.find((p: TPages) => p.name === currentPage) ?? null;
+  }, [paywall, ctx.state.selectedPaywall, ctx.state.currentPage]);
+
+  const firstFocusReadyKey = `${paywall.id ?? 'unknown'}:${page?.name ?? currentPageName}:${ctx.state.formFactor ?? ''}`;
+  const shouldHoldForFocus = holdInteractionUntilFocus && ctx.state.formFactor === 'television';
+  const focusReady = !shouldHoldForFocus || focusReadyCtx.firstFocusReadyKey === firstFocusReadyKey;
+  const interactionEnabled = userInteractionEnabled && focusReady;
+  const fontNames = useMemo(() => Object.keys(paywall.fonts ?? {}).sort(), [paywall.fonts]);
+  const fontGateCacheKey = `${paywall.id ?? 'unknown'}:${page?.name ?? currentPageName}:${fontNames.join(',')}`;
+  const hasFonts = fontNames.length > 0;
+  const [fontGateState, setFontGateState] = useState<'pending' | 'ready' | 'fallback'>(() => {
+    if (!hasFonts) {
+      return 'ready';
+    }
+
+    return fontGateCache.get(fontGateCacheKey) ?? 'pending';
+  });
+
+  useEffect(() => {
+    void postImpression({
+      segment: ctx.state.selectedCampaign?.segment,
+      call_to_action: paywall.id,
+    });
+
+    NamiEventEmitter.getInstance().emit(PAYWALL_ACTION_EVENT, {
+      ...ctx.getPaywallActionEventData(),
+      action: NamiPaywallAction.SHOW_PAYWALL,
+    });
+  }, [paywall.id, ctx.state.selectedCampaign?.segment]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    if (!hasFonts) {
+      setFontGateState('ready');
+      return;
+    }
+
+    const cachedGateState = fontGateCache.get(fontGateCacheKey);
+    if (cachedGateState) {
+      setFontGateState(cachedGateState);
+      return;
+    }
+
+    setFontGateState('pending');
+
+    void prepareAndLoadFontsWithTimeout(paywall.fonts, 1500).then((result) => {
+      if (!cancelled) {
+        const resolvedState = result === 'ready' ? 'ready' : 'fallback';
+        fontGateCache.set(fontGateCacheKey, resolvedState);
+        setFontGateState(resolvedState);
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [currentPageName, fontGateCacheKey, fontNames.length, hasFonts, page?.name, paywall.fonts, paywall.id]);
+
+  useEffect(() => {
+    if (fontGateState === 'pending') {
+      return;
+    }
+
+    const paywallId = paywall.id ?? 'unknown';
+    const pageName = page?.name ?? currentPageName;
+    onCommitted?.(paywall, pageName, ctx.state.formFactor);
+  }, [fontGateState, paywall, paywall.id, page?.name, currentPageName, interactionEnabled, onCommitted, ctx.state.formFactor]);
+
+  useEffect(() => {
+    if (!isActive) {
+      return;
+    }
+
+    const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
+      const hasRemoteBackActions = !!ctx.flow?.currentFlowStep?.actions?.[NamiReservedActions.REMOTE_BACK]?.length;
+      if (hasRemoteBackActions) {
+        return false;
+      }
+
+      const canGoBackPage = ctx.canGoBackPage();
+      if (!canGoBackPage) {
+        return false;
+      }
+
+      return ctx.goBackPage();
+    });
+
+    return () => subscription.remove();
+  }, [ctx, isActive]);
+
+  const {
+    backgroundContainer,
+    header = [],
+    contentContainer,
+    footer = [],
+  } = (page ?? {}) as any;
+
+  const hasHeader = Array.isArray(header)
+    ? header.length > 0
+    : Array.isArray((header as any)?.components)
+      ? (header as any).components.length > 0
+      : Boolean(header);
+  const hasFooter = Array.isArray(footer)
+    ? footer.length > 0
+    : Array.isArray((footer as any)?.components)
+      ? (footer as any).components.length > 0
+      : Boolean(footer);
+  const bgColor = parseColor(backgroundContainer?.fillColor)
+    ?? parseColor(backgroundContainer?.fillColorFallback)
+    ?? 'transparent';
+  const waitingOverlayColor = bgColor === 'transparent' ? '#111118' : bgColor;
+  const PageFocusWrapper = ctx.state.formFactor === 'television' && KeplerTVFocusGuideView
+    ? KeplerTVFocusGuideView
+    : View;
+  const pageFocusWrapperProps = ctx.state.formFactor === 'television' && KeplerTVFocusGuideView
+    ? {
+        autoFocus: true,
+        style: styles.pageRoot,
+      }
+    : { style: styles.pageRoot };
+
+  if (!page) {
+    throw new Error(`Page with name ${ctx.state.currentPage} not found in paywall template.`);
+  }
+
+  if (fontGateState === 'pending') {
+    return (
+      <View style={[styles.screen, styles.pendingScreen, { backgroundColor: waitingOverlayColor }]}>
+        <ActivityIndicator size="large" color="#FFFFFF" />
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={[styles.screen, { backgroundColor: bgColor }]}
+      pointerEvents={interactionEnabled ? 'auto' : 'none'}
+    >
+      <PageFocusWrapper
+        key={`${paywall.id}:${page.name ?? currentPageName}`}
+        {...pageFocusWrapperProps}
+      >
+        {backgroundContainer && (
+          <NamiBackgroundContainer component={backgroundContainer as any} scaleFactor={scaleFactor} onClose={onClose} />
+        )}
+
+        {hasHeader && (
+          <NamiHeader
+            components={header as any}
+            scaleFactor={scaleFactor}
+            onClose={onClose}
+          />
+        )}
+
+        {contentContainer && (
+          <NamiContentContainer
+            component={contentContainer as any}
+            scaleFactor={scaleFactor}
+            onClose={onClose}
+          />
+        )}
+
+        {hasFooter && (
+          <NamiFooter components={footer as any} scaleFactor={scaleFactor} onClose={onClose} />
+        )}
+
+        {shouldHoldForFocus && !focusReady && (
+          <View
+            pointerEvents="none"
+            style={[styles.waitingOverlay, { backgroundColor: waitingOverlayColor }]}
+          />
+        )}
+      </PageFocusWrapper>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  screen: { flex: 1 },
+  pendingScreen: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  pageRoot: { flex: 1 },
+  waitingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 20,
+  },
+});

package/src/components/TemplateRenderer.tsx

@@ -0,0 +1,243 @@
+import React from 'react';
+import type { TComponent } from '@namiml/sdk-core';
+import { usePaywallContext } from '../context/PaywallContext';
+import {
+  conditionComponentMatches,
+  resolveComponentSmartText,
+  withOverrides,
+} from '../utils/rendering';
+
+interface Props {
+  component: TComponent;
+  scaleFactor?: number;
+  onClose?: () => void;
+  parentDirection?: string;
+  parentCrossAxisFitContent?: boolean;
+}
+
+type RendererProps = {
+  component: TComponent;
+  scaleFactor: number;
+  onClose?: () => void;
+  parentDirection?: string;
+  parentCrossAxisFitContent?: boolean;
+};
+
+type ComponentRenderer = React.ComponentType<any>;
+
+const componentRendererCache = new Map<string, ComponentRenderer | null>();
+
+function resolveRenderer(rendererKey: string): ComponentRenderer | null {
+  if (componentRendererCache.has(rendererKey)) {
+    return componentRendererCache.get(rendererKey) ?? null;
+  }
+
+  let renderer: ComponentRenderer | null = null;
+
+  switch (rendererKey) {
+    case 'NamiButton':
+      renderer = require('./elements/NamiButton').NamiButton;
+      break;
+    case 'NamiText':
+      renderer = require('./elements/NamiText').NamiText;
+      break;
+    case 'NamiSymbol':
+      renderer = require('./elements/NamiSymbol').NamiSymbol;
+      break;
+    case 'NamiImage':
+      renderer = require('./elements/NamiImage').NamiImage;
+      break;
+    case 'NamiSpacer':
+      renderer = require('./elements/NamiSpacer').NamiSpacer;
+      break;
+    case 'NamiVideo':
+      renderer = require('./elements/NamiVideo').NamiVideo;
+      break;
+    case 'NamiContainer':
+      renderer = require('./containers/NamiContainer').NamiContainer;
+      break;
+    case 'NamiProductContainer':
+      renderer = require('./containers/NamiProductContainer').NamiProductContainer;
+      break;
+    case 'NamiStack':
+      renderer = require('./containers/NamiStack').NamiStack;
+      break;
+    case 'NamiCarousel':
+      renderer = require('./containers/NamiCarousel').NamiCarousel;
+      break;
+    case 'NamiCollapseContainer':
+      renderer = require('./containers/NamiCollapseContainer').NamiCollapseContainer;
+      break;
+    case 'NamiResponsiveGrid':
+      renderer = require('./containers/NamiResponsiveGrid').NamiResponsiveGrid;
+      break;
+    case 'NamiRepeatingGrid':
+      renderer = require('./containers/NamiRepeatingGrid').NamiRepeatingGrid;
+      break;
+    case 'NamiSegmentPicker':
+      renderer = require('./elements/NamiSegmentPicker').NamiSegmentPicker;
+      break;
+    case 'NamiSegmentPickerItem':
+      renderer = require('./elements/NamiSegmentPickerItem').NamiSegmentPickerItem;
+      break;
+    case 'NamiToggleSwitch':
+      renderer = require('./elements/NamiToggleSwitch').NamiToggleSwitch;
+      break;
+    case 'NamiRadioButton':
+      renderer = require('./elements/NamiRadioButton').NamiRadioButton;
+      break;
+    case 'NamiProgressIndicator':
+      renderer = require('./elements/NamiProgressIndicator').NamiProgressIndicator;
+      break;
+    case 'NamiProgressBar':
+      renderer = require('./elements/NamiProgressBar').NamiProgressBar;
+      break;
+    case 'NamiCountdownTimer':
+      renderer = require('./elements/NamiCountdownTimer').NamiCountdownTimer;
+      break;
+    case 'NamiToggleButton':
+      renderer = require('./elements/NamiToggleButton').NamiToggleButton;
+      break;
+    case 'NamiPlayPauseButton':
+      renderer = require('./elements/NamiPlayPauseButton').NamiPlayPauseButton;
+      break;
+    case 'NamiVolumeButton':
+      renderer = require('./elements/NamiVolumeButton').NamiVolumeButton;
+      break;
+    case 'NamiQRCode':
+      renderer = require('./elements/NamiQRCode').NamiQRCode;
+      break;
+    default:
+      renderer = null;
+  }
+
+  componentRendererCache.set(rendererKey, renderer);
+  return renderer;
+}
+
+function renderWithKey(
+  rendererKey: string,
+  props: RendererProps,
+): React.ReactElement | null {
+  const Renderer = resolveRenderer(rendererKey);
+  return Renderer ? <Renderer {...props} /> : null;
+}
+
+export const TemplateRenderer: React.FC<Props> = ({ component, scaleFactor = 1, onClose, parentDirection, parentCrossAxisFitContent}) => {
+  const ctx = usePaywallContext();
+  const smartTextSku = (component as any)?.smartTextSku ?? (component as any)?.sku;
+
+  // Skip hidden components
+  if (component.hidden) return null;
+
+  // Handle condition components - evaluate condition, render children if matched
+  if (component.component === 'condition') {
+    const cond = component as any;
+    if (!conditionComponentMatches(ctx, cond, smartTextSku)) return null;
+    // Render children of condition
+    return (
+      <>
+        {cond.components?.map((child: TComponent, i: number) => (
+          <TemplateRenderer key={child.id ?? i} component={child} scaleFactor={scaleFactor} onClose={onClose} parentDirection={parentDirection} parentCrossAxisFitContent={parentCrossAxisFitContent} />
+        ))}
+      </>
+    );
+  }
+
+  // Apply conditionAttributes overrides if any match
+  let resolvedComponent = component;
+  if (component.conditionAttributes?.length) {
+    resolvedComponent = withOverrides(ctx, resolvedComponent as any, smartTextSku) as any;
+  }
+
+  // Resolve smart-text values on component fields (shallow)
+  if (!(resolvedComponent as any).__namiSmartTextResolved) {
+    resolvedComponent = resolveComponentSmartText(resolvedComponent, ctx);
+  }
+
+  const componentType: string = resolvedComponent.component;
+  return renderResolvedComponent(
+    componentType,
+    resolvedComponent,
+    scaleFactor,
+    onClose,
+    parentDirection,
+    parentCrossAxisFitContent,
+  );
+};
+
+function renderResolvedComponent(
+  componentType: string,
+  resolvedComponent: TComponent,
+  scaleFactor: number,
+  onClose?: () => void,
+  parentDirection?: string,
+  parentCrossAxisFitContent?: boolean,
+): React.ReactElement | null {
+  const sharedProps: RendererProps = {
+    component: resolvedComponent,
+    scaleFactor,
+    onClose,
+    parentDirection,
+    parentCrossAxisFitContent,
+  };
+
+  switch (componentType) {
+    case 'button':
+      return renderWithKey('NamiButton', sharedProps);
+    case 'text':
+    case 'title':
+    case 'body':
+    case 'legal':
+    case 'text-list':
+      return renderWithKey('NamiText', sharedProps);
+    case 'symbol':
+      return renderWithKey('NamiSymbol', sharedProps);
+    case 'image':
+      return renderWithKey('NamiImage', sharedProps);
+    case 'spacer':
+      return renderWithKey('NamiSpacer', sharedProps);
+    case 'videoUrl':
+      return renderWithKey('NamiVideo', sharedProps);
+    case 'container':
+    case 'formContainer':
+      return renderWithKey('NamiContainer', sharedProps);
+    case 'productContainer':
+      return renderWithKey('NamiProductContainer', sharedProps);
+    case 'stack':
+      return renderWithKey('NamiStack', sharedProps);
+    case 'carouselContainer':
+      return renderWithKey('NamiCarousel', sharedProps);
+    case 'collapseContainer':
+      return renderWithKey('NamiCollapseContainer', sharedProps);
+    case 'responsiveGrid':
+      return renderWithKey('NamiResponsiveGrid', sharedProps);
+    case 'repeatingGrid':
+      return renderWithKey('NamiRepeatingGrid', sharedProps);
+    case 'segmentPicker':
+    case 'formSegmentPicker':
+      return renderWithKey('NamiSegmentPicker', sharedProps);
+    case 'segmentPickerItem':
+      return renderWithKey('NamiSegmentPickerItem', sharedProps);
+    case 'toggleSwitch':
+      return renderWithKey('NamiToggleSwitch', sharedProps);
+    case 'radio':
+      return renderWithKey('NamiRadioButton', sharedProps);
+    case 'progressIndicator':
+      return renderWithKey('NamiProgressIndicator', sharedProps);
+    case 'progressBar':
+      return renderWithKey('NamiProgressBar', sharedProps);
+    case 'countdownTimerText':
+      return renderWithKey('NamiCountdownTimer', sharedProps);
+    case 'toggleButton':
+      return renderWithKey('NamiToggleButton', sharedProps);
+    case 'playPauseButton':
+      return renderWithKey('NamiPlayPauseButton', sharedProps);
+    case 'volumeButton':
+      return renderWithKey('NamiVolumeButton', sharedProps);
+    case 'qrCode':
+      return renderWithKey('NamiQRCode', sharedProps);
+    default:
+      return null;
+  }
+}

package/src/components/containers/NamiBackgroundContainer.tsx

@@ -0,0 +1,103 @@
+import React, { useMemo } from 'react';
+import { View, ImageBackground, StyleSheet, type ViewStyle } from 'react-native';
+import type { TContainer, TComponent } from '@namiml/sdk-core';
+import { applyStyles, parseColor, resolveFillImageUrl } from '../../utils/styles';
+import { TemplateRenderer } from '../TemplateRenderer';
+
+interface Props {
+  component: TContainer;
+  scaleFactor: number;
+  onClose?: () => void;
+}
+
+export const NamiBackgroundContainer: React.FC<Props> = ({ component, scaleFactor, onClose }) => {
+  if (!component || component.hidden) return null;
+
+  const containerStyle = useMemo(
+    () => applyStyles(component as any, scaleFactor) as ViewStyle,
+    [component, scaleFactor]
+  );
+
+  const fillImageUrl = resolveFillImageUrl(component.fillImage);
+  const bgColor = parseColor(component.fillColor) ?? parseColor(component.fillColorFallback);
+
+  const direction = component.direction ?? 'vertical';
+  const content = (
+    <>
+      {component.components?.map((comp: TComponent, i: number) => {
+        const marginKey = direction === 'vertical' ? 'topMargin' : 'leftMargin';
+        const spacedComponent =
+          i === 0 || !component.spacing
+            ? comp
+            : ({
+                ...comp,
+                [marginKey]: mergeRawMarginValue((comp as any)[marginKey], component.spacing),
+              } as TComponent);
+
+        return (
+          <TemplateRenderer
+            key={comp.id ?? i}
+            component={spacedComponent}
+            scaleFactor={scaleFactor}
+            onClose={onClose}
+            parentDirection={direction}
+          />
+        );
+      })}
+    </>
+  );
+
+  if (fillImageUrl) {
+    return (
+      <ImageBackground
+        source={{ uri: fillImageUrl }}
+        resizeMode='cover'
+        style={[containerStyle, styles.background]}
+      >
+        {content}
+      </ImageBackground>
+    );
+  }
+
+  return (
+    <View style={[containerStyle, bgColor ? { backgroundColor: bgColor } : null, styles.background]}>
+      {content}
+    </View>
+  );
+};
+
+function mergeRawMarginValue(existing: unknown, spacing: unknown): unknown {
+  if (existing == null) return spacing;
+
+  const existingNumeric = toNumericMargin(existing);
+  const spacingNumeric = toNumericMargin(spacing);
+  if (existingNumeric == null || spacingNumeric == null) {
+    return existing;
+  }
+
+  return existingNumeric + spacingNumeric;
+}
+
+function toNumericMargin(value: unknown): number | null {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value;
+  }
+
+  if (typeof value !== 'string') {
+    return null;
+  }
+
+  const trimmed = value.trim();
+  if (!trimmed || !/^-?\d+(\.\d+)?$/.test(trimmed)) {
+    return null;
+  }
+
+  const parsed = Number(trimmed);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+const styles = StyleSheet.create({
+  background: {
+    ...StyleSheet.absoluteFillObject,
+  },
+});