@antelopejs/dms-saas 0.1.8 → 0.2.1

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>

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