@burdenoff/microfe-devportal 2026.914.6 → 2026.915.1

package/dist/devportal/pages/SellerOrdersPage.js

@@ -1,14 +1,20 @@
 import { useDevportal as e } from "../providers/DevportalProvider.js";
 import { EmptyState as t } from "../components/EmptyState.js";
 import { PageLayout as n } from "../components/PageLayout.js";
-import { PermissionGuard as r } from "../components/PermissionGuard.js";
+import { ReportOrderIssueModal as r } from "../components/ReportOrderIssueModal.js";
+import { PermissionGuard as i } from "../components/PermissionGuard.js";
 import "../components/index.js";
-import { useEffect as i, useMemo as a, useState as o } from "react";
-import { AlertCircle as s, ChevronDown as c, Loader2 as l, Package as u, ShoppingBag as d } from "lucide-react";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useCallback as a, useEffect as o, useMemo as s, useState as c } from "react";
+import { AlertCircle as l, CheckCircle2 as ee, ChevronDown as u, Flag as d, Loader2 as f, Package as te, ShoppingBag as ne } from "lucide-react";
+import { Fragment as re, jsx as p, jsxs as m } from "react/jsx-runtime";
 import { useI18n as h } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 //#region src/devportal/pages/SellerOrdersPage.tsx
