feat(events): support scheduling public events in advance

.npmrc

@@ -0,0 +1 @@
+confirm-modules-purge=false

Makefile

@@ -40,7 +40,10 @@ run_all:
 run:
 	cd server/src && go install # Install first so that we keep cached build objects around.
 
-	set -a && . server/debug.env && set +a && \
+	set -a && \
+	. server/debug.env && \
+	{ [ -f .env ] && . ./.env || true; } && \
+	set +a && \
 	cd server/src && \
 	PORT=$(PORT) go run main.go
 
@@ -63,9 +66,9 @@ dev_db:
 # Note: PNPM must be installed separately for each version of NPM used, since it is installed within each NPM installation.
 # Note: `go tool` cannot yet be used to install golang-migrate: https://github.com/golang-migrate/migrate/issues/1232
 deps:
-	. $(NVM_SCRIPT) && nvm i 22 && npm i -g pnpm@$(PNPM_VERSION) && pnpm i
+	. $(NVM_SCRIPT) && nvm i 22 && npm i -g pnpm@$(PNPM_VERSION) && pnpm i --config.confirmModulesPurge=false
 	. $(NVM_SCRIPT) && cd frontend && nvm i $(VUE_FRONTEND_NODE_VERSION) && npm i --legacy-peer-deps
-	. $(NVM_SCRIPT) && cd frontend-v2 && nvm i $(REACT_FRONTEND_NODE_VERSION) && npm i -g pnpm@$(PNPM_VERSION) && pnpm i
+	. $(NVM_SCRIPT) && cd frontend-v2 && nvm i $(REACT_FRONTEND_NODE_VERSION) && npm i -g pnpm@$(PNPM_VERSION) && pnpm i --config.confirmModulesPurge=false
 	cd pkg && go mod download
 	cd server/src && go mod download
 	cd cli && go mod download

README.md

@@ -177,10 +177,20 @@ Please reach out to tech@dxe.io to get an API key to sign people up.
 
 - IPGEOLOCATION_KEY
 
-### Google Places API Key for finding city information on public-facing forms
+### Google Places API Key for finding city information on public-facing forms and the events location picker
 
 - GOOGLE_PLACES_API_KEY
 
+For local development this key is not in `server/debug.env`. To use the location
+picker locally, create a `.env` file in the repository root (it is loaded by
+`make run` on top of `server/debug.env`) containing:
+
+```
+GOOGLE_PLACES_API_KEY=...
+```
+
+This API key can be found in GCP under the dev environment.
+
 ## Logging and Monitoring
 
 In production, logs are collected in CloudWatch under a log group called `adb`.

cli/cmd/db.go

@@ -103,7 +103,9 @@ INSERT INTO activists
   VALUES
   (`+ch+`, 1000, 'nnn', 'test2@gmail.com', '', 'United States', 'Supporter', 'Petition: no-more-bad-things', '`+currentDateString(1)+`');
 
-INSERT INTO events VALUES
+INSERT INTO events
+  (id, name, date, event_type, survey_sent, suppress_survey, circle_id, chapter_id)
+  VALUES
   %s
 
 INSERT INTO event_attendance (activist_id, event_id) VALUES

frontend-v2/.npmrc

@@ -0,0 +1 @@
+confirm-modules-purge=false

frontend-v2/src/app/(authed)/events/[id]/confirmation/event-confirmation.tsx

