@frigear-nu/events 0.0.6 → 0.0.8

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

@@ -0,0 +1,123 @@
+<script setup>
+import { formatMoney as formatPrice } from "@frigear-nu/ui/money";
+import { useAdminAction } from "../utils/admin-event";
+defineOptions({ name: "EventAdminAddonGroups" });
+defineProps({
+  ticketType: { type: Object, required: true }
+});
+const emit = defineEmits(["refresh", "addGroup", "editGroup", "addAddon", "editAddon"]);
+const t = useModuleT("events");
+const locale = useEventsLocale();
+const tr = useEventsTranslate();
+const confirmAction = useConfirmDialog();
+const { run } = useAdminAction();
+const removeGroup = async (addonGroup) => {
+  if (!await confirmAction({ title: t("admin.confirmRemoveGroup", "Delete this add-on group and its choices?"), confirmText: t("admin.remove", "Delete"), cancelText: t("admin.cancel", "Cancel"), destructive: true })) return;
+  return run(async () => {
+    await $fetch(`/api/events/admin/addon-groups/${addonGroup.id}`, { method: "DELETE" });
+    emit("refresh");
+  });
+};
+const removeAddon = async (existing) => {
+  if (!await confirmAction({ title: t("admin.confirmRemoveAddon", "Delete this choice?"), confirmText: t("admin.remove", "Delete"), cancelText: t("admin.cancel", "Cancel"), destructive: true })) return;
+  return run(async () => {
+    await $fetch(`/api/events/admin/addons/${existing.id}`, { method: "DELETE" });
+    emit("refresh");
+  });
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-3 p-2">
+    <div
+      v-for="addonGroup in ticketType.addonGroups"
+      :key="addonGroup.id"
+      class="border-default overflow-hidden rounded-lg border bg-default"
+    >
+      <div class="border-default flex items-center justify-between gap-2 border-b px-3 py-2">
+        <div class="min-w-0 text-sm">
+          <span class="font-medium">{{ tr(addonGroup.title) }}</span>
+          <span class="text-muted ms-2 text-xs">
+            {{ addonGroup.required ? t("admin.groupRequired", "required") : t("admin.groupOptional", "optional") }}
+            · {{ addonGroup.multiple ? t("admin.groupMultiple", "several choices") : t("admin.groupSingle", "one choice") }}
+          </span>
+        </div>
+        <div class="flex shrink-0 gap-1">
+          <UButton
+            icon="i-lucide-plus"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            :aria-label="t('admin.addAddon', 'Add choice')"
+            @click="emit('addAddon', addonGroup)"
+          />
+          <UButton
+            icon="i-lucide-pencil"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            :aria-label="t('admin.edit', 'Edit')"
+            @click="emit('editGroup', addonGroup)"
+          />
+          <UButton
+            icon="i-lucide-trash"
+            color="error"
+            variant="ghost"
+            size="xs"
+            :aria-label="t('admin.remove', 'Delete')"
+            @click="removeGroup(addonGroup)"
+          />
+        </div>
+      </div>
+      <ul
+        v-if="addonGroup.addons.length"
+        class="divide-default divide-y"
+      >
+        <li
+          v-for="item in addonGroup.addons"
+          :key="item.id"
+          class="flex items-center justify-between gap-2 px-3 py-2 text-sm"
+        >
+          <div>
+            {{ tr(item.label) }}
+            <span class="text-muted">· {{ item.price === 0 ? t("admin.included", "Included") : `+ ${formatPrice(item.price, ticketType.currency, locale)}` }}<template v-if="item.capacity !== null"> · {{ t("admin.capacity", "capacity") }} {{ item.capacity }}</template></span>
+          </div>
+          <div class="flex shrink-0 gap-1">
+            <UButton
+              icon="i-lucide-pencil"
+              color="neutral"
+              variant="ghost"
+              size="xs"
+              :aria-label="t('admin.edit', 'Edit')"
+              @click="emit('editAddon', addonGroup, item)"
+            />
+            <UButton
+              icon="i-lucide-trash"
+              color="error"
+              variant="ghost"
+              size="xs"
+              :aria-label="t('admin.remove', 'Delete')"
+              @click="removeAddon(item)"
+            />
+          </div>
+        </li>
+      </ul>
+      <p
+        v-else
+        class="text-muted px-3 py-2 text-xs"
+      >
+        {{ t("admin.noAddons", "No choices yet: buyers will see nothing to pick.") }}
+      </p>
+    </div>
+    <div>
+      <UButton
+        icon="i-lucide-plus"
+        color="neutral"
+        variant="outline"
+        size="xs"
+        :label="t('admin.addGroup', 'Add add-on group')"
+        @click="emit('addGroup')"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,19 @@
+import { type AdminAddon, type AdminAddonGroup, type AdminTicketType } from '../utils/admin-event.js';
+type __VLS_Props = {
+    ticketType: AdminTicketType;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    refresh: () => any;
+    addGroup: () => any;
+    editGroup: (group: AdminAddonGroup) => any;
+    addAddon: (group: AdminAddonGroup) => any;
+    editAddon: (group: AdminAddonGroup, addon: AdminAddon) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRefresh?: (() => any) | undefined;
+    onAddGroup?: (() => any) | undefined;
+    onEditGroup?: ((group: AdminAddonGroup) => any) | undefined;
+    onAddAddon?: ((group: AdminAddonGroup) => any) | undefined;
+    onEditAddon?: ((group: AdminAddonGroup, addon: AdminAddon) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,20 @@
+import { type AdminTicketType } from '../utils/admin-event.js';
+type __VLS_Props = {
+    eventId: string;
+    /** Membership rules are only offered when @frigear-nu/subscriptions is installed. */
+    membershipEnabled: boolean;
+    plans: Array<{
+        label: string;
+        value: string;
+    }>;
+};
+declare function open(ticketType?: AdminTicketType): void;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    open: typeof open;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    refresh: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRefresh?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,175 @@
+<script setup>
+import { toCents, fromCents } from "@frigear-nu/ui/money";
+import { DEFAULT_CURRENCY, ticketMdcData } from "../../utils";
+import { useAdminAction } from "../utils/admin-event";
+defineOptions({ name: "EventAdminTicketTypeDialog" });
+const props = defineProps({
+  eventId: { type: String, required: true },
+  membershipEnabled: { type: Boolean, required: true },
+  plans: { type: Array, required: true }
+});
+const emit = defineEmits(["refresh"]);
+const t = useModuleT("events");
+const locale = useEventsLocale();
+const tr = useEventsTranslate();
+const { busy, run } = useAdminAction();
+const modes = computed(() => [
+  { label: t("admin.ruleNone", "Nobody"), value: "none" },
+  { label: t("admin.ruleAny", "Any membership"), value: "any" },
+  { label: t("admin.rulePlans", "Specific memberships"), value: "plans" }
+]);
+const toRule = (value) => value === "any" ? { mode: "any", plans: [] } : Array.isArray(value) && value.length ? { mode: "plans", plans: [...value] } : { mode: "none", plans: [] };
+const fromRule = (rule) => rule.mode === "any" ? "any" : rule.mode === "plans" && rule.plans.length ? [...rule.plans] : null;
+const dialog = ref(false);
+const editingType = ref(null);
+const type = reactive({ key: "", name: void 0, description: void 0, price: 0, capacity: "", requires: toRule(null), excludes: toRule(null) });
+function open(ticketType) {
+  editingType.value = ticketType ?? null;
+  Object.assign(type, {
+    key: ticketType?.key ?? "",
+    name: ticketType?.name,
+    description: ticketType?.description ?? void 0,
+    price: ticketType ? fromCents(ticketType.price, ticketType.currency) : 0,
+    capacity: ticketType?.capacity ?? "",
+    requires: toRule(ticketType?.requiresMembership),
+    excludes: toRule(ticketType?.excludesMembership)
+  });
+  dialog.value = true;
+}
+defineExpose({ open });
+const save = () => run(async () => {
+  const body = {
+    name: type.name,
+    description: type.description ?? null,
+    // Prices are stored in minor units (øre/cents).
+    price: toCents(Number(type.price), editingType.value?.currency ?? DEFAULT_CURRENCY),
+    capacity: type.capacity === "" ? null : Number(type.capacity),
+    ...props.membershipEnabled ? { requiresMembership: fromRule(type.requires), excludesMembership: fromRule(type.excludes) } : {}
+  };
+  if (editingType.value) {
+    await $fetch(`/api/events/admin/ticket-types/${editingType.value.id}`, { method: "PATCH", body });
+  } else {
+    await $fetch(`/api/events/admin/events/${props.eventId}/ticket-types`, { method: "POST", body: { key: type.key, ...body } });
+  }
+  dialog.value = false;
+  emit("refresh");
+}, t("admin.typeSaved", "Ticket type saved."));
+</script>
+
+<template>
+  <UModal
+    v-model:open="dialog"
+    :title="editingType ? t('admin.editType', 'Edit ticket type') : t('admin.addType', 'Add ticket type')"
+  >
+    <template #body>
+      <form
+        id="admin-ticket-type-form"
+        class="flex flex-col gap-4"
+        @submit.prevent="save"
+      >
+        <UFormField :label="t('admin.name', 'Name')">
+          <TranslatedInput
+            v-model="type.name"
+            required
+          />
+        </UFormField>
+        <UFormField :label="t('admin.description', 'Description')">
+          <TranslatedInput
+            v-model="type.description"
+            multiline
+            mdc
+            :mdc-data="ticketMdcData({ ...type, price: toCents(Number(type.price), editingType?.currency ?? DEFAULT_CURRENCY), currency: editingType?.currency ?? DEFAULT_CURRENCY }, tr(type.name), locale)"
+            :rows="2"
+          />
+        </UFormField>
+        <UFormField
+          v-if="!editingType"
+          :label="t('admin.key', 'Key')"
+          :description="t('admin.keyHelp', 'A short unique id, e.g. member.')"
+        >
+          <UInput
+            v-model="type.key"
+            class="w-full"
+            required
+          />
+        </UFormField>
+        <UFormField :label="t('admin.price', 'Price')">
+          <UInput
+            v-model="type.price"
+            type="number"
+            min="0"
+            step="0.01"
+            class="w-full"
+          />
+        </UFormField>
+        <UFormField
+          :label="t('admin.capacity', 'Capacity')"
+          :description="t('admin.capacityHelp', 'Leave empty for unlimited.')"
+        >
+          <UInput
+            v-model="type.capacity"
+            type="number"
+            min="0"
+            class="w-full"
+          />
+        </UFormField>
+
+        <template v-if="membershipEnabled">
+          <UFormField
+            :label="t('admin.requiresMembership', 'Only for members of')"
+            :description="t('admin.requiresHelp', 'Visitors without a matching active membership cannot buy this ticket.')"
+          >
+            <USelect
+              v-model="type.requires.mode"
+              :items="modes"
+              class="w-full"
+            />
+            <USelectMenu
+              v-if="type.requires.mode === 'plans'"
+              v-model="type.requires.plans"
+              :items="plans"
+              value-key="value"
+              multiple
+              class="mt-2 w-full"
+            />
+          </UFormField>
+          <UFormField
+            :label="t('admin.excludesMembership', 'Not for members of')"
+            :description="t('admin.excludesHelp', 'Holders of these memberships cannot buy this ticket, so members and non-members can have separate prices.')"
+          >
+            <USelect
+              v-model="type.excludes.mode"
+              :items="modes"
+              class="w-full"
+            />
+            <USelectMenu
+              v-if="type.excludes.mode === 'plans'"
+              v-model="type.excludes.plans"
+              :items="plans"
+              value-key="value"
+              multiple
+              class="mt-2 w-full"
+            />
+          </UFormField>
+        </template>
+      </form>
+    </template>
+    <template #footer>
+      <div class="flex w-full justify-end gap-2">
+        <UButton
+          variant="subtle"
+          color="neutral"
+          :label="t('admin.cancel', 'Cancel')"
+          @click="dialog = false"
+        />
+        <UButton
+          type="submit"
+          form="admin-ticket-type-form"
+          :loading="busy"
+          :disabled="!tr(type.name)"
+          :label="t('admin.save', 'Save')"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>

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

@@ -0,0 +1,20 @@
+import { type AdminTicketType } from '../utils/admin-event.js';
+type __VLS_Props = {
+    eventId: string;
+    /** Membership rules are only offered when @frigear-nu/subscriptions is installed. */
+    membershipEnabled: boolean;
+    plans: Array<{
+        label: string;
+        value: string;
+    }>;
+};
+declare function open(ticketType?: AdminTicketType): void;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    open: typeof open;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    refresh: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRefresh?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,52 +1,64 @@
 <script setup>
-import { translate } from "../../utils";
-const props = defineProps({
+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)));
+const tr = useEventsTranslate();
 </script>
 
 <template>
-  <UCard :ui="{ body: 'flex flex-col gap-2' }">
+  <NuxtLink
+    :to="to"
+    class="group flex flex-col overflow-hidden rounded-xl bg-default ring ring-default transition hover:shadow-lg"
+  >
     <img
       v-if="event.image"
       :src="event.image"
-      :alt="translate(event.name, locale)"
-      class="aspect-[3/1] w-full rounded-md object-cover"
+      :alt="tr(event.name)"
+      class="aspect-[2/1] w-full 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">
+    <div
+      v-else
+      class="gradient-linear-br-teal-purple aspect-[2/1] w-full"
+    />
+    <div class="flex flex-1 flex-col gap-2 p-5">
       <UBadge
         v-if="event.requiresMembership"
         color="warning"
         variant="subtle"
         icon="i-lucide-user-star"
+        class="self-start"
       >
         {{ t("members", "Members") }}
       </UBadge>
-      <UButton
-        :to="to"
-        class="ml-auto"
-        trailing-icon="i-lucide-arrow-right"
+      <h3 class="text-lg font-semibold text-highlighted">
+        {{ tr(event.name) }}
+      </h3>
+      <p class="text-sm text-muted">
+        <NuxtTime
+          :datetime="event.startsAt"
+          :locale="locale"
+          date-style="full"
+          time-style="short"
+        /><template v-if="event.location">
+          · {{ tr(event.location) }}
+        </template>
+      </p>
+      <p
+        v-if="event.description"
+        class="line-clamp-3 text-sm text-muted"
       >
+        {{ tr(event.description) }}
+      </p>
+      <span class="mt-auto inline-flex items-center gap-1 pt-2 text-sm font-medium text-primary">
         {{ t("viewEvent", "View event") }}
-      </UButton>
+        <UIcon
+          name="i-lucide-arrow-right"
+          class="transition group-hover:translate-x-0.5"
+        />
+      </span>
     </div>
-  </UCard>
+  </NuxtLink>
 </template>

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

@@ -1,6 +1,6 @@
 <script setup>
 import { renderSVG } from "uqr";
-import { formatPrice, translate } from "../../utils";
+import { formatMoney as formatPrice } from "@frigear-nu/ui/money";
 const props = defineProps({
   ticket: { type: Object, required: true },
   to: { type: String, required: false }
@@ -8,6 +8,7 @@ const props = defineProps({
 const emit = defineEmits(["pay"]);
 const t = useModuleT("events");
 const locale = useEventsLocale();
+const tr = useEventsTranslate();
 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);
@@ -18,14 +19,14 @@ const showQr = ref(false);
     <div class="flex items-start gap-2">
       <div>
         <h3 class="font-semibold">
-          {{ translate(ticket.eventName, locale) }}
+          {{ tr(ticket.eventName) }}
         </h3>
         <p class="text-sm text-muted">
-          {{ translate(ticket.ticketTypeName, locale) }}<template
+          {{ tr(ticket.ticketTypeName) }}<template
             v-for="addon in ticket.addons"
             :key="addon.id"
           >
-            · {{ translate(addon.label, locale) }}
+            · {{ tr(addon.label) }}
           </template>
         </p>
       </div>

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

@@ -1,12 +1,17 @@
 <script setup>
-import { formatPrice, translate } from "../../utils";
+import { withMdcData } from "@frigear-nu/ui/markdown";
+import { formatMoney as formatPrice } from "@frigear-nu/ui/money";
+import { DEFAULT_CURRENCY, ticketMdcData } 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 t = useModuleT("events");
 const locale = useEventsLocale();
+const hasMdc = typeof resolveComponent("MDC") !== "string";
+const tr = useEventsTranslate();
 const selectedId = ref();
 const chosen = ref({});
 const selected = computed(() => props.ticketTypes.find((type) => type.id === selectedId.value));
@@ -22,11 +27,12 @@ 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";
+  if (type.saleState === "sold_out") return t("picker.soldOut", "Sold out");
+  if (type.saleState === "not_started") return t("picker.notStarted", "Sales not started");
+  if (type.saleState === "ended") return t("picker.ended", "Sales ended");
+  if (type.blocked === "membership_required") return t("picker.membersOnly", "Members only");
+  if (type.blocked === "membership_excluded") return t("picker.notForMembers", "Not for members");
+  if (type.blocked === "limit_reached") return t("picker.booked", "Already booked");
   return null;
 };
 const addonIds = computed(() => Object.values(chosen.value).flat());
@@ -43,17 +49,23 @@ function toggle(groupId, addonId, multiple) {
 
 <template>
   <div class="flex flex-col gap-4">
+    <p
+      v-if="!ticketTypes.length"
+      class="text-sm text-muted"
+    >
+      {{ t("picker.noTickets", "No tickets are available for this event.") }}
+    </p>
     <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="rounded-xl border p-4 text-left transition hover:border-primary/60 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>
+        <span class="font-medium">{{ tr(type.name) }}</span>
         <UBadge
           v-if="reason(type)"
           color="neutral"
@@ -66,19 +78,26 @@ function toggle(groupId, addonId, multiple) {
           color="warning"
           variant="subtle"
         >
-          {{ type.remaining }} left
+          {{ type.remaining }} {{ t("picker.left", "left") }}
         </UBadge>
         <span
           v-if="!type.hidePrice"
-          class="ml-auto"
-        >{{ type.price === 0 ? "Free" : formatPrice(type.price, type.currency, locale) }}</span>
+          class="ml-auto font-bold text-primary"
+        >{{ type.price === 0 ? t("picker.free", "Free") : formatPrice(type.price, type.currency, locale) }}</span>
       </div>
-      <p
+      <div
         v-if="type.description"
         class="mt-1 text-sm text-muted"
       >
-        {{ translate(type.description, locale) }}
-      </p>
+        <MDC
+          v-if="hasMdc"
+          :value="withMdcData(tr(type.description), ticketMdcData(type, tr(type.name), locale))"
+          class="prose prose-sm max-w-none text-muted"
+        />
+        <template v-else>
+          {{ tr(type.description) }}
+        </template>
+      </div>
     </button>
 
     <fieldset
@@ -87,7 +106,7 @@ function toggle(groupId, addonId, multiple) {
       class="flex flex-col gap-2"
     >
       <legend class="mb-1 font-medium">
-        {{ translate(group.title, locale) }}<span
+        {{ tr(group.title) }}<span
           v-if="group.required"
           class="text-error"
         > *</span>
@@ -96,20 +115,20 @@ function toggle(groupId, addonId, multiple) {
         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="flex items-center gap-2 rounded-lg 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>
+        <span>{{ tr(addon.label) }}</span>
         <UBadge
           v-if="addon.soldOut"
           color="neutral"
           variant="subtle"
         >
-          Sold out
+          {{ t("picker.soldOut", "Sold out") }}
         </UBadge>
-        <span class="ml-auto text-sm">{{ addon.price === 0 ? "Included" : `+ ${formatPrice(addon.price, selected.currency, locale)}` }}</span>
+        <span class="ml-auto text-sm">{{ addon.price === 0 ? t("picker.included", "Included") : `+ ${formatPrice(addon.price, selected.currency, locale)}` }}</span>
       </button>
     </fieldset>
 
@@ -121,13 +140,13 @@ function toggle(groupId, addonId, multiple) {
       :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)}` }}
+      {{ total === 0 ? t("picker.getFree", "Get free ticket") : `${t("picker.buy", "Buy ticket")} \xB7 ${formatPrice(total, selected?.currency ?? DEFAULT_CURRENCY, locale)}` }}
     </UButton>
     <UAlert
       v-else
       color="neutral"
       variant="subtle"
-      title="Sign in to get a ticket."
+      :title="t('picker.signIn', 'Sign in to get a ticket.')"
     />
   </div>
 </template>

package/dist/runtime/app/composables/index.d.ts

@@ -1 +1 @@
-export { useEvents, useEvent, useMyTickets, useEventsLocale } from './useEvents.js';
+export { useEvents, useEvent, useMyTickets, useEventsLocale, useEventsFallbackLocale, useEventsTranslate } from './useEvents.js';

package/dist/runtime/app/composables/index.js

@@ -1 +1 @@
-export { useEvents, useEvent, useMyTickets, useEventsLocale } from "./useEvents.js";
+export { useEvents, useEvent, useMyTickets, useEventsLocale, useEventsFallbackLocale, useEventsTranslate } from "./useEvents.js";