114 lines
6.5 KiB
JavaScript
114 lines
6.5 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import EmployerLayout from '../../Layouts/EmployerLayout';
|
|
import { CreditCard, CheckCircle2, AlertCircle, ArrowRight, Sparkles } from 'lucide-react';
|
|
|
|
export default function Subscription({ currentPlan, expiresAt, plans }) {
|
|
const [selectedId, setSelectedId] = useState('premium');
|
|
const [showSuccess, setShowSuccess] = useState(false);
|
|
|
|
const handleSelect = (id) => {
|
|
setSelectedId(id);
|
|
setShowSuccess(true);
|
|
setTimeout(() => setShowSuccess(false), 4000);
|
|
};
|
|
|
|
return (
|
|
<EmployerLayout title="Manage Subscription">
|
|
<Head title="Subscription - Employer Portal" />
|
|
|
|
<div className="space-y-8 select-none">
|
|
{/* Current Status Banner */}
|
|
<div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="w-12 h-12 rounded-xl bg-blue-50 text-[#185FA5] flex items-center justify-center font-bold">
|
|
<CreditCard className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<div className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Current Active Plan</div>
|
|
<div className="text-lg font-bold text-slate-900">{currentPlan}</div>
|
|
<div className="text-xs text-slate-500 mt-0.5">Renews automatically on <span className="font-bold text-slate-700">{expiresAt}</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2 bg-emerald-50 border border-emerald-200 text-emerald-800 px-3.5 py-1.5 rounded-xl text-xs font-bold">
|
|
<CheckCircle2 className="w-4 h-4 text-emerald-600" />
|
|
<span>Active & Verified</span>
|
|
</div>
|
|
</div>
|
|
|
|
{showSuccess && (
|
|
<div className="p-4 bg-emerald-500 text-white rounded-xl text-xs font-bold flex items-center space-x-2 shadow-sm animate-fade-in">
|
|
<Sparkles className="w-4 h-4" />
|
|
<span>Plan successfully updated! Mock PayTabs billing cycle applied.</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Pricing Grid */}
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h2 className="text-lg font-bold text-slate-900 tracking-tight">Available Subscription Tiers</h2>
|
|
<p className="text-xs text-slate-500 mt-0.5">Upgrade or change your plan anytime. Zero agency recruitment commissions.</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 pt-2">
|
|
{plans.map((plan) => {
|
|
const isSelected = selectedId === plan.id;
|
|
|
|
return (
|
|
<div
|
|
key={plan.id}
|
|
className={`bg-white rounded-2xl border-2 shadow-sm flex flex-col justify-between overflow-hidden transition-all relative ${
|
|
isSelected
|
|
? 'border-[#185FA5] ring-4 ring-[#185FA5]/10'
|
|
: 'border-slate-200 hover:border-slate-300'
|
|
}`}
|
|
>
|
|
{plan.popular && (
|
|
<div className="bg-[#185FA5] text-white text-[10px] font-bold uppercase tracking-wider text-center py-1 shadow-xs">
|
|
Most Popular Tier
|
|
</div>
|
|
)}
|
|
|
|
<div className="p-6 space-y-6 flex-1 flex flex-col justify-between">
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h3 className="font-bold text-base text-slate-900">{plan.name}</h3>
|
|
<div className="mt-2 flex items-baseline space-x-1">
|
|
<span className="text-3xl font-extrabold text-slate-900">{plan.price}</span>
|
|
<span className="text-xs font-semibold text-slate-500">/ {plan.period}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<ul className="space-y-3 pt-4 border-t border-slate-100">
|
|
{plan.features.map(f => (
|
|
<li key={f} className="flex items-start space-x-3 text-xs text-slate-600">
|
|
<CheckCircle2 className="w-4 h-4 text-emerald-600 flex-shrink-0 mt-0.5" />
|
|
<span>{f}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => handleSelect(plan.id)}
|
|
className={`w-full h-11 rounded-xl font-bold text-xs flex items-center justify-center transition-colors shadow-sm ${
|
|
isSelected
|
|
? 'bg-emerald-600 hover:bg-emerald-700 text-white'
|
|
: 'bg-[#185FA5] hover:bg-[#144f8a] text-white'
|
|
}`}
|
|
>
|
|
{isSelected ? 'Current Active Tier' : 'Select Plan Tier'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</EmployerLayout>
|
|
);
|
|
}
|