@@ -0,0 +1,103 @@
+'use client'
+
+import Link from 'next/link'
+import { useQuery } from '@tanstack/react-query'
+import { format, parseISO } from 'date-fns'
+import {
+  CheckCircle2,
+  Users,
+  Pencil,
+  CalendarPlus,
+  Home,
+  Clock,
+  MapPin,
+  Globe,
+} from 'lucide-react'
+import { API_PATH, apiClient } from '@/lib/api'
+import { Button } from '@/components/ui/button'
+import { formatEventTimeRange } from '@/lib/time'
+
+export function EventConfirmation({ eventId }: { eventId: number }) {
+  // Hydrated by the server page (same query key as the event form), so this
+  // resolves immediately on first render.
+  const { data: event } = useQuery({
+    queryKey: [API_PATH.EVENT_GET, String(eventId)],
+    queryFn: ({ signal }) => apiClient.getEvent(eventId, signal),
+  })
+
+  const timeRange = event ? formatEventTimeRange(event) : ''
+  const locationLabel =
+    event?.location?.name || event?.location?.formatted_address
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col items-center gap-3 text-center">
+        <CheckCircle2 className="h-12 w-12 text-green-600" />
+        <div className="flex flex-col gap-1">
+          <h2 className="text-xl font-semibold">Event created</h2>
+          <p className="text-sm text-muted-foreground">
+            Your event is scheduled.
+          </p>
+        </div>
+      </div>
+
+      {event && (
+        <div className="flex flex-col gap-2 rounded-xl border bg-card p-5 shadow-sm">
+          <p className="text-base font-semibold">{event.event_name}</p>
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5 text-sm text-muted-foreground">
+            <span className="inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-xs font-medium">
+              {event.event_type}
+            </span>
+            <span>{format(parseISO(event.event_date), 'PPP')}</span>
+            {timeRange && (
+              <span className="inline-flex items-center gap-1">
+                <Clock className="h-3.5 w-3.5" />
+                {timeRange}
+              </span>
+            )}
+            {event.is_online ? (
+              <span className="inline-flex items-center gap-1">
+                <Globe className="h-3.5 w-3.5" />
+                Online
+              </span>
+            ) : (
+              locationLabel && (
+                <span className="inline-flex items-center gap-1">
+                  <MapPin className="h-3.5 w-3.5" />
+                  {locationLabel}
+                </span>
+              )
+            )}
+          </div>
+        </div>
+      )}
+
+      <div className="flex flex-col gap-2">
+        <Button asChild>
+          <Link href={`/events/${eventId}`}>
+            <Users className="h-4 w-4" />
+            Take attendance now
+          </Link>
+        </Button>
+        <Button asChild variant="outline">
+          <Link href={`/events/${eventId}?expanded=1`}>
+            <Pencil className="h-4 w-4" />
+            Edit event
+          </Link>
+        </Button>
+        <Button asChild variant="outline">
+          <Link href="/events/new">
+            <CalendarPlus className="h-4 w-4" />
+            Create another event
+          </Link>
+        </Button>
+        <Button asChild variant="ghost">
+          <Link href="/home">
+            <Home className="h-4 w-4" />
+            Done
+          </Link>
+        </Button>
+      </div>
+    </div>
+  )
+}

frontend-v2/src/app/(authed)/events/[id]/confirmation/page.tsx

@@ -0,0 +1,45 @@
+import {
+  dehydrate,
+  HydrationBoundary,
+  QueryClient,
+} from '@tanstack/react-query'
+import { notFound } from 'next/navigation'
+import { ContentWrapper } from '@/app/content-wrapper'
+import { EventConfirmation } from './event-confirmation'
+import { API_PATH, ApiClient } from '@/lib/api'
+import { getCookies } from '@/lib/auth'
+import { redirectForHttpError } from '@/lib/server-auth'
+
+// Shown right after a scheduled (public) event is created. Attendance happens
+// later, at the event, so we confirm the event is on the schedule and offer the
+// natural next steps instead of dropping the user on the attendance page.
+export default async function EventConfirmationPage({
+  params,
+}: {
+  params: Promise<{ id: string }>
+}) {
+  const { id } = await params
+  const eventId = parseInt(id)
+  if (Number.isNaN(eventId)) {
+    notFound()
+  }
+
+  const apiClient = new ApiClient(await getCookies())
+  const queryClient = new QueryClient()
+
+  await redirectForHttpError(() =>
+    // Intentionally use fetchQuery instead of prefetchQuery; see redirectForHttpError for details.
+    queryClient.fetchQuery({
+      queryKey: [API_PATH.EVENT_GET, String(eventId)],
+      queryFn: ({ signal }) => apiClient.getEvent(eventId, signal),
+    }),
+  )
+
+  return (
+    <ContentWrapper size="sm" className="gap-8">
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <EventConfirmation eventId={eventId} />
+      </HydrationBoundary>
+    </ContentWrapper>
+  )
+}

frontend-v2/src/app/(authed)/events/[id]/page.tsx

