@antelopejs/dms-saas 0.0.1

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

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface PlanProp {
+  _id: string;
+  name: string;
+  description: string;
+  price: number;
+  currency: string;
+  interval: "month" | "year";
+  trialDays: number;
+  borderColor: string | null;
+  borderLabel: string | null;
+}
+
+const props = defineProps<{ plan: PlanProp; selected?: boolean }>();
+const emit = defineEmits<{ select: [planId: string] }>();
+const planIntervalLabel = usePlanIntervalLabel("saas.plans.cycle");
+
+const formattedPrice = computed(() => {
+  const price = `${props.plan.price.toFixed(2)} ${props.plan.currency.toUpperCase()}`;
+  return `${price}/${planIntervalLabel(props.plan.interval)}`;
+});
+
+const borderStyle = computed(() => {
+  if (!props.plan.borderColor) return undefined;
+  return { borderColor: props.plan.borderColor, borderWidth: "2px" };
+});
+</script>
+
+<template>
+  <UCard
+    class="border rounded-lg transition-colors"
+    :class="selected ? 'border-primary border-2' : 'border-default'"
+    :style="borderStyle"
+  >
+    <template v-if="plan.borderLabel" #header>
+      <div
+        class="text-center text-white font-semibold py-1"
+        :style="{ background: plan.borderColor ?? undefined }"
+      >
+        {{ plan.borderLabel }}
+      </div>
+    </template>
+    <div class="flex flex-col gap-2 p-4">
+      <h3 class="text-lg font-semibold">{{ plan.name }}</h3>
+      <p class="text-muted text-sm">{{ plan.description }}</p>
+      <div class="text-2xl font-semibold tabular-nums">{{ formattedPrice }}</div>
+      <div v-if="plan.trialDays > 0" class="text-success text-sm">
+        {{ $t("saas.plans.trial_days", { days: plan.trialDays }) }}
+      </div>
+    </div>
+    <template #footer>
+      <UButton block color="primary" @click="emit('select', plan._id)">
+        {{ $t("saas.plans.choose") }}
+      </UButton>
+    </template>
+  </UCard>
+</template>

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

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+
+const { $authFetch } = useAuthFetch();
+const { resolveApiError } = useApiErrorMessage();
+
+interface Plan {
+  _id: string;
+  name: string;
+  slug: string;
+  description: string;
+  price: number;
+  currency: string;
+  interval: "month" | "year";
+  audience: string;
+  isActive: boolean;
+  borderColor: string | null;
+  borderLabel: string | null;
+  order: number;
+  trialDays: number;
+  maxMembers: number;
+  workspaceCount: number;
+  features?: { featureId: string; value: unknown }[];
+}
+
+interface FeatureCatalogItem {
+  _id: string;
+  displayName: string;
+  valueType: string;
+}
+
+interface FeatureMeta {
+  displayName: string;
+  valueType: string;
+}
+
+interface DisplayContext {
+  refresh: () => void | Promise<void>;
+}
+
+const PLANS_ENDPOINT = "/api/saas/plans";
+const PAGE_SIZE = 24;
+
+const props = defineProps<{ context: DisplayContext }>();
+
+const plans = ref<Plan[]>([]);
+const featureMeta = ref<Record<string, FeatureMeta>>({});
+const isLoading = ref(true);
+const reorderError = ref<string | null>(null);
+
+function sortPlans(list: Plan[]): Plan[] {
+  return [...list].sort(
+    (a, b) => Number(b.isActive) - Number(a.isActive) || a.order - b.order,
+  );
+}
+
+async function load(): Promise<void> {
+  isLoading.value = true;
+  try {
+    const [list, catalog] = await Promise.all([
+      $authFetch<Plan[]>(PLANS_ENDPOINT),
+      $authFetch<{ features: FeatureCatalogItem[] }>(
+        `${PLANS_ENDPOINT}/catalog`,
+      ),
+    ]);
+    plans.value = sortPlans(list);
+    featureMeta.value = Object.fromEntries(
+      catalog.features.map((f) => [
+        f._id,
+        { displayName: f.displayName, valueType: f.valueType },
+      ]),
+    );
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+async function reorder(updated: Plan[]): Promise<void> {
+  reorderError.value = null;
+  const previous = [...plans.value];
+  plans.value = updated;
+  try {
+    const items = updated.map((plan, index) => ({
+      id: plan._id,
+      order: index,
+    }));
+    await $authFetch(`${PLANS_ENDPOINT}/reorder`, {
+      method: "POST",
+      body: { items },
+    });
+  } catch (error) {
+    plans.value = previous;
+    reorderError.value = resolveApiError(error, "saas.plans.reorder_failed");
+  }
+}
+
+async function onChanged(): Promise<void> {
+  await props.context.refresh();
+}
+
+onMounted(load);
+defineExpose({ refresh: load });
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 mt-4">
+    <p v-if="reorderError" class="text-error">{{ reorderError }}</p>
+    <div v-if="isLoading" class="flex justify-center py-8">
+      <UIcon name="i-ph-spinner" class="animate-spin" />
+    </div>
+    <DmsSaasCardGrid
+      v-else
+      :items="plans"
+      :page-size="PAGE_SIZE"
+      draggable
+      @reorder="reorder"
+    >
+      <template #card="{ item }">
+        <DmsSaasPlanCard
+          :plan="item"
+          :feature-meta="featureMeta"
+          @changed="onChanged"
+        />
+      </template>
+    </DmsSaasCardGrid>
+  </div>
+</template>

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

@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+const props = defineProps<{
+  plans: TenantPlanView[];
+  features: TenantPlanFeature[];
+  currentPlanId: string | null;
+  pendingPlanId: string | null;
+  isRecovery?: boolean;
+}>();
+
+const emit = defineEmits<{ changed: [] }>();
+
+const open = defineModel<boolean>("open", { default: false });
+
+const { t } = useI18n();
+const toast = useToast();
+const { resolveApiError } = useApiErrorMessage();
+const { changePlan } = useTenantPlan();
+const { formatFeatureValue } = usePlanFeatureFormat();
+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,
+  ),
+);
+
+const hasDetailRows = computed(() =>
+  props.features.some((feature) => feature.isDetailRow),
+);
+
+const currentPlan = computed(
+  () => props.plans.find((plan) => plan._id === props.currentPlanId) ?? null,
+);
+
+function priceLabel(plan: TenantPlanView): string {
+  return formatMajorUnits(plan.price, plan.currency);
+}
+
+function isCurrent(plan: TenantPlanView): boolean {
+  return plan._id === props.currentPlanId;
+}
+
+async function select(plan: TenantPlanView): Promise<void> {
+  pendingPlanRequest.value = plan._id;
+  try {
+    const result = await changePlan(plan._id);
+    if (result.checkoutUrl && typeof window !== "undefined") {
+      window.location.href = result.checkoutUrl;
+      return;
+    }
+    toast.add({
+      title: result.scheduled
+        ? t("saas.workspace.plan.change_scheduled")
+        : t("saas.workspace.plan.change_applied"),
+      color: "success",
+      icon: "i-ph-check-circle",
+    });
+    open.value = false;
+    emit("changed");
+  } catch (error) {
+    toast.add({
+      title: resolveApiError(error, "saas.workspace.plan.change_error"),
+      color: "error",
+      icon: "i-ph-warning-circle",
+    });
+  } finally {
+    pendingPlanRequest.value = null;
+  }
+}
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    :title="$t('saas.workspace.plan.comparison.title')"
+    :description="
+      currentPlan
+        ? $t('saas.workspace.plan.comparison.subtitle', {
+            plan: currentPlan.name,
+          })
+        : $t('saas.workspace.plan.comparison.subtitle_no_plan')
+    "
+    :ui="{ content: 'max-w-5xl' }"
+  >
+    <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">
+            <thead>
+              <tr>
+                <th class="w-56" />
+                <th
+                  v-for="plan in plans"
+                  :key="plan._id"
+                  scope="col"
+                  class="border-default border-b p-3 text-center align-top"
+                  :class="isCurrent(plan) ? 'bg-elevated/50' : ''"
+                >
+                  <div class="flex flex-col items-center gap-2">
+                    <span class="font-semibold">{{ plan.name }}</span>
+                    <span class="text-muted tabular-nums">
+                      {{ priceLabel(plan) }}
+                      <span class="text-xs">
+                        /{{ planIntervalLabel(plan.interval) }}
+                      </span>
+                    </span>
+                    <UBadge
+                      v-if="isCurrent(plan) && !isRecovery"
+                      color="primary"
+                      variant="subtle"
+                    >
+                      {{ $t("saas.workspace.plan.comparison.current") }}
+                    </UBadge>
+                    <UBadge
+                      v-else-if="plan._id === pendingPlanId"
+                      color="warning"
+                      variant="subtle"
+                    >
+                      {{ $t("saas.workspace.plan.comparison.scheduled") }}
+                    </UBadge>
+                    <UButton
+                      v-else
+                      size="xs"
+                      :color="
+                        isRecovery && plan.checkoutAvailable
+                          ? 'primary'
+                          : 'neutral'
+                      "
+                      :variant="
+                        isRecovery && plan.checkoutAvailable
+                          ? 'solid'
+                          : 'subtle'
+                      "
+                      :loading="pendingPlanRequest === plan._id"
+                      :disabled="
+                        pendingPlanRequest !== null ||
+                        (isRecovery && !plan.checkoutAvailable)
+                      "
+                      @click="select(plan)"
+                    >
+                      {{ $t("saas.workspace.plan.comparison.choose") }}
+                    </UButton>
+                  </div>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="feature in visibleFeatures"
+                :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">
+                      <UButton
+                        variant="link"
+                        color="neutral"
+                        size="xs"
+                        icon="i-ph-info"
+                        :aria-label="feature.tooltip"
+                        class="text-muted p-0"
+                      />
+                    </UTooltip>
+                  </span>
+                </th>
+                <td
+                  v-for="plan in plans"
+                  :key="plan._id"
+                  class="p-3 text-center tabular-nums"
+                  :class="isCurrent(plan) ? 'bg-elevated/50' : ''"
+                >
+                  {{
+                    formatFeatureValue(
+                      feature,
+                      plan.featureValues[feature.featureId],
+                    )
+                  }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div v-if="hasDetailRows" class="flex justify-center">
+          <UButton
+            variant="link"
+            color="primary"
+            :icon="showDetailRows ? 'i-ph-caret-up' : 'i-ph-caret-down'"
+            @click="showDetailRows = !showDetailRows"
+          >
+            {{
+              showDetailRows
+                ? $t("saas.workspace.plan.comparison.hide_detail")
+                : $t("saas.workspace.plan.comparison.show_detail")
+            }}
+          </UButton>
+        </div>
+
+        <p class="text-muted text-xs">
+          {{ $t("saas.workspace.plan.comparison.footer") }}
+        </p>
+      </div>
+    </template>
+  </UModal>
+</template>