@appinternalleads/ui 0.2.0

package/src/components/onboarding/plan-selection/PlanSelectionView.tsx

@@ -0,0 +1,185 @@
+import { useEffect } from 'react';
+import { Box, Icon, MotionView, Pressable, Text, useTween } from '../../../core';
+import { Callout, useRovingSelect } from '../../../ds';
+import { blockRadii, segmentLift, useDs, type DensityName } from '../../../tokens';
+import { resolveConfig, type OnboardingPreset, type OnboardingResult, type PatternStatus } from '../shared/contract';
+import type { OnboardingOperation } from '../shared/mock';
+import { InvalidConfig } from '../shared/InvalidConfig';
+import { OnboardingCard } from '../shared/OnboardingCard';
+import { CrossFadeText, PlainChip } from '../shared/parts';
+import { runOutcome, useDefaultOperation, usePatternStatus, useSceneReport, useSeededReducer } from '../shared/runtime';
+import { useOperationRunner } from '../../../runtime/operations';
+import { PLAN_PRESETS, validatePlanSelection, type Plan, type PlanSelectionSettings } from './contract';
+import { initialPlan, planView, priceOf, reducePlan, type Period, type PlanAction, type PlanSeed, type PlanState } from './engine';
+import { guarded } from '../shared/guard';
+
+export type PlanSelectionOperations = { confirm: OnboardingOperation<{ plan: string; period: Period }> };
+
+export type PlanSelectionProps = {
+  preset?: OnboardingPreset;
+  config?: Partial<PlanSelectionSettings>;
+  density?: DensityName;
+  status?: PatternStatus;
+  result?: OnboardingResult;
+  operations?: PlanSelectionOperations;
+  reload?: OnboardingOperation<void>;
+  initial?: PlanSeed;
+  onChange?: (choice: { plan: string; period: Period }) => void;
+  onConfirm?: (choice: { plan: string; period: Period }) => void;
+  onScene?: (scene: string) => void;
+  testID?: string;
+};
+
+/**
+ * **Plan Selection** — an optional billing toggle (a radiogroup of two segments), then one radio
+ * card per plan (C4): a radio, the name with a plain "Popular" / "Current" chip, the price
+ * (cross-fading on a period change, M5) and 2–3 bullets. The selected card has the coral ring
+ * (M7); the current plan is dimmed, disabled and skipped by the arrow keys.
+ */
+function PlanSelectionView(props: PlanSelectionProps) {
+  const config = resolveConfig(PLAN_PRESETS, props.preset, props.config);
+  const issues = validatePlanSelection(config);
+  if (issues.length) return <InvalidConfig title={config.title} issues={issues} testID={props.testID} />;
+  return <Valid {...props} config={config} />;
+}
+
+function Valid({
+  config, density, status, result, operations, reload, initial, onChange, onConfirm, onScene, testID,
+}: Omit<PlanSelectionProps, 'config'> & { config: PlanSelectionSettings }) {
+  const { colors } = useDs();
+  const runner = useOperationRunner();
+  const key = JSON.stringify([config, initial ?? null]);
+  const [state, send, ref] = useSeededReducer(
+    (s: PlanState, a: PlanAction) => reducePlan(config, s, a),
+    () => initialPlan(config, initial),
+    key,
+    () => runner.cancel('confirm'),
+  );
+  const pattern = usePatternStatus(status ?? (config.plans.length ? 'ready' : 'empty'), reload);
+  const v = planView(config, state);
+  useSceneReport(pattern.status === 'ready' ? v.scene : pattern.status, onScene);
+  const confirm = useDefaultOperation(operations?.confirm, 1200, () => result === 'error');
+  const run = () => {
+    const choice = { plan: ref.current.plan, period: ref.current.period };
+    runOutcome(runner, 'confirm', confirm, choice, { ok: () => { send({ type: 'confirmed' }); onConfirm?.(choice); }, fail: () => send({ type: 'failed' }) });
+  };
+  useEffect(() => { if (ref.current.run === 'confirming') run(); }, [key]);
+  useEffect(() => { onChange?.({ plan: state.plan, period: state.period }); }, [state.plan, state.period]);
+  const locked = state.run === 'confirming';
+  const plans = useRovingSelect(v.selectable, state.plan, id => send({ type: 'pick', plan: id }), locked);
+  const periods = useRovingSelect<Period>(['monthly', 'yearly'], state.period, p => send({ type: 'period', period: p }), locked);
+
+  return (
+    <OnboardingCard
+      testID={testID}
+      header={config}
+      copy={config}
+      density={density}
+      status={pattern.status}
+      onRetry={pattern.retry}
+      onEmptyAction={pattern.retry}
+      chip={v.chip}
+      hint={v.footerHint}
+      primary={{ label: v.primaryLabel, onPress: () => { if (!v.canConfirm) return; send({ type: 'confirm' }); run(); }, disabled: !v.canConfirm, busy: locked }}>
+      <Box gap="s3">
+        {config.billingToggle ? (
+          <Box role="radiogroup" aria-label="Billing period" row alignSelf="flex-start" p="s1" gap="s1" style={{ borderRadius: blockRadii.inset, backgroundColor: colors.surfaceSunken }}>
+            {([['monthly', 'Monthly'], ['yearly', config.yearlyLabel]] as const).map(([p, label], i) => {
+              const on = state.period === p;
+              return (
+                <Pressable
+                  key={p}
+                  ref={periods.ref(i)}
+                  role="radio"
+                  aria-checked={on}
+                  aria-label={label}
+                  tabIndex={periods.tabIndex(i)}
+                  onKeyDown={periods.onKeyDown(i)}
+                  disabled={locked}
+                  onPress={() => send({ type: 'period', period: p })}
+                  height={28}
+                  px="s3"
+                  style={{ borderRadius: blockRadii.tile, backgroundColor: on ? colors.surface1 : 'transparent', boxShadow: on ? segmentLift : 'none' }}>
+                  <Text variant="caption" style={{ fontSize: 12, fontWeight: '600', color: on ? colors.textPrimary : colors.textSecondary }}>{label}</Text>
+                </Pressable>
+              );
+            })}
+          </Box>
+        ) : null}
+        <Box role="radiogroup" aria-label="Plan" gap="s2">
+          {config.plans.map(p => {
+            const i = v.selectable.indexOf(p.id);
+            return (
+              <PlanCard
+                key={p.id}
+                plan={p}
+                on={p.id === state.plan}
+                price={priceOf(config, p.price, state.period)}
+                period={v.periodLabel}
+                disabled={Boolean(p.current) || locked}
+                pressRef={i >= 0 ? plans.ref(i) : undefined}
+                tabIndex={i >= 0 ? plans.tabIndex(i) : -1}
+                onKeyDown={i >= 0 ? plans.onKeyDown(i) : undefined}
+                onPress={() => send({ type: 'pick', plan: p.id })}
+              />
+            );
+          })}
+        </Box>
+        {state.run === 'failed' ? <Callout alert title={config.failTitle}>{config.failBody}</Callout> : null}
+      </Box>
+    </OnboardingCard>
+  );
+}
+
+function PlanCard({ plan, on, price, period, disabled, pressRef, tabIndex, onKeyDown, onPress }: {
+  plan: Plan; on: boolean; price: string; period: string; disabled: boolean;
+  pressRef?: (el: never) => void; tabIndex: 0 | -1; onKeyDown?: (e: { key: string; preventDefault: () => void }) => void; onPress: () => void;
+}) {
+  const { colors, density } = useDs();
+  const t = useTween(on ? 1 : 0);
+  return (
+    <Pressable
+      ref={pressRef as never}
+      role="radio"
+      aria-checked={on}
+      aria-label={`${plan.name}${plan.current ? ' (current plan)' : ''}, ${price} ${period}`}
+      tabIndex={tabIndex}
+      onKeyDown={onKeyDown}
+      disabled={disabled}
+      onPress={onPress}
+      row
+      align="flex-start"
+      justify="flex-start"
+      gap="s3"
+      style={{
+        paddingHorizontal: density.padX, paddingVertical: density.padY, borderRadius: blockRadii.mid,
+        borderWidth: 1, borderColor: colors.hairlineStrong, backgroundColor: colors.surface1, opacity: plan.current ? 0.6 : 1,
+      }}>
+      <Box width={18} height={18} radius="pill" align="center" justify="center" style={{ marginTop: 1, borderWidth: 1.5, borderColor: plan.current ? colors.hairlineStrong : on ? colors.accentInk : colors.textSecondary }}>
+        <MotionView style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: colors.accentInk, opacity: t, transform: [{ scale: t.interpolate({ inputRange: [0, 1], outputRange: [0.6, 1] }) }] }} />
+      </Box>
+      <Box flex={1} gap="s1" style={{ minWidth: 0 }}>
+        <Box row wrap align="center" justify="space-between" gap="s2">
+          <Box row align="center" gap="s2">
+            <Text style={{ fontSize: 14, fontWeight: '600', color: colors.textPrimary }}>{plan.name}</Text>
+            {plan.current ? <PlainChip>Current</PlainChip> : plan.popular ? <PlainChip>Popular</PlainChip> : null}
+          </Box>
+          <Box row align="flex-end" gap="s1">
+            <CrossFadeText value={price} style={{ fontSize: 16, fontWeight: '600', color: colors.textPrimary }} />
+            <Text variant="caption" color="textSecondary" style={{ fontSize: 12, paddingBottom: 1 }}>{period}</Text>
+          </Box>
+        </Box>
+        {plan.bullets.map(b => (
+          <Box key={b} row align="center" gap="s2">
+            <Icon name="tick" size={13} color={colors.textSecondary} />
+            <Text variant="caption" color="textSecondary" style={{ fontSize: 12 }}>{b}</Text>
+          </Box>
+        ))}
+      </Box>
+      <MotionView pointerEvents="none" style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, borderRadius: blockRadii.mid, borderWidth: 2, borderColor: colors.accentFill, opacity: t }} />
+    </Pressable>
+  );
+}
+
+/** PlanSelection, guarded: a wrong-kind config is refused by name and a render error is caught, never thrown to the page (`shared/guard`). */
+export const PlanSelection = guarded(PlanSelectionView, PLAN_PRESETS, 'PlanSelection');

