@dev.smartpricing/message-composer-utils 3.1.2

package/src/utils/templates/whatsapp.ts

@@ -0,0 +1,408 @@
+import type {
+  MessageFromDb,
+  PostEntity,
+  WaHeaderTypeV1Url,
+  WhatsappMessage,
+} from "../../types/index.js";
+import {
+  WA_HEADER_TEXT_MAX_LENGTH,
+  WA_BODY_MAX_LENGTH,
+  WA_FOOTER_MAX_LENGTH,
+  WA_BUTTON_TEXT_MAX_LENGTH,
+} from "../../types/index.js";
+import { generateHTML, generateText } from "@tiptap/core";
+import type { Content, JSONContent } from "@tiptap/core";
+import { shortcodeToEmoji, gitHubEmojis } from "@tiptap/extension-emoji";
+import { getTipTapExtensions } from "./tiptap.js";
+import { isValidPhoneNumber, isValidUrl } from "../validations.js";
+
+export function getWhatsappEmpty(
+  languageId: string,
+): PostEntity<WhatsappMessage> {
+  return {
+    user_id: "",
+    status: "draft",
+    render_type: "whatsapp_v1",
+    body: {
+      header: {
+        type: "none",
+      },
+      body: {
+        enabled: true,
+        content: undefined,
+      },
+      footer: {
+        enabled: false,
+        content: "",
+      },
+      buttons: {
+        enabled: false,
+        buttons: [],
+      },
+    },
+    metadata: {},
+    language_id: languageId,
+    message_group_id: "",
+  };
+}
+
+export interface WhatsappValidationResult {
+  valid: boolean;
+  errors: string[];
+}
+
+/**
+ * Validates WhatsApp message compliance with Meta requirements
+ * Checks:
+ * - Body content exists and not empty
+ * - Header text length (max 60 chars)
+ * - Body text length (max 1024 chars)
+ * - Footer text length (max 60 chars)
+ * - Button text length (max 20 chars per button)
+ * - Max 10 buttons total
+ * - Max 1 link button
+ * - Max 1 phone button
+ * - Phone numbers are valid E.164 format
+ * - Max 1 unsubscribe button
+ * - Max 3 quick_reply buttons
+ */
+export function isWhatsappValid(
+  message: PostEntity<WhatsappMessage> | MessageFromDb,
+): WhatsappValidationResult {
+  const errors: string[] = [];
+
+  if (message.render_type !== "whatsapp_v1") {
+    return {
+      valid: false,
+      errors: ["editor.validation.error.invalidRenderType"],
+    };
+  }
+
+  // Validate header text length (use markdown output to match what Meta receives)
+  if (
+    message.body.header.type === "text" &&
+    message.body.header.content &&
+    !isContentEmpty(message.body.header.content)
+  ) {
+    const headerText = convertToWhatsappMarkdown(message.body.header.content);
+    if (headerText.length > WA_HEADER_TEXT_MAX_LENGTH) {
+      errors.push("editor.validation.error.headerTooLong");
+    }
+  }
+
+  // Validate header media url
+  if (["image", "video", "document"].includes(message.body.header.type)) {
+    if (
+      !("url" in message.body.header) ||
+      !(message.body.header as WaHeaderTypeV1Url).url?.trim()
+    ) {
+      errors.push("editor.validation.error.headerMediaRequired");
+    }
+  }
+
+  // Validate body content
+  if (!message.body.body.content) {
+    errors.push("editor.validation.error.bodyRequired");
+  } else if (isContentEmpty(message.body.body.content)) {
+    errors.push("editor.validation.error.bodyEmpty");
+  } else {
+    // Validate body text length (use markdown output to match what Meta receives)
+    const bodyText = convertToWhatsappMarkdown(message.body.body.content);
+    if (bodyText.length > WA_BODY_MAX_LENGTH) {
+      errors.push("editor.validation.error.bodyTooLong");
+    }
+  }
+
+  // Validate footer text length
+  if (message.body.footer?.enabled && message.body.footer.content) {
+    if (message.body.footer.content.length > WA_FOOTER_MAX_LENGTH) {
+      errors.push("editor.validation.error.footerTooLong");
+    }
+  }
+
+  // Validate buttons if enabled
+  if (
+    message.body.buttons?.enabled &&
+    message.body.buttons.buttons.length > 0
+  ) {
+    const buttons = message.body.buttons.buttons;
+
+    // Check max total buttons
+    if (buttons.length > 10) {
+      errors.push("editor.validation.error.maxButtons");
+    }
+
+    // Count button types
+    const linkButtons = buttons.filter((b) => b.type === "link").length;
+    const phoneButtons = buttons.filter((b) => b.type === "phone").length;
+    const unsubscribeButtons = buttons.filter(
+      (b) => b.type === "unsubscribe",
+    ).length;
+    const quickReplyButtons = buttons.filter(
+      (b) => b.type === "quick_reply",
+    ).length;
+
+    // Validate button type limits
+    if (linkButtons > 1) {
+      errors.push("editor.validation.error.maxLinkButtons");
+    }
+    if (phoneButtons > 1) {
+      errors.push("editor.validation.error.maxPhoneButtons");
+    }
+    if (unsubscribeButtons > 1) {
+      errors.push("editor.validation.error.maxUnsubscribeButtons");
+    }
+    if (quickReplyButtons > 3) {
+      errors.push("editor.validation.error.maxQuickReplyButtons");
+    }
+
+    // Validate button text length, phone numbers, and URLs
+    buttons.forEach((button) => {
+      // Validate button text
+      const buttonText = typeof button.text === "string" ? button.text : "";
+      if (!buttonText.trim()) {
+        errors.push(`editor.validation.error.buttonTextRequired`);
+      } else if (buttonText.length > WA_BUTTON_TEXT_MAX_LENGTH) {
+        errors.push(`editor.validation.error.buttonTextTooLong`);
+      }
+
+      if (button.type === "phone") {
+        const phone = button.phoneNumber?.trim();
+        if (!phone) {
+          errors.push(`editor.validation.error.phoneRequired`);
+        } else if (!isValidPhoneNumber(phone)) {
+          errors.push(`editor.validation.error.phoneInvalid`);
+        }
+      }
+      if (button.type === "link") {
+        const url = button.url?.trim();
+        if (!url) {
+          errors.push(`editor.validation.error.urlRequired`);
+        } else if (!isValidUrl(url)) {
+          errors.push(`editor.validation.error.urlInvalid`);
+        }
+      }
+    });
+  }
+
+  return {
+    valid: errors.length === 0,
+    errors,
+  };
+}
+
+export function isContentEmpty(content: Content): boolean {
+  if (content == null) {
+    return true;
+  }
+
+  if (typeof content === "string") {
+    return content === "";
+  }
+
+  if (Array.isArray(content)) {
+    return content.every((item) => isContentEmpty(item));
+  }
+
+  if (!content.content) {
+    return true;
+  }
+
+  return content.content.every((item) => !item.content);
+}
+
+export function generateWhatsappTextPreview(
+  message: PostEntity<WhatsappMessage> | undefined,
+) {
+  if (!message?.body.body.content) return "";
+  return generateWhatsappText(message.body.body.content);
+}
+
+export function generateWhatsappText(content: JSONContent | undefined) {
+  if (!content) return "";
+  return generateText(content, getTipTapExtensions({ preset: "whatsapp" }));
+}
+export function generateWhatsappHtml(content: JSONContent | undefined) {
+  if (!content) return "";
+  return generateHTML(content, getTipTapExtensions({ preset: "whatsapp" }));
+}
+
+/**
+ * Converts TipTap JSONContent to WhatsApp markdown format
+ * Supports: *bold*, _italic_, ~strikethrough~, ```code```
+ */
+export function convertToWhatsappMarkdown(
+  content: Content | undefined,
+): string {
+  if (!content) return "";
+
+  function processNode(node: Content): string {
+    if (typeof node === "string") {
+      return node;
+    }
+
+    if (Array.isArray(node)) {
+      return node.map(processNode).join("");
+    }
+
+    if (!node || typeof node !== "object") {
+      return "";
+    }
+
+    let text = "";
+
+    // Process content recursively
+    if (node.content) {
+      text = node.content.map(processNode).join("");
+    }
+
+    // Handle text nodes with marks
+    if (node.type === "text" && node.text) {
+      text = node.text;
+
+      // Apply formatting based on marks
+      if (node.marks) {
+        for (const mark of node.marks) {
+          switch (mark.type) {
+            case "bold":
+              text = `*${text}*`;
+              break;
+            case "italic":
+              text = `_${text}_`;
+              break;
+            case "strike":
+              text = `~${text}~`;
+              break;
+            case "code":
+              text = `\`\`\`${text}\`\`\``;
+              break;
+          }
+        }
+      }
+    }
+
+    // Handle block-level elements
+    switch (node.type) {
+      case "paragraph":
+        return text + "\n";
+      case "mention":
+        return `{{${node.attrs?.label}}}`;
+      case "emoji": {
+        const emojiItem = shortcodeToEmoji(node.attrs?.name, gitHubEmojis);
+        return emojiItem?.emoji || `:${node.attrs?.name}:`;
+      }
+      case "hardBreak":
+        return "\n";
+      case "doc":
+        return text.trim();
+      default:
+        return text;
+    }
+  }
+
+  return processNode(content);
+}
+
+/**
+ * Calculates the translation completion percentage for a WhatsApp message
+ * Compares against a base message to determine which fields need translation
+ * @param message - The message to calculate percentage for
+ * @param baseMessage - The base language message to compare structure against
+ * @returns A number between 0-100 representing the completion percentage
+ */
+export function calculateWhatsappTranslationPercentage(
+  message: PostEntity<WhatsappMessage> | MessageFromDb | undefined,
+  baseMessage: PostEntity<WhatsappMessage> | MessageFromDb | undefined,
+): number {
+  if (!message || message.render_type !== "whatsapp_v1") return 0;
+  if (!baseMessage || baseMessage.render_type !== "whatsapp_v1") return 0;
+
+  let totalFields = 0;
+  let filledFields = 0;
+
+  // Body content is always required
+  totalFields++;
+  if (message.body.body.content && !isContentEmpty(message.body.body.content)) {
+    filledFields++;
+  }
+
+  // Check header if it exists in base message
+  if (baseMessage.body.header.type === "text") {
+    totalFields++;
+    if (
+      message.body.header.type === "text" &&
+      message.body.header.content &&
+      !isContentEmpty(message.body.header.content)
+    ) {
+      filledFields++;
+    }
+  }
+
+  // Check media header if it exists in base message
+  if (["image", "video", "document"].includes(baseMessage.body.header.type)) {
+    totalFields++;
+    if (
+      message.body.header.type === baseMessage.body.header.type &&
+      "url" in message.body.header &&
+      message.body.header.url?.trim()
+    ) {
+      filledFields++;
+    }
+  }
+
+  // Check footer if enabled in base message
+  if (baseMessage.body.footer.enabled) {
+    totalFields++;
+    if (
+      message.body.footer.enabled &&
+      message.body.footer.content &&
+      message.body.footer.content.trim() !== ""
+    ) {
+      filledFields++;
+    }
+  }
+
+  // Check buttons if they exist in base message
+  if (
+    baseMessage.body.buttons?.buttons &&
+    baseMessage.body.buttons.buttons.length > 0
+  ) {
+    for (let i = 0; i < baseMessage.body.buttons.buttons.length; i++) {
+      const baseButton = baseMessage.body.buttons.buttons[i];
+      const messageButton = message.body.buttons?.buttons?.[i];
+
+      // Button text
+      totalFields++;
+      if (messageButton?.text && messageButton.text.trim() !== "") {
+        filledFields++;
+      }
+
+      // URL for link buttons
+      if (baseButton.type === "link") {
+        totalFields++;
+        if (
+          messageButton?.type === "link" &&
+          messageButton.url &&
+          messageButton.url.trim() !== ""
+        ) {
+          filledFields++;
+        }
+      }
+
+      // Phone number for phone buttons
+      if (baseButton.type === "phone") {
+        totalFields++;
+        if (
+          messageButton?.type === "phone" &&
+          messageButton.phoneNumber &&
+          messageButton.phoneNumber.trim() !== ""
+        ) {
+          filledFields++;
+        }
+      }
+    }
+  }
+
+  if (totalFields === 0) return 0;
+  return Math.round((filledFields / totalFields) * 100);
+}

