diff --git a/apps/web/src/components/homepage/EventRegistrationForm.tsx b/apps/web/src/components/homepage/EventRegistrationForm.tsx index fbcb12d..613b82d 100644 --- a/apps/web/src/components/homepage/EventRegistrationForm.tsx +++ b/apps/web/src/components/homepage/EventRegistrationForm.tsx @@ -5,8 +5,128 @@ import { CountdownBanner } from "@/components/homepage/CountdownBanner"; import { PerformerForm } from "@/components/registration/PerformerForm"; import { TypeSelector } from "@/components/registration/TypeSelector"; import { WatcherForm } from "@/components/registration/WatcherForm"; +import { POSTPONED } from "@/lib/opening"; import { useRegistrationOpen } from "@/lib/useRegistrationOpen"; -import { orpc } from "@/utils/orpc"; +import { client, orpc } from "@/utils/orpc"; + +function PostponedBanner() { + const [email, setEmail] = useState(""); + const [status, setStatus] = useState< + "idle" | "loading" | "subscribed" | "error" + >("idle"); + const [errorMessage, setErrorMessage] = useState(""); + + async function handleSubmit(e: React.FormEvent) { + e.preventDefault(); + if (!email || status === "loading") return; + setStatus("loading"); + try { + await client.subscribeReminder({ email }); + setStatus("subscribed"); + } catch (err) { + setErrorMessage(err instanceof Error ? err.message : "Er ging iets mis."); + setStatus("error"); + } + } + + return ( +
+ De Open Mic Night van 24 april gaat helaas niet door op de geplande datum. We werken aan een nieuwe datum en laten je zo snel mogelijk weten wanneer het evenement plaatsvindt. +
++ Schrijf je in op de wachtlijst +
++ Ontvang een e-mail zodra de nieuwe datum bekend is. +
+ + {status === "subscribed" ? ( ++ Je staat op de wachtlijst! We houden je op de hoogte. +
++ {errorMessage} +
+ )} +
- VRIJDAG 24
-
- april
-
+ UITGESTELD +
+ ) : ( +
+ VRIJDAG 24
+
+ april
+
- VRIJDAG
-
- 24 april
-
+ UITGESTELD +
+ ) : ( +
+ VRIJDAG
+
+ 24 april
+
+ Wachtlijst +
+ + {waitlistQuery.data.length} + +| Ingeschreven op | +|
|---|---|
| {row.email} | ++ {new Date(row.createdAt).toLocaleString("nl-BE", { + day: "numeric", + month: "short", + year: "numeric", + hour: "2-digit", + minute: "2-digit", + })} + | +