Phase4: Stripe

src/components/billing/customer-invoice-detail.tsx

@@ -1,6 +1,8 @@
 import { useTranslations, useFormatter } from "next-intl";
 import { Card } from "@/components/ui/card";
 import type { Invoice, InvoiceLine } from "@/types";
+import { PayInvoiceButton } from "./pay-invoice-button";
+import { PaymentStatusBanner } from "./payment-status-banner";
 
 interface Props {
   invoice: Invoice;
@@ -29,6 +31,7 @@ export function CustomerInvoiceDetail({ invoice, lines }: Props) {
 
   return (
     <div className="space-y-6 animate-in">
+      <PaymentStatusBanner />
       <div className="flex items-start justify-between gap-4 flex-wrap">
         <div>
           <div className="flex items-center gap-3 mb-2">
@@ -49,14 +52,23 @@ export function CustomerInvoiceDetail({ invoice, lines }: Props) {
             {fmt.dateTime(new Date(invoice.periodEnd), { dateStyle: "long" })}
           </p>
         </div>
-        <a
-          href={`/api/billing/invoices/${encodeURIComponent(invoice.invoiceNumber)}/pdf`}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="px-4 py-2 rounded-md bg-accent text-white text-sm font-medium hover:bg-accent-dim transition-colors"
-        >
-          {t("downloadPdf")}
-        </a>
+        <div className="flex items-start gap-2 flex-wrap">
+          {/* Phase 4: Pay-with-card available for open + overdue.
+              Paid/void/draft/uncollectible hide the button — the
+              API also enforces this, so client-side hiding is just
+              for the visible affordance. */}
+          {(invoice.status === "open" || invoice.status === "overdue") && (
+            <PayInvoiceButton invoiceNumber={invoice.invoiceNumber} />
+          )}
+          <a
+            href={`/api/billing/invoices/${encodeURIComponent(invoice.invoiceNumber)}/pdf`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="px-4 py-2 rounded-md bg-surface-3 hover:bg-surface-2 border border-border text-sm font-medium transition-colors"
+          >
+            {t("downloadPdf")}
+          </a>
+        </div>
       </div>
 
       <Card>