Checkout Success Screen

import * as React from "react";
import { useRef } from "react";
import { View, ScrollView } from "react-native";
import Animated, { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Confetti, Icon, Image, ProgressRing, Separator, Text, type ConfettiHandle } from "@lumioui/ui";
import { spring, useHaptic, useReducedMotion } from "@lumioui/core";
import { BLOCK_STAGGER, catalogImg, LumioMark, Mount, Press } from "../shared";

export interface CheckoutSuccessScreenProps {
  orderId?: string;
  /** "Arriving Fri, Sep 18". */
  eta?: string;
  /** Receipt destination. */
  email?: string;
  items?: { name: string; imageUrl?: string }[];
  total?: number;
  currency?: string;
  deliveryAddress?: string;
  onTrack?: () => void;
  onContinueShopping?: () => void;
}

const img = (p: Parameters<typeof catalogImg>[0]) => catalogImg(p, 160, 200);

// Same parcel as orders/tracking/order-detail: HL-2094's three pieces.
const DEFAULT_ITEMS = [
  { name: "Structured Wool Overcoat", imageUrl: img("overcoat") },
  { name: "Garment-Dyed Tee", imageUrl: img("tee") },
  { name: "Heritage Graphic Tee", imageUrl: img("graphicTee") },
];

const fmt = (n: number, currency = "$") =>
  `${currency}${n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;

/** The check pops with a spring; the ring is already full so it reads as
 *  "done" rather than "loading". Reduced motion skips the pop. */
function SuccessBadge() {
  const reduce = useReducedMotion();
  const t = useSharedValue(reduce ? 1 : 0);
  React.useEffect(() => {
    if (reduce) {
      t.value = 1;
      return;
    }
    t.value = withSpring(1, spring.pop);
  }, [reduce, t]);
  const style = useAnimatedStyle(() => ({
    opacity: t.value,
    transform: [{ scale: 0.6 + t.value * 0.4 }],
  }));
  return (
    <Animated.View
      style={style}
      accessibilityRole="image"
      accessibilityLabel="Order placed successfully"
    >
      <ProgressRing value={100} size={112} strokeWidth={6} color="success">
        <Icon name="check" size="lg" color="#65A30D" />
      </ProgressRing>
    </Animated.View>
  );
}
SuccessBadge.displayName = "SuccessBadge";

/** Checkout success — confetti over a completed progress-ring check, the
 *  order number and ETA, the bought items strip, and the two exits every
 *  confirmation screen offers: track the order or keep shopping. */
export function CheckoutSuccessScreen({
  orderId = "HL-2094",
  eta = "Arriving Fri, Sep 18",
  email = "amara.chen@lumio.dev",
  items = DEFAULT_ITEMS,
  total = 628.0,
  currency = "$",
  deliveryAddress = "421 Harbor Lane, Apt 5B, San Francisco CA",
  onTrack,
  onContinueShopping,
}: CheckoutSuccessScreenProps) {
  const haptics = useHaptic();
  const insets = useSafeAreaInsets();
  const confettiRef = useRef<ConfettiHandle>(null);
  // Burst once on mount — delayed so the hero's spring has already popped.
  React.useEffect(() => {
    const id = setTimeout(() => confettiRef.current?.fire(), 350);
    return () => clearTimeout(id);
  }, []);

  return (
    <SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
      {/* Confetti field — absolute over the hero band, behind nothing it
          would obscure (pointer-events free: it never wraps a touchable). */}
      <View
        className="absolute inset-x-0 top-0 h-72"
        pointerEvents="none"
        accessibilityElementsHidden
        importantForAccessibility="no"
      >
        <Confetti ref={confettiRef} count={42} className="h-full" />
      </View>

      <ScrollView
        className="flex-1"
        showsVerticalScrollIndicator={false}
        contentContainerClassName="gap-5 px-6 pb-6 pt-10"
        contentContainerStyle={{ paddingBottom: insets.bottom + 16 }}
      >
        <Mount className="items-center gap-4">
          <SuccessBadge />
          <View className="items-center gap-1">
            <View className="flex-row items-center gap-2 pb-1">
              <LumioMark size={18} />
              <Text variant="muted" className="text-xs font-semibold uppercase tracking-widest">
                Lumio Market
              </Text>
            </View>
            <Text variant="h2" accessibilityRole="header">
              Order <Text className="italic text-[#65A30D]">confirmed</Text>
            </Text>
            <Text variant="muted" className="text-center">
              Order {orderId} · {fmt(total, currency)}
            </Text>
            <Text variant="muted" className="text-center text-xs">
              A receipt was sent to {email}
            </Text>
          </View>
        </Mount>

        {/* What's arriving — thumbnails + ETA, the tangible confirmation. */}
        <Mount delay={BLOCK_STAGGER}>
          <View className="rounded-3xl bg-white dark:bg-[#1A1A20]">
            <View className="gap-3 p-5">
              <View className="flex-row items-center gap-2">
                <Icon name="truck" size="sm" color="#65A30D" />
                <Text variant="small" className="font-semibold">
                  {eta}
                </Text>
              </View>
              <View className="flex-row items-center gap-2">
                {items.map((it, i) => (
                  <Image
                    key={`${it.name}-${i}`}
                    source={it.imageUrl ? { uri: it.imageUrl } : undefined}
                    rounded="xl"
                    aspectRatio={4 / 5}
                    className="w-12"
                    accessibilityLabel={`Photo of ${it.name}`}
                  />
                ))}
              </View>
              <Separator />
              <View className="flex-row items-center gap-2">
                <Icon name="map-pin" size="sm" color="mutedForeground" />
                <Text variant="muted" className="flex-1">
                  {deliveryAddress}
                </Text>
              </View>
            </View>
          </View>
        </Mount>
      </ScrollView>

      {/* The two exits — track first (that's why the user is still here).
          A confirmation isn't transactional, so no slab: the buttons ride
          the canvas directly. */}
      <Mount delay={BLOCK_STAGGER * 4} className="gap-3 px-6 pt-4" style={{ paddingBottom: insets.bottom + 8 }}>
        {onTrack ? (
          <Button
            tone="inverse"
            haptic="light"
            icon={<Icon name="package" size="sm" color="primaryForeground" />}
            onPress={onTrack}
            accessibilityLabel={`Track order ${orderId}`}
          >
            Track order
          </Button>
        ) : null}
        <Button
          variant={onTrack ? "secondary" : "default"}
          tone={onTrack ? undefined : "inverse"}
          onPress={() => {
            haptics.light();
            onContinueShopping?.();
          }}
          accessibilityLabel="Continue shopping"
        >
          Continue shopping
        </Button>
        {/* Send-to-friend — confirmations always offer the share exit. */}
        <Press haptic="light" accessibilityRole="button" accessibilityLabel="Share order" className="self-center">
          <Text variant="small" className="pt-2 font-semibold text-[#65A30D]">
            Share order details
          </Text>
        </Press>
      </Mount>
    </SafeAreaView>
  );
}
CheckoutSuccessScreen.displayName = "CheckoutSuccessScreen";

Recreate the "Checkout Success Screen" screen in React Native using LumioUI.

Goal: Confetti burst over a completed progress-ring check, order number and receipt line, arriving-items card with ETA and address, and track/continue CTAs Match the reference implementation's layout, behavior, and motion exactly — this is a production screen, not a mockup.

## Setup

Fastest path — install the screen plus its component deps:

```bash
npx lumioui add ecommerce-checkout-success
```

Or pull just the components: `npx lumioui add button card confetti icon image progress-ring separator text`

Native packages:
- @lumioui/ui@latest
- @lumioui/core@latest
- react-native-reanimated@*
- react-native-safe-area-context@*
- react-native-svg@*
- nativewind@*

Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.

## Components — how, where, when

### `button` — Tactile pill button with press spring, ink wash and async loading.
- `<Button>` ×2

### `card` — Compound surface — header, title, content and footer slots.
- imported but not rendered directly — likely used through a sibling or as a utility

### `confetti` — Celebration particle field — triggerable burst or continuous rain, chart palette, reduced-motion aware.
- `<Confetti>` ×1

### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×4

### `image` — Cached image with placeholder, fallback and aspect handling.
- `<Image>` ×1

### `progress-ring` — Circular progress ring with animated stroke arc, center slot and indeterminate spin.
- `<ProgressRing>` ×1

### `separator` — Hairline rule with orientation and spacing control.
- `<Separator>` ×1

### `text` — Themed type scale from caption to display.
- `<Text>` ×8

## Conventions (non-negotiable)

- Styling via NativeWind `className` with semantic tokens only: `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-secondary`, `bg-muted`, `text-muted-foreground`, `bg-accent`, `bg-destructive`, `border-border`. Hard-coded colors only inside media overlays (`text-white`, `bg-black/N`).
- Motion via the token presets from `@lumioui/core` (`spring.press`, `spring.surface`, `spring.glide`, `timing.fast`, `timing.slow`, …) — no bespoke spring configs or durations.
- Gate transform motion behind `useReducedMotion()`; keep opacity/color feedback, drop travel and overshoot.
- Haptics via `useHaptic()`: `light` on press, `selection` on toggle/select, `warning` on invalid input. Never import expo-haptics directly.
- Press feedback via `usePressAnimation()` (~0.97 scale), not `activeOpacity` tricks.
- a11y: `accessibilityRole` + `accessibilityLabel` on every control, touch targets ≥44pt.
- Entrance choreography: staggered `Mount` wrappers (delay 0/60/120…) so regions land in sequence instead of popping in at once.
- Wrap the screen in `SafeAreaView`; keep dark mode working via the semantic tokens.

## Deliverable

One file: `screens/ecommerce/checkout-success.tsx` exporting CheckoutSuccessScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.

## Reference implementation

The LumioUI source for this screen — reproduce it faithfully:

```tsx
import * as React from "react";
import { useRef } from "react";
import { View, ScrollView } from "react-native";
import Animated, { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Confetti, Icon, Image, ProgressRing, Separator, Text, type ConfettiHandle } from "@lumioui/ui";
import { spring, useHaptic, useReducedMotion } from "@lumioui/core";
import { BLOCK_STAGGER, catalogImg, LumioMark, Mount, Press } from "../shared";

