Update site changes
This commit is contained in:
Michilis
@@ -160,6 +160,13 @@ export default function BookingPage() {
|
||||
router.push('/events');
|
||||
return;
|
||||
}
|
||||
|
||||
// Redirect to external booking if enabled
|
||||
if (eventRes.event.externalBookingEnabled && eventRes.event.externalBookingUrl) {
|
||||
window.location.href = eventRes.event.externalBookingUrl;
|
||||
return;
|
||||
}
|
||||
|
||||
setEvent(eventRes.event);
|
||||
setPaymentConfig(paymentRes.paymentOptions);
|
||||
|
||||
@@ -696,6 +703,34 @@ export default function BookingPage() {
|
||||
<p className="font-mono font-bold text-lg">{bookingResult.qrCode}</p>
|
||||
</div>
|
||||
|
||||
{/* Manual verification notice */}
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
|
||||
<div className="flex gap-3">
|
||||
<div className="flex-shrink-0">
|
||||
<svg className="w-5 h-5 text-blue-600 mt-0.5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-sm text-blue-800">
|
||||
<p className="font-medium mb-1">
|
||||
{locale === 'es' ? 'Verificación manual' : 'Manual verification'}
|
||||
</p>
|
||||
<p className="text-blue-700">
|
||||
{locale === 'es'
|
||||
? 'El equipo de Spanglish revisará el pago manualmente. Tu reserva solo será confirmada después de recibir un email de confirmación de nuestra parte.'
|
||||
: 'The Spanglish team will review the payment manually. Your booking is only confirmed after you receive a confirmation email from us.'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Warning before I Have Paid button */}
|
||||
<p className="text-sm text-center text-amber-700 font-medium mb-3">
|
||||
{locale === 'es'
|
||||
? 'Solo haz clic aquí después de haber completado el pago.'
|
||||
: 'Only click this after you have actually completed the payment.'}
|
||||
</p>
|
||||
|
||||
{/* I Have Paid Button */}
|
||||
<Button
|
||||
onClick={handleMarkPaymentSent}
|
||||
@@ -1016,48 +1051,90 @@ export default function BookingPage() {
|
||||
: 'No payment methods available for this event.'}
|
||||
</div>
|
||||
) : (
|
||||
paymentMethods.map((method) => (
|
||||
<button
|
||||
key={method.id}
|
||||
type="button"
|
||||
onClick={() => setFormData({ ...formData, paymentMethod: method.id })}
|
||||
className={`w-full p-4 rounded-lg border-2 transition-all text-left flex items-start gap-4 ${
|
||||
formData.paymentMethod === method.id
|
||||
? 'border-primary-yellow bg-primary-yellow/10'
|
||||
: 'border-secondary-light-gray hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
|
||||
formData.paymentMethod === method.id
|
||||
? 'bg-primary-yellow'
|
||||
: 'bg-gray-100'
|
||||
}`}>
|
||||
<method.icon className={`w-5 h-5 ${
|
||||
<>
|
||||
{paymentMethods.map((method) => (
|
||||
<button
|
||||
key={method.id}
|
||||
type="button"
|
||||
onClick={() => setFormData({ ...formData, paymentMethod: method.id })}
|
||||
className={`w-full p-4 rounded-lg border-2 transition-all text-left flex items-start gap-4 ${
|
||||
formData.paymentMethod === method.id
|
||||
? 'text-primary-dark'
|
||||
: 'text-gray-500'
|
||||
}`} />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="font-medium text-primary-dark">{method.label}</p>
|
||||
{method.badge && (
|
||||
<span className={`text-xs px-2 py-0.5 rounded-full ${
|
||||
method.badge === 'Instant' || method.badge === 'Instantáneo'
|
||||
? 'bg-green-100 text-green-700'
|
||||
: 'bg-gray-100 text-gray-600'
|
||||
}`}>
|
||||
{method.badge}
|
||||
</span>
|
||||
)}
|
||||
? 'border-primary-yellow bg-primary-yellow/10'
|
||||
: 'border-secondary-light-gray hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
|
||||
formData.paymentMethod === method.id
|
||||
? 'bg-primary-yellow'
|
||||
: 'bg-gray-100'
|
||||
}`}>
|
||||
<method.icon className={`w-5 h-5 ${
|
||||
formData.paymentMethod === method.id
|
||||
? 'text-primary-dark'
|
||||
: 'text-gray-500'
|
||||
}`} />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="font-medium text-primary-dark">{method.label}</p>
|
||||
{method.badge && (
|
||||
<span className={`text-xs px-2 py-0.5 rounded-full ${
|
||||
method.badge === 'Instant' || method.badge === 'Instantáneo'
|
||||
? 'bg-green-100 text-green-700'
|
||||
: 'bg-gray-100 text-gray-600'
|
||||
}`}>
|
||||
{method.badge}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-gray-500">{method.description}</p>
|
||||
</div>
|
||||
{formData.paymentMethod === method.id && (
|
||||
<CheckCircleIcon className="w-6 h-6 text-primary-yellow ml-auto flex-shrink-0" />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
|
||||
{/* Manual payment instructions - shown when TPago or Bank Transfer is selected */}
|
||||
{(formData.paymentMethod === 'tpago' || formData.paymentMethod === 'bank_transfer') && (
|
||||
<div className="mt-4 p-4 bg-amber-50 border border-amber-200 rounded-lg">
|
||||
<div className="flex gap-3">
|
||||
<div className="flex-shrink-0">
|
||||
<svg className="w-5 h-5 text-amber-600 mt-0.5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-sm text-amber-800">
|
||||
<p className="font-medium mb-1">
|
||||
{locale === 'es' ? 'Proceso de pago manual' : 'Manual payment process'}
|
||||
</p>
|
||||
<ol className="list-decimal list-inside space-y-1 text-amber-700">
|
||||
<li>
|
||||
{locale === 'es'
|
||||
? 'Por favor completa el pago primero.'
|
||||
: 'Please complete the payment first.'}
|
||||
</li>
|
||||
<li>
|
||||
{locale === 'es'
|
||||
? 'Después de pagar, haz clic en "Ya pagué" para notificarnos.'
|
||||
: 'After you have paid, click "I have paid" to notify us.'}
|
||||
</li>
|
||||
<li>
|
||||
{locale === 'es'
|
||||
? 'Nuestro equipo verificará el pago manualmente.'
|
||||
: 'Our team will manually verify the payment.'}
|
||||
</li>
|
||||
<li>
|
||||
{locale === 'es'
|
||||
? 'Una vez aprobado, recibirás un email confirmando tu reserva.'
|
||||
: 'Once approved, you will receive an email confirming your booking.'}
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500">{method.description}</p>
|
||||
</div>
|
||||
{formData.paymentMethod === method.id && (
|
||||
<CheckCircleIcon className="w-6 h-6 text-primary-yellow ml-auto flex-shrink-0" />
|
||||
)}
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user