@saasicat/ui-vue 0.2.0

package/src/components/dialogs/types.ts

@@ -0,0 +1,126 @@
+// Shared types for platform dialogs. Extracted from the .vue files
+// because vue-tsc does not support `type X from "...vue"`.
+
+export interface PilotCreatePayload {
+    tenant: { name: string; slug?: string; legalForm?: string; vatId?: string };
+    admin: {
+        email: string;
+        firstName: string;
+        lastName: string;
+        initialPassword?: string;
+    };
+    pilot: { plan: string; note?: string; endsAt?: string };
+}
+
+export interface PilotCreateResult {
+    slug: string;
+    /** If the server generated an initial password, include it here. */
+    initialPassword?: string;
+}
+
+/** Edit an existing pilot subscription (plan, end date, note). */
+export interface PilotEditPayload {
+    /** Optional — only the fields that are set get changed. */
+    plan?: string;
+    /** `null` clears the end date (open-ended pilot phase). */
+    endsAt?: string | null;
+    /** `null` or empty clears the note. */
+    note?: string | null;
+}
+
+export interface PilotEditResult {
+    slug: string;
+    changed?: string[];
+}
+
+/**
+ * Tenant-specific vocabulary for the pilot dialogs. The platform
+ * provides neutral defaults ("Mandant"); consumers override with
+ * their domain language (e.g. "Verein" or "Händler").
+ */
+export interface PilotCopy {
+    /** Subtitle of the tenant section in the create dialog. */
+    tenantSubtitle?: string;
+    /** Label of the name field, e.g. "Vereinsname" / "Firmenname". */
+    tenantNameLabel?: string;
+    /** Placeholder for the tenant name. */
+    tenantNamePlaceholder?: string;
+    /** Placeholder for the slug. */
+    slugPlaceholder?: string;
+    /** Placeholder for the initial admin email. */
+    adminEmailPlaceholder?: string;
+    /** Placeholder for the internal note (create + edit). */
+    notePlaceholder?: string;
+}
+
+/** Neutral, tenant-agnostic defaults for {@link PilotCopy}. */
+export const DEFAULT_PILOT_COPY: Required<PilotCopy> = {
+    tenantSubtitle: 'Stammdaten des Mandanten',
+    tenantNameLabel: 'Name des Mandanten',
+    tenantNamePlaceholder: 'z. B. Muster GmbH',
+    slugPlaceholder: 'muster-mandant',
+    adminEmailPlaceholder: 'admin@example.com',
+    notePlaceholder: 'z. B. Sales-Pilot · Demo-Zugang',
+};
+
+export type PromoCodeValueType = 'PERCENT' | 'ABSOLUTE';
+export type PromoCodeDurationType = 'ONCE' | 'MONTHS' | 'BILLING_CYCLES';
+
+export interface PromoCodeCreatePayload {
+    code: string;
+    valueType: PromoCodeValueType;
+    value: number;
+    durationType: PromoCodeDurationType;
+    durationValue: number | null;
+    maxRedemptions: number | null;
+    validFrom: string | null;
+    validUntil: string | null;
+    /** Plan keys the code applies to. Empty = all plans. */
+    appliesToPlans?: string[];
+    /** Optional: filter on MONTHLY/YEARLY subscriptions. */
+    appliesToBilling?: 'MONTHLY' | 'YEARLY';
+    /** Only redeemable by new customers. */
+    firstTimeCustomersOnly?: boolean;
+    /** Minimum gross plan amount from which the code takes effect. */
+    minimumPlanAmountGross?: number;
+    /** Allows €0 invoices (otherwise the discount is capped at 100% of the amount). */
+    allowZeroInvoice?: boolean;
+    /** Ledger account for discount revenue reduction (app-specific). */
+    revenueDeductionAccount?: string;
+    campaignTag?: string;
+    description?: string;
+}
+
+/** Plan option for the plan picker in PromoCodeCreateDialog. */
+export interface PromoCodePlanOption {
+    /** Plan key as sent to the backend (e.g. 'BASIC'). */
+    key: string;
+    /** Display label (e.g. 'Basic'). */
+    label: string;
+    /** Optional accent for the plan chip; fallback neutral gray. */
+    color?: string;
+}
+
+/**
+ * PATCH payload — all fields optional, only the explicitly set ones
+ * are sent to the backend (whitelist on the server side). `code` is
+ * not in the list because it stays stable after creation.
+ */
+export interface PromoCodeUpdatePayload {
+    status?: 'ACTIVE' | 'PAUSED';
+    valueType?: PromoCodeValueType;
+    value?: number;
+    durationType?: PromoCodeDurationType;
+    durationValue?: number | null;
+    maxRedemptions?: number | null;
+    validFrom?: string | null;
+    validUntil?: string | null;
+    appliesToPlans?: string[];
+    appliesToBilling?: 'MONTHLY' | 'YEARLY' | null;
+    firstTimeCustomersOnly?: boolean;
+    minimumPlanAmountGross?: number | null;
+    allowZeroInvoice?: boolean;
+    description?: string | null;
+    campaignTag?: string | null;
+    revenueDeductionAccount?: string | null;
+}

