"use client"; import { Calendar, Loader2, Pause, Play, RefreshCw, X } from "lucide-react"; import { useState } from "react"; import { cn } from "@/lib/utils"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/registry/new-york/ui/alert-dialog"; import { Badge } from "@/registry/new-york/ui/badge"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/registry/new-york/ui/select"; import { Separator } from "@/registry/new-york/ui/separator"; import { Switch } from "@/registry/new-york/ui/switch"; export interface SubscriptionSettings { id: string; planName: string; status: "active" | "paused" | "canceled" | "expired"; billingPeriod: "monthly" | "annual"; currentBillingDate: Date; nextBillingDate?: Date; pausedUntil?: Date; canceledAt?: Date; cancelAtPeriodEnd?: boolean; autoRenew: boolean; prorationPreview?: { newAmount: number; creditAmount: number; nextBillingDate: Date; }; } export interface BillingSubscriptionSettingsProps { subscription: SubscriptionSettings; onPause?: (resumeDate?: Date) => Promise; onResume?: () => Promise; onChangeBillingPeriod?: (period: "monthly" | "annual") => Promise; onUpdateBillingDate?: (date: Date) => Promise; onCancel?: (feedback?: string) => Promise; onReactivate?: () => Promise; onToggleAutoRenew?: (enabled: boolean) => Promise; className?: string; currency?: string; } 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}`; } function formatPrice(amount: number, currency = "USD"): string { return new Intl.NumberFormat("en-US", { style: "currency", currency, minimumFractionDigits: 2, maximumFractionDigits: 2, }).format(amount); } export default function BillingSubscriptionSettings({ subscription, onPause, onResume, onChangeBillingPeriod, onUpdateBillingDate, onCancel, onReactivate, onToggleAutoRenew, className, currency = "USD", }: BillingSubscriptionSettingsProps) { const [isLoading, setIsLoading] = useState(false); const [showCancelDialog, setShowCancelDialog] = useState(false); const [cancelFeedback, setCancelFeedback] = useState(""); const [showPauseDialog, setShowPauseDialog] = useState(false); const [pauseDuration, setPauseDuration] = useState< "1" | "3" | "6" | "custom" >("1"); const isActive = subscription.status === "active"; const isPaused = subscription.status === "paused"; const isCanceled = subscription.status === "canceled"; const handlePause = async () => { if (!onPause) return; setIsLoading(true); try { let resumeDate: Date | undefined; if (pauseDuration === "1") { resumeDate = new Date(); resumeDate.setMonth(resumeDate.getMonth() + 1); } else if (pauseDuration === "3") { resumeDate = new Date(); resumeDate.setMonth(resumeDate.getMonth() + 3); } else if (pauseDuration === "6") { resumeDate = new Date(); resumeDate.setMonth(resumeDate.getMonth() + 6); } await onPause(resumeDate); setShowPauseDialog(false); } finally { setIsLoading(false); } }; const handleResume = async () => { if (!onResume) return; setIsLoading(true); try { await onResume(); } finally { setIsLoading(false); } }; const handleChangeBillingPeriod = async (period: "monthly" | "annual") => { if (!onChangeBillingPeriod) return; setIsLoading(true); try { await onChangeBillingPeriod(period); } finally { setIsLoading(false); } }; const handleCancel = async () => { if (!onCancel) return; setIsLoading(true); try { await onCancel(cancelFeedback || undefined); setShowCancelDialog(false); setCancelFeedback(""); } finally { setIsLoading(false); } }; const handleReactivate = async () => { if (!onReactivate) return; setIsLoading(true); try { await onReactivate(); } finally { setIsLoading(false); } }; const handleToggleAutoRenew = async (enabled: boolean) => { if (!onToggleAutoRenew) return; setIsLoading(true); try { await onToggleAutoRenew(enabled); } finally { setIsLoading(false); } }; return ( <>

Subscription Settings Manage your subscription preferences and billing

Plan {subscription.planName}

{subscription.status.charAt(0).toUpperCase() + subscription.status.slice(1)}

Billing Period {subscription.billingPeriod === "monthly" ? "Monthly" : "Annual"}

{onChangeBillingPeriod && isActive && ( )}

Billing Date

{subscription.nextBillingDate ? formatDate(subscription.nextBillingDate) : formatDate(subscription.currentBillingDate)}

{subscription.pausedUntil && ( <>

Paused Until {formatDate(subscription.pausedUntil)}

)} {subscription.canceledAt && ( <>

Canceled On {formatDate(subscription.canceledAt)}

{subscription.cancelAtPeriodEnd && (

Your subscription will end on{" "} {subscription.nextBillingDate ? formatDate(subscription.nextBillingDate) : formatDate(subscription.currentBillingDate)}

)}

Auto-renewal {subscription.autoRenew ? "Your subscription will renew automatically" : "Your subscription will not renew"}

{onToggleAutoRenew && isActive && ( )}

{subscription.prorationPreview && ( <>

Proration Preview

New Amount: {formatPrice( subscription.prorationPreview.newAmount, currency )}

{subscription.prorationPreview.creditAmount > 0 && (

Credit Applied: - {formatPrice( subscription.prorationPreview.creditAmount, currency )}

)}

Next Billing Date: {formatDate( subscription.prorationPreview.nextBillingDate )}

)}

{isPaused && onResume && ( )} {isActive && onPause && ( )} {isCanceled && onReactivate && ( )} {isActive && onCancel && ( )}

Cancel Subscription Are you sure you want to cancel your subscription? You'll lose access to all premium features at the end of your billing period.

Reason for canceling (optional)

setCancelFeedback(e.target.value)}
                placeholder="Help us improve by sharing why you're canceling..."
                value={cancelFeedback}
              />
            </div>
          </div>
          <AlertDialogFooter>
            <AlertDialogCancel>Keep Subscription</AlertDialogCancel>
            <AlertDialogAction
              aria-busy={isLoading}
              data-loading={isLoading}
              onClick={handleCancel}
              type="button"
            >
              {isLoading ? (
                <>
                  <Loader2 className="size-4 animate-spin" />
                  Canceling…
                </>
              ) : (
                "Cancel Subscription"
              )}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

<AlertDialog onOpenChange={setShowPauseDialog} open={showPauseDialog}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Pause Subscription</AlertDialogTitle>
            <AlertDialogDescription>
              Your subscription will be paused and you won't be charged
              during the pause period. You can resume at any time.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <div className="flex flex-col gap-4">
            <div className="flex flex-col gap-2">
              <label className="font-medium text-sm" htmlFor="pause-duration">
                Pause Duration
              </label>
              <Select
                onValueChange={(value) =>
                  setPauseDuration(value as "1" | "3" | "6" | "custom")
                }
                value={pauseDuration}
              >
                <SelectTrigger id="pause-duration">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="1">1 Month</SelectItem>
                  <SelectItem value="3">3 Months</SelectItem>
                  <SelectItem value="6">6 Months</SelectItem>
                  <SelectItem value="custom">Custom Date</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
              aria-busy={isLoading}
              data-loading={isLoading}
              onClick={handlePause}
              type="button"
            >
              {isLoading ? (
                <>
                  <Loader2 className="size-4 animate-spin" />
                  Pausing…
                </>
              ) : (
                "Pause Subscription"
              )}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}
</article></body></html>

Proration Preview

Example Usage

Proration Preview