@fluid-app/fluid-cli-theme-dev 0.1.59 → 0.1.61

package/dist/dist-cli-preview/chunks/OrdersScreen-CVEl9FnN.js

@@ -0,0 +1,1349 @@
+import { O as re, l as c, W as se, j as t, M as L, a1 as B, ai as ne, B as D, am as ae, E as ie } from "./account-screen-runtime-DxhJm6Qd.js";
+import { a as le, c as oe, b as de, u as ce, I as ue, S as g } from "./sheet-haptics-context-D2WUiXJm.js";
+import { h as R, I as me, R as pe, m as xe, r as T, n as U, i as P, f as fe, p as ge } from "./MemberManagementProviders-DMwkh3JW.js";
+import { u as he, S as M } from "./useInfiniteQuery-BpFtQ7DH.js";
+import { B as K, a as Y, b as S, c as W, d as _e, e as be } from "./Breadcrumb-CZ-skiUy.js";
+import "./store-api-context-BIdILNWL.js";
+import { u as je } from "./use-optional-store-Csor1Z3z.js";
+const ye = {
+  all: ["orders"]
+}, O = {
+  all: ["portalTenantOrders"],
+  list: (e) => [...O.all, "list", e],
+  detail: (e) => [...O.all, "detail", e]
+};
+function Ne(e, r) {
+  const s = R();
+  return he({
+    queryKey: [...ye.all, "infinite-list", e],
+    queryFn: ({ pageParam: a }) => {
+      if (!s.fetchCustomerOrders)
+        throw new Error(
+          "fetchCustomerOrders not implemented on this OrdersApi"
+        );
+      return s.fetchCustomerOrders({ ...e, cursor: a });
+    },
+    getNextPageParam: (a) => a.meta?.pagination?.next_cursor ?? void 0,
+    initialPageParam: void 0,
+    enabled: r?.enabled ?? !0
+  });
+}
+function q(e, r) {
+  const s = R();
+  return re({
+    queryKey: O.detail(e),
+    queryFn: () => {
+      if (!s.fetchOrderById)
+        throw new Error("fetchOrderById not implemented on this OrdersApi");
+      return s.fetchOrderById(e);
+    },
+    enabled: !!e
+  });
+}
+function ve(e) {
+  return e.order_total_after_points_redemption != null ? `${e.currency_symbol || "$"}${Number(
+    e.order_total_after_points_redemption
+  ).toFixed(2)}` : e.total_display_amount || `${e.currency_symbol || "$"}${Number(e.amount).toFixed(2)}`;
+}
+function we(e, r, s) {
+  if (!r.address1 || !r.city || !r.state || !r.postal_code)
+    return null;
+  const a = `${r.address1}, ${r.city}, ${r.state} ${r.postal_code.slice(0, 5)}`, n = encodeURIComponent(a), l = s?.width ?? 600, i = s?.height ?? 300, o = s?.zoom ?? 15, d = encodeURIComponent(s?.markerColor ?? "red");
+  return `https://maps.googleapis.com/maps/api/staticmap?center=${n}&zoom=${o}&size=${l}x${i}&maptype=roadmap&markers=color:${d}%7C${n}&key=${e}`;
+}
+const $ = {
+  singular: "point",
+  plural: "points"
+};
+function ke() {
+  const { data: e } = je(), r = e?.reward_points_label_singular?.trim() || $.singular, s = e?.reward_points_label_plural?.trim() || $.plural;
+  return c.useMemo(() => ({ singular: r, plural: s }), [r, s]);
+}
+const Se = {
+  breadcrumb: "Orders",
+  breadcrumb_detail: "Order #{{id}}",
+  search_orders: "Search orders...",
+  order_number: "Order #",
+  date: "Date",
+  status: "Status",
+  product: "Product",
+  total: "Total",
+  no_orders_found: "No orders found",
+  no_matching_orders: "No matching orders",
+  no_image_available: "No image available",
+  no_image: "No image",
+  this_product_no_longer_exists: "This product no longer exists",
+  subscription: "Subscription",
+  subscription_hash: "Subscription #{{token}}",
+  view_subscription: "View Subscription",
+  results: "results",
+  previous: "Previous",
+  next: "Next",
+  pagination: "Pagination",
+  showing: "Showing",
+  to: "to",
+  of: "of",
+  order_not_found: "Order not found",
+  error_generic: "An error occurred",
+  error_loading_order: "Failed to load order: {{message}}",
+  items_count: "Items ({{count}})",
+  subtotal: "Subtotal",
+  discount: "Discount",
+  shipping: "Shipping",
+  shipping_free: "Free",
+  tax: "Tax",
+  tax_included: "{{name}}, included",
+  points_applied: "{{label}} Applied",
+  points_earned: "{{label}} Earned on This Order!",
+  points_total: "{{count}} {{label}} total",
+  points: "{{label}}",
+  status_label: "Status:",
+  payment_label: "Payment:",
+  fulfillment_label: "Fulfillment:",
+  delivery_label: "Delivery:",
+  order_info: "Order Info",
+  order: "Order",
+  order_number_label: "Order Number",
+  email: "Email",
+  customer: "Customer",
+  payment_method: "Payment Method",
+  no_payment_method: "No payment method",
+  card_ending_in: "{{brand}} ending in {{last4}}",
+  shipping_address: "Shipping Address",
+  no_shipping_address: "No shipping address available",
+  billing_address: "Billing Address",
+  shipping_method: "Shipping Method",
+  estimated_delivery: "Est. {{estimate}}",
+  sku_label: "SKU: {{sku}}",
+  // ── Orders list screen ──────────────────────────────────────────────
+  order_history: "Order history",
+  loading: "Loading...",
+  load_more: "Load more",
+  filter_all: "All",
+  filter_fulfilled: "Fulfilled",
+  filter_preparing: "Preparing",
+  filter_subscription: "Subscription",
+  status_cancelled: "Cancelled",
+  status_completed: "Completed",
+  status_fulfilled: "Fulfilled",
+  status_pending: "Pending",
+  status_preparing: "Preparing",
+  status_processing: "Processing",
+  status_refunded: "Refunded",
+  status_returned: "Returned",
+  status_shipped: "Shipped",
+  group_this_week: "This week",
+  group_this_month: "This month",
+  today: "Today",
+  yesterday: "Yesterday",
+  n_days_ago: "{{n}} days ago",
+  last_week: "Last week",
+  n_weeks_ago: "{{n}} weeks ago",
+  more_items: "+ {{n}} more",
+  from_subscription: "From subscription",
+  no_orders_yet: "No orders yet",
+  search_hint: "Try a different search term.",
+  empty_hint: "Your orders will show up here after you place one.",
+  load_failed_title: "Couldn't load your orders",
+  load_failed_hint: "Something went wrong on our end. Please try again.",
+  try_again: "Try again",
+  shipping_address_map: "Shipping address map",
+  card_fallback: "Card",
+  order_on_its_way: "Your order is on its way",
+  tracking_number: "Tracking number",
+  track_package: "Track package",
+  track_package_aria: "Track package {{number}}",
+  track_package_aria_with_carrier: "Track {{carrier}} package {{number}}"
+}, Oe = le({
+  fallback: Se,
+  loaders: {
+    ar: () => import("./ar-8iaFSgop.js").then(
+      (e) => e.default
+    ),
+    bg: () => import("./bg-D_C_HmWn.js").then(
+      (e) => e.default
+    ),
+    bn: () => import("./bn-UEAt87N9.js").then(
+      (e) => e.default
+    ),
+    cs: () => import("./cs-B8rJsMOS.js").then(
+      (e) => e.default
+    ),
+    da: () => import("./da-J--1RxZp.js").then(
+      (e) => e.default
+    ),
+    de: () => import("./de-BTNiErdB.js").then(
+      (e) => e.default
+    ),
+    el: () => import("./el-DYay96x-.js").then(
+      (e) => e.default
+    ),
+    es: () => import("./es-Cf56ydFZ.js").then(
+      (e) => e.default
+    ),
+    fi: () => import("./fi-CC2YqekN.js").then(
+      (e) => e.default
+    ),
+    fr: () => import("./fr-Do6AIa1z.js").then(
+      (e) => e.default
+    ),
+    he: () => import("./he-DaWGyHjM.js").then(
+      (e) => e.default
+    ),
+    hi: () => import("./hi-BXBdXuFm.js").then(
+      (e) => e.default
+    ),
+    hr: () => import("./hr-DBrPFNLx.js").then(
+      (e) => e.default
+    ),
+    hu: () => import("./hu-BcC628Ln.js").then(
+      (e) => e.default
+    ),
+    id: () => import("./id-CLvNjXjm.js").then(
+      (e) => e.default
+    ),
+    it: () => import("./it-D5BXSiSl.js").then(
+      (e) => e.default
+    ),
+    ja: () => import("./ja-Bc8dA1LN.js").then(
+      (e) => e.default
+    ),
+    ko: () => import("./ko-CJ-8gCc9.js").then(
+      (e) => e.default
+    ),
+    ms: () => import("./ms-BF5gF9D5.js").then(
+      (e) => e.default
+    ),
+    nl: () => import("./nl-C5fWLZkK.js").then(
+      (e) => e.default
+    ),
+    no: () => import("./no-Dk9D1gjY.js").then(
+      (e) => e.default
+    ),
+    pl: () => import("./pl-D7AZQwtK.js").then(
+      (e) => e.default
+    ),
+    pt: () => import("./pt-62Kd-NN1.js").then(
+      (e) => e.default
+    ),
+    ro: () => import("./ro-DTauvv2V.js").then(
+      (e) => e.default
+    ),
+    ru: () => import("./ru-g5Cz5HSk.js").then(
+      (e) => e.default
+    ),
+    sk: () => import("./sk-YuAeAaeZ.js").then(
+      (e) => e.default
+    ),
+    sv: () => import("./sv-iaAh80e4.js").then(
+      (e) => e.default
+    ),
+    th: () => import("./th-DMPCj1Fg.js").then(
+      (e) => e.default
+    ),
+    tl: () => import("./tl-w5CgYWXn.js").then(
+      (e) => e.default
+    ),
+    tr: () => import("./tr-CHri_kqV.js").then(
+      (e) => e.default
+    ),
+    uk: () => import("./uk-ByJtQJHi.js").then(
+      (e) => e.default
+    ),
+    vi: () => import("./vi-DFicISRE.js").then(
+      (e) => e.default
+    ),
+    zh_CN: () => import("./zh_CN-BwpNGMQN.js").then(
+      (e) => e.default
+    ),
+    zh_TW: () => import("./zh_TW-Oq4Chn8F.js").then(
+      (e) => e.default
+    )
+  }
+});
+function De(e, r) {
+  return oe(e, r);
+}
+const { Provider: Ce, useTranslation: Le } = de("Orders"), Te = Ce, m = Le;
+function F({
+  children: e
+}) {
+  const { locale: r } = se(), s = ce(Oe, r), a = c.useMemo(
+    () => De(r, s),
+    [r, s]
+  );
+  return /* @__PURE__ */ t.jsx(Te, { value: a, children: e });
+}
+const Pe = {
+  green: "bg-green-500/15 text-foreground",
+  yellow: "bg-yellow-500/15 text-foreground",
+  red: "bg-red-500/15 text-foreground",
+  blue: "bg-blue-500/15 text-foreground",
+  orange: "bg-orange-500/15 text-foreground",
+  gray: "bg-foreground/10 text-foreground"
+}, $e = {
+  green: "bg-green-500",
+  yellow: "bg-yellow-500",
+  red: "bg-red-500",
+  blue: "bg-blue-500",
+  orange: "bg-orange-500",
+  gray: "bg-gray-500"
+}, Fe = {
+  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 Ee({
+  color: e,
+  dot: r,
+  size: s = "md",
+  className: a,
+  children: n
+}) {
+  return /* @__PURE__ */ t.jsxs(
+    "span",
+    {
+      className: L(
+        "inline-flex items-center gap-1 rounded-full font-medium whitespace-nowrap capitalize",
+        Pe[e],
+        Fe[s],
+        a
+      ),
+      children: [
+        r && /* @__PURE__ */ t.jsx(
+          "span",
+          {
+            className: L("h-1.5 w-1.5 rounded-full", $e[e])
+          }
+        ),
+        n
+      ]
+    }
+  );
+}
+function ze(e) {
+  return e ? e.replace(/_/g, " ").replace(/\b\w/g, (r) => r.toUpperCase()) : "";
+}
+function E(e) {
+  return e.charAt(0).toUpperCase() + e.slice(1);
+}
+const Ae = /* @__PURE__ */ new Set([
+  "cancelled",
+  "completed",
+  "fulfilled",
+  "pending",
+  "preparing",
+  "processing",
+  "refunded",
+  "returned",
+  "shipped"
+]);
+function Ie(e, r) {
+  const s = r.toLowerCase();
+  return Ae.has(s) ? e(`status_${s}`) : ze(r);
+}
+function Be(e) {
+  return e.sale_date ?? e.created_at;
+}
+const Re = {
+  fulfilled: "gray",
+  unfulfilled: "yellow",
+  in_progress: "yellow",
+  on_hold: "orange",
+  partially_fulfilled: "yellow",
+  scheduled: "blue",
+  // `processing` is not a fulfillment_status enum value but the BFF /
+  // legacy responses can surface it; admin colors it yellow, so we match.
+  processing: "yellow"
+}, G = {
+  cancelled: "red",
+  returned: "red",
+  refunded: "red"
+};
+function Ue(e) {
+  return e.includes("fulfilled") || e.includes("complete") ? "gray" : e.includes("hold") ? "orange" : "yellow";
+}
+const Me = new Set(Object.keys(G)), z = "refunded";
+function V(e, r, s) {
+  return e && Me.has(e.toLowerCase()) ? e : s?.toLowerCase() === z ? z : r ?? e ?? "";
+}
+function Ke(e) {
+  if (!e) return "gray";
+  const r = e.toLowerCase();
+  return Re[r] ?? G[r] ?? Ue(r);
+}
+function X({
+  status: e,
+  className: r
+}) {
+  const { t: s } = m();
+  return /* @__PURE__ */ t.jsx(
+    Ee,
+    {
+      color: Ke(e),
+      dot: !0,
+      size: "sm",
+      className: r,
+      children: Ie(s, e)
+    }
+  );
+}
+function Ye({
+  apiKey: e,
+  address: r,
+  options: s,
+  alt: a,
+  className: n
+}) {
+  const { t: l } = m(), [i, o] = c.useState(!1), d = we(e, r, s);
+  return !d || i ? null : /* @__PURE__ */ t.jsx(
+    "img",
+    {
+      src: d,
+      alt: a ?? l("shipping_address_map"),
+      width: s?.width ?? 600,
+      height: s?.height ?? 300,
+      className: n ?? "border-border w-full rounded border object-cover shadow-xs",
+      onError: () => o(!0)
+    }
+  );
+}
+const We = {
+  fulfilled: "fulfilled",
+  // `completed` is an order_status lifecycle value kept as a defensive
+  // alias so an order whose BFF response is missing `fulfillment_status`
+  // still classifies as fulfilled instead of unknown/pending.
+  completed: "fulfilled",
+  shipped: "shipped",
+  partially_fulfilled: "preparing",
+  in_progress: "preparing",
+  on_hold: "preparing",
+  scheduled: "preparing",
+  preparing: "preparing",
+  cancelled: "cancelled",
+  returned: "cancelled",
+  refunded: "cancelled",
+  pending: "pending",
+  unfulfilled: "pending",
+  processing: "pending"
+};
+function qe(e) {
+  return We[(e || "").toLowerCase()] ?? "pending";
+}
+function H(e) {
+  return V(
+    e.order_status,
+    e.fulfillment_status,
+    e.financial_status
+  );
+}
+function y(e, r) {
+  if (e === "all") return !0;
+  if (e === "subscription") return r.subscription != null;
+  const s = qe(H(r));
+  return e === "fulfilled" ? s === "fulfilled" || s === "shipped" : e === "preparing" ? s === "preparing" || s === "pending" : !0;
+}
+function Ge(e) {
+  return {
+    all: e.length,
+    fulfilled: e.filter((r) => y("fulfilled", r)).length,
+    preparing: e.filter((r) => y("preparing", r)).length,
+    subscription: e.filter((r) => y("subscription", r)).length
+  };
+}
+function Q(e) {
+  return e.sale_date ?? e.created_at;
+}
+function Ve(e, r, s = /* @__PURE__ */ new Date()) {
+  if (e.length === 0) return [];
+  const a = new Date(
+    s.getFullYear(),
+    s.getMonth(),
+    s.getDate()
+  ), n = new Date(a);
+  n.setDate(n.getDate() - 7);
+  const l = new Date(s.getFullYear(), s.getMonth(), 1), i = new Date(s.getFullYear(), 0, 1), o = /* @__PURE__ */ new Map(), d = [];
+  for (const u of e) {
+    const h = new Date(Q(u));
+    let x;
+    h >= n ? x = r("group_this_week") : h >= l ? x = r("group_this_month") : h >= i ? x = h.toLocaleDateString(void 0, {
+      month: "long"
+    }) : x = h.toLocaleDateString(void 0, {
+      month: "long",
+      year: "numeric"
+    });
+    let _ = o.get(x);
+    _ || (_ = [], o.set(x, _), d.push(x)), _.push(u);
+  }
+  return d.map((u) => ({
+    label: u,
+    orders: o.get(u) ?? []
+  }));
+}
+function Xe(e, r, s = /* @__PURE__ */ new Date()) {
+  try {
+    const a = new Date(e), n = new Date(
+      s.getFullYear(),
+      s.getMonth(),
+      s.getDate()
+    ), l = new Date(a.getFullYear(), a.getMonth(), a.getDate()), i = Math.round(
+      (n.getTime() - l.getTime()) / (1e3 * 60 * 60 * 24)
+    );
+    return i === 0 ? r("today") : i === 1 ? r("yesterday") : i < 7 ? r("n_days_ago", { n: i }) : i < 14 ? r("last_week") : i < 30 ? r("n_weeks_ago", { n: Math.round(i / 7) }) : a.getFullYear() === s.getFullYear() ? a.toLocaleDateString(void 0, {
+      month: "short",
+      day: "numeric"
+    }) : a.toLocaleDateString(void 0, {
+      month: "short",
+      day: "numeric",
+      year: "numeric"
+    });
+  } catch {
+    return "";
+  }
+}
+function He(e, r) {
+  return e === 0 ? {
+    left: "50%",
+    transform: "translateX(-50%)",
+    zIndex: 30
+  } : e === 1 ? {
+    left: "50%",
+    transform: r === 2 ? "translateX(-25%) rotate(7deg)" : "translateX(-20%) rotate(7deg)",
+    zIndex: 20
+  } : {
+    left: "50%",
+    transform: "translateX(-80%) rotate(-7deg)",
+    zIndex: 10
+  };
+}
+function Qe({
+  customerId: e,
+  onOrderClick: r,
+  t: s
+}) {
+  const { t: a } = m(), n = s ?? a, [l, i] = c.useState(""), [o, d] = c.useState("all"), {
+    data: u,
+    isLoading: h,
+    isError: x,
+    refetch: _,
+    fetchNextPage: J,
+    hasNextPage: Z,
+    isFetchingNextPage: C
+  } = Ne(
+    {
+      customerId: e,
+      limit: 10,
+      search: l || void 0,
+      sort: "-created_at"
+    },
+    { enabled: !!e }
+  ), b = c.useMemo(
+    () => u?.pages.flatMap((f) => f.orders) ?? [],
+    [u]
+  ), ee = c.useMemo(() => Ge(b), [b]), N = c.useMemo(
+    () => b.filter((f) => y(o, f)),
+    [b, o]
+  ), te = c.useMemo(
+    () => Ve(N, n),
+    [N, n]
+  );
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(B, { children: /* @__PURE__ */ t.jsx(K, { children: /* @__PURE__ */ t.jsx(Y, { className: "text-lg", children: /* @__PURE__ */ t.jsx(S, { children: /* @__PURE__ */ t.jsx(W, { className: "font-semibold", children: n("order_history") }) }) }) }) }),
+    /* @__PURE__ */ t.jsx("div", { className: "relative", children: /* @__PURE__ */ t.jsxs("div", { className: "relative mx-auto max-w-4xl px-5 pt-8 pb-20 md:px-8", children: [
+      /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ t.jsx("h1", { className: "text-foreground flex-1 truncate text-xl font-bold tracking-tight md:text-2xl", children: n("order_history") }),
+        /* @__PURE__ */ t.jsxs("div", { className: "relative hidden sm:block", children: [
+          /* @__PURE__ */ t.jsx(
+            M,
+            {
+              className: "text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2",
+              strokeWidth: 2
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            ue,
+            {
+              value: l,
+              onChange: (f) => i(f.target.value),
+              placeholder: n("search_orders"),
+              className: "ring-border h-9 w-64 rounded-md bg-transparent pl-9 text-xs"
+            }
+          )
+        ] })
+      ] }),
+      b.length > 0 && /* @__PURE__ */ t.jsx(
+        Ze,
+        {
+          active: o,
+          counts: ee,
+          onChange: d,
+          t: n
+        }
+      ),
+      h ? /* @__PURE__ */ t.jsx("div", { className: "ring-border mt-4 overflow-hidden rounded-2xl bg-transparent ring-1", children: /* @__PURE__ */ t.jsx(rt, {}) }) : x ? /* @__PURE__ */ t.jsx("div", { className: "ring-border mt-4 overflow-hidden rounded-2xl bg-transparent ring-1", children: /* @__PURE__ */ t.jsx(nt, { onRetry: () => _(), t: n }) }) : N.length === 0 ? /* @__PURE__ */ t.jsx("div", { className: "ring-border mt-4 overflow-hidden rounded-2xl bg-transparent ring-1", children: /* @__PURE__ */ t.jsx(st, { searching: !!l || o !== "all", t: n }) }) : /* @__PURE__ */ t.jsx("div", { className: "mt-4 space-y-6", children: te.map((f) => /* @__PURE__ */ t.jsxs("div", { children: [
+        /* @__PURE__ */ t.jsx("div", { className: "text-muted-foreground mb-2 px-1 text-xs font-semibold", children: f.label }),
+        /* @__PURE__ */ t.jsx("div", { className: "space-y-3", children: f.orders.map((v) => /* @__PURE__ */ t.jsx(
+          et,
+          {
+            order: v,
+            onClick: () => r(v),
+            t: n
+          },
+          v.id
+        )) })
+      ] }, f.label)) }),
+      Z && /* @__PURE__ */ t.jsx("div", { className: "mt-3 flex justify-center", children: /* @__PURE__ */ t.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => J(),
+          disabled: C,
+          className: "ring-border text-foreground hover:bg-muted inline-flex items-center gap-1 rounded-md bg-transparent px-3 py-1.5 text-xs font-bold ring-1 transition-all disabled:cursor-not-allowed disabled:opacity-40",
+          children: n(C ? "loading" : "load_more")
+        }
+      ) })
+    ] }) })
+  ] });
+}
+const Je = [
+  { key: "all", labelKey: "filter_all" },
+  { key: "fulfilled", labelKey: "filter_fulfilled" },
+  { key: "preparing", labelKey: "filter_preparing" },
+  { key: "subscription", labelKey: "filter_subscription" }
+];
+function Ze({
+  active: e,
+  counts: r,
+  onChange: s,
+  t: a
+}) {
+  return /* @__PURE__ */ t.jsx("div", { className: "-mx-1 mt-5 flex flex-wrap gap-1.5 px-1", children: Je.map((n) => {
+    const l = n.key === e, i = r[n.key];
+    return /* @__PURE__ */ t.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => s(n.key),
+        className: `inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-bold transition-all ${l ? "bg-primary text-primary-foreground" : "ring-border text-foreground hover:bg-muted bg-transparent ring-1"}`,
+        children: [
+          a(n.labelKey),
+          /* @__PURE__ */ t.jsx(
+            "span",
+            {
+              className: `text-xs tabular-nums ${l ? "text-primary-foreground/70" : "text-muted-foreground"}`,
+              children: i
+            }
+          )
+        ]
+      },
+      n.key
+    );
+  }) });
+}
+function et({
+  order: e,
+  onClick: r,
+  t: s
+}) {
+  const a = Xe(Q(e), s), n = ve(e), l = e.first_item?.title || `${s("order_number")}${e.order_number}`, i = e.items_count > 1 ? s("more_items", { n: e.items_count - 1 }) : "";
+  return /* @__PURE__ */ t.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: r,
+      className: "group ring-foreground/5 hover:ring-foreground/10 focus-visible:ring-foreground/30 relative flex w-full cursor-pointer items-center gap-4 rounded-2xl bg-transparent p-4 text-left shadow-sm ring-1 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg focus-visible:ring-2 focus-visible:outline-none",
+      children: [
+        /* @__PURE__ */ t.jsxs("div", { className: "min-w-0 flex-1", children: [
+          e.order_number && e.first_item?.title && /* @__PURE__ */ t.jsxs("div", { className: "text-muted-foreground truncate text-xs", children: [
+            s("order_number"),
+            e.order_number
+          ] }),
+          /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ t.jsxs("div", { className: "text-foreground truncate text-sm font-bold", children: [
+              l,
+              i && /* @__PURE__ */ t.jsx("span", { className: "text-muted-foreground font-medium", children: i })
+            ] }),
+            /* @__PURE__ */ t.jsx(X, { status: H(e) })
+          ] }),
+          /* @__PURE__ */ t.jsxs("div", { className: "text-muted-foreground mt-1 truncate text-xs", children: [
+            a,
+            " · ",
+            n
+          ] })
+        ] }),
+        /* @__PURE__ */ t.jsx(
+          tt,
+          {
+            fallback: e.first_item,
+            urls: e.thumbnail_image_urls,
+            isSubscription: e.subscription != null,
+            t: s
+          }
+        )
+      ]
+    }
+  );
+}
+function tt({
+  urls: e,
+  fallback: r,
+  isSubscription: s,
+  t: a
+}) {
+  const n = (e && e.length > 0 ? e : r?.image_url ? [r.image_url] : []).slice(0, 3);
+  if (n.length === 0)
+    return /* @__PURE__ */ t.jsxs("div", { className: "ring-border bg-muted text-muted-foreground relative flex size-12 shrink-0 items-center justify-center rounded-xl ring-1", children: [
+      /* @__PURE__ */ t.jsx(me, { className: "size-5", strokeWidth: 1.75 }),
+      s && /* @__PURE__ */ t.jsx(w, { t: a })
+    ] });
+  if (n.length === 1)
+    return /* @__PURE__ */ t.jsxs("div", { className: "relative size-12 shrink-0", children: [
+      /* @__PURE__ */ t.jsx(
+        "img",
+        {
+          src: n[0],
+          alt: "",
+          className: "ring-background size-12 rounded-xl bg-transparent object-cover ring-[3px]"
+        }
+      ),
+      s && /* @__PURE__ */ t.jsx(w, { t: a })
+    ] });
+  const l = n.length === 3 ? "w-[80px]" : "w-[60px]";
+  return /* @__PURE__ */ t.jsxs("div", { className: `relative h-12 ${l} shrink-0`, children: [
+    n.map((i, o) => /* @__PURE__ */ t.jsx(
+      "img",
+      {
+        src: i,
+        alt: "",
+        className: "ring-background absolute top-0 size-12 rounded-xl bg-transparent object-cover ring-[3px]",
+        style: He(o, n.length)
+      },
+      `${i}-${o}`
+    )),
+    s && /* @__PURE__ */ t.jsx(w, { t: a })
+  ] });
+}
+function w({ t: e }) {
+  return /* @__PURE__ */ t.jsx(
+    "div",
+    {
+      className: "bg-primary text-primary-foreground ring-background absolute -top-1 -right-1 z-40 flex size-5 items-center justify-center rounded-full ring-2",
+      title: e("from_subscription"),
+      children: /* @__PURE__ */ t.jsx(pe, { className: "size-2.5", strokeWidth: 2.75 })
+    }
+  );
+}
+function rt() {
+  return /* @__PURE__ */ t.jsx(t.Fragment, { children: Array(4).fill(0).map((e, r) => /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      className: `flex items-center gap-3 px-4 py-3.5 ${r < 3 ? "border-border border-b" : ""}`,
+      children: [
+        /* @__PURE__ */ t.jsx("div", { className: "bg-muted size-12 shrink-0 animate-pulse rounded-xl" }),
+        /* @__PURE__ */ t.jsxs("div", { className: "flex-1 space-y-2", children: [
+          /* @__PURE__ */ t.jsx("div", { className: "bg-muted h-4 w-1/3 animate-pulse rounded" }),
+          /* @__PURE__ */ t.jsx("div", { className: "bg-muted h-3 w-1/2 animate-pulse rounded" })
+        ] })
+      ]
+    },
+    r
+  )) });
+}
+function st({
+  searching: e,
+  t: r
+}) {
+  return /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col items-center gap-2 px-4 py-12 text-center", children: [
+    /* @__PURE__ */ t.jsx("div", { className: "bg-muted flex size-12 items-center justify-center rounded-full", children: /* @__PURE__ */ t.jsx(M, { className: "text-muted-foreground size-5", strokeWidth: 2 }) }),
+    /* @__PURE__ */ t.jsx("div", { className: "text-foreground text-sm font-bold", children: r(e ? "no_matching_orders" : "no_orders_yet") }),
+    /* @__PURE__ */ t.jsx("div", { className: "text-muted-foreground max-w-sm text-xs", children: r(e ? "search_hint" : "empty_hint") })
+  ] });
+}
+function nt({
+  onRetry: e,
+  t: r
+}) {
+  return /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col items-center gap-2 px-4 py-12 text-center", children: [
+    /* @__PURE__ */ t.jsx("div", { className: "bg-muted flex size-12 items-center justify-center rounded-full", children: /* @__PURE__ */ t.jsx(ne, { className: "text-muted-foreground size-5", strokeWidth: 2 }) }),
+    /* @__PURE__ */ t.jsx("div", { className: "text-foreground text-sm font-bold", children: r("load_failed_title") }),
+    /* @__PURE__ */ t.jsx("div", { className: "text-muted-foreground max-w-sm text-xs", children: r("load_failed_hint") }),
+    /* @__PURE__ */ t.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: e,
+        className: "bg-primary text-primary-foreground hover:bg-primary/90 mt-2 inline-flex items-center gap-1 rounded-md px-3 py-1.5 text-xs font-bold transition-all",
+        children: r("try_again")
+      }
+    )
+  ] });
+}
+const at = 1;
+function it() {
+  const { navigate: e } = D(), { t: r } = m(), s = (a) => {
+    e(`orders/${a.token}`);
+  };
+  return /* @__PURE__ */ t.jsx(
+    Qe,
+    {
+      customerId: at,
+      onOrderClick: s,
+      t: r
+    }
+  );
+}
+const A = {
+  display: "inline-flex",
+  minHeight: "1.5rem",
+  alignItems: "center",
+  fontSize: "0.875rem",
+  lineHeight: 1,
+  // Let long unbroken fallback labels (e.g. a masked email/handle with no
+  // spaces) wrap instead of overflowing a narrow column. Inert for the
+  // masked-segments path, whose children are spans rather than text.
+  overflowWrap: "anywhere"
+}, lt = {
+  display: "inline-flex",
+  alignItems: "center",
+  // Wrap onto a new line in narrow containers (e.g. the checkout
+  // order-confirmation grid) instead of overflowing the box.
+  flexWrap: "wrap",
+  rowGap: "0.25rem"
+}, ot = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "0.375rem",
+  // Let a single group's dots wrap too, so one atomic group can never
+  // overflow an extremely narrow container.
+  flexWrap: "wrap"
+}, dt = {
+  display: "block",
+  width: "0.375rem",
+  height: "0.375rem",
+  borderRadius: "9999px",
+  backgroundColor: "currentColor"
+}, ct = {
+  marginLeft: "0.125rem"
+}, ut = "0.75rem";
+function mt({
+  label: e,
+  className: r
+}) {
+  const s = xe(e);
+  return s ? /* @__PURE__ */ t.jsx("p", { className: r, style: A, "aria-label": e, children: /* @__PURE__ */ t.jsx("span", { "aria-hidden": "true", style: lt, children: s.map((a, n) => {
+    if (a.kind === "gap") return null;
+    const l = s[n + 1]?.kind === "gap" ? { marginInlineEnd: ut } : null;
+    if (a.kind === "dots")
+      return /* @__PURE__ */ t.jsx(
+        "span",
+        {
+          style: { ...ot, ...l },
+          children: Array.from({ length: a.count }, (o, d) => /* @__PURE__ */ t.jsx("span", { style: dt }, d))
+        },
+        `${a.kind}-${n}`
+      );
+    const i = {
+      ...s[n - 1]?.kind === "dots" ? ct : null,
+      ...l
+    };
+    return /* @__PURE__ */ t.jsx(
+      "span",
+      {
+        style: Object.keys(i).length > 0 ? i : void 0,
+        children: a.value
+      },
+      `${a.kind}-${n}`
+    );
+  }) }) }) : /* @__PURE__ */ t.jsx("p", { className: r, style: A, children: e });
+}
+function pt(e) {
+  return e.last4 != null || fe(e.card_network) != null || U(e.card_network) != null || P(e.source) || P(e.payment_type);
+}
+function xt(e) {
+  return ge(e.payment_type, e.source) ?? "Payment method";
+}
+function ft(e) {
+  if (pt(e))
+    return T({
+      kind: "card",
+      brand: U(e.card_network),
+      last4: e.last4,
+      logoUrl: e.logo_url
+    });
+  const r = xt(e);
+  return T({
+    kind: "non_card",
+    brand: r,
+    fallbackLabel: r,
+    logoUrl: e.logo_url
+  });
+}
+function gt() {
+  return /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col lg:grid lg:grid-cols-8", children: [
+    /* @__PURE__ */ t.jsx("div", { className: "bg-muted flex flex-col items-center px-8 lg:col-span-4", children: /* @__PURE__ */ t.jsxs("div", { className: "w-full max-w-lg py-6", children: [
+      /* @__PURE__ */ t.jsx(g, { className: "mb-4 h-6 w-48" }),
+      /* @__PURE__ */ t.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-x-4", children: [
+        /* @__PURE__ */ t.jsx(g, { className: "size-24 rounded" }),
+        /* @__PURE__ */ t.jsxs("div", { className: "flex-1 space-y-2", children: [
+          /* @__PURE__ */ t.jsx(g, { className: "h-4 w-3/4" }),
+          /* @__PURE__ */ t.jsx(g, { className: "h-4 w-1/2" })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ t.jsxs("div", { className: "mt-6 space-y-2", children: [
+        /* @__PURE__ */ t.jsx(g, { className: "h-4 w-full" }),
+        /* @__PURE__ */ t.jsx(g, { className: "h-5 w-full" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ t.jsx("div", { className: "bg-background px-8 pt-4 lg:col-span-4", children: /* @__PURE__ */ t.jsxs("div", { className: "mx-auto max-w-lg lg:mx-0 lg:mr-auto", children: [
+      /* @__PURE__ */ t.jsx(g, { className: "mb-4 h-10 w-full rounded" }),
+      /* @__PURE__ */ t.jsxs("div", { className: "mt-6 space-y-4", children: [
+        /* @__PURE__ */ t.jsx(g, { className: "h-5 w-40" }),
+        /* @__PURE__ */ t.jsx(g, { className: "h-16 w-full rounded" })
+      ] })
+    ] }) })
+  ] });
+}
+function j({ label: e, value: r }) {
+  return /* @__PURE__ */ t.jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+    /* @__PURE__ */ t.jsx("p", { className: "text-muted-foreground", children: e }),
+    /* @__PURE__ */ t.jsx("p", { className: "text-foreground", children: r })
+  ] });
+}
+function I(e) {
+  return e.startsWith("-") ? e : `-${e}`;
+}
+function p(e, r) {
+  return e ?? r;
+}
+function ht(e) {
+  const r = [];
+  e.name && r.push(e.name), e.address1 && r.push(e.address1), e.address2 && r.push(e.address2);
+  const s = [e.city, e.state, e.postal_code].filter(Boolean).join(", ");
+  return s && r.push(s), e.country_code && r.push(e.country_code), e.phone && r.push(e.phone), r;
+}
+function k({
+  address: e,
+  title: r
+}) {
+  const s = ht(e);
+  return s.length === 0 ? null : /* @__PURE__ */ t.jsxs("div", { children: [
+    /* @__PURE__ */ t.jsx("h3", { className: "text-foreground mb-3 text-sm/6 font-semibold", children: r }),
+    /* @__PURE__ */ t.jsx("div", { className: "text-foreground space-y-0.5 text-sm", children: s.map((a, n) => /* @__PURE__ */ t.jsx("p", { children: a }, n)) })
+  ] });
+}
+function _t({
+  shippingMethod: e
+}) {
+  const { t: r } = m();
+  return e.title ? /* @__PURE__ */ t.jsxs("div", { children: [
+    /* @__PURE__ */ t.jsx("h3", { className: "text-foreground mb-3 text-sm/6 font-semibold", children: r("shipping_method") }),
+    /* @__PURE__ */ t.jsx("p", { className: "text-foreground text-sm", children: e.title })
+  ] }) : null;
+}
+function bt({
+  trackings: e
+}) {
+  const { t: r } = m();
+  return e.length === 0 ? null : /* @__PURE__ */ t.jsxs("div", { className: "border-border bg-muted/40 mb-6 rounded-md border p-4", children: [
+    /* @__PURE__ */ t.jsx("h3", { className: "text-foreground mb-3 text-sm/6 font-semibold", children: r("order_on_its_way") }),
+    /* @__PURE__ */ t.jsx("ul", { className: "flex flex-col gap-3", children: e.map((s) => /* @__PURE__ */ t.jsxs(
+      "li",
+      {
+        className: "flex flex-row items-start justify-between gap-3",
+        children: [
+          /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ t.jsx("span", { className: "text-foreground text-sm", children: s.shipping_carrier ? `${s.shipping_carrier} · ${s.tracking_number}` : s.tracking_number }),
+            !s.shipping_carrier && /* @__PURE__ */ t.jsx("span", { className: "text-muted-foreground text-xs", children: r("tracking_number") })
+          ] }),
+          s.tracking_url && /* @__PURE__ */ t.jsx(
+            "a",
+            {
+              href: s.tracking_url,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              "aria-label": s.shipping_carrier ? r("track_package_aria_with_carrier", {
+                carrier: s.shipping_carrier,
+                number: s.tracking_number
+              }) : r("track_package_aria", {
+                number: s.tracking_number
+              }),
+              className: "text-primary shrink-0 text-sm font-medium hover:underline",
+              children: r("track_package")
+            }
+          )
+        ]
+      },
+      `${s.id}-${s.tracking_number}`
+    )) })
+  ] });
+}
+function jt({
+  paymentMethod: e
+}) {
+  const { t: r } = m(), [s, a] = c.useState(!1), n = ft(e), l = s ? n.logo.fallbackUrl : n.logo.primaryUrl;
+  return c.useEffect(() => {
+    a(!1);
+  }, [
+    e.card_network,
+    e.last4,
+    e.logo_url,
+    e.payment_type,
+    e.source
+  ]), /* @__PURE__ */ t.jsxs("div", { children: [
+    /* @__PURE__ */ t.jsx("h3", { className: "text-foreground mb-3 text-sm/6 font-semibold", children: r("payment_method") }),
+    /* @__PURE__ */ t.jsxs("div", { className: "flex min-h-6 items-center gap-2", children: [
+      /* @__PURE__ */ t.jsx("span", { className: "inline-flex h-6 max-w-16 shrink-0 items-center justify-center", children: /* @__PURE__ */ t.jsx(
+        "img",
+        {
+          src: l,
+          alt: n.accessibilityLabel,
+          className: "block max-h-6 max-w-16 object-contain align-middle",
+          onError: () => a(!0)
+        }
+      ) }),
+      /* @__PURE__ */ t.jsx(mt, { label: n.label, className: "text-foreground" })
+    ] })
+  ] });
+}
+function yt({ src: e, alt: r }) {
+  const { t: s } = m(), [a, n] = c.useState(!1);
+  return a ? /* @__PURE__ */ t.jsx("span", { className: "text-xs", children: s("no_image") }) : /* @__PURE__ */ t.jsx(
+    "img",
+    {
+      src: e,
+      alt: r,
+      className: "h-full w-full object-cover",
+      onError: () => n(!0)
+    }
+  );
+}
+function Nt({
+  item: e,
+  onSubscriptionClick: r
+}) {
+  const { t: s } = m(), a = e.source_subscription?.subscription_token;
+  return /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-x-4 py-4", children: [
+    /* @__PURE__ */ t.jsxs("div", { className: "relative shrink-0", children: [
+      /* @__PURE__ */ t.jsx("div", { className: "bg-muted text-muted-foreground flex h-24 w-24 items-center justify-center overflow-hidden rounded", children: e.image_url ? /* @__PURE__ */ t.jsx(yt, { src: e.image_url, alt: e.product_name }) : /* @__PURE__ */ t.jsx("span", { className: "text-xs", children: s("no_image") }) }),
+      e.quantity > 1 && /* @__PURE__ */ t.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: e.quantity })
+    ] }),
+    /* @__PURE__ */ t.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-y-0.5", children: [
+      /* @__PURE__ */ t.jsx(
+        "p",
+        {
+          className: "text-foreground truncate text-sm font-medium",
+          title: e.product_name,
+          children: e.product_name
+        }
+      ),
+      e.variant_name && /* @__PURE__ */ t.jsx(
+        "p",
+        {
+          className: "text-muted-foreground truncate text-xs",
+          title: e.variant_name,
+          children: e.variant_name
+        }
+      ),
+      /* @__PURE__ */ t.jsx("p", { className: "text-foreground text-sm font-medium", children: p(e.total_in_currency, e.total) }),
+      e.quantity > 1 && /* @__PURE__ */ t.jsxs("p", { className: "text-muted-foreground text-xs", children: [
+        p(e.price_in_currency, e.price),
+        " x ",
+        e.quantity
+      ] }),
+      a && r && /* @__PURE__ */ t.jsx(
+        "button",
+        {
+          type: "button",
+          title: a,
+          className: "mt-1 max-w-full cursor-pointer truncate text-left text-xs text-blue-600 transition-colors duration-200 hover:text-blue-700 hover:underline",
+          onClick: () => r(a),
+          children: s("subscription_hash", { token: a })
+        }
+      )
+    ] })
+  ] });
+}
+function vt({
+  order: e,
+  onSubscriptionClick: r
+}) {
+  const { t: s } = m(), { singular: a, plural: n } = ke(), i = e.points_applied != null && e.points_applied > 0 ? p(
+    e.order_total_after_points_redemption_in_currency ?? null,
+    e.order_total_after_points_redemption != null ? String(e.order_total_after_points_redemption) : p(e.total_in_currency, e.total)
+  ) : p(e.total_in_currency, e.total);
+  return /* @__PURE__ */ t.jsx("section", { className: "bg-muted flex w-full flex-col items-center px-8 lg:col-span-4", children: /* @__PURE__ */ t.jsxs("div", { className: "flex w-full max-w-lg flex-col", children: [
+    /* @__PURE__ */ t.jsxs("div", { className: "mt-4", children: [
+      /* @__PURE__ */ t.jsx("h2", { className: "text-foreground mb-2 text-lg font-medium", children: s("items_count", { count: String(e.line_items.length) }) }),
+      /* @__PURE__ */ t.jsx("hr", { className: "border-border" })
+    ] }),
+    /* @__PURE__ */ t.jsx("div", { className: "divide-border divide-y", children: e.line_items.map((o) => /* @__PURE__ */ t.jsx(
+      Nt,
+      {
+        item: o,
+        onSubscriptionClick: r
+      },
+      o.id
+    )) }),
+    /* @__PURE__ */ t.jsxs("div", { className: "border-border mb-4 space-y-1 border-t pt-4", children: [
+      /* @__PURE__ */ t.jsx(
+        j,
+        {
+          label: s("subtotal"),
+          value: p(
+            e.totals?.gross_subtotal_in_currency ?? e.subtotal_in_currency,
+            e.totals?.gross_subtotal ?? e.subtotal
+          )
+        }
+      ),
+      parseFloat(e.discount) > 0 && /* @__PURE__ */ t.jsx(
+        j,
+        {
+          label: s("discount"),
+          value: I(
+            p(e.discount_in_currency, e.discount)
+          )
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        j,
+        {
+          label: s("shipping"),
+          value: p(e.shipping_in_currency, e.shipping)
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        j,
+        {
+          label: (
+            // STU2-2580: when the served totals are tax-inclusive, the gross
+            // Subtotal above already contains this VAT, so the Tax row is
+            // informational ("VAT included") — not an amount added on top.
+            // Keeping it a plain added row beside a GROSS subtotal would make
+            // the rows visually sum above the authoritative Total.
+            e.totals?.price_inclusive_of_tax && e.totals.tax_label ? `${s("tax")} (${s("tax_included", { name: e.totals.tax_label })})` : s("tax")
+          ),
+          value: p(e.tax_in_currency, e.tax)
+        }
+      ),
+      e.points_applied != null && e.points_applied > 0 && /* @__PURE__ */ t.jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+        /* @__PURE__ */ t.jsxs("p", { className: "text-muted-foreground", children: [
+          s("points_applied", { label: E(n) }),
+          /* @__PURE__ */ t.jsxs("span", { className: "ml-1 text-xs", children: [
+            "(",
+            e.points_applied.toLocaleString(),
+            " ",
+            e.points_applied === 1 ? a : n,
+            ")"
+          ] })
+        ] }),
+        /* @__PURE__ */ t.jsx("p", { className: "text-foreground", children: I(
+          p(
+            e.points_applied_amount_in_currency ?? null,
+            String(e.points_applied_amount ?? 0)
+          )
+        ) })
+      ] }),
+      /* @__PURE__ */ t.jsxs("div", { className: "mt-2 flex items-center justify-between text-base font-medium", children: [
+        /* @__PURE__ */ t.jsx("p", { className: "text-muted-foreground text-sm font-medium", children: s("total") }),
+        /* @__PURE__ */ t.jsx("p", { className: "text-foreground text-base font-bold", children: i })
+      ] })
+    ] }),
+    e.total_points_credited != null && e.total_points_credited > 0 && /* @__PURE__ */ t.jsx("div", { className: "border-border mb-4 border-t pt-4", children: /* @__PURE__ */ t.jsxs("div", { className: "flex items-baseline justify-between", children: [
+      /* @__PURE__ */ t.jsxs("div", { children: [
+        /* @__PURE__ */ t.jsx("p", { className: "text-foreground text-sm font-semibold", children: s("points_earned", { label: E(n) }) }),
+        e.customer_points_balance != null && /* @__PURE__ */ t.jsx("p", { className: "text-muted-foreground text-xs", children: s("points_total", {
+          count: e.customer_points_balance.toLocaleString(),
+          label: n
+        }) })
+      ] }),
+      /* @__PURE__ */ t.jsxs("div", { className: "text-right", children: [
+        /* @__PURE__ */ t.jsxs("p", { className: "text-foreground text-sm font-semibold", children: [
+          "+",
+          e.total_points_credited.toLocaleString()
+        ] }),
+        /* @__PURE__ */ t.jsx("p", { className: "text-muted-foreground text-xs", children: s("points", { label: n }) })
+      ] })
+    ] }) })
+  ] }) });
+}
+function wt({
+  order: e,
+  googleMapsApiKey: r
+}) {
+  const { t: s, locale: a } = m();
+  return /* @__PURE__ */ t.jsx("div", { className: "bg-background px-8 pt-4 lg:col-span-4", children: /* @__PURE__ */ t.jsxs("div", { className: "mx-auto max-w-lg lg:mx-0 lg:mr-auto", children: [
+    /* @__PURE__ */ t.jsx("div", { className: "border-border mb-6 border-b pb-6", children: /* @__PURE__ */ t.jsx("div", { className: "flex flex-wrap items-center gap-3", children: /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ t.jsx("span", { className: "text-muted-foreground text-sm", children: s("status_label") }),
+      /* @__PURE__ */ t.jsx(
+        X,
+        {
+          status: V(
+            e.status,
+            e.fulfillment_status,
+            e.financial_status
+          )
+        }
+      )
+    ] }) }) }),
+    r && e.shipping_address && /* @__PURE__ */ t.jsx("div", { className: "mb-6", children: /* @__PURE__ */ t.jsx(
+      Ye,
+      {
+        apiKey: r,
+        address: e.shipping_address
+      }
+    ) }),
+    /* @__PURE__ */ t.jsx(bt, { trackings: e.tracking_informations }),
+    /* @__PURE__ */ t.jsxs("div", { className: "border-border mb-6 border-b pb-6", children: [
+      /* @__PURE__ */ t.jsx("h3", { className: "text-foreground mb-3 text-sm/6 font-semibold", children: s("order_info") }),
+      /* @__PURE__ */ t.jsxs("div", { className: "divide-border flex divide-x", children: [
+        /* @__PURE__ */ t.jsxs("div", { className: "flex-1 pr-4", children: [
+          /* @__PURE__ */ t.jsx("div", { className: "text-muted-foreground text-sm", children: s("order") }),
+          /* @__PURE__ */ t.jsxs("div", { className: "text-foreground font-medium", children: [
+            "#",
+            e.order_number ?? e.id
+          ] })
+        ] }),
+        /* @__PURE__ */ t.jsxs("div", { className: "flex-1 pl-4 text-right", children: [
+          /* @__PURE__ */ t.jsx("div", { className: "text-muted-foreground text-sm", children: s("date") }),
+          /* @__PURE__ */ t.jsx("div", { className: "text-foreground font-medium", children: new Date(Be(e)).toLocaleDateString(
+            a,
+            {
+              year: "numeric",
+              month: "short",
+              day: "numeric"
+            }
+          ) })
+        ] })
+      ] }),
+      e.customer_email && /* @__PURE__ */ t.jsxs("div", { className: "mt-3", children: [
+        /* @__PURE__ */ t.jsx("div", { className: "text-muted-foreground text-sm", children: s("email") }),
+        /* @__PURE__ */ t.jsx("div", { className: "text-foreground text-sm font-medium", children: e.customer_email })
+      ] }),
+      e.customer_name && /* @__PURE__ */ t.jsxs("div", { className: "mt-3", children: [
+        /* @__PURE__ */ t.jsx("div", { className: "text-muted-foreground text-sm", children: s("customer") }),
+        /* @__PURE__ */ t.jsx("div", { className: "text-foreground text-sm font-medium", children: e.customer_name })
+      ] })
+    ] }),
+    e.shipping_address && e.billing_address ? /* @__PURE__ */ t.jsxs("div", { className: "border-border mb-6 grid grid-cols-2 gap-x-4 border-b pb-6", children: [
+      /* @__PURE__ */ t.jsx(
+        k,
+        {
+          address: e.shipping_address,
+          title: s("shipping_address")
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        k,
+        {
+          address: e.billing_address,
+          title: s("billing_address")
+        }
+      )
+    ] }) : e.shipping_address && /* @__PURE__ */ t.jsx("div", { className: "border-border mb-6 border-b pb-6", children: /* @__PURE__ */ t.jsx(
+      k,
+      {
+        address: e.shipping_address,
+        title: s("shipping_address")
+      }
+    ) }),
+    (e.shipping_method || e.payment_method) && /* @__PURE__ */ t.jsxs("div", { className: "border-border mb-6 grid grid-cols-1 gap-x-4 gap-y-4 border-b pb-6 sm:grid-cols-2", children: [
+      e.shipping_method && /* @__PURE__ */ t.jsx(_t, { shippingMethod: e.shipping_method }),
+      e.payment_method && /* @__PURE__ */ t.jsx(jt, { paymentMethod: e.payment_method })
+    ] })
+  ] }) });
+}
+function kt({
+  id: e,
+  googleMapsApiKey: r,
+  onNotFound: s,
+  onError: a,
+  onSubscriptionClick: n
+}) {
+  const { data: l, isLoading: i, error: o } = q(e), d = l?.order;
+  return c.useEffect(() => {
+    !i && o && a?.(o);
+  }, [i, o, a]), c.useEffect(() => {
+    !i && !o && !d && s?.();
+  }, [i, o, d, s]), i ? /* @__PURE__ */ t.jsx(gt, {}) : d ? /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col lg:grid lg:grid-cols-8", children: [
+    /* @__PURE__ */ t.jsx(vt, { order: d, onSubscriptionClick: n }),
+    /* @__PURE__ */ t.jsx(wt, { order: d, googleMapsApiKey: r })
+  ] }) : null;
+}
+function St({
+  id: e,
+  googleMapsApiKey: r,
+  onNavigateToList: s,
+  onNotFound: a,
+  onError: n,
+  onSubscriptionClick: l
+}) {
+  const { t: i } = m(), { data: o } = q(e), d = o?.order.order_number ?? o?.order.id.toString() ?? String(e);
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(B, { children: /* @__PURE__ */ t.jsx(K, { children: /* @__PURE__ */ t.jsxs(Y, { className: "text-lg", children: [
+      /* @__PURE__ */ t.jsx(S, { children: /* @__PURE__ */ t.jsx(
+        _e,
+        {
+          href: "#",
+          onClick: (u) => {
+            u.preventDefault(), s();
+          },
+          children: i("breadcrumb")
+        }
+      ) }),
+      /* @__PURE__ */ t.jsx(be, {}),
+      /* @__PURE__ */ t.jsx(S, { children: /* @__PURE__ */ t.jsx(W, { className: "font-semibold", children: i("breadcrumb_detail", { id: d }) }) })
+    ] }) }) }),
+    /* @__PURE__ */ t.jsx("div", { className: "mx-auto max-w-7xl px-4 py-4 sm:px-6 sm:py-6 lg:px-10 lg:py-8", children: /* @__PURE__ */ t.jsx(
+      kt,
+      {
+        id: e,
+        googleMapsApiKey: r,
+        onNotFound: a,
+        onError: n,
+        onSubscriptionClick: l
+      }
+    ) })
+  ] });
+}
+function Ot({
+  token: e,
+  onToast: r
+}) {
+  const { navigate: s } = D(), { config: a } = ae(), { t: n } = m();
+  return /* @__PURE__ */ t.jsx(
+    St,
+    {
+      id: e,
+      googleMapsApiKey: a.googleMapsApiKey,
+      onNavigateToList: () => s("orders"),
+      onNotFound: () => {
+        r(n("order_not_found"), "warning"), s("orders");
+      },
+      onError: (l) => {
+        const i = l instanceof Error ? l.message : n("error_generic");
+        r(n("error_loading_order", { message: i }), "error");
+      },
+      onSubscriptionClick: (l) => s(`subscriptions/${l}`)
+    }
+  );
+}
+function Dt(e, r) {
+  ie({ title: e, type: r });
+}
+function zt({
+  onToast: e,
+  /* eslint-disable @typescript-eslint/no-unused-vars -- destructured to exclude from divProps spread */
+  background: r,
+  textColor: s,
+  accentColor: a,
+  padding: n,
+  borderRadius: l,
+  /* eslint-enable @typescript-eslint/no-unused-vars */
+  ...i
+}) {
+  const { currentSlug: o } = D(), d = e ?? Dt, u = o.split("/")[1];
+  return u !== void 0 ? /* @__PURE__ */ t.jsx(F, { children: /* @__PURE__ */ t.jsx("div", { ...i, children: /* @__PURE__ */ t.jsx(Ot, { token: u, onToast: d }) }) }) : /* @__PURE__ */ t.jsx(F, { children: /* @__PURE__ */ t.jsx("div", { ...i, children: /* @__PURE__ */ t.jsx(it, {}) }) });
+}
+export {
+  zt as O
+};