@antelopejs/dms-marketing 0.3.3 → 0.4.1

package/frontend-vue/app/components/WebsitesGrid.vue

@@ -0,0 +1,799 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useDmsRouter, useI18n } from '#dms/frontend-module'
+import {
+  useMarketingApi,
+  type MarketingWebsiteCard,
+} from '../composables/useMarketingApi'
+import { installLink, overviewLink } from '../composables/useMarketingRoutes'
+import {
+  formatNumber,
+  formatRelativeTime,
+  formatShortDate,
+  initials,
+} from '../utils/format'
+import { allowHostConfirmation, hostConflictOf } from '../utils/host-conflict'
+import {
+  MAX_WEBSITE_DOMAIN_LENGTH,
+  MAX_WEBSITE_NAME_LENGTH,
+  fractionDigits,
+} from '../constants'
+
+/**
+ * The Websites page: one card per site with its state, volumes, accepted
+ * hosts and capture options; a site still waiting for its first pageview
+ * leads to the install guide. Hosts the guard refused show on any card, with
+ * the fix. The pencil opens a drawer with the site's General, Capture and
+ * Danger zone tabs.
+ */
+const props = withDefaults(
+  defineProps<{ fetchUrl?: string; componentId?: string; pageId?: string }>(),
+  { fetchUrl: undefined, componentId: undefined, pageId: undefined },
+)
+
+type DrawerTab = 'general' | 'capture' | 'danger'
+
+const CLOCK_TICK_MS = 15_000
+
+const { t, locale } = useI18n()
+const router = useDmsRouter()
+const api = useMarketingApi()
+const toast = useToast()
+// A field-tied error from the save shows under its field, the rest as a toast.
+const fieldErrors = useFieldErrors({
+  fields: {
+    name: 'website-name',
+    domain: 'website-domain',
+    extraDomains: 'website-hosts',
+  },
+})
+const { confirm } = useConfirm()
+
+void props
+
+const cards = ref<MarketingWebsiteCard[] | null>(null)
+const failed = ref(false)
+
+async function load(): Promise<void> {
+  failed.value = false
+  try {
+    cards.value = await api.listWebsiteCards()
+  } catch {
+    failed.value = true
+  }
+}
+
+const now = ref(Date.now())
+let clock: ReturnType<typeof setInterval> | null = null
+onMounted(() => {
+  void load()
+  clock = setInterval(() => (now.value = Date.now()), CLOCK_TICK_MS)
+})
+onBeforeUnmount(() => clock && clearInterval(clock))
+
+function stateLine(card: MarketingWebsiteCard): string {
+  if (card.state === 'live' && card.lastActivityAt) {
+    return t('page.marketing.context.live', {
+      ago: formatRelativeTime(card.lastActivityAt, now.value, locale.value),
+    })
+  }
+  return t(`page.marketing.context.state.${card.state}`)
+}
+
+const STATE_DOTS = {
+  live: 'bg-success',
+  waiting: 'bg-warning',
+  paused: 'bg-(--ui-text-dimmed)',
+} as const
+
+async function openOverview(card: MarketingWebsiteCard): Promise<void> {
+  await api.selectContextWebsite(card.id)
+  await router.push(overviewLink(card.id))
+}
+
+// --- Card actions ----------------------------------------------------------------
+
+/** The card action running, as `<site id>:<what>`, for its spinner. */
+const busy = ref<string | null>(null)
+
+async function runCardAction(
+  key: string,
+  action: () => Promise<unknown>,
+  successTitle: string,
+  errorTitle: string,
+): Promise<void> {
+  busy.value = key
+  try {
+    await action()
+    toast.add({ color: 'success', title: successTitle })
+    await load()
+  } catch (error) {
+    const conflict = hostConflictOf(error)
+    if (conflict) {
+      toast.add({
+        color: 'error',
+        title: t(errorTitle),
+        description: t('page.marketing.errors.duplicate_host_named', {
+          ...conflict,
+        }),
+      })
+    } else {
+      fieldErrors.toastError(error, { toastTitle: errorTitle })
+    }
+  } finally {
+    busy.value = null
+  }
+}
+
+async function allowHost(card: MarketingWebsiteCard, hostname: string) {
+  if (!(await confirm(allowHostConfirmation(t, hostname)))) {
+    return
+  }
+  await runCardAction(
+    `${card.id}:${hostname}`,
+    () => api.allowHost(card.id, hostname),
+    t('page.marketing.install.allowed', { host: hostname }),
+    'page.marketing.install.allow_error',
+  )
+}
+
+function resume(card: MarketingWebsiteCard) {
+  return runCardAction(
+    `${card.id}:resume`,
+    () => api.updateWebsite(card.id, { trackingEnabled: true }),
+    t('page.marketing.websites.resumed'),
+    'page.marketing.websites.save_error',
+  )
+}
+
+// --- Drawer --------------------------------------------------------------------
+
+const editing = ref<MarketingWebsiteCard | null>(null)
+const drawerOpen = ref(false)
+const tab = ref<DrawerTab>('general')
+const draftName = ref('')
+const draftDomain = ref('')
+const draftHosts = ref<string[]>([])
+const draftTracking = ref(true)
+const draftSnapshots = ref(false)
+const draftMask = ref(false)
+const saving = ref(false)
+
+function edit(
+  card: MarketingWebsiteCard,
+  initialTab: DrawerTab = 'general',
+): void {
+  fieldErrors.clear()
+  editing.value = card
+  tab.value = initialTab
+  draftName.value = card.name
+  draftDomain.value = card.domain
+  draftHosts.value = [...card.extraDomains]
+  draftTracking.value = card.state !== 'paused'
+  draftSnapshots.value = card.snapshotsEnabled
+  draftMask.value = card.snapshotMaskText
+  drawerOpen.value = true
+}
+
+// The content stays while the drawer slides out; it goes once it is gone.
+function onDrawerClosed(): void {
+  editing.value = null
+}
+
+const tabItems = computed(() => [
+  { value: 'general', label: t('page.marketing.websites.drawer.general') },
+  { value: 'capture', label: t('page.marketing.websites.drawer.capture') },
+  { value: 'danger', label: t('page.marketing.websites.drawer.danger') },
+])
+
+/** Turning snapshots off, or changing the mask, discards the captures. */
+const discardsSnapshots = computed(
+  () =>
+    editing.value !== null &&
+    editing.value.snapshots > 0 &&
+    (draftSnapshots.value !== editing.value.snapshotsEnabled ||
+      draftMask.value !== editing.value.snapshotMaskText),
+)
+
+/** Empty required fields say so under themselves, on the General tab. */
+async function requireFields(): Promise<boolean> {
+  const blank = (['domain', 'name'] as const).filter(
+    (field) => !{ name: draftName, domain: draftDomain }[field].value.trim(),
+  )
+  if (blank.length > 0) {
+    tab.value = 'general'
+  }
+  for (const field of blank) {
+    await fieldErrors.setError(field, t('dms.field_errors.required'))
+  }
+  return blank.length === 0
+}
+
+async function save(): Promise<void> {
+  const card = editing.value
+  if (!card || !(await requireFields())) {
+    return
+  }
+  saving.value = true
+  try {
+    await api.updateWebsite(card.id, {
+      name: draftName.value.trim(),
+      domain: draftDomain.value.trim(),
+      extraDomains: draftHosts.value.map((host) => host.trim()).filter(Boolean),
+      trackingEnabled: draftTracking.value,
+      snapshotsEnabled: draftSnapshots.value,
+      snapshotMaskText: draftMask.value,
+    })
+    toast.add({ color: 'success', title: t('page.marketing.websites.saved') })
+    drawerOpen.value = false
+    await load()
+  } catch (error) {
+    // A refused field lives on the General tab: show it there.
+    const conflict = hostConflictOf(error)
+    if (conflict) {
+      tab.value = 'general'
+      await fieldErrors.setError(
+        conflict.field === 'extraDomains' ? 'extraDomains' : 'domain',
+        t('page.marketing.errors.duplicate_host_named', { ...conflict }),
+      )
+      return
+    }
+    if (await fieldErrors.applyApiError(error)) {
+      tab.value = 'general'
+      return
+    }
+    fieldErrors.toastError(error, {
+      toastTitle: 'page.marketing.websites.save_error',
+    })
+  } finally {
+    saving.value = false
+  }
+}
+
+async function remove(card: MarketingWebsiteCard): Promise<void> {
+  let impact
+  try {
+    impact = await api.getWebsiteDeletionImpact(card.id)
+  } catch (error) {
+    fieldErrors.toastError(error, {
+      toastTitle: 'page.marketing.websites.delete.impact_error',
+    })
+    return
+  }
+  // Every stored day goes, so the counts read "since the oldest one".
+  const since =
+    impact.since === null ? null : formatShortDate(impact.since, locale.value)
+  const sinceLabel = (key: 'sessions' | 'pageviews') =>
+    since === null
+      ? t(`page.marketing.websites.delete.${key}`)
+      : t(`page.marketing.websites.delete.${key}_since`, { date: since })
+  await confirm({
+    title: t('page.marketing.websites.delete.title', { name: card.name }),
+    description: t('page.marketing.websites.delete.description'),
+    color: 'error',
+    icon: 'i-ph-trash',
+    confirmLabel: t('page.marketing.websites.delete.confirm'),
+    // A hostname is not case-sensitive: neither is the typed check.
+    confirmText: card.domain,
+    confirmTextCaseInsensitive: true,
+    impact: [
+      {
+        icon: 'i-ph-users',
+        label: sinceLabel('sessions'),
+        count: formatNumber(impact.sessions, locale.value),
+      },
+      {
+        icon: 'i-ph-eye',
+        label: sinceLabel('pageviews'),
+        count: formatNumber(impact.pageviews, locale.value),
+      },
+      {
+        icon: 'i-ph-funnel',
+        label: t('page.marketing.websites.delete.funnels'),
+        count: impact.funnels,
+      },
+      {
+        icon: 'i-ph-camera',
+        label: t('page.marketing.websites.delete.snapshots'),
+        count: impact.snapshots,
+      },
+    ],
+    onConfirm: async () => {
+      await api.deleteWebsite(card.id)
+      toast.add({
+        color: 'success',
+        title: t('page.marketing.websites.delete.done', { name: card.name }),
+      })
+      drawerOpen.value = false
+      await load()
+    },
+  })
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <DmsEmptyState
+      v-if="failed"
+      variant="error"
+      class="dms-card"
+      :title="t('page.marketing.websites.error')"
+    >
+      <template #actions>
+        <UButton
+          size="sm"
+          color="neutral"
+          variant="outline"
+          icon="i-ph-arrow-clockwise"
+          :label="t('page.marketing.common.retry')"
+          @click="load"
+        />
+      </template>
+    </DmsEmptyState>
+
+    <div v-else-if="!cards" class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+      <USkeleton v-for="index in 3" :key="index" class="h-72 rounded-xl" />
+    </div>
+
+    <DmsMarketingFirstRun v-else-if="cards.length === 0" />
+
+    <template v-else>
+      <!-- The page's "collection paused" Banner block, when the module is paused. -->
+      <slot />
+
+      <div class="grid items-start gap-4 md:grid-cols-2 xl:grid-cols-3">
+        <article
+          v-for="card in cards"
+          :key="card.id"
+          class="flex flex-col overflow-hidden rounded-xl border bg-(--ui-bg)"
+          :class="
+            card.state === 'waiting'
+              ? 'border-dashed border-warning/60'
+              : 'dms-card p-0'
+          "
+        >
+          <header class="flex items-start gap-3 px-4 pt-4">
+            <span
+              class="grid size-10 shrink-0 place-items-center rounded-lg bg-primary/15 font-mono text-sm font-semibold text-(--ui-color-primary-800) dark:text-primary"
+            >
+              {{ initials(card.name) }}
+            </span>
+            <span class="min-w-0 flex-1">
+              <span class="block truncate font-semibold text-highlighted">
+                {{ card.name }}
+              </span>
+              <span class="block truncate font-mono text-xs text-dimmed">
+                {{ card.domain }}
+              </span>
+            </span>
+            <UButton
+              icon="i-ph-pencil-simple"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              :aria-label="
+                t('page.marketing.websites.edit_named', { name: card.name })
+              "
+              @click="edit(card)"
+            />
+          </header>
+          <p
+            class="flex items-center gap-2 px-4 pt-3 pb-3 font-mono text-xs text-muted"
+          >
+            <span class="size-2 rounded-full" :class="STATE_DOTS[card.state]" />
+            {{ stateLine(card) }}
+          </p>
+
+          <div
+            v-if="card.state === 'paused' || card.rejected.length > 0"
+            class="flex flex-col gap-2 px-4 pb-3"
+          >
+            <DmsBanner
+              v-if="card.state === 'paused'"
+              tone="info"
+              size="sm"
+              icon="i-ph-pause-circle"
+              :title="t('page.marketing.websites.paused_description')"
+            >
+              <template #actions>
+                <UButton
+                  size="xs"
+                  color="neutral"
+                  variant="outline"
+                  icon="i-ph-play"
+                  :loading="busy === `${card.id}:resume`"
+                  :label="t('page.marketing.websites.resume')"
+                  @click="resume(card)"
+                />
+              </template>
+            </DmsBanner>
+            <DmsBanner
+              v-for="refused in card.rejected"
+              :key="refused.hostname"
+              tone="warning"
+              size="sm"
+              icon="i-ph-prohibit"
+              :title="
+                t(
+                  'page.marketing.websites.refused',
+                  { count: refused.count, host: refused.hostname },
+                  refused.count,
+                )
+              "
+            >
+              <template #actions>
+                <UButton
+                  size="xs"
+                  color="neutral"
+                  variant="outline"
+                  :loading="busy === `${card.id}:${refused.hostname}`"
+                  :label="t('page.marketing.install.allow')"
+                  @click="allowHost(card, refused.hostname)"
+                />
+              </template>
+            </DmsBanner>
+          </div>
+
+          <template v-if="card.state !== 'waiting'">
+            <div class="border-y border-default">
+              <!-- The window the three counts cover, whatever period the
+                   other pages show. -->
+              <p
+                class="px-4 pt-1.5 text-right font-mono text-[10px] text-dimmed"
+              >
+                {{ t('page.marketing.websites.stats.window') }}
+              </p>
+              <dl class="grid grid-cols-3">
+                <div
+                  v-for="stat in ['sessions', 'pages', 'funnels'] as const"
+                  :key="stat"
+                  class="border-default px-4 pt-0.5 pb-3 not-first:border-l"
+                >
+                  <dt>
+                    <DmsEyebrow
+                      :label="t(`page.marketing.websites.stats.${stat}`)"
+                    />
+                  </dt>
+                  <dd
+                    class="mt-1 font-mono text-lg font-semibold tabular-nums text-highlighted"
+                  >
+                    {{ formatNumber(card[stat], locale) }}
+                  </dd>
+                </div>
+              </dl>
+            </div>
+            <dl class="flex flex-col gap-2 px-4 py-3 text-sm">
+              <div class="flex items-start justify-between gap-3">
+                <dt
+                  class="flex shrink-0 items-center gap-2 whitespace-nowrap text-muted"
+                >
+                  <UIcon name="i-ph-link" class="size-3.5" />
+                  {{ t('page.marketing.websites.also_accepts') }}
+                </dt>
+                <dd class="flex min-w-0 flex-wrap justify-end gap-1">
+                  <span
+                    v-for="host in card.extraDomains"
+                    :key="host"
+                    class="max-w-full truncate rounded bg-elevated px-1.5 py-0.5 font-mono text-[11px] text-toned"
+                  >
+                    {{ host }}
+                  </span>
+                  <span
+                    v-if="card.extraDomains.length === 0"
+                    class="text-xs text-dimmed"
+                  >
+                    {{ t('page.marketing.websites.subdomains_only') }}
+                  </span>
+                </dd>
+              </div>
+              <div class="flex items-center justify-between gap-3">
+                <dt
+                  class="flex shrink-0 items-center gap-2 whitespace-nowrap text-muted"
+                >
+                  <UIcon name="i-ph-camera" class="size-3.5" />
+                  {{ t('page.marketing.websites.snapshots') }}
+                </dt>
+                <dd>
+                  <DmsStatusPill
+                    size="sm"
+                    :mono="false"
+                    :tone="card.snapshotsEnabled ? 'success' : 'neutral'"
+                    :label="
+                      card.snapshotsEnabled
+                        ? t(
+                            card.snapshotMaskText
+                              ? 'page.marketing.websites.snapshots_masked'
+                              : 'page.marketing.websites.snapshots_on',
+                          )
+                        : t('page.marketing.websites.snapshots_off')
+                    "
+                  />
+                </dd>
+              </div>
+              <div class="flex items-center justify-between gap-3">
+                <dt
+                  class="flex shrink-0 items-center gap-2 whitespace-nowrap text-muted"
+                >
+                  <UIcon name="i-ph-cursor-click" class="size-3.5" />
+                  {{ t('page.marketing.websites.sampling') }}
+                </dt>
+                <dd class="text-right font-mono text-xs text-highlighted">
+                  {{
+                    formatPercentage(card.sampleRate, locale, fractionDigits(0))
+                  }}
+                  ·
+                  {{ t('page.marketing.websites.sampling_default') }}
+                </dd>
+              </div>
+            </dl>
+            <footer
+              class="mt-auto flex items-center justify-between gap-2 border-t border-default px-4 py-3"
+            >
+              <UButton
+                icon="i-ph-code"
+                size="sm"
+                color="neutral"
+                variant="outline"
+                :label="t('page.marketing.websites.snippet_button')"
+                :aria-label="
+                  t('page.marketing.websites.snippet_named', {
+                    name: card.name,
+                  })
+                "
+                :to="installLink(card.id)"
+              />
+              <UButton
+                trailing-icon="i-ph-arrow-right"
+                size="sm"
+                color="neutral"
+                variant="ghost"
+                :label="t('page.marketing.websites.open_overview')"
+                :aria-label="
+                  t('page.marketing.websites.open_overview_named', {
+                    name: card.name,
+                  })
+                "
+                @click="openOverview(card)"
+              />
+            </footer>
+          </template>
+
+          <template v-else>
+            <p class="px-4 text-sm text-muted">
+              {{
+                t(
+                  card.rejected.length > 0
+                    ? 'page.marketing.websites.waiting_refused'
+                    : 'page.marketing.websites.waiting_description',
+                  { date: formatShortDate(card.createdAt, locale) },
+                )
+              }}
+            </p>
+            <footer class="mt-auto px-4 py-4">
+              <UButton
+                icon="i-ph-pulse"
+                size="sm"
+                :label="t('page.marketing.websites.finish_install')"
+                :aria-label="
+                  t('page.marketing.websites.finish_install_named', {
+                    name: card.name,
+                  })
+                "
+                :to="installLink(card.id)"
+              />
+            </footer>
+          </template>
+        </article>
+      </div>
+    </template>
+
+    <p
+      v-if="cards && cards.length > 0"
+      class="flex items-center gap-2 text-xs text-dimmed"
+    >
+      <UIcon name="i-ph-shield-check" class="size-4" />
+      {{ t('page.marketing.websites.privacy') }}
+    </p>
+
+    <USlideover
+      v-model:open="drawerOpen"
+      :ui="{ content: 'max-w-lg', title: 'min-w-0' }"
+      @after:leave="onDrawerClosed"
+    >
+      <template #title>
+        <span v-if="editing" class="flex min-w-0 flex-col gap-2">
+          <DmsEyebrow :label="t('page.marketing.websites.drawer.eyebrow')" />
+          <span class="flex min-w-0 items-center gap-3">
+            <span
+              class="grid size-9 shrink-0 place-items-center rounded-lg bg-primary/15 font-mono text-sm font-semibold text-(--ui-color-primary-800) dark:text-primary"
+            >
+              {{ initials(editing.name) }}
+            </span>
+            <span class="truncate text-xl font-semibold text-highlighted">
+              {{ editing.name }}
+            </span>
+          </span>
+        </span>
+      </template>
+      <template #description>
+        <span v-if="editing" class="font-mono text-xs break-all text-dimmed">
+          {{ editing.id }} ·
+          {{
+            t('page.marketing.websites.drawer.added', {
+              date: formatShortDate(editing.createdAt, locale),
+            })
+          }}
+        </span>
+      </template>
+      <template #body>
+        <div v-if="editing" class="flex flex-col gap-5">
+          <DmsSegmented
+            v-model="tab"
+            :items="tabItems"
+            size="sm"
+            class="self-start"
+          />
+          <template v-if="tab === 'general'">
+            <DmsFieldRow
+              layout="stack"
+              spacing="list"
+              :inset="false"
+              label="$page.marketing.websites.fields.name"
+              label-for="website-name"
+              required
+            >
+              <UInput
+                id="website-name"
+                v-model="draftName"
+                class="w-full"
+                :maxlength="MAX_WEBSITE_NAME_LENGTH"
+                v-bind="fieldErrors.aria('name')"
+                @update:model-value="fieldErrors.clear('name')"
+              />
+              <DmsFieldError
+                :id="fieldErrors.errorId('name')"
+                :message="fieldErrors.errors.name"
+              />
+            </DmsFieldRow>
+            <DmsFieldRow
+              layout="stack"
+              spacing="list"
+              :inset="false"
+              label="$page.marketing.websites.fields.domain"
+              description="$page.marketing.websites.fields.domain_hint"
+              label-for="website-domain"
+              required
+            >
+              <UInput
+                id="website-domain"
+                v-model="draftDomain"
+                class="w-full font-mono"
+                :maxlength="MAX_WEBSITE_DOMAIN_LENGTH"
+                v-bind="fieldErrors.aria('domain')"
+                @update:model-value="fieldErrors.clear('domain')"
+              />
+              <DmsFieldError
+                :id="fieldErrors.errorId('domain')"
+                :message="fieldErrors.errors.domain"
+              />
+            </DmsFieldRow>
+            <DmsFieldRow
+              layout="stack"
+              spacing="list"
+              :inset="false"
+              label="$page.marketing.websites.fields.hosts"
+              description="$page.marketing.websites.fields.hosts_hint"
+              label-for="website-hosts"
+            >
+              <UInputTags
+                id="website-hosts"
+                v-model="draftHosts"
+                class="w-full font-mono"
+                :placeholder="'staging.example.com'"
+                v-bind="fieldErrors.aria('extraDomains')"
+                @update:model-value="fieldErrors.clear('extraDomains')"
+              />
+              <DmsFieldError
+                :id="fieldErrors.errorId('extraDomains')"
+                :message="fieldErrors.errors.extraDomains"
+              />
+            </DmsFieldRow>
+            <DmsFieldRow
+              spacing="list"
+              :inset="false"
+              label="$page.marketing.websites.fields.tracking"
+              description="$page.marketing.websites.fields.tracking_hint"
+              label-for="website-tracking"
+            >
+              <USwitch id="website-tracking" v-model="draftTracking" />
+            </DmsFieldRow>
+            <DmsFormRequiredLegend />
+          </template>
+          <template v-else-if="tab === 'capture'">
+            <DmsFieldRow
+              spacing="list"
+              :inset="false"
+              label="$page.marketing.websites.fields.snapshots"
+              description="$page.marketing.websites.fields.snapshots_hint"
+              label-for="website-snapshots"
+            >
+              <USwitch id="website-snapshots" v-model="draftSnapshots" />
+            </DmsFieldRow>
+            <DmsFieldRow
+              spacing="list"
+              :inset="false"
+              label="$page.marketing.websites.fields.mask"
+              description="$page.marketing.websites.fields.mask_hint"
+              label-for="website-mask"
+              :disabled="!draftSnapshots"
+            >
+              <USwitch
+                id="website-mask"
+                v-model="draftMask"
+                :disabled="!draftSnapshots"
+              />
+            </DmsFieldRow>
+            <DmsBanner
+              v-if="discardsSnapshots"
+              tone="warning"
+              size="sm"
+              :title="
+                t(
+                  'page.marketing.websites.fields.discard',
+                  { count: editing.snapshots },
+                  editing.snapshots,
+                )
+              "
+            />
+          </template>
+          <template v-else>
+            <div
+              class="flex flex-col gap-3 rounded-lg border border-error/40 p-4"
+            >
+              <span class="text-sm font-semibold text-highlighted">
+                {{ t('page.marketing.websites.delete.section') }}
+              </span>
+              <span class="text-sm text-muted">
+                {{ t('page.marketing.websites.delete.section_description') }}
+              </span>
+              <UButton
+                class="self-start"
+                color="error"
+                variant="outline"
+                icon="i-ph-trash"
+                :label="t('page.marketing.websites.delete.action')"
+                @click="remove(editing)"
+              />
+            </div>
+          </template>
+        </div>
+      </template>
+      <template #footer>
+        <div
+          v-if="tab !== 'danger'"
+          class="flex w-full items-center justify-between"
+        >
+          <UButton
+            color="neutral"
+            variant="ghost"
+            :label="t('page.marketing.common.cancel')"
+            @click="drawerOpen = false"
+          />
+          <UButton
+            :loading="saving"
+            :label="t('page.marketing.common.save_changes')"
+            @click="save"
+          />
+        </div>
+        <UButton
+          v-else
+          class="ml-auto"
+          color="neutral"
+          variant="outline"
+          :label="t('page.marketing.websites.drawer.close')"
+          @click="drawerOpen = false"
+        />
+      </template>
+    </USlideover>
+  </div>
+</template>