Payment Method

1import { cva, type VariantProps } from "class-variance-authority";
2import { MoreHorizontal, Pencil, Trash2 } from "lucide-react";
3import * as React from "react";
4import { Badge } from "@/components/ui/badge";
5import { Button } from "@/components/ui/button";
6import { cn } from "@/lib/utils";
7import { brandLabels, type CardBrand, CardBrandIcons } from "./card-icons";
8 
9const paymentMethodVariants = cva(
10  "relative flex items-center gap-4 rounded-xl border bg-card p-4 text-card-foreground transition-colors",
11  {
12    variants: {
13      variant: {
14        default: "border-border",
15        selected: "border-primary ring-1 ring-primary",
16      },
17    },
18    defaultVariants: {
19      variant: "default",
20    },
21  },
22);
23 
24interface PaymentMethodProps
25  extends React.HTMLAttributes<HTMLDivElement>,
26    VariantProps<typeof paymentMethodVariants> {}
27 
28const PaymentMethod = React.forwardRef<HTMLDivElement, PaymentMethodProps>(
29  ({ className, variant, ...props }, ref) => (
30    <div
31      ref={ref}
32      className={cn(paymentMethodVariants({ variant, className }))}
33      {...props}
34    />
35  ),
36);
37PaymentMethod.displayName = "PaymentMethod";
38 
39interface PaymentMethodIconProps extends React.HTMLAttributes<HTMLDivElement> {
40  brand?: CardBrand;
41}
42 
43const PaymentMethodIcon = React.forwardRef<
44  HTMLDivElement,
45  PaymentMethodIconProps
46>(({ className, brand = "unknown", ...props }, ref) => {
47  const Logo = CardBrandIcons[brand] ?? CardBrandIcons.unknown;
48  const isGeneric = brand === "unknown";
49 
50  return (
51    <div
52      ref={ref}
53      className={cn(
54        "flex shrink-0 items-center justify-center overflow-hidden rounded-[4px]",
55        isGeneric ? "h-8 w-8 text-muted-foreground" : "h-8 w-12",
56        className,
57      )}
58      {...props}
59    >
60      <Logo className={isGeneric ? "h-6 w-6" : "h-full w-full"} />
61    </div>
62  );
63});
64PaymentMethodIcon.displayName = "PaymentMethodIcon";
65 
66const PaymentMethodDetails = React.forwardRef<
67  HTMLDivElement,
68  React.HTMLAttributes<HTMLDivElement>
69>(({ className, ...props }, ref) => (
70  <div
71    ref={ref}
72    className={cn("flex min-w-0 flex-1 flex-col gap-0.5", className)}
73    {...props}
74  />
75));
76PaymentMethodDetails.displayName = "PaymentMethodDetails";
77 
78interface PaymentMethodNumberProps
79  extends React.HTMLAttributes<HTMLSpanElement> {
80  last4?: string;
81}
82 
83const PaymentMethodNumber = React.forwardRef<
84  HTMLSpanElement,
85  PaymentMethodNumberProps
86>(({ className, last4, children, ...props }, ref) => (
87  <span
88    ref={ref}
89// … truncated