Merge branch 'feat/early-bird-ribbon'

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project follows [Semantic Versioning](https://semver.org/).
 
 ## [Unreleased]
 
+## [1.32.0] - 2026-10-22
+
+### Added
+
+- Event cards on the home page and events list show a diagonal "Early bird" ribbon in the top-right corner while the event has an early-bird tier running (deadline not passed and places left on that tier). It isn't shown when the event is sold out, registration is closed or not open yet, or the event is contact-only.
+
 ## [1.31.1] - 2026-10-22
 
 ### Added

FEATURES.md

@@ -56,7 +56,9 @@ Four roles, each including everything the roles below it can do:
   and in-progress events, and a "Join Us" button (becomes "My Dashboard" when
   logged in).
 - **Events list** (`/events`) — event cards with picture, dates, location,
-  price, and a Register / Sold Out / Contact us button.
+  price, and a Register / Sold Out / Contact us button. A diagonal "Early bird"
+  ribbon in the top-right corner while an early-bird tier is running and
+  registration is open.
 - **Event detail** (`/events/[id]`) — description, ticket options with
   variant and early-bird pricing, low-stock and sold-out badges, downloadable
   attachments, embedded Google Map with "Directions" link, and an

backend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "event-management-backend",
-  "version": "1.31.1",
+  "version": "1.32.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "event-management-backend",
-      "version": "1.31.1",
+      "version": "1.32.0",
       "hasInstallScript": true,
       "dependencies": {
         "@prisma/adapter-pg": "^7.10.1",

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "event-management-backend",
-  "version": "1.31.1",
+  "version": "1.32.0",
   "description": "Event Management System Backend",
   "main": "src/index.js",
   "scripts": {

backend/src/controllers/eventController.js

@@ -190,6 +190,45 @@ const createEvent = async (req, res) => {
   }
 };
 
+// Map of eventId → when its early bird ends, for events with at least one early-bird
+// tier still running: deadline not passed and (no stock limit, or places left, counted
+// across tranches the same way as utils/pricing.js). The date is the latest deadline
+// among the running tiers.
+async function earlyBirdEndsByEvent(events) {
+  const now = new Date();
+  const running = [];
+  for (const ev of events) {
+    for (const opt of ev.eventOptions || []) {
+      for (const tier of opt.earlyBirdTiers || []) {
+        if (new Date(tier.deadline) > now) running.push({ eventId: ev.id, tier });
+      }
+    }
+  }
+
+  const limitedIds = running.filter(r => r.tier.stockLimit > 0).map(r => r.tier.id);
+  const sold = new Map();
+  if (limitedIds.length > 0) {
+    const totals = await prisma.registrationOptionTranche.groupBy({
+      by: ['appliedTierId'],
+      where: {
+        appliedTierId: { in: limitedIds },
+        registrationOption: { registration: { status: { not: 'cancelled' } } }
+      },
+      _sum: { quantity: true }
+    });
+    for (const t of totals) sold.set(t.appliedTierId, t._sum?.quantity || 0);
+  }
+
+  const ends = new Map();
+  for (const { eventId, tier } of running) {
+    if (tier.stockLimit > 0 && (sold.get(tier.id) || 0) >= tier.stockLimit) continue;
+    const deadline = new Date(tier.deadline);
+    const current = ends.get(eventId);
+    if (!current || deadline > current) ends.set(eventId, deadline);
+  }
+  return ends;
+}
+
 // @desc    Get all events
 // @route   GET /api/events
 // @access  Public
@@ -220,9 +259,12 @@ const getEvents = async (req, res) => {
       });
     }
 
+    const earlyBirdEnds = await earlyBirdEndsByEvent(events).catch(() => new Map());
+
     // Compute isSoldOut per event: true when every option that has a stock limit
     // is fully sold out. Events with no limited options are never sold out.
     const withStock = await Promise.all(events.map(async ev => {
+      const earlyBirdEndsAt = earlyBirdEnds.get(ev.id) || null;
       try {
         const limitedOpts = (ev.eventOptions || []).filter(o => (o.stockLimit || 0) > 0);
         let isSoldOut = false;
@@ -231,9 +273,9 @@ const getEvents = async (req, res) => {
           const soldCounts = await Promise.all(limitedOpts.map(opt => takenCount({ eventOptionId: opt.id })));
           isSoldOut = limitedOpts.every((opt, i) => soldCounts[i] >= opt.stockLimit);
         }
-        return { ...ev, picture: toAbsoluteUrl(req, ev.picture), isSoldOut };
+        return { ...ev, picture: toAbsoluteUrl(req, ev.picture), isSoldOut, earlyBirdEndsAt };
       } catch {
-        return { ...ev, picture: toAbsoluteUrl(req, ev.picture), isSoldOut: false };
+        return { ...ev, picture: toAbsoluteUrl(req, ev.picture), isSoldOut: false, earlyBirdEndsAt };
       }
     }));
 

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "hope-events-frontend",
-  "version": "1.31.1",
+  "version": "1.32.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "hope-events-frontend",
-      "version": "1.31.1",
+      "version": "1.32.0",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@hookform/resolvers": "^5.2.1",

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hope-events-frontend",
-  "version": "1.31.1",
+  "version": "1.32.0",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",

