@antelopejs/dms-saas 0.0.1

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

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+
+interface AdminState {
+  status: string | null;
+  planId: string | null;
+  hasStripeSubscription: boolean;
+  freeUntil: string | null;
+}
+
+const SUSPENDED_STATUS = "suspended";
+
+interface PlanOption {
+  _id: string;
+  name: string;
+  audience: string;
+  isActive: boolean;
+  isDeleted: boolean;
+}
+
+const STATE_ENDPOINT_PREFIX = "/api/saas/workspaces";
+const PLANS_ENDPOINT = "/api/saas/plans";
+
+const props = defineProps<{
+  routeParams?: Record<string, string>;
+}>();
+
+const { $authFetch } = useAuthFetch();
+const nuxtApp = useDmsApp();
+const toast = useToast();
+const { resolveApiError } = useApiErrorMessage();
+
+const tenantId = computed(() => props.routeParams?.id ?? "");
+const { trigger } = useDetailRefresh(tenantId.value);
+
+const state = ref<AdminState | null>(null);
+const plans = ref<PlanOption[]>([]);
+const isLoading = ref(true);
+const isModalOpen = ref(false);
+const isSubmitting = ref(false);
+
+const selectedPlanId = ref<string | undefined>(undefined);
+const freeUntil = ref<string>("");
+
+const planItems = computed(() =>
+  plans.value
+    .filter((plan) => plan.isActive && !plan.isDeleted)
+    .map((plan) => ({ value: plan._id, label: plan.name })),
+);
+
+const isComplimentary = computed(
+  () =>
+    !!state.value &&
+    !!state.value.planId &&
+    !state.value.hasStripeSubscription,
+);
+
+const isSuspended = computed(() => state.value?.status === SUSPENDED_STATUS);
+
+const buttonLabel = computed(() =>
+  nuxtApp.$i18n.t(
+    isComplimentary.value
+      ? "saas.workspaces.admin.comp.update"
+      : "saas.workspaces.admin.comp.grant",
+  ),
+);
+
+async function loadAll(): Promise<void> {
+  if (!tenantId.value) return;
+  isLoading.value = true;
+  try {
+    const [adminState, planList] = await Promise.all([
+      $authFetch<AdminState>(
+        `${STATE_ENDPOINT_PREFIX}/${tenantId.value}/admin-state`,
+      ),
+      $authFetch<PlanOption[]>(PLANS_ENDPOINT),
+    ]);
+    state.value = adminState;
+    plans.value = planList;
+    selectedPlanId.value = adminState.planId ?? undefined;
+    freeUntil.value = adminState.freeUntil
+      ? adminState.freeUntil.slice(0, 10)
+      : "";
+  } catch {
+    state.value = null;
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+function openModal(): void {
+  selectedPlanId.value = state.value?.planId ?? undefined;
+  freeUntil.value = state.value?.freeUntil
+    ? state.value.freeUntil.slice(0, 10)
+    : "";
+  isModalOpen.value = true;
+}
+
+async function submit(): Promise<void> {
+  if (!selectedPlanId.value) return;
+  isSubmitting.value = true;
+  try {
+    await $authFetch(
+      `${STATE_ENDPOINT_PREFIX}/${tenantId.value}/grant-free-access`,
+      {
+        method: "POST",
+        body: {
+          planId: selectedPlanId.value,
+          freeUntil: freeUntil.value || null,
+        },
+      },
+    );
+    toast.add({
+      title: nuxtApp.$i18n.t("saas.workspaces.admin.comp.success"),
+      color: "success",
+      icon: "i-ph-check-circle",
+    });
+    isModalOpen.value = false;
+    await loadAll();
+    trigger();
+  } catch (error) {
+    toast.add({
+      title: resolveApiError(error, "saas.workspaces.admin.comp.error"),
+      color: "error",
+      icon: "i-ph-warning-circle",
+    });
+  } finally {
+    isSubmitting.value = false;
+  }
+}
+
+onMounted(loadAll);
+</script>
+
+<template>
+  <div v-if="!isLoading && state" class="flex justify-end">
+    <UButton color="primary" variant="soft" icon="i-ph-gift" @click="openModal">
+      {{ buttonLabel }}
+    </UButton>
+
+    <UModal
+      :open="isModalOpen"
+      :title="$t('saas.workspaces.admin.comp.modal_title')"
+      @update:open="isModalOpen = $event"
+    >
+      <template #body>
+        <form class="flex flex-col gap-4" @submit.prevent="submit">
+          <p class="text-muted text-sm">
+            {{ $t("saas.workspaces.admin.comp.modal_description") }}
+          </p>
+          <UFormField :label="$t('saas.workspaces.admin.comp.plan')">
+            <USelect
+              v-model="selectedPlanId"
+              :items="planItems"
+              class="w-full"
+            />
+          </UFormField>
+          <UFormField :label="$t('saas.workspaces.admin.comp.free_until')">
+            <UInput v-model="freeUntil" type="date" class="w-full" />
+          </UFormField>
+          <p class="text-muted text-xs">
+            {{ $t("saas.workspaces.admin.comp.free_until_hint") }}
+          </p>
+          <UAlert
+            color="info"
+            variant="subtle"
+            icon="i-ph-info"
+            :description="
+              $t('saas.workspaces.admin.comp.hint_members_preserved')
+            "
+          />
+          <UAlert
+            v-if="isSuspended"
+            color="warning"
+            variant="subtle"
+            icon="i-ph-warning"
+            :description="$t('saas.workspaces.admin.comp.hint_will_unsuspend')"
+          />
+        </form>
+      </template>
+      <template #footer>
+        <div class="flex justify-end gap-2">
+          <UButton variant="ghost" @click="isModalOpen = false">
+            {{ $t("common.cancel") }}
+          </UButton>
+          <UButton
+            color="primary"
+            :loading="isSubmitting"
+            :disabled="!selectedPlanId"
+            @click="submit"
+          >
+            {{ $t("saas.workspaces.admin.comp.submit") }}
+          </UButton>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>

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

@@ -0,0 +1,256 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+
+interface PlanOption {
+  _id: string;
+  name: string;
+  description: string;
+  price: number;
+  currency: string;
+  interval: "month" | "year";
+}
+
+interface FreePlanAvailability {
+  isAvailable: boolean;
+  blockingWorkspaceName: string | null;
+}
+
+interface CreateOptions {
+  freePlan: FreePlanAvailability;
+}
+
+const props = defineProps<{
+  onSuccessCallback?: (tenantId: string) => void;
+}>();
+
+const PLANS_ENDPOINT = "/api/saas/plans/public";
+const OPTIONS_ENDPOINT = "/api/saas/workspaces/create-options";
+const SETUP_INTENT_ENDPOINT = "/api/saas/workspaces/setup-intent";
+const CREATE_ENDPOINT = "/api/saas/workspaces";
+const PAYMENT_ELEMENT_ID = "dms-saas-workspace-create-payment-element";
+const FREE_PLAN_PRICE = 0;
+
+const { $authFetch } = useAuthFetch();
+const { t, locale } = useI18n();
+const { resolveApiError } = useApiErrorMessage();
+const planIntervalLabel = usePlanIntervalLabel(
+  "saas.workspaces.create.self_serve.interval",
+);
+const config = useDmsRuntimeConfig();
+
+const stripePublishableKey = computed<string>(
+  () => (config.public.dmsSaas as any)?.stripePublishableKey ?? "",
+);
+
+const workspaceName = ref("");
+const plans = ref<PlanOption[]>([]);
+const selectedPlanId = ref<string | null>(null);
+const freePlan = ref<FreePlanAvailability>({
+  isAvailable: true,
+  blockingWorkspaceName: null,
+});
+const isLoading = ref(true);
+const isSubmitting = ref(false);
+const errorMessage = ref<string | null>(null);
+const cardError = ref<string | null>(null);
+const stripeHandle = ref<ReturnType<typeof useStripePaymentElement> | null>(
+  null,
+);
+
+function isFreePlan(plan: PlanOption): boolean {
+  return plan.price <= FREE_PLAN_PRICE;
+}
+
+function isPlanDisabled(plan: PlanOption): boolean {
+  return isFreePlan(plan) && !freePlan.value.isAvailable;
+}
+
+function formatPrice(plan: PlanOption): string {
+  return new Intl.NumberFormat(locale.value, {
+    style: "currency",
+    currency: plan.currency.toUpperCase(),
+  }).format(plan.price);
+}
+
+function planPriceLabel(plan: PlanOption): string {
+  // A free plan has no billing cycle to mention, so it stops at the amount.
+  if (isFreePlan(plan)) return formatPrice(plan);
+  return t("saas.workspaces.create.self_serve.price", {
+    price: formatPrice(plan),
+    interval: planIntervalLabel(plan.interval),
+  });
+}
+
+function planHint(plan: PlanOption): string {
+  if (!isPlanDisabled(plan)) return plan.description;
+  const workspace = freePlan.value.blockingWorkspaceName;
+  if (!workspace) {
+    return t("saas.workspaces.create.self_serve.free_unavailable");
+  }
+  return t("saas.workspaces.create.self_serve.free_taken", { workspace });
+}
+
+const selectablePlans = computed(() =>
+  plans.value.filter((plan) => !isPlanDisabled(plan)),
+);
+
+function selectPlan(plan: PlanOption): void {
+  if (isPlanDisabled(plan)) return;
+  selectedPlanId.value = plan._id;
+}
+
+async function initStripeElement(): Promise<void> {
+  if (!stripePublishableKey.value) {
+    // A missing key otherwise renders an empty card box and fails every
+    // submit with a generic payment error, reading as the user's fault.
+    cardError.value = t("saas.workspaces.create.self_serve.error.card");
+    return;
+  }
+  const setup = await $authFetch<{ clientSecret: string }>(
+    SETUP_INTENT_ENDPOINT,
+  );
+  stripeHandle.value = useStripePaymentElement({
+    publishableKey: stripePublishableKey.value,
+    clientSecret: setup.clientSecret,
+    containerId: PAYMENT_ELEMENT_ID,
+  });
+}
+
+async function load(): Promise<void> {
+  try {
+    const [loadedPlans, options] = await Promise.all([
+      $authFetch<PlanOption[]>(PLANS_ENDPOINT),
+      $authFetch<CreateOptions>(OPTIONS_ENDPOINT),
+    ]);
+    plans.value = loadedPlans;
+    freePlan.value = options.freePlan;
+    selectedPlanId.value = selectablePlans.value[0]?._id ?? null;
+  } catch (error) {
+    errorMessage.value = resolveApiError(
+      error,
+      "saas.workspaces.create.self_serve.error.load",
+    );
+    return;
+  } finally {
+    isLoading.value = false;
+  }
+  // Kept out of the block above so a card-setup outage reports itself as such
+  // instead of hiding behind "could not load the creation options".
+  try {
+    await initStripeElement();
+  } catch (error) {
+    cardError.value = resolveApiError(
+      error,
+      "saas.workspaces.create.self_serve.error.card",
+    );
+  }
+}
+
+function validate(): boolean {
+  if (!workspaceName.value.trim()) {
+    errorMessage.value = t("saas.workspaces.create.error.name");
+    return false;
+  }
+  if (!selectedPlanId.value) {
+    errorMessage.value = t("saas.workspaces.create.error.plan");
+    return false;
+  }
+  if (!stripeHandle.value) {
+    errorMessage.value = t("saas.register.error.no_payment");
+    return false;
+  }
+  return true;
+}
+
+async function submit(): Promise<void> {
+  if (isSubmitting.value || !validate()) return;
+  errorMessage.value = null;
+  isSubmitting.value = true;
+  try {
+    const confirmed = await stripeHandle.value?.confirmAndGetPaymentMethod();
+    if (!confirmed?.paymentMethodId) {
+      errorMessage.value =
+        confirmed?.error?.message ?? t("saas.register.error.no_payment");
+      return;
+    }
+    const created = await $authFetch<{ tenantId: string }>(CREATE_ENDPOINT, {
+      method: "POST",
+      body: {
+        workspaceName: workspaceName.value.trim(),
+        planId: selectedPlanId.value,
+        paymentMethodId: confirmed.paymentMethodId,
+      },
+    });
+    props.onSuccessCallback?.(created.tenantId);
+  } catch (error) {
+    errorMessage.value = resolveApiError(
+      error,
+      "saas.workspaces.create.self_serve.error.failed",
+    );
+  } finally {
+    isSubmitting.value = false;
+  }
+}
+
+onMounted(load);
+</script>
+
+<template>
+  <div v-if="isLoading" class="flex flex-col gap-3">
+    <USkeleton class="h-10 w-full" />
+    <USkeleton class="h-24 w-full" />
+  </div>
+  <form v-else class="flex flex-col gap-4" @submit.prevent="submit">
+    <UFormField :label="$t('saas.workspaces.create.field.name')">
+      <UInput
+        v-model="workspaceName"
+        :placeholder="$t('saas.workspaces.create.placeholder.name')"
+        class="w-full"
+        autofocus
+        required
+      />
+    </UFormField>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-sm font-medium">
+        {{ $t("saas.workspaces.create.field.plan") }}
+        <span class="text-muted font-normal">
+          {{ $t("saas.workspaces.create.self_serve.plan_hint") }}
+        </span>
+      </span>
+      <button
+        v-for="plan in plans"
+        :key="plan._id"
+        type="button"
+        class="border-default flex flex-col gap-1 rounded-md border px-3 py-2.5 text-left transition-colors"
+        :class="[
+          selectedPlanId === plan._id ? 'border-primary bg-primary/5' : '',
+          isPlanDisabled(plan)
+            ? 'cursor-not-allowed opacity-60'
+            : 'hover:border-accented cursor-pointer',
+        ]"
+        :disabled="isPlanDisabled(plan)"
+        :aria-pressed="selectedPlanId === plan._id"
+        @click="selectPlan(plan)"
+      >
+        <span class="text-highlighted text-sm font-medium">
+          {{ plan.name }} — {{ planPriceLabel(plan) }}
+        </span>
+        <span class="text-muted text-xs">{{ planHint(plan) }}</span>
+      </button>
+    </div>
+
+    <UFormField :label="$t('saas.workspaces.create.self_serve.card')">
+      <div :id="PAYMENT_ELEMENT_ID" class="border-default rounded-md border p-4" />
+      <p v-if="cardError" class="text-error mt-1 text-sm">{{ cardError }}</p>
+    </UFormField>
+
+    <p v-if="errorMessage" class="text-error text-sm">{{ errorMessage }}</p>
+
+    <div class="flex justify-end gap-2">
+      <UButton type="submit" color="primary" :loading="isSubmitting">
+        {{ $t("saas.workspaces.create.self_serve.submit") }}
+      </UButton>
+    </div>
+  </form>
+</template>

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

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+
+const CURRENT_ENDPOINT = "/api/saas/workspaces/current";
+const AFTER_DELETE_ROUTE = "/";
+
+const { $authFetch } = useAuthFetch();
+const { resolveApiError } = useApiErrorMessage();
+const toast = useToast();
+const { workspace, load } = useCurrentWorkspace();
+const { workspaces, refresh: refreshMyWorkspaces } = useMyWorkspaces();
+
+const isLoading = ref(true);
+const isConfirmOpen = ref(false);
+const isDeleting = ref(false);
+const confirmation = ref("");
+
+const workspaceName = computed(() => workspace.value?.name ?? "");
+const retentionDays = computed(() => workspace.value?.retentionDays ?? 0);
+// The name gate collapses to "" === "" when the workspace never loaded, which
+// would arm the delete button with the input untouched.
+const canDelete = computed(
+  () =>
+    workspaceName.value.length > 0 &&
+    confirmation.value.trim() === workspaceName.value &&
+    !isDeleting.value,
+);
+
+async function initialize(): Promise<void> {
+  try {
+    if (!workspace.value) await load();
+  } catch (error) {
+    toast.add({
+      title: resolveApiError(error, "saas.workspace.general.error.load"),
+      color: "error",
+      icon: "i-ph-warning-circle",
+    });
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+function openConfirm(): void {
+  confirmation.value = "";
+  isConfirmOpen.value = true;
+}
+
+async function leaveDeletedWorkspace(): Promise<void> {
+  // Staying would land on the suspended screen: the gate refuses a cancelled
+  // workspace. Move to another one of the user's when there is any.
+  const fallback = await resolveFallbackWorkspaceId();
+  if (fallback) {
+    await useTenantSwitch(fallback, AFTER_DELETE_ROUTE);
+    return;
+  }
+  if (typeof window !== "undefined") {
+    window.location.href = AFTER_DELETE_ROUTE;
+  }
+}
+
+async function resolveFallbackWorkspaceId(): Promise<string | null> {
+  await refreshMyWorkspaces().catch(() => undefined);
+  const other = workspaces.value.find(
+    (candidate) => candidate._id !== workspace.value?._id,
+  );
+  return other?._id ?? null;
+}
+
+async function confirmDelete(): Promise<void> {
+  if (!canDelete.value) return;
+  isDeleting.value = true;
+  try {
+    await $authFetch(CURRENT_ENDPOINT, { method: "DELETE" });
+    await leaveDeletedWorkspace();
+  } catch (error) {
+    isDeleting.value = false;
+    toast.add({
+      title: resolveApiError(error, "saas.workspace.general.error.delete"),
+      color: "error",
+      icon: "i-ph-warning-circle",
+    });
+  }
+}
+
+onMounted(initialize);
+</script>
+
+<template>
+  <div
+    class="border-error/40 flex flex-col gap-3 rounded-md border p-4"
+  >
+    <h3 class="text-error text-sm font-semibold">
+      {{ $t("saas.workspace.general.danger_zone_title") }}
+    </h3>
+    <USkeleton v-if="isLoading" class="h-10 w-full" />
+    <div v-else class="flex flex-wrap items-center justify-between gap-3">
+      <p class="text-muted max-w-xl text-sm">
+        {{ $t("saas.workspace.general.delete_intro", { days: retentionDays }) }}
+      </p>
+      <UButton color="error" variant="outline" @click="openConfirm">
+        {{ $t("saas.workspace.general.delete_action") }}
+      </UButton>
+    </div>
+
+    <UModal
+      v-model:open="isConfirmOpen"
+      :title="$t('saas.workspace.general.delete_action')"
+    >
+      <template #body>
+        <div class="flex flex-col gap-4">
+          <p class="text-sm">
+            {{
+              $t("saas.workspace.general.delete_warning", {
+                name: workspaceName,
+                days: retentionDays,
+              })
+            }}
+          </p>
+          <UFormField
+            :label="$t('saas.workspace.general.delete_confirm_label')"
+          >
+            <UInput v-model="confirmation" :placeholder="workspaceName" />
+          </UFormField>
+          <div class="flex justify-end gap-2">
+            <UButton
+              color="neutral"
+              variant="outline"
+              :disabled="isDeleting"
+              @click="isConfirmOpen = false"
+            >
+              {{ $t("saas.workspace.general.cancel") }}
+            </UButton>
+            <UButton
+              color="error"
+              :disabled="!canDelete"
+              :loading="isDeleting"
+              @click="confirmDelete"
+            >
+              {{ $t("saas.workspace.general.delete_submit") }}
+            </UButton>
+          </div>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps<{
+  routeParams?: Record<string, string>;
+}>();
+</script>
+
+<template>
+  <section class="flex grow gap-4">
+    <div
+      class="flex size-12 shrink-0 items-center justify-center rounded-lg bg-default shadow-sm ring ring-default"
+    >
+      <UIcon name="i-ph-building" class="text-primary" size="1.75rem" />
+    </div>
+
+    <div class="flex-1">
+      <h1 class="font-semibold text-highlighted">
+        {{ $t("saas.workspaces.detail") }}
+      </h1>
+      <p class="text-sm text-muted">
+        {{ $t("saas.workspaces.detail_description") }}
+      </p>
+    </div>
+  </section>
+</template>