feat: Update PurchaseTicketDialog to enhance ticket purchase confirmation

- Modify PurchaseTicketDialog.vue to improve the ticket purchase success message and display a ticket icon.
- Add a button for users to easily navigate to their tickets area.
- Refactor the layout for better visual presentation of ticket information.
This commit is contained in:
padreug 2025-08-01 21:58:35 +02:00
parent 72e51ea10c
commit a6a65800a4
2 changed files with 13 additions and 9 deletions

View file

@ -6,7 +6,7 @@ import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { useTicketPurchase } from '@/composables/useTicketPurchase'
import { useAuth } from '@/composables/useAuth'
import { User, Wallet, CreditCard, Zap } from 'lucide-vue-next'
import { User, Wallet, CreditCard, Zap, Ticket } from 'lucide-vue-next'
interface Props {
event: {
@ -222,16 +222,18 @@ onUnmounted(() => {
<div class="text-center space-y-2">
<h3 class="text-lg font-semibold text-green-600">Ticket Purchased Successfully!</h3>
<p class="text-sm text-muted-foreground">
Your ticket has been purchased. Here's your ticket QR code:
Your ticket has been purchased and is now available in your tickets area.
</p>
</div>
<div class="bg-muted/50 rounded-lg p-4">
<div class="flex flex-col items-center space-y-3">
<img :src="ticketQRCode" alt="Ticket QR code" class="w-48 h-48 border rounded-lg" />
<div class="text-center w-full">
<p class="text-xs text-muted-foreground mb-1">Ticket ID</p>
<div class="bg-background border rounded px-2 py-1 max-w-full">
<div class="bg-muted/50 rounded-lg p-4 w-full">
<div class="text-center space-y-3">
<div class="flex justify-center">
<Ticket class="w-12 h-12 text-green-600" />
</div>
<div>
<p class="text-sm font-medium">Ticket ID</p>
<div class="bg-background border rounded px-2 py-1 max-w-full mt-1">
<p class="text-xs font-mono break-all">{{ purchasedTicketId }}</p>
</div>
</div>
@ -239,6 +241,9 @@ onUnmounted(() => {
</div>
<div class="space-y-3 w-full">
<Button @click="() => $router.push('/my-tickets')" class="w-full">
View My Tickets
</Button>
<Button variant="outline" @click="handleClose" class="w-full">
Close
</Button>

View file

@ -27,7 +27,6 @@ const showProfileDialog = ref(false)
const navigation = computed<NavigationItem[]>(() => [
{ name: t('nav.home'), href: '/' },
{ name: t('nav.events'), href: '/events' },
{ name: 'My Tickets', href: '/my-tickets' },
{ name: t('nav.support'), href: '/support' },
])