diff --git a/app/email-preview/[type]/components/LiveEmailPreviewClient.tsx b/app/email-preview/[type]/components/LiveEmailPreviewClient.tsx index 7f26de2..807050d 100644 --- a/app/email-preview/[type]/components/LiveEmailPreviewClient.tsx +++ b/app/email-preview/[type]/components/LiveEmailPreviewClient.tsx @@ -1,5 +1,6 @@ "use client"; +import { useState } from "react"; import { useLivePreview } from "@payloadcms/live-preview-react"; import { renderOrderConfirmationHtml, @@ -7,6 +8,7 @@ import { renderOrderStatusHtml, ORDER_STATUS_EMAIL_ICON, SAMPLE_ORDER, + SAMPLE_ORDER_MANUAL, type EmailTemplateContent, } from "../../../lib/emailTemplates"; import type { EmailTemplateType } from "../../../lib/payload"; @@ -34,13 +36,19 @@ export function LiveEmailPreviewClient({ depth: 0, }); + // Only order-confirmation has two meaningfully different rendered + // states (isManualPayment true/false change which blocks show at all, + // not just text) — every other type has one sample and no toggle. + const [sampleVariant, setSampleVariant] = useState<"paid" | "manual">("paid"); + const orderSample = sampleVariant === "paid" ? SAMPLE_ORDER : SAMPLE_ORDER_MANUAL; + // No real company-settings fetch in this preview context — passing null // falls back to DEFAULT_LEGAL_FOOTER_LINES (placeholder Anbieterkennzeichnung) // inside buildLegalFooterLines(), same shape as the real send just with // placeholder business data. const html = type === "order-confirmation" - ? renderOrderConfirmationHtml(data, SAMPLE_ORDER, null) + ? renderOrderConfirmationHtml(data, orderSample, null) : type === "password-reset" ? renderPasswordResetHtml(data, "https://einfach-produktiv.mk360.de/konto/passwort-zuruecksetzen?token=beispiel-token", null) : renderOrderStatusHtml( @@ -53,7 +61,54 @@ export function LiveEmailPreviewClient({ return (
-
+ {type === "order-confirmation" && ( +
+ + +
+ )} + {/* An iframe, not dangerouslySetInnerHTML into a plain div — `html` + here is a full `...` fragment (see emailTemplates.ts's + emailShell()), meant to become an actual email document. Dropped + directly into this page's own already-existing via + dangerouslySetInnerHTML, that's a nested tag — invalid + HTML the browser "fixes" unpredictably, which is why this preview + used to render broken (wrong background/padding/font, inline + styles not applying). An iframe gives the email HTML its own + real document, exactly like an actual email client would. */} +