@antelopejs/dms-saas 0.2.0 → 0.2.1

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>

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

@@ -9,10 +9,17 @@ interface WorkspaceSummaryData {
   currency: string;
   mrr: number;
   membersCount: number;
+  platformSupportCount: number;
+  pendingInvitationsCount: number;
   createdAt: string;
   subscription: { stripeCustomerId: string | null } | null;
 }
 
+interface PeopleCount {
+  key: string;
+  count: number;
+}
+
 type BadgeColor =
   | "primary"
   | "secondary"
@@ -34,7 +41,16 @@ const props = defineProps<{
   routeParams?: Record<string, string>;
 }>();
 
+const PEOPLE_SEPARATOR = " · ";
+const MISSING_DATE = "—";
+const DAY_FORMAT: Intl.DateTimeFormatOptions = {
+  day: "2-digit",
+  month: "short",
+  year: "numeric",
+};
+
 const { $authFetch } = useAuthFetch();
+const { t, locale } = useI18n();
 
 const tenantId = computed(() => props.routeParams?.id ?? "");
 const { triggerRef } = useDetailRefresh(tenantId.value);
@@ -55,13 +71,27 @@ const formattedMrr = computed(() => {
   }).format(workspace.value.mrr);
 });
 
-function formatDate(value: string | null): string {
-  if (!value) return "—";
-  return new Date(value).toLocaleDateString("fr-FR", {
-    day: "2-digit",
-    month: "short",
-    year: "numeric",
-  });
+/** Seated members, then platform support and pending invitations, if any. */
+const peopleLabel = computed(() => {
+  if (!workspace.value) return "";
+  const { membersCount, platformSupportCount, pendingInvitationsCount } =
+    workspace.value;
+  const optionalCounts: PeopleCount[] = [
+    { key: "platform_support", count: platformSupportCount },
+    { key: "pending_invitations", count: pendingInvitationsCount },
+  ];
+  return [
+    t("saas.workspaces.summary.members", { count: membersCount }, membersCount),
+    ...optionalCounts
+      .filter(({ count }) => count > 0)
+      .map(({ key, count }) =>
+        t(`saas.workspaces.summary.${key}`, { count }, count),
+      ),
+  ].join(PEOPLE_SEPARATOR);
+});
+
+function formatDay(value: string | null): string {
+  return formatDate(value, locale.value, DAY_FORMAT) ?? MISSING_DATE;
 }
 
 async function load(): Promise<void> {
@@ -110,13 +140,7 @@ watch(triggerRef, () => {
           <div class="mt-2 flex flex-col gap-1 text-sm text-muted">
             <div class="flex items-center gap-2">
               <UIcon name="i-ph-users" />
-              <span>
-                {{
-                  $t("saas.workspaces.summary.members", {
-                    count: workspace.membersCount,
-                  })
-                }}
-              </span>
+              <span>{{ peopleLabel }}</span>
             </div>
           </div>
         </div>
@@ -145,7 +169,7 @@ watch(triggerRef, () => {
           <dt class="text-muted">
             {{ $t("saas.workspaces.column.created_at") }}
           </dt>
-          <dd class="mt-0.5">{{ formatDate(workspace.createdAt) }}</dd>
+          <dd class="mt-0.5">{{ formatDay(workspace.createdAt) }}</dd>
         </div>
         <div>
           <dt class="text-muted">

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

@@ -37,11 +37,9 @@ async function loadAccess(): Promise<void> {
     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.
+      // Drop the access and billing payloads cached while blocked before
+      // navigating: 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;

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

@@ -5,10 +5,6 @@ const props = defineProps<{
 	collapsed?: boolean
 }>()
 
-interface DmsSaasPublicRuntimeConfig {
-	admissionMode?: 'open' | 'invitation-only'
-}
-
 const toast = useToast()
 const { t } = useI18n()
 const { resolveApiError } = useApiErrorMessage()
@@ -102,6 +98,10 @@ function openCreateModal(): void {
 	isCreateOpen.value = true
 }
 
+function closeCreateModal(): void {
+	isCreateOpen.value = false
+}
+
 async function onWorkspaceCreated(tenantId: string): Promise<void> {
 	isCreateOpen.value = false
 	try {
@@ -300,7 +300,10 @@ onMounted(load)
 		:description="$t('saas.workspaces.create.self_serve.description')"
 	>
 		<template #body>
-			<DmsSaasWorkspaceCreateModal :on-success-callback="onWorkspaceCreated" />
+			<DmsSaasWorkspaceCreateModal
+				:on-success-callback="onWorkspaceCreated"
+				:on-cancel-callback="closeCreateModal"
+			/>
 		</template>
 	</UModal>
 </template>

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

@@ -1,10 +1,12 @@
+import { computed, type ComputedRef } from "vue";
+
 export interface BillingCountryItem {
   value: string;
   label: string;
 }
 
 export interface BillingCountries {
-  countryItems: BillingCountryItem[];
+  countryItems: ComputedRef<BillingCountryItem[]>;
 }
 
 const BILLING_COUNTRY_CODES = [
@@ -44,11 +46,29 @@ const BILLING_COUNTRY_CODES = [
   "NZ",
 ];
 
+/**
+ * Country choices labelled with their full name in the given locale, sorted
+ * alphabetically for that locale. The stored value stays the ISO code Stripe
+ * expects.
+ *
+ * @param locale BCP 47 locale the labels are rendered in
+ */
+export function buildBillingCountryItems(locale: string): BillingCountryItem[] {
+  const names = new Intl.DisplayNames([locale], { type: "region" });
+  return BILLING_COUNTRY_CODES.map((code) => ({
+    value: code,
+    label: names.of(code) ?? code,
+  })).sort((left, right) => left.label.localeCompare(right.label, locale));
+}
+
+/** Full country name for an ISO code, or the code itself when unknown. */
+export function formatBillingCountry(code: string, locale: string): string {
+  return new Intl.DisplayNames([locale], { type: "region" }).of(code) ?? code;
+}
+
 export function useBillingCountries(): BillingCountries {
+  const { locale } = useI18n();
   return {
-    countryItems: BILLING_COUNTRY_CODES.map((code) => ({
-      value: code,
-      label: code,
-    })),
+    countryItems: computed(() => buildBillingCountryItems(locale.value)),
   };
 }

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

@@ -0,0 +1,141 @@
+const BILLING_INFO_ENDPOINT = "/api/saas/tenant/billing-info";
+const BUSINESS_CUSTOMER_TYPE = "business";
+const COUNTRY_CODE_PATTERN = /^[A-Z]{2}$/;
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+export type CustomerType = "individual" | "business";
+export type VatVerificationStatus = "pending" | "verified" | "unverified";
+
+export type BillingIdentityField =
+  | "customerType"
+  | "companyName"
+  | "country"
+  | "line1"
+  | "postalCode"
+  | "city"
+  | "billingEmail";
+
+/** The editable billing identity, as the form holds it. */
+export interface BillingIdentityDraft {
+  customerType: CustomerType | null;
+  companyName: string;
+  vatNumber: string;
+  billingEmail: string;
+  country: string;
+  line1: string;
+  postalCode: string;
+  city: string;
+}
+
+interface BillingAddress {
+  line1: string | null;
+  line2: string | null;
+  postalCode: string | null;
+  city: string | null;
+  state: string | null;
+  country: string | null;
+}
+
+export interface BillingInfoResponse {
+  customerType: CustomerType | null;
+  companyName: string | null;
+  vatNumber: string | null;
+  vatVerificationStatus: VatVerificationStatus | null;
+  billingEmail: string | null;
+  address: BillingAddress | null;
+  missingFields: BillingIdentityField[];
+}
+
+type FieldCheck = (draft: BillingIdentityDraft) => boolean;
+
+function isFilled(value: string): boolean {
+  return value.trim().length > 0;
+}
+
+// Mirrors the server-side rules (src/workspaces/billing-identity.ts): the
+// form flags a field before the request, the server refuses it regardless.
+const FIELD_CHECKS: Record<BillingIdentityField, FieldCheck> = {
+  customerType: (draft) => draft.customerType !== null,
+  companyName: (draft) =>
+    draft.customerType !== BUSINESS_CUSTOMER_TYPE ||
+    isFilled(draft.companyName),
+  country: (draft) => COUNTRY_CODE_PATTERN.test(draft.country.trim()),
+  line1: (draft) => isFilled(draft.line1),
+  postalCode: (draft) => isFilled(draft.postalCode),
+  city: (draft) => isFilled(draft.city),
+  billingEmail: (draft) => EMAIL_PATTERN.test(draft.billingEmail.trim()),
+};
+
+/**
+ * Required fields still missing or malformed, in form order; empty when the
+ * identity can be saved. The VAT number is optional, even for a business.
+ */
+export function findMissingBillingFields(
+  draft: BillingIdentityDraft,
+): BillingIdentityField[] {
+  return (Object.keys(FIELD_CHECKS) as BillingIdentityField[]).filter(
+    (field) => !FIELD_CHECKS[field](draft),
+  );
+}
+
+export function emptyBillingIdentityDraft(): BillingIdentityDraft {
+  return {
+    customerType: null,
+    companyName: "",
+    vatNumber: "",
+    billingEmail: "",
+    country: "",
+    line1: "",
+    postalCode: "",
+    city: "",
+  };
+}
+
+export function toBillingIdentityDraft(
+  info: BillingInfoResponse,
+): BillingIdentityDraft {
+  return {
+    customerType: info.customerType,
+    companyName: info.companyName ?? "",
+    vatNumber: info.vatNumber ?? "",
+    billingEmail: info.billingEmail ?? "",
+    country: info.address?.country ?? "",
+    line1: info.address?.line1 ?? "",
+    postalCode: info.address?.postalCode ?? "",
+    city: info.address?.city ?? "",
+  };
+}
+
+function toRequestBody(draft: BillingIdentityDraft) {
+  const isBusiness = draft.customerType === BUSINESS_CUSTOMER_TYPE;
+  return {
+    customerType: draft.customerType,
+    companyName: isBusiness ? draft.companyName : null,
+    vatNumber: isBusiness ? draft.vatNumber : null,
+    billingEmail: draft.billingEmail,
+    address: {
+      country: draft.country,
+      line1: draft.line1,
+      postalCode: draft.postalCode,
+      city: draft.city,
+    },
+  };
+}
+
+/** Reads and saves the workspace billing identity. */
+export function useBillingIdentity() {
+  const { $authFetch } = useAuthFetch();
+
+  function load(): Promise<BillingInfoResponse> {
+    return $authFetch<BillingInfoResponse>(BILLING_INFO_ENDPOINT);
+  }
+
+  function save(draft: BillingIdentityDraft): Promise<BillingInfoResponse> {
+    return $authFetch<BillingInfoResponse>(BILLING_INFO_ENDPOINT, {
+      method: "PUT",
+      body: toRequestBody(draft),
+    });
+  }
+
+  return { load, save };
+}

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

@@ -0,0 +1,69 @@
+export interface InvitationLink {
+  link: string;
+  expiresAt: string;
+}
+
+export interface InvitationRef {
+  tenantId: string;
+  inviteId: string;
+}
+
+const INVITATIONS_ENDPOINT = "/api/saas/workspaces";
+
+/**
+ * Retrieves an invitation's signup link (each retrieval is journaled server
+ * side) and puts it on the clipboard, reporting the outcome with a toast.
+ */
+export function useInvitationLink() {
+  const { $authFetch } = useAuthFetch();
+  const nuxtApp = useDmsApp();
+  const toast = useToast();
+  const { resolveApiError } = useApiErrorMessage();
+
+  function fetchInvitationLink(ref: InvitationRef): Promise<InvitationLink> {
+    return $authFetch<InvitationLink>(
+      `${INVITATIONS_ENDPOINT}/${ref.tenantId}/invitations/${ref.inviteId}/link`,
+      { method: "POST" },
+    );
+  }
+
+  /** Returns whether the link reached the clipboard. */
+  async function copyLink(link: string): Promise<boolean> {
+    const t = nuxtApp.$i18n.t;
+    try {
+      await navigator.clipboard.writeText(link);
+      toast.add({
+        title: t("saas.workspaces.invitations.link.copied"),
+        color: "success",
+        icon: "i-ph-check-circle",
+      });
+      return true;
+    } catch {
+      // The clipboard can be refused (permissions, insecure origin): the link
+      // stays readable so it can still be copied by hand.
+      toast.add({
+        title: t("saas.workspaces.invitations.link.copy_failed"),
+        description: link,
+        color: "warning",
+        icon: "i-ph-warning",
+        duration: 0,
+      });
+      return false;
+    }
+  }
+
+  async function fetchAndCopy(ref: InvitationRef): Promise<void> {
+    try {
+      const { link } = await fetchInvitationLink(ref);
+      await copyLink(link);
+    } catch (error) {
+      toast.add({
+        title: resolveApiError(error, "saas.workspaces.invitations.link.error"),
+        color: "error",
+        icon: "i-ph-warning-circle",
+      });
+    }
+  }
+
+  return { fetchInvitationLink, copyLink, fetchAndCopy };
+}

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

@@ -0,0 +1,20 @@
+import type { BillingStatusResponse } from "./useBillingStatus";
+
+/**
+ * What the past-due banner offers: the invoice itself when Stripe hands out
+ * its payment page, else the billing page to the owner, who can settle from
+ * there; a member only gets the notice, since the owner pays.
+ */
+export type PastDueBannerAction = "settle" | "open_billing" | "none";
+
+type PastDueBannerStatus = Pick<
+  BillingStatusResponse,
+  "isTenantOwner" | "unpaidInvoice"
+>;
+
+export function resolvePastDueBannerAction(
+  status: PastDueBannerStatus | null,
+): PastDueBannerAction {
+  if (status?.unpaidInvoice?.hostedInvoiceUrl) return "settle";
+  return status?.isTenantOwner ? "open_billing" : "none";
+}

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

@@ -0,0 +1,15 @@
+const OPEN_STATE_KEY = "saas-plan-comparison-open";
+
+/**
+ * Open state of the plan comparison modal hosted by the plan card, shared so
+ * other billing blocks (the payment method card's "add a card") can open it.
+ */
+export function usePlanComparison() {
+  const isOpen = useDmsState<boolean>(OPEN_STATE_KEY, () => false);
+
+  function open(): void {
+    isOpen.value = true;
+  }
+
+  return { isOpen, open };
+}