@escalated-dev/escalated 0.5.0 → 0.7.0

package/src/pages/Customer/Index.vue

@@ -1,24 +1,31 @@
-<script setup>
-import EscalatedLayout from '../../components/EscalatedLayout.vue';
-import TicketList from '../../components/TicketList.vue';
-import TicketFilters from '../../components/TicketFilters.vue';
-import { Link } from '@inertiajs/vue3';
-
-defineProps({
-    tickets: Object,
-    filters: Object,
-});
-</script>
-
-<template>
-    <EscalatedLayout title="My Tickets">
-        <div class="mb-6 flex items-center justify-between">
-            <TicketFilters :filters="filters" :route="route('escalated.customer.tickets.index')" />
-            <Link :href="route('escalated.customer.tickets.create')"
-                  class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">
-                New Ticket
-            </Link>
-        </div>
-        <TicketList :tickets="tickets" route-prefix="escalated.customer.tickets" />
-    </EscalatedLayout>
-</template>
+<script setup>
+import EscalatedLayout from '../../components/EscalatedLayout.vue';
+import TicketList from '../../components/TicketList.vue';
+import TicketFilters from '../../components/TicketFilters.vue';
+import PluginSlot from '../../components/PluginSlot.vue';
+import { Link } from '@inertiajs/vue3';
+import { usePluginExtensions } from '../../composables/usePluginExtensions';
+
+defineProps({
+    tickets: Object,
+    filters: Object,
+});
+
+const { getPageComponents } = usePluginExtensions();
+</script>
+
+<template>
+    <EscalatedLayout title="My Tickets">
+        <PluginSlot slot="customer.index.header" :components="getPageComponents('customer.index', 'header')" />
+        <div class="mb-6 flex items-center justify-between">
+            <TicketFilters :filters="filters" :route="route('escalated.customer.tickets.index')" />
+            <Link
+                :href="route('escalated.customer.tickets.create')"
+                class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700"
+            >
+                New Ticket
+            </Link>
+        </div>
+        <TicketList :tickets="tickets" route-prefix="escalated.customer.tickets" />
+    </EscalatedLayout>
+</template>

package/src/pages/Customer/KnowledgeBase/Article.vue

