import React, { useState } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import axios from 'axios'; import { toast } from 'sonner'; import { CreditCard, Check, X, Lock, ArrowRight, Users, TrendingUp, MessageSquare, Loader2, Sparkles, ShieldCheck } from 'lucide-react'; export default function RegisterPayment({ email, plans }) { const [selectedPlan, setSelectedPlan] = useState(null); const [showPayTabsModal, setShowPayTabsModal] = useState(false); const [loading, setLoading] = useState(false); // Card inputs for PayTabs Gateway const [cardName, setCardName] = useState(''); const [cardNumber, setCardNumber] = useState(''); const [cardExpiry, setCardExpiry] = useState(''); const [cardCvv, setCardCvv] = useState(''); const handleSelectPlan = (plan) => { setSelectedPlan(plan); setShowPayTabsModal(true); }; const handlePayTabsSubmit = async (e) => { e.preventDefault(); if (cardNumber.length < 16) { toast.error("💳 Invalid card number format"); return; } setLoading(true); setShowPayTabsModal(false); try { const simulatedTxnId = 'TXN-' + Math.random().toString(36).substr(2, 9).toUpperCase(); await axios.post('/employer/register-payment', { plan_id: selectedPlan.id, amount_aed: parseFloat(selectedPlan.price), paytabs_transaction_id: simulatedTxnId }); toast.success(`🎉 Payment Approved by PayTabs!`, { description: `Successfully registered for ${selectedPlan.name}. Now let's finalize your password setup.`, duration: 5000, }); router.visit('/employer/create-password'); } catch (err) { toast.error("Payment failed. Please try again."); } finally { setLoading(false); } }; const renderStepIndicator = () => (
{[ { step: 1, label: 'Register' }, { step: 2, label: 'Verify' }, { step: 3, label: 'Emirates ID' }, { step: 4, label: 'Payment' }, { step: 5, label: 'Password' } ].map((s) => (
{s.step}
{s.step === 4 && ( {s.label} )}
{s.step < 5 && (
)} ))}
); return (
{/* Left Brand Panel */}
M
Migrant Portal
Step 4: Subscription Plan

Purchase annual subscription to access.

Unlock candidate contact details, direct messages, and complete MOHRE TADBEER compliant digital dossiers.

{/* Stat Row */}
3000+
Worker Profiles
550+
Avg Monthly Hires
Direct
Messaging
© 2026 Migrant. All rights reserved.
{/* Right Payment View */}
{renderStepIndicator()}

Sponsor Subscription

Select and purchase a premium pass

{plans.map((plan) => (

{plan.name}

{plan.price} / month
    {plan.features.slice(0, 3).map(f => (
  • {f}
    • ))}
))}
{/* Interactive PayTabs Checkout Modal Overlay */} {showPayTabsModal && selectedPlan && (
{/* PayTabs Header */}
PayTabs Secured Checkout
Gateway v4.0
{/* Order Summary */}
Order description
{selectedPlan.name} Subscription
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 />
256-bit PCI DSS Cryptography Protected
)}
); }