@jhits/plugin-newsletter 0.0.16 → 0.0.17

package/src/api/handlers/send-newsletter.ts

@@ -20,6 +20,7 @@ interface SmtpConfig {
     from: string;
     fromName: string;
     logoUrl?: string;
+    unsubscribeTranslations?: Record<string, string>;
 }
 
 async function getSmtpConfig(config: NewsletterApiConfig): Promise<SmtpConfig | null> {
@@ -37,6 +38,7 @@ async function getSmtpConfig(config: NewsletterApiConfig): Promise<SmtpConfig |
             from: smtpConfig.from,
             fromName: smtpConfig.fromName || '',
             logoUrl: smtpConfig.logoUrl || '',
+            unsubscribeTranslations: smtpConfig.unsubscribeTranslations || {},
         };
     }
     return null;
@@ -49,6 +51,41 @@ function getNewsletterFilter(idOrSlug: string) {
     return { slug: idOrSlug };
 }
 
+async function resolveBaseUrl(config: NewsletterApiConfig, language: string): Promise<string> {
+    try {
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const settings = db.collection('settings');
+        
+        // Try to get site config from plugin-website (stored in 'settings' collection with identifier 'site_config')
+        const siteConfig = await settings.findOne({ identifier: 'site_config' });
+        
+        if (siteConfig && siteConfig.domainLocaleConfig && Array.isArray(siteConfig.domainLocaleConfig)) {
+            // Find domain for this locale
+            const localeConfig = siteConfig.domainLocaleConfig.find((c: any) => c.locale === language);
+            if (localeConfig && localeConfig.domain && localeConfig.domain !== 'undefined' && localeConfig.domain.trim() !== '') {
+                const domain = localeConfig.domain.trim();
+                // Add protocol if missing
+                if (!domain.startsWith('http')) {
+                    const protocol = domain.includes('localhost') ? 'http' : 'https';
+                    return `${protocol}://${domain}`;
+                }
+                return domain;
+            }
+        }
+    } catch (error) {
+        console.warn('[NewsletterAPI] Failed to resolve language-specific base URL:', error);
+    }
+
+    // Fallback to default, carefully checking for 'undefined' string
+    const fallback = process.env.NEXT_PUBLIC_SITE_URL;
+    if (fallback && fallback !== 'undefined' && fallback.trim() !== '') {
+        return fallback;
+    }
+    
+    return 'https://botanicsandyou.com';
+}
+
 export async function POST_SEND_NEWSLETTER(
     req: NextRequest,
     idOrSlug: string,
@@ -123,7 +160,19 @@ export async function POST_SEND_NEWSLETTER(
             connectionTimeout: 30000,
         });
 
-        const baseUrl = config.baseUrl || 'http://localhost:3001';
+        // Resolve base URL based on language settings from plugin-website
+        const baseUrl = await resolveBaseUrl(config, language);
+        
+        // Final sanity check - if domain is STILL undefined, stop sending and ask user for domain
+        if (baseUrl.includes('undefined')) {
+            return NextResponse.json(
+                { 
+                    error: 'Domain not configured for this language. Please define your website domain first.',
+                    code: 'DOMAIN_MISSING'
+                },
+                { status: 400 }
+            );
+        }
         
         let logoAttachment: any = undefined;
         let logoSrc = smtpConfig.logoUrl || `${baseUrl}/logo_black.svg`;
@@ -188,25 +237,35 @@ export async function POST_SEND_NEWSLETTER(
                 const subscriber = isTest ? null : await subscribers.findOne({ email });
                 const subscriberLang = subscriber?.language || language;
                 const subscriberSlug = slugs[subscriberLang] || slugs.en;
-                const unsubscribeUrl = `${baseUrl}${subscriberSlug}?email=${encodeURIComponent(email)}`;
                 
-                return { email, unsubscribeUrl };
+                // Resolve correct base URL for this specific subscriber's language
+                const subscriberBaseUrl = await resolveBaseUrl(config, subscriberLang);
+                const unsubscribeUrl = `${subscriberBaseUrl}${subscriberSlug}?email=${encodeURIComponent(email)}`;
+                
+                return { email, unsubscribeUrl, subscriberLang, subscriberBaseUrl };
             })
         );
 
         let successCount = 0;
         let failedCount = 0;
 
