{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "subscription-management",
  "title": "Subscription Management",
  "description": "A subscription management component",
  "dependencies": ["lucide-react"],
  "registryDependencies": [
    "button",
    "card",
    "badge",
    "separator",
    "utils",
    "@billingsdk/cancel-subscription-dialog",
    "@billingsdk/update-plan-dialog"
  ],
  "files": [
    {
      "path": "src/registry/billingsdk/subscription-management.tsx",
      "content": "\"use client\";\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Calendar, CreditCard } from \"lucide-react\";\nimport { CurrentPlan } from \"@/lib/billingsdk-config\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  CancelSubscriptionDialog,\n  type CancelSubscriptionDialogProps,\n} from \"@/components/billingsdk/cancel-subscription-dialog\";\nimport {\n  UpdatePlanDialog,\n  type UpdatePlanDialogProps,\n} from \"@/components/billingsdk/update-plan-dialog\";\n\nexport interface SubscriptionManagementProps {\n  className?: string;\n  currentPlan: CurrentPlan;\n  cancelSubscription: CancelSubscriptionDialogProps;\n  updatePlan: UpdatePlanDialogProps;\n}\n\nexport function SubscriptionManagement({\n  className,\n  currentPlan,\n  cancelSubscription,\n  updatePlan,\n}: SubscriptionManagementProps) {\n  return (\n    <div className={cn(\"w-full text-left\", className)}>\n      <Card className=\"shadow-lg\">\n        <CardHeader className=\"px-4 pb-4 sm:px-6 sm:pb-6\">\n          <CardTitle className=\"flex items-center gap-2 text-lg sm:gap-3 sm:text-xl\">\n            <div className=\"bg-primary/10 ring-primary/20 rounded-lg p-1.5 ring-1 sm:p-2\">\n              <CreditCard className=\"text-primary h-4 w-4 sm:h-5 sm:w-5\" />\n            </div>\n            Current Subscription\n          </CardTitle>\n          <CardDescription className=\"text-sm sm:text-base\">\n            Manage your billing and subscription settings\n          </CardDescription>\n        </CardHeader>\n\n        <CardContent className=\"space-y-6 px-4 sm:space-y-8 sm:px-6\">\n          {/* Current Plan Details with highlighted styling */}\n          <div className=\"from-muted/30 via-muted/20 to-muted/30 border-border/50 relative overflow-hidden rounded-xl border bg-gradient-to-r p-3 sm:p-4\">\n            <div className=\"relative\">\n              <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-0\">\n                <div className=\"w-full\">\n                  <div className=\"mb-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3\">\n                    <div className=\"flex items-center gap-2\">\n                      <h3 className=\"text-lg font-semibold sm:text-xl\">\n                        {currentPlan.plan.title} Plan\n                      </h3>\n                    </div>\n                    <div className=\"flex flex-wrap items-center gap-2\">\n                      <Badge\n                        variant={\n                          currentPlan.status === \"active\"\n                            ? \"default\"\n                            : \"outline\"\n                        }\n                        className=\"bg-primary/90 hover:bg-primary border-0 text-xs font-medium shadow-sm sm:text-sm\"\n                      >\n                        {currentPlan.type === `monthly`\n                          ? `${currentPlan.plan.currency}${currentPlan.plan.monthlyPrice}/month`\n                          : currentPlan.type === `yearly`\n                            ? `${currentPlan.plan.yearlyPrice}/year`\n                            : `${currentPlan.price}`}\n                      </Badge>\n                      <Badge\n                        variant=\"outline\"\n                        className=\"border-border/60 bg-background/50 text-xs shadow-sm backdrop-blur-sm sm:text-sm\"\n                      >\n                        {currentPlan.status}\n                      </Badge>\n                    </div>\n                  </div>\n                  <div className=\"relative\">\n                    <p className=\"text-muted-foreground relative z-10 text-xs sm:text-sm\">\n                      {currentPlan.plan.description}\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <Separator className=\"via-border my-4 bg-gradient-to-r from-transparent to-transparent sm:my-6\" />\n\n          <div className=\"space-y-3 sm:space-y-4\">\n            <h4 className=\"flex items-center gap-2 text-base font-medium sm:text-lg\">\n              <div className=\"bg-muted ring-border/50 rounded-md p-1 ring-1 sm:p-1.5\">\n                <Calendar className=\"h-3 w-3 sm:h-4 sm:w-4\" />\n              </div>\n              Billing Information\n            </h4>\n            <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-6\">\n              <div className=\"group from-muted to-background/10 border-border/30 hover:border-border/60 rounded-lg border bg-gradient-to-b p-2.5 transition-all duration-200 sm:p-3 md:bg-gradient-to-tl\">\n                <span className=\"text-muted-foreground mb-1 block text-xs sm:text-sm\">\n                  Next billing date\n                </span>\n                <div className=\"group-hover:text-primary text-sm font-medium transition-colors duration-200 sm:text-base\">\n                  {currentPlan.nextBillingDate}\n                </div>\n              </div>\n              <div className=\"group from-muted to-background/10 border-border/30 hover:border-border/60 rounded-lg border bg-gradient-to-b p-2.5 transition-all duration-200 sm:p-3 md:bg-gradient-to-tr\">\n                <span className=\"text-muted-foreground mb-1 block text-xs sm:text-sm\">\n                  Payment method\n                </span>\n                <div className=\"group-hover:text-primary text-sm font-medium transition-colors duration-200 sm:text-base\">\n                  {currentPlan.paymentMethod}\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <Separator className=\"via-border my-4 bg-gradient-to-r from-transparent to-transparent sm:my-6\" />\n\n          <div className=\"flex flex-col gap-3 sm:flex-row\">\n            <UpdatePlanDialog\n              className=\"mx-0 shadow-lg transition-all duration-200 hover:shadow-xl\"\n              {...updatePlan}\n            />\n\n            <CancelSubscriptionDialog\n              className=\"mx-0 shadow-lg transition-all duration-200 hover:shadow-xl\"\n              {...cancelSubscription}\n            />\n          </div>\n\n          <div className=\"pt-4 sm:pt-6\">\n            <h4 className=\"mb-3 text-base font-medium sm:mb-4 sm:text-lg\">\n              Current Plan Features\n            </h4>\n            <div className=\"flex flex-wrap gap-2 sm:gap-3\">\n              {currentPlan.plan.features.map((feature, index) => (\n                <div\n                  key={index}\n                  className=\"group border-border/80 hover:border-primary/30 hover:bg-primary/5 flex items-center gap-2 rounded-lg border p-2 transition-all duration-200 sm:p-2\"\n                >\n                  <div className=\"bg-primary group-hover:bg-primary h-1 w-1 flex-shrink-0 rounded-full transition-all duration-200 group-hover:scale-125 sm:h-1.5 sm:w-1.5\"></div>\n                  <span className=\"text-muted-foreground group-hover:text-foreground text-xs transition-colors duration-200 sm:text-sm\">\n                    {feature.name}\n                  </span>\n                </div>\n              ))}\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/billingsdk/subscription-management.tsx"
    },
    {
      "path": "src/registry/billingsdk/demo/subscription-management-demo.tsx",
      "content": "\"use client\";\n\nimport { SubscriptionManagement } from \"@/components/billingsdk/subscription-management\";\nimport { type CurrentPlan, plans } from \"@/lib/billingsdk-config\";\n\nexport function SubscriptionManagementDemo() {\n  const currentPlan: CurrentPlan = {\n    plan: plans[1],\n    type: \"monthly\",\n    price: \"$121\",\n    nextBillingDate: \"January 15, 2025\",\n    paymentMethod: \"Credit Card\",\n    status: \"active\",\n  };\n  return (\n    <div className=\"flex flex-1 flex-col justify-center text-center\">\n      <SubscriptionManagement\n        className=\"mx-auto max-w-2xl\"\n        currentPlan={currentPlan}\n        updatePlan={{\n          currentPlan: currentPlan.plan,\n          plans: plans,\n          onPlanChange: (planId) => {\n            console.log(\"update plan\", planId);\n          },\n          triggerText: \"Update Plan\",\n        }}\n        cancelSubscription={{\n          title: \"Cancel Subscription\",\n          description: \"Are you sure you want to cancel your subscription?\",\n          leftPanelImageUrl:\n            \"https://img.freepik.com/free-vector/abstract-paper-cut-shape-wave-background_474888-4649.jpg?semt=ais_hybrid&w=740&q=80\",\n          plan: currentPlan.plan,\n          warningTitle: \"You will lose access to your account\",\n          warningText:\n            \"If you cancel your subscription, you will lose access to your account and all your data will be deleted.\",\n          onCancel: async (planId) => {\n            console.log(\"cancel subscription\", planId);\n            return new Promise((resolve) => {\n              setTimeout(() => {\n                resolve(void 0);\n              }, 1000);\n            });\n          },\n          onKeepSubscription: async (planId) => {\n            console.log(\"keep subscription\", planId);\n          },\n        }}\n      />\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/subscription-management-demo.tsx"
    },
    {
      "path": "src/registry/lib/billingsdk-config.ts",
      "content": "export interface Plan {\n  id: string;\n  title: string;\n  description: string;\n  highlight?: boolean;\n  type?: \"monthly\" | \"yearly\";\n  currency?: string;\n  monthlyPrice: string;\n  yearlyPrice: string;\n  buttonText: string;\n  badge?: string;\n  features: {\n    name: string;\n    icon: string;\n    iconColor?: string;\n  }[];\n}\n\nexport interface CurrentPlan {\n  plan: Plan;\n  type: \"monthly\" | \"yearly\" | \"custom\";\n  price?: string;\n  nextBillingDate: string;\n  paymentMethod: string;\n  status: \"active\" | \"inactive\" | \"past_due\" | \"cancelled\";\n}\n\nexport const plans: Plan[] = [\n  {\n    id: \"starter\",\n    title: \"Starter\",\n    description: \"For developers testing out Liveblocks locally.\",\n    currency: \"$\",\n    monthlyPrice: \"0\",\n    yearlyPrice: \"0\",\n    buttonText: \"Start today for free\",\n    features: [\n      {\n        name: \"Presence\",\n        icon: \"check\",\n        iconColor: \"text-green-500\",\n      },\n      {\n        name: \"Comments\",\n        icon: \"check\",\n        iconColor: \"text-orange-500\",\n      },\n      {\n        name: \"Notifications\",\n        icon: \"check\",\n        iconColor: \"text-teal-500\",\n      },\n      {\n        name: \"Text Editor\",\n        icon: \"check\",\n        iconColor: \"text-blue-500\",\n      },\n      {\n        name: \"Sync Datastore\",\n        icon: \"check\",\n        iconColor: \"text-zinc-500\",\n      },\n    ],\n  },\n  {\n    id: \"pro\",\n    title: \"Pro\",\n    description: \"For companies adding collaboration in production.\",\n    currency: \"$\",\n    monthlyPrice: \"20\",\n    yearlyPrice: \"199\",\n    buttonText: \"Sign up\",\n    badge: \"Most popular\",\n    highlight: true,\n    features: [\n      {\n        name: \"Presence\",\n        icon: \"check\",\n        iconColor: \"text-green-500\",\n      },\n      {\n        name: \"Comments\",\n        icon: \"check\",\n        iconColor: \"text-orange-500\",\n      },\n      {\n        name: \"Notifications\",\n        icon: \"check\",\n        iconColor: \"text-teal-500\",\n      },\n      {\n        name: \"Text Editor\",\n        icon: \"check\",\n        iconColor: \"text-blue-500\",\n      },\n      {\n        name: \"Sync Datastore\",\n        icon: \"check\",\n        iconColor: \"text-zinc-500\",\n      },\n    ],\n  },\n  {\n    id: \"enterprise\",\n    title: \"Enterprise\",\n    description:\n      \"For organizations that need more support and compliance features.\",\n    currency: \"$\",\n    monthlyPrice: \"Custom\",\n    yearlyPrice: \"Custom\",\n    buttonText: \"Contact sales\",\n    features: [\n      {\n        name: \"Presence\",\n        icon: \"check\",\n        iconColor: \"text-green-500\",\n      },\n      {\n        name: \"Comments\",\n        icon: \"check\",\n        iconColor: \"text-orange-500\",\n      },\n      {\n        name: \"Notifications\",\n        icon: \"check\",\n        iconColor: \"text-teal-500\",\n      },\n      {\n        name: \"Text Editor\",\n        icon: \"check\",\n        iconColor: \"text-blue-500\",\n      },\n      {\n        name: \"Sync Datastore\",\n        icon: \"check\",\n        iconColor: \"text-zinc-500\",\n      },\n    ],\n  },\n];\n",
      "type": "registry:lib",
      "target": "lib/billingsdk-config.ts"
    }
  ],
  "type": "registry:block"
}