@btst/stack 5.1.0 → 5.2.0

package/dist/packages/stack/src/plugins/ecommerce/client/components/pages/order-confirmation-page.internal.mjs

@@ -0,0 +1,105 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { usePluginSiteNavigation } from '@btst/stack/context';
+import { Button } from '../../../../../../../ui/src/components/button.mjs';
+import { useEcommerceEndpoint } from '../../hooks/use-products.mjs';
+import { useOrderConfirmation } from '../../hooks/use-orders.mjs';
+import { useCart } from '../../hooks/use-cart.mjs';
+import { ECOMMERCE_PLUGIN_ID } from '../../constants.mjs';
+import { Storefront, formatMoney, ErrorMessage } from '../storefront.mjs';
+import { OrderSummary } from '../order-summary.mjs';
+import { isTerminalOrder } from '../../checkout-attempt.mjs';
+import { orderTokenKey } from '../../order-access.mjs';
+
+function OrderConfirmationPage({ id }) {
+  const [token, setToken] = useState("");
+  const [loaded, setLoaded] = useState(false);
+  const cart = useCart();
+  const endpoint = useEcommerceEndpoint();
+  useEffect(() => {
+    try {
+      setToken(sessionStorage.getItem(orderTokenKey(id, endpoint)) ?? "");
+    } catch {
+      setToken("");
+    }
+    setLoaded(true);
+  }, [id, endpoint]);
+  const order = useOrderConfirmation(id, token);
+  const { Link, resolve } = usePluginSiteNavigation(ECOMMERCE_PLUGIN_ID);
+  useEffect(() => {
+    if (!order.data || order.data.paymentStatus !== "pending" || order.data.status === "cancelled")
+      return;
+    const timer = window.setInterval(() => {
+      if (document.visibilityState === "visible") void order.refetch();
+    }, 2500);
+    return () => window.clearInterval(timer);
+  }, [order.data?.paymentStatus, order.data?.status, order.refetch]);
+  useEffect(() => {
+    if (!order.data || !isTerminalOrder(order.data)) return;
+    try {
+      const checkoutKey = `${cart.storeKey}:checkout`;
+      const attempt = JSON.parse(sessionStorage.getItem(checkoutKey) ?? "null");
+      if (attempt?.orderId === id) sessionStorage.removeItem(checkoutKey);
+    } catch {
+    }
+  }, [id, cart.storeKey, order.data?.paymentStatus, order.data?.status]);
+  useEffect(() => {
+    if (!order.data || order.data.paymentStatus !== "paid") return;
+    try {
+      const snapshot = sessionStorage.getItem(
+        `${orderTokenKey(id, endpoint)}:cart`
+      );
+      if (snapshot === JSON.stringify(
+        cart.items.map(({ productId, variantId, quantity }) => ({
+          productId,
+          variantId,
+          quantity
+        }))
+      )) {
+        cart.clear();
+        sessionStorage.removeItem(`${orderTokenKey(id, endpoint)}:cart`);
+      }
+    } catch {
+    }
+  }, [id, endpoint, order.data?.paymentStatus, cart]);
+  const paid = order.data?.paymentStatus === "paid";
+  return /* @__PURE__ */ jsxs(Storefront, { children: [
+    loaded && !token ? /* @__PURE__ */ jsxs("section", { className: "py-12", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold", children: "Order access required" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-3 text-muted-foreground", children: "Open this page in the browser where you checked out, or contact the shop with your order number." })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("header", { className: "mb-8", children: [
+        /* @__PURE__ */ jsxs("p", { className: "mb-3 text-sm text-muted-foreground", children: [
+          "Order ",
+          id
+        ] }),
+        /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold tracking-tight", children: paid ? "Payment confirmed" : order.data?.status === "cancelled" ? "Order cancelled" : order.data?.paymentStatus === "failed" ? "Payment was not completed" : order.data?.paymentStatus === "refunded" ? "Payment refunded" : "Waiting for payment confirmation" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-3 max-w-xl text-muted-foreground", children: paid ? `Your payment of ${formatMoney(order.data?.total ?? 0, order.data?.currency ?? "USD")} is confirmed.` : order.data?.status === "cancelled" ? "This order was cancelled. Your cart is available if you would like to start again." : order.data?.paymentStatus === "failed" ? "Your payment did not complete. Return to checkout to try again." : order.data?.paymentStatus === "refunded" ? "Your payment provider has reported a refund for this order." : "Your order is confirmed only after the payment provider sends a verified payment notification." })
+      ] }),
+      /* @__PURE__ */ jsx(ErrorMessage, { error: order.error }),
+      order.isFetching && !order.data ? /* @__PURE__ */ jsx("p", { role: "status", children: "Loading order\u2026" }) : null,
+      order.data ? /* @__PURE__ */ jsx(OrderSummary, { order: order.data }) : null,
+      !paid ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          className: "mt-6",
+          disabled: order.isFetching,
+          onClick: () => void order.refetch(),
+          children: "Refresh payment status"
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsx(
+      Link,
+      {
+        className: "mt-8 inline-block text-sm underline underline-offset-4",
+        href: resolve("/shop").href,
+        children: "Continue shopping"
+      }
+    )
+  ] });
+}
+
+export { OrderConfirmationPage };

