add a become member button if not member

This commit is contained in:
Kruille 2026-02-23 21:56:14 +01:00
parent 3c036a4891
commit 9596da0983
2 changed files with 48 additions and 15 deletions

View file

@ -50,6 +50,7 @@ export default function RegisterPage() {
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [message, setMessage] = useState({ type: "", text: "" }); const [message, setMessage] = useState({ type: "", text: "" });
const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({}); const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
const [showBecomeMemberCta, setShowBecomeMemberCta] = useState(false);
useEffect(() => { useEffect(() => {
fetch("/api/Content") fetch("/api/Content")
@ -164,6 +165,7 @@ export default function RegisterPage() {
} }
setFieldErrors({}); setFieldErrors({});
setShowBecomeMemberCta(false);
setIsSubmitting(true); setIsSubmitting(true);
setMessage({ type: "info", text: "Processing your registration..." }); setMessage({ type: "info", text: "Processing your registration..." });
@ -218,6 +220,7 @@ export default function RegisterPage() {
type: "success", type: "success",
text: "Registration complete! You are now registered for the LAN.", text: "Registration complete! You are now registered for the LAN.",
}); });
setShowBecomeMemberCta(!isMember);
await fetch(`/api/Registration/register/${normalizedSsn}`, { await fetch(`/api/Registration/register/${normalizedSsn}`, {
method: "POST", method: "POST",
@ -243,13 +246,27 @@ export default function RegisterPage() {
return ( return (
<div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8"> <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-2xl mx-auto bg-white p-8 rounded-xl shadow-md"> <div className="max-w-2xl mx-auto bg-white p-8 rounded-xl shadow-md">
<div className="mb-6"> <div className="mb-3">
<Link <button
href="/" type="button"
className="text-blue-600 hover:text-blue-800 flex items-center gap-1 text-sm font-medium" onClick={() => router.push("/")}
className="inline-flex items-center gap-1 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
> >
Back to Information <span></span>
</Link> <span className="sm:hidden">Tillbaka</span>
<span className="hidden sm:inline">Tillbaka till information</span>
</button>
</div>
<div className="flex justify-center mb-6">
<Image
src="/vBytes_Logotyp.png"
alt="vBytes"
width={320}
height={128}
className="h-auto w-44"
priority
/>
</div> </div>
<div className="text-center mb-10"> <div className="text-center mb-10">
<h1 className="text-3xl font-bold text-gray-900">Lan Registrering</h1> <h1 className="text-3xl font-bold text-gray-900">Lan Registrering</h1>
@ -583,6 +600,17 @@ export default function RegisterPage() {
</div> </div>
)} )}
{showBecomeMemberCta && message.type === "success" && (
<a
href="https://ebas.sverok.se/blimedlem/22393"
target="_blank"
rel="noreferrer"
className="w-full inline-flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-gray-800 hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-700"
>
Klicka här för att bli medlem i vBytes
</a>
)}
<div className="pt-6"> <div className="pt-6">
<button <button
type="submit" type="submit"

View file

@ -2,7 +2,7 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import { useRouter } from "next/navigation";
interface EventContent { interface EventContent {
volunteerAreas: string; volunteerAreas: string;
@ -21,6 +21,7 @@ const isValidMobileNumber = (value: string) =>
/^07\d{8}$/.test(normalizeMobileNumber(value)); /^07\d{8}$/.test(normalizeMobileNumber(value));
export default function VolunteerPage() { export default function VolunteerPage() {
const router = useRouter();
const [content, setContent] = useState<EventContent | null>(null); const [content, setContent] = useState<EventContent | null>(null);
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
firstName: "", firstName: "",
@ -172,6 +173,18 @@ export default function VolunteerPage() {
return ( return (
<div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8"> <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-2xl mx-auto bg-white p-8 rounded-xl shadow-md"> <div className="max-w-2xl mx-auto bg-white p-8 rounded-xl shadow-md">
<div className="mb-3">
<button
type="button"
onClick={() => router.push("/")}
className="inline-flex items-center gap-1 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
>
<span></span>
<span className="sm:hidden">Tillbaka</span>
<span className="hidden sm:inline">Tillbaka till information</span>
</button>
</div>
<div className="flex justify-center mb-6"> <div className="flex justify-center mb-6">
<Image <Image
src="/vBytes_Logotyp.png" src="/vBytes_Logotyp.png"
@ -182,14 +195,6 @@ export default function VolunteerPage() {
priority priority
/> />
</div> </div>
<div className="mb-6">
<Link
href="/"
className="text-blue-600 hover:text-blue-800 flex items-center gap-1 text-sm font-medium"
>
Tillbaka till startsidan
</Link>
</div>
<div className="text-center mb-10"> <div className="text-center mb-10">
<h1 className="text-3xl font-bold text-gray-900">Bli Funktionär</h1> <h1 className="text-3xl font-bold text-gray-900">Bli Funktionär</h1>
<p className="mt-2 text-gray-600"> <p className="mt-2 text-gray-600">