Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
2026-04-18 17:51:54 +00:00
parent 417068af7d
commit 29b1ef6e5f
4 changed files with 617 additions and 0 deletions
@@ -0,0 +1,128 @@
+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 { Badge } from "@/components/ui/badge";
+import { CheckCircle2, CreditCard, XCircle } from "lucide-react";
+import { formatCurrency } from "@/lib/format";
+import { getPublicPaymentRequest } from "@/lib/payments.functions";
+import { Scale } from "lucide-react";
+
+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">
+          <Scale className="h-6 w-6 text-primary" />
+          <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);
+
+  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>
+
+      {row.stripe_checkout_url ? (
+        <Button
+          className="w-full"
+          size="lg"
+          onClick={() => {
+            window.location.href = row.stripe_checkout_url!;
+          }}
+        >
+          Pay {formatCurrency(row.total_amount_cents / 100)} with card
+        </Button>
+      ) : (
+        <Badge variant="outline">Checkout link unavailable</Badge>
+      )}
+
+      {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>
+  );
+}