Morphing Checkout Flow

1"use client";
2 
3import { useEffect, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
4import { MotionConfig, motion, useReducedMotion } from "motion/react";
5 
6// Morphing checkout flow - a three-step card payment (card → billing → confirm)
7// where ONE container appears to animate `height: auto` between steps.
8//
9// The body's height is always an explicit px measured off the active panel
10// (useLayoutEffect + ResizeObserver); motion eases it. Everything else is
11// transform/opacity: the outgoing step exits softly while the incoming one's
12// fields cascade in, direction-aware. The other hard constraints:
13//
14//   · CARET-PRESERVING MASK. The number re-formats every keystroke (4-4-4-4, or
15//     4-6-5 for an Amex); the caret is put back by counting the DIGITS before it
16//     (the only characters the user owns), so it never jumps.
17//   · LUHN. The checksum validated live - a full number that fails shakes; one
18//     that passes gets a quiet green check.
19//   · 3D FLIP. Two stacked faces under perspective/preserve-3d/backface-hidden;
20//     focusing the CVC rotates the card 180° (Amex prints its code on the FRONT,
21//     so an Amex never flips - the detection is real).
22//   · PAY MORPH. Paying FLIPs the button's width to a circle (measured px → rem,
23//     imperative) while label → spinner → drawn check cross-fade. A decline
24//     lands a red drawn ✕ with one shake, then eases back for another try.
25//
26// Pass `onPay` to run the real charge. Animation via motion/react; honours
27// prefers-reduced-motion. Plain Tailwind only - no theme tokens or custom
28// classes required.
29 
30const EASE = [0.22, 1, 0.36, 1] as const;
31const EASE_ICON = [0.2, 0, 0, 1] as const;
32const STEP_NAMES = ["card", "billing", "confirm", "paid"];
33 
34const BRANDS: Record<string, { label: string; length: number; cvc: number; cvcName: string; groups: number[] }> = {
35  visa: { label: "Visa", length: 16, cvc: 3, cvcName: "CVC", groups: [4, 4, 4, 4] },
36  mastercard: { label: "Mastercard", length: 16, cvc: 3, cvcName: "CVC", groups: [4, 4, 4, 4] },
37  amex: { label: "Amex", length: 15, cvc: 4, cvcName: "CID", groups: [4, 6, 5] },
38  unknown: { label: "Card", length: 16, cvc: 3, cvcName: "CVC", groups: [4, 4, 4, 4] },
39};
40 
41export interface CheckoutState {
42  step: string;
43  brand: string;
44  number: string;
45  side: string;
46  status: string;
47  height: number | null;
48}
49 
50// … truncated