package/dist/packages/stack/src/plugins/ecommerce/client/components/pages/order-detail-page.internal.cjs

@@ -0,0 +1,87 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const context = require('@btst/stack/context');
+const button = require('../../../../../../../ui/src/components/button.cjs');
+const plugins_ecommerce_permissions = require('../../../../../../../../plugins/ecommerce/permissions.cjs');
+const constants = require('../../constants.cjs');
+const useOrders = require('../../hooks/use-orders.cjs');
+const storefront = require('../storefront.cjs');
+const orderSummary = require('../order-summary.cjs');
+
+const nextStatuses = {
+  pending: ["cancelled"],
+  paid: ["fulfilling", "cancelled"],
+  fulfilling: ["fulfilled", "cancelled"],
+  fulfilled: [],
+  cancelled: []
+};
+function OrderDetailPage({ id }) {
+  const order = useOrders.useOrder(id);
+  const update = useOrders.useUpdateOrderStatus();
+  const [status, setStatus] = React.useState("");
+  const { Link, resolve } = context.usePluginSiteNavigation(constants.ECOMMERCE_PLUGIN_ID);
+  return /* @__PURE__ */ jsxRuntime.jsxs(storefront.Storefront, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Link,
+      {
+        href: resolve("/shop/admin/orders").href,
+        className: "mb-6 inline-block text-sm underline underline-offset-4",
+        children: "All orders"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: "mb-8 break-all text-2xl font-semibold tracking-tight", children: [
+      "Order ",
+      id
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(storefront.ErrorMessage, { error: order.error ?? update.error }),
+    order.isPending ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", children: "Loading order\u2026" }) : null,
+    order.data ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(orderSummary.OrderSummary, { order: order.data }),
+      nextStatuses[order.data.status].length ? /* @__PURE__ */ jsxRuntime.jsx(
+        context.PermissionAccess,
+        {
+          permission: plugins_ecommerce_permissions.ecommercePermissions.order.update({ id }),
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "form",
+            {
+              className: "mt-8 flex flex-wrap items-end gap-3 border-t pt-6",
+              onSubmit: async (event) => {
+                event.preventDefault();
+                if (!status) return;
+                try {
+                  await update.mutateAsync({ id, status });
+                  setStatus("");
+                  await order.refetch();
+                } catch {
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-sm", children: [
+                  "Update order status",
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "select",
+                    {
+                      className: "mt-2 block h-10 rounded-md border bg-background px-3",
+                      value: status,
+                      onChange: (event) => setStatus(event.target.value),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Choose status" }),
+                        nextStatuses[order.data.status].map((value) => /* @__PURE__ */ jsxRuntime.jsx("option", { value, children: value }, value))
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "submit", disabled: !status || update.isPending, children: update.isPending ? "Saving\u2026" : "Save status" })
+              ]
+            }
+          )
+        }
+      ) : null
+    ] }) : null
+  ] });
+}
+
+exports.OrderDetailPage = OrderDetailPage;

package/dist/packages/stack/src/plugins/ecommerce/client/components/pages/order-detail-page.internal.mjs

