@leisuresaas/react-native 0.6.2

package/src/ads/layouts/text.tsx

@@ -0,0 +1,77 @@
+import type { ReactElement } from "react";
+import { Text, View } from "react-native";
+
+import type { TextLayout } from "../constants";
+import type { AdCreativeStyles, AdLayoutRenderContext } from "../theme";
+import { AdBadge, AdBody, AdLinkCta, AdTitle, LayoutShell } from "./shared";
+
+export type AdLayoutRendererProps = {
+  ctx: AdLayoutRenderContext;
+  styles: AdCreativeStyles;
+  contentStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+};
+
+function TextInlineLayout({ ctx, styles, contentStyle }: AdLayoutRendererProps) {
+  return (
+    <LayoutShell ad={ctx.ad} onPress={ctx.onPress} styles={styles} contentStyle={contentStyle}>
+      <View style={styles.content}>
+        <AdTitle text={ctx.ad.title} styles={styles} />
+        <AdBody text={ctx.ad.body_text} styles={styles} />
+        <AdLinkCta styles={styles} />
+      </View>
+    </LayoutShell>
+  );
+}
+
+function TextCalloutLayout({ ctx, styles, contentStyle }: AdLayoutRendererProps) {
+  return (
+    <LayoutShell ad={ctx.ad} onPress={ctx.onPress} styles={styles} contentStyle={contentStyle}>
+      <AdBadge styles={styles} />
+      <AdTitle text={ctx.ad.title} styles={styles} />
+      <AdBody text={ctx.ad.body_text} styles={styles} />
+      <AdLinkCta styles={styles} label="View details" />
+    </LayoutShell>
+  );
+}
+
+function TextFooterLayout({ ctx, styles, contentStyle }: AdLayoutRendererProps) {
+  const line = [ctx.ad.title, ctx.ad.body_text].filter(Boolean).join(" · ");
+  return (
+    <LayoutShell ad={ctx.ad} onPress={ctx.onPress} styles={styles} contentStyle={contentStyle}>
+      <Text style={styles.title} numberOfLines={2}>{line || "Platform ad"}</Text>
+    </LayoutShell>
+  );
+}
+
+function TextSidebarLayout({ ctx, styles, contentStyle }: AdLayoutRendererProps) {
+  return (
+    <LayoutShell ad={ctx.ad} onPress={ctx.onPress} styles={styles} contentStyle={contentStyle}>
+      <View style={styles.content}>
+        <AdTitle text={ctx.ad.title} styles={styles} />
+        <AdBody text={ctx.ad.body_text} styles={styles} numberOfLines={3} />
+      </View>
+    </LayoutShell>
+  );
+}
+
+function TextMinimalLayout({ ctx, styles, contentStyle }: AdLayoutRendererProps) {
+  const label = ctx.ad.title || ctx.ad.body_text || "Learn more";
+  return (
+    <LayoutShell ad={ctx.ad} onPress={ctx.onPress} styles={styles} contentStyle={contentStyle}>
+      <Text style={styles.link}>{label} ›</Text>
+    </LayoutShell>
+  );
+}
+
+const textLayoutMap: Record<TextLayout, (props: AdLayoutRendererProps) => ReactElement> = {
+  text_inline: TextInlineLayout,
+  text_callout: TextCalloutLayout,
+  text_footer: TextFooterLayout,
+  text_sidebar: TextSidebarLayout,
+  text_minimal: TextMinimalLayout,
+};
+
+export function renderTextLayout(layout: TextLayout, props: AdLayoutRendererProps): ReactElement {
+  const Layout = textLayoutMap[layout] ?? TextInlineLayout;
+  return <Layout {...props} />;
+}

package/src/ads/lineup-id.ts

@@ -0,0 +1,6 @@
+import type { AdFeedSource } from "../types";
+
+/** Returns lineup_id from feed source. */
+export function lineupIdFromSource(source?: AdFeedSource | null): string {
+  return source?.lineup_id?.trim() ?? "";
+}

package/src/ads/open-click.ts

