@tribe-nest/forge 1.13.0

package/src/ui/styled/CheckoutConfirmation.tsx

@@ -0,0 +1,452 @@
+import { useEffect, useState } from "react";
+import {
+  AlertCircle,
+  AlertTriangle,
+  ArrowRight,
+  CheckCircle,
+  Clock,
+  Loader2,
+  Package,
+  ShoppingBag,
+  Truck,
+  XCircle,
+} from "lucide-react";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { ConfirmationStage, ConfirmationCard, CheckSeal, WarnSeal, Perforation, ConfirmationRow, alpha } from "./Confirmation";
+import { useOrderFinalize } from "../../data/queries/useFinalize";
+import { useCart } from "../../contexts/CartContext";
+import { usePublicAuth } from "../../contexts/PublicAuthContext";
+import { OrderStatus, ProductDeliveryType, type IPublicOrder } from "../../types/models";
+
+export interface CheckoutConfirmationProps {
+  orderId?: string;
+  /**
+   * The Stripe `redirect_status` appended to the return URL (`succeeded` /
+   * `failed` / `processing`). When `failed`, the page shows the failed state
+   * immediately instead of waiting on the order status.
+   */
+  redirectStatus?: string;
+  /**
+   * Formats a monetary amount for display. Receives the order's own currency as a
+   * second argument so the shell can honor it (defaults to plain USD-style).
+   */
+  formatAmount?: (n: number, currency?: string) => string;
+  /** "Continue shopping" link. Default `/i/store`. */
+  explorePath?: string;
+  /** "View your orders" link. Default `/i/account`. */
+  accountPath?: string;
+  /** Where "Return to checkout" links on a failed payment. Default `/i/checkout`. */
+  checkoutPath?: string;
+}
+
+// A completed payment — anything at or past "paid" in fulfillment.
+const PAID_STATES = new Set<OrderStatus>([
+  OrderStatus.Paid,
+  OrderStatus.LabelPurchased,
+  OrderStatus.Shipped,
+  OrderStatus.Delivered,
+  OrderStatus.Processed,
+]);
+const FAILED_STATES = new Set<OrderStatus>([OrderStatus.PaymentFailed, OrderStatus.Failed, OrderStatus.Cancelled]);
+const PENDING_STATES = new Set<OrderStatus>([OrderStatus.InitiatedPayment, OrderStatus.Processing]);
+
+const DELIVERY_LABEL: Record<ProductDeliveryType, string> = {
+  [ProductDeliveryType.Physical]: "Physical delivery",
+  [ProductDeliveryType.Service]: "Service delivery",
+  [ProductDeliveryType.Digital]: "Digital delivery",
+};
+
+/** Short date only, e.g. "Jun 30, 2026". */
+function formatDate(value: string | number | Date): string {
+  return new Date(value).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
+}
+
+/** Title-case an order status ("payment_failed" → "Payment Failed"). */
+function formatStatus(status: OrderStatus): string {
+  return status.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
+}
+
+function statusIcon(status: OrderStatus, color: string) {
+  const p = { size: 14, color };
+  switch (status) {
+    case OrderStatus.Paid:
+    case OrderStatus.Processed:
+    case OrderStatus.LabelPurchased:
+      return <CheckCircle {...p} />;
+    case OrderStatus.Shipped:
+      return <Truck {...p} />;
+    case OrderStatus.Delivered:
+      return <Package {...p} />;
+    case OrderStatus.Processing:
+    case OrderStatus.InitiatedPayment:
+      return <Clock {...p} />;
+    case OrderStatus.PaymentFailed:
+    case OrderStatus.Failed:
+    case OrderStatus.Cancelled:
+      return <XCircle {...p} />;
+    default:
+      return <AlertCircle {...p} />;
+  }
+}
+
+/**
+ * Post-checkout confirmation. Finalizes the order on load, then renders a themed
+ * "receipt" that accounts for every order state — success (with the fulfillment
+ * status), still-processing (polls the gateway webhook race), or failed/not-found
+ * — with the full order breakdown (delivery groups, gifts, variants, totals).
+ */
+export function CheckoutConfirmation({
+  orderId,
+  redirectStatus,
+  formatAmount,
+  explorePath = "/i/store",
+  accountPath = "/i/account",
+  checkoutPath = "/i/checkout",
+}: CheckoutConfirmationProps) {
+  const theme = useForgeTheme();
+  const formatAmt = useAmountFormatter(formatAmount);
+  const text = theme.colors.text;
+  const primary = theme.colors.primary;
+  const { cartItems, clearCart } = useCart();
+  const { user } = usePublicAuth();
+
+  const stripeFailed = redirectStatus === "failed";
+  const [gaveUp, setGaveUp] = useState(false);
+  const { data: order, isLoading, isError } = useOrderFinalize({ orderId }, { pollWhilePending: !stripeFailed && !gaveUp });
+
+  const status = order?.status;
+  const isPaid = !stripeFailed && !!status && PAID_STATES.has(status);
+  const isFailed = stripeFailed || (!!status && FAILED_STATES.has(status));
+  const isPending = !isPaid && !isFailed && !!status && PENDING_STATES.has(status);
+
+  // Stop polling after a while — the order settles server-side regardless.
+  useEffect(() => {
+    if (!isPending) return;
+    const t = setTimeout(() => setGaveUp(true), 30_000);
+    return () => clearTimeout(t);
+  }, [isPending]);
+
+  // Clear the cart once the order is confirmed paid.
+  useEffect(() => {
+    if (isPaid && cartItems.length > 0) clearCart();
+  }, [isPaid, cartItems.length, clearCart]);
+
+  // ── Loading (initial finalize) ──
+  if (isLoading && !stripeFailed) {
+    return (
+      <ConfirmationStage>
+        <div style={{ textAlign: "center", color: alpha(text, 0.75) }}>
+          <Loader2 size={40} color={primary} style={{ animation: "cc-spin 1s linear infinite" }} />
+          <style>{"@keyframes cc-spin{to{transform:rotate(360deg)}}"}</style>
+          <p style={{ marginTop: 16, fontSize: 15 }}>Confirming your payment…</p>
+        </div>
+      </ConfirmationStage>
+    );
+  }
+
+  // ── Not found (nothing to finalize / bad link) ──
+  if (!order && !stripeFailed) {
+    return (
+      <ConfirmationStage>
+        <ConfirmationCard width={440}>
+          <div style={{ padding: "40px 30px", textAlign: "center" }}>
+            <WarnSeal icon={<AlertTriangle size={34} color="#f59e0b" />} />
+            <h1 style={{ fontSize: 24, fontWeight: 800, margin: "22px 0 8px" }}>Order not found</h1>
+            <p style={{ fontSize: 15, color: alpha(text, 0.7), margin: "0 0 24px" }}>
+              {isError
+                ? "We couldn’t confirm this order. If you were charged, your receipt will still arrive by email."
+                : "This confirmation link looks incomplete or has expired."}
+            </p>
+            <Action href={explorePath} primary={primary}>
+              Continue shopping <ArrowRight size={16} />
+            </Action>
+          </div>
+        </ConfirmationCard>
+      </ConfirmationStage>
+    );
+  }
+
+  const currency = order?.currency || undefined;
+  const fmt = (n: number) => formatAmt(n, currency);
+  const totalDisplay =
+    order && order.totalAmountInChargedCurrency
+      ? formatAmt(order.totalAmountInChargedCurrency, order.chargedCurrency || currency)
+      : order
+        ? formatAmt(order.totalAmount, currency)
+        : "";
+  const groups = order?.deliveryGroups ?? [];
+  const subtotal = groups.reduce((s, g) => s + (g.subTotal || 0), 0);
+  const shipping = groups.reduce((s, g) => s + (g.shippingCost || 0), 0);
+  const discount = order?.discountAmount || 0;
+  const email = order?.customerEmail;
+
+  const eyebrow = isPaid ? "Order confirmed" : isFailed ? "Payment failed" : "Payment processing";
+  const eyebrowColor = isPaid ? primary : isFailed ? "#f59e0b" : primary;
+  const heading = isPaid ? "Thank you! 🛍" : isFailed ? "Payment not completed" : gaveUp ? "Still processing" : "Confirming your payment…";
+  const sub = isPaid
+    ? email
+      ? `We’ve emailed your receipt to ${email}.`
+      : "Your receipt is on its way."
+    : isFailed
+      ? "Your payment didn’t go through — you haven’t been charged. You can try again."
+      : gaveUp
+        ? "This is taking longer than usual. We’ll email your receipt as soon as it clears."
+        : "Hang tight — this only takes a few seconds.";
+
+  return (
+    <ConfirmationStage>
+      <ConfirmationCard width={600}>
+        {/* ── Ceremony ── */}
+        <div style={{ padding: "38px 30px 22px", textAlign: "center" }}>
+          {isPaid ? (
+            <CheckSeal />
+          ) : isFailed ? (
+            <WarnSeal icon={<AlertTriangle size={34} color="#f59e0b" />} />
+          ) : (
+            <div style={{ width: 84, height: 84, margin: "0 auto", display: "grid", placeItems: "center" }}>
+              <Loader2 size={54} color={primary} style={{ animation: "cc-spin 1s linear infinite" }} />
+              <style>{"@keyframes cc-spin{to{transform:rotate(360deg)}}"}</style>
+            </div>
+          )}
+
+          <p
+            className="cf-rise"
+            style={{
+              margin: "22px 0 6px",
+              fontSize: 12,
+              fontWeight: 700,
+              letterSpacing: "0.22em",
+              textTransform: "uppercase",
+              color: eyebrowColor,
+              animationDelay: "0.15s",
+            }}
+          >
+            {eyebrow}
+          </p>
+          <h1 className="cf-rise" style={{ fontSize: 29, fontWeight: 800, lineHeight: 1.12, margin: "0 0 8px", animationDelay: "0.22s" }}>
+            {heading}
+          </h1>
+          <p className="cf-rise" style={{ fontSize: 15, color: alpha(text, 0.7), margin: 0, animationDelay: "0.3s" }}>
+            {sub}
+          </p>
+
+          {/* Exact fulfillment status chip (paid → shipped → delivered, etc.). */}
+          {order && !isFailed && (
+            <div className="cf-rise" style={{ marginTop: 14, animationDelay: "0.36s" }}>
+              <span
+                style={{
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: 6,
+                  padding: "5px 12px",
+                  borderRadius: 999,
+                  fontSize: 12,
+                  fontWeight: 700,
+                  color: primary,
+                  background: alpha(primary, 0.1),
+                  border: `1px solid ${alpha(primary, 0.24)}`,
+                }}
+              >
+                {statusIcon(order.status, primary)} {formatStatus(order.status)}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* ── Failed: no summary, just a retry ── */}
+        {isFailed ? (
+          <div className="cf-rise" style={{ padding: "6px 30px 34px", animationDelay: "0.4s" }}>
+            <Action href={checkoutPath} primary={primary}>
+              Return to checkout <ArrowRight size={16} />
+            </Action>
+          </div>
+        ) : (
+          <>
+            {/* ── Order items (grouped by delivery) ── */}
+            <div className="cf-rise" style={{ padding: "0 30px 8px", animationDelay: "0.42s" }}>
+              <SectionLabel icon={<ShoppingBag size={16} color={primary} />} text="Your order" muted={alpha(text, 0.55)} />
+              {groups.length === 0 ? (
+                <p style={{ textAlign: "center", padding: "12px 0", color: alpha(text, 0.6), fontSize: 14 }}>
+                  No items in this order.
+                </p>
+              ) : (
+                <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
+                  {groups.map((g) => (
+                    <GroupBlock key={g.id} group={g} fmt={fmt} theme={theme} />
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {/* ── Totals ── */}
+            <div className="cf-rise" style={{ padding: "12px 30px 0", animationDelay: "0.48s" }}>
+              <div style={{ paddingTop: 14, borderTop: `1px solid ${alpha(text, 0.1)}`, display: "flex", flexDirection: "column", gap: 6 }}>
+                <SummaryLine label="Subtotal" value={fmt(subtotal)} muted={alpha(text, 0.6)} />
+                {shipping > 0 && <SummaryLine label="Shipping" value={fmt(shipping)} muted={alpha(text, 0.6)} />}
+                {discount > 0 && <SummaryLine label="Discount" value={`−${fmt(discount)}`} muted={alpha(text, 0.6)} />}
+                {Number(order?.taxAmount || 0) > 0 && !order?.taxInclusive && (
+                  <SummaryLine
+                    label="Tax"
+                    value={formatAmt(Number(order?.taxAmount), order?.chargedCurrency || currency)}
+                    muted={alpha(text, 0.6)}
+                  />
+                )}
+              </div>
+              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 12 }}>
+                <span style={{ fontWeight: 700 }}>Total {isPaid ? "paid" : ""}</span>
+                <span style={{ fontSize: 20, fontWeight: 800, color: primary }}>{totalDisplay}</span>
+              </div>
+              {Number(order?.taxAmount || 0) > 0 && order?.taxInclusive && (
+                <div style={{ textAlign: "right", fontSize: 12, color: alpha(text, 0.6), marginTop: 4 }}>
+                  Includes {formatAmt(Number(order?.taxAmount), order?.chargedCurrency || currency)} tax
+                </div>
+              )}
+            </div>
+
+            <div style={{ padding: "20px 30px 0" }}>
+              <Perforation />
+            </div>
+
+            {/* ── Details ── */}
+            <div className="cf-rise" style={{ padding: "20px 30px 8px", animationDelay: "0.54s" }}>
+              <dl style={{ display: "grid", gridTemplateColumns: "1fr auto", rowGap: 10, columnGap: 16, margin: 0 }}>
+                <ConfirmationRow label="Order" value={`#${order!.id.slice(0, 8).toUpperCase()}`} mono />
+                <ConfirmationRow label="Date" value={formatDate(order!.createdAt)} />
+                {order!.customerName && <ConfirmationRow label="Name" value={order!.customerName} />}
+                {email && <ConfirmationRow label="Email" value={email} />}
+              </dl>
+            </div>
+
+            {/* ── Actions ── */}
+            <div className="cf-rise" style={{ padding: "22px 30px 30px", display: "flex", flexDirection: "column", gap: 10, animationDelay: "0.6s" }}>
+              <Action href={explorePath} primary={primary}>
+                Continue shopping <ArrowRight size={16} />
+              </Action>
+              {/* Orders live behind auth — only offer the link to signed-in buyers. */}
+              {user && (
+                <Action href={accountPath} primary={primary} ghost>
+                  View your orders
+                </Action>
+              )}
+            </div>
+          </>
+        )}
+      </ConfirmationCard>
+    </ConfirmationStage>
+  );
+}
+
+function SectionLabel({ icon, text, muted }: { icon: React.ReactNode; text: string; muted: string }) {
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
+      {icon}
+      <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: muted }}>{text}</span>
+    </div>
+  );
+}
+
+function GroupBlock({
+  group,
+  fmt,
+  theme,
+}: {
+  group: IPublicOrder["deliveryGroups"][number];
+  fmt: (n: number) => string;
+  theme: ReturnType<typeof useForgeTheme>;
+}) {
+  const text = theme.colors.text;
+  const primary = theme.colors.primary;
+  return (
+    <div style={{ borderRadius: theme.cornerRadius, border: `1px solid ${alpha(primary, 0.16)}`, background: alpha(primary, 0.04), overflow: "hidden" }}>
+      {/* group header */}
+      <div style={{ padding: "10px 14px", borderBottom: `1px solid ${alpha(primary, 0.12)}` }}>
+        <div style={{ fontSize: 13, fontWeight: 700, color: text }}>{DELIVERY_LABEL[group.deliveryType]}</div>
+        <div style={{ fontSize: 12, color: alpha(text, 0.65), marginTop: 2 }}>
+          To {group.recipientName} ({group.recipientEmail})
+        </div>
+        {group.recipientMessage && (
+          <div style={{ fontSize: 12, color: alpha(text, 0.6), marginTop: 2, fontStyle: "italic" }}>“{group.recipientMessage}”</div>
+        )}
+      </div>
+      {/* items */}
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        {group.items.map((item, i) => (
+          <div
+            key={`${item.productVariantId}-${item.isGift}-${item.recipientEmail || ""}-${i}`}
+            style={{ display: "flex", gap: 12, padding: "12px 14px", borderTop: i === 0 ? "none" : `1px solid ${alpha(primary, 0.1)}` }}
+          >
+            {item.coverImage ? (
+              <img
+                src={item.coverImage}
+                alt={item.title}
+                width={48}
+                height={48}
+                style={{ width: 48, height: 48, objectFit: "cover", borderRadius: Math.max(6, theme.cornerRadius - 2), flexShrink: 0 }}
+              />
+            ) : (
+              <div style={{ width: 48, height: 48, borderRadius: Math.max(6, theme.cornerRadius - 2), background: alpha(primary, 0.1), flexShrink: 0 }} />
+            )}
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={{ fontSize: 14, fontWeight: 600, color: text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                {item.title}
+              </div>
+              <div style={{ fontSize: 12, color: alpha(text, 0.6), marginTop: 2 }}>
+                {fmt(item.price)} · Qty {item.quantity}
+              </div>
+              {item.color && item.size && (
+                <div style={{ fontSize: 12, marginTop: 4, display: "flex", alignItems: "center", gap: 6, color: alpha(text, 0.7) }}>
+                  <span style={{ width: 12, height: 12, borderRadius: "50%", background: item.color, display: "inline-block", border: `1px solid ${alpha(text, 0.2)}` }} />
+                  {item.size}
+                </div>
+              )}
+              {item.isGift && (
+                <div style={{ fontSize: 12, marginTop: 4, color: primary }}>
+                  🎁 Gift for {item.recipientName} ({item.recipientEmail})
+                </div>
+              )}
+              {item.recipientMessage && (
+                <div style={{ fontSize: 12, marginTop: 2, color: alpha(text, 0.6), fontStyle: "italic" }}>“{item.recipientMessage}”</div>
+              )}
+            </div>
+            <div style={{ fontSize: 14, fontWeight: 700, color: primary, whiteSpace: "nowrap" }}>{fmt(item.price * item.quantity)}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function SummaryLine({ label, value, muted }: { label: string; value: string; muted: string }) {
+  return (
+    <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14, color: muted }}>
+      <span>{label}</span>
+      <span>{value}</span>
+    </div>
+  );
+}
+
+function Action({ href, primary, ghost, children }: { href: string; primary: string; ghost?: boolean; children: React.ReactNode }) {
+  return (
+    <a
+      href={href}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+        width: "100%",
+        padding: "13px 18px",
+        borderRadius: 10,
+        fontWeight: 700,
+        textDecoration: "none",
+        background: ghost ? "transparent" : primary,
+        color: ghost ? primary : readableTextOn(primary),
+        border: ghost ? `1px solid ${alpha(primary, 0.3)}` : "none",
+      }}
+    >
+      {children}
+    </a>
+  );
+}