mylegal-stage-law/src/routes/pay.$id.tsx

import { createFileRoute, useSearch } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { CheckCircle2, CreditCard, XCircle, Loader2 } from "lucide-react";
import { formatCurrency } from "@/lib/format";
import { getPublicPaymentRequest, startPublicCheckout } from "@/lib/payments.functions";
import { JusticeIcon } from "@/components/justice-icon";
import { toast } from "sonner";

export const Route = createFileRoute("/pay/$id")({
  validateSearch: (s: Record<string, unknown>) => ({
    status: typeof s.status === "string" ? (s.status as string) : undefined,
  }),
  loader: async ({ params }) => {
    return getPublicPaymentRequest({ data: { id: params.id } });
  },
  component: PayPage,
  errorComponent: () => (
    <Shell>
      <p className="text-center text-muted-foreground">Payment request not found.</p>
    </Shell>
  ),
});

function Shell({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen bg-muted/30 flex items-center justify-center p-6">
      <div className="w-full max-w-lg">
        <div className="flex items-center justify-center gap-2 mb-6">
          <JusticeIcon className="h-6 w-6" />
          <span className="font-serif text-xl">Stage Law Firm, PLLC</span>
        </div>
        <Card className="border-border/60">
          <CardContent className="p-6">{children}</CardContent>
        </Card>
      </div>
    </div>
  );
}

function PayPage() {
  const data = Route.useLoaderData();
  const search = useSearch({ from: "/pay/$id" });
  const [row, setRow] = useState(data);
  const [starting, setStarting] = useState(false);

  useEffect(() => {
    setRow(data);
  }, [data]);

  if (search.status === "success" || row.status === "paid") {
    return (
      <Shell>
        <div className="text-center py-4">
          <CheckCircle2 className="h-14 w-14 text-success mx-auto mb-3" />
          <h1 className="font-serif text-2xl mb-1">Payment received</h1>
          <p className="text-sm text-muted-foreground mb-4">
            Thank you, {row.recipient_name}. Your payment of{" "}
            <strong>{formatCurrency(row.total_amount_cents / 100)}</strong> has been received.
          </p>
        </div>
      </Shell>
    );
  }

  if (row.status === "canceled") {
    return (
      <Shell>
        <div className="text-center py-4">
          <XCircle className="h-14 w-14 text-destructive mx-auto mb-3" />
          <h1 className="font-serif text-2xl mb-1">Payment canceled</h1>
          <p className="text-sm text-muted-foreground">
            This payment request is no longer active. Please contact our office.
          </p>
        </div>
      </Shell>
    );
  }

  return (
    <Shell>
      <div className="text-center mb-5">
        <CreditCard className="h-10 w-10 text-primary mx-auto mb-2" />
        <h1 className="font-serif text-2xl">Payment request</h1>
        <p className="text-sm text-muted-foreground">For {row.recipient_name}</p>
      </div>

      {row.description && (
        <p className="text-sm bg-muted/40 rounded-md p-3 mb-4">{row.description}</p>
      )}

      <div className="space-y-1 text-sm border rounded-md p-3 mb-5">
        <div className="flex justify-between">
          <span className="text-muted-foreground">Amount</span>
          <span className="tabular-nums">{formatCurrency(row.base_amount_cents / 100)}</span>
        </div>
        <div className="flex justify-between">
          <span className="text-muted-foreground">Processing fee</span>
          <span className="tabular-nums">{formatCurrency(row.fee_amount_cents / 100)}</span>
        </div>
        <div className="flex justify-between font-semibold border-t pt-2 mt-2 text-base">
          <span>Total</span>
          <span className="tabular-nums">{formatCurrency(row.total_amount_cents / 100)}</span>
        </div>
      </div>

      <Button
        className="w-full"
        size="lg"
        disabled={starting}
        onClick={async () => {
          setStarting(true);
          try {
            const res = await startPublicCheckout({ data: { id: row.id } });
            window.location.href = res.checkout_url;
          } catch (e: any) {
            setStarting(false);
            toast.error("Could not start checkout", {
              description: e?.message ?? "Please try again in a moment.",
            });
          }
        }}
      >
        {starting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
        Pay {formatCurrency(row.total_amount_cents / 100)} with card
      </Button>

      {search.status === "cancel" && (
        <p className="text-xs text-muted-foreground text-center mt-3">
          Payment was not completed. You can try again above.
        </p>
      )}
    </Shell>
  );
}