62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T731e,'use client' import * as React from 'react' import { Activity, CheckCheck, CheckCircle2, Clock, CreditCard, DollarSign, Pause, Play, ShieldCheck, ShoppingCart, TrendingUp, Trophy, Truck, Users, Zap, } from 'lucide-react' import { cn } from '@/lib/utils' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' export interface AbTestVariantResultsProps { title?: string experimentId?: string duration?: string className?: string } const primaryMetrics = [ { id: 'conversion-lift', label: 'Overall Conversion Lift', value: '+24.8%', unit: 'relative', badge: '+1.27% Absolute', badgeVariant: 'success' as const, badgeIcon: TrendingUp, description: 'Challenger (6.41%) vs Baseline Control (5.14%)', highlight: true, }, { id: 'sample-size', label: 'Total Sample Size', value: '48,290', unit: 'unique visitors', badge: '50 / 50 Split', badgeVariant: 'secondary' as const, badgeIcon: Users, description: '24,145 unique visitors per variant group', highlight: false, }, { id: 'statistical-confidence', label: 'Statistical Confidence', value: '99.2%', unit: 'confidence', badge: 'p = 0.008', badgeVariant: 'outline' as const, badgeIcon: Activity, description: 'Exceeds 95.0% significance threshold (α = 0.05)', highlight: false, }, { id: 'revenue-impact', label: 'Est. Annual Revenue Impact', value: '+$142,000', unit: 'ARR', badge: '+$1.08 / visitor', badgeVariant: 'success' as const, badgeIcon: DollarSign, description: 'Based on 131,500 annual checkouts ($5.28 vs $4.20 RPV)', highlight: true, }, ] const variants = [ { id: 'variant-a', code: 'Variant A', type: 'Control', title: 'Multi-Step Wizard', description: '3-step segmented checkout flow with separate shipping, billing, and review steps.', split: '50%', visitors: '24,145', conversions: '1,240', conversionLabel: '1,240 checkouts', conversionRate: '5.14%', rateBadge: 'Baseline', rateBadgeVariant: 'secondary' as const, revenuePerVisitor: '$4.20', totalRevenue: '$101,409.00', verdict: 'Baseline Control Group', verdictVariant: 'outline' as const, isWinner: false, }, { id: 'variant-b', code: 'Variant B', type: 'Challenger', title: 'Single-Page with Accordion', description: 'Unified single-page layout with collapsible accordion sections and sticky order summary.', split: '50%', visitors: '24,145', conversions: '1,548', conversionLabel: '1,548 checkouts (+308)', conversionRate: '6.41%', rateBadge: '+24.8% relative lift', rateBadgeVariant: 'success' as const, revenuePerVisitor: '$5.28', revenueDelta: '+$1.08 / visitor', totalRevenue: '$127,485.60', verdict: 'Winner · 99.2% probability to beat control', verdictVariant: 'success' as const, isWinner: true, }, ] const funnelSteps = [ { id: 'step-1', stepNumber: '01', name: 'Cart Review', description: 'Initial checkout landing and cart items validation', icon: ShoppingCart, control: { count: '24,145', rate: '100.0%', progress: 100, retention: '100% of traffic', }, challenger: { count: '24,145', rate: '100.0%', progress: 100, retention: '100% of traffic', }, delta: '0.0%', isPositive: null, insight: 'Uniform 50/50 randomized traffic partition without sample ratio bias.', }, { id: 'step-2', stepNumber: '02', name: 'Shipping Address', description: 'Delivery destination selection & shipping method', icon: Truck, control: { count: '18,350', rate: '76.0%', progress: 76, retention: '76.0% retained', }, challenger: { count: '20,523', rate: '85.0%', progress: 85, retention: '85.0% retained', }, delta: '+11.8% stage lift', isPositive: true, insight: 'Auto-fill and inline address validation lowered initial drop-off by 9.0 percentage points.', }, { id: 'step-3', stepNumber: '03', name: 'Payment Details', description: 'Credit card input, digital wallet, or invoice terms', icon: CreditCard, control: { count: '8,450', rate: '35.0%', progress: 35, retention: '46.0% retained', }, challenger: { count: '11,831', rate: '49.0%', progress: 49, retention: '57.6% retained', }, delta: '+40.0% stage lift', isPositive: true, insight: 'Accordion structure preserved visible cart totals, reducing payment abandonment substantially.', }, { id: 'step-4', stepNumber: '04', name: 'Checkout Completed', description: 'Payment authorized & order confirmation rendered', icon: CheckCheck, control: { count: '1,240', rate: '5.14%', progress: 5.14, retention: '14.7% of payment step', }, challenger: { count: '1,548', rate: '6.41%', progress: 6.41, retention: '13.1% of payment step', }, delta: '+24.8% final lift', isPositive: true, insight: 'Yielded 308 net incremental checkouts with statistical significance (p = 0.008).', }, ] const guardrails = [ { id: 'srm', title: 'Sample Ratio Mismatch (SRM)', status: 'Passed', badgeVariant: 'success' as const, value: 'p = 0.982', description: 'Chi-square goodness of fit verifies balanced 50.0% / 50.0% traffic delivery.', icon: ShieldCheck, }, { id: 'mde', title: 'Minimum Detectable Effect', status: 'Achieved', badgeVariant: 'success' as const, value: 'Observed +24.8% vs MDE 5.0%', description: 'Statistical power exceeds 99% for primary conversion rate metric.', icon: Zap, }, { id: 'perf', title: 'Performance Guardrail', status: 'Healthy', badgeVariant: 'secondary' as const, value: '1.1s vs 1.3s LCP', description: 'Single-page architecture improved largest contentful paint by 180ms.', icon: Clock, }, ] export function AbTestVariantResults({ title = 'Checkout Flow: Multi-Step vs Single-Page', experimentId = 'EXP-1082', duration = 'Running for 14 days · 48,290 visitors', className, }: AbTestVariantResultsProps) { const [isPaused, setIsPaused] = React.useState(false) const [isWinnerDeclared, setIsWinnerDeclared] = React.useState(false) const handleDeclareWinner = () => { setIsWinnerDeclared(true) setIsPaused(true) } const togglePause = () => { setIsPaused((prev) => !prev) } return (