@@ -0,0 +1,61 @@
+import * as WebBrowser from "expo-web-browser";
+import { Linking } from "react-native";
+
+export type InAppNavigate = (path: string) => void;
+
+type OpenAdClickOptions = {
+  onInAppNavigate?: InAppNavigate;
+};
+
+async function openExternal(url: string): Promise<void> {
+  try {
+    await WebBrowser.openBrowserAsync(url);
+  } catch {
+    await Linking.openURL(url);
+  }
+}
+
+/**
+ * Opens feed click_url. Sends X-Ads-Click: resolve so the gateway can return
+ * an in-app path instead of a browser redirect. Click is recorded by that GET.
+ */
+export async function openAdClickUrl(url: string, options?: OpenAdClickOptions): Promise<void> {
+  if (!url) {
+    return;
+  }
+  try {
+    const res = await fetch(url, {
+      method: "GET",
+      headers: { Accept: "application/json", "X-Ads-Click": "resolve" },
+    });
+    const contentType = res.headers.get("content-type") ?? "";
+    if (res.ok && contentType.includes("application/json")) {
+      const data = (await res.json()) as { kind?: string; path?: string; url?: string };
+      if (data.kind === "in_app" && data.path?.startsWith("/")) {
+        if (options?.onInAppNavigate) {
+          options.onInAppNavigate(data.path);
+        } else {
+          console.warn("Ad: in-app click ignored; pass AdsProvider onInAppNavigate");
+        }
+        return;
+      }
+      if (data.kind === "external" && data.url?.startsWith("https://")) {
+        await openExternal(data.url);
+        return;
+      }
+      console.warn("Ad: unexpected click resolve body");
+      return;
+    }
+    if (res.url && res.url !== url && res.url.startsWith("https://")) {
+      await openExternal(res.url);
+      return;
+    }
+    if (!res.ok) {
+      console.warn("Ad: click resolve failed", res.status);
+      return;
+    }
+  } catch (err) {
+    console.warn("Ad: click resolve failed", err);
+  }
+  await openExternal(url);
+}

package/src/ads/rotation/indicators-context.tsx

@@ -0,0 +1,31 @@
+import { createContext, useContext } from "react";
+
+import type { AdFeedItem } from "../../types";
+import type { AdRotationStyles } from "../theme";
+
+export type AdRotationIndicatorState = {
+  ads: AdFeedItem[];
+  index: number;
+  onIndexChange: (index: number) => void;
+  styles: AdRotationStyles;
+};
+
+const AdRotationIndicatorsContext = createContext<AdRotationIndicatorState | null>(null);
+
+export function AdRotationIndicatorsProvider({
+  value,
+  children,
+}: {
+  value: AdRotationIndicatorState | null;
+  children: React.ReactNode;
+}) {
+  return (
+    <AdRotationIndicatorsContext.Provider value={value}>
+      {children}
+    </AdRotationIndicatorsContext.Provider>
+  );
+}
+
+export function useAdRotationIndicators() {
+  return useContext(AdRotationIndicatorsContext);
+}

package/src/ads/rotation/indicators.tsx

@@ -0,0 +1,22 @@
+import { Pressable, View } from "react-native";
+
+import type { AdRotationIndicatorState } from "./indicators-context";
+
+type AdRotationIndicatorsProps = {
+  state: AdRotationIndicatorState;
+};
+
+/** Rendered once inside the ad root View — avoids absolute positioning bugs under Pressable. */
+export function AdRotationIndicators({ state }: AdRotationIndicatorsProps) {
+  const { ads, index, onIndexChange, styles } = state;
+
+  return (
+    <View style={styles.indicators} pointerEvents="box-none">
+      {ads.map((item, i) => (
+        <Pressable key={item.id} onPress={() => onIndexChange(i)} hitSlop={8}>
+          <View style={[styles.dot, i === index && styles.dotActive]} />
+        </Pressable>
+      ))}
+    </View>
+  );
+}

package/src/ads/rotation/shell.tsx

