@antelopejs/dms-saas 0.0.1

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

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+  messages: SupportPageView<SupportMessageView>;
+  events: SupportPageView<SupportTicketEventView>;
+  assigneeLabels?: Record<string, string>;
+}
+
+interface HistoryEmits {
+  attachment: [resourceKey: string];
+  messagesPage: [page: number];
+  eventsPage: [page: number];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  assigneeLabels: () => ({}),
+});
+const emit = defineEmits<HistoryEmits>();
+const { t } = useI18n();
+
+const chronologicalMessages = computed(() =>
+  [...props.messages.results].reverse(),
+);
+const messagesPage = computed(
+  () => Math.floor(props.messages.offset / props.messages.limit) + 1,
+);
+const eventsPage = computed(
+  () => Math.floor(props.events.offset / props.events.limit) + 1,
+);
+
+function formatDate(value: string): string {
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(new Date(value));
+}
+
+function eventValue(
+  event: SupportTicketEventView,
+  value: string | null,
+): string {
+  if (!value) return t("saas.support.platform.unassigned");
+  if (event.type === "status_changed")
+    return t(`saas.support.status.${value}`);
+  return props.assigneeLabels[value] ?? value;
+}
+</script>
+
+<template>
+  <section class="flex flex-col gap-4">
+    <div class="flex items-center justify-between gap-3">
+      <h3 class="font-medium">{{ $t("saas.support.conversation") }}</h3>
+      <span v-if="messagesPage === 1" class="text-muted text-xs">
+        {{ $t("saas.support.pagination.latest_page") }}
+      </span>
+    </div>
+    <article
+      v-for="message in chronologicalMessages"
+      :key="message._id"
+      class="rounded-lg p-4"
+      :class="
+        message.authorType === 'platform' ? 'bg-primary/10' : 'bg-elevated'
+      "
+    >
+      <div class="text-muted mb-2 flex justify-between text-xs">
+        <span>{{ $t(`saas.support.author.${message.authorType}`) }}</span>
+        <time>{{ formatDate(message.createdAt) }}</time>
+      </div>
+      <p class="whitespace-pre-wrap text-sm">{{ message.body }}</p>
+      <div
+        v-if="message.attachments.length"
+        class="mt-3 flex flex-wrap gap-2"
+      >
+        <UButton
+          v-for="(attachment, index) in message.attachments"
+          :key="attachment"
+          size="xs"
+          color="neutral"
+          variant="outline"
+          icon="i-ph-paperclip"
+          @click="emit('attachment', attachment)"
+        >
+          {{ $t("saas.support.attachment", { number: index + 1 }) }}
+        </UButton>
+      </div>
+    </article>
+    <div
+      v-if="messages.total > messages.limit"
+      class="flex flex-col items-center gap-1"
+    >
+      <span class="text-muted text-xs">
+        {{ $t("saas.support.pagination.older_messages") }}
+      </span>
+      <UPagination
+        :page="messagesPage"
+        :total="messages.total"
+        :items-per-page="messages.limit"
+        size="sm"
+        @update:page="emit('messagesPage', $event)"
+      />
+    </div>
+  </section>
+
+  <USeparator />
+  <section class="flex flex-col gap-3">
+    <h3 class="font-medium">{{ $t("saas.support.history.title") }}</h3>
+    <p v-if="!events.results.length" class="text-muted text-sm">
+      {{ $t("saas.support.history.empty") }}
+    </p>
+    <div
+      v-for="event in events.results"
+      :key="event._id"
+      class="bg-elevated rounded-lg p-3 text-sm"
+    >
+      <p>
+        {{
+          $t(`saas.support.history.${event.type}`, {
+            actor: event.actorName,
+            previous: eventValue(event, event.previousValue),
+            next: eventValue(event, event.newValue),
+          })
+        }}
+      </p>
+      <time class="text-muted text-xs">
+        {{ formatDate(event.createdAt) }}
+      </time>
+    </div>
+    <UPagination
+      v-if="events.total > events.limit"
+      :page="eventsPage"
+      :total="events.total"
+      :items-per-page="events.limit"
+      size="sm"
+      class="self-center"
+      @update:page="emit('eventsPage', $event)"
+    />
+  </section>
+</template>

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

