@fluid-app/portal-sdk 0.1.36 → 0.1.37

package/dist/{src-B7JarYAL.cjs → src-DvDLW4sK.cjs}

@@ -517,53 +517,6 @@ function OrdersList({ customerId, onOrderClick, onSubscriptionClick, t, pageSize
 	});
 }
 //#endregion
-//#region ../../orders/ui/src/components/section.tsx
-function Section({ title, children, footer }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Card, { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardTitle, { children: title }) }),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardContent, { children }),
-		footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "px-6 pb-6",
-			children: footer
-		})
-	] });
-}
-//#endregion
-//#region ../../orders/ui/src/components/shipping-address-card.tsx
-function ShippingAddressCard({ name, address, title = "Shipping Address", className }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Card, {
-		className,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardTitle, { children: title }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardContent, { children: !address ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "text-muted-foreground text-sm",
-			children: "No shipping address available"
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-start gap-2",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Truck, { className: "text-muted-foreground mt-0.5 mr-2 h-4 w-4 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex min-w-0 flex-1 flex-col",
-				children: [
-					name && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-foreground min-w-0 truncate text-sm",
-						title: name,
-						children: name
-					}),
-					address.line1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-muted-foreground text-sm",
-						children: address.line1
-					}),
-					address.line2 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-muted-foreground text-sm",
-						children: address.line2
-					}),
-					address.line3 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-muted-foreground text-sm",
-						children: address.line3
-					})
-				]
-			})]
-		}) })]
-	});
-}
-//#endregion
 //#region ../../orders/ui/src/lib/format.ts
 function startCase(str) {
 	if (!str) return "";
@@ -573,71 +526,6 @@ function formatCurrency(symbol, value) {
 	return `${symbol}${Number(value).toFixed(2)}`;
 }
 //#endregion
-//#region ../../orders/ui/src/components/payment-method-card.tsx
-function capitalizeFirstLetter(str) {
-	if (!str || str.length === 0) return "";
-	return str.charAt(0).toUpperCase() + str.slice(1);
-}
-function PaymentDetails({ card }) {
-	const paymentTitle = card.payment_title || (card.source ? startCase(card.source) : null);
-	if (card.source === "card" || card.card_type) {
-		const cardType = capitalizeFirstLetter(card.card_type || "Card");
-		const lastFour = card.last_four_digits || "XXXX";
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex w-full flex-row justify-between",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex flex-row items-center gap-2.5",
-				children: [card.logo_url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-					src: card.logo_url,
-					alt: `${cardType} Logo`,
-					className: "h-6 w-9 object-contain",
-					width: 35,
-					height: 24
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "bg-muted text-muted-foreground flex h-6 w-9 items-center justify-center rounded text-xs",
-					children: cardType.charAt(0)
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "text-sm font-medium",
-					children: [
-						cardType,
-						" * ",
-						lastFour
-					]
-				})]
-			})
-		});
-	}
-	const displayTitle = paymentTitle || "Payment Method";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "flex w-full flex-row justify-between",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex flex-row items-center gap-2.5",
-			children: [card.logo_url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-				src: card.logo_url,
-				alt: `${displayTitle} Logo`,
-				className: "h-6 w-9 object-contain",
-				width: 35,
-				height: 24
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex h-6 w-9 items-center justify-center rounded bg-blue-100 text-xs font-medium text-blue-600 dark:bg-blue-900/30 dark:text-blue-400",
-				children: displayTitle.charAt(0)
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-sm font-medium",
-				children: displayTitle
-			})]
-		})
-	});
-}
-function PaymentMethodCard({ paymentMethod, title = "Payment Method", className }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Card, {
-		className,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardTitle, { children: title }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardContent, { children: paymentMethod ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaymentDetails, { card: paymentMethod }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "text-muted-foreground text-sm",
-			children: "No payment method"
-		}) })]
-	});
-}
-//#endregion
 //#region ../../orders/ui/src/components/order-status-badge.tsx
 const statusColorMap = {
 	paid: "green",
@@ -664,231 +552,391 @@ function OrderStatusBadge({ status, className }) {
 }
 //#endregion
 //#region ../../orders/ui/src/components/order-detail.tsx
-function formatAddress(address) {
-	return {
-		line1: address.address1 ?? "",
-		line2: [[address.city, address.state].filter(Boolean).join(", "), address.postal_code].filter(Boolean).join(" "),
-		line3: address.country_code ?? ""
-	};
-}
 function OrderDetailSkeleton() {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "space-y-6",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-16 w-full rounded-lg" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "space-y-6 lg:col-span-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-64 w-full rounded-lg" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-48 w-full rounded-lg" })]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "space-y-6",
