Add speaker invitations with portal page and programme host picker.

Speakers require email, get a personal holding page with programme and stage links, auto-invites when programme hosts are saved, and manual send for events without a schedule; also fix wallet copy on event create and anchor attendee comms. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-03 15:48:32 +00:00
parent 42d997a599
commit fec24da7bd
20 changed files with 1015 additions and 36 deletions
@@ -34,7 +34,7 @@

        {{-- Mass comms --}}
        @if(!empty($commsModes))
-        <div class="rounded-2xl border border-indigo-100 bg-indigo-50/60 p-4"
+        <div id="comms" class="rounded-2xl border border-indigo-100 bg-indigo-50/60 p-4"
             x-data="{
                mode: @js($defaultCommsMode),
                preview: null,
@@ -66,7 +66,7 @@
            @include('qr-codes.partials.type-fields-create', ['accountEventDefaults' => $accountEventDefaults ?? []])

            <p class="rounded-xl bg-slate-50 px-3.5 py-2.5 text-xs leading-5 text-slate-500">
-                GHS {{ number_format($pricePerQr, 2) }} will be charged from your QR balance when you create this event.
+                GHS {{ number_format($pricePerQr, 2) }} will be charged from your wallet when you create this event.
            </p>

            <button type="submit" class="btn-primary w-full">Create event</button>
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Speaker — {{ $eventContent['name'] ?? $event->label }}</title>
+    @include('partials.favicon')
+    @vite(['resources/css/app.css'])
+</head>
+<body class="min-h-screen bg-slate-50 text-slate-900 antialiased">
+@php
+    $eventName = $eventContent['name'] ?? $event->label;
+    $brandColor = $programmeSnapshot['brand_color'] ?? '#4f46e5';
+@endphp
+
+<div class="mx-auto max-w-lg px-4 py-8 sm:py-12">
+    <div class="text-center">
+        <p class="text-xs font-semibold uppercase tracking-wide text-indigo-600">Speaker access</p>
+        <h1 class="mt-1 text-2xl font-bold text-slate-900">{{ $eventName }}</h1>
+        <p class="mt-1 text-sm text-slate-600">Hi {{ $speaker['name'] }}@if(!empty($speaker['role'])) · {{ $speaker['role'] }}@endif</p>
+    </div>
+
+    @if(!empty($eventContent['starts_at']) || !empty($eventContent['location']))
+        <div class="mt-6 rounded-2xl border border-slate-200 bg-white p-4 text-sm text-slate-600">
+            @if(!empty($eventContent['starts_at']))
+                <p><span class="font-medium text-slate-800">When:</span> {{ $eventContent['starts_at'] }}</p>
+            @endif
+            @if(!empty($eventContent['location']))
+                <p class="mt-1"><span class="font-medium text-slate-800">Where:</span> {{ $eventContent['location'] }}</p>
+            @endif
+        </div>
+    @endif
+
+    @if(count($assignments))
+        <div class="mt-6 rounded-2xl border border-indigo-100 bg-indigo-50/50 p-4">
+            <h2 class="text-sm font-semibold text-indigo-950">Your sessions</h2>
+            <ul class="mt-3 space-y-2">
+                @foreach($assignments as $assignment)
+                    <li class="rounded-xl border border-white/80 bg-white px-3 py-2.5 text-sm">
+                        <p class="font-semibold text-slate-900">{{ $assignment['session'] ?: 'Session' }}</p>
+                        <p class="mt-0.5 text-xs text-slate-500">
+                            @if($assignment['time']){{ $assignment['time'] }}@endif
+                            @if($assignment['day']) · {{ $assignment['day'] }}@endif
+                            @if($assignment['location']) · {{ $assignment['location'] }}@endif
+                        </p>
+                    </li>
+                @endforeach
+            </ul>
+        </div>
+    @endif
+
+    @if(count($virtualSessions))
+        <div class="mt-6 rounded-2xl border border-slate-200 bg-white p-4">
+            <h2 class="text-sm font-semibold text-slate-900">Join virtual stage</h2>
+            <p class="mt-1 text-xs text-slate-500">Use these links when it is time to go live. No attendee registration required — you will enter the speaker waiting area.</p>
+            <div class="mt-4 space-y-3">
+                @foreach($virtualSessions as $session)
+                    <a href="{{ $session['join_url'] }}"
+                       class="flex items-center justify-between gap-3 rounded-xl border border-indigo-100 bg-indigo-50/40 px-4 py-3 text-sm font-semibold text-indigo-800 transition hover:border-indigo-200 hover:bg-indigo-50">
+                        <span>
+                            {{ $session['title'] }}
+                            <span class="mt-0.5 block text-xs font-normal text-indigo-600/80">{{ $session['type'] }}</span>
+                        </span>
+                        <svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg>
+                    </a>
+                @endforeach
+            </div>
+        </div>
+    @endif
+
+    @if($programmeSnapshot)
+        <div class="mt-6 rounded-2xl border border-slate-200 bg-white p-4">
+            <h2 class="text-sm font-semibold text-slate-900">{{ $programmeSnapshot['title'] ?? 'Programme' }}</h2>
+            @if(!empty($programmeSnapshot['subtitle']))
+                <p class="mt-0.5 text-xs text-slate-500">{{ $programmeSnapshot['subtitle'] }}</p>
+            @endif
+            <div class="mt-4 space-y-4">
+                @foreach($programmeSnapshot['days'] ?? [] as $day)
+                    <div>
+                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{ $day['label'] ?? 'Day' }}@if(!empty($day['date'])) · {{ $day['date'] }}@endif</p>
+                        <ul class="mt-2 divide-y divide-slate-100 rounded-xl border border-slate-100">
+                            @foreach($day['items'] ?? [] as $item)
+                                <li class="px-3 py-2.5 text-sm">
+                                    <div class="flex gap-2">
+                                        @if(!empty($item['time']))
+                                            <span class="shrink-0 text-xs font-medium text-slate-400">{{ $item['time'] }}</span>
+                                        @endif
+                                        <div class="min-w-0">
+                                            <p class="font-medium text-slate-900">{{ $item['title'] ?? '' }}</p>
+                                            @if(!empty($item['host']))
+                                                <p class="text-xs text-slate-500">{{ $item['host'] }}</p>
+                                            @endif
+                                        </div>
+                                    </div>
+                                </li>
+                            @endforeach
+                        </ul>
+                    </div>
+                @endforeach
+            </div>
+        </div>
+    @endif
+
+    <p class="mt-8 text-center text-xs text-slate-400">Bookmark this page — it has everything you need on event day.</p>
+</div>
+</body>
+</html>
@@ -22,11 +22,12 @@
        @if($programme)
            <div class="rounded-2xl border border-indigo-100 bg-indigo-50/60 px-4 py-3 text-sm text-indigo-950">
                Linked programme: <a href="{{ route('events.show', $programme) }}" class="font-semibold hover:underline">{{ $programme->label }}</a>.
