@fluid-app/portal-sdk 0.1.149 → 0.1.151

package/dist/order-status-badge-C5K03hR8.cjs

@@ -0,0 +1,592 @@
+require("./chunk-9hOWP6kD.cjs");
+const require_src = require("./src-DvJ4o9Sq.cjs");
+const require_SearchSort = require("./SearchSort-29u6qhlf.cjs");
+let react = require("react");
+let _tanstack_react_query = require("@tanstack/react-query");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+//#region ../../orders/core/src/orders-api-context.ts
+const OrdersApiContext = (0, react.createContext)(null);
+const OrdersApiProvider = OrdersApiContext.Provider;
+function useOrdersApi() {
+	const api = (0, react.useContext)(OrdersApiContext);
+	if (!api) throw new Error("useOrdersApi must be used within an OrdersCoreProvider");
+	return api;
+}
+//#endregion
+//#region ../../orders/core/src/provider.tsx
+function OrdersCoreProvider({ api, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OrdersApiProvider, {
+		value: api,
+		children
+	});
+}
+//#endregion
+//#region ../../orders/core/src/query-keys.ts
+const ordersKeys = {
+	all: ["orders"],
+	list: (params) => [
+		...ordersKeys.all,
+		"list",
+		params
+	],
+	detail: (orderToken) => [
+		...ordersKeys.all,
+		"detail",
+		orderToken
+	]
+};
+const portalTenantOrdersKeys = {
+	all: ["portalTenantOrders"],
+	list: (params) => [
+		...portalTenantOrdersKeys.all,
+		"list",
+		params
+	],
+	detail: (id) => [
+		...portalTenantOrdersKeys.all,
+		"detail",
+		id
+	]
+};
+//#endregion
+//#region ../../orders/core/src/hooks/use-customer-orders.ts
+function useCustomerOrders(params, options) {
+	const api = useOrdersApi();
+	return (0, _tanstack_react_query.useQuery)({
+		queryKey: ordersKeys.list(params),
+		queryFn: () => {
+			if (!api.fetchCustomerOrders) throw new Error("fetchCustomerOrders not implemented on this OrdersApi");
+			return api.fetchCustomerOrders(params);
+		},
+		enabled: options?.enabled ?? true
+	});
+}
+//#endregion
+//#region ../../orders/core/src/hooks/use-portal-tenant-order.ts
+function usePortalTenantOrder(id, options) {
+	const api = useOrdersApi();
+	return (0, _tanstack_react_query.useQuery)({
+		queryKey: portalTenantOrdersKeys.detail(id),
+		queryFn: () => {
+			if (!api.fetchOrderById) throw new Error("fetchOrderById not implemented on this OrdersApi");
+			return api.fetchOrderById(id);
+		},
+		enabled: (options?.enabled ?? true) && !!id
+	});
+}
+//#endregion
+//#region ../../orders/core/src/utils/format-order-total.ts
+function formatOrderTotal(order) {
+	if (order.order_total_after_points_redemption != null) return `${order.currency_symbol || "$"}${Number(order.order_total_after_points_redemption).toFixed(2)}`;
+	return order.total_display_amount || `${order.currency_symbol || "$"}${Number(order.amount).toFixed(2)}`;
+}
+//#endregion
+//#region ../../orders/ui/src/components/pagination-footer.tsx
+function PaginationFooter({ currentPage, totalPages, pageSize, totalItems, onPageChange, cursorPaginationMode, hasNextPage, hasPrevPage, onCursorNext, onCursorPrev }) {
+	const isCursor = !!cursorPaginationMode;
+	const isPrevDisabled = isCursor ? !hasPrevPage : currentPage === 1;
+	const isNextDisabled = isCursor ? !hasNextPage : totalPages === 0 || currentPage === totalPages;
+	const handlePrevClick = () => {
+		if (isCursor) onCursorPrev?.();
+		else onPageChange?.(currentPage - 1);
+	};
+	const handleNextClick = () => {
+		if (isCursor) onCursorNext?.();
+		else onPageChange?.(currentPage + 1);
+	};
+	const displayText = (() => {
+		const start = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
+		const end = Math.min(currentPage * pageSize, totalItems);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			"Showing ",
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "font-medium",
+				children: start
+			}),
+			" to",
+			" ",
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "font-medium",
+				children: end
+			}),
+			" of",
+			" ",
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "font-medium",
+				children: totalItems
+			}),
+			" results"
+		] });
+	})();
+	const buttonBase = "relative inline-flex items-center px-3 py-2 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "border-border flex items-center justify-between border-t px-4 py-3 sm:px-6",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-1 justify-between sm:hidden",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: handlePrevClick,
+				disabled: isPrevDisabled,
+				className: require_src.cn(buttonBase, "border-border bg-background text-foreground hover:bg-accent rounded-md border"),
+				children: "Previous"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: handleNextClick,
+				disabled: isNextDisabled,
+				className: require_src.cn(buttonBase, "border-border bg-background text-foreground hover:bg-accent ml-3 rounded-md border"),
+				children: "Next"
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "hidden sm:flex sm:flex-1 sm:items-center sm:justify-between",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-muted-foreground text-xs",
+				children: displayText
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("nav", {
+				"aria-label": "Pagination",
+				className: "isolate inline-flex -space-x-px rounded-md shadow-sm",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						onClick: handlePrevClick,
+						disabled: isPrevDisabled,
+						className: require_src.cn(buttonBase, "border-border text-muted-foreground hover:bg-accent rounded-l-md border"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "sr-only",
+							children: "Previous"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, { className: "h-4 w-4" })]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "border-border bg-background text-foreground relative inline-flex items-center border px-4 py-2 text-sm font-medium",
+						children: [
+							currentPage,
+							" / ",
+							totalPages
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						onClick: handleNextClick,
+						disabled: isNextDisabled,
+						className: require_src.cn(buttonBase, "border-border text-muted-foreground hover:bg-accent rounded-r-md border"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "sr-only",
+							children: "Next"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "h-4 w-4" })]
+					})
+				]
+			})]
+		})]
+	});
+}
+//#endregion
+//#region ../../orders/ui/src/components/status-badge.tsx
+const colorStyles = {
+	green: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
+	yellow: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
+	red: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
+	blue: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
+	gray: "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300"
+};
+const dotColorStyles = {
+	green: "bg-green-500",
+	yellow: "bg-yellow-500",
+	red: "bg-red-500",
+	blue: "bg-blue-500",
+	gray: "bg-gray-500"
+};
+const sizeStyles = {
+	xs: "px-1.5 py-0.5 text-[10px]",
+	sm: "px-2 py-0.5 text-xs",
+	md: "px-2.5 py-1 text-sm"
+};
+function StatusBadge({ color, dot, size = "md", className, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: require_src.cn("inline-flex items-center gap-1 rounded-full font-medium whitespace-nowrap capitalize", colorStyles[color], sizeStyles[size], className),
+		children: [dot && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_src.cn("h-1.5 w-1.5 rounded-full", dotColorStyles[color]) }), children]
+	});
+}
+//#endregion
+//#region ../../orders/ui/src/components/table-column.tsx
+function TableColumn({ label, sortable = true, className, onSortClick, sortBy, sortData, chevronUpIcon, chevronDownIcon }) {
+	const hideUpIcon = sortData?.column !== sortBy || sortData?.column === sortBy && sortData?.direction === "asc";
+	const hideDownIcon = sortData?.column !== sortBy || sortData?.column === sortBy && sortData?.direction === "desc";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableHead, {
+		className: require_src.cn("group text-muted-foreground cursor-pointer px-3 text-xs transition-colors duration-200", "hover:text-primary", className),
+		onClick: () => sortable && onSortClick?.(sortBy ?? ""),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "relative flex items-center",
+			children: [label, sortable && chevronUpIcon && chevronDownIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				className: `ml-2 inline-flex flex-col items-center justify-center group-hover:opacity-100 ${sortData?.column === sortBy ? "opacity-100" : "opacity-0"} transition-opacity duration-200`,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+						src: chevronUpIcon,
+						alt: "",
+						width: 12,
+						height: 12,
+						className: require_src.cn("text-muted-foreground group-hover:text-primary h-2.5 w-2.5 transition-colors duration-200", hideUpIcon && "opacity-0", sortData?.column !== sortBy && "group-hover:opacity-100")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+						src: chevronDownIcon,
+						alt: "",
+						width: 12,
+						height: 12,
+						className: require_src.cn("text-muted-foreground group-hover:text-primary h-2.5 w-2.5 transition-colors duration-200", hideDownIcon && "opacity-0", sortData?.column !== sortBy && "group-hover:opacity-100")
+					})]
+				})
+			})]
+		})
+	});
+}
+//#endregion
+//#region ../../orders/ui/src/components/orders-list.tsx
+function OrdersList({ customerId, onOrderClick, onSubscriptionClick, t, pageSize = 10 }) {
+	const [cursor, setCursor] = (0, react.useState)(null);
+	const [currentPage, setCurrentPage] = (0, react.useState)(1);
+	const [searchTerm, setSearchTerm] = (0, react.useState)("");
+	const { data, isLoading } = useCustomerOrders({
+		customerId,
+		limit: pageSize,
+		search: searchTerm || void 0,
+		cursor: cursor || void 0,
+		sort: "-created_at"
+	}, { enabled: !!customerId });
+	const handleSearchChange = (0, react.useCallback)((term) => {
+		setSearchTerm(term);
+		setCursor(null);
+		setCurrentPage(1);
+	}, []);
+	const handleNextPage = (0, react.useCallback)(() => {
+		const nextCursor = data?.meta?.pagination?.next_cursor;
+		if (nextCursor) {
+			setCursor(nextCursor);
+			setCurrentPage((p) => p + 1);
+		}
+	}, [data?.meta?.pagination?.next_cursor]);
+	const handlePrevPage = (0, react.useCallback)(() => {
+		const prevCursor = data?.meta?.pagination?.prev_cursor;
+		if (prevCursor) {
+			setCursor(prevCursor);
+			setCurrentPage((p) => Math.max(1, p - 1));
+		} else {
+			setCursor(null);
+			setCurrentPage(1);
+		}
+	}, [data?.meta?.pagination?.prev_cursor]);
+	const ordersList = data?.orders || [];
+	const pagination = data?.meta?.pagination;
+	const totalItems = pagination?.total_count ?? ordersList.length;
+	const totalPages = pagination?.total_pages ?? Math.max(1, Math.ceil(totalItems / pageSize));
+	const hasNextPage = !!pagination?.next_cursor;
+	const hasPrevPage = !!pagination?.prev_cursor;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "border-border overflow-hidden rounded-lg border shadow-sm",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex justify-end p-3",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "w-full max-w-sm",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchSort.SearchSort, {
+						searchValue: searchTerm,
+						onSearchChange: handleSearchChange,
+						placeholder: t("search_orders")
+					})
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "block md:hidden",
+				children: isLoading ? Array(5).fill(0).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "border-border border-b p-4",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex space-x-3",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-12 w-12 rounded-md" }), /* @__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-3 w-1/2" })]
+						})]
+					})
+				}, `skeleton-${index}`)) : ordersList.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "text-muted-foreground px-3 py-8 text-center text-sm",
+					children: searchTerm ? t("no_matching_orders") : t("no_orders_found")
+				}) : ordersList.map((order) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "border-border hover:bg-accent cursor-pointer border-b p-4 transition-colors duration-200 ease-in-out last:border-b-0",
+					onClick: () => onOrderClick(order),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-start space-x-3",
+						children: [order.first_item?.image_url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+							src: order.first_item.image_url,
+							alt: t("no_image_available"),
+							width: 48,
+							height: 48,
+							className: "h-12 w-12 flex-shrink-0 rounded-md object-cover"
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-border h-12 w-12 flex-shrink-0 rounded-md" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "w-0 min-w-0 flex-1",
+							children: [
+								order.first_item?.title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "text-foreground truncate text-sm font-medium",
+									children: order.first_item.title
+								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "bg-muted rounded-lg p-2",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "text-muted-foreground text-xs",
+										children: t("this_product_no_longer_exists")
+									})
+								}),
+								order.subscription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusBadge, {
+									color: "blue",
+									size: "xs",
+									className: "mt-1",
+									children: t("subscription")
+								}),
+								order.subscription?.subscription_token && onSubscriptionClick && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "text-foreground hover:text-foreground/80 mt-1 inline-block text-xs transition-colors duration-200 hover:underline",
+									onClick: (e) => {
+										e.stopPropagation();
+										onSubscriptionClick(order.subscription.subscription_token);
+									},
+									children: t("view_subscription")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "mt-2 grid grid-cols-3 gap-x-4 gap-y-1 text-sm",
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "text-muted-foreground block text-xs",
+											children: t("date")
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "text-muted-foreground",
+											children: new Date(order.created_at).toLocaleDateString()
+										})] }),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "text-muted-foreground block text-xs",
+											children: t("status")
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusBadge, {
+											color: order.order_status === "completed" || order.order_status === "delivered" || order.order_status === "shipped" ? "green" : order.order_status === "cancelled" || order.order_status === "returned" ? "red" : "yellow",
+											size: "xs",
+											children: order.order_status
+										})] }),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "text-muted-foreground block text-xs",
+											children: t("total")
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "text-foreground font-medium",
+											children: formatOrderTotal(order)
+										})] })
+									]
+								})
+							]
+						})]
+					})
+				}, order.id))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "hidden md:block",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Table, {
+					className: "min-w-full table-fixed",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("colgroup", { children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { className: "w-2/5 min-w-[240px]" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { className: "w-[20%] min-w-[100px]" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { className: "w-[20%] min-w-[100px]" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { className: "w-[20%] min-w-[100px]" })
+						] }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableHeader, {
+							className: "bg-muted",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.TableRow, {
+								className: "hover:bg-muted h-10",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableColumn, {
+										label: t("product"),
+										sortable: false
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableColumn, {
+										label: t("date"),
+										sortable: false
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableColumn, {
+										label: t("status"),
+										sortable: false
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableColumn, {
+										label: t("total"),
+										sortable: false
+									})
+								]
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableBody, {
+							className: "bg-background",
+							children: isLoading ? Array(5).fill(0).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.TableRow, { children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
+									className: "px-3 py-4",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "flex items-center space-x-2",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-9 w-9 rounded-md" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-32" })]
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
+									className: "px-3 py-4",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-24" })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
+									className: "px-3 py-4",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-20" })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
+									className: "px-3 py-4",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-24" })
+								})
+							] }, `skeleton-${index}`)) : ordersList.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableRow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
+								colSpan: 4,
+								className: "text-muted-foreground px-3 py-8 text-center text-sm",
+								children: searchTerm ? t("no_matching_orders") : t("no_orders_found")
+							}) }) : ordersList.map((order) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.TableRow, {
+								className: "cursor-pointer",
+								onClick: () => onOrderClick(order),
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
+										className: "text-muted-foreground px-3 py-4 text-sm",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "flex max-w-[280px] flex-row items-center space-x-3",
+											children: [order.first_item?.image_url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+												src: order.first_item.image_url,
+												alt: t("no_image_available"),
+												width: 42,
+												height: 42,
+												className: "h-[42px] w-[42px] flex-shrink-0 rounded-md object-cover"
+											}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-border ml-1 h-9 w-9 flex-shrink-0 rounded-md" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "flex min-w-0 flex-col space-y-1",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+													className: "flex items-center space-x-2",
+													children: [order.first_item?.title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														className: "text-foreground truncate text-sm font-medium",
+														children: order.first_item.title
+													}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+														className: "bg-muted w-full rounded-lg p-2",
+														children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+															className: "text-muted-foreground text-xs",
+															children: t("this_product_no_longer_exists")
+														})
+													}), order.subscription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusBadge, {
+														color: "blue",
+														size: "xs",
+														className: "flex-shrink-0",
+														children: t("subscription")
+													})]
+												}), order.subscription?.subscription_token && onSubscriptionClick && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+													type: "button",
+													className: "text-foreground hover:text-foreground/80 text-left text-xs transition-colors duration-200 hover:underline",
+													onClick: (e) => {
+														e.stopPropagation();
+														onSubscriptionClick(order.subscription.subscription_token);
+													},
+													children: t("view_subscription")
+												})]
+											})]
+										})
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
+										className: "text-muted-foreground px-3 py-4 text-sm whitespace-nowrap",
+										children: new Date(order.created_at).toLocaleDateString()
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
+										className: "px-3 py-4 text-sm",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusBadge, {
+											color: order.order_status === "completed" || order.order_status === "delivered" || order.order_status === "shipped" ? "green" : order.order_status === "cancelled" || order.order_status === "returned" ? "red" : "yellow",
+											size: "xs",
+											children: order.order_status
+										})
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TableCell, {
+										className: "text-foreground px-3 py-4 text-sm whitespace-nowrap",
+										children: formatOrderTotal(order)
+									})
+								]
+							}, order.id))
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationFooter, {
+				currentPage,
+				totalPages,
+				pageSize,
+				totalItems,
+				cursorPaginationMode: true,
+				hasNextPage,
+				hasPrevPage,
+				onCursorNext: handleNextPage,
+				onCursorPrev: handlePrevPage
+			})
+		]
+	});
+}
+//#endregion
+//#region ../../orders/ui/src/lib/format.ts
+function startCase(str) {
+	if (!str) return "";
+	return str.replace(/_/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
+}
+//#endregion
+//#region ../../orders/ui/src/components/order-status-badge.tsx
+const statusColorMap = {
+	paid: "green",
+	fulfilled: "green",
+	delivered: "green",
+	complete: "green",
+	pending: "yellow",
+	unfulfilled: "yellow",
+	partially_fulfilled: "yellow",
+	processing: "yellow",
+	refunded: "red",
+	cancelled: "red",
+	failed: "red",
+	voided: "red"
+};
+function OrderStatusBadge({ status, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusBadge, {
+		color: statusColorMap[status] ?? "gray",
+		dot: true,
+		size: "sm",
+		className,
+		children: startCase(status)
+	});
+}
+//#endregion
+Object.defineProperty(exports, "OrderStatusBadge", {
+	enumerable: true,
+	get: function() {
+		return OrderStatusBadge;
+	}
+});
+Object.defineProperty(exports, "OrdersCoreProvider", {
+	enumerable: true,
+	get: function() {
+		return OrdersCoreProvider;
+	}
+});
+Object.defineProperty(exports, "OrdersList", {
+	enumerable: true,
+	get: function() {
+		return OrdersList;
+	}
+});
+Object.defineProperty(exports, "PaginationFooter", {
+	enumerable: true,
+	get: function() {
+		return PaginationFooter;
+	}
+});
+Object.defineProperty(exports, "TableColumn", {
+	enumerable: true,
+	get: function() {
+		return TableColumn;
+	}
+});
+Object.defineProperty(exports, "usePortalTenantOrder", {
+	enumerable: true,
+	get: function() {
+		return usePortalTenantOrder;
+	}
+});
+
+//# sourceMappingURL=order-status-badge-C5K03hR8.cjs.map