@@ -0,0 +1,127 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { router, Link } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+const props = defineProps({
+    article: Object,
+    related: Array,
+});
+
+const feedbackSent = ref(false);
+
+function sendFeedback(helpful) {
+    router.post(
+        route('escalated.customer.kb.feedback', props.article.slug),
+        {
+            helpful,
+        },
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                feedbackSent.value = true;
+            },
+        },
+    );
+}
+</script>
+
+<template>
+    <EscalatedLayout :title="article.title">
+        <div class="mx-auto max-w-3xl">
+            <div class="mb-6">
+                <Link :href="route('escalated.customer.kb.index')" class="text-sm text-gray-500 hover:text-gray-700">
+                    &larr; Back to Knowledge Base
+                </Link>
+            </div>
+
+            <!-- Breadcrumb -->
+            <div v-if="article.category" class="mb-4 flex items-center gap-2 text-xs text-gray-500">
+                <Link :href="route('escalated.customer.kb.index')" class="hover:text-gray-700">Knowledge Base</Link>
+                <span>/</span>
+                <Link
+                    :href="route('escalated.customer.kb.index', { category: article.category.id })"
+                    class="hover:text-gray-700"
+                    >{{ article.category.name }}</Link
+                >
+            </div>
+
+            <!-- Article -->
+            <article class="rounded-lg border border-gray-200 bg-white p-8">
+                <h1 class="mb-4 text-2xl font-bold text-gray-900">{{ article.title }}</h1>
+                <div class="mb-6 flex items-center gap-4 text-xs text-gray-500">
+                    <span>{{ article.view_count }} views</span>
+                    <span v-if="article.published_at"
+                        >Published {{ new Date(article.published_at).toLocaleDateString() }}</span
+                    >
+                </div>
+
+                <!-- Article body rendered as HTML -->
+                <div class="prose prose-gray max-w-none text-gray-700" v-html="article.body"></div>
+            </article>
+
+            <!-- Feedback -->
+            <div class="mt-6 rounded-lg border border-gray-200 bg-white p-6 text-center">
+                <template v-if="!feedbackSent">
+                    <p class="mb-3 text-sm font-medium text-gray-700">Was this article helpful?</p>
+                    <div class="flex items-center justify-center gap-3">
+                        <button
+                            class="inline-flex items-center gap-2 rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:border-green-300 hover:bg-green-50 hover:text-green-700"
+                            @click="sendFeedback(true)"
+                        >
+                            <svg
+                                class="h-4 w-4"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h.904"
+                                />
+                            </svg>
+                            Yes
+                        </button>
+                        <button
+                            class="inline-flex items-center gap-2 rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:border-red-300 hover:bg-red-50 hover:text-red-700"
+                            @click="sendFeedback(false)"
+                        >
+                            <svg
+                                class="h-4 w-4"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    d="M7.5 15h2.25m8.024-9.75c.011.05.028.1.052.148.591 1.2.924 2.55.924 3.977a8.96 8.96 0 01-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398C20.613 14.547 19.833 15 19 15h-.904c-.26 0-.507-.098-.672-.28a5.002 5.002 0 01-.188-.226M7.5 15c-.863 0-1.706-.12-2.514-.348m2.514.348c.26.044.507.22.672.44a4.992 4.992 0 001.423 1.305M4.986 14.652a4.5 4.5 0 01-.236-.442m.236.442c-.31.652-.762 1.168-1.285 1.5m4.78-1.5a11.92 11.92 0 01-.813 1.25m.813-1.25c-.418.593-.91 1.098-1.459 1.5m1.459-1.5a6.12 6.12 0 01-.813 1.25m-2.606 0c-.5.338-1.1.5-1.71.5h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h.904"
+                                />
+                            </svg>
+                            No
+                        </button>
+                    </div>
+                </template>
+                <p v-else class="text-sm text-green-600">Thank you for your feedback!</p>
+            </div>
+
+            <!-- Related Articles -->
+            <div v-if="related?.length" class="mt-6">
+                <h3 class="mb-3 text-sm font-semibold text-gray-900">Related Articles</h3>
+                <div class="space-y-2">
+                    <Link
+                        v-for="item in related"
+                        :key="item.id"
+                        :href="route('escalated.customer.kb.show', item.slug)"
+                        class="block rounded-lg border border-gray-200 bg-white px-4 py-3 text-sm text-gray-700 transition-colors hover:border-gray-300 hover:bg-gray-50"
+                    >
+                        {{ item.title }}
+                    </Link>
+                </div>
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Customer/KnowledgeBase/Index.vue

