@btst/stack 5.0.0 → 5.2.0

package/dist/packages/stack/src/plugins/ecommerce/api/plugin.mjs

@@ -0,0 +1,163 @@
+import { defineBackendPlugin, createEndpoint } from '@btst/stack/plugins/api';
+import { z } from 'zod';
+import { ecommerceSchema } from '../db.mjs';
+import { orderStatusSchema, ordersQuerySchema, checkoutSchema, createDiscountSchema, updateInventorySchema, productSchema, productsQuerySchema } from '../schemas.mjs';
+import { listProducts, getProduct } from './getters.mjs';
+import { ensureProductContentType, ecommerceError } from './mutations.mjs';
+import { discountValidationSchema, createEcommerceOperations } from './operations.mjs';
+import { ECOMMERCE_QUERY_KEYS } from './query-key-defs.mjs';
+
+function ecommerceBackendPlugin(config) {
+  z.string().regex(/^[A-Z]{3}$/).parse(config.currency ?? "USD");
+  z.number().int().min(0).max(1e8).parse(config.shippingAmount ?? 0);
+  const mediaAdapters = /* @__PURE__ */ new WeakSet();
+  return defineBackendPlugin({
+    id: "ecommerce",
+    dbPlugin: ecommerceSchema,
+    operations: (adapter, context) => {
+      if (!Object.values(context?.plugins ?? {}).some(
+        (plugin) => plugin.id === "cms"
+      ))
+        throw new Error(
+          "Ecommerce requires the CMS backend with PRODUCT_CONTENT_TYPE registered"
+        );
+      const mediaAvailable = Object.values(context?.plugins ?? {}).some(
+        (plugin) => plugin.id === "media"
+      );
+      if (mediaAvailable) mediaAdapters.add(adapter);
+      return createEcommerceOperations(adapter, config, mediaAvailable);
+    },
+    raw: (adapter) => ({
+      prefetchForRoute: (async (key, queryClient, options) => {
+        await ensureProductContentType(adapter);
+        if (key === "shop")
+          queryClient.setQueryData(
+            ECOMMERCE_QUERY_KEYS.list(options.filters ?? {}, options.endpoint),
+            await listProducts(
+              adapter,
+              options.filters,
+              mediaAdapters.has(adapter)
+            )
+          );
+        else {
+          const product = await getProduct(
+            adapter,
+            options.slug ?? "",
+            mediaAdapters.has(adapter)
+          );
+          if (!product) ecommerceError(404, "Product not found");
+          queryClient.setQueryData(
+            ECOMMERCE_QUERY_KEYS.detail(product.slug, options.endpoint),
+            product
+          );
+        }
+      })
+    }),
+    routes: (_adapter, _context, operations) => ({
+      listProducts: createEndpoint(
+        "/shop/products",
+        { method: "GET", query: productsQuerySchema, requireRequest: true },
+        operations.listProducts.route((ctx) => ctx.query)
+      ),
+      getProduct: createEndpoint(
+        "/shop/products/:slug",
+        { method: "GET", requireRequest: true },
+        operations.getProduct.route((ctx) => ({ slug: ctx.params.slug }))
+      ),
+      createProduct: createEndpoint(
+        "/shop/products",
+        {
+          method: "POST",
+          body: z.object({ slug: z.string(), data: productSchema }),
+          requireRequest: true
+        },
+        operations.createProduct.route((ctx) => ctx.body)
+      ),
+      updateInventory: createEndpoint(
+        "/shop/inventory",
+        { method: "PATCH", body: updateInventorySchema, requireRequest: true },
+        operations.updateInventory.route((ctx) => ctx.body)
+      ),
+      createDiscountCode: createEndpoint(
+        "/shop/discounts",
+        { method: "POST", body: createDiscountSchema, requireRequest: true },
+        operations.createDiscountCode.route((ctx) => ctx.body)
+      ),
+      validateDiscountCode: createEndpoint(
+        "/shop/discounts/validate",
+        {
+          method: "POST",
+          body: discountValidationSchema,
+          requireRequest: true
+        },
+        operations.validateDiscountCode.route((ctx) => {
+          ctx.setHeader("cache-control", "private, no-store");
+          return ctx.body;
+        })
+      ),
+      createCheckout: createEndpoint(
+        "/shop/checkout",
+        { method: "POST", body: checkoutSchema, requireRequest: true },
+        operations.createCheckout.route((ctx) => {
+          ctx.setHeader("cache-control", "private, no-store");
+          return ctx.body;
+        })
+      ),
+      listOrders: createEndpoint(
+        "/shop/orders",
+        { method: "GET", query: ordersQuerySchema, requireRequest: true },
+        operations.listOrders.route((ctx) => {
+          ctx.setHeader("cache-control", "private, no-store");
+          return ctx.query;
+        })
+      ),
+      listMyOrders: createEndpoint(
+        "/shop/orders/mine",
+        { method: "GET", query: ordersQuerySchema, requireRequest: true },
+        operations.listMyOrders.route((ctx) => {
+          ctx.setHeader("cache-control", "private, no-store");
+          return ctx.query;
+        })
+      ),
+      getOrder: createEndpoint(
+        "/shop/orders/:id",
+        { method: "GET", requireRequest: true },
+        operations.getOrder.route((ctx) => {
+          ctx.setHeader("cache-control", "private, no-store");
+          return { id: ctx.params.id };
+        })
+      ),
+      getOrderConfirmation: createEndpoint(
+        "/shop/orders/:id/confirmation",
+        {
+          method: "GET",
+          query: z.object({ token: z.string().max(200) }),
+          requireRequest: true
+        },
+        operations.getOrderConfirmation.route((ctx) => {
+          ctx.setHeader("cache-control", "private, no-store");
+          return { id: ctx.params.id, token: ctx.query.token };
+        })
+      ),
+      updateOrderStatus: createEndpoint(
+        "/shop/orders/:id",
+        {
+          method: "PATCH",
+          body: z.object({ status: orderStatusSchema }),
+          requireRequest: true
+        },
+        operations.updateOrderStatus.route((ctx) => ({
+          id: ctx.params.id,
+          status: ctx.body.status
+        }))
+      ),
+      handleWebhook: createEndpoint(
+        "/shop/webhook",
+        { method: "POST", requireRequest: true, disableBody: true },
+        operations.handleWebhook.route(() => ({}))
+      )
+    })
+  });
+}
+
+export { ecommerceBackendPlugin };

