@escalated-dev/escalated 0.9.0 → 0.11.2

package/src/pages/Admin/Automations/Index.vue

@@ -0,0 +1,230 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { Link, router } from '@inertiajs/vue3';
+
+/**
+ * Automations are the time-based half of the admin automation surface: a cron
+ * scan matches open tickets on how long they have been sitting and applies
+ * actions. Workflows are the event-driven half, and Macros are the agent's
+ * manual one. The three co-exist; none subsumes the others.
+ */
+defineProps({
+    automations: { type: Array, default: () => [] },
+});
+
+const FIELD_LABELS = {
+    hours_since_created: 'Hours since created',
+    hours_since_updated: 'Hours since updated',
+    hours_since_assigned: 'Hours since assigned',
+    status: 'Status',
+    priority: 'Priority',
+    assigned: 'Assignment',
+    ticket_type: 'Type',
+    subject_contains: 'Subject contains',
+};
+
+const ACTION_LABELS = {
+    change_status: 'Change status',
+    assign: 'Assign to',
+    add_tag: 'Add tag',
+    change_priority: 'Change priority',
+    add_note: 'Add internal note',
+    set_ticket_type: 'Set type',
+};
+
+function destroy(id) {
+    if (confirm('Delete this automation? This cannot be undone.')) {
+        router.delete(route('escalated.admin.automations.destroy', id));
+    }
+}
+
+function toggleActive(automation) {
+    router.put(route('escalated.admin.automations.update', automation.id), {
+        name: automation.name,
+        conditions: automation.conditions ?? [],
+        actions: automation.actions ?? [],
+        active: !automation.active,
+    });
+}
+
+/** A condition in the words an admin would use, not the words it is stored in. */
+function conditionSummary(condition) {
+    const label = FIELD_LABELS[condition?.field] ?? condition?.field ?? '';
+
+    if (!label) {
+        return '';
+    }
+
+    if (String(condition.field ?? '').startsWith('hours_since_')) {
+        return `${label} ${condition.operator ?? '>'} ${condition.value}`;
+    }
+
+    return `${label} is ${condition.value}`;
+}
+
+function actionSummary(action) {
+    const label = ACTION_LABELS[action?.type] ?? action?.type ?? '';
+
+    if (!label) {
+        return '';
+    }
+
+    return action.value === undefined || action.value === null || action.value === ''
+        ? label
+        : `${label}: ${action.value}`;
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Automations">
+        <div class="mb-4 flex items-center justify-between">
+            <div>
+                <h2 class="text-lg font-semibold text-[var(--esc-panel-text-secondary)]">Automations</h2>
+                <p class="text-xs text-[var(--esc-panel-text-muted)]">
+                    Time-based rules. A scheduled scan matches open tickets on how long they have been waiting and
+                    applies actions — for events as they happen, use Workflows.
+                </p>
+            </div>
+            <Link
+                :href="route('escalated.admin.automations.create')"
+                class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-4 py-2 text-sm font-medium text-white shadow-lg shadow-[var(--esc-panel-bg)]/20 transition-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)]"
+            >
+                Create Automation
+            </Link>
+        </div>
+
+        <div class="overflow-hidden rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]">
+            <table class="min-w-full divide-y divide-[var(--esc-panel-border)]">
+                <thead>
+                    <tr class="bg-[var(--esc-panel-hover)]">
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Name
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            When
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Then
+                        </th>
+                        <th
+                            class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Status
+                        </th>
+                        <th
+                            class="px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-[var(--esc-panel-text-muted)]"
+                        >
+                            Actions
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-[var(--esc-panel-border)]">
+                    <tr v-if="!automations?.length">
+                        <td colspan="5" class="px-4 py-12 text-center">
+                            <svg
+                                class="mx-auto mb-3 h-8 w-8 text-[var(--esc-panel-text-muted)]"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                                />
+                            </svg>
+                            <p class="text-sm text-[var(--esc-panel-text-muted)]">No automations yet</p>
+                            <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                                Chase tickets that have gone quiet — escalate after 24 hours, close after a week
+                            </p>
+                        </td>
+                    </tr>
+                    <tr
+                        v-for="automation in automations"
+                        :key="automation.id"
+                        class="transition-colors hover:bg-[var(--esc-panel-hover)]"
+                    >
+                        <td class="px-4 py-3">
+                            <Link
+                                :href="route('escalated.admin.automations.edit', automation.id)"
+                                class="text-sm font-medium text-[var(--esc-panel-text-secondary)] hover:text-[var(--esc-panel-accent)]"
+                            >
+                                {{ automation.name }}
+                            </Link>
+                        </td>
+                        <td class="px-4 py-3">
+                            <div class="flex flex-wrap gap-1">
+                                <span
+                                    v-for="(condition, i) in automation.conditions ?? []"
+                                    :key="i"
+                                    class="rounded bg-[var(--esc-panel-hover)] px-2 py-0.5 text-[11px] text-[var(--esc-panel-text-muted)]"
+                                >
+                                    {{ conditionSummary(condition) }}
+                                </span>
+                                <span
+                                    v-if="!(automation.conditions ?? []).length"
+                                    class="text-[11px] text-[var(--esc-panel-text-muted)]"
+                                >
+                                    —
+                                </span>
+                            </div>
+                        </td>
+                        <td class="px-4 py-3">
+                            <div class="flex flex-wrap gap-1">
+                                <span
+                                    v-for="(action, i) in automation.actions ?? []"
+                                    :key="i"
+                                    class="rounded bg-[var(--esc-panel-accent)]/10 px-2 py-0.5 text-[11px] text-[var(--esc-panel-accent)]"
+                                >
+                                    {{ actionSummary(action) }}
+                                </span>
+                                <span
+                                    v-if="!(automation.actions ?? []).length"
+                                    class="text-[11px] text-[var(--esc-panel-text-muted)]"
+                                >
+                                    —
+                                </span>
+                            </div>
+                        </td>
+                        <td class="px-4 py-3">
+                            <button
+                                type="button"
+                                class="rounded px-2 py-0.5 text-[11px] font-medium transition-colors"
+                                :class="
+                                    automation.active
+                                        ? 'bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20'
+                                        : 'bg-gray-500/10 text-gray-400 hover:bg-gray-500/20'
+                                "
+                                @click="toggleActive(automation)"
+                            >
+                                {{ automation.active ? 'Active' : 'Paused' }}
+                            </button>
+                        </td>
+                        <td class="px-4 py-3 text-right">
+                            <Link
+                                :href="route('escalated.admin.automations.edit', automation.id)"
+                                class="text-xs font-medium text-[var(--esc-panel-text-muted)] transition-colors hover:text-[var(--esc-panel-accent)]"
+                            >
+                                Edit
+                            </Link>
+                            <button
+                                type="button"
+                                class="ml-3 text-xs font-medium text-[var(--esc-panel-text-muted)] transition-colors hover:text-red-400"
+                                @click="destroy(automation.id)"
+                            >
+                                Delete
+                            </button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/Plugins/Index.vue

