padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Enhance ticket purchasing and management with QR code support

Browse source 
- Update PurchaseTicketDialog.vue to display a ticket QR code after successful purchase and manage its visibility.
- Refactor useTicketPurchase composable to include ticket QR code generation and state management.
- Introduce QR code functionality in MyTickets.vue for displaying ticket QR codes, allowing users to toggle visibility.
- Improve user experience by providing clear feedback on ticket purchase status and QR code availability.
This commit is contained in:
padreug 2025-08-01 21:54:13 +02:00
parent 63d636a8a0
commit de8db6a12b
3 changed files with 341 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/components/events/PurchaseTicketDialog.vue
View file

@ -40,7 +40,10 @@ const {
purchaseTicketForEvent,
handleOpenLightningWallet,
resetPaymentState,
cleanup
cleanup,
ticketQRCode,
purchasedTicketId,
showTicketQR
} = useTicketPurchase()
async function handlePurchase() {
@ -179,7 +182,7 @@ onUnmounted(() => {
</div>
<!-- Payment QR Code and Status -->
<div v-else class="py-4 flex flex-col items-center gap-4">
<div v-else-if="paymentHash && !showTicketQR" class="py-4 flex flex-col items-center gap-4">
<div class="text-center space-y-2">
<h3 class="text-lg font-semibold">Payment Required</h3>
<p v-if="isPayingWithWallet" class="text-sm text-muted-foreground">
@ -190,7 +193,7 @@ onUnmounted(() => {
</p>
</div>
<div v-if="!isPayingWithWallet" class="bg-muted/50 rounded-lg p-4">
<div v-if="!isPayingWithWallet && qrCode" class="bg-muted/50 rounded-lg p-4">
<img :src="qrCode" alt="Lightning payment QR code" class="w-64 h-64 mx-auto" />
</div>
@ -213,6 +216,32 @@ onUnmounted(() => {
</div>
</div>
</div>
<!-- Ticket QR Code (After Successful Purchase) -->
<div v-else-if="showTicketQR && ticketQRCode" class="py-4 flex flex-col items-center gap-4">
<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:
</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">
<p class="text-xs text-muted-foreground">Ticket ID</p>
<p class="text-xs font-mono">{{ purchasedTicketId }}</p>
</div>
</div>
</div>
<div class="space-y-3 w-full">
<Button variant="outline" @click="handleClose" class="w-full">
Close
</Button>
</div>
</div>
</DialogContent>
</Dialog>
</template>

270
src/composables/useTicketPurchase.ts
View file

@ -1,201 +1,218 @@
import { ref, computed } from 'vue'
import { ref, computed, onUnmounted } from 'vue'
import { purchaseTicket, checkPaymentStatus, payInvoiceWithWallet } from '@/lib/api/events'
import { useAuth } from './useAuth'
import { toast } from 'vue-sonner'
interface Wallet {
id: string
user: string
name: string
adminkey: string
inkey: string
deleted: boolean
created_at: string
updated_at: string
currency?: string
balance_msat: number
extra?: {
icon: string
color: string
pinned: boolean
}
}
export function useTicketPurchase() {
const { isAuthenticated, currentUser } = useAuth()
// State
const isLoading = ref(false)
const error = ref<string | null>(null)
const paymentHash = ref('')
const paymentRequest = ref('')
const qrCode = ref('')
const paymentHash = ref<string | null>(null)
const paymentRequest = ref<string | null>(null)
const qrCode = ref<string | null>(null)
const isPaymentPending = ref(false)
const paymentCheckInterval = ref<number | null>(null)
const isPayingWithWallet = ref(false)
// Ticket QR code state
const ticketQRCode = ref<string | null>(null)
const purchasedTicketId = ref<string | null>(null)
const showTicketQR = ref(false)
const canPurchase = computed(() => {
return isAuthenticated.value && !isLoading.value
})
// Computed properties
const canPurchase = computed(() => isAuthenticated.value && currentUser.value)
const userDisplay = computed(() => {
if (!currentUser.value) return null
return {
name: currentUser.value.username || currentUser.value.email || 'Anonymous',
id: currentUser.value.id,
shortId: currentUser.value.id.slice(0, 8) + '...' + currentUser.value.id.slice(-8)
name: currentUser.value.username || currentUser.value.id,
shortId: currentUser.value.id.slice(0, 8)
}
})
const userWallets = computed(() => currentUser.value?.wallets || [])
const hasWalletWithBalance = computed(() =>
userWallets.value.some((wallet: any) => wallet.balance_msat > 0)
)
const userWallets = computed(() => {
if (!currentUser.value) return [] as Wallet[]
return currentUser.value.wallets || []
})
const hasWalletWithBalance = computed(() => {
return userWallets.value.some((wallet: Wallet) => wallet.balance_msat > 0)
})
// Generate QR code for Lightning payment
async function generateQRCode(bolt11: string) {
try {
const QRCode = await import('qrcode')
qrCode.value = await QRCode.toDataURL(`lightning:${bolt11}`)
const qrcode = await import('qrcode')
const dataUrl = await qrcode.toDataURL(bolt11, {
width: 256,
margin: 2,
color: {
dark: '#000000',
light: '#FFFFFF'
}
})
qrCode.value = dataUrl
} catch (err) {
console.error('Failed to generate QR code:', err)
console.error('Error generating QR code:', err)
error.value = 'Failed to generate QR code'
}
}
async function payWithWallet(paymentRequest: string) {
if (!currentUser.value || !userWallets.value.length) {
throw new Error('No wallet available for payment')
// Generate QR code for ticket
async function generateTicketQRCode(ticketId: string) {
try {
const qrcode = await import('qrcode')
const ticketUrl = `ticket://${ticketId}`
const dataUrl = await qrcode.toDataURL(ticketUrl, {
width: 128,
margin: 2,
color: {
dark: '#000000',
light: '#FFFFFF'
}
})
ticketQRCode.value = dataUrl
return dataUrl
} catch (error) {
console.error('Error generating ticket QR code:', error)
return null
}
}
// Find the first wallet with sufficient balance
const wallet = userWallets.value.find((w: Wallet) => w.balance_msat > 0)
if (!wallet) {
// Pay with wallet
async function payWithWallet(paymentRequest: string) {
const walletWithBalance = userWallets.value.find((wallet: any) => wallet.balance_msat > 0)
if (!walletWithBalance) {
throw new Error('No wallet with sufficient balance found')
}
try {
isPayingWithWallet.value = true
const result = await payInvoiceWithWallet(paymentRequest, wallet.id, wallet.adminkey)
toast.success(`Payment successful! Fee: ${result.fee_msat} msat`)
return result
} catch (err) {
const message = err instanceof Error ? err.message : 'Failed to pay with wallet'
toast.error(message)
throw err
} finally {
isPayingWithWallet.value = false
await payInvoiceWithWallet(paymentRequest, walletWithBalance.id, walletWithBalance.adminkey)
return true
} catch (error) {
console.error('Wallet payment failed:', error)
throw error
}
}
// Purchase ticket for event
async function purchaseTicketForEvent(eventId: string) {
if (!isAuthenticated.value) {
error.value = 'Please log in to purchase tickets'
toast.error('Please log in to purchase tickets')
return
if (!canPurchase.value) {
throw new Error('User must be authenticated to purchase tickets')
}
try {
isLoading.value = true
error.value = ''
isLoading.value = true
error.value = null
paymentHash.value = null
paymentRequest.value = null
qrCode.value = null
ticketQRCode.value = null
purchasedTicketId.value = null
showTicketQR.value = false
// Step 1: Get the invoice
const result = await purchaseTicket(eventId)
paymentHash.value = result.payment_hash
paymentRequest.value = result.payment_request
await generateQRCode(result.payment_request)
// Step 2: Try to pay with wallet if user has balance
try {
// Get the invoice
const invoice = await purchaseTicket(eventId)
paymentHash.value = invoice.payment_hash
paymentRequest.value = invoice.payment_request
// Generate QR code for payment
await generateQRCode(invoice.payment_request)
// Try to pay with wallet if available
if (hasWalletWithBalance.value) {
isPayingWithWallet.value = true
try {
await payWithWallet(result.payment_request)
// Payment successful, start monitoring for ticket confirmation
startPaymentStatusCheck(eventId, result.payment_hash)
return
} catch (walletPaymentError) {
console.log('Wallet payment failed, showing QR code for manual payment:', walletPaymentError)
// Fall back to QR code payment
startPaymentStatusCheck(eventId, result.payment_hash)
await payWithWallet(invoice.payment_request)
// If wallet payment succeeds, proceed to check payment status
await startPaymentStatusCheck(eventId, invoice.payment_hash)
} catch (walletError) {
// If wallet payment fails, fall back to manual payment
console.log('Wallet payment failed, falling back to manual payment:', walletError)
isPayingWithWallet.value = false
await startPaymentStatusCheck(eventId, invoice.payment_hash)
}
} else {
// No wallet balance, show QR code for manual payment
startPaymentStatusCheck(eventId, result.payment_hash)
// No wallet balance, proceed with manual payment
await startPaymentStatusCheck(eventId, invoice.payment_hash)
}
toast.success('Payment request generated successfully')
} catch (err) {
const message = err instanceof Error ? err.message : 'Failed to generate payment request'
error.value = message
toast.error(message)
throw err
error.value = err instanceof Error ? err.message : 'Failed to purchase ticket'
console.error('Error purchasing ticket:', err)
} finally {
isLoading.value = false
}
}
function startPaymentStatusCheck(eventId: string, paymentHash: string) {
// Start payment status check
async function startPaymentStatusCheck(eventId: string, hash: string) {
isPaymentPending.value = true
// Clear any existing interval
if (paymentCheckInterval.value) {
clearInterval(paymentCheckInterval.value)
}
let checkInterval: NodeJS.Timeout | null = null
// Check payment status every 2 seconds
paymentCheckInterval.value = window.setInterval(async () => {
const checkPayment = async () => {
try {
const status = await checkPaymentStatus(eventId, paymentHash)
const result = await checkPaymentStatus(eventId, hash)
if (status.paid) {
// Payment successful
clearInterval(paymentCheckInterval.value!)
paymentCheckInterval.value = null
if (result.paid) {
isPaymentPending.value = false
if (checkInterval) {
clearInterval(checkInterval)
}
toast.success('Payment successful! Your ticket has been purchased.')
// Generate ticket QR code
if (result.ticket_id) {
purchasedTicketId.value = result.ticket_id
await generateTicketQRCode(result.ticket_id)
showTicketQR.value = true
}
// Reset payment state
resetPaymentState()
return { success: true, ticketId: status.ticket_id }
toast.success('Ticket purchased successfully!')
}
} catch (err) {
console.error('Error checking payment status:', err)
// Don't show error to user for status checks, just log it
}
}, 2000)
}
// Check immediately
await checkPayment()
// Then check every 2 seconds
checkInterval = setInterval(checkPayment, 2000)
}
// Stop payment status check
function stopPaymentStatusCheck() {
if (paymentCheckInterval.value) {
clearInterval(paymentCheckInterval.value)
paymentCheckInterval.value = null
}
isPaymentPending.value = false
}
// Reset payment state
function resetPaymentState() {
paymentHash.value = ''
paymentRequest.value = ''
qrCode.value = ''
error.value = ''
stopPaymentStatusCheck()
isLoading.value = false
error.value = null
paymentHash.value = null
paymentRequest.value = null
qrCode.value = null
isPaymentPending.value = false
isPayingWithWallet.value = false
ticketQRCode.value = null
purchasedTicketId.value = null
showTicketQR.value = false
}
// Open Lightning wallet
function handleOpenLightningWallet() {
if (paymentRequest.value) {
window.location.href = `lightning:${paymentRequest.value}`
window.open(`lightning:${paymentRequest.value}`, '_blank')
}
}
// Cleanup on unmount
// Cleanup function
function cleanup() {
stopPaymentStatusCheck()
}
// Lifecycle
onUnmounted(() => {
cleanup()
})
return {
// State
isLoading,
@ -205,16 +222,21 @@ export function useTicketPurchase() {
qrCode,
isPaymentPending,
isPayingWithWallet,
ticketQRCode,
purchasedTicketId,
showTicketQR,
// Computed
canPurchase,
userDisplay,
userWallets,
hasWalletWithBalance,
// Actions
purchaseTicketForEvent,
payWithWallet,
handleOpenLightningWallet,
resetPaymentState,
cleanup,
generateTicketQRCode
}
}

177
src/pages/MyTickets.vue
View file

@ -1,6 +1,6 @@
<!-- eslint-disable vue/multi-word-component-names -->
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useUserTickets } from '@/composables/useUserTickets'
import { useAuth } from '@/composables/useAuth'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
@ -9,7 +9,7 @@ import { ScrollArea } from '@/components/ui/scroll-area'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { format } from 'date-fns'
import { Ticket, User, Calendar, CreditCard, CheckCircle, Clock, AlertCircle } from 'lucide-vue-next'
import { Ticket, User, Calendar, CreditCard, CheckCircle, Clock, AlertCircle, QrCode } from 'lucide-vue-next'
const { isAuthenticated, userDisplay } = useAuth()
const {
@ -23,6 +23,10 @@ const {
refresh
} = useUserTickets()
// QR code state
const qrCodes = ref<Record<string, string>>({})
const showQRCode = ref<Record<string, boolean>>({})
function formatDate(dateStr: string) {
return format(new Date(dateStr), 'PPP')
}
@ -37,6 +41,35 @@ function getTicketStatus(ticket: any) {
return { status: 'paid', label: 'Paid', icon: CreditCard, color: 'text-blue-600' }
}
async function generateQRCode(ticketId: string) {
if (qrCodes.value[ticketId]) return qrCodes.value[ticketId]
try {
const qrcode = await import('qrcode')
const ticketUrl = `ticket://${ticketId}`
const dataUrl = await qrcode.toDataURL(ticketUrl, {
width: 128,
margin: 2,
color: {
dark: '#000000',
light: '#FFFFFF'
}
})
qrCodes.value[ticketId] = dataUrl
return dataUrl
} catch (error) {
console.error('Error generating QR code:', error)
return null
}
}
function toggleQRCode(ticketId: string) {
showQRCode.value[ticketId] = !showQRCode.value[ticketId]
if (showQRCode.value[ticketId] && !qrCodes.value[ticketId]) {
generateQRCode(ticketId)
}
}
onMounted(async () => {
if (isAuthenticated.value) {
await refresh()
@ -103,9 +136,19 @@ onMounted(async () => {
<CardHeader>
<div class="flex items-center justify-between">
<CardTitle class="text-foreground text-sm">Ticket #{{ ticket.id.slice(0, 8) }}</CardTitle>
<Badge :variant="getTicketStatus(ticket).status === 'pending' ? 'secondary' : 'default'">
{{ getTicketStatus(ticket).label }}
</Badge>
<div class="flex items-center gap-2">
<Badge :variant="getTicketStatus(ticket).status === 'pending' ? 'secondary' : 'default'">
{{ getTicketStatus(ticket).label }}
</Badge>
<Button
variant="ghost"
size="sm"
@click="toggleQRCode(ticket.id)"
class="h-6 w-6 p-0"
>
<QrCode class="h-4 w-4" />
</Button>
</div>
</div>
<CardDescription>
Event ID: {{ ticket.event }}
@ -132,6 +175,25 @@ onMounted(async () => {
<span class="text-muted-foreground">Registered:</span>
<span class="text-sm">{{ formatDate(ticket.reg_timestamp) }}</span>
</div>
<!-- QR Code Section -->
<div v-if="showQRCode[ticket.id]" class="mt-4 pt-4 border-t">
<div class="flex flex-col items-center space-y-2">
<img
v-if="qrCodes[ticket.id]"
:src="qrCodes[ticket.id]"
alt="Ticket QR Code"
class="w-32 h-32 border rounded-lg"
/>
<div v-else class="w-32 h-32 border rounded-lg flex items-center justify-center">
<span class="text-xs text-muted-foreground">Loading...</span>
</div>
<div class="text-center">
<p class="text-xs text-muted-foreground">Ticket ID</p>
<p class="text-xs font-mono">{{ ticket.id }}</p>
</div>
</div>
</div>
</div>
</CardContent>
</Card>
@ -146,9 +208,19 @@ onMounted(async () => {
<CardHeader>
<div class="flex items-center justify-between">
<CardTitle class="text-foreground text-sm">Ticket #{{ ticket.id.slice(0, 8) }}</CardTitle>
<Badge variant="default">
{{ getTicketStatus(ticket).label }}
</Badge>
<div class="flex items-center gap-2">
<Badge variant="default">
{{ getTicketStatus(ticket).label }}
</Badge>
<Button
variant="ghost"
size="sm"
@click="toggleQRCode(ticket.id)"
class="h-6 w-6 p-0"
>
<QrCode class="h-4 w-4" />
</Button>
</div>
</div>
<CardDescription>
Event ID: {{ ticket.event }}
@ -175,6 +247,25 @@ onMounted(async () => {
<span class="text-muted-foreground">Registered:</span>
<span class="text-sm">{{ formatDate(ticket.reg_timestamp) }}</span>
</div>
<!-- QR Code Section -->
<div v-if="showQRCode[ticket.id]" class="mt-4 pt-4 border-t">
<div class="flex flex-col items-center space-y-2">
<img
v-if="qrCodes[ticket.id]"
:src="qrCodes[ticket.id]"
alt="Ticket QR Code"
class="w-32 h-32 border rounded-lg"
/>
<div v-else class="w-32 h-32 border rounded-lg flex items-center justify-center">
<span class="text-xs text-muted-foreground">Loading...</span>
</div>
<div class="text-center">
<p class="text-xs text-muted-foreground">Ticket ID</p>
<p class="text-xs font-mono">{{ ticket.id }}</p>
</div>
</div>
</div>
</div>
</CardContent>
</Card>
@ -189,9 +280,19 @@ onMounted(async () => {
<CardHeader>
<div class="flex items-center justify-between">
<CardTitle class="text-foreground text-sm">Ticket #{{ ticket.id.slice(0, 8) }}</CardTitle>
<Badge variant="secondary">
{{ getTicketStatus(ticket).label }}
</Badge>
<div class="flex items-center gap-2">
<Badge variant="secondary">
{{ getTicketStatus(ticket).label }}
</Badge>
<Button
variant="ghost"
size="sm"
@click="toggleQRCode(ticket.id)"
class="h-6 w-6 p-0"
>
<QrCode class="h-4 w-4" />
</Button>
</div>
</div>
<CardDescription>
Event ID: {{ ticket.event }}
@ -214,6 +315,25 @@ onMounted(async () => {
<span class="text-muted-foreground">Time:</span>
<span class="text-sm">{{ formatTime(ticket.time) }}</span>
</div>
<!-- QR Code Section -->
<div v-if="showQRCode[ticket.id]" class="mt-4 pt-4 border-t">
<div class="flex flex-col items-center space-y-2">
<img
v-if="qrCodes[ticket.id]"
:src="qrCodes[ticket.id]"
alt="Ticket QR Code"
class="w-32 h-32 border rounded-lg"
/>
<div v-else class="w-32 h-32 border rounded-lg flex items-center justify-center">
<span class="text-xs text-muted-foreground">Loading...</span>
</div>
<div class="text-center">
<p class="text-xs text-muted-foreground">Ticket ID</p>
<p class="text-xs font-mono">{{ ticket.id }}</p>
</div>
</div>
</div>
</div>
</CardContent>
</Card>
@ -228,9 +348,19 @@ onMounted(async () => {
<CardHeader>
<div class="flex items-center justify-between">
<CardTitle class="text-foreground text-sm">Ticket #{{ ticket.id.slice(0, 8) }}</CardTitle>
<Badge variant="default">
{{ getTicketStatus(ticket).label }}
</Badge>
<div class="flex items-center gap-2">
<Badge variant="default">
{{ getTicketStatus(ticket).label }}
</Badge>
<Button
variant="ghost"
size="sm"
@click="toggleQRCode(ticket.id)"
class="h-6 w-6 p-0"
>
<QrCode class="h-4 w-4" />
</Button>
</div>
</div>
<CardDescription>
Event ID: {{ ticket.event }}
@ -257,6 +387,25 @@ onMounted(async () => {
<span class="text-muted-foreground">Registered:</span>
<span class="text-sm">{{ formatDate(ticket.reg_timestamp) }}</span>
</div>
<!-- QR Code Section -->
<div v-if="showQRCode[ticket.id]" class="mt-4 pt-4 border-t">
<div class="flex flex-col items-center space-y-2">
<img
v-if="qrCodes[ticket.id]"
:src="qrCodes[ticket.id]"
alt="Ticket QR Code"
class="w-32 h-32 border rounded-lg"
/>
<div v-else class="w-32 h-32 border rounded-lg flex items-center justify-center">
<span class="text-xs text-muted-foreground">Loading...</span>
</div>
<div class="text-center">
<p class="text-xs text-muted-foreground">Ticket ID</p>
<p class="text-xs font-mono">{{ ticket.id }}</p>
</div>
</div>
</div>
</div>
</CardContent>
</Card>