package/dist/packages/stack/src/plugins/ecommerce/api/query-key-defs.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+function ecommerceEndpointDiscriminator(endpoint) {
+  return { baseURL: endpoint.baseURL, basePath: endpoint.basePath };
+}
+function productsListDiscriminator(filters = {}) {
+  return {
+    category: filters.category?.trim() || void 0,
+    collection: filters.collection?.trim() || void 0,
+    search: filters.search?.trim() || void 0,
+    minPrice: filters.minPrice,
+    maxPrice: filters.maxPrice,
+    inStock: filters.inStock,
+    limit: filters.limit ?? 24,
+    offset: filters.offset ?? 0
+  };
+}
+const ECOMMERCE_QUERY_KEYS = {
+  list: (filters, endpoint) => [
+    "ecommerceProducts",
+    "list",
+    productsListDiscriminator(filters),
+    ecommerceEndpointDiscriminator(endpoint)
+  ],
+  detail: (slug, endpoint) => [
+    "ecommerceProducts",
+    "detail",
+    slug,
+    ecommerceEndpointDiscriminator(endpoint)
+  ]
+};
+
+exports.ECOMMERCE_QUERY_KEYS = ECOMMERCE_QUERY_KEYS;
+exports.ecommerceEndpointDiscriminator = ecommerceEndpointDiscriminator;
+exports.productsListDiscriminator = productsListDiscriminator;

package/dist/packages/stack/src/plugins/ecommerce/api/query-key-defs.mjs

@@ -0,0 +1,31 @@
+function ecommerceEndpointDiscriminator(endpoint) {
+  return { baseURL: endpoint.baseURL, basePath: endpoint.basePath };
+}
+function productsListDiscriminator(filters = {}) {
+  return {
+    category: filters.category?.trim() || void 0,
+    collection: filters.collection?.trim() || void 0,
+    search: filters.search?.trim() || void 0,
+    minPrice: filters.minPrice,
+    maxPrice: filters.maxPrice,
+    inStock: filters.inStock,
+    limit: filters.limit ?? 24,
+    offset: filters.offset ?? 0
+  };
+}
+const ECOMMERCE_QUERY_KEYS = {
+  list: (filters, endpoint) => [
+    "ecommerceProducts",
+    "list",
+    productsListDiscriminator(filters),
+    ecommerceEndpointDiscriminator(endpoint)
+  ],
+  detail: (slug, endpoint) => [
+    "ecommerceProducts",
+    "detail",
+    slug,
+    ecommerceEndpointDiscriminator(endpoint)
+  ]
+};
+
+export { ECOMMERCE_QUERY_KEYS, ecommerceEndpointDiscriminator, productsListDiscriminator };