package/src/components/onboarding/plan-selection/contract.ts

@@ -0,0 +1,48 @@
+import type { HeaderConfig, LoadCopy, OnboardingIssue, PresetsFile } from '../shared/contract';
+import presetsJson from './presets.json';
+
+/**
+ * **Plan Selection (batch 2 §3.7)** — choose a subscription tier. "Popular" and "Current" are plain
+ * chips, never coral; the current plan is shown but cannot be chosen; the primary follows the
+ * selection. The monthly / yearly toggle was approved (decision §5.3) and is off with
+ * `billingToggle: false`.
+ */
+
+export type Plan = { id: string; name: string; price: number; bullets: string[]; popular?: boolean; current?: boolean };
+
+export const PLAN_SCENES = ['default', 'other', 'yearly', 'confirming', 'confirmed', 'failed', 'loading', 'empty', 'error'] as const;
+export type PlanScene = (typeof PLAN_SCENES)[number];
+/** Scenes that are an operation in flight — see `sceneProps`. */
+export const PLAN_IN_FLIGHT: readonly string[] = ['confirming'];
+
+export type PlanSelectionSettings = HeaderConfig & LoadCopy & {
+  plans: Plan[];
+  defaultPlan: string;
+  currency: string;
+  periodMonthly: string;
+  periodYearly?: string;
+  billingToggle: boolean;
+  /** Yearly is priced at this many months. */
+  yearlyMonths: number;
+  yearlyLabel: string;
+  /** "Continue with" → "Continue with Team". */
+  primaryPrefix: string;
+  confirmedLabel: string;
+  confirmedHint: string;
+  monthlyHint: string;
+  yearlyHint: string;
+  failTitle: string;
+  failBody: string;
+};
+
+export const PLAN_PRESETS = presetsJson as unknown as PresetsFile<PlanSelectionSettings>;
+
+export function validatePlanSelection(c: PlanSelectionSettings): OnboardingIssue[] {
+  if (!Array.isArray(c.plans)) return [{ path: 'plans', message: 'plans must be a list.' }];
+  const issues: OnboardingIssue[] = [];
+  const plan = c.plans.find(p => p.id === c.defaultPlan);
+  if (c.plans.length && !plan) issues.push({ path: 'defaultPlan', message: `“${c.defaultPlan}” is not a plan.` });
+  if (plan?.current) issues.push({ path: 'defaultPlan', message: 'The default plan cannot be the current one.' });
+  if (c.billingToggle && !c.periodYearly) issues.push({ path: 'periodYearly', message: 'A billing toggle needs a yearly period label.' });
+  return issues;
+}

