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
@@ -464,6 +464,7 @@ export type CustomerOrder = {
  createdAt: string;
  total: number;
  status: string;
+  paymentStatus: "not_applicable" | "pending" | "paid" | "failed" | "refunded" | "partially_refunded";
  itemCount: number;
  /** Raw product relationship ids, in item order — depth=0 keeps them as
   * plain numbers, not populated objects. Callers resolve these to image
@@ -509,13 +510,21 @@ export async function getCustomerOrders(token: string, customerId: number, exclu
  });
  if (!res.ok) return [];
  const data: {
-    docs?: { orderNumber: string; createdAt: string; total: number; status: string; items: { product: number }[] }[];
+    docs?: {
+      orderNumber: string;
+      createdAt: string;
+      total: number;
+      status: string;
+      paymentStatus: CustomerOrder["paymentStatus"];
+      items: { product: number }[];
+    }[];
  } = await res.json();
  return (data.docs ?? []).map((doc) => ({
    orderNumber: doc.orderNumber,
    createdAt: doc.createdAt,
    total: doc.total,
    status: doc.status,
+    paymentStatus: doc.paymentStatus,
    itemCount: doc.items.length,
    productIds: doc.items.map((item) => item.product),
  }));
@@ -246,6 +246,17 @@ export const SAMPLE_ORDER: OrderConfirmationData = {
  isManualPayment: false,
 };

+// Second preview fixture — demonstrates the Vorkasse/Überweisung branch
+// (vorkasseNotice(), incl. the "switch to Kreditkarte/PayPal" mention)
+// that SAMPLE_ORDER's own isManualPayment: false never shows. Used by
+// LiveEmailPreviewClient.tsx's toggle, not by any real send — a real
+// order-confirmation email always computes both flags live per order.
+export const SAMPLE_ORDER_MANUAL: OrderConfirmationData = {
+  ...SAMPLE_ORDER,
+  isManualPayment: true,
+  hasOnlinePaymentOption: true,
+};
+
 export function renderOrderConfirmationHtml(template: EmailTemplateContent, order: OrderConfirmationData, seller: CompanySettings | null): string {
  const rows = order.items
    .map(