UI Checkout Flow

1"use client";
2 
3import { BlurIn } from "@/components/remocn/blur-in";
4import { Button } from "@/components/remocn/button";
5import { Checkbox } from "@/components/remocn/checkbox";
6import { Cursor } from "@/components/remocn/cursor";
7import {
8  Field,
9  FieldControl,
10  FieldGroup,
11  FieldLabel,
12} from "@/components/remocn/field";
13import { Input } from "@/components/remocn/input";
14import { Toast } from "@/components/remocn/toast";
15import {
16  ToggleGroup,
17  type ToggleGroupItem,
18} from "@/components/remocn/toggle-group";
19import { useBlurInTransition } from "@/components/remocn/use-blur-in-transition";
20import { useButtonTransition } from "@/components/remocn/use-button-transition";
21import { useCheckboxTransition } from "@/components/remocn/use-checkbox-transition";
22import { useCursorPath } from "@/components/remocn/use-cursor-path";
23import { useInputTransition } from "@/components/remocn/use-input-transition";
24import { useToastTransition } from "@/components/remocn/use-toast-transition";
25import { useToggleGroupTransition } from "@/components/remocn/use-toggle-group-transition";
26import { type RemocnTheme, useRemocnTheme } from "@/lib/remocn-ui";
27 
28const DEFAULT_PLANS: ToggleGroupItem[] = [
29  { value: "monthly", label: "Monthly" },
30  { value: "yearly", label: "Yearly" },
31];
32 
33const STAGE_W = 1280;
34const CARD_W = 420;
35const CARD_PAD = 28;
36const CARD_TOP = 96;
37const CARD_LEFT = (STAGE_W - CARD_W) / 2;
38const CENTER_X = STAGE_W / 2;
39const CONTENT_LEFT = CARD_LEFT + CARD_PAD;
40const CONTENT_RIGHT = CARD_LEFT + CARD_W - CARD_PAD;
41 
42const TOGGLE_Y = 222;
43const YEARLY_X = CONTENT_LEFT + 4 + 88 + 44;
44const CARD_X = CENTER_X;
45const CARD_Y = 312;
46const TERMS_X = CONTENT_LEFT + 12;
47const TERMS_Y = 376;
48const PAY_X = CONTENT_RIGHT - 48;
49const PAY_Y = 442;
50 
51export interface CheckoutFlowProps {
52  title?: string;
53  description?: string;
54  plans?: ToggleGroupItem[];
55  cardLabel?: string;
56  cardPlaceholder?: string;
57  termsLabel?: string;
58  payLabel?: string;
59  toastTitle?: string;
60  theme?: Partial<RemocnTheme>;
61}
62 
63export function CheckoutFlow({
64  title = "Upgrade your plan",
65  description = "Complete your purchase to unlock every feature.",
66  plans = DEFAULT_PLANS,
67  cardLabel = "Card number",
68  cardPlaceholder = "4242 4242 4242 4242",
69  termsLabel = "I accept the terms and conditions",
70  payLabel = "Pay $49",
71  toastTitle = "Payment successful",
72  theme,
73}: CheckoutFlowProps) {
74  const resolved = useRemocnTheme(theme);
75  const opts = { theme };
76 
77// … truncated