{/* Winner Rollout Banner (if declared) */} {isWinnerDeclared && (

Variant B (Single-Page Accordion) Declared Winner

100% traffic rollout initiated. Estimated annual revenue increase of +$142,000 ARR in effect.

100% Traffic Live

)} {/* Header Section */}

{title}

{experimentId} {isPaused && ( )}

{duration} · Primary Goal: Completed Checkout Rate

{/* Action Buttons */}

{/* 4 Primary Experiment Metrics Cards */}

{primaryMetrics.map((metric) => { const BadgeIcon = metric.badgeIcon return (

{metric.label}

{metric.value} {metric.unit && {metric.unit}}

{metric.description}

) })}

{/* Variants Comparison Table Card */}

Variants Comparison & Statistical Significance Statsig / Optimizely Model

Frequentist two-tailed Z-test with continuous monitoring and sample ratio correction.

Significance Alpha: α = 0.05

Variant & Layout Traffic Split Conversions Conversion Rate Revenue / Visitor Statistical Verdict {variants.map((variant) => ( {/* Variant Name & Description */}

{variant.code === 'Variant A' ? 'A' : 'B'}

{variant.code} {variant.type}

{variant.title}

{variant.description}

{/* Traffic Split */}

{variant.split} allocation

{variant.visitors} visitors

{/* Conversions */}

{variant.conversions}

completed checkouts

{/* Conversion Rate */}

{variant.conversionRate} {variant.isWinner &&

{/* Revenue per Visitor */}

{variant.revenuePerVisitor} {variant.revenueDelta ? (

{variant.revenueDelta}

) : (

{variant.totalRevenue}

)}

{/* Statistical Verdict */}

{variant.isWinner ? (

))}

{/* Conversion Funnel Step Drop-off Comparison Card */}

Conversion Funnel Step Drop-off Comparison 4-Stage Funnel

Direct comparison of drop-off, progression, and conversion retention between Control and Challenger at each step.

{/* Legend */}

Variant A (Control)

Variant B (Challenger)

{funnelSteps.map((step) => { const StepIcon = step.icon return (

{/* Step Meta */}

STEP {step.stepNumber} {step.name}

{step.description}

{/* Comparative Bars */}

{/* Variant A (Control) Bar */}

Control: {step.control.count} visitors {step.control.rate}

{/* Variant B (Challenger) Bar */}

Challenger: {step.challenger.count} visitors {step.challenger.rate}

{/* Step Lift Badge & Insight */}

{step.isPositive && {step.challenger.retention}

{/* Bottom micro insight */}

Stage Note: {step.insight}

) })}

{/* Guardrails & Quality Verification Footer */}

Statistical Guardrails & Health Checks Integrity Verified

Automatic telemetry assertions verifying sample validity, statistical power, and site performance.

{guardrails.map((guard) => { const GuardIcon = guard.icon return (

{guard.status}

{guard.title}

{guard.value}

{guard.description}

) })}

) } export default AbTestVariantResults 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/badge.json","https://uipkge.dev/r/react/button.json","https://uipkge.dev/r/react/card.json","https://uipkge.dev/r/react/table.json"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"packages/registry-react/blocks/ab-test-variant-results/AbTestVariantResults.tsx","content":"$64","type":"registry:block","target":"~/components/blocks/AbTestVariantResults.tsx"}],"className":"h-[70svh] min-h-80"}]]}]