@@ -0,0 +1,151 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { router, Link } from '@inertiajs/vue3';
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+    categories: Array,
+    articles: Object,
+    filters: Object,
+});
+
+const search = ref(props.filters?.search || '');
+const selectedCategory = ref(props.filters?.category || '');
+
+let debounceTimer;
+function applyFilters() {
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+        router.get(
+            route('escalated.customer.kb.index'),
+            {
+                search: search.value || undefined,
+                category: selectedCategory.value || undefined,
+            },
+            { preserveState: true, preserveScroll: true },
+        );
+    }, 300);
+}
+
+watch([search, selectedCategory], applyFilters);
+</script>
+
+<template>
+    <EscalatedLayout title="Knowledge Base">
+        <!-- Search -->
+        <div class="mb-8 text-center">
+            <h1 class="mb-3 text-2xl font-bold text-gray-900">How can we help you?</h1>
+            <div class="mx-auto max-w-lg">
+                <input
+                    v-model="search"
+                    type="text"
+                    placeholder="Search articles..."
+                    class="w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm text-gray-900 shadow-sm placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20"
+                />
+            </div>
+        </div>
+
+        <!-- Categories -->
+        <div v-if="categories?.length && !search" class="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            <button
+                v-for="cat in categories"
+                :key="cat.id"
+                :class="[
+                    'rounded-lg border p-5 text-left transition-all',
+                    selectedCategory == cat.id
+                        ? 'border-indigo-500 bg-indigo-50 shadow-sm'
+                        : 'border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm',
+                ]"
+                @click="selectedCategory = selectedCategory == cat.id ? '' : cat.id"
+            >
+                <div class="flex items-center gap-3">
+                    <div
+                        :class="[
+                            'flex h-10 w-10 items-center justify-center rounded-lg',
+                            selectedCategory == cat.id ? 'bg-indigo-100' : 'bg-gray-100',
+                        ]"
+                    >
+                        <svg
+                            :class="['h-5 w-5', selectedCategory == cat.id ? 'text-indigo-600' : 'text-gray-500']"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            viewBox="0 0 24 24"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"
+                            />
+                        </svg>
+                    </div>
+                    <div>
+                        <h3
+                            :class="[
+                                'text-sm font-semibold',
+                                selectedCategory == cat.id ? 'text-indigo-900' : 'text-gray-900',
+                            ]"
+                        >
+                            {{ cat.name }}
+                        </h3>
+                        <p class="text-xs text-gray-500">{{ cat.articles_count }} articles</p>
+                    </div>
+                </div>
+                <p v-if="cat.description" class="mt-2 text-xs text-gray-500">{{ cat.description }}</p>
+            </button>
+        </div>
+
+        <!-- Articles -->
+        <div class="space-y-3">
+            <Link
+                v-for="article in articles.data"
+                :key="article.id"
+                :href="route('escalated.customer.kb.show', article.slug)"
+                class="block rounded-lg border border-gray-200 bg-white p-4 transition-all hover:border-gray-300 hover:shadow-sm"
+            >
+                <h3 class="text-sm font-semibold text-gray-900">{{ article.title }}</h3>
+                <div class="mt-1 flex items-center gap-3 text-xs text-gray-500">
+                    <span v-if="article.category">{{ article.category.name }}</span>
+                    <span>{{ article.view_count }} views</span>
+                </div>
+            </Link>
+        </div>
+
+        <div v-if="!articles.data?.length" class="py-12 text-center">
+            <svg
+                class="mx-auto mb-3 h-10 w-10 text-gray-300"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                viewBox="0 0 24 24"
+            >
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+                />
+            </svg>
+            <p class="text-sm text-gray-500">No articles found.</p>
+        </div>
+
+        <!-- Pagination -->
+        <div v-if="articles.links && articles.last_page > 1" class="mt-6 flex items-center justify-center gap-1">
+            <Link
+                v-for="link in articles.links"
+                :key="link.label"
+                :href="link.url || '#'"
+                :class="[
+                    'rounded-lg px-3 py-1.5 text-sm transition-colors',
+                    link.active
+                        ? 'bg-indigo-600 text-white'
+                        : link.url
+                          ? 'border border-gray-200 text-gray-600 hover:bg-gray-50'
+                          : 'cursor-default text-gray-300',
+                ]"
+                preserve-scroll
+            >
+                <!-- eslint-disable-next-line vue/no-v-html --><span v-html="link.label" />
+            </Link>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/plugin.js

@@ -24,6 +24,16 @@ export const EscalatedPlugin = {
         if (options.theme) {
             app.provide('escalated-theme', options.theme);
             applyTheme(options.theme);
+
+            if (options.theme.panel) {
+                const panelConfig = options.theme.panel;
+                applyPanelTheme(panelConfig);
+                app.provide('escalated-panel', {
+                    appName: panelConfig.appName || 'Escalated',
+                    logo: panelConfig.logo || null,
+                    mode: panelConfig.mode || 'dark',
+                });
+            }
         }
     },
 };
