@antelopejs/dms-saas 0.2.0 → 0.3.0

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

@@ -1,31 +1,51 @@
 <script setup lang="ts">
 import { computed, onMounted } from "vue";
 
+type BadgeColor = "success" | "warning" | "neutral";
+
+interface PaymentMethodBadge {
+  color: BadgeColor;
+  key: string;
+}
+
 const PAST_DUE_STATUS = "past_due";
+const FREE_PLAN_PRICE = 0;
 const EXPIRY_YEAR_MODULO = 100;
 const EXPIRY_PAD_LENGTH = 2;
+const KEY_PREFIX = "saas.workspace.billing.payment_method";
 
 const { data, error, load, refresh } = useBillingStatus();
+const { data: plan, load: loadPlan } = useTenantPlan();
+const { open: openPlanComparison } = usePlanComparison();
 
 const card = computed(() => data.value?.paymentMethod ?? null);
 const needsUpdate = computed(() => data.value?.status === PAST_DUE_STATUS);
-// Card details are owner-only in the API payload; showing the block to a
-// member would falsely read as "no card on file".
-const isVisible = computed(
-  () => !!data.value?.hasStripeCustomer && !!data.value?.isTenantOwner,
+const isFreePlan = computed(
+  () => (plan.value?.current?.price ?? FREE_PLAN_PRICE) <= FREE_PLAN_PRICE,
+);
+// Card details are owner-only in the API payload: a member is told who
+// manages the card rather than shown a misleading "no card".
+const isTenantOwner = computed(() => !!data.value?.isTenantOwner);
+const hasStripeCustomer = computed(() => !!data.value?.hasStripeCustomer);
+
+// "You'll be asked for a card on upgrade" is only true without a Stripe
+// customer: once one exists, a missing card is added through the portal.
+const noCardKey = computed(() =>
+  hasStripeCustomer.value ? "none_with_portal" : "none",
 );
 
-const headerBadge = computed(() => {
-  if (!card.value) return { color: "warning" as const, key: "missing" };
-  if (needsUpdate.value) return { color: "warning" as const, key: "needs_update" };
-  return { color: "success" as const, key: "active" };
+const headerBadge = computed<PaymentMethodBadge>(() => {
+  if (!card.value) return { color: "warning", key: "missing" };
+  if (needsUpdate.value) return { color: "warning", key: "needs_update" };
+  if (isFreePlan.value) return { color: "success", key: "verified" };
+  return { color: "success", key: "active" };
 });
 
-const cardBadge = computed(() =>
-  needsUpdate.value
-    ? { color: "warning" as const, key: "declined" }
-    : { color: "neutral" as const, key: "default" },
-);
+const cardBadge = computed<PaymentMethodBadge>(() => {
+  if (needsUpdate.value) return { color: "warning", key: "declined" };
+  if (isFreePlan.value) return { color: "success", key: "never_charged" };
+  return { color: "neutral", key: "default" };
+});
 
 const expiryLabel = computed(() => {
   if (!card.value) return "";
@@ -37,48 +57,84 @@ const expiryLabel = computed(() => {
   return `${month}/${year}`;
 });
 
-onMounted(load);
+onMounted(() => {
+  void loadPlan();
+  return load();
+});
 </script>
 
 <template>
   <DmsSaasLoadFailure v-if="error && !data" @retry="refresh" />
-  <UCard v-else-if="isVisible">
+  <UCard v-else-if="data">
     <template #header>
-      <div class="flex flex-wrap items-center gap-2">
-        <h3 class="font-semibold">
-          {{ $t("saas.workspace.billing.payment_method.title") }}
-        </h3>
-        <UBadge :color="headerBadge.color" variant="subtle">
-          {{ $t(`saas.workspace.billing.payment_method.${headerBadge.key}`) }}
+      <div class="flex flex-wrap items-center justify-between gap-2">
+        <h3 class="font-semibold">{{ $t(`${KEY_PREFIX}.title`) }}</h3>
+        <UBadge
+          v-if="isTenantOwner"
+          :color="headerBadge.color"
+          variant="subtle"
+        >
+          {{ $t(`${KEY_PREFIX}.${headerBadge.key}`) }}
         </UBadge>
       </div>
     </template>
 
-    <div class="flex flex-col gap-4">
+    <p v-if="!isTenantOwner" class="text-muted text-sm">
+      {{ $t(`${KEY_PREFIX}.owner_only`) }}
+    </p>
+
+    <div v-else class="flex flex-col gap-4">
+      <template v-if="card">
+        <div
+          class="border-default flex flex-wrap items-center gap-3 rounded-lg border p-3"
+        >
+          <UIcon name="i-ph-credit-card" class="text-muted size-5" />
+          <span class="font-medium capitalize">
+            {{ card.brand }} •••• {{ card.last4 }}
+          </span>
+          <span class="text-muted text-sm">
+            {{ $t(`${KEY_PREFIX}.expires`, { date: expiryLabel }) }}
+          </span>
+          <span class="grow" />
+          <UBadge :color="cardBadge.color" variant="subtle">
+            {{ $t(`${KEY_PREFIX}.${cardBadge.key}`) }}
+          </UBadge>
+        </div>
+        <p v-if="needsUpdate" class="text-muted text-sm">
+          {{ $t(`${KEY_PREFIX}.update_note`) }}
+        </p>
+        <p v-else-if="isFreePlan" class="text-muted text-sm">
+          {{ $t(`${KEY_PREFIX}.free_note`) }}
+        </p>
+      </template>
+
       <div
-        v-if="card"
-        class="border-default flex flex-wrap items-center gap-3 rounded-lg border p-3"
+        v-else
+        class="border-default flex flex-wrap items-center gap-3 rounded-lg border border-dashed p-3"
       >
         <UIcon name="i-ph-credit-card" class="text-muted size-5" />
-        <span class="font-medium capitalize">
-          {{ card.brand }} •••• {{ card.last4 }}
-        </span>
-        <span class="text-muted text-sm">
-          {{ $t("saas.workspace.billing.payment_method.expires", { date: expiryLabel }) }}
+        <span class="text-muted grow text-sm">
+          {{ $t(`${KEY_PREFIX}.${noCardKey}`) }}
         </span>
-        <span class="grow" />
-        <UBadge :color="cardBadge.color" variant="subtle">
-          {{ $t(`saas.workspace.billing.payment_method.${cardBadge.key}`) }}
-        </UBadge>
+        <UButton
+          v-if="!hasStripeCustomer"
+          size="sm"
+          color="primary"
+          variant="subtle"
+          icon="i-ph-plus"
+          @click="openPlanComparison"
+        >
+          {{ $t(`${KEY_PREFIX}.add`) }}
+        </UButton>
       </div>
-      <p v-else class="text-muted text-sm">
-        {{ $t("saas.workspace.billing.payment_method.none") }}
-      </p>
 
-      <div class="border-default flex flex-wrap items-center gap-3 border-t pt-4">
+      <div
+        v-if="hasStripeCustomer"
+        class="border-default flex flex-wrap items-center gap-3 border-t pt-4"
+      >
         <DmsSaasCustomerPortalButton />
         <p class="text-muted grow text-xs">
-          {{ $t("saas.workspace.billing.payment_method.portal_hint") }}
+          {{ $t(`${KEY_PREFIX}.portal_hint`) }}
         </p>
       </div>
     </div>

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>