create-brainerce-store 1.58.0 → 1.61.0

package/templates/nextjs/base/src/app/order-status/page.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { Suspense, useEffect, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { Link } from '@/core/lib/navigation';
+import type { Order } from 'brainerce';
+import { getClient } from '@/core/lib/brainerce';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { OrderHistory } from '@/components/account/order-history';
+import { useTranslations } from '@/core/lib/translations';
+
+// Read-only order lookup for links from transactional emails (order confirmation,
+// shipped, refunded, etc). Unlike /order-confirmation, this page never calls
+// handlePaymentSuccess() or touches cart state — it only fetches and displays,
+// so it's safe to revisit at any time without side effects on an unrelated
+// active cart. Works for guests too: the checkout id itself is the credential.
+function OrderStatusContent() {
+  const searchParams = useSearchParams();
+  const checkoutId = searchParams.get('checkout_id');
+
+  const t = useTranslations('orderStatus');
+  const tc = useTranslations('common');
+  const [order, setOrder] = useState<Order | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!checkoutId) {
+      setError(t('missingCheckoutInfo'));
+      setLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+    async function loadOrder() {
+      try {
+        const client = getClient();
+        const result = await client.getOrderByCheckout(checkoutId!);
+        if (!cancelled) setOrder(result);
+      } catch (err) {
+        if (!cancelled) {
+          const message = err instanceof Error ? err.message : t('notFound');
+          setError(message);
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    loadOrder();
+    return () => {
+      cancelled = true;
+    };
+  }, [checkoutId, t]);
+
+  if (loading) {
+    return (
+      <div className="flex min-h-[60vh] flex-col items-center justify-center">
+        <LoadingSpinner size="lg" />
+        <p className="text-muted-foreground mt-4">{t('loading')}</p>
+      </div>
+    );
+  }
+
+  if (error || !order) {
+    return (
+      <div className="mx-auto max-w-2xl px-4 py-16 text-center sm:px-6 lg:px-8">
+        <svg
+          className="text-destructive mx-auto mb-4 h-16 w-16"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.834-2.694-.834-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"
+          />
+        </svg>
+        <h1 className="text-foreground text-2xl font-bold">{t('errorTitle')}</h1>
+        <p className="text-muted-foreground mt-2">{error || t('notFound')}</p>
+        <Link
+          href="/"
+          className="bg-primary text-primary-foreground mt-6 inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
+        >
+          {t('returnHome')}
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
+      <h1 className="text-foreground mb-6 text-2xl font-bold">{t('pageTitle')}</h1>
+      <OrderHistory orders={[order]} />
+      <div className="mt-8 flex items-center justify-center">
+        <Link
+          href="/products"
+          className="bg-primary text-primary-foreground inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
+        >
+          {tc('continueShopping')}
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default function OrderStatusPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-[60vh] items-center justify-center">
+          <LoadingSpinner size="lg" />
+        </div>
+      }
+    >
+      <OrderStatusContent />
+    </Suspense>
+  );
+}