freshyo/apps/web-ui/.output/server/_ssr/me.orders._id-Cq7m-7ba.mjs

import { o as __toESM } from "../_runtime.mjs";
import { h as require_react, m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
import { S as ArrowLeft } from "../_libs/lucide-react.mjs";
import { a as MyText, i as MyButton, r as LoadingDialog, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
import { t as Route } from "./me.orders._id-9KyXzQNP.mjs";
//#region node_modules/.nitro/vite/services/ssr/assets/me.orders._id-Cq7m-7ba.js
var import_react = /* @__PURE__ */ __toESM(require_react());
var import_jsx_runtime = require_jsx_runtime();
function OrderDetailPage() {
	const { id } = Route.useParams();
	const navigate = useNavigate();
	const orderId = Number(id);
	const [showCancelDialog, setShowCancelDialog] = (0, import_react.useState)(false);
	const { data } = trpc.user.order.getOrderById.useQuery({ orderId });
	const cancelMutation = trpc.user.order.cancelOrder.useMutation();
	const order = data?.data;
	const handleCancel = () => {
		cancelMutation.mutate({ orderId }, { onSuccess: () => setShowCancelDialog(false) });
	};
	if (!order) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, { children: "Loading..." }) });
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyTouchableOpacity, {
			onClick: () => navigate({ to: "/me/orders" }),
			className: "mb-4 flex items-center gap-2",
			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowLeft, { className: "h-5 w-5" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, { children: "Back to Orders" })]
		}),
		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
			className: "mb-4",
			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
				weight: "bold",
				className: "text-xl",
				children: ["Order #", order.id]
			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
				className: `mt-1 inline-block rounded-full px-3 py-1 text-xs font-medium ${order.status === "delivered" ? "bg-green-100 text-green-700" : order.status === "cancelled" ? "bg-red-100 text-red-700" : "bg-yellow-100 text-yellow-700"}`,
				children: order.status
			})]
		}),
		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
			className: "mb-6",
			children: [
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
					weight: "semibold",
					className: "mb-2",
					children: "Items"
				}),
				(order.items || []).map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
					className: "flex items-center justify-between border-b border-gray-100 py-2",
					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
						className: "text-sm",
						children: [
							item.product?.name || `Product #${item.productId}`,
							" x",
							item.quantity
						]
					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
						className: "text-sm font-bold",
						children: ["₹", item.price || 0]
					})]
				}, i)),
				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
					className: "flex items-center justify-between pt-2",
					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
						weight: "bold",
						children: "Total"
					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
						weight: "bold",
						className: "text-brand-600",
						children: ["₹", order.totalAmount || 0]
					})]
				})
			]
		}),
		order.address && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
			className: "mb-6",
			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
				weight: "semibold",
				className: "mb-2",
				children: "Delivery Address"
			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
				className: "rounded-xl border border-gray-100 bg-gray-50 p-3",
				children: [
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
						weight: "semibold",
						children: order.address.name
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
						className: "text-sm text-gray-600",
						children: [
							order.address.addressLine1,
							", ",
							order.address.city
						]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
						className: "text-sm text-gray-500",
						children: order.address.phone
					})
				]
			})]
		}),
		order.status !== "cancelled" && order.status !== "delivered" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyButton, {
			variant: "red",
			fullWidth: true,
			textContent: cancelMutation.isPending ? "Cancelling..." : "Cancel Order",
			onClick: () => setShowCancelDialog(true),
			disabled: cancelMutation.isPending
		}),
		showCancelDialog && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
			className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50",
			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
				className: "mx-4 w-full max-w-sm rounded-xl bg-white p-6",
				children: [
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
						weight: "bold",
						className: "mb-2 text-lg",
						children: "Cancel Order?"
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
						className: "mb-6 text-sm text-gray-600",
						children: "Are you sure you want to cancel this order?"
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "flex gap-3",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyButton, {
							textContent: "No, Keep It",
							onClick: () => setShowCancelDialog(false),
							className: "flex-1 bg-gray-100 text-gray-700"
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyButton, {
							variant: "red",
							textContent: "Yes, Cancel",
							onClick: handleCancel,
							className: "flex-1",
							disabled: cancelMutation.isPending
						})]
					})
				]
			})
		}),
		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingDialog, {
			open: cancelMutation.isPending,
			message: "Cancelling order..."
		})
	] });
}
//#endregion
export { OrderDetailPage as component };