aiolabs/webapp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor OrderHistory and introduce payment status checker

Browse source 
- Update OrderHistory.vue to utilize a new method for determining effective order status, enhancing clarity in payment and shipping status display.
- Add a new composable, usePaymentStatusChecker, to handle payment status checks via LNbits API, improving order payment verification.
- Modify nostrmarketService to streamline order updates with consolidated status handling for paid and shipped states.
- Enhance market store initialization to include payment status and paid fields for better order management.
- Update market types to include new fields for payment and shipping status, ensuring consistency across the application.
This commit is contained in:
padreug 2025-09-05 05:16:25 +02:00
parent 4258ea87c4
commit 99bbde4d05
5 changed files with 230 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/modules/market/components/OrderHistory.vue
View file

@ -105,16 +105,30 @@
</div>
</div>
<!-- Paid Section -->
<div v-if="isOrderPaid(order)" class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg dark:bg-green-950 dark:border-green-800">
<div class="flex items-center gap-2">
<CheckCircle class="w-5 h-5 text-green-600" />
<span class="font-medium text-green-800 dark:text-green-200">Payment Confirmed</span>
<Badge variant="default" class="text-xs bg-green-600 text-white">
Paid
</Badge>
</div>
<p v-if="order.paidAt" class="text-sm text-green-700 dark:text-green-300 mt-1">
Paid on {{ formatDate(order.paidAt) }}
</p>
</div>
<!-- Payment Section -->
<div v-if="order.paymentRequest" class="mb-4 p-4 bg-muted/50 border border-border rounded-lg">
<div v-if="order.paymentRequest && !isOrderPaid(order)" class="mb-4 p-4 bg-muted/50 border border-border rounded-lg">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<Zap class="w-4 h-4 text-yellow-500" />
<span class="font-medium text-foreground">Payment Required</span>
</div>
<Badge :variant="order.paymentStatus === 'paid' ? 'default' : 'secondary'" class="text-xs"
:class="order.paymentStatus === 'paid' ? 'text-green-600' : 'text-amber-600'">
{{ order.paymentStatus === 'paid' ? 'Paid' : 'Pending' }}
<Badge :variant="isOrderPaid(order) ? 'default' : 'secondary'" class="text-xs"
:class="isOrderPaid(order) ? 'text-green-600' : 'text-amber-600'">
{{ isOrderPaid(order) ? 'Paid' : 'Pending' }}
</Badge>
</div>
@ -237,7 +251,7 @@ import { auth } from '@/composables/useAuth'
import { useLightningPayment } from '../composables/useLightningPayment'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Package, Store, Zap, Copy, QrCode } from 'lucide-vue-next'
import { Package, Store, Zap, Copy, QrCode, CheckCircle } from 'lucide-vue-next'
import { toast } from 'vue-sonner'
import type { OrderStatus } from '@/stores/market'
@ -286,11 +300,20 @@ const sortedOrders = computed(() => {
const totalOrders = computed(() => allOrders.value.length)
const pendingOrders = computed(() => allOrders.value.filter(o => o.status === 'pending').length)
const paidOrders = computed(() => allOrders.value.filter(o => o.status === 'paid').length)
const pendingPayments = computed(() => allOrders.value.filter(o => o.paymentStatus === 'pending').length)
const pendingPayments = computed(() => allOrders.value.filter(o => !isOrderPaid(o)).length)
const isDevelopment = computed(() => import.meta.env.DEV)
// Methods
const isOrderPaid = (order: Order) => {
// Prioritize the 'paid' field from Nostr status updates (type 2)
if (order.paid !== undefined) {
return order.paid
}
// Fallback to paymentStatus field
return order.paymentStatus === 'paid'
}
const formatDate = (timestamp: number) => {
return new Date(timestamp * 1000).toLocaleDateString('en-US', {
year: 'numeric',