 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/domains/lavocat.ca/private_html/src/pages/ |
import React, { useState, useEffect } from 'react';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import PaymentForm from '../components/payments/PaymentForm';
import FinancialDashboard from '../components/payments/FinancialDashboard';
import LayoutWithSidebar from '../components/LayoutWithSidebar';
interface Case {
id: string;
title: string;
description: string;
leadLawyer: {
id: string;
name: string;
hourlyRate?: number;
};
}
export default function PaymentDemo() {
const { data: session, status } = useSession();
const router = useRouter();
const [cases, setCases] = useState<Case[]>([]);
const [selectedCase, setSelectedCase] = useState<Case | null>(null);
const [paymentAmount, setPaymentAmount] = useState<number>(500);
const [showPaymentForm, setShowPaymentForm] = useState(false);
const [showDashboard, setShowDashboard] = useState(false);
const [paymentSuccess, setPaymentSuccess] = useState(false);
useEffect(() => {
if (status === 'unauthenticated') {
router.push('/auth/login');
} else if (session) {
fetchPublicCases();
}
}, [session, status, router]);
const fetchPublicCases = async () => {
try {
const response = await fetch('/api/public/cases?limit=5');
if (response.ok) {
const data = await response.json();
setCases(data.cases || []);
if (data.cases && data.cases.length > 0) {
setSelectedCase(data.cases[0]);
}
}
} catch (error) {
console.error('Error fetching cases:', error);
}
};
const handlePaymentSuccess = (result: any) => {
console.log('Payment successful:', result);
setPaymentSuccess(true);
setShowPaymentForm(false);
// Show success message and redirect
setTimeout(() => {
setShowDashboard(true);
}, 2000);
};
const handlePaymentError = (error: string) => {
console.error('Payment error:', error);
alert(`Payment failed: ${error}`);
};
if (status === 'loading') {
return (
<LayoutWithSidebar>
<div className="min-h-screen flex items-center justify-center">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
</div>
</LayoutWithSidebar>
);
}
if (!session) {
return null;
}
if (showDashboard) {
return (
<LayoutWithSidebar>
<div className="min-h-screen bg-gray-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="mb-6">
<button
onClick={() => setShowDashboard(false)}
className="flex items-center text-blue-600 hover:text-blue-800"
>
<svg className="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
</svg>
Back to Payment Demo
</button>
</div>
<FinancialDashboard />
</div>
</div>
</LayoutWithSidebar>
);
}
return (
<LayoutWithSidebar>
<div className="min-h-screen bg-gray-50 py-12">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{/* Header */}
<div className="text-center mb-12">
<h1 className="text-4xl font-bold text-gray-900 mb-4">
💳 Payment System Demo
</h1>
<p className="text-xl text-gray-600">
Test the complete payment flow with Stripe integration, escrow management, and Society benefits
</p>
<div className="mt-4 inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
<svg className="h-4 w-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
</svg>
Phase 3A: Full Payment System Implementation
</div>
</div>
{/* Success Message */}
{paymentSuccess && (
<div className="mb-8 bg-green-50 border border-green-200 rounded-md p-4">
<div className="flex">
<svg className="h-5 w-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
</svg>
<div className="ml-3">
<h3 className="text-sm font-medium text-green-800">Payment Successful!</h3>
<p className="text-sm text-green-700 mt-1">
Your payment has been processed and placed in escrow. XP points have been awarded to your account.
</p>
</div>
</div>
</div>
)}
{/* Action Buttons */}
<div className="flex justify-center space-x-4 mb-12">
<button
onClick={() => setShowDashboard(true)}
className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium"
>
🏦 View Financial Dashboard
</button>
<button
onClick={() => setShowPaymentForm(!showPaymentForm)}
className="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 font-medium"
>
{showPaymentForm ? 'Hide Payment Form' : '💳 Make Test Payment'}
</button>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Case Selection and Payment Setup */}
<div className="bg-white rounded-lg shadow-lg p-6">
<h2 className="text-2xl font-semibold text-gray-900 mb-6">
💼 Select Case for Payment
</h2>
{cases.length === 0 ? (
<div className="text-center py-8 text-gray-500">
<svg className="h-12 w-12 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<p>No cases available. Please create some cases first.</p>
</div>
) : (
<>
{/* Case Selection */}
<div className="mb-6">
<label className="block text-sm font-medium text-gray-700 mb-2">
Choose a Case:
</label>
<select
value={selectedCase?.id || ''}
onChange={(e) => {
const caseId = e.target.value;
const foundCase = cases.find(c => c.id === caseId);
setSelectedCase(foundCase || null);
}}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
>
{cases.map((legalCase) => (
<option key={legalCase.id} value={legalCase.id}>
{legalCase.title}
</option>
))}
</select>
</div>
{/* Selected Case Details */}
{selectedCase && (
<div className="mb-6 p-4 bg-gray-50 rounded-lg">
<h3 className="font-semibold text-gray-900 mb-2">{selectedCase.title}</h3>
<p className="text-sm text-gray-600 mb-2">{selectedCase.description}</p>
<div className="flex items-center justify-between text-sm">
<span className="text-gray-500">Lead Lawyer:</span>
<span className="font-medium">{selectedCase.leadLawyer.name}</span>
</div>
{selectedCase.leadLawyer.hourlyRate && (
<div className="flex items-center justify-between text-sm">
<span className="text-gray-500">Hourly Rate:</span>
<span className="font-medium">${selectedCase.leadLawyer.hourlyRate}/hr</span>
</div>
)}
</div>
)}
{/* Payment Amount */}
<div className="mb-6">
<label className="block text-sm font-medium text-gray-700 mb-2">
Payment Amount (CAD):
</label>
<input
type="number"
value={paymentAmount}
onChange={(e) => setPaymentAmount(Number(e.target.value))}
min="50"
max="10000"
step="50"
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
<p className="text-xs text-gray-500 mt-1">
Minimum: $50 | Maximum: $10,000
</p>
</div>
</>
)}
</div>
{/* Payment Form */}
<div className="bg-white rounded-lg shadow-lg p-6">
<h2 className="text-2xl font-semibold text-gray-900 mb-6">
💳 Payment Details
</h2>
{showPaymentForm && selectedCase ? (
<PaymentForm
caseId={selectedCase.id}
lawyerId={selectedCase.leadLawyer.id}
amount={paymentAmount}
description={`Payment for case: ${selectedCase.title}`}
onSuccess={handlePaymentSuccess}
onError={handlePaymentError}
/>
) : (
<div className="text-center py-12 text-gray-500">
<svg className="h-16 w-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
</svg>
<p className="text-lg font-medium mb-2">Ready to Make Payment?</p>
<p className="text-sm">Select a case and click "Make Test Payment" to proceed.</p>
</div>
)}
</div>
</div>
{/* Features Overview */}
<div className="mt-16 bg-white rounded-lg shadow-lg p-8">
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
🚀 Advanced Payment Features
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div className="text-center">
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4">
<svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
<h3 className="font-semibold text-gray-900 mb-2">Secure Escrow</h3>
<p className="text-sm text-gray-600">Funds held securely until case milestones are met</p>
</div>
<div className="text-center">
<div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-4">
<svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 className="font-semibold text-gray-900 mb-2">Society Benefits</h3>
<p className="text-sm text-gray-600">Automatic fee discounts based on your Society tier</p>
</div>
<div className="text-center">
<div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-4">
<svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
</svg>
</div>
<h3 className="font-semibold text-gray-900 mb-2">XP Rewards</h3>
<p className="text-sm text-gray-600">Earn experience points for every payment made</p>
</div>
<div className="text-center">
<div className="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mx-auto mb-4">
<svg className="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
</div>
<h3 className="font-semibold text-gray-900 mb-2">Analytics</h3>
<p className="text-sm text-gray-600">Track all payments and financial metrics</p>
</div>
</div>
</div>
</div>
</div>
</LayoutWithSidebar>
);
}