@dev.smartpricing/message-composer-utils 3.1.2

package/src/utils/templates/email.ts

@@ -0,0 +1,713 @@
+import {
+  type PostEntity,
+  type EmailMessage,
+  type EmailGlobalSettings,
+  type EmailBlock,
+  type GridBlock,
+  type GridColumn,
+  type GridAllowedBlock,
+  type TranslatableBlockType,
+  type SocialPlatform,
+  TRANSLATABLE_BLOCK_TYPES,
+  HTML_MAX_LENGTH,
+  TranslatableBlock,
+  emptyFooterBlock,
+  emptyDividerBlock,
+  emptyUnsubscribeLinkBlock,
+  emptyHeaderBlock,
+} from "../../types/index.js";
+import type { BrandCascadeData } from "./brand-cascade.js";
+import { generateHTML } from "@tiptap/html";
+import { generateText } from "@tiptap/core";
+import type { JSONContent } from "@tiptap/core";
+import { getTipTapExtensions, isTiptapEmpty } from "./tiptap.js";
+import { isValidUrl, isValidPhoneNumber, isEmail } from "../validations.js";
+
+/**
+ * Creates an empty email message template
+ */
+export function getEmailEmpty(languageId: string): PostEntity<EmailMessage> {
+  const defaultSettings: EmailGlobalSettings = {
+    contentWidth: 600,
+    verticalSpacing: 0,
+    horizontalSpacing: 0,
+  };
+
+  return {
+    user_id: "",
+    status: "draft",
+    render_type: "email_v1",
+    body: {
+      subject: "",
+      blocks: [
+        emptyHeaderBlock(),
+        emptyFooterBlock(),
+        emptyDividerBlock(),
+        emptyUnsubscribeLinkBlock(languageId),
+      ],
+      settings: { ...defaultSettings },
+    },
+    metadata: {},
+    language_id: languageId,
+    message_group_id: "",
+  };
+}
+
+export interface EmailValidationResult {
+  valid: boolean;
+  errors: string[];
+}
+
+/**
+ * Validates if an email message is valid
+ * Checks:
+ * - Subject required and not empty
+ * - At least one non-empty block exists
+ * - Block-specific constraints (dimensions, content)
+ */
+export function isEmailValid(
+  message: PostEntity<EmailMessage> | EmailMessage,
+  brand?: BrandCascadeData | null,
+): EmailValidationResult {
+  const errors: string[] = [];
+
+  if (message.render_type !== "email_v1") {
+    return {
+      valid: false,
+      errors: ["editor.validation.error.invalidRenderType"],
+    };
+  }
+
+  // Validate subject
+  if (!message.body.subject || message.body.subject.trim() === "") {
+    errors.push("editor.validation.error.subjectRequired");
+  }
+
+  // Validate that at least one content block exists (text or image)
+  const hasContent = hasContentBlock(message.body.blocks);
+
+  if (!hasContent) {
+    errors.push("editor.validation.error.atLeastOneBlockRequired");
+  }
+
+  // Validate unsubscribe block exists
+  const hasUnsubscribe = message.body.blocks.some(
+    (block) => block.type === "unsubscribe_link",
+  );
+  if (!hasUnsubscribe) {
+    errors.push("editor.validation.error.unsubscribeBlockMissing");
+  }
+
+  // Validate block constraints
+  for (const block of message.body.blocks) {
+    validateEmailBlock(block, errors, brand);
+  }
+
+  return {
+    valid: errors.length === 0,
+    errors,
+  };
+}
+
+/**
+ * Check if blocks array has at least one content block (text or image with src)
+ */
+function hasContentBlock(blocks: EmailBlock[]): boolean {
+  for (const block of blocks) {
+    // Check translatable text blocks
+    if (
+      block.type === "heading" ||
+      block.type === "paragraph" ||
+      block.type === "button" ||
+      block.type === "discount" ||
+      block.type === "footer" ||
+      block.type === "raw_html" ||
+      block.type === "unsubscribe_link"
+    ) {
+      if (!isEmailBlockEmpty(block)) return true;
+    }
+    // Check image blocks with valid src
+    if (block.type === "image") {
+      if (block.settings.src && block.settings.src.trim() !== "") return true;
+    }
+    // Recursively check grid columns
+    if (block.type === "grid") {
+      for (const column of block.settings.columnData) {
+        if (hasContentBlock(column.blocks)) return true;
+      }
+    }
+  }
+  return false;
+}
+
+/**
+ * Validates individual email blocks
+ */
+function validateEmailBlock(
+  block: EmailBlock,
+  errors: string[],
+  brand?: BrandCascadeData | null,
+): void {
+  switch (block.type) {
+    case "image":
+      if (!block.settings.src || block.settings.src.trim() === "") {
+        errors.push("editor.validation.error.imageSourceRequired");
+      }
+      break;
+
+    case "header":
+      if (
+        (!block.settings.src || block.settings.src.trim() === "") &&
+        !brand?.logo_url
+      ) {
+        errors.push("editor.validation.error.headerLogoRequired");
+      }
+      break;
+
+    case "button":
+      if (isTiptapEmpty(block.settings.content, "email_v1")) {
+        errors.push("editor.validation.error.buttonTextRequired");
+      }
+      if (!block.settings.url || block.settings.url.trim() === "") {
+        errors.push("editor.validation.error.urlRequired");
+      } else {
+        const url = block.settings.url.trim();
+        switch (block.settings.linkType) {
+          case "web":
+            if (!isValidUrl(url)) {
+              errors.push("editor.validation.error.urlInvalid");
+            }
+            break;
+          case "email":
+            if (!isEmail(url)) {
+              errors.push("editor.validation.error.emailInvalid");
+            }
+            break;
+          case "phone":
+            if (!isValidPhoneNumber(url)) {
+              errors.push("editor.validation.error.phoneInvalid");
+            }
+            break;
+        }
+      }
+      break;
+
+    case "unsubscribe_link": {
+      // Content must contain {{unsubscribe}} dynamic value
+      const html = generateEmailHtml(block.settings.content);
+      if (!html.includes("{{unsubscribe}}")) {
+        errors.push("editor.validation.error.unsubscribeLinkRequired");
+      }
+      break;
+    }
+
+    case "socials": {
+      const entries = Object.entries(block.settings.socials) as [
+        SocialPlatform,
+        { enabled: boolean; url: string },
+      ][];
+      const enabled = entries.filter(([, s]) => s.enabled);
+      if (enabled.length === 0) {
+        errors.push("editor.validation.error.socialsNoEnabled");
+      } else {
+        const brandSocials = brand?.default_socials;
+        for (const [platform, social] of enabled) {
+          const hasBlockUrl = social.url && social.url.trim() !== "";
+          const hasBrandUrl = !!brandSocials?.[platform];
+          if (!hasBlockUrl && !hasBrandUrl) {
+            errors.push("editor.validation.error.socialsUrlRequired");
+            break;
+          }
+        }
+      }
+      break;
+    }
+
+    case "raw_html":
+      if (block.settings.html.length > HTML_MAX_LENGTH) {
+        errors.push("editor.validation.error.htmlMaxLength");
+      }
+      break;
+
+    case "top_products":
+      if (!block.settings.storeId || block.settings.storeId.trim() === "") {
+        errors.push("editor.validation.error.topProductsStoreIdRequired");
+      }
+      break;
+
+    case "grid":
+      // Each column must have at least one valid block
+      for (const column of block.settings.columnData) {
+        if (!hasContentBlock(column.blocks)) {
+          errors.push("editor.validation.error.gridColumnEmpty");
+        }
+        // Recursively validate nested blocks
+        for (const nestedBlock of column.blocks) {
+          validateEmailBlock(nestedBlock, errors, brand);
+        }
+      }
+      break;
+  }
+}
+
+/**
+ * Extract translatable blocks from email blocks array (including nested grid blocks)
+ */
+export function extractTranslatableBlocks(blocks: EmailBlock[]): EmailBlock[] {
+  const translatable: EmailBlock[] = [];
+
+  for (const block of blocks) {
+    if (
+      block.type === "heading" ||
+      block.type === "paragraph" ||
+      block.type === "button" ||
+      block.type === "discount" ||
+      block.type === "footer" ||
+      block.type === "raw_html" ||
+      block.type === "unsubscribe_link"
+    ) {
+      translatable.push(block);
+    } else if (block.type === "grid") {
+      // Recursively extract from grid columns
+      for (const column of block.settings.columnData) {
+        const nestedTranslatable = extractTranslatableBlocks(column.blocks);
+        translatable.push(...nestedTranslatable);
+      }
+    }
+  }
+
+  return translatable;
+}
+
+/**
+ * Check if email block content is empty
+ */
+export function isEmailBlockEmpty(block: EmailBlock): boolean {
+  switch (block.type) {
+    case "heading":
+    case "paragraph":
+    case "button":
+    case "discount":
+    case "footer":
+    case "unsubscribe_link":
+      return (
+        Boolean(block.settings.content) &&
+        isTiptapEmpty(block.settings.content, "email_v1")
+      );
+    case "raw_html":
+      return !block.settings.html || block.settings.html.trim() === "";
+    case "image":
+    case "header":
+      return !block.settings.src;
+    default:
+      return false;
+  }
+}
+
+/**
+ * Check if email block content is empty
+ */
+export function isEmailTranslatableBlockEmpty(block: EmailBlock): boolean {
+  switch (block.type) {
+    case "heading":
+    case "paragraph":
+    case "button":
+    case "discount":
+    case "footer":
+    case "unsubscribe_link":
+      return (
+        Boolean(block.settings.content) &&
+        isTiptapEmpty(block.settings.content, "email_v1")
+      );
+    case "raw_html":
+      return !block.settings.html || block.settings.html.trim() === "";
+    default:
+      return true;
+  }
+}
+
+/**
+ * Calculate translation percentage for email message
+ */
+export function calculateEmailTranslationPercentage(
+  target: EmailMessage | PostEntity<EmailMessage>,
+  base: EmailMessage | PostEntity<EmailMessage>,
+): number {
+  if (target.render_type !== "email_v1" || base.render_type !== "email_v1") {
+    return 0;
+  }
+
+  const baseTranslatableBlocks = extractTranslatableBlocks(base.body.blocks);
+  const targetTranslatableBlocks = extractTranslatableBlocks(
+    target.body.blocks,
+  );
+
+  // Build ID-based map of target blocks for matching
+  const targetBlocksMap = new Map(
+    targetTranslatableBlocks.map((block) => [block.id, block]),
+  );
+
+  let totalFields = baseTranslatableBlocks.length;
+  let completedFields = 0;
+
+  // Count subject line
+  if (base.body.subject && base.body.subject.trim() !== "") {
+    totalFields++;
+    if (target.body.subject && target.body.subject.trim() !== "") {
+      completedFields++;
+    }
+  }
+
+  // Count translated blocks by ID
+  for (const baseBlock of baseTranslatableBlocks) {
+    const targetBlock = targetBlocksMap.get(baseBlock.id);
+
+    if (!targetBlock) continue;
+
+    // Check if base has content
+    if (!isEmailBlockEmpty(baseBlock)) {
+      // Check if target also has content
+      if (!isEmailBlockEmpty(targetBlock)) {
+        completedFields++;
+      }
+    } else {
+      // If base is empty, don't count it
+      totalFields--;
+    }
+  }
+
+  if (totalFields === 0) return 100;
+  return Math.round((completedFields / totalFields) * 100);
+}
+
+/**
+ * Duplicate blocks for new language (preserve block IDs, clear translatable content)
+ */
+export function duplicateBlocksForNewLanguage(
+  blocks: EmailBlock[],
+): EmailBlock[] {
+  return blocks.map((block) => {
+    const newBlock = { ...block };
+
+    switch (block.type) {
+      case "heading":
+      case "paragraph":
+      case "button":
+      case "discount":
+      case "footer":
+      case "unsubscribe_link":
+        // Clear translatable content
+        return {
+          ...newBlock,
+          settings: {
+            ...block.settings,
+            content: undefined,
+          },
+        } as EmailBlock;
+
+      case "raw_html":
+        // Copy HTML as-is (manual customization needed)
+        return {
+          ...newBlock,
+          settings: { ...block.settings, html: "" },
+        } as EmailBlock;
+
+      case "grid":
+        // Recursively duplicate nested blocks
+        return {
+          ...newBlock,
+          settings: {
+            ...block.settings,
+            columnData: block.settings.columnData.map((column) => ({
+              id: column.id,
+              blocks: duplicateBlocksForNewLanguage(column.blocks),
+            })),
+          },
+        } as GridBlock;
+
+      default:
+        // Non-translatable blocks (spacer, divider, image, header) - copy as-is
+        return {
+          ...newBlock,
+          settings: { ...block.settings },
+        } as EmailBlock;
+    }
+  });
+}
+
+/**
+ * Helper: Check if block type has translatable content
+ */
+function hasTranslatableContent(block: EmailBlock): block is TranslatableBlock {
+  return TRANSLATABLE_BLOCK_TYPES.includes(block.type as TranslatableBlockType);
+}
+
+/**
+ * Helper: Create empty translation version of a block
+ */
+function createEmptyTranslationBlock(baseBlock: EmailBlock): EmailBlock {
+  const newBlock = { ...baseBlock };
+
+  switch (baseBlock.type) {
+    case "heading":
+    case "paragraph":
+    case "button":
+    case "discount":
+    case "footer":
+    case "unsubscribe_link":
+      return {
+        ...newBlock,
+        settings: {
+          ...baseBlock.settings,
+          content: undefined,
+        },
+      } as EmailBlock;
+
+    case "grid":
+      return {
+        ...newBlock,
+        settings: {
+          ...baseBlock.settings,
+          columnData: baseBlock.settings.columnData.map((column) => ({
+            id: column.id,
+            blocks: column.blocks.map(createEmptyTranslationBlock),
+          })),
+        },
+      } as GridBlock;
+
+    default:
+      return {
+        ...newBlock,
+        settings: { ...baseBlock.settings },
+      } as EmailBlock;
+  }
+}
+
+/**
+ * Build ID-based map of all target blocks (including nested grid blocks)
+ */
+function buildTargetBlockMap(blocks: EmailBlock[]): Map<string, EmailBlock> {
+  const map = new Map<string, EmailBlock>();
+
+  for (const block of blocks) {
+    map.set(block.id, block);
+    if (block.type === "grid") {
+      for (const column of block.settings.columnData) {
+        const nestedMap = buildTargetBlockMap(column.blocks);
+        for (const [id, nestedBlock] of nestedMap) {
+          map.set(id, nestedBlock);
+        }
+      }
+    }
+  }
+
+  return map;
+}
+
+/**
+ * Sync grid columns by ID
+ */
+function syncGridColumnsForLayout(
+  baseColumns: GridColumn[],
+  targetColumns: GridColumn[],
+): GridColumn[] {
+  const targetMap = new Map(targetColumns.map((col) => [col.id, col]));
+
+  return baseColumns.map((baseCol) => {
+    const existing = targetMap.get(baseCol.id);
+
+    if (existing) {
+      return {
+        id: baseCol.id,
+        blocks: syncBlocksRecursiveForLayout(
+          baseCol.blocks,
+          existing.blocks,
+        ) as GridAllowedBlock[],
+      };
+    } else {
+      return {
+        id: baseCol.id,
+        blocks: baseCol.blocks.map(
+          createEmptyTranslationBlock,
+        ) as GridAllowedBlock[],
+      };
+    }
+  });
+}
+
+/**
+ * Recursively sync blocks (for nested grids)
+ */
+function syncBlocksRecursiveForLayout(
+  baseBlocks: EmailBlock[],
+  targetBlocks: EmailBlock[],
+): EmailBlock[] {
+  const targetMap = new Map(targetBlocks.map((b) => [b.id, b]));
+
+  return baseBlocks.map((baseBlock) => {
+    const existing = targetMap.get(baseBlock.id);
+
+    if (existing) {
+      const synced = { ...existing };
+
+      if (baseBlock.type === "grid" && existing.type === "grid") {
+        synced.settings = {
+          ...baseBlock.settings,
+          columnData: syncGridColumnsForLayout(
+            baseBlock.settings.columnData,
+            existing.settings.columnData,
+          ),
+        };
+      } else if (
+        hasTranslatableContent(baseBlock) &&
+        hasTranslatableContent(existing)
+      ) {
+        synced.settings = {
+          ...baseBlock.settings,
+          content: existing.settings.content,
+        };
+      } else if (baseBlock.type === "image" && existing.type === "image") {
+        synced.settings = {
+          ...baseBlock.settings,
+          src: existing.settings.src,
+          href: existing.settings.href,
+        };
+      } else {
+        synced.settings = { ...baseBlock.settings };
+      }
+
+      return synced as EmailBlock;
+    } else {
+      return createEmptyTranslationBlock(baseBlock);
+    }
+  });
+}
+
+/**
+ * Sync single block using target blocks map
+ */
+function syncSingleBlock(
+  baseBlock: EmailBlock,
+  targetBlocksMap: Map<string, EmailBlock>,
+): EmailBlock {
+  const existing = targetBlocksMap.get(baseBlock.id);
+
+  if (existing) {
+    // Preserve translatable content, sync structure
+    const synced = { ...existing };
+
+    switch (baseBlock.type) {
+      case "heading":
+      case "paragraph":
+      case "button":
+      case "discount":
+      case "footer":
+      case "unsubscribe_link":
+        synced.settings = {
+          ...baseBlock.settings,
+          content: (existing as TranslatableBlock).settings.content, // PRESERVE
+        };
+        break;
+
+      case "raw_html":
+        // Keep target's HTML (manual customization)
+        synced.settings = { ...existing.settings };
+        break;
+
+      case "image":
+        if (existing.type === "image") {
+          synced.settings = {
+            ...baseBlock.settings,
+            src: existing.settings.src,
+            href: existing.settings.href,
+          };
+        }
+        break;
+
+      case "header":
+        if (existing.type === "header") {
+          synced.settings = {
+            ...baseBlock.settings,
+            src: existing.settings.src,
+            alt: existing.settings.alt,
+          };
+        }
+        break;
+
+      case "grid":
+        if (existing.type === "grid") {
+          synced.settings = {
+            ...baseBlock.settings,
+            columnData: syncGridColumnsForLayout(
+              baseBlock.settings.columnData,
+              existing.settings.columnData,
+            ),
+          };
+        }
+        break;
+
+      default:
+        // Non-translatable blocks (spacer, divider)
+        synced.settings = { ...baseBlock.settings };
+    }
+
+    return synced as EmailBlock;
+  } else {
+    // Block doesn't exist in target - create empty translation
+    return createEmptyTranslationBlock(baseBlock);
+  }
+}
+
+/**
+ * Sync layout from base language to target language
+ * - Preserves translatable content in target
+ * - Matches blocks by ID
+ * - Handles: add blocks, remove blocks (orphans), reorder blocks
+ * - Recursively handles grid columns and nested blocks
+ */
+export function syncLayoutFromBase(
+  baseBlocks: EmailBlock[],
+  targetBlocks: EmailBlock[],
+): EmailBlock[] {
+  // Build ID map of all target blocks (including nested)
+  const targetBlocksMap = buildTargetBlockMap(targetBlocks);
+
+  // Main sync: rebuild target array following base order
+  return baseBlocks.map((block) => syncSingleBlock(block, targetBlocksMap));
+}
+
+export function generateEmailTextPreview(
+  message: PostEntity<EmailMessage> | undefined,
+) {
+  if (!message?.body.blocks) return "";
+  const content = message.body.blocks
+    .filter(
+      (block) =>
+        block.type === "paragraph" ||
+        block.type === "heading" ||
+        block.type === "button" ||
+        block.type === "discount" ||
+        block.type === "footer" ||
+        block.type === "unsubscribe_link",
+    )
+    .at(0);
+  if (content) {
+    return generateEmailText(content.settings.content);
+  }
+  const html = message.body.blocks
+    .filter((block) => block.type === "raw_html")
+    .at(0);
+  if (html) {
+    return html.settings.html;
+  }
+  return "";
+}
+
+export function generateEmailText(content: JSONContent | undefined) {
+  if (!content) return "";
+  return generateText(content, getTipTapExtensions({ preset: "email" }));
+}
+export function generateEmailHtml(content: JSONContent | undefined) {
+  if (!content) return "";
+  return generateHTML(content, getTipTapExtensions({ preset: "email" }));
+}