@@ -0,0 +1,98 @@
+import { useEffect, useRef, type ReactNode } from "react";
+import { Animated, View } from "react-native";
+
+import type { AdFeedItem, AdFeedRotation } from "../../types";
+import { ROTATION_ANIM_MS, effectiveRotationMode, type AdRotationMode } from "../constants";
+import type { AdRotationStyles } from "../theme";
+import { AdRotationIndicatorsProvider, type AdRotationIndicatorState } from "./indicators-context";
+
+export type AdRotationShellProps = {
+  ads: AdFeedItem[];
+  rotation?: AdFeedRotation;
+  index: number;
+  onIndexChange: (index: number) => void;
+  styles: AdRotationStyles;
+  showIndicators: boolean;
+  renderSlide: (ad: AdFeedItem, index: number) => ReactNode;
+  rootStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+};
+
+function AnimatedSlide({
+  mode, slideKey, children, slideStyle,
+}: {
+  mode: AdRotationMode;
+  slideKey: string;
+  children: ReactNode;
+  slideStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+}) {
+  const opacity = useRef(new Animated.Value(1)).current;
+  const translateX = useRef(new Animated.Value(0)).current;
+  const translateY = useRef(new Animated.Value(0)).current;
+  const scale = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    if (mode === "none") {
+      return;
+    }
+    opacity.setValue(mode === "fade" ? 0 : 1);
+    translateX.setValue(mode === "slide" ? 24 : 0);
+    translateY.setValue(mode === "stack" ? 10 : 0);
+    scale.setValue(mode === "stack" ? 0.96 : 1);
+
+    const anims: Animated.CompositeAnimation[] = [];
+    if (mode === "fade") {
+      anims.push(Animated.timing(opacity, { toValue: 1, duration: ROTATION_ANIM_MS, useNativeDriver: true }));
+    }
+    if (mode === "slide") {
+      anims.push(Animated.timing(translateX, { toValue: 0, duration: ROTATION_ANIM_MS, useNativeDriver: true }));
+    }
+    if (mode === "stack") {
+      anims.push(
+        Animated.timing(translateY, { toValue: 0, duration: ROTATION_ANIM_MS, useNativeDriver: true }),
+        Animated.timing(scale, { toValue: 1, duration: ROTATION_ANIM_MS, useNativeDriver: true }),
+      );
+    }
+    Animated.parallel(anims).start();
+  }, [slideKey, mode, opacity, translateX, translateY, scale]);
+
+  if (mode === "none") {
+    return <View style={slideStyle}>{children}</View>;
+  }
+
+  return (
+    <Animated.View
+      style={[
+        slideStyle,
+        mode === "fade" && { opacity },
+        mode === "slide" && { transform: [{ translateX }] },
+        mode === "stack" && { transform: [{ translateY }, { scale }] },
+      ]}
+    >
+      {children}
+    </Animated.View>
+  );
+}
+
+export function AdRotationShell({
+  ads, rotation, index, onIndexChange, styles, showIndicators, renderSlide, rootStyle,
+}: AdRotationShellProps) {
+  const mode = effectiveRotationMode(rotation, ads.length);
+  const ad = ads[index] ?? ads[0];
+  if (!ad) {
+    return null;
+  }
+
+  const indicatorState: AdRotationIndicatorState | null = showIndicators && ads.length > 1
+    ? { ads, index, onIndexChange, styles }
+    : null;
+
+  return (
+    <View style={[styles.root, rootStyle]}>
+      <AdRotationIndicatorsProvider value={indicatorState}>
+        <AnimatedSlide mode={mode} slideKey={ad.id} slideStyle={styles.slide}>
+          {renderSlide(ad, index)}
+        </AnimatedSlide>
+      </AdRotationIndicatorsProvider>
+    </View>
+  );
+}

package/src/ads/session-id.ts

@@ -0,0 +1,18 @@
+import * as SecureStore from "expo-secure-store";
+
+const STORAGE_KEY = "leisuresaas_ads_session_id";
+
+function randomSessionId(): string {
+  const hex = () => Math.floor(Math.random() * 0xffffffff).toString(16).padStart(8, "0");
+  return `${hex()}${hex()}-${hex().slice(0, 4)}-4${hex().slice(1, 4)}-a${hex().slice(1, 4)}-${hex()}${hex()}${hex()}`.slice(0, 36);
+}
+
+export async function getOrCreateAdsSessionId(): Promise<string> {
+  const existing = await SecureStore.getItemAsync(STORAGE_KEY);
+  if (existing?.trim()) {
+    return existing.trim();
+  }
+  const id = randomSessionId();
+  await SecureStore.setItemAsync(STORAGE_KEY, id);
+  return id;
+}

package/src/ads/theme.ts

