@antelopejs/dms-saas 0.2.0 → 0.3.0

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

@@ -2,37 +2,26 @@
 /**
  * Reference implementation of the public registration flow.
  *
- * Deliberately plain: every SaaS wants its own funnel — its arguments, its way
- * of presenting plans, one page or three steps — so this screen exists to work
- * out of the box, not to be the design anyone ships. Replace it by turning the
- * bundled page off (`publicScreens.register: false` in the dms-saas config) and
- * registering your own page on the `register` slug, then build the markup you
- * want on `useSaasRegistration()`, which owns the Stripe orchestration, the
- * validation order and the provisioning call.
+ * Deliberately plain: every SaaS wants its own funnel, so this screen exists
+ * to work out of the box, not to be the design anyone ships. Replace it by
+ * turning the bundled page off (`publicScreens.register: false` in the
+ * dms-saas config) and registering your own page on the `register` slug, then
+ * build the markup you want on `useSaasRegistration()`, which owns the card
+ * policy, the Stripe orchestration, the validation order and the provisioning
+ * call.
  */
-interface DmsSaasPublicRuntimeConfig {
-  admissionMode?: "open" | "invitation-only";
-}
-
 const {
   form,
-  plans,
-  countryItems,
   paymentElementId,
+  canSkipPaymentMethod,
+  isPaymentStepVisible,
+  passwordStrength,
+  isRegistrationClosed,
   errorMessage,
   isSubmitting,
-  formatPlanPrice,
   submit,
 } = useSaasRegistration();
-
-const customerTypeItems = [
-  { value: "individual", label: "saas.register.customer_type.individual" },
-  { value: "business", label: "saas.register.customer_type.business" },
-];
-const config = useDmsRuntimeConfig();
-const isRegistrationClosed =
-  (config.public.dmsSaas as DmsSaasPublicRuntimeConfig | undefined)
-    ?.admissionMode === "invitation-only";
+const { strength, score, color } = passwordStrength;
 </script>
 
 <template>
@@ -46,93 +35,61 @@ const isRegistrationClosed =
       <DmsOAuthButtons :note="$t('saas.oauth_registration.entry_note')" />
 
       <form class="flex flex-col gap-4" @submit.prevent="submit">
-        <URadioGroup
-          v-model="form.customerType"
-          :items="
-            customerTypeItems.map((item) => ({
-              value: item.value,
-              label: $t(item.label),
-            }))
-          "
-        />
+        <UFormField :label="$t('saas.register.field.full_name')">
+          <UInput
+            v-model="form.name"
+            autocomplete="name"
+            class="w-full"
+            required
+          />
+        </UFormField>
 
         <UFormField :label="$t('saas.register.field.email')">
-          <UInput v-model="form.email" type="email" class="w-full" required />
+          <UInput
+            v-model="form.email"
+            type="email"
+            autocomplete="email"
+            class="w-full"
+            required
+          />
         </UFormField>
 
         <UFormField :label="$t('saas.register.field.password')">
           <UInput
             v-model="form.password"
             type="password"
+            autocomplete="new-password"
+            :color="color"
+            aria-describedby="password-strength"
             class="w-full"
             required
           />
         </UFormField>
 
-        <UFormField :label="$t('saas.register.field.full_name')">
-          <UInput v-model="form.name" class="w-full" required />
-        </UFormField>
-
-        <UFormField :label="$t('saas.register.field.workspace_name')">
-          <UInput v-model="form.workspaceName" class="w-full" required />
-        </UFormField>
-
-        <template v-if="form.customerType === 'business'">
-          <UFormField :label="$t('saas.register.field.company_name')">
-            <UInput v-model="form.companyName" class="w-full" required />
-          </UFormField>
-          <UFormField :label="$t('saas.register.field.vat_number')">
-            <UInput v-model="form.vatNumber" class="w-full" />
-          </UFormField>
-        </template>
+        <DmsPasswordStrength
+          :color="color"
+          :score="score"
+          :strength="strength"
+        />
 
-        <h3 class="font-semibold">{{ $t("saas.register.billing_address") }}</h3>
+        <UCheckbox
+          v-if="canSkipPaymentMethod"
+          v-model="form.skipsPaymentMethod"
+          :label="$t('saas.register.skip_payment_method')"
+        />
 
