Billing Payment Form

1"use client";
2 
3import { CreditCard, Loader2, Lock, Shield } from "lucide-react";
4import { useState } from "react";
5import { cn } from "@/lib/utils";
6import { Button } from "@/registry/new-york/ui/button";
7import {
8  Card,
9  CardContent,
10  CardDescription,
11  CardHeader,
12  CardTitle,
13} from "@/registry/new-york/ui/card";
14import { Checkbox } from "@/registry/new-york/ui/checkbox";
15import {
16  Field,
17  FieldContent,
18  FieldError,
19  FieldLabel,
20} from "@/registry/new-york/ui/field";
21import {
22  InputGroup,
23  InputGroupAddon,
24  InputGroupInput,
25} from "@/registry/new-york/ui/input-group";
26import { Separator } from "@/registry/new-york/ui/separator";
27 
28export interface PaymentFormData {
29  cardNumber: string;
30  expiryMonth: string;
31  expiryYear: string;
32  cvv: string;
33  holderName: string;
34  billingAddress?: {
35    line1: string;
36    line2?: string;
37    city: string;
38    state: string;
39    zip: string;
40    country: string;
41  };
42  saveForFuture?: boolean;
43  setAsDefault?: boolean;
44}
45 
46export interface BillingPaymentFormProps {
47  onSubmit?: (data: PaymentFormData) => void;
48  onCancel?: () => void;
49  defaultValues?: Partial<PaymentFormData>;
50  className?: string;
51  isLoading?: boolean;
52  errors?: {
53    cardNumber?: string;
54    expiry?: string;
55    cvv?: string;
56    holderName?: string;
57    billingAddress?: Record<string, string>;
58    general?: string;
59  };
60  showBillingAddress?: boolean;
61  showSaveOption?: boolean;
62  showSetDefault?: boolean;
63  currency?: string;
64}
65 
66function formatCardNumber(value: string): string {
67  const cleaned = value.replace(/\s+/g, "");
68  const chunks = cleaned.match(/.{1,4}/g) || [];
69  return chunks.join(" ").slice(0, 19);
70}
71 
72function detectCardType(
73  cardNumber: string
74): "visa" | "mastercard" | "amex" | "discover" | "other" {
75  const cleaned = cardNumber.replace(/\s+/g, "");
76  if (/^4/.test(cleaned)) return "visa";
77  if (/^5[1-5]/.test(cleaned)) return "mastercard";
78  if (/^3[47]/.test(cleaned)) return "amex";
79  if (/^6(?:011|5)/.test(cleaned)) return "discover";
80  return "other";
81}
82 
83function getCardIcon(type: string): string {
84  switch (type) {
85    case "visa":
86      return "💳";
87    case "mastercard":
88      return "💳";
89    case "amex":
90      return "💳";
91    case "discover":
92      return "💳";
93    default:
94      return "💳";
95  }
96}
97 
98export default function BillingPaymentForm({
99  onSubmit,
100  onCancel,
101  defaultValues,
102  className,
103  isLoading = false,
104  errors,
105  showBillingAddress = false,
106  showSaveOption = true,
107// … truncated