Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | 1x 1x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 1x 1x 1x 1x 1x 1x 27x 27x 27x 27x 27x 27x 27x 27x 27x 23x 4x 2x 2x 27x 27x 27x 27x 23x 4x 2x 2x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x | 'use client';
import Link from 'next/link';
import { AlertCircle, ArrowRight } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import { TIER_NAMES, getTierLimits, type SubscriptionTier } from '@/lib/subscription/tiers';
// Inline warning banner component
interface LimitReachedBannerProps {
itemType: string;
currentTier: SubscriptionTier;
limit: number;
}
export function LimitReached({ itemType, currentTier, limit }: LimitReachedBannerProps) {
return (
<div className="rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-900 dark:bg-amber-950">
<div className="flex items-start gap-3">
<AlertCircle className="mt-0.5 h-5 w-5 text-amber-600 dark:text-amber-400" />
<div className="flex-1">
<p className="text-sm font-medium text-amber-800 dark:text-amber-200">Limit Reached</p>
<p className="mt-1 text-sm text-amber-700 dark:text-amber-300">
You've reached the maximum of {limit} {itemType} on your {TIER_NAMES[currentTier]}{' '}
plan.
</p>
<Button asChild variant="outline" size="sm" className="mt-3">
<Link href="/pricing">
Upgrade to add more
<ArrowRight className="ml-2 h-3 w-3" />
</Link>
</Button>
</div>
</div>
</div>
);
}
// Dialog component
interface LimitReachedProps {
open: boolean;
onOpenChange: (open: boolean) => void;
currentTier: SubscriptionTier;
itemType: 'samples' | 'testimonials' | 'packages';
suggestedTier?: SubscriptionTier;
}
const ITEM_LABELS = {
samples: 'work samples',
testimonials: 'testimonials',
packages: 'service packages',
};
export function LimitReachedDialog({
open,
onOpenChange,
currentTier,
itemType,
suggestedTier,
}: LimitReachedProps) {
const limits = getTierLimits(currentTier);
const maxItems =
itemType === 'samples'
? limits.maxSamples
: itemType === 'testimonials'
? limits.maxTestimonials
: limits.maxPackages;
const targetTier = suggestedTier || (currentTier === 'free' ? 'basic' : 'pro');
const targetLimits = getTierLimits(targetTier);
const targetMax =
itemType === 'samples'
? targetLimits.maxSamples
: itemType === 'testimonials'
? targetLimits.maxTestimonials
: targetLimits.maxPackages;
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent>
<DialogHeader>
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10">
<AlertCircle className="h-6 w-6 text-destructive" />
</div>
<DialogTitle className="mt-4">Limit Reached</DialogTitle>
<DialogDescription>
You've reached the maximum of {maxItems} {ITEM_LABELS[itemType]} on your{' '}
{TIER_NAMES[currentTier]} plan.
</DialogDescription>
</DialogHeader>
<div className="rounded-lg border bg-muted/50 p-4">
<p className="text-sm font-medium">Upgrade to {TIER_NAMES[targetTier]}</p>
<p className="mt-1 text-sm text-muted-foreground">
Get up to {targetMax === Infinity ? 'unlimited' : targetMax} {ITEM_LABELS[itemType]}
{targetTier === 'pro' && ' plus advanced analytics and custom URL'}
{targetTier === 'premium' && ' plus verified badge and featured listing'}
</p>
</div>
<DialogFooter className="flex-col gap-2 sm:flex-row">
<Button variant="outline" onClick={() => onOpenChange(false)}>
Maybe Later
</Button>
<Button asChild>
<Link href="/pricing">
Upgrade Now
<ArrowRight className="ml-2 h-4 w-4" />
</Link>
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
|