package/dist/packages/stack/src/plugins/ecommerce/api/serializers.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+function serializeOrder(record) {
+  return {
+    id: record.id,
+    email: record.email,
+    customerId: record.customerId,
+    status: record.status,
+    lineItems: JSON.parse(record.lineItems),
+    subtotal: record.subtotal,
+    discount: record.discount,
+    shipping: record.shipping,
+    total: record.total,
+    currency: record.currency,
+    shippingAddress: JSON.parse(record.shippingAddress),
+    paymentProvider: record.paymentProvider,
+    paymentRef: record.paymentRef,
+    paymentStatus: record.paymentStatus,
+    createdAt: new Date(record.createdAt).toISOString(),
+    updatedAt: new Date(record.updatedAt).toISOString()
+  };
+}
+
+exports.serializeOrder = serializeOrder;

package/dist/packages/stack/src/plugins/ecommerce/api/serializers.mjs

@@ -0,0 +1,22 @@
+function serializeOrder(record) {
+  return {
+    id: record.id,
+    email: record.email,
+    customerId: record.customerId,
+    status: record.status,
+    lineItems: JSON.parse(record.lineItems),
+    subtotal: record.subtotal,
+    discount: record.discount,
+    shipping: record.shipping,
+    total: record.total,
+    currency: record.currency,
+    shippingAddress: JSON.parse(record.shippingAddress),
+    paymentProvider: record.paymentProvider,
+    paymentRef: record.paymentRef,
+    paymentStatus: record.paymentStatus,
+    createdAt: new Date(record.createdAt).toISOString(),
+    updatedAt: new Date(record.updatedAt).toISOString()
+  };
+}
+
+export { serializeOrder };

package/dist/packages/stack/src/plugins/ecommerce/client/checkout-attempt.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+function isTerminalOrder(order) {
+  return order.paymentStatus !== "pending" || order.status === "cancelled";
+}
+async function reusableCheckoutAttempt(attempt, fingerprint, verifyOrder) {
+  if (!attempt || typeof attempt.key !== "string") return void 0;
+  if (attempt.orderId && isTerminalOrder(await verifyOrder(attempt.orderId)))
+    return void 0;
+  if (attempt.fingerprint !== fingerprint) {
+    throw new Error(
+      "Your previous payment may still be active. Complete it, cancel it with the payment provider, or contact the shop to reconcile it before changing checkout details."
+    );
+  }
+  return attempt.orderId ? attempt : { ...attempt, uncertain: true };
+}
+function canDiscardCheckoutAttempt(attempt, submittedKey, code) {
+  return code === "CHECKOUT_NOT_CREATED" && attempt?.key === submittedKey && !attempt.orderId && !attempt.uncertain;
+}
+
+exports.canDiscardCheckoutAttempt = canDiscardCheckoutAttempt;
+exports.isTerminalOrder = isTerminalOrder;
+exports.reusableCheckoutAttempt = reusableCheckoutAttempt;

package/dist/packages/stack/src/plugins/ecommerce/client/checkout-attempt.mjs

@@ -0,0 +1,19 @@
+function isTerminalOrder(order) {
+  return order.paymentStatus !== "pending" || order.status === "cancelled";
+}
+async function reusableCheckoutAttempt(attempt, fingerprint, verifyOrder) {
+  if (!attempt || typeof attempt.key !== "string") return void 0;
+  if (attempt.orderId && isTerminalOrder(await verifyOrder(attempt.orderId)))
+    return void 0;
+  if (attempt.fingerprint !== fingerprint) {
+    throw new Error(
+      "Your previous payment may still be active. Complete it, cancel it with the payment provider, or contact the shop to reconcile it before changing checkout details."
+    );
+  }
+  return attempt.orderId ? attempt : { ...attempt, uncertain: true };
+}
+function canDiscardCheckoutAttempt(attempt, submittedKey, code) {
+  return code === "CHECKOUT_NOT_CREATED" && attempt?.key === submittedKey && !attempt.orderId && !attempt.uncertain;
+}
+
+export { canDiscardCheckoutAttempt, isTerminalOrder, reusableCheckoutAttempt };

package/dist/packages/stack/src/plugins/ecommerce/client/components/cart-drawer.cjs