-var g = {
+var ie = {
+	OUT_OF_STOCK: "Out of stock",
+	CANNOT_FULFILL: "Cannot fulfill",
+	WRONG_ADDRESS: "Wrong address",
+	OTHER: "Other"
+}, g = {
 	PENDING: {
 		label: "Pending",
 		className: "text-status-warning-text bg-status-warning-bg-subtle"
@@ -66,7 +72,10 @@ var g = {
 		value: "CANCELLED",
 		label: "Cancelled"
 	}
-], v = "\n  query SellerOrdersOrgs {\n    myDeveloperOrganizations {\n      id\n      name\n      slug\n      kind\n    }\n  }\n", y = "\n  query SellerOrders($organizationId: ID!, $status: SaleStatus, $limit: Int, $offset: Int) {\n    developerOrgSales(\n      organizationId: $organizationId\n      status: $status\n      limit: $limit\n      offset: $offset\n    ) {\n      totalCount\n      edges {\n        node {\n          id\n          storeOrderId\n          storeProductId\n          grossAmount\n          netAmount\n          platformFee\n          currency\n          status\n          buyerUserId\n          purchasedAt\n          refundAmount\n          refundedAt\n          refundReason\n          discountAmount\n          taxAmount\n        }\n      }\n      pageInfo { hasNextPage hasPreviousPage }\n    }\n  }\n";
+], ae = "\n  query SellerOrdersOrgs {\n    myDeveloperOrganizations {\n      id\n      name\n      slug\n      kind\n    }\n  }\n", oe = "\n  query SellerOrders($organizationId: ID!, $status: SaleStatus, $limit: Int, $offset: Int) {\n    developerOrgSales(\n      organizationId: $organizationId\n      status: $status\n      limit: $limit\n      offset: $offset\n    ) {\n      totalCount\n      edges {\n        node {\n          id\n          storeOrderId\n          storeProductId\n          grossAmount\n          netAmount\n          platformFee\n          currency\n          status\n          buyerUserId\n          purchasedAt\n          refundAmount\n          refundedAt\n          refundReason\n          discountAmount\n          taxAmount\n        }\n      }\n      pageInfo { hasNextPage hasPreviousPage }\n    }\n  }\n", se = "\n  mutation ResolveOrderIssue($id: ID!, $organizationId: ID) {\n    resolveOrderIssueFlag(id: $id, organizationId: $organizationId) {\n      id\n      status\n    }\n  }\n", v = "id category note status raisedByOrgId createdAt";
+function y(e) {
+	return `query SellerOrderIssueFlags {\n    ${e.map((e, t) => `f${t}: orderIssueFlags(orderId: ${JSON.stringify(e)}) { ${v} }`).join("\n    ")}\n  }`;
+}
 function b(e, t) {
 	return new Intl.NumberFormat("en-US", {
 		style: "currency",
@@ -74,7 +83,7 @@ function b(e, t) {
 		minimumFractionDigits: 2
 	}).format(e);
 }
-function x(e) {
+function ce(e) {
 	return new Date(e).toLocaleDateString("en-US", {
 		year: "numeric",
 		month: "short",
@@ -83,51 +92,51 @@ function x(e) {
 		minute: "2-digit"
 	});
 }
-function S(e, t) {
+function le(e, t) {
 	return e ? `#${e.slice(0, 8).toUpperCase()}` : `#${t.slice(0, 8).toUpperCase()}`;
 }
-var C = () => {
-	let { apiGatewayUrl: C, authToken: w } = e(), { t: T } = h(), E = (e, t) => {
-		let n = T(e);
+var x = () => {
+	let { apiGatewayUrl: v, authToken: x } = e(), { t: S } = h(), C = (e, t) => {
+		let n = S(e);
 		return n === e ? t : n;
-	}, D = C ?? "/global/graphql", [O, k] = o(!0), [A, j] = o([]), [M, N] = o(null), [P, F] = o(!1), [I, L] = o([]), [R, z] = o(0), [B, V] = o(null), [H, U] = o(0), [W, G] = o(""), [K, q] = o(0), J = a(() => ({
+	}, w = v ?? "/global/graphql", [T, E] = c(!0), [D, ue] = c([]), [O, k] = c(null), [A, j] = c(!1), [M, N] = c([]), [P, F] = c(0), [I, L] = c(null), [R, z] = c(0), [B, V] = c(""), [H, U] = c(0), W = s(() => ({
 		"Content-Type": "application/json",
-		Authorization: `Bearer ${w ?? ""}`
-	}), [w]);
-	i(() => {
+		Authorization: `Bearer ${x ?? ""}`
+	}), [x]);
+	o(() => {
 		let e = !1;
-		return k(!0), (async () => {
+		return E(!0), (async () => {
 			try {
-				let t = await (await fetch(D, {
+				let t = await (await fetch(w, {
 					method: "POST",
-					headers: J,
-					body: JSON.stringify({ query: v })
+					headers: W,
+					body: JSON.stringify({ query: ae })
 				})).json();
 				if (e) return;
 				let n = (t.data?.myDeveloperOrganizations ?? []).filter((e) => e.kind === "PHYSICAL");
-				j(n), n.length > 0 && N(n[0].id);
+				ue(n), n.length > 0 && k(n[0].id);
 			} catch {} finally {
-				e || k(!1);
+				e || E(!1);
 			}
 		})(), () => {
 			e = !0;
 		};
-	}, [D, J]), i(() => {
-		if (!M) return;
+	}, [w, W]), o(() => {
+		if (!O) return;
 		let e = !1;
-		return F(!0), V(null), (async () => {
+		return j(!0), L(null), (async () => {
 			try {
 				let t = {
-					organizationId: M,
+					organizationId: O,
 					limit: 25,
-					offset: K * 25
+					offset: H * 25
 				};
-				W && (t.status = W);
-				let n = await fetch(D, {
+				B && (t.status = B);
+				let n = await fetch(w, {
 					method: "POST",
-					headers: J,
+					headers: W,
 					body: JSON.stringify({
-						query: y,
+						query: oe,
 						variables: t
 					})
 				});
@@ -136,87 +145,127 @@ var C = () => {
 				if (e) return;
 				if (r.errors?.length) throw Error(r.errors[0]?.message ?? "GraphQL error");
 				let i = r.data?.developerOrgSales;
-				z(i?.totalCount ?? 0), L((i?.edges ?? []).map((e) => ({
+				F(i?.totalCount ?? 0), N((i?.edges ?? []).map((e) => ({
 					...e.node,
 					status: e.node.status
 				})));
 			} catch (t) {
-				e || V(t instanceof Error ? t.message : "Failed to load orders");
+				e || L(t instanceof Error ? t.message : "Failed to load orders");
 			} finally {
-				e || F(!1);
+				e || j(!1);
 			}
 		})(), () => {
 			e = !0;
 		};
 	}, [
-		M,
+		O,
+		B,
+		H,
+		w,
+		W,
+		R
+	]);
+	let G = s(() => M.filter((e) => e.storeProductId !== null), [M]), [de, K] = c({}), [q, J] = c(null), [Y, X] = c(null), Z = s(() => G.map((e) => e.storeOrderId).filter((e) => e !== null), [G]), Q = a(async () => {
+		if (Z.length === 0) {
+			K({});
+			return;
+		}
+		try {
+			let e = await (await fetch(w, {
+				method: "POST",
+				headers: W,
+				body: JSON.stringify({ query: y(Z) })
+			})).json(), t = {};
+			Z.forEach((n, r) => {
+				t[n] = e.data?.[`f${r}`] ?? [];
+			}), K(t);
+		} catch {}
+	}, [
+		w,
 		W,
-		K,
-		D,
-		J,
-		H
+		Z
 	]);
-	let Y = a(() => I.filter((e) => e.storeProductId !== null), [I]), X = a(() => {
-		let e = Y;
+	o(() => {
+		Q();
+	}, [Q]);
+	let fe = async (e, t) => {
+		X(e);
+		try {
+			await fetch(w, {
+				method: "POST",
+				headers: W,
+				body: JSON.stringify({
+					query: se,
+					variables: {
+						id: e,
+						organizationId: t
+					}
+				})
+			}), await Q();
+		} finally {
+			X(null);
+		}
+	}, $ = s(() => {
+		let e = G;
 		return {
-			total: R,
+			total: P,
 			pending: e.filter((e) => e.status === "PENDING").length,
 			completed: e.filter((e) => e.status === "COMPLETED").length,
 			refunded: e.filter((e) => e.status === "REFUNDED" || e.status === "PARTIAL_REFUND").length
 		};
-	}, [Y, R]);
-	return O ? /* @__PURE__ */ p(n, {
-		title: E("devportal.orders", "Orders"),
+	}, [G, P]);
+	return T ? /* @__PURE__ */ p(n, {
+		title: C("devportal.orders", "Orders"),
 		children: /* @__PURE__ */ p("div", {
 			className: "flex items-center justify-center py-20",
-			children: /* @__PURE__ */ p(l, { className: "h-8 w-8 animate-spin text-text-secondary" })
+			children: /* @__PURE__ */ p(f, { className: "h-8 w-8 animate-spin text-text-secondary" })
 		})
-	}) : A.length === 0 ? /* @__PURE__ */ p(n, {
-		title: E("devportal.orders", "Orders"),
-		description: E("devportal.ordersDesc", "Orders placed by customers for your physical items."),
+	}) : D.length === 0 ? /* @__PURE__ */ p(n, {
+		title: C("devportal.orders", "Orders"),
+		description: C("devportal.ordersDesc", "Orders placed by customers for your physical items."),
 		children: /* @__PURE__ */ p(t, {
 			illustration: "empty-generic",
-			icon: /* @__PURE__ */ p(d, { size: 32 }),
-			title: E("devportal.noOrgForOrders", "No organization yet"),
-			description: E("devportal.createOrgToSell", "Create a developer organization to start selling physical products and receive orders.")
+			icon: /* @__PURE__ */ p(ne, { size: 32 }),
+			title: C("devportal.noOrgForOrders", "No organization yet"),
+			description: C("devportal.createOrgToSell", "Create a developer organization to start selling physical products and receive orders.")
 		})
-	}) : /* @__PURE__ */ p(r, {
+	}) : /* @__PURE__ */ m(i, {
 		authOnly: !0,
-		children: /* @__PURE__ */ m(n, {
-			title: E("devportal.orders", "Orders"),
-			description: E("devportal.ordersDesc", "Orders placed by customers for your physical items."),
+		children: [/* @__PURE__ */ m(n, {
+			title: C("devportal.orders", "Orders"),
+			description: C("devportal.ordersDesc", "Orders placed by customers for your physical items."),
 			children: [
 				/* @__PURE__ */ m("div", {
 					className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-6",
-					children: [A.length > 1 && /* @__PURE__ */ m("div", {
+					children: [D.length > 1 && /* @__PURE__ */ m("div", {
 						className: "relative",
 						children: [/* @__PURE__ */ p("select", {
-							value: M ?? "",
+							value: O ?? "",
 							onChange: (e) => {
-								N(e.target.value), q(0);
+								k(e.target.value), U(0);
 							},
 							className: "appearance-none rounded-md border border-border-seam bg-bg-surface pl-3 pr-8 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-primary",
-							children: A.map((e) => /* @__PURE__ */ p("option", {
+							children: D.map((e) => /* @__PURE__ */ p("option", {
 								value: e.id,
 								children: e.name
 							}, e.id))
-						}), /* @__PURE__ */ p(c, {
+						}), /* @__PURE__ */ p(u, {
 							size: 14,
 							className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-text-muted"
 						})]
 					}), /* @__PURE__ */ m("div", {
 						className: "relative",
 						children: [/* @__PURE__ */ p("select", {
-							value: W,
+							value: B,
 							onChange: (e) => {
-								G(e.target.value), q(0);
+								V(e.target.value), U(0);
 							},
 							className: "appearance-none rounded-md border border-border-seam bg-bg-surface pl-3 pr-8 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-primary",
 							children: _.map((e) => /* @__PURE__ */ p("option", {
 								value: e.value,
 								children: e.label
 							}, e.value))
-						}), /* @__PURE__ */ p(c, {
+						}), /* @__PURE__ */ p(u, {
 							size: 14,
 							className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-text-muted"
 						})]
@@ -227,21 +276,21 @@ var C = () => {
 					children: [
 						{
 							label: "Total Orders",
-							value: X.total
+							value: $.total
 						},
 						{
 							label: "Pending",
-							value: X.pending,
+							value: $.pending,
 							color: "text-status-warning-text"
 						},
 						{
 							label: "Completed",
-							value: X.completed,
+							value: $.completed,
 							color: "text-status-success-text"
 						},
 						{
 							label: "Refunded",
-							value: X.refunded,
+							value: $.refunded,
 							color: "text-status-error-text"
 						}
 					].map((e) => /* @__PURE__ */ m("div", {
@@ -251,37 +300,37 @@ var C = () => {
 							children: e.label
 						}), /* @__PURE__ */ p("p", {
 							className: "mt-1 text-xl font-semibold tabular-nums",
-							children: P ? /* @__PURE__ */ p(l, { className: "h-4 w-4 animate-spin text-text-secondary" }) : e.value
+							children: A ? /* @__PURE__ */ p(f, { className: "h-4 w-4 animate-spin text-text-secondary" }) : e.value
 						})]
 					}, e.label))
 				}),
-				B && /* @__PURE__ */ m("div", {
+				I && /* @__PURE__ */ m("div", {
 					className: "mb-4 flex items-center gap-3 rounded-lg border border-status-error-border/50 bg-status-error-bg/10 px-4 py-3 text-sm",
 					children: [
-						/* @__PURE__ */ p(s, {
+						/* @__PURE__ */ p(l, {
 							size: 16,
 							className: "shrink-0 text-status-error-text"
 						}),
 						/* @__PURE__ */ p("span", {
 							className: "text-status-error-text",
-							children: B
+							children: I
 						}),
 						/* @__PURE__ */ p("button", {
-							onClick: () => U((e) => e + 1),
+							onClick: () => z((e) => e + 1),
 							className: "ml-auto text-xs font-medium text-status-error-text underline",
 							children: "Retry"
 						})
 					]
 				}),
-				P ? /* @__PURE__ */ p("div", {
+				A ? /* @__PURE__ */ p("div", {
 					className: "flex items-center justify-center py-16",
-					children: /* @__PURE__ */ p(l, { className: "h-6 w-6 animate-spin text-text-secondary" })
-				}) : Y.length === 0 ? /* @__PURE__ */ p(t, {
+					children: /* @__PURE__ */ p(f, { className: "h-6 w-6 animate-spin text-text-secondary" })
+				}) : G.length === 0 ? /* @__PURE__ */ p(t, {
 					illustration: "empty-data",
-					icon: /* @__PURE__ */ p(u, { size: 32 }),
-					title: W ? E("devportal.noOrdersForFilter", "No orders match this filter") : E("devportal.noOrdersYet", "No orders yet"),
-					description: W ? E("devportal.tryDifferentFilter", "Try selecting a different status filter") : E("devportal.ordersWillAppear", "Orders placed for your physical items will appear here once customers make purchases.")
-				}) : /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("div", {
+					icon: /* @__PURE__ */ p(te, { size: 32 }),
+					title: B ? C("devportal.noOrdersForFilter", "No orders match this filter") : C("devportal.noOrdersYet", "No orders yet"),
+					description: B ? C("devportal.tryDifferentFilter", "Try selecting a different status filter") : C("devportal.ordersWillAppear", "Orders placed for your physical items will appear here once customers make purchases.")
+				}) : /* @__PURE__ */ m(re, { children: [/* @__PURE__ */ p("div", {
 					className: "overflow-x-auto rounded-lg border border-border-seam",
 					children: /* @__PURE__ */ m("table", {
 						className: "w-full text-sm",
@@ -315,10 +364,14 @@ var C = () => {
 								/* @__PURE__ */ p("th", {
 									className: "px-4 py-3 text-left font-medium text-text-secondary",
 									children: "Date"
+								}),
+								/* @__PURE__ */ p("th", {
+									className: "px-4 py-3 text-left font-medium text-text-secondary",
+									children: "Fulfillment Issue"
 								})
 							]
-						}) }), /* @__PURE__ */ p("tbody", { children: Y.map((e) => {
-							let t = g[e.status] ?? g.PENDING;
+						}) }), /* @__PURE__ */ p("tbody", { children: G.map((e) => {
+							let t = g[e.status] ?? g.PENDING, n = e.storeOrderId ? de[e.storeOrderId] ?? [] : [], r = n.find((e) => e.status === "OPEN");
 							return /* @__PURE__ */ m("tr", {
 								className: "border-b border-border-subtle last:border-0 hover:bg-bg-sunken/50 transition-colors",
 								children: [
@@ -326,7 +379,7 @@ var C = () => {
 										className: "px-4 py-3",
 										children: /* @__PURE__ */ p("span", {
 											className: "font-mono text-xs font-semibold text-text-primary",
-											children: S(e.storeOrderId, e.id)
+											children: le(e.storeOrderId, e.id)
 										})
 									}),
 									/* @__PURE__ */ p("td", {
@@ -367,44 +420,84 @@ var C = () => {
 									}),
 									/* @__PURE__ */ p("td", {
 										className: "px-4 py-3 text-xs text-text-secondary whitespace-nowrap",
-										children: x(e.purchasedAt)
+										children: ce(e.purchasedAt)
+									}),
+									/* @__PURE__ */ p("td", {
+										className: "px-4 py-3",
+										children: e.storeOrderId ? r ? /* @__PURE__ */ m("div", {
+											className: "flex items-center gap-2",
+											children: [/* @__PURE__ */ m("span", {
+												title: r.note ?? void 0,
+												className: "flex items-center gap-1 rounded-full bg-status-warning-bg-subtle px-2.5 py-0.5 text-xs font-medium text-status-warning-text",
+												children: [/* @__PURE__ */ p(d, { size: 11 }), ie[r.category]]
+											}), r.raisedByOrgId === O && /* @__PURE__ */ p("button", {
+												onClick: () => void fe(r.id, r.raisedByOrgId),
+												disabled: Y === r.id,
+												className: "text-xs font-medium text-text-secondary underline hover:text-text-primary disabled:opacity-50",
+												children: Y === r.id ? /* @__PURE__ */ p(f, { className: "h-3 w-3 animate-spin" }) : "Mark Resolved"
+											})]
+										}) : /* @__PURE__ */ m("div", {
+											className: "flex items-center gap-2",
+											children: [n.length > 0 && /* @__PURE__ */ m("span", {
+												title: "Previously reported and resolved",
+												className: "flex items-center gap-1 text-xs text-status-success-text",
+												children: [/* @__PURE__ */ p(ee, { size: 11 }), "Resolved"]
+											}), /* @__PURE__ */ p("button", {
+												onClick: () => J(e.storeOrderId),
+												className: "text-xs font-medium text-text-secondary underline hover:text-text-primary",
+												children: "Report Issue"
+											})]
+										}) : /* @__PURE__ */ p("span", {
+											className: "text-xs text-text-muted",
+											children: "—"
+										})
 									})
 								]
 							}, e.id);
 						}) })]
 					})
-				}), R > 25 && /* @__PURE__ */ m("div", {
+				}), P > 25 && /* @__PURE__ */ m("div", {
 					className: "mt-4 flex items-center justify-between text-sm",
 					children: [/* @__PURE__ */ m("span", {
 						className: "text-text-secondary",
 						children: [
 							"Showing ",
-							K * 25 + 1,
+							H * 25 + 1,
 							"–",
-							Math.min((K + 1) * 25, R),
+							Math.min((H + 1) * 25, P),
 							" of ",
-							R
+							P
 						]
 					}), /* @__PURE__ */ m("div", {
 						className: "flex items-center gap-2",
 						children: [/* @__PURE__ */ p("button", {
-							disabled: K === 0,
-							onClick: () => q((e) => e - 1),
+							disabled: H === 0,
+							onClick: () => U((e) => e - 1),
 							className: "rounded-md border border-border-seam px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-bg-sunken disabled:opacity-40 disabled:cursor-not-allowed transition-colors",
 							children: "Previous"
 						}), /* @__PURE__ */ p("button", {
-							disabled: (K + 1) * 25 >= R,
-							onClick: () => q((e) => e + 1),
+							disabled: (H + 1) * 25 >= P,
+							onClick: () => U((e) => e + 1),
 							className: "rounded-md border border-border-seam px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-bg-sunken disabled:opacity-40 disabled:cursor-not-allowed transition-colors",
 							children: "Next"
 						})]
 					})]
 				})] })
 			]
-		})
+		}), O && /* @__PURE__ */ p(r, {
+			open: q !== null,
+			onOpenChange: (e) => {
+				e || J(null);
+			},
+			orderId: q ?? "",
+			organizationId: O,
+			gqlUrl: w,
+			headers: W,
+			onReported: () => void Q()
+		})]
 	});
 };
 //#endregion
-export { C as SellerOrdersPage };
+export { x as SellerOrdersPage };
 
 //# sourceMappingURL=SellerOrdersPage.js.map