frontend/src/components/events/EventCard.tsx

@@ -19,6 +19,8 @@ import { ContactButton } from "@/components/events/ContactButton";
    contactPhone?: string | null;
    contactEmail?: string | null;
    location?: string | null;
+   // Set by GET /api/events while an early-bird tier is still running.
+   earlyBirdEndsAt?: string | null;
 };
 
 import { formatDateTimeRange } from "@/lib/date";
@@ -26,9 +28,30 @@ import { formatDateTimeRange } from "@/lib/date";
 export const EventCard = ({ event }: { event: Event }) => {
     const dateRange = formatDateTimeRange(event.startDate, event.endDate);
 
+    const now = new Date();
+    const deadline = event.registrationDeadline ? new Date(event.registrationDeadline) : null;
+    const goLive = event.goLiveAt ? new Date(event.goLiveAt) : null;
+    const registrationOpen = event.requiresRegistration !== false
+      && !(goLive && now < goLive)
+      && !(deadline && now >= deadline)
+      && now < new Date(event.endDate);
+    const showEarlyBird = !!event.earlyBirdEndsAt && registrationOpen && !event.isSoldOut;
+
     return (
-        <div className="border rounded-xl overflow-hidden shadow-sm hover:shadow-md hover:border-brand-200 transition">
+        <div className="relative border rounded-xl overflow-hidden shadow-sm hover:shadow-md hover:border-brand-200 transition">
+            {showEarlyBird && (
+                <div className="pointer-events-none absolute top-0 right-0 z-10 h-32 w-32 overflow-hidden" aria-hidden="true">
+                    <div className="absolute top-[26px] -right-[38px] w-[150px] rotate-45 bg-amber-400 py-1 text-center text-xs font-bold uppercase tracking-wide text-amber-950 shadow-md">
+                        Early bird
+                    </div>
+                </div>
+            )}
             <a href={`/events/${event.id}`} className="block">
+                {showEarlyBird && (
+                    <span className="sr-only">
+                        Early bird pricing until {new Date(event.earlyBirdEndsAt!).toLocaleDateString("en-GB", { day: "numeric", month: "long" })}.
+                    </span>
+                )}
                 {event.picture ? (
                     <ApiImage src={event.picture} alt={event.title} className="h-48 w-full object-cover" />
                 ) : (

frontend/src/content/help/supervisor-event-options.tsx

@@ -20,7 +20,7 @@ export const supervisorEventOptionsHelpContent: HelpContent = {
           <p>Pick an event, then edit each option&apos;s name, price, and &quot;Main ticket&quot; flag directly in the list — changes save when you click away from the field. Use the form below the list to add a new option.</p>
           <div className="space-y-4">
             <GuideItem icon={Tag} title="Early-bird tiers" tone="amber">
-              Expand &quot;Manage early-bird tiers&quot; on an option to add deadline-and-price rows that apply automatically before the cutoff.
+              Expand &quot;Manage early-bird tiers&quot; on an option to add deadline-and-price rows that apply automatically before the cutoff. While a tier is running (before its deadline, with places left), the event&apos;s card on the home page and events list shows an &quot;Early bird&quot; ribbon in the top-right corner.
             </GuideItem>
           </div>
         </div>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "hope-events",
-  "version": "1.31.1",
+  "version": "1.32.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "hope-events",
-      "version": "1.31.1",
+      "version": "1.32.0",
       "license": "ISC",
       "devDependencies": {
         "concurrently": "^9.2.1"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hope-events",
-  "version": "1.31.1",
+  "version": "1.32.0",
   "main": "index.js",
   "scripts": {
     "dev:backend": "cd backend && npm run dev",