@@ -12,10 +12,12 @@ import { redirectForHttpError } from '@/lib/server-auth'
 
 export default async function EditEventPage({
   params,
+  searchParams,
 }: {
   params: Promise<{ id: string }>
+  searchParams: Promise<{ expanded?: string }>
 }) {
-  const { id } = await params
+  const [{ id }, { expanded }] = await Promise.all([params, searchParams])
   const eventId = parseInt(id)
   if (Number.isNaN(eventId)) {
     notFound()
@@ -35,8 +37,8 @@ export default async function EditEventPage({
   return (
     <ContentWrapper size="sm" className="gap-8">
       <HydrationBoundary state={dehydrate(queryClient)}>
-        <h1 className="text-3xl font-bold">Attendance</h1>
-        <EventForm mode="event" />
+        <h1 className="text-3xl font-bold">Event</h1>
+        <EventForm mode="event" startExpanded={expanded === '1'} />
       </HydrationBoundary>
     </ContentWrapper>
   )

frontend-v2/src/app/(authed)/events/event-form-schema.ts

@@ -0,0 +1,105 @@
+import { z } from 'zod'
+
+export const EVENT_TYPES = [
+  'Action',
+  'Campaign Action',
+  'Community',
+  'Frontline Surveillance',
+  'Meeting',
+  'Outreach',
+  'Animal Care',
+  'Training',
+] as const
+
+export const DEFAULT_FIELD_COUNT = 5
+export const MIN_EMPTY_FIELDS = 1
+
+export type EventFormMode = 'event' | 'connection'
+
+// Zod schema for form validation.
+export const attendeeSchema = z.object({
+  name: z.string().refine(
+    (name) => {
+      const trimmed = name.trim()
+      // Empty is ok, as it will be filtered out.
+      if (trimmed === '') return true
+      // Must have at least first and last name (contains a space).
+      return trimmed.indexOf(' ') !== -1
+    },
+    {
+      message: 'First & last name are required',
+    },
+  ),
+})
+
+export const formSchema = z
+  .object({
+    eventName: z.string().min(1, 'Event name is required'),
+    eventType: z.string().min(1, 'Event type is required'),
+    eventDate: z.string().min(1, 'Event date is required'),
+    suppressSurvey: z.boolean(),
+    attendees: z.array(attendeeSchema),
+    // Upcoming-event fields. Kept permissive here (empty string / false is
+    // valid) so the plain attendance form still passes; the stricter per-mode
+    // rules — a start time and a location for public events — are enforced by
+    // the refinements below.
+    isPublic: z.boolean(),
+    isOnline: z.boolean(),
+    description: z.string(),
+    startTime: z.string(),
+    endTime: z.string(),
+    timezone: z.string(),
+    googlePlaceId: z.string(),
+    locationName: z.string(),
+    formattedAddress: z.string(),
+    lat: z.number().optional(),
+    lng: z.number().optional(),
+    // When true, the location is entered by hand (free-text name + optional
+    // coordinates) instead of picked from Google Places — for spots that aren't
+    // a clean Place, like an intersection. Stored on the event, not deduped.
+    manualLocation: z.boolean(),
+  })
+  // TODO: events that cross midnight (end before start, e.g. an overnight
+  // vigil) can't be expressed yet — leave the end time blank for now. If this
+  // becomes a real need, add an explicit "end date" rather than inferring it.
+  .refine((v) => !(v.startTime && v.endTime) || v.endTime >= v.startTime, {
+    message: 'End time must be after start time',
+    path: ['endTime'],
+  })
+  // Publicly listed events are scheduled in advance, so a start time is required.
+  .refine((v) => !v.isPublic || Boolean(v.startTime), {
+    message: 'Start time is required for public events',
+    path: ['startTime'],
+  })
+  // In-person public events need a location; online ones don't. The Google
+  // path requires a picked place; the manual path requires a typed name.
+  .refine(
+    (v) =>
+      !v.isPublic || v.isOnline || v.manualLocation || Boolean(v.googlePlaceId),
+    {
+      message: 'Location is required for in-person public events',
+      path: ['formattedAddress'],
+    },
+  )
+  .refine(
+    (v) =>
+      !v.isPublic ||
+      v.isOnline ||
+      !v.manualLocation ||
+      v.locationName.trim() !== '',
+    {
+      message: 'Location is required for in-person public events',
+      path: ['locationName'],
+    },
+  )
+  // Manual coordinates, when provided, must be valid.
+  .refine((v) => v.lat === undefined || (v.lat >= -90 && v.lat <= 90), {
+    message: 'Latitude must be between -90 and 90',
+    path: ['lat'],
+  })
+  .refine((v) => v.lng === undefined || (v.lng >= -180 && v.lng <= 180), {
+    message: 'Longitude must be between -180 and 180',
+    path: ['lng'],
+  })
+
+export type FormValues = z.infer<typeof formSchema>