-        <UFormField :label="$t('saas.register.field.country')">
-          <USelect
-            v-model="form.country"
-            :items="countryItems"
-            class="w-full"
-            required
+        <!-- v-show keeps the Stripe element mounted while the step is hidden. -->
+        <UFormField
+          v-show="isPaymentStepVisible"
+          :label="$t('saas.register.field.card')"
+          :hint="$t('saas.register.hint.card')"
+        >
+          <div
+            :id="paymentElementId"
+            class="border-default rounded-md border p-4"
           />
         </UFormField>
 
-        <UFormField :label="$t('saas.register.field.address_line1')">
-          <UInput v-model="form.addressLine1" class="w-full" />
-        </UFormField>
-
-        <div class="grid grid-cols-2 gap-4">
-          <UFormField :label="$t('saas.register.field.postal_code')">
-            <UInput v-model="form.postalCode" class="w-full" />
-          </UFormField>
-          <UFormField :label="$t('saas.register.field.city')">
-            <UInput v-model="form.city" class="w-full" />
-          </UFormField>
-        </div>
-
-        <h3 class="font-semibold">{{ $t("saas.register.choose_plan") }}</h3>
-
-        <div class="flex flex-col gap-2">
-          <button
-            v-for="plan in plans"
-            :key="plan._id"
-            type="button"
-            class="border-default rounded-md border p-3 text-left"
-            :class="form.selectedPlanId === plan._id ? 'border-primary' : ''"
-            @click="form.selectedPlanId = plan._id"
-          >
-            <div class="flex items-baseline justify-between gap-2">
-              <span class="font-medium">{{ plan.name }}</span>
-              <span class="tabular-nums">{{ formatPlanPrice(plan) }}</span>
-            </div>
-            <p class="text-muted text-sm">{{ plan.description }}</p>
-          </button>
-        </div>
-
-        <UFormField :label="$t('saas.register.field.card')">
-          <div :id="paymentElementId" class="border-default rounded-md border p-4" />
-        </UFormField>
-
         <UCheckbox v-model="form.hasAcceptedLegal" required>
           <template #label>
             <i18n-t keypath="saas.register.legal_acceptance" tag="span">

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

@@ -30,6 +30,8 @@ const breakdown = computed(() =>
   }),
 );
 
