@antelopejs/dms-saas 0.0.1

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

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+
+interface AdminWorkspaceState {
+  status: string | null;
+  planId: string | null;
+  hasStripeSubscription: boolean;
+  freeUntil: string | null;
+}
+
+interface Props {
+  routeParams?: Record<string, string>;
+}
+
+type SuspensionAction = "suspend" | "unsuspend";
+
+const SUSPENDED_STATUS = "suspended";
+const CANCELLED_STATUS = "cancelled";
+
+const props = defineProps<Props>();
+
+const { $authFetch } = useAuthFetch();
+const nuxtApp = useDmsApp();
+const toast = useToast();
+const { resolveApiError } = useApiErrorMessage();
+
+const tenantId = computed(() => props.routeParams?.id ?? "");
+const { trigger, triggerRef } = useDetailRefresh(tenantId.value);
+const state = ref<AdminWorkspaceState | null>(null);
+const isLoading = ref(true);
+const isModalOpen = ref(false);
+const isSubmitting = ref(false);
+const operationId = ref(crypto.randomUUID());
+const operationAction = ref<SuspensionAction | null>(null);
+
+const isSuspended = computed(() => state.value?.status === SUSPENDED_STATUS);
+
+const isHidden = computed(
+  () => !state.value || state.value.status === CANCELLED_STATUS,
+);
+
+const buttonLabel = computed(() =>
+  nuxtApp.$i18n.t(
+    isSuspended.value
+      ? "saas.workspaces.admin.unsuspend"
+      : "saas.workspaces.admin.suspend",
+  ),
+);
+
+const buttonColor = computed<"primary" | "error">(() =>
+  isSuspended.value ? "primary" : "error",
+);
+
+const confirmTitle = computed(() =>
+  nuxtApp.$i18n.t(
+    isSuspended.value
+      ? "saas.workspaces.admin.confirm_unsuspend.title"
+      : "saas.workspaces.admin.confirm_suspend.title",
+  ),
+);
+
+const confirmMessage = computed(() =>
+  nuxtApp.$i18n.t(
+    isSuspended.value
+      ? "saas.workspaces.admin.confirm_unsuspend.description"
+      : state.value?.hasStripeSubscription
+        ? "saas.workspaces.admin.confirm_suspend.description_with_pause"
+        : "saas.workspaces.admin.confirm_suspend.description_local",
+  ),
+);
+
+async function loadState(): Promise<void> {
+  if (!tenantId.value) return;
+  isLoading.value = true;
+  try {
+    state.value = await $authFetch<AdminWorkspaceState>(
+      `/api/saas/workspaces/${tenantId.value}/admin-state`,
+    );
+  } catch {
+    state.value = null;
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+async function confirmAction(): Promise<void> {
+  isSubmitting.value = true;
+  try {
+    const endpoint = isSuspended.value ? "unsuspend" : "suspend";
+    await $authFetch(`/api/saas/workspaces/${tenantId.value}/${endpoint}`, {
+      method: "POST",
+      body: { operationId: operationId.value },
+    });
+    toast.add({
+      title: nuxtApp.$i18n.t(
+        isSuspended.value
+          ? "saas.workspaces.admin.unsuspended"
+          : "saas.workspaces.admin.suspended",
+      ),
+      color: "success",
+      icon: "i-ph-check-circle",
+    });
+    isModalOpen.value = false;
+    operationId.value = crypto.randomUUID();
+    operationAction.value = null;
+    trigger();
+  } catch (error) {
+    toast.add({
+      title: resolveApiError(error, "saas.workspaces.admin.action_error"),
+      color: "error",
+      icon: "i-ph-warning-circle",
+    });
+    trigger();
+  } finally {
+    isSubmitting.value = false;
+  }
+}
+
+function openModal(): void {
+  const action = isSuspended.value ? "unsuspend" : "suspend";
+  if (operationAction.value !== action) {
+    operationId.value = crypto.randomUUID();
+    operationAction.value = action;
+  }
+  isModalOpen.value = true;
+}
+
+onMounted(loadState);
+watch(triggerRef, loadState);
+</script>
+
+<template>
+  <div v-if="!isLoading && !isHidden" class="flex justify-end">
+    <UButton
+      :color="buttonColor"
+      variant="soft"
+      :icon="isSuspended ? 'i-ph-play' : 'i-ph-prohibit'"
+      @click="openModal"
+    >
+      {{ buttonLabel }}
+    </UButton>
+
+    <UModal
+      :open="isModalOpen"
+      :title="confirmTitle"
+      @update:open="isModalOpen = $event"
+    >
+      <template #body>
+        <p>{{ confirmMessage }}</p>
+      </template>
+      <template #footer>
+        <div class="flex justify-end gap-2">
+          <UButton variant="ghost" @click="isModalOpen = false">
+            {{ $t("common.cancel") }}
+          </UButton>
+          <UButton
+            :color="buttonColor"
+            :loading="isSubmitting"
+            @click="confirmAction"
+          >
+            {{ buttonLabel }}
+          </UButton>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>

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

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+
+const ACCESS_ENDPOINT = "/api/saas/billing/access";
+const HOME_REDIRECT = "/";
+const LOGIN_REDIRECT = "/auth/login";
+const BILLING_PATH = "/settings/workspace/billing";
+
+const { $authFetch } = useAuthFetch();
+const { clear: clearSession } = useUserSession();
+const { formatMinorUnits } = useMoneyFormat();
+const cachedAccess = useWorkspaceAccessCache();
+const { data: billingStatusState } = useBillingStatus();
+const { data: tenantPlanState } = useTenantPlan();
+
+const access = ref<WorkspaceAccess | null>(null);
+const isLoading = ref(true);
+const hasError = ref(false);
+
+const statusKey = computed(() => {
+  const status = access.value?.status;
+  return isBlockingSubscriptionStatus(status)
+    ? `saas.workspace_suspended.status.${status}`
+    : "saas.workspace_suspended.status.default";
+});
+
+const invoice = computed(() => access.value?.unpaidInvoice ?? null);
+const amountLabel = computed(() =>
+  formatMinorUnits(invoice.value?.amount, invoice.value?.currency),
+);
+const invoiceLabel = computed(() => invoice.value?.number ?? amountLabel.value);
+
+async function loadAccess(): Promise<void> {
+  isLoading.value = true;
+  hasError.value = false;
+  try {
+    const result = await $authFetch<WorkspaceAccess>(ACCESS_ENDPOINT);
+    access.value = result;
+    if (!result.blocked) {
+      // Drop the middleware's cached blocked state before navigating,
+      // otherwise it redirects straight back here and the recovery path
+      // never resolves. The shared billing payloads cached while blocked go
+      // with it: an SPA navigation keeps useState alive, and the billing page
+      // would keep announcing a suspension the user just settled.
+      cachedAccess.value = null;
+      billingStatusState.value = null;
+      tenantPlanState.value = null;
+      await navigateDms(HOME_REDIRECT);
+    }
+  } catch {
+    hasError.value = true;
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+/** Same settlement route as the past-due banner: the Stripe-hosted invoice
+ * page handles payment, card update and 3DS on its own. */
+function settle(): void {
+  const url = invoice.value?.hostedInvoiceUrl;
+  if (!url || typeof window === "undefined") return;
+  window.open(url, "_blank", "noopener");
+}
+
+async function logout(): Promise<void> {
+  await clearSession();
+  await navigateDms(LOGIN_REDIRECT);
+}
+
+onMounted(loadAccess);
+</script>
+
+<template>
+  <div class="mx-auto flex min-h-[60vh] w-full max-w-xl flex-col justify-center gap-6 py-12">
+    <div v-if="isLoading" class="flex justify-center">
+      <UIcon name="i-ph-circle-notch" class="size-8 animate-spin" />
+    </div>
+
+    <UAlert
+      v-else-if="hasError"
+      color="error"
+      variant="subtle"
+      icon="i-ph-warning-circle"
+      :title="$t('saas.workspace_suspended.load_error')"
+    >
+      <template #actions>
+        <UButton
+          color="error"
+          variant="solid"
+          icon="i-ph-arrows-clockwise"
+          @click="loadAccess"
+        >
+          {{ $t("saas.workspace_suspended.recheck") }}
+        </UButton>
+      </template>
+    </UAlert>
+
+    <UCard v-else-if="access?.blocked">
+      <template #header>
+        <div class="flex items-center gap-3">
+          <UIcon name="i-ph-lock-simple" class="size-6 text-error" />
+          <h1 class="text-lg font-semibold">
+            {{ $t("saas.workspace_suspended.title") }}
+          </h1>
+        </div>
+      </template>
+
+      <div class="flex flex-col gap-4">
+        <p v-if="invoice">
+          {{
+            $t("saas.workspace_suspended.unpaid_invoice", {
+              invoice: invoiceLabel,
+              amount: amountLabel,
+            })
+          }}
+        </p>
+        <p v-else>{{ $t(statusKey) }}</p>
+
+        <p v-if="access.isTenantOwner" class="text-muted text-sm">
+          {{ $t("saas.workspace_suspended.retention_note") }}
+        </p>
+        <p v-else>
+          {{ $t("saas.workspace_suspended.contact_owner") }}
+        </p>
+
+        <div v-if="access.isTenantOwner" class="flex flex-wrap gap-2">
+          <UButton
+            v-if="invoice?.hostedInvoiceUrl"
+            color="primary"
+            icon="i-ph-arrow-square-out"
+            @click="settle"
+          >
+            {{ $t("saas.workspace_suspended.settle") }}
+          </UButton>
+          <UButton
+            color="neutral"
+            variant="subtle"
+            icon="i-ph-credit-card"
+            :to="BILLING_PATH"
+          >
+            {{ $t("saas.workspace_suspended.open_billing") }}
+          </UButton>
+          <DmsSaasCustomerPortalButton />
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="flex items-center justify-between">
+          <UButton
+            color="neutral"
+            variant="ghost"
+            icon="i-ph-arrows-clockwise"
+            @click="loadAccess"
+          >
+            {{ $t("saas.workspace_suspended.recheck") }}
+          </UButton>
+          <UButton color="neutral" variant="outline" @click="logout">
+            {{ $t("saas.workspace_suspended.logout") }}
+          </UButton>
+        </div>
+      </template>
+    </UCard>
+  </div>
+</template>

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

@@ -0,0 +1,247 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+
+const props = defineProps<{
+  collapsed?: boolean;
+}>();
+
+interface DmsSaasPublicRuntimeConfig {
+  admissionMode?: "open" | "invitation-only";
+}
+
+const toast = useToast();
+const { t } = useI18n();
+const { resolveApiError } = useApiErrorMessage();
+
+// Platform owners are not tenant members by default, so an owner can legitimately
+// have no workspace at all — the switcher must still offer them a way in.
+const isOwner = useIsOwner();
+const config = useDmsRuntimeConfig();
+const canCreateWorkspace = computed(
+  () =>
+    isOwner.value ||
+    (config.public.dmsSaas as DmsSaasPublicRuntimeConfig | undefined)
+      ?.admissionMode !== "invitation-only",
+);
+
+const SEARCH_THRESHOLD = 6;
+const HOME_ROUTE = "/";
+
+const { workspaces, refresh } = useMyWorkspaces();
+const isLoading = ref(true);
+const isOpen = ref(false);
+const isCreateOpen = ref(false);
+const searchQuery = ref("");
+const switchingId = ref<string | null>(null);
+
+const current = computed<MyWorkspace | undefined>(
+  () => workspaces.value.find((w) => w.isCurrent) ?? workspaces.value[0],
+);
+
+const showSearch = computed(() => workspaces.value.length >= SEARCH_THRESHOLD);
+
+const isVisible = computed(() => !!current.value || isOwner.value);
+
+const triggerLabel = computed(
+  () => current.value?.name ?? t("saas.workspaces.none"),
+);
+
+const triggerCaption = computed(
+  () => current.value?.planName ?? t("saas.workspaces.current_label"),
+);
+
+const filtered = computed<MyWorkspace[]>(() => {
+  const needle = searchQuery.value.trim().toLowerCase();
+  if (!needle) return workspaces.value;
+  return workspaces.value.filter((w) => w.name.toLowerCase().includes(needle));
+});
+
+watch(isOpen, (open) => {
+  if (!open) searchQuery.value = "";
+});
+
+const popoverPlacement = computed(() =>
+  props.collapsed
+    ? { side: "right" as const, align: "start" as const, sideOffset: 12 }
+    : { side: "bottom" as const, align: "start" as const, sideOffset: 6 },
+);
+
+function initialOf(name: string): string {
+  return (name.trim()[0] ?? "?").toUpperCase();
+}
+
+async function load(): Promise<void> {
+  try {
+    await refresh();
+  } catch {
+    // Errors are swallowed on purpose: useMyWorkspaces already decides what the
+    // list becomes, and the sidebar is no place for an error card.
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+async function selectWorkspace(workspace: MyWorkspace): Promise<void> {
+  if (workspace.isCurrent || switchingId.value) return;
+  switchingId.value = workspace._id;
+  try {
+    // Reloads the page on success, so the switching state never resets.
+    await useTenantSwitch(workspace._id);
+  } catch (error) {
+    switchingId.value = null;
+    toast.add({
+      title: resolveApiError(error, "saas.workspaces.switch_error"),
+      color: "error",
+      icon: "i-ph-warning-circle",
+    });
+  }
+}
+
+function openCreateModal(): void {
+  isOpen.value = false;
+  isCreateOpen.value = true;
+}
+
+async function onWorkspaceCreated(tenantId: string): Promise<void> {
+  isCreateOpen.value = false;
+  try {
+    // Lands on the DMS homepage rather than reloading the settings screen the
+    // creation was started from — that screen belongs to the previous tenant.
+    await useTenantSwitch(tenantId, HOME_ROUTE);
+  } catch (error) {
+    toast.add({
+      title: resolveApiError(error, "saas.workspaces.switch_error"),
+      color: "error",
+      icon: "i-ph-warning-circle",
+    });
+    load();
+  }
+}
+
+onMounted(load);
+</script>
+
+<template>
+  <USkeleton
+    v-if="isLoading"
+    :class="collapsed ? 'mx-auto size-9 rounded-md' : 'h-[46px] w-full rounded-md'"
+  />
+  <UPopover
+    v-else-if="isVisible"
+    v-model:open="isOpen"
+    :content="popoverPlacement"
+  >
+    <UTooltip
+      :text="triggerLabel"
+      :disabled="!collapsed"
+      :content="{ side: 'right' }"
+    >
+      <button
+        type="button"
+        class="border-default bg-elevated hover:border-accented flex w-full items-center rounded-md border text-left transition-colors"
+        :class="collapsed ? 'mx-auto size-9 justify-center' : 'gap-2.5 px-2.5 py-2'"
+        :aria-label="$t('saas.workspaces.switcher_title')"
+      >
+        <span
+          class="bg-primary/10 text-primary grid size-7 shrink-0 place-items-center rounded-md text-xs font-semibold"
+        >
+          <UIcon v-if="!current" name="i-ph-buildings" class="size-4" />
+          <template v-else>{{ initialOf(current.name) }}</template>
+        </span>
+        <template v-if="!collapsed">
+          <span class="min-w-0 flex-1">
+            <span class="text-muted block truncate text-[10px] font-medium uppercase tracking-wide">
+              {{ triggerCaption }}
+            </span>
+            <span class="text-highlighted block truncate text-xs font-medium">
+              {{ triggerLabel }}
+            </span>
+          </span>
+          <UIcon
+            name="i-ph-caret-up-down"
+            class="text-dimmed size-4 shrink-0"
+          />
+        </template>
+      </button>
+    </UTooltip>
+
+    <template #content>
+      <div class="flex w-64 flex-col gap-1 p-2">
+        <p class="text-muted px-2 pt-1 text-xs font-medium">
+          {{ $t("saas.workspaces.switcher_title") }}
+        </p>
+        <UInput
+          v-if="showSearch"
+          v-model="searchQuery"
+          size="sm"
+          icon="i-ph-magnifying-glass"
+          :placeholder="$t('saas.workspaces.select')"
+        />
+        <ul v-if="filtered.length" class="m-0 max-h-64 list-none overflow-y-auto p-0">
+          <li v-for="workspace in filtered" :key="workspace._id">
+            <button
+              type="button"
+              class="hover:bg-elevated flex w-full cursor-pointer items-center gap-2.5 rounded-md px-2 py-1.5 text-left text-sm transition-colors"
+              :class="{ 'cursor-default': workspace.isCurrent || !!switchingId }"
+              @click="selectWorkspace(workspace)"
+            >
+              <span
+                class="bg-primary/10 text-primary grid size-6 shrink-0 place-items-center rounded-md text-[10px] font-semibold"
+              >
+                {{ initialOf(workspace.name) }}
+              </span>
+              <span
+                class="min-w-0 flex-1 truncate"
+                :class="workspace.isCurrent ? 'text-highlighted font-medium' : 'text-default'"
+              >
+                {{ workspace.name }}
+              </span>
+              <span
+                v-if="workspace.planName"
+                class="text-muted shrink-0 text-[10px] font-medium uppercase tracking-wide"
+              >
+                {{ workspace.planName }}
+              </span>
+              <UIcon
+                v-if="switchingId === workspace._id"
+                name="i-ph-spinner"
+                class="text-muted size-4 shrink-0 animate-spin"
+              />
+              <UIcon
+                v-else-if="workspace.isCurrent"
+                name="i-ph-check"
+                class="text-primary size-4 shrink-0"
+              />
+            </button>
+          </li>
+        </ul>
+        <p v-else-if="workspaces.length" class="text-muted px-2 py-1.5 text-sm">
+          {{ $t("saas.workspaces.no_results") }}
+        </p>
+        <USeparator v-if="workspaces.length" />
+        <UButton
+          v-if="canCreateWorkspace"
+          variant="ghost"
+          color="neutral"
+          icon="i-ph-plus"
+          size="sm"
+          block
+          class="justify-start"
+          @click="openCreateModal"
+        >
+          {{ $t("saas.workspaces.create.button") }}
+        </UButton>
+      </div>
+    </template>
+  </UPopover>
+
+  <UModal
+    v-model:open="isCreateOpen"
+    :title="$t('saas.workspaces.create.title')"
+    :description="$t('saas.workspaces.create.self_serve.description')"
+  >
+    <template #body>
+      <DmsSaasWorkspaceCreateModal :on-success-callback="onWorkspaceCreated" />
+    </template>
+  </UModal>
+</template>

package/frontend-vue/app/composables/useApiErrorMessage.ts

@@ -0,0 +1,35 @@
+/**
+ * Resolves an unknown error thrown by `$authFetch` into a human-readable,
+ * translated message.
+ *
+ * The backend signals failures with `assert(cond, status, "i18n.key")`, which
+ * serializes the i18n key as the response body. ofetch exposes that body on
+ * `error.data` (a string, or `{ message }` for some handlers), while
+ * `error.message` only holds the generic "POST <url> 409" text — never show
+ * that to the user. We translate the server key when it exists, otherwise fall
+ * back to a caller-provided generic key.
+ */
+export function useApiErrorMessage() {
+  const nuxtApp = useDmsApp();
+
+  function extractServerKey(error: unknown): string | undefined {
+    const data = (error as { data?: unknown } | undefined)?.data;
+    if (typeof data === "string") return data;
+    const message = (data as { message?: unknown } | undefined)?.message;
+    return typeof message === "string" ? message : undefined;
+  }
+
+  /** Translated server message, or `undefined` when the server sent no usable key. */
+  function resolveServerMessage(error: unknown): string | undefined {
+    const { t, te } = nuxtApp.$i18n;
+    const key = extractServerKey(error);
+    return key && te(key) ? t(key) : undefined;
+  }
+
+  /** Translated server message, or the caller's generic fallback key. */
+  function resolveApiError(error: unknown, fallbackKey: string): string {
+    return resolveServerMessage(error) ?? nuxtApp.$i18n.t(fallbackKey);
+  }
+
+  return { resolveApiError, resolveServerMessage };
+}

package/frontend-vue/app/composables/useBillingCountries.ts

@@ -0,0 +1,54 @@
+export interface BillingCountryItem {
+  value: string;
+  label: string;
+}
+
+export interface BillingCountries {
+  countryItems: BillingCountryItem[];
+}
+
+const BILLING_COUNTRY_CODES = [
+  "AT",
+  "BE",
+  "BG",
+  "HR",
+  "CY",
+  "CZ",
+  "DK",
+  "EE",
+  "FI",
+  "FR",
+  "DE",
+  "GR",
+  "HU",
+  "IE",
+  "IT",
+  "LV",
+  "LT",
+  "LU",
+  "MT",
+  "NL",
+  "PL",
+  "PT",
+  "RO",
+  "SK",
+  "SI",
+  "ES",
+  "SE",
+  "GB",
+  "CH",
+  "NO",
+  "US",
+  "CA",
+  "AU",
+  "NZ",
+];
+
+export function useBillingCountries(): BillingCountries {
+  return {
+    countryItems: BILLING_COUNTRY_CODES.map((code) => ({
+      value: code,
+      label: code,
+    })),
+  };
+}

package/frontend-vue/app/composables/useBillingDocumentType.ts

@@ -0,0 +1,7 @@
+const CREDIT_NOTE_TYPE = "credit_note";
+
+/** Resolves the translation key for current and pre-discriminant invoice rows. */
+export function billingDocumentTypeKey(value: unknown): string {
+  const type = value === CREDIT_NOTE_TYPE ? CREDIT_NOTE_TYPE : "invoice";
+  return `saas.invoices.type.${type}`;
+}