feat(tier2): finish the finish line — Block H follow-ups, Block G geolocation, cross-cutting
Three threads of work land here together to close out Tier 2.
### Block H follow-ups — day-of check-in
- Scanner is now an "open on your phone" magic-link flow. Hosts on
desktop mint a scoped JWT via POST /events/{id}/scanner-ticket and
render its URL into a QR; phone scans it and lands on /scanner with
the ticket as bearer. The ticket carries Audience=scanner so it can
never substitute for a session token.
- Plus-one confirmation at the door: scan → POST /check-in/preview to
fetch guest + expected party size → confirm buttons ("Just them",
"Party of N", custom) → POST /check-in. No more silent arrival_count=1.
- Offline scan queue: failed POSTs go into an IndexedDB store and drain
on the 'online' event with poison-message protection.
- Day-of arrivals headline widget on the event overview, gated to the
host's local calendar date so it doesn't dominate the page weeks out.
- Tab nav restyled with inline heroicons + scrollable segmented control;
Check-in moves to the rightmost slot.
- PWA: manifest + service worker scoped to /scanner, generated 192/512
icons (Go scripted renderer in scripts/gen-scanner-icons.go).
- Confirmation email QR was rendering broken because html/template
rewrites data: URLs to #ZgotmplZ; mark the value as template.URL.
- Email "open your invitation" link 404'd because we had no token to
put after /rsvp/. Threaded AccessLink through the RSVPConfirmed NATS
event from the API at submit time.
### Block G remainder — geolocation + threshold preview
- Pluggable GeoResolver in the fraud engine (NullResolver, IPApiResolver
for the free ip-api.com fallback, MaxMindResolver behind GG_GEOIP_DB_PATH).
Wrapped in a Redis cache (30d TTL). Geo flows through both gRPC and
NATS scoring paths.
- geo_jump scoring feature: >500km in <1h flags ("accessed from Lagos
and Paris within 12 minutes"); >500km in <6h is a softer signal. The
existing single-signal cap keeps a lone geo_jump in MEDIUM.
- FraudScored event carries geo_country/city/lat/lon; ApplyScore uses
COALESCE so a later re-score without geo doesn't wipe earlier data.
- Threshold-slider live preview: GET /events/{id}/security/thresholds/preview
returns band counts the host's existing access events would have
fallen into under the proposed thresholds. Debounced (250ms) widget
under the Advanced sliders so the host gets concrete feedback instead
of guessing.
### Cross-cutting — audit, tier-gating, feature flags
- audit_log table + internal/audit.Recorder (async fire-and-forget on
detached context so an audit blip never fails the real action). Wired
into branding update, thresholds update, allowlist add/remove,
collaborator invite/role-change/remove, message create/send-now/cancel.
- Tier-gating: extended billing.Limits with MaxCollaborators,
CustomBranding, Scanner, Broadcasts. Free = none; Pro = 5 + all;
Business = unlimited. Gates the scanner-ticket, message create,
branding put, and collaborator invite endpoints with 402 +
structured upgrade payload. Auto-reminders, fraud detection, and
analytics deliberately stay on every tier — those are safety + visibility
features, not upsell levers.
- Feature flags: feature_flags table + internal/flags.Store with 30s
in-memory refresh, stable sha256(key + user_id) percent bucketing,
unknown-key-defaults-on. Six Tier 2 flags pre-seeded. Three handlers
(branding, broadcasts, scanner) check the kill switch ahead of the
tier gate so ops can pull a feature back without a redeploy.
### Verified
- go test ./... + fraud-engine pytest (12/12 incl. 3 new geo_jump tests + 5
new flags tests).
- docker compose build + up across api, fraud-engine, notifier, frontend.
- /health endpoints 200; migrations 0014 + 0015 applied; 6 flags
seeded; audit_log table + partial indexes confirmed.
- Fraud-engine logs confirm geo resolver kind=CachedGeoResolver provider=auto.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Kwaku Danso
@@ -1,12 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
// Tier 2 Block H — day-of check-in. The host opens this on their phone
|
||||
// at the venue, taps "Start scanning", and points the camera at each
|
||||
// guest's QR. Live arrivals counter updates in place; walk-ins go in
|
||||
// via the side button.
|
||||
// Tier 2 Block H — day-of check-in.
|
||||
//
|
||||
// QR decoding uses jsQR loaded from a CDN at runtime so we don't bloat
|
||||
// the regular bundle. The camera is requested only when the scanner
|
||||
// is open and stopped on close.
|
||||
// Reality check: a host's laptop or desktop almost never has a usable
|
||||
// rear camera for scanning paper / phone-screen QR codes. Industry
|
||||
// standard (Eventbrite, Lu.ma, Cvent) is to do the scanning on a
|
||||
// phone or dedicated handheld. So:
|
||||
//
|
||||
// - On a desktop (or any device with a fine pointer), this card shows
|
||||
// a "Scan with your phone" panel: a QR code containing a scoped
|
||||
// magic link the host can scan with their phone camera. The phone
|
||||
// opens /scanner with the scoped token in the URL, and that page
|
||||
// drives the actual check-in. The desktop view focuses on live
|
||||
// arrivals + walk-ins.
|
||||
//
|
||||
// - On a phone (coarse pointer / narrow viewport), the card embeds
|
||||
// the scanner inline, exactly as before. A door volunteer on a
|
||||
// phone doesn't need the magic-link detour.
|
||||
//
|
||||
// In either case, walk-ins + the arrivals counter are available on
|
||||
// every device — those work just fine without a camera.
|
||||
|
||||
interface CheckInRecord {
|
||||
id: string
|
||||
@@ -28,6 +40,13 @@ interface ListResponse {
|
||||
summary: Summary
|
||||
}
|
||||
|
||||
interface ScannerTicket {
|
||||
token: string
|
||||
url: string
|
||||
qr_image: string
|
||||
expires_at: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
eventId: string
|
||||
yourRole?: 'owner' | 'editor' | 'viewer' | null
|
||||
@@ -64,7 +83,76 @@ async function refresh() {
|
||||
}
|
||||
onMounted(refresh)
|
||||
|
||||
// --- camera + scanner ---
|
||||
// --- device class (desktop vs phone) ---
|
||||
//
|
||||
// Heuristic: a phone has a coarse pointer (touch) AND a narrow viewport.
|
||||
// Anything else (laptops, big tablets with mice, desks) gets the
|
||||
// magic-link UX. The host can still override with "Use this device's
|
||||
// camera anyway" if they really want to.
|
||||
|
||||
const isMobileDevice = ref(false)
|
||||
const useThisDevice = ref(false) // user override → behave as if mobile
|
||||
|
||||
function detectMobile() {
|
||||
if (typeof window === 'undefined') return
|
||||
const coarse = window.matchMedia('(pointer: coarse)').matches
|
||||
const narrow = window.innerWidth < 768
|
||||
isMobileDevice.value = coarse && narrow
|
||||
}
|
||||
onMounted(() => {
|
||||
detectMobile()
|
||||
window.addEventListener('resize', detectMobile)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
if (typeof window !== 'undefined') window.removeEventListener('resize', detectMobile)
|
||||
})
|
||||
|
||||
const scannerOnThisDevice = computed(() => isMobileDevice.value || useThisDevice.value)
|
||||
|
||||
// --- magic-link / scanner ticket ---
|
||||
|
||||
const ticket = ref<ScannerTicket | null>(null)
|
||||
const ticketLoading = ref(false)
|
||||
const ticketError = ref<string | null>(null)
|
||||
const linkCopied = ref(false)
|
||||
|
||||
async function mintTicket() {
|
||||
ticketLoading.value = true
|
||||
ticketError.value = null
|
||||
try {
|
||||
const res = await useApi<ScannerTicket>(`/events/${props.eventId}/scanner-ticket`, {
|
||||
method: 'POST',
|
||||
})
|
||||
ticket.value = res
|
||||
} catch (e: any) {
|
||||
ticketError.value = useErrMessage(e, 'Could not create scanner link')
|
||||
} finally {
|
||||
ticketLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function copyLink() {
|
||||
if (!ticket.value) return
|
||||
try {
|
||||
await navigator.clipboard.writeText(ticket.value.url)
|
||||
linkCopied.value = true
|
||||
setTimeout(() => { linkCopied.value = false }, 1500)
|
||||
} catch {
|
||||
showToast({ kind: 'error', text: 'Could not copy link.' })
|
||||
}
|
||||
}
|
||||
|
||||
function expiresIn(iso: string): string {
|
||||
const ms = new Date(iso).getTime() - Date.now()
|
||||
if (ms <= 0) return 'expired'
|
||||
const mins = Math.round(ms / 60000)
|
||||
if (mins < 60) return `${mins} min`
|
||||
const hrs = Math.floor(mins / 60)
|
||||
const rem = mins % 60
|
||||
return rem ? `${hrs}h ${rem}m` : `${hrs}h`
|
||||
}
|
||||
|
||||
// --- camera + scanner (mobile / opt-in desktop) ---
|
||||
|
||||
const scannerOpen = ref(false)
|
||||
const videoRef = ref<HTMLVideoElement | null>(null)
|
||||
@@ -75,9 +163,6 @@ const lastScanAt = ref(0)
|
||||
const recentlyScanned = ref<Set<string>>(new Set())
|
||||
|
||||
async function ensureJsQR() {
|
||||
// Load jsQR from a CDN once. We attach it to window.jsQR so the
|
||||
// scanner loop can call it. If it's already loaded (host opens +
|
||||
// closes the scanner repeatedly) reuse the existing copy.
|
||||
if (typeof window === 'undefined') return null
|
||||
const w = window as any
|
||||
if (w.jsQR) return w.jsQR
|
||||
@@ -154,17 +239,12 @@ function scanLoop(jsQR: any) {
|
||||
tick()
|
||||
}
|
||||
|
||||
// shouldProcessScan throttles + dedupes scans. The camera grabs ~30
|
||||
// frames per second; without a guard we'd POST 30x for one paper QR.
|
||||
function shouldProcessScan(payload: string): boolean {
|
||||
const now = Date.now()
|
||||
if (now - lastScanAt.value < 1500) return false
|
||||
if (recentlyScanned.value.has(payload)) return false
|
||||
lastScanAt.value = now
|
||||
recentlyScanned.value.add(payload)
|
||||
// Expire from the dedupe set after 10s so a guest who legitimately
|
||||
// re-scans (e.g. host re-pointing camera at the same code by accident)
|
||||
// doesn't get stuck.
|
||||
setTimeout(() => recentlyScanned.value.delete(payload), 10_000)
|
||||
return true
|
||||
}
|
||||
@@ -263,7 +343,11 @@ const arrivalPct = computed(() => {
|
||||
</div>
|
||||
<div v-if="canEdit" class="flex items-center gap-2">
|
||||
<button class="btn-ghost text-sm" @click="openWalkIn">+ Walk-in</button>
|
||||
<button class="btn-primary text-sm" @click="openScanner">
|
||||
<button
|
||||
v-if="scannerOnThisDevice"
|
||||
class="btn-primary text-sm"
|
||||
@click="openScanner"
|
||||
>
|
||||
<svg class="mr-1 inline-block h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path d="M4 4a1 1 0 011-1h3a1 1 0 010 2H6v2a1 1 0 11-2 0V4zm0 12a1 1 0 011-1h2v-2a1 1 0 112 0v3a1 1 0 01-1 1H5a1 1 0 01-1-1zM16 4a1 1 0 00-1-1h-3a1 1 0 100 2h2v2a1 1 0 102 0V4zm0 12a1 1 0 01-1 1h-3a1 1 0 110-2h2v-2a1 1 0 112 0v3z" />
|
||||
</svg>
|
||||
@@ -276,6 +360,66 @@ const arrivalPct = computed(() => {
|
||||
<p v-if="loading" class="text-sm text-zinc-500">Loading…</p>
|
||||
|
||||
<div v-else class="space-y-5">
|
||||
<!-- Desktop magic-link panel. Hosts almost never check guests in
|
||||
from a laptop, so this nudges them onto the right device. -->
|
||||
<div
|
||||
v-if="canEdit && !scannerOnThisDevice"
|
||||
class="rounded-lg border border-zinc-800 bg-zinc-950/60 p-4"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-zinc-100">Scan with your phone</p>
|
||||
<p class="mt-1 text-xs text-zinc-500">
|
||||
Webcams on laptops don't aim well at paper or phone-screen QR codes.
|
||||
Open the scanner on a phone instead. Tap below to get a link.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!ticket && !ticketLoading" class="mt-3">
|
||||
<button class="btn-primary text-sm" @click="mintTicket">Open scanner on phone</button>
|
||||
<p class="mt-2 text-xs text-zinc-500">
|
||||
Or <button class="underline hover:text-zinc-300" @click="useThisDevice = true">use this device's camera</button>.
|
||||
</p>
|
||||
</div>
|
||||
<p v-if="ticketLoading" class="mt-3 text-xs text-zinc-500">Creating link…</p>
|
||||
<p v-if="ticketError" class="mt-3 text-xs text-red-400">{{ ticketError }}</p>
|
||||
|
||||
<div v-if="ticket" class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-[200px,1fr]">
|
||||
<div class="rounded-md border border-zinc-800 bg-white p-3 text-center">
|
||||
<img :src="ticket.qr_image" alt="Scanner magic link QR" class="mx-auto h-44 w-44" />
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<p class="text-xs font-medium uppercase tracking-wider text-zinc-500">Point your phone camera at the QR</p>
|
||||
<p class="mt-1 text-sm text-zinc-300">
|
||||
It'll open the scanner on your phone, already signed in for this event.
|
||||
Hand the phone to whoever's on the door.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<button
|
||||
class="rounded-md border border-zinc-700 px-3 py-1.5 text-xs hover:border-zinc-500 hover:bg-zinc-900"
|
||||
@click="copyLink"
|
||||
>{{ linkCopied ? 'Copied' : 'Copy link' }}</button>
|
||||
<a
|
||||
:href="ticket.url"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="rounded-md border border-zinc-700 px-3 py-1.5 text-xs hover:border-zinc-500 hover:bg-zinc-900"
|
||||
>Open in new tab</a>
|
||||
<button
|
||||
class="rounded-md border border-zinc-700 px-3 py-1.5 text-xs hover:border-zinc-500 hover:bg-zinc-900"
|
||||
@click="mintTicket"
|
||||
>New link</button>
|
||||
</div>
|
||||
<p class="text-xs text-zinc-500">
|
||||
Link expires in {{ expiresIn(ticket.expires_at) }}. Anyone with this link can check guests in for this event only.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Live arrivals widget. The big number is what a host glances
|
||||
at — "are we full yet?" -->
|
||||
<div class="rounded-lg border border-brand-700/40 bg-brand-500/[0.06] p-4">
|
||||
@@ -326,8 +470,8 @@ const arrivalPct = computed(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scanner modal. Camera is only mounted while open; closing tears
|
||||
down the stream so the camera light goes off. -->
|
||||
<!-- Scanner modal. Mounted only on phones (or opt-in via the
|
||||
"use this device's camera" link). -->
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="scannerOpen"
|
||||
@@ -341,7 +485,6 @@ const arrivalPct = computed(() => {
|
||||
<div class="relative flex-1 overflow-hidden">
|
||||
<video ref="videoRef" playsinline class="h-full w-full object-cover"></video>
|
||||
<canvas ref="canvasRef" class="hidden"></canvas>
|
||||
<!-- A simple frame to guide the host. -->
|
||||
<div class="pointer-events-none absolute inset-0 flex items-center justify-center">
|
||||
<div class="h-64 w-64 rounded-lg border-2 border-brand-500/80 shadow-[0_0_0_9999px_rgba(0,0,0,0.55)]"></div>
|
||||
</div>
|
||||
|
||||
@@ -47,6 +47,11 @@ const countingRecipients = ref(false)
|
||||
// Tab state for the message list.
|
||||
const activeList = ref<'scheduled' | 'sent' | 'cancelled'>('scheduled')
|
||||
|
||||
// Compose form is collapsed by default so the screen leads with what's
|
||||
// already scheduled. Hosts only need to open this when they want to
|
||||
// send a custom broadcast — the auto-reminders take care of themselves.
|
||||
const composeOpen = ref(false)
|
||||
|
||||
// Toast.
|
||||
type Toast = { kind: 'success' | 'error'; text: string }
|
||||
const toast = ref<Toast | null>(null)
|
||||
@@ -208,9 +213,7 @@ const activeMessages = computed(() => {
|
||||
<header class="mb-3">
|
||||
<h2 class="text-lg font-semibold">Communications</h2>
|
||||
<p class="text-xs text-zinc-500">
|
||||
Reminders and broadcasts to your guests. The big day's automatic nudges
|
||||
(7 days out, 3-day last call, 1 day before, and day-of) are pre-scheduled
|
||||
for you; edit or cancel anything you don't want.
|
||||
What gets sent to your guests and when.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
@@ -218,88 +221,30 @@ const activeMessages = computed(() => {
|
||||
<p v-if="loading" class="text-sm text-zinc-500">Loading…</p>
|
||||
|
||||
<div v-else class="space-y-6">
|
||||
<!-- Compose -->
|
||||
<div v-if="canEdit" class="rounded-lg border border-zinc-800 bg-zinc-950 p-4">
|
||||
<h3 class="mb-3 text-sm font-semibold text-zinc-100">Compose a message</h3>
|
||||
<div class="grid grid-cols-1 gap-3 md:grid-cols-2">
|
||||
<div>
|
||||
<label class="label">Audience</label>
|
||||
<select v-model="audience" class="input text-sm">
|
||||
<option value="all">Everyone</option>
|
||||
<option value="attending">Attending</option>
|
||||
<option value="pending">Haven't replied yet</option>
|
||||
<option value="declined">Declined</option>
|
||||
<option value="maybe">Maybe</option>
|
||||
</select>
|
||||
<p class="mt-1 text-xs text-zinc-500">
|
||||
<span v-if="countingRecipients">Counting…</span>
|
||||
<span v-else-if="recipientCount !== null">
|
||||
{{ recipientCount }} {{ recipientCount === 1 ? 'guest' : 'guests' }} will receive this.
|
||||
</span>
|
||||
<!-- Reassurance callout. Hosts often think the compose form
|
||||
below means they have to *do something* to make reminders
|
||||
work. This panel tells them the opposite. -->
|
||||
<div class="rounded-lg border border-brand-700/40 bg-brand-500/[0.06] p-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<svg class="mt-0.5 h-5 w-5 shrink-0 text-brand-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M16.704 5.296a1 1 0 010 1.408l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.592l7.296-7.296a1 1 0 011.408 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<div class="text-sm">
|
||||
<p class="font-medium text-brand-200">
|
||||
Reminders are already set up. You don't need to do anything.
|
||||
</p>
|
||||
<p class="mt-1 text-zinc-300">
|
||||
When you created this event we scheduled four automatic nudges for guests who
|
||||
haven't replied yet and your attending guests: a 7-day note, a 3-day last call,
|
||||
a 1-day reminder, and a day-of message. You'll see them in the list below.
|
||||
Cancel any you don't want, edit the wording, or hit <em>Send now</em> to fire
|
||||
one early.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="label">Subject (optional)</label>
|
||||
<input v-model="subject" class="input text-sm" placeholder="A friendly nudge from us" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<label class="label">Message</label>
|
||||
<textarea
|
||||
v-model="body"
|
||||
class="input min-h-[100px] text-sm"
|
||||
placeholder="Hi {{guest_name}}, just a reminder about {{event_name}} on {{event_date}}. RSVP here: {{rsvp_link}}"
|
||||
></textarea>
|
||||
<p class="mt-1 text-xs text-zinc-500">
|
||||
You can use these placeholders, and they'll be filled in per guest:
|
||||
<template v-for="(tok, i) in placeholderTokens" :key="tok">
|
||||
<code class="text-zinc-400">{{ tok }}</code><span v-if="i < placeholderTokens.length - 1">, </span>
|
||||
</template>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-[1fr_auto]">
|
||||
<div>
|
||||
<label class="label">When</label>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<label class="flex items-center gap-1.5 text-sm">
|
||||
<input v-model="sendMode" type="radio" value="now" />
|
||||
Send now
|
||||
</label>
|
||||
<label class="flex items-center gap-1.5 text-sm">
|
||||
<input v-model="sendMode" type="radio" value="schedule" />
|
||||
Schedule for…
|
||||
</label>
|
||||
<input
|
||||
v-if="sendMode === 'schedule'"
|
||||
v-model="sendAt"
|
||||
type="datetime-local"
|
||||
class="input text-sm"
|
||||
/>
|
||||
<label class="flex items-center gap-1.5 text-sm">
|
||||
<input v-model="sendMode" type="radio" value="draft" />
|
||||
Save as draft
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<button
|
||||
class="btn-primary text-sm"
|
||||
:disabled="sending || !body.trim() || (sendMode === 'schedule' && !sendAt)"
|
||||
@click="compose"
|
||||
>
|
||||
{{ sending ? 'Saving…' :
|
||||
sendMode === 'now' ? 'Send now' :
|
||||
sendMode === 'schedule' ? 'Schedule' :
|
||||
'Save draft' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- List tabs -->
|
||||
<!-- List tabs FIRST so the host sees the schedule before any compose UI. -->
|
||||
<div>
|
||||
<div class="mb-3 flex items-center gap-1 rounded-lg border border-zinc-800 bg-zinc-900/40 p-1 text-sm">
|
||||
<button
|
||||
@@ -388,6 +333,114 @@ const activeMessages = computed(() => {
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Custom broadcast — explicitly demoted. Closed by default so
|
||||
the page lands on the schedule, not a blank compose form
|
||||
that implies you must fill it out for anything to happen. -->
|
||||
<div v-if="canEdit" class="rounded-lg border border-zinc-800 bg-zinc-950">
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center justify-between p-4 text-left"
|
||||
@click="composeOpen = !composeOpen"
|
||||
>
|
||||
<span>
|
||||
<span class="block text-sm font-semibold text-zinc-100">Send a custom broadcast</span>
|
||||
<span class="block text-xs text-zinc-500">
|
||||
Optional. Use this only if you want to send something extra on top of the
|
||||
automatic reminders above.
|
||||
</span>
|
||||
</span>
|
||||
<svg
|
||||
class="h-4 w-4 text-zinc-500 transition-transform"
|
||||
:class="composeOpen ? 'rotate-180' : ''"
|
||||
viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
|
||||
>
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
<div v-show="composeOpen" class="border-t border-zinc-900 p-4">
|
||||
<p class="mb-3 text-xs text-zinc-500">
|
||||
For one-off messages — change of venue, weather notice, dress-code reminder.
|
||||
Compose once, picks the audience, and choose when it goes out.
|
||||
</p>
|
||||
<div class="grid grid-cols-1 gap-3 md:grid-cols-2">
|
||||
<div>
|
||||
<label class="label">Audience</label>
|
||||
<select v-model="audience" class="input text-sm">
|
||||
<option value="all">Everyone</option>
|
||||
<option value="attending">Attending</option>
|
||||
<option value="pending">Haven't replied yet</option>
|
||||
<option value="declined">Declined</option>
|
||||
<option value="maybe">Maybe</option>
|
||||
</select>
|
||||
<p class="mt-1 text-xs text-zinc-500">
|
||||
<span v-if="countingRecipients">Counting…</span>
|
||||
<span v-else-if="recipientCount !== null">
|
||||
{{ recipientCount }} {{ recipientCount === 1 ? 'guest' : 'guests' }} will receive this.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="label">Subject (optional)</label>
|
||||
<input v-model="subject" class="input text-sm" placeholder="A friendly nudge from us" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<label class="label">Message</label>
|
||||
<textarea
|
||||
v-model="body"
|
||||
class="input min-h-[100px] text-sm"
|
||||
placeholder="Hi {{guest_name}}, just a reminder about {{event_name}} on {{event_date}}. RSVP here: {{rsvp_link}}"
|
||||
></textarea>
|
||||
<p class="mt-1 text-xs text-zinc-500">
|
||||
You can use these placeholders, and they'll be filled in per guest:
|
||||
<template v-for="(tok, i) in placeholderTokens" :key="tok">
|
||||
<code class="text-zinc-400">{{ tok }}</code><span v-if="i < placeholderTokens.length - 1">, </span>
|
||||
</template>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-[1fr_auto]">
|
||||
<div>
|
||||
<label class="label">When</label>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<label class="flex items-center gap-1.5 text-sm">
|
||||
<input v-model="sendMode" type="radio" value="now" />
|
||||
Send now
|
||||
</label>
|
||||
<label class="flex items-center gap-1.5 text-sm">
|
||||
<input v-model="sendMode" type="radio" value="schedule" />
|
||||
Schedule for…
|
||||
</label>
|
||||
<input
|
||||
v-if="sendMode === 'schedule'"
|
||||
v-model="sendAt"
|
||||
type="datetime-local"
|
||||
class="input text-sm"
|
||||
/>
|
||||
<label class="flex items-center gap-1.5 text-sm">
|
||||
<input v-model="sendMode" type="radio" value="draft" />
|
||||
Save as draft
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<button
|
||||
class="btn-primary text-sm"
|
||||
:disabled="sending || !body.trim() || (sendMode === 'schedule' && !sendAt)"
|
||||
@click="compose"
|
||||
>
|
||||
{{ sending ? 'Saving…' :
|
||||
sendMode === 'now' ? 'Send now' :
|
||||
sendMode === 'schedule' ? 'Schedule' :
|
||||
'Save draft' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /v-show composeOpen -->
|
||||
</div><!-- /custom broadcast disclosure -->
|
||||
</div>
|
||||
|
||||
<Teleport to="body">
|
||||
|
||||
@@ -95,6 +95,21 @@ const thresholds = ref<Thresholds>({ medium: 30, high: 60, block: 85, defaults:
|
||||
const allowlist = ref<AllowlistEntry[]>([])
|
||||
const feedback = ref<FeedbackEntry[]>([])
|
||||
|
||||
// Threshold-preview state. Live counter under the sliders — given the
|
||||
// host's *proposed* settings, how would the event's past access events
|
||||
// have been classified? Removes the "guess and wait for new scans"
|
||||
// step that used to be the only way to feel confident before saving.
|
||||
interface ThresholdPreview {
|
||||
total: number
|
||||
low: number
|
||||
medium: number
|
||||
high: number
|
||||
block: number
|
||||
}
|
||||
const preview = ref<ThresholdPreview | null>(null)
|
||||
const previewLoading = ref(false)
|
||||
let previewTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
const showAdvanced = ref(false)
|
||||
const showAddNetwork = ref(false)
|
||||
const newNetworkIP = ref('')
|
||||
@@ -132,6 +147,33 @@ async function refresh() {
|
||||
}
|
||||
onMounted(refresh)
|
||||
|
||||
// Debounced preview fetch. Watching the threshold refs catches both
|
||||
// slider drags and preset clicks; 250ms is short enough to feel
|
||||
// instant while still avoiding a request per pixel of drag.
|
||||
async function fetchPreview() {
|
||||
try {
|
||||
previewLoading.value = true
|
||||
const t = thresholds.value
|
||||
const data = await useApi<ThresholdPreview>(
|
||||
`/events/${props.eventId}/security/thresholds/preview?medium=${t.medium}&high=${t.high}&block=${t.block}`,
|
||||
)
|
||||
preview.value = data
|
||||
} catch {
|
||||
// Network blip / 403 from viewer → just hide the panel until next try.
|
||||
preview.value = null
|
||||
} finally {
|
||||
previewLoading.value = false
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => [thresholds.value.medium, thresholds.value.high, thresholds.value.block],
|
||||
() => {
|
||||
if (previewTimer) clearTimeout(previewTimer)
|
||||
previewTimer = setTimeout(fetchPreview, 250)
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
// Which preset does the current threshold triple correspond to?
|
||||
// Exact match wins; otherwise "Custom". Selecting a preset writes its
|
||||
// triple over the current values and saves on the next click.
|
||||
@@ -475,6 +517,42 @@ function verdictLabel(v: string) {
|
||||
</p>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Threshold preview. Concrete counts answer the host's
|
||||
unspoken "is this too strict?" question better than any
|
||||
amount of explainer copy. Empty state when nothing's
|
||||
been scored yet keeps the panel honest. -->
|
||||
<div class="mt-4 rounded-lg border border-zinc-800 bg-zinc-900/50 p-3 text-xs">
|
||||
<div class="mb-2 flex items-center justify-between text-zinc-400">
|
||||
<span>
|
||||
With these settings applied to your last
|
||||
<span class="font-medium text-zinc-200">{{ preview?.total ?? 0 }}</span>
|
||||
{{ (preview?.total ?? 0) === 1 ? 'access event' : 'access events' }}:
|
||||
</span>
|
||||
<span v-if="previewLoading" class="text-zinc-500">refreshing…</span>
|
||||
</div>
|
||||
<div v-if="!preview || preview.total === 0" class="text-zinc-500">
|
||||
No scored access events yet. The preview will fill in as guests start opening invitations.
|
||||
</div>
|
||||
<div v-else class="grid grid-cols-4 gap-2">
|
||||
<div class="rounded-md border border-zinc-800 bg-zinc-950 p-2 text-center">
|
||||
<div class="text-[10px] uppercase tracking-wider text-zinc-500">Quiet</div>
|
||||
<div class="mt-0.5 text-lg font-semibold tabular-nums text-zinc-200">{{ preview.low }}</div>
|
||||
</div>
|
||||
<div class="rounded-md border border-brand-700/40 bg-brand-500/[0.06] p-2 text-center">
|
||||
<div class="text-[10px] uppercase tracking-wider text-brand-400">Watched</div>
|
||||
<div class="mt-0.5 text-lg font-semibold tabular-nums text-brand-200">{{ preview.medium }}</div>
|
||||
</div>
|
||||
<div class="rounded-md border border-amber-800/40 bg-amber-500/[0.06] p-2 text-center">
|
||||
<div class="text-[10px] uppercase tracking-wider text-amber-300">Flagged</div>
|
||||
<div class="mt-0.5 text-lg font-semibold tabular-nums text-amber-200">{{ preview.high }}</div>
|
||||
</div>
|
||||
<div class="rounded-md border border-red-800/40 bg-red-500/[0.06] p-2 text-center">
|
||||
<div class="text-[10px] uppercase tracking-wider text-red-300">Refused</div>
|
||||
<div class="mt-0.5 text-lg font-semibold tabular-nums text-red-200">{{ preview.block }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user