@burdenoff/microfe-store 2026.830.1 → 2026.830.2

package/dist/pages/OrdersPage.js

@@ -1,12 +1,13 @@
 import { useStore as e } from "../providers/StoreProvider.js";
 import { useOrderStatusUpdatedSubscription as t } from "../generated/global-operations.js";
 import { formatPrice as n } from "../utils/index.js";
-import { InstallAppModal as r } from "../components/InstallAppModal.js";
-import { useInstallations as i } from "../hooks/useInstallations.js";
-import { useOrders as a } from "../hooks/useOrders.js";
-import { useCallback as o, useMemo as s, useState as c } from "react";
-import { useNavigate as l } from "react-router";
-import { useI18n as ee } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { useTr as r } from "../shared/hooks/useTr.js";
+import { InstallAppModal as i } from "../components/InstallAppModal.js";
+import { useInstallations as ee } from "../hooks/useInstallations.js";
+import { useOrders as te } from "../hooks/useOrders.js";
+import { useCallback as a, useMemo as o, useState as s } from "react";
+import { useNavigate as c } from "react-router";
+import { useI18n as l } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 import { ArrowLeft as u, CheckCircle as d, ChevronRight as f, Clock as p, Download as m, Loader2 as h, Package as g, RefreshCw as _, ShoppingBag as v, XCircle as y } from "lucide-react";
 import { jsx as b, jsxs as x } from "react/jsx-runtime";
 import { GlassCard as S, IllustratedEmptyState as C, PagePurpose as w } from "@burdenoff/fe-libs/ui";
