@antelopejs/dms-saas 0.1.8 → 0.2.1

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

@@ -2,6 +2,7 @@
 import { computed, onMounted, ref } from "vue";
 
 const FREE_PLAN_PRICE = 0;
+const SUMMARY_SEPARATOR = " · ";
 const FULL_DATE_FORMAT: Intl.DateTimeFormatOptions = {
   year: "numeric",
   month: "long",
@@ -19,12 +20,17 @@ const {
 const { data: billingStatus, load: loadBillingStatus } = useBillingStatus();
 const { formatMajorUnits } = useMoneyFormat();
 const { t, locale } = useI18n();
+const { formatFeatureValue } = usePlanFeatureFormat();
+const { featureLabel } = usePlanFeatureLabel();
+const { workspace, load: loadWorkspace } = useCurrentWorkspace();
+const { isOpen: isComparisonOpen } = usePlanComparison();
 const planIntervalLabel = usePlanIntervalLabel("saas.workspace.plan.interval");
 
 const data = ref<TenantPlanResponse | null>(null);
 const isLoading = ref(true);
 const isCancelling = ref(false);
-const isComparisonOpen = ref(false);
+const isUpgradeOpen = ref(false);
+const upgradeTarget = ref<TenantPlanView | null>(null);
 
 const current = computed(() => data.value?.current ?? null);
 const pendingPlan = computed(() => data.value?.pendingPlan ?? null);
@@ -38,6 +44,15 @@ const isAccessBlocked = computed(
     !data.value?.canRecoverComplimentary,
 );
 
+/** Settling an invoice only lifts a block when there is one to settle: an
+ * operator suspension, or a member who cannot see the invoice, gets the copy
+ * that promises nothing about payment. */
+const blockedHintKey = computed(() =>
+  billingStatus.value?.unpaidInvoice
+    ? "saas.workspace.plan.blocked_hint"
+    : "saas.workspace.plan.blocked_hint_inactive",
+);
+
 /** Plan mutations are owner-only server-side; a member gets the read-only
  * card instead of buttons that can only end in a 403 toast. */
 const isTenantOwner = computed(() => !!billingStatus.value?.isTenantOwner);
@@ -68,6 +83,34 @@ const changeAction = computed(() =>
     : { color: "primary" as const, variant: "solid" as const, key: "go_paid" },
 );
 
+/**
+ * One line on what the plan includes: the catalogue's own description when it
+ * has one, else the plan's key (non-detail) limits.
+ */
+const summary = computed(() => {
+  if (current.value?.description) return current.value.description;
+  const view = data.value?.available.find(
+    (plan) => plan._id === current.value?._id,
+  );
+  if (!view || !data.value) return "";
+  return data.value.features
+    .filter(
+      (feature) =>
+        !feature.isDetailRow &&
+        view.featureValues[feature.featureId] !== undefined,
+    )
+    .map(
+      (feature) =>
+        `${featureLabel(feature)} ${formatFeatureValue(feature, view.featureValues[feature.featureId], view.currency)}`,
+    )
+    .join(SUMMARY_SEPARATOR);
+});
+
+function openUpgrade(plan: TenantPlanView): void {
+  upgradeTarget.value = plan;
+  isUpgradeOpen.value = true;
+}
+
 const priceLabel = computed(() =>
   current.value
     ? formatMajorUnits(current.value.price, current.value.currency)
@@ -111,8 +154,15 @@ async function cancelDowngrade(): Promise<void> {
   }
 }
 
+/** The workspace name only titles the owner's plan comparison, and reading
+ * it is owner-only: a member's card never asks. */
+async function loadWorkspaceForOwner(): Promise<void> {
+  const status = await loadBillingStatus();
+  if (status?.isTenantOwner) await loadWorkspace().catch(() => undefined);
+}
+
 onMounted(() => {
-  void loadBillingStatus();
+  void loadWorkspaceForOwner();
   return fetchPlan(false);
 });
 </script>
@@ -140,11 +190,11 @@ onMounted(() => {
     <div v-else-if="data" class="flex flex-col gap-4">
       <div class="flex flex-wrap items-start gap-4">
         <div class="min-w-60 grow">
-          <h2 class="text-lg font-semibold">
-            {{ current?.name ?? $t("saas.workspace.plan.none") }}
+          <h2 v-if="current" class="text-lg font-semibold">
+            {{ current.name }}
           </h2>
-          <p v-if="current?.description" class="text-muted mt-1 text-sm">
-            {{ current.description }}
+          <p v-if="summary" class="text-muted mt-1 text-sm">
+            {{ summary }}
           </p>
         </div>
         <div v-if="current" class="text-right">
@@ -167,9 +217,9 @@ onMounted(() => {
         </div>
         <div class="mt-2 flex justify-between gap-4 font-semibold">
           <span>{{ $t("saas.admission.total") }}</span>
-          <span class="tabular-nums">{{
-            formatMajorUnits(0, current.currency)
-          }}</span>
+          <span class="tabular-nums">
+            {{ formatMajorUnits(0, current.currency) }}
+          </span>
         </div>
       </div>
 
@@ -181,7 +231,7 @@ onMounted(() => {
       </p>
 
       <p v-if="isAccessBlocked" class="text-muted text-sm">
-        {{ $t("saas.workspace.plan.blocked_hint") }}
+        {{ $t(blockedHintKey) }}
       </p>
 
       <p v-else-if="data.isPlanChangeLocked" class="text-muted text-sm">
@@ -216,6 +266,14 @@ onMounted(() => {
         :current-plan-id="current?._id ?? null"
         :pending-plan-id="pendingPlan?.planId ?? null"
         :is-recovery="data.canRecoverComplimentary"
+        :is-current-paid="isPaid"
+        :workspace-name="workspace?.name ?? null"
+        @changed="refresh"
+        @upgrade="openUpgrade"
+      />
+      <DmsSaasPlanUpgradeModal
+        v-model:open="isUpgradeOpen"
+        :plan="upgradeTarget"
         @changed="refresh"
       />
     </div>

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

@@ -20,12 +20,19 @@ interface UserSummaryData {
   workspaces: Array<{ isTenantOwner: boolean }>;
 }
 
+const MISSING_DATE = "—";
+const DAY_FORMAT: Intl.DateTimeFormatOptions = {
+  day: "2-digit",
+  month: "short",
+  year: "numeric",
+};
+
 const props = defineProps<{
   routeParams?: Record<string, string>;
 }>();
 
 const { $authFetch } = useAuthFetch();
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
 const userId = computed(() => props.routeParams?.id ?? "");
 const user = ref<UserSummaryData | null>(null);
@@ -48,13 +55,8 @@ const memberCount = computed(
   () => user.value?.workspaces.filter((w) => !w.isTenantOwner).length ?? 0,
 );
 
-function formatDate(value: string | null): string {
-  if (!value) return "—";
-  return new Date(value).toLocaleDateString("fr-FR", {
-    day: "2-digit",
-    month: "short",
-    year: "numeric",
-  });
+function formatDay(value: string | null): string {
+  return formatDate(value, locale.value, DAY_FORMAT) ?? MISSING_DATE;
 }
 
 async function load(): Promise<void> {
@@ -114,11 +116,11 @@ onMounted(load);
       <dl class="grid grid-cols-2 gap-3 text-sm lg:grid-cols-4">
         <div>
           <dt class="text-muted">{{ $t("saas.users.column.created_at") }}</dt>
-          <dd class="mt-0.5">{{ formatDate(user.createdAt) }}</dd>
+          <dd class="mt-0.5">{{ formatDay(user.createdAt) }}</dd>
         </div>
         <div>
           <dt class="text-muted">{{ $t("saas.users.info.last_active") }}</dt>
-          <dd class="mt-0.5">{{ formatDate(user.lastActiveAt) }}</dd>
+          <dd class="mt-0.5">{{ formatDay(user.lastActiveAt) }}</dd>
         </div>
         <div>
           <dt class="text-muted">{{ $t("saas.users.info.language") }}</dt>

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

@@ -0,0 +1,202 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+
+interface PlanOption {
+  _id: string;
+  name: string;
+  isActive: boolean;
+  isDeleted: boolean;
+}
+
+type CreatedOwner =
+  | { kind: "added"; userId: string }
+  | { kind: "invited"; inviteId: string };
+
+interface CreatedWorkspace {
+  tenantId: string;
+  owner: CreatedOwner;
+  invitationEmail: "sent" | "failed" | null;
+}
+
+const props = defineProps<{
+  onSuccessCallback?: () => void;
+  onCancelCallback?: () => void;
+}>();
+
+const PLANS_ENDPOINT = "/api/saas/plans";
+const CREATE_ENDPOINT = "/modules/saas/customers/workspaces/create";
+const WARNING_TOAST_DURATION = 0;
+
+const { $authFetch } = useAuthFetch();
+const nuxtApp = useDmsApp();
+const toast = useToast();
+const { resolveApiError } = useApiErrorMessage();
+const { fetchAndCopy } = useInvitationLink();
+
+const plans = ref<PlanOption[]>([]);
+const name = ref("");
+const planId = ref<string | undefined>(undefined);
+const ownerEmail = ref("");
+const freeUntil = ref("");
+const isLoading = ref(true);
+const isSubmitting = ref(false);
+const errorMessage = ref<string | null>(null);
+
+const planItems = computed(() =>
+  plans.value
+    .filter((plan) => plan.isActive && !plan.isDeleted)
+    .map((plan) => ({ value: plan._id, label: plan.name })),
+);
+
+const canSubmit = computed(
+  () => !!name.value.trim() && !!planId.value && !!ownerEmail.value.trim(),
+);
+
+async function load(): Promise<void> {
+  try {
+    plans.value = await $authFetch<PlanOption[]>(PLANS_ENDPOINT);
+  } catch (error) {
+    errorMessage.value = resolveApiError(
+      error,
+      "saas.workspaces.admin.create.error.load",
+    );
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+function notifyCreated(created: CreatedWorkspace): void {
+  const t = nuxtApp.$i18n.t;
+  const { owner } = created;
+  if (created.invitationEmail !== "failed" || owner.kind !== "invited") {
+    toast.add({
+      title: t("saas.workspaces.admin.create.success"),
+      color: "success",
+      icon: "i-ph-check-circle",
+    });
+    return;
+  }
+  // The workspace exists and the owner is invited, but nobody told them: the
+  // operator has to hand the link over, so the notice stays until dismissed.
+  toast.add({
+    title: t("saas.workspaces.admin.create.email_failed.title"),
+    description: t("saas.workspaces.admin.create.email_failed.description"),
+    color: "warning",
+    icon: "i-ph-warning",
+    duration: WARNING_TOAST_DURATION,
+    actions: [
+      {
+        label: t("saas.workspaces.invitations.action.copy_link"),
+        icon: "i-ph-link",
+        onClick: () =>
+          fetchAndCopy({ tenantId: created.tenantId, inviteId: owner.inviteId }),
+      },
+    ],
+  });
+}
+
+async function submit(): Promise<void> {
+  if (isSubmitting.value || !canSubmit.value) return;
+  errorMessage.value = null;
+  isSubmitting.value = true;
+  try {
+    const created = await $authFetch<CreatedWorkspace>(CREATE_ENDPOINT, {
+      method: "POST",
+      body: {
+        name: name.value.trim(),
+        planId: planId.value,
+        ownerEmail: ownerEmail.value.trim(),
+        freeUntil: freeUntil.value || null,
+      },
+    });
+    notifyCreated(created);
+    props.onSuccessCallback?.();
+  } catch (error) {
+    errorMessage.value = resolveApiError(
+      error,
+      "saas.workspaces.admin.create.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-10 w-full" />
+  </div>
+  <form v-else class="flex flex-col gap-4" @submit.prevent="submit">
+    <UFormField
+      :label="$t('saas.workspaces.admin.create.field.name')"
+      :description="$t('saas.workspaces.admin.create.field.name_description')"
+      required
+    >
+      <UInput
+        v-model="name"
+        :placeholder="$t('saas.workspaces.admin.create.placeholder.name')"
+        class="w-full"
+        autofocus
+      />
+    </UFormField>
+    <UFormField
+      :label="$t('saas.workspaces.admin.create.field.plan')"
+      :description="$t('saas.workspaces.admin.create.field.plan_description')"
+      required
+    >
+      <USelect
+        v-model="planId"
+        :items="planItems"
+        :placeholder="$t('saas.workspaces.admin.create.placeholder.plan')"
+        class="w-full"
+      />
+    </UFormField>
+    <UFormField
+      :label="$t('saas.workspaces.admin.create.field.owner_email')"
+      :description="
+        $t('saas.workspaces.admin.create.field.owner_email_description')
+      "
+      required
+    >
+      <UInput
+        v-model="ownerEmail"
+        type="email"
+        :placeholder="$t('saas.workspaces.admin.create.placeholder.owner_email')"
+        class="w-full"
+      />
+    </UFormField>
+    <UFormField
+      :label="$t('saas.workspaces.admin.create.field.free_until')"
+      :description="
+        $t('saas.workspaces.admin.create.field.free_until_description')
+      "
+    >
+      <UInput v-model="freeUntil" type="date" class="w-full" />
+    </UFormField>
+
+    <p v-if="errorMessage" class="text-error text-sm">{{ errorMessage }}</p>
+
+    <div class="flex justify-end gap-2">
+      <UButton
+        v-if="props.onCancelCallback"
+        color="neutral"
+        variant="ghost"
+        :disabled="isSubmitting"
+        @click="props.onCancelCallback()"
+      >
+        {{ $t("common.cancel") }}
+      </UButton>
+      <UButton
+        type="submit"
+        color="primary"
+        :loading="isSubmitting"
+        :disabled="!canSubmit"
+      >
+        {{ $t("saas.workspaces.admin.create.submit") }}
+      </UButton>
+    </div>
+  </form>
+</template>

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

@@ -21,6 +21,7 @@ interface CreateOptions {
 
 const props = defineProps<{
   onSuccessCallback?: (tenantId: string) => void;
+  onCancelCallback?: () => void;
 }>();
 
 const PLANS_ENDPOINT = "/api/saas/plans/public";
@@ -52,6 +53,7 @@ const freePlan = ref<FreePlanAvailability>({
 const isLoading = ref(true);
 const isSubmitting = ref(false);
 const errorMessage = ref<string | null>(null);
+const nameError = ref<string | null>(null);
 const cardError = ref<string | null>(null);
 const stripeHandle = ref<ReturnType<typeof useStripePaymentElement> | null>(
   null,
@@ -94,6 +96,11 @@ const selectablePlans = computed(() =>
   plans.value.filter((plan) => !isPlanDisabled(plan)),
 );
 
+// Only once the catalogue actually loaded: a failed load reports itself.
+const hasNoPlanOnOffer = computed(
+  () => !isLoading.value && !errorMessage.value && plans.value.length === 0,
+);
+
 function selectPlan(plan: PlanOption): void {
   if (isPlanDisabled(plan)) return;
   selectedPlanId.value = plan._id;
@@ -125,6 +132,8 @@ async function load(): Promise<void> {
     plans.value = loadedPlans;
     freePlan.value = options.freePlan;
     selectedPlanId.value = selectablePlans.value[0]?._id ?? null;
+    // Nothing to pay for, so no card to set up.
+    if (loadedPlans.length === 0) return;
   } catch (error) {
     errorMessage.value = resolveApiError(
       error,
@@ -147,10 +156,10 @@ async function load(): Promise<void> {
 }
 
 function validate(): boolean {
-  if (!workspaceName.value.trim()) {
-    errorMessage.value = t("saas.workspaces.create.error.name");
-    return false;
-  }
+  nameError.value = workspaceName.value.trim()
+    ? null
+    : t("saas.workspaces.create.error.name");
+  if (nameError.value) return false;
   if (!selectedPlanId.value) {
     errorMessage.value = t("saas.workspaces.create.error.plan");
     return false;
@@ -201,17 +210,28 @@ onMounted(load);
     <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')">
+    <UFormField
+      :label="$t('saas.workspaces.create.field.name')"
+      :error="nameError ?? false"
+    >
       <UInput
         v-model="workspaceName"
         :placeholder="$t('saas.workspaces.create.placeholder.name')"
         class="w-full"
         autofocus
-        required
+        @update:model-value="nameError = null"
       />
     </UFormField>
 
-    <div class="flex flex-col gap-2">
+    <UAlert
+      v-if="hasNoPlanOnOffer"
+      color="neutral"
+      variant="subtle"
+      icon="i-ph-info"
+      :description="$t('saas.workspaces.create.self_serve.no_plans')"
+    />
+
+    <div v-else class="flex flex-col gap-2">
       <span class="text-sm font-medium">
         {{ $t("saas.workspaces.create.field.plan") }}
         <span class="text-muted font-normal">
@@ -240,7 +260,10 @@ onMounted(load);
       </button>
     </div>
 
-    <UFormField :label="$t('saas.workspaces.create.self_serve.card')">
+    <UFormField
+      v-if="!hasNoPlanOnOffer"
+      :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>
@@ -248,7 +271,21 @@ onMounted(load);
     <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">
+      <UButton
+        v-if="props.onCancelCallback"
+        color="neutral"
+        variant="ghost"
+        :disabled="isSubmitting"
+        @click="props.onCancelCallback()"
+      >
+        {{ $t("common.cancel") }}
+      </UButton>
+      <UButton
+        type="submit"
+        color="primary"
+        :loading="isSubmitting"
+        :disabled="hasNoPlanOnOffer"
+      >
         {{ $t("saas.workspaces.create.self_serve.submit") }}
       </UButton>
     </div>

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

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+
+interface InvitationRow {
+  _id: string;
+  _instance: string;
+  email?: string;
+}
+
+const props = defineProps<{
+  rowData?: InvitationRow;
+  onSuccessCallback?: () => void;
+}>();
+
+const nuxtApp = useDmsApp();
+const { resolveApiError } = useApiErrorMessage();
+const { fetchInvitationLink, copyLink } = useInvitationLink();
+
+const link = ref<string | null>(null);
+const expiresAt = ref<string | null>(null);
+const errorMessage = ref<string | null>(null);
+const isLoading = ref(true);
+
+function formatDate(value: string): string {
+  return new Intl.DateTimeFormat(nuxtApp.$i18n.locale.value, {
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(new Date(value));
+}
+
+async function load(): Promise<void> {
+  if (!props.rowData) return;
+  try {
+    const invitation = await fetchInvitationLink({
+      tenantId: props.rowData._instance,
+      inviteId: props.rowData._id,
+    });
+    link.value = invitation.link;
+    expiresAt.value = invitation.expiresAt;
+  } catch (error) {
+    errorMessage.value = resolveApiError(
+      error,
+      "saas.workspaces.invitations.link.error",
+    );
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+async function copy(): Promise<void> {
+  if (!link.value) return;
+  await copyLink(link.value);
+}
+
+onMounted(load);
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <USkeleton v-if="isLoading" class="h-10 w-full" />
+    <UAlert
+      v-else-if="errorMessage"
+      color="error"
+      variant="subtle"
+      icon="i-ph-warning-circle"
+      :description="errorMessage"
+    />
+    <template v-else-if="link">
+      <UFormField
+        :label="$t('saas.workspaces.invitations.link.label')"
+        :help="
+          expiresAt
+            ? $t('saas.workspaces.invitations.link.expires', {
+                date: formatDate(expiresAt),
+              })
+            : undefined
+        "
+      >
+        <div class="flex gap-2">
+          <UInput
+            :model-value="link"
+            readonly
+            class="w-full"
+            data-testid="invitation-link"
+            @focus="($event.target as HTMLInputElement).select()"
+          />
+          <UButton icon="i-ph-copy" color="primary" @click="copy">
+            {{ $t("saas.workspaces.invitations.link.copy") }}
+          </UButton>
+        </div>
+      </UFormField>
+      <p class="text-muted text-xs">
+        {{ $t("saas.workspaces.invitations.link.warning") }}
+      </p>
+    </template>
+    <div class="flex justify-end">
+      <UButton
+        color="neutral"
+        variant="ghost"
+        @click="props.onSuccessCallback?.()"
+      >
+        {{ $t("saas.workspaces.invitations.link.close") }}
+      </UButton>
+    </div>
+  </div>
+</template>