-                Hosts assigned on programme sessions appear below and sync to virtual sessions.
+                Assign hosts from this speaker list on programme sessions — invitations are sent automatically when you save the programme.
            </div>
        @else
            <div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
-                Attach a programme on the <a href="{{ route('events.show', $qrCode) }}" class="font-semibold text-indigo-600 hover:underline">event settings</a> page to pull session hosts into this roster.
+                Add speakers here first, then attach a programme on <a href="{{ route('events.show', $qrCode) }}" class="font-semibold text-indigo-600 hover:underline">event settings</a> to schedule sessions and auto-invite hosts.
+                Without a programme, use <strong>Send invitation</strong> below for each speaker.
            </div>
        @endif

@@ -42,7 +43,7 @@
            <div class="flex items-center justify-between gap-3">
                <div>
                    <h2 class="text-sm font-semibold text-slate-900">Event speaker roster</h2>
-                    <p class="mt-0.5 text-xs text-slate-500">Add keynote speakers, panelists, and hosts. Use email when you want to invite them to virtual sessions.</p>
+                    <p class="mt-0.5 text-xs text-slate-500">Every speaker needs an email. They are available when building the programme schedule.</p>
                </div>
                <button type="button" @click="addSpeaker()" class="text-xs font-semibold text-indigo-600 hover:text-indigo-800">+ Add speaker</button>
            </div>
