dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: checkout improvements

Browse Source 
1. Hidden fields now respected in SPA
   - Added isFieldHidden helper to check if PHP sets type to 'hidden'
   - Country/state/city fields conditionally rendered based on API response
   - Set default country value for hidden country fields (Indonesia-only stores)

2. Coupon discount now shows correct amount
   - Added calculate_totals() before reading discount
   - Changed coupons response to include {code, discount, type} per coupon
   - Added discount_total at root level for frontend compatibility

3. Order details page now shows shipping info and AWB tracking
   - Added shipping_lines, tracking_number, tracking_url to Order interface
   - Added Shipping Method section with courier name and cost
   - Added AWB tracking section for processing/completed orders
   - Track Shipment button with link to tracking URL
This commit is contained in:
Dwindi Ramadhana
2026-01-08 20:51:26 +07:00
parent 26faa008cb
commit e8c60b3a09
3 changed files with 190 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
customer-spa/src/pages/Account/OrderDetails.tsx
View File

@@ -12,6 +12,13 @@ interface OrderItem {
image?: string;
}
interface ShippingLine {
id: number;
method_title: string;
method_id: string;
total: string;
}
interface Order {
id: number;
order_number: string;
@@ -26,6 +33,11 @@ interface Order {
shipping: any;
payment_method_title: string;
needs_shipping: boolean;
shipping_lines?: ShippingLine[];
// Tracking info (may be added by shipping plugins)
tracking_number?: string;
tracking_url?: string;
meta_data?: Array<{ key: string; value: string }>;
}
export default function OrderDetails() {
@@ -100,7 +112,7 @@ export default function OrderDetails() {
<ArrowLeft className="w-4 h-4" />
Back to Orders
</Link>
<div className="flex items-center justify-between mb-6">
<h1 className="text-2xl font-bold">Order #{order.order_number}</h1>
<span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(order.status)}`}>
@@ -211,6 +223,59 @@ export default function OrderDetails() {
{order.payment_method_title || 'Not specified'}
</div>
</div>
{/* Shipping Method - only for physical product orders */}
{order.needs_shipping && order.shipping_lines && order.shipping_lines.length > 0 && (
<div className="mt-6 border rounded-lg">
<div className="bg-gray-50 px-4 py-3 border-b">
<h2 className="text-base font-medium">Shipping Method</h2>
</div>
<div className="p-4">
{order.shipping_lines.map((line) => (
<div key={line.id} className="flex justify-between text-sm">
<span>{line.method_title}</span>
<span className="font-medium">{line.total}</span>
</div>
))}
{/* AWB Tracking - show for processing or completed orders */}
{(order.status === 'processing' || order.status === 'completed') && (
<div className="mt-4 pt-4 border-t">
{order.tracking_number ? (
<div className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-sm text-gray-600">Tracking Number</span>
<span className="font-medium font-mono">{order.tracking_number}</span>
</div>
{order.tracking_url ? (
<a
href={order.tracking_url}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground text-sm font-medium rounded-lg hover:bg-primary/90 transition-colors"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
Track Shipment
</a>
) : (
<p className="text-sm text-gray-500">
Use the tracking number above to track your shipment on your courier's website.
</p>
)}
</div>
) : (
<div className="text-sm text-gray-500">
<p>Your order is being processed. Tracking information will be available once your order has been shipped.</p>
</div>
)}
</div>
)}
</div>
</div>
)}
</div>
);
}