klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Implement academy analytics, billing, and web stories updates

Browse Source
This commit is contained in:
Gregor Klevže
2026-05-26 07:27:29 +02:00
parent 456c3d6bb0
commit 0b33a1b074
177 changed files with 27360 additions and 2685 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
resources/js/Pages/Academy/Billing/Account.jsx Normal file
View File

@@ -0,0 +1,152 @@
import React from 'react'
import { Head, Link } from '@inertiajs/react'
import AccessBadge from '../../../components/academy/billing/AccessBadge'
function formatDate(iso) {
if (!iso) return null
try {
return new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
} catch {
return null
}
}
export default function AcademyBillingAccount({ currentTier, isSubscribed, subscription, activePlan = null, links = {} }) {
const endsAt = formatDate(subscription?.endsAt)
const onGracePeriod = subscription?.onGracePeriod === true
const subscriptionActive = subscription?.active === true
return (
<main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.14),_transparent_24%),radial-gradient(circle_at_bottom_right,_rgba(251,191,36,0.14),_transparent_26%),linear-gradient(180deg,_#07111f_0%,_#0f172a_45%,_#111827_100%)] px-4 py-8 sm:px-6 lg:px-8">
<Head title="Academy Subscription" />
<div className="mx-auto max-w-[1280px] space-y-8">
{/* Header */}
<section className="rounded-[40px] border border-white/10 bg-[linear-gradient(135deg,rgba(7,17,31,0.95),rgba(12,24,45,0.9),rgba(15,23,42,0.96))] p-8 shadow-[0_32px_100px_rgba(2,6,23,0.42)] md:p-10">
<div className="flex flex-wrap items-center gap-3">
<p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-100/85">Skinbase Academy</p>
<AccessBadge tier={currentTier} />
</div>
<h1 className="mt-4 text-4xl font-semibold tracking-[-0.05em] text-white md:text-5xl">
{isSubscribed ? 'Your subscription' : 'Academy subscription'}
</h1>
<p className="mt-4 max-w-2xl text-base leading-8 text-slate-300">
{isSubscribed
? 'Your Academy access is active. Manage, upgrade, or cancel your subscription here at any time.'
: 'You are on the free Academy tier. Upgrade to Creator or Pro to unlock premium content.'}
</p>
</section>
{/* Grace period warning */}
{onGracePeriod && endsAt ? (
<section className="rounded-[30px] border border-amber-300/25 bg-amber-300/[0.06] px-6 py-5">
<p className="font-semibold text-amber-100">Your subscription was cancelled and will end on {endsAt}.</p>
<p className="mt-2 text-sm leading-6 text-amber-100/75">You still have full access until that date. Open the subscription portal to resume your plan if you change your mind.</p>
<Link
href={links.portal}
className="mt-4 inline-flex items-center rounded-full border border-amber-300/30 bg-amber-300/12 px-5 py-2.5 text-sm font-semibold text-amber-100 transition hover:bg-amber-300/20"
>
Resume subscription
</Link>
</section>
) : null}
{/* No subscription: upgrade CTA */}
{!isSubscribed ? (
<section className="rounded-[30px] border border-white/10 bg-[linear-gradient(135deg,rgba(8,47,73,0.92),rgba(30,41,59,0.94))] p-6 md:p-7">
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-100/85">Upgrade</p>
<h2 className="mt-3 text-2xl font-semibold tracking-[-0.04em] text-white">Choose a plan to get started</h2>
<p className="mt-3 max-w-xl text-sm leading-7 text-slate-200/90">
Creator unlocks premium lessons and the full prompt library for €4.99/month. Pro gives you everything — all lessons, the advanced content track, and every new Academy drop — for €9.99/month.
</p>
<div className="mt-5 flex flex-wrap gap-3">
<Link
href={links.pricing || '/academy/pricing'}
className="rounded-full border border-sky-300/25 bg-sky-300/12 px-5 py-3 text-sm font-semibold text-sky-100 transition hover:border-sky-300/40 hover:bg-sky-300/18"
>
See plans and pricing
</Link>
<Link
href={links.academy || '/academy'}
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]"
>
Back to Academy
</Link>
</div>
</section>
) : null}
{/* Active subscription: details + manager */}
{isSubscribed ? (
<section className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_320px]">
<div className="space-y-5 rounded-[32px] border border-white/10 bg-white/[0.04] p-6 md:p-7">
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-400">Subscription details</p>
<div className="grid gap-4 sm:grid-cols-2">
<div className="rounded-2xl border border-white/10 bg-black/20 px-4 py-4">
<p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">Active plan</p>
<p className="mt-2 text-lg font-semibold text-white">{activePlan?.label || 'Academy plan'}</p>
{activePlan?.price_display ? (
<p className="mt-1 text-sm text-slate-400">{activePlan.price_display} / month</p>
) : null}
</div>
<div className="rounded-2xl border border-white/10 bg-black/20 px-4 py-4">
<p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">Status</p>
<p className="mt-2 text-lg font-semibold capitalize text-white">
{onGracePeriod ? 'Cancelling' : subscriptionActive ? 'Active' : (subscription?.status || 'Active')}
</p>
{onGracePeriod && endsAt ? (
<p className="mt-1 text-sm text-amber-300/80">Access ends {endsAt}</p>
) : null}
{!onGracePeriod && subscriptionActive ? (
<p className="mt-1 text-sm text-emerald-300/80">Renews automatically</p>
) : null}
</div>
</div>
<div className="rounded-2xl border border-white/10 bg-black/20 px-4 py-4">
<p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">Your Academy access</p>
<div className="mt-3 flex flex-wrap items-center gap-3">
<AccessBadge tier={currentTier} />
<p className="text-sm text-slate-300">
{currentTier === 'pro'
? 'Full access to all Academy lessons and content.'
: currentTier === 'creator'
? 'Full access to all Creator lessons and prompts.'
: 'Access to free Academy content.'}
</p>
</div>
</div>
</div>
<aside className="space-y-3 rounded-[32px] border border-white/10 bg-black/20 p-6">
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-300">Manage</p>
<p className="text-xs leading-6 text-slate-400">
Use the subscription portal to upgrade, downgrade, or cancel. Changes take effect at your next billing date.
</p>
<Link
href={links.portal}
className="mt-2 inline-flex w-full items-center justify-center rounded-full border border-sky-300/25 bg-sky-300/12 px-5 py-3 text-sm font-semibold text-sky-100 transition hover:border-sky-300/40 hover:bg-sky-300/18"
>
Upgrade, downgrade or cancel
</Link>
<Link
href={links.pricing || '/academy/pricing'}
className="inline-flex w-full items-center justify-center 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]"
>
Compare plans
</Link>
<Link
href={links.academy || '/academy'}
className="inline-flex w-full items-center justify-center 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]"
>
Go to Academy
</Link>
</aside>
</section>
) : null}
</div>
</main>
)
}