feat:drinkkaart

apps/web/src/components/registration/SuccessScreen.tsx

@@ -1,3 +1,5 @@
+import { useState } from "react";
+
 interface Props {
 	token: string;
 	onReset: () => void;
@@ -9,6 +11,28 @@ export function SuccessScreen({ token, onReset }: Props) {
 			? `${window.location.origin}/manage/${token}`
 			: `/manage/${token}`;
 
+	const [drinkkaartPromptDismissed, setDrinkkaartPromptDismissed] = useState(
+		() => {
+			try {
+				return (
+					typeof localStorage !== "undefined" &&
+					localStorage.getItem("drinkkaart_prompt_dismissed") === "1"
+				);
+			} catch {
+				return false;
+			}
+		},
+	);
+
+	const handleDismissPrompt = () => {
+		try {
+			localStorage.setItem("drinkkaart_prompt_dismissed", "1");
+		} catch {
+			// ignore
+		}
+		setDrinkkaartPromptDismissed(true);
+	};
+
 	return (
 		<section
 			id="registration"
@@ -65,6 +89,34 @@ export function SuccessScreen({ token, onReset }: Props) {
 							Nog een inschrijving
 						</button>
 					</div>
+
+					{/* Drinkkaart account prompt */}
+					{!drinkkaartPromptDismissed && (
+						<div className="mt-8 rounded-lg border border-white/20 bg-white/10 p-6">
+							<h3 className="mb-2 font-['Intro',sans-serif] text-lg text-white">
+								Wil je een Drinkkaart?
+							</h3>
+							<p className="mb-4 text-sm text-white/70">
+								Maak een gratis account aan om je digitale Drinkkaart te
+								activeren en saldo op te laden vóór het evenement.
+							</p>
+							<div className="flex flex-wrap gap-3">
+								<a
+									href="/login"
+									className="inline-flex items-center rounded-lg bg-white px-5 py-2.5 font-['Intro',sans-serif] text-[#214e51] text-sm transition-all hover:bg-gray-100"
+								>
+									Account aanmaken
+								</a>
+								<button
+									type="button"
+									onClick={handleDismissPrompt}
+									className="text-sm text-white/50 underline underline-offset-2 transition-colors hover:text-white/80"
+								>
+									Overslaan
+								</button>
+							</div>
+						</div>
+					)}
 				</div>
 			</div>
 		</section>