From 371021634670de615610760cb713a798764c19b0 Mon Sep 17 00:00:00 2001
From: xiaomai <xsbugh@gmail.com>
Date: Sat, 9 May 2026 12:32:41 +0800
Subject: [PATCH] feat(ui): display purchaser details on receipt and seat pages

Show customer name and phone number in a new panel
Add English and Chinese translations for the purchaser label
---
 app/composables/useLocale.ts  |  2 ++
 app/pages/receipt/[token].vue | 16 ++++++++++++++++
 app/pages/seat/[token].vue    | 17 +++++++++++++++++
 3 files changed, 35 insertions(+)

diff --git a/app/composables/useLocale.ts b/app/composables/useLocale.ts
index 17cd56c..d4442ad 100644
--- a/app/composables/useLocale.ts
+++ b/app/composables/useLocale.ts
@@ -121,6 +121,7 @@ const messages = {
     'receipt.recipient': 'Recipient',
     'receipt.recipientPhoneLabel': 'Recipient Phone',
     'receipt.guest': 'Guest',
+    'receipt.purchaser': 'Purchaser',
     'receipt.seatsReady': 'Seats ready',
     'receipt.seatsReadyDescription': '{count} {seatLabel} ready to send.',
     'receipt.copied': 'Copied to clipboard.',
@@ -270,6 +271,7 @@ const messages = {
     'receipt.recipient': '接收人',
     'receipt.recipientPhoneLabel': '接收人电话',
     'receipt.guest': '宾客',
+    'receipt.purchaser': '购票人',
     'receipt.seatsReady': '座位已准备好',
     'receipt.seatsReadyDescription': '{count} 个{seatLabel}已准备发送。',
     'receipt.copied': '已复制到剪贴板。',
diff --git a/app/pages/receipt/[token].vue b/app/pages/receipt/[token].vue
index 046a82c..46045ab 100644
--- a/app/pages/receipt/[token].vue
+++ b/app/pages/receipt/[token].vue
@@ -407,6 +407,22 @@ async function openBatchShare() {
         :ui="{ body: 'p-4 sm:p-8' }"
       >
         <div class="mx-auto flex max-w-sm flex-col items-center gap-5 text-center">
+          <div class="surface-panel w-full rounded-lg px-4 py-3 text-left shadow-sm">
+            <p class="text-[11px] font-medium uppercase tracking-wide text-muted">
+              {{ t('receipt.purchaser') }}
+            </p>
+            <div class="mt-2 space-y-2">
+              <div class="flex min-w-0 items-center gap-2 text-sm font-semibold text-highlighted">
+                <UIcon name="i-lucide-user-round" class="size-4 shrink-0 text-muted" />
+                <span class="min-w-0 break-words">{{ receipt.booking.customerName }}</span>
+              </div>
+              <div class="flex min-w-0 items-center gap-2 text-sm text-default">
+                <UIcon name="i-lucide-phone" class="size-4 shrink-0 text-muted" />
+                <span class="min-w-0 break-words">{{ receipt.booking.customerPhone }}</span>
+              </div>
+            </div>
+          </div>
+
           <div class="surface-panel w-full rounded-lg p-3 shadow-sm sm:p-5">
             <QrCodeSvg :value="receipt.receiptUrl" :size="220" />
           </div>
diff --git a/app/pages/seat/[token].vue b/app/pages/seat/[token].vue
index a7d9c83..e436d8e 100644
--- a/app/pages/seat/[token].vue
+++ b/app/pages/seat/[token].vue
@@ -10,6 +10,7 @@ import { formatDateTime } from '../../utils/formatters'
 
 const route = useRoute()
 const apiClient = useApiClient()
+const { t } = useLocale()
 
 const token = String(route.params.token || '')
 
@@ -54,6 +55,22 @@ useSeoMeta({
 
       <div class="grid gap-4 lg:grid-cols-[18rem_minmax(0,1fr)] lg:gap-6">
         <UCard class="surface-card overflow-hidden rounded-lg" :ui="{ body: 'space-y-4 p-4 sm:p-5' }">
+          <div class="surface-panel rounded-lg px-4 py-3 text-left text-sm">
+            <p class="text-[11px] font-medium uppercase tracking-wide text-muted">
+              {{ t('receipt.purchaser') }}
+            </p>
+            <div class="mt-2 space-y-2">
+              <div class="flex min-w-0 items-center gap-2 font-semibold text-highlighted">
+                <UIcon name="i-lucide-user-round" class="size-4 shrink-0 text-muted" />
+                <span class="min-w-0 break-words">{{ receipt.booking.customerName }}</span>
+              </div>
+              <div class="flex min-w-0 items-center gap-2 text-default">
+                <UIcon name="i-lucide-phone" class="size-4 shrink-0 text-muted" />
+                <span class="min-w-0 break-words">{{ receipt.booking.customerPhone }}</span>
+              </div>
+            </div>
+          </div>
+
           <div class="space-y-1 text-center">
             <p class="text-sm font-semibold text-highlighted">
               QR Code