{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "limited-offer-dialog", "title": "Limited Offer Dialog", "description": "A dialog component for displaying limited-time offers with customizable content and actions", "dependencies": ["lucide-react"], "registryDependencies": [ "dialog", "button", "badge", "button", "card", "utils" ], "files": [ { "path": "src/registry/billingsdk/limited-offer-dialog.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n Dialog,\n DialogContent,\n DialogTrigger,\n DialogTitle,\n} from \"@/components/ui/dialog\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Circle } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { useTheme } from \"@/contexts/theme-context\";\nimport { getThemeStyles } from \"@/lib/themes\";\n\n// Plan interface for type safety\nexport interface Offer {\n id: string;\n title: string;\n description: string;\n discount: string;\n features: Array<{ name: string; icon?: string; iconColor?: string }>;\n}\n\n// Component props interface\nexport interface LimitedOfferDialogProps {\n title?: string;\n description?: string;\n offer?: Offer;\n triggerButtonText?: string;\n warningTitle?: string;\n warningText?: string;\n claimButtonText?: string;\n declineButtonText?: string;\n onClaimOffer?: (offerId: string) => Promise | void;\n onDeclineOffer?: (offerId: string) => Promise | void;\n onDialogClose?: () => void;\n className?: string;\n}\n\n// Default offer object\nconst defaultOffer: Offer = {\n id: \"limited-offer-dialog\",\n title: \"Special Offer\",\n description: \"Limited time deal\",\n discount: \"50% OFF\",\n features: [\n { name: \"50% off your first month\" },\n { name: \"Valid until December 31, 2024\" },\n { name: \"First 100 users only\" },\n ],\n};\n\nexport function LimitedOfferDialog({\n title = \"🔥 Limited Time Offer!\",\n description = \"Grab this deal before it's gone\",\n offer = defaultOffer,\n triggerButtonText = \"Open Offer Dialog\",\n warningTitle = \"Don't miss out!\",\n warningText = \"This exclusive offer won't last long. Claim it now before it's gone forever.\",\n claimButtonText = \"👉 Claim Offer Now\",\n declineButtonText = \"No thanks, I'll pay full price\",\n onClaimOffer,\n onDeclineOffer,\n onDialogClose,\n className,\n}: LimitedOfferDialogProps) {\n // State management\n const [isOpen, setIsOpen] = React.useState(false);\n const [isLoading, setIsLoading] = React.useState(false);\n const [error, setError] = React.useState(null);\n\n // Theme integration\n const { currentTheme, previewDarkMode } = useTheme();\n const themeStyles = getThemeStyles(currentTheme, previewDarkMode);\n\n // Event handlers\n const handleClaimOffer = async () => {\n if (!onClaimOffer) {\n console.log(\"Claim offer clicked\");\n return;\n }\n\n setIsLoading(true);\n setError(null);\n\n try {\n await onClaimOffer(offer.id);\n setIsOpen(false);\n onDialogClose?.();\n } catch (err) {\n setError(err instanceof Error ? err.message : \"Failed to claim offer\");\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleDeclineOffer = async () => {\n if (!onDeclineOffer) {\n console.log(\"Decline offer clicked\");\n setIsOpen(false);\n onDialogClose?.();\n return;\n }\n\n setIsLoading(true);\n setError(null);\n\n try {\n await onDeclineOffer(offer.id);\n setIsOpen(false);\n onDialogClose?.();\n } catch (err) {\n setError(err instanceof Error ? err.message : \"Operation failed\");\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleDialogClose = () => {\n setIsOpen(false);\n setError(null);\n onDialogClose?.();\n };\n\n // Keyboard navigation (ESC key)\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\" && isOpen) {\n handleDialogClose();\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, [isOpen]);\n\n return (\n {\n if (open) {\n setIsOpen(true);\n } else {\n handleDialogClose();\n }\n }}\n >\n \n \n \n \n
\n {/* Dialog Title for accessibility */}\n \n {title} - {description}\n \n\n {/* Header */}\n
\n

{title}

\n

{description}

\n
\n\n {/* Offer Card */}\n
\n
\n
\n

{offer.title}

\n

\n {offer.description}\n

\n
\n \n {offer.discount}\n \n
\n\n
\n {offer.features.map((feature, index) => (\n
\n \n \n {feature.name}\n \n
\n ))}\n
\n
\n\n {/* Warning Section */}\n
\n

{warningTitle}

\n

{warningText}

\n
\n\n {/* Error Display */}\n {error && (\n
\n

{error}

\n
\n )}\n\n {/* Action Buttons */}\n
\n \n {isLoading ? \"Processing...\" : claimButtonText}\n \n \n {declineButtonText}\n \n
\n
\n \n \n );\n}\n", "type": "registry:component", "target": "components/billingsdk/limited-offer-dialog.tsx" }, { "path": "src/registry/billingsdk/demo/limited-offer-dialog-demo.tsx", "content": "\"use client\";\n\nimport { LimitedOfferDialog } from \"@/components/billingsdk/limited-offer-dialog\";\n\n// Sample offer data\nconst sampleOffer = {\n id: \"limited-offer-dialog\",\n title: \"Special Offer\",\n description: \"Limited time deal\",\n discount: \"50% OFF\",\n features: [\n { name: \"50% off your first month\" },\n { name: \"Valid until December 31, 2024\" },\n { name: \"First 100 users only\" },\n ],\n};\n\nexport function LimitedOfferDialogDemo() {\n const handleClaimOffer = async (offerId: string) => {\n console.log(\"Claiming offer:\", offerId);\n // Simulate API call\n await new Promise((resolve) => setTimeout(resolve, 1000));\n alert(\"Offer claimed successfully!\");\n };\n\n const handleDeclineOffer = async (offerId: string) => {\n console.log(\"Declining offer:\", offerId);\n // Simulate API call\n await new Promise((resolve) => setTimeout(resolve, 500));\n alert(\"Offer declined. You can always come back later!\");\n };\n\n const handleDialogClose = () => {\n console.log(\"Dialog closed\");\n };\n\n return (\n
\n \n
\n );\n}\n", "type": "registry:component", "target": "components/limited-offer-dialog-demo.tsx" } ], "type": "registry:block" }