@@ -0,0 +1,208 @@
+<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 { resolveApiError } = useApiErrorMessage();
+const { countryItems } = useBillingCountries();
+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 vatVerificationStatus = ref<VatVerificationStatus | null>(null);
+const billingEmail = ref("");
+const country = ref("");
+const addressLine1 = ref("");
+const postalCode = ref("");
+const city = ref("");
+const isLoading = ref(true);
+const loadFailed = ref(false);
+const isSaving = ref(false);
+
+const isBusiness = computed(() => customerType.value === "business");
+
+const customerTypeLabel = computed(() => {
+  if (!customerType.value) return "—";
+  return nuxtApp.$i18n.t(`saas.register.customer_type.${customerType.value}`);
+});
+
+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 ?? "";
+  } catch {
+    loadFailed.value = true;
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+async function save(): Promise<void> {
+  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;
+    toast.add({
+      title: nuxtApp.$i18n.t("saas.workspace.billing.info_saved"),
+      color: "success",
+      icon: "i-ph-check-circle",
+    });
+  } catch (error) {
+    toast.add({
+      title: resolveApiError(error, "saas.workspace.billing.info_save_error"),
+      color: "error",
+      icon: "i-ph-warning-circle",
+    });
+  } finally {
+    isSaving.value = false;
+  }
+}
+
+onMounted(() => {
+  void loadBillingStatus();
+  return load();
+});
+</script>
+
+<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>
+    </template>
+
+    <div v-if="isLoading" class="flex flex-col gap-3">
+      <USkeleton class="h-10 w-full" />
+      <USkeleton class="h-10 w-full" />
+    </div>
+
+    <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>
+
+      <div v-if="isTenantOwner" class="flex justify-end">
+        <UButton
+          type="submit"
+          color="primary"
+          icon="i-ph-floppy-disk"
+          :loading="isSaving"
+        >
+          {{ $t("saas.workspace.billing.info_save") }}
+        </UButton>
+      </div>
+    </form>
+  </UCard>
+</template>

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