@@ -15,39 +16,39 @@ var T = [
 	"COMPLETED",
 	"FULFILLED",
 	"PROCESSED"
-], E = (e) => {
+], E = (e, t) => {
 	switch (e) {
 		case "COMPLETED":
 		case "FULFILLED":
 		case "PROCESSED": return {
 			icon: d,
 			classes: "bg-status-success-bg-subtle/15 text-status-success-text border-status-success-text/20",
-			label: "Completed"
+			label: t("pages.orders.statusCompleted", "Completed")
 		};
 		case "PROCESSING": return {
 			icon: p,
 			classes: "bg-status-warning-bg-subtle/15 text-status-warning-text border-status-warning-text/20",
-			label: "Processing"
+			label: t("pages.orders.statusProcessing", "Processing")
 		};
 		case "PENDING": return {
 			icon: p,
 			classes: "bg-status-warning-bg-subtle/15 text-status-warning-text border-status-warning-text/20",
-			label: "Pending"
+			label: t("pages.orders.statusPending", "Pending")
 		};
 		case "FAILED": return {
 			icon: y,
 			classes: "bg-status-error-bg-subtle/15 text-status-error-text border-status-error-text/20",
-			label: "Failed"
+			label: t("pages.orders.statusFailed", "Failed")
 		};
 		case "REFUNDED": return {
 			icon: _,
 			classes: "bg-status-warning-bg-subtle/15 text-status-warning-text border-status-warning-text/20",
-			label: "Refunded"
+			label: t("pages.orders.statusRefunded", "Refunded")
 		};
 		case "CANCELLED": return {
 			icon: _,
 			classes: "bg-bg-sunken text-text-muted border-border-default",
-			label: "Cancelled"
+			label: t("pages.orders.statusCancelled", "Cancelled")
 		};
 		default: return {
 			icon: p,
@@ -55,23 +56,23 @@ var T = [
 			label: e
 		};
 	}
-}, D = ({ status: e }) => {
-	let t = E(e), n = t.icon;
+}, D = ({ status: e, tr: t }) => {
+	let n = E(e, t), r = n.icon;
 	return /* @__PURE__ */ x("span", {
-		className: `inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-semibold ${t.classes}`,
-		children: [/* @__PURE__ */ b(n, { className: "size-3.5" }), t.label]
+		className: `inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-semibold ${n.classes}`,
+		children: [/* @__PURE__ */ b(r, { className: "size-3.5" }), n.label]
 	});
 }, O = () => {
-	let p = l(), { basePath: _ } = e(), { t: E } = ee(), { orders: O, loading: k, error: A, refetchOrders: j, hasMore: M, loadMore: N } = a(), { installations: P, refetch: te } = i();
+	let p = c(), { basePath: _ } = e(), { t: E } = l(), O = r(), { orders: k, loading: A, error: j, refetchOrders: ne, hasMore: re, loadMore: ie } = te(), { installations: M, refetch: ae } = ee();
 	t({
 		onData: () => {
-			j();
+			ne();
 		},
 		onError: (e) => {
 			console.warn("OrderStatusUpdated subscription error:", e.message);
 		}
 	});
-	let [ne, re] = c(/* @__PURE__ */ new Set()), [F, I] = c("completed"), [L, R] = c(!1), [z, B] = c(null), [V, H] = c(null), [ie, U] = c(null), W = s(() => new Set(P.flatMap((e) => e.status === "ACTIVE" ? [e.productId] : [])), [P]), G = O.map((e) => {
+	let [N, P] = s(/* @__PURE__ */ new Set()), [F, I] = s("completed"), [L, R] = s(!1), [z, B] = s(null), [V, H] = s(null), [oe, U] = s(null), W = o(() => new Set(M.flatMap((e) => e.status === "ACTIVE" ? [e.productId] : [])), [M]), G = k.map((e) => {
 		let t = e.lineItems || [], n = t.reduce((e, t) => e + t.subtotal, 0), r = e.total - n, i = t.map((t, n) => ({
 			id: `${e.id}-${n}`,
 			productId: t.productId,
@@ -95,12 +96,12 @@ var T = [
 			createdAt: e.createdAt,
 			fulfillment: e.fulfillment ?? null
 		};
-	}), K = s(() => G.filter((e) => T.includes(e.status)), [G]), q = s(() => G.filter((e) => !T.includes(e.status)), [G]), J = F === "completed" ? K : q, Y = o((e) => {
-		re((t) => {
+	}), K = o(() => G.filter((e) => T.includes(e.status)), [G]), q = o(() => G.filter((e) => !T.includes(e.status)), [G]), J = F === "completed" ? K : q, se = a((e) => {
+		P((t) => {
 			let n = new Set(t);
 			return n.has(e) ? n.delete(e) : n.add(e), n;
 		});
-	}, []), ae = (e, t) => {
+	}, []), ce = (e, t) => {
 		B(e), U(t.id), H({
 			id: t.productId,
 			name: t.productName,
@@ -108,11 +109,11 @@ var T = [
 			type: t.productType,
 			version: t.version
 		}), R(!0);
-	}, X = () => {
+	}, Y = () => {
 		R(!1), B(null), H(null), U(null);
-	}, oe = (e, t) => {
-		X(), te();
-	}, se = (e) => {}, Z = () => {
+	}, le = (e, t) => {
+		Y(), ae();
+	}, X = (e) => {}, Z = () => {
 		p(`${_}/marketplace`);
 	}, Q = "px-4 py-3 text-sm", $ = "px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-text-muted";
 	return /* @__PURE__ */ x("div", {
@@ -156,17 +157,17 @@ var T = [
 					className: "mx-auto max-w-6xl p-6",
 					children: [/* @__PURE__ */ b(w, {
 						className: "mb-6",
-						children: "A record of everything you've purchased from the marketplace. Track each order's status, review what you paid, and — once an order is complete — install the apps you bought into a workspace right from here. Come back to re-install on a new workspace or check a past receipt."
-					}), k && G.length === 0 ? /* @__PURE__ */ x("div", {
+						children: O("pages.orders.purpose", "A record of everything you've purchased from the marketplace. Track each order's status, review what you paid, and — once an order is complete — install the apps you bought into a workspace right from here. Come back to re-install on a new workspace or check a past receipt.")
+					}), A && G.length === 0 ? /* @__PURE__ */ x("div", {
 						className: "flex flex-col items-center justify-center py-24",
 						children: [/* @__PURE__ */ b(h, {
 							className: "size-12 animate-spin text-text-muted mb-4",
 							"aria-hidden": "true"
 						}), /* @__PURE__ */ b("p", {
 							className: "text-text-muted",
-							children: "Loading your orders…"
+							children: O("pages.orders.loading", "Loading your orders…")
 						})]
-					}) : A ? /* @__PURE__ */ x("div", {
+					}) : j ? /* @__PURE__ */ x("div", {
 						className: "flex flex-col items-center justify-center py-24 text-center",
 						children: [
 							/* @__PURE__ */ b("div", {
@@ -179,24 +180,24 @@ var T = [
 							}),
 							/* @__PURE__ */ b("p", {
 								className: "mb-6 max-w-md text-text-muted",
-								children: A.message || "An error occurred while loading your orders. Please try again."
+								children: j.message || O("pages.orders.errorDescription", "An error occurred while loading your orders. Please try again.")
 							}),
 							/* @__PURE__ */ x("button", {
 								type: "button",
 								onClick: Z,
 								className: "cursor-pointer flex items-center gap-2 rounded-lg bg-action-primary-bg px-6 py-3 font-semibold text-action-primary-text transition-opacity hover:opacity-90",
-								children: [/* @__PURE__ */ b(v, { className: "size-5" }), "Browse Marketplace"]
+								children: [/* @__PURE__ */ b(v, { className: "size-5" }), O("pages.orders.browseMarketplace", "Browse Marketplace")]
 							})
 						]
 					}) : G.length === 0 ? /* @__PURE__ */ b(C, {
 						illustration: "empty-data",
 						title: E("pages.orders.emptyTitle", { defaultValue: "No orders yet" }),
-						description: "You have not placed any orders yet. Browse the marketplace to discover apps and products!",
+						description: O("pages.orders.emptyDescription", "You have not placed any orders yet. Browse the marketplace to discover apps and products!"),
 						action: /* @__PURE__ */ x("button", {
 							type: "button",
 							onClick: Z,
 							className: "cursor-pointer flex items-center gap-2 rounded-lg bg-action-primary-bg px-6 py-3 font-semibold text-action-primary-text transition-opacity hover:opacity-90",
-							children: [/* @__PURE__ */ b(v, { className: "size-5" }), "Browse Marketplace"]
+							children: [/* @__PURE__ */ b(v, { className: "size-5" }), O("pages.orders.browseMarketplace", "Browse Marketplace")]
 						})
 					}) : /* @__PURE__ */ x("div", {
 						className: "space-y-4",
@@ -206,7 +207,7 @@ var T = [
 								type: "button",
 								onClick: () => I("completed"),
 								className: `rounded-lg px-4 py-2 text-sm font-medium transition-colors ${F === "completed" ? "bg-action-primary-bg text-action-primary-text" : "text-text-muted hover:bg-bg-sunken hover:text-text-primary"}`,
-								children: ["Completed", /* @__PURE__ */ b("span", {
+								children: [O("pages.orders.tabCompleted", "Completed"), /* @__PURE__ */ b("span", {
 									className: "ml-2 rounded-full bg-black/10 px-2 py-0.5 text-xs",
 									children: K.length
 								})]
@@ -214,7 +215,7 @@ var T = [
 								type: "button",
 								onClick: () => I("pending"),
 								className: `rounded-lg px-4 py-2 text-sm font-medium transition-colors ${F === "pending" ? "bg-action-primary-bg text-action-primary-text" : "text-text-muted hover:bg-bg-sunken hover:text-text-primary"}`,
-								children: ["Pending", /* @__PURE__ */ b("span", {
+								children: [O("pages.orders.tabPending", "Pending"), /* @__PURE__ */ b("span", {
 									className: "ml-2 rounded-full bg-black/10 px-2 py-0.5 text-xs",
 									children: q.length
 								})]
@@ -228,11 +229,11 @@ var T = [
 								}),
 								/* @__PURE__ */ b("h2", {
 									className: "mb-2 text-lg font-semibold text-text-primary",
-									children: F === "completed" ? "No completed orders yet" : "No pending orders"
+									children: F === "completed" ? O("pages.orders.noCompletedTitle", "No completed orders yet") : O("pages.orders.noPendingTitle", "No pending orders")
 								}),
 								/* @__PURE__ */ b("p", {
 									className: "text-sm text-text-muted",
-									children: F === "completed" ? "Completed purchases will appear here once payment is successful." : "Orders that are pending, processing, failed, refunded, or cancelled will appear here."
+									children: F === "completed" ? O("pages.orders.noCompletedDescription", "Completed purchases will appear here once payment is successful.") : O("pages.orders.noPendingDescription", "Orders that are pending, processing, failed, refunded, or cancelled will appear here.")
 								})
 							]
 						}) : /* @__PURE__ */ x("div", {
@@ -244,33 +245,33 @@ var T = [
 										/* @__PURE__ */ b("div", { className: $ }),
 										/* @__PURE__ */ b("div", {
 											className: $,
-											children: "Order"
+											children: O("pages.orders.colOrder", "Order")
 										}),
 										/* @__PURE__ */ b("div", {
 											className: $,
-											children: "Date"
+											children: O("pages.orders.colDate", "Date")
 										}),
 										/* @__PURE__ */ b("div", {
 											className: $,
-											children: "Items"
+											children: O("pages.orders.colItems", "Items")
 										}),
 										/* @__PURE__ */ b("div", {
 											className: `${$} text-right`,
-											children: "Total"
+											children: O("pages.orders.colTotal", "Total")
 										}),
 										/* @__PURE__ */ b("div", {
 											className: `${$} text-center`,
-											children: "Status"
+											children: O("pages.orders.colStatus", "Status")
 										})
 									]
 								}),
 								J.map((e) => {
-									let t = ne.has(e.id), r = e.status === "COMPLETED" || e.status === "FULFILLED" || e.status === "PROCESSED";
+									let t = N.has(e.id), r = e.status === "COMPLETED" || e.status === "FULFILLED" || e.status === "PROCESSED";
 									return /* @__PURE__ */ x("div", {
 										className: "border-b border-border-seam last:border-b-0",
 										children: [/* @__PURE__ */ x("button", {
 											type: "button",
-											onClick: () => Y(e.id),
+											onClick: () => se(e.id),
 											className: "grid w-full cursor-pointer grid-cols-[40px_1fr_180px_140px_120px_160px] items-center transition-colors hover:bg-bg-sunken/50 md:grid",
 											children: [
 												/* @__PURE__ */ b("div", {
@@ -294,7 +295,7 @@ var T = [
 													children: [
 														e.items.length,
 														" ",
-														e.items.length === 1 ? "item" : "items",
+														e.items.length === 1 ? O("pages.orders.item", "item") : O("pages.orders.items", "items"),
 														/* @__PURE__ */ b("span", {
 															className: "block text-xs text-text-muted/70",
 															children: e.items.map((e) => e.productName).join(", ")
@@ -307,7 +308,10 @@ var T = [
 												}),
 												/* @__PURE__ */ b("div", {
 													className: `${Q} flex justify-center`,
-													children: /* @__PURE__ */ b(D, { status: e.status })
+													children: /* @__PURE__ */ b(D, {
+														status: e.status,
+														tr: O
+													})
 												})
 											]
 										}), t && /* @__PURE__ */ x("div", {
@@ -319,32 +323,25 @@ var T = [
 														className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between",
 														children: [/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("div", {
 															className: "text-sm font-semibold text-text-primary",
-															children: "Order tracking"
+															children: O("pages.orders.orderTracking", "Order tracking")
 														}), /* @__PURE__ */ x("div", {
 															className: "mt-1 text-xs text-text-muted",
 															children: [
-																e.fulfillment.status || "PENDING",
+																e.fulfillment.status || O("pages.orders.statusPending", "Pending"),
 																e.fulfillment.carrier ? ` · ${e.fulfillment.carrier}` : "",
-																e.fulfillment.estimatedDeliveryDate ? ` · Est. delivery ${new Date(e.fulfillment.estimatedDeliveryDate).toLocaleDateString()}` : ""
+																e.fulfillment.estimatedDeliveryDate ? ` · ${O("pages.orders.estimatedDelivery", "Est. delivery {{date}}", { date: new Date(e.fulfillment.estimatedDeliveryDate).toLocaleDateString() })}` : ""
 															]
 														})] }), /* @__PURE__ */ x("div", {
 															className: "flex flex-col items-start gap-2 md:items-end",
-															children: [e.fulfillment.trackingNumber && /* @__PURE__ */ x("div", {
+															children: [e.fulfillment.trackingNumber && /* @__PURE__ */ b("div", {
 																className: "text-xs text-text-muted",
-																children: [
-																	"Tracking #:",
-																	" ",
-																	/* @__PURE__ */ b("span", {
-																		className: "font-medium text-text-primary",
-																		children: e.fulfillment.trackingNumber
-																	})
-																]
+																children: O("pages.orders.trackingNumber", "Tracking #: {{number}}", { number: e.fulfillment.trackingNumber })
 															}), e.fulfillment.trackingUrl && /* @__PURE__ */ x("a", {
 																href: e.fulfillment.trackingUrl,
 																target: "_blank",
 																rel: "noreferrer",
 																className: "inline-flex items-center gap-1 rounded-md border border-border-default px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-bg-sunken",
-																children: ["Track package", /* @__PURE__ */ b(f, { className: "size-3.5" })]
+																children: [O("pages.orders.trackPackage", "Track package"), /* @__PURE__ */ b(f, { className: "size-3.5" })]
 															})]
 														})]
 													}), /* @__PURE__ */ b("div", {
@@ -352,19 +349,19 @@ var T = [
 														children: [
 															{
 																key: "PROCESSING",
-																label: "Processing"
+																label: O("pages.orders.stepProcessing", "Processing")
 															},
 															{
 																key: "SHIPPED",
-																label: "Shipped"
+																label: O("pages.orders.stepShipped", "Shipped")
 															},
 															{
 																key: "OUT_FOR_DELIVERY",
-																label: "Out for delivery"
+																label: O("pages.orders.stepOutForDelivery", "Out for delivery")
 															},
 															{
 																key: "DELIVERED",
-																label: "Delivered"
+																label: O("pages.orders.stepDelivered", "Delivered")
 															}
 														].map((t) => {
 															let n = e.fulfillment?.status || "PENDING";
@@ -392,19 +389,19 @@ var T = [
 													children: [
 														/* @__PURE__ */ b("span", {
 															className: "text-xs font-medium text-text-muted",
-															children: "Product"
+															children: O("pages.orders.colProduct", "Product")
 														}),
 														/* @__PURE__ */ b("span", {
 															className: "text-xs font-medium text-text-muted text-right",
-															children: "Qty"
+															children: O("pages.orders.colQty", "Qty")
 														}),
 														/* @__PURE__ */ b("span", {
 															className: "text-xs font-medium text-text-muted text-right",
-															children: "Price"
+															children: O("pages.orders.colPrice", "Price")
 														}),
 														/* @__PURE__ */ b("span", {
 															className: "text-xs font-medium text-text-muted text-center",
-															children: "Action"
+															children: O("pages.orders.colAction", "Action")
 														})
 													]
 												}),
@@ -444,28 +441,28 @@ var T = [
 																className: "hidden text-right text-sm font-semibold tabular-nums text-text-primary md:block",
 																children: n(t.totalPrice)
 															}),
-															/* @__PURE__ */ x("div", {
+															/* @__PURE__ */ b("div", {
 																className: "text-right text-sm text-text-muted md:hidden",
-																children: [/* @__PURE__ */ x("span", {
+																children: /* @__PURE__ */ b("span", {
 																	className: "tabular-nums",
-																	children: [t.quantity, " × "]
-																}), /* @__PURE__ */ b("span", {
-																	className: "font-semibold text-text-primary tabular-nums",
-																	children: n(t.unitPrice)
-																})]
+																	children: O("pages.orders.qtyTimesPrice", "{{qty}} × {{price}}", {
+																		qty: t.quantity,
+																		price: n(t.unitPrice)
+																	})
+																})
 															}),
 															/* @__PURE__ */ b("div", {
 																className: "flex justify-end md:justify-center",
 																children: t.installed ? /* @__PURE__ */ x("span", {
 																	className: "inline-flex items-center gap-1 rounded-lg px-3 py-1.5 text-xs font-medium text-status-success-text",
-																	children: [/* @__PURE__ */ b(d, { className: "size-3.5" }), "Installed"]
+																	children: [/* @__PURE__ */ b(d, { className: "size-3.5" }), O("pages.orders.installed", "Installed")]
 																}) : r && i ? /* @__PURE__ */ x("button", {
 																	type: "button",
 																	onClick: (n) => {
-																		n.stopPropagation(), ae(e.id, t);
+																		n.stopPropagation(), ce(e.id, t);
 																	},
 																	className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text transition-all hover:opacity-90 active:scale-95",
-																	children: [/* @__PURE__ */ b(m, { className: "size-3.5" }), "Install App"]
+																	children: [/* @__PURE__ */ b(m, { className: "size-3.5" }), O("pages.orders.installApp", "Install App")]
 																}) : null
 															})
 														]
@@ -477,7 +474,7 @@ var T = [
 														className: "flex justify-end gap-6 text-xs text-text-muted",
 														children: [
 															/* @__PURE__ */ x("span", { children: [
-																"Subtotal:",
+																O("pages.orders.subtotal", "Subtotal:"),
 																" ",
 																/* @__PURE__ */ b("span", {
 																	className: "tabular-nums text-text-primary",
@@ -485,7 +482,7 @@ var T = [
 																})
 															] }),
 															/* @__PURE__ */ x("span", { children: [
-																"Tax:",
+																O("pages.orders.tax", "Tax:"),
 																" ",
 																/* @__PURE__ */ b("span", {
 																	className: "tabular-nums text-text-primary",
@@ -495,7 +492,7 @@ var T = [
 															/* @__PURE__ */ x("span", {
 																className: "font-semibold",
 																children: [
-																	"Total:",
+																	O("pages.orders.total", "Total:"),
 																	" ",
 																	/* @__PURE__ */ b("span", {
 																		className: "tabular-nums text-text-primary",
@@ -510,15 +507,15 @@ var T = [
 										})]
 									}, e.id);
 								}),
-								M && /* @__PURE__ */ b("div", {
+								re && /* @__PURE__ */ b("div", {
 									className: "flex justify-center px-4 py-5",
 									children: /* @__PURE__ */ x("button", {
 										type: "button",
-										onClick: N,
-										disabled: k,
+										onClick: ie,
+										disabled: A,
 										className: "flex items-center gap-2 rounded-lg border border-border-default px-6 py-2.5 text-sm font-medium text-text-primary transition-colors hover:bg-bg-subtle disabled:opacity-50",
 										"aria-label": E("common.loadMore", { defaultValue: "Load more" }),
-										children: [k ? /* @__PURE__ */ b(h, {
+										children: [A ? /* @__PURE__ */ b(h, {
 											className: "size-4 animate-spin",
 											"aria-hidden": "true"
 										}) : null, E("common.loadMore", { defaultValue: "Load more" })]
@@ -529,13 +526,13 @@ var T = [
 					})]
 				})
 			}),
-			V && /* @__PURE__ */ b(r, {
+			V && /* @__PURE__ */ b(i, {
 				isOpen: L,
-				onClose: X,
+				onClose: Y,
 				app: V,
 				orderId: z,
-				onInstallSuccess: oe,
-				onInstallError: se
+				onInstallSuccess: le,
+				onInstallError: X
 			})
 		]
 	});