package/src/components/onboarding/plan-selection/engine.ts

@@ -0,0 +1,66 @@
+import type { StateChipTone } from '../../../ds';
+import type { Plan, PlanScene, PlanSelectionSettings } from './contract';
+
+/** What an empty `plans` list reads as — the empty scene shows, and nothing reads a plan that is not there. */
+const NO_PLAN: Plan = { id: '', name: '', price: 0, bullets: [] };
+
+/** **The Plan Selection engine** — pure: the chosen plan, the billing period, the confirm. */
+
+export type Period = 'monthly' | 'yearly';
+export type PlanRun = 'idle' | 'confirming' | 'confirmed' | 'failed';
+export type PlanState = { plan: string; period: Period; run: PlanRun };
+export type PlanSeed = Partial<PlanState>;
+
+export type PlanAction =
+  | { type: 'pick'; plan: string }
+  | { type: 'period'; period: Period }
+  | { type: 'confirm' }
+  | { type: 'confirmed' }
+  | { type: 'failed' };
+
+export function initialPlan(c: PlanSelectionSettings, seed: PlanSeed = {}): PlanState {
+  return { plan: seed.plan ?? c.defaultPlan, period: seed.period ?? 'monthly', run: seed.run ?? 'idle' };
+}
+
+export function planSeed(c: PlanSelectionSettings, scene: PlanScene): PlanSeed {
+  if (scene === 'other') {
+    const other = c.plans.find(p => !p.current && p.id !== c.defaultPlan);
+    return other ? { plan: other.id } : {};
+  }
+  if (scene === 'yearly') return { period: 'yearly' };
+  if (scene === 'confirming' || scene === 'confirmed' || scene === 'failed') return { run: scene };
+  return {};
+}
+
+export function reducePlan(c: PlanSelectionSettings, s: PlanState, a: PlanAction): PlanState {
+  switch (a.type) {
+    case 'pick': return s.run === 'confirming' || c.plans.find(p => p.id === a.plan)?.current ? s : { ...s, plan: a.plan, run: 'idle' };
+    case 'period': return s.run === 'confirming' ? s : { ...s, period: a.period, run: s.run === 'confirmed' ? 'idle' : s.run };
+    case 'confirm': return s.run === 'confirming' || s.run === 'confirmed' ? s : { ...s, run: 'confirming' };
+    case 'confirmed': return s.run === 'confirming' ? { ...s, run: 'confirmed' } : s;
+    case 'failed': return s.run === 'confirming' ? { ...s, run: 'failed' } : s;
+  }
+}
+
+/** "$12", "$120", "$0.4", "$1.99" — at most two decimals, grouped. */
+export function priceOf(c: PlanSelectionSettings, price: number, period: Period): string {
+  const v = period === 'yearly' ? price * (c.yearlyMonths || 10) : price;
+  return `${c.currency ?? ''}${(Math.round(v * 100) / 100).toLocaleString('en-US')}`;
+}
+
+export function planView(c: PlanSelectionSettings, s: PlanState) {
+  const cur = c.plans.find(p => p.id === s.plan) ?? c.plans[0] ?? NO_PLAN;
+  const chip: { tone: StateChipTone; label: string } = s.run === 'confirming' ? { tone: 'neutral', label: 'Updating…' }
+    : s.run === 'confirmed' ? { tone: 'success', label: `${cur.name} selected` }
+    : { tone: 'neutral', label: s.period === 'yearly' ? 'Billed yearly' : 'Billed monthly' };
+  return {
+    current: cur,
+    scene: (s.run !== 'idle' ? s.run : s.period === 'yearly' ? 'yearly' : s.plan === c.defaultPlan ? 'default' : 'other') as PlanScene,
+    chip,
+    periodLabel: s.period === 'yearly' ? c.periodYearly ?? c.periodMonthly : c.periodMonthly,
+    footerHint: s.run === 'confirmed' ? c.confirmedHint : s.period === 'yearly' ? c.yearlyHint : c.monthlyHint,
+    primaryLabel: s.run === 'confirming' ? 'Updating…' : s.run === 'confirmed' ? c.confirmedLabel : s.run === 'failed' ? c.retryLabel : `${c.primaryPrefix} ${cur.name}`,
+    canConfirm: s.run !== 'confirming' && s.run !== 'confirmed' && !cur.current,
+    selectable: c.plans.filter(p => !p.current).map(p => p.id),
+  };
+}