+const platformSupport = computed(() => quota.value?.platformSupport ?? []);
+
 const limitMessage = computed(() =>
   quota.value?.isTenantOwner
     ? t(`${KEY_PREFIX}.limit_reached_owner`)
@@ -74,5 +76,31 @@ onMounted(refresh);
         {{ $t(`${KEY_PREFIX}.upgrade`) }}
       </UButton>
     </div>
+    <div
+      v-if="platformSupport.length > 0"
+      class="border-default mt-4 flex flex-col gap-2 border-t pt-4"
+    >
+      <div class="flex flex-col gap-1">
+        <h4 class="text-sm font-semibold">
+          {{ $t(`${KEY_PREFIX}.platform_support.title`) }}
+        </h4>
+        <p class="text-muted text-sm">
+          {{ $t(`${KEY_PREFIX}.platform_support.description`) }}
+        </p>
+      </div>
+      <ul class="flex flex-col gap-2">
+        <li
+          v-for="member in platformSupport"
+          :key="member.userId"
+          class="flex flex-wrap items-center gap-2 text-sm"
+        >
+          <span class="font-medium">{{ member.name }}</span>
+          <span class="text-muted">{{ member.email }}</span>
+          <UBadge color="info" variant="subtle" icon="i-ph-lifebuoy">
+            {{ $t(`${KEY_PREFIX}.platform_support.badge`) }}
+          </UBadge>
+        </li>
+      </ul>
+    </div>
   </UCard>
 </template>

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

@@ -1,79 +1,43 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
 
-interface BillingAddress {
-  line1: string | null;
-  line2: string | null;
-  postalCode: string | null;
-  city: string | null;
-  state: string | null;
-  country: string | null;
-}
-
-type VatVerificationStatus = "pending" | "verified" | "unverified";
-
-interface BillingInfoResponse {
-  customerType: "individual" | "business" | null;
-  companyName: string | null;
-  vatNumber: string | null;
-  vatVerificationStatus: VatVerificationStatus | null;
-  billingEmail: string | null;
-  address: BillingAddress | null;
-}
-
-const VAT_BADGE_COLORS: Record<VatVerificationStatus, "success" | "warning"> = {
-  verified: "success",
-  pending: "warning",
-  unverified: "warning",
-};
-
-const BILLING_INFO_ENDPOINT = "/api/saas/tenant/billing-info";
-
-const { $authFetch } = useAuthFetch();
-const nuxtApp = useDmsApp();
 const toast = useToast();
+const { t } = useI18n();
 const { resolveApiError } = useApiErrorMessage();
-const { countryItems } = useBillingCountries();
+const identity = useBillingIdentity();
 const { data: billingStatus, load: loadBillingStatus } = useBillingStatus();
 
 /** Saving is owner-only server-side; a member gets the form read-only
  * instead of a save button that can only end in a 403 toast. */
 const isTenantOwner = computed(() => !!billingStatus.value?.isTenantOwner);
 
-const customerType = ref<"individual" | "business" | null>(null);
-const companyName = ref("");
-const vatNumber = ref("");
+const draft = ref<BillingIdentityDraft>(emptyBillingIdentityDraft());
+const savedMissingFields = ref<BillingIdentityField[]>([]);
 const vatVerificationStatus = ref<VatVerificationStatus | null>(null);
-const billingEmail = ref("");
-const country = ref("");
-const addressLine1 = ref("");
-const postalCode = ref("");
-const city = ref("");
+const hasTriedSubmit = ref(false);
+// Flagged once a submit was attempted, then re-checked as the user types so
+// a corrected field clears its error right away.
+const invalidFields = computed<BillingIdentityField[]>(() =>
+  hasTriedSubmit.value ? findMissingBillingFields(draft.value) : [],
+);
 const isLoading = ref(true);
 const loadFailed = ref(false);
 const isSaving = ref(false);
 
-const isBusiness = computed(() => customerType.value === "business");
+/** The badge reflects what is stored, not what is being typed. */
+const isIncomplete = computed(() => savedMissingFields.value.length > 0);
 
-const customerTypeLabel = computed(() => {
-  if (!customerType.value) return "—";
-  return nuxtApp.$i18n.t(`saas.register.customer_type.${customerType.value}`);
-});
+function apply(info: BillingInfoResponse): void {
+  draft.value = toBillingIdentityDraft(info);
+  savedMissingFields.value = info.missingFields;
+  vatVerificationStatus.value = info.vatVerificationStatus;
+}
 
 async function load(): Promise<void> {
   isLoading.value = true;
   loadFailed.value = false;
   try {
-    const info = await $authFetch<BillingInfoResponse>(BILLING_INFO_ENDPOINT);
-    customerType.value = info.customerType;
-    companyName.value = info.companyName ?? "";
-    vatNumber.value = info.vatNumber ?? "";
-    vatVerificationStatus.value = info.vatVerificationStatus;
-    billingEmail.value = info.billingEmail ?? "";
-    country.value = info.address?.country ?? "";
-    addressLine1.value = info.address?.line1 ?? "";
-    postalCode.value = info.address?.postalCode ?? "";
-    city.value = info.address?.city ?? "";
+    apply(await identity.load());
   } catch {
     loadFailed.value = true;
   } finally {
@@ -82,29 +46,20 @@ async function load(): Promise<void> {
 }
 
 async function save(): Promise<void> {
+  hasTriedSubmit.value = true;
+  if (invalidFields.value.length > 0) {
+    toast.add({
+      title: t("saas.workspace.billing.identity.incomplete_toast"),
+      color: "error",
+      icon: "i-ph-warning-circle",
+    });
+    return;
+  }
   isSaving.value = true;
   try {
-    const updated = await $authFetch<BillingInfoResponse>(
-      BILLING_INFO_ENDPOINT,
-      {
-        method: "PUT",
-        body: {
-          companyName: isBusiness.value ? companyName.value : undefined,
-          vatNumber: isBusiness.value ? vatNumber.value : undefined,
-          billingEmail: billingEmail.value || null,
-          address: {
-            country: country.value || undefined,
-            line1: addressLine1.value || undefined,
-            postalCode: postalCode.value || undefined,
-            city: city.value || undefined,
-          },
-        },
-      },
-    );
-    customerType.value = updated.customerType;
-    vatVerificationStatus.value = updated.vatVerificationStatus;
+    apply(await identity.save(draft.value));
     toast.add({
-      title: nuxtApp.$i18n.t("saas.workspace.billing.info_saved"),
+      title: t("saas.workspace.billing.info_saved"),
       color: "success",
       icon: "i-ph-check-circle",
     });
@@ -128,13 +83,22 @@ onMounted(() => {
 <template>
   <UCard>
     <template #header>
-      <div>
-        <h3 class="font-semibold">
-          {{ $t("saas.workspace.billing.info_title") }}
-        </h3>
-        <p class="text-muted mt-1 text-sm">
-          {{ $t("saas.workspace.billing.info_description") }}
-        </p>
+      <div class="flex flex-wrap items-start justify-between gap-2">
+        <div>
+          <h3 class="font-semibold">
+            {{ $t("saas.workspace.billing.info_title") }}
+          </h3>
+          <p class="text-muted mt-1 text-sm">
+            {{ $t("saas.workspace.billing.info_description") }}
+          </p>
+        </div>
+        <UBadge
+          v-if="!isLoading && !loadFailed && isIncomplete"
+          color="warning"
+          variant="subtle"
+        >
+          {{ $t("saas.workspace.billing.identity.to_complete") }}
+        </UBadge>
       </div>
     </template>
 
@@ -145,53 +109,13 @@ onMounted(() => {
 
     <DmsSaasLoadFailure v-else-if="loadFailed" @retry="load" />
 
-    <form v-else class="flex flex-col gap-4" @submit.prevent="save">
-      <UFormField :label="$t('saas.register.customer_type.label')">
-        <UBadge color="neutral" variant="subtle">
-          {{ customerTypeLabel }}
-        </UBadge>
-      </UFormField>
-
-      <template v-if="isBusiness">
-        <UFormField :label="$t('saas.register.field.company_name')">
-          <UInput v-model="companyName" class="w-full" />
-        </UFormField>
-        <UFormField :label="$t('saas.register.field.vat_number')">
-          <div class="flex flex-wrap items-center gap-2">
-            <UInput v-model="vatNumber" class="min-w-40 grow" />
-            <UBadge
-              v-if="vatVerificationStatus"
-              :color="VAT_BADGE_COLORS[vatVerificationStatus]"
-              variant="subtle"
-            >
-              {{ $t(`saas.workspace.billing.vat.${vatVerificationStatus}`) }}
-            </UBadge>
-          </div>
-        </UFormField>
-      </template>
-
-      <h4 class="font-semibold">{{ $t("saas.register.billing_address") }}</h4>
-      <UFormField :label="$t('saas.register.field.country')">
-        <USelect v-model="country" :items="countryItems" class="w-full" />
-      </UFormField>
-      <UFormField :label="$t('saas.register.field.address_line1')">
-        <UInput v-model="addressLine1" class="w-full" />
-      </UFormField>
-      <div class="grid grid-cols-2 gap-4">
-        <UFormField :label="$t('saas.register.field.postal_code')">
-          <UInput v-model="postalCode" class="w-full" />
-        </UFormField>
-        <UFormField :label="$t('saas.register.field.city')">
-          <UInput v-model="city" class="w-full" />
-        </UFormField>
-      </div>
-
-      <UFormField
-        :label="$t('saas.workspace.billing.billing_email.label')"
-        :description="$t('saas.workspace.billing.billing_email.hint')"
-      >
-        <UInput v-model="billingEmail" type="email" class="w-full" />
-      </UFormField>
+    <form v-else class="flex flex-col gap-4" novalidate @submit.prevent="save">
+      <DmsSaasBillingIdentityFields
+        v-model="draft"
+        :invalid-fields="invalidFields"
+        :vat-verification-status="vatVerificationStatus"
+        :is-locked="!isTenantOwner"
+      />
 
       <div v-if="isTenantOwner" class="flex justify-end">
         <UButton

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>