@@ -51,9 +52,9 @@
                <template x-for="(speaker, index) in speakers" :key="index">
                    <div class="rounded-xl border border-slate-200 p-4 space-y-3">
                        <div class="grid gap-3 sm:grid-cols-2">
-                            <input type="text" :name="'speakers[' + index + '][name]'" x-model="speaker.name" placeholder="Name *"
+                            <input type="text" :name="'speakers[' + index + '][name]'" x-model="speaker.name" placeholder="Name *" required
                                   class="rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400/30">
-                            <input type="email" :name="'speakers[' + index + '][email]'" x-model="speaker.email" placeholder="Email (optional)"
+                            <input type="email" :name="'speakers[' + index + '][email]'" x-model="speaker.email" placeholder="Email *" required
                                   class="rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400/30">
                        </div>
                        <input type="text" :name="'speakers[' + index + '][role]'" x-model="speaker.role" placeholder="Role / session (optional)"
@@ -68,6 +69,44 @@
            <button type="submit" class="btn-primary w-full">Save speakers</button>
        </form>

+        @if(count($roster))
+            <div class="rounded-2xl border border-slate-200 bg-white p-6">
+                <h2 class="text-sm font-semibold text-slate-900">Invitations</h2>
+                <p class="mt-0.5 text-xs text-slate-500">Speakers assigned on the programme are emailed when the programme is saved. Send manually for events without a programme or speakers not yet on the schedule.</p>
+                <div class="mt-4 divide-y divide-slate-100">
+                    @foreach($roster as $speaker)
+                        @php
+                            $email = $speaker['email'] ?? '';
+                            $invited = ! empty($speaker['invited_at']);
+                            $showInvite = $email !== '' && ($canManualInvite[$email] ?? false);
+                        @endphp
+                        <div class="flex flex-wrap items-center justify-between gap-3 py-3 text-sm">
+                            <div>
+                                <p class="font-semibold text-slate-900">{{ $speaker['name'] }}</p>
+                                <p class="text-xs text-slate-500">{{ $email }}</p>
+                            </div>
+                            <div class="flex items-center gap-2">
+                                @if($invited)
+                                    <span class="rounded-full bg-emerald-50 px-2.5 py-0.5 text-[11px] font-medium text-emerald-700">
+                                        Invited {{ ($speaker['invite_source'] ?? '') === 'programme' ? 'via programme' : '' }}
+                                    </span>
+                                @endif
+                                @if($showInvite)
+                                    <form method="POST" action="{{ route('speakers.invite', $qrCode) }}">
+                                        @csrf
+                                        <input type="hidden" name="email" value="{{ $email }}">
+                                        <button type="submit" class="btn-secondary btn-secondary-sm">Send invitation</button>
+                                    </form>
+                                @elseif($invited && ($speaker['invite_source'] ?? '') === 'programme')
+                                    <span class="text-[11px] text-slate-400">Auto-invited from programme</span>
+                                @endif
+                            </div>
+                        </div>
+                    @endforeach
+                </div>
+            </div>
+        @endif
+
        @if(count($programmeAssignments))
            <div class="rounded-2xl border border-slate-200 bg-white p-6">
                <h2 class="text-sm font-semibold text-slate-900">From programme schedule</h2>
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<body style="font-family: sans-serif; color: #1e293b; line-height: 1.5;">
+@if($speakerName)
+<p>Hi {{ $speakerName }},</p>
+@endif
+<p>You have been invited to speak at <strong>{{ $eventName }}</strong>.</p>
+<p>Your speaker page has the programme, your session times, and links to join the virtual stage when it is time:</p>
+<p><a href="{{ $portalUrl }}">Open your speaker page</a></p>
+<p style="color: #64748b; font-size: 13px;">No attendee registration is required — use the join links on that page to enter the speaker waiting area.</p>
+</body>
+</html>
@@ -667,19 +667,29 @@

    @elseif($qrCode->type === \App\Models\QrCode::TYPE_ITINERARY)
        @php