package/src/components/onboarding/plan-selection/index.ts

@@ -0,0 +1,9 @@
+export {
+  PLAN_IN_FLIGHT, PLAN_PRESETS, PLAN_SCENES, validatePlanSelection,
+  type Plan, type PlanScene, type PlanSelectionSettings,
+} from './contract';
+export {
+  initialPlan, planSeed, planView, priceOf, reducePlan,
+  type Period, type PlanAction, type PlanRun, type PlanSeed, type PlanState,
+} from './engine';
+export { PlanSelection, type PlanSelectionOperations, type PlanSelectionProps } from './PlanSelectionView';

package/src/components/onboarding/plan-selection/presets.json

@@ -0,0 +1,257 @@
+{
+  "component": "plan-selection",
+  "baseCopy": {
+    "loadErrorTitle": "Couldn’t load this step",
+    "loadErrorBody": "Nothing was lost. Retry to load it again.",
+    "retryLabel": "Retry",
+    "emptyCta": "Refresh"
+  },
+  "base": {
+    "type": "action",
+    "icon": "card",
+    "title": "Choose a plan",
+    "subtitle": "Change or cancel any time.",
+    "currency": "$",
+    "billingToggle": true,
+    "yearlyMonths": 10,
+    "yearlyLabel": "Yearly · 2 months free",
+    "periodMonthly": "/ user / month",
+    "periodYearly": "/ user / year",
+    "defaultPlan": "team",
+    "plans": [
+      {
+        "id": "free",
+        "name": "Free",
+        "price": 0,
+        "bullets": [
+          "Up to 3 members",
+          "1 GB storage"
+        ]
+      },
+      {
+        "id": "team",
+        "name": "Team",
+        "price": 12,
+        "bullets": [
+          "Unlimited members",
+          "Shared projects",
+          "Priority support"
+        ],
+        "popular": true
+      },
+      {
+        "id": "business",
+        "name": "Business",
+        "price": 24,
+        "bullets": [
+          "SSO and audit log",
+          "Advanced permissions",
+          "Dedicated manager"
+        ]
+      }
+    ],
+    "primaryPrefix": "Continue with",
+    "confirmedLabel": "Plan selected",
+    "confirmedHint": "You can change plans in Billing",
+    "monthlyHint": "Prices exclude tax",
+    "yearlyHint": "Billed once a year · prices exclude tax",
+    "failTitle": "Couldn’t change your plan",
+    "failBody": "Your card wasn’t charged. Check your payment details, then retry.",
+    "emptyTitle": "No plans available",
+    "emptyBody": "Plans can’t be shown in your region yet.",
+    "emptyCta": "Refresh"
+  },
+  "cases": {
+    "case1": {},
+    "case2": {
+      "type": "data",
+      "icon": "code",
+      "title": "Choose an API tier",
+      "subtitle": "Priced per million requests.",
+      "billingToggle": false,
+      "periodMonthly": "/ 1M requests",
+      "defaultPlan": "pro",
+      "plans": [
+        {
+          "id": "hobby",
+          "name": "Hobby",
+          "price": 0.5,
+          "bullets": [
+            "100 requests per second",
+            "Community support"
+          ]
+        },
+        {
+          "id": "pro",
+          "name": "Pro",
+          "price": 0.4,
+          "bullets": [
+            "1,000 requests per second",
+            "Usage alerts",
+            "Email support"
+          ],
+          "popular": true
+        },
+        {
+          "id": "scale",
+          "name": "Scale",
+          "price": 0.3,
+          "bullets": [
+            "10,000 requests per second",
+            "99.99% SLA",
+            "Named engineer"
+          ]
+        }
+      ],
+      "monthlyHint": "Billed monthly for what you use"
+    },
+    "case3": {
+      "type": "schedule",
+      "icon": "building",
+      "title": "Choose a clinic plan",
+      "subtitle": "Priced per practitioner.",
+      "periodMonthly": "/ practitioner / month",
+      "periodYearly": "/ practitioner / year",
+      "defaultPlan": "practice",
+      "plans": [
+        {
+          "id": "solo",
+          "name": "Solo",
+          "price": 39,
+          "bullets": [
+            "1 practitioner",
+            "Online booking"
+          ]
+        },
+        {
+          "id": "practice",
+          "name": "Practice",
+          "price": 29,
+          "bullets": [
+            "2–10 practitioners",
+            "SMS reminders",
+            "Shared calendar"
+          ],
+          "popular": true
+        },
+        {
+          "id": "group",
+          "name": "Group",
+          "price": 22,
+          "bullets": [
+            "11+ practitioners",
+            "Multiple locations",
+            "Reporting"
+          ]
+        }
+      ]
+    },
+    "case4": {
+      "type": "file",
+      "icon": "hardDrive",
+      "title": "Get more storage",
+      "subtitle": "Shared with up to five people.",
+      "periodMonthly": "/ month",
+      "periodYearly": "/ year",
+      "defaultPlan": "2tb",
+      "plans": [
+        {
+          "id": "100gb",
+          "name": "100 GB",
+          "price": 1.99,
+          "bullets": [
+            "Photos and files",
+            "Share with 5 people"
+          ]
+        },
+        {
+          "id": "2tb",
+          "name": "2 TB",
+          "price": 9.99,
+          "bullets": [
+            "Everything in 100 GB",
+            "Offline access"
+          ],
+          "popular": true
+        },
+        {
+          "id": "10tb",
+          "name": "10 TB",
+          "price": 49.99,
+          "bullets": [
+            "Everything in 2 TB",
+            "Priority support"
+          ]
+        }
+      ]
+    },
+    "case5": {
+      "type": "agent",
+      "icon": "sparkle",
+      "title": "Choose an assistant plan",
+      "subtitle": "You’re on Plus today.",
+      "periodMonthly": "/ month",
+      "periodYearly": "/ year",
+      "defaultPlan": "max",
+      "plans": [
+        {
+          "id": "basic",
+          "name": "Basic",
+          "price": 0,
+          "bullets": [
+            "50 requests a day",
+            "Email and calendar"
+          ]
+        },
+        {
+          "id": "plus",
+          "name": "Plus",
+          "price": 20,
+          "bullets": [
+            "Unlimited requests",
+            "Files and drive"
+          ],
+          "current": true
+        },
+        {
+          "id": "max",
+          "name": "Max",
+          "price": 60,
+          "bullets": [
+            "Everything in Plus",
+            "Scheduled tasks",
+            "Early features"
+          ]
+        }
+      ],
+      "primaryPrefix": "Upgrade to"
+    }
+  },
+  "meta": {
+    "case1": {
+      "eyebrow": "Case study 1 · SaaS",
+      "title": "Workspace plans",
+      "scenario": "A workspace admin picks a plan after the trial. Team is marked Popular."
+    },
+    "case2": {
+      "eyebrow": "Case study 2 · Platform",
+      "title": "API tiers",
+      "scenario": "A developer picks a usage tier. Prices are per million requests, so there’s no billing toggle."
+    },
+    "case3": {
+      "eyebrow": "Case study 3 · Healthcare ops",
+      "title": "Clinic software",
+      "scenario": "A practice owner picks a plan priced per practitioner."
+    },
+    "case4": {
+      "eyebrow": "Case study 4 · Consumer",
+      "title": "Storage",
+      "scenario": "A consumer upgrades their storage."
+    },
+    "case5": {
+      "eyebrow": "Case study 5 · AI agent",
+      "title": "Assistant plans",
+      "scenario": "A Plus subscriber considers upgrading. Their current plan is shown but can’t be selected."
+    }
+  }
+}