67 lines
3.6 KiB
JavaScript
67 lines
3.6 KiB
JavaScript
import { useEffect, useState, useContext } from 'react';
|
||
import { useLocation, Link } from 'react-router-dom';
|
||
import { Button } from './ui/button.js';
|
||
import { ProfileCtx } from '../App.js'; // <- exported at very top of App.jsx
|
||
|
||
export default function BillingResult() {
|
||
const { setUser } = useContext(ProfileCtx) || {};
|
||
const q = new URLSearchParams(useLocation().search);
|
||
const outcome = q.get('ck'); // 'success' | 'cancel' | null
|
||
const [loading, setLoading] = useState(true);
|
||
|
||
/* ─────────────────────────────────────────────────────────
|
||
1) Ask the API for the latest user profile (flags, etc.)
|
||
– will be fast because JWT is already cached
|
||
───────────────────────────────────────────────────────── */
|
||
useEffect(() => {
|
||
const token = localStorage.getItem('token') || '';
|
||
fetch('/api/user-profile', { headers: { Authorization: `Bearer ${token}` } })
|
||
.then(r => r.ok ? r.json() : null)
|
||
.then(profile => { if (profile && setUser) setUser(profile); })
|
||
.finally(() => setLoading(false));
|
||
}, [setUser]);
|
||
|
||
/* ─────────────────────────────────────────────────────────
|
||
2) UX while waiting for that round‑trip
|
||
───────────────────────────────────────────────────────── */
|
||
if (loading) {
|
||
return <p className="p-8 text-center">Checking your subscription…</p>;
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────
|
||
3) Success – Stripe completed the checkout flow
|
||
───────────────────────────────────────────────────────── */
|
||
if (outcome === 'success') {
|
||
return (
|
||
<div className="max-w-md mx-auto p-8 text-center space-y-6">
|
||
<h1 className="text-2xl font-semibold">🎉 Subscription activated!</h1>
|
||
<p className="text-gray-600">
|
||
Premium features have been unlocked on your account.
|
||
</p>
|
||
|
||
<Button asChild className="w-full">
|
||
<Link to="/premium-onboarding" className="block w-full">Set up Premium Features</Link>
|
||
</Button>
|
||
|
||
<Button variant="secondary" asChild className="w-full">
|
||
<Link to="/profile" className="block w-full">Go to my account</Link>
|
||
</Button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────
|
||
4) Cancelled – user backed out of Stripe
|
||
───────────────────────────────────────────────────────── */
|
||
return (
|
||
<div className="max-w-md mx-auto p-8 text-center space-y-6">
|
||
<h1 className="text-2xl font-semibold">Subscription cancelled</h1>
|
||
<p className="text-gray-600">No changes were made to your account.</p>
|
||
|
||
<Button asChild className="w-full">
|
||
<Link to="/paywall" className="block w-full">Back to pricing</Link>
|
||
</Button>
|
||
</div>
|
||
);
|
||
}
|