@@ -0,0 +1,41 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const sheet = require('../../../../../../ui/src/components/sheet.cjs');
+const button = require('../../../../../../ui/src/components/button.cjs');
+const context = require('@btst/stack/context');
+const constants = require('../constants.cjs');
+const useCart = require('../hooks/use-cart.cjs');
+const cartItems = require('./cart-items.cjs');
+
+function CartDrawer() {
+  const [open, setOpen] = React.useState(false);
+  const cart = useCart.useCart();
+  const { Link, resolve } = context.usePluginSiteNavigation(constants.ECOMMERCE_PLUGIN_ID);
+  return /* @__PURE__ */ jsxRuntime.jsxs(sheet.Sheet, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(sheet.SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", size: "sm", children: "Open cart" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(sheet.SheetContent, { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(sheet.SheetHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(sheet.SheetTitle, { children: [
+          "Your cart (",
+          cart.count,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(sheet.SheetDescription, { children: "Review quantities before checkout. Prices and availability are confirmed at checkout." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto px-4", children: cart.items.length ? /* @__PURE__ */ jsxRuntime.jsx(cartItems.CartItems, {}) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-8 text-muted-foreground", children: "Your cart is empty." }) }),
+      cart.items.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t p-4", children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+        Link,
+        {
+          href: resolve("/shop/cart").href,
+          onClick: () => setOpen(false),
+          children: "Review cart"
+        }
+      ) }) }) : null
+    ] })
+  ] });
+}
+
+exports.CartDrawer = CartDrawer;

package/dist/packages/stack/src/plugins/ecommerce/client/components/cart-drawer.mjs

@@ -0,0 +1,39 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '../../../../../../ui/src/components/sheet.mjs';
+import { Button } from '../../../../../../ui/src/components/button.mjs';
+import { usePluginSiteNavigation } from '@btst/stack/context';
+import { ECOMMERCE_PLUGIN_ID } from '../constants.mjs';
+import { useCart } from '../hooks/use-cart.mjs';
+import { CartItems } from './cart-items.mjs';
+
+function CartDrawer() {
+  const [open, setOpen] = useState(false);
+  const cart = useCart();
+  const { Link, resolve } = usePluginSiteNavigation(ECOMMERCE_PLUGIN_ID);
+  return /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: "Open cart" }) }),
+    /* @__PURE__ */ jsxs(SheetContent, { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs(SheetHeader, { children: [
+        /* @__PURE__ */ jsxs(SheetTitle, { children: [
+          "Your cart (",
+          cart.count,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsx(SheetDescription, { children: "Review quantities before checkout. Prices and availability are confirmed at checkout." })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto px-4", children: cart.items.length ? /* @__PURE__ */ jsx(CartItems, {}) : /* @__PURE__ */ jsx("p", { className: "py-8 text-muted-foreground", children: "Your cart is empty." }) }),
+      cart.items.length ? /* @__PURE__ */ jsx("div", { className: "border-t p-4", children: /* @__PURE__ */ jsx(Button, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsx(
+        Link,
+        {
+          href: resolve("/shop/cart").href,
+          onClick: () => setOpen(false),
+          children: "Review cart"
+        }
+      ) }) }) : null
+    ] })
+  ] });
+}
+
+export { CartDrawer };

package/dist/packages/stack/src/plugins/ecommerce/client/components/cart-items.cjs

@@ -0,0 +1,67 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const button = require('../../../../../../ui/src/components/button.cjs');
+const input = require('../../../../../../ui/src/components/input.cjs');
+const useCart = require('../hooks/use-cart.cjs');
+const productImage = require('./product-image.cjs');
+const storefront = require('./storefront.cjs');
+
+function CartItems() {
+  const cart = useCart.useCart();
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "divide-y", children: cart.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "li",
+    {
+      className: "flex gap-4 py-5",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-20 w-20 shrink-0 overflow-hidden rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(productImage.ProductImage, { image: item.image, alt: item.name }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: item.name }),
+          item.variantName ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: item.variantName }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm", children: storefront.formatMoney(item.price, item.currency) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 text-sm", children: [
+              "Quantity",
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sr-only", children: [
+                " ",
+                "for ",
+                item.name,
+                item.variantName ? ` ${item.variantName}` : ""
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                input.Input,
+                {
+                  className: "w-20",
+                  type: "number",
+                  min: 1,
+                  max: 99,
+                  value: item.quantity,
+                  onChange: (event) => cart.updateQuantity(
+                    item.productId,
+                    item.variantId,
+                    Number(event.target.value)
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              button.Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: () => cart.removeItem(item.productId, item.variantId),
+                "aria-label": `Remove ${item.name}${item.variantName ? ` ${item.variantName}` : ""}`,
+                children: "Remove"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium tabular-nums", children: storefront.formatMoney(item.price * item.quantity, item.currency) })
+      ]
+    },
+    `${item.productId}:${item.variantId ?? ""}`
+  )) });
+}
+
+exports.CartItems = CartItems;