@@ -0,0 +1,85 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { usePluginSiteNavigation, PermissionAccess } from '@btst/stack/context';
+import { Button } from '../../../../../../../ui/src/components/button.mjs';
+import { ecommercePermissions } from '../../../../../../../../plugins/ecommerce/permissions.mjs';
+import { ECOMMERCE_PLUGIN_ID } from '../../constants.mjs';
+import { useOrder, useUpdateOrderStatus } from '../../hooks/use-orders.mjs';
+import { Storefront, ErrorMessage } from '../storefront.mjs';
+import { OrderSummary } from '../order-summary.mjs';
+
+const nextStatuses = {
+  pending: ["cancelled"],
+  paid: ["fulfilling", "cancelled"],
+  fulfilling: ["fulfilled", "cancelled"],
+  fulfilled: [],
+  cancelled: []
+};
+function OrderDetailPage({ id }) {
+  const order = useOrder(id);
+  const update = useUpdateOrderStatus();
+  const [status, setStatus] = useState("");
+  const { Link, resolve } = usePluginSiteNavigation(ECOMMERCE_PLUGIN_ID);
+  return /* @__PURE__ */ jsxs(Storefront, { children: [
+    /* @__PURE__ */ jsx(
+      Link,
+      {
+        href: resolve("/shop/admin/orders").href,
+        className: "mb-6 inline-block text-sm underline underline-offset-4",
+        children: "All orders"
+      }
+    ),
+    /* @__PURE__ */ jsxs("h1", { className: "mb-8 break-all text-2xl font-semibold tracking-tight", children: [
+      "Order ",
+      id
+    ] }),
+    /* @__PURE__ */ jsx(ErrorMessage, { error: order.error ?? update.error }),
+    order.isPending ? /* @__PURE__ */ jsx("p", { role: "status", children: "Loading order\u2026" }) : null,
+    order.data ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(OrderSummary, { order: order.data }),
+      nextStatuses[order.data.status].length ? /* @__PURE__ */ jsx(
+        PermissionAccess,
+        {
+          permission: ecommercePermissions.order.update({ id }),
+          children: /* @__PURE__ */ jsxs(
+            "form",
+            {
+              className: "mt-8 flex flex-wrap items-end gap-3 border-t pt-6",
+              onSubmit: async (event) => {
+                event.preventDefault();
+                if (!status) return;
+                try {
+                  await update.mutateAsync({ id, status });
+                  setStatus("");
+                  await order.refetch();
+                } catch {
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsxs("label", { className: "text-sm", children: [
+                  "Update order status",
+                  /* @__PURE__ */ jsxs(
+                    "select",
+                    {
+                      className: "mt-2 block h-10 rounded-md border bg-background px-3",
+                      value: status,
+                      onChange: (event) => setStatus(event.target.value),
+                      children: [
+                        /* @__PURE__ */ jsx("option", { value: "", children: "Choose status" }),
+                        nextStatuses[order.data.status].map((value) => /* @__PURE__ */ jsx("option", { value, children: value }, value))
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !status || update.isPending, children: update.isPending ? "Saving\u2026" : "Save status" })
+              ]
+            }
+          )
+        }
+      ) : null
+    ] }) : null
+  ] });
+}
+
+export { OrderDetailPage };

package/dist/packages/stack/src/plugins/ecommerce/client/components/pages/orders-admin-page.internal.cjs

@@ -0,0 +1,144 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const context = require('@btst/stack/context');
+const button = require('../../../../../../../ui/src/components/button.cjs');
+const useOrders = require('../../hooks/use-orders.cjs');
+const constants = require('../../constants.cjs');
+const storefront = require('../storefront.cjs');
+
+function OrdersTable({
+  data,
+  admin = false
+}) {
+  const { Link, resolve } = context.usePluginSiteNavigation(constants.ECOMMERCE_PLUGIN_ID);
+  if (!data?.items.length)
+    return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-12 text-muted-foreground", children: "No orders yet." });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full text-left text-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("caption", { className: "sr-only", children: admin ? "All customer orders" : "Your orders" }),
+    /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "border-b text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "py-3 pr-4 font-medium", children: "Order" }),
+      /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "py-3 pr-4 font-medium", children: "Date" }),
+      admin ? /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "py-3 pr-4 font-medium", children: "Customer" }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "py-3 pr-4 font-medium", children: "Status" }),
+      /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "py-3 pr-4 font-medium", children: "Payment" }),
+      /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "py-3 text-right font-medium", children: "Total" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "divide-y", children: data.items.map((order) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-4 pr-4", children: admin ? /* @__PURE__ */ jsxRuntime.jsx(
+        Link,
+        {
+          className: "font-medium underline underline-offset-4",
+          href: resolve(
+            `/shop/admin/orders/${encodeURIComponent(order.id)}`
+          ).href,
+          children: order.id.slice(0, 12)
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: order.id.slice(0, 12) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "whitespace-nowrap py-4 pr-4", children: new Date(order.createdAt).toLocaleDateString() }),
+      admin ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-4 pr-4", children: order.email }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-4 pr-4 capitalize", children: order.status }),
+      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-4 pr-4 capitalize", children: order.paymentStatus }),
+      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-4 text-right tabular-nums", children: storefront.formatMoney(order.total, order.currency) })
+    ] }, order.id)) })
+  ] }) });
+}
+function OrdersAdminPage() {
+  const [status, setStatus] = React.useState("");
+  const [offset, setOffset] = React.useState(0);
+  const orders = useOrders.useOrders({ status: status || void 0, limit: 25, offset });
+  return /* @__PURE__ */ jsxRuntime.jsxs(storefront.Storefront, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "mb-8 flex flex-wrap items-end justify-between gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold tracking-tight", children: "Orders" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-muted-foreground", children: "Track payments and fulfilment." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-sm", children: [
+        "Order status",
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "select",
+          {
+            className: "ml-3 h-9 rounded-md border bg-background px-3",
+            value: status,
+            onChange: (event) => {
+              setStatus(event.target.value);
+              setOffset(0);
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "All statuses" }),
+              ["pending", "paid", "fulfilling", "fulfilled", "cancelled"].map(
+                (value) => /* @__PURE__ */ jsxRuntime.jsx("option", { value, children: value }, value)
+              )
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(storefront.ErrorMessage, { error: orders.error }),
+    orders.isPending ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", children: "Loading orders\u2026" }) : /* @__PURE__ */ jsxRuntime.jsx(OrdersTable, { data: orders.data, admin: true }),
+    orders.data && orders.data.total > 25 ? /* @__PURE__ */ jsxRuntime.jsxs("nav", { "aria-label": "Order pages", className: "mt-6 flex justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        button.Button,
+        {
+          variant: "outline",
+          disabled: offset === 0,
+          onClick: () => setOffset(Math.max(0, offset - 25)),
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        button.Button,
+        {
+          variant: "outline",
+          disabled: offset + 25 >= orders.data.total,
+          onClick: () => setOffset(offset + 25),
+          children: "Next"
+        }
+      )
+    ] }) : null
+  ] });
+}
+function MyOrdersPage() {
+  const { identity, isPending } = context.useIdentity();
+  const [offset, setOffset] = React.useState(0);
+  const orders = useOrders.useMyOrders({ limit: 25, offset });
+  return /* @__PURE__ */ jsxRuntime.jsxs(storefront.Storefront, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mb-8 text-3xl font-semibold tracking-tight", children: "My orders" }),
+    isPending ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", children: "Loading your account\u2026" }) : !identity ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Sign in to see your orders." }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(storefront.ErrorMessage, { error: orders.error }),
+      orders.isPending ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", children: "Loading orders\u2026" }) : /* @__PURE__ */ jsxRuntime.jsx(OrdersTable, { data: orders.data }),
+      orders.data && orders.data.total > 25 ? /* @__PURE__ */ jsxRuntime.jsxs(
+        "nav",
+        {
+          "aria-label": "Your order pages",
+          className: "mt-6 flex justify-between",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              button.Button,
+              {
+                variant: "outline",
+                disabled: offset === 0,
+                onClick: () => setOffset(Math.max(0, offset - 25)),
+                children: "Previous"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              button.Button,
+              {
+                variant: "outline",
+                disabled: offset + 25 >= orders.data.total,
+                onClick: () => setOffset(offset + 25),
+                children: "Next"
+              }
+            )
+          ]
+        }
+      ) : null
+    ] })
+  ] });
+}
+
+exports.MyOrdersPage = MyOrdersPage;
+exports.OrdersAdminPage = OrdersAdminPage;

