import React, { useState, useRef, useEffect } from 'react' import { Head, Link, useForm, usePage } 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 { flash, auth } = usePage().props const { data, setData, post, processing } = useForm({ issue_type: 'billing', contact_email: auth?.user?.email || '', message: '', session_id: null, }) function IssueTypeDropdown({ value, onChange }) { const options = [ { value: 'billing', label: 'Billing question' }, { value: 'payment', label: 'Payment problem' }, { value: 'upgrade', label: 'Upgrade problem' }, { value: 'downgrade', label: 'Downgrade problem' }, { value: 'cancel', label: 'Cancellation problem' }, { value: 'access', label: 'Access not updated' }, { value: 'other', label: 'Other' }, ] const [open, setOpen] = useState(false) const ref = useRef(null) useEffect(() => { function onDoc(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false) } document.addEventListener('mousedown', onDoc) return () => document.removeEventListener('mousedown', onDoc) }, []) const current = options.find((o) => o.value === value) || options[0] return (
{open ? (
{options.map((opt) => ( ))}
) : null}
) } function getCsrfToken() { return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '' } const endsAt = formatDate(subscription?.endsAt) const onGracePeriod = subscription?.onGracePeriod === true const subscriptionActive = subscription?.active === true return (
{flash?.error ? (

{flash.error}

) : null} {flash?.success ? (

{flash.success}

) : null} {/* Header */}

Skinbase Academy

{isSubscribed ? 'Your subscription' : 'Academy subscription'}

{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.'}

{/* Grace period warning */} {onGracePeriod && endsAt ? (

Your subscription was cancelled and will end on {endsAt}.

You still have full access until that date. Open the subscription portal to resume your plan if you change your mind.

Resume subscription
) : null} {/* No subscription: upgrade CTA */} {!isSubscribed ? (

Upgrade

Choose a plan to get started

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.

See plans and pricing Back to Academy
) : null} {/* Active subscription: details + manager */} {isSubscribed ? (

Subscription details

Active plan

{activePlan?.label || 'Academy plan'}

{activePlan?.price_display ? (

{activePlan.price_display} / month

) : null}

Status

{onGracePeriod ? 'Cancelling' : subscriptionActive ? 'Active' : (subscription?.status || 'Active')}

{onGracePeriod && endsAt ? (

Access ends {endsAt}

) : null} {!onGracePeriod && subscriptionActive ? (

Renews automatically

) : null}

Your Academy access

{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.'}