-        for (const { email, unsubscribeUrl } of recipientsWithUrls) {
+        for (const { email, unsubscribeUrl, subscriberLang, subscriberBaseUrl } of recipientsWithUrls) {
             try {
+                // Get unsubscribe text (Priority: metadata manual override > global SMTP translation > hardcoded localized default)
+                const globalTranslations = smtpConfig.unsubscribeTranslations || {};
+                const hardcodedDefaults: Record<string, string> = { en: 'Unsubscribe', nl: 'Afmelden', sv: 'Avanmälan' };
+                const defaultText = globalTranslations[subscriberLang] || hardcodedDefaults[subscriberLang] || hardcodedDefaults.en;
+                const unsubscribeText = metadata?.unsubscribeText || defaultText;
+
                 const html = generateNewsletterEmailHtml(
                     blocks,
                     { subject: metadata.subject || '', previewText: metadata.previewText || '' },
                     {
-                        baseUrl,
-                        locale: language,
+                        baseUrl: subscriberBaseUrl,
+                        locale: subscriberLang,
                         logoUrl: logoSrc,
                         unsubscribeUrl,
+                        unsubscribeText,
                         footerText: `© ${new Date().getFullYear()} ${smtpConfig.fromName || 'Botanics & You'}`,
                     }
                 );

package/src/api/handlers/settings.ts

@@ -120,6 +120,11 @@ export async function GET_SMTP_SETTINGS(
                 fromName: '',
                 primaryLanguage: 'en',
                 logoUrl: '',
+                unsubscribeTranslations: {
+                    en: 'Unsubscribe',
+                    nl: 'Afmelden',
+                    sv: 'Avanmälan',
+                },
             });
         }
 
@@ -132,6 +137,11 @@ export async function GET_SMTP_SETTINGS(
             fromName: smtpConfig.fromName || '',
             primaryLanguage: smtpConfig.primaryLanguage || 'en',
             logoUrl: smtpConfig.logoUrl || '',
+            unsubscribeTranslations: smtpConfig.unsubscribeTranslations || {
+                en: 'Unsubscribe',
+                nl: 'Afmelden',
+                sv: 'Avanmälan',
+            },
         });
     } catch (error: any) {
         console.error('[NewsletterAPI] GET_SMTP_SETTINGS error:', error);
@@ -178,6 +188,7 @@ export async function POST_SMTP_SETTINGS(
                     fromName: body.fromName || '',
                     primaryLanguage: body.primaryLanguage || 'en',
                     logoUrl: body.logoUrl || '',
+                    unsubscribeTranslations: body.unsubscribeTranslations || {},
                     updatedAt: new Date(),
                     updatedBy: userId,
                 },
@@ -217,6 +228,41 @@ function getSmtpConfigFromDb(config: NewsletterApiConfig): Promise<{ host: strin
     })();
 }
 