package/src/utils/validations.ts

@@ -0,0 +1,49 @@
+// Common validation functions
+export const isEmail = (email: string): boolean => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+};
+
+export const isRequired = (value: unknown): boolean => {
+  if (value === null || value === undefined) return false;
+  if (typeof value === "string") return value.trim().length > 0;
+  if (Array.isArray(value)) return value.length > 0;
+  return true;
+};
+
+export const minLength = (value: string, min: number): boolean => {
+  return value.length >= min;
+};
+
+export const maxLength = (value: string, max: number): boolean => {
+  return value.length <= max;
+};
+
+export const isNumeric = (value: string): boolean => {
+  return !isNaN(Number(value)) && !isNaN(parseFloat(value));
+};
+
+export const isPositiveNumber = (value: number): boolean => {
+  return value > 0;
+};
+
+export interface ValidationResult {
+  isValid: boolean;
+  errors: string[];
+}
+
+// WhatsApp Button validations
+export const isValidButtonText = (text: string): boolean => {
+  return text.length > 0 && text.length <= 20;
+};
+
+export const VALID_PHONE_NUMBER_REGEX = /^\+?[1-9]\d{8,14}$/;
+export const isValidPhoneNumber = (phoneNumber: string): boolean => {
+  return VALID_PHONE_NUMBER_REGEX.test(phoneNumber);
+};
+
+export const VALID_URL_REGEX =
+  /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#={}]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//={}]*)$/;
+export const isValidUrl = (url: string): boolean => {
+  return VALID_URL_REGEX.test(url);
+};

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": ["@tsconfig/node22/tsconfig.json"],
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "sourceMap": true,
+    "lib": ["ESNext", "DOM"]
+  },
+  "references": []
+}