68 lines
4.3 KiB
JavaScript
68 lines
4.3 KiB
JavaScript
import React from 'react'
|
||
import { Head, Link, usePage, useForm } from '@inertiajs/react'
|
||
import AccessBadge from '../../../components/academy/billing/AccessBadge'
|
||
|
||
export default function AcademyBillingSuccess({ currentTier, isSubscribed, links = {} }) {
|
||
const { auth } = usePage().props
|
||
const sessionId = usePage().props.sessionId || null
|
||
const userEmail = auth?.user?.email ?? null
|
||
const { data, setData, post, processing } = useForm({ message: '', session_id: sessionId })
|
||
return (
|
||
<main className="flex min-h-screen items-center bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.14),_transparent_24%),radial-gradient(circle_at_bottom_right,_rgba(16,185,129,0.14),_transparent_24%),linear-gradient(180deg,_#07111f_0%,_#0f172a_45%,_#111827_100%)] px-4 py-8 sm:px-6 lg:px-8">
|
||
<Head title="Subscription Confirmed" />
|
||
|
||
<div className="mx-auto w-full max-w-[640px] space-y-6">
|
||
<section className="rounded-[40px] border border-emerald-300/20 bg-[linear-gradient(135deg,rgba(7,17,31,0.95),rgba(12,24,45,0.92),rgba(6,78,59,0.82))] p-8 shadow-[0_32px_100px_rgba(2,6,23,0.42)] md:p-10">
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-3xl leading-none">🎉</span>
|
||
{isSubscribed ? <AccessBadge tier={currentTier} /> : null}
|
||
</div>
|
||
<h1 className="mt-5 text-4xl font-semibold tracking-[-0.05em] text-white md:text-5xl">
|
||
{isSubscribed ? 'Welcome to Academy.' : "You're all set."}
|
||
</h1>
|
||
<p className="mt-4 max-w-lg text-base leading-8 text-slate-300">
|
||
{isSubscribed
|
||
? 'Your subscription is active and all premium content for your plan is now unlocked. Head to Academy and start exploring.'
|
||
: "Your payment was confirmed and your subscription is activating now. This usually takes just a moment. If you don't see your access right away, refresh the Academy page in a few seconds."}
|
||
</p>
|
||
|
||
{!isSubscribed ? (
|
||
<div className="mt-4 rounded-2xl border border-amber-300/20 bg-amber-300/8 px-4 py-3 text-sm text-amber-50">
|
||
<p className="font-semibold">If your access isn't updated automatically</p>
|
||
<p className="mt-1">If your Academy access doesn't appear within a few minutes, email <strong>academy@skinbase.org</strong> or click the button below to open a prefilled message. Include your account email{userEmail ? ` (${userEmail})` : ''} and the checkout session id{sessionId ? `: ${sessionId}` : '.'}</p>
|
||
|
||
<div className="mt-3 flex flex-wrap items-start gap-4">
|
||
<form onSubmit={(e) => { e.preventDefault(); post(links.reportIssue, { preserveScroll: true }) }} className="flex w-full max-w-lg items-start gap-2">
|
||
<textarea value={data.message} onChange={(e) => setData('message', e.target.value)} placeholder="Optional: Tell us what you expected to see or any useful details" className="flex-1 rounded-md bg-black/20 border border-amber-300/20 p-2 text-sm text-amber-50" rows={3} />
|
||
<button type="submit" disabled={processing} className="rounded-full border border-amber-300/30 bg-amber-300/12 px-4 py-2 text-sm font-semibold text-amber-900 hover:bg-amber-300/16">Send report</button>
|
||
</form>
|
||
|
||
<div className="text-xs text-amber-100">
|
||
<div>- Wait 2–3 minutes and refresh the Academy page.</div>
|
||
<div>- If you still lack access, use the form above or email academy@skinbase.org.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</section>
|
||
|
||
<div className="flex flex-wrap gap-3">
|
||
<Link
|
||
href={links.academy || '/academy'}
|
||
className="rounded-full border border-emerald-300/25 bg-emerald-300/12 px-5 py-3 text-sm font-semibold text-emerald-100 transition hover:bg-emerald-300/18"
|
||
>
|
||
Go to Academy
|
||
</Link>
|
||
{links.account ? (
|
||
<Link
|
||
href={links.account}
|
||
className="rounded-full border border-white/10 bg-white/[0.05] px-5 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.08]"
|
||
>
|
||
View my subscription
|
||
</Link>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
</main>
|
||
)
|
||
} |