+async function resolveBaseUrl(config: NewsletterApiConfig, language: string): Promise<string> {
+    try {
+        const dbConnection = await config.getDb();
+        const db = dbConnection.db();
+        const settings = db.collection('settings');
+
+        // Try to get site config from plugin-website (stored in 'settings' collection with identifier 'site_config')
+        const siteConfig = await settings.findOne({ identifier: 'site_config' });
+
+        if (siteConfig && siteConfig.domainLocaleConfig && Array.isArray(siteConfig.domainLocaleConfig)) {
+            // Find domain for this locale
+            const localeConfig = siteConfig.domainLocaleConfig.find((c: any) => c.locale === language);
+            if (localeConfig && localeConfig.domain && localeConfig.domain !== 'undefined' && localeConfig.domain.trim() !== '') {
+                const domain = localeConfig.domain.trim();
+                // Add protocol if missing
+                if (!domain.startsWith('http')) {
+                    const protocol = domain.includes('localhost') ? 'http' : 'https';
+                    return `${protocol}://${domain}`;
+                }
+                return domain;
+            }
+        }
+    } catch (error) {
+        console.warn('[NewsletterAPI] Failed to resolve language-specific base URL:', error);
+    }
+
+    // Fallback to default, carefully checking for 'undefined' string
+    const fallback = process.env.NEXT_PUBLIC_SITE_URL;
+    if (fallback && fallback !== 'undefined' && fallback.trim() !== '') {
+        return fallback;
+    }
+
+    return 'https://botanicsandyou.com';
+}
+
 export async function POST_TEST_EMAIL(
     req: NextRequest,
     config: NewsletterApiConfig
@@ -267,8 +313,20 @@ export async function POST_TEST_EMAIL(
             logoExists = fs.existsSync(altPath);
         }
 
-        const baseUrl = config.baseUrl || 'http://localhost:3001';
-        
+        // Resolve base URL based on language settings from plugin-website
+        const baseUrl = await resolveBaseUrl(config, language);
+
+        // Final sanity check - if domain is STILL undefined, stop sending and ask user for domain
+        if (baseUrl.includes('undefined')) {
+            return NextResponse.json(
+                { 
+                    error: 'Domain not configured for this language. Please define your website domain first.',
+                    code: 'DOMAIN_MISSING'
+                },
+                { status: 400 }
+            );
+        }
+
         let logoAttachment: any = undefined;
         let logoSrc = smtpConfig.logoUrl || `${baseUrl}/logo_black.svg`;
         

package/src/index.tsx

@@ -15,6 +15,7 @@ import { SettingsView } from './views/SettingsView';
 import { NewsletterManagerView } from './views/NewsletterManager';
 import { NewsletterEditorView } from './views/NewsletterEditor';
 import { editorStateToAPI } from './lib/mappers/apiMapper';
+import { resolvePluginConfig } from './lib/utils/config-resolver';
 
 /**
  * Plugin Props Interface
@@ -35,109 +36,48 @@ export interface PluginProps {
         /** Background color for dark mode (optional) */
         dark?: string;
     };
+    /** Localized strings for modular blocks in the editor */
+    translations?: Record<string, any>;
+    /** Global translations for unsubscribe text */
+    unsubscribeTranslations?: Record<string, string>;
 }
 
