diff --git a/src/actions/__tests__/email-actions.test.js b/src/actions/__tests__/email-actions.test.js index 8431c6a0f..7a3fd5cc9 100644 --- a/src/actions/__tests__/email-actions.test.js +++ b/src/actions/__tests__/email-actions.test.js @@ -18,8 +18,7 @@ import { normalizeRenderErrors } from "../email-actions"; import * as methods from "../../utils/methods"; - -jest.mock("../../history", () => ({ push: jest.fn() })); +import history from "../../history"; jest.mock("openstack-uicore-foundation/lib/utils/actions", () => ({ __esModule: true, @@ -34,6 +33,11 @@ jest.mock("../marketing-actions", () => ({ saveMarketingSetting: jest.fn() })); +jest.mock("../../history", () => ({ + __esModule: true, + default: { push: jest.fn() } +})); + const requestMock = (requestActionCreator, receiveActionCreator) => () => (dispatch) => { if (requestActionCreator && typeof requestActionCreator === "function") { @@ -85,6 +89,7 @@ describe("saveEmailTemplate", () => { jest.spyOn(methods, "getAccessTokenSafely").mockResolvedValue("TOKEN"); postRequest.mockImplementation(requestMock); putRequest.mockImplementation(requestMock); + history.push.mockClear(); }); afterEach(() => { @@ -113,6 +118,14 @@ describe("saveEmailTemplate", () => { actionTypes.indexOf("TEMPLATE_ADDED") ); }); + + it("navigates to the new template's edit route using the server-assigned id", async () => { + const store = mockStore({}); + store.dispatch(saveEmailTemplate({ identifier: "test-template" })); + await flushPromises(); + + expect(history.push).toHaveBeenCalledWith("/app/emails/templates/1"); + }); }); describe("update path (entity has id)", () => { @@ -137,6 +150,14 @@ describe("saveEmailTemplate", () => { actionTypes.indexOf("TEMPLATE_UPDATED") ); }); + + it("does not navigate away", async () => { + const store = mockStore({}); + store.dispatch(saveEmailTemplate({ id: 1, identifier: "test-template" })); + await flushPromises(); + + expect(history.push).not.toHaveBeenCalled(); + }); }); }); diff --git a/src/components/forms/__tests__/email-template-form.test.js b/src/components/forms/__tests__/email-template-form.test.js index a90b57e15..beb1cbf9b 100644 --- a/src/components/forms/__tests__/email-template-form.test.js +++ b/src/components/forms/__tests__/email-template-form.test.js @@ -8,21 +8,25 @@ import { afterEach } from "@jest/globals"; import { render, act, fireEvent } from "@testing-library/react"; +import showConfirmDialog from "openstack-uicore-foundation/lib/components/mui/show-confirm-dialog"; +import mjml2html from "mjml-browser"; import EmailTemplateForm from "../email-template-form"; -// Mock heavy children that don't matter for the effect logic under test. jest.mock("@uiw/react-codemirror", () => ({ __esModule: true, default: () => null })); -jest.mock("sweetalert2", () => ({ - __esModule: true, - default: { fire: jest.fn(() => Promise.resolve({})) } -})); +jest.mock( + "openstack-uicore-foundation/lib/components/mui/show-confirm-dialog", + () => ({ + __esModule: true, + default: jest.fn(() => Promise.resolve(true)) + }) +); jest.mock("mjml-browser", () => ({ __esModule: true, - default: () => ({ html: "" }) + default: jest.fn(() => ({ html: "" })) })); jest.mock("../../inputs/email-template-input", () => ({ __esModule: true, @@ -31,7 +35,6 @@ jest.mock("../../inputs/email-template-input", () => ({ const baseProps = (entity) => ({ entity, - match: { params: { template_id: `${entity.id}` } }, errors: {}, clients: [], preview: null, @@ -62,7 +65,10 @@ const htmlEntity = { }; describe("EmailTemplateForm preview dispatch", () => { - beforeEach(() => jest.useFakeTimers()); + beforeEach(() => { + jest.useFakeTimers(); + showConfirmDialog.mockResolvedValue(true); + }); afterEach(() => { jest.runOnlyPendingTimers(); jest.useRealTimers(); @@ -108,14 +114,13 @@ describe("EmailTemplateForm preview dispatch", () => { await act(async () => { jest.advanceTimersByTime(600); }); - // initial MJML-mode request expect(sharedRender).toHaveBeenLastCalledWith( mjProps.templateJsonData, mjmlEntity.mjml_content, true ); - // simulate in-place navigation to a DIFFERENT (HTML) template on the SAME form instance + // navigate to a different template on the same form instance (no remount) const htmlProps = { ...baseProps(htmlEntity), renderEmailTemplate: sharedRender @@ -125,7 +130,6 @@ describe("EmailTemplateForm preview dispatch", () => { jest.advanceTimersByTime(600); }); - // FIX: mode must re-init to HTML and send isMjml=false (pre-fix this stays true / sends mjml_content) expect(sharedRender).toHaveBeenLastCalledWith( htmlProps.templateJsonData, htmlEntity.html_content, @@ -135,9 +139,8 @@ describe("EmailTemplateForm preview dispatch", () => { it("re-fires the HTML-mode preview when toggled from MJML to HTML", async () => { const props = baseProps(mjmlEntity); - const { getByDisplayValue } = render(); + const { getByText } = render(); - // initial mount → one MJML-mode request await act(async () => { jest.advanceTimersByTime(600); }); @@ -148,17 +151,14 @@ describe("EmailTemplateForm preview dispatch", () => { true ); - // click the "switch to HTML" button — button-only mode toggle, - // mutates neither content field directly // T.translate returns the key string when no i18n config is loaded await act(async () => { - fireEvent.click(getByDisplayValue("emails.display_html")); + fireEvent.click(getByText("emails.display_html")); }); await act(async () => { jest.advanceTimersByTime(600); }); - // the HTML-mode effect re-fires with isMjml=false expect(props.renderEmailTemplate).toHaveBeenCalledTimes(2); expect(props.renderEmailTemplate).toHaveBeenLastCalledWith( props.templateJsonData, @@ -166,4 +166,272 @@ describe("EmailTemplateForm preview dispatch", () => { false ); }); + + it("warns before switching to MJML on an HTML-only template and keeps the switch on confirm", async () => { + showConfirmDialog.mockResolvedValue(true); + const props = baseProps(htmlEntity); + const { getByText } = render(); + + await act(async () => { + jest.advanceTimersByTime(600); + }); + + await act(async () => { + fireEvent.click(getByText("emails.display_mjml")); + }); + + expect(showConfirmDialog).toHaveBeenCalledWith( + expect.objectContaining({ + text: "emails.mjml_warning", + iconType: "warning" + }) + ); + + expect(getByText("emails.display_html")).toBeTruthy(); + }); + + it("reverts to HTML mode when the MJML switch warning is cancelled", async () => { + showConfirmDialog.mockResolvedValue(false); + const props = baseProps(htmlEntity); + const { getByText } = render(); + + await act(async () => { + jest.advanceTimersByTime(600); + }); + + await act(async () => { + fireEvent.click(getByText("emails.display_mjml")); + }); + + expect(getByText("emails.display_mjml")).toBeTruthy(); + }); + + it("does not preview or compile the empty mjml_content while the switch warning is still pending", async () => { + let resolveConfirm; + showConfirmDialog.mockReturnValue( + new Promise((resolve) => { + resolveConfirm = resolve; + }) + ); + const props = baseProps(htmlEntity); + const { getByText } = render(); + + await act(async () => { + jest.advanceTimersByTime(600); + }); + props.renderEmailTemplate.mockClear(); + + fireEvent.click(getByText("emails.display_mjml")); + await act(async () => { + jest.advanceTimersByTime(600); + }); + + // the dialog hasn't resolved yet -- mode must still be HTML, so no + // preview request went out for the (empty) mjml_content + expect(props.renderEmailTemplate).not.toHaveBeenCalled(); + expect(getByText("emails.display_mjml")).toBeTruthy(); + + await act(async () => { + resolveConfirm(true); + }); + }); + + it("does not attempt to compile mjml on a bare mode switch with unchanged (empty) content", async () => { + const props = baseProps(htmlEntity); + const { getByText } = render(); + + await act(async () => { + jest.advanceTimersByTime(600); + }); + mjml2html.mockClear(); + + await act(async () => { + fireEvent.click(getByText("emails.display_mjml")); + }); + + // switching modes alone must not attempt a compile of the unchanged, + // still-empty mjml_content -- doing so would leave a stale + // mjmlRenderError behind after switching back to HTML + expect(mjml2html).not.toHaveBeenCalled(); + }); +}); + +describe("EmailTemplateForm submit", () => { + beforeEach(() => { + jest.useFakeTimers(); + showConfirmDialog.mockResolvedValue(true); + }); + afterEach(() => { + jest.runOnlyPendingTimers(); + jest.useRealTimers(); + jest.clearAllMocks(); + }); + + it("submits the current entity and disables the Save button while saving, blocking a double submit", async () => { + let resolveSave; + const onSubmit = jest.fn( + () => + new Promise((resolve) => { + resolveSave = resolve; + }) + ); + const props = { ...baseProps(htmlEntity), onSubmit }; + const { getByRole } = render(); + + await act(async () => { + jest.advanceTimersByTime(600); + }); + + const saveButton = getByRole("button", { name: "general.save" }); + fireEvent.click(saveButton); + + expect(onSubmit).toHaveBeenCalledTimes(1); + expect(onSubmit).toHaveBeenCalledWith( + expect.objectContaining({ id: htmlEntity.id }) + ); + expect(saveButton).toBeDisabled(); + + fireEvent.click(saveButton); + expect(onSubmit).toHaveBeenCalledTimes(1); + + await act(async () => { + resolveSave(); + }); + }); + + it("re-enables the Save button after a rejected save", async () => { + const onSubmit = jest.fn(() => Promise.reject(new Error("save failed"))); + const props = { ...baseProps(htmlEntity), onSubmit }; + const { getByRole } = render(); + + await act(async () => { + jest.advanceTimersByTime(600); + }); + + const saveButton = getByRole("button", { name: "general.save" }); + + await act(async () => { + fireEvent.click(saveButton); + }); + + expect(saveButton).not.toBeDisabled(); + }); +}); + +describe("EmailTemplateForm responsive preview scale", () => { + let offsetWidthSpy; + + beforeEach(() => { + jest.useFakeTimers(); + showConfirmDialog.mockResolvedValue(true); + offsetWidthSpy = jest + .spyOn(HTMLElement.prototype, "offsetWidth", "get") + .mockReturnValue(800); + }); + + afterEach(() => { + jest.runOnlyPendingTimers(); + jest.useRealTimers(); + jest.clearAllMocks(); + offsetWidthSpy.mockRestore(); + }); + + it("recovers to full scale once the preview container widens after an early narrow measurement", async () => { + offsetWidthSpy.mockReturnValue(400); + const props = baseProps(htmlEntity); + const { container } = render(); + + await act(async () => { + jest.advanceTimersByTime(600); + }); + + expect(container.querySelector("iframe").style.transform).toBe( + "scale(0.5)" + ); + + offsetWidthSpy.mockReturnValue(800); + await act(async () => { + window.dispatchEvent(new Event("resize")); + }); + + expect(container.querySelector("iframe").style.transform).toBe("scale(1)"); + }); +}); + +describe("EmailTemplateForm pane width", () => { + beforeEach(() => { + jest.useFakeTimers(); + showConfirmDialog.mockResolvedValue(true); + }); + afterEach(() => { + jest.runOnlyPendingTimers(); + jest.useRealTimers(); + jest.clearAllMocks(); + }); + + it("splits code and preview 50/50, then gives the remaining pane full width when the other is collapsed", async () => { + const props = baseProps(htmlEntity); + const { container } = render(); + + await act(async () => { + jest.advanceTimersByTime(600); + }); + + expect(container.querySelector(".email-template-code").style.width).toBe( + "50%" + ); + expect(container.querySelector(".email-template-preview").style.width).toBe( + "50%" + ); + + fireEvent.click(container.querySelector("#code")); + + expect(container.querySelector(".email-template-preview")).toBeNull(); + expect(container.querySelector(".email-template-code").style.width).toBe( + "100%" + ); + }); +}); + +describe("EmailTemplateForm single-tab layout", () => { + const originalInnerWidth = window.innerWidth; + + beforeEach(() => { + jest.useFakeTimers(); + showConfirmDialog.mockResolvedValue(true); + }); + afterEach(() => { + jest.runOnlyPendingTimers(); + jest.useRealTimers(); + jest.clearAllMocks(); + Object.defineProperty(window, "innerWidth", { + configurable: true, + value: originalInnerWidth + }); + }); + + it("keeps the previously selected pane visible when narrowing into single-tab mode", async () => { + const props = baseProps(htmlEntity); + const { container } = render(); + + await act(async () => { + jest.advanceTimersByTime(600); + }); + + fireEvent.click(container.querySelector("#preview")); + expect(container.querySelector(".email-template-preview")).not.toBeNull(); + expect(container.querySelector(".email-template-code")).toBeNull(); + + Object.defineProperty(window, "innerWidth", { + configurable: true, + value: 500 + }); + await act(async () => { + window.dispatchEvent(new Event("resize")); + }); + + // neither pane must disappear -- the preview the user picked stays up + expect(container.querySelector(".email-template-preview")).not.toBeNull(); + expect(container.querySelector(".email-template-code")).toBeNull(); + }); }); diff --git a/src/components/forms/email-template-form.js b/src/components/forms/email-template-form.js index 7acba8e57..23e33c8d3 100644 --- a/src/components/forms/email-template-form.js +++ b/src/components/forms/email-template-form.js @@ -11,19 +11,21 @@ * limitations under the License. * */ -import React, { useState, useEffect, useRef } from "react"; +import React, { useState, useEffect, useMemo, useRef } from "react"; import T from "i18n-react/dist/i18n-react"; -import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css"; import debounce from "lodash/debounce"; -import AjaxLoader from "openstack-uicore-foundation/lib/components/ajaxloader"; -import Dropdown from "openstack-uicore-foundation/lib/components/inputs/dropdown"; -import Input from "openstack-uicore-foundation/lib/components/inputs/text-input"; +import Box from "@mui/material/Box"; +import Button from "@mui/material/Button"; +import Grid2 from "@mui/material/Grid2"; +import TextField from "@mui/material/TextField"; +import CircularProgress from "@mui/material/CircularProgress"; +import MuiDropdown from "openstack-uicore-foundation/lib/components/mui/dropdown"; import { epochToMomentTimeZone } from "openstack-uicore-foundation/lib/utils/methods"; import CodeMirror from "@uiw/react-codemirror"; import { sublimeInit } from "@uiw/codemirror-theme-sublime"; import { html } from "@codemirror/lang-html"; import mjml2html from "mjml-browser"; -import Swal from "sweetalert2"; +import showConfirmDialog from "openstack-uicore-foundation/lib/components/mui/show-confirm-dialog"; import EmailTemplateInput from "../inputs/email-template-input"; import { scrollToError, shallowEqual, hasErrors } from "../../utils/methods"; import "./email-template.less"; @@ -32,6 +34,101 @@ import { EMAIL_TEMPLATE_TYPE_MJML } from "../../utils/constants"; +const TemplateModeToggle = ({ mjmlEditor, onDisplayMjml, onDisplayHtml }) => + mjmlEditor ? ( + <> + +
+ + + ) : ( + <> + +
+ + + ); + +const VersionHistoryPicker = ({ + historyVersion, + versionsDdl, + currentVersionExternalLink, + onChange +}) => ( + + + +
+ + + {currentVersionExternalLink && ( + + + + + + )} + +); + +const CodeEditorPane = ({ width, id, value, onChange }) => ( +
+ +
+); + const default_mjml_content = ` ### Sample MJML Code @@ -49,7 +146,6 @@ const default_mjml_content = ` const EmailTemplateForm = ({ entity, - match, errors, clients, preview, @@ -62,7 +158,7 @@ const EmailTemplateForm = ({ }) => { const [stateEntity, setStateEntity] = useState({ ...entity }); const [stateErrors, setStateErrors] = useState(errors); - const [historyVersion, setHistoryVersion] = useState(null); + const [historyVersion, setHistoryVersion] = useState(""); const [currentVersionExternalLink, setCurrentVersionExternalLink] = useState(null); const [mjmlEditor, setMjmlEditor] = useState(null); @@ -75,8 +171,11 @@ const EmailTemplateForm = ({ const [previewLoaded, setPreviewLoaded] = useState(false); const [mjmlWarning, setMjmlWarning] = useState(false); const [mjmlRenderError, setMjmlRenderError] = useState(null); + const [isSaving, setIsSaving] = useState(false); const previewRef = useRef(null); + // undefined so the very first run below is always treated as a new entity + const loadedEntityIdRef = useRef(); const style = mobileView ? { width: "320px", height: "960px", transform: `scale(${scale})` } @@ -85,43 +184,34 @@ const EmailTemplateForm = ({ useEffect(() => { scrollToError(errors); - // check if the current entity is sync with template_id param - const templateId = match.params.template_id; - if ( - templateId === `${entity.id}` || - templateId === entity.identifier || - (entity.id === 0 && !templateId) - ) { - setTemplateLoaded(true); - } - if (!shallowEqual(stateErrors, errors)) { setStateErrors({ ...errors }); } - if (!shallowEqual(stateEntity, entity)) { - setStateEntity({ ...entity }); - } - }, [errors, entity]); + const isNewEntity = loadedEntityIdRef.current !== entity.id; + loadedEntityIdRef.current = entity.id; - useEffect(() => { - // if entity is correctly loaded, set state for entity use - if (templateLoaded) { - if (entity.id === 0) { - setStateEntity({ ...entity, mjml_content: default_mjml_content }); - } else { - setStateEntity({ ...entity }); - } + if (isNewEntity) { + // a fresh load, a route change to a different template, or the id the + // server assigns right after a successful create -- (re)seed local state + setStateEntity( + entity.id === 0 + ? { ...entity, mjml_content: default_mjml_content } + : { ...entity } + ); setStateErrors({}); setMjmlEditor( entity.mjml_content.length > 0 ? true : !entity.html_content ); + setTemplateLoaded(true); + } else if (!shallowEqual(stateEntity, entity)) { + setStateEntity({ ...entity }); } - }, [templateLoaded, entity.id]); + }, [errors, entity]); useEffect(() => { if (singleTab) { - setCodeOnly(true); + if (!previewOnly) setCodeOnly(true); } else { setCodeOnly(false); setPreviewOnly(false); @@ -131,78 +221,88 @@ const EmailTemplateForm = ({ const DEBOUNCE_MS = 500; const debouncedRenderTemplate = useRef( debounce(async (content, json_data, isMjml) => { - renderEmailTemplate(json_data, content, isMjml).then(() => { - // wait until first API email preview to display template on screen - if (!previewLoaded) setPreviewLoaded(true); - }); + renderEmailTemplate(json_data, content, isMjml) + .then(() => { + // wait until first API email preview to display template on screen + if (!previewLoaded) setPreviewLoaded(true); + }) + .catch(() => {}); }, DEBOUNCE_MS) ).current; - // MJML mode: send raw mjml_content so the API runs Jinja -> official MJML CLI - // (same pipeline as production). mjmlEditor is in the deps so a button-only - // mode switch re-fires this; the debounce coalesces with the HTML effect so - // only one preview request goes out per mode. - useEffect(() => { - if (templateLoaded && mjmlEditor) - debouncedRenderTemplate(stateEntity.mjml_content, templateJsonData, true); - }, [stateEntity.mjml_content, mjmlEditor, entity, templateJsonData]); - - // HTML mode: unchanged Jinja-on-HTML preview. Guarded on !mjmlEditor so it - // does not fire for MJML templates. - useEffect(() => { - if (templateLoaded && !mjmlEditor) - debouncedRenderTemplate( - stateEntity.html_content, - templateJsonData, - false - ); - }, [stateEntity.html_content, mjmlEditor, entity, templateJsonData]); + // MJML mode sends raw mjml_content so the API runs Jinja -> official MJML CLI + // (same pipeline as production); HTML mode sends html_content unchanged. + // mjmlEditor is in the deps so a button-only mode switch re-fires this with + // the other field's content. + const editorContent = mjmlEditor + ? stateEntity.mjml_content + : stateEntity.html_content; useEffect(() => { - if (mjmlEditor) { - try { - const htmlContent = mjml2html(stateEntity.mjml_content, { - validationLevel: "strict", - keepComments: false, - collapseWhitespace: true, - minifyOptions: { collapseWhitespace: false } - }).html; - setStateEntity({ ...stateEntity, html_content: htmlContent }); - setMjmlRenderError(null); - } catch (err) { - setMjmlRenderError(err); - } + if (templateLoaded) + debouncedRenderTemplate(editorContent, templateJsonData, mjmlEditor); + }, [editorContent, mjmlEditor, entity, templateJsonData, templateLoaded]); + + // pure compile step -- useMemo avoids re-running mjml2html on every render, + // the effect below only commits the already-computed result into state + const mjmlCompileResult = useMemo(() => { + if (!mjmlEditor) return null; + try { + const htmlContent = mjml2html(stateEntity.mjml_content, { + validationLevel: "strict", + keepComments: false, + collapseWhitespace: true, + minifyOptions: { collapseWhitespace: false } + }).html; + return { htmlContent, error: null }; + } catch (err) { + return { htmlContent: null, error: err }; } }, [stateEntity.mjml_content, historyVersion]); useEffect(() => { - if ( + if (!mjmlCompileResult) return; + setMjmlRenderError(mjmlCompileResult.error); + if (mjmlCompileResult.htmlContent !== null) { + setStateEntity({ + ...stateEntity, + html_content: mjmlCompileResult.htmlContent + }); + } + }, [mjmlCompileResult]); + + // gate the confirm dialog BEFORE flipping mjmlEditor -- flipping it first and + // asking after (the previous shape) let the preview/compile effects fire on + // the still-empty mjml_content while the dialog was still pending + const handleDisplayMjml = () => { + const needsMjmlWarning = entity.mjml_content.length === 0 && entity.html_content.length > 0 && - mjmlEditor && - !mjmlWarning - ) { - console.log("warning mjml"); - Swal.fire({ - title: T.translate("general.are_you_sure"), - text: T.translate("emails.mjml_warning"), - type: "warning", - confirmButtonColor: "#DD6B55", - confirmButtonText: T.translate("emails.understand") - }).then(() => { - setMjmlWarning(true); - }); + !mjmlWarning; + + if (!needsMjmlWarning) { + setMjmlEditor(true); + return; } - }, [mjmlEditor]); - const handleCodeMirrorHTMLChange = (value) => { - setStateErrors({ ...stateErrors, html_content: "" }); - setStateEntity({ ...stateEntity, html_content: value }); + showConfirmDialog({ + title: T.translate("general.are_you_sure"), + text: T.translate("emails.mjml_warning"), + iconType: "warning", + confirmButtonColor: "error", + confirmButtonText: T.translate("emails.understand") + }).then((confirmed) => { + if (confirmed) { + setMjmlWarning(true); + setMjmlEditor(true); + } + }); }; - const handleCodeMirrorMJMLChange = (value) => { - setStateErrors({ ...stateErrors, mjml_content: "" }); - setStateEntity({ ...stateEntity, mjml_content: value }); + const handleCodeMirrorChange = (value) => { + const field = mjmlEditor ? "mjml_content" : "html_content"; + setStateErrors({ ...stateErrors, [field]: "" }); + setStateEntity({ ...stateEntity, [field]: value }); }; const handleChange = (ev) => { @@ -220,9 +320,9 @@ const EmailTemplateForm = ({ setStateErrors({ ...stateErrors, [id]: "" }); }; - const handleSubmit = (ev) => { - ev.preventDefault(); - onSubmit(stateEntity); + const handleClientsChange = (ev) => { + setStateEntity({ ...stateEntity, allowed_clients: ev.target.value }); + setStateErrors({ ...stateErrors, allowed_clients: "" }); }; const handleJsonDataEdit = (ev) => { @@ -241,15 +341,16 @@ const EmailTemplateForm = ({ setSingleTab(false); } const currentPreviewWidth = previewRef?.current?.offsetWidth; - if (mobileView) { - if (currentPreviewWidth < MOBILE_PREVIEW_WIDTH) { - const newScale = currentPreviewWidth / MOBILE_PREVIEW_WIDTH; - setScale(newScale); - } - } else if (currentPreviewWidth < DESKTOP_PREVIEW_WIDTH) { - const newScale = currentPreviewWidth / DESKTOP_PREVIEW_WIDTH; - setScale(newScale); - } + if (!currentPreviewWidth) return; + const targetWidth = mobileView + ? MOBILE_PREVIEW_WIDTH + : DESKTOP_PREVIEW_WIDTH; + // always recompute the full ratio -- shrink to fit when the container is + // narrower than the target, but also grow back to 1 once there is room + // again (a narrow measurement early in the mount sequence must not + // permanently lock the preview at a reduced scale) + const newScale = Math.min(1, currentPreviewWidth / targetWidth); + setScale(newScale); }; const handleTabChange = (ev) => { @@ -277,14 +378,14 @@ const EmailTemplateForm = ({ const handleVersionChange = (ev) => { const { value } = ev.target; - if (value === null) { + if (!value) { // restore original version setStateEntity({ ...stateEntity, html_content: stateEntity.original_html_content, mjml_content: stateEntity.original_mjml_content }); - setHistoryVersion(null); + setHistoryVersion(""); setCurrentVersionExternalLink(null); return; } @@ -294,62 +395,137 @@ const EmailTemplateForm = ({ setCurrentVersionExternalLink(selectedHistory.html_url); if (selectedHistory.type === EMAIL_TEMPLATE_TYPE_HTML) { setMjmlEditor(false); - setStateEntity({ ...stateEntity, html_content: selectedHistory.content }); + setStateEntity({ + ...stateEntity, + html_content: selectedHistory.content + }); } if (selectedHistory.type === EMAIL_TEMPLATE_TYPE_MJML) { setMjmlEditor(true); - setStateEntity({ ...stateEntity, mjml_content: selectedHistory.content }); + setStateEntity({ + ...stateEntity, + mjml_content: selectedHistory.content + }); } }; const isTemplateInvalid = () => mjmlEditor && mjmlRenderError !== null; + // recompute whenever a layout-affecting toggle changes the preview + // container's rendered width (not just on an actual window resize) -- + // templateLoaded matters too: the preview container doesn't exist to + // measure until that first flips true useEffect(() => { handleResizeWindow(); - window.addEventListener("resize", handleResizeWindow); + }, [mobileView, templateLoaded, codeOnly, previewOnly, singleTab]); + + // bind the native listener once; the ref keeps it pointed at the latest + // closure so a real resize still sees current state without rebinding + const handleResizeWindowRef = useRef(handleResizeWindow); + handleResizeWindowRef.current = handleResizeWindow; + + useEffect(() => { + const onResize = () => handleResizeWindowRef.current(); + window.addEventListener("resize", onResize); return () => { - window.removeEventListener("resize", handleResizeWindow); + window.removeEventListener("resize", onResize); }; - }); + }, []); + + const handleSubmit = () => { + if (isSaving) return; + setIsSaving(true); + Promise.resolve(onSubmit(stateEntity)) + .catch(() => {}) + .finally(() => setIsSaving(false)); + }; const email_clients_ddl = clients ? clients.map((cli) => ({ label: cli.name, value: cli.id })) : []; const versions_ddl = stateEntity.versions - ? stateEntity.versions.map((v) => ({ - label: `${epochToMomentTimeZone(v.commit_date, "UTC").format( - "YYYY-MM-DD HH:mm z" - )} - ${v.sha} - ${v.commit_message}`, - value: v.sha - })) + ? [ + { value: "", label: T.translate("emails.current_version") }, + ...stateEntity.versions.map((v) => ({ + label: `${epochToMomentTimeZone(v.commit_date, "UTC").format( + "YYYY-MM-DD HH:mm z" + )} - ${v.sha} - ${v.commit_message}`, + value: v.sha + })) + ] : []; + const showCodeEditor = !previewOnly; + const showPreview = !codeOnly; + const codeWidth = codeOnly ? "100%" : "50%"; + const previewWidth = previewOnly ? "100%" : "50%"; + + const renderPreviewBody = () => { + if (renderErrors.length > 0) { + return ( + + {T.translate("emails.error_render_template")} +
    + {renderErrors.map((err) => ( +
  • {err}
    • + ))} +
+ + ); + } + if (mjmlRenderError?.message) { + return ( + + {T.translate("emails.error_render_template")} +
    +
  • {mjmlRenderError.message}
    • +
+ + ); + } + return ( + previewLoaded && ( +