+		className: "flex flex-col lg:grid lg:grid-cols-8",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "bg-muted flex flex-col items-center px-8 lg:col-span-4",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "w-full max-w-lg py-6",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-32 w-full rounded-lg" }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-32 w-full rounded-lg" }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-32 w-full rounded-lg" })
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "mb-4 h-6 w-48" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "space-y-4",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center space-x-4",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-24 w-24 rounded" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex-1 space-y-2",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-3/4" }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-1/2" }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-1/4" })
+								]
+							})]
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mt-6 space-y-2",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-full" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-full" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-full" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-5 w-full" })
+						]
+					})
 				]
-			})]
-		})]
-	});
-}
-function OrderItemRow({ item }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-start gap-4 py-4 first:pt-0 last:pb-0",
-		children: [
-			item.image_url && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-				src: item.image_url,
-				alt: item.title,
-				className: "h-16 w-16 flex-shrink-0 rounded-lg object-cover"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "min-w-0 flex-1",
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "bg-background px-8 pt-4 lg:col-span-4",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mx-auto max-w-lg lg:mx-0 lg:mr-auto",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "text-foreground font-medium",
-						children: item.title
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "mb-4 h-10 w-full rounded" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mt-6 space-y-4",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-5 w-40" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-16 w-full rounded" })]
 					}),
-					item.ordered_variant.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "text-muted-foreground text-sm",
-						children: item.ordered_variant.map((v) => v.value).join(" / ")
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mt-6 space-y-4",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-5 w-40" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-16 w-full rounded" })]
 					}),
-					item.sku && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-						className: "text-muted-foreground text-xs",
-						children: ["SKU: ", item.sku]
-					}),
-					item.subscription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusBadge, {
-						color: "blue",
-						size: "xs",
-						className: "mt-1",
-						children: "Subscription"
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mt-6 space-y-4",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-5 w-40" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-16 w-full rounded" })]
 					})
 				]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "text-right text-sm",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "text-foreground font-medium",
+			})
+		})]
+	});
+}
+function OrderItemRow({ item }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center space-x-4 py-4",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "relative shrink-0",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "bg-muted h-24 w-24 overflow-hidden rounded",
+				children: item.image_url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+					src: item.image_url,
+					alt: item.title,
+					width: 96,
+					height: 96,
+					className: "h-full w-full object-cover"
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "text-muted-foreground flex h-full w-full items-center justify-center",
+					children: "No image"
+				})
+			}), item.quantity > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "bg-foreground text-background absolute -top-2 -right-2 z-10 flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium",
+				children: item.quantity
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex min-w-0 flex-1 flex-col space-y-0.5",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-foreground truncate text-sm font-medium",
+					title: item.title,
+					children: item.title
+				}),
+				item.ordered_variant.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-muted-foreground text-sm",
+					children: item.ordered_variant.map((v) => v.value).join(" / ")
+				}),
+				item.sku && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					className: "text-muted-foreground text-xs",
+					children: ["SKU: ", item.sku]
+				}),
+				item.subscription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusBadge, {
+					color: "blue",
+					size: "xs",
+					className: "mt-1",
+					children: "Subscription"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-foreground text-sm font-medium",
 					children: item.display_total
-				}), item.quantity > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-					className: "text-muted-foreground",
+				}),
+				item.quantity > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					className: "text-muted-foreground text-xs",
 					children: [
 						item.display_price,
 						" x ",
 						item.quantity
 					]
-				})]
-			})
-		]
+				})
+			]
+		})]
 	});
 }
