@dev.smartpricing/message-composer-utils 3.1.2

package/src/utils/templates/email-mjml.ts

@@ -0,0 +1,602 @@
+import type {
+  EmailMessage,
+  EmailBlock,
+  EmailGlobalSettings,
+  SpacerBlock,
+  DividerBlock,
+  HeadingBlock,
+  ParagraphBlock,
+  ImageBlock,
+  ButtonBlock,
+  GridBlock,
+  RawHtmlBlock,
+  DiscountBlock,
+  HeaderBlock,
+  FooterBlock,
+  UnsubscribeLinkBlock,
+  SocialsBlock,
+  TopProductsBlock,
+  GridAllowedBlock,
+  SocialPlatform,
+} from "../../types/index.js";
+import { SOCIAL_ICONS, SOCIAL_PLATFORMS } from "../../types/index.js";
+
+// Default internal horizontal padding for text blocks (heading, paragraph, footer, unsubscribe_link)
+const TEXT_HORIZONTAL_PADDING = 25;
+
+import { generateHTML } from "@tiptap/html";
+import type { JSONContent } from "@tiptap/core";
+import { getTipTapExtensions } from "./tiptap.js";
+import { generateText } from "./messages.js";
+
+/**
+ * Converts TipTap JSONContent to HTML for email rendering
+ */
+function generateEmailHtml(content: JSONContent | undefined): string {
+  if (!content) return "";
+  return generateHTML(content, getTipTapExtensions({ preset: "email" }));
+}
+
+/**
+ * Escapes special characters for XML/MJML attributes
+ */
+function escapeXmlAttribute(value: string | undefined): string {
+  if (value === undefined || value === null) {
+    return "";
+  }
+  return value
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;");
+}
+
+/**
+ * Translates a spacer block to MJML
+ */
+function translateSpacerBlock(
+  block: SpacerBlock,
+  settings: EmailGlobalSettings,
+): string {
+  const bgColor =
+    block.settings.backgroundColor === "#FFFFFF00"
+      ? ""
+      : ` container-background-color="${escapeXmlAttribute(block.settings.backgroundColor)}"`;
+  const hPad = settings.horizontalSpacing ?? 0;
+
+  return `<mj-spacer height="${block.settings.height}px" padding="0px ${hPad}px"${bgColor} />`;
+}
+
+/**
+ * Translates a divider block to MJML
+ */
+function translateDividerBlock(
+  block: DividerBlock,
+  settings: EmailGlobalSettings,
+): string {
+  const bgColor =
+    block.settings.backgroundColor === "#FFFFFF00"
+      ? ""
+      : ` container-background-color="${escapeXmlAttribute(block.settings.backgroundColor)}"`;
+  const hPad = settings.horizontalSpacing ?? 0;
+
+  return `<mj-divider
+    border-style="${block.settings.style}"
+    border-width="${block.settings.thickness}px"
+    width="${block.settings.width}%"
+    border-color="${escapeXmlAttribute(block.settings.color)}"
+    padding="0px ${hPad}px"${bgColor} />`;
+}
+
+/**
+ * Translates a heading block to MJML
+ */
+function translateHeadingBlock(
+  block: HeadingBlock,
+  settings: EmailGlobalSettings,
+): string {
+  const html = generateEmailHtml(block.settings.content);
+  const bgColor =
+    block.settings.backgroundColor === "#FFFFFF00"
+      ? ""
+      : ` container-background-color="${escapeXmlAttribute(block.settings.backgroundColor)}"`;
+
+  const textColor = block.settings.textColor ?? settings.textColor;
+  const fontFamily = block.settings.fontFamily ?? settings.fontFamily;
+  const hPad = TEXT_HORIZONTAL_PADDING + (settings.horizontalSpacing ?? 0);
+
+  return `<mj-text
+    font-family="${escapeXmlAttribute(fontFamily)}"
+    font-size="${block.settings.fontSize}px"
+    color="${escapeXmlAttribute(textColor)}"
+    padding="0px ${hPad}px"${bgColor}>
+    <${block.settings.tag} style="font-size: ${block.settings.fontSize}px">${html}</${block.settings.tag}>
+  </mj-text>`;
+}
+
+/**
+ * Translates a paragraph block to MJML
+ */
+function translateParagraphBlock(
+  block: ParagraphBlock,
+  settings: EmailGlobalSettings,
+): string {
+  const html = generateEmailHtml(block.settings.content);
+
+  const bgColor =
+    block.settings.backgroundColor === "#FFFFFF00"
+      ? ""
+      : ` container-background-color="${escapeXmlAttribute(block.settings.backgroundColor)}"`;
+
+  const textColor = block.settings.textColor ?? settings.textColor;
+  const fontFamily = block.settings.fontFamily ?? settings.fontFamily;
+  const hPad = TEXT_HORIZONTAL_PADDING + (settings.horizontalSpacing ?? 0);
+
+  return `<mj-text
+    font-family="${escapeXmlAttribute(fontFamily)}"
+    font-size="${block.settings.fontSize}px"
+    color="${escapeXmlAttribute(textColor)}"
+    padding="0px ${hPad}px"${bgColor}>
+    <${block.settings.tag} style="font-size: ${block.settings.fontSize}px">${html}</${block.settings.tag}>
+  </mj-text>`;
+}
+
+/**
+ * Translates an image block to MJML
+ */
+function translateImageBlock(
+  block: ImageBlock,
+  settings: EmailGlobalSettings,
+): string {
+  const href = block.settings.href
+    ? ` href="${escapeXmlAttribute(block.settings.href)}"`
+    : "";
+  const hPad = settings.horizontalSpacing ?? 0;
+
+  return `<mj-image src="${escapeXmlAttribute(block.settings.src)}"${href} padding="0px ${hPad}px" />`;
+}
+
+/**
+ * Translates a button block to MJML
+ */
+function translateButtonBlock(
+  block: ButtonBlock,
+  settings: EmailGlobalSettings,
+): string {
+  const html = generateText(block.settings.content!, "email_v1");
+
+  const borderRadius =
+    block.settings.shape === "square"
+      ? "0px"
+      : block.settings.shape === "rounded"
+        ? "4px"
+        : "50px";
+
+  const widthAttr =
+    block.settings.width === "full_width" ? ' width="100%"' : "";
+
+  const bgBlock =
+    block.settings.backgroundBlock === "#FFFFFF00"
+      ? ""
+      : ` container-background-color="${escapeXmlAttribute(block.settings.backgroundBlock)}"`;
+
+  // Prepend mailto: or tel: based on linkType
+  let href = block.settings.url;
+  if (block.settings.linkType === "email" && !href.startsWith("mailto:")) {
+    href = `mailto:${href}`;
+  } else if (block.settings.linkType === "phone" && !href.startsWith("tel:")) {
+    href = `tel:${href}`;
+  }
+
+  const textColor =
+    block.settings.textColor ?? settings.button?.textColor ?? "#FFFFFF";
+  const backgroundColor =
+    block.settings.backgroundColor ??
+    settings.button?.backgroundColor ??
+    "#000000";
+
+  const fontFamily = block.settings.fontFamily ?? settings.fontFamily;
+
+  const hPad = settings.horizontalSpacing ?? 0;
+
+  return `<mj-button
+    href="${escapeXmlAttribute(href)}"
+    font-family="${escapeXmlAttribute(fontFamily)}"
+    font-size="${block.settings.fontSize}px"
+    color="${escapeXmlAttribute(textColor)}"
+    background-color="${escapeXmlAttribute(backgroundColor)}"
+    border-radius="${borderRadius}"${widthAttr}
+    align="${block.settings.alignment}"
+    padding="0px ${hPad}px"${bgBlock}>
+    ${html}
+  </mj-button>`;
+}
+
+/**
+ * Translates a grid block to MJML (multi-column section)
+ */
+function translateGridBlock(
+  block: GridBlock,
+  settings: EmailGlobalSettings,
+  sectionPadding: string,
+): string {
+  const columnWidth = `${100 / block.settings.columns}%`;
+
+  const columns = block.settings.columnData
+    .map(
+      (col) => `
+    <mj-column width="${columnWidth}">
+      ${col.blocks.map((b) => translateContentBlockToMjml(b, settings)).join("\n      ")}
+    </mj-column>`,
+    )
+    .join("");
+
+  const bgColor =
+    block.settings.backgroundColor === "#FFFFFF00"
+      ? ""
+      : ` background-color="${escapeXmlAttribute(block.settings.backgroundColor)}"`;
+
+  return `<mj-section padding="${sectionPadding}"${bgColor}>
+${columns}
+  </mj-section>`;
+}
+
+/**
+ * Translates a raw HTML block to MJML
+ */
+function translateRawHtmlBlock(block: RawHtmlBlock): string {
+  return `<mj-raw>${block.settings.html}</mj-raw>`;
+}
+
+/**
+ * Translates a discount block to MJML
+ */
+function translateDiscountBlock(
+  block: DiscountBlock,
+  settings: EmailGlobalSettings,
+): string {
+  const html = generateEmailHtml(block.settings.content);
+
+  const borderRadius =
+    block.settings.style === "square"
+      ? "0px"
+      : block.settings.style === "rounded"
+        ? "4px"
+        : "50px";
+
+  const widthAttr =
+    block.settings.width === "full_width" ? " width: 100%;" : "";
+
+  const bgBlock =
+    block.settings.backgroundBlock === "#FFFFFF00"
+      ? ""
+      : ` container-background-color="${escapeXmlAttribute(block.settings.backgroundBlock)}"`;
+
+  const textColor = block.settings.textColor ?? settings.textColor;
+  const fontFamily = block.settings.fontFamily ?? settings.fontFamily;
+
+  const hPad = settings.horizontalSpacing ?? 0;
+
+  return `<mj-text
+    font-family="${escapeXmlAttribute(fontFamily)}"
+    font-size="${block.settings.fontSize}px"
+    color="${escapeXmlAttribute(textColor)}"
+    align="center"
+    padding="0px ${hPad}px"${bgBlock}>
+    <${block.settings.tag}
+		style="
+		font-size: ${block.settings.fontSize}px;
+		border-radius: ${borderRadius};
+		padding: 12px 0px;
+		background-color: ${escapeXmlAttribute(block.settings.backgroundComponent)};
+		text-align: center; ${widthAttr}"
+		>${html}</${block.settings.tag}>
+  </mj-text>`;
+}
+
+/**
+ * Translates a header block to MJML
+ */
+function translateHeaderBlock(
+  block: HeaderBlock,
+  settings: EmailGlobalSettings,
+): string {
+  const bgColor =
+    block.settings.backgroundColor === "#FFFFFF00"
+      ? ""
+      : ` container-background-color="${escapeXmlAttribute(block.settings.backgroundColor)}"`;
+  const hPad = settings.horizontalSpacing ?? 0;
+
+  return `<mj-image
+    src="${escapeXmlAttribute(block.settings.src)}"
+    alt="${escapeXmlAttribute(block.settings.alt)}"
+    width="${block.settings.width}px"
+    align="${block.settings.alignment}"
+    padding="0px ${hPad}px"${bgColor} />`;
+}
+
+/**
+ * Translates a footer block to MJML
+ */
+function translateFooterBlock(
+  block: FooterBlock,
+  settings: EmailGlobalSettings,
+): string {
+  const html = generateEmailHtml(block.settings.content);
+
+  const bgColor =
+    block.settings.backgroundColor === "#FFFFFF00"
+      ? ""
+      : ` container-background-color="${escapeXmlAttribute(block.settings.backgroundColor)}"`;
+
+  const textColor = block.settings.textColor ?? settings.textColor;
+  const fontFamily = block.settings.fontFamily ?? settings.fontFamily;
+
+  const hPad = TEXT_HORIZONTAL_PADDING + (settings.horizontalSpacing ?? 0);
+
+  return `<mj-text
+    font-family="${escapeXmlAttribute(fontFamily)}"
+    font-size="${block.settings.fontSize}px"
+    color="${escapeXmlAttribute(textColor)}"
+    padding="0px ${hPad}px"${bgColor}>
+    ${html}
+  </mj-text>`;
+}
+
+/**
+ * Translates an unsubscribe link block to MJML
+ */
+function translateUnsubscribeLinkBlock(
+  block: UnsubscribeLinkBlock,
+  settings: EmailGlobalSettings,
+): string {
+  const html = generateEmailHtml(block.settings.content);
+
+  const bgColor =
+    block.settings.backgroundColor === "#FFFFFF00"
+      ? ""
+      : ` container-background-color="${escapeXmlAttribute(block.settings.backgroundColor)}"`;
+
+  const textColor = block.settings.textColor ?? settings.textColor;
+  const fontFamily = block.settings.fontFamily ?? settings.fontFamily;
+
+  const hPad = TEXT_HORIZONTAL_PADDING + (settings.horizontalSpacing ?? 0);
+
+  return `<mj-text
+    font-family="${escapeXmlAttribute(fontFamily)}"
+    font-size="${block.settings.fontSize}px"
+    color="${escapeXmlAttribute(textColor)}"
+    align="${block.settings.alignment}"
+    padding="0px ${hPad}px"${bgColor}>
+    ${html}
+  </mj-text>`;
+}
+
+/**
+ * Translates a socials block to MJML
+ */
+function translateSocialsBlock(
+  block: SocialsBlock,
+  settings: EmailGlobalSettings,
+): string {
+  const bgColor =
+    block.settings.backgroundColor === "#FFFFFF00"
+      ? ""
+      : ` container-background-color="${escapeXmlAttribute(block.settings.backgroundColor)}"`;
+
+  const enabledSocials = SOCIAL_PLATFORMS.filter(
+    (platform: SocialPlatform) => block.settings.socials[platform].enabled,
+  );
+
+  const socialIconsHtml = enabledSocials
+    .filter((platform: SocialPlatform) => {
+      const url = block.settings.socials[platform].url;
+      return url && url.trim() !== "";
+    })
+    .map((platform: SocialPlatform) => {
+      const url = escapeXmlAttribute(block.settings.socials[platform].url);
+      const icon = SOCIAL_ICONS[platform];
+      return `<a href="${url}" target="_blank" rel="noopener noreferrer" style="display:inline-block;margin:0 4px;"><img src="${icon}" alt="${platform}" width="24" height="24" style="border:0;display:inline-block;" /></a>`;
+    })
+    .join("");
+
+  const hPad = settings.horizontalSpacing ?? 0;
+
+  return `<mj-text align="center" padding="0px ${hPad}px"${bgColor}>
+    ${socialIconsHtml}
+  </mj-text>`;
+}
+
+/**
+ * Translates a top products block to MJML
+ * Products are pre-fetched during compilation enrichment
+ */
+function translateTopProductsBlock(
+  block: TopProductsBlock,
+  settings: EmailGlobalSettings,
+): string {
+  const products = block._products;
+  if (!products || products.length === 0) return "";
+
+  const fontFamily = settings.fontFamily || "Arial";
+  const displayProducts = products.slice(0, block.settings.maxProducts);
+
+  const productSections = displayProducts
+    .map((product) => {
+      const parsed = parseFloat(product.price);
+      const showPrice =
+        product.price &&
+        product.price !== "0" &&
+        !isNaN(parsed) &&
+        parsed !== 0;
+      const priceHtml = showPrice
+        ? `<mj-text align="left" font-family="${escapeXmlAttribute(fontFamily)}" font-size="10px" line-height="16px" color="#86837C" padding="0px">${escapeXmlAttribute(product.price)}</mj-text>`
+        : "";
+
+      return `<mj-section background-color="#FFFFFF" padding="4px" border-radius="12px" border="2px solid #F1F0EF">
+      <mj-group>
+        <mj-column width="30%">
+          <mj-image padding="0px" border-radius="4px" src="${escapeXmlAttribute(product.image)}" alt="${escapeXmlAttribute(product.name)}" href="${escapeXmlAttribute(product.link)}" />
+        </mj-column>
+        <mj-column width="70%" padding="8px">
+          <mj-text padding="0px" align="left" font-family="${escapeXmlAttribute(fontFamily)}" font-size="12px" line-height="18px" font-weight="500" color="#292826" height="55px">${escapeXmlAttribute(product.name)}</mj-text>
+          ${priceHtml}
+        </mj-column>
+      </mj-group>
+    </mj-section>`;
+    })
+    .join("\n");
+
+  return `<mj-wrapper padding="24px" background-color="${escapeXmlAttribute(block.settings.backgroundColor)}">
+    ${productSections}
+  </mj-wrapper>`;
+}
+
+/**
+ * Translates a single content block to MJML (non-grid blocks only)
+ * These are components that go inside mj-column
+ */
+function translateContentBlockToMjml(
+  block: GridAllowedBlock,
+  settings: EmailGlobalSettings,
+): string {
+  switch (block.type) {
+    case "discount":
+      return translateDiscountBlock(block, settings);
+    case "heading":
+      return translateHeadingBlock(block, settings);
+    case "paragraph":
+      return translateParagraphBlock(block, settings);
+    case "image":
+      return translateImageBlock(block, settings);
+    case "button":
+      return translateButtonBlock(block, settings);
+    default:
+      return "";
+  }
+}
+
+/**
+ * Translates a block to MJML section(s)
+ * Grid blocks become multi-column sections
+ * Other blocks are wrapped in single-column sections
+ */
+function translateBlockToSection(
+  block: EmailBlock,
+  settings: EmailGlobalSettings,
+  isFirst: boolean,
+): string {
+  const { verticalSpacing = 0 } = settings;
+  const paddingTop = isFirst ? 0 : verticalSpacing;
+  const sectionPadding = `${paddingTop}px 0px 0px 0px`;
+
+  // Wrap single blocks in a section with one column
+  let content = "";
+  switch (block.type) {
+    case "spacer":
+      content = translateSpacerBlock(block, settings);
+      break;
+    case "divider":
+      content = translateDividerBlock(block, settings);
+      break;
+    case "heading":
+      content = translateHeadingBlock(block, settings);
+      break;
+    case "paragraph":
+      content = translateParagraphBlock(block, settings);
+      break;
+    case "image":
+      content = translateImageBlock(block, settings);
+      break;
+    case "button":
+      content = translateButtonBlock(block, settings);
+      break;
+    case "discount":
+      content = translateDiscountBlock(block, settings);
+      break;
+    case "header":
+      content = translateHeaderBlock(block, settings);
+      break;
+    case "raw_html":
+      return translateRawHtmlBlock(block);
+    case "grid":
+      return translateGridBlock(block, settings, sectionPadding);
+    case "footer":
+      content = translateFooterBlock(block, settings);
+      break;
+    case "unsubscribe_link":
+      content = translateUnsubscribeLinkBlock(block, settings);
+      break;
+    case "socials":
+      content = translateSocialsBlock(block, settings);
+      break;
+    case "top_products":
+      return translateTopProductsBlock(block, settings);
+    default:
+      return "";
+  }
+
+  return `<mj-section padding="${sectionPadding}">
+    <mj-column>
+      ${content}
+    </mj-column>
+  </mj-section>`;
+}
+
+/**
+ * Generates MJML head section with global settings
+ */
+function generateMjmlHead(settings: EmailGlobalSettings): string {
+  const fontFamily = settings.fontFamily || "Arial";
+  const textColor = settings.textColor || "#1F2937";
+
+  return `<mj-head>
+    <mj-attributes>
+      <mj-text font-family="${escapeXmlAttribute(fontFamily)}" color="${escapeXmlAttribute(textColor)}" padding="0" />
+      <mj-all font-family="${escapeXmlAttribute(fontFamily)}" />
+      <mj-wrapper padding="0" />
+      <mj-section padding="0" />
+      <mj-image padding="0" />
+      <mj-button padding="0" />
+    </mj-attributes>
+    <mj-style>
+      h1, h2, h3, h4, h5, h6 {
+        font-weight: normal;
+      }
+      .tiptap-emoji img {
+        height: 1em !important;
+        width: 1em !important;
+        vertical-align: middle !important;
+      }
+    </mj-style>
+  </mj-head>`;
+}
+
+/**
+ * Translates an EmailMessage to MJML format
+ *
+ * @param message - The email message to translate
+ * @returns MJML string ready for compilation
+ */
+export function translateEmailToMjml(message: EmailMessage): string {
+  const { blocks, settings } = message.body;
+
+  const sections = blocks
+    .map((block, index) =>
+      translateBlockToSection(block, settings, index === 0),
+    )
+    .join("\n      ");
+
+  // Apply defaults for potentially undefined settings
+  const contentBackgroundColor = settings.contentBackgroundColor || "#FFFFFF";
+  const _backgroundColor = settings.backgroundColor || "#F3F4F6";
+  const contentWidth = settings.contentWidth || 600;
+  return `<mjml>
+  ${generateMjmlHead(settings)}
+  <mj-body background-color="${escapeXmlAttribute(contentBackgroundColor)}" width="${contentWidth}px">
+
+    ${sections}
+  </mj-body>
+</mjml>`;
+}