51: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 52: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 53:T55db,"use client"; import { CreditCard, MoreVertical, Pencil, Plus, Save, Trash2, X, } from "lucide-react"; import { useState } from "react"; import { cn } from "cn"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; interface PaymentMethod { id: string; type: "visa" | "mastercard" | "amex" | "paypal"; last4?: string; expiryMonth?: number; expiryYear?: number; email?: string; isDefault: boolean; } const DEFAULT_METHODS: PaymentMethod[] = [ { id: "1", type: "visa", last4: "4242", expiryMonth: 12, expiryYear: 2026, isDefault: true, }, { id: "2", type: "mastercard", last4: "8888", expiryMonth: 8, expiryYear: 2025, isDefault: false, }, { id: "3", type: "paypal", email: "john@example.com", isDefault: false, }, ]; const PAYMENT_LOGOS: Record = { visa: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/ecommerce/payment-methods/visa.svg", mastercard: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/ecommerce/payment-methods/mastercard.svg", amex: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/ecommerce/payment-methods/amex.svg", paypal: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/ecommerce/payment-methods/paypal.svg", }; interface PaymentMethods1Props { methods?: PaymentMethod[]; className?: string; } const PaymentMethods1 = ({ methods: initialMethods = DEFAULT_METHODS, className, }: PaymentMethods1Props) => { const [methods, setMethods] = useState(initialMethods); const [selectedId, setSelectedId] = useState( methods.find((m) => m.isDefault)?.id || methods[0]?.id, ); const [editingId, setEditingId] = useState(null); const [isAddingNew, setIsAddingNew] = useState(false); const [editForm, setEditForm] = useState>({}); const startEditing = (method: PaymentMethod) => { setEditingId(method.id); setEditForm({ ...method }); }; const cancelEditing = () => { setEditingId(null); setEditForm({}); }; const saveEdit = () => { if ( editingId && editForm.type && (editForm.type === "paypal" ? editForm.email : editForm.last4 && editForm.expiryMonth && editForm.expiryYear) ) { setMethods((prev) => prev.map((method) => method.id === editingId ? ({ ...method, ...editForm, } as PaymentMethod) : method, ), ); setEditingId(null); setEditForm({}); } }; const startAddingNew = () => { setIsAddingNew(true); setEditForm({ type: "visa", last4: "", expiryMonth: undefined, expiryYear: undefined, email: undefined, isDefault: methods.length === 0, }); }; const cancelAddingNew = () => { setIsAddingNew(false); setEditForm({}); }; const saveNewMethod = () => { if ( editForm.type && (editForm.type === "paypal" ? editForm.email : editForm.last4 && editForm.expiryMonth && editForm.expiryYear) ) { const newMethod: PaymentMethod = { id: Date.now().toString(), type: editForm.type as "visa" | "mastercard" | "amex" | "paypal", last4: editForm.last4, expiryMonth: editForm.expiryMonth, expiryYear: editForm.expiryYear, email: editForm.email, isDefault: methods.length === 0, }; setMethods((prev) => [...prev, newMethod]); setIsAddingNew(false); setEditForm({}); if (methods.length === 0) { setSelectedId(newMethod.id); } } }; const deleteMethod = (id: string) => { setMethods((prev) => prev.filter((method) => method.id !== id)); if (selectedId === id && methods.length > 1) { setSelectedId(methods.find((m) => m.id !== id)?.id || ""); } if (editingId === id) { setEditingId(null); setEditForm({}); } }; return (

{/* Header */}

Payment Methods

Manage your saved payment methods

{/* Payment Methods List */}

{methods.map((method) => ( editingId !== method.id && setSelectedId(method.id) } > {editingId === method.id ? (

Edit Payment Method

Card Type

{editForm.type === "paypal" ? (

PayPal Email setEditForm({ ...editForm, email: e.target.value, }) } onClick={(e) => e.stopPropagation()} />

) : ( <>

Last 4 Digits setEditForm({ ...editForm, last4: e.target.value .replace(/\D/g, "") .slice(0, 4), }) } onClick={(e) => e.stopPropagation()} />

Expiry Month setEditForm({ ...editForm, expiryMonth: parseInt(e.target.value) || undefined, }) } onClick={(e) => e.stopPropagation()} />

Expiry Year setEditForm({ ...editForm, expiryYear: parseInt(e.target.value) || undefined, }) } onClick={(e) => e.stopPropagation()} />

)}

) : (

{/* Payment Logo */}

{PAYMENT_LOGOS[method.type] ? ( {method.type}

) : ( )}

{/* Details */}

{method.type === "paypal" ? "PayPal" : `${method.type.charAt(0).toUpperCase() + method.type.slice(1)} •••• ${method.last4}`} {method.isDefault && ( Default )}

{method.type === "paypal" ? method.email : `Expires ${method.expiryMonth}/${method.expiryYear}`}

{/* Actions */} { e.stopPropagation(); startEditing(method); }} > Edit { e.stopPropagation(); deleteMethod(method.id); }} > Remove

)} ))} {isAddingNew && (

Add New Payment Method

Card Type

{editForm.type === "paypal" ? (

PayPal Email setEditForm({ ...editForm, email: e.target.value, }) } />

) : ( <>

Last 4 Digits setEditForm({ ...editForm, last4: e.target.value .replace(/\D/g, "") .slice(0, 4), }) } />

Expiry Month setEditForm({ ...editForm, expiryMonth: parseInt(e.target.value) || undefined, }) } />

Expiry Year setEditForm({ ...editForm, expiryYear: parseInt(e.target.value) || undefined, }) } />

)}

{methods.length === 0 && (

No payment methods

Add a payment method for faster checkout

)}

); }; export { PaymentMethods1 }; 50:["$","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"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn"}]]}]}]]}],["$","$L51",null,{"namespace":"@shadcnblocks","registryDependencies":["badge","button","card","dropdown-menu","input","label","radio-group","select"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"block/payment-methods1/payment-methods1.tsx","content":"$53","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]