Add frontend waitlist support for events

miiiyyi · miiiyyi · commit cbe6ac4c0de8 · 2026-04-27T21:04:44.000-07:00
diff --git a/src/APIFunctions/SCEvents.js b/src/APIFunctions/SCEvents.js
@@ -141,3 +141,28 @@ export async function registerForSCEvent(eventId, token, payload) {
 
   return status;
 }
+
+export async function joinWaitlistForSCEvent(eventId, token) {
+  const status = new ApiResponse();
+
+  try {
+    const res = await fetch(`${SCEVENTS_API_URL}/events/${eventId}/waitlist`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    const body = await res.json();
+    status.responseData = body;
+
+    if (!res.ok) {
+      status.error = true;
+    }
+  } catch (err) {
+    status.error = true;
+    status.responseData = err;
+  }
+
+  return status;
+}
diff --git a/src/Pages/Events/CalendarView.js b/src/Pages/Events/CalendarView.js
@@ -1,6 +1,6 @@
 import React, { useState, useMemo, useEffect, useRef } from 'react';
 import { Link } from 'react-router-dom';
-import { getEventAttendanceSummary } from '../../APIFunctions/SCEvents';
+import { getEventAttendanceSummary, joinWaitlistForSCEvent } from '../../APIFunctions/SCEvents';
 
 // ─── tiny helpers ────────────────────────────────────────────────────────────
 
@@ -281,6 +281,9 @@ function EventPopup({ event, onClose, isAdminView, user }) {
   const [attendeeCount, setAttendeeCount] = useState(null);
   const [attendanceLoading, setAttendanceLoading] = useState(false);
   const [attendanceLoaded, setAttendanceLoaded] = useState(false);
+  const [waitlistSubmitting, setWaitlistSubmitting] = useState(false);
+  const [waitlistMessage, setWaitlistMessage] = useState('');
+  const [waitlistError, setWaitlistError] = useState('');
   const canEditEvent =
     Array.isArray(event.admins) &&
     userId &&
@@ -292,6 +295,13 @@ function EventPopup({ event, onClose, isAdminView, user }) {
       ? Math.max(maxAttendees - attendeeCount, 0)
       : null;
   const registrationCta = getRegistrationCta(event);
+  const isFull = hasCapacityLimit && typeof remainingSpots === 'number' && remainingSpots <= 0;
+  const shouldShowWaitlistJoin =
+    !canEditEvent &&
+    event.status === 'published' &&
+    !registrationCta.disabled &&
+    isFull &&
+    !!event.waitlist_enabled;
 
   useEffect(() => {
     function onKey(e) {
@@ -342,6 +352,41 @@ function EventPopup({ event, onClose, isAdminView, user }) {
     };
   }, [eventId, authToken]);
 
+  async function handleJoinWaitlist() {
+    setWaitlistError('');
+    setWaitlistMessage('');
+  
+    if (!authToken) {
+      setWaitlistError('You must be logged in to join the waitlist.');
+      return;
+    }
+  
+    if (!eventId) {
+      setWaitlistError('Missing event id.');
+      return;
+    }
+  
+    setWaitlistSubmitting(true);
+    const response = await joinWaitlistForSCEvent(eventId, authToken);
+    setWaitlistSubmitting(false);
+  
+    if (response.error) {
+      let msg = '';
+      const data = response.responseData;
+  
+      if (data && typeof data === 'object' && data.error) {
+        msg = String(data.error);
+      } else if (typeof data === 'string' && data.trim()) {
+        msg = data.trim();
+      }
+  
+      setWaitlistError(msg || 'Failed to join waitlist.');
+      return;
+    }
+  
+    setWaitlistMessage('Joined waitlist successfully.');
+  }
+  
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4">
       <div
@@ -424,7 +469,7 @@ function EventPopup({ event, onClose, isAdminView, user }) {
             <p className="text-center text-xs text-slate-400">
               {attendeeCount} {attendeeCount === 1 ? 'person' : 'people'} registered
               {event.waitlist_enabled && (
-                <span className="ml-1 text-amber-300">· waitlist enabled</span>
+                <span className="ml-1 text-amber-300">· waitlist available</span>
               )}
             </p>
           )}
@@ -433,7 +478,7 @@ function EventPopup({ event, onClose, isAdminView, user }) {
             <p className="text-center text-xs text-slate-400">
               {remainingSpots} spot{remainingSpots !== 1 ? 's' : ''} left
               {event.waitlist_enabled && (
-                <span className="ml-1 text-amber-300">· waitlist enabled</span>
+                <span className="ml-1 text-amber-300">· waitlist available</span>
               )}
             </p>
           )}
@@ -483,7 +528,18 @@ function EventPopup({ event, onClose, isAdminView, user }) {
             </div>
           )}
 
-          {!canEditEvent && event.status === 'published' && !registrationCta.disabled && (
+          {shouldShowWaitlistJoin && (
+            <button
+              type="button"
+              onClick={handleJoinWaitlist}
+              disabled={waitlistSubmitting}
+              className="inline-flex w-full items-center justify-center rounded-xl bg-gradient-to-r from-amber-500 to-orange-500 px-6 py-2.5 text-sm font-semibold text-white transition-all duration-200 hover:from-amber-400 hover:to-orange-400 disabled:cursor-not-allowed disabled:opacity-70"
+            >
+              {waitlistSubmitting ? 'Joining waitlist...' : 'Join waitlist'}
+            </button>
+          )}
+
+          {!shouldShowWaitlistJoin && !canEditEvent && event.status === 'published' && !registrationCta.disabled && (
             <Link
               to={`/events/${event.id}/register`}
               className="inline-flex w-full items-center justify-center rounded-xl bg-gradient-to-r from-sky-500 to-indigo-500 px-6 py-2.5 text-sm font-semibold text-white transition-all duration-200 hover:from-sky-400 hover:to-indigo-400 focus:outline-none focus:ring-2 focus:ring-sky-500"
@@ -492,6 +548,14 @@ function EventPopup({ event, onClose, isAdminView, user }) {
               {registrationCta.label}
             </Link>
           )}
+
+          {waitlistError && (
+            <p className="text-center text-xs text-red-300">{waitlistError}</p>
+          )}
+
+          {waitlistMessage && (
+            <p className="text-center text-xs text-emerald-300">{waitlistMessage}</p>
+          )}
         </div>
       </div>
     </div>
diff --git a/src/Pages/Events/CreateEventPage.js b/src/Pages/Events/CreateEventPage.js
@@ -89,6 +89,8 @@ export default function CreateEventPage() {
   const [visibility, setVisibility] = useState('public');
   const [minimumVisibleRole, setMinimumVisibleRole] = useState('');
   const [maxAttendees, setMaxAttendees] = useState(UNLIMITED_ATTENDEES);
+  const [waitlistEnabled, setWaitlistEnabled] = useState(false);
+  const [waitlistSize, setWaitlistSize] = useState(10);
   const [questions, setQuestions] = useState(defaultQuestions);
   const [submitError, setSubmitError] = useState('');
   const [submitting, setSubmitting] = useState(false);
@@ -184,6 +186,10 @@ export default function CreateEventPage() {
     if (maxAttendees !== UNLIMITED_ATTENDEES && (maxAttendees === '' || maxAttendees <= 0)) {
       setSubmitError('Please enter a valid max attendees, or check "No limit".');
     }
+    if (waitlistEnabled && (!waitlistSize || Number(waitlistSize) <= 0)) {
+      setSubmitError('Please enter a valid waitlist size.');
+      return;
+    }
 
     const payload = {
       id: eventId,
@@ -200,6 +206,8 @@ export default function CreateEventPage() {
       status,
       visibility,
       minimum_visible_role: visibility === 'private' ? minimumVisibleRole : '',
+      waitlist_enabled: waitlistEnabled,
+      waitlist_size: waitlistEnabled ? Number(waitlistSize) : 0,
     };
 
     setSubmitting(true);
@@ -364,6 +372,51 @@ export default function CreateEventPage() {
           </div>
         </div>
 
+        <div>
+          <div className="label">
+            <span className="label-text">Waitlist</span>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <div className="max-w-xs">
+              {waitlistEnabled ? (
+                <input
+                  type="number"
+                  min="1"
+                  className="w-full input input-bordered"
+                  value={waitlistSize}
+                  onChange={(e) => setWaitlistSize(e.target.value ? parseInt(e.target.value, 10) : '')}
+                  placeholder="e.g. 20"
+                />
+              ) : (
+                <input
+                  type="text"
+                  className="w-full input input-bordered"
+                  value=""
+                  disabled
+                  placeholder="e.g. 20"
+                />
+              )}
+            </div>
+
+            <label className="flex gap-2 items-center text-sm cursor-pointer label">
+              <input
+                type="checkbox"
+                className="checkbox checkbox-sm"
+                checked={waitlistEnabled}
+                onChange={(e) => setWaitlistEnabled(e.target.checked)}
+              />
+              <span className="label-text font-medium">Enable waitlist</span>
+            </label>
+          </div>
+
+          {waitlistEnabled && (
+            <p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
+              Maximum number of users allowed on the waitlist.
+            </p>
+          )}
+        </div>
+
         <div className="grid gap-4 sm:grid-cols-2">
           <label className="w-full form-control">
             <div className="label">
diff --git a/src/Pages/Events/EditEventPage.js b/src/Pages/Events/EditEventPage.js
@@ -58,6 +58,8 @@ export default function EditEventPage() {
   const [visibility, setVisibility] = useState('public');
   const [minimumVisibleRole, setMinimumVisibleRole] = useState('');
   const [maxAttendees, setMaxAttendees] = useState(UNLIMITED_ATTENDEES);
+  const [waitlistEnabled, setWaitlistEnabled] = useState(false);
+  const [waitlistSize, setWaitlistSize] = useState(10);
   const [questions, setQuestions] = useState([]);
   const [eventAdmins, setEventAdmins] = useState([]);
 
@@ -93,6 +95,10 @@ export default function EditEventPage() {
       setMaxAttendees(
         typeof evt.max_attendees === 'number' ? evt.max_attendees : UNLIMITED_ATTENDEES,
       );
+      setWaitlistEnabled(!!evt.waitlist_enabled);
+      setWaitlistSize(
+        typeof evt.waitlist_size === 'number' && evt.waitlist_size > 0 ? evt.waitlist_size : 10,
+      );
       setQuestions(evt.registration_form || []);
       setEventAdmins(evt.admins || []);
     }
@@ -182,6 +188,11 @@ export default function EditEventPage() {
       return;
     }
 
+    if (waitlistEnabled && (!waitlistSize || Number(waitlistSize) <= 0)) {
+      setSubmitError('Please enter a valid waitlist size.');
+      return;
+    }
+
     const payload = {
       name: eventName.trim(),
       date,
@@ -194,6 +205,8 @@ export default function EditEventPage() {
       status,
       visibility,
       minimum_visible_role: visibility === 'private' ? minimumVisibleRole : '',
+      waitlist_enabled: waitlistEnabled,
+      waitlist_size: waitlistEnabled ? Number(waitlistSize) : 0,
     };
 
     setSubmitting(true);
@@ -371,6 +384,51 @@ export default function EditEventPage() {
           />
         </div>
 
+        <div>
+          <div className="label">
+            <span className="label-text">Waitlist</span>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <div className="max-w-xs">
+              {waitlistEnabled ? (
+                <input
+                  type="number"
+                  min="1"
+                  className="w-full input input-bordered"
+                  value={waitlistSize}
+                  onChange={(e) => setWaitlistSize(e.target.value ? parseInt(e.target.value, 10) : '')}
+                  placeholder="e.g. 20"
+                />
+              ) : (
+                <input
+                  type="text"
+                  className="w-full input input-bordered"
+                  value=""
+                  disabled
+                  placeholder="e.g. 20"
+                />
+              )}
+            </div>
+
+            <label className="flex gap-2 items-center text-sm cursor-pointer label">
+              <input
+                type="checkbox"
+                className="checkbox checkbox-sm"
+                checked={waitlistEnabled}
+                onChange={(e) => setWaitlistEnabled(e.target.checked)}
+              />
+              <span className="label-text font-medium">Enable waitlist</span>
+            </label>
+          </div>
+
+          {waitlistEnabled && (
+            <p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
+              Maximum number of users allowed on the waitlist.
+            </p>
+          )}
+        </div>
+
         <div className="grid gap-4 sm:grid-cols-2">
           <label className="w-full form-control">
             <div className="label">
