Implement academy analytics, billing, and web stories updates
This commit is contained in:
105
resources/js/components/academy/billing/PlanCard.jsx
Normal file
105
resources/js/components/academy/billing/PlanCard.jsx
Normal file
@@ -0,0 +1,105 @@
|
||||
import React from 'react'
|
||||
import { Link } from '@inertiajs/react'
|
||||
import AccessBadge from './AccessBadge'
|
||||
|
||||
function ActionButton({ disabled, children, onClick, href, tone = 'primary' }) {
|
||||
const toneClass = {
|
||||
primary: 'border-sky-300/25 bg-sky-300/12 text-sky-100 hover:border-sky-300/40 hover:bg-sky-300/18',
|
||||
emerald: 'border-emerald-300/25 bg-emerald-300/10 text-emerald-100 hover:bg-emerald-300/18',
|
||||
default: 'border-white/10 bg-white/[0.05] text-white hover:border-white/20 hover:bg-white/[0.08]',
|
||||
}[tone] ?? 'border-white/10 bg-white/[0.05] text-white hover:border-white/20 hover:bg-white/[0.08]'
|
||||
|
||||
if (href) {
|
||||
return <Link href={href} className={`inline-flex w-full items-center justify-center rounded-full border px-5 py-3 text-sm font-semibold transition ${toneClass}`}>{children}</Link>
|
||||
}
|
||||
|
||||
return (
|
||||
<button type="button" disabled={disabled} onClick={onClick} className={`inline-flex w-full items-center justify-center rounded-full border px-5 py-3 text-sm font-semibold transition disabled:cursor-not-allowed disabled:opacity-60 ${toneClass}`}>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export default function PlanCard({ product, selectedPlan, currentTier, isSubscribed, activePlanKey, billingEnabled, loginHref, manageHref, onCheckout }) {
|
||||
const activeTier = typeof currentTier === 'string' ? currentTier.toLowerCase() : 'free'
|
||||
const isActivePlan = selectedPlan?.key === activePlanKey
|
||||
// Pro subscribers already have creator access — don't show a separate "switch" CTA for creator card
|
||||
const isHigherTierCovered = activeTier === 'pro' && product.tier === 'creator'
|
||||
const isPlanReady = Boolean(selectedPlan?.configured && selectedPlan?.price_id_valid)
|
||||
// User has a different active subscription (not this plan)
|
||||
const isSubscribedElsewhere = isSubscribed && !isActivePlan
|
||||
|
||||
return (
|
||||
<article className={`relative overflow-hidden rounded-[32px] border p-6 transition md:p-7 ${
|
||||
isActivePlan
|
||||
? 'border-emerald-300/25 bg-[linear-gradient(180deg,rgba(16,185,129,0.1),rgba(15,23,42,0.96))] shadow-[0_28px_90px_rgba(5,150,105,0.14)]'
|
||||
: product.featured
|
||||
? 'border-sky-300/25 bg-[linear-gradient(180deg,rgba(14,165,233,0.12),rgba(15,23,42,0.96))] shadow-[0_28px_90px_rgba(2,132,199,0.14)]'
|
||||
: 'border-white/10 bg-white/[0.04]'
|
||||
}`}>
|
||||
<div className="absolute inset-x-0 top-0 h-px bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.45),transparent)]" />
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-400">{product.badge}</p>
|
||||
<h2 className="mt-3 text-3xl font-semibold tracking-[-0.05em] text-white">{product.name}</h2>
|
||||
<p className="mt-3 text-sm leading-7 text-slate-300">{product.description}</p>
|
||||
</div>
|
||||
<div className="flex shrink-0 flex-col items-end gap-2">
|
||||
{isActivePlan
|
||||
? <span className="rounded-full border border-emerald-300/30 bg-emerald-300/14 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-emerald-100">Your plan</span>
|
||||
: <AccessBadge tier={product.tier} />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 rounded-[24px] border border-white/10 bg-black/20 px-4 py-4">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-[0.2em] text-slate-400">Monthly</p>
|
||||
<p className="mt-3 text-3xl font-semibold tracking-[-0.04em] text-white">{selectedPlan?.price_display || '—'}</p>
|
||||
<p className="mt-1 text-xs uppercase tracking-[0.18em] text-slate-500">Billed monthly · cancel anytime</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 space-y-3 text-sm text-slate-300">
|
||||
{product.features.map((feature) => (
|
||||
<div key={feature} className="flex items-start gap-2.5 rounded-2xl border border-white/10 bg-black/20 px-4 py-3">
|
||||
<span className="mt-px shrink-0 text-emerald-400">✓</span>
|
||||
<span>{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-6 space-y-3">
|
||||
{/* Active plan: manage */}
|
||||
{isActivePlan ? (
|
||||
<ActionButton href={manageHref} tone="emerald">Manage subscription</ActionButton>
|
||||
) : null}
|
||||
|
||||
{/* Subscribed elsewhere: switch */}
|
||||
{isSubscribedElsewhere && !isHigherTierCovered ? (
|
||||
<ActionButton href={manageHref} tone="default">Switch to {product.name}</ActionButton>
|
||||
) : null}
|
||||
|
||||
{/* Higher tier already covers this plan */}
|
||||
{isHigherTierCovered && !isActivePlan ? (
|
||||
<p className="text-center text-xs text-slate-500">Included in your Pro plan</p>
|
||||
) : null}
|
||||
|
||||
{/* Not subscribed, not logged in */}
|
||||
{!isSubscribed && loginHref ? (
|
||||
<ActionButton href={loginHref} tone="primary">
|
||||
{billingEnabled ? `Get ${product.name}` : 'Coming soon'}
|
||||
</ActionButton>
|
||||
) : null}
|
||||
|
||||
{/* Not subscribed, logged in */}
|
||||
{!isSubscribed && !loginHref ? (
|
||||
<ActionButton
|
||||
disabled={!billingEnabled || !isPlanReady}
|
||||
onClick={() => onCheckout(selectedPlan)}
|
||||
tone="primary"
|
||||
>
|
||||
{!billingEnabled ? 'Coming soon' : isPlanReady ? `Get ${product.name} — ${selectedPlan?.price_display || ''}` : 'Not available yet'}
|
||||
</ActionButton>
|
||||
) : null}
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user