ORDERDETAILS COMPONENT

Comprehensive order view with items, shipping, payment, and status timeline.

PROPS

PropTypeDescription
orderOrderOrder data to display
showTimelinebooleanShow status timeline
onTrackShipment() => voidTrack shipment handler

Complete Order View

Order FAN-2025-001

Placed on December 20, 2025

Order Items

Classic Band Tee

Size: M, Color: Black

Quantity: 1

€ 29,99

Shipping Address

John Doe

123 Main Street

Apt 4B

San Francisco, CA 94102

Tracking Information

USPS

9400111899561234567890

ORDER SUMMARY

Subtotal€ 29,99
Shipping€ 7,99
Tax€ 3,20
Total€ 41,18

ORDER STATUS

Order Placed

Dec 20, 2025, 2:30 PM

Processing

Dec 20, 2025, 2:30 PM

Shipped

Dec 21, 2025, 9:00 AM

Delivered

USAGE EXAMPLES

IMPLEMENTATION

1import { OrderDetails } from '@/components/fanbace/order-details';
2import { useOrder } from '@/lib/sdk';
3
4export default function OrderPage({ orderId }: Props) {
5 const { order, loading } = useOrder(orderId);
6
7 if (loading) return <Loader />;
8
9 return (
10 <OrderDetails
11 order={order}
12 showTimeline
13 onTrackShipment={() => window.open(order.tracking.trackingUrl)}
14 />
15 );
16}