-function OrderPriceSummary({ order }) {
+function OrderItemsSection({ order }) {
+	const visibleItems = order.items.filter((item) => item.display_to_customer !== false);
 	const sym = order.currency_symbol || "$";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Section, {
-		title: "Summary",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dl", {
-			className: "space-y-2 text-sm",
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+		className: "bg-muted flex w-full flex-col items-center px-8 lg:col-span-4",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex w-full max-w-lg flex-col",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex justify-between",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
-						className: "text-muted-foreground",
-						children: "Subtotal"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
-						className: "text-foreground font-medium",
-						children: order.sub_total_in_currency
-					})]
+					className: "mt-4",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h2", {
+						className: "text-foreground mb-2 text-lg font-medium",
+						children: [
+							"Items (",
+							visibleItems.length,
+							")"
+						]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", { className: "border-border" })]
 				}),
-				Number(order.discount) > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex justify-between",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dt", {
-						className: "text-muted-foreground",
-						children: ["Discount", order.discount_codes?.length ? ` (${order.discount_codes.join(", ")})` : ""]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dd", {
-						className: "text-foreground font-medium",
-						children: ["-", order.discount_in_currency]
-					})]
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "divide-border divide-y",
+					children: visibleItems.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OrderItemRow, { item }, item.id))
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex justify-between",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
-						className: "text-muted-foreground",
-						children: "Shipping"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
-						className: "text-foreground font-medium",
-						children: order.free_shipping ? "Free" : order.shipping_total_for_display
-					})]
+					className: "border-border mb-4 border-t pt-4",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex justify-between text-sm",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-muted-foreground font-medium",
+								children: "Subtotal"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-muted-foreground font-medium",
+								children: order.sub_total_in_currency
+							})]
+						}),
+						Number(order.discount) > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "mt-2 flex justify-between text-sm",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+								className: "text-muted-foreground font-medium",
+								children: ["Discount", order.discount_codes?.length ? ` (${order.discount_codes.join(", ")})` : ""]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+								className: "text-muted-foreground font-medium",
+								children: ["-", order.discount_in_currency]
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "mt-2 flex justify-between text-sm",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-muted-foreground font-medium",
+								children: "Shipping"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-muted-foreground font-medium",
+								children: order.free_shipping ? "Free" : order.shipping_total_for_display
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "mt-2 flex justify-between text-sm",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+								className: "text-muted-foreground font-medium",
+								children: ["Tax", order.price_inclusive_of_tax && order.price_inclusive_tax_name ? ` (${order.price_inclusive_tax_name}, included)` : ""]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-muted-foreground font-medium",
+								children: order.tax_in_currency
+							})]
+						}),
+						order.points_applied_amount_in_currency != null && order.points_applied_amount_in_currency > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "mt-2 flex justify-between text-sm",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-muted-foreground font-medium",
+								children: "Points Applied"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-muted-foreground font-medium",
+								children: `-${formatCurrency(sym, order.points_applied_amount_in_currency)}`
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "mt-4 flex items-center justify-between text-base font-medium",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-muted-foreground text-sm font-medium",
+								children: "Total"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-foreground text-base font-bold",
+								children: order.total_in_currency
+							})]
+						})
+					]
+				})
+			]
+		})
+	});
+}
+function OrderDetailsSection({ order }) {
+	const paymentDetails = order.payment_details;
+	const cardDetails = paymentDetails?.details;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "bg-background px-8 pt-4 lg:col-span-4",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "mx-auto max-w-lg lg:mx-0 lg:mr-auto",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "border-border mb-6 border-b pb-6",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-wrap items-center gap-3",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-muted-foreground text-sm",
+									children: "Payment:"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OrderStatusBadge, { status: order.payment_status })]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-muted-foreground text-sm",
+									children: "Fulfillment:"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OrderStatusBadge, { status: order.fulfillment_status })]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-muted-foreground text-sm",
+									children: "Delivery:"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OrderStatusBadge, { status: order.delivery_status })]
+							})
+						]
+					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex justify-between",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dt", {
-						className: "text-muted-foreground",
-						children: ["Tax", order.price_inclusive_of_tax && order.price_inclusive_tax_name ? ` (${order.price_inclusive_tax_name}, included)` : ""]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
-						className: "text-foreground font-medium",
-						children: order.tax_in_currency
+					className: "border-border mb-6 border-b pb-6",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+							className: "text-foreground mb-3 text-sm/6 font-semibold",
+							children: "Order Info"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "divide-border flex divide-x",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex-1 pr-4",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "text-muted-foreground text-sm",
+										children: "Order Number"
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "text-foreground font-medium",
+										children: order.order_number
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex-1 px-4",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "text-muted-foreground text-sm",
+										children: "Channel"
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "text-foreground font-medium",
+										children: startCase(order.channel)
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex-1 pl-4 text-right",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "text-muted-foreground text-sm",
+										children: "Date"
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "text-foreground font-medium",
+										children: new Date(order.created_at).toLocaleDateString("en-US", {
+											year: "numeric",
+											month: "short",
+											day: "numeric"
+										})
+									})]
+								})
+							]
+						}),
+						order.email && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "mt-3",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "text-muted-foreground text-sm",
+								children: "Email"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "text-foreground text-sm font-medium",
+								children: order.email
+							})]
+						})
+					]
+				}),
+				paymentDetails && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "border-border mb-6 border-b pb-4",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-muted-foreground mb-1 text-sm",
+						children: "Payment Method"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "text-foreground flex items-center gap-2 text-sm",
+						children: [cardDetails?.logo_url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+							src: cardDetails.logo_url,
+							alt: cardDetails.card_type ?? "Card",
+							className: "h-6 w-9 object-contain",
+							width: 35,
+							height: 24
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "bg-muted text-muted-foreground flex h-6 w-9 items-center justify-center rounded text-xs",
+							children: (paymentDetails.payment_title || paymentDetails.payment_type || "P").charAt(0)
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "font-medium",
+							children: [cardDetails?.card_type ? startCase(cardDetails.card_type) : paymentDetails.payment_title || startCase(paymentDetails.payment_type), cardDetails?.last_four ? ` ending in ${cardDetails.last_four}` : ""]
+						})]
 					})]
 				}),