@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+
+const FREE_PLAN_PRICE = 0;
+const FULL_DATE_FORMAT: Intl.DateTimeFormatOptions = {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+};
+
+const toast = useToast();
+const { resolveApiError } = useApiErrorMessage();
+const {
+  load,
+  refresh: refetchPlan,
+  error: loadError,
+  cancelPendingChange,
+} = useTenantPlan();
+const { data: billingStatus, load: loadBillingStatus } = useBillingStatus();
+const { formatMajorUnits } = useMoneyFormat();
+const { t, locale } = useI18n();
+const planIntervalLabel = usePlanIntervalLabel("saas.workspace.plan.interval");
+
+const data = ref<TenantPlanResponse | null>(null);
+const isLoading = ref(true);
+const isCancelling = ref(false);
+const isComparisonOpen = ref(false);
+
+const current = computed(() => data.value?.current ?? null);
+const pendingPlan = computed(() => data.value?.pendingPlan ?? null);
+const isPaid = computed(() => (current.value?.price ?? 0) > FREE_PLAN_PRICE);
+
+/** The card is readable on a blocked workspace's billing page, but plan
+ * mutations stay gated server-side: settling the invoice comes first. */
+const isAccessBlocked = computed(
+  () =>
+    isBlockingSubscriptionStatus(data.value?.status) &&
+    !data.value?.canRecoverComplimentary,
+);
+
+/** Plan mutations are owner-only server-side; a member gets the read-only
+ * card instead of buttons that can only end in a 403 toast. */
+const isTenantOwner = computed(() => !!billingStatus.value?.isTenantOwner);
+
+function formatDay(value: string | null | undefined): string | null {
+  return formatDate(value, locale.value, FULL_DATE_FORMAT);
+}
+
+const renewalDate = computed(() => formatDay(data.value?.currentPeriodEnd));
+
+const pendingDowngradeLabel = computed(() => {
+  const pending = pendingPlan.value;
+  if (!pending) return null;
+  const date = formatDay(pending.effectiveAt);
+  return date
+    ? t("saas.workspace.plan.pending_downgrade_on", {
+        plan: pending.planName,
+        date,
+      })
+    : t("saas.workspace.plan.pending_downgrade", { plan: pending.planName });
+});
+
+/** A workspace still on Free is being asked to convert, not to switch: the
+ * button carries the primary weight and different copy. */
+const changeAction = computed(() =>
+  isPaid.value
+    ? { color: "neutral" as const, variant: "subtle" as const, key: "change" }
+    : { color: "primary" as const, variant: "solid" as const, key: "go_paid" },
+);
+
+const priceLabel = computed(() =>
+  current.value
+    ? formatMajorUnits(current.value.price, current.value.currency)
+    : "",
+);
+const currentIntervalLabel = computed(() =>
+  current.value ? planIntervalLabel(current.value.interval) : "",
+);
+
+async function fetchPlan(force: boolean): Promise<void> {
+  isLoading.value = true;
+  try {
+    data.value = force ? await refetchPlan() : await load();
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+function refresh(): Promise<void> {
+  return fetchPlan(true);
+}
+
+async function cancelDowngrade(): Promise<void> {
+  isCancelling.value = true;
+  try {
+    await cancelPendingChange();
+    toast.add({
+      title: t("saas.workspace.plan.downgrade_cancelled"),
+      color: "success",
+      icon: "i-ph-check-circle",
+    });
+    await refresh();
+  } catch (error) {
+    toast.add({
+      title: resolveApiError(error, "saas.workspace.plan.change_error"),
+      color: "error",
+      icon: "i-ph-warning-circle",
+    });
+  } finally {
+    isCancelling.value = false;
+  }
+}
+
+onMounted(() => {
+  void loadBillingStatus();
+  return fetchPlan(false);
+});
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <div class="flex flex-wrap items-center gap-2">
+        <h3 class="font-semibold">
+          {{ $t("saas.workspace.plan.current") }}
+        </h3>
+        <UBadge v-if="pendingDowngradeLabel" color="warning" variant="subtle">
+          {{ pendingDowngradeLabel }}
+        </UBadge>
+      </div>
+    </template>
+
+    <div v-if="isLoading" class="flex flex-col gap-3">
+      <USkeleton class="h-8 w-48" />
+      <USkeleton class="h-4 w-full" />
+    </div>
+
+    <DmsSaasLoadFailure v-else-if="loadError && !data" @retry="refresh" />
+
+    <div v-else-if="data" class="flex flex-col gap-4">
+      <div class="flex flex-wrap items-start gap-4">
+        <div class="min-w-60 grow">
+          <h2 class="text-lg font-semibold">
+            {{ current?.name ?? $t("saas.workspace.plan.none") }}
+          </h2>
+          <p v-if="current?.description" class="text-muted mt-1 text-sm">
+            {{ current.description }}
+          </p>
+        </div>
+        <div v-if="current" class="text-right">
+          <span class="text-2xl font-semibold tabular-nums">
+            {{ priceLabel }}
+          </span>
+          <span v-if="currentIntervalLabel" class="text-muted text-sm">
+            /{{ currentIntervalLabel }}
+          </span>
+        </div>
+      </div>
+
+      <div
+        v-if="data.isComplimentary && current"
+        class="border-default border-t pt-4 text-sm"
+      >
+        <div class="flex justify-between gap-4">
+          <span>{{ $t("saas.admission.complimentary_reduction") }}</span>
+          <span class="tabular-nums">−{{ priceLabel }}</span>
+        </div>
+        <div class="mt-2 flex justify-between gap-4 font-semibold">
+          <span>{{ $t("saas.admission.total") }}</span>
+          <span class="tabular-nums">{{
+            formatMajorUnits(0, current.currency)
+          }}</span>
+        </div>
+      </div>
+
+      <p
+        v-if="renewalDate && isPaid && !data.isComplimentary"
+        class="text-muted text-sm"
+      >
+        {{ $t("saas.workspace.plan.next_renewal", { date: renewalDate }) }}
+      </p>
+
+      <p v-if="isAccessBlocked" class="text-muted text-sm">
+        {{ $t("saas.workspace.plan.blocked_hint") }}
+      </p>
+
+      <p v-else-if="data.isPlanChangeLocked" class="text-muted text-sm">
+        {{ $t("saas.admission.plan_managed") }}
+      </p>
+
+      <div v-else-if="isTenantOwner" class="flex flex-wrap gap-2">
+        <UButton
+          v-if="pendingPlan"
+          color="neutral"
+          variant="subtle"
+          icon="i-ph-arrow-u-up-left"
+          :loading="isCancelling"
+          @click="cancelDowngrade"
+        >
+          {{ $t("saas.workspace.plan.cancel_downgrade") }}
+        </UButton>
+        <UButton
+          :color="changeAction.color"
+          :variant="changeAction.variant"
+          icon="i-ph-stack"
+          @click="isComparisonOpen = true"
+        >
+          {{ $t(`saas.workspace.plan.${changeAction.key}`) }}
+        </UButton>
+      </div>
+
+      <DmsSaasPlanComparisonModal
+        v-model:open="isComparisonOpen"
+        :plans="data.available"
+        :features="data.features"
+        :current-plan-id="current?._id ?? null"
+        :pending-plan-id="pendingPlan?.planId ?? null"
+        :is-recovery="data.canRecoverComplimentary"
+        @changed="refresh"
+      />
+    </div>
+  </UCard>
+</template>