+/**
+ * Client-facing configuration type
+ * Allows partial overrides of plugin behavior
+ */
+export type NewsletterPluginConfig = Partial<Omit<PluginProps, 'subPath' | 'siteId' | 'locale'>> & {
+    customBlocks?: ClientBlockDefinition[];
+    darkMode?: boolean;
+    backgroundColors?: {
+        light: string;
+        dark?: string;
+    };
+    translations?: Record<string, any>;
+    unsubscribeTranslations?: Record<string, string>;
+    emailConfig?: {
+        logoUrl?: string;
+        logoAlt?: string;
+        footerText?: string;
+        primaryColor?: string;
+    };
+};
+
 /**
  * Main Router Component
  * Handles routing within the newsletter plugin
- * 
- * Client Handshake:
- * - Client apps can pass customBlocks via props
- * - Or via window.__JHITS_PLUGIN_PROPS__['plugin-newsletter'].customBlocks
- * - The EditorProvider will automatically register these blocks
  */
 export default function NewsletterPlugin(props: PluginProps) {
-    const { subPath, siteId, locale, customBlocks: propsCustomBlocks, darkMode: propsDarkMode, backgroundColors: propsBackgroundColors } = props;
-    
-    // Get custom blocks from props or window global (client app injection point)
-    const customBlocks = useMemo(() => {
-        // First, try props
-        if (propsCustomBlocks && propsCustomBlocks.length > 0) {
-            return propsCustomBlocks;
-        }
-        
-        // Fallback to window global (for client app injection)
-        if (typeof window !== 'undefined' && (window as any).__JHITS_PLUGIN_PROPS__) {
-            const pluginProps = (window as any).__JHITS_PLUGIN_PROPS__['plugin-newsletter'];
-            if (pluginProps?.customBlocks) {
-                return pluginProps.customBlocks as ClientBlockDefinition[];
-            }
-        }
-        
-        return [];
-    }, [propsCustomBlocks]);
-    
-    // Get dark mode setting from props, localStorage (dev settings), or window global
-    // Priority: localStorage (dev) > props > window global > default
-    const darkMode = useMemo(() => {
-        // First, check localStorage for dev settings (highest priority for dev)
-        if (typeof window !== 'undefined') {
-            try {
-                const saved = localStorage.getItem('__JHITS_PLUGIN_NEWSLETTER_CONFIG__');
-                if (saved) {
-                    const config = JSON.parse(saved);
-                    if (config.darkMode !== undefined) {
-                        return config.darkMode as boolean;
-                    }
-                }
-            } catch (e) {
-                // Ignore localStorage errors
-            }
-        }
-        
-        // Then try props
-        if (propsDarkMode !== undefined) {
-            return propsDarkMode;
-        }
-        
-        // Fallback to window global if prop not provided
-        if (typeof window !== 'undefined' && (window as any).__JHITS_PLUGIN_PROPS__) {
-            const pluginProps = (window as any).__JHITS_PLUGIN_PROPS__['plugin-newsletter'];
-            if (pluginProps?.darkMode !== undefined) {
-                return pluginProps.darkMode as boolean;
-            }
-        }
-        
-        return true; // Default to dark mode enabled
-    }, [propsDarkMode]);
-    
-    // Get background colors from props, localStorage (dev settings), or window global
-    // Priority: localStorage (dev) > props > window global
-    const backgroundColors = useMemo(() => {
-        // First, check localStorage for dev settings (highest priority for dev)
-        if (typeof window !== 'undefined') {
-            try {
-                const saved = localStorage.getItem('__JHITS_PLUGIN_NEWSLETTER_CONFIG__');
-                if (saved) {
-                    const config = JSON.parse(saved);
-                    if (config.backgroundColors) {
-                        return config.backgroundColors;
-                    }
-                }
-            } catch (e) {
-                // Ignore localStorage errors
-            }
-        }
-        
-        // Then try props
-        if (propsBackgroundColors) {
-            return propsBackgroundColors;
-        }
-        
-        // Fallback to window global
-        if (typeof window !== 'undefined' && (window as any).__JHITS_PLUGIN_PROPS__) {
-            const pluginProps = (window as any).__JHITS_PLUGIN_PROPS__['plugin-newsletter'];
-            if (pluginProps?.backgroundColors) {
-                return pluginProps.backgroundColors as { light: string; dark?: string };
-            }
-        }
-        
-        return undefined;
-    }, [propsBackgroundColors]);
+    const { subPath, siteId, locale } = props;
     
+    // Resolve configuration from multiple sources (Props, Window, Storage)
+    const config = useMemo(() => resolvePluginConfig(props), [props]);
+    const { customBlocks, darkMode, backgroundColors, translations, emailConfig, unsubscribeTranslations } = config;
+
     const route = subPath[0] || 'newsletters';
-    
-    // Listen for config updates from settings screen
+    const newsletterId = subPath[1];
+
+    // Listen for config updates (e.g. from settings screen)
     useEffect(() => {
         if (typeof window === 'undefined') return;
         
@@ -158,12 +98,14 @@ export default function NewsletterPlugin(props: PluginProps) {
             return <NewsletterManagerView siteId={siteId} locale={locale} />;
         
         case 'editor':
-            const newsletterId = subPath[1];
             return (
                 <EditorProvider 
                     customBlocks={customBlocks} 
                     darkMode={darkMode} 
                     backgroundColors={backgroundColors}
+                    translations={translations}
+                    emailConfig={emailConfig}
+                    unsubscribeTranslations={unsubscribeTranslations}
                     onSave={async (state, extraData?: { language?: string }) => {
                         // Save to API - create new or update existing newsletter
                         const originalId = newsletterId || state.slug;
@@ -180,7 +122,6 @@ export default function NewsletterPlugin(props: PluginProps) {
                         
                         // If we have an id, try to update first
                         if (originalId) {
-                            console.log('[NewsletterPlugin] Attempting to update newsletter with id:', originalId);
                             const updateResponse = await fetch(`/api/plugin-newsletter/newsletters/${originalId}${langParam}`, {
                                 method: 'PUT',
                                 headers: { 'Content-Type': 'application/json' },
@@ -190,32 +131,15 @@ export default function NewsletterPlugin(props: PluginProps) {
                             
                             if (updateResponse.ok) {
                                 const result = await updateResponse.json();
-                                // If the id changed, update the URL
                                 if (result.id && result.id !== originalId) {
                                     window.history.replaceState(null, '', `/dashboard/newsletter/editor/${result.id}`);
                                 }
                                 return result;
                             }
-                            
-                            // If 404, newsletter doesn't exist, create a new one
-                            if (updateResponse.status === 404) {
-                                console.log('[NewsletterPlugin] Newsletter not found, creating new newsletter');
-                            } else {
-                                // Other error, throw it
-                                const error = await updateResponse.json();
-                                console.error('[NewsletterPlugin] Save failed:', {
-                                    status: updateResponse.status,
-                                    statusText: updateResponse.statusText,
-                                    error,
-                                });
-                                const errorMessage = error.message || error.error || 'Failed to save newsletter';
-                                throw new Error(errorMessage);
-                            }
                         }
                         
-                        // Create new newsletter (either no id or update returned 404)
-                        console.log('[NewsletterPlugin] Creating new newsletter');
-                        const createResponse = await fetch('/api/plugin-newsletter/newsletters/new', {
+                        // Create new newsletter
+                        const createResponse = await fetch(`/api/plugin-newsletter/newsletters/new${langParam}`, {
                             method: 'POST',
                             headers: { 'Content-Type': 'application/json' },
                             credentials: 'include',
@@ -224,17 +148,11 @@ export default function NewsletterPlugin(props: PluginProps) {
                         
                         if (!createResponse.ok) {
                             const error = await createResponse.json();
-                            console.error('[NewsletterPlugin] Create failed:', {
-                                status: createResponse.status,
-                                statusText: createResponse.statusText,
-                                error,
-                            });
                             const errorMessage = error.message || error.error || 'Failed to create newsletter';
                             throw new Error(errorMessage);
                         }
                         
                         const result = await createResponse.json();
-                        // Update the URL to the new newsletter's id
                         if (result.id) {
                             window.history.replaceState(null, '', `/dashboard/newsletter/editor/${result.id}`);
                         }
@@ -251,11 +169,11 @@ export default function NewsletterPlugin(props: PluginProps) {
                     customBlocks={customBlocks} 
                     darkMode={darkMode} 
                     backgroundColors={backgroundColors}
+                    translations={translations}
+                    emailConfig={emailConfig}
+                    unsubscribeTranslations={unsubscribeTranslations}
                     onSave={async (state, extraData?: { language?: string }) => {
-                        // Save to API - create new newsletter
                         const apiData = editorStateToAPI(state);
-                        
-                        // Include language in metadata if provided
                         if (extraData?.language) {
                             apiData.metadata = apiData.metadata || {};
                             apiData.metadata.lang = extraData.language;
@@ -272,7 +190,6 @@ export default function NewsletterPlugin(props: PluginProps) {
                             throw new Error(error.message || 'Failed to create newsletter');
                         }
                         const result = await response.json();
-                        // Update the URL to the new newsletter's slug
                         if (result.slug) {
                             window.history.replaceState(null, '', `/dashboard/newsletter/editor/${result.slug}`);
                         }
@@ -292,6 +209,9 @@ export default function NewsletterPlugin(props: PluginProps) {
                     customBlocks={customBlocks} 
                     darkMode={darkMode} 
                     backgroundColors={backgroundColors}
+                    translations={translations}
+                    emailConfig={emailConfig}
+                    unsubscribeTranslations={unsubscribeTranslations}
                     isWelcomeEmail={true}
                     onSave={async (state, extraData?: { language?: string }) => {
                         const apiData = editorStateToAPI(state);
@@ -321,36 +241,10 @@ export default function NewsletterPlugin(props: PluginProps) {
     }
 }
 
-// Export for use as default
+// Export symbols as needed
 export { NewsletterPlugin as Index };
-
-// Export types for client applications
-export type {
-    Block,
-    BlockTypeDefinition,
-    ClientBlockDefinition,
-    RichTextFormattingConfig,
-    BlockEditProps,
-    BlockPreviewProps,
-    IBlockComponent,
-} from './types/block';
-
-// Export newsletter types
-export type {
-    Newsletter,
-    NewsletterStatus,
-    NewsletterMetadata,
-    NewsletterListItem,
-    NewsletterFilterOptions,
-} from './types/newsletter';
-
-// Export initialization utility for easy setup
+export type { Block, ClientBlockDefinition } from './types/block';
 export { initNewsletterPlugin } from './init';
-export type { NewsletterPluginConfig } from './init';
-
-// Export editor state management
-export { EditorProvider, useEditor } from './state/EditorContext';
-export type { EditorProviderProps, EditorState, EditorContextValue } from './state';
-
-// Export block registry
 export { blockRegistry } from './registry';
+export { EditorProvider, useEditor } from './state/EditorContext';
+export { BlockRenderer, BlocksRenderer } from './lib/blocks/BlockRenderer';

package/src/lib/blocks/BlockRenderer.tsx

@@ -12,6 +12,7 @@ import React from 'react';
 import { Block, BlockPreviewProps } from '../../types/block';
 import { blockRegistry } from '../../registry/BlockRegistry';
 import { getChildBlocks } from '../utils/blockHelpers';
+import { useEditor } from '../../state/EditorContext';
 
 /**
  * Block Renderer Props
@@ -40,6 +41,13 @@ export function BlockRenderer({
     customRenderers,
     context = {}
 }: BlockRendererProps) {
+    // We access the context to ensure re-render when blocks are registered
+    try {
+        useEditor();
+    } catch (e) {
+        // Not in editor context (e.g. preview bridge)
+    }
+
     // Check for custom renderer override first
     if (customRenderers?.has(block.type)) {
         const CustomRenderer = customRenderers.get(block.type)!;
@@ -47,9 +55,15 @@ export function BlockRenderer({
     }
 
     // Get block definition from registry
-    const definition = blockRegistry.get(block.type);
+    let definition = blockRegistry.get(block.type);
+    
+    // If not found, try one last immediate re-check of the global window registry
+    if (!definition && typeof window !== 'undefined' && (window as any).__JHITS_NEWSLETTER_REGISTRY__) {
+        definition = (window as any).__JHITS_NEWSLETTER_REGISTRY__.get(block.type);
+    }
+
     if (!definition) {
-        console.warn(`Block type "${block.type}" not found in registry. Available types:`, 
+        console.warn(`[BlockRenderer] Unknown block type: ${block.type}. Registry contains:`, 
             blockRegistry.getAll().map(b => b.type).join(', '));
         return (
             <div className="p-4 border border-red-300 bg-red-50 rounded">