package/src/components/plan/PlanCycleToggle.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class="sp-cycle" role="radiogroup" :aria-label="i18n.ariaLabel">
+        <button
+            type="button"
+            class="sp-cycle__btn"
+            :class="{ 'sp-cycle__btn--active': modelValue === 'MONTHLY' }"
+            role="radio"
+            :aria-checked="modelValue === 'MONTHLY'"
+            @click="emit('update:modelValue', 'MONTHLY')"
+        >
+            {{ i18n.monthly }}
+        </button>
+        <button
+            type="button"
+            class="sp-cycle__btn"
+            :class="{ 'sp-cycle__btn--active': modelValue === 'YEARLY' }"
+            role="radio"
+            :aria-checked="modelValue === 'YEARLY'"
+            @click="emit('update:modelValue', 'YEARLY')"
+        >
+            {{ i18n.yearly }}
+            <span v-if="i18n.savePill" class="sp-cycle__pill">{{ i18n.savePill }}</span>
+        </button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { BillingCycleStr } from '../../use-tenant-billing.js';
+
+interface I18n {
+    ariaLabel: string;
+    monthly: string;
+    yearly: string;
+    /** Optional: Spar-Pill neben "Jährlich" (z. B. "−2 Mt"). */
+    savePill?: string;
+}
+
+const props = defineProps<{
+    modelValue: BillingCycleStr;
+    i18n: I18n;
+}>();
+
+const emit = defineEmits<{
+    'update:modelValue': [BillingCycleStr];
+}>();
+
+void props;
+</script>
+
+<style scoped>
+.sp-cycle {
+    display: inline-flex;
+    /* CSS-Vars: dark-mode-overrides unten via :global(.body--dark) */
+    --sp-cycle-bg: rgba(15, 118, 110, 0.06);
+    --sp-cycle-btn-fg: rgba(0, 0, 0, 0.55);
+    --sp-cycle-btn-active-bg: #fff;
+    --sp-cycle-btn-active-fg: var(--q-primary, #0f766e);
+    background: var(--sp-cycle-bg);
+    border-radius: 12px;
+    padding: 3px;
+    gap: 2px;
+}
+:global(.body--dark) .sp-cycle {
+    --sp-cycle-bg: rgba(255, 255, 255, 0.08);
+    --sp-cycle-btn-fg: rgba(255, 255, 255, 0.7);
+    --sp-cycle-btn-active-bg: rgba(255, 255, 255, 0.92);
+    --sp-cycle-btn-active-fg: var(--q-primary, #0f766e);
+}
+.sp-cycle__btn {
+    padding: 8px 14px;
+    border: none;
+    background: none;
+    font-family: inherit;
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--sp-cycle-btn-fg);
+    cursor: pointer;
+    border-radius: 9px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    letter-spacing: 0.02em;
+    transition: all 180ms;
+}
+.sp-cycle__btn--active {
+    background: var(--sp-cycle-btn-active-bg);
+    color: var(--sp-cycle-btn-active-fg);
+    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.12);
+}
+.sp-cycle__pill {
+    background: rgba(22, 163, 74, 0.16);
+    color: #166534;
+    font-size: 10px;
+    padding: 2px 7px;
+    border-radius: 999px;
+    font-family: 'SF Mono', Consolas, monospace;
+    letter-spacing: 0.04em;
+}
+</style>

package/src/components/plan/PlanGrid.vue

