@escalated-dev/escalated 0.11.10 → 0.12.0

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/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;
+}

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: '' },
@@ -67,53 +70,117 @@ const ticketSuccess = ref(null);
 const statusForm = ref({ 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 = { name: '', email: '', subject: '', description: '', department_id: '' };
+        statusForm.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,
+            ...(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 +189,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 +249,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 +272,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 +291,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 = [];
@@ -303,17 +389,22 @@ 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,
+            ...(verificationRequired.value ? ticketVerification.fields() : {}),
         });
+        if (email !== ticketForm.value.email) return;
         ticketSuccess.value = data;
+        ticketVerification.reset();
         ticketForm.value = {
             name: '',
             email: '',
@@ -322,6 +413,7 @@ async function submitTicket() {
             department_id: '',
         };
     } catch (e) {
+        if (e.name === 'AbortError') return;
         if (e.data?.errors) {
             error.value = Object.values(e.data.errors).flat().join(' ');
         } else {
@@ -333,22 +425,51 @@ 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.';
+    }
+}
+
 function togglePanel() {
     isOpen.value = !isOpen.value;
     error.value = '';
@@ -526,13 +647,24 @@ 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>
@@ -569,13 +701,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>
@@ -723,7 +866,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 +877,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