@antelopejs/dms-saas 0.2.0 → 0.2.1

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

@@ -7,9 +7,12 @@ const props = defineProps<{
   currentPlanId: string | null;
   pendingPlanId: string | null;
   isRecovery?: boolean;
+  /** A paid plan chosen from a free one goes through the upgrade flow. */
+  isCurrentPaid?: boolean;
+  workspaceName?: string | null;
 }>();
 
-const emit = defineEmits<{ changed: [] }>();
+const emit = defineEmits<{ changed: []; upgrade: [plan: TenantPlanView] }>();
 
 const open = defineModel<boolean>("open", { default: false });
 
@@ -18,20 +21,40 @@ const toast = useToast();
 const { resolveApiError } = useApiErrorMessage();
 const { changePlan } = useTenantPlan();
 const { formatFeatureValue } = usePlanFeatureFormat();
+const { featureLabel, featureTooltip } = usePlanFeatureLabel();
 const { formatMajorUnits } = useMoneyFormat();
 const planIntervalLabel = usePlanIntervalLabel("saas.workspace.plan.interval");
 
 const showDetailRows = ref(false);
 const pendingPlanRequest = ref<string | null>(null);
 
-const visibleFeatures = computed(() =>
-  props.features.filter(
-    (feature) => showDetailRows.value || !feature.isDetailRow,
+/** A feature no compared plan sets would only render a row of dashes. */
+const comparedFeatures = computed(() =>
+  props.features.filter((feature) =>
+    props.plans.some(
+      (plan) => plan.featureValues[feature.featureId] !== undefined,
+    ),
   ),
 );
 
+interface FeatureRow {
+  feature: TenantPlanFeature;
+  label: string;
+  tooltip: string | null;
+}
+
+const visibleRows = computed<FeatureRow[]>(() =>
+  comparedFeatures.value
+    .filter((feature) => showDetailRows.value || !feature.isDetailRow)
+    .map((feature) => ({
+      feature,
+      label: featureLabel(feature),
+      tooltip: featureTooltip(feature),
+    })),
+);
+
 const hasDetailRows = computed(() =>
-  props.features.some((feature) => feature.isDetailRow),
+  comparedFeatures.value.some((feature) => feature.isDetailRow),
 );
 
 const currentPlan = computed(
@@ -46,7 +69,22 @@ function isCurrent(plan: TenantPlanView): boolean {
   return plan._id === props.currentPlanId;
 }
 
+/** The paid plans are the way forward from a free one or a recovery. */
+function isHighlighted(plan: TenantPlanView): boolean {
+  const isWayForward = props.isRecovery || !props.isCurrentPaid;
+  return isWayForward && plan.checkoutAvailable;
+}
+
+function needsUpgradeFlow(plan: TenantPlanView): boolean {
+  return !props.isCurrentPaid && plan.price > 0;
+}
+
 async function select(plan: TenantPlanView): Promise<void> {
+  if (needsUpgradeFlow(plan)) {
+    open.value = false;
+    emit("upgrade", plan);
+    return;
+  }
   pendingPlanRequest.value = plan._id;
   try {
     const result = await changePlan(plan._id);
@@ -82,6 +120,7 @@ async function select(plan: TenantPlanView): Promise<void> {
     :description="
       currentPlan
         ? $t('saas.workspace.plan.comparison.subtitle', {
+            workspace: workspaceName ?? '',
             plan: currentPlan.name,
           })
         : $t('saas.workspace.plan.comparison.subtitle_no_plan')
@@ -91,7 +130,7 @@ async function select(plan: TenantPlanView): Promise<void> {
     <template #body>
       <div class="flex flex-col gap-4">
         <div class="overflow-x-auto">
-          <table class="w-full min-w-3xl border-collapse text-sm">
+          <table class="min-w-3xl w-full border-collapse text-sm">
             <thead>
               <tr>
                 <th class="w-56" />
@@ -100,11 +139,11 @@ async function select(plan: TenantPlanView): Promise<void> {
                   :key="plan._id"
                   scope="col"
                   class="border-default border-b p-3 text-center align-top"
-                  :class="isCurrent(plan) ? 'bg-elevated/50' : ''"
+                  :class="isCurrent(plan) ? 'bg-primary/10 rounded-t-lg' : ''"
                 >
                   <div class="flex flex-col items-center gap-2">
                     <span class="font-semibold">{{ plan.name }}</span>
-                    <span class="text-muted tabular-nums">
+                    <span class="text-primary font-semibold tabular-nums">
                       {{ priceLabel(plan) }}
                       <span class="text-xs">
                         /{{ planIntervalLabel(plan.interval) }}
@@ -127,16 +166,8 @@ async function select(plan: TenantPlanView): Promise<void> {
                     <UButton
                       v-else
                       size="xs"
-                      :color="
-                        isRecovery && plan.checkoutAvailable
-                          ? 'primary'
-                          : 'neutral'
-                      "
-                      :variant="
-                        isRecovery && plan.checkoutAvailable
-                          ? 'solid'
-                          : 'subtle'
-                      "
+                      :color="isHighlighted(plan) ? 'primary' : 'neutral'"
+                      :variant="isHighlighted(plan) ? 'solid' : 'subtle'"
                       :loading="pendingPlanRequest === plan._id"
                       :disabled="
                         pendingPlanRequest !== null ||
@@ -152,20 +183,20 @@ async function select(plan: TenantPlanView): Promise<void> {
             </thead>
             <tbody>
               <tr
-                v-for="feature in visibleFeatures"
+                v-for="{ feature, label, tooltip } in visibleRows"
                 :key="feature.featureId"
                 class="border-default border-b last:border-0"
               >
                 <th scope="row" class="p-3 text-left font-normal">
                   <span class="inline-flex items-center gap-1">
-                    {{ feature.displayName }}
-                    <UTooltip v-if="feature.tooltip" :text="feature.tooltip">
+                    {{ label }}
+                    <UTooltip v-if="tooltip" :text="tooltip">
                       <UButton
                         variant="link"
                         color="neutral"
                         size="xs"
                         icon="i-ph-info"
-                        :aria-label="feature.tooltip"
+                        :aria-label="tooltip"
                         class="text-muted p-0"
                       />
                     </UTooltip>
@@ -175,12 +206,13 @@ async function select(plan: TenantPlanView): Promise<void> {
                   v-for="plan in plans"
                   :key="plan._id"
                   class="p-3 text-center tabular-nums"
-                  :class="isCurrent(plan) ? 'bg-elevated/50' : ''"
+                  :class="isCurrent(plan) ? 'bg-primary/10' : ''"
                 >
                   {{
                     formatFeatureValue(
                       feature,
                       plan.featureValues[feature.featureId],
+                      plan.currency,
                     )
                   }}
                 </td>
@@ -203,10 +235,14 @@ async function select(plan: TenantPlanView): Promise<void> {
             }}
           </UButton>
         </div>
+      </div>
+    </template>
 
-        <p class="text-muted text-xs">
-          {{ $t("saas.workspace.plan.comparison.footer") }}
-        </p>
+    <template #footer>
+      <div class="flex w-full justify-end">
+        <UButton color="neutral" variant="subtle" @click="open = false">
+          {{ $t("saas.workspace.plan.comparison.close") }}
+        </UButton>
       </div>
     </template>
   </UModal>

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

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+
+const props = defineProps<{
+  plan: TenantPlanView | null;
+}>();
+
+const emit = defineEmits<{ changed: [] }>();
+
+const open = defineModel<boolean>("open", { default: false });
+
+const KEY_PREFIX = "saas.workspace.plan.upgrade";
+
+const toast = useToast();
+const { t } = useI18n();
+const { resolveApiError } = useApiErrorMessage();
+const identity = useBillingIdentity();
+const { changePlan } = useTenantPlan();
+const { formatMajorUnits } = useMoneyFormat();
+const planIntervalLabel = usePlanIntervalLabel("saas.workspace.plan.interval");
+
+const draft = ref<BillingIdentityDraft>(emptyBillingIdentityDraft());
+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(false);
+const loadFailed = ref(false);
+const isSubmitting = ref(false);
+
+const priceLabel = computed(() =>
+  props.plan ? formatMajorUnits(props.plan.price, props.plan.currency) : "",
+);
+const intervalLabel = computed(() =>
+  props.plan ? planIntervalLabel(props.plan.interval) : "",
+);
+
+async function loadIdentity(): Promise<void> {
+  isLoading.value = true;
+  loadFailed.value = false;
+  hasTriedSubmit.value = false;
+  try {
+    draft.value = toBillingIdentityDraft(await identity.load());
+  } catch {
+    loadFailed.value = true;
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+watch(open, (isOpen) => {
+  if (isOpen) void loadIdentity();
+});
+
+function notifyError(title: string): void {
+  toast.add({ title, color: "error", icon: "i-ph-warning-circle" });
+}
+
+/**
+ * The identity is saved first: the plan change checks the plan's audience
+ * against the stored customer type, and Stripe Checkout bills the customer
+ * this identity describes. The card itself is collected by Stripe.
+ */
+async function confirm(): Promise<void> {
+  const plan = props.plan;
+  if (!plan) return;
+  hasTriedSubmit.value = true;
+  if (invalidFields.value.length > 0) {
+    notifyError(t("saas.workspace.billing.identity.incomplete_toast"));
+    return;
+  }
+  isSubmitting.value = true;
+  try {
+    await identity.save(draft.value);
+    const result = await changePlan(plan._id);
+    if (result.checkoutUrl && typeof window !== "undefined") {
+      window.location.href = result.checkoutUrl;
+      return;
+    }
+    toast.add({
+      title: t("saas.workspace.plan.change_applied"),
+      color: "success",
+      icon: "i-ph-check-circle",
+    });
+    open.value = false;
+    emit("changed");
+  } catch (error) {
+    notifyError(resolveApiError(error, "saas.workspace.plan.change_error"));
+  } finally {
+    isSubmitting.value = false;
+  }
+}
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    :title="$t(`${KEY_PREFIX}.title`, { plan: plan?.name ?? '' })"
+    :description="$t(`${KEY_PREFIX}.description`)"
+    :ui="{ content: 'max-w-2xl' }"
+  >
+    <template #body>
+      <div v-if="isLoading" class="flex flex-col gap-3">
+        <USkeleton class="h-20 w-full" />
+        <USkeleton class="h-10 w-full" />
+        <USkeleton class="h-10 w-full" />
+      </div>
+
+      <DmsSaasLoadFailure v-else-if="loadFailed" @retry="loadIdentity" />
+
+      <form
+        v-else-if="plan"
+        id="saas-plan-upgrade-form"
+        class="flex flex-col gap-6"
+        novalidate
+        @submit.prevent="confirm"
+      >
+        <div class="border-default rounded-lg border p-4 text-sm">
+          <div class="flex justify-between gap-4">
+            <span>
+              {{ $t(`${KEY_PREFIX}.subscription`, { plan: plan.name }) }}
+            </span>
+            <span class="tabular-nums">
+              {{ priceLabel }}/{{ intervalLabel }}
+            </span>
+          </div>
+          <div
+            class="border-default mt-3 flex justify-between gap-4 border-t pt-3 font-semibold"
+          >
+            <span>{{ $t(`${KEY_PREFIX}.due_today`) }}</span>
+            <span class="text-primary tabular-nums">
+              {{ $t(`${KEY_PREFIX}.excl_tax`, { amount: priceLabel }) }}
+            </span>
+          </div>
+          <p class="text-muted mt-2 text-xs">
+            {{ $t(`${KEY_PREFIX}.tax_note`) }}
+          </p>
+        </div>
+
+        <section class="flex flex-col gap-3">
+          <h4 class="flex items-center gap-2 font-semibold">
+            <UIcon name="i-ph-identification-card" class="size-5" />
+            {{ $t("saas.workspace.billing.info_title") }}
+          </h4>
+          <DmsSaasBillingIdentityFields
+            v-model="draft"
+            :invalid-fields="invalidFields"
+          />
+        </section>
+
+        <section class="flex flex-col gap-2">
+          <h4 class="flex items-center gap-2 font-semibold">
+            <UIcon name="i-ph-credit-card" class="size-5" />
+            {{ $t(`${KEY_PREFIX}.card_title`) }}
+          </h4>
+          <p class="text-muted text-sm">{{ $t(`${KEY_PREFIX}.card_note`) }}</p>
+        </section>
+      </form>
+    </template>
+
+    <template #footer>
+      <div class="flex w-full justify-end gap-2">
+        <UButton color="neutral" variant="subtle" @click="open = false">
+          {{ $t("common.cancel") }}
+        </UButton>
+        <UButton
+          type="submit"
+          form="saas-plan-upgrade-form"
+          color="primary"
+          icon="i-ph-lock-simple"
+          :loading="isSubmitting"
+          :disabled="isLoading || loadFailed"
+        >
+          {{ $t(`${KEY_PREFIX}.confirm`) }}
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>

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

@@ -30,6 +30,10 @@ const props = defineProps<{
   routeParams?: Record<string, string>;
 }>();
 
+// The card and its delete modal are sibling roots, so the renderer's extra
+// attributes (page and component ids) have no single element to land on.
+defineOptions({ inheritAttrs: false });
+
 const { $authFetch } = useAuthFetch();
 const { t } = useI18n();
 const toast = useToast();

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

@@ -67,7 +67,16 @@ async function confirmRefund(): Promise<void> {
   }
 }
 
-onMounted(loadEligibility);
+/** The eligibility read is owner-only and, like the refund itself, closed
+ * while the access gate blocks the workspace: the card has nothing to offer
+ * then, so it skips the request instead of collecting a 403. */
+async function loadIfOffered(): Promise<void> {
+  const access = await loadWorkspaceAccess();
+  if (access && (access.blocked || !access.isTenantOwner)) return;
+  await loadEligibility();
+}
+
+onMounted(loadIfOffered);
 </script>
 
 <template>

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>