-            $itinDays = $c['days'] ?? [['label' => 'Day 1', 'date' => '', 'items' => [['time' => '', 'title' => '', 'description' => '', 'location' => '', 'host' => '']]]];
+            $itinDays = $c['days'] ?? [['label' => 'Day 1', 'date' => '', 'items' => [['time' => '', 'title' => '', 'description' => '', 'location' => '', 'host' => '', 'host_speaker_email' => '']]]];
            foreach ($itinDays as &$itinDay) {
                $itinDay['date'] = \App\Support\Qr\QrDateFormatter::forInput($itinDay['date'] ?? null);
+                foreach ($itinDay['items'] ?? [] as &$itinItem) {
+                    $itinItem['host_speaker_email'] = $itinItem['host_speaker_email'] ?? '';
+                }
+                unset($itinItem);
            }
            unset($itinDay);
+            $eventSpeakers = $linkedEventSpeakers ?? [];
        @endphp
        <div class="space-y-4"
             x-data="{
                days: {{ Illuminate\Support\Js::from($itinDays) }},
-                addDay() { this.days.push({ label: 'Day ' + (this.days.length + 1), date: '', items: [{ time: '', title: '', description: '', location: '', host: '' }] }); },
+                speakers: {{ Illuminate\Support\Js::from($eventSpeakers) }},
+                addDay() { this.days.push({ label: 'Day ' + (this.days.length + 1), date: '', items: [{ time: '', title: '', description: '', location: '', host: '', host_speaker_email: '' }] }); },
                removeDay(i) { this.days.splice(i, 1); },
-                addItem(d) { this.days[d].items.push({ time: '', title: '', description: '', location: '', host: '' }); },
-                removeItem(d, i) { this.days[d].items.splice(i, 1); }
+                addItem(d) { this.days[d].items.push({ time: '', title: '', description: '', location: '', host: '', host_speaker_email: '' }); },
+                removeItem(d, i) { this.days[d].items.splice(i, 1); },
+                onHostSpeakerChange(item) {
+                    const match = this.speakers.find(s => s.email === item.host_speaker_email);
+                    item.host = match ? match.name : item.host;
+                }
             }">
            <div class="grid gap-3">
                <input type="text" name="title" value="{{ $c['title'] ?? '' }}" placeholder="Itinerary title *"
@@ -751,8 +761,22 @@
                                <div class="grid gap-2 sm:grid-cols-2">
                                    <input type="text" :name="'days['+d+'][items]['+i+'][location]'" x-model="item.location" placeholder="Location (optional)"
                                           class="rounded-lg border border-slate-200 px-2.5 py-1.5 text-xs focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400/30">
-                                    <input type="text" :name="'days['+d+'][items]['+i+'][host]'" x-model="item.host" placeholder="Host / speaker (optional)"
-                                           class="rounded-lg border border-slate-200 px-2.5 py-1.5 text-xs focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400/30">
+                                    <template x-if="speakers.length > 0">
+                                        <div class="space-y-1">
+                                            <select :name="'days['+d+'][items]['+i+'][host_speaker_email]'" x-model="item.host_speaker_email" @change="onHostSpeakerChange(item)"
+                                                    class="w-full rounded-lg border border-slate-200 px-2.5 py-1.5 text-xs focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400/30">
+                                                <option value="">Choose speaker host (optional)</option>
+                                                <template x-for="speaker in speakers" :key="speaker.email">
+                                                    <option :value="speaker.email" x-text="speaker.name + ' (' + speaker.email + ')'"></option>
+                                                </template>
+                                            </select>
+                                            <input type="hidden" :name="'days['+d+'][items]['+i+'][host]'" :value="item.host">
+                                        </div>
+                                    </template>
+                                    <template x-if="speakers.length === 0">
+                                        <input type="text" :name="'days['+d+'][items]['+i+'][host]'" x-model="item.host" placeholder="Host / speaker (optional)"
+                                               class="rounded-lg border border-slate-200 px-2.5 py-1.5 text-xs focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400/30">
+                                    </template>
                                </div>
                                <textarea :name="'days['+d+'][items]['+i+'][description]'" x-model="item.description" rows="1" placeholder="Details (optional)"
                                          class="w-full rounded-lg border border-slate-200 px-2.5 py-1.5 text-xs focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400/30"></textarea>