@escalated-dev/escalated 0.11.10 → 0.12.1

package/src/pages/Agent/TicketIndex.vue

@@ -49,7 +49,9 @@ function applyQuickFilter(filter) {
 }
 
 // Real-time updates - refresh the ticket list when new tickets arrive or statuses change
-const { echoAvailable, subscribeToTickets, subscribeToAgent } = useRealtime();
+const { echoAvailable, subscribeToTickets, subscribeToAgent } = useRealtime({
+    channelPrefix: () => page.props.escalated?.broadcasting?.channel_prefix,
+});
 
 onMounted(() => {
     if (!echoAvailable.value) return;

package/src/pages/Agent/TicketShow.vue

@@ -92,7 +92,10 @@ const chatTypingUser = ref(null);
 // Subscribe to chat channel for real-time messages. Pass widgetPath so
 // useChat's API calls resolve against whatever prefix the host framework
 // serves Escalated under (config on NestJS, default /support elsewhere).
-const { subscribeToChat } = useChat({ widgetPath: widgetPath.value });
+const { subscribeToChat } = useChat({
+    channelPrefix: () => page.props.escalated?.broadcasting?.channel_prefix,
+    widgetPath: widgetPath.value,
+});
 let chatTypingTimer = null;
 let chatUnsubscribe = null;
 
@@ -100,9 +103,11 @@ let chatUnsubscribe = null;
 // reuses this page component across ticket navigation (setup() does not re-run),
 // so without this the previous ticket's chat would persist.
 watch(
-    () => props.ticket.id,
+    () => [props.ticket.id, page.props.escalated?.broadcasting?.channel_prefix],
     () => {
         chatMessages.value = props.ticket.chat_messages || [];
+        chatTypingUser.value = null;
+        clearTimeout(chatTypingTimer);
     },
 );
 
@@ -187,7 +192,9 @@ useKeyboardShortcuts({
 });
 
 // Real-time updates via WebSocket (gracefully degrades to no-op when Echo is absent)
-const { echoAvailable, subscribeToTicket } = useRealtime();
+const { echoAvailable, subscribeToTicket } = useRealtime({
+    channelPrefix: () => page.props.escalated?.broadcasting?.channel_prefix,
+});
 let ticketUnsubscribe = null;
 
 // (Re)subscribe whenever the ticket id changes. Because Inertia reuses this
@@ -243,6 +250,7 @@ onUnmounted(() => {
             <PresenceIndicator
                 :ticket-reference="ticket.reference"
                 :ticket-id="ticket.id"
+                :channel-prefix="page.props.escalated?.broadcasting?.channel_prefix"
                 route-prefix="escalated.agent"
             />
             <div class="ml-auto flex items-center gap-2">

package/src/pages/Guest/Create.vue

@@ -1,11 +1,17 @@
 <script setup>
 import EscalatedLayout from '../../components/EscalatedLayout.vue';
 import FileDropzone from '../../components/FileDropzone.vue';
-import { useForm, Link } from '@inertiajs/vue3';
+import GuestEmailCode from '../../components/GuestEmailCode.vue';
+import { useGuestVerification } from '../../composables/useGuestVerification';
+import { guestRequest } from '../../utils/guestRequests';
+import { useForm, usePage, Link } from '@inertiajs/vue3';
+import { reactive, ref, watch } from 'vue';
 
-defineProps({
+const props = defineProps({
     departments: Array,
     priorities: Array,
+    verification_url: { type: String, default: null },
+    lookup_url: { type: String, default: null },
 });
 
 const form = useForm({
@@ -16,10 +22,62 @@ const form = useForm({
     priority: 'medium',
     department_id: '',
     attachments: [],
+    verification_id: '',
+    verification_code: '',
 });
 
-function submit() {
-    form.post(route('escalated.guest.tickets.store'));
+const page = usePage();
+const context = () =>
+    `${props.verification_url}|${props.lookup_url}|${page.props.escalated?.broadcasting?.channel_prefix || ''}`;
+const requestCode = (email, purpose) => guestRequest(props.verification_url, { email, purpose });
+const verification = useGuestVerification(() => form.guest_email, 'ticket', requestCode, context);
+const lookup = reactive({ email: '', reference: '', pending: false, error: '', searched: false });
+const matches = ref([]);
+watch(
+    () => `${lookup.email}|${lookup.reference}`,
+    () => {
+        matches.value = [];
+        lookup.searched = false;
+    },
+);
+const lookupVerification = useGuestVerification(() => lookup.email, 'lookup', requestCode, context);
+watch(context, () => {
+    form.cancel();
+    form.reset();
+    Object.assign(lookup, { email: '', reference: '', pending: false, error: '', searched: false });
+    matches.value = [];
+});
+
+async function submit() {
+    if (props.verification_url) {
+        if (!(await verification.ready())) return;
+        Object.assign(form, verification.fields());
+    }
+    form.post(route('escalated.guest.tickets.store'), { onSuccess: () => verification.reset() });
+}
+
+async function findTickets() {
+    lookup.error = '';
+    if (!(await lookupVerification.ready())) return;
+    lookup.pending = true;
+    const current = context();
+    const email = lookup.email;
+    const reference = lookup.reference;
+    try {
+        const data = await guestRequest(props.lookup_url, {
+            email,
+            reference: lookup.reference,
+            ...lookupVerification.fields(),
+        });
+        if (current !== context() || email !== lookup.email || reference !== lookup.reference) return;
+        matches.value = data.data || [];
+        lookup.searched = true;
+        lookupVerification.reset();
+    } catch (error) {
+        if (current === context() && email === lookup.email) lookup.error = error.message;
+    } finally {
+        if (current === context()) lookup.pending = false;
+    }
 }
 </script>
 
@@ -28,7 +86,13 @@ function submit() {
         <div class="mx-auto max-w-2xl">
             <div class="mb-6 text-center">
                 <h1 class="text-xl font-semibold text-gray-900">Submit a Support Ticket</h1>
-                <p class="mt-1 text-sm text-gray-500">No account needed. We'll give you a link to track your ticket.</p>
+                <p class="mt-1 text-sm text-gray-500">
+                    {{
+                        verification_url
+                            ? 'No account needed. Verify your email to submit a ticket and receive a private link.'
+                            : "No account needed. We'll give you a link to track your ticket."
+                    }}
+                </p>
                 <Link :href="route('login')" class="mt-2 inline-block text-sm text-indigo-600 hover:text-indigo-700">
                     Already have an account? Sign in
                 </Link>
@@ -107,16 +171,82 @@ function submit() {
                     <FileDropzone v-model="form.attachments" />
                 </div>
 
+                <GuestEmailCode
+                    v-if="verification_url"
+                    :verification="verification"
+                    @code="verification.state.code = $event"
+                />
+                <p
+                    v-if="form.errors.verification_code || form.errors.verification_id"
+                    class="text-sm text-red-600"
+                    role="alert"
+                >
+                    {{ form.errors.verification_code || form.errors.verification_id }}
+                </p>
                 <div class="flex justify-end">
                     <button
                         type="submit"
-                        :disabled="form.processing"
+                        :disabled="form.processing || verification.state.pending"
                         class="rounded-lg bg-indigo-600 px-6 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
                     >
-                        {{ form.processing ? 'Submitting...' : 'Submit Ticket' }}
+                        {{
+                            form.processing
+                                ? 'Submitting...'
+                                : verification_url && !verification.state.id
+                                  ? 'Send verification code'
+                                  : 'Submit Ticket'
+                        }}
                     </button>
                 </div>
             </form>
+
+            <form
+                v-if="lookup_url"
+                class="mt-8 space-y-4 rounded-lg border border-gray-200 bg-white p-6"
+                @submit.prevent="findTickets"
+            >
+                <h2 class="text-lg font-semibold">Find a ticket or renew your link</h2>
+                <label class="block text-sm"
+                    >Email address
+                    <input
+                        v-model="lookup.email"
+                        type="email"
+                        required
+                        class="mt-1 block w-full rounded-lg border-gray-300"
+                    />
+                </label>
+                <label class="block text-sm"
+                    >Tracking or ticket reference
+                    <input
+                        v-model="lookup.reference"
+                        type="text"
+                        maxlength="255"
+                        required
+                        class="mt-1 block w-full rounded-lg border-gray-300"
+                    />
+                </label>
+                <GuestEmailCode :verification="lookupVerification" @code="lookupVerification.state.code = $event" />
+                <p v-if="lookup.error" class="text-sm text-red-600" role="alert">{{ lookup.error }}</p>
+                <button
+                    type="submit"
+                    :disabled="lookup.pending || lookupVerification.state.pending"
+                    class="rounded-lg bg-indigo-600 px-4 py-2 text-sm text-white disabled:opacity-50"
+                >
+                    {{ lookupVerification.state.id ? 'Find tickets' : 'Send verification code' }}
+                </button>
+                <p v-if="lookup.searched && !matches.length" class="text-sm">
+                    No tickets matched that reference and email.
+                </p>
+                <ul v-if="matches.length" class="space-y-2">
+                    <li v-for="match in matches" :key="match.reference">
+                        <a
+                            :href="route('escalated.guest.tickets.show', match.guest_access_token)"
+                            class="text-indigo-600 underline"
+                            >{{ match.reference }}: {{ match.subject }}</a
+                        >
+                    </li>
+                </ul>
+            </form>
         </div>
     </EscalatedLayout>
 </template>

package/src/pages/Guest/Show.vue

@@ -52,6 +52,12 @@ function copyLink() {
                         <p class="mt-0.5 text-xs text-amber-600">
                             This is your private link to view and reply to this ticket.
                         </p>
+                        <p v-if="ticket.guest_access_expires_at" class="mt-1 text-xs text-amber-600">
+                            Expires {{ new Date(ticket.guest_access_expires_at).toLocaleString() }}.
+                            <a :href="route('escalated.guest.tickets.create')" class="underline"
+                                >Verify your email to renew it.</a
+                            >
+                        </p>
                     </div>
                     <button
                         class="ml-auto shrink-0 rounded-md border border-amber-300 bg-white px-2.5 py-1 text-xs font-medium text-amber-700 hover:bg-amber-50"

package/src/utils/flash.js

@@ -0,0 +1,4 @@
+/** Shared props remain supported; Inertia 3's explicit values take precedence. */
+export function readFlash(page) {
+    return { ...page?.props?.flash, ...page?.flash };
+}

package/src/utils/guestRequests.js

@@ -0,0 +1,27 @@
+/** Never forward the embedding site's CSRF token to another origin. */
+export function guestCsrfHeaders(url) {
+    if (typeof window === 'undefined' || new URL(url, window.location.href).origin !== window.location.origin)
+        return {};
+    const token = document.querySelector('meta[name="csrf-token"]')?.content;
+    if (token) return { 'X-CSRF-TOKEN': token };
+    const cookie = document.cookie.split('; ').find((value) => value.startsWith('XSRF-TOKEN='));
+    if (!cookie) return {};
+    try {
+        return { 'X-XSRF-TOKEN': decodeURIComponent(cookie.slice('XSRF-TOKEN='.length)) };
+    } catch {
+        return {};
+    }
+}
+
+export async function guestRequest(url, body) {
+    const response = await fetch(url, {
+        method: 'POST',
+        credentials: 'same-origin',
+        headers: { Accept: 'application/json', 'Content-Type': 'application/json', ...guestCsrfHeaders(url) },
+        body: JSON.stringify(body),
+    });
+    const data = await response.json();
+    if (!response.ok)
+        throw new Error(data.errors ? Object.values(data.errors).flat().join(' ') : data.message || 'Request failed.');
+    return data;
+}