@@ -5,6 +5,10 @@ import { ref, computed } from 'vue';
 
 const props = defineProps({
     plugins: { type: Array, default: () => [] },
+    // Backends that load plugins from uploaded ZIPs (e.g. Laravel) support the
+    // upload flow; backends where plugins are compiled host modules registered
+    // in config (e.g. Phoenix) pass can_upload: false to hide it.
+    can_upload: { type: Boolean, default: true },
 });
 
 const confirmingDelete = ref(null);
@@ -93,7 +97,7 @@ function statusLabel(plugin) {
                     {{ activePlugins.length }} active, {{ inactivePlugins.length }} inactive
                 </p>
             </div>
-            <div>
+            <div v-if="can_upload">
                 <input ref="fileInput" type="file" accept=".zip" class="hidden" @change="handleUpload" />
                 <button
                     :disabled="uploading"
@@ -144,9 +148,12 @@ function statusLabel(plugin) {
                 />
             </svg>
             <h3 class="text-sm font-medium text-[var(--esc-panel-text-secondary)]">No plugins installed</h3>
-            <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+            <p v-if="can_upload" class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
                 Upload a plugin ZIP to extend Escalated with custom functionality.
             </p>
+            <p v-else class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                Register a plugin in the host application to extend Escalated with custom functionality.
+            </p>
         </div>
 
         <!-- Plugin cards -->
@@ -234,6 +241,7 @@ function statusLabel(plugin) {
                                 </svg>
                                 Installed {{ plugin.installed_at }}
                             </span>
+                            <span v-if="plugin.module" class="font-mono">{{ plugin.module }}</span>
                         </div>
 
                         <!-- Provided extensions summary -->

package/src/pages/Admin/Settings/DatabaseConnection.vue

@@ -0,0 +1,228 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { useForm, router } from '@inertiajs/vue3';
+import { computed, ref } from 'vue';
+
+/**
+ * Which database Escalated's own tables live on.
+ *
+ * Two things about this screen are deliberate and worth not undoing.
+ *
+ * It refuses a switch to a database with no Escalated tables. That case does
+ * not error at runtime — the panel simply comes up with no tickets, no
+ * departments and no settings, which reads exactly like data loss. The server
+ * refuses it, and the option is disabled here so the mistake is hard to make
+ * in the first place.
+ *
+ * And when `escalated.connection` is set in config or .env, the whole form is
+ * read-only. That value is deployed infrastructure; a web form must not be
+ * able to quietly disagree with it.
+ */
+const props = defineProps({
+    connections: { type: Array, default: () => [] },
+    current: { type: String, default: null },
+    hostDefault: { type: String, default: null },
+    pinnedByConfig: { type: Boolean, default: false },
+    tablePrefix: { type: String, default: 'escalated_' },
+});
+
+const form = useForm({
+    connection: props.current ?? '',
+});
+
+const testing = ref(null);
+
+const active = computed(() => props.connections.find((c) => c.is_current) ?? null);
+
+const selected = computed(
+    () => props.connections.find((c) => c.name === (form.connection || props.hostDefault)) ?? null,
+);
+
+const isChanging = computed(() => (form.connection || null) !== (props.current || null));
+
+function submit() {
+    if (props.pinnedByConfig) return;
+    form.post(route('escalated.admin.settings.database.update'), { preserveScroll: true });
+}
+
+function test(name) {
+    testing.value = name;
+
+    router.post(
+        route('escalated.admin.settings.database.test'),
+        { connection: name },
+        {
+            preserveScroll: true,
+            preserveState: false,
+            onFinish: () => {
+                testing.value = null;
+            },
+        },
+    );
+}
+
+function statusLabel(connection) {
+    if (!connection.reachable) return 'Unreachable';
+    if (!connection.migrated) return 'Not migrated';
+    return 'Ready';
+}
+
+function statusClass(connection) {
+    if (!connection.reachable) return 'text-[var(--esc-danger)]';
+    if (!connection.migrated) return 'text-[var(--esc-warning)]';
+    return 'text-[var(--esc-success)]';
+}
+
+function formatCount(value) {
+    return value === null || value === undefined ? null : value.toLocaleString();
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Database Connection">
+        <div class="mx-auto max-w-3xl space-y-6">
+            <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6">
+                <h3 class="mb-1 text-sm font-semibold text-[var(--esc-panel-text)]">Current connection</h3>
+                <p class="mb-5 text-xs text-[var(--esc-panel-text-muted)]">
+                    Where Escalated's own tables (<code>{{ tablePrefix }}*</code>) are read and written. Your users
+                    table is not affected — it stays wherever your application keeps it.
+                </p>
+
+                <dl v-if="active" class="grid grid-cols-2 gap-x-6 gap-y-3 text-sm">
+                    <dt class="text-[var(--esc-panel-text-muted)]">Connection</dt>
+                    <dd class="font-medium text-[var(--esc-panel-text)]">
+                        {{ active.name }}
+                        <span v-if="active.is_host_default" class="text-xs text-[var(--esc-panel-text-muted)]">
+                            (application default)
+                        </span>
+                    </dd>
+
+                    <dt class="text-[var(--esc-panel-text-muted)]">Driver</dt>
+                    <dd class="text-[var(--esc-panel-text-secondary)]">{{ active.driver ?? '—' }}</dd>
+
+                    <dt class="text-[var(--esc-panel-text-muted)]">Database</dt>
+                    <dd class="break-all text-[var(--esc-panel-text-secondary)]">{{ active.database ?? '—' }}</dd>
+
+                    <dt class="text-[var(--esc-panel-text-muted)]">Tickets stored</dt>
+                    <dd class="text-[var(--esc-panel-text-secondary)]">
+                        {{ formatCount(active.ticket_count) ?? '—' }}
+                    </dd>
+                </dl>
+            </div>
+
+            <div
+                v-if="pinnedByConfig"
+                class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface-alt)] p-4 text-sm text-[var(--esc-panel-text-secondary)]"
+            >
+                This connection is set in your application config (<code>escalated.connection</code> /
+                <code>ESCALATED_DB_CONNECTION</code>) and cannot be changed from here. Edit it where it is deployed, so
+                the panel and your configuration cannot disagree.
+            </div>
+
+            <form v-else class="space-y-6" @submit.prevent="submit">
+                <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6">
+                    <h3 class="mb-1 text-sm font-semibold text-[var(--esc-panel-text)]">Change connection</h3>
+                    <p class="mb-5 text-xs text-[var(--esc-panel-text-muted)]">
+                        Only connections already carrying Escalated's tables can be selected. Run the package migrations
+                        against a database before pointing Escalated at it.
+                    </p>
+
+                    <div class="space-y-2">
+                        <label
+                            v-for="connection in connections"
+                            :key="connection.name"
+                            :class="[
+                                'flex items-start gap-3 rounded-lg border p-3 transition',
+                                connection.migrated
+                                    ? 'cursor-pointer border-[var(--esc-panel-border)] hover:bg-[var(--esc-panel-surface-alt)]'
+                                    : 'cursor-not-allowed border-[var(--esc-panel-border)] opacity-60',
+                            ]"
+                        >
+                            <input
+                                v-model="form.connection"
+                                type="radio"
+                                :value="connection.is_host_default ? '' : connection.name"
+                                :disabled="!connection.migrated"
+                                class="mt-1"
+                            />
+                            <span class="min-w-0 flex-1">
+                                <span class="flex flex-wrap items-center gap-2">
+                                    <span class="text-sm font-medium text-[var(--esc-panel-text)]">
+                                        {{ connection.name }}
+                                    </span>
+                                    <span
+                                        v-if="connection.is_host_default"
+                                        class="text-xs text-[var(--esc-panel-text-muted)]"
+                                    >
+                                        application default
+                                    </span>
+                                    <span :class="['text-xs font-medium', statusClass(connection)]">
+                                        {{ statusLabel(connection) }}
+                                    </span>
+                                </span>
+                                <span class="mt-0.5 block text-xs text-[var(--esc-panel-text-muted)]">
+                                    {{ connection.driver ?? 'unknown driver' }} ·
+                                    {{ connection.database ?? 'no database configured' }}
+                                    <template v-if="connection.ticket_count !== null">
+                                        · {{ formatCount(connection.ticket_count) }} tickets
+                                    </template>
+                                </span>
+                                <span
+                                    v-if="connection.error"
+                                    class="mt-1 block break-all text-xs text-[var(--esc-danger)]"
+                                >
+                                    {{ connection.error }}
+                                </span>
+                                <span
+                                    v-else-if="!connection.migrated"
+                                    class="mt-1 block text-xs text-[var(--esc-panel-text-muted)]"
+                                >
+                                    No Escalated tables here yet. Switching would show an empty panel, so it is
+                                    disabled.
+                                </span>
+                            </span>
+                            <button
+                                type="button"
+                                class="shrink-0 rounded-md border border-[var(--esc-panel-border-input)] px-2 py-1 text-xs text-[var(--esc-panel-text-secondary)]"
+                                :disabled="testing === connection.name"
+                                @click.prevent="test(connection.name)"
+                            >
+                                {{ testing === connection.name ? 'Testing…' : 'Test' }}
+                            </button>
+                        </label>
+                    </div>
+
+                    <p v-if="form.errors.connection" class="mt-3 text-xs text-[var(--esc-danger)]">
+                        {{ form.errors.connection }}
+                    </p>
+                </div>
+
+                <div
+                    v-if="isChanging"
+                    class="rounded-xl border border-[var(--esc-warning)] bg-[var(--esc-panel-surface-alt)] p-4 text-sm text-[var(--esc-panel-text-secondary)]"
+                >
+                    <p class="font-medium text-[var(--esc-panel-text)]">This does not move any data.</p>
+                    <p class="mt-1 text-xs">
+                        Escalated will start reading and writing
+                        <strong>{{ selected?.name ?? hostDefault }}</strong
+                        >, which currently holds
+                        <strong>{{ formatCount(selected?.ticket_count) ?? 'an unknown number of' }}</strong> tickets.
+                        The <strong>{{ formatCount(active?.ticket_count) ?? 'existing' }}</strong> tickets on
+                        <strong>{{ active?.name }}</strong> stay where they are and will no longer be visible in the
+                        panel.
+                    </p>
+                </div>
+
+                <div class="flex justify-end">
+                    <button
+                        type="submit"
+                        :disabled="form.processing || !isChanging"
+                        class="rounded-lg bg-[var(--esc-accent)] px-4 py-2 text-sm font-medium text-white disabled:opacity-50"
+                    >
+                        {{ form.processing ? 'Saving…' : 'Use this connection' }}
+                    </button>
+                </div>
+            </form>
+        </div>
+    </EscalatedLayout>
+</template>

package/src/pages/Admin/Settings/PublicTickets.vue

@@ -0,0 +1,163 @@
+<script setup>
+import EscalatedLayout from '../../../components/EscalatedLayout.vue';
+import { useForm, Link } from '@inertiajs/vue3';
+import { computed } from 'vue';
+
+/**
+ * What happens to a ticket raised by someone who is not signed in.
+ *
+ * The three modes are the guest policy: leave it unattached, attach it to a
+ * standing guest account, or ask the person to sign up before it is accepted.
+ * Each backend stores these as three settings, and the second and third each
+ * need one value alongside the mode.
+ */
+const props = defineProps({
+    settings: { type: Object, default: () => ({}) },
+});
+
+const MODES = [
+    {
+        value: 'unassigned',
+        label: 'Leave unattached',
+        description: 'The ticket is stored with the guest name and email and no user behind it.',
+    },
+    {
+        value: 'guest_user',
+        label: 'Attach to a guest account',
+        description: 'Every guest ticket is owned by one standing account, so agents see a consistent requester.',
+    },
+    {
+        value: 'prompt_signup',
+        label: 'Ask the guest to sign up',
+        description: 'The guest is sent to your sign-up page before the ticket is accepted.',
+    },
+];
+
+const form = useForm({
+    guest_policy_mode: props.settings?.guest_policy_mode ?? 'unassigned',
+    guest_policy_user_id: props.settings?.guest_policy_user_id ?? '',
+    guest_policy_signup_url_template: props.settings?.guest_policy_signup_url_template ?? '',
+});
+
+const needsUserId = computed(() => form.guest_policy_mode === 'guest_user');
+const needsSignupUrl = computed(() => form.guest_policy_mode === 'prompt_signup');
+
+function submit() {
+    form.post(route('escalated.admin.settings.public-tickets.update'));
+}
+</script>
+
+<template>
+    <EscalatedLayout title="Public Tickets">
+        <div class="mx-auto max-w-2xl">
+            <div class="mb-6">
+                <Link
+                    :href="route('escalated.admin.settings')"
+                    class="text-sm text-[var(--esc-panel-text-muted)] hover:text-[var(--esc-panel-text-secondary)]"
+                >
+                    &larr; Back to Settings
+                </Link>
+            </div>
+
+            <div class="rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-6">
+                <h2 class="text-lg font-semibold text-[var(--esc-panel-text-secondary)]">Public Tickets</h2>
+                <p class="mt-1 text-sm text-[var(--esc-panel-text-muted)]">
+                    How a ticket raised by someone who is not signed in is recorded.
+                </p>
+
+                <form class="mt-6 space-y-6" @submit.prevent="submit">
+                    <fieldset class="space-y-3">
+                        <legend class="mb-1.5 text-sm font-medium text-[var(--esc-panel-text-secondary)]">
+                            Guest policy
+                        </legend>
+
+                        <label
+                            v-for="mode in MODES"
+                            :key="mode.value"
+                            class="flex cursor-pointer gap-3 rounded-lg border p-3 transition-colors"
+                            :class="
+                                form.guest_policy_mode === mode.value
+                                    ? 'border-[var(--esc-panel-accent)]/40 bg-[var(--esc-panel-hover)]'
+                                    : 'border-[var(--esc-panel-border)] hover:bg-[var(--esc-panel-hover)]'
+                            "
+                        >
+                            <input
+                                v-model="form.guest_policy_mode"
+                                type="radio"
+                                name="guest_policy_mode"
+                                :value="mode.value"
+                                class="mt-1"
+                            />
+                            <span>
+                                <span class="block text-sm text-[var(--esc-panel-text-secondary)]">
+                                    {{ mode.label }}
+                                </span>
+                                <span class="block text-xs text-[var(--esc-panel-text-muted)]">
+                                    {{ mode.description }}
+                                </span>
+                            </span>
+                        </label>
+
+                        <p v-if="form.errors.guest_policy_mode" class="text-xs text-red-400">
+                            {{ form.errors.guest_policy_mode }}
+                        </p>
+                    </fieldset>
+
+                    <div v-if="needsUserId">
+                        <label
+                            class="mb-1.5 block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                            for="guest-user-id"
+                        >
+                            Guest account user ID
+                        </label>
+                        <input
+                            id="guest-user-id"
+                            v-model="form.guest_policy_user_id"
+                            type="number"
+                            min="1"
+                            required
+                            class="w-full rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] px-3 py-2.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-accent)]/40 focus:outline-none"
+                        />
+                        <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                            The id of an existing user in your application. Every guest ticket is attached to it.
+                        </p>
+                        <p v-if="form.errors.guest_policy_user_id" class="mt-1 text-xs text-red-400">
+                            {{ form.errors.guest_policy_user_id }}
+                        </p>
+                    </div>
+
+                    <div v-if="needsSignupUrl">
+                        <label
+                            class="mb-1.5 block text-sm font-medium text-[var(--esc-panel-text-secondary)]"
+                            for="signup-url"
+                        >
+                            Sign-up URL
+                        </label>
+                        <input
+                            id="signup-url"
+                            v-model="form.guest_policy_signup_url_template"
+                            type="text"
+                            maxlength="500"
+                            placeholder="/register?email={email}"
+                            class="w-full rounded-lg border border-[var(--esc-panel-border)] bg-[var(--esc-panel-hover)] px-3 py-2.5 text-sm text-[var(--esc-panel-text-secondary)] focus:border-[var(--esc-panel-accent)]/40 focus:outline-none"
+                        />
+                        <p class="mt-1 text-xs text-[var(--esc-panel-text-muted)]">
+                            <code>{email}</code> is replaced with the address the guest entered.
+                        </p>
+                        <p v-if="form.errors.guest_policy_signup_url_template" class="mt-1 text-xs text-red-400">
+                            {{ form.errors.guest_policy_signup_url_template }}
+                        </p>
+                    </div>
+
+                    <button
+                        type="submit"
+                        :disabled="form.processing"
+                        class="rounded-lg bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] px-4 py-2 text-sm font-medium text-white transition-all hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)] disabled:opacity-50"
+                    >
+                        Save settings
+                    </button>
+                </form>
+            </div>
+        </div>
+    </EscalatedLayout>
+</template>