4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T9d5,"use client" import * as React from "react" import { AlertCircle, Info, TriangleAlert, X } from "lucide-react" import { Alert, AlertDescription } from "@/registry/new-york/ui/alert" import { cn } from "@/lib/utils" import type { SubscriptionAlertData } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-types" import { deriveSubscriptionAlert, type AlertVariant, } from "@/registry/new-york/blocks/subscription-alert/lib/subscription-alert-utils" /** Props for the `SubscriptionAlert` component. */ export type SubscriptionAlertProps = { subscription?: SubscriptionAlertData onDismiss?: () => void className?: string } const VARIANT_CONFIG: Record = { destructive: { icon: AlertCircle, className: "border-destructive/50 bg-destructive/15 text-destructive [&>svg]:text-destructive", }, warning: { icon: TriangleAlert, className: "border-warning/40 bg-warning/15 text-warning-foreground [&>svg]:text-warning-foreground", }, info: { icon: Info, className: "border-info/40 bg-info/15 text-info-foreground [&>svg]:text-info-foreground", }, } export function SubscriptionAlert({ subscription, onDismiss, className }: SubscriptionAlertProps) { const alert = deriveSubscriptionAlert(subscription) if (!alert) return null const config = VARIANT_CONFIG[alert.variant] const Icon = config.icon return ( {alert.message} {alert.actionUrl && alert.actionLabel && ( <> {" "} {alert.actionLabel} )} {onDismiss && ( )} ) } 53:T1810,import type { SubscriptionAlertData } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-types" import { formatDate } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-format" export type AlertVariant = "destructive" | "warning" | "info" /** * Machine-readable reason identifier for the derived alert. * * Use this to key i18n translations, apply custom rendering logic, or * conditionally render additional UI without parsing the default English message. * * @example * const alert = deriveSubscriptionAlert(data) * if (alert) { * const translated = t(`subscription.alert.${alert.reason}`, { date: ... }) * } */ export type AlertReason = | "past_due" // P1: status === "past_due" | "canceled" // P2: status === "canceled" | "scheduled_cancel" // P3: scheduledChange.action === "cancel" | "scheduled_pause" // P4: scheduledChange.action === "pause" | "paused_resuming" // P5: status === "paused" + scheduledChange.action === "resume" | "paused" // P6: status === "paused", no scheduled resume | "trialing" // P7: status === "trialing" + trialEndsAt present export type DerivedAlert = { variant: AlertVariant /** * Machine-readable reason for this alert. Stable across versions — use to * key i18n translations or apply custom logic without parsing `message`. */ reason: AlertReason /** Default English message. Sufficient for most consumers out of the box. */ message: string actionLabel?: string actionUrl?: string } | null /** * Derives the contextual alert for a subscription state. * * Evaluated in priority order; first match wins. * Returns `null` for healthy active subscriptions. * * @param data - Subscription alert data * @returns Alert descriptor with `reason` + default `message`, or null * * @example * deriveSubscriptionAlert({ status: "past_due", updatePaymentMethodUrl: "https://..." }) * // { reason: "past_due", variant: "destructive", message: "Payment failed...", ... } * * @example i18n usage * const alert = deriveSubscriptionAlert(data) * if (alert) { * const message = t(`subscription.alert.${alert.reason}`, { effectiveAt: data.scheduledChange?.effectiveAt }) * } */ export function deriveSubscriptionAlert(data: SubscriptionAlertData | undefined): DerivedAlert { if (!data) return null const { status, canceledAt, scheduledChange, trialEndsAt, updatePaymentMethodUrl } = data // Priority 1: past_due if (status === "past_due") { return { reason: "past_due", variant: "destructive", message: updatePaymentMethodUrl ? "Payment failed. Please update your payment method to avoid losing access." : "Payment failed. Please contact support to resolve your billing issue.", actionLabel: updatePaymentMethodUrl ? "Update payment method" : undefined, actionUrl: updatePaymentMethodUrl, } } // Priority 2: canceled if (status === "canceled") { return { reason: "canceled", variant: "destructive", message: canceledAt ? `This subscription was canceled on ${formatDate(canceledAt)}.` : "This subscription has been canceled.", } } // Priority 3: scheduled_cancel if (scheduledChange?.action === "cancel") { return { reason: "scheduled_cancel", variant: "warning", message: `This subscription is scheduled to cancel on ${formatDate(scheduledChange.effectiveAt)}.`, } } // Priority 4: scheduled_pause if (scheduledChange?.action === "pause") { const message = scheduledChange.resumeAt ? `This subscription will pause on ${formatDate(scheduledChange.effectiveAt)} and resume on ${formatDate(scheduledChange.resumeAt)}.` : `This subscription will pause on ${formatDate(scheduledChange.effectiveAt)}.` return { reason: "scheduled_pause", variant: "warning", message } } // Priority 5: paused_resuming if (status === "paused" && scheduledChange?.action === "resume") { return { reason: "paused_resuming", variant: "info", message: `This subscription is paused. It will resume on ${formatDate(scheduledChange.effectiveAt)}.`, } } // Priority 6: paused if (status === "paused") { return { reason: "paused", variant: "info", message: "This subscription is paused.", } } // Priority 7: trialing if (status === "trialing" && trialEndsAt) { return { reason: "trialing", variant: "info", message: `Your trial ends on ${formatDate(trialEndsAt)}.`, } } // Priority 8: active — no alert return null } // --- // Mapping utility — Paddle API → SubscriptionAlertData display contract // --- type PaddleSubscription = { status: "active" | "canceled" | "past_due" | "paused" | "trialing" canceledAt?: string | null scheduledChange?: { action: "cancel" | "pause" | "resume" effectiveAt: string resumeAt?: string | null } | null items?: Array<{ trialDates?: { endsAt?: string | null } | null }> managementUrls?: { updatePaymentMethod?: string | null } | null } /** * Maps a Paddle subscription API response to the `SubscriptionAlertData` * display contract consumed by `SubscriptionAlert`. * * @param subscription - Paddle Subscription * @returns Mapped alert data for `` * * @example * const data = await paddle.subscriptions.get(subscriptionId) * const alertData = mapSubscriptionToAlertData(data) */ export function mapSubscriptionToAlertData( subscription: PaddleSubscription ): SubscriptionAlertData { return { status: subscription.status, canceledAt: subscription.canceledAt ?? undefined, scheduledChange: subscription.scheduledChange ? { action: subscription.scheduledChange.action, effectiveAt: subscription.scheduledChange.effectiveAt, resumeAt: subscription.scheduledChange.resumeAt ?? undefined, } : undefined, // Trial end date comes from the first item's trial dates trialEndsAt: subscription.items?.[0]?.trialDates?.endsAt ?? undefined, updatePaymentMethodUrl: subscription.managementUrls?.updatePaymentMethod ?? undefined, } } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":["@paddle/paddle-helpers","alert"]}]]}],["$","$L50",null,{"sourceUrl":"https://developer.paddle.com/r/subscription-alert.json","proxyUrl":"https://shadcnregistry.com/r/paddle/subscription-alert","itemId":"@paddle/subscription-alert"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/new-york/blocks/subscription-alert/components/subscription-alert.tsx","content":"$52","type":"registry:component"},{"path":"registry/new-york/blocks/subscription-alert/components/paddle-subscription-alert.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { mapSubscriptionToAlertData } from \"@/registry/new-york/blocks/subscription-alert/lib/subscription-alert-utils\"\nimport { SubscriptionAlert, type SubscriptionAlertProps } from \"./subscription-alert\"\n\ntype PaddleSubscription = Parameters[0]\n\nexport type PaddleSubscriptionAlertProps = {\n subscription: PaddleSubscription\n} & Omit\n\n/**\n * Paddle-aware wrapper for `SubscriptionAlert`.\n *\n * Accepts the raw Paddle subscription entity, maps it to `SubscriptionAlertData`,\n * and renders the UI component. All display-only props are passed through directly.\n *\n * @example\n * \n */\nexport function PaddleSubscriptionAlert({\n subscription,\n ...uiProps\n}: PaddleSubscriptionAlertProps) {\n const data = mapSubscriptionToAlertData(subscription)\n return \n}\n","type":"registry:component"},{"path":"registry/new-york/blocks/subscription-alert/lib/subscription-alert-utils.ts","content":"$53","type":"registry:lib"}]}]]}],"$L54"]}]

Subscription Alert

Installation

Files

components

lib

Styles