@escalated-dev/escalated 0.11.10 → 0.12.1

package/src/widget/EscalatedWidget.vue

@@ -1,6 +1,9 @@
 <script setup>
-import { ref, computed, watch, onMounted } from 'vue';
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
 import { sanitizeHtml } from '../utils/sanitizeHtml';
+import GuestEmailCode from '../components/GuestEmailCode.vue';
+import { useGuestVerification } from '../composables/useGuestVerification';
+import { guestCsrfHeaders } from '../utils/guestRequests';
 
 const props = defineProps({
     baseUrl: { type: String, default: '' },
@@ -13,19 +16,59 @@ const props = defineProps({
     widgetPath: { type: String, default: '/support/widget' },
     initialColor: { type: String, default: '#4F46E5' },
     initialPosition: { type: String, default: 'bottom-right' },
+    // 'launcher' floats a button on the page; 'inline' renders the panel in
+    // place, e.g. as the support form on a host site's contact page.
+    mode: { type: String, default: 'launcher' },
+    // Subset and order of tabs to offer: help, contact, chat, status.
+    tabs: { type: Array, default: null },
+    defaultTab: { type: String, default: null },
+    // Department to preselect; lockDepartment hides the department choice.
+    department: { type: [String, Number], default: null },
+    lockDepartment: { type: Boolean, default: false },
+    // Visitor details the host page already knows: name, email, subject, message.
+    prefill: { type: Object, default: () => ({}) },
+    title: { type: String, default: 'Support' },
+    greeting: { type: String, default: null },
+    openOnLoad: { type: Boolean, default: false },
+    hideLauncher: { type: Boolean, default: false },
+    // Host parameters (order number, plan, ...) sent with tickets and chats
+    // when the backend accepts them. metadataProvider is called at submit.
+    metadata: { type: Object, default: () => ({}) },
+    metadataProvider: { type: Function, default: null },
 });
 
-const isOpen = ref(false);
-const activeTab = ref('help');
+const inline = computed(() => props.mode === 'inline');
+
+const isOpen = ref(props.mode === 'inline' || props.openOnLoad);
+const activeTab = ref(props.defaultTab);
 const error = ref('');
 const widgetConfig = ref(null);
 
 const color = computed(() => widgetConfig.value?.color || props.initialColor);
 const position = computed(() => widgetConfig.value?.position || props.initialPosition);
-const greeting = computed(() => widgetConfig.value?.greeting || 'Hi there! How can we help?');
+const greeting = computed(() => props.greeting || widgetConfig.value?.greeting || 'Hi there! How can we help?');
 const departments = computed(() => widgetConfig.value?.departments || []);
 const kbEnabled = computed(() => widgetConfig.value?.kb_enabled ?? true);
 const chatAvailable = ref(false);
+const visibleTabs = computed(() => {
+    const available = {
+        help: kbEnabled.value,
+        contact: true,
+        chat: chatAvailable.value,
+        status: true,
+    };
+    const wanted = props.tabs?.length ? props.tabs : ['help', 'contact', 'chat', 'status'];
+    return wanted.filter((tab) => available[tab]);
+});
+// The chosen tab while it is on offer, otherwise the first one that is.
+const currentTab = computed(() =>
+    visibleTabs.value.includes(activeTab.value) ? activeTab.value : visibleTabs.value[0] || null,
+);
+const identity = ref({ name: props.prefill?.name || '', email: props.prefill?.email || '' });
+const lockedDepartment = ref(props.lockDepartment && props.department != null ? props.department : null);
+const presetDepartment = ref(props.department ?? '');
+const departmentLocked = computed(() => lockedDepartment.value != null);
+const hostMetadata = ref({ ...(props.metadata || {}) });
 const chatAvailabilityMessage = ref('');
 
 // Chat state
@@ -40,7 +83,20 @@ const chatRatingSubmitted = ref(false);
 const chatInput = ref('');
 const chatSending = ref(false);
 const chatConnectionStatus = ref('disconnected'); // connected | reconnecting | disconnected
-const preChatForm = ref({ name: '', email: '', department_id: '', message: '' });
+const blankChatForm = () => ({
+    name: identity.value.name,
+    email: identity.value.email,
+    department_id: presetDepartment.value,
+    message: props.prefill?.message || '',
+});
+const blankTicketForm = () => ({
+    name: identity.value.name,
+    email: identity.value.email,
+    subject: props.prefill?.subject || '',
+    description: props.prefill?.message || '',
+    department_id: presetDepartment.value,
+});
+const preChatForm = ref(blankChatForm());
 const chatStarting = ref(false);
 
 // WebSocket / polling for chat
@@ -54,66 +110,125 @@ const searchLoading = ref(false);
 const selectedArticle = ref(null);
 const articleLoading = ref(false);
 
-const ticketForm = ref({
-    name: '',
-    email: '',
-    subject: '',
-    description: '',
-    department_id: '',
-});
+const ticketForm = ref(blankTicketForm());
 const ticketSubmitting = ref(false);
 const ticketSuccess = ref(null);
 
-const statusForm = ref({ email: '', reference: '' });
+const statusForm = ref({ email: identity.value.email, reference: '' });
 const statusLoading = ref(false);
 const statusResult = ref(null);
+const statusMatches = ref([]);
+let destinationGeneration = 0;
+let disposed = false;
+const verificationRequired = computed(() => widgetConfig.value?.guest_verification_required === true);
+const verificationContext = () => `${props.baseUrl}|${props.widgetPath}`;
+const requestCode = (email, purpose) => api('POST', '/verification', { email, purpose });
+const ticketVerification = useGuestVerification(
+    () => ticketForm.value.email,
+    'ticket',
+    requestCode,
+    verificationContext,
+);
+const chatVerification = useGuestVerification(() => preChatForm.value.email, 'chat', requestCode, verificationContext);
+const statusVerification = useGuestVerification(
+    () => statusForm.value.email,
+    'lookup',
+    requestCode,
+    verificationContext,
+);
+watch(
+    () => `${statusForm.value.email}|${statusForm.value.reference}`,
+    () => {
+        statusMatches.value = [];
+        statusResult.value = null;
+    },
+    { flush: 'sync' },
+);
+
+watch(
+    verificationContext,
+    () => {
+        destinationGeneration++;
+        stopChatPolling();
+        clearTimeout(chatTypingTimer);
+        ticketSuccess.value = null;
+        statusMatches.value = [];
+        statusResult.value = null;
+        startNewChat();
+        ticketForm.value = blankTicketForm();
+        statusForm.value = { email: identity.value.email, reference: '' };
+        widgetConfig.value = null;
+        chatAvailable.value = false;
+        error.value = '';
+        loadWidget();
+    },
+    { flush: 'sync' },
+);
 
 let searchTimer = null;
 
-async function api(method, apiPath, body = null) {
+async function api(method, apiPath, body = null, token = null) {
+    const generation = destinationGeneration;
     const url = `${props.baseUrl}${props.widgetPath}${apiPath}`;
     const opts = {
         method,
         headers: {
             Accept: 'application/json',
             'Content-Type': 'application/json',
+            ...guestCsrfHeaders(url),
+            ...(token ? { Authorization: `Bearer ${token}` } : {}),
         },
     };
     if (body) opts.body = JSON.stringify(body);
     const res = await fetch(url, opts);
     const data = await res.json();
-    if (!res.ok) throw { status: res.status, data };
+    if (disposed || generation !== destinationGeneration)
+        throw Object.assign(new Error('Widget destination changed.'), { name: 'AbortError' });
+    if (!res.ok)
+        throw Object.assign(
+            new Error(data.errors ? Object.values(data.errors).flat().join(' ') : data.message || 'Request failed.'),
+            { status: res.status, data },
+        );
     return data;
 }
 
-onMounted(async () => {
+async function loadWidget() {
+    const generation = destinationGeneration;
     try {
         widgetConfig.value = await api('GET', '/config');
     } catch {
         // Widget may be disabled
     }
+    if (disposed || generation !== destinationGeneration) return;
     // Check chat availability
     try {
         const avail = await api('GET', '/chat/availability');
         chatAvailable.value = avail.available;
         chatAvailabilityMessage.value = avail.message || '';
     } catch {
-        chatAvailable.value = false;
+        if (generation === destinationGeneration && !disposed) chatAvailable.value = false;
     }
-});
+}
+onMounted(loadWidget);
 
 // Chat functions
 async function startLiveChat() {
+    const email = preChatForm.value.email;
     chatStarting.value = true;
     error.value = '';
     try {
+        if (verificationRequired.value && !(await chatVerification.ready())) return;
         const session = await api('POST', '/chat/start', {
             name: preChatForm.value.name,
             email: preChatForm.value.email,
             department_id: preChatForm.value.department_id || null,
             message: preChatForm.value.message,
+            ...metadataPayload(),
+            ...(verificationRequired.value ? chatVerification.fields() : {}),
         });
+        if (email !== preChatForm.value.email) return;
         chatSession.value = session;
+        chatVerification.reset();
         chatPhase.value = 'live';
         chatMessages.value = session.messages || [];
         if (session.agent) {
@@ -122,6 +237,7 @@ async function startLiveChat() {
         chatConnectionStatus.value = 'connected';
         startChatPolling();
     } catch (e) {
+        if (e.name === 'AbortError') return;
         if (e.data?.errors) {
             error.value = Object.values(e.data.errors).flat().join(' ');
         } else {
@@ -181,8 +297,10 @@ function startChatPolling() {
     stopChatPolling();
     chatPollTimer = setInterval(async () => {
         if (!chatSession.value) return;
+        const sessionId = chatSession.value.id;
         try {
             const data = await api('GET', `/chat/${chatSession.value.id}/messages`);
+            if (chatSession.value?.id !== sessionId) return;
             if (data.messages) {
                 chatMessages.value = data.messages;
             }
@@ -202,7 +320,8 @@ function startChatPolling() {
             }
             chatConnectionStatus.value = 'connected';
             chatReconnectAttempts = 0;
-        } catch {
+        } catch (e) {
+            if (e.name === 'AbortError' || chatSession.value?.id !== sessionId) return;
             chatReconnectAttempts++;
             if (chatReconnectAttempts > 3) {
                 chatConnectionStatus.value = 'disconnected';
@@ -220,31 +339,46 @@ function stopChatPolling() {
     }
 }
 
+onUnmounted(() => {
+    disposed = true;
+    stopChatPolling();
+    clearTimeout(searchTimer);
+    clearTimeout(chatTypingTimer);
+});
+
 async function endLiveChat() {
     if (!chatSession.value) return;
+    const sessionId = chatSession.value.id;
     try {
         await api('POST', `/chat/${chatSession.value.id}/end`);
     } catch {
         // ignore
     }
+    if (chatSession.value?.id !== sessionId || disposed) return;
     chatPhase.value = 'post';
     stopChatPolling();
 }
 
 async function submitChatRating() {
     if (!chatSession.value || !chatRating.value) return;
+    const sessionId = chatSession.value.id;
     try {
         await api('POST', `/chat/${chatSession.value.id}/rate`, {
             rating: chatRating.value,
             comment: chatComment.value,
         });
-        chatRatingSubmitted.value = true;
-    } catch {
+        if (chatSession.value?.id === sessionId) chatRatingSubmitted.value = true;
+    } catch (e) {
+        if (e.name === 'AbortError' || chatSession.value?.id !== sessionId) return;
         error.value = 'Failed to submit rating.';
     }
 }
 
 function startNewChat() {
+    stopChatPolling();
+    clearTimeout(chatTypingTimer);
+    chatTypingUser.value = null;
+    chatReconnectAttempts = 0;
     chatPhase.value = 'pre';
     chatSession.value = null;
     chatMessages.value = [];
@@ -254,7 +388,7 @@ function startNewChat() {
     chatRatingSubmitted.value = false;
     chatInput.value = '';
     chatConnectionStatus.value = 'disconnected';
-    preChatForm.value = { name: '', email: '', department_id: '', message: '' };
+    preChatForm.value = blankChatForm();
 }
 
 function chatBubbleInitials(name) {
@@ -303,25 +437,26 @@ function backToSearch() {
 }
 
 async function submitTicket() {
+    const email = ticketForm.value.email;
     ticketSubmitting.value = true;
     error.value = '';
     try {
+        if (verificationRequired.value && !(await ticketVerification.ready())) return;
         const data = await api('POST', '/tickets', {
             name: ticketForm.value.name,
             email: ticketForm.value.email,
             subject: ticketForm.value.subject,
             description: ticketForm.value.description,
             department_id: ticketForm.value.department_id || null,
+            ...metadataPayload(),
+            ...(verificationRequired.value ? ticketVerification.fields() : {}),
         });
+        if (email !== ticketForm.value.email) return;
         ticketSuccess.value = data;
-        ticketForm.value = {
-            name: '',
-            email: '',
-            subject: '',
-            description: '',
-            department_id: '',
-        };
+        ticketVerification.reset();
+        ticketForm.value = blankTicketForm();
     } catch (e) {
+        if (e.name === 'AbortError') return;
         if (e.data?.errors) {
             error.value = Object.values(e.data.errors).flat().join(' ');
         } else {
@@ -333,27 +468,121 @@ async function submitTicket() {
 }
 
 async function checkStatus() {
+    const identity = `${statusForm.value.email}|${statusForm.value.reference}`;
     statusLoading.value = true;
     error.value = '';
     statusResult.value = null;
     try {
+        if (verificationRequired.value) {
+            if (!(await statusVerification.ready())) return;
+            const result = await api('POST', '/lookup', { ...statusForm.value, ...statusVerification.fields() });
+            if (identity !== `${statusForm.value.email}|${statusForm.value.reference}`) return;
+            statusVerification.reset();
+            statusMatches.value = result.data || [];
+            if (statusMatches.value.length === 1) await loadVerifiedStatus(statusMatches.value[0]);
+            if (!statusMatches.value.length) error.value = 'No tickets matched that reference and email.';
+            return;
+        }
         const data = await api(
             'GET',
             `/tickets/${encodeURIComponent(statusForm.value.reference)}?email=${encodeURIComponent(statusForm.value.email)}`,
         );
-        statusResult.value = data;
+        if (identity === `${statusForm.value.email}|${statusForm.value.reference}`) statusResult.value = data;
     } catch (e) {
+        if (e.name === 'AbortError') return;
         error.value = e.data?.message || 'Ticket not found.';
     } finally {
         statusLoading.value = false;
     }
 }
 
+async function loadVerifiedStatus(match) {
+    const identity = `${statusForm.value.email}|${statusForm.value.reference}`;
+    error.value = '';
+    try {
+        const result = await api(
+            'GET',
+            `/tickets/${encodeURIComponent(match.reference)}`,
+            null,
+            match.guest_access_token,
+        );
+        if (identity === `${statusForm.value.email}|${statusForm.value.reference}`) statusResult.value = result;
+    } catch (e) {
+        if (e.name === 'AbortError') return;
+        error.value = e.data?.message || 'The link has expired. Verify your email for a new one.';
+    }
+}
+
+/**
+ * Host parameters for a ticket or chat, plus the page it came from (origin
+ * and path only: query strings can carry tokens). Only sent to backends
+ * whose /config says they accept them, so older backends see no new field.
+ */
+function metadataPayload() {
+    if (widgetConfig.value?.accepts_metadata !== true) return {};
+    let provided;
+    try {
+        provided = props.metadataProvider?.() || {};
+    } catch {
+        provided = {};
+    }
+    const metadata = { ...hostMetadata.value, ...(typeof provided === 'object' ? provided : {}) };
+    if (metadata.page_url == null && typeof window !== 'undefined' && window.location?.origin) {
+        metadata.page_url = window.location.origin + window.location.pathname;
+    }
+    return { metadata };
+}
+
+const TAB_LABELS = { help: 'Help', contact: 'Contact', chat: 'Chat', status: 'Check Status' };
+
+function selectTab(tab) {
+    activeTab.value = tab;
+    error.value = '';
+    if (tab === 'contact') ticketSuccess.value = null;
+    if (tab === 'status') statusResult.value = null;
+}
+
 function togglePanel() {
+    if (inline.value) return;
     isOpen.value = !isOpen.value;
     error.value = '';
 }
 
+function open(tab = null) {
+    if (tab) activeTab.value = tab;
+    isOpen.value = true;
+}
+
+function close() {
+    if (!inline.value) isOpen.value = false;
+}
+
+/** Fill in who the visitor is, without overwriting what they typed. */
+function identify(person = {}) {
+    identity.value = {
+        name: person.name ?? identity.value.name,
+        email: person.email ?? identity.value.email,
+    };
+    for (const form of [ticketForm, preChatForm]) {
+        if (!form.value.name) form.value.name = identity.value.name;
+        if (!form.value.email) form.value.email = identity.value.email;
+    }
+    if (!statusForm.value.email) statusForm.value.email = identity.value.email;
+}
+
+function setMetadata(metadata = {}, { merge = true } = {}) {
+    hostMetadata.value = merge ? { ...hostMetadata.value, ...metadata } : { ...metadata };
+}
+
+function setDepartment(id, { lock = false } = {}) {
+    presetDepartment.value = id ?? '';
+    lockedDepartment.value = lock && id != null ? id : null;
+    ticketForm.value.department_id = presetDepartment.value;
+    preChatForm.value.department_id = presetDepartment.value;
+}
+
+defineExpose({ open, close, toggle: togglePanel, identify, setMetadata, setDepartment });
+
 function formatDate(iso) {
     try {
         return new Date(iso).toLocaleDateString(undefined, {
@@ -370,6 +599,7 @@ function formatDate(iso) {
 
 <template>
     <button
+        v-if="!inline && !hideLauncher"
         class="esc-w-fab"
         :class="position"
         :style="{ backgroundColor: color }"
@@ -389,64 +619,29 @@ function formatDate(iso) {
 
     <div
         class="esc-w-panel"
-        :class="[position, { 'esc-open': isOpen }]"
+        :class="inline ? ['esc-w-inline', 'esc-open'] : [position, { 'esc-open': isOpen }]"
         :style="{ '--esc-widget-color': color }"
         data-widget-panel
     >
         <div class="esc-w-header" :style="{ backgroundColor: color }">
-            <h2>Support</h2>
+            <h2>{{ title }}</h2>
             <p>{{ greeting }}</p>
         </div>
 
-        <div class="esc-w-tabs">
-            <button
-                v-if="kbEnabled"
-                class="esc-w-tab"
-                :class="{ active: activeTab === 'help' }"
-                @click="
-                    activeTab = 'help';
-                    error = '';
-                "
-            >
-                Help
-            </button>
-            <button
-                class="esc-w-tab"
-                :class="{ active: activeTab === 'contact' }"
-                @click="
-                    activeTab = 'contact';
-                    error = '';
-                    ticketSuccess = null;
-                "
-            >
-                Contact
-            </button>
+        <div v-if="visibleTabs.length > 1" class="esc-w-tabs">
             <button
-                v-if="chatAvailable"
+                v-for="tab in visibleTabs"
+                :key="tab"
                 class="esc-w-tab"
-                :class="{ active: activeTab === 'chat' }"
-                @click="
-                    activeTab = 'chat';
-                    error = '';
-                "
+                :class="{ active: currentTab === tab }"
+                @click="selectTab(tab)"
             >
-                Chat
-            </button>
-            <button
-                class="esc-w-tab"
-                :class="{ active: activeTab === 'status' }"
-                @click="
-                    activeTab = 'status';
-                    error = '';
-                    statusResult = null;
-                "
-            >
-                Check Status
+                {{ TAB_LABELS[tab] }}
             </button>
         </div>
 
         <div class="esc-w-body">
-            <template v-if="activeTab === 'help' && kbEnabled">
+            <template v-if="currentTab === 'help' && kbEnabled">
                 <template v-if="!selectedArticle">
                     <div class="esc-w-field">
                         <input v-model="searchQuery" type="text" class="esc-w-input" placeholder="Search for help..." />
@@ -485,7 +680,7 @@ function formatDate(iso) {
                 </template>
             </template>
 
-            <template v-if="activeTab === 'contact'">
+            <template v-if="currentTab === 'contact'">
                 <template v-if="ticketSuccess">
                     <div class="esc-w-success">
                         <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
@@ -517,7 +712,7 @@ function formatDate(iso) {
                             <label class="esc-w-label">Description</label>
                             <textarea v-model="ticketForm.description" class="esc-w-textarea" required></textarea>
                         </div>
-                        <div v-if="departments.length" class="esc-w-field">
+                        <div v-if="departments.length && !departmentLocked" class="esc-w-field">
                             <label class="esc-w-label">Department</label>
                             <select v-model="ticketForm.department_id" class="esc-w-select">
                                 <option value="">Select a department...</option>
@@ -526,20 +721,31 @@ function formatDate(iso) {
                                 </option>
                             </select>
                         </div>
+                        <GuestEmailCode
+                            v-if="verificationRequired"
+                            :verification="ticketVerification"
+                            @code="ticketVerification.state.code = $event"
+                        />
                         <button
                             type="submit"
                             class="esc-w-btn"
                             :style="{ backgroundColor: color }"
-                            :disabled="ticketSubmitting"
+                            :disabled="ticketSubmitting || ticketVerification.state.pending"
                         >
-                            {{ ticketSubmitting ? 'Submitting...' : 'Submit Ticket' }}
+                            {{
+                                ticketSubmitting
+                                    ? 'Submitting...'
+                                    : verificationRequired && !ticketVerification.state.id
+                                      ? 'Send verification code'
+                                      : 'Submit Ticket'
+                            }}
                         </button>
                     </form>
                 </template>
             </template>
 
             <!-- Chat Tab -->
-            <template v-if="activeTab === 'chat'">
+            <template v-if="currentTab === 'chat'">
                 <!-- Pre-chat form -->
                 <template v-if="chatPhase === 'pre'">
                     <div class="esc-w-chat-avail">
@@ -556,7 +762,7 @@ function formatDate(iso) {
                             <label class="esc-w-label">Email</label>
                             <input v-model="preChatForm.email" type="email" class="esc-w-input" required />
                         </div>
-                        <div v-if="departments.length > 1" class="esc-w-field">
+                        <div v-if="departments.length > 1 && !departmentLocked" class="esc-w-field">
                             <label class="esc-w-label">Department</label>
                             <select v-model="preChatForm.department_id" class="esc-w-select">
                                 <option value="">Select a department...</option>
@@ -569,13 +775,24 @@ function formatDate(iso) {
                             <label class="esc-w-label">Message (optional)</label>
                             <textarea v-model="preChatForm.message" class="esc-w-textarea"></textarea>
                         </div>
+                        <GuestEmailCode
+                            v-if="verificationRequired"
+                            :verification="chatVerification"
+                            @code="chatVerification.state.code = $event"
+                        />
                         <button
                             type="submit"
                             class="esc-w-btn"
                             :style="{ backgroundColor: color }"
-                            :disabled="chatStarting"
+                            :disabled="chatStarting || chatVerification.state.pending"
                         >
-                            {{ chatStarting ? 'Starting...' : 'Start Chat' }}
+                            {{
+                                chatStarting
+                                    ? 'Starting...'
+                                    : verificationRequired && !chatVerification.state.id
+                                      ? 'Send verification code'
+                                      : 'Start Chat'
+                            }}
                         </button>
                     </form>
                 </template>
@@ -708,7 +925,7 @@ function formatDate(iso) {
                 </template>
             </template>
 
-            <template v-if="activeTab === 'status'">
+            <template v-if="currentTab === 'status'">
                 <div v-if="error" class="esc-w-error">{{ error }}</div>
                 <template v-if="!statusResult">
                     <form @submit.prevent="checkStatus">
@@ -723,7 +940,9 @@ function formatDate(iso) {
                             />
                         </div>
                         <div class="esc-w-field">
-                            <label class="esc-w-label">Ticket Reference</label>
+                            <label class="esc-w-label">{{
+                                verificationRequired ? 'Tracking or ticket reference' : 'Ticket Reference'
+                            }}</label>
                             <input
                                 v-model="statusForm.reference"
                                 type="text"
@@ -732,15 +951,33 @@ function formatDate(iso) {
                                 required
                             />
                         </div>
+                        <GuestEmailCode
+                            v-if="verificationRequired"
+                            :verification="statusVerification"
+                            @code="statusVerification.state.code = $event"
+                        />
                         <button
                             type="submit"
                             class="esc-w-btn"
                             :style="{ backgroundColor: color }"
-                            :disabled="statusLoading"
+                            :disabled="statusLoading || statusVerification.state.pending"
                         >
-                            {{ statusLoading ? 'Checking...' : 'Check Status' }}
+                            {{
+                                statusLoading
+                                    ? 'Checking...'
+                                    : verificationRequired && !statusVerification.state.id
+                                      ? 'Send verification code'
+                                      : 'Check Status'
+                            }}
                         </button>
                     </form>
+                    <ul v-if="statusMatches.length" class="esc-w-results">
+                        <li v-for="match in statusMatches" :key="match.reference">
+                            <button type="button" class="esc-w-back" @click="loadVerifiedStatus(match)">
+                                {{ match.reference }}: {{ match.subject }}
+                            </button>
+                        </li>
+                    </ul>
                 </template>
                 <template v-else>
                     <button