feat: add public payment invoice flow

src/app/payment/[id]/page.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
+import { PublicPaymentLayout } from "@/components/payment/PublicPaymentLayout";
+import {
+  PaymentInvoiceSummary,
+  type InvoiceData,
+} from "@/components/payment/PaymentInvoiceSummary";
+import { InvalidInvoiceState } from "@/components/payment/InvalidInvoiceState";
+import { Button } from "@/components/ui/button";
+import { Loader2 } from "lucide-react";
+
+// Mock API service to fetch invoice by ID
+const fetchMockInvoice = async (id: string): Promise<InvoiceData> => {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      if (id === "invalid") {
+        resolve({
+          id,
+          merchantName: "Unknown",
+          description: "",
+          amount: 0,
+          tokenSymbol: "USDC",
+          status: "invalid",
+        });
+      } else if (id === "expired") {
+        resolve({
+          id,
+          merchantName: "Acme Corp",
+          description: "Software Services",
+          amount: 150.0,
+          tokenSymbol: "USDC",
+          status: "expired",
+        });
+      } else {
+        // Default valid mock invoice
+        resolve({
+          id,
+          merchantName: "DripWave Studios",
+          description: "Freelance Design Work",
+          amount: 50.0,
+          tokenSymbol: "USDC",
+          status: "valid",
+        });
+      }
+    }, 1500); // 1.5s simulated network delay
+  });
+};
+
+export default function PublicPaymentPage() {
+  const params = useParams();
+  const invoiceId = params?.id as string;
+
+  const [invoice, setInvoice] = useState<InvoiceData | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!invoiceId) return;
+
+    setLoading(true);
+    fetchMockInvoice(invoiceId)
+      .then((data) => {
+        setInvoice(data);
+      })
+      .catch(() => {
+        setInvoice(null);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [invoiceId]);
+
+  return (
+    <PublicPaymentLayout>
+      {loading ? (
+        <div className="flex flex-col items-center justify-center p-12 space-y-4">
+          <Loader2 className="size-8 animate-spin text-primary" />
+          <p className="text-sm text-muted-foreground">
+            Loading invoice details...
+          </p>
+        </div>
+      ) : !invoice || invoice.status === "invalid" || invoice.status === "expired" ? (
+        <InvalidInvoiceState
+          message={
+            invoice?.status === "expired"
+              ? "This payment link has expired."
+              : "This payment link is invalid or has expired."
+          }
+        />
+      ) : (
+        <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
+          <PaymentInvoiceSummary invoice={invoice} />
+
+          {/* Placeholder for actual payment mechanism */}
+          <div className="rounded-xl border bg-card p-6 shadow-sm">
+            <h3 className="font-semibold mb-4 text-center">
+              Select Payment Method
+            </h3>
+            <Button className="w-full" size="lg">
+              Connect Wallet to Pay
+            </Button>
+          </div>
+        </div>
+      )}
+    </PublicPaymentLayout>
+  );
+}

src/components/payment/InvalidInvoiceState.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+
+interface InvalidInvoiceStateProps {
+  title?: string;
+  message?: string;
+}
+
+export function InvalidInvoiceState({
+  title = "Invoice Not Available",
+  message = "This payment link is invalid or has expired.",
+}: InvalidInvoiceStateProps) {
+  return (
+    <div className="rounded-xl border border-destructive/20 bg-destructive/5 p-8 flex flex-col items-center text-center space-y-5">
+      <div className="size-14 rounded-full bg-destructive/10 flex items-center justify-center">
+        <AlertCircle className="size-7 text-destructive" />
+      </div>
+      <div className="space-y-2">
+        <h2 className="text-xl font-semibold text-foreground tracking-tight">
+          {title}
+        </h2>
+        <p className="text-sm text-muted-foreground">{message}</p>
+      </div>
+      <div className="pt-4 w-full">
+        <Button asChild variant="outline" className="w-full">
+          <Link href="/">Try Another Reference</Link>
+        </Button>
+      </div>
+    </div>
+  );
+}

src/components/payment/PaymentInvoiceSummary.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import Image from "next/image";
+
+export interface InvoiceData {
+  id: string;
+  merchantName: string;
+  merchantLogo?: string;
+  description: string;
+  amount: number;
+  tokenSymbol: string;
+  status: "valid" | "expired" | "invalid";
+}
+
+interface PaymentInvoiceSummaryProps {
+  invoice: InvoiceData;
+}
+
+export function PaymentInvoiceSummary({ invoice }: PaymentInvoiceSummaryProps) {
+  return (
+    <div className="rounded-xl border bg-card text-card-foreground shadow-sm overflow-hidden">
+      <div className="p-8 flex flex-col items-center text-center space-y-5">
+        {invoice.merchantLogo ? (
+          <div className="size-16 rounded-full overflow-hidden bg-muted border flex items-center justify-center">
+            <Image
+              src={invoice.merchantLogo}
+              alt={invoice.merchantName}
+              width={64}
+              height={64}
+              className="object-cover"
+            />
+          </div>
+        ) : (
+          <div className="size-16 rounded-full bg-primary/10 flex items-center justify-center border border-primary/20">
+            <span className="text-2xl font-bold text-primary">
+              {invoice.merchantName.charAt(0).toUpperCase()}
+            </span>
+          </div>
+        )}
+
+        <div className="space-y-1">
+          <h2 className="text-xl font-semibold tracking-tight">
+            {invoice.merchantName}
+          </h2>
+          <p className="text-sm text-muted-foreground">{invoice.description}</p>
+        </div>
+
+        <div className="pt-2 pb-2">
+          <div className="text-5xl font-bold tracking-tighter flex items-baseline justify-center gap-2">
+            {invoice.amount.toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })}
+            <span className="text-2xl font-medium text-muted-foreground">
+              {invoice.tokenSymbol}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/payment/PublicPaymentLayout.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Image from "next/image";
+
+export function PublicPaymentLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="min-h-screen bg-neutral-50 flex flex-col items-center px-4 py-12 sm:px-6 md:px-12">
+      <header className="w-full max-w-md mb-8 flex items-center justify-center">
+        <div className="flex items-center gap-2">
+          <Image
+            src="/shade_logo_transparent.png"
+            alt="Shade Logo"
+            width={32}
+            height={32}
+            className="shrink-0"
+          />
+          <span className="font-bold text-xl text-foreground tracking-tight">
+            Shade
+          </span>
+        </div>
+      </header>
+      <main className="w-full max-w-md">{children}</main>
+    </div>
+  );
+}