feat:UX and fix drinkkaart payment logic
This commit is contained in:
392
apps/web/src/routes/account.tsx
Normal file
392
apps/web/src/routes/account.tsx
Normal file
@@ -0,0 +1,392 @@
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
|
||||
import {
|
||||
Calendar,
|
||||
CreditCard,
|
||||
Music,
|
||||
QrCode,
|
||||
Users,
|
||||
Wallet,
|
||||
} from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { QrCodeDisplay } from "@/components/drinkkaart/QrCodeDisplay";
|
||||
import { TopUpHistory } from "@/components/drinkkaart/TopUpHistory";
|
||||
import { TopUpModal } from "@/components/drinkkaart/TopUpModal";
|
||||
import { TransactionHistory } from "@/components/drinkkaart/TransactionHistory";
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
import { formatCents } from "@/lib/drinkkaart";
|
||||
import { client, orpc } from "@/utils/orpc";
|
||||
|
||||
interface AccountSearch {
|
||||
topup?: string;
|
||||
welkom?: string;
|
||||
}
|
||||
|
||||
export const Route = createFileRoute("/account")({
|
||||
validateSearch: (search: Record<string, unknown>): AccountSearch => ({
|
||||
topup: typeof search.topup === "string" ? search.topup : undefined,
|
||||
welkom: typeof search.welkom === "string" ? search.welkom : undefined,
|
||||
}),
|
||||
component: AccountPage,
|
||||
});
|
||||
|
||||
function PaymentBadge({ status }: { status: string | null }) {
|
||||
if (status === "paid") {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-green-500/20 px-2 py-0.5 font-medium text-green-300 text-xs">
|
||||
<svg
|
||||
className="h-3 w-3"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2.5}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Betaald
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (status === "extra_payment_pending") {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-yellow-500/20 px-2 py-0.5 font-medium text-xs text-yellow-300">
|
||||
Extra betaling verwacht
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-orange-500/20 px-2 py-0.5 font-medium text-orange-300 text-xs">
|
||||
In behandeling
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function AccountPage() {
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const search = Route.useSearch();
|
||||
const [showQr, setShowQr] = useState(false);
|
||||
const [showTopUp, setShowTopUp] = useState(false);
|
||||
|
||||
const sessionQuery = useQuery({
|
||||
queryKey: ["session"],
|
||||
queryFn: () => authClient.getSession(),
|
||||
});
|
||||
|
||||
// Client-side auth check: redirect to login if not authenticated
|
||||
useEffect(() => {
|
||||
if (!sessionQuery.isLoading && !sessionQuery.data?.data?.user) {
|
||||
navigate({ to: "/login" });
|
||||
}
|
||||
}, [sessionQuery.isLoading, sessionQuery.data, navigate]);
|
||||
|
||||
const drinkkaartQuery = useQuery(
|
||||
orpc.drinkkaart.getMyDrinkkaart.queryOptions(),
|
||||
);
|
||||
|
||||
const registrationQuery = useQuery(orpc.getMyRegistration.queryOptions());
|
||||
|
||||
// Handle topup=success redirect (from Lemon Squeezy returning to /account)
|
||||
useEffect(() => {
|
||||
if (search.topup === "success") {
|
||||
toast.success("Oplading geslaagd! Je saldo is bijgewerkt.");
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: orpc.drinkkaart.getMyDrinkkaart.key(),
|
||||
});
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.delete("topup");
|
||||
window.history.replaceState({}, "", url.toString());
|
||||
}
|
||||
}, [search.topup, queryClient]);
|
||||
|
||||
// Silent background call to claim any pending registration fee credit.
|
||||
// This catches cases where: webhook didn't fire/failed, or user signed up after paying.
|
||||
// No UI feedback needed — if there's nothing to claim, it does nothing.
|
||||
useEffect(() => {
|
||||
client.claimRegistrationCredit().catch((err) => {
|
||||
console.error("claimRegistrationCredit failed:", err);
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Welcome toast after fresh signup
|
||||
useEffect(() => {
|
||||
if (search.welkom === "1") {
|
||||
toast.success("Welkom! Je account is aangemaakt.");
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.delete("welkom");
|
||||
window.history.replaceState({}, "", url.toString());
|
||||
}
|
||||
}, [search.welkom]);
|
||||
|
||||
const user = sessionQuery.data?.data?.user as
|
||||
| { name?: string; email?: string }
|
||||
| undefined;
|
||||
|
||||
const registration = registrationQuery.data;
|
||||
const drinkkaart = drinkkaartQuery.data;
|
||||
|
||||
const isLoading =
|
||||
sessionQuery.isLoading ||
|
||||
drinkkaartQuery.isLoading ||
|
||||
registrationQuery.isLoading;
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-[#214e51]">
|
||||
<div className="h-10 w-10 animate-spin rounded-full border-2 border-white/20 border-t-white" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<main className="mx-auto max-w-5xl px-4 py-12">
|
||||
{/* Page header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="mb-1 font-['Intro',sans-serif] text-4xl text-white">
|
||||
Mijn Account
|
||||
</h1>
|
||||
<p className="text-white/50">
|
||||
{user?.name && (
|
||||
<span className="mr-2 font-medium text-white/70">
|
||||
{user.name}
|
||||
</span>
|
||||
)}
|
||||
{user?.email}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
{/* ── Left column: Registration ── */}
|
||||
<section>
|
||||
<h2 className="mb-3 flex items-center gap-2 font-['Intro',sans-serif] text-lg text-white/80">
|
||||
<Calendar className="h-4 w-4 shrink-0 text-white/40" />
|
||||
Mijn Inschrijving
|
||||
</h2>
|
||||
|
||||
{registration ? (
|
||||
<div className="rounded-2xl border border-white/10 bg-white/5 p-6">
|
||||
{/* Type badge */}
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{registration.registrationType === "performer" ? (
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full bg-amber-500/20 px-3 py-1 font-medium text-amber-300 text-sm">
|
||||
<Music className="h-3.5 w-3.5" />
|
||||
Artiest
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full bg-teal-500/20 px-3 py-1 font-medium text-sm text-teal-300">
|
||||
<Users className="h-3.5 w-3.5" />
|
||||
Bezoeker
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<PaymentBadge status={registration.paymentStatus} />
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<p className="mb-1 font-medium text-lg text-white">
|
||||
{registration.firstName} {registration.lastName}
|
||||
</p>
|
||||
|
||||
{/* Art form (performer only) */}
|
||||
{registration.registrationType === "performer" &&
|
||||
registration.artForm && (
|
||||
<p className="mb-1 text-sm text-white/60">
|
||||
Kunstvorm:{" "}
|
||||
<span className="text-white/80">
|
||||
{registration.artForm}
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Guests (watcher only) */}
|
||||
{registration.registrationType === "watcher" &&
|
||||
registration.guests.length > 0 && (
|
||||
<p className="mb-1 text-sm text-white/60">
|
||||
{registration.guests.length + 1} personen (jij +{" "}
|
||||
{registration.guests.length} gast
|
||||
{registration.guests.length > 1 ? "en" : ""})
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Drink card value */}
|
||||
{registration.registrationType === "watcher" &&
|
||||
(registration.drinkCardValue ?? 0) > 0 && (
|
||||
<p className="mb-1 text-sm text-white/60">
|
||||
Drinkkaart:{" "}
|
||||
<span className="text-white/80">
|
||||
€{registration.drinkCardValue}
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Gift */}
|
||||
{(registration.giftAmount ?? 0) > 0 && (
|
||||
<p className="mb-1 text-sm text-white/60">
|
||||
Gift:{" "}
|
||||
<span className="text-white/80">
|
||||
€{(registration.giftAmount ?? 0) / 100}
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Date */}
|
||||
<p className="mt-3 text-white/40 text-xs">
|
||||
Ingeschreven op{" "}
|
||||
{new Date(registration.createdAt).toLocaleDateString(
|
||||
"nl-BE",
|
||||
{
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
},
|
||||
)}
|
||||
</p>
|
||||
|
||||
{/* Action */}
|
||||
{registration.managementToken && (
|
||||
<div className="mt-5">
|
||||
<Link
|
||||
to="/manage/$token"
|
||||
params={{ token: registration.managementToken }}
|
||||
className="inline-flex items-center gap-2 rounded-lg bg-white/10 px-4 py-2 text-sm text-white transition-colors hover:bg-white/20"
|
||||
>
|
||||
Beheer inschrijving
|
||||
<svg
|
||||
className="h-3.5 w-3.5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-2xl border border-white/10 bg-white/5 p-6">
|
||||
<p className="mb-3 text-sm text-white/60">
|
||||
We vonden geen actieve inschrijving voor dit e-mailadres.
|
||||
</p>
|
||||
<a
|
||||
href="/#registration"
|
||||
className="inline-flex items-center gap-2 rounded-lg bg-white/10 px-4 py-2 text-sm text-white transition-colors hover:bg-white/20"
|
||||
>
|
||||
Inschrijven voor het evenement
|
||||
<svg
|
||||
className="h-3.5 w-3.5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* ── Right column: Drinkkaart ── */}
|
||||
<section>
|
||||
<h2 className="mb-3 flex items-center gap-2 font-['Intro',sans-serif] text-lg text-white/80">
|
||||
<CreditCard className="h-4 w-4 shrink-0 text-white/40" />
|
||||
Mijn Drinkkaart
|
||||
</h2>
|
||||
|
||||
{/* Balance card */}
|
||||
<div className="mb-4 rounded-2xl border border-white/10 bg-white/5 p-6">
|
||||
<p className="mb-1 text-sm text-white/50">Huidig saldo</p>
|
||||
<p className="mb-4 font-['Intro',sans-serif] text-5xl text-white">
|
||||
{drinkkaart ? formatCents(drinkkaart.balance) : "—"}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowQr((v) => !v)}
|
||||
className="inline-flex items-center gap-2 rounded-lg border border-white/30 bg-transparent px-4 py-2 text-sm text-white transition-colors hover:bg-white/10"
|
||||
>
|
||||
<QrCode className="h-4 w-4" />
|
||||
{showQr ? "Verberg QR-code" : "Toon QR-code"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowTopUp(true)}
|
||||
className="inline-flex items-center gap-2 rounded-lg bg-white px-4 py-2 font-semibold text-[#214e51] text-sm transition-colors hover:bg-white/90"
|
||||
>
|
||||
<Wallet className="h-4 w-4" />
|
||||
Opladen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* QR code */}
|
||||
{showQr && (
|
||||
<div className="mb-4 flex justify-center rounded-2xl border border-white/10 bg-white/5 p-6">
|
||||
<QrCodeDisplay />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Top-up history */}
|
||||
<section className="mb-6">
|
||||
<h3 className="mb-2 font-medium text-sm text-white/50 uppercase tracking-wider">
|
||||
Opladingen
|
||||
</h3>
|
||||
{drinkkaart ? (
|
||||
<TopUpHistory
|
||||
topups={
|
||||
drinkkaart.topups as Parameters<
|
||||
typeof TopUpHistory
|
||||
>[0]["topups"]
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<p className="text-sm text-white/40">Laden...</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Transaction history */}
|
||||
<section>
|
||||
<h3 className="mb-2 font-medium text-sm text-white/50 uppercase tracking-wider">
|
||||
Transacties
|
||||
</h3>
|
||||
{drinkkaart ? (
|
||||
<TransactionHistory
|
||||
transactions={
|
||||
drinkkaart.transactions as Parameters<
|
||||
typeof TransactionHistory
|
||||
>[0]["transactions"]
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<p className="text-sm text-white/40">Laden...</p>
|
||||
)}
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{showTopUp && <TopUpModal onClose={() => setShowTopUp(false)} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user