Refactor OrderHistory to improve order status handling

- Update OrderHistory.vue to utilize a new method, getEffectiveStatus, for determining the effective order status based on payment and shipping conditions.
- Modify the display logic for pending orders to check if the order is paid before showing the waiting for invoice message, enhancing clarity for users.
- Ensure consistent status formatting by applying the new method across relevant components.
This commit is contained in:
padreug 2025-09-05 05:16:31 +02:00
parent 99bbde4d05
commit fbac1e079e

View file

@ -81,8 +81,8 @@
</div>
<div class="flex items-center gap-3">
<Badge :variant="getStatusVariant(order.status)" :class="getStatusColor(order.status)">
{{ formatStatus(order.status) }}
<Badge :variant="getStatusVariant(getEffectiveStatus(order))" :class="getStatusColor(getEffectiveStatus(order))">
{{ formatStatus(getEffectiveStatus(order)) }}
</Badge>
<div class="text-right">
<p class="text-lg font-semibold text-foreground">
@ -190,7 +190,7 @@
</div>
<!-- Waiting for Invoice -->
<div v-else-if="order.status === 'pending'" class="mb-4 p-4 bg-muted/50 border border-border rounded-lg">
<div v-else-if="order.status === 'pending' && !isOrderPaid(order)" class="mb-4 p-4 bg-muted/50 border border-border rounded-lg">
<div class="flex items-center gap-2 mb-2">
<div class="w-2 h-2 bg-amber-500 rounded-full animate-pulse"></div>
<span class="font-medium text-foreground">Waiting for Payment Invoice</span>
@ -314,6 +314,15 @@ const isOrderPaid = (order: Order) => {
return order.paymentStatus === 'paid'
}
const getEffectiveStatus = (order: Order) => {
// If paid, return 'paid' regardless of original status
if (isOrderPaid(order)) {
return order.shipped ? 'shipped' : 'paid'
}
// Otherwise return the original status
return order.status
}
const formatDate = (timestamp: number) => {
return new Date(timestamp * 1000).toLocaleDateString('en-US', {
year: 'numeric',