package/dist/packages/stack/src/plugins/ecommerce/client/components/pages/orders-admin-page.internal.mjs

@@ -0,0 +1,141 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { useIdentity, usePluginSiteNavigation } from '@btst/stack/context';
+import { Button } from '../../../../../../../ui/src/components/button.mjs';
+import { useMyOrders, useOrders } from '../../hooks/use-orders.mjs';
+import { ECOMMERCE_PLUGIN_ID } from '../../constants.mjs';
+import { Storefront, ErrorMessage, formatMoney } from '../storefront.mjs';
+
+function OrdersTable({
+  data,
+  admin = false
+}) {
+  const { Link, resolve } = usePluginSiteNavigation(ECOMMERCE_PLUGIN_ID);
+  if (!data?.items.length)
+    return /* @__PURE__ */ jsx("p", { className: "py-12 text-muted-foreground", children: "No orders yet." });
+  return /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-left text-sm", children: [
+    /* @__PURE__ */ jsx("caption", { className: "sr-only", children: admin ? "All customer orders" : "Your orders" }),
+    /* @__PURE__ */ jsx("thead", { className: "border-b text-muted-foreground", children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { scope: "col", className: "py-3 pr-4 font-medium", children: "Order" }),
+      /* @__PURE__ */ jsx("th", { scope: "col", className: "py-3 pr-4 font-medium", children: "Date" }),
+      admin ? /* @__PURE__ */ jsx("th", { scope: "col", className: "py-3 pr-4 font-medium", children: "Customer" }) : null,
+      /* @__PURE__ */ jsx("th", { scope: "col", className: "py-3 pr-4 font-medium", children: "Status" }),
+      /* @__PURE__ */ jsx("th", { scope: "col", className: "py-3 pr-4 font-medium", children: "Payment" }),
+      /* @__PURE__ */ jsx("th", { scope: "col", className: "py-3 text-right font-medium", children: "Total" })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { className: "divide-y", children: data.items.map((order) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", { className: "py-4 pr-4", children: admin ? /* @__PURE__ */ jsx(
+        Link,
+        {
+          className: "font-medium underline underline-offset-4",
+          href: resolve(
+            `/shop/admin/orders/${encodeURIComponent(order.id)}`
+          ).href,
+          children: order.id.slice(0, 12)
+        }
+      ) : /* @__PURE__ */ jsx("span", { children: order.id.slice(0, 12) }) }),
+      /* @__PURE__ */ jsx("td", { className: "whitespace-nowrap py-4 pr-4", children: new Date(order.createdAt).toLocaleDateString() }),
+      admin ? /* @__PURE__ */ jsx("td", { className: "py-4 pr-4", children: order.email }) : null,
+      /* @__PURE__ */ jsx("td", { className: "py-4 pr-4 capitalize", children: order.status }),
+      /* @__PURE__ */ jsx("td", { className: "py-4 pr-4 capitalize", children: order.paymentStatus }),
+      /* @__PURE__ */ jsx("td", { className: "py-4 text-right tabular-nums", children: formatMoney(order.total, order.currency) })
+    ] }, order.id)) })
+  ] }) });
+}
+function OrdersAdminPage() {
+  const [status, setStatus] = useState("");
+  const [offset, setOffset] = useState(0);
+  const orders = useOrders({ status: status || void 0, limit: 25, offset });
+  return /* @__PURE__ */ jsxs(Storefront, { children: [
+    /* @__PURE__ */ jsxs("header", { className: "mb-8 flex flex-wrap items-end justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold tracking-tight", children: "Orders" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-muted-foreground", children: "Track payments and fulfilment." })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "text-sm", children: [
+        "Order status",
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            className: "ml-3 h-9 rounded-md border bg-background px-3",
+            value: status,
+            onChange: (event) => {
+              setStatus(event.target.value);
+              setOffset(0);
+            },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "All statuses" }),
+              ["pending", "paid", "fulfilling", "fulfilled", "cancelled"].map(
+                (value) => /* @__PURE__ */ jsx("option", { value, children: value }, value)
+              )
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ErrorMessage, { error: orders.error }),
+    orders.isPending ? /* @__PURE__ */ jsx("p", { role: "status", children: "Loading orders\u2026" }) : /* @__PURE__ */ jsx(OrdersTable, { data: orders.data, admin: true }),
+    orders.data && orders.data.total > 25 ? /* @__PURE__ */ jsxs("nav", { "aria-label": "Order pages", className: "mt-6 flex justify-between", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          disabled: offset === 0,
+          onClick: () => setOffset(Math.max(0, offset - 25)),
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          disabled: offset + 25 >= orders.data.total,
+          onClick: () => setOffset(offset + 25),
+          children: "Next"
+        }
+      )
+    ] }) : null
+  ] });
+}
+function MyOrdersPage() {
+  const { identity, isPending } = useIdentity();
+  const [offset, setOffset] = useState(0);
+  const orders = useMyOrders({ limit: 25, offset });
+  return /* @__PURE__ */ jsxs(Storefront, { children: [
+    /* @__PURE__ */ jsx("h1", { className: "mb-8 text-3xl font-semibold tracking-tight", children: "My orders" }),
+    isPending ? /* @__PURE__ */ jsx("p", { role: "status", children: "Loading your account\u2026" }) : !identity ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Sign in to see your orders." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ErrorMessage, { error: orders.error }),
+      orders.isPending ? /* @__PURE__ */ jsx("p", { role: "status", children: "Loading orders\u2026" }) : /* @__PURE__ */ jsx(OrdersTable, { data: orders.data }),
+      orders.data && orders.data.total > 25 ? /* @__PURE__ */ jsxs(
+        "nav",
+        {
+          "aria-label": "Your order pages",
+          className: "mt-6 flex justify-between",
+          children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                disabled: offset === 0,
+                onClick: () => setOffset(Math.max(0, offset - 25)),
+                children: "Previous"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                disabled: offset + 25 >= orders.data.total,
+                onClick: () => setOffset(offset + 25),
+                children: "Next"
+              }
+            )
+          ]
+        }
+      ) : null
+    ] })
+  ] });
+}
+
+export { MyOrdersPage, OrdersAdminPage };