Initial commit – Cursa de la Cirera 2026 e-commerce
Next.js 14 + Prisma + Stripe + Google Sheets + Nodemailer
This commit is contained in:
@@ -0,0 +1,220 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useSearchParams } from 'next/navigation'
|
||||
import { Suspense } from 'react'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { CheckCircle, Package, Truck, CalendarCheck, ArrowLeft } from 'lucide-react'
|
||||
|
||||
const PRODUCT_NAMES: Record<string, string> = {
|
||||
samarreta: 'Samarreta Cursa de la Cirera 2026',
|
||||
mitjons: 'Mitjons Cursa de la Cirera 2026',
|
||||
pack: 'Pack Samarreta + Mitjons',
|
||||
}
|
||||
|
||||
interface OrderData {
|
||||
orderNumber: string
|
||||
nom: string
|
||||
cognoms: string
|
||||
email: string
|
||||
product: string
|
||||
sizeTshirt?: string
|
||||
sizeSocks?: string
|
||||
shipping: string
|
||||
totalAmount: number
|
||||
}
|
||||
|
||||
function SuccessContent() {
|
||||
const params = useSearchParams()
|
||||
const sessionId = params.get('session_id')
|
||||
const [order, setOrder] = useState<OrderData | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
if (!sessionId) { setLoading(false); return }
|
||||
|
||||
// Poll a bit to give webhook time to process
|
||||
let attempts = 0
|
||||
const maxAttempts = 8
|
||||
|
||||
async function fetchOrder() {
|
||||
attempts++
|
||||
try {
|
||||
const res = await fetch(`/api/orders/by-session?session_id=${sessionId}`)
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
if (data.order) {
|
||||
setOrder(data.order)
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// ignore, will retry
|
||||
}
|
||||
if (attempts < maxAttempts) {
|
||||
setTimeout(fetchOrder, 1500)
|
||||
} else {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
fetchOrder()
|
||||
}, [sessionId])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 border-4 border-teal border-t-transparent rounded-full animate-spin mx-auto mb-4" />
|
||||
<p className="text-slate-400">Confirmant el teu pagament...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col">
|
||||
{/* Header */}
|
||||
<header className="border-b border-dark-border bg-dark/90 py-3">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 flex items-center gap-3">
|
||||
<Image
|
||||
src="/assets/LOGO BLOD BROS SPORT GOTA RODONA ALTA RES.jpg"
|
||||
alt="Blood Bros Sport"
|
||||
width={40}
|
||||
height={40}
|
||||
className="rounded-full"
|
||||
/>
|
||||
<span className="text-white font-bold text-sm">Blood Bros Sport</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 flex items-center justify-center py-12 px-4">
|
||||
<div className="max-w-lg w-full text-center">
|
||||
{/* Success icon */}
|
||||
<div className="relative inline-flex mb-6">
|
||||
<div
|
||||
className="absolute inset-0 rounded-full blur-2xl opacity-30 scale-150"
|
||||
style={{ background: 'radial-gradient(circle, #00C8DC, transparent)' }}
|
||||
/>
|
||||
<CheckCircle size={80} className="relative text-teal" />
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl font-black text-white mb-3">
|
||||
Comanda<br />
|
||||
<span className="text-teal">confirmada!</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-slate-400 text-base mb-8">
|
||||
{order
|
||||
? `Gràcies ${order.nom}! Hem rebut la teva comanda i en breu rebràs la confirmació per email a ${order.email}.`
|
||||
: 'El teu pagament ha estat processat correctament. Rebràs la confirmació per email en breu.'}
|
||||
</p>
|
||||
|
||||
{order && (
|
||||
<div className="bg-dark-card border border-dark-border rounded-2xl overflow-hidden mb-8 text-left">
|
||||
{/* Order number */}
|
||||
<div className="bg-teal/10 border-b border-dark-border p-5 text-center">
|
||||
<p className="text-slate-500 text-xs uppercase tracking-widest mb-1">Número de comanda</p>
|
||||
<p className="text-teal text-3xl font-black tracking-wider">{order.orderNumber}</p>
|
||||
<p className="text-slate-600 text-xs mt-1">Guarda'l per a consultes futures</p>
|
||||
</div>
|
||||
|
||||
{/* Order details */}
|
||||
<div className="p-5 space-y-3">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-slate-500">Producte</span>
|
||||
<span className="text-white font-semibold">{PRODUCT_NAMES[order.product] ?? order.product}</span>
|
||||
</div>
|
||||
{(order.sizeTshirt || order.sizeSocks) && (
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-slate-500">Talles</span>
|
||||
<span className="text-white font-semibold">
|
||||
{[
|
||||
order.sizeTshirt && `Samarreta ${order.sizeTshirt}`,
|
||||
order.sizeSocks && `Mitjons ${order.sizeSocks}`,
|
||||
].filter(Boolean).join(' · ')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-slate-500">Lliurament</span>
|
||||
<span className="text-white font-semibold">
|
||||
{order.shipping === 'correos' ? 'Correos Express' : 'Recollida Corbins/Lleida'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="border-t border-dark-border pt-3 flex justify-between">
|
||||
<span className="text-white font-black">TOTAL</span>
|
||||
<span className="text-teal font-black text-xl">
|
||||
{order.totalAmount.toFixed(2).replace('.', ',')}€
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Timeline */}
|
||||
<div className="flex flex-col gap-3 mb-8 text-left">
|
||||
<div className="flex items-start gap-4 p-4 bg-dark-card border border-teal/30 rounded-xl">
|
||||
<CheckCircle size={20} className="text-teal shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-white font-semibold text-sm">Pagament confirmat</p>
|
||||
<p className="text-slate-500 text-xs">El teu pagament s'ha processat correctament via Stripe.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-4 p-4 bg-dark-card border border-dark-border rounded-xl">
|
||||
<Package size={20} className="text-slate-500 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-slate-400 font-semibold text-sm">Preparació de la comanda</p>
|
||||
<p className="text-slate-600 text-xs">A partir del 25 de juny, quan es tanquin les comandes.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-4 p-4 bg-dark-card border border-dark-border rounded-xl">
|
||||
<Truck size={20} className="text-slate-500 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-slate-400 font-semibold text-sm">Enviament / Recollida</p>
|
||||
<p className="text-slate-600 text-xs">Rebràs una notificació quan la teva comanda surti.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-4 p-4 bg-dark-card border border-dark-border rounded-xl">
|
||||
<CalendarCheck size={20} className="text-slate-500 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-slate-400 font-semibold text-sm">Lliurament previst: 29 Juny – 3 Juliol 2026</p>
|
||||
<p className="text-slate-600 text-xs">Amb temps per a la Cursa de la Cirera!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-flex items-center gap-2 text-teal hover:text-white transition-colors text-sm"
|
||||
>
|
||||
<ArrowLeft size={16} />
|
||||
Tornar a la botiga
|
||||
</Link>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer className="border-t border-dark-border py-4 text-center">
|
||||
<p className="text-slate-700 text-xs">
|
||||
© 2026 Blood Bros Sport · Cursa de la Cirera · Corbins, Lleida
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function SuccessPage() {
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="w-12 h-12 border-4 border-teal border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<SuccessContent />
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user