@@ -0,0 +1,105 @@
+import type { ReactNode } from "react";
+import type { ImageStyle, TextStyle, ViewStyle } from "react-native";
+
+import type { AdFeedItem, AdFeedRotation } from "../types";
+import type { AdLayout, AdType } from "./constants";
+
+export type AdCreativeStyles = {
+  root?: ViewStyle;
+  pressed?: ViewStyle;
+  image?: ImageStyle;
+  title?: TextStyle;
+  body?: TextStyle;
+  link?: TextStyle;
+  badge?: TextStyle;
+  caption?: ViewStyle;
+  overlay?: ViewStyle;
+  media?: ViewStyle;
+  content?: ViewStyle;
+};
+
+export type AdRotationStyles = {
+  root?: ViewStyle;
+  slide?: ViewStyle;
+  indicators?: ViewStyle;
+  dot?: ViewStyle;
+  dotActive?: ViewStyle;
+};
+
+export type TextLayoutStyles = Partial<Record<import("./constants").TextLayout, AdCreativeStyles>>;
+export type ImageLayoutStyles = Partial<Record<import("./constants").ImageLayout, AdCreativeStyles>>;
+
+export type AdLayoutStyles = {
+  text?: TextLayoutStyles;
+  image?: ImageLayoutStyles;
+};
+
+export type AdsStateStyles = {
+  loading?: ViewStyle;
+  empty?: TextStyle;
+  error?: TextStyle;
+};
+
+export type AdsTheme = {
+  creative?: AdCreativeStyles;
+  rotation?: AdRotationStyles;
+  layouts?: AdLayoutStyles;
+  states?: AdsStateStyles;
+};
+
+export type ResolvedCreativeStyles = Required<Pick<AdCreativeStyles, never>> & AdCreativeStyles;
+
+export type ResolvedAdsTheme = {
+  creative: AdCreativeStyles;
+  rotation: AdRotationStyles;
+  layouts: {
+    text: Record<import("./constants").TextLayout, AdCreativeStyles>;
+    image: Record<import("./constants").ImageLayout, AdCreativeStyles>;
+  };
+  states: AdsStateStyles;
+};
+
+export type AdRenderContext = {
+  ad: AdFeedItem;
+  adType: AdType;
+  layout: AdLayout;
+  placement: string;
+  index: number;
+  count: number;
+  onPress: () => void;
+  theme: ResolvedAdsTheme;
+};
+
+export type AdLayoutRenderContext = AdRenderContext & {
+  styles: AdCreativeStyles;
+};
+
+export type AdProps = {
+  placement?: string;
+  style?: ViewStyle;
+  contentStyle?: ViewStyle;
+  theme?: AdsTheme;
+  styles?: AdLayoutStyles;
+  onError?: (error: Error) => void;
+  onPress?: (ad: AdFeedItem) => void;
+  showEmpty?: boolean;
+  showIndicators?: boolean;
+  renderAd?: (ctx: AdRenderContext) => ReactNode;
+  renderLayout?: (ctx: AdLayoutRenderContext) => ReactNode;
+};
+
+export type UseAdsFeedOptions = {
+  placement?: string;
+  enabled?: boolean;
+};
+
+export type UseAdsFeedResult = {
+  feed: import("../types").AdsFeedResponse | null;
+  ad: AdFeedItem | null;
+  ads: AdFeedItem[];
+  layout?: string;
+  rotation?: AdFeedRotation;
+  loading: boolean;
+  error: Error | null;
+  refresh: () => Promise<void>;
+};

package/src/ads-ui.tsx

@@ -0,0 +1,40 @@
+export {
+  Ad,
+  AdBanner,
+  AdFooter,
+  AdInline,
+  AdPreview,
+  AdSidebar,
+  AdsProvider,
+  defaultAdsTheme,
+  effectiveRotationMode,
+  layoutsForType,
+  defaultLayoutForType,
+  normalizeAdType,
+  normalizeLayout,
+  normalizeRotationMode,
+  useAdsFeed,
+  useAdRotation,
+  TEXT_LAYOUTS,
+  IMAGE_LAYOUTS,
+  AD_TYPES,
+} from "./ads/index";
+export type {
+  AdCreativeStyles,
+  AdLayoutRenderContext,
+  AdLayoutStyles,
+  AdPreviewProps,
+  AdProps,
+  AdRenderContext,
+  AdRotationStyles,
+  AdSlotViewProps,
+  AdsProviderProps,
+  AdsTheme,
+  InAppNavigate,
+  UseAdsFeedOptions,
+  UseAdsFeedResult,
+  UseAdRotationResult,
+  TextLayoutStyles,
+  ImageLayoutStyles,
+} from "./ads/index";
+export type { AdType, AdLayout, TextLayout, ImageLayout, AdRotationMode } from "./ads/constants";

package/src/ads.ts

@@ -0,0 +1,16 @@
+/**
+ * @deprecated Use click_url from GET /ads/feed; the platform returns signed tracking URLs.
+ */
+export function buildAdClickUrl(clickBaseUrl: string, adId: string, productId?: string): string {
+  const base = clickBaseUrl.replace(/\/$/, "");
+  const id = adId.trim();
+  if (!base || !id) {
+    return "";
+  }
+  let url = `${base}/v1/ads/click/${encodeURIComponent(id)}`;
+  const product = productId?.trim();
+  if (product) {
+    url += `?product_id=${encodeURIComponent(product)}`;
+  }
+  return url;
+}