@frigear-nu/events 0.0.0-stage → 0.0.2

package/README.md

@@ -1,3 +1,36 @@
-# Temporary Holding Version
+# @frigear-nu/events
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Database-backed events for the frigear ecosystem: ticket types (free and paid), addons such as food, capacity, sale
+windows, per-user limits, optional membership requirements, Stripe payments through
+[`@frigear-nu/payments`](../payments), QR check-in and opt-in pages built with [`@nuxt/ui`](https://ui.nuxt.com).
+
+## Quick Setup
+
+Requires `@nuxthub/core` with `hub.kv: true`, `@frigear-nu/users`, `@frigear-nu/stripe` and `@frigear-nu/payments`.
+`@frigear-nu/subscriptions` (membership requirements) and `@frigear-nu/menu` are optional.
+
+```ts
+export default defineNuxtConfig({
+  modules: ['@frigear-nu/users', '@frigear-nu/stripe', '@frigear-nu/payments', '@frigear-nu/events'],
+  events: { settings: { pages: { events: true, event: true, tickets: true } } },
+})
+```
+
+Generate and commit a migration for the events tables in your app (see the repository `AGENTS.md`).
+
+Staff routes (event management, check-in) are denied until the host implements the `events:authorize` Nitro hook:
+
+```ts
+export default defineNitroPlugin((nitro) => {
+  nitro.hooks.hook('events:authorize', (ctx) => { ctx.allowed = isStaff(ctx.userId) })
+})
+```
+
+Full documentation: `apps/docs/content/4.modules/25.events.md`.
+
+## Development
+
+```bash
+pnpm --filter @frigear-nu/events test
+pnpm --filter @frigear-nu/events lint
+```

package/dist/module.d.mts

@@ -0,0 +1,168 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { H3Event } from 'h3';
+
+/** A text that is either one string or a map of locale -> string. */
+type Translated = string | Record<string, string>;
+/** `null` = open to everyone, `'any'` = any active subscription, or a list of plan keys. */
+type MembershipRequirement = 'any' | string[] | null;
+type EventStatus = 'draft' | 'published' | 'archived';
+type TicketStatus = 'pending' | 'paid' | 'cancelled' | 'refunded' | 'expired';
+type ModuleOptions = {
+    settings?: {
+        pages?: {
+            /** Event list. `true` = `/events`. */
+            events?: string | boolean;
+            /** Event detail; must contain a `:slug` param. `true` = `/events/:slug`. */
+            event?: string | boolean;
+            /** The signed-in user's tickets. `true` = `/account/tickets`. */
+            tickets?: string | boolean;
+        };
+        /** Minutes an unpaid ticket keeps its seat (the Stripe session expires then). Defaults to `30`. */
+        reservationMinutes?: number;
+    };
+};
+type EventsRuntimeConfig = {
+    reservationMinutes: number;
+    /** Whether `@frigear-nu/subscriptions` is installed (membership requirements can be evaluated). */
+    membershipEnabled: boolean;
+};
+type PublicModuleOptions = {
+    pages: {
+        events?: string;
+        event?: string;
+        tickets?: string;
+    };
+};
+type AddonDto = {
+    id: string;
+    label: Translated;
+    description: Translated | null;
+    price: number;
+    soldOut: boolean;
+};
+type AddonGroupDto = {
+    id: string;
+    title: Translated;
+    required: boolean;
+    multiple: boolean;
+    addons: AddonDto[];
+};
+type TicketTypeDto = {
+    id: string;
+    key: string;
+    name: Translated;
+    description: Translated | null;
+    price: number;
+    currency: string;
+    hidePrice: boolean;
+    isDefault: boolean;
+    requiresMembership: MembershipRequirement;
+    /** Seats left, or null when unlimited. */
+    remaining: number | null;
+    saleStartsAt: string | null;
+    saleEndsAt: string | null;
+    /** `open | not_started | ended | sold_out`. */
+    saleState: 'open' | 'not_started' | 'ended' | 'sold_out';
+    /** Only set for signed-in users: `null` when allowed, otherwise why not. */
+    blocked: 'membership_required' | 'limit_reached' | null;
+    addonGroups: AddonGroupDto[];
+};
+type EventSummaryDto = {
+    id: string;
+    slug: string;
+    name: Translated;
+    description: Translated | null;
+    image: string | null;
+    location: string | null;
+    startsAt: string;
+    endsAt: string | null;
+    requiresMembership: MembershipRequirement;
+};
+type EventDetailDto = EventSummaryDto & {
+    body: Translated | null;
+    locationUrl: string | null;
+    ticketTypes: TicketTypeDto[];
+};
+type PurchaseBody = {
+    ticketTypeId: string;
+    addonIds?: string[];
+    successUrl?: string;
+    cancelUrl?: string;
+};
+type PurchaseResponse = {
+    ticket: TicketDto;
+    /** Redirect target for paid tickets; absent when the ticket was free and is already `paid`. */
+    url?: string;
+};
+type TicketDto = {
+    id: string;
+    eventId: string;
+    eventSlug: string;
+    eventName: Translated;
+    startsAt: string;
+    ticketTypeId: string;
+    ticketTypeName: Translated;
+    status: TicketStatus;
+    addons: Array<{
+        id: string;
+        label: Translated;
+        price: number;
+    }>;
+    amount: number;
+    currency: string;
+    paymentId: string | null;
+    /** The QR payload; only included for paid tickets. */
+    code: string | null;
+    checkedInAt: string | null;
+    createdAt: string;
+};
+type CheckInResponse = {
+    ok: boolean;
+    alreadyCheckedIn: boolean;
+    checkedInAt: string;
+    ticket: TicketDto;
+};
+type PurchaseBeforeContext = {
+    event: H3Event;
+    userId: number;
+    eventId: string;
+    ticketTypeId: string;
+    addonIds: string[];
+};
+type AuthorizeContext = {
+    event: H3Event;
+    userId: number;
+    /** Set `ctx.allowed = true` to let the user manage events / check tickets in. Denied by default. */
+    allowed: boolean;
+};
+type TicketHookContext = {
+    ticket: TicketDto;
+};
+
+declare module '@nuxt/schema' {
+    interface NuxtConfig {
+        events?: ModuleOptions;
+    }
+    interface RuntimeConfig {
+        events: EventsRuntimeConfig;
+    }
+    interface PublicRuntimeConfig {
+        events: PublicModuleOptions;
+    }
+}
+declare module 'nitropack' {
+    interface NitroRuntimeHooks {
+        /** Staff gate (event management, check-in): set `ctx.allowed = true` to let the user in. Denied by default. */
+        'events:authorize': (ctx: AuthorizeContext) => void | Promise<void>;
+        /** Policy hook: throw to deny a purchase. */
+        'events:purchase:before': (ctx: PurchaseBeforeContext) => void | Promise<void>;
+        /** A ticket became `paid` (free tickets immediately, paid ones after the Stripe event). Send confirmations here. */
+        'events:ticket:paid': (ctx: TicketHookContext) => void | Promise<void>;
+        /** A paid ticket was fully refunded. */
+        'events:ticket:refunded': (ctx: TicketHookContext) => void | Promise<void>;
+    }
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { AddonDto, AddonGroupDto, AuthorizeContext, CheckInResponse, EventDetailDto, EventStatus, EventSummaryDto, EventsRuntimeConfig, MembershipRequirement, ModuleOptions, PublicModuleOptions, PurchaseBeforeContext, PurchaseBody, PurchaseResponse, TicketDto, TicketHookContext, TicketStatus, TicketTypeDto, Translated };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "@frigear-nu/events",
+  "configKey": "events",
+  "version": "0.0.2",
+  "builder": {
+    "@nuxt/module-builder": "1.0.3",
+    "unbuild": "unknown"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,113 @@
+import { defineNuxtModule, createResolver, hasNuxtModule, addServerTemplate, addTypeTemplate, addServerImportsDir, addServerPlugin, addImports, addComponentsDir, extendPages, addServerHandler } from '@nuxt/kit';
+import { registerModule, registerLocales, registerDatabaseTable, defineModulePage } from '@frigear-nu/module-kit/utils';
+
+const MODULE_NAME = "@frigear-nu/events";
+function resolvePagePath(setting, defaultPath) {
+  if (typeof setting === "string") return setting;
+  if (setting === true) return defaultPath;
+  return void 0;
+}
+const module$1 = defineNuxtModule({
+  meta: { name: MODULE_NAME, configKey: "events" },
+  defaults: {
+    settings: { pages: {}, reservationMinutes: 30 }
+  },
+  moduleDependencies: {
+    "@nuxthub/core": {
+      version: ">=0.10",
+      defaults: { kv: true }
+    },
+    "@frigear-nu/module-kit": { version: ">=0.0.1" },
+    "@frigear-nu/users": { version: ">=0.0.1" },
+    "@frigear-nu/stripe": { version: ">=0.0.1" },
+    "@frigear-nu/payments": { version: ">=0.0.1" },
+    "@frigear-nu/subscriptions": { version: ">=0.0.1", optional: true },
+    "@frigear-nu/menu": { version: ">=0.0.1", optional: true }
+  },
+  async setup(options, nuxt) {
+    registerModule(MODULE_NAME, nuxt);
+    const resolver = createResolver(import.meta.url);
+    registerLocales(nuxt, resolver.resolve("./runtime/i18n/lang"));
+    const settings = options.settings ?? {};
+    const withMenus = hasNuxtModule("@frigear-nu/menu");
+    const withMembership = hasNuxtModule("@frigear-nu/subscriptions");
+    const eventsPath = resolvePagePath(settings.pages?.events, "/events");
+    const eventPath = resolvePagePath(settings.pages?.event, "/events/:slug");
+    const ticketsPath = resolvePagePath(settings.pages?.tickets, "/account/tickets");
+    nuxt.options.runtimeConfig.events = {
+      reservationMinutes: settings.reservationMinutes ?? 30,
+      membershipEnabled: withMembership
+    };
+    nuxt.options.runtimeConfig.public.events = {
+      pages: { events: eventsPath, event: eventPath, tickets: ticketsPath }
+    };
+    await registerDatabaseTable(nuxt, {
+      resolver,
+      schema: (dialect) => `./runtime/server/db/schema.${dialect}`
+    });
+    addServerTemplate({
+      filename: "#events/membership",
+      getContents: () => withMembership ? `export { hasActiveSubscription } from '@frigear-nu/subscriptions/utils'` : `export const hasActiveSubscription = async () => false`
+    });
+    addTypeTemplate({
+      filename: "types/events-membership.d.ts",
+      getContents: () => `declare module '#events/membership' {
+  export function hasActiveSubscription(userId: number, options?: { plans?: string[], statuses?: string[] }): Promise<boolean>
+}
+`
+    });
+    const route = (method, path, file) => addServerHandler({ route: `/api/events${path}`, method, handler: resolver.resolve(`./runtime/server/routes/${file}`) });
+    route("get", "", "public/events.get");
+    route("get", "/tickets/me", "public/tickets-me.get");
+    route("get", "/tickets/:id", "public/ticket.get");
+    route("post", "/tickets/:id/pay", "public/ticket-pay.post");
+    route("post", "/check-in", "public/check-in.post");
+    route("get", "/:slug", "public/event.get");
+    route("post", "/:slug/purchase", "public/purchase.post");
+    route("get", "/admin/events", "admin/events.get");
+    route("post", "/admin/events", "admin/events.post");
+    route("patch", "/admin/events/:id", "admin/event.patch");
+    route("delete", "/admin/events/:id", "admin/event.delete");
+    route("get", "/admin/events/:id/tickets", "admin/attendees.get");
+    route("post", "/admin/events/:id/ticket-types", "admin/ticket-types.post");
+    route("patch", "/admin/ticket-types/:id", "admin/ticket-type.patch");
+    route("delete", "/admin/ticket-types/:id", "admin/ticket-type.delete");
+    route("post", "/admin/ticket-types/:id/addon-groups", "admin/addon-groups.post");
+    route("patch", "/admin/addon-groups/:id", "admin/addon-group.patch");
+    route("delete", "/admin/addon-groups/:id", "admin/addon-group.delete");
+    route("post", "/admin/addon-groups/:id/addons", "admin/addons.post");
+    route("patch", "/admin/addons/:id", "admin/addon.patch");
+    route("delete", "/admin/addons/:id", "admin/addon.delete");
+    route("post", "/admin/tickets/:id/cancel", "admin/ticket-cancel.post");
+    route("post", "/admin/tickets/:id/refund", "admin/ticket-refund.post");
+    addServerImportsDir(resolver.resolve("./runtime/server/utils"));
+    addServerPlugin(resolver.resolve("./runtime/server/plugins/payment-hooks"));
+    addImports([
+      { name: "useEvents", from: resolver.resolve("./runtime/app/composables/useEvents") },
+      { name: "useEvent", from: resolver.resolve("./runtime/app/composables/useEvents") },
+      { name: "useMyTickets", from: resolver.resolve("./runtime/app/composables/useEvents") },
+      { name: "useEventsLocale", from: resolver.resolve("./runtime/app/composables/useEvents") }
+    ]);
+    addComponentsDir({ path: resolver.resolve("./runtime/app/components") });
+    if (eventsPath || eventPath || ticketsPath) {
+      extendPages((pages) => {
+        const existingPaths = new Set(pages.map((page) => page.path));
+        if (eventsPath && !existingPaths.has(eventsPath)) {
+          pages.push(defineModulePage(MODULE_NAME, { name: "events-list", path: eventsPath, file: resolver.resolve("./runtime/app/pages/events.vue") }));
+        }
+        if (eventPath && !existingPaths.has(eventPath)) {
+          pages.push(defineModulePage(MODULE_NAME, { name: "events-detail", path: eventPath, file: resolver.resolve("./runtime/app/pages/event.vue") }));
+        }
+        if (ticketsPath && !existingPaths.has(ticketsPath)) {
+          pages.push(defineModulePage(MODULE_NAME, { name: "events-tickets", path: ticketsPath, file: resolver.resolve("./runtime/app/pages/tickets.vue") }));
+        }
+      });
+    }
+    if (withMenus) {
+      const { registerMenuSource } = await import('@frigear-nu/menu/utils');
+      registerMenuSource(nuxt, { file: resolver.resolve("./runtime/menus"), menu: "dashboard.account" });
+    }
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/app/components/EventCard.d.vue.ts

@@ -0,0 +1,8 @@
+import type { EventSummaryDto } from '../../../types.js';
+type __VLS_Props = {
+    event: EventSummaryDto;
+    to: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/EventCard.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { translate } from "../../utils";
+const props = defineProps({
+  event: { type: Object, required: true },
+  to: { type: String, required: true }
+});
+const t = useModuleT("events");
+const locale = useEventsLocale();
+const date = computed(() => new Intl.DateTimeFormat(locale.value, { dateStyle: "full", timeStyle: "short" }).format(new Date(props.event.startsAt)));
+</script>
+
+<template>
+  <UCard :ui="{ body: 'flex flex-col gap-2' }">
+    <img
+      v-if="event.image"
+      :src="event.image"
+      :alt="translate(event.name, locale)"
+      class="aspect-[3/1] w-full rounded-md object-cover"
+    >
+    <h3 class="text-lg font-semibold">
+      {{ translate(event.name, locale) }}
+    </h3>
+    <p class="text-sm text-muted">
+      {{ date }}<template v-if="event.location">
+        · {{ event.location }}
+      </template>
+    </p>
+    <p
+      v-if="event.description"
+      class="text-sm"
+    >
+      {{ translate(event.description, locale) }}
+    </p>
+    <div class="flex items-center gap-2">
+      <UBadge
+        v-if="event.requiresMembership"
+        color="warning"
+        variant="subtle"
+        icon="i-lucide-user-star"
+      >
+        {{ t("members", "Members") }}
+      </UBadge>
+      <UButton
+        :to="to"
+        class="ml-auto"
+        trailing-icon="i-lucide-arrow-right"
+      >
+        {{ t("viewEvent", "View event") }}
+      </UButton>
+    </div>
+  </UCard>
+</template>

package/dist/runtime/app/components/EventCard.vue.d.ts

@@ -0,0 +1,8 @@
+import type { EventSummaryDto } from '../../../types.js';
+type __VLS_Props = {
+    event: EventSummaryDto;
+    to: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/EventTicketCard.d.vue.ts

@@ -0,0 +1,12 @@
+import type { TicketDto } from '../../../types.js';
+type __VLS_Props = {
+    ticket: TicketDto;
+    to?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pay: (ticketId: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPay?: ((ticketId: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/EventTicketCard.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { renderSVG } from "uqr";
+import { formatPrice, translate } from "../../utils";
+const props = defineProps({
+  ticket: { type: Object, required: true },
+  to: { type: String, required: false }
+});
+const emit = defineEmits(["pay"]);
+const t = useModuleT("events");
+const locale = useEventsLocale();
+const colors = { paid: "success", pending: "warning", cancelled: "neutral", expired: "neutral", refunded: "error" };
+const qr = computed(() => props.ticket.code ? `data:image/svg+xml;utf8,${encodeURIComponent(renderSVG(props.ticket.code, { border: 1 }))}` : null);
+const showQr = ref(false);
+</script>
+
+<template>
+  <UCard :ui="{ body: 'flex flex-col gap-3' }">
+    <div class="flex items-start gap-2">
+      <div>
+        <h3 class="font-semibold">
+          {{ translate(ticket.eventName, locale) }}
+        </h3>
+        <p class="text-sm text-muted">
+          {{ translate(ticket.ticketTypeName, locale) }}<template
+            v-for="addon in ticket.addons"
+            :key="addon.id"
+          >
+            · {{ translate(addon.label, locale) }}
+          </template>
+        </p>
+      </div>
+      <UBadge
+        class="ml-auto capitalize"
+        :color="colors[ticket.status] ?? 'neutral'"
+        variant="subtle"
+      >
+        {{ t(`tickets.status.${ticket.status}`, ticket.status) }}
+      </UBadge>
+    </div>
+    <p class="text-sm">
+      {{ ticket.amount === 0 ? t("detail.tickets.free", "Free") : formatPrice(ticket.amount, ticket.currency, locale) }}
+      <UBadge
+        v-if="ticket.checkedInAt"
+        color="info"
+        variant="subtle"
+        class="ml-2"
+      >
+        {{ t("checkedIn", "Checked in") }}
+      </UBadge>
+    </p>
+    <div class="flex gap-2">
+      <UButton
+        v-if="ticket.status === 'pending'"
+        @click="emit('pay', ticket.id)"
+      >
+        {{ t("tickets.payNow", "Pay now") }}
+      </UButton>
+      <UButton
+        v-if="qr"
+        variant="subtle"
+        icon="i-lucide-qr-code"
+        @click="showQr = !showQr"
+      >
+        {{ showQr ? t("hideQr", "Hide QR code") : t("tickets.viewQrCode", "Show QR code") }}
+      </UButton>
+      <UButton
+        v-if="to"
+        :to="to"
+        variant="ghost"
+        class="ml-auto"
+      >
+        {{ t("viewEvent", "View event") }}
+      </UButton>
+    </div>
+    <img
+      v-if="showQr && qr"
+      :src="qr"
+      alt="Ticket QR code"
+      class="mx-auto w-56 rounded-md bg-white p-2"
+    >
+  </UCard>
+</template>

package/dist/runtime/app/components/EventTicketCard.vue.d.ts

@@ -0,0 +1,12 @@
+import type { TicketDto } from '../../../types.js';
+type __VLS_Props = {
+    ticket: TicketDto;
+    to?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pay: (ticketId: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPay?: ((ticketId: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/EventTicketPicker.d.vue.ts

@@ -0,0 +1,13 @@
+import type { TicketTypeDto } from '../../../types.js';
+type __VLS_Props = {
+    ticketTypes: TicketTypeDto[];
+    loggedIn: boolean;
+    loading?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    purchase: (ticketTypeId: string, addonIds: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPurchase?: ((ticketTypeId: string, addonIds: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/EventTicketPicker.vue

@@ -0,0 +1,133 @@
+<script setup>
+import { formatPrice, translate } from "../../utils";
+const props = defineProps({
+  ticketTypes: { type: Array, required: true },
+  loggedIn: { type: Boolean, required: true },
+  loading: { type: Boolean, required: false }
+});
+const emit = defineEmits(["purchase"]);
+const locale = useEventsLocale();
+const selectedId = ref();
+const chosen = ref({});
+const selected = computed(() => props.ticketTypes.find((type) => type.id === selectedId.value));
+watch(() => props.ticketTypes, (types) => {
+  if (!selectedId.value || !types.some((type) => type.id === selectedId.value)) {
+    selectedId.value = (types.find((type) => type.isDefault && isAvailable(type)) ?? types.find(isAvailable))?.id;
+  }
+}, { immediate: true });
+watch(selectedId, () => {
+  chosen.value = {};
+});
+function isAvailable(type) {
+  return type.saleState === "open" && !type.blocked;
+}
+const reason = (type) => {
+  if (type.saleState === "sold_out") return "Sold out";
+  if (type.saleState === "not_started") return "Sales not started";
+  if (type.saleState === "ended") return "Sales ended";
+  if (type.blocked === "membership_required") return "Members only";
+  if (type.blocked === "limit_reached") return "Already booked";
+  return null;
+};
+const addonIds = computed(() => Object.values(chosen.value).flat());
+const missingRequired = computed(() => selected.value?.addonGroups.some((group) => group.required && !chosen.value[group.id]?.length) ?? false);
+const total = computed(() => (selected.value?.price ?? 0) + (selected.value?.addonGroups ?? []).flatMap((group) => group.addons).filter((addon) => addonIds.value.includes(addon.id)).reduce((sum, addon) => sum + addon.price, 0));
+function toggle(groupId, addonId, multiple) {
+  const current = chosen.value[groupId] ?? [];
+  chosen.value = {
+    ...chosen.value,
+    [groupId]: multiple ? current.includes(addonId) ? current.filter((id) => id !== addonId) : [...current, addonId] : [addonId]
+  };
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <button
+      v-for="type in ticketTypes"
+      :key="type.id"
+      type="button"
+      class="rounded-lg border p-4 text-left transition disabled:cursor-not-allowed disabled:opacity-60"
+      :class="selectedId === type.id ? 'border-primary ring-1 ring-primary' : 'border-default'"
+      :disabled="!isAvailable(type)"
+      @click="selectedId = type.id"
+    >
+      <div class="flex items-center gap-2">
+        <span class="font-medium">{{ translate(type.name, locale) }}</span>
+        <UBadge
+          v-if="reason(type)"
+          color="neutral"
+          variant="subtle"
+        >
+          {{ reason(type) }}
+        </UBadge>
+        <UBadge
+          v-else-if="type.remaining !== null && type.remaining <= 10"
+          color="warning"
+          variant="subtle"
+        >
+          {{ type.remaining }} left
+        </UBadge>
+        <span
+          v-if="!type.hidePrice"
+          class="ml-auto"
+        >{{ type.price === 0 ? "Free" : formatPrice(type.price, type.currency, locale) }}</span>
+      </div>
+      <p
+        v-if="type.description"
+        class="mt-1 text-sm text-muted"
+      >
+        {{ translate(type.description, locale) }}
+      </p>
+    </button>
+
+    <fieldset
+      v-for="group in selected?.addonGroups ?? []"
+      :key="group.id"
+      class="flex flex-col gap-2"
+    >
+      <legend class="mb-1 font-medium">
+        {{ translate(group.title, locale) }}<span
+          v-if="group.required"
+          class="text-error"
+        > *</span>
+      </legend>
+      <button
+        v-for="addon in group.addons"
+        :key="addon.id"
+        type="button"
+        class="flex items-center gap-2 rounded-md border p-3 text-left disabled:opacity-60"
+        :class="chosen[group.id]?.includes(addon.id) ? 'border-primary ring-1 ring-primary' : 'border-default'"
+        :disabled="addon.soldOut"
+        @click="toggle(group.id, addon.id, group.multiple)"
+      >
+        <span>{{ translate(addon.label, locale) }}</span>
+        <UBadge
+          v-if="addon.soldOut"
+          color="neutral"
+          variant="subtle"
+        >
+          Sold out
+        </UBadge>
+        <span class="ml-auto text-sm">{{ addon.price === 0 ? "Included" : `+ ${formatPrice(addon.price, selected.currency, locale)}` }}</span>
+      </button>
+    </fieldset>
+
+    <UButton
+      v-if="loggedIn"
+      size="lg"
+      block
+      :loading="loading"
+      :disabled="!selected || !isAvailable(selected) || missingRequired"
+      @click="emit('purchase', selected.id, addonIds)"
+    >
+      {{ total === 0 ? "Get free ticket" : `Buy ticket \xB7 ${formatPrice(total, selected?.currency ?? "DKK", locale)}` }}
+    </UButton>
+    <UAlert
+      v-else
+      color="neutral"
+      variant="subtle"
+      title="Sign in to get a ticket."
+    />
+  </div>
+</template>