@markopolo_ai_inc/markopolo-email-editor 1.0.3

package/src/pages/Dashboard/Header.js

@@ -0,0 +1,192 @@
+import { useState } from "react";
+import { Modal, Button } from "antd";
+import en from "../../components/EmailEditor/translation/en";
+import zh from "../../components/EmailEditor/translation/zh";
+import { validateExportPayload } from "../../components/EmailEditor/utils/exportValidation";
+
+const Header = (props) => {
+  const { emailEditorEl, setLanguage, language = "en" } = props;
+  const langLib = language === "zh" ? zh : en;
+  const t = (key) => langLib[key] || key;
+
+  const [validationModalOpen, setValidationModalOpen] = useState(false);
+  const [validationIssues, setValidationIssues] = useState([]);
+  const [pendingExportType, setPendingExportType] = useState(null); // "json" | "html"
+
+  const getPayload = () => {
+    const blockList = emailEditorEl.current?.blockList ?? [];
+    const bodySettings = emailEditorEl.current?.bodySettings ?? null;
+    return { blockList, bodySettings };
+  };
+
+  const doExportHTML = () => {
+    const html = emailEditorEl.current?.exportHtml?.();
+    if (html == null) return;
+    const blob = new Blob([html], { type: "text/html" });
+    const a = document.createElement("a");
+    a.download = "email.html";
+    a.href = URL.createObjectURL(blob);
+    a.click();
+  };
+
+  const doExportJSON = () => {
+    const { blockList, bodySettings } = getPayload();
+    const payload = bodySettings ? { blockList, bodySettings } : blockList;
+    const json = JSON.stringify(payload, null, 2);
+    const blob = new Blob([json], { type: "application/json" });
+    const a = document.createElement("a");
+    a.download = "email-template.json";
+    a.href = URL.createObjectURL(blob);
+    a.click();
+  };
+
+  const runExportOrShowValidation = (exportType) => {
+    const payload = getPayload();
+    const issues = validateExportPayload(payload);
+    if (issues.length === 0) {
+      if (exportType === "html") doExportHTML();
+      else doExportJSON();
+      return;
+    }
+    setValidationIssues(issues);
+    setPendingExportType(exportType);
+    setValidationModalOpen(true);
+  };
+
+  const closeValidationModal = () => {
+    setValidationModalOpen(false);
+    setValidationIssues([]);
+    setPendingExportType(null);
+  };
+
+  const handleExportAnyway = () => {
+    if (pendingExportType === "html") doExportHTML();
+    else if (pendingExportType === "json") doExportJSON();
+    closeValidationModal();
+  };
+
+  const errors = validationIssues.filter((i) => i.severity === "error");
+  const warnings = validationIssues.filter((i) => i.severity === "warning");
+  const infos = validationIssues.filter((i) => i.severity === "info");
+
+  // Reserved for language switcher UI
+  // eslint-disable-next-line no-unused-vars
+  const changeLanguage = (language) => () => {
+    setLanguage(language);
+  };
+
+  return (
+    <div className="dashboard-header">
+      <div className="dashboard-header-title">
+        Markopolo Email Template Editor
+      </div>
+      <div className="dashboard-header-feature">
+        <button
+          className="dashboard-header-subtitle"
+          onClick={() => runExportOrShowValidation("json")}
+        >
+          {t("export_json")}
+        </button>
+        <button
+          className="dashboard-header-subtitle"
+          onClick={() => runExportOrShowValidation("html")}
+        >
+          {t("export_html")}
+        </button>
+      </div>
+
+      <Modal
+        className="ee-modal-dark"
+        title={t("export_validation_title")}
+        open={validationModalOpen}
+        onCancel={closeValidationModal}
+        footer={[
+          <Button key="cancel" onClick={closeValidationModal}>
+            {t("cancel")}
+          </Button>,
+          <Button key="export" type="primary" onClick={handleExportAnyway}>
+            {t("export_anyway")}
+          </Button>,
+        ]}
+        width={520}
+      >
+        <p style={{ marginBottom: 12 }}>
+          {t("export_validation_issues_found")}
+        </p>
+        <div style={{ maxHeight: 360, overflowY: "auto" }}>
+          {errors.length > 0 && (
+            <div style={{ marginBottom: 12 }}>
+              <div
+                className="export-validation-errors-heading"
+                style={{ fontWeight: 600, marginBottom: 6 }}
+              >
+                {t("export_validation_errors")} ({errors.length})
+              </div>
+              <ul style={{ margin: 0, paddingLeft: 20 }}>
+                {errors.map((issue, idx) => (
+                  <li key={`e-${idx}`} style={{ marginBottom: 4 }}>
+                    {t("validation_" + issue.code) || issue.message}
+                    {issue.location && (
+                      <span className="export-validation-location" style={{ fontSize: 12 }}>
+                        {" "}
+                        — {issue.location}
+                      </span>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+          {warnings.length > 0 && (
+            <div style={{ marginBottom: 12 }}>
+              <div
+                className="export-validation-warnings-heading"
+                style={{ fontWeight: 600, marginBottom: 6 }}
+              >
+                {t("export_validation_warnings")} ({warnings.length})
+              </div>
+              <ul style={{ margin: 0, paddingLeft: 20 }}>
+                {warnings.map((issue, idx) => (
+                  <li key={`w-${idx}`} style={{ marginBottom: 4 }}>
+                    {t("validation_" + issue.code) || issue.message}
+                    {issue.location && (
+                      <span className="export-validation-location" style={{ fontSize: 12 }}>
+                        {" "}
+                        — {issue.location}
+                      </span>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+          {infos.length > 0 && (
+            <div>
+              <div
+                className="export-validation-info-heading"
+                style={{ fontWeight: 600, marginBottom: 6 }}
+              >
+                {t("export_validation_info")} ({infos.length})
+              </div>
+              <ul style={{ margin: 0, paddingLeft: 20 }}>
+                {infos.map((issue, idx) => (
+                  <li key={`i-${idx}`} style={{ marginBottom: 4 }}>
+                    {t("validation_" + issue.code) || issue.message}
+                    {issue.location && (
+                      <span className="export-validation-location" style={{ fontSize: 12 }}>
+                        {" "}
+                        — {issue.location}
+                      </span>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default Header;