Billing Plans.tsx

0% Statements 0/79
100% Branches 1/1
100% Functions 1/1
0% Lines 0/79
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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React from 'react';
import { Head, Link, router } from '@inertiajs/react';
import AuthenticatedLayout from '@/Components/Layout/AuthenticatedLayout';
import { PlansPageProps } from '@/types';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/Components/ui/card';
import { Button } from '@/Components/ui/button';
import { Badge } from '@/Components/ui/badge';
import { Check } from 'lucide-react';
 
export default function Plans({ products, currentSubscription }: PlansPageProps) {
    const handleSubscribe = (priceId: number) => {
        router.get(`/billing/subscribe/${priceId}`);
    };
 
    const isCurrentPlan = (priceId: string) => {
        return currentSubscription?.stripe_price === priceId;
    };
 
    return (
        <AuthenticatedLayout>
            <Head title="Subscription Plans" />
 
            <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div className="mb-8 text-center">
                    <h1 className="text-3xl font-bold">Choose Your Plan</h1>
                    <p className="mt-2 text-gray-600">Select the perfect plan for your needs. Upgrade or downgrade anytime.</p>
                </div>
 
                <div className="grid gap-6 md:grid-cols-3">
                    {products.map((product) => (
                        <div key={product.id}>
                            {product.prices?.map((price) => (
                                <Card key={price.id} className={isCurrentPlan(price.stripe_price_id) ? 'ring-2 ring-primary' : ''}>
                                    <CardHeader>
                                        <CardTitle>{product.name}</CardTitle>
                                        <CardDescription>{product.description}</CardDescription>
                                        {isCurrentPlan(price.stripe_price_id) && (
                                            <Badge className="w-fit">Current Plan</Badge>
                                        )}
                                    </CardHeader>
                                    <CardContent>
                                        <div className="mb-6">
                                            <span className="text-4xl font-bold">
                                                ${(price.unit_amount / 100).toFixed(0)}
                                            </span>
                                            <span className="text-gray-600">
                                                /{price.interval}
                                            </span>
                                        </div>
 
                                        {product.features && (
                                            <ul className="space-y-3">
                                                {product.features.map((feature, index) => (
                                                    <li key={index} className="flex items-start">
                                                        <Check className="mr-2 h-5 w-5 text-green-500 flex-shrink-0" />
                                                        <span className="text-sm">{feature}</span>
                                                    </li>
                                                ))}
                                            </ul>
                                        )}
 
                                        {price.trial_period_days && (
                                            <p className="mt-4 text-sm text-center text-gray-600">
                                                {price.trial_period_days} day free trial
                                            </p>
                                        )}
                                    </CardContent>
                                    <CardFooter>
                                        {isCurrentPlan(price.stripe_price_id) ? (
                                            <Button disabled className="w-full">
                                                Current Plan
                                            </Button>
                                        ) : (
                                            <Button 
                                                onClick={() => handleSubscribe(price.id)}
                                                className="w-full"
                                            >
                                                {currentSubscription ? 'Switch to this plan' : 'Subscribe'}
                                            </Button>
                                        )}
                                    </CardFooter>
                                </Card>
                            ))}
                        </div>
                    ))}
                </div>
 
                {currentSubscription && (
                    <div className="mt-8 text-center">
                        <Link href="/billing">
                            <Button variant="outline">Back to Billing</Button>
                        </Link>
                    </div>
                )}
            </div>
        </AuthenticatedLayout>
    );
}