@escalated-dev/escalated 0.8.0 → 0.9.0

package/src/components/admin/newsletters/MergeFieldDropdown.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="merge-field-dropdown">
+        <button type="button" class="merge-field-dropdown__toggle" @click="open = !open">
+            {{ $t('newsletters.merge_fields.label') }} ▾
+        </button>
+        <ul v-if="open" class="merge-field-dropdown__menu">
+            <li v-for="opt in options" :key="opt.path" :data-path="opt.path" @click="pick(opt.path)">
+                <code>{{ tokenFor(opt.path) }}</code>
+                <span class="merge-field-dropdown__hint">{{ opt.label }}</span>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+    metadataKeys: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits(['insert']);
+const open = ref(false);
+
+const options = computed(() => [
+    { path: 'contact.name', label: 'Contact full name' },
+    { path: 'contact.first_name', label: 'Contact first name' },
+    { path: 'contact.email', label: 'Contact email' },
+    { path: 'unsubscribe_url', label: 'Unsubscribe URL' },
+    { path: 'view_in_browser_url', label: 'View-in-browser URL' },
+    ...props.metadataKeys.map((k) => ({ path: `contact.metadata.${k}`, label: `Metadata: ${k}` })),
+]);
+
+function pick(path) {
+    emit('insert', path);
+    open.value = false;
+}
+
+function tokenFor(path) {
+    return `{{ ${path} }}`;
+}
+</script>
+
+<style scoped>
+.merge-field-dropdown {
+    position: relative;
+    display: inline-block;
+}
+.merge-field-dropdown__toggle {
+    padding: 6px 10px;
+    border: 1px solid var(--escalated-border, #e2e8f0);
+    background: white;
+    border-radius: 4px;
+    cursor: pointer;
+}
+.merge-field-dropdown__menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 10;
+    margin: 4px 0 0;
+    padding: 4px 0;
+    min-width: 280px;
+    list-style: none;
+    background: white;
+    border: 1px solid var(--escalated-border, #e2e8f0);
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+.merge-field-dropdown__menu li {
+    padding: 8px 12px;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+}
+.merge-field-dropdown__menu li:hover {
+    background: var(--escalated-bg-hover, #f7fafc);
+}
+.merge-field-dropdown__hint {
+    color: var(--escalated-text-muted, #64748b);
+    font-size: 12px;
+}
+</style>

package/src/components/admin/newsletters/PreviewIframe.stories.js

@@ -0,0 +1,7 @@
+import PreviewIframe from './PreviewIframe.vue';
+
+export default { title: 'Admin/Newsletters/PreviewIframe', component: PreviewIframe };
+
+export const Empty = { args: { html: '<p>(empty)</p>' } };
+export const Rendered = { args: { html: '<h1>Newsletter</h1><p>Hello Maria,</p><p>Welcome aboard.</p>' } };
+export const Loading = { args: { html: '<h1>Newsletter</h1>', loading: true } };

package/src/components/admin/newsletters/PreviewIframe.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="preview-iframe">
+        <div v-if="loading" class="preview-iframe__loading">Rendering preview…</div>
+        <iframe :srcdoc="html" sandbox="allow-same-origin" class="preview-iframe__frame" title="Newsletter preview" />
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    html: { type: String, default: '' },
+    loading: { type: Boolean, default: false },
+});
+</script>
+
+<style scoped>
+.preview-iframe {
+    position: relative;
+    height: 100%;
+    min-height: 480px;
+    border: 1px solid var(--escalated-border, #e2e8f0);
+    border-radius: 6px;
+    overflow: hidden;
+    background: white;
+}
+.preview-iframe__frame {
+    width: 100%;
+    height: 100%;
+    border: 0;
+}
+.preview-iframe__loading {
+    position: absolute;
+    top: 8px;
+    right: 12px;
+    font-size: 12px;
+    color: var(--escalated-text-muted, #64748b);
+    background: rgba(255, 255, 255, 0.9);
+    padding: 4px 8px;
+    border-radius: 4px;
+}
+</style>

package/src/components/admin/newsletters/SummaryTiles.stories.js

@@ -0,0 +1,8 @@
+import SummaryTiles from './SummaryTiles.vue';
+
+export default { title: 'Admin/Newsletters/SummaryTiles', component: SummaryTiles };
+
+export const Healthy = {
+    args: { summary: { total: 1000, sent: 990, opened: 400, clicked: 80, bounced: 10, complained: 1 } },
+};
+export const Empty = { args: { summary: { total: 0, sent: 0, opened: 0, clicked: 0, bounced: 0, complained: 0 } } };

package/src/components/admin/newsletters/SummaryTiles.vue

@@ -0,0 +1,63 @@
+<template>
+    <div class="summary-tiles">
+        <div v-for="tile in tiles" :key="tile.key" class="summary-tiles__tile">
+            <div class="summary-tiles__label">{{ tile.label }}</div>
+            <div class="summary-tiles__value">{{ tile.value }}</div>
+            <div v-if="tile.rate !== null" class="summary-tiles__rate">{{ tile.rate }}</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    summary: { type: Object, required: true },
+});
+
+function rate(num, denom) {
+    if (!denom) return '—';
+    return `${((num / denom) * 100).toFixed(1)}%`;
+}
+
+const tiles = computed(() => {
+    const s = props.summary;
+    return [
+        { key: 'sent', label: 'Sent', value: s.sent, rate: null },
+        { key: 'opened', label: 'Opened', value: s.opened, rate: rate(s.opened, s.sent) },
+        { key: 'clicked', label: 'Clicked', value: s.clicked, rate: rate(s.clicked, s.sent) },
+        { key: 'bounced', label: 'Bounced', value: s.bounced, rate: rate(s.bounced, s.sent) },
+        { key: 'complained', label: 'Complained', value: s.complained, rate: rate(s.complained, s.sent) },
+    ];
+});
+</script>
+
+<style scoped>
+.summary-tiles {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 12px;
+}
+.summary-tiles__tile {
+    background: white;
+    border: 1px solid var(--escalated-border, #e2e8f0);
+    border-radius: 8px;
+    padding: 16px;
+}
+.summary-tiles__label {
+    font-size: 12px;
+    text-transform: uppercase;
+    color: var(--escalated-text-muted, #64748b);
+    letter-spacing: 0.04em;
+}
+.summary-tiles__value {
+    font-size: 28px;
+    font-weight: 600;
+    margin-top: 4px;
+}
+.summary-tiles__rate {
+    font-size: 13px;
+    color: var(--escalated-text-muted, #64748b);
+    margin-top: 2px;
+}
+</style>

package/src/composables/useChat.js

@@ -1,187 +1,187 @@
-import { ref, readonly } from 'vue';
-import { useRealtime } from './useRealtime';
-
-/**
- * Composable for live chat functionality.
- *
- * Provides methods to start, send messages, end, and rate chat sessions,
- * plus real-time subscription via useRealtime.
- *
- * @param {Object} [options]
- * @param {string} [options.widgetPath] - Path prefix under which the host
- *   framework mounts widget routes. Defaults to `/support/widget` which
- *   matches every host-adapter plugin (Laravel / Rails / Django / Adonis /
- *   WordPress / Filament / Symfony / .NET / Go / Spring / Phoenix). On a
- *   NestJS backend, pass `/escalated/widget` (or read from whatever
- *   configuration channel the host app exposes to the client).
- */
-export function useChat(options = {}) {
-    const widgetPath = options.widgetPath ?? '/support/widget';
-    const connectionState = ref('disconnected'); // disconnected | connecting | connected
-    const messageBuffer = ref([]);
-
-    const { echoAvailable, listen } = useRealtime();
-
-    function csrfToken() {
-        return typeof document !== 'undefined' ? document.querySelector('meta[name="csrf-token"]')?.content || '' : '';
-    }
-
-    async function apiRequest(method, path, body = null) {
-        const opts = {
-            method,
-            headers: {
-                Accept: 'application/json',
-                'Content-Type': 'application/json',
-                'X-Requested-With': 'XMLHttpRequest',
-                'X-CSRF-TOKEN': csrfToken(),
-            },
-        };
-        if (body) opts.body = JSON.stringify(body);
-        const res = await fetch(path, opts);
-        const data = await res.json();
-        if (!res.ok) throw { status: res.status, data };
-        return data;
-    }
-
-    /**
-     * Start a new chat session.
-     * @param {Object} data - { name, email, department_id, message }
-     * @returns {Promise<Object>} The created chat session
-     */
-    async function startChat(data) {
-        return apiRequest('POST', `${widgetPath}/chat/start`, data);
-    }
-
-    /**
-     * Send a message in a chat session.
-     * @param {string|number} sessionId
-     * @param {Object} body - { body, is_internal_note?, attachments? }
-     * @returns {Promise<Object>}
-     */
-    async function sendMessage(sessionId, body) {
-        const message = await apiRequest('POST', `${widgetPath}/chat/${sessionId}/messages`, body);
-        return message;
-    }
-
-    /**
-     * Send typing indicator (debounced by caller).
-     * @param {string|number} sessionId
-     * @returns {Promise<void>}
-     */
-    let lastTypingSent = 0;
-    async function sendTyping(sessionId) {
-        const now = Date.now();
-        if (now - lastTypingSent < 3000) return;
-        lastTypingSent = now;
-        try {
-            await apiRequest('POST', `${widgetPath}/chat/${sessionId}/typing`);
-        } catch {
-            // silently ignore typing failures
-        }
-    }
-
-    /**
-     * End a chat session.
-     * @param {string|number} sessionId
-     * @returns {Promise<Object>}
-     */
-    async function endChat(sessionId) {
-        return apiRequest('POST', `${widgetPath}/chat/${sessionId}/end`);
-    }
-
-    /**
-     * Rate a completed chat session.
-     * @param {string|number} sessionId
-     * @param {number} rating - 1-5 star rating
-     * @param {string} [comment]
-     * @returns {Promise<Object>}
-     */
-    async function rateChat(sessionId, rating, comment = '') {
-        return apiRequest('POST', `${widgetPath}/chat/${sessionId}/rate`, { rating, comment });
-    }
-
-    /**
-     * Check chat availability for a department.
-     * @param {string|number} [departmentId]
-     * @returns {Promise<Object>} { available, message, estimated_wait }
-     */
-    async function checkAvailability(departmentId = null) {
-        const query = departmentId ? `?department_id=${departmentId}` : '';
-        return apiRequest('GET', `${widgetPath}/chat/availability${query}`);
-    }
-
-    /**
-     * Subscribe to real-time chat events for a session.
-     * @param {string|number} sessionId
-     * @param {Object} callbacks
-     * @param {Function} [callbacks.onMessage]
-     * @param {Function} [callbacks.onTyping]
-     * @param {Function} [callbacks.onEnded]
-     * @param {Function} [callbacks.onAssigned]
-     * @returns {Function} Unsubscribe function
-     */
-    function subscribeToChat(sessionId, callbacks = {}) {
-        if (!echoAvailable.value) return () => {};
-
-        const channelName = `escalated.chat.${sessionId}`;
-        const unsubs = [];
-
-        if (callbacks.onMessage) {
-            unsubs.push(listen(channelName, '.chat.message', callbacks.onMessage));
-        }
-        if (callbacks.onTyping) {
-            unsubs.push(listen(channelName, '.chat.typing', callbacks.onTyping));
-        }
-        if (callbacks.onEnded) {
-            unsubs.push(listen(channelName, '.chat.ended', callbacks.onEnded));
-        }
-        if (callbacks.onAssigned) {
-            unsubs.push(listen(channelName, '.chat.assigned', callbacks.onAssigned));
-        }
-
-        connectionState.value = 'connected';
-
-        return () => {
-            unsubs.forEach((fn) => fn());
-            connectionState.value = 'disconnected';
-        };
-    }
-
-    /**
-     * Subscribe to the chat queue channel for new incoming chats.
-     * @param {Object} callbacks
-     * @param {Function} [callbacks.onNewChat]
-     * @param {Function} [callbacks.onChatAccepted]
-     * @returns {Function} Unsubscribe function
-     */
-    function subscribeToChatQueue(callbacks = {}) {
-        if (!echoAvailable.value) return () => {};
-
-        const channelName = 'escalated.chat.queue';
-        const unsubs = [];
-
-        if (callbacks.onNewChat) {
-            unsubs.push(listen(channelName, '.chat.new', callbacks.onNewChat));
-        }
-        if (callbacks.onChatAccepted) {
-            unsubs.push(listen(channelName, '.chat.accepted', callbacks.onChatAccepted));
-        }
-
-        return () => {
-            unsubs.forEach((fn) => fn());
-        };
-    }
-
-    return {
-        connectionState: readonly(connectionState),
-        messageBuffer: readonly(messageBuffer),
-        startChat,
-        sendMessage,
-        sendTyping,
-        endChat,
-        rateChat,
-        checkAvailability,
-        subscribeToChat,
-        subscribeToChatQueue,
-    };
-}
+import { ref, readonly } from 'vue';
+import { useRealtime } from './useRealtime';
+
+/**
+ * Composable for live chat functionality.
+ *
+ * Provides methods to start, send messages, end, and rate chat sessions,
+ * plus real-time subscription via useRealtime.
+ *
+ * @param {Object} [options]
+ * @param {string} [options.widgetPath] - Path prefix under which the host
+ *   framework mounts widget routes. Defaults to `/support/widget` which
+ *   matches every host-adapter plugin (Laravel / Rails / Django / Adonis /
+ *   WordPress / Filament / Symfony / .NET / Go / Spring / Phoenix). On a
+ *   NestJS backend, pass `/escalated/widget` (or read from whatever
+ *   configuration channel the host app exposes to the client).
+ */
+export function useChat(options = {}) {
+    const widgetPath = options.widgetPath ?? '/support/widget';
+    const connectionState = ref('disconnected'); // disconnected | connecting | connected
+    const messageBuffer = ref([]);
+
+    const { echoAvailable, listen } = useRealtime();
+
+    function csrfToken() {
+        return typeof document !== 'undefined' ? document.querySelector('meta[name="csrf-token"]')?.content || '' : '';
+    }
+
+    async function apiRequest(method, path, body = null) {
+        const opts = {
+            method,
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRF-TOKEN': csrfToken(),
+            },
+        };
+        if (body) opts.body = JSON.stringify(body);
+        const res = await fetch(path, opts);
+        const data = await res.json();
+        if (!res.ok) throw { status: res.status, data };
+        return data;
+    }
+
+    /**
+     * Start a new chat session.
+     * @param {Object} data - { name, email, department_id, message }
+     * @returns {Promise<Object>} The created chat session
+     */
+    async function startChat(data) {
+        return apiRequest('POST', `${widgetPath}/chat/start`, data);
+    }
+
+    /**
+     * Send a message in a chat session.
+     * @param {string|number} sessionId
+     * @param {Object} body - { body, is_internal_note?, attachments? }
+     * @returns {Promise<Object>}
+     */
+    async function sendMessage(sessionId, body) {
+        const message = await apiRequest('POST', `${widgetPath}/chat/${sessionId}/messages`, body);
+        return message;
+    }
+
+    /**
+     * Send typing indicator (debounced by caller).
+     * @param {string|number} sessionId
+     * @returns {Promise<void>}
+     */
+    let lastTypingSent = 0;
+    async function sendTyping(sessionId) {
+        const now = Date.now();
+        if (now - lastTypingSent < 3000) return;
+        lastTypingSent = now;
+        try {
+            await apiRequest('POST', `${widgetPath}/chat/${sessionId}/typing`);
+        } catch {
+            // silently ignore typing failures
+        }
+    }
+
+    /**
+     * End a chat session.
+     * @param {string|number} sessionId
+     * @returns {Promise<Object>}
+     */
+    async function endChat(sessionId) {
+        return apiRequest('POST', `${widgetPath}/chat/${sessionId}/end`);
+    }
+
+    /**
+     * Rate a completed chat session.
+     * @param {string|number} sessionId
+     * @param {number} rating - 1-5 star rating
+     * @param {string} [comment]
+     * @returns {Promise<Object>}
+     */
+    async function rateChat(sessionId, rating, comment = '') {
+        return apiRequest('POST', `${widgetPath}/chat/${sessionId}/rate`, { rating, comment });
+    }
+
+    /**
+     * Check chat availability for a department.
+     * @param {string|number} [departmentId]
+     * @returns {Promise<Object>} { available, message, estimated_wait }
+     */
+    async function checkAvailability(departmentId = null) {
+        const query = departmentId ? `?department_id=${departmentId}` : '';
+        return apiRequest('GET', `${widgetPath}/chat/availability${query}`);
+    }
+
+    /**
+     * Subscribe to real-time chat events for a session.
+     * @param {string|number} sessionId
+     * @param {Object} callbacks
+     * @param {Function} [callbacks.onMessage]
+     * @param {Function} [callbacks.onTyping]
+     * @param {Function} [callbacks.onEnded]
+     * @param {Function} [callbacks.onAssigned]
+     * @returns {Function} Unsubscribe function
+     */
+    function subscribeToChat(sessionId, callbacks = {}) {
+        if (!echoAvailable.value) return () => {};
+
+        const channelName = `escalated.chat.${sessionId}`;
+        const unsubs = [];
+
+        if (callbacks.onMessage) {
+            unsubs.push(listen(channelName, '.chat.message', callbacks.onMessage));
+        }
+        if (callbacks.onTyping) {
+            unsubs.push(listen(channelName, '.chat.typing', callbacks.onTyping));
+        }
+        if (callbacks.onEnded) {
+            unsubs.push(listen(channelName, '.chat.ended', callbacks.onEnded));
+        }
+        if (callbacks.onAssigned) {
+            unsubs.push(listen(channelName, '.chat.assigned', callbacks.onAssigned));
+        }
+
+        connectionState.value = 'connected';
+
+        return () => {
+            unsubs.forEach((fn) => fn());
+            connectionState.value = 'disconnected';
+        };
+    }
+
+    /**
+     * Subscribe to the chat queue channel for new incoming chats.
+     * @param {Object} callbacks
+     * @param {Function} [callbacks.onNewChat]
+     * @param {Function} [callbacks.onChatAccepted]
+     * @returns {Function} Unsubscribe function
+     */
+    function subscribeToChatQueue(callbacks = {}) {
+        if (!echoAvailable.value) return () => {};
+
+        const channelName = 'escalated.chat.queue';
+        const unsubs = [];
+
+        if (callbacks.onNewChat) {
+            unsubs.push(listen(channelName, '.chat.new', callbacks.onNewChat));
+        }
+        if (callbacks.onChatAccepted) {
+            unsubs.push(listen(channelName, '.chat.accepted', callbacks.onChatAccepted));
+        }
+
+        return () => {
+            unsubs.forEach((fn) => fn());
+        };
+    }
+
+    return {
+        connectionState: readonly(connectionState),
+        messageBuffer: readonly(messageBuffer),
+        startChat,
+        sendMessage,
+        sendTyping,
+        endChat,
+        rateChat,
+        checkAvailability,
+        subscribeToChat,
+        subscribeToChatQueue,
+    };
+}