357 lines
14 KiB
TypeScript
357 lines
14 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
import { motion, AnimatePresence } from 'framer-motion';
|
||
import { FaTimes, FaCreditCard, FaLock, FaUniversity } from 'react-icons/fa';
|
||
import { Album } from '@/lib/types';
|
||
import { formatPrice } from '@/lib/utils';
|
||
|
||
type PaymentMethod = 'ipg' | 'card-to-card';
|
||
|
||
interface PaymentModalProps {
|
||
album: Album | null;
|
||
onClose: () => void;
|
||
onSuccess: (albumId: string, transactionId: string) => void;
|
||
}
|
||
|
||
export default function PaymentModal({ album, onClose, onSuccess }: PaymentModalProps) {
|
||
const [paymentMethod, setPaymentMethod] = useState<PaymentMethod>('ipg');
|
||
const [cardNumber, setCardNumber] = useState('');
|
||
const [cardName, setCardName] = useState('');
|
||
const [phoneNumber, setPhoneNumber] = useState('');
|
||
const [email, setEmail] = useState('');
|
||
const [txReceipt, setTxReceipt] = useState('');
|
||
const [processing, setProcessing] = useState(false);
|
||
const [error, setError] = useState('');
|
||
|
||
const formatCardNumber = (value: string) => {
|
||
const numbers = value.replace(/\s/g, '');
|
||
const groups = numbers.match(/.{1,4}/g);
|
||
return groups ? groups.join(' ') : numbers;
|
||
};
|
||
|
||
const formatPhoneNumber = (value: string) => {
|
||
// Remove all non-digits
|
||
let numbers = value.replace(/\D/g, '');
|
||
|
||
// Remove leading 98 if user types it (we'll add +98 prefix)
|
||
if (numbers.startsWith('98')) {
|
||
numbers = numbers.slice(2);
|
||
}
|
||
|
||
// Limit to 10 digits (Iranian mobile number length)
|
||
numbers = numbers.slice(0, 10);
|
||
|
||
// Format as +98 XXXX XXX XXXX
|
||
if (numbers.length === 0) return '';
|
||
if (numbers.length <= 4) return `+98 ${numbers}`;
|
||
if (numbers.length <= 7) return `+98 ${numbers.slice(0, 4)} ${numbers.slice(4)}`;
|
||
return `+98 ${numbers.slice(0, 4)} ${numbers.slice(4, 7)} ${numbers.slice(7)}`;
|
||
};
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setError('');
|
||
|
||
// Basic validation
|
||
if (!cardName.trim()) {
|
||
setError('Name is required');
|
||
return;
|
||
}
|
||
|
||
// Validate Iranian phone number (should have 10 digits after +98)
|
||
const phoneDigits = phoneNumber.replace(/\D/g, '');
|
||
// Remove the country code (98) if present to get local number
|
||
const localNumber = phoneDigits.startsWith('98') ? phoneDigits.slice(2) : phoneDigits;
|
||
if (localNumber.length !== 10 || !localNumber.startsWith('9')) {
|
||
setError('Invalid phone number. Must start with 9 and have 10 digits');
|
||
return;
|
||
}
|
||
|
||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||
if (!emailRegex.test(email)) {
|
||
setError('Invalid email address');
|
||
return;
|
||
}
|
||
|
||
// Validate based on payment method
|
||
if (paymentMethod === 'card-to-card') {
|
||
if (cardNumber.replace(/\s/g, '').length !== 16) {
|
||
setError('Invalid card number');
|
||
return;
|
||
}
|
||
if (!txReceipt.trim()) {
|
||
setError('Transaction receipt is required');
|
||
return;
|
||
}
|
||
}
|
||
|
||
if (!album) return;
|
||
|
||
setProcessing(true);
|
||
|
||
try {
|
||
// Handle IPG payment
|
||
if (paymentMethod === 'ipg') {
|
||
const response = await fetch('/api/payment/initiate', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
albumId: album.id,
|
||
amount: album.price,
|
||
customerName: cardName.trim(),
|
||
email: email.trim(),
|
||
phoneNumber: phoneNumber,
|
||
}),
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (!response.ok) {
|
||
throw new Error(data.error || 'Failed to initiate payment');
|
||
}
|
||
|
||
// Redirect to ZarinPal payment gateway
|
||
window.location.href = data.paymentUrl;
|
||
return;
|
||
}
|
||
|
||
// Handle card-to-card payment
|
||
const transactionId = txReceipt.trim() || 'TXN-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9).toUpperCase();
|
||
|
||
// Create purchase via API (pending approval for card-to-card)
|
||
const response = await fetch('/api/purchases', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
albumId: album.id,
|
||
transactionId,
|
||
customerName: cardName.trim(),
|
||
email: email.trim(),
|
||
phoneNumber: phoneNumber,
|
||
txReceipt: txReceipt.trim(),
|
||
purchaseDate: new Date().getTime(),
|
||
approvalStatus: 'pending',
|
||
paymentMethod: 'card-to-card',
|
||
}),
|
||
});
|
||
|
||
if (!response.ok) {
|
||
const data = await response.json();
|
||
throw new Error(data.error || 'Failed to process purchase');
|
||
}
|
||
|
||
setProcessing(false);
|
||
onSuccess(album.id, transactionId);
|
||
} catch (err: any) {
|
||
setProcessing(false);
|
||
setError(err.message || 'Failed to process payment');
|
||
}
|
||
};
|
||
|
||
if (!album) return null;
|
||
|
||
return (
|
||
<AnimatePresence>
|
||
{album && (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
className="fixed inset-0 bg-paper-dark/90 backdrop-blur-sm z-50 flex items-center justify-center p-4"
|
||
onClick={onClose}
|
||
>
|
||
<motion.div
|
||
initial={{ scale: 0.9, opacity: 0 }}
|
||
animate={{ scale: 1, opacity: 1 }}
|
||
exit={{ scale: 0.9, opacity: 0 }}
|
||
onClick={(e) => e.stopPropagation()}
|
||
className="paper-card max-w-md w-full p-6 border-4 border-paper-dark shadow-paper-lg"
|
||
>
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h2 className="text-2xl font-bold text-paper-dark border-b-4 border-paper-dark inline-block pb-1">
|
||
Purchase Album
|
||
</h2>
|
||
<button
|
||
onClick={onClose}
|
||
className="p-2 hover:bg-paper-brown hover:text-paper-light border-2 border-paper-brown transition-colors"
|
||
aria-label="Close"
|
||
>
|
||
<FaTimes className="text-lg text-paper-dark" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Album Info */}
|
||
<div className="mb-4 p-3 bg-paper-light border-2 border-paper-brown">
|
||
<h3 className="font-semibold text-paper-dark">{album.title}</h3>
|
||
<p className="text-sm text-paper-gray">{album.songs.length} tracks • {album.genre}</p>
|
||
<p className="text-xl font-bold text-paper-brown mt-1">{formatPrice(album.price)}</p>
|
||
</div>
|
||
|
||
{/* Payment Method Selector */}
|
||
<div className="mb-4">
|
||
<label className="block text-sm font-medium text-paper-dark mb-2">
|
||
Payment Method / روش پرداخت
|
||
</label>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={() => setPaymentMethod('ipg')}
|
||
className={`p-3 border-2 transition-all ${
|
||
paymentMethod === 'ipg'
|
||
? 'bg-paper-brown text-paper-light border-paper-dark shadow-paper'
|
||
: 'bg-paper-light text-paper-dark border-paper-brown hover:bg-paper-sand'
|
||
}`}
|
||
>
|
||
<FaUniversity className="text-lg mx-auto mb-1" />
|
||
<div className="text-xs font-medium">IPG</div>
|
||
<div className="text-xs">درگاه پرداخت</div>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setPaymentMethod('card-to-card')}
|
||
className={`p-3 border-2 transition-all ${
|
||
paymentMethod === 'card-to-card'
|
||
? 'bg-paper-brown text-paper-light border-paper-dark shadow-paper'
|
||
: 'bg-paper-light text-paper-dark border-paper-brown hover:bg-paper-sand'
|
||
}`}
|
||
>
|
||
<FaCreditCard className="text-lg mx-auto mb-1" />
|
||
<div className="text-xs font-medium">Card to Card</div>
|
||
<div className="text-xs">کارت به کارت</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Payment Form */}
|
||
<form onSubmit={handleSubmit} className="space-y-3">
|
||
{/* Show Card Number only for card-to-card */}
|
||
{paymentMethod === 'card-to-card' && (
|
||
<div>
|
||
<label className="block text-sm font-medium text-paper-dark mb-1">
|
||
<FaCreditCard className="inline mr-2" />
|
||
Card Number
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={cardNumber}
|
||
onChange={(e) => {
|
||
const formatted = formatCardNumber(e.target.value.replace(/\D/g, '').slice(0, 16));
|
||
setCardNumber(formatted);
|
||
}}
|
||
placeholder="1234 5678 9012 3456"
|
||
className="w-full px-3 py-2 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper text-sm"
|
||
required
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* Full Name */}
|
||
<div>
|
||
<label className="block text-sm font-medium text-paper-dark mb-1">
|
||
Full Name
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={cardName}
|
||
onChange={(e) => setCardName(e.target.value)}
|
||
placeholder="John Doe"
|
||
className="w-full px-3 py-2 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper text-sm"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
{/* Phone Number */}
|
||
<div>
|
||
<label className="block text-sm font-medium text-paper-dark mb-1">
|
||
Phone Number / شماره تماس
|
||
</label>
|
||
<input
|
||
type="tel"
|
||
value={phoneNumber}
|
||
onChange={(e) => {
|
||
const formatted = formatPhoneNumber(e.target.value);
|
||
setPhoneNumber(formatted);
|
||
}}
|
||
placeholder="+98 9390 084 053"
|
||
className="w-full px-3 py-2 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper text-sm"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
{/* Email */}
|
||
<div>
|
||
<label className="block text-sm font-medium text-paper-dark mb-1">
|
||
Email Address
|
||
</label>
|
||
<input
|
||
type="email"
|
||
value={email}
|
||
onChange={(e) => setEmail(e.target.value)}
|
||
placeholder="john@example.com"
|
||
className="w-full px-3 py-2 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper text-sm"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
{/* Transaction Receipt - only for card-to-card */}
|
||
{paymentMethod === 'card-to-card' && (
|
||
<div>
|
||
<label className="block text-sm font-medium text-paper-dark mb-1">
|
||
Transaction Receipt / رسید پرداخت
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={txReceipt}
|
||
onChange={(e) => setTxReceipt(e.target.value)}
|
||
placeholder="TXN-123456789"
|
||
className="w-full px-3 py-2 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper text-sm"
|
||
required
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* Error Message */}
|
||
{error && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: -10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="p-2 bg-red-100 border-2 border-red-400 text-red-700 text-sm"
|
||
>
|
||
{error}
|
||
</motion.div>
|
||
)}
|
||
|
||
{/* Submit Button */}
|
||
<button
|
||
type="submit"
|
||
disabled={processing}
|
||
className="w-full py-3 bg-paper-brown hover:bg-paper-dark border-2 border-paper-dark font-semibold text-paper-light transition-all shadow-paper-lg disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 text-sm"
|
||
>
|
||
{processing ? (
|
||
<>
|
||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-paper-light"></div>
|
||
Processing...
|
||
</>
|
||
) : (
|
||
<>
|
||
<FaLock />
|
||
{paymentMethod === 'ipg' ? 'Proceed to Payment Gateway' : `Complete Purchase - ${formatPrice(album.price)}`}
|
||
</>
|
||
)}
|
||
</button>
|
||
|
||
{/* Security Notice */}
|
||
<p className="text-xs text-paper-gray text-center mt-2">
|
||
<FaLock className="inline mr-1" />
|
||
This is a demo payment form. No real charges will be made.
|
||
</p>
|
||
</form>
|
||
</motion.div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
);
|
||
}
|