@@ -0,0 +1,211 @@
+<template>
+    <div class="sp-models">
+        <button
+            v-for="plan in plans"
+            :key="plan.id"
+            type="button"
+            class="sp-model"
+            :class="{
+                'sp-model--selected': modelValue === plan.id,
+                'sp-model--current': plan.id === currentPlanId,
+            }"
+            :aria-pressed="modelValue === plan.id"
+            @click="emit('update:modelValue', plan.id)"
+        >
+            <span v-if="plan.popular && plan.id !== currentPlanId" class="sp-model__flag">
+                {{ i18n.popular }}
+            </span>
+            <span
+                v-else-if="plan.id === currentPlanId"
+                class="sp-model__flag sp-model__flag--current"
+            >
+                {{ i18n.current }}
+            </span>
+
+            <div class="sp-model__name">{{ plan.name }}</div>
+            <div class="sp-model__tagline">{{ plan.tagline }}</div>
+
+            <div class="sp-model__price">
+                <template v-if="planPrice(plan) !== null">
+                    <strong>{{ formatCurrency(planPrice(plan)!) }}</strong>
+                    <span class="sp-model__price-cycle">
+                        /{{ cycle === 'YEARLY' ? i18n.perYear : i18n.perMonth }}
+                    </span>
+                </template>
+                <template v-else>
+                    {{ i18n.priceOnRequest }}
+                </template>
+            </div>
+
+            <div class="sp-model__quotas">
+                <div v-for="key in catalogQuotaKeys" :key="key" class="sp-model__quota">
+                    <strong>{{ formatQuotaValue(key, plan.quotas[key]) }}</strong>
+                    <span>{{ quotaLabel(key) }}</span>
+                </div>
+            </div>
+        </button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { CatalogPlan } from '../../use-tenant-billing-catalog.js';
+import type { BillingCycleStr } from '../../use-tenant-billing.js';
+
+interface I18n {
+    popular: string;
+    current: string;
+    perMonth: string;
+    perYear: string;
+    priceOnRequest: string;
+}
+
+const props = defineProps<{
+    modelValue: string | null;
+    plans: CatalogPlan[];
+    cycle: BillingCycleStr;
+    /** quotaKeys to display, in order. */
+    catalogQuotaKeys: string[];
+    /** Current subscription, optional — when set, the plan card is marked with "Aktuell". */
+    currentPlanId?: string | null;
+    formatCurrency: (n: number) => string;
+    /** Formats a single Quota value (`-1` → ∞, otherwise number + unit). */
+    formatQuotaValue: (key: string, value: number) => string;
+    quotaLabel: (key: string) => string;
+    i18n: I18n;
+}>();
+
+const emit = defineEmits<{
+    'update:modelValue': [string];
+}>();
+
+function planPrice(plan: CatalogPlan): number | null {
+    if (props.cycle === 'YEARLY') {
+        return plan.yearlyNet ?? (plan.monthlyNet != null ? plan.monthlyNet * 10 : null);
+    }
+    return plan.monthlyNet;
+}
+</script>
+
+<style scoped>
+.sp-models {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 12px;
+}
+/* CSS vars for light + dark mode. Quasar's `body--dark` triggers the dark set. */
+.sp-models {
+    --sp-card-bg: #fff;
+    --sp-card-border: rgba(0, 0, 0, 0.1);
+    --sp-card-border-soft: rgba(0, 0, 0, 0.08);
+    --sp-card-current-bg: rgba(0, 0, 0, 0.02);
+    --sp-card-selected-grad: rgba(15, 118, 110, 0.04);
+    --sp-text-strong: rgba(0, 0, 0, 0.85);
+    --sp-text-muted: rgba(0, 0, 0, 0.55);
+    --sp-flag-current-bg: rgba(0, 0, 0, 0.6);
+    --sp-flag-current-fg: #fff;
+}
+:global(.body--dark) .sp-models {
+    --sp-card-bg: rgba(255, 255, 255, 0.06);
+    --sp-card-border: rgba(255, 255, 255, 0.2);
+    --sp-card-border-soft: rgba(255, 255, 255, 0.12);
+    --sp-card-current-bg: rgba(255, 255, 255, 0.1);
+    --sp-card-selected-grad: rgba(15, 118, 110, 0.25);
+    --sp-text-strong: rgba(255, 255, 255, 0.92);
+    --sp-text-muted: rgba(255, 255, 255, 0.65);
+    --sp-flag-current-bg: rgba(255, 255, 255, 0.85);
+    --sp-flag-current-fg: #0f172a;
+}
+.sp-model {
+    position: relative;
+    text-align: left;
+    cursor: pointer;
+    font-family: inherit;
+    background: var(--sp-card-bg);
+    border: 1.5px solid var(--sp-card-border);
+    border-radius: 18px;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    transition: all 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
+    color: var(--sp-text-strong);
+}
+.sp-model:hover {
+    transform: translateY(-3px);
+    border-color: rgba(15, 118, 110, 0.55);
+}
+.sp-model--selected {
+    border-color: var(--q-primary, #0f766e);
+    background: linear-gradient(180deg, var(--sp-card-selected-grad), var(--sp-card-bg) 70%);
+    box-shadow: 0 14px 30px rgba(15, 118, 110, 0.16);
+}
+.sp-model--current {
+    background: var(--sp-card-current-bg);
+}
+.sp-model__flag {
+    position: absolute;
+    top: -10px;
+    right: 14px;
+    background: var(--q-primary, #0f766e);
+    color: #fff;
+    font-size: 10px;
+    font-weight: 700;
+    padding: 4px 10px;
+    border-radius: 999px;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+.sp-model__flag--current {
+    background: var(--sp-flag-current-bg);
+    color: var(--sp-flag-current-fg);
+}
+.sp-model__name {
+    font-size: 17px;
+    font-weight: 700;
+    color: var(--sp-text-strong);
+}
+.sp-model__tagline {
+    font-size: 12px;
+    color: var(--sp-text-muted);
+    line-height: 1.4;
+}
+.sp-model__price {
+    display: flex;
+    align-items: baseline;
+    gap: 4px;
+    margin-top: 4px;
+}
+.sp-model__price strong {
+    font-size: 22px;
+    font-weight: 800;
+    color: var(--sp-text-strong);
+}
+.sp-model__price-cycle {
+    font-size: 11px;
+    color: var(--sp-text-muted);
+}
+.sp-model__quotas {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+    gap: 6px;
+    margin-top: 4px;
+    padding-top: 10px;
+    border-top: 1px dashed var(--sp-card-border-soft);
+}
+.sp-model__quota {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    font-size: 11px;
+}
+.sp-model__quota strong {
+    font-size: 14px;
+    color: var(--sp-text-strong);
+}
+.sp-model__quota span {
+    color: var(--sp-text-muted);
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+</style>