Subscription alert

1"use client"
2 
3import * as React from "react"
4import { AlertCircle, Info, TriangleAlert, X } from "lucide-react"
5import { Alert, AlertDescription } from "@/registry/new-york/ui/alert"
6import { cn } from "@/lib/utils"
7import type { SubscriptionAlertData } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-types"
8import {
9  deriveSubscriptionAlert,
10  type AlertVariant,
11} from "@/registry/new-york/blocks/subscription-alert/lib/subscription-alert-utils"
12 
13/** Props for the `SubscriptionAlert` component. */
14export type SubscriptionAlertProps = {
15  subscription?: SubscriptionAlertData
16  onDismiss?: () => void
17  className?: string
18}
19 
20const VARIANT_CONFIG: Record<AlertVariant, { icon: React.ElementType; className: string }> = {
21  destructive: {
22    icon: AlertCircle,
23    className: "border-destructive/50 bg-destructive/15 text-destructive [&>svg]:text-destructive",
24  },
25  warning: {
26    icon: TriangleAlert,
27    className:
28      "border-warning/40 bg-warning/15 text-warning-foreground [&>svg]:text-warning-foreground",
29  },
30  info: {
31    icon: Info,
32    className: "border-info/40 bg-info/15 text-info-foreground [&>svg]:text-info-foreground",
33  },
34}
35 
36export function SubscriptionAlert({ subscription, onDismiss, className }: SubscriptionAlertProps) {
37  const alert = deriveSubscriptionAlert(subscription)
38 
39  if (!alert) return null
40 
41  const config = VARIANT_CONFIG[alert.variant]
42  const Icon = config.icon
43 
44  return (
45    <Alert className={cn("relative", config.className, className)}>
46      <Icon className="size-4" />
47      <AlertDescription className="flex items-center justify-between gap-4 text-inherit">
48        <span>
49          {alert.message}
50          {alert.actionUrl && alert.actionLabel && (
51            <>
52              {" "}
53              <a
54                href={alert.actionUrl}
55                target="_blank"
56                rel="noopener noreferrer"
57                className="font-medium underline underline-offset-2 hover:no-underline"
58              >
59                {alert.actionLabel}
60              </a>
61            </>
62          )}
63        </span>
64        {onDismiss && (
65          <button
66            onClick={onDismiss}
67            aria-label="Dismiss alert"
68            className="shrink-0 rounded-sm opacity-60 hover:opacity-100 transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
69          >
70            <X className="size-4" />
71          </button>
72        )}
73      </AlertDescription>
74// … truncated