@fufulog/brevomorphic-cms-sdk 1.0.1 → 1.0.3

package/dist/brevoClient.js

@@ -127,11 +127,20 @@ export class BrevoClient {
      */
     async sendEmail(params) {
         try {
-            await this.client.post('/smtp/email', {
+            const replyToEmail = params.variables?.replyToEmail;
+            const replyToName = params.variables?.replyToName;
+            const payload = {
                 templateId: params.templateId,
                 to: [{ email: params.to }],
                 params: params.variables || {},
-            });
+            };
+            if (replyToEmail) {
+                payload.replyTo = {
+                    email: replyToEmail,
+                    ...(replyToName ? { name: replyToName } : {}),
+                };
+            }
+            await this.client.post('/smtp/email', payload);
         }
         catch (error) {
             const msg = error.response?.data?.message || error.message;

package/dist/repository.js

@@ -33,6 +33,9 @@ export class EmailTemplateRepository {
      * Fetch all event-to-template mappings from the local database
      */
     async getAllMappings() {
+        if (this.dbType === 'custom') {
+            return this.dbClient.getAllMappings();
+        }
         if (this.dbType === 'firestore') {
             const snapshot = await this.dbClient.collection(this.tableName).get();
             const mappings = [];
@@ -64,6 +67,9 @@ export class EmailTemplateRepository {
      * Fetch mapping for a specific template ID
      */
     async getMappingByTemplateId(templateId) {
+        if (this.dbType === 'custom') {
+            return this.dbClient.getMappingByTemplateId(templateId);
+        }
         if (this.dbType === 'firestore') {
             const doc = await this.dbClient.collection(this.tableName).doc(templateId.toString()).get();
             if (!doc.exists)
@@ -98,6 +104,9 @@ export class EmailTemplateRepository {
      * Assumes we want the active template linked to this event.
      */
     async getActiveMappingByEvent(eventName) {
+        if (this.dbType === 'custom') {
+            return this.dbClient.getActiveMappingByEvent(eventName);
+        }
         if (this.dbType === 'firestore') {
             const snapshot = await this.dbClient
                 .collection(this.tableName)
@@ -140,6 +149,9 @@ export class EmailTemplateRepository {
      * Upsert a mapping (insert or update template config)
      */
     async upsertMapping(templateId, eventName, isActive) {
+        if (this.dbType === 'custom') {
+            return this.dbClient.upsertMapping(templateId, eventName, isActive);
+        }
         if (this.dbType === 'firestore') {
             await this.dbClient
                 .collection(this.tableName)
@@ -186,6 +198,9 @@ export class EmailTemplateRepository {
      * If mapping does not exist, insert blank inactive mapping.
      */
     async insertJITMapping(templateId) {
+        if (this.dbType === 'custom') {
+            return this.dbClient.insertJITMapping(templateId);
+        }
         if (this.dbType === 'firestore') {
             const docRef = this.dbClient.collection(this.tableName).doc(templateId.toString());
             const doc = await docRef.get();

package/dist/types.d.ts

@@ -40,7 +40,7 @@ export interface SDKConfig {
         name?: string;
         email: string;
     };
-    dbType: 'postgres' | 'mysql' | 'firestore';
+    dbType: 'postgres' | 'mysql' | 'firestore' | 'custom';
     /**
      * For 'postgres': an object satisfying { query: (sql, params) => Promise<{ rows: any[] }> } or equivalent
      * For 'mysql': an object satisfying { query: (sql, params) => Promise<[any[], any]> } or equivalent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fufulog/brevomorphic-cms-sdk",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "description": "SDK library to bootstrap Brevo email templates and manage local mappings in Postgres, MySQL, or Firestore",
   "main": "dist/index.js",

package/react/BrevoWysiwyg.tsx

@@ -187,7 +187,6 @@ export default function BrevoWysiwyg({
 
   return (
     <div className={wrapperClasses}>
-      {/* ── Toolbar ── */}
       <div className="brevo-toolbar">
         <div className="brevo-toolbar__group">
           <button

package/src/brevoClient.ts

@@ -158,11 +158,23 @@ export class BrevoClient {
     variables?: Record<string, any>;
   }): Promise<void> {
     try {
-      await this.client.post('/smtp/email', {
+      const replyToEmail = params.variables?.replyToEmail;
+      const replyToName = params.variables?.replyToName;
+
+      const payload: any = {
         templateId: params.templateId,
         to: [{ email: params.to }],
         params: params.variables || {},
-      });
+      };
+
+      if (replyToEmail) {
+        payload.replyTo = {
+          email: replyToEmail,
+          ...(replyToName ? { name: replyToName } : {}),
+        };
+      }
+
+      await this.client.post('/smtp/email', payload);
     } catch (error: any) {
       const msg = error.response?.data?.message || error.message;
       throw new Error(`Failed to send event email via Brevo: ${msg}`);

package/src/repository.ts

@@ -1,7 +1,7 @@
 import { SDKConfig, LocalMapping } from './types.js';
 
 export class EmailTemplateRepository {
-  private dbType: 'postgres' | 'mysql' | 'firestore';
+  private dbType: 'postgres' | 'mysql' | 'firestore' | 'custom';
   private dbClient: any;
   private tableName: string;
 
@@ -38,6 +38,9 @@ export class EmailTemplateRepository {
    * Fetch all event-to-template mappings from the local database
    */
   async getAllMappings(): Promise<LocalMapping[]> {
+    if (this.dbType === 'custom') {
+      return this.dbClient.getAllMappings();
+    }
     if (this.dbType === 'firestore') {
       const snapshot = await this.dbClient.collection(this.tableName).get();
       const mappings: LocalMapping[] = [];
@@ -69,6 +72,9 @@ export class EmailTemplateRepository {
    * Fetch mapping for a specific template ID
    */
   async getMappingByTemplateId(templateId: number): Promise<LocalMapping | null> {
+    if (this.dbType === 'custom') {
+      return this.dbClient.getMappingByTemplateId(templateId);
+    }
     if (this.dbType === 'firestore') {
       const doc = await this.dbClient.collection(this.tableName).doc(templateId.toString()).get();
       if (!doc.exists) return null;
@@ -102,6 +108,9 @@ export class EmailTemplateRepository {
    * Assumes we want the active template linked to this event.
    */
   async getActiveMappingByEvent(eventName: string): Promise<LocalMapping | null> {
+    if (this.dbType === 'custom') {
+      return this.dbClient.getActiveMappingByEvent(eventName);
+    }
     if (this.dbType === 'firestore') {
       const snapshot = await this.dbClient
         .collection(this.tableName)
@@ -145,6 +154,9 @@ export class EmailTemplateRepository {
    * Upsert a mapping (insert or update template config)
    */
   async upsertMapping(templateId: number, eventName: string, isActive: boolean): Promise<void> {
+    if (this.dbType === 'custom') {
+      return this.dbClient.upsertMapping(templateId, eventName, isActive);
+    }
     if (this.dbType === 'firestore') {
       await this.dbClient
         .collection(this.tableName)
@@ -193,6 +205,9 @@ export class EmailTemplateRepository {
    * If mapping does not exist, insert blank inactive mapping.
    */
   async insertJITMapping(templateId: number): Promise<void> {
+    if (this.dbType === 'custom') {
+      return this.dbClient.insertJITMapping(templateId);
+    }
     if (this.dbType === 'firestore') {
       const docRef = this.dbClient.collection(this.tableName).doc(templateId.toString());
       const doc = await docRef.get();

package/src/types.ts

@@ -46,7 +46,7 @@ export interface SDKConfig {
     name?: string;
     email: string;
   };
-  dbType: 'postgres' | 'mysql' | 'firestore';
+  dbType: 'postgres' | 'mysql' | 'firestore' | 'custom';
   /**
    * For 'postgres': an object satisfying { query: (sql, params) => Promise<{ rows: any[] }> } or equivalent
    * For 'mysql': an object satisfying { query: (sql, params) => Promise<[any[], any]> } or equivalent

package/svelte/BrevoWysiwyg.svelte

@@ -26,11 +26,11 @@
 -->
 
 <script>
-  import { onMount, createEventDispatcher, tick } from 'svelte';
+  import { onMount, createEventDispatcher, tick } from "svelte";
 
-  export let value = '';
+  export let value = "";
   export let variables = [];
-  export let placeholder = 'Start designing your email template...';
+  export let placeholder = "Start designing your email template...";
   export let disabled = false;
 
   const dispatch = createEventDispatcher();
@@ -38,7 +38,7 @@
   let editorEl;
   let sourceEl;
   let isSourceMode = false;
-  let sourceCode = '';
+  let sourceCode = "";
   let showVariableMenu = false;
   let showHeadingMenu = false;
   let isFocused = false;
@@ -65,20 +65,20 @@
     const raw = editorEl.innerHTML;
     // Restore any accidentally encoded Twig brackets
     const cleaned = raw
-      .replace(/&lbrace;/g, '{')
-      .replace(/&rbrace;/g, '}')
-      .replace(/&#123;/g, '{')
-      .replace(/&#125;/g, '}')
-      .replace(/&#37;/g, '%')
-      .replace(/&percnt;/g, '%');
+      .replace(/&lbrace;/g, "{")
+      .replace(/&rbrace;/g, "}")
+      .replace(/&#123;/g, "{")
+      .replace(/&#125;/g, "}")
+      .replace(/&#37;/g, "%")
+      .replace(/&percnt;/g, "%");
     value = cleaned;
-    dispatch('change', cleaned);
+    dispatch("change", cleaned);
   }
 
   function syncFromSource() {
     sourceCode = sourceEl?.value ?? sourceCode;
     value = sourceCode;
-    dispatch('change', value);
+    dispatch("change", value);
   }
 
   async function toggleSourceMode() {
@@ -108,24 +108,24 @@
 
   function updateActiveFormats() {
     activeFormats = {
-      bold: document.queryCommandState('bold'),
-      italic: document.queryCommandState('italic'),
-      underline: document.queryCommandState('underline'),
-      strikeThrough: document.queryCommandState('strikeThrough'),
-      insertOrderedList: document.queryCommandState('insertOrderedList'),
-      insertUnorderedList: document.queryCommandState('insertUnorderedList'),
+      bold: document.queryCommandState("bold"),
+      italic: document.queryCommandState("italic"),
+      underline: document.queryCommandState("underline"),
+      strikeThrough: document.queryCommandState("strikeThrough"),
+      insertOrderedList: document.queryCommandState("insertOrderedList"),
+      insertUnorderedList: document.queryCommandState("insertUnorderedList"),
     };
   }
 
   function insertHeading(tag) {
-    execCmd('formatBlock', tag);
+    execCmd("formatBlock", tag);
     showHeadingMenu = false;
   }
 
   function insertLink() {
     if (isSourceMode || disabled) return;
-    const url = prompt('Enter URL:');
-    if (url) execCmd('createLink', url);
+    const url = prompt("Enter URL:");
+    if (url) execCmd("createLink", url);
   }
 
   function insertVariable(variable) {
@@ -141,17 +141,18 @@
       sourceCode = before + twigExpr + after;
       sourceEl.value = sourceCode;
       value = sourceCode;
-      dispatch('change', value);
+      dispatch("change", value);
       // Restore cursor after inserted text
       tick().then(() => {
-        sourceEl.selectionStart = sourceEl.selectionEnd = start + twigExpr.length;
+        sourceEl.selectionStart = sourceEl.selectionEnd =
+          start + twigExpr.length;
         sourceEl.focus();
       });
     } else if (editorEl) {
       // Insert into contentEditable at cursor position
       editorEl.focus();
       // Use insertHTML to preserve Twig brackets exactly
-      document.execCommand('insertHTML', false, twigExpr);
+      document.execCommand("insertHTML", false, twigExpr);
       syncFromEditor();
     }
 
@@ -172,7 +173,7 @@
   }
 
   function closeMenus(e) {
-    if (!e.target.closest('.brevo-dropdown')) {
+    if (!e.target.closest(".brevo-dropdown")) {
       showVariableMenu = false;
       showHeadingMenu = false;
     }
@@ -181,7 +182,11 @@
 
 <svelte:window on:click={closeMenus} />
 
-<div class="brevo-wysiwyg" class:brevo-wysiwyg--disabled={disabled} class:brevo-wysiwyg--focused={isFocused}>
+<div
+  class="brevo-wysiwyg"
+  class:brevo-wysiwyg--disabled={disabled}
+  class:brevo-wysiwyg--focused={isFocused}
+>
   <!-- Toolbar -->
   <div class="brevo-toolbar">
     <div class="brevo-toolbar__group">
@@ -190,36 +195,36 @@
         class="brevo-btn"
         class:brevo-btn--active={activeFormats.bold}
         title="Bold"
-        on:click={() => execCmd('bold')}
-        {disabled}
-      ><strong>B</strong></button>
+        on:click={() => execCmd("bold")}
+        {disabled}><strong>B</strong></button
+      >
 
       <button
         type="button"
         class="brevo-btn"
         class:brevo-btn--active={activeFormats.italic}
         title="Italic"
-        on:click={() => execCmd('italic')}
-        {disabled}
-      ><em>I</em></button>
+        on:click={() => execCmd("italic")}
+        {disabled}><em>I</em></button
+      >
 
       <button
         type="button"
         class="brevo-btn"
         class:brevo-btn--active={activeFormats.underline}
         title="Underline"
-        on:click={() => execCmd('underline')}
-        {disabled}
-      ><u>U</u></button>
+        on:click={() => execCmd("underline")}
+        {disabled}><u>U</u></button
+      >
 
       <button
         type="button"
         class="brevo-btn"
         class:brevo-btn--active={activeFormats.strikeThrough}
         title="Strikethrough"
-        on:click={() => execCmd('strikeThrough')}
-        {disabled}
-      ><s>S</s></button>
+        on:click={() => execCmd("strikeThrough")}
+        {disabled}><s>S</s></button
+      >
     </div>
 
     <div class="brevo-toolbar__divider"></div>
@@ -230,16 +235,27 @@
         type="button"
         class="brevo-btn"
         title="Headings"
-        on:click|stopPropagation={() => { showHeadingMenu = !showHeadingMenu; showVariableMenu = false; }}
-        {disabled}
-      >H ▾</button>
+        on:click|stopPropagation={() => {
+          showHeadingMenu = !showHeadingMenu;
+          showVariableMenu = false;
+        }}
+        {disabled}>H ▾</button
+      >
 
       {#if showHeadingMenu}
         <div class="brevo-dropdown__menu">
-          <button type="button" on:click={() => insertHeading('h1')}>Heading 1</button>
-          <button type="button" on:click={() => insertHeading('h2')}>Heading 2</button>
-          <button type="button" on:click={() => insertHeading('h3')}>Heading 3</button>
-          <button type="button" on:click={() => insertHeading('p')}>Paragraph</button>
+          <button type="button" on:click={() => insertHeading("h1")}
+            >Heading 1</button
+          >
+          <button type="button" on:click={() => insertHeading("h2")}
+            >Heading 2</button
+          >
+          <button type="button" on:click={() => insertHeading("h3")}
+            >Heading 3</button
+          >
+          <button type="button" on:click={() => insertHeading("p")}
+            >Paragraph</button
+          >
         </div>
       {/if}
     </div>
@@ -252,31 +268,55 @@
         class="brevo-btn"
         class:brevo-btn--active={activeFormats.insertUnorderedList}
         title="Bullet List"
-        on:click={() => execCmd('insertUnorderedList')}
-        {disabled}
-      >• List</button>
+        on:click={() => execCmd("insertUnorderedList")}
+        {disabled}>• List</button
+      >
 
       <button
         type="button"
         class="brevo-btn"
         class:brevo-btn--active={activeFormats.insertOrderedList}
         title="Numbered List"
-        on:click={() => execCmd('insertOrderedList')}
-        {disabled}
-      >1. List</button>
+        on:click={() => execCmd("insertOrderedList")}
+        {disabled}>1. List</button
+      >
     </div>
 
     <div class="brevo-toolbar__divider"></div>
 
     <div class="brevo-toolbar__group">
-      <button type="button" class="brevo-btn" title="Align Left" on:click={() => execCmd('justifyLeft')} {disabled}>⫷</button>
-      <button type="button" class="brevo-btn" title="Align Center" on:click={() => execCmd('justifyCenter')} {disabled}>⫿</button>
-      <button type="button" class="brevo-btn" title="Align Right" on:click={() => execCmd('justifyRight')} {disabled}>⫸</button>
+      <button
+        type="button"
+        class="brevo-btn"
+        title="Align Left"
+        on:click={() => execCmd("justifyLeft")}
+        {disabled}>⫷</button
+      >
+      <button
+        type="button"
+        class="brevo-btn"
+        title="Align Center"
+        on:click={() => execCmd("justifyCenter")}
+        {disabled}>⫿</button
+      >
+      <button
+        type="button"
+        class="brevo-btn"
+        title="Align Right"
+        on:click={() => execCmd("justifyRight")}
+        {disabled}>⫸</button
+      >
     </div>
 
     <div class="brevo-toolbar__divider"></div>
 
-    <button type="button" class="brevo-btn" title="Insert Link" on:click={insertLink} {disabled}>🔗</button>
+    <button
+      type="button"
+      class="brevo-btn"
+      title="Insert Link"
+      on:click={insertLink}
+      {disabled}>🔗</button
+    >
 
     <!-- Variable injector -->
     {#if variables.length > 0}
@@ -286,16 +326,20 @@
           type="button"
           class="brevo-btn brevo-btn--accent"
           title="Insert Variable"
-          on:click|stopPropagation={() => { showVariableMenu = !showVariableMenu; showHeadingMenu = false; }}
-          {disabled}
-        >&#123;&#123; &#125;&#125; Insert Variable ▾</button>
+          on:click|stopPropagation={() => {
+            showVariableMenu = !showVariableMenu;
+            showHeadingMenu = false;
+          }}
+          {disabled}>&#123;&#123; &#125;&#125; Insert Variable ▾</button
+        >
 
         {#if showVariableMenu}
           <div class="brevo-dropdown__menu brevo-dropdown__menu--variables">
             {#each variables as variable}
               <button type="button" on:click={() => insertVariable(variable)}>
                 <span class="brevo-var-label">{variable.label}</span>
-                <code class="brevo-var-key">{'{{ ' + variable.key + ' }}'}</code>
+                <code class="brevo-var-key">{"{{ " + variable.key + " }}"}</code
+                >
               </button>
             {/each}
           </div>
@@ -311,8 +355,8 @@
       class:brevo-btn--active={isSourceMode}
       title="Toggle Source View"
       on:click={toggleSourceMode}
-      {disabled}
-    >{isSourceMode ? '✎ Visual' : '&lt;/&gt; Source'}</button>
+      {disabled}>{isSourceMode ? "✎ Visual" : "</> Source"}</button
+    >
   </div>
 
   <!-- Editor Area -->
@@ -364,7 +408,7 @@
     --brevo-btn-hover: #2a2a4a;
     --brevo-btn-active: #3730a3;
     --brevo-radius: 8px;
-    --brevo-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
+    --brevo-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
 
     font-family: var(--brevo-font);
     border: 1.5px solid var(--brevo-border);
@@ -479,8 +523,14 @@
   }
 
   @keyframes brevo-dropdown-in {
-    from { opacity: 0; transform: translateY(-4px); }
-    to   { opacity: 1; transform: translateY(0); }
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 
   .brevo-dropdown__menu button {
@@ -541,12 +591,29 @@
     pointer-events: none;
   }
 
-  .brevo-editor :global(h1) { font-size: 1.8em; font-weight: 700; margin: 0.4em 0; }
-  .brevo-editor :global(h2) { font-size: 1.4em; font-weight: 600; margin: 0.4em 0; }
-  .brevo-editor :global(h3) { font-size: 1.15em; font-weight: 600; margin: 0.4em 0; }
-  .brevo-editor :global(a) { color: var(--brevo-accent-hover); text-decoration: underline; }
+  .brevo-editor :global(h1) {
+    font-size: 1.8em;
+    font-weight: 700;
+    margin: 0.4em 0;
+  }
+  .brevo-editor :global(h2) {
+    font-size: 1.4em;
+    font-weight: 600;
+    margin: 0.4em 0;
+  }
+  .brevo-editor :global(h3) {
+    font-size: 1.15em;
+    font-weight: 600;
+    margin: 0.4em 0;
+  }
+  .brevo-editor :global(a) {
+    color: var(--brevo-accent-hover);
+    text-decoration: underline;
+  }
   .brevo-editor :global(ul),
-  .brevo-editor :global(ol) { padding-left: 1.6em; }
+  .brevo-editor :global(ol) {
+    padding-left: 1.6em;
+  }
 
   /* ── Source ── */
   .brevo-source {
@@ -557,7 +624,7 @@
     border: none;
     background: #0d1117;
     color: #c9d1d9;
-    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+    font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
     font-size: 13px;
     line-height: 1.65;
     resize: vertical;