@dev.smartpricing/message-composer-utils 3.1.2

package/src/types/emailblocks.v1.ts

@@ -0,0 +1,655 @@
+import type { JSONContent } from "@tiptap/core";
+import {
+  DEFAULT_SPACER_SETTINGS,
+  DEFAULT_DIVIDER_SETTINGS,
+  DEFAULT_HEADING_SETTINGS,
+  DEFAULT_PARAGRAPH_SETTINGS,
+  DEFAULT_BUTTON_SETTINGS,
+  DEFAULT_GRID_SETTINGS,
+  DEFAULT_DISCOUNT_SETTINGS,
+  DEFAULT_HEADER_SETTINGS,
+  DEFAULT_FOOTER_SETTINGS,
+  DEFAULT_UNSUBSCRIBE_LINK_SETTINGS,
+  DEFAULT_TOP_PRODUCTS_SETTINGS,
+} from "./emailblocks.v1.defaults.js";
+import { BrandDefaultButtonSettings } from "./brand.js";
+
+// ============================================================================
+// EMAIL BLOCK TYPES
+// ============================================================================
+
+export const EMAIL_BLOCK_TYPES = [
+  "spacer",
+  "divider",
+  "heading",
+  "paragraph",
+  "image",
+  "button",
+  "grid",
+  "raw_html",
+  "discount",
+  "header",
+  "footer",
+  "unsubscribe_link",
+  "socials",
+  "top_products",
+] as const;
+
+export const TRANSLATABLE_BLOCK_TYPES = [
+  "heading",
+  "paragraph",
+  "button",
+  "discount",
+  "footer",
+  "raw_html",
+  "unsubscribe_link",
+] as const;
+
+export type EmailBlockType = EmailBlock["type"];
+export type TranslatableBlockType = TranslatableBlock["type"];
+
+// ============================================================================
+// VALIDATION CONSTANTS
+// ============================================================================
+
+// Spacer
+export const SPACER_MIN_HEIGHT = 8;
+export const SPACER_MAX_HEIGHT = 200;
+export const SPACER_SIZE_PRESETS = {
+  small: 24,
+  medium: 40,
+  large: 64,
+  extra_large: 96,
+} as const;
+
+// Divider
+export const DIVIDER_MIN_THICKNESS = 1;
+export const DIVIDER_MAX_THICKNESS = 20;
+export const DIVIDER_MIN_WIDTH = 10;
+export const DIVIDER_MAX_WIDTH = 100;
+
+// Text blocks
+export const FONT_SIZE_MIN = 10;
+export const FONT_SIZE_MAX = 48;
+export const EMAIL_SAFE_FONTS = [
+  "Arial",
+  "Helvetica",
+  "Georgia",
+  "Times New Roman",
+  "Trebuchet MS",
+  "Verdana",
+  "Courier New",
+] as const;
+export type SafeFonts = (typeof EMAIL_SAFE_FONTS)[number];
+
+export const EMAIL_SAFE_FONT_ITEMS = EMAIL_SAFE_FONTS.map((font) => ({
+  value: font,
+  label: font,
+}));
+
+// Heading
+export const HEADING_TAGS = ["h1", "h2", "h3", "h4", "h5", "h6"] as const;
+export const TEXT_TAGS = ["p", ...HEADING_TAGS] as const;
+
+export const TAGS_DEFAULT_FONT_SIZE: Record<
+  (typeof TEXT_TAGS)[number],
+  number
+> = {
+  h1: 28,
+  h2: 24,
+  h3: 20,
+  h4: 18,
+  h5: 16,
+  h6: 14,
+  p: 16,
+};
+
+// HTML
+export const HTML_MAX_LENGTH = 50000;
+
+// Image
+export const IMAGE_MIN_WIDTH = 50;
+export const IMAGE_MAX_WIDTH = 600;
+
+// Content width
+export const CONTENT_WIDTH_MIN = 400;
+export const CONTENT_WIDTH_MAX = 800;
+
+// ============================================================================
+// BASE BLOCK
+// ============================================================================
+
+export interface EmailBlockBase {
+  id: string; // crypto.randomUUID()
+  type: EmailBlockType;
+}
+
+// ============================================================================
+// INDIVIDUAL BLOCK TYPES
+// ============================================================================
+
+export interface SpacerBlock extends EmailBlockBase {
+  type: "spacer";
+  settings: {
+    customSize: boolean;
+    height: number; // 8-200px
+    backgroundColor: string; // CSS color or 'transparent'
+  };
+}
+
+export interface DividerBlock extends EmailBlockBase {
+  type: "divider";
+  settings: {
+    style: "solid" | "dashed" | "dotted";
+    thickness: number; // 1-10px
+    width: number; // 10-100%
+    color: string;
+    backgroundColor: string;
+  };
+}
+
+export interface HeadingBlock extends EmailBlockBase {
+  type: "heading";
+  settings: {
+    tag: (typeof HEADING_TAGS)[number];
+    content: JSONContent | undefined; // TipTap format
+    fontFamily?: string; // undefined = use global default
+    fontSize: number; // 16-48px
+    textColor?: string; // undefined = use global default
+    backgroundColor: string;
+  };
+}
+
+export interface ParagraphBlock extends EmailBlockBase {
+  type: "paragraph";
+  settings: {
+    tag: (typeof TEXT_TAGS)[number];
+    content: JSONContent | undefined; // TipTap rich text
+    fontFamily?: string; // undefined = use global default
+    fontSize: number; // 10-32px
+    textColor?: string; // undefined = use global default
+    backgroundColor: string;
+  };
+}
+
+export interface ImageBlock extends EmailBlockBase {
+  type: "image";
+  settings: {
+    src: string; // Image source URL
+    href?: string; // Optional link URL
+  };
+}
+
+export interface ButtonBlock extends EmailBlockBase {
+  type: "button";
+  settings: {
+    content: JSONContent | undefined; // Button text with formatting
+    linkType: "web" | "email" | "phone";
+    url: string;
+    fontFamily?: string; // undefined = use global default
+    fontSize: number; // 12-32px
+    shape: "square" | "rounded" | "pill";
+    width: "fit_to_text" | "full_width";
+    alignment: "left" | "center" | "right";
+    textColor?: string; // undefined = use global default
+    backgroundColor?: string; //undefined = use global default
+    backgroundBlock: string;
+  };
+}
+
+// Grid types
+export interface GridColumn {
+  id: string; // UUID
+  blocks: GridAllowedBlock[];
+}
+
+export interface GridBlock extends EmailBlockBase {
+  type: "grid";
+  settings: {
+    columns: number; // 1, 2, or 3
+    backgroundColor: string;
+    columnData: GridColumn[];
+  };
+}
+
+// Blocks allowed inside grid columns (NO grid-in-grid, no header/footer/html/drif)
+export type GridAllowedBlock =
+  | DiscountBlock
+  | HeadingBlock
+  | ParagraphBlock
+  | ImageBlock
+  | ButtonBlock;
+
+export interface RawHtmlBlock extends EmailBlockBase {
+  type: "raw_html";
+  settings: {
+    html: string; // Max 50,000 chars
+  };
+}
+
+export interface DiscountBlock extends EmailBlockBase {
+  type: "discount";
+  settings: {
+    content: JSONContent | undefined; // Discount code text with formatting
+    tag: (typeof TEXT_TAGS)[number];
+    fontFamily?: string; // undefined = use global default
+    fontSize: number; // 12-48px
+    style: "square" | "rounded" | "pill";
+    width: "fit_to_text" | "full_width";
+    textColor?: string; // undefined = use global default
+    backgroundComponent: string; // Code box background
+    backgroundBlock: string; // Overall block background
+  };
+}
+
+export interface HeaderBlock extends EmailBlockBase {
+  type: "header";
+  settings: {
+    src: string;
+    alt: string;
+    width: number; // 100-300px
+    alignment: "left" | "center" | "right";
+    backgroundColor: string;
+  };
+}
+
+export interface FooterBlock extends EmailBlockBase {
+  type: "footer";
+  settings: {
+    content: JSONContent | undefined; // Rich text
+    fontSize: number; // 10-16px
+    fontFamily?: string; // undefined = use global default
+    textColor?: string; // undefined = use global default
+    backgroundColor: string;
+    alignment: "left" | "center" | "right";
+  };
+}
+
+export interface UnsubscribeLinkBlock extends EmailBlockBase {
+  type: "unsubscribe_link";
+  settings: {
+    content: JSONContent | undefined; // Must contain {{unsubscribe}}
+    fontFamily?: string;
+    fontSize: number; // default 12px
+    textColor?: string; // default lower contrast
+    backgroundColor: string;
+    alignment: "left" | "center" | "right";
+  };
+}
+
+export type SocialPlatform =
+  | "facebook"
+  | "instagram"
+  | "tripadvisor"
+  | "tiktok"
+  | "google";
+
+export interface SocialLink {
+  enabled: boolean;
+  url: string;
+}
+
+export const SOCIAL_ICONS: Record<SocialPlatform, string> = {
+  facebook:
+    "http://cdn.mcauto-images-production.sendgrid.net/7f5145b378e26280/8246b205-8497-4fdc-b834-a66a6fccf009/24x24.png",
+  instagram:
+    "http://cdn.mcauto-images-production.sendgrid.net/7f5145b378e26280/0d446d50-f646-428c-83f2-73ca2b6c4c3e/24x24.png",
+  tripadvisor:
+    "http://cdn.mcauto-images-production.sendgrid.net/7f5145b378e26280/6fc003ce-242d-46a9-923e-76e7f078727e/24x24.png",
+  tiktok:
+    "http://cdn.mcauto-images-production.sendgrid.net/7f5145b378e26280/a56f5bf7-0f22-4a06-b41a-d552684e731b/24x24.png",
+  google:
+    "http://cdn.mcauto-images-production.sendgrid.net/7f5145b378e26280/2dd79979-88ea-4074-9a4e-e646ddaed114/24x24.png",
+};
+
+export const SOCIAL_PLATFORMS = Object.keys(SOCIAL_ICONS) as SocialPlatform[];
+
+export interface SocialsBlock extends EmailBlockBase {
+  type: "socials";
+  settings: {
+    backgroundColor: string;
+    socials: Record<SocialPlatform, SocialLink>;
+  };
+}
+
+export interface TopProductsProduct {
+  name: string;
+  image: string;
+  link: string;
+  price: string;
+}
+
+export interface TopProductsBlock extends EmailBlockBase {
+  type: "top_products";
+  settings: {
+    storeId: string; // Smartconnect store identifier for the upselling API
+    maxProducts: number; // Max products to display (default 4)
+    backgroundColor: string; // Wrapper background color
+  };
+  /** Populated at compile time by the backend enrichment step */
+  _products?: TopProductsProduct[];
+}
+
+// ============================================================================
+// UNION TYPE
+// ============================================================================
+
+export type EmailBlock =
+  | SpacerBlock
+  | DividerBlock
+  | HeadingBlock
+  | ParagraphBlock
+  | ImageBlock
+  | ButtonBlock
+  | GridBlock
+  | RawHtmlBlock
+  | DiscountBlock
+  | HeaderBlock
+  | FooterBlock
+  | UnsubscribeLinkBlock
+  | SocialsBlock
+  | TopProductsBlock;
+
+export type TranslatableBlock =
+  | HeadingBlock
+  | ParagraphBlock
+  | ButtonBlock
+  | DiscountBlock
+  | FooterBlock
+  | UnsubscribeLinkBlock;
+
+// ============================================================================
+// GLOBAL EMAIL SETTINGS
+// ============================================================================
+
+export interface EmailGlobalSettings {
+  backgroundColor?: string; // Default #F3F4F6 (page/canvas background)
+  contentBackgroundColor?: string; // Default #FFFFFF (content area/body background)
+  contentWidth?: number; // Default 600px (400-800)
+  fontFamily?: SafeFonts; // Default Arial
+  textColor?: string; // Default #1F2937
+  verticalSpacing?: number; // Default 0px (0-50), gap between blocks
+  horizontalSpacing?: number; // Default 0px (0-50), left/right content inset
+  button?: BrandDefaultButtonSettings;
+}
+
+export const DEFAULT_EMAIL_GLOBAL_SETTINGS: Required<EmailGlobalSettings> = {
+  backgroundColor: "#F3F4F6",
+  contentBackgroundColor: "#FFFFFF",
+  contentWidth: 600,
+  fontFamily: "Arial",
+  textColor: "#1F2937",
+  verticalSpacing: 0,
+  horizontalSpacing: 0,
+  button: {
+    backgroundColor: "#FFFFFF",
+    textColor: "#000000",
+  },
+};
+
+export function emptySpacerBlock(): SpacerBlock {
+  return {
+    id: crypto.randomUUID(),
+    type: "spacer",
+    settings: { ...DEFAULT_SPACER_SETTINGS },
+  };
+}
+
+export function emptyDividerBlock(): DividerBlock {
+  return {
+    id: crypto.randomUUID(),
+    type: "divider",
+    settings: { ...DEFAULT_DIVIDER_SETTINGS },
+  };
+}
+
+export function emptyHeadingBlock(): HeadingBlock {
+  return {
+    id: crypto.randomUUID(),
+    type: "heading",
+    settings: { ...DEFAULT_HEADING_SETTINGS, content: undefined },
+  };
+}
+
+export function emptyParagraphBlock(): ParagraphBlock {
+  return {
+    id: crypto.randomUUID(),
+    type: "paragraph",
+    settings: { ...DEFAULT_PARAGRAPH_SETTINGS, content: undefined },
+  };
+}
+
+export function emptyImageBlock(): ImageBlock {
+  return {
+    id: crypto.randomUUID(),
+    type: "image",
+    settings: { src: "", href: undefined },
+  };
+}
+
+export function emptyButtonBlock(): ButtonBlock {
+  return {
+    id: crypto.randomUUID(),
+    type: "button",
+    settings: { ...DEFAULT_BUTTON_SETTINGS, content: undefined },
+  };
+}
+
+export function emptyGridBlock(): GridBlock {
+  return {
+    id: crypto.randomUUID(),
+    type: "grid",
+    settings: { ...DEFAULT_GRID_SETTINGS, columnData: [] },
+  };
+}
+
+export function emptyRawHtmlBlock(): RawHtmlBlock {
+  return {
+    id: crypto.randomUUID(),
+    type: "raw_html",
+    settings: { html: "" },
+  };
+}
+
+export function emptyDiscountBlock(): DiscountBlock {
+  return {
+    id: crypto.randomUUID(),
+    type: "discount",
+    settings: { ...DEFAULT_DISCOUNT_SETTINGS, content: undefined },
+  };
+}
+
+export function emptyHeaderBlock(): HeaderBlock {
+  return {
+    id: crypto.randomUUID(),
+    type: "header",
+    settings: { ...DEFAULT_HEADER_SETTINGS },
+  };
+}
+
+export function emptyFooterBlock(): FooterBlock {
+  return {
+    id: crypto.randomUUID(),
+    type: "footer",
+    settings: {
+      ...DEFAULT_FOOTER_SETTINGS,
+      content: {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            attrs: { textAlign: null },
+            content: [
+              {
+                type: "text",
+                marks: [{ type: "bold" }],
+                text: "{{property_name}}",
+              },
+            ],
+          },
+          {
+            type: "paragraph",
+            attrs: { textAlign: null },
+            content: [{ type: "text", text: "{{property_address}}" }],
+          },
+          {
+            type: "paragraph",
+            attrs: { textAlign: null },
+            content: [
+              {
+                type: "text",
+                text: "{{property_telephone}} / {{property_email}} / {{property_website}}",
+              },
+            ],
+          },
+        ],
+      },
+    },
+  };
+}
+
+const UNSUBSCRIBE_LINK_CONTENT: Record<
+  string,
+  { prefix: string; linkText: string; suffix: string }
+> = {
+  en: {
+    prefix:
+      "If you don't want to receive this type of emails anymore, you can unsubscribe ",
+    linkText: "here",
+    suffix: ".",
+  },
+  it: {
+    prefix:
+      "Se non desideri più ricevere questo tipo di email, puoi annullare l'iscrizione ",
+    linkText: "qui",
+    suffix: ".",
+  },
+  de: {
+    prefix:
+      "Wenn Sie diese Art von E-Mails nicht mehr erhalten möchten, können Sie sich ",
+    linkText: "hier",
+    suffix: " abmelden.",
+  },
+  fr: {
+    prefix:
+      "Si vous ne souhaitez plus recevoir ce type d'e-mails, vous pouvez vous désabonner ",
+    linkText: "ici",
+    suffix: ".",
+  },
+  es: {
+    prefix:
+      "Si no deseas recibir más este tipo de correos, puedes darte de baja ",
+    linkText: "aquí",
+    suffix: ".",
+  },
+};
+
+export function emptyUnsubscribeLinkBlock(
+  language?: string,
+): UnsubscribeLinkBlock {
+  const { prefix, linkText, suffix } = (UNSUBSCRIBE_LINK_CONTENT[
+    language ?? "en"
+  ] ?? UNSUBSCRIBE_LINK_CONTENT.en)!;
+
+  return {
+    id: crypto.randomUUID(),
+    type: "unsubscribe_link",
+    settings: {
+      ...DEFAULT_UNSUBSCRIBE_LINK_SETTINGS,
+      content: {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            attrs: { textAlign: null },
+            content: [
+              {
+                type: "text",
+                text: prefix,
+              },
+              {
+                type: "text",
+                marks: [
+                  {
+                    type: "link",
+                    attrs: {
+                      href: "{{unsubscribe}}",
+                      target: "_blank",
+                      rel: "noopener noreferrer nofollow",
+                      class: "underline",
+                    },
+                  },
+                ],
+                text: linkText,
+              },
+              { type: "text", text: suffix },
+            ],
+          },
+        ],
+      },
+    },
+  };
+}
+
+export function emptyTopProductsBlock(): TopProductsBlock {
+  return {
+    id: crypto.randomUUID(),
+    type: "top_products",
+    settings: { ...DEFAULT_TOP_PRODUCTS_SETTINGS },
+  };
+}
+
+export function emptySocialsBlock(): SocialsBlock {
+  return {
+    id: crypto.randomUUID(),
+    type: "socials",
+    settings: {
+      backgroundColor: "transparent",
+      socials: {
+        facebook: { enabled: false, url: "" },
+        instagram: { enabled: false, url: "" },
+        tripadvisor: { enabled: false, url: "" },
+        tiktok: { enabled: false, url: "" },
+        google: { enabled: false, url: "" },
+      },
+    },
+  };
+}
+
+export function emptyEmailBlock(
+  type: EmailBlockType,
+  language?: string,
+): EmailBlock {
+  switch (type) {
+    case "spacer":
+      return emptySpacerBlock();
+    case "divider":
+      return emptyDividerBlock();
+    case "heading":
+      return emptyHeadingBlock();
+    case "paragraph":
+      return emptyParagraphBlock();
+    case "image":
+      return emptyImageBlock();
+    case "button":
+      return emptyButtonBlock();
+    case "grid":
+      return emptyGridBlock();
+    case "raw_html":
+      return emptyRawHtmlBlock();
+    case "discount":
+      return emptyDiscountBlock();
+    case "header":
+      return emptyHeaderBlock();
+    case "footer":
+      return emptyFooterBlock();
+    case "unsubscribe_link":
+      return emptyUnsubscribeLinkBlock(language);
+    case "socials":
+      return emptySocialsBlock();
+    case "top_products":
+      return emptyTopProductsBlock();
+    default:
+      throw new Error(`Unknown block type: ${type}`);
+  }
+}

package/src/types/index.ts

@@ -0,0 +1,15 @@
+export * from "./app.js";
+export * from "./utils.js";
+export * from "./language.js";
+export * from "./message.js";
+export * from "./api/index.js";
+export * from "./whatsappblocks.v1.js";
+export * from "./emailblocks.v1.js";
+export * from "./emailblocks.v1.defaults.js";
+export * from "./media.js";
+export * from "./meta-webhook.js";
+export * from "./meta-template.js";
+export * from "./submission-job.js";
+export * from "./kafka-events.js";
+export * from "./dynamic-values.js";
+export * from "./brand.js";

package/src/types/kafka-events.ts

@@ -0,0 +1,46 @@
+import type { MessageStatus, MessageGroupCategory } from "./message.js";
+
+export interface KafkaEventBase {
+  event_id: string;
+  event_type: string;
+  timestamp: string;
+  message_group_id: string;
+  owner?: string;
+  user_id: string;
+}
+
+export interface MessageGroupDeletedEvent extends KafkaEventBase {
+  event_type: "MESSAGE_GROUP_DELETED";
+  message_group_name: string;
+}
+
+export interface MessageStatusChangedEvent extends KafkaEventBase {
+  event_type: "MESSAGE_STATUS_CHANGED";
+  message_id: string;
+  language_id: string;
+  previous_status: MessageStatus;
+  new_status: MessageStatus;
+  was_approved: boolean;
+  source: "api" | "meta_webhook";
+  aggregated_status: Record<MessageStatus, number>;
+}
+
+export interface MessageGroupLanguageLostEvent extends KafkaEventBase {
+  event_type: "MESSAGE_GROUP_LANGUAGE_LOST";
+  language_id: string;
+}
+
+export interface MessageGroupCategoryChangedEvent extends KafkaEventBase {
+  event_type: "MESSAGE_GROUP_CATEGORY_CHANGED";
+  previous_category: MessageGroupCategory;
+  new_category: MessageGroupCategory;
+  source: "meta_webhook";
+}
+
+export type SmartnessKafkaEvent =
+  | MessageGroupDeletedEvent
+  | MessageStatusChangedEvent
+  | MessageGroupLanguageLostEvent
+  | MessageGroupCategoryChangedEvent;
+
+export type SmartnessKafkaEventType = SmartnessKafkaEvent["event_type"];