"use client"; import { Check, Loader2, Tag, X } from "lucide-react"; import { useState } from "react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Field, FieldContent, FieldError, FieldLabel, } from "@/components/ui/field"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/components/ui/input-group"; import { Separator } from "@/components/ui/separator"; import { cn } from "@/lib/utils"; export interface AppliedCoupon { code: string; type: "percentage" | "fixed"; value: number; label?: string; expiresAt?: Date; description?: string; } export interface BillingCouponCodeProps { onApply?: (code: string) => Promise; onRemove?: () => Promise; appliedCoupon?: AppliedCoupon | null; className?: string; currency?: string; isLoading?: boolean; error?: string; } function formatPrice(amount: number, currency = "USD"): string { return new Intl.NumberFormat("en-US", { style: "currency", currency, minimumFractionDigits: 2, maximumFractionDigits: 2, }).format(amount); } function formatDate(date: Date): string { const year = date.getFullYear(); const month = date.toLocaleString("en-US", { month: "short" }); const day = date.getDate(); return `${month} ${day}, ${year}`; } export default function BillingCouponCode({ onApply, onRemove, appliedCoupon, className, currency = "USD", isLoading: externalLoading, error: externalError, }: BillingCouponCodeProps) { const [code, setCode] = useState(""); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const handleApply = async () => { if (!code.trim()) { setError("Please enter a coupon code"); return; } if (!onApply) return; setIsLoading(true); setError(null); try { await onApply(code.trim().toUpperCase()); setCode(""); } catch (err) { setError( err instanceof Error ? err.message : "Failed to apply coupon code" ); } finally { setIsLoading(false); } }; const handleRemove = async () => { if (!onRemove) return; setIsLoading(true); setError(null); try { await onRemove(); } catch (err) { setError( err instanceof Error ? err.message : "Failed to remove coupon code" ); } finally { setIsLoading(false); } }; const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !isLoading && !externalLoading) { handleApply(); } }; const displayError = externalError || error; const displayLoading = isLoading || externalLoading; return (

Discount Code Apply a promotional code to your subscription

{appliedCoupon ? (

{appliedCoupon.code} Applied

{appliedCoupon.label && (

{appliedCoupon.label}

)} {appliedCoupon.description && (

{appliedCoupon.description}

)} {appliedCoupon.expiresAt && (

Expires: {formatDate(appliedCoupon.expiresAt)}

)}

{onRemove && ( )}

Discount

{appliedCoupon.type === "percentage" ? ( -{appliedCoupon.value}% ) : ( -{formatPrice(appliedCoupon.value, currency)} )}

) : (

Coupon Code { setCode(e.target.value.toUpperCase()); setError(null); }} onKeyDown={handleKeyDown} placeholder="Enter code" type="text" value={code} /> {displayError && ( {displayError} )}

)}

); }

Example Usage