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:
parent
99bbde4d05
commit
fbac1e079e
1 changed files with 12 additions and 3 deletions
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue