52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
|
import { useEffect } from 'react';
|
||
|
|
import { Link, useNavigate } from 'react-router-dom';
|
||
|
|
import { CheckCircle2, ArrowRight } from 'lucide-react';
|
||
|
|
import { PublicLayout } from '@/components/public/PublicLayout';
|
||
|
|
import { Button } from '@/components/ui/Button';
|
||
|
|
import { useQueryClient } from '@tanstack/react-query';
|
||
|
|
|
||
|
|
export default function BillingSuccessPage() {
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const qc = useQueryClient();
|
||
|
|
|
||
|
|
// Refresh billing/me state when the user lands here from Stripe
|
||
|
|
useEffect(() => {
|
||
|
|
qc.invalidateQueries();
|
||
|
|
}, [qc]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<PublicLayout>
|
||
|
|
<section className="container py-20 max-w-2xl text-center">
|
||
|
|
<div className="mx-auto grid h-16 w-16 place-items-center rounded-2xl bg-emerald-100 text-emerald-600">
|
||
|
|
<CheckCircle2 className="h-8 w-8" />
|
||
|
|
</div>
|
||
|
|
<h1 className="mt-6 text-3xl md:text-4xl font-bold text-ink-950 font-display">
|
||
|
|
You're upgraded
|
||
|
|
</h1>
|
||
|
|
<p className="mt-3 text-lg text-ink-600">
|
||
|
|
Stripe has confirmed your payment. Your firm's plan is being updated — usually within a
|
||
|
|
few seconds. A confirmation email is on its way.
|
||
|
|
</p>
|
||
|
|
<div className="mt-8 flex items-center justify-center gap-2">
|
||
|
|
<Link to="/app">
|
||
|
|
<Button>
|
||
|
|
Open dashboard
|
||
|
|
<ArrowRight className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
<Link to="/app/settings">
|
||
|
|
<Button variant="secondary">Manage billing</Button>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
<p className="mt-8 text-xs text-ink-500">
|
||
|
|
If your plan still shows as Starter after a minute,{' '}
|
||
|
|
<button onClick={() => navigate(0)} className="underline hover:text-ink-700">
|
||
|
|
refresh
|
||
|
|
</button>{' '}
|
||
|
|
this page.
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
</PublicLayout>
|
||
|
|
);
|
||
|
|
}
|