-				order.points_applied_amount_in_currency != null && order.points_applied_amount_in_currency > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex justify-between",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
-						className: "text-muted-foreground",
-						children: "Points Applied"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dd", {
-						className: "text-foreground font-medium",
-						children: ["-", formatCurrency(sym, order.points_applied_amount_in_currency)]
+				order.ship_to && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "border-border mb-6 border-b pb-4",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-muted-foreground mb-1 text-sm",
+						children: "Shipping Address"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "text-foreground flex items-start gap-2 text-sm",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Truck, { className: "text-muted-foreground mt-0.5 mr-1 h-4 w-4 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex flex-col",
+							children: [
+								order.ship_to.name && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "font-medium",
+									children: order.ship_to.name
+								}),
+								order.ship_to.address1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: order.ship_to.address1 }),
+								(order.ship_to.city || order.ship_to.state || order.ship_to.postal_code) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: [[order.ship_to.city, order.ship_to.state].filter(Boolean).join(", "), order.ship_to.postal_code].filter(Boolean).join(" ") }),
+								order.ship_to.country_code && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: order.ship_to.country_code })
+							]
+						})]
 					})]
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "border-border flex justify-between border-t pt-2",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
-						className: "text-foreground font-semibold",
-						children: "Total"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
-						className: "text-foreground font-semibold",
-						children: order.total_in_currency
+				order.bill_to && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "border-border mb-6 border-b pb-4",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-muted-foreground mb-1 text-sm",
+						children: "Billing Address"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "text-foreground text-sm",
+						children: [
+							order.bill_to.name && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "font-medium",
+								children: order.bill_to.name
+							}),
+							order.bill_to.address1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: order.bill_to.address1 }),
+							(order.bill_to.city || order.bill_to.state || order.bill_to.postal_code) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: [[order.bill_to.city, order.bill_to.state].filter(Boolean).join(", "), order.bill_to.postal_code].filter(Boolean).join(" ") }),
+							order.bill_to.country_code && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: order.bill_to.country_code })
+						]
 					})]
