zias/kunstenkamp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(registration): add watcher capacity limits and update pricing

Browse Source 
Add 70-person capacity limit for watchers with real-time availability checks.
Update drink card pricing to €5 per person (was €5 base + €2 per guest).
Add feature flag to bypass registration countdown.
Show under-review notice for performer registrations.
Update FAQ performance duration from 5-7 to 5 minutes.
This commit is contained in:
ッ
2026-03-14 19:36:16 +01:00
parent 3a2e403ee9
commit 0d99f7c5f5
11 changed files with 162 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
apps/web/src/components/registration/PerformerForm.tsx
View File

@@ -441,6 +441,33 @@ export function PerformerForm({ onBack, onSuccess }: Props) {
<GiftSelector value={giftAmount} onChange={setGiftAmount} />
</div>
{/* Under review notice */}
<div className="flex items-start gap-3 rounded-lg border border-amber-400/30 bg-amber-400/10 p-4">
<svg
className="mt-0.5 h-5 w-5 shrink-0 text-amber-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={1.5}
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
/>
</svg>
<div>
<p className="font-semibold text-amber-300 text-sm">
Jouw inschrijving staat onder voorbehoud
</p>
<p className="mt-1 text-sm text-white/70">
Na het indienen wordt je aanvraag beoordeeld. Je ontvangt een
bevestiging of je effectief uitgenodigd wordt om op te treden.
</p>
</div>
</div>
<div className="flex flex-col items-center gap-4 pt-4">
<button
type="submit"

85
apps/web/src/components/registration/TypeSelector.tsx
View File

@@ -2,9 +2,15 @@ type RegistrationType = "performer" | "watcher";
interface Props {
onSelect: (type: RegistrationType) => void;
watcherIsFull?: boolean;
watcherAvailable?: number | null;
}
export function TypeSelector({ onSelect }: Props) {
export function TypeSelector({
onSelect,
watcherIsFull = false,
watcherAvailable = null,
}: Props) {
return (
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{/* Performer card */}
@@ -59,10 +65,17 @@ export function TypeSelector({ onSelect }: Props) {
{/* Watcher card */}
<button
type="button"
onClick={() => onSelect("watcher")}
className="group relative flex flex-col overflow-hidden border border-white/20 bg-white/5 p-8 text-left transition-all duration-300 hover:border-white/50 hover:bg-white/10 md:p-10"
onClick={() => !watcherIsFull && onSelect("watcher")}
disabled={watcherIsFull}
className={`group relative flex flex-col overflow-hidden border p-8 text-left transition-all duration-300 md:p-10 ${
watcherIsFull
? "cursor-not-allowed border-white/10 bg-white/3 opacity-60"
: "border-white/20 bg-white/5 hover:border-white/50 hover:bg-white/10"
}`}
>
<div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-teal-400 to-cyan-400 opacity-80" />
<div
className={`absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-teal-400 to-cyan-400 ${watcherIsFull ? "opacity-30" : "opacity-80"}`}
/>
<div className="mb-6 flex h-14 w-14 items-center justify-center rounded-full bg-teal-400/15 text-teal-300">
<svg
className="h-7 w-7"
@@ -83,31 +96,47 @@ export function TypeSelector({ onSelect }: Props) {
Ik wil komen kijken
</h3>
<p className="mb-4 text-white/70">
Geniet van een avond vol talent en kunst. Je betaald 5EUR inkom dat je
mag gebruiken op je drinkkaart.
Geniet van een avond vol talent en kunst. Je betaalt €5 per persoon —
dit gaat volledig naar je drinkkaart.
</p>
<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-teal-400/40 bg-teal-400/10 px-4 py-1.5">
<span className="font-semibold text-sm text-teal-300">
Drinkkaart 5 EUR te betalen bij registratie
</span>
</div>
<div className="mt-auto flex items-center gap-2 font-medium text-sm text-teal-300">
<span>Inschrijven als bezoeker</span>
<svg
className="h-4 w-4 transition-transform group-hover:translate-x-1"
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>
</div>
{watcherIsFull ? (
<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-red-400/40 bg-red-400/10 px-4 py-1.5">
<span className="font-semibold text-red-300 text-sm">
Volzet — geen plaatsen meer beschikbaar
</span>
</div>
) : (
<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-teal-400/40 bg-teal-400/10 px-4 py-1.5">
<span className="font-semibold text-sm text-teal-300">
€5 per persoon — drinkkaart inbegrepen
{watcherAvailable !== null && watcherAvailable <= 10 && (
<span className="ml-1 text-amber-300">
({watcherAvailable}{" "}
{watcherAvailable === 1 ? "plaats" : "plaatsen"} vrij)
</span>
)}
</span>
</div>
)}
{!watcherIsFull && (
<div className="mt-auto flex items-center gap-2 font-medium text-sm text-teal-300">
<span>Inschrijven als bezoeker</span>
<svg
className="h-4 w-4 transition-transform group-hover:translate-x-1"
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>
</div>
)}
</button>
</div>
);

2
apps/web/src/components/registration/WatcherForm.tsx
View File

@@ -227,7 +227,7 @@ export function WatcherForm({ onBack, onSuccess }: Props) {
<p className="font-semibold text-white">Drinkkaart inbegrepen</p>
<p className="text-sm text-white/70">
Je betaald bij registratie
<strong className="text-teal-300">€5</strong> (+ €2 per
<strong className="text-teal-300"> €5</strong> (+ €5 per
medebezoeker) dat gaat naar je drinkkaart.
{guests.length > 0 && (
<span className="ml-1 font-semibold text-teal-300">