@@ -55,7 +65,7 @@ function darken(hex, percent) {
     const r = Math.max(0, (num >> 16) - Math.round(2.55 * percent));
     const g = Math.max(0, ((num >> 8) & 0x00ff) - Math.round(2.55 * percent));
     const b = Math.max(0, (num & 0x0000ff) - Math.round(2.55 * percent));
-    return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, '0')}`;
+    return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
 }
 
 function scaleBorderRadius(radius, factor) {
@@ -63,3 +73,78 @@ function scaleBorderRadius(radius, factor) {
     if (!match) return radius;
     return `${(parseFloat(match[1]) * factor).toFixed(2)}${match[2] || 'rem'}`;
 }
+
+const panelDarkDefaults = {
+    bg: '#000000',
+    sidebarBg: '#0a0a0a',
+    topbarBg: 'rgba(0,0,0,0.8)',
+    surface: 'rgba(23,23,23,0.6)',
+    surfaceAlt: '#0a0a0a',
+    border: 'rgba(255,255,255,0.06)',
+    borderInput: 'rgba(255,255,255,0.1)',
+    text: '#ffffff',
+    textSecondary: '#e5e5e5',
+    textTertiary: '#a3a3a3',
+    textMuted: '#737373',
+    accent: '#06b6d4',
+    accentSecondary: '#8b5cf6',
+    accentHover: '#22d3ee',
+    accentSecondaryHover: '#a78bfa',
+    hover: 'rgba(255,255,255,0.03)',
+    active: 'rgba(255,255,255,0.08)',
+};
+
+const panelLightDefaults = {
+    bg: '#f9fafb',
+    sidebarBg: '#ffffff',
+    topbarBg: 'rgba(255,255,255,0.95)',
+    surface: '#ffffff',
+    surfaceAlt: '#f9fafb',
+    border: '#e5e7eb',
+    borderInput: '#d1d5db',
+    text: '#111827',
+    textSecondary: '#374151',
+    textTertiary: '#6b7280',
+    textMuted: '#9ca3af',
+    accent: '#3b82f6',
+    accentSecondary: '#6366f1',
+    accentHover: '#2563eb',
+    accentSecondaryHover: '#818cf8',
+    hover: 'rgba(0,0,0,0.02)',
+    active: '#eff6ff',
+};
+
+const panelTokenMap = {
+    bg: '--esc-panel-bg',
+    sidebarBg: '--esc-panel-sidebar-bg',
+    topbarBg: '--esc-panel-topbar-bg',
+    surface: '--esc-panel-surface',
+    surfaceAlt: '--esc-panel-surface-alt',
+    border: '--esc-panel-border',
+    borderInput: '--esc-panel-border-input',
+    text: '--esc-panel-text',
+    textSecondary: '--esc-panel-text-secondary',
+    textTertiary: '--esc-panel-text-tertiary',
+    textMuted: '--esc-panel-text-muted',
+    accent: '--esc-panel-accent',
+    accentSecondary: '--esc-panel-accent-secondary',
+    accentHover: '--esc-panel-accent-hover',
+    accentSecondaryHover: '--esc-panel-accent-secondary-hover',
+    hover: '--esc-panel-hover',
+    active: '--esc-panel-active',
+};
+
+function applyPanelTheme(panelConfig) {
+    const defaults = panelConfig.mode === 'light' ? panelLightDefaults : panelDarkDefaults;
+    const overrides = {};
+    for (const key of Object.keys(panelTokenMap)) {
+        if (panelConfig[key] !== undefined) {
+            overrides[key] = panelConfig[key];
+        }
+    }
+    const merged = { ...defaults, ...overrides };
+    const style = document.documentElement.style;
+    for (const [key, cssVar] of Object.entries(panelTokenMap)) {
+        style.setProperty(cssVar, merged[key]);
+    }
+}

package/src/utils/constants.js

@@ -0,0 +1,30 @@
+/**
+ * Shared ticket constants used across multiple components.
+ * Single source of truth for statuses, priorities, and types.
+ */
+
+export const TICKET_STATUSES = [
+    'open',
+    'in_progress',
+    'waiting_on_customer',
+    'waiting_on_agent',
+    'escalated',
+    'resolved',
+    'closed',
+];
+
+export const TICKET_PRIORITIES = ['low', 'medium', 'high', 'urgent', 'critical'];
+
+export const TICKET_TYPES = [
+    { value: 'question', label: 'Question', color: 'text-cyan-400' },
+    { value: 'problem', label: 'Problem', color: 'text-rose-400' },
+    { value: 'incident', label: 'Incident', color: 'text-amber-400' },
+    { value: 'task', label: 'Task', color: 'text-violet-400' },
+];
+
+export const TICKET_TYPE_COLORS = {
+    question: { dark: 'bg-cyan-500/20 text-cyan-400', light: 'bg-cyan-100 text-cyan-700' },
+    problem: { dark: 'bg-rose-500/20 text-rose-400', light: 'bg-rose-100 text-rose-700' },
+    incident: { dark: 'bg-amber-500/20 text-amber-400', light: 'bg-amber-100 text-amber-700' },
+    task: { dark: 'bg-violet-500/20 text-violet-400', light: 'bg-violet-100 text-violet-700' },
+};

package/src/utils/formatting.js

@@ -0,0 +1,35 @@
+/**
+ * Shared formatting utilities for ticket display.
+ */
+
+/**
+ * Returns a human-readable relative time string (e.g. "5m ago", "3h ago", "2d ago").
+ * @param {string|Date} date
+ * @returns {string}
+ */
+export function timeAgo(date) {
+    if (!date) return '';
+    const diff = Date.now() - new Date(date).getTime();
+    const mins = Math.floor(diff / 60000);
+    if (mins < 60) return `${mins}m ago`;
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24) return `${hrs}h ago`;
+    const days = Math.floor(hrs / 24);
+    return `${days}d ago`;
+}
+
+/**
+ * Returns a Tailwind CSS class for the SLA indicator dot based on ticket SLA state.
+ * @param {Object} ticket
+ * @returns {string}
+ */
+export function slaClass(ticket) {
+    if (ticket.sla_first_response_breached || ticket.sla_resolution_breached) return 'bg-rose-500';
+    if (ticket.first_response_due_at || ticket.resolution_due_at) {
+        const due = ticket.resolution_due_at || ticket.first_response_due_at;
+        const mins = (new Date(due) - Date.now()) / 60000;
+        if (mins < 30) return 'bg-amber-500';
+        return 'bg-emerald-500';
+    }
+    return '';
+}

package/src/utils/sanitizeHtml.js

@@ -0,0 +1,64 @@
+/**
+ * Sanitize HTML to prevent stored XSS.
+ *
+ * Uses the DOM parser to walk the tree and strip dangerous elements and
+ * attributes rather than regex, which avoids incomplete-sanitization pitfalls.
+ */
+
+const DANGEROUS_TAGS = new Set([
+  'script', 'style', 'iframe', 'object', 'embed', 'form', 'input',
+  'textarea', 'button', 'select', 'option', 'link', 'meta', 'base',
+  'applet', 'noscript', 'noframes',
+])
+
+const URI_ATTRS = new Set(['href', 'src', 'action', 'formaction', 'xlink:href'])
+
+export function sanitizeHtml(html) {
+  if (!html) return ''
+
+  const doc = new DOMParser().parseFromString(html, 'text/html')
+
+  // Remove dangerous elements
+  for (const tag of DANGEROUS_TAGS) {
+    const els = doc.body.getElementsByTagName(tag)
+    while (els.length) els[0].remove()
+  }
+
+  // Walk all remaining elements and strip dangerous attributes
+  const all = doc.body.querySelectorAll('*')
+  for (let i = 0; i < all.length; i++) {
+    const el = all[i]
+    const attrs = [...el.attributes]
+    for (let j = 0; j < attrs.length; j++) {
+      const name = attrs[j].name.toLowerCase()
+
+      // Remove event handlers (onclick, onerror, etc.)
+      if (name.startsWith('on')) {
+        el.removeAttribute(attrs[j].name)
+        continue
+      }
+
+      // Remove javascript: / vbscript: / dangerous data: URIs
+      if (URI_ATTRS.has(name)) {
+        const val = (attrs[j].value || '').replace(/[\s\u0000-\u001F]+/g, '').toLowerCase()
+        if (
+          val.startsWith('javascript:') ||
+          val.startsWith('vbscript:') ||
+          (val.startsWith('data:') && !val.startsWith('data:image/'))
+        ) {
+          el.removeAttribute(attrs[j].name)
+        }
+      }
+
+      // Remove style attributes containing expressions or javascript
+      if (name === 'style') {
+        const val = (attrs[j].value || '').toLowerCase()
+        if (val.includes('expression(') || val.includes('javascript:') || val.includes('url(')) {
+          el.removeAttribute(attrs[j].name)
+        }
+      }
+    }
+  }
+
+  return doc.body.innerHTML
+}