import React, { useState } from 'react'; import { Head } from '@inertiajs/react'; import EmployerLayout from '../../Layouts/EmployerLayout'; import { useTranslation } from '../../lib/LanguageContext'; import { CreditCard, CheckCircle2, AlertCircle, ArrowRight, Sparkles, FileText, Download, ShieldCheck, Clock, User, Building, Check, Lock, RefreshCw, X, TrendingUp } from 'lucide-react'; import { toast } from 'sonner'; export default function Subscription({ currentPlan, expiresAt, plans }) { const { t } = useTranslation(); const [selectedPlan, setSelectedPlan] = useState(null); const [showPayTabsModal, setShowPayTabsModal] = useState(false); const [showSuccess, setShowSuccess] = useState(false); // Card inputs for PayTabs Gateway const [cardName, setCardName] = useState(''); const [cardNumber, setCardNumber] = useState(''); const [cardExpiry, setCardExpiry] = useState(''); const [cardCvv, setCardCvv] = useState(''); const [billingEmail, setBillingEmail] = useState('sponsor@marketplace.ae'); // Failed payment simulation const [simulatedFailedState, setSimulatedFailedState] = useState(false); const [activePlan, setActivePlan] = useState(currentPlan || 'Premium Employer Pass'); // Payment History List const [invoices, setInvoices] = useState([ { id: 'INV-2026-001', date: 'May 01, 2026', amount: '199 AED', status: 'Paid', plan: 'Premium Employer Pass' }, { id: 'INV-2026-002', date: 'Apr 01, 2026', amount: '199 AED', status: 'Paid', plan: 'Premium Employer Pass' }, { id: 'INV-2026-003', date: 'Mar 01, 2026', amount: '99 AED', status: 'Refunded', plan: 'Basic Search' } ]); const handleSelectPlan = (plan) => { setSelectedPlan(plan); setShowPayTabsModal(true); }; const handlePayTabsSubmit = (e) => { e.preventDefault(); if (cardNumber.length < 16) { toast.error(`💳 ${t('invalid_card_format', 'Invalid card number format')}`); return; } setShowPayTabsModal(false); setShowSuccess(true); setActivePlan(selectedPlan.name); // Add to invoices const newInvoice = { id: `INV-2026-0${invoices.length + 1}`, date: 'Today', amount: selectedPlan.price, status: 'Paid', plan: selectedPlan.name }; setInvoices([newInvoice, ...invoices]); toast.success(`🎉 ${t('payment_approved', 'Payment Approved by PayTabs!')}`, { description: t('successfully_subscribed_desc', 'Successfully subscribed to {plan}. Premium access limits updated instantly.').replace('{plan}', selectedPlan.name), duration: 5000, }); // Reset forms setCardName(''); setCardNumber(''); setCardExpiry(''); setCardCvv(''); setTimeout(() => setShowSuccess(false), 5000); }; const triggerFailedPaymentSimulation = () => { setSimulatedFailedState(true); toast.warning(t('simulated_billing_failure_triggered', 'Simulated billing failure triggered!'), { description: t('simulated_billing_failure_desc', 'An automatic system warning will now request payment retry options.') }); }; const handleRetryPayment = () => { const premium = plans.find(p => p.id === 'premium') || plans[0]; setSelectedPlan(premium); setShowPayTabsModal(true); setSimulatedFailedState(false); }; const downloadReceipt = (invoiceId) => { toast.success(`📄 ${t('invoice_generated', 'Invoice {id} generated').replace('{id}', invoiceId)}`, { description: t('invoice_download_desc', 'Direct MOHRE Sponsor receipt downloaded in PDF format successfully.') }); }; return (
{/* Simulated payment failed retry block */} {simulatedFailedState && (

{t('recurrent_billing_failed', 'Your recurrent subscription billing has FAILED!')}

{t('recurrent_billing_failed_desc', 'Card renewal failed due to insufficient funds. Retry using PayTabs to avoid profile lockout.')}

)} {/* Current Active Plan status banner */}
{t('active_plan_pass', 'Active Plan Pass')}

{activePlan}

{t('renewing_auto_payment_on', 'Renewing via auto-payment on')} {expiresAt}

{t('verified_sponsor_status', 'Verified Sponsor Status')}
{showSuccess && (
{t('sponsor_pass_updated', 'Sponsor Pass updated successfully! PayTabs transaction logged.')}
)} {/* Available Plan Tiers Pricing Grid */}

{t('available_subscription_tiers', 'Available Subscription Tiers')}

{t('available_subscription_tiers_desc', 'Upgrade or cancel anytime. All contracts compliant with UAE Tadbeer MOHRE guides.')}

{plans.map((plan) => { const isCurrent = activePlan.toLowerCase().includes(plan.id.toLowerCase()); return (
{plan.popular && (
{t('most_popular_tier', 'Most Popular Tier')}
)}

{plan.name}

{plan.price} / {plan.period}
    {plan.features.map(f => (
  • {f}
    • ))}
); })}
{/* Payment History & Invoice logs */}
{/* Invoice Logs */}

{t('billing_payment_receipts', 'Billing Payment Receipts')}

{t('tax_compliant_invoices', 'Tax Compliant invoices')}
{invoices.map((inv) => (
{inv.plan} ({inv.id})
Billed: {inv.date}
{inv.amount}
{inv.status}
))}
{/* Sponsor Billing Details Form */}

{t('corporate_details', 'Corporate Details')}

{t('update_tax_invoicing', 'Update tax invoicing options.')}

setBillingEmail(e.target.value)} className="w-full p-2.5 border border-slate-200 rounded-xl bg-slate-50/50" />
{/* Interactive PayTabs Checkout Modal Overlay */} {showPayTabsModal && selectedPlan && (
{/* PayTabs Header */}
{t('paytabs_secured_checkout', 'PayTabs Secured Checkout')}
{t('gateway_version', 'Gateway v4.0')}
{/* Order Summary */}
{t('order_description', 'Order description')}
{selectedPlan.name} Subscription
{t('total_amount', 'Total amount')}
{selectedPlan.price}
{/* PayTabs CC Form */}
setCardName(e.target.value)} className="w-full p-2.5 border border-slate-300 rounded-xl" required />
setCardNumber(e.target.value.replace(/\D/g, ''))} className="w-full p-2.5 border border-slate-300 rounded-xl font-mono text-sm" required />
setCardExpiry(e.target.value)} className="w-full p-2.5 border border-slate-300 rounded-xl" required />
setCardCvv(e.target.value.replace(/\D/g, ''))} className="w-full p-2.5 border border-slate-300 rounded-xl font-mono text-sm" required />
{t('pci_dss_cryptography', '256-bit PCI DSS Cryptography Protected')}
)} ); }