Align BTCPay receipt layout with reference

2026-10-17 05:51:34 +02:00 · 2026-01-08 17:57:24 +00:00
parent 723891d7ea
commit a4df797294
3 changed files with 154 additions and 54 deletions
@@ -2,6 +2,8 @@ import type { Metadata } from "next";
 import { headers } from "next/headers";

 import BtcpayModalBridge from "../../../../components/btcpay-modal-bridge";
+import CopyIconButton from "../../../../components/copy-icon-button";
+import PrintButton from "../../../../components/print-button";
 import { formatRelativeTime } from "../../../../components/relative-time";

 export const dynamic = "force-dynamic";
@@ -91,7 +93,7 @@ const resolveQrSrc = (invoiceId: string, qrUrl: string | null | undefined) => {
 };

 const closeLinkClassName =
-  "rounded-full border border-stroke bg-white/80 px-3 py-1 text-[0.65rem] font-semibold uppercase tracking-[0.12em] text-ink-soft transition hover:bg-white";
+  "rounded-md border border-neutral-200 bg-white px-3 py-2 text-xs font-semibold text-neutral-700 transition hover:bg-neutral-50";

 export default async function BtcpayReceiptPage({
  params,
@@ -166,85 +168,106 @@ export default async function BtcpayReceiptPage({
      : invoice.btcpay_amount && invoice.btcpay_currency
        ? `${invoice.btcpay_amount} ${invoice.btcpay_currency}`
        : null;
-  const exchangeRate =
-    invoice.quote?.rate && invoice.quote.fiat_currency
-      ? formatFiatAmount(invoice.quote.rate, invoice.quote.fiat_currency)
-      : null;
  const paidXmr = invoice.amount_paid_xmr ?? invoice.amount_xmr;
  const qrSrc = resolveQrSrc(invoiceId, invoice.qr_url);
  const storeTitle = receiptTitle(invoice.btcpay_redirect_url);
+  const amountPaidLabel = totalFiat ? totalFiat : `${paidXmr} XMR`;
+  const returnLabel = invoice.btcpay_redirect_url ? `Return to ${storeTitle}` : "Return to invoice";
+  const returnHref = invoice.btcpay_redirect_url ?? `/i/${encodeURIComponent(invoiceId)}`;

  return (
-    <main className="min-h-screen bg-white px-4 py-10 text-ink">
+    <main className="min-h-screen bg-neutral-100 px-4 py-10 text-neutral-900">
      <BtcpayModalBridge invoiceId={invoiceId} status={invoice.status} />
      <div className="mx-auto w-full max-w-4xl">
-        <div className="flex justify-end">
-          <a className={closeLinkClassName} href={`/i/${encodeURIComponent(invoiceId)}`}>
-            Close
-          </a>
-        </div>
+        <header className="text-center">
+          <h1 className="text-3xl font-semibold tracking-tight">{storeTitle}</h1>
+        </header>

        {invoice.status !== "confirmed" ? (
          <div className="mt-6 text-center">
-            <h1 className="text-4xl font-semibold tracking-tight">{storeTitle}</h1>
-            {orderId ? <p className="mt-3 text-lg text-ink">Order ID: {orderId}</p> : null}
-            <p className="mt-1 text-base text-ink-soft" title={timestampRelative ?? undefined}>
+            {orderId ? <p className="mt-3 text-lg">Order ID: {orderId}</p> : null}
+            <p className="mt-1 text-base text-neutral-600" title={timestampRelative ?? undefined}>
              {timestampLabel}
            </p>
-            <p className="mt-10 text-sm text-ink-soft">
+            <p className="mt-10 text-sm text-neutral-600">
              This receipt is available after the payment is confirmed.
            </p>
          </div>
        ) : (
          <>
-            <div className="mt-6 text-center">
-              <h1 className="text-4xl font-semibold tracking-tight">{storeTitle}</h1>
-              {orderId ? <p className="mt-3 text-lg text-ink">Order ID: {orderId}</p> : null}
-              <p className="mt-1 text-base text-ink-soft" title={timestampRelative ?? undefined}>
-                {timestampLabel}
-              </p>
+            <div className="mt-8 rounded-xl bg-white p-6 shadow-soft">
+              <div className="grid gap-6 md:grid-cols-[auto_minmax(0,1fr)] md:items-start">
+                <div className="rounded-lg bg-neutral-100 p-4">
+                  {qrSrc ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img alt="Payment QR" src={qrSrc} className="h-56 w-56" />
+                  ) : null}
+                </div>
+
+                <div className="flex flex-col gap-5 md:flex-row md:items-start md:justify-between">
+                  <div className="grid gap-5">
+                    <div>
+                      <p className="text-sm font-semibold text-neutral-500">Amount Paid</p>
+                      <p className="mt-1 text-3xl font-semibold">{amountPaidLabel}</p>
+                    </div>
+                    <div>
+                      <p className="text-sm font-semibold text-neutral-500">Date</p>
+                      <p className="mt-1 text-base" title={timestampRelative ?? undefined}>
+                        {timestampLabel}
+                      </p>
+                    </div>
+                    {orderId ? (
+                      <div>
+                        <p className="text-sm font-semibold text-neutral-500">Order ID</p>
+                        <p className="mt-1 text-base">{orderId}</p>
+                      </div>
+                    ) : null}
+                  </div>
+
+                  <div className="md:self-start">
+                    <PrintButton />
+                  </div>
+                </div>
+              </div>
            </div>

-            <div className="mt-10 border-y border-stroke">
-              <dl className="text-base">
-                <div className="flex items-center justify-between gap-6 py-5">
-                  <dt className="text-ink-soft">Total</dt>
-                  <dd className="text-right font-medium">{totalFiat ?? "-"}</dd>
+            <section className="mt-8 rounded-xl bg-white p-6 shadow-soft">
+              <h2 className="text-xl font-semibold">Payment Details</h2>
+
+              <div className="mt-6 text-sm text-neutral-500">
+                <div className="grid grid-cols-3 gap-6 border-b border-neutral-200 pb-3">
+                  <div>Date</div>
+                  <div className="text-right">Paid</div>
+                  <div className="text-right">Payment</div>
                </div>
-                <div className="flex items-start justify-between gap-6 border-t border-stroke py-5">
-                  <dt className="pt-0.5 text-ink-soft">Paid</dt>
-                  <dd className="text-right">
-                    <div className="font-medium">{paidXmr} XMR</div>
-                    {totalFiat ? <div className="mt-2 text-ink-soft">{totalFiat}</div> : null}
-                  </dd>
+                <div className="grid grid-cols-3 gap-6 pt-4 text-neutral-900">
+                  <div title={timestampRelative ?? undefined}>{timestampLabel}</div>
+                  <div className="text-right">{totalFiat ?? "-"}</div>
+                  <div className="text-right">{paidXmr} XMR</div>
                </div>
-                <div className="flex items-center justify-between gap-6 border-t border-stroke py-5">
-                  <dt className="text-ink-soft">Rate</dt>
-                  <dd className="text-right font-medium">{exchangeRate ?? "-"}</dd>
-                </div>
-                <div className="flex items-center gap-6 border-t border-stroke py-5">
-                  <dt className="w-28 flex-none text-ink-soft sm:w-36">Destination</dt>
-                  <dd className="min-w-0 flex-1 truncate font-mono text-xs text-ink">
+              </div>
+
+              <div className="mt-7 flex flex-col gap-3 text-sm md:flex-row md:items-center">
+                <p className="font-semibold text-neutral-500 md:w-28">Destination</p>
+                <div className="flex min-w-0 items-center gap-2">
+                  <span className="min-w-0 truncate rounded-md bg-neutral-100 px-3 py-2 font-mono text-xs">
                    {invoice.address}
-                  </dd>
+                  </span>
+                  <CopyIconButton value={invoice.address} label="Copy destination address" />
                </div>
-              </dl>
-            </div>
+              </div>
+            </section>

            <div className="mt-10 flex justify-center">
-              {qrSrc ? (
-                // eslint-disable-next-line @next/next/no-img-element
-                <img
-                  alt="Payment QR"
-                  src={qrSrc}
-                  className="h-64 w-64 bg-white p-2 sm:h-72 sm:w-72"
-                />
-              ) : null}
+              <a
+                className="inline-flex items-center justify-center rounded-full border border-emerald-200 bg-white px-10 py-3 text-sm font-semibold text-emerald-700 shadow-soft transition hover:bg-emerald-50"
+                href={returnHref}
+                target={invoice.btcpay_redirect_url ? "_top" : undefined}
+                rel={invoice.btcpay_redirect_url ? "noreferrer" : undefined}
+              >
+                {returnLabel}
+              </a>
            </div>
-
-            <p className="mt-10 text-center text-sm text-ink-soft">
-              Powered by XMR Checkout
-            </p>
          </>
        )}
      </div>
@@ -0,0 +1,56 @@
+"use client";
+
+import { useState } from "react";
+
+type CopyIconButtonProps = {
+  value: string;
+  label: string;
+  className?: string;
+};
+
+export default function CopyIconButton({ value, label, className }: CopyIconButtonProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch {
+      setCopied(false);
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      title={copied ? "Copied" : label}
+      onClick={handleCopy}
+      className={
+        className ??
+        "inline-flex h-7 w-7 items-center justify-center rounded-md border border-neutral-200 bg-white text-neutral-600 transition hover:bg-neutral-50"
+      }
+    >
+      {copied ? (
+        <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M20 6 9 17l-5-5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      ) : (
+        <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
+          <path
+            d="M8 5h9a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M6 17H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      )}
+    </button>
+  );
+}
+
@@ -0,0 +1,21 @@
+"use client";
+
+type PrintButtonProps = {
+  className?: string;
+};
+
+export default function PrintButton({ className }: PrintButtonProps) {
+  return (
+    <button
+      type="button"
+      onClick={() => window.print()}
+      className={
+        className ??
+        "inline-flex items-center justify-center rounded-md border border-emerald-200 bg-white px-4 py-2 text-sm font-semibold text-emerald-600 transition hover:bg-emerald-50"
+      }
+    >
+      Print
+    </button>
+  );
+}
+