fix(checkout): return the customer to the merchant when payment is detected

A merchant that supplies `redirectURL` and `redirectAutomatically` is asking for its
customer back, and the moment to do that is detection rather than final depth. The
payment is already irreversible from the payer's side, and the merchant's own page is
where an order status belongs. Waiting for the confirmation target instead parks the
customer on a payment page for as long as the coin takes.

Only the classic style acted on those fields, and it held its own copy of the rule. The
standard style had no automatic return at all, and its way back appeared only once the
invoice was confirmed. Both styles now render one shared component, so the rule lives in
one place, and the return appears as soon as the payment is seen. The receipt still
waits for confirmation, because that is when there is a settled payment to describe.

Also ignores the tsbuildinfo a typecheck leaves behind.

.gitignore

@@ -13,3 +13,4 @@ backups/
 wallets/
 qr/
 docker-compose.override.yml
+ui/tsconfig.tsbuildinfo

ui/app/i/[invoiceId]/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 
 import BtcpayModalBridge from "../../../components/btcpay-modal-bridge";
+import BtcpayAutoReturn from "../../../components/btcpay-auto-return";
 import BtcpayClassicCheckout from "../../../components/btcpay-classic-checkout";
 import InvoicePaymentDetails from "../../../components/invoice-payment-details";
 import InvoiceStatusAutoRefresh from "../../../components/invoice-status-auto-refresh";
@@ -210,7 +211,13 @@ export default async function BtcpayModalInvoicePage({
   const isBtcpayInvoice = Boolean(invoice.btcpay_amount && invoice.btcpay_currency);
   const useClassicCheckout =
     isBtcpayInvoice && invoice.btcpay_checkout_style === "btcpay_classic";
-  const shouldShowBtcpayActions = isBtcpayInvoice && invoice.status === "confirmed";
+  // The merchant's own order page is where a customer belongs once the payment has been seen, so
+  // the way back appears at detection. The receipt still waits for the confirmation target, because
+  // that is the point at which there is a settled payment to write one about.
+  const btcpayPaymentSeen =
+    isBtcpayInvoice &&
+    (invoice.status === "payment_detected" || invoice.status === "confirmed");
+  const shouldShowBtcpayActions = btcpayPaymentSeen;
   const checkoutContinueAvailable =
     !isBtcpayInvoice &&
     invoice.status === "confirmed" &&
@@ -371,6 +378,11 @@ export default async function BtcpayModalInvoicePage({
             ) : null}
           </div>
 
+          <BtcpayAutoReturn
+            status={invoice.status}
+            redirectUrl={invoice.btcpay_redirect_url ?? null}
+            redirectAutomatically={invoice.btcpay_redirect_automatically ?? null}
+          />
           <div className="mt-5">
             <InvoicePaymentDetails
               address={invoice.address}
@@ -384,12 +396,14 @@ export default async function BtcpayModalInvoicePage({
           </div>
           {shouldShowBtcpayActions ? (
             <div className="mt-6 grid gap-3">
+              {invoice.status === "confirmed" ? (
                 <a
                   className="inline-flex items-center justify-center rounded-full bg-sage px-6 py-3 text-sm font-semibold text-cream shadow-[0_14px_22px_rgba(93,122,106,0.25)] transition hover:-translate-y-0.5"
                   href={`/i/${encodeURIComponent(invoiceId)}/receipt`}
                 >
                   View receipt
                 </a>
+              ) : null}
               {invoice.btcpay_redirect_url ? (
                 <a
                   className="inline-flex items-center justify-center rounded-full border border-stroke bg-white px-6 py-3 text-sm font-semibold text-sage transition hover:bg-cream"

ui/components/btcpay-auto-return.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect } from "react";
+
+/**
+ * Sends the customer back to the merchant once their payment has been seen.
+ *
+ * A merchant that supplied `redirectURL` and `redirectAutomatically` on the invoice is asking for
+ * its customer back, and the moment to do that is detection rather than final depth: the payment is
+ * irreversible from the payer's side already, and the merchant's own page is where the order status
+ * belongs. Waiting for the confirmation target instead leaves the customer parked on a payment page
+ * for as long as the coin takes, which for Monero is ten blocks.
+ *
+ * The delay is deliberate. The customer should see the payment acknowledged here before the page
+ * changes under them, otherwise the redirect reads as the checkout failing.
+ *
+ * Rendered by both checkout styles so the rule lives in one place.
+ */
+type BtcpayAutoReturnProps = {
+  status: string;
+  redirectUrl: string | null;
+  redirectAutomatically: boolean | null;
+  delayMs?: number;
+};
+
+export default function BtcpayAutoReturn({
+  status,
+  redirectUrl,
+  redirectAutomatically,
+  delayMs = 3000,
+}: BtcpayAutoReturnProps) {
+  useEffect(() => {
+    if (
+      (status !== "confirmed" && status !== "payment_detected") ||
+      !redirectUrl ||
+      !redirectAutomatically
+    ) {
+      return;
+    }
+    const timer = window.setTimeout(() => {
+      try {
+        window.top?.location.assign(redirectUrl);
+      } catch {
+        window.location.assign(redirectUrl);
+      }
+    }, delayMs);
+    return () => {
+      window.clearTimeout(timer);
+    };
+  }, [delayMs, redirectAutomatically, redirectUrl, status]);
+
+  return null;
+}

ui/components/btcpay-classic-checkout.tsx

@@ -5,6 +5,7 @@ import { useEffect, useMemo, useState } from "react";
 import QRCode from "qrcode";
 
 import { formatXmrAmount } from "../lib/formatting";
+import BtcpayAutoReturn from "./btcpay-auto-return";
 
 type InvoiceStatus =
   | "pending"
@@ -129,22 +130,6 @@ export default function BtcpayClassicCheckout({
       ? `1 XMR = ${formatFiatAmount(quote.rate, quote.fiat_currency)}`
       : null;
 
-  useEffect(() => {
-    if ((status !== "confirmed" && status !== "payment_detected") || !redirectUrl || !redirectAutomatically) {
-      return;
-    }
-    const timer = window.setTimeout(() => {
-      try {
-        window.top?.location.assign(redirectUrl);
-      } catch {
-        window.location.assign(redirectUrl);
-      }
-    }, 3000);
-    return () => {
-      window.clearTimeout(timer);
-    };
-  }, [redirectAutomatically, redirectUrl, status]);
-
   const handleCopy = async (value: string, field: string) => {
     try {
       await navigator.clipboard.writeText(value);
@@ -285,6 +270,11 @@ export default function BtcpayClassicCheckout({
 
   return (
     <div className="rounded-[28px] border border-stroke bg-white px-6 py-8 shadow-card">
+      <BtcpayAutoReturn
+        status={status}
+        redirectUrl={redirectUrl}
+        redirectAutomatically={redirectAutomatically}
+      />
       <div className="text-center">
         <p className="text-sm font-semibold uppercase tracking-[0.2em] text-ink-soft">
           Payment request