@saasicat/ui-vue 0.2.0

package/src/pages-tenant/UsageBar.vue

@@ -0,0 +1,107 @@
+<template>
+    <div class="sp-usage-bar" :class="`sp-usage-bar--${tone}`">
+        <div class="sp-usage-bar__head">
+            <span class="sp-usage-bar__label">{{ label }}</span>
+            <span class="sp-usage-bar__values"> {{ formattedUsed }} / {{ formattedMax }} </span>
+        </div>
+        <div class="sp-usage-bar__track">
+            <div class="sp-usage-bar__fill" :style="{ width: `${percent}%` }" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+// UsageBar — generic usage display for a single limit dimension. The consumer
+// passes label, usage and maximum through. `-1` as the maximum = unlimited
+// (Catalog convention), rendered as ∞.
+
+interface Props {
+    label: string;
+    used: number;
+    max: number;
+    /** Format hook: integer by default, storage is shown with 1 decimal place. */
+    fractional?: boolean;
+    /**
+     * Custom value formatter. Applied to `used` and (unless ∞) `max`.
+     * Allows, for example, adaptive units ("5.75 MB" vs. "5 GB") for small
+     * fractional values without UsageBar needing to know the unit.
+     */
+    formatValue?: (value: number) => string;
+}
+
+const props = defineProps<Props>();
+
+const isUnlimited = computed(() => props.max === -1);
+
+const percent = computed(() => {
+    if (isUnlimited.value) return 0;
+    if (props.max <= 0) return 0;
+    return Math.min(100, Math.round((props.used / props.max) * 100));
+});
+
+const tone = computed(() => {
+    if (isUnlimited.value) return 'ok';
+    if (props.max <= 0) return 'ok';
+    const ratio = props.used / props.max;
+    if (ratio >= 1) return 'full';
+    if (ratio >= 0.8) return 'warn';
+    return 'ok';
+});
+
+function defaultFormat(value: number): string {
+    return props.fractional ? value.toFixed(1) : Math.round(value).toString();
+}
+
+const formattedUsed = computed(() =>
+    props.formatValue ? props.formatValue(props.used) : defaultFormat(props.used),
+);
+const formattedMax = computed(() => {
+    if (isUnlimited.value) return '∞';
+    return props.formatValue ? props.formatValue(props.max) : defaultFormat(props.max);
+});
+</script>
+
+<style scoped>
+.sp-usage-bar {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+.sp-usage-bar__head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 13px;
+}
+.sp-usage-bar__label {
+    color: var(--q-secondary, #555);
+    font-weight: 500;
+}
+.sp-usage-bar__values {
+    font-variant-numeric: tabular-nums;
+    color: var(--q-secondary, #555);
+}
+.sp-usage-bar__track {
+    width: 100%;
+    height: 8px;
+    background: rgba(0, 0, 0, 0.08);
+    border-radius: 4px;
+    overflow: hidden;
+}
+.sp-usage-bar__fill {
+    height: 100%;
+    transition: width 200ms ease;
+    border-radius: 4px;
+}
+.sp-usage-bar--ok .sp-usage-bar__fill {
+    background: var(--q-positive, #21ba45);
+}
+.sp-usage-bar--warn .sp-usage-bar__fill {
+    background: var(--q-warning, #f2c037);
+}
+.sp-usage-bar--full .sp-usage-bar__fill {
+    background: var(--q-negative, #c10015);
+}
+</style>

package/src/pages-tenant/default-i18n.ts

@@ -0,0 +1,280 @@
+// Default i18n map for the tenant plan section. Consumers override individual
+// keys via the `i18n` prop or pass their own map through (build a vue-i18n
+// resolver on top of this shape).
+
+export interface TenantPlanSectionI18n {
+    sectionTitle: string;
+    sectionSubtitle: string;
+    loading: string;
+    noSubscription: string;
+    activePlan: string;
+    cycleMonthly: string;
+    cycleYearly: string;
+    statusActive: string;
+    statusTrial: string;
+    statusPastDue: string;
+    statusCanceled: string;
+    statusPendingSales: string;
+    trialEndsAt: string;
+    pilotEndsAt: string;
+    nextBillingDate: string;
+    pendingChange: string;
+    changeFromTo: string;
+    changeEffectiveAt: string;
+    changePlanButton: string;
+    cancelSubscriptionButton: string;
+    usageTitle: string;
+    /** #18 — feature / scope-of-services matrix (included + locked). */
+    featuresOverviewTitle: string;
+    featuresActive: string;
+    featuresLocked: string;
+    /** #15 — bundle store (booked + available bundles). */
+    bundlesStoreTitle: string;
+    bundlesBookedTitle: string;
+    bundlesAvailableTitle: string;
+    bundlesAvailableEmpty: string;
+    bundlesPerMonth: string;
+    bundleBookAction: string;
+    bundleBookInProgress: string;
+    bundleCancelAction: string;
+    bundleReactivateAction: string;
+    bundleReactivateConfirmTitle: string;
+    bundleReactivateConfirmBody: string;
+    bundleCanceledAt: string;
+    bundleMinimumTermUntil: string;
+    bundleIncludesLabel: string;
+    bundleAlreadyBooked: string;
+    bundleIncompatible: string;
+    /** #37/#61 — requires graying-out + booking/cancellation preview. */
+    bundleMissingRequires: string;
+    bundlePreviewAddTitle: string;
+    bundlePreviewCancelTitle: string;
+    bundlePreviewLoading: string;
+    bundlePreviewProrationTitle: string;
+    bundlePreviewProratedNow: string;
+    bundlePreviewProrationDays: string;
+    bundlePreviewNextPeriod: string;
+    bundlePreviewTrialNote: string;
+    bundlePreviewNoPrice: string;
+    bundlePreviewMinimumTermLabel: string;
+    bundlePreviewMinimumTermMonths: string;
+    bundlePreviewMinimumTermNone: string;
+    bundlePreviewRedundantTitle: string;
+    bundlePreviewRedundantCoveredByPlan: string;
+    bundlePreviewRedundantCoveredByBundle: string;
+    bundlePreviewMissingRequiresTitle: string;
+    bundlePreviewBlockersTitle: string;
+    bundlePreviewWarningsTitle: string;
+    bundlePreviewEffectiveAt: string;
+    bundlePreviewSavings: string;
+    bundlePreviewConfirmAdd: string;
+    bundlePreviewConfirmCancel: string;
+    bundlePreviewInProgress: string;
+    bundlePreviewClose: string;
+    pendingVersionTitle: string;
+    pendingVersionChipNonRegressive: string;
+    pendingVersionChipRegressive: string;
+    pendingVersionEffectiveAt: string;
+    pendingVersionAcceptAction: string;
+    pendingVersionAcceptInProgress: string;
+    pendingVersionAcceptedAt: string;
+    wizardTitle: string;
+    wizardClose: string;
+    wizardCurrent: string;
+    wizardBadgeCurrent: string;
+    wizardBadgePopular: string;
+    wizardPriceUnitMonthly: string;
+    wizardPriceUnitYearly: string;
+    wizardPriceOnRequest: string;
+    wizardStepChoose: string;
+    wizardStepChooseIntro: string;
+    wizardStepPreview: string;
+    wizardStepConfirm: string;
+    wizardNext: string;
+    wizardBack: string;
+    wizardPreviewLoading: string;
+    wizardEffectiveAtLabel: string;
+    wizardEffectiveImmediate: string;
+    wizardProrationTitle: string;
+    wizardProrationLine: string;
+    wizardProrationDays: string;
+    wizardLimitsTitle: string;
+    wizardLimitsUsed: string;
+    wizardLimitsCurrent: string;
+    wizardLimitsTarget: string;
+    wizardFeaturesGained: string;
+    wizardFeaturesLost: string;
+    wizardBlockersTitle: string;
+    wizardConfirmImmediate: string;
+    wizardConfirmScheduled: string;
+    wizardConfirmAction: string;
+    wizardConfirmInProgress: string;
+    /** #17 — price overview in the confirm step. */
+    wizardConfirmPriceTitle: string;
+    wizardConfirmProratedNow: string;
+    wizardConfirmRecurringNext: string;
+    wizardConfirmRecurringFrom: string;
+    wizardConfirmPerCycleMonthly: string;
+    wizardConfirmPerCycleYearly: string;
+    /** #17 — trial case in the confirm step (nothing due during the trial). */
+    wizardConfirmTrialNote: string;
+    wizardConfirmRecurringTrialEnd: string;
+    wizardChangeTypeUpgrade: string;
+    wizardChangeTypeDowngrade: string;
+    wizardChangeTypeCycle: string;
+    wizardChangeTypeNoop: string;
+    /** P11.4: read-only display of the package snapshot. */
+    packageSnapshotTitle: string;
+    packageSnapshotSubtitle: string;
+    packageSnapshotCapturedAt: string;
+    packageSnapshotOfferRef: string;
+    packageSnapshotPlanLabel: string;
+    packageSnapshotPlanVersionLabel: string;
+    packageSnapshotCycleLabel: string;
+    packageSnapshotBundlesLabel: string;
+    packageSnapshotBundlesEmpty: string;
+    packageSnapshotPriceMonthly: string;
+    packageSnapshotPriceYearly: string;
+    packageSnapshotPriceTotal: string;
+    packageSnapshotNone: string;
+    packageSnapshotShowRaw: string;
+    packageSnapshotHideRaw: string;
+}
+
+/** German default strings — apps can override them selectively. */
+export const DEFAULT_I18N_DE: TenantPlanSectionI18n = {
+    sectionTitle: 'Paket & Verbrauch',
+    sectionSubtitle: 'Aktuelles Paket, Verbrauch und Bundles.',
+    loading: 'Lade …',
+    noSubscription: 'Keine Subscription für diesen Mandanten gefunden.',
+    activePlan: 'Aktuelles Paket',
+    cycleMonthly: 'Monatlich',
+    cycleYearly: 'Jährlich',
+    statusActive: 'Aktiv',
+    statusTrial: 'Testphase',
+    statusPastDue: 'Zahlung überfällig',
+    statusCanceled: 'Gekündigt',
+    statusPendingSales: 'Vertrieb-Klärung',
+    trialEndsAt: 'Testphase endet am',
+    pilotEndsAt: 'Pilot endet am',
+    nextBillingDate: 'Nächste Abrechnung',
+    pendingChange: 'Ausstehender Plan-Wechsel',
+    changeFromTo: 'Wechsel zu',
+    changeEffectiveAt: 'wirksam ab',
+    changePlanButton: 'Paket wechseln',
+    cancelSubscriptionButton: 'Abonnement kündigen',
+    usageTitle: 'Verbrauch',
+    featuresOverviewTitle: 'Leistungsumfang',
+    featuresActive: 'Enthalten',
+    featuresLocked: 'Nicht enthalten',
+    bundlesStoreTitle: 'Bundles',
+    bundlesBookedTitle: 'Gebuchte Bundles',
+    bundlesAvailableTitle: 'Verfügbare Bundles',
+    bundlesAvailableEmpty: 'Aktuell sind keine zusätzlichen Bundles verfügbar.',
+    bundlesPerMonth: 'netto/Monat',
+    bundleBookAction: 'Bundle buchen',
+    bundleBookInProgress: 'Buchung läuft …',
+    bundleCancelAction: 'Kündigen',
+    bundleReactivateAction: 'Reaktivieren',
+    bundleReactivateConfirmTitle: 'Bundle reaktivieren',
+    bundleReactivateConfirmBody:
+        'Die Kündigung wird rückgängig gemacht. Das Bundle bleibt gebucht, läuft regulär weiter und wird wieder abgerechnet.',
+    bundleCanceledAt: 'Gekündigt zum',
+    bundleMinimumTermUntil: 'Mindestlaufzeit bis',
+    bundleIncludesLabel: 'Enthält',
+    bundleAlreadyBooked: 'Bereits gebucht',
+    bundleIncompatible: 'Nicht kompatibel mit aktuellem Paket',
+    bundleMissingRequires: 'Benötigt',
+    bundlePreviewAddTitle: 'Bundle buchen',
+    bundlePreviewCancelTitle: 'Bundle kündigen',
+    bundlePreviewLoading: 'Vorschau wird berechnet …',
+    bundlePreviewProrationTitle: 'Anteilige Abrechnung',
+    bundlePreviewProratedNow: 'Heute anteilig fällig',
+    bundlePreviewProrationDays: 'Tage',
+    bundlePreviewNextPeriod: 'Regulär ab nächster Periode',
+    bundlePreviewTrialNote:
+        'Während der Testphase fällt nichts an — die Abrechnung beginnt mit der ersten bezahlten Periode.',
+    bundlePreviewNoPrice: 'Für den aktuellen Abrechnungszyklus ist kein Listenpreis gepflegt.',
+    bundlePreviewMinimumTermLabel: 'Mindestlaufzeit',
+    bundlePreviewMinimumTermMonths: 'Monate, bis',
+    bundlePreviewMinimumTermNone: 'Keine Mindestlaufzeit',
+    bundlePreviewRedundantTitle: 'Bereits enthaltene Features (würden doppelt bezahlt)',
+    bundlePreviewRedundantCoveredByPlan: 'bereits im Plan',
+    bundlePreviewRedundantCoveredByBundle: 'bereits im Bundle',
+    bundlePreviewMissingRequiresTitle: 'Fehlende Voraussetzungen',
+    bundlePreviewBlockersTitle: 'Buchung nicht möglich',
+    bundlePreviewWarningsTitle: 'Hinweise',
+    bundlePreviewEffectiveAt: 'Kündigung wirksam zum',
+    bundlePreviewSavings: 'Ersparnis pro Periode ab Wirksamkeit',
+    bundlePreviewConfirmAdd: 'Kostenpflichtig buchen',
+    bundlePreviewConfirmCancel: 'Kündigung bestätigen',
+    bundlePreviewInProgress: 'Wird ausgeführt …',
+    bundlePreviewClose: 'Abbrechen',
+    pendingVersionTitle: 'Anstehende Plan-Änderung',
+    pendingVersionChipNonRegressive: 'Verbessernd',
+    pendingVersionChipRegressive: 'Bestätigung erforderlich',
+    pendingVersionEffectiveAt: 'Wirksam ab',
+    pendingVersionAcceptAction: 'Änderungen akzeptieren',
+    pendingVersionAcceptInProgress: 'Akzeptiere …',
+    pendingVersionAcceptedAt: 'Akzeptiert am',
+    wizardTitle: 'Paket wechseln',
+    wizardClose: 'Schließen',
+    wizardCurrent: 'Aktuell',
+    wizardBadgeCurrent: 'aktiv',
+    wizardBadgePopular: 'beliebt',
+    wizardPriceUnitMonthly: 'netto/Monat',
+    wizardPriceUnitYearly: 'netto/Jahr',
+    wizardPriceOnRequest: 'auf Anfrage',
+    wizardStepChoose: 'Paket wählen',
+    wizardStepChooseIntro:
+        'Wähle dein Ziel-Paket und den Abrechnungszyklus. Im nächsten Schritt zeigen wir Verbrauchs-Check und Feature-Diff.',
+    wizardStepPreview: 'Vorschau',
+    wizardStepConfirm: 'Bestätigen',
+    wizardNext: 'Weiter',
+    wizardBack: 'Zurück',
+    wizardPreviewLoading: 'Vorschau wird berechnet …',
+    wizardEffectiveAtLabel: 'Wirksam ab',
+    wizardEffectiveImmediate: 'Wirksam sofort',
+    wizardProrationTitle: 'Anteilige Abrechnung',
+    wizardProrationLine: 'Mehrbetrag bis Periodenende:',
+    wizardProrationDays: 'Tage',
+    wizardLimitsTitle: 'Limit-Vergleich',
+    wizardLimitsUsed: 'Verbrauch',
+    wizardLimitsCurrent: 'Aktuell',
+    wizardLimitsTarget: 'Ziel',
+    wizardFeaturesGained: 'Neu freigeschaltet',
+    wizardFeaturesLost: 'Wegfallende Features',
+    wizardBlockersTitle: 'Verhinderungs-Gründe',
+    wizardConfirmImmediate: 'Der Wechsel wird sofort wirksam.',
+    wizardConfirmScheduled: 'Der Wechsel wird wirksam zum',
+    wizardConfirmAction: 'Wechsel bestätigen',
+    wizardConfirmInProgress: 'Wechsel läuft …',
+    wizardConfirmPriceTitle: 'Preisübersicht',
+    wizardConfirmProratedNow: 'Heute anteilig fällig',
+    wizardConfirmRecurringNext: 'Regulär ab nächster Periode',
+    wizardConfirmRecurringFrom: 'Regulär fällig ab',
+    wizardConfirmPerCycleMonthly: 'pro Monat',
+    wizardConfirmPerCycleYearly: 'pro Jahr',
+    wizardConfirmTrialNote: 'Während der Testphase fällt nichts an.',
+    wizardConfirmRecurringTrialEnd: 'Regulär ab Ende der Testphase',
+    wizardChangeTypeUpgrade: 'Upgrade',
+    wizardChangeTypeDowngrade: 'Downgrade',
+    wizardChangeTypeCycle: 'Zyklus-Wechsel',
+    wizardChangeTypeNoop: 'Keine Änderung',
+    packageSnapshotTitle: 'Gebuchtes Paket (Snapshot)',
+    packageSnapshotSubtitle:
+        'Schreibgeschützte Kopie des Pakets, wie es beim Abschluss vermarktet wurde.',
+    packageSnapshotCapturedAt: 'Erfasst am',
+    packageSnapshotOfferRef: 'Angebots-Referenz',
+    packageSnapshotPlanLabel: 'Plan',
+    packageSnapshotPlanVersionLabel: 'Plan-Version',
+    packageSnapshotCycleLabel: 'Abrechnungszyklus',
+    packageSnapshotBundlesLabel: 'Enthaltene Bundles',
+    packageSnapshotBundlesEmpty: 'Keine Bundles im Paket.',
+    packageSnapshotPriceMonthly: 'Preis monatlich',
+    packageSnapshotPriceYearly: 'Preis jährlich',
+    packageSnapshotPriceTotal: 'Gesamtpreis',
+    packageSnapshotNone: 'Diese Subscription wurde nicht über ein Webseiten-Angebot abgeschlossen.',
+    packageSnapshotShowRaw: 'Rohdaten anzeigen',
+    packageSnapshotHideRaw: 'Rohdaten ausblenden',
+};

package/src/pages-tenant/tenant-plan-section/BundlePreviewDialog.vue

@@ -0,0 +1,304 @@
+<template>
+    <q-dialog :model-value="modelValue" @update:model-value="emit('update:modelValue', $event)">
+        <q-card class="sp-bundle-preview">
+            <q-card-section class="sp-bundle-preview__head">
+                <div class="sp-bundle-preview__title">
+                    {{ isCancel ? i18n.bundlePreviewCancelTitle : i18n.bundlePreviewAddTitle }}
+                </div>
+                <div v-if="preview" class="sp-bundle-preview__bundle">
+                    {{ preview.bundle.label }}
+                </div>
+            </q-card-section>
+
+            <q-separator />
+
+            <q-card-section v-if="loading" class="sp-bundle-preview__loading">
+                <q-spinner size="24px" />
+                <span>{{ i18n.bundlePreviewLoading }}</span>
+            </q-card-section>
+
+            <q-card-section v-else-if="error" class="sp-bundle-preview__error">
+                {{ error }}
+            </q-card-section>
+
+            <template v-else-if="preview">
+                <!-- Blocker: booking/cancellation not possible -->
+                <q-card-section v-if="preview.blockers.length > 0" class="sp-bundle-preview__blockers">
+                    <div class="sp-bundle-preview__block-title">
+                        {{ i18n.bundlePreviewBlockersTitle }}
+                    </div>
+                    <ul>
+                        <li v-for="blocker in preview.blockers" :key="blocker.code">
+                            {{ blocker.message }}
+                        </li>
+                    </ul>
+                    <!-- requires blocker with resolved feature labels (#35) -->
+                    <div
+                        v-if="addPreview && addPreview.missingRequires.length > 0"
+                        class="sp-bundle-preview__requires"
+                    >
+                        <span class="sp-bundle-preview__block-subtitle">
+                            {{ i18n.bundlePreviewMissingRequiresTitle }}:
+                        </span>
+                        {{ addPreview.missingRequires.map(featureLabel).join(', ') }}
+                    </div>
+                </q-card-section>
+
+                <!-- Add preview: price + proration -->
+                <q-card-section v-if="addPreview" class="sp-bundle-preview__price">
+                    <div class="sp-bundle-preview__block-title">
+                        {{ i18n.bundlePreviewProrationTitle }}
+                    </div>
+                    <div v-if="addPreview.proration" class="sp-bundle-preview__price-row">
+                        <span>
+                            {{ i18n.bundlePreviewProratedNow }}
+                            ({{ addPreview.proration.daysRemainingInPeriod }}/{{
+                                addPreview.proration.daysInPeriod
+                            }}
+                            {{ i18n.bundlePreviewProrationDays }})
+                        </span>
+                        <strong>{{ formatCurrency(addPreview.proration.prorataDeltaNet) }}</strong>
+                    </div>
+                    <div v-else-if="isTrial" class="sp-bundle-preview__note">
+                        {{ i18n.bundlePreviewTrialNote }}
+                    </div>
+                    <div v-else class="sp-bundle-preview__note">
+                        {{ i18n.bundlePreviewNoPrice }}
+                    </div>
+                    <div
+                        v-if="addPreview.nextPeriodPriceNet !== null"
+                        class="sp-bundle-preview__price-row"
+                    >
+                        <span>{{ i18n.bundlePreviewNextPeriod }}</span>
+                        <strong>
+                            {{ formatCurrency(addPreview.nextPeriodPriceNet) }}
+                            <small>{{ cycleUnit }}</small>
+                        </strong>
+                    </div>
+                    <div class="sp-bundle-preview__price-row">
+                        <span>{{ i18n.bundlePreviewMinimumTermLabel }}</span>
+                        <span v-if="addPreview.minimumTermMonths > 0 && addPreview.minimumTermEndsAt">
+                            {{ addPreview.minimumTermMonths }}
+                            {{ i18n.bundlePreviewMinimumTermMonths }}
+                            {{ formatDate(addPreview.minimumTermEndsAt) }}
+                        </span>
+                        <span v-else>{{ i18n.bundlePreviewMinimumTermNone }}</span>
+                    </div>
+                </q-card-section>
+
+                <!-- Add preview: redundancy hint (AK-13) -->
+                <q-card-section
+                    v-if="addPreview && addPreview.redundantFeatures.length > 0"
+                    class="sp-bundle-preview__warnings"
+                >
+                    <div class="sp-bundle-preview__block-title">
+                        {{ i18n.bundlePreviewRedundantTitle }}
+                    </div>
+                    <ul>
+                        <li v-for="hint in addPreview.redundantFeatures" :key="hint.featureKey">
+                            {{ featureLabel(hint.featureKey) }} —
+                            {{
+                                hint.coveredBy === 'PLAN'
+                                    ? i18n.bundlePreviewRedundantCoveredByPlan
+                                    : i18n.bundlePreviewRedundantCoveredByBundle
+                            }}
+                            „{{ hint.coveredByKey }}"
+                        </li>
+                    </ul>
+                </q-card-section>
+
+                <!-- Cancel preview: effective date + savings -->
+                <q-card-section v-if="cancelPreview" class="sp-bundle-preview__price">
+                    <div class="sp-bundle-preview__price-row">
+                        <span>{{ i18n.bundlePreviewEffectiveAt }}</span>
+                        <strong>{{ formatDate(cancelPreview.effectiveAt) }}</strong>
+                    </div>
+                    <div
+                        v-if="cancelPreview.nextPeriodSavingsNet !== null"
+                        class="sp-bundle-preview__price-row"
+                    >
+                        <span>{{ i18n.bundlePreviewSavings }}</span>
+                        <strong>{{ formatCurrency(cancelPreview.nextPeriodSavingsNet) }}</strong>
+                    </div>
+                </q-card-section>
+
+                <!-- Warnings (e.g. MINIMUM_TERM_BINDS) -->
+                <q-card-section
+                    v-if="otherWarnings.length > 0"
+                    class="sp-bundle-preview__warnings"
+                >
+                    <div class="sp-bundle-preview__block-title">
+                        {{ i18n.bundlePreviewWarningsTitle }}
+                    </div>
+                    <ul>
+                        <li v-for="warning in otherWarnings" :key="warning.code">
+                            {{ warning.message }}
+                        </li>
+                    </ul>
+                </q-card-section>
+            </template>
+
+            <q-separator />
+
+            <q-card-actions align="right">
+                <q-btn flat :label="i18n.bundlePreviewClose" :disable="submitting" @click="close" />
+                <q-btn
+                    :color="isCancel ? 'negative' : 'primary'"
+                    unelevated
+                    :label="
+                        submitting
+                            ? i18n.bundlePreviewInProgress
+                            : isCancel
+                              ? i18n.bundlePreviewConfirmCancel
+                              : i18n.bundlePreviewConfirmAdd
+                    "
+                    :loading="submitting"
+                    :disable="!canConfirm"
+                    @click="emit('confirm')"
+                />
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { TenantPlanSectionI18n } from '../default-i18n.js';
+import type {
+    BundleAddPreviewShape,
+    BundleCancelPreviewShape,
+    BundlePreviewShape,
+} from '../../use-tenant-billing.js';
+
+// BundlePreviewDialog (#37/#61) — preview BEFORE bundle add/cancel in the
+// tenant self-service: proration until period end, next-period price,
+// redundancy hint (AK-13), requires blocker and minimum-term warning.
+// Booking is only possible when the `blockers` list is empty.
+
+const REDUNDANT_WARNING_CODE = 'REDUNDANT_FEATURES';
+
+const props = defineProps<{
+    modelValue: boolean;
+    /** null while the preview is loading. */
+    preview: BundlePreviewShape | null;
+    loading: boolean;
+    /** Error while loading the preview (preview endpoint). */
+    error: string | null;
+    /** Confirm mutation in progress (add/cancel). */
+    submitting: boolean;
+    /** Subscription status — during TRIAL there is deliberately no proration. */
+    subscriptionStatus: string;
+    i18n: TenantPlanSectionI18n;
+    formatCurrency: (n: number) => string;
+    formatDate: (iso: string) => string;
+    featureLabel: (key: string) => string;
+}>();
+
+const emit = defineEmits<{
+    'update:modelValue': [value: boolean];
+    confirm: [];
+}>();
+
+const isCancel = computed(() => props.preview?.action === 'cancel');
+const isTrial = computed(() => props.subscriptionStatus === 'TRIAL');
+
+const addPreview = computed<BundleAddPreviewShape | null>(() =>
+    props.preview?.action === 'add' ? props.preview : null,
+);
+const cancelPreview = computed<BundleCancelPreviewShape | null>(() =>
+    props.preview?.action === 'cancel' ? props.preview : null,
+);
+
+// REDUNDANT_FEATURES has its own feature-resolved section — the generic
+// warning for it would be a duplicate.
+const otherWarnings = computed(() =>
+    (props.preview?.warnings ?? []).filter((w) => w.code !== REDUNDANT_WARNING_CODE),
+);
+
+const canConfirm = computed(
+    () =>
+        !props.loading &&
+        !props.error &&
+        props.preview !== null &&
+        props.preview.blockers.length === 0 &&
+        !props.submitting,
+);
+
+const cycleUnit = computed(() =>
+    props.preview?.billingCycle === 'YEARLY'
+        ? props.i18n.wizardConfirmPerCycleYearly
+        : props.i18n.wizardConfirmPerCycleMonthly,
+);
+
+function close() {
+    emit('update:modelValue', false);
+}
+</script>
+
+<style scoped>
+.sp-bundle-preview {
+    min-width: 420px;
+    max-width: 560px;
+}
+.sp-bundle-preview__head {
+    padding-bottom: 8px;
+}
+.sp-bundle-preview__title {
+    font-size: 16px;
+    font-weight: 600;
+}
+.sp-bundle-preview__bundle {
+    margin-top: 2px;
+    color: var(--sp-text-secondary, rgba(0, 0, 0, 0.6));
+}
+.sp-bundle-preview__loading {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    color: var(--sp-text-secondary, rgba(0, 0, 0, 0.6));
+}
+.sp-bundle-preview__error {
+    color: var(--q-negative, #c10015);
+}
+.sp-bundle-preview__blockers {
+    background: rgba(193, 0, 21, 0.08);
+    color: var(--q-negative, #c10015);
+}
+.sp-bundle-preview__warnings {
+    background: rgba(242, 192, 55, 0.12);
+}
+.sp-bundle-preview__block-title {
+    font-weight: 600;
+    font-size: 13px;
+    margin-bottom: 6px;
+}
+.sp-bundle-preview__block-subtitle {
+    font-weight: 500;
+}
+.sp-bundle-preview__blockers ul,
+.sp-bundle-preview__warnings ul {
+    margin: 0;
+    padding-left: 18px;
+    font-size: 13px;
+}
+.sp-bundle-preview__requires {
+    margin-top: 6px;
+    font-size: 13px;
+}
+.sp-bundle-preview__price-row {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 4px 0;
+    font-size: 14px;
+}
+.sp-bundle-preview__price-row small {
+    font-weight: 400;
+    color: var(--sp-text-muted, rgba(0, 0, 0, 0.55));
+}
+.sp-bundle-preview__note {
+    font-size: 13px;
+    color: var(--sp-text-muted, rgba(0, 0, 0, 0.55));
+    padding: 4px 0;
+}
+</style>