export interface CheckoutSuccessScreenProps {
  orderId?: string;
  /** "Arriving Fri, Sep 18". */
  eta?: string;
  /** Receipt destination. */
  email?: string;
  items?: { name: string; imageUrl?: string }[];
  total?: number;
  currency?: string;
  deliveryAddress?: string;
  onTrack?: () => void;
  onContinueShopping?: () => void;
}

const img = (p: Parameters<typeof catalogImg>[0]) => catalogImg(p, 160, 200);

// Same parcel as orders/tracking/order-detail: HL-2094's three pieces.
const DEFAULT_ITEMS = [
  { name: "Structured Wool Overcoat", imageUrl: img("overcoat") },
  { name: "Garment-Dyed Tee", imageUrl: img("tee") },
  { name: "Heritage Graphic Tee", imageUrl: img("graphicTee") },
];

const fmt = (n: number, currency = "$") =>
  `${currency}${n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;

/** The check pops with a spring; the ring is already full so it reads as
 *  "done" rather than "loading". Reduced motion skips the pop. */
function SuccessBadge() {
  const reduce = useReducedMotion();
  const t = useSharedValue(reduce ? 1 : 0);
  React.useEffect(() => {
    if (reduce) {
      t.value = 1;
      return;
    }
    t.value = withSpring(1, spring.pop);
  }, [reduce, t]);
  const style = useAnimatedStyle(() => ({
    opacity: t.value,
    transform: [{ scale: 0.6 + t.value * 0.4 }],
  }));
  return (
    <Animated.View
      style={style}
      accessibilityRole="image"
      accessibilityLabel="Order placed successfully"
    >
      <ProgressRing value={100} size={112} strokeWidth={6} color="success">
        <Icon name="check" size="lg" color="#65A30D" />
      </ProgressRing>
    </Animated.View>
  );
}
SuccessBadge.displayName = "SuccessBadge";

/** Checkout success — confetti over a completed progress-ring check, the
 *  order number and ETA, the bought items strip, and the two exits every
 *  confirmation screen offers: track the order or keep shopping. */
export function CheckoutSuccessScreen({
  orderId = "HL-2094",
  eta = "Arriving Fri, Sep 18",
  email = "amara.chen@lumio.dev",
  items = DEFAULT_ITEMS,
  total = 628.0,
  currency = "$",
  deliveryAddress = "421 Harbor Lane, Apt 5B, San Francisco CA",
  onTrack,
  onContinueShopping,
}: CheckoutSuccessScreenProps) {
  const haptics = useHaptic();
  const insets = useSafeAreaInsets();
  const confettiRef = useRef<ConfettiHandle>(null);
  // Burst once on mount — delayed so the hero's spring has already popped.
  React.useEffect(() => {
    const id = setTimeout(() => confettiRef.current?.fire(), 350);
    return () => clearTimeout(id);
  }, []);

  return (
    <SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
      {/* Confetti field — absolute over the hero band, behind nothing it
          would obscure (pointer-events free: it never wraps a touchable). */}
      <View
        className="absolute inset-x-0 top-0 h-72"
        pointerEvents="none"
        accessibilityElementsHidden
        importantForAccessibility="no"
      >
        <Confetti ref={confettiRef} count={42} className="h-full" />
      </View>

      <ScrollView
        className="flex-1"
        showsVerticalScrollIndicator={false}
        contentContainerClassName="gap-5 px-6 pb-6 pt-10"
        contentContainerStyle={{ paddingBottom: insets.bottom + 16 }}
      >
        <Mount className="items-center gap-4">
          <SuccessBadge />
          <View className="items-center gap-1">
            <View className="flex-row items-center gap-2 pb-1">
              <LumioMark size={18} />
              <Text variant="muted" className="text-xs font-semibold uppercase tracking-widest">
                Lumio Market
              </Text>
            </View>
            <Text variant="h2" accessibilityRole="header">
              Order <Text className="italic text-[#65A30D]">confirmed</Text>
            </Text>
            <Text variant="muted" className="text-center">
              Order {orderId} · {fmt(total, currency)}
            </Text>
            <Text variant="muted" className="text-center text-xs">
              A receipt was sent to {email}
            </Text>
          </View>
        </Mount>

        {/* What's arriving — thumbnails + ETA, the tangible confirmation. */}
        <Mount delay={BLOCK_STAGGER}>
          <View className="rounded-3xl bg-white dark:bg-[#1A1A20]">
            <View className="gap-3 p-5">
              <View className="flex-row items-center gap-2">
                <Icon name="truck" size="sm" color="#65A30D" />
                <Text variant="small" className="font-semibold">
                  {eta}
                </Text>
              </View>
              <View className="flex-row items-center gap-2">
                {items.map((it, i) => (
                  <Image
                    key={`${it.name}-${i}`}
                    source={it.imageUrl ? { uri: it.imageUrl } : undefined}
                    rounded="xl"
                    aspectRatio={4 / 5}
                    className="w-12"
                    accessibilityLabel={`Photo of ${it.name}`}
                  />
                ))}
              </View>
              <Separator />
              <View className="flex-row items-center gap-2">
                <Icon name="map-pin" size="sm" color="mutedForeground" />
                <Text variant="muted" className="flex-1">
                  {deliveryAddress}
                </Text>
              </View>
            </View>
          </View>
        </Mount>
      </ScrollView>

      {/* The two exits — track first (that's why the user is still here).
          A confirmation isn't transactional, so no slab: the buttons ride
          the canvas directly. */}
      <Mount delay={BLOCK_STAGGER * 4} className="gap-3 px-6 pt-4" style={{ paddingBottom: insets.bottom + 8 }}>
        {onTrack ? (
          <Button
            tone="inverse"
            haptic="light"
            icon={<Icon name="package" size="sm" color="primaryForeground" />}
            onPress={onTrack}
            accessibilityLabel={`Track order ${orderId}`}
          >
            Track order
          </Button>
        ) : null}
        <Button
          variant={onTrack ? "secondary" : "default"}
          tone={onTrack ? undefined : "inverse"}
          onPress={() => {
            haptics.light();
            onContinueShopping?.();
          }}
          accessibilityLabel="Continue shopping"
        >
          Continue shopping
        </Button>
        {/* Send-to-friend — confirmations always offer the share exit. */}
        <Press haptic="light" accessibilityRole="button" accessibilityLabel="Share order" className="self-center">
          <Text variant="small" className="pt-2 font-semibold text-[#65A30D]">
            Share order details
          </Text>
        </Press>
      </Mount>
    </SafeAreaView>
  );
}
CheckoutSuccessScreen.displayName = "CheckoutSuccessScreen";
```

Screen: https://lumioui.dev/screens/ecommerce-checkout-success