@antelopejs/dms-saas 0.0.1

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

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+
+interface InvoiceRowData {
+  _id?: string;
+  number?: string | null;
+  amount?: number;
+}
+
+const CREDIT_NOTE_ISSUE_ENDPOINT = "/api/saas/credit-notes/issue";
+const CENTS_PER_UNIT = 100;
+const CREDIT_MODE_BALANCE = "credit_to_balance";
+const CREDIT_MODE_REFUND = "refund";
+
+const props = defineProps<{
+  rowData?: InvoiceRowData;
+  onSuccessCallback?: () => void;
+}>();
+
+const nuxtApp = useDmsApp();
+const toast = useToast();
+const { resolveApiError } = useApiErrorMessage();
+const { $authFetch } = useAuthFetch();
+
+const invoiceId = computed(() => props.rowData?._id ?? "");
+const invoiceNumber = computed(() => props.rowData?.number ?? "—");
+const maxAmount = computed(() => props.rowData?.amount ?? 0);
+
+const amount = ref<number>(maxAmount.value);
+const mode = ref<"credit_to_balance" | "refund">(CREDIT_MODE_BALANCE);
+const reason = ref("");
+const isSubmitting = ref(false);
+
+// Keep the amount in sync if the component instance is reused for another
+// invoice row without remounting, otherwise it keeps the previous invoice's
+// amount and the submit button silently disables.
+watch(maxAmount, (value) => {
+  amount.value = value;
+});
+
+const modeItems = computed(() => [
+  {
+    value: CREDIT_MODE_BALANCE,
+    label: nuxtApp.$i18n.t("saas.credit_notes.modal.mode.credit_to_balance"),
+  },
+  {
+    value: CREDIT_MODE_REFUND,
+    label: nuxtApp.$i18n.t("saas.credit_notes.modal.mode.refund"),
+  },
+]);
+
+const isInvalid = computed(
+  () =>
+    !invoiceId.value ||
+    amount.value <= 0 ||
+    amount.value > maxAmount.value ||
+    reason.value.trim().length === 0,
+);
+
+async function submit(): Promise<void> {
+  if (isInvalid.value) return;
+  isSubmitting.value = true;
+  try {
+    await $authFetch(CREDIT_NOTE_ISSUE_ENDPOINT, {
+      method: "POST",
+      body: {
+        invoiceId: invoiceId.value,
+        amount: amount.value,
+        mode: mode.value,
+        reason: reason.value.trim(),
+      },
+    });
+    toast.add({
+      title: nuxtApp.$i18n.t("saas.credit_notes.modal.success"),
+      color: "success",
+      icon: "i-ph-check-circle",
+    });
+    props.onSuccessCallback?.();
+  } catch (error) {
+    toast.add({
+      title: resolveApiError(error, "saas.credit_notes.modal.error"),
+      color: "error",
+      icon: "i-ph-warning-circle",
+    });
+  } finally {
+    isSubmitting.value = false;
+  }
+}
+</script>
+
+<template>
+  <form class="flex flex-col gap-4" @submit.prevent="submit">
+    <p class="text-muted text-sm">
+      {{
+        $t("saas.credit_notes.modal.description", {
+          number: invoiceNumber,
+          max: (maxAmount / CENTS_PER_UNIT).toFixed(2),
+        })
+      }}
+    </p>
+    <UFormField :label="$t('saas.credit_notes.modal.amount')">
+      <UInput
+        v-model="amount"
+        type="number"
+        :min="1"
+        :max="maxAmount"
+        class="w-full"
+      />
+    </UFormField>
+    <UFormField :label="$t('saas.credit_notes.modal.mode_label')">
+      <URadioGroup v-model="mode" :items="modeItems" />
+    </UFormField>
+    <UFormField :label="$t('saas.credit_notes.modal.reason')">
+      <UInput v-model="reason" required class="w-full" />
+    </UFormField>
+    <div class="flex justify-end">
+      <UButton
+        type="submit"
+        color="primary"
+        icon="i-ph-receipt-x"
+        :disabled="isInvalid"
+        :loading="isSubmitting"
+      >
+        {{ $t("saas.credit_notes.modal.submit") }}
+      </UButton>
+    </div>
+  </form>
+</template>

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

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+
+interface DmsPublicRuntime {
+  baseURL: string;
+}
+
+interface LegalDocuments {
+  [field: string]: string;
+}
+
+interface LegalLayoutProps {
+  endpoint: string;
+  documentField: string;
+}
+
+const props = defineProps<LegalLayoutProps>();
+
+const config = useDmsRuntimeConfig();
+const dmsRuntime = config.public.dms as DmsPublicRuntime;
+const apiFetch = $fetch.create({ baseURL: dmsRuntime.baseURL });
+const data = ref<LegalDocuments>({});
+
+async function loadDocument(): Promise<void> {
+  try {
+    data.value = await apiFetch<LegalDocuments>(props.endpoint);
+  } catch {
+    data.value = {};
+  }
+}
+
+onMounted(loadDocument);
+
+const content = computed(() => data.value?.[props.documentField] ?? "");
+</script>
+
+<template>
+  <UContainer class="mx-auto max-w-4xl">
+    <UCard v-if="content">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div
+        class="prose prose-neutral dark:prose-invert max-w-none"
+        v-html="content"
+      />
+    </UCard>
+
+    <UEmpty
+      v-else
+      icon="i-ph-file-text"
+      :title="$t('saas.legal.no_content_title')"
+      :description="$t('saas.legal.no_content_message')"
+      class="min-h-96"
+    />
+
+    <div class="mt-8 flex items-center justify-center">
+      <UButton
+        to="/auth"
+        :label="$t('button.go_home')"
+        icon="i-lucide-arrow-right"
+      />
+    </div>
+  </UContainer>
+</template>

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+defineProps<{ title?: string }>();
+const emit = defineEmits<{ retry: [] }>();
+</script>
+
+<template>
+  <UAlert
+    color="error"
+    variant="subtle"
+    icon="i-ph-warning-circle"
+    :title="title ?? $t('saas.common.load_failed')"
+  >
+    <template #actions>
+      <UButton
+        color="error"
+        variant="soft"
+        size="xs"
+        icon="i-ph-arrow-clockwise"
+        @click="emit('retry')"
+      >
+        {{ $t("saas.common.retry") }}
+      </UButton>
+    </template>
+  </UAlert>
+</template>

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

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed, onMounted } from "vue";
+
+const SUSPENDED_STATUS = "suspended";
+const KEY_PREFIX = "saas.workspace.billing.past_due";
+const DEADLINE_FORMAT: Intl.DateTimeFormatOptions = {
+  day: "numeric",
+  month: "long",
+};
+
+const { data, error, load, refresh } = useBillingStatus();
+const { formatMinorUnits } = useMoneyFormat();
+const { t, locale } = useI18n();
+
+const invoice = computed(() => data.value?.unpaidInvoice ?? null);
+const isSuspended = computed(() => data.value?.status === SUSPENDED_STATUS);
+
+function formatDay(value: string | null | undefined): string | null {
+  return formatDate(value, locale.value, DEADLINE_FORMAT);
+}
+
+const amountLabel = computed(() =>
+  formatMinorUnits(invoice.value?.amount, invoice.value?.currency),
+);
+const invoiceLabel = computed(() => invoice.value?.number ?? amountLabel.value);
+
+const heading = computed(() =>
+  isSuspended.value
+    ? { title: `${KEY_PREFIX}.suspended_title`, badge: `${KEY_PREFIX}.suspended_badge` }
+    : { title: `${KEY_PREFIX}.title`, badge: `${KEY_PREFIX}.badge` },
+);
+
+/**
+ * The banner is one paragraph assembled from what is actually known: the
+ * failure date, Stripe's next attempt and the suspension deadline are each
+ * dropped when the data behind them is missing.
+ */
+const message = computed(() => {
+  const subject = { invoice: invoiceLabel.value, amount: amountLabel.value };
+  if (isSuspended.value) {
+    return t(`${KEY_PREFIX}.suspended_summary`, subject);
+  }
+  const failedOn = formatDay(invoice.value?.failedAt);
+  const nextRetryOn = formatDay(invoice.value?.nextRetryAt);
+  const suspendOn = formatDay(invoice.value?.suspendAt);
+  const sentences = [
+    failedOn
+      ? t(`${KEY_PREFIX}.summary_with_date`, { ...subject, date: failedOn })
+      : t(`${KEY_PREFIX}.summary`, subject),
+    nextRetryOn && t(`${KEY_PREFIX}.next_retry`, { date: nextRetryOn }),
+    suspendOn && t(`${KEY_PREFIX}.suspend_warning`, { date: suspendOn }),
+  ];
+  return sentences.filter(Boolean).join(" ");
+});
+
+function settle(): void {
+  const url = invoice.value?.hostedInvoiceUrl;
+  if (!url || typeof window === "undefined") return;
+  window.open(url, "_blank", "noopener");
+}
+
+onMounted(load);
+</script>
+
+<template>
+  <DmsSaasLoadFailure
+    v-if="error && !data"
+    :title="$t('saas.workspace.billing.past_due.load_failed')"
+    @retry="refresh"
+  />
+  <UCard v-else-if="invoice" variant="subtle" class="ring-error/40">
+    <template #header>
+      <div class="flex flex-wrap items-center gap-2">
+        <UIcon name="i-ph-warning-circle" class="text-error size-5" />
+        <h3 class="font-semibold">{{ $t(heading.title) }}</h3>
+        <UBadge color="warning" variant="subtle">
+          {{ $t(heading.badge) }}
+        </UBadge>
+      </div>
+    </template>
+
+    <div class="flex flex-col gap-3">
+      <p class="text-muted text-sm">{{ message }}</p>
+      <div>
+        <UButton
+          v-if="invoice.hostedInvoiceUrl"
+          color="primary"
+          icon="i-ph-arrow-square-out"
+          @click="settle"
+        >
+          {{ $t(`${KEY_PREFIX}.settle`) }}
+        </UButton>
+      </div>
+    </div>
+  </UCard>
+</template>

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

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed, onMounted } from "vue";
+
+const PAST_DUE_STATUS = "past_due";
+const EXPIRY_YEAR_MODULO = 100;
+const EXPIRY_PAD_LENGTH = 2;
+
+const { data, error, load, refresh } = useBillingStatus();
+
+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 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 cardBadge = computed(() =>
+  needsUpdate.value
+    ? { color: "warning" as const, key: "declined" }
+    : { color: "neutral" as const, key: "default" },
+);
+
+const expiryLabel = computed(() => {
+  if (!card.value) return "";
+  const month = String(card.value.expMonth).padStart(EXPIRY_PAD_LENGTH, "0");
+  const year = String(card.value.expYear % EXPIRY_YEAR_MODULO).padStart(
+    EXPIRY_PAD_LENGTH,
+    "0",
+  );
+  return `${month}/${year}`;
+});
+
+onMounted(load);
+</script>
+
+<template>
+  <DmsSaasLoadFailure v-if="error && !data" @retry="refresh" />
+  <UCard v-else-if="isVisible">
+    <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}`) }}
+        </UBadge>
+      </div>
+    </template>
+
+    <div class="flex flex-col gap-4">
+      <div
+        v-if="card"
+        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("saas.workspace.billing.payment_method.expires", { date: expiryLabel }) }}
+        </span>
+        <span class="grow" />
+        <UBadge :color="cardBadge.color" variant="subtle">
+          {{ $t(`saas.workspace.billing.payment_method.${cardBadge.key}`) }}
+        </UBadge>
+      </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">
+        <DmsSaasCustomerPortalButton />
+        <p class="text-muted grow text-xs">
+          {{ $t("saas.workspace.billing.payment_method.portal_hint") }}
+        </p>
+      </div>
+    </div>
+  </UCard>
+</template>

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

@@ -0,0 +1,294 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+const { $authFetch } = useAuthFetch();
+const { t } = useI18n();
+const planIntervalLabel = usePlanIntervalLabel("saas.plans.cycle");
+
+interface PlanProp {
+  _id: string;
+  name: string;
+  description: string;
+  price: number;
+  currency: string;
+  interval: "month" | "year";
+  audience: string;
+  isActive: boolean;
+  borderColor: string | null;
+  borderLabel: string | null;
+  trialDays: number;
+  maxMembers: number;
+  workspaceCount: number;
+  features?: { featureId: string; value: unknown }[];
+}
+
+interface FeatureMeta {
+  displayName: string;
+  valueType: string;
+}
+
+const FEATURE_PREVIEW_LIMIT = 6;
+
+const props = defineProps<{
+  plan: PlanProp;
+  featureMeta?: Record<string, FeatureMeta>;
+}>();
+const emit = defineEmits<{ changed: [] }>();
+
+const showDeleteModal = ref(false);
+const showConfirmDeactivateModal = ref(false);
+const busy = ref(false);
+
+const highlighted = computed(() => !!props.plan.borderLabel);
+const accent = computed(() => props.plan.borderColor || "var(--ui-primary)");
+
+const cardStyle = computed(() =>
+  highlighted.value ? { boxShadow: `0 0 0 2px ${accent.value}` } : undefined,
+);
+
+const formattedPrice = computed(() =>
+  new Intl.NumberFormat("fr-FR", {
+    style: "currency",
+    currency: props.plan.currency,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  }).format(props.plan.price),
+);
+
+const cycle = computed(() => planIntervalLabel(props.plan.interval));
+
+const membersLabel = computed(() =>
+  props.plan.maxMembers < 0
+    ? t("saas.plans.card.members_unlimited")
+    : t("saas.plans.card.members", { count: props.plan.maxMembers }),
+);
+
+function isFeatureEnabled(value: unknown, valueType: string): boolean {
+  if (valueType === "number") {
+    return typeof value === "number" && value >= 0;
+  }
+  return value === true;
+}
+
+const features = computed(() =>
+  (props.plan.features ?? [])
+    .map((f) => {
+      const meta = props.featureMeta?.[f.featureId];
+      const valueType = meta?.valueType ?? "boolean";
+      return {
+        label: meta?.displayName ?? f.featureId,
+        valueType,
+        value: f.value,
+        enabled: isFeatureEnabled(f.value, valueType),
+      };
+    })
+    .sort((a, b) => Number(b.enabled) - Number(a.enabled))
+    .slice(0, FEATURE_PREVIEW_LIMIT),
+);
+
+const editLink = computed(
+  () => `/modules/saas/catalog/plans/${props.plan._id}/edit`,
+);
+
+async function applyActive(value: boolean): Promise<void> {
+  busy.value = true;
+  try {
+    await $authFetch(`/api/saas/plans/${props.plan._id}`, {
+      method: "PUT",
+      body: { isActive: value },
+    });
+    emit("changed");
+  } finally {
+    busy.value = false;
+  }
+}
+
+async function toggleActive(value: boolean): Promise<void> {
+  if (busy.value) return;
+  // Confirm grandfathering before deactivating. workspaceCount counts
+  // subscriptions in any status, so this also triggers for plans whose only
+  // subscriptions are cancelled or suspended.
+  if (!value && props.plan.workspaceCount > 0) {
+    showConfirmDeactivateModal.value = true;
+    return;
+  }
+  await applyActive(value);
+}
+
+async function confirmDeactivate(): Promise<void> {
+  showConfirmDeactivateModal.value = false;
+  await applyActive(false);
+}
+
+function onDeleted(): void {
+  showDeleteModal.value = false;
+  emit("changed");
+}
+</script>
+
+<template>
+  <div class="relative h-full">
+    <div
+      v-if="plan.borderLabel"
+      class="absolute -top-3 left-1/2 -translate-x-1/2 z-10"
+    >
+      <span
+        class="inline-flex items-center gap-1 rounded-full px-3 py-0.5 text-xs font-semibold text-white shadow"
+        :style="{ backgroundColor: accent }"
+      >
+        <UIcon name="i-ph-star-fill" class="size-3" />
+        {{ plan.borderLabel }}
+      </span>
+    </div>
+
+    <UCard
+      class="h-full"
+      :class="{ 'opacity-60': !plan.isActive }"
+      :style="cardStyle"
+    >
+      <template #header>
+        <div class="flex flex-col gap-2">
+          <div class="flex items-center justify-between gap-2">
+            <h3 class="text-lg font-semibold truncate">{{ plan.name }}</h3>
+            <USwitch
+              :model-value="plan.isActive"
+              :disabled="busy"
+              @update:model-value="toggleActive"
+            />
+          </div>
+          <p v-if="plan.description" class="text-sm text-muted line-clamp-2">
+            {{ plan.description }}
+          </p>
+        </div>
+      </template>
+
+      <div class="flex flex-col gap-4">
+        <div>
+          <div class="flex items-baseline gap-1">
+            <span class="text-3xl font-bold tabular-nums">
+              {{ formattedPrice }}
+            </span>
+            <span v-if="cycle" class="text-muted">/{{ cycle }}</span>
+          </div>
+          <p v-if="plan.trialDays > 0" class="text-xs text-muted mt-1">
+            {{ $t("saas.plans.trial_days", { days: plan.trialDays }) }}
+          </p>
+        </div>
+
+        <div class="flex items-center gap-2 text-sm text-muted">
+          <UIcon name="i-ph-stack" class="size-4" />
+          <span>
+            {{
+              $t("saas.plans.card.subscriptions", {
+                count: plan.workspaceCount,
+              })
+            }}
+          </span>
+        </div>
+
+        <div class="flex items-center gap-2 text-sm text-muted">
+          <UIcon name="i-ph-users" class="size-4" />
+          <span>{{ membersLabel }}</span>
+        </div>
+
+        <div
+          v-if="features.length"
+          class="flex flex-col gap-2 border-t border-default pt-4"
+        >
+          <p class="text-xs font-medium text-muted uppercase tracking-wide">
+            {{ $t("saas.plans.field.features") }}
+          </p>
+          <div class="flex flex-col gap-1.5">
+            <div
+              v-for="feature in features"
+              :key="feature.label"
+              class="flex items-center gap-2 text-sm"
+            >
+              <UIcon
+                :name="feature.enabled ? 'i-ph-check' : 'i-ph-x'"
+                class="size-4 shrink-0"
+                :class="
+                  feature.enabled ? 'text-success' : 'text-muted opacity-50'
+                "
+              />
+              <span
+                class="truncate"
+                :class="{ 'text-muted opacity-50': !feature.enabled }"
+              >
+                {{ feature.label }}
+              </span>
+              <span
+                v-if="feature.valueType === 'number' && feature.enabled"
+                class="text-muted text-xs tabular-nums ml-auto"
+              >
+                {{ feature.value }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="flex gap-2">
+          <UButton
+            class="flex-1 justify-center"
+            variant="soft"
+            icon="i-ph-pencil"
+            :to="editLink"
+          >
+            {{ $t("saas.plans.action.edit") }}
+          </UButton>
+          <UButton
+            color="error"
+            variant="soft"
+            icon="i-ph-trash"
+            :aria-label="$t('saas.plans.action.delete')"
+            @click="showDeleteModal = true"
+          />
+        </div>
+      </template>
+    </UCard>
+
+    <UModal
+      v-model:open="showDeleteModal"
+      :title="$t('saas.plans.delete.action_title')"
+    >
+      <template #body>
+        <DmsSaasDeletePlanModal
+          :row-data="{
+            _id: plan._id,
+            name: plan.name,
+            workspaceCount: plan.workspaceCount,
+          }"
+          :on-success-callback="onDeleted"
+        />
+      </template>
+    </UModal>
+
+    <UModal
+      v-model:open="showConfirmDeactivateModal"
+      :title="$t('saas.plans.deactivate.title', { name: plan.name })"
+    >
+      <template #body>
+        <p>
+          {{
+            $t("saas.plans.deactivate.warning", { count: plan.workspaceCount })
+          }}
+        </p>
+        <p class="text-muted text-sm mt-2">
+          {{ $t("saas.plans.deactivate.public_removal") }}
+        </p>
+      </template>
+      <template #footer>
+        <div class="flex justify-end gap-2">
+          <UButton variant="ghost" @click="showConfirmDeactivateModal = false">
+            {{ $t("common.cancel") }}
+          </UButton>
+          <UButton color="warning" :loading="busy" @click="confirmDeactivate">
+            {{ $t("saas.plans.deactivate.confirm") }}
+          </UButton>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>