@dev.smartpricing/message-composer-utils 4.2.11-ux.0 → 4.2.11-ux.2

package/src/utils/templates/brand-cascade.ts

@@ -36,6 +36,11 @@ export function resolveEmailSettings(
   const brandSettings = brand?.default_email_settings ?? {};
   const brandButtons = brand?.default_button_settings ?? {};
 
+  const textColor =
+    settings.textColor ??
+    brandSettings.textColor ??
+    DEFAULT_EMAIL_GLOBAL_SETTINGS.textColor;
+
   return {
     backgroundColor:
       settings.backgroundColor ??
@@ -51,10 +56,11 @@ export function resolveEmailSettings(
       settings.fontFamily ??
       (brandSettings.fontFamily as typeof DEFAULT_EMAIL_GLOBAL_SETTINGS.fontFamily) ??
       DEFAULT_EMAIL_GLOBAL_SETTINGS.fontFamily,
-    textColor:
-      settings.textColor ??
-      brandSettings.textColor ??
-      DEFAULT_EMAIL_GLOBAL_SETTINGS.textColor,
+    textColor,
+    // No hardcoded blue: an unstyled link should just match the resolved
+    // text color (underline is what marks it as a link), not an arbitrary
+    // brand-less default.
+    linkColor: settings.linkColor ?? brandSettings.linkColor ?? textColor,
     verticalSpacing:
       settings.verticalSpacing ?? DEFAULT_EMAIL_GLOBAL_SETTINGS.verticalSpacing,
     horizontalSpacing:

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

@@ -0,0 +1,53 @@
+import { describe, it, expect } from "vitest";
+import { translateEmailToMjml } from "./email-mjml.js";
+import type { EmailMessage, ParagraphBlock } from "../../types/index.js";
+import { emptyParagraphBlock } from "../../types/index.js";
+
+function linkContent(text: string) {
+  return {
+    type: "doc",
+    content: [
+      {
+        type: "paragraph",
+        content: [
+          {
+            type: "text",
+            text,
+            marks: [{ type: "link", attrs: { href: "https://example.com" } }],
+          },
+        ],
+      },
+    ],
+  };
+}
+
+function messageWithParagraph(block: ParagraphBlock): EmailMessage {
+  return {
+    body: { subject: "Subject", blocks: [block], settings: {} },
+    metadata: {},
+  } as EmailMessage;
+}
+
+describe("translateEmailToMjml - link color", () => {
+  it("bakes the block's explicit linkColor as a literal inline style on <a>", () => {
+    const block = emptyParagraphBlock();
+    block.settings.content = linkContent("click here");
+    block.settings.linkColor = "#FF0000";
+
+    const mjml = translateEmailToMjml(messageWithParagraph(block));
+
+    expect(mjml).toContain('style="color: #FF0000;"');
+  });
+
+  it("falls back to the resolved global/brand linkColor when the block has none", () => {
+    const block = emptyParagraphBlock();
+    block.settings.content = linkContent("click here");
+
+    const message = messageWithParagraph(block);
+    message.body.settings.linkColor = "#00FF00";
+
+    const mjml = translateEmailToMjml(message);
+
+    expect(mjml).toContain('style="color: #00FF00;"');
+  });
+});

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

@@ -30,11 +30,20 @@ import { getTipTapExtensions, sanitizeContent } from "./tiptap.js";
 import { generateText } from "./messages.js";
 
 /**
- * Converts TipTap JSONContent to HTML for email rendering
+ * Converts TipTap JSONContent to HTML for email rendering.
+ * `linkColor`, when given, is baked as a literal inline style onto `<a>`
+ * tags (not a CSS var) — see docs/adr/0004 for why this compile path can't
+ * reuse the live-editor CSS custom property approach.
  */
-function generateEmailHtml(content: JSONContent | undefined): string {
+function generateEmailHtml(
+  content: JSONContent | undefined,
+  linkColor?: string,
+): string {
   if (!content) return "";
-  const extensions = getTipTapExtensions({ preset: "email" });
+  const extensions = getTipTapExtensions({
+    preset: "email",
+    linkColor: linkColor ? { mode: "compile", color: linkColor } : undefined,
+  });
   return generateHTML(sanitizeContent(content, extensions), extensions);
 }
 
@@ -97,7 +106,8 @@ function translateHeadingBlock(
   block: HeadingBlock,
   settings: EmailGlobalSettings,
 ): string {
-  const html = generateEmailHtml(block.settings.content);
+  const linkColor = block.settings.linkColor ?? settings.linkColor;
+  const html = generateEmailHtml(block.settings.content, linkColor);
   const bgColor =
     block.settings.backgroundColor === "#FFFFFF00"
       ? ""
@@ -123,7 +133,8 @@ function translateParagraphBlock(
   block: ParagraphBlock,
   settings: EmailGlobalSettings,
 ): string {
-  const html = generateEmailHtml(block.settings.content);
+  const linkColor = block.settings.linkColor ?? settings.linkColor;
+  const html = generateEmailHtml(block.settings.content, linkColor);
 
   const bgColor =
     block.settings.backgroundColor === "#FFFFFF00"
@@ -322,7 +333,8 @@ function translateFooterBlock(
   block: FooterBlock,
   settings: EmailGlobalSettings,
 ): string {
-  const html = generateEmailHtml(block.settings.content);
+  const linkColor = block.settings.linkColor ?? settings.linkColor;
+  const html = generateEmailHtml(block.settings.content, linkColor);
 
   const bgColor =
     block.settings.backgroundColor === "#FFFFFF00"
@@ -350,7 +362,8 @@ function translateUnsubscribeLinkBlock(
   block: UnsubscribeLinkBlock,
   settings: EmailGlobalSettings,
 ): string {
-  const html = generateEmailHtml(block.settings.content);
+  const linkColor = block.settings.linkColor ?? settings.linkColor;
+  const html = generateEmailHtml(block.settings.content, linkColor);
 
   const bgColor =
     block.settings.backgroundColor === "#FFFFFF00"

package/src/utils/templates/meta.ts

@@ -298,6 +298,7 @@ export function translateWhatsappToMeta(
   groupName: string,
   groupCategory: "marketing" | "utility",
   prefix: string,
+  metaLanguageCode: string,
 ): MetaTemplate {
   const components: MetaTemplate["components"] = [];
 
@@ -327,7 +328,7 @@ export function translateWhatsappToMeta(
     name:
       message.metadata?.meta?.template_name ||
       generateMetaTemplateName(groupName, message.language_id, prefix),
-    language: message.language_id,
+    language: metaLanguageCode,
     category: groupCategory.toUpperCase() as "MARKETING" | "UTILITY",
     parameter_format: "NAMED",
     allow_category_change: true,

package/src/utils/templates/tiptap.test.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect } from "vitest";
+import { buildLinkHTMLAttributes } from "./tiptap.js";
+
+describe("buildLinkHTMLAttributes", () => {
+  it("returns undefined when no link color option is given", () => {
+    expect(buildLinkHTMLAttributes(undefined)).toBeUndefined();
+  });
+
+  it("renders a CSS custom property in live mode", () => {
+    expect(buildLinkHTMLAttributes({ mode: "live" })).toEqual({
+      style: "color: var(--link-color);",
+    });
+  });
+
+  it("renders a literal hex in compile mode", () => {
+    expect(
+      buildLinkHTMLAttributes({ mode: "compile", color: "#2563EB" }),
+    ).toEqual({
+      style: "color: #2563EB;",
+    });
+  });
+});

package/src/utils/templates/tiptap.ts

@@ -14,6 +14,19 @@ import type { JSONContent } from "@tiptap/core";
 import { type RenderType, WA_BODY_MAX_LENGTH } from "../../types/index.js";
 import { generateHtml, generateText } from "./messages.js";
 
+/**
+ * How a link's color should be rendered:
+ * - "live": the color is driven by a `--link-color` CSS custom property set
+ *   on a wrapping element, so it updates without recreating the editor
+ *   instance. Used for the canvas preview and settings-panel editor.
+ * - "compile": a literal hex is baked into the inline style. Required for
+ *   the final email HTML — Outlook and other strict clients don't support
+ *   CSS custom properties. See docs/adr/0004.
+ */
+export type LinkColorOption =
+  | { mode: "live" }
+  | { mode: "compile"; color: string };
+
 export interface TipTapExtensionOptions {
   preset?: "whatsapp" | "whatsapp-header" | "email";
   bold?: boolean;
@@ -21,6 +34,7 @@ export interface TipTapExtensionOptions {
   emoji?: boolean;
   underline?: boolean;
   link?: boolean;
+  linkColor?: LinkColorOption;
   bulletList?: boolean;
   orderedList?: boolean;
   textAlign?: boolean;
@@ -30,6 +44,20 @@ export interface TipTapExtensionOptions {
   hardBreak?: boolean;
 }
 
+/**
+ * Builds the `style` HTMLAttributes for the TipTap Link mark from a
+ * LinkColorOption. Returns undefined when no color option is given, so the
+ * Link mark renders with no color styling (unchanged default behavior).
+ */
+export function buildLinkHTMLAttributes(
+  linkColor?: LinkColorOption,
+): Record<string, string> | undefined {
+  if (!linkColor) return undefined;
+  const color =
+    linkColor.mode === "live" ? "var(--link-color)" : linkColor.color;
+  return { style: `color: ${color};` };
+}
+
 const PRESETS: Record<
   NonNullable<TipTapExtensionOptions["preset"]>,
   Omit<TipTapExtensionOptions, "preset" | "dynamicValues" | "characterLimit">
@@ -70,6 +98,7 @@ export function getTipTapExtensions(
     emoji = false,
     underline = false,
     link = false,
+    linkColor,
     bulletList = false,
     orderedList = false,
     textAlign = false,
@@ -144,6 +173,9 @@ export function getTipTapExtensions(
       link: link
         ? {
             openOnClick: false,
+            ...(linkColor
+              ? { HTMLAttributes: buildLinkHTMLAttributes(linkColor) }
+              : {}),
           }
         : false,
       heading: false,