@dev.smartpricing/message-composer-utils 3.1.2

package/src/utils/templates/html-sanitizer.ts

@@ -0,0 +1,121 @@
+/**
+ * HTML Sanitization for Email Blocks
+ *
+ * Sanitizes HTML content to remove potentially dangerous elements
+ * and ensure email client compatibility.
+ */
+
+/**
+ * List of HTML event handler attributes to remove
+ */
+const EVENT_HANDLERS = [
+  "onclick",
+  "ondblclick",
+  "onmousedown",
+  "onmouseup",
+  "onmouseover",
+  "onmousemove",
+  "onmouseout",
+  "onmouseenter",
+  "onmouseleave",
+  "onload",
+  "onunload",
+  "onchange",
+  "onsubmit",
+  "onreset",
+  "onselect",
+  "onblur",
+  "onfocus",
+  "onkeydown",
+  "onkeypress",
+  "onkeyup",
+  "onerror",
+  "onabort",
+  "onresize",
+  "onscroll",
+];
+
+/**
+ * Sanitize HTML content for email use
+ *
+ * Removes:
+ * - <script> tags and their content
+ * - <style> tags (inline styles are allowed)
+ * - Event handlers (onclick, onerror, etc.)
+ * - javascript: URLs
+ * - Non-HTTPS external resources
+ *
+ * @param html - Raw HTML content
+ * @returns Sanitized HTML content
+ */
+export function sanitizeEmailHtml(html: string): string {
+  if (!html || html.trim() === "") {
+    return "";
+  }
+
+  let sanitized = html;
+
+  // Remove <script> tags and their content
+  sanitized = sanitized.replace(
+    /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
+    "",
+  );
+
+  // Remove <style> tags and their content
+  sanitized = sanitized.replace(
+    /<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi,
+    "",
+  );
+
+  // Remove javascript: URLs in href and src attributes
+  sanitized = sanitized.replace(/href\s*=\s*["']?\s*javascript:/gi, 'href="#"');
+  sanitized = sanitized.replace(/src\s*=\s*["']?\s*javascript:/gi, 'src=""');
+
+  // Remove event handler attributes
+  for (const handler of EVENT_HANDLERS) {
+    const regex = new RegExp(`\\s${handler}\\s*=\\s*["'][^"']*["']`, "gi");
+    sanitized = sanitized.replace(regex, "");
+  }
+
+  // Replace HTTP URLs with HTTPS in src and href attributes
+  // This is a best-effort approach - broken HTTPS links are better than HTTP for email security
+  sanitized = sanitized.replace(
+    /(src|href)\s*=\s*["']http:\/\//gi,
+    '$1="https://',
+  );
+
+  return sanitized;
+}
+
+/**
+ * Validate HTML content length
+ *
+ * @param html - HTML content
+ * @param maxLength - Maximum allowed length
+ * @returns True if valid, false otherwise
+ */
+export function validateHtmlLength(html: string, maxLength: number): boolean {
+  return html.length <= maxLength;
+}
+
+/**
+ * Get validation errors for HTML content
+ *
+ * @param html - HTML content
+ * @param maxLength - Maximum allowed length
+ * @returns Array of validation error messages
+ */
+export function getHtmlValidationErrors(
+  html: string,
+  maxLength: number,
+): string[] {
+  const errors: string[] = [];
+
+  if (html.length > maxLength) {
+    errors.push(
+      `HTML content exceeds maximum length of ${maxLength} characters`,
+    );
+  }
+
+  return errors;
+}

package/src/utils/templates/messages.ts

@@ -0,0 +1,44 @@
+import type { MessageFromDb, RenderType } from "../../types/index.js";
+import {
+  generateWhatsappTextPreview,
+  generateWhatsappText,
+  generateWhatsappHtml,
+} from "./whatsapp.js";
+import { JSONContent } from "@tiptap/core";
+import {
+  generateEmailHtml,
+  generateEmailText,
+  generateEmailTextPreview,
+} from "./email.js";
+
+export function generateTextPreview(message: MessageFromDb) {
+  switch (message.render_type) {
+    case "whatsapp_v1":
+      return generateWhatsappTextPreview(message);
+    case "email_v1":
+      return generateEmailTextPreview(message);
+    default:
+      return "";
+  }
+}
+
+export function generateText(content: JSONContent, render_type: RenderType) {
+  switch (render_type) {
+    case "whatsapp_v1":
+      return generateWhatsappText(content);
+    case "email_v1":
+      return generateEmailText(content);
+    default:
+      return "";
+  }
+}
+export function generateHtml(content: JSONContent, render_type: RenderType) {
+  switch (render_type) {
+    case "whatsapp_v1":
+      return generateWhatsappHtml(content);
+    case "email_v1":
+      return generateEmailHtml(content);
+    default:
+      return "";
+  }
+}

package/src/utils/templates/meta.ts

@@ -0,0 +1,336 @@
+import {
+  type WhatsappMessage,
+  type WithDbTimestamps,
+  type HeaderBlockV1,
+  type BodyBlockV1,
+  type FooterBlockV1,
+  type ButtonBlockV1,
+  type WaButtonV1,
+  type NamedParam,
+  type MetaTemplate,
+  type MetaHeaderComponent,
+  type MetaBodyComponent,
+  type MetaFooterComponent,
+  type MetaButtonComponent,
+  WA_BODY_MAX_LENGTH,
+  WA_HEADER_TEXT_MAX_LENGTH,
+  WA_FOOTER_MAX_LENGTH,
+} from "../../types/index.js";
+import { convertToWhatsappMarkdown } from "./whatsapp.js";
+
+/**
+ * Generates a unique template name for Meta
+ */
+function generateMetaTemplateName(
+  groupName: string,
+  languageId: string,
+  prefix: string,
+): string {
+  const sanitized = groupName
+    .toLowerCase()
+    .replace(/[^a-z0-9]/g, "_")
+    .replace(/_+/g, "_")
+    .replace(/^_|_$/g, "");
+
+  const randomSuffix = Math.random().toString(36).substring(2, 8);
+  const name = `${prefix}_${sanitized}_${languageId}_${randomSuffix}`;
+
+  // Ensure max 512 characters
+  return name.substring(0, 512);
+}
+
+function generateExampleContent(
+  text: string,
+  componentType: "body" | "header",
+): { [key: string]: NamedParam[] } | undefined {
+  const paramRegex = /\{\{([^}]+)\}\}/g;
+  const matches = [...text.matchAll(paramRegex)];
+
+  if (matches.length === 0) {
+    return undefined;
+  }
+
+  /**
+   * Generates an example value based on parameter name patterns
+   */
+  function getExampleValue(paramName: string): string {
+    const lowerParam = paramName.toLowerCase();
+
+    // Check patterns in order of specificity
+    if (
+      lowerParam.includes("link") ||
+      lowerParam.includes("url") ||
+      lowerParam.includes("website")
+    ) {
+      return "https://checkin.smartness.com?checkin=123";
+    }
+    if (lowerParam.includes("phone")) {
+      return "+39 123 456 7890";
+    }
+    if (
+      lowerParam.includes("number") ||
+      lowerParam.includes("code") ||
+      lowerParam.includes("pin") ||
+      lowerParam.includes("id")
+    ) {
+      return "111";
+    }
+    if (lowerParam.includes("mail")) {
+      return "example@example.com";
+    }
+    if (
+      lowerParam.includes("accommodation") ||
+      lowerParam.includes("property")
+    ) {
+      return "AB Hotel";
+    }
+    if (lowerParam.includes("surname")) {
+      return "Rossi";
+    }
+    if (lowerParam.includes("name")) {
+      return "Mario";
+    }
+    if (lowerParam.includes("date")) {
+      return "2024-06-15";
+    }
+
+    if (
+      lowerParam.includes("amount") ||
+      lowerParam.includes("price") ||
+      lowerParam.includes("tax")
+    ) {
+      return "100";
+    }
+
+    // Default fallback
+    return `Example ${paramName}`;
+  }
+
+  const namedParams = matches.map((match) => {
+    const paramName = match[1].trim();
+    const example = getExampleValue(paramName);
+
+    return {
+      param_name: paramName,
+      example: example,
+    };
+  });
+
+  const propertyName = `${componentType}_text_named_params`;
+
+  return {
+    [propertyName]: namedParams,
+  };
+}
+
+/**
+ * Translates WhatsApp header to Meta header component
+ */
+function translateHeaderToMeta(
+  header: HeaderBlockV1,
+): MetaHeaderComponent | null {
+  switch (header.type) {
+    case "none": {
+      return null;
+    }
+    case "text": {
+      if (!header.content) return null;
+      const text = convertToWhatsappMarkdown(header.content);
+      const exampleContent = generateExampleContent(text, "header");
+
+      const result: MetaHeaderComponent = {
+        type: "HEADER",
+        format: "TEXT",
+        text: text.substring(0, WA_HEADER_TEXT_MAX_LENGTH), // Meta limit
+      };
+
+      if (exampleContent && "header_text_named_params" in exampleContent) {
+        result.example = exampleContent as {
+          header_text_named_params: NamedParam[];
+        };
+      }
+
+      return result;
+    }
+    case "image":
+    case "video":
+    case "document": {
+      const result: MetaHeaderComponent = {
+        type: "HEADER",
+        format: header.type.toUpperCase() as "IMAGE" | "VIDEO" | "DOCUMENT",
+      };
+
+      // Include media handle if available
+      if (header.metaMediaId) {
+        result.example = { header_handle: [header.metaMediaId] };
+      }
+
+      return result;
+    }
+    default: {
+      return null;
+    }
+  }
+}
+
+/**
+ * Translates WhatsApp body to Meta body component
+ */
+function translateBodyToMeta(body: BodyBlockV1): MetaBodyComponent {
+  const text = convertToWhatsappMarkdown(body.content);
+  const exampleContent = generateExampleContent(text, "body");
+
+  const result: MetaBodyComponent = {
+    type: "BODY",
+    text: text.substring(0, WA_BODY_MAX_LENGTH), // Meta limit
+  };
+
+  if (exampleContent && "body_text_named_params" in exampleContent) {
+    result.example = exampleContent as { body_text_named_params: NamedParam[] };
+  }
+
+  return result;
+}
+
+/**
+ * Translates WhatsApp footer to Meta footer component
+ */
+function translateFooterToMeta(
+  footer: FooterBlockV1,
+): MetaFooterComponent | null {
+  if (!footer.enabled || !footer.content.trim()) {
+    return null;
+  }
+
+  return {
+    type: "FOOTER",
+    text: footer.content.substring(0, WA_FOOTER_MAX_LENGTH), // Meta limit
+  };
+}
+
+/**
+ * Generates example values for button URL parameters
+ */
+function generateButtonExamples(url: string): string[] | undefined {
+  const paramRegex = /\{\{([^}]+)\}\}/g;
+  const matches = [...url.matchAll(paramRegex)];
+
+  if (matches.length === 0) {
+    return undefined;
+  }
+
+  return Array.from({ length: matches.length }).map((_, index) => {
+    return `https://connect.smartness.com/123/book/${index + 1}`;
+  });
+}
+
+/**
+ * Translates WhatsApp buttons to Meta button component
+ */
+function translateButtonsToMeta(
+  buttons: ButtonBlockV1,
+): MetaButtonComponent | null {
+  if (!buttons.enabled || buttons.buttons.length === 0) {
+    return null;
+  }
+
+  const metaButtons = buttons.buttons
+    .map((button: WaButtonV1, index: number) => {
+      switch (button.type) {
+        case "quick_reply":
+        case "unsubscribe":
+          return {
+            type: "QUICK_REPLY" as const,
+            text: button.text.substring(0, 20),
+          };
+        case "phone":
+          return {
+            type: "PHONE_NUMBER" as const,
+            text: button.text.substring(0, 20),
+            phone_number: button.phoneNumber,
+          };
+        case "link": {
+          const examples = generateButtonExamples(button.url);
+
+          // Extract {{<variable_name>}} (single param case) and replace with {{1}} for url as required by Meta
+          let metaUrl = button.url;
+          const singleParamMatch = metaUrl.match(/\{\{([^}]+)\}\}/);
+          if (singleParamMatch) {
+            metaUrl = metaUrl.replace(singleParamMatch[0], `{{${index + 1}}}`);
+          }
+
+          const result: {
+            type: "URL";
+            text: string;
+            url: string;
+            example?: string[];
+          } = {
+            type: "URL" as const,
+            text: button.text.substring(0, 20),
+            url: metaUrl,
+          };
+
+          if (examples) {
+            result.example = examples;
+          }
+
+          return result;
+        }
+        default:
+          return null;
+      }
+    })
+    .filter((btn): btn is NonNullable<typeof btn> => btn !== null);
+
+  if (metaButtons.length === 0) return null;
+
+  return {
+    type: "BUTTONS",
+    buttons: metaButtons.slice(0, 10), // Meta limit
+  };
+}
+
+/**
+ * Translates a WhatsApp message to Meta template format
+ */
+export function translateWhatsappToMeta(
+  message: WithDbTimestamps<WhatsappMessage>,
+  groupName: string,
+  groupCategory: "marketing" | "utility",
+  prefix: string,
+): MetaTemplate {
+  const components: MetaTemplate["components"] = [];
+
+  // Header
+  const headerComponent = translateHeaderToMeta(message.body.header);
+  if (headerComponent) {
+    components.push(headerComponent);
+  }
+
+  // Body (mandatory)
+  const bodyComponent = translateBodyToMeta(message.body.body);
+  components.push(bodyComponent);
+
+  // Footer
+  const footerComponent = translateFooterToMeta(message.body.footer);
+  if (footerComponent) {
+    components.push(footerComponent);
+  }
+
+  // Buttons
+  const buttonComponent = translateButtonsToMeta(message.body.buttons);
+  if (buttonComponent) {
+    components.push(buttonComponent);
+  }
+
+  return {
+    name:
+      message.metadata?.meta?.template_name ||
+      generateMetaTemplateName(groupName, message.language_id, prefix),
+    language: message.language_id,
+    category: groupCategory.toUpperCase() as "MARKETING" | "UTILITY",
+    parameter_format: "NAMED",
+    allow_category_change: true,
+    components,
+  };
+}