@saasicat/ui-vue 0.2.0

package/src/pages-tenant/OnboardingConfigurator.vue

@@ -0,0 +1,417 @@
+<template>
+    <div class="sp-onb">
+        <slot name="header" :pricing="draft.pricing.value">
+            <header class="sp-onb__header">
+                <div>
+                    <div class="sp-onb__eyebrow">{{ i18n.eyebrow }}</div>
+                    <h1>{{ i18n.title }}</h1>
+                    <p>{{ i18n.subtitle }}</p>
+                </div>
+                <PlanCycleToggle
+                    :model-value="draft.cycle.value"
+                    :i18n="i18n.cycle"
+                    @update:model-value="draft.setCycle"
+                />
+            </header>
+        </slot>
+
+        <div class="sp-onb__layout">
+            <div class="sp-onb__main">
+                <!-- ═══ Plan ═══ -->
+                <section class="sp-onb__section">
+                    <header class="sp-onb__sec-head">
+                        <div class="sp-onb__sec-num">01 · {{ i18n.sections.plan.eyebrow }}</div>
+                        <h2>{{ i18n.sections.plan.title }}</h2>
+                        <p>{{ i18n.sections.plan.subtitle }}</p>
+                    </header>
+                    <PlanGrid
+                        v-if="plans"
+                        :model-value="draft.plan.value"
+                        :plans="plans"
+                        :cycle="draft.cycle.value"
+                        :catalog-quota-keys="catalogQuotaKeys"
+                        :current-plan-id="currentPlanId ?? null"
+                        :format-currency="formatCurrency"
+                        :format-quota-value="formatQuotaValue"
+                        :quota-label="quotaLabel"
+                        :i18n="i18n.plan"
+                        @update:model-value="draft.setPlan"
+                    />
+                    <div v-else class="sp-onb__loading">{{ i18n.loading }}</div>
+                </section>
+
+                <!-- ═══ Bundles ═══ -->
+                <section v-if="bookableSubscriptionBundles.length > 0" class="sp-onb__section">
+                    <header class="sp-onb__sec-head">
+                        <div class="sp-onb__sec-num">02 · {{ i18n.sections.bundles.eyebrow }}</div>
+                        <h2>{{ i18n.sections.bundles.title }}</h2>
+                        <p>{{ i18n.sections.bundles.subtitle }}</p>
+                    </header>
+                    <PublicBundleGrid
+                        :bundles="bookableSubscriptionBundles"
+                        :selected="draft.selectedBundleVersionIds.value"
+                        :cycle="draft.cycle.value"
+                        :plan-features="selectedPlanFeatures"
+                        :format-currency="formatCurrency"
+                        :feature-label="featureLabel"
+                        :quota-label="quotaLabel"
+                        :i18n="i18n.bundles"
+                        @toggle="draft.toggleSubscriptionBundle"
+                    />
+                </section>
+
+                <div class="sp-onb__actions">
+                    <button v-if="onBack" type="button" class="sp-onb__back-btn" @click="onBack">
+                        ← {{ i18n.back }}
+                    </button>
+                    <div v-if="submitError" class="sp-onb__error">{{ submitError }}</div>
+                </div>
+            </div>
+
+            <PriceSummary
+                :pricing="draft.pricing.value"
+                :plan-name="draft.selectedPlan.value?.name ?? null"
+                :format-currency="formatCurrency"
+                :cta-label="submitting ? i18n.submitting : i18n.submit"
+                :cta-disabled="submitting || !draft.plan.value"
+                :i18n="i18n.summary"
+                @submit="handleSubmit"
+            >
+                <template #promo-input>
+                    <PromoCodeInput
+                        v-if="enablePromo"
+                        :model-value="draft.promoCode.value"
+                        :state="draft.promoState.value"
+                        :i18n="i18n.promo"
+                        @update:model-value="draft.setPromoCode"
+                        @apply="handleApplyPromo"
+                        @remove="draft.clearPromo"
+                    />
+                </template>
+            </PriceSummary>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import PlanCycleToggle from '../components/plan/PlanCycleToggle.vue';
+import PlanGrid from '../components/plan/PlanGrid.vue';
+import PublicBundleGrid from '../components/plan/PublicBundleGrid.vue';
+import PromoCodeInput from '../components/plan/PromoCodeInput.vue';
+import PriceSummary from '../components/plan/PriceSummary.vue';
+import {
+    useSubscriptionDraft,
+    type PromoState,
+    type SubscriptionDraft,
+} from '../use-subscription-draft.js';
+import type { CatalogPlan } from '../use-tenant-billing-catalog.js';
+import type { BillingCycleStr } from '../use-tenant-billing.js';
+import type {
+    OnboardingSelectionRequest,
+    OnboardingSelectionResponse,
+    PromoPreviewRequest,
+    PromoPreviewResponse,
+    PublicMarketingBundle,
+} from '@saasicat/types';
+
+// OnboardingConfigurator — page component for tenant self-service onboarding.
+// Composes the sub-components, holds the draft state, calls the consumer's
+// submit/preview hooks. Deliberately HTTP-free: the consumer injects
+// `previewPromo()` + `submit()` via the props (Axios wrapper or similar).
+
+interface SectionI18n {
+    eyebrow: string;
+    title: string;
+    subtitle: string;
+}
+
+interface OnboardingI18n {
+    eyebrow: string;
+    title: string;
+    subtitle: string;
+    loading: string;
+    back: string;
+    submit: string;
+    submitting: string;
+    sections: {
+        plan: SectionI18n;
+        bundles: SectionI18n;
+    };
+    cycle: { ariaLabel: string; monthly: string; yearly: string; savePill?: string };
+    plan: {
+        popular: string;
+        current: string;
+        perMonth: string;
+        perYear: string;
+        priceOnRequest: string;
+    };
+    bundles: {
+        perMonth: string;
+        perYear: string;
+        empty: string;
+        allPlans: string;
+        priceOnRequest: string;
+        /** Bundle fully covered by the plan/other bundles — not bookable twice. */
+        alreadyBooked: string;
+        /** Prefix before the list of missing prerequisite features. */
+        missingRequires: string;
+    };
+    promo: { openLabel: string; placeholder: string; apply: string; remove: string };
+    summary: {
+        noPlan: string;
+        cycleMonthly: string;
+        cycleYearly: string;
+        sectionPlan: string;
+        sectionBundles: string;
+        empty: string;
+        subtotal: string;
+        discount: string;
+        total: string;
+        totalUnitMonthly: string;
+        totalUnitYearly: string;
+        yearSavings: string;
+        disclaimer?: string;
+    };
+    /** Derived from the backend reason string (`PromoPreviewInvalidReason` → display text). */
+    promoReason: Record<string, string>;
+}
+
+const props = defineProps<{
+    plans: CatalogPlan[] | null;
+    /** Independently bookable bundles from `PublicMarketingCatalogResponse.bundles`. */
+    availableBundles?: PublicMarketingBundle[];
+    catalogQuotaKeys: string[];
+    initialPlan?: string | null;
+    initialCycle?: BillingCycleStr;
+    currentPlanId?: string | null;
+    enablePromo?: boolean;
+    formatCurrency: (n: number) => string;
+    formatQuotaValue: (key: string, value: number) => string;
+    quotaLabel: (key: string) => string;
+    featureLabel: (key: string) => string;
+    /** Async hook for `POST /billing/promo/preview`. */
+    previewPromo?: (req: PromoPreviewRequest) => Promise<PromoPreviewResponse>;
+    /** Async hook for `POST /billing/onboarding/initial-subscription`. */
+    submit: (payload: OnboardingSelectionRequest) => Promise<OnboardingSelectionResponse>;
+    /** Optional: back-button handler. */
+    onBack?: () => void;
+    i18n: OnboardingI18n;
+}>();
+
+const emit = defineEmits<{
+    submitted: [OnboardingSelectionResponse];
+    error: [Error];
+}>();
+
+const subscriptionBundleOptions = computed(() => props.availableBundles ?? []);
+
+const draft: SubscriptionDraft = useSubscriptionDraft({
+    plans: computed(() => props.plans),
+    subscriptionBundles: subscriptionBundleOptions,
+    initialPlan: props.initialPlan ?? null,
+    initialCycle: props.initialCycle ?? 'YEARLY',
+});
+
+const submitting = ref(false);
+const submitError = ref<string | null>(null);
+
+const selectedPlanFeatures = computed(() => draft.selectedPlan.value?.features ?? []);
+
+const bookableSubscriptionBundles = computed(() => {
+    const selectedPlan = draft.plan.value;
+    return subscriptionBundleOptions.value.filter((bundle) => {
+        if (bundle.monthlyNet === null && bundle.yearlyNet === null) return false;
+        if (!selectedPlan) return true;
+        return (
+            bundle.compatiblePlanKeys.length === 0 ||
+            bundle.compatiblePlanKeys.includes(selectedPlan)
+        );
+    });
+});
+
+async function handleApplyPromo(): Promise<void> {
+    if (!props.previewPromo || !draft.promoCode.value || !draft.plan.value) return;
+    draft.setPromoState({ status: 'checking', preview: null, message: '' });
+    try {
+        const res = await props.previewPromo({
+            code: draft.promoCode.value,
+            plan: draft.plan.value,
+            billingCycle: draft.cycle.value,
+        });
+        if (res.valid) {
+            draft.setPromoState({
+                status: 'valid',
+                preview: res,
+                message: res.label,
+            });
+        } else {
+            const reason = res.reason;
+            const restricted = reason === 'BILLING_MISMATCH' || reason === 'PLAN_MISMATCH';
+            draft.setPromoState({
+                status: restricted ? 'restricted' : 'invalid',
+                preview: res,
+                message: props.i18n.promoReason[reason] ?? reason,
+            });
+        }
+    } catch (err) {
+        draft.setPromoState({
+            status: 'invalid',
+            preview: null,
+            message: err instanceof Error ? err.message : String(err),
+        });
+    }
+}
+
+async function handleSubmit(): Promise<void> {
+    if (!draft.plan.value || submitting.value) return;
+    submitting.value = true;
+    submitError.value = null;
+    try {
+        const payload = draft.toApiPayload();
+        const result = await props.submit(payload);
+        emit('submitted', result);
+    } catch (err) {
+        const e = err instanceof Error ? err : new Error(String(err));
+        submitError.value = e.message;
+        emit('error', e);
+    } finally {
+        submitting.value = false;
+    }
+}
+
+defineExpose({ draft });
+</script>
+
+<style scoped>
+.sp-onb {
+    padding: 28px 24px 80px;
+    max-width: 1480px;
+    margin: 0 auto;
+}
+.sp-onb__header {
+    margin-bottom: 22px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 20px;
+}
+.sp-onb__header > div:first-child {
+    flex: 1 1 320px;
+    min-width: 0;
+}
+.sp-onb__eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-family: 'SF Mono', Consolas, monospace;
+    font-size: 11px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--q-primary, #0f766e);
+    background: rgba(15, 118, 110, 0.08);
+    padding: 6px 11px;
+    border-radius: 999px;
+    border: 1px solid rgba(15, 118, 110, 0.2);
+}
+.sp-onb__header h1 {
+    margin: 12px 0 8px;
+    font-size: clamp(1.6rem, 3vw, 2.4rem);
+    line-height: 1.1;
+    letter-spacing: -0.01em;
+}
+.sp-onb__header p {
+    margin: 0;
+    color: rgba(0, 0, 0, 0.6);
+    max-width: 640px;
+}
+.sp-onb__layout {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 380px;
+    gap: 24px;
+    align-items: start;
+}
+@media (max-width: 1100px) {
+    .sp-onb__layout {
+        grid-template-columns: 1fr;
+    }
+}
+.sp-onb__main {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+.sp-onb__section {
+    background: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 22px;
+    padding: 26px 28px 24px;
+    box-shadow: 0 24px 80px rgba(31, 41, 51, 0.05);
+}
+.sp-onb__sec-head {
+    padding-bottom: 14px;
+    margin-bottom: 18px;
+    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
+}
+.sp-onb__sec-head h2 {
+    margin: 6px 0 0;
+    font-size: 1.4rem;
+    letter-spacing: -0.005em;
+}
+.sp-onb__sec-head p {
+    margin: 4px 0 0;
+    color: rgba(0, 0, 0, 0.55);
+    font-size: 13px;
+    max-width: 520px;
+}
+.sp-onb__sec-num {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-family: 'SF Mono', Consolas, monospace;
+    font-size: 11px;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--q-primary, #0f766e);
+    font-weight: 700;
+}
+.sp-onb__sec-num::before {
+    content: '';
+    width: 28px;
+    height: 1px;
+    background: var(--q-primary, #0f766e);
+}
+.sp-onb__loading {
+    padding: 40px;
+    text-align: center;
+    color: rgba(0, 0, 0, 0.5);
+}
+.sp-onb__actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    padding-top: 8px;
+}
+.sp-onb__back-btn {
+    background: none;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 10px;
+    padding: 10px 16px;
+    font-family: inherit;
+    font-size: 13px;
+    cursor: pointer;
+    color: rgba(0, 0, 0, 0.7);
+}
+.sp-onb__back-btn:hover {
+    border-color: rgba(0, 0, 0, 0.4);
+}
+.sp-onb__error {
+    color: #b91c1c;
+    background: rgba(220, 38, 38, 0.08);
+    padding: 10px 14px;
+    border-radius: 8px;
+    font-size: 13px;
+}
+</style>

package/src/pages-tenant/PackageSnapshotPanel.vue

@@ -0,0 +1,241 @@
+<template>
+    <q-card flat bordered class="sp-package-snapshot">
+        <q-card-section class="sp-package-snapshot__head">
+            <div>
+                <div class="sp-package-snapshot__eyebrow">{{ i18n.packageSnapshotTitle }}</div>
+                <p class="sp-package-snapshot__sub">{{ i18n.packageSnapshotSubtitle }}</p>
+            </div>
+            <q-chip
+                v-if="snapshot && capturedAtIso"
+                dense
+                outline
+                color="grey-7"
+                :label="`${i18n.packageSnapshotCapturedAt}: ${formatDate(capturedAtIso)}`"
+            />
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-section v-if="!snapshot" class="sp-package-snapshot__empty">
+            {{ i18n.packageSnapshotNone }}
+        </q-card-section>
+
+        <q-card-section v-else>
+            <dl class="sp-package-snapshot__list">
+                <template v-if="snapshot.label">
+                    <dt>{{ i18n.activePlan }}</dt>
+                    <dd>{{ snapshot.label }}</dd>
+                </template>
+
+                <template v-if="snapshot.planId">
+                    <dt>{{ i18n.packageSnapshotPlanLabel }}</dt>
+                    <dd>
+                        <code>{{ snapshot.planId }}</code>
+                        <span v-if="snapshot.planVersionId" class="sp-package-snapshot__muted">
+                            ({{ i18n.packageSnapshotPlanVersionLabel }}:
+                            <code>{{ snapshot.planVersionId }}</code
+                            >)
+                        </span>
+                    </dd>
+                </template>
+
+                <template v-if="cycleLabel">
+                    <dt>{{ i18n.packageSnapshotCycleLabel }}</dt>
+                    <dd>{{ cycleLabel }}</dd>
+                </template>
+
+                <template v-if="checkoutOfferId">
+                    <dt>{{ i18n.packageSnapshotOfferRef }}</dt>
+                    <dd>
+                        <code>{{ checkoutOfferId }}</code>
+                    </dd>
+                </template>
+
+                <template v-if="snapshot.priceMonthlyNet != null">
+                    <dt>{{ i18n.packageSnapshotPriceMonthly }}</dt>
+                    <dd>{{ formatCurrency(snapshot.priceMonthlyNet) }}</dd>
+                </template>
+
+                <template v-if="snapshot.priceYearlyNet != null">
+                    <dt>{{ i18n.packageSnapshotPriceYearly }}</dt>
+                    <dd>{{ formatCurrency(snapshot.priceYearlyNet) }}</dd>
+                </template>
+
+                <template v-if="snapshot.priceTotalNet != null">
+                    <dt>{{ i18n.packageSnapshotPriceTotal }}</dt>
+                    <dd>
+                        <strong>{{ formatCurrency(snapshot.priceTotalNet) }}</strong>
+                    </dd>
+                </template>
+
+                <template v-if="bundleVersionIds">
+                    <dt>{{ i18n.packageSnapshotBundlesLabel }}</dt>
+                    <dd>
+                        <span
+                            v-if="bundleVersionIds.length === 0"
+                            class="sp-package-snapshot__muted"
+                        >
+                            {{ i18n.packageSnapshotBundlesEmpty }}
+                        </span>
+                        <ul v-else class="sp-package-snapshot__bundles">
+                            <li v-for="id in bundleVersionIds" :key="id">
+                                <code>{{ id }}</code>
+                            </li>
+                        </ul>
+                    </dd>
+                </template>
+            </dl>
+
+            <div class="sp-package-snapshot__raw">
+                <q-btn
+                    flat
+                    dense
+                    no-caps
+                    size="sm"
+                    color="primary"
+                    :label="showRaw ? i18n.packageSnapshotHideRaw : i18n.packageSnapshotShowRaw"
+                    :icon="showRaw ? 'expand_less' : 'expand_more'"
+                    @click="showRaw = !showRaw"
+                />
+                <pre v-if="showRaw" class="sp-package-snapshot__raw-body">{{ rawJson }}</pre>
+            </div>
+        </q-card-section>
+    </q-card>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import type { PackageSnapshotShape } from '../use-tenant-billing.js';
+import type { TenantPlanSectionI18n } from './default-i18n.js';
+
+// PackageSnapshotPanel — P11.4 (METAMODELL §17a):
+// Read-only display of `Subscription.packageSnapshot`. Shows the
+// tenant the frozen website offer (offer snapshot) — plan,
+// bundles, prices, capture timestamp. No actions, no diff against
+// the current state. Deliberately defensive against missing fields, because the
+// snapshot schema keeps expanding and older subscriptions are narrower.
+
+interface Props {
+    snapshot: PackageSnapshotShape | null;
+    checkoutOfferId: string | null;
+    i18n: TenantPlanSectionI18n;
+    formatDate: (iso: string | Date) => string;
+    formatCurrency: (n: number) => string;
+}
+
+const props = defineProps<Props>();
+
+const showRaw = ref(false);
+
+const capturedAtIso = computed(() => {
+    if (!props.snapshot) return null;
+    return typeof props.snapshot.capturedAt === 'string' ? props.snapshot.capturedAt : null;
+});
+
+const bundleVersionIds = computed<string[] | null>(() => {
+    const ids = props.snapshot?.bundleVersionIds;
+    if (!Array.isArray(ids)) return null;
+    return ids.filter((id): id is string => typeof id === 'string');
+});
+
+const cycleLabel = computed(() => {
+    const cycle = props.snapshot?.billingCycle;
+    if (cycle === 'YEARLY') return props.i18n.cycleYearly;
+    if (cycle === 'MONTHLY') return props.i18n.cycleMonthly;
+    return null;
+});
+
+const rawJson = computed(() => {
+    if (!props.snapshot) return '';
+    try {
+        return JSON.stringify(props.snapshot, null, 2);
+    } catch {
+        return String(props.snapshot);
+    }
+});
+</script>
+
+<style scoped>
+.sp-package-snapshot {
+    --sp-text-muted: rgba(0, 0, 0, 0.55);
+    --sp-text-strong: rgba(0, 0, 0, 0.85);
+    --sp-border: rgba(0, 0, 0, 0.08);
+    --sp-pre-bg: rgba(0, 0, 0, 0.04);
+}
+body.body--dark .sp-package-snapshot {
+    --sp-text-muted: rgba(255, 255, 255, 0.62);
+    --sp-text-strong: rgba(255, 255, 255, 0.85);
+    --sp-border: rgba(255, 255, 255, 0.16);
+    --sp-pre-bg: rgba(255, 255, 255, 0.06);
+}
+.sp-package-snapshot__head {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+.sp-package-snapshot__eyebrow {
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--sp-text-muted);
+    margin-bottom: 4px;
+    font-weight: 600;
+}
+.sp-package-snapshot__sub {
+    margin: 0;
+    color: var(--sp-text-muted);
+    font-size: 13px;
+}
+.sp-package-snapshot__empty {
+    color: var(--sp-text-muted);
+    font-size: 13px;
+    font-style: italic;
+}
+.sp-package-snapshot__list {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    column-gap: 24px;
+    row-gap: 8px;
+    margin: 0;
+}
+.sp-package-snapshot__list dt {
+    font-weight: 600;
+    color: var(--sp-text-strong);
+}
+.sp-package-snapshot__list dd {
+    margin: 0;
+    color: var(--sp-text-strong);
+}
+.sp-package-snapshot__muted {
+    color: var(--sp-text-muted);
+    font-size: 13px;
+}
+.sp-package-snapshot__bundles {
+    margin: 0;
+    padding-left: 16px;
+    list-style: disc;
+}
+.sp-package-snapshot__raw {
+    margin-top: 16px;
+    border-top: 1px solid var(--sp-border);
+    padding-top: 12px;
+}
+.sp-package-snapshot__raw-body {
+    margin: 8px 0 0;
+    padding: 12px;
+    background: var(--sp-pre-bg);
+    border-radius: 4px;
+    font-size: 12px;
+    overflow-x: auto;
+    max-height: 320px;
+}
+code {
+    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
+    font-size: 12px;
+    background: var(--sp-pre-bg);
+    padding: 1px 4px;
+    border-radius: 3px;
+}
+</style>