+				}),
+				order.shipping_method && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "border-border mb-6 border-b pb-4",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "text-muted-foreground mb-1 text-sm",
+							children: "Shipping Method"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "text-foreground text-sm font-medium",
+							children: order.shipping_method.title
+						}),
+						order.shipping_method.delivery_time_estimate && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "text-muted-foreground mt-1 text-xs",
+							children: ["Est. ", order.shipping_method.delivery_time_estimate]
+						})
+					]
 				})
 			]
 		})
 	});
 }
-function OrderStatusRow({ order }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "border-border bg-card flex flex-wrap items-center gap-3 rounded-lg border p-6",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-muted-foreground text-sm",
-					children: "Payment:"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OrderStatusBadge, { status: order.payment_status })]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-muted-foreground text-sm",
-					children: "Fulfillment:"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OrderStatusBadge, { status: order.fulfillment_status })]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-muted-foreground text-sm",
-					children: "Delivery:"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OrderStatusBadge, { status: order.delivery_status })]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "text-muted-foreground ml-auto text-sm",
-				children: new Date(order.created_at).toLocaleDateString("en-US", {
-					year: "numeric",
-					month: "long",
-					day: "numeric"
-				})
-			})
-		]
-	});
-}
-function OrderInfoCard({ order }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Section, {
-		title: "Order Info",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dl", {
-			className: "space-y-2 text-sm",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
-					className: "text-muted-foreground",
-					children: "Order Number"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
-					className: "text-foreground font-medium",
-					children: order.order_number
-				})] }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
-					className: "text-muted-foreground",
-					children: "Channel"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
-					className: "text-foreground font-medium",
-					children: startCase(order.channel)
-				})] }),
-				order.email && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
-					className: "text-muted-foreground",
-					children: "Email"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
-					className: "text-foreground font-medium",
-					children: order.email
-				})] })
-			]
-		})
-	});
-}
-function ShippingMethodCard({ method }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Section, {
-		title: "Shipping Method",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "text-muted-foreground text-sm",
-			children: method.title
-		}), method.delivery_time_estimate && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-			className: "text-muted-foreground mt-1 text-xs",
-			children: ["Est. ", method.delivery_time_estimate]
-		})]
-	});
-}
 function OrderDetail({ token, onNotFound, onError }) {
 	const { data, isLoading, error } = useOrder(token);
 	const order = data?.order;
@@ -909,45 +957,9 @@ function OrderDetail({ token, onNotFound, onError }) {
 	]);
 	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OrderDetailSkeleton, {});
 	if (!order) return null;
-	const visibleItems = order.items.filter((item) => item.display_to_customer !== false);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "space-y-6",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OrderStatusRow, { order }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "space-y-6 lg:col-span-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Section, {
-					title: `Items (${order.items_count})`,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "divide-border divide-y",
-						children: visibleItems.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OrderItemRow, { item }, item.id))
-					})
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OrderPriceSummary, { order })]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "space-y-6",
-				children: [
-					order.payment_details && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaymentMethodCard, { paymentMethod: {
-						source: order.payment_details.payment_type,
-						payment_title: order.payment_details.payment_title,
-						logo_url: order.payment_details.details.logo_url,
-						card_type: order.payment_details.details.card_type,
-						last_four_digits: order.payment_details.details.last_four
-					} }),
-					order.ship_to && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShippingAddressCard, {
-						name: order.ship_to.name,
-						address: formatAddress(order.ship_to),
-						title: "Shipping Address"
-					}),
-					order.bill_to && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShippingAddressCard, {
-						name: order.bill_to.name,
-						address: formatAddress(order.bill_to),
-						title: "Billing Address"
-					}),
-					order.shipping_method && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShippingMethodCard, { method: order.shipping_method }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OrderInfoCard, { order })
-				]
-			})]
-		})]
+		className: "flex flex-col lg:grid lg:grid-cols-8",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OrderItemsSection, { order }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OrderDetailsSection, { order })]
 	});
 }
 //#endregion
@@ -982,4 +994,4 @@ Object.defineProperty(exports, "TableColumn", {
 	}
 });
 
-//# sourceMappingURL=src-B7JarYAL.cjs.map
+//# sourceMappingURL=src-DvDLW4sK.cjs.map