@antelopejs/dms-saas 0.1.8 → 0.2.1

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

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+type VatBadgeColor = "success" | "warning";
+
+const props = defineProps<{
+  /** Fields flagged after a submit attempt. */
+  invalidFields?: BillingIdentityField[];
+  vatVerificationStatus?: VatVerificationStatus | null;
+  isLocked?: boolean;
+}>();
+
+const draft = defineModel<BillingIdentityDraft>({ required: true });
+
+const CUSTOMER_TYPES: CustomerType[] = ["business", "individual"];
+const VAT_BADGE_COLORS: Record<VatVerificationStatus, VatBadgeColor> = {
+  verified: "success",
+  pending: "warning",
+  unverified: "warning",
+};
+const FIELD_KEY_PREFIX = "saas.workspace.billing.identity";
+
+const { countryItems } = useBillingCountries();
+const { t } = useI18n();
+
+const isBusiness = computed(() => draft.value.customerType === "business");
+
+function fieldError(field: BillingIdentityField): string | undefined {
+  return props.invalidFields?.includes(field)
+    ? t(`${FIELD_KEY_PREFIX}.errors.${field}`)
+    : undefined;
+}
+
+function selectCustomerType(customerType: CustomerType): void {
+  if (props.isLocked) return;
+  draft.value = { ...draft.value, customerType };
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <UFormField
+      :label="$t('saas.register.customer_type.label')"
+      :error="fieldError('customerType')"
+    >
+      <div
+        role="radiogroup"
+        :aria-label="$t('saas.register.customer_type.label')"
+        class="grid gap-2 sm:grid-cols-2"
+      >
+        <button
+          v-for="customerType in CUSTOMER_TYPES"
+          :key="customerType"
+          type="button"
+          role="radio"
+          :aria-checked="draft.customerType === customerType"
+          :disabled="isLocked"
+          class="rounded-lg border p-3 text-left transition-colors disabled:cursor-default"
+          :class="
+            draft.customerType === customerType
+              ? 'border-primary bg-primary/5'
+              : 'border-default hover:bg-elevated/50'
+          "
+          @click="selectCustomerType(customerType)"
+        >
+          <span class="block text-sm font-medium">
+            {{ $t(`saas.register.customer_type.${customerType}`) }}
+          </span>
+          <span class="text-muted block text-xs">
+            {{ $t(`${FIELD_KEY_PREFIX}.customer_type_hint.${customerType}`) }}
+          </span>
+        </button>
+      </div>
+    </UFormField>
+
+    <template v-if="isBusiness">
+      <UFormField
+        :label="$t('saas.register.field.company_name')"
+        :error="fieldError('companyName')"
+        required
+      >
+        <UInput
+          v-model="draft.companyName"
+          autocomplete="organization"
+          :disabled="isLocked"
+          class="w-full"
+        />
+      </UFormField>
+      <UFormField
+        :label="$t('saas.register.field.vat_number')"
+        :hint="$t(`${FIELD_KEY_PREFIX}.optional`)"
+      >
+        <div class="flex flex-wrap items-center gap-2">
+          <UInput
+            v-model="draft.vatNumber"
+            :disabled="isLocked"
+            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')"
+      :error="fieldError('country')"
+      required
+    >
+      <USelectMenu
+        v-model="draft.country"
+        :items="countryItems"
+        value-key="value"
+        :disabled="isLocked"
+        :placeholder="$t(`${FIELD_KEY_PREFIX}.country_placeholder`)"
+        class="w-full"
+      />
+    </UFormField>
+    <UFormField
+      :label="$t('saas.register.field.address_line1')"
+      :error="fieldError('line1')"
+      required
+    >
+      <UInput
+        v-model="draft.line1"
+        autocomplete="address-line1"
+        :disabled="isLocked"
+        class="w-full"
+      />
+    </UFormField>
+    <div class="grid gap-4 sm:grid-cols-2">
+      <UFormField
+        :label="$t('saas.register.field.postal_code')"
+        :error="fieldError('postalCode')"
+        required
+      >
+        <UInput
+          v-model="draft.postalCode"
+          autocomplete="postal-code"
+          :disabled="isLocked"
+          class="w-full"
+        />
+      </UFormField>
+      <UFormField
+        :label="$t('saas.register.field.city')"
+        :error="fieldError('city')"
+        required
+      >
+        <UInput
+          v-model="draft.city"
+          autocomplete="address-level2"
+          :disabled="isLocked"
+          class="w-full"
+        />
+      </UFormField>
+    </div>
+
+    <UFormField
+      :label="$t('saas.workspace.billing.billing_email.label')"
+      :description="$t('saas.workspace.billing.billing_email.hint')"
+      :error="fieldError('billingEmail')"
+      required
+    >
+      <UInput
+        v-model="draft.billingEmail"
+        type="email"
+        autocomplete="email"
+        :disabled="isLocked"
+        class="w-full"
+      />
+    </UFormField>
+  </div>
+</template>

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

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { computed, onMounted } from "vue";
+
+const KEY_PREFIX = "saas.workspace.billing.past_due.banner";
+const BILLING_PATH = "/settings/workspace/billing";
+const DEADLINE_FORMAT: Intl.DateTimeFormatOptions = {
+  day: "numeric",
+  month: "long",
+};
+
+// Rendered as the content of the DMS layout banner registered server-side
+// (see registerPastDueBanner), which already decided it shows and draws the
+// alert chrome, icon and role around it.
+const { data, load } = useBillingStatus();
+const { formatMinorUnits } = useMoneyFormat();
+const { t, locale } = useI18n();
+
+// Owner-only in the API payload: a member gets the generic line and no
+// settle button, the owner pays.
+const invoice = computed(() => data.value?.unpaidInvoice ?? null);
+const action = computed(() => resolvePastDueBannerAction(data.value));
+
+// Without the invoice details the owner still has to be told where to act,
+// while a member is only told who does.
+const genericMessage = computed(() =>
+  data.value?.isTenantOwner
+    ? t(`${KEY_PREFIX}.generic_owner`)
+    : t(`${KEY_PREFIX}.generic`),
+);
+
+const message = computed(() => {
+  if (!invoice.value) return genericMessage.value;
+  const amount = formatMinorUnits(invoice.value.amount, invoice.value.currency);
+  const subject = { invoice: invoice.value.number ?? amount, amount };
+  const suspendOn = formatDate(
+    invoice.value.suspendAt,
+    locale.value,
+    DEADLINE_FORMAT,
+  );
+  return suspendOn
+    ? t(`${KEY_PREFIX}.with_deadline`, { ...subject, date: suspendOn })
+    : t(`${KEY_PREFIX}.summary`, subject);
+});
+
+function settle(): void {
+  const url = invoice.value?.hostedInvoiceUrl;
+  if (!url || typeof window === "undefined") return;
+  window.open(url, "_blank", "noopener");
+}
+
+onMounted(load);
+</script>
+
+<template>
+  <div
+    data-saas-past-due-banner
+    class="flex flex-wrap items-center gap-x-3 gap-y-2"
+  >
+    <p class="min-w-0 grow">{{ message }}</p>
+    <UButton
+      v-if="action === 'settle'"
+      size="sm"
+      color="error"
+      variant="outline"
+      trailing-icon="i-ph-arrow-square-out"
+      @click="settle"
+    >
+      {{ $t(`${KEY_PREFIX}.settle`) }}
+    </UButton>
+    <UButton
+      v-else-if="action === 'open_billing'"
+      size="sm"
+      color="error"
+      variant="outline"
+      trailing-icon="i-ph-arrow-right"
+      :to="BILLING_PATH"
+    >
+      {{ $t(`${KEY_PREFIX}.open_billing`) }}
+    </UButton>
+  </div>
+</template>

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>