Fix broken email-preview rendering, add payment status to order list, second sample state

- LiveEmailPreviewClient.tsx rendered the email HTML (a full <body>... fragment) via dangerouslySetInnerHTML into a plain div, nesting it inside the page's own already-existing <body> — invalid HTML the browser silently mangled. Switched to an <iframe srcDoc>, giving the email its own real document context, exactly like an actual email client would render it. - Added SAMPLE_ORDER_MANUAL + a toggle in the preview so both order-confirmation states (paid vs. Vorkasse/Überweisung, incl. the new "switch to Kreditkarte/PayPal" mention) are actually visible in the admin's Live Preview — SAMPLE_ORDER alone always had isManualPayment: false, so the Vorkasse branch was never previewable at all before this. - /konto/bestellungen (the order list, not just the single-order detail page) now also shows the payment status badge next to the existing fulfillment status one — CustomerOrder was missing paymentStatus entirely.
2026-07-30 09:56:06 +00:00
parent 0e995884a7
commit 6448c8736a
4 changed files with 83 additions and 3 deletions
@@ -6,6 +6,7 @@ import { Footer } from "../../components/Footer";
 import { formatPrice, formatDate } from "../../lib/format";
 import { getSessionCustomer, getCustomerOrders } from "../../lib/customerAuth";
 import { OrderStatusBadge } from "../components/OrderStatusBadge";
+import { PaymentStatusBadge } from "../components/PaymentStatusBadge";
 import { LogoutButton } from "../components/LogoutButton";

 // robots: noindex — account area, same reasoning as /checkout.
@@ -61,6 +62,10 @@ export default async function KontoBestellungenPage() {
                    <p className="text-label text-text-muted">Status</p>
                    <OrderStatusBadge status={order.status} />
                  </div>
+                  <div className="flex flex-col gap-1">
+                    <p className="text-label text-text-muted">Zahlungsstatus</p>
+                    <PaymentStatusBadge paymentStatus={order.paymentStatus} />
+                  </div>
                  <div className="flex flex-col gap-1 ml-auto">
                    <p className="text-label text-text-muted">Gesamtbetrag</p>
                    <p className="font-bold text-body-sm text-text-primary">{formatPrice(order.total)}</p>