Align BTCPay receipt layout with reference

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

@@ -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">
+        <header className="text-center">
-          <a className={closeLinkClassName} href={`/i/${encodeURIComponent(invoiceId)}`}>
+          <h1 className="text-3xl font-semibold tracking-tight">{storeTitle}</h1>
-            Close
+        </header>
-          </a>
-        </div>
 
         {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">Order ID: {orderId}</p> : null}
-            {orderId ? <p className="mt-3 text-lg text-ink">Order ID: {orderId}</p> : null}
+            <p className="mt-1 text-base text-neutral-600" title={timestampRelative ?? undefined}>
-            <p className="mt-1 text-base text-ink-soft" 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">
+            <div className="mt-8 rounded-xl bg-white p-6 shadow-soft">
-              <h1 className="text-4xl font-semibold tracking-tight">{storeTitle}</h1>
+              <div className="grid gap-6 md:grid-cols-[auto_minmax(0,1fr)] md:items-start">
-              {orderId ? <p className="mt-3 text-lg text-ink">Order ID: {orderId}</p> : null}
+                <div className="rounded-lg bg-neutral-100 p-4">
-              <p className="mt-1 text-base text-ink-soft" title={timestampRelative ?? undefined}>
+                  {qrSrc ? (
-                {timestampLabel}
+                    // eslint-disable-next-line @next/next/no-img-element
-              </p>
+                    <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">
+            <section className="mt-8 rounded-xl bg-white p-6 shadow-soft">
-              <dl className="text-base">
+              <h2 className="text-xl font-semibold">Payment Details</h2>
-                <div className="flex items-center justify-between gap-6 py-5">
+
-                  <dt className="text-ink-soft">Total</dt>
+              <div className="mt-6 text-sm text-neutral-500">
-                  <dd className="text-right font-medium">{totalFiat ?? "-"}</dd>
+                <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">
+                <div className="grid grid-cols-3 gap-6 pt-4 text-neutral-900">
-                  <dt className="pt-0.5 text-ink-soft">Paid</dt>
+                  <div title={timestampRelative ?? undefined}>{timestampLabel}</div>
-                  <dd className="text-right">
+                  <div className="text-right">{totalFiat ?? "-"}</div>
-                    <div className="font-medium">{paidXmr} XMR</div>
+                  <div className="text-right">{paidXmr} XMR</div>
-                    {totalFiat ? <div className="mt-2 text-ink-soft">{totalFiat}</div> : null}
-                  </dd>
                 </div>
-                <div className="flex items-center justify-between gap-6 border-t border-stroke py-5">
+              </div>
-                  <dt className="text-ink-soft">Rate</dt>
+
-                  <dd className="text-right font-medium">{exchangeRate ?? "-"}</dd>
+              <div className="mt-7 flex flex-col gap-3 text-sm md:flex-row md:items-center">
-                </div>
+                <p className="font-semibold text-neutral-500 md:w-28">Destination</p>
-                <div className="flex items-center gap-6 border-t border-stroke py-5">
+                <div className="flex min-w-0 items-center gap-2">
-                  <dt className="w-28 flex-none text-ink-soft sm:w-36">Destination</dt>
+                  <span className="min-w-0 truncate rounded-md bg-neutral-100 px-3 py-2 font-mono text-xs">
-                  <dd className="min-w-0 flex-1 truncate font-mono text-xs text-ink">
                     {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 ? (
+              <a
-                // eslint-disable-next-line @next/next/no-img-element
+                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"
-                <img
+                href={returnHref}
-                  alt="Payment QR"
+                target={invoice.btcpay_redirect_url ? "_top" : undefined}
-                  src={qrSrc}
+                rel={invoice.btcpay_redirect_url ? "noreferrer" : undefined}
-                  className="h-64 w-64 bg-white p-2 sm:h-72 sm:w-72"
+              >
-                />
+                {returnLabel}
-              ) : null}
+              </a>
             </div>
-
-            <p className="mt-10 text-center text-sm text-ink-soft">
-              Powered by XMR Checkout
-            </p>
           </>
         )}
       </div>

ui/components/copy-icon-button.tsx

@@ -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>
+  );
+}
+

ui/components/print-button.tsx

@@ -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>
+  );
+}
+