@btst/stack 5.0.0 → 5.2.0

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

@@ -0,0 +1,583 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { usePluginOverrides, usePluginSiteNavigation } from '@btst/stack/context';
+import { Button } from '../../../../../../../ui/src/components/button.mjs';
+import { Input } from '../../../../../../../ui/src/components/input.mjs';
+import { z } from 'zod';
+import { shippingAddressSchema, checkoutSchema } from '../../../schemas.mjs';
+import { useCart } from '../../hooks/use-cart.mjs';
+import { useEcommerceEndpoint } from '../../hooks/use-products.mjs';
+import { useCheckout, useVerifyCheckoutOrder, useValidateDiscount } from '../../hooks/use-orders.mjs';
+import { ECOMMERCE_PLUGIN_ID } from '../../constants.mjs';
+import { isTerminalOrder, reusableCheckoutAttempt, canDiscardCheckoutAttempt } from '../../checkout-attempt.mjs';
+import { orderTokenKey } from '../../order-access.mjs';
+import { Storefront, ErrorMessage, formatMoney, EmptyCart } from '../storefront.mjs';
+
+const addressFields = [
+  ["name", "Full name", "name"],
+  ["line1", "Address", "address-line1"],
+  ["line2", "Apartment, suite, etc. (optional)", "address-line2"],
+  ["city", "City", "address-level2"],
+  ["region", "State / region (optional)", "address-level1"],
+  ["postalCode", "Postal code", "postal-code"],
+  ["country", "Country code", "country"]
+];
+function paymentRedirectUrl(payment) {
+  if (!payment.redirectUrl) return void 0;
+  const target = new URL(payment.redirectUrl, window.location.href);
+  if (!["https:", "http:"].includes(target.protocol))
+    throw new Error("The payment provider returned an invalid redirect URL.");
+  return target.href;
+}
+function CheckoutPage() {
+  const cart = useCart();
+  const checkout = useCheckout();
+  const verifyOrder = useVerifyCheckoutOrder();
+  const submitting = useRef(false);
+  const applyingDiscount = useRef(false);
+  const [isPreparing, setIsPreparing] = useState(false);
+  const [isResuming, setIsResuming] = useState(true);
+  const [resumeFailed, setResumeFailed] = useState(false);
+  const [resumeVersion, setResumeVersion] = useState(0);
+  const endpoint = useEcommerceEndpoint();
+  const discount = useValidateDiscount();
+  const [step, setStep] = useState("shipping");
+  const [email, setEmail] = useState("");
+  const [address, setAddress] = useState({
+    name: "",
+    line1: "",
+    line2: "",
+    city: "",
+    region: "",
+    postalCode: "",
+    country: "US"
+  });
+  const [code, setCode] = useState("");
+  const [appliedCode, setAppliedCode] = useState("");
+  const [validationError, setValidationError] = useState();
+  const [payment, setPayment] = useState();
+  const [paymentInitialized, setPaymentInitialized] = useState(false);
+  const [submittedCart, setSubmittedCart] = useState();
+  const discountLocked = paymentInitialized || isPreparing || checkout.isPending || discount.isPending;
+  const key = useRef(void 0);
+  const { PaymentForm } = usePluginOverrides(ECOMMERCE_PLUGIN_ID, {});
+  const { navigate } = usePluginSiteNavigation(ECOMMERCE_PLUGIN_ID);
+  const items = cart.items.map(({ productId, variantId, quantity }) => ({
+    productId,
+    variantId,
+    quantity
+  }));
+  const discountFingerprint = JSON.stringify(items);
+  const [appliedFingerprint, setAppliedFingerprint] = useState("");
+  const validDiscount = appliedFingerprint === discountFingerprint && appliedCode === code.trim() ? discount.data : void 0;
+  const fingerprint = JSON.stringify({
+    items: cart.items.map(({ productId, variantId, quantity }) => ({
+      productId,
+      variantId,
+      quantity
+    })),
+    email,
+    address,
+    appliedCode: validDiscount ? appliedCode : ""
+  });
+  const previousFingerprint = useRef(fingerprint);
+  useEffect(() => {
+    if (fingerprint !== previousFingerprint.current) {
+      previousFingerprint.current = fingerprint;
+      if (isPreparing || paymentInitialized || isResuming) return;
+      key.current = void 0;
+      setPayment(void 0);
+    }
+  }, [fingerprint, isPreparing, paymentInitialized, isResuming]);
+  const activeCart = isPreparing || paymentInitialized ? submittedCart : void 0;
+  const displayItems = activeCart?.items ?? cart.items;
+  const displayDiscount = activeCart ? activeCart.discount : validDiscount;
+  const displaySubtotal = displayItems.reduce(
+    (total, item) => total + item.price * item.quantity,
+    0
+  );
+  const complete = (result) => {
+    void navigate(
+      `/shop/orders/${encodeURIComponent(result.orderId)}/confirmation`
+    );
+  };
+  useEffect(() => {
+    if (!cart.isHydrated) return;
+    let cancelled = false;
+    const checkoutKey = `${cart.storeKey}:checkout`;
+    setIsResuming(true);
+    key.current = void 0;
+    setPayment(void 0);
+    setPaymentInitialized(false);
+    setSubmittedCart(void 0);
+    setResumeFailed(false);
+    setValidationError(void 0);
+    const restore = async () => {
+      let stored = null;
+      let recordRead = false;
+      const stillCurrent = () => {
+        if (cancelled) return false;
+        try {
+          return sessionStorage.getItem(checkoutKey) === stored;
+        } catch {
+          return false;
+        }
+      };
+      try {
+        stored = sessionStorage.getItem(checkoutKey);
+        recordRead = true;
+        const attempt = stored ? JSON.parse(stored) : null;
+        if (!attempt?.key || !attempt.fingerprint) return;
+        const original = JSON.parse(attempt.fingerprint);
+        const input = checkoutSchema.parse({
+          items: original.items,
+          email: original.email,
+          shippingAddress: original.address,
+          discountCode: original.appliedCode || void 0,
+          idempotencyKey: attempt.key
+        });
+        const token = attempt.orderId ? sessionStorage.getItem(orderTokenKey(attempt.orderId, endpoint)) : null;
+        let result;
+        let order;
+        if (attempt.orderId && token) {
+          order = await verifyOrder(attempt.orderId, token);
+        } else {
+          const uncertainAttempt = JSON.stringify({
+            ...attempt,
+            uncertain: true
+          });
+          sessionStorage.setItem(checkoutKey, uncertainAttempt);
+          stored = uncertainAttempt;
+          result = await checkout.mutateAsync(input);
+          if (!stillCurrent()) return;
+          paymentRedirectUrl(result.payment);
+          sessionStorage.setItem(
+            orderTokenKey(result.orderId, endpoint),
+            result.accessToken
+          );
+          sessionStorage.setItem(
+            `${orderTokenKey(result.orderId, endpoint)}:cart`,
+            JSON.stringify(input.items)
+          );
+          const recoveredAttempt = JSON.stringify({
+            ...attempt,
+            orderId: result.orderId,
+            uncertain: true
+          });
+          sessionStorage.setItem(checkoutKey, recoveredAttempt);
+          stored = recoveredAttempt;
+          order = await verifyOrder(result.orderId, result.accessToken);
+        }
+        if (!stillCurrent()) return;
+        if (!order)
+          throw new Error(
+            "Could not verify your previous order. Please retry before starting another payment."
+          );
+        if (order.paymentStatus === "paid") {
+          await navigate(
+            `/shop/orders/${encodeURIComponent(order.id)}/confirmation`
+          );
+          return;
+        }
+        if (isTerminalOrder(order)) {
+          sessionStorage.removeItem(checkoutKey);
+          key.current = void 0;
+          setPayment(void 0);
+          setPaymentInitialized(false);
+          setSubmittedCart(void 0);
+          return;
+        }
+        result ??= await checkout.mutateAsync(input);
+        if (!stillCurrent()) return;
+        paymentRedirectUrl(result.payment);
+        key.current = attempt.key;
+        setEmail(input.email);
+        setAddress(input.shippingAddress);
+        setCode(input.discountCode ?? "");
+        setAppliedCode(input.discountCode ?? "");
+        setAppliedFingerprint(JSON.stringify(input.items));
+        setSubmittedCart({
+          items: order.lineItems.map((item) => ({
+            ...item,
+            currency: order.currency
+          })),
+          discount: input.discountCode ? {
+            code: input.discountCode,
+            discount: order.discount,
+            subtotal: order.subtotal,
+            total: order.total,
+            currency: order.currency
+          } : void 0,
+          fingerprint: JSON.stringify(input.items)
+        });
+        setPayment(result);
+        setPaymentInitialized(true);
+        setStep("payment");
+      } catch (error) {
+        if (!cancelled && (!recordRead || stillCurrent())) {
+          setValidationError(
+            error instanceof Error ? error : new Error(String(error))
+          );
+          setResumeFailed(true);
+        }
+      } finally {
+        if (!cancelled) setIsResuming(false);
+      }
+    };
+    void restore();
+    return () => {
+      cancelled = true;
+    };
+  }, [cart.isHydrated, cart.storeKey, resumeVersion]);
+  const placeOrder = async () => {
+    if (submitting.current || applyingDiscount.current || isResuming) return;
+    submitting.current = true;
+    setIsPreparing(true);
+    setSubmittedCart({
+      items: cart.items.map((item) => ({ ...item })),
+      discount: validDiscount,
+      fingerprint: discountFingerprint
+    });
+    let submittedKey;
+    const checkoutKey = `${cart.storeKey}:checkout`;
+    try {
+      setValidationError(void 0);
+      const stored = sessionStorage.getItem(checkoutKey);
+      let previous;
+      if (stored) {
+        try {
+          previous = JSON.parse(stored);
+        } catch {
+        }
+      }
+      const reusable = await reusableCheckoutAttempt(
+        previous,
+        fingerprint,
+        async (id) => {
+          const token = sessionStorage.getItem(orderTokenKey(id, endpoint)) ?? "";
+          const order = await verifyOrder(id, token);
+          if (!order)
+            throw new Error(
+              "Could not verify your previous order. Please retry before starting another payment."
+            );
+          return order;
+        }
+      );
+      if (previous && typeof previous.key === "string" && !reusable) {
+        if (sessionStorage.getItem(checkoutKey) !== stored)
+          throw new Error(
+            "Your checkout changed in another view. Please retry."
+          );
+        sessionStorage.removeItem(checkoutKey);
+        key.current = void 0;
+        previous = void 0;
+        setPaymentInitialized(false);
+      }
+      if (!key.current && reusable?.key) key.current = reusable.key;
+      key.current ??= crypto.randomUUID();
+      const idempotencyKey = key.current;
+      sessionStorage.setItem(
+        checkoutKey,
+        JSON.stringify({
+          ...reusable?.key === idempotencyKey ? reusable : {},
+          fingerprint,
+          key: idempotencyKey
+        })
+      );
+      submittedKey = idempotencyKey;
+      const result = await checkout.mutateAsync({
+        items,
+        email,
+        shippingAddress: address,
+        discountCode: validDiscount ? appliedCode : void 0,
+        idempotencyKey
+      });
+      const redirectUrl = paymentRedirectUrl(result.payment);
+      try {
+        const attempt = JSON.parse(
+          sessionStorage.getItem(checkoutKey) ?? "null"
+        );
+        if (attempt?.key === idempotencyKey) {
+          sessionStorage.setItem(
+            checkoutKey,
+            JSON.stringify({ ...attempt, orderId: result.orderId })
+          );
+        }
+        sessionStorage.setItem(
+          orderTokenKey(result.orderId, endpoint),
+          result.accessToken
+        );
+        sessionStorage.setItem(
+          `${orderTokenKey(result.orderId, endpoint)}:cart`,
+          JSON.stringify(items)
+        );
+      } catch {
+        throw new Error(
+          "Allow session storage to keep your secure order access, then retry payment."
+        );
+      }
+      setPayment(result);
+      setPaymentInitialized(true);
+      if (redirectUrl) window.location.assign(redirectUrl);
+      else if (!result.payment.clientSecret) complete(result);
+    } catch (cause) {
+      if (submittedKey) {
+        try {
+          const attempt = JSON.parse(
+            sessionStorage.getItem(checkoutKey) ?? "null"
+          );
+          const code2 = cause instanceof Error && "code" in cause ? cause.code : void 0;
+          if (canDiscardCheckoutAttempt(attempt, submittedKey, code2)) {
+            sessionStorage.removeItem(checkoutKey);
+            setSubmittedCart(void 0);
+            if (key.current === submittedKey) key.current = void 0;
+          } else if (attempt?.key === submittedKey) {
+            sessionStorage.setItem(
+              checkoutKey,
+              JSON.stringify({ ...attempt, uncertain: true })
+            );
+          }
+        } catch {
+        }
+      }
+      setValidationError(
+        cause instanceof Error ? cause : new Error(String(cause))
+      );
+    } finally {
+      submitting.current = false;
+      setIsPreparing(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(Storefront, { children: !cart.isHydrated ? /* @__PURE__ */ jsx("p", { role: "status", children: "Loading cart\u2026" }) : isResuming ? /* @__PURE__ */ jsx("p", { role: "status", children: "Restoring checkout\u2026" }) : resumeFailed ? /* @__PURE__ */ jsxs("section", { className: "space-y-4 py-8", children: [
+    /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold", children: "Resume your previous payment" }),
+    /* @__PURE__ */ jsx(ErrorMessage, { error: validationError }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Use the same account and browser that started this payment. If the problem continues, contact the shop before starting another order." }),
+    /* @__PURE__ */ jsx(Button, { onClick: () => setResumeVersion((version) => version + 1), children: "Retry previous payment" })
+  ] }) : displayItems.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold tracking-tight", children: "Checkout" }),
+    /* @__PURE__ */ jsxs(
+      "ol",
+      {
+        "aria-label": "Checkout progress",
+        className: "my-7 flex flex-wrap gap-6 text-sm",
+        children: [
+          /* @__PURE__ */ jsx("li", { children: "Cart" }),
+          /* @__PURE__ */ jsx(
+            "li",
+            {
+              "aria-current": step === "shipping" ? "step" : void 0,
+              className: step === "shipping" ? "font-semibold" : "text-muted-foreground",
+              children: "Shipping"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "li",
+            {
+              "aria-current": step === "payment" ? "step" : void 0,
+              className: step === "payment" ? "font-semibold" : "text-muted-foreground",
+              children: "Payment"
+            }
+          ),
+          /* @__PURE__ */ jsx("li", { className: "text-muted-foreground", children: "Confirmation" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "grid items-start gap-10 md:grid-cols-[minmax(0,1fr)_20rem]", children: [
+      /* @__PURE__ */ jsx("section", { children: step === "shipping" ? /* @__PURE__ */ jsxs(
+        "form",
+        {
+          className: "space-y-5",
+          onSubmit: (event) => {
+            event.preventDefault();
+            const parsed = z.object({
+              email: z.email(),
+              address: shippingAddressSchema
+            }).safeParse({ email, address });
+            if (!parsed.success) {
+              setValidationError(
+                new Error(
+                  parsed.error.issues.map(
+                    (issue) => `${issue.path.join(" ")}: ${issue.message}`
+                  ).join("; ")
+                )
+              );
+              return;
+            }
+            setAddress(parsed.data.address);
+            setEmail(parsed.data.email);
+            setValidationError(void 0);
+            setStep("payment");
+          },
+          children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-xl font-medium", children: "Shipping address" }),
+            /* @__PURE__ */ jsxs("label", { className: "block text-sm", children: [
+              "Email",
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  className: "mt-2",
+                  type: "email",
+                  autoComplete: "email",
+                  required: true,
+                  value: email,
+                  onChange: (event) => setEmail(event.target.value)
+                }
+              )
+            ] }),
+            addressFields.map(([name, label, autoComplete]) => /* @__PURE__ */ jsxs("label", { className: "block text-sm", children: [
+              label,
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  className: "mt-2",
+                  autoComplete,
+                  required: name !== "line2" && name !== "region",
+                  maxLength: name === "country" ? 2 : 200,
+                  placeholder: name === "country" ? "US" : void 0,
+                  value: address[name] ?? "",
+                  onChange: (event) => setAddress((current) => ({
+                    ...current,
+                    [name]: name === "country" ? event.target.value.toUpperCase() : event.target.value
+                  }))
+                }
+              )
+            ] }, name)),
+            /* @__PURE__ */ jsx(ErrorMessage, { error: validationError }),
+            /* @__PURE__ */ jsx(Button, { type: "submit", className: "h-11", children: "Continue to payment" })
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-xl font-medium", children: "Payment" }),
+            /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: email }),
+            /* @__PURE__ */ jsxs("p", { className: "mt-1 text-sm text-muted-foreground", children: [
+              address.line1,
+              ", ",
+              address.city,
+              ", ",
+              address.postalCode
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              onClick: () => setStep("shipping"),
+              disabled: paymentInitialized || checkout.isPending || isPreparing,
+              children: "Edit shipping"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm leading-6 text-muted-foreground", children: "Your payment provider will confirm the final total and complete payment securely." }),
+        /* @__PURE__ */ jsx(ErrorMessage, { error: validationError ?? checkout.error }),
+        payment?.payment.redirectUrl ? /* @__PURE__ */ jsx(Button, { asChild: true, className: "h-11 w-full", children: /* @__PURE__ */ jsx("a", { href: payment.payment.redirectUrl, children: "Resume secure payment" }) }) : payment?.payment.clientSecret ? PaymentForm ? /* @__PURE__ */ jsx(
+          PaymentForm,
+          {
+            clientSecret: payment.payment.clientSecret,
+            orderId: payment.orderId,
+            onComplete: () => complete(payment)
+          }
+        ) : /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm text-destructive", children: "This payment provider requires a payment form. Configure the Ecommerce PaymentForm override to continue." }) : /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "h-11 w-full",
+            disabled: checkout.isPending || isPreparing || discount.isPending,
+            onClick: () => void placeOrder(),
+            children: checkout.isPending || isPreparing ? "Preparing payment\u2026" : "Continue to secure payment"
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxs("aside", { className: "rounded-lg bg-muted/40 p-6", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-medium", children: "Order summary" }),
+        activeCart && activeCart.fingerprint !== discountFingerprint ? /* @__PURE__ */ jsx("p", { role: "status", className: "mt-3 text-sm text-muted-foreground", children: "This payment is for the items shown below. Cart changes apply to a future order." }) : null,
+        /* @__PURE__ */ jsx("ul", { className: "mt-4 divide-y", children: displayItems.map((item) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: "flex justify-between gap-3 py-3 text-sm",
+            children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                item.name,
+                item.variantName ? ` (${item.variantName})` : "",
+                " \xD7",
+                " ",
+                item.quantity
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 tabular-nums", children: formatMoney(item.price * item.quantity, item.currency) })
+            ]
+          },
+          `${item.productId}:${item.variantId ?? ""}`
+        )) }),
+        /* @__PURE__ */ jsxs(
+          "form",
+          {
+            className: "mt-5 space-y-2",
+            onSubmit: async (event) => {
+              event.preventDefault();
+              if (submitting.current || applyingDiscount.current || paymentInitialized)
+                return;
+              applyingDiscount.current = true;
+              try {
+                await discount.mutateAsync({ code, items });
+                setAppliedCode(code.trim());
+                setAppliedFingerprint(discountFingerprint);
+              } catch {
+                setAppliedCode("");
+              } finally {
+                applyingDiscount.current = false;
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx("label", { className: "text-sm", htmlFor: "discount-code", children: "Discount code" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: "discount-code",
+                    disabled: discountLocked,
+                    value: code,
+                    onChange: (event) => setCode(event.target.value)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "outline",
+                    type: "submit",
+                    disabled: !code.trim() || discountLocked,
+                    children: discount.isPending ? "Checking\u2026" : "Apply"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(ErrorMessage, { error: discount.error })
+            ]
+          }
+        ),
+        displayDiscount ? /* @__PURE__ */ jsxs("p", { role: "status", className: "mt-4 flex justify-between text-sm", children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            displayDiscount.code,
+            " applied"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "\u2212",
+            formatMoney(
+              displayDiscount.discount,
+              displayDiscount.currency
+            )
+          ] })
+        ] }) : null,
+        /* @__PURE__ */ jsxs("p", { className: "mt-6 flex justify-between border-t pt-4 font-medium", children: [
+          /* @__PURE__ */ jsx("span", { children: displayDiscount ? "After discount" : "Subtotal" }),
+          /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: formatMoney(
+            displayDiscount?.total ?? displaySubtotal,
+            displayDiscount?.currency ?? displayItems[0]?.currency ?? "USD"
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "mt-3 text-xs leading-5 text-muted-foreground", children: "Shipping and final prices are confirmed by the server before payment." })
+      ] })
+    ] })
+  ] }) : /* @__PURE__ */ jsx(EmptyCart, {}) });
+}
+
+export { CheckoutPage };

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

@@ -0,0 +1,107 @@
+"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 useProducts = require('../../hooks/use-products.cjs');
+const useOrders = require('../../hooks/use-orders.cjs');
+const useCart = require('../../hooks/use-cart.cjs');
+const constants = require('../../constants.cjs');
+const storefront = require('../storefront.cjs');
+const orderSummary = require('../order-summary.cjs');
+const checkoutAttempt = require('../../checkout-attempt.cjs');
+const orderAccess = require('../../order-access.cjs');
+
+function OrderConfirmationPage({ id }) {
+  const [token, setToken] = React.useState("");
+  const [loaded, setLoaded] = React.useState(false);
+  const cart = useCart.useCart();
+  const endpoint = useProducts.useEcommerceEndpoint();
+  React.useEffect(() => {
+    try {
+      setToken(sessionStorage.getItem(orderAccess.orderTokenKey(id, endpoint)) ?? "");
+    } catch {
+      setToken("");
+    }
+    setLoaded(true);
+  }, [id, endpoint]);
+  const order = useOrders.useOrderConfirmation(id, token);
+  const { Link, resolve } = context.usePluginSiteNavigation(constants.ECOMMERCE_PLUGIN_ID);
+  React.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]);
+  React.useEffect(() => {
+    if (!order.data || !checkoutAttempt.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]);
+  React.useEffect(() => {
+    if (!order.data || order.data.paymentStatus !== "paid") return;
+    try {
+      const snapshot = sessionStorage.getItem(
+        `${orderAccess.orderTokenKey(id, endpoint)}:cart`
+      );
+      if (snapshot === JSON.stringify(
+        cart.items.map(({ productId, variantId, quantity }) => ({
+          productId,
+          variantId,
+          quantity
+        }))
+      )) {
+        cart.clear();
+        sessionStorage.removeItem(`${orderAccess.orderTokenKey(id, endpoint)}:cart`);
+      }
+    } catch {
+    }
+  }, [id, endpoint, order.data?.paymentStatus, cart]);
+  const paid = order.data?.paymentStatus === "paid";
+  return /* @__PURE__ */ jsxRuntime.jsxs(storefront.Storefront, { children: [
+    loaded && !token ? /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "py-12", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-semibold", children: "Order access required" }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "mb-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mb-3 text-sm text-muted-foreground", children: [
+          "Order ",
+          id
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "mt-3 max-w-xl text-muted-foreground", children: paid ? `Your payment of ${storefront.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__ */ jsxRuntime.jsx(storefront.ErrorMessage, { error: order.error }),
+      order.isFetching && !order.data ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", children: "Loading order\u2026" }) : null,
+      order.data ? /* @__PURE__ */ jsxRuntime.jsx(orderSummary.OrderSummary, { order: order.data }) : null,
+      !paid ? /* @__PURE__ */ jsxRuntime.jsx(
+        button.Button,
+        {
+          variant: "outline",
+          className: "mt-6",
+          disabled: order.isFetching,
+          onClick: () => void order.refetch(),
+          children: "Refresh payment status"
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Link,
+      {
+        className: "mt-8 inline-block text-sm underline underline-offset-4",
+        href: resolve("/shop").href,
+        children: "Continue shopping"
+      }
+    )
+  ] });
+}
+
+exports.OrderConfirmationPage = OrderConfirmationPage;