[Landing] Event Announcement Popup — date/time config, Discord CTA link, PostHog events wired (PR #103 follow-up)

[basanth-p]

Parent Epic

Part of #124 — Landing Page Polish, CTA/Form/Event Tracked Flows & Backend Integration Gaps

Depends on: PR #103 (popup component) being merged. #109 (PostHog provider) must be merged for analytics calls.

---

🎯 Objective

PR #103 introduced the EventAnnouncementPopup component, but the event date, title, and Discord CTA link are hardcoded in the component. This issue makes the popup configurable, wires the PostHog events from #111, and ensures the popup doesn’t show after the event has passed.

---

🛠️ Scope

1. Make popup configurable via props (no hardcoded event data)

// components/landing/event-announcement-popup.tsx
type EventAnnouncementPopupProps = {
  eventTitle: string
  eventDate: Date           // used for auto-hide after event passes
  eventDescription?: string
  ctaLabel: string
  ctaHref: string           // Discord invite or registration link
  ctaTarget?: '_blank' | '_self'
}

• All event copy (title, description, CTA label) passed as props — NOT hardcoded in the component
• Event date/time passed as a Date prop
• Config source: define event data in lib/landing-config.ts (or equivalent) so the next event can be updated by changing one file, not hunting inside a component

2. Auto-hide after event date passes

• On mount, check new Date() > eventDate
• If event is in the past: do not show the popup at all (return null)
• This prevents the popup from showing stale event info after the event date

3. CTA link is a real Discord invite URL

• ctaHref receives the real func(kode) Discord invite URL — not # or https://discord.gg/placeholder
• Opens in a new tab: target="_blank" rel="noopener noreferrer"
• If the official Discord URL is not yet available, use a TODO constant in lib/landing-config.ts so it’s easy to find and update

4. Wire PostHog events (from #111)

• On popup mount (when it becomes visible): track(ANALYTICS_EVENTS.ANNOUNCEMENT_POPUP_SHOWN)
• On CTA click: track(ANALYTICS_EVENTS.ANNOUNCEMENT_CTA_CLICKED, { cta_label, cta_href })
• On dismiss via close button: track(ANALYTICS_EVENTS.ANNOUNCEMENT_DISMISSED, { method: 'button' })
• On dismiss via backdrop click: track(ANALYTICS_EVENTS.ANNOUNCEMENT_DISMISSED, { method: 'backdrop' })
• On dismiss via Escape key: track(ANALYTICS_EVENTS.ANNOUNCEMENT_DISMISSED, { method: 'escape' })

5. Accessibility

• Popup has role="dialog", aria-modal="true", aria-labelledby pointing to the event title
• Close button has aria-label="Close announcement"
• Focus trapped inside popup while open (or at minimum focus moves to the popup on open)
• Escape key closes popup

---

✅ Acceptance Criteria

• Popup does not render when new Date() > eventDate — no stale announcement shown
• All event copy is configurable via props — zero hardcoded strings in the component
• Discord CTA opens a real URL in a new tab
• All 5 PostHog events fire correctly (verified in PostHog Live Events)
• Accessibility checks pass: dialog role, Escape key, focus management
• npm run build passes, no type errors

[basanth-p]

Completed in PR #209 (fix/feature-stiching → dev).

What was done:

• event-announcement-popup.tsx was already fully implemented (PR feat: Event Announcement Pop-up on Landing Page — 🎉 Server Launch Party #103) — verified all requirements met:

  • ✅ All event copy (title, description, CTA label, date) passed as props via EventAnnouncementConfig — zero hardcoded strings in component
  • ✅ Auto-expiry: Date.now() > new Date(eventDateIso).getTime() — popup returns null after event passes
  • ✅ CTA href is real Discord invite URL (https://discord.gg/nnkA8xJ3JU), target="_blank" rel="noopener noreferrer"
  • ✅ All 5 PostHog events wired: ANNOUNCEMENT_POPUP_SHOWN, ANNOUNCEMENT_CTA_CLICKED, ANNOUNCEMENT_DISMISSED (button / backdrop / escape)
  • ✅ Accessibility: Radix Dialog handles role="dialog", aria-modal, focus trap, Escape key; close button has aria-label="Close announcement"

• New: lib/landing-config.ts — single-source-of-truth config file added:

  • DISCORD_INVITE_URL — canonical Discord URL used across popup, footer, and navbar
  • GITHUB_REPO_URL — canonical repo URL
  • ANNOUNCEMENT_EVENT — all popup copy/dates in one object with inline update instructions
  • To update for the next event: change ANNOUNCEMENT_EVENT in this one file — no hunting inside component code