feat: Format event price and wallet balance in PurchaseTicketDialog and events page

- Implemented formatting functions for event ticket prices and wallet balances to enhance readability and user experience.
- Updated PurchaseTicketDialog.vue and events.vue to utilize the new formatting functions, ensuring consistent display of financial information.
This commit is contained in:
padreug 2025-08-10 17:56:20 +02:00
parent 147cf31f0f
commit df7e461c91
4 changed files with 287 additions and 4 deletions

View file

@ -7,6 +7,7 @@ import { Badge } from '@/components/ui/badge'
import { useTicketPurchase } from '@/composables/useTicketPurchase'
import { useAuth } from '@/composables/useAuth'
import { User, Wallet, CreditCard, Zap, Ticket } from 'lucide-vue-next'
import { formatEventPrice, formatWalletBalance } from '@/lib/utils/formatting'
interface Props {
event: {
@ -76,7 +77,7 @@ onUnmounted(() => {
Purchase Ticket
</DialogTitle>
<DialogDescription>
Purchase a ticket for <strong>{{ event.name }}</strong> for {{ event.price_per_ticket }} {{ event.currency }}
Purchase a ticket for <strong>{{ event.name }}</strong> for {{ formatEventPrice(event.price_per_ticket, event.currency) }}
</DialogDescription>
</DialogHeader>
@ -130,7 +131,7 @@ onUnmounted(() => {
<div class="flex items-center gap-2">
<span class="text-sm font-medium">{{ wallet.name }}</span>
<Badge v-if="wallet.balance_msat > 0" variant="default" class="text-xs">
{{ (wallet.balance_msat / 1000).toFixed(0) }} sats
{{ formatWalletBalance(wallet.balance_msat) }}
</Badge>
<Badge v-else variant="secondary" class="text-xs">Empty</Badge>
</div>
@ -158,7 +159,7 @@ onUnmounted(() => {
</div>
<div class="flex justify-between">
<span class="text-sm text-muted-foreground">Price:</span>
<span class="text-sm font-medium">{{ event.price_per_ticket }} {{ event.currency }}</span>
<span class="text-sm font-medium">{{ formatEventPrice(event.price_per_ticket, event.currency) }}</span>
</div>
</div>
</div>