Limited Offer Dialog

1"use client";
2 
3import * as React from "react";
4import {
5  Dialog,
6  DialogContent,
7  DialogTrigger,
8  DialogTitle,
9} from "@/components/ui/dialog";
10import { Button } from "@/components/ui/button";
11import { Badge } from "@/components/ui/badge";
12import { Circle } from "lucide-react";
13import { cn } from "@/lib/utils";
14import { useTheme } from "@/contexts/theme-context";
15import { getThemeStyles } from "@/lib/themes";
16 
17// Plan interface for type safety
18export interface Offer {
19  id: string;
20  title: string;
21  description: string;
22  discount: string;
23  features: Array<{ name: string; icon?: string; iconColor?: string }>;
24}
25 
26// Component props interface
27export interface LimitedOfferDialogProps {
28  title?: string;
29  description?: string;
30  offer?: Offer;
31  triggerButtonText?: string;
32  warningTitle?: string;
33  warningText?: string;
34  claimButtonText?: string;
35  declineButtonText?: string;
36  onClaimOffer?: (offerId: string) => Promise<void> | void;
37  onDeclineOffer?: (offerId: string) => Promise<void> | void;
38  onDialogClose?: () => void;
39  className?: string;
40}
41 
42// Default offer object
43const defaultOffer: Offer = {
44  id: "limited-offer-dialog",
45  title: "Special Offer",
46  description: "Limited time deal",
47  discount: "50% OFF",
48  features: [
49    { name: "50% off your first month" },
50    { name: "Valid until December 31, 2024" },
51    { name: "First 100 users only" },
52  ],
53};
54 
55export function LimitedOfferDialog({
56  title = "🔥 Limited Time Offer!",
57  description = "Grab this deal before it's gone",
58  offer = defaultOffer,
59  triggerButtonText = "Open Offer Dialog",
60  warningTitle = "Don't miss out!",
61  warningText = "This exclusive offer won't last long. Claim it now before it's gone forever.",
62  claimButtonText = "👉 Claim Offer Now",
63  declineButtonText = "No thanks, I'll pay full price",
64  onClaimOffer,
65  onDeclineOffer,
66  onDialogClose,
67  className,
68}: LimitedOfferDialogProps) {
69  // State management
70  const [isOpen, setIsOpen] = React.useState(false);
71  const [isLoading, setIsLoading] = React.useState(false);
72  const [error, setError] = React.useState<string | null>(null);
73 
74  // Theme integration
75  const { currentTheme, previewDarkMode } = useTheme();
76  const themeStyles = getThemeStyles(currentTheme, previewDarkMode);
77 
78  // Event handlers
79  const handleClaimOffer = async () => {
80    if (!onClaimOffer) {
81      console.log("Claim offer clicked");
82      return;
83    }
84 
85    setIsLoading(true);
86    setError(null);
87 
88    try {
89      await onClaimOffer(offer.id);
90// … truncated