package/dist/packages/stack/src/plugins/ecommerce/client/components/cart-items.mjs

@@ -0,0 +1,65 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Button } from '../../../../../../ui/src/components/button.mjs';
+import { Input } from '../../../../../../ui/src/components/input.mjs';
+import { useCart } from '../hooks/use-cart.mjs';
+import { ProductImage } from './product-image.mjs';
+import { formatMoney } from './storefront.mjs';
+
+function CartItems() {
+  const cart = useCart();
+  return /* @__PURE__ */ jsx("ul", { className: "divide-y", children: cart.items.map((item) => /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "flex gap-4 py-5",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "h-20 w-20 shrink-0 overflow-hidden rounded-md", children: /* @__PURE__ */ jsx(ProductImage, { image: item.image, alt: item.name }) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "font-medium", children: item.name }),
+          item.variantName ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: item.variantName }) : null,
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm", children: formatMoney(item.price, item.currency) }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-3", children: [
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm", children: [
+              "Quantity",
+              /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                " ",
+                "for ",
+                item.name,
+                item.variantName ? ` ${item.variantName}` : ""
+              ] }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  className: "w-20",
+                  type: "number",
+                  min: 1,
+                  max: 99,
+                  value: item.quantity,
+                  onChange: (event) => cart.updateQuantity(
+                    item.productId,
+                    item.variantId,
+                    Number(event.target.value)
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: () => cart.removeItem(item.productId, item.variantId),
+                "aria-label": `Remove ${item.name}${item.variantName ? ` ${item.variantName}` : ""}`,
+                children: "Remove"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium tabular-nums", children: formatMoney(item.price * item.quantity, item.currency) })
+      ]
+    },
+    `${item.productId}:${item.variantId ?? ""}`
+  )) });
+}
+
+export { CartItems };

package/dist/packages/stack/src/plugins/ecommerce/client/components/order-summary.cjs

@@ -0,0 +1,95 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const storefront = require('./storefront.cjs');
+const productImage = require('./product-image.cjs');
+
+function OrderSummary({ order }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-start gap-10 md:grid-cols-[minmax(0,1fr)_20rem]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-medium", children: "Items" }),
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-3 divide-y", children: order.lineItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "li",
+        {
+          className: "flex items-center gap-4 py-4",
+          children: [
+            item.image ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-16 w-16 shrink-0 overflow-hidden rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(productImage.ProductImage, { image: item.image, alt: item.name }) }) : null,
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: item.name }),
+              item.variantName ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: item.variantName }) : null,
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 text-sm text-muted-foreground", children: [
+                "Quantity ",
+                item.quantity
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm tabular-nums", children: storefront.formatMoney(item.price * item.quantity, order.currency) })
+          ]
+        },
+        `${item.productId}:${item.variantId ?? ""}:${index}`
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "space-y-6 rounded-lg bg-muted/40 p-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-medium", children: "Order summary" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("dl", { className: "mt-4 space-y-2 text-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("dt", { children: "Subtotal" }),
+            /* @__PURE__ */ jsxRuntime.jsx("dd", { children: storefront.formatMoney(order.subtotal, order.currency) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("dt", { children: "Discount" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("dd", { children: [
+              "\u2212",
+              storefront.formatMoney(order.discount, order.currency)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("dt", { children: "Shipping" }),
+            /* @__PURE__ */ jsxRuntime.jsx("dd", { children: storefront.formatMoney(order.shipping, order.currency) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between border-t pt-3 font-semibold", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("dt", { children: "Total" }),
+            /* @__PURE__ */ jsxRuntime.jsx("dd", { children: storefront.formatMoney(order.total, order.currency) })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-medium", children: "Shipping address" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("address", { className: "mt-3 text-sm not-italic leading-6 text-muted-foreground", children: [
+          order.shippingAddress.name,
+          /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+          order.shippingAddress.line1,
+          /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+          order.shippingAddress.line2 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            order.shippingAddress.line2,
+            /* @__PURE__ */ jsxRuntime.jsx("br", {})
+          ] }) : null,
+          order.shippingAddress.city,
+          ", ",
+          order.shippingAddress.region,
+          " ",
+          order.shippingAddress.postalCode,
+          /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+          order.shippingAddress.country
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("dl", { className: "space-y-2 text-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-muted-foreground", children: "Email" }),
+          /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "break-all", children: order.email })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-muted-foreground", children: "Order status" }),
+          /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "capitalize", children: order.status })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-muted-foreground", children: "Payment status" }),
+          /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "capitalize", children: order.paymentStatus })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+exports.OrderSummary = OrderSummary;