import { defineRouteConfig } from "@medusajs/admin-sdk" import { CircleStackSolid, PencilSquare, EyeMini } from "@medusajs/icons" import { Container, Heading, Button, Text, toast, FocusModal, Input, Label } from "@medusajs/ui" import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query" import { useState, useRef, useEffect, useCallback } from "react" import { sdk } from "../../lib/sdk" import { showConfirm } from "../../lib/confirm" import { isDevOnlyFeaturesEnabled } from "../../lib/feature-flags" export const config = isDevOnlyFeaturesEnabled ? defineRouteConfig({ label: "adminRoutes.emailTemplates.layouts", translationNs: "translation", icon: CircleStackSolid, rank: 31, }) : undefined type Layout = { id: string; key: string; name: string; description: string | null; is_active: boolean; updated_at?: string } const DEFAULT_LAYOUT_HTML = `

biomket

{{{body}}}

Biomket — B2B Organic Waste Marketplace
info@biomket.com

` export default function EmailLayoutsPage() { // Hide entire route in production if (!isDevOnlyFeaturesEnabled) { return null } const qc = useQueryClient() const [createOpen, setCreateOpen] = useState(false) const [editLayout, setEditLayout] = useState(null) const [form, setForm] = useState({ key: "", name: "", description: "", html_content: DEFAULT_LAYOUT_HTML }) const [mode, setMode] = useState<"edit" | "preview">("edit") const previewRef = useRef(null) const previewHtml = useCallback(() => { const placeholder = `

📄

Email Template Content

This is where your template content will be injected via the {{{body}}} placeholder.

` // Ensure we handle layout content even if it's currently empty or missing the placeholder const content = form.html_content || "" if (content.includes("{{{body}}}")) { return content.replace("{{{body}}}", placeholder) } // Fallback if placeholder is missing, just show the content + a warning at top return `

⚠️ Missing {{{body}}} placeholder! Template content will not be injected.

${content} ` }, [form.html_content]) useEffect(() => { if (mode === "preview" && previewRef.current) { const html = previewHtml() const blob = new Blob([html], { type: "text/html" }) const url = URL.createObjectURL(blob) previewRef.current.src = url return () => URL.revokeObjectURL(url) } }, [mode, previewHtml]) const { data, isLoading } = useQuery({ queryKey: ["email-layouts"], queryFn: async () => { const r = await sdk.fetch("/admin/email-layouts") if (!r.ok) throw new Error("Failed") return r.json() as Promise<{ layouts: Layout[]; count: number }> }, }) const saveMutation = useMutation({ mutationFn: async () => { const url = editLayout ? `/admin/email-layouts/${editLayout.id}` : "/admin/email-layouts" console.log("Saving email layout to:", url) console.log("Form data:", form) const r = await sdk.fetch(url, { method: "POST", body: JSON.stringify(form), headers: { "Content-Type": "application/json" }, }) console.log("Response status:", r.status) if (!r.ok) { const errorText = await r.text() console.error("Save error:", errorText) throw new Error(errorText) } const result = await r.json() console.log("Save result:", result) return result }, onSuccess: () => { console.log("Save success, invalidating queries") qc.invalidateQueries({ queryKey: ["email-layouts"] }) toast.success(editLayout ? "Layout updated!" : "Layout created!") setCreateOpen(false) setEditLayout(null) setForm({ key: "", name: "", description: "", html_content: DEFAULT_LAYOUT_HTML }) }, onError: (e) => { console.error("Save mutation error:", e) toast.error((e as Error).message) }, }) const deleteMutation = useMutation({ mutationFn: async (id: string) => { const r = await sdk.fetch(`/admin/email-layouts/${id}`, { method: "DELETE" }) if (!r.ok) throw new Error(await r.text()) }, onSuccess: () => { qc.invalidateQueries({ queryKey: ["email-layouts"] }); toast.success("Layout deleted") }, onError: (e) => toast.error((e as Error).message), }) const openEdit = (l: Layout) => { setEditLayout(l) setForm({ key: l.key, name: l.name, description: l.description || "", html_content: "" }) // Load full layout sdk.fetch(`/admin/email-layouts/${l.id}`).then((r) => r.json()).then((d: { layout: Layout & { html_content: string } }) => { setForm((f) => ({ ...f, html_content: d.layout.html_content })) }) setCreateOpen(true) } const layouts = data?.layouts ?? [] return (

Email Layouts Base HTML wrappers shared across templates. Must contain {"{{{body}}}"} placeholder.

{isLoading &&

} {!isLoading && layouts.length === 0 && ( No layouts yet. Create one to share branding across templates. )} {!isLoading && layouts.length > 0 && (

{layouts.map((l) => (

{l.name} Key: {l.key}{l.description ? ` · ${l.description}` : ""}

))}

)} {/* Create/Edit Modal */} { setCreateOpen(open); if (!open) setEditLayout(null) }}>

{editLayout ? `Edit: ${editLayout.name}` : "New Layout"}

Layout Key * setForm({ ...form, key: e.target.value })} />

Name * setForm({ ...form, name: e.target.value })} />

Description setForm({ ...form, description: e.target.value })} />

HTML Content (must contain {"{{{body}}}"})

{mode === "edit" ? (

ℹ️ Use {"{{{body}}}"} where template content will be injected.