@jhits/plugin-website 0.0.13 → 0.0.15

package/dist/types/settings.d.ts

@@ -2,6 +2,11 @@
  * Website Settings Types
  */
 export type SupportedLocale = 'en' | 'sv' | 'nl';
+export interface DomainLocaleConfig {
+    domain: string;
+    locale: SupportedLocale;
+    allowUserOverride?: boolean;
+}
 export interface LocalizedContactInfo {
     physicalAddress?: string;
     phoneNumber?: string;
@@ -26,6 +31,7 @@ export interface WebsiteSettings {
     socials?: SocialLink[];
     localizedContactInfo?: Partial<Record<SupportedLocale, LocalizedContactInfo>>;
     localizedSocials?: Partial<Record<SupportedLocale, LocalizedSocialLink[]>>;
+    domainLocaleConfig?: DomainLocaleConfig[];
     updatedAt?: Date;
     createdAt?: Date;
 }

package/dist/types/settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../src/types/settings.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,MAAM,WAAW,oBAAoB;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,mBAAmB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAC9E,gBAAgB,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC;IAC3E,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,SAAS,CAAC,EAAE,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC7B,KAAK,EAAE,MAAM,OAAO,CAAC;QAAE,EAAE,EAAE,MAAM,GAAG,CAAA;KAAE,CAAC,CAAC;IACxC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB"}
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../src/types/settings.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,MAAM,WAAW,kBAAkB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,eAAe,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,oBAAoB;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,mBAAmB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAC9E,gBAAgB,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC;IAC3E,kBAAkB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC1C,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,SAAS,CAAC,EAAE,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC7B,KAAK,EAAE,MAAM,OAAO,CAAC;QAAE,EAAE,EAAE,MAAM,GAAG,CAAA;KAAE,CAAC,CAAC;IACxC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB"}

package/dist/views/SettingsView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsView.d.ts","sourceRoot":"","sources":["../../src/views/SettingsView.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAyBH,MAAM,WAAW,iBAAiB;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,iBAAiB,2CA2kBjE"}
+{"version":3,"file":"SettingsView.d.ts","sourceRoot":"","sources":["../../src/views/SettingsView.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAyBH,MAAM,WAAW,iBAAiB;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AA+MD,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,iBAAiB,2CAyejE"}

package/dist/views/SettingsView.js

@@ -5,7 +5,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
-import { Save, RefreshCw, Globe, Mail, Search, Settings2, Calendar } from 'lucide-react';
+import { Save, RefreshCw, Globe, Globe2, Mail, Search, Settings2, Calendar, Plus, Trash2, X, Edit3 } from 'lucide-react';
 import { FaFacebook, FaInstagram, FaLinkedin, FaPinterest, FaTiktok } from 'react-icons/fa';
 import { FaXTwitter } from 'react-icons/fa6';
 const AVAILABLE_LOCALES = [
@@ -21,11 +21,46 @@ const AVAILABLE_PLATFORMS = [
     { name: 'LinkedIn', icon: _jsx(FaLinkedin, { size: 18 }) },
     { name: 'TikTok', icon: _jsx(FaTiktok, { size: 18 }) },
 ];
+function DomainLanguagesCard({ config, onEdit }) {
+    return (_jsxs("section", { className: "bg-dashboard-bg p-6 rounded-3xl border border-dashboard-border", children: [_jsx("div", { className: "flex items-center justify-between border-b border-dashboard-border pb-4 mb-4", children: _jsxs("div", { className: "flex items-center gap-2 font-bold text-dashboard-text", children: [_jsx(Globe2, { size: 18, className: "text-primary" }), "Domain Languages"] }) }), _jsx("div", { className: "space-y-2", children: config && config.length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-2", children: config.map((entry, index) => (_jsxs("div", { className: "inline-flex items-center gap-2 px-3 py-1.5 bg-dashboard-card rounded-full border border-dashboard-border text-xs", children: [_jsx("span", { className: "font-medium text-dashboard-text", children: entry.domain }), _jsx("span", { className: "text-dashboard-text-secondary", children: "\u2192" }), _jsx("span", { children: AVAILABLE_LOCALES.find(l => l.code === entry.locale)?.flag }), _jsx("span", { className: "text-dashboard-text-secondary", children: entry.allowUserOverride ? '' : '🔒' })] }, index))) })) : (_jsx("p", { className: "text-xs text-dashboard-text-secondary", children: "No domain languages configured." })) }), _jsxs("button", { onClick: onEdit, className: "mt-4 w-full flex items-center justify-center gap-2 px-4 py-2 bg-primary text-white rounded-xl text-xs font-bold uppercase tracking-wider hover:bg-primary/90 transition-colors", children: [_jsx(Edit3, { size: 14 }), config?.length ? 'Edit Domains' : 'Add Domains'] })] }));
+}
+function DomainLanguagesModal({ isOpen, config, onSave, onClose, onSaveAndClose, isSaving = false }) {
+    const [tempConfig, setTempConfig] = useState(config);
+    const [expandedIndex, setExpandedIndex] = useState(null);
+    useEffect(() => {
+        setTempConfig(config);
+        setExpandedIndex(null);
+    }, [config, isOpen]);
+    if (!isOpen)
+        return null;
+    const handleAdd = () => {
+        setTempConfig([...tempConfig, { domain: '', locale: 'en', allowUserOverride: true }]);
+        setExpandedIndex(tempConfig.length);
+    };
+    const handleUpdate = (index, field, value) => {
+        const updated = [...tempConfig];
+        updated[index] = { ...updated[index], [field]: value };
+        setTempConfig(updated);
+    };
+    const handleRemove = (index) => {
+        setTempConfig(tempConfig.filter((_, i) => i !== index));
+        if (expandedIndex === index)
+            setExpandedIndex(null);
+    };
+    const toggleExpand = (index) => {
+        setExpandedIndex(expandedIndex === index ? null : index);
+    };
+    return (_jsx("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4", children: _jsxs("div", { className: "bg-dashboard-bg rounded-3xl border border-dashboard-border w-full max-w-lg max-h-[80vh] overflow-hidden flex flex-col", children: [_jsxs("div", { className: "flex items-center justify-between p-6 border-b border-dashboard-border", children: [_jsx("h2", { className: "text-xl font-bold text-dashboard-text", children: "Domain Languages" }), _jsx("button", { onClick: onClose, className: "p-2 text-dashboard-text-secondary hover:text-dashboard-text transition-colors", children: _jsx(X, { size: 20 }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto p-6 space-y-4", children: [tempConfig.length > 0 && (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-wider", children: "Current Config" }), tempConfig.map((entry, index) => (_jsxs("div", { className: "bg-dashboard-card rounded-xl border border-dashboard-border overflow-hidden", children: [_jsxs("div", { onClick: () => toggleExpand(index), className: "w-full flex items-center justify-between p-3 text-left hover:bg-dashboard-border/50 transition-colors cursor-pointer", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium text-dashboard-text", children: entry.domain || '(no domain)' }), _jsx("span", { className: "text-dashboard-text-secondary", children: "\u2192" }), _jsx("span", { children: AVAILABLE_LOCALES.find(l => l.code === entry.locale)?.flag }), entry.allowUserOverride === false && _jsx("span", { className: "text-dashboard-text-secondary", children: "\uD83D\uDD12" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { onClick: (e) => { e.stopPropagation(); handleRemove(index); }, className: "p-1 text-red-500 hover:bg-red-500/10 rounded transition-colors", title: "Remove", children: _jsx(Trash2, { size: 14 }) }), _jsx("span", { className: "text-dashboard-text-secondary text-xs", children: expandedIndex === index ? '▲' : '▼' })] })] }), expandedIndex === index && (_jsxs("div", { className: "p-3 pt-0 space-y-3 border-t border-dashboard-border", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("label", { className: "text-[10px] font-bold text-dashboard-text-secondary uppercase tracking-wider", children: "Domain" }), _jsx("input", { type: "text", value: entry.domain, onChange: (e) => handleUpdate(index, 'domain', e.target.value), placeholder: "example.com", className: "w-full px-3 py-2 bg-dashboard-bg border border-dashboard-border rounded-lg outline-none focus:ring-2 focus:ring-primary text-dashboard-text text-sm" })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs("div", { className: "flex-1 space-y-1", children: [_jsx("label", { className: "text-[10px] font-bold text-dashboard-text-secondary uppercase tracking-wider", children: "Language" }), _jsx("select", { value: entry.locale, onChange: (e) => handleUpdate(index, 'locale', e.target.value), className: "w-full px-3 py-2 bg-dashboard-bg border border-dashboard-border rounded-lg outline-none focus:ring-2 focus:ring-primary text-dashboard-text text-sm", children: AVAILABLE_LOCALES.map(loc => (_jsxs("option", { value: loc.code, children: [loc.flag, " ", loc.name] }, loc.code))) })] }) }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-[10px] text-dashboard-text-secondary", children: "Allow user to change" }), _jsx("button", { onClick: () => handleUpdate(index, 'allowUserOverride', !entry.allowUserOverride), className: `relative w-10 h-5 rounded-full transition-colors ${entry.allowUserOverride ? 'bg-primary' : 'bg-neutral-300 dark:bg-neutral-600'}`, children: _jsx("div", { className: `absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full transition-transform duration-200 ${entry.allowUserOverride ? 'translate-x-5' : 'translate-x-0'}` }) })] })] }))] }, index)))] })), _jsxs("div", { className: "border-t border-dashboard-border pt-4", children: [_jsx("p", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-wider mb-3", children: "Add New Domain" }), _jsxs("button", { onClick: handleAdd, className: "w-full flex items-center justify-center gap-2 px-4 py-3 border-2 border-dashed border-dashboard-border text-dashboard-text-secondary hover:border-primary hover:text-primary rounded-xl transition-colors", children: [_jsx(Plus, { size: 16 }), "Add Domain"] })] }), _jsx("p", { className: "text-[10px] text-dashboard-text-secondary text-center pt-2", children: "Configure which language to use per domain. E.g., botanicsandyou.nl \u2192 Dutch, botanicsandyou.se \u2192 Swedish." })] }), _jsxs("div", { className: "flex gap-3 p-6 border-t border-dashboard-border", children: [_jsx("button", { onClick: onClose, className: "flex-1 px-4 py-2 bg-dashboard-card text-dashboard-text rounded-xl text-sm font-bold hover:bg-dashboard-border transition-colors", children: "Cancel" }), _jsx("button", { onClick: () => onSaveAndClose(tempConfig), disabled: isSaving, className: "flex-1 px-4 py-2 bg-primary text-white rounded-xl text-sm font-bold hover:bg-primary/90 transition-colors disabled:opacity-50", children: isSaving ? 'Saving...' : 'Save' })] })] }) }));
+}
+// =============================================================================
+// Main Component
+// =============================================================================
 export function SettingsView({ siteId, locale }) {
     const [isLoading, setIsLoading] = useState(true);
     const [isSaving, setIsSaving] = useState(false);
     const [showSuccess, setShowSuccess] = useState(false);
     const [activeTab, setActiveTab] = useState('en');
+    const [showDomainModal, setShowDomainModal] = useState(false);
     const [settings, setSettings] = useState({
         identifier: 'site_config',
         siteName: '',
@@ -49,27 +84,22 @@ export function SettingsView({ siteId, locale }) {
             sv: [],
             nl: [],
         },
+        domainLocaleConfig: [],
     });
     // Fetch settings on load
     useEffect(() => {
         const fetchSettings = async () => {
             try {
                 setIsLoading(true);
-                const response = await fetch('/api/plugin-website/settings', {
-                    credentials: 'include',
-                });
-                if (!response.ok) {
+                const response = await fetch('/api/plugin-website/settings', { credentials: 'include' });
+                if (!response.ok)
                     throw new Error('Failed to fetch settings');
-                }
                 const data = await response.json();
                 if (data.siteName !== undefined) {
-                    // Convert launch_date to datetime-local format if it exists
                     let launchDate = '';
                     if (data.launch_date) {
-                        // If it's a Date object or ISO string, convert to datetime-local format
                         const date = new Date(data.launch_date);
                         if (!isNaN(date.getTime())) {
-                            // Format as YYYY-MM-DDTHH:mm for datetime-local input (24-hour format)
                             const year = date.getFullYear();
                             const month = String(date.getMonth() + 1).padStart(2, '0');
                             const day = String(date.getDate()).padStart(2, '0');
@@ -77,19 +107,6 @@ export function SettingsView({ siteId, locale }) {
                             const minutes = String(date.getMinutes()).padStart(2, '0');
                             launchDate = `${year}-${month}-${day}T${hours}:${minutes}`;
                         }
-                        else {
-                            // If it's already a string in the correct format, use it
-                            // Ensure it has time component, default to 00:00 if missing
-                            if (data.launch_date.includes('T') && data.launch_date.split('T')[1]) {
-                                launchDate = data.launch_date;
-                            }
-                            else if (data.launch_date.includes('T')) {
-                                launchDate = `${data.launch_date.split('T')[0]}T00:00`;
-                            }
-                            else {
-                                launchDate = `${data.launch_date}T00:00`;
-                            }
-                        }
                     }
                     setSettings({
                         identifier: 'site_config',
@@ -109,11 +126,8 @@ export function SettingsView({ siteId, locale }) {
                             sv: { physicalAddress: '', phoneNumber: '' },
                             nl: { physicalAddress: '', phoneNumber: '' },
                         },
-                        localizedSocials: data.localizedSocials || {
-                            en: [],
-                            sv: [],
-                            nl: [],
-                        },
+                        localizedSocials: data.localizedSocials || { en: [], sv: [], nl: [] },
+                        domainLocaleConfig: data.domainLocaleConfig || [],
                     });
                 }
             }
@@ -128,34 +142,19 @@ export function SettingsView({ siteId, locale }) {
     }, []);
     // Use ref to always get latest state
     const settingsRef = useRef(settings);
-    useEffect(() => {
-        settingsRef.current = settings;
-    }, [settings]);
+    useEffect(() => { settingsRef.current = settings; }, [settings]);
     // Save settings
     const handleSave = async () => {
         try {
             setIsSaving(true);
-            // Get the latest state from ref
             const currentSettings = settingsRef.current;
-            // Prepare settings for API - ensure launch_date is properly formatted
-            const settingsToSave = {
-                ...currentSettings,
-            };
-            // Handle launch_date - keep it if it has a value, otherwise don't include it
+            const settingsToSave = { ...currentSettings };
             if (currentSettings.launch_date && currentSettings.launch_date.trim() !== '') {
                 settingsToSave.launch_date = currentSettings.launch_date;
             }
             else {
-                // Don't include launch_date if it's empty
                 delete settingsToSave.launch_date;
             }
-            console.log('[SettingsView] Saving settings:', {
-                launch_date: settingsToSave.launch_date,
-                launch_date_type: typeof settingsToSave.launch_date,
-                has_launch_date: 'launch_date' in settingsToSave,
-                currentState_launch_date: currentSettings.launch_date,
-                all_keys: Object.keys(settingsToSave),
-            });
             const response = await fetch('/api/plugin-website/settings', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
@@ -177,27 +176,17 @@ export function SettingsView({ siteId, locale }) {
             setIsSaving(false);
         }
     };
-    // Remove social link
-    const handleRemoveSocial = (id) => {
-        setSettings({
-            ...settings,
-            socials: settings.socials?.filter(social => social.id !== id) || [],
-        });
-    };
     // Update localized contact info
     const handleUpdateLocalizedContact = (field, value) => {
         setSettings({
             ...settings,
             localizedContactInfo: {
                 ...settings.localizedContactInfo,
-                [activeTab]: {
-                    ...settings.localizedContactInfo?.[activeTab],
-                    [field]: value,
-                },
+                [activeTab]: { ...settings.localizedContactInfo?.[activeTab], [field]: value },
             },
         });
     };
-    // Add localized social link
+    // Social links handlers
     const handleAddLocalizedSocial = () => {
         const currentSocials = settings.localizedSocials?.[activeTab] || [];
         const newId = currentSocials.length ? Math.max(...currentSocials.map(s => s.id)) + 1 : 1;
@@ -209,76 +198,73 @@ export function SettingsView({ siteId, locale }) {
             },
         });
     };
-    // Update localized social link
     const handleUpdateLocalizedSocial = (id, field, value) => {
         const currentSocials = settings.localizedSocials?.[activeTab] || [];
         setSettings({
             ...settings,
             localizedSocials: {
                 ...settings.localizedSocials,
-                [activeTab]: currentSocials.map(social => social.id === id ? { ...social, [field]: value } : social),
+                [activeTab]: currentSocials.map(s => s.id === id ? { ...s, [field]: value } : s),
             },
         });
     };
-    // Remove localized social link
     const handleRemoveLocalizedSocial = (id) => {
         const currentSocials = settings.localizedSocials?.[activeTab] || [];
         setSettings({
             ...settings,
             localizedSocials: {
                 ...settings.localizedSocials,
-                [activeTab]: currentSocials.filter(social => social.id !== id),
+                [activeTab]: currentSocials.filter(s => s.id !== id),
             },
         });
     };
+    // Domain locale handlers
+    const openDomainModal = () => setShowDomainModal(true);
+    const closeDomainModal = () => setShowDomainModal(false);
+    const saveDomainConfig = (config) => {
+        setSettings({ ...settings, domainLocaleConfig: config });
+        setShowDomainModal(false);
+    };
+    const saveDomainConfigAndClose = async (config) => {
+        setSettings({ ...settings, domainLocaleConfig: config });
+        setShowDomainModal(false);
+        // Immediately save to API
+        try {
+            const response = await fetch('/api/plugin-website/settings', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({ ...settings, domainLocaleConfig: config }),
+            });
+            if (response.ok) {
+                setShowSuccess(true);
+                setTimeout(() => setShowSuccess(false), 3000);
+            }
+        }
+        catch (error) {
+            console.error('Failed to save domain config:', error);
+        }
+    };
     if (isLoading) {
         return (_jsx("div", { className: "h-full w-full bg-dashboard-card text-dashboard-text flex items-center justify-center", children: _jsxs("div", { className: "text-center", children: [_jsx(RefreshCw, { className: "w-8 h-8 animate-spin text-primary mx-auto mb-4" }), _jsx("p", { className: "text-sm text-dashboard-text-secondary", children: "Loading settings..." })] }) }));
     }
-    return (_jsx("div", { className: "h-full w-full rounded-[2.5rem] bg-dashboard-card p-8 overflow-y-auto", children: _jsxs("div", { className: "max-w-6xl mx-auto", children: [_jsxs("div", { className: "flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-black text-dashboard-text uppercase tracking-tighter mb-2", children: "Website Settings" }), _jsx("p", { className: "text-sm text-dashboard-text-secondary", children: "Manage your website identity, contact information, and social links" })] }), _jsx("button", { onClick: handleSave, disabled: isSaving, className: `inline-flex items-center gap-2 px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-all shadow-lg shadow-primary/20 ${isSaving
-                                ? 'bg-neutral-400 text-white cursor-not-allowed'
-                                : showSuccess
-                                    ? 'bg-green-600 text-white'
-                                    : 'bg-primary text-white hover:bg-primary/90'}`, children: isSaving ? (_jsxs(_Fragment, { children: [_jsx(RefreshCw, { className: "w-4 h-4 animate-spin" }), "Saving..."] })) : showSuccess ? (_jsxs(_Fragment, { children: [_jsx(Settings2, { className: "w-4 h-4" }), "Saved!"] })) : (_jsxs(_Fragment, { children: [_jsx(Save, { className: "w-4 h-4" }), "Save Settings"] })) })] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-8", children: [_jsxs("div", { className: "lg:col-span-2 space-y-8", children: [_jsxs("section", { className: "bg-dashboard-bg p-8 rounded-3xl border border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-2 font-bold text-dashboard-text border-b border-dashboard-border pb-4 mb-6", children: [_jsx(Search, { size: 20, className: "text-primary" }), "Website Identity & SEO"] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: "Website Name" }), _jsx("input", { type: "text", value: settings.siteName || '', onChange: (e) => setSettings({ ...settings, siteName: e.target.value }), placeholder: "e.g., Botanics & You", className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: "Website Tagline" }), _jsx("input", { type: "text", value: settings.siteTagline || '', onChange: (e) => setSettings({ ...settings, siteTagline: e.target.value }), placeholder: "e.g., Sharing my knowledge with you", className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text" })] })] }), _jsxs("div", { className: "mt-6 space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: "Website Description" }), _jsx("textarea", { value: settings.siteDescription || '', onChange: (e) => setSettings({ ...settings, siteDescription: e.target.value }), placeholder: "A brief description of your website", rows: 3, className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text resize-none" })] }), _jsxs("div", { className: "mt-6 space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: "Keywords (comma-separated)" }), _jsx("input", { type: "text", value: settings.keywords || '', onChange: (e) => setSettings({ ...settings, keywords: e.target.value }), placeholder: "keyword1, keyword2, keyword3", className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text" })] })] }), _jsxs("section", { className: "bg-dashboard-bg p-8 rounded-3xl border border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-2 font-bold text-dashboard-text border-b border-dashboard-border pb-4 mb-6", children: [_jsx(Mail, { size: 20, className: "text-primary" }), "Contact Information"] }), _jsx("div", { className: "flex gap-2 mb-6", children: AVAILABLE_LOCALES.map((loc) => (_jsxs("button", { onClick: () => setActiveTab(loc.code), className: `px-4 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all ${activeTab === loc.code
-                                                    ? 'bg-primary text-white'
-                                                    : 'bg-dashboard-card text-dashboard-text-secondary hover:bg-dashboard-border'}`, children: [_jsx("span", { className: "mr-1", children: loc.flag }), loc.code.toUpperCase()] }, loc.code))) }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: "Contact Email (global)" }), _jsx("input", { type: "email", value: settings.contactEmail || '', onChange: (e) => setSettings({ ...settings, contactEmail: e.target.value }), placeholder: "contact@example.com", className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text" })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: ["Phone Number (", activeTab.toUpperCase(), ")"] }), _jsx("input", { type: "tel", value: settings.localizedContactInfo?.[activeTab]?.phoneNumber || settings.phoneNumber || '', onChange: (e) => handleUpdateLocalizedContact('phoneNumber', e.target.value), placeholder: "+31 6 12345678", className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text" })] })] }), _jsxs("div", { className: "mt-6 space-y-2", children: [_jsxs("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: ["Physical Address (", activeTab.toUpperCase(), ")"] }), _jsx("textarea", { value: settings.localizedContactInfo?.[activeTab]?.physicalAddress || settings.physicalAddress || '', onChange: (e) => handleUpdateLocalizedContact('physicalAddress', e.target.value), placeholder: "Street address, City, Country", rows: 2, className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text resize-none" })] })] }), _jsxs("section", { className: "bg-dashboard-bg p-8 rounded-3xl border border-dashboard-border", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-dashboard-border pb-4 mb-6", children: [_jsxs("div", { className: "flex items-center gap-2 font-bold text-dashboard-text", children: [_jsx(Globe, { size: 20, className: "text-primary" }), "Social Links (", activeTab.toUpperCase(), ")"] }), _jsx("button", { onClick: handleAddLocalizedSocial, className: "px-4 py-2 text-xs font-bold uppercase tracking-widest bg-primary text-white rounded-full hover:bg-primary/90 transition-all", children: "Add Social" })] }), _jsx("div", { className: "flex gap-2 mb-6", children: AVAILABLE_LOCALES.map((loc) => (_jsxs("button", { onClick: () => setActiveTab(loc.code), className: `px-4 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all ${activeTab === loc.code
-                                                    ? 'bg-primary text-white'
-                                                    : 'bg-dashboard-card text-dashboard-text-secondary hover:bg-dashboard-border'}`, children: [_jsx("span", { className: "mr-1", children: loc.flag }), loc.code.toUpperCase()] }, loc.code))) }), _jsx("div", { className: "space-y-4", children: (() => {
-                                                const currentSocials = settings.localizedSocials?.[activeTab] || [];
-                                                return currentSocials.length > 0 ? (currentSocials.map((social) => {
-                                                    const platform = AVAILABLE_PLATFORMS.find(p => p.name === social.platform);
-                                                    return (_jsxs("div", { className: "flex items-center gap-4 p-4 bg-dashboard-card rounded-2xl border border-dashboard-border", children: [_jsx("div", { className: "flex-shrink-0 text-dashboard-text-secondary", children: platform?.icon || _jsx(Globe, { size: 18 }) }), _jsxs("select", { value: social.platform, onChange: (e) => handleUpdateLocalizedSocial(social.id, 'platform', e.target.value), className: "flex-1 px-4 py-2 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text", children: [_jsx("option", { value: "", children: "Select Platform" }), AVAILABLE_PLATFORMS.map(p => (_jsx("option", { value: p.name, children: p.name }, p.name)))] }), _jsx("input", { type: "url", value: social.url, onChange: (e) => handleUpdateLocalizedSocial(social.id, 'url', e.target.value), placeholder: "https://...", className: "flex-1 px-4 py-2 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text" }), _jsx("button", { onClick: () => handleRemoveLocalizedSocial(social.id), className: "px-4 py-2 text-xs font-bold text-red-500 hover:text-red-700 dark:hover:text-red-400 transition-colors", children: "Remove" })] }, social.id));
-                                                })) : (_jsxs("p", { className: "text-sm text-dashboard-text-secondary text-center py-8", children: ["No social links added for ", activeTab.toUpperCase(), ". Click \"Add Social\" to get started."] }));
-                                            })() })] })] }), _jsxs("div", { className: "space-y-8", children: [_jsxs("section", { className: "bg-dashboard-bg p-6 rounded-3xl border border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-2 font-bold text-dashboard-text border-b border-dashboard-border pb-4 mb-6", children: [_jsx(Settings2, { size: 18, className: "text-primary" }), "Maintenance"] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text block mb-1", children: "Maintenance Mode" }), _jsx("p", { className: "text-[10px] text-dashboard-text-secondary", children: "Show maintenance page to visitors" })] }), _jsx("button", { onClick: () => setSettings({ ...settings, maintenanceMode: !settings.maintenanceMode }), className: `relative w-12 h-6 rounded-full transition-colors ${settings.maintenanceMode ? 'bg-primary' : 'bg-neutral-200 dark:bg-neutral-700'}`, children: _jsx("div", { className: `absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform duration-200 ${settings.maintenanceMode ? 'translate-x-6' : 'translate-x-0'}` }) })] })] }), _jsxs("section", { className: "bg-dashboard-bg p-6 rounded-3xl border border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-2 font-bold text-dashboard-text border-b border-dashboard-border pb-4 mb-6", children: [_jsx(Calendar, { size: 18, className: "text-primary" }), "Launch Date"] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text block", children: "Date" }), _jsx("input", { type: "date", value: settings.launch_date ? settings.launch_date.split('T')[0] : '', onChange: (e) => {
-                                                                const dateValue = e.target.value;
-                                                                const currentTime = settings.launch_date?.includes('T')
-                                                                    ? settings.launch_date.split('T')[1]
-                                                                    : '00:00';
-                                                                const newLaunchDate = dateValue ? `${dateValue}T${currentTime}` : '';
-                                                                console.log('[SettingsView] Date changed:', {
-                                                                    dateValue,
-                                                                    currentTime,
-                                                                    newLaunchDate,
-                                                                });
-                                                                setSettings(prev => ({
-                                                                    ...prev,
-                                                                    launch_date: newLaunchDate,
-                                                                }));
-                                                            }, className: "w-full px-4 py-2 bg-dashboard-card border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text block", children: "Time (24-hour format)" }), _jsx("input", { type: "time", step: "60", value: settings.launch_date?.includes('T')
-                                                                ? settings.launch_date.split('T')[1]
-                                                                : '00:00', onChange: (e) => {
-                                                                const timeValue = e.target.value;
-                                                                const currentDate = settings.launch_date?.includes('T')
-                                                                    ? settings.launch_date.split('T')[0]
-                                                                    : new Date().toISOString().split('T')[0];
-                                                                const newLaunchDate = timeValue ? `${currentDate}T${timeValue}` : '';
-                                                                console.log('[SettingsView] Time changed:', {
-                                                                    timeValue,
-                                                                    currentDate,
-                                                                    newLaunchDate,
-                                                                });
-                                                                setSettings(prev => ({
-                                                                    ...prev,
-                                                                    launch_date: newLaunchDate,
-                                                                }));
-                                                            }, className: "w-full px-4 py-2 bg-dashboard-card border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text" })] }), _jsx("p", { className: "text-[10px] text-dashboard-text-secondary", children: "Used for countdown timers. Time defaults to 00:00 if not specified." })] })] })] })] })] }) }));
+    return (_jsxs("div", { className: "h-full w-full rounded-[2.5rem] bg-dashboard-card p-8 overflow-y-auto", children: [_jsxs("div", { className: "max-w-6xl mx-auto", children: [_jsxs("div", { className: "flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-black text-dashboard-text uppercase tracking-tighter mb-2", children: "Website Settings" }), _jsx("p", { className: "text-sm text-dashboard-text-secondary", children: "Manage your website identity, contact information, and social links" })] }), _jsx("button", { onClick: handleSave, disabled: isSaving, className: `inline-flex items-center gap-2 px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-all shadow-lg shadow-primary/20 ${isSaving ? 'bg-neutral-400 text-white cursor-not-allowed' :
+                                    showSuccess ? 'bg-green-600 text-white' :
+                                        'bg-primary text-white hover:bg-primary/90'}`, children: isSaving ? _jsxs(_Fragment, { children: [_jsx(RefreshCw, { className: "w-4 h-4 animate-spin" }), " Saving..."] }) :
+                                    showSuccess ? _jsxs(_Fragment, { children: [_jsx(Settings2, { className: "w-4 h-4" }), " Saved!"] }) :
+                                        _jsxs(_Fragment, { children: [_jsx(Save, { className: "w-4 h-4" }), " Save Settings"] }) })] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-8", children: [_jsxs("div", { className: "lg:col-span-2 space-y-8", children: [_jsxs("section", { className: "bg-dashboard-bg p-8 rounded-3xl border border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-2 font-bold text-dashboard-text border-b border-dashboard-border pb-4 mb-6", children: [_jsx(Search, { size: 20, className: "text-primary" }), "Website Identity & SEO"] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: "Website Name" }), _jsx("input", { type: "text", value: settings.siteName || '', onChange: (e) => setSettings({ ...settings, siteName: e.target.value }), placeholder: "e.g., Botanics & You", className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: "Website Tagline" }), _jsx("input", { type: "text", value: settings.siteTagline || '', onChange: (e) => setSettings({ ...settings, siteTagline: e.target.value }), placeholder: "e.g., Sharing my knowledge with you", className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text" })] })] }), _jsxs("div", { className: "mt-6 space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: "Website Description" }), _jsx("textarea", { value: settings.siteDescription || '', onChange: (e) => setSettings({ ...settings, siteDescription: e.target.value }), placeholder: "A brief description of your website", rows: 3, className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text resize-none" })] }), _jsxs("div", { className: "mt-6 space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: "Keywords (comma-separated)" }), _jsx("input", { type: "text", value: settings.keywords || '', onChange: (e) => setSettings({ ...settings, keywords: e.target.value }), placeholder: "keyword1, keyword2, keyword3", className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text" })] })] }), _jsxs("section", { className: "bg-dashboard-bg p-8 rounded-3xl border border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-2 font-bold text-dashboard-text border-b border-dashboard-border pb-4 mb-6", children: [_jsx(Mail, { size: 20, className: "text-primary" }), "Contact Information"] }), _jsx("div", { className: "flex gap-2 mb-6", children: AVAILABLE_LOCALES.map((loc) => (_jsxs("button", { onClick: () => setActiveTab(loc.code), className: `px-4 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all ${activeTab === loc.code ? 'bg-primary text-white' : 'bg-dashboard-card text-dashboard-text-secondary hover:bg-dashboard-border'}`, children: [_jsx("span", { className: "mr-1", children: loc.flag }), loc.code.toUpperCase()] }, loc.code))) }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: "Contact Email (global)" }), _jsx("input", { type: "email", value: settings.contactEmail || '', onChange: (e) => setSettings({ ...settings, contactEmail: e.target.value }), placeholder: "contact@example.com", className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text" })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: ["Phone Number (", activeTab.toUpperCase(), ")"] }), _jsx("input", { type: "tel", value: settings.localizedContactInfo?.[activeTab]?.phoneNumber || settings.phoneNumber || '', onChange: (e) => handleUpdateLocalizedContact('phoneNumber', e.target.value), placeholder: "+31 6 12345678", className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text" })] })] }), _jsxs("div", { className: "mt-6 space-y-2", children: [_jsxs("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest", children: ["Physical Address (", activeTab.toUpperCase(), ")"] }), _jsx("textarea", { value: settings.localizedContactInfo?.[activeTab]?.physicalAddress || settings.physicalAddress || '', onChange: (e) => handleUpdateLocalizedContact('physicalAddress', e.target.value), placeholder: "Street address, City, Country", rows: 2, className: "w-full px-4 py-3 bg-dashboard-card border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary transition-all text-dashboard-text resize-none" })] })] }), _jsxs("section", { className: "bg-dashboard-bg p-8 rounded-3xl border border-dashboard-border", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-dashboard-border pb-4 mb-6", children: [_jsxs("div", { className: "flex items-center gap-2 font-bold text-dashboard-text", children: [_jsx(Globe, { size: 20, className: "text-primary" }), "Social Links (", activeTab.toUpperCase(), ")"] }), _jsx("button", { onClick: handleAddLocalizedSocial, className: "px-4 py-2 text-xs font-bold uppercase tracking-widest bg-primary text-white rounded-full hover:bg-primary/90 transition-all", children: "Add Social" })] }), _jsx("div", { className: "flex gap-2 mb-6", children: AVAILABLE_LOCALES.map((loc) => (_jsxs("button", { onClick: () => setActiveTab(loc.code), className: `px-4 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all ${activeTab === loc.code ? 'bg-primary text-white' : 'bg-dashboard-card text-dashboard-text-secondary hover:bg-dashboard-border'}`, children: [_jsx("span", { className: "mr-1", children: loc.flag }), loc.code.toUpperCase()] }, loc.code))) }), _jsx("div", { className: "space-y-4", children: (() => {
+                                                    const currentSocials = settings.localizedSocials?.[activeTab] || [];
+                                                    return currentSocials.length > 0 ? (currentSocials.map((social) => {
+                                                        const platform = AVAILABLE_PLATFORMS.find(p => p.name === social.platform);
+                                                        return (_jsxs("div", { className: "flex items-center gap-4 p-4 bg-dashboard-card rounded-2xl border border-dashboard-border", children: [_jsx("div", { className: "flex-shrink-0 text-dashboard-text-secondary", children: platform?.icon || _jsx(Globe, { size: 18 }) }), _jsxs("select", { value: social.platform, onChange: (e) => handleUpdateLocalizedSocial(social.id, 'platform', e.target.value), className: "flex-1 px-4 py-2 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text", children: [_jsx("option", { value: "", children: "Select Platform" }), AVAILABLE_PLATFORMS.map(p => (_jsx("option", { value: p.name, children: p.name }, p.name)))] }), _jsx("input", { type: "url", value: social.url, onChange: (e) => handleUpdateLocalizedSocial(social.id, 'url', e.target.value), placeholder: "https://...", className: "flex-1 px-4 py-2 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text" }), _jsx("button", { onClick: () => handleRemoveLocalizedSocial(social.id), className: "px-4 py-2 text-xs font-bold text-red-500 hover:text-red-700 transition-colors", children: "Remove" })] }, social.id));
+                                                    })) : (_jsxs("p", { className: "text-sm text-dashboard-text-secondary text-center py-8", children: ["No social links added for ", activeTab.toUpperCase(), ". Click \"Add Social\" to get started."] }));
+                                                })() })] })] }), _jsxs("div", { className: "space-y-8", children: [_jsxs("section", { className: "bg-dashboard-bg p-6 rounded-3xl border border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-2 font-bold text-dashboard-text border-b border-dashboard-border pb-4 mb-6", children: [_jsx(Settings2, { size: 18, className: "text-primary" }), "Maintenance"] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text block mb-1", children: "Maintenance Mode" }), _jsx("p", { className: "text-[10px] text-dashboard-text-secondary", children: "Show maintenance page to visitors" })] }), _jsx("button", { onClick: () => setSettings({ ...settings, maintenanceMode: !settings.maintenanceMode }), className: `relative w-12 h-6 rounded-full transition-colors ${settings.maintenanceMode ? 'bg-primary' : 'bg-neutral-200 dark:bg-neutral-700'}`, children: _jsx("div", { className: `absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform duration-200 ${settings.maintenanceMode ? 'translate-x-6' : 'translate-x-0'}` }) })] })] }), _jsxs("section", { className: "bg-dashboard-bg p-6 rounded-3xl border border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-2 font-bold text-dashboard-text border-b border-dashboard-border pb-4 mb-6", children: [_jsx(Calendar, { size: 18, className: "text-primary" }), "Launch Date"] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text block", children: "Date" }), _jsx("input", { type: "date", value: settings.launch_date ? settings.launch_date.split('T')[0] : '', onChange: (e) => {
+                                                                    const dateValue = e.target.value;
+                                                                    const currentTime = settings.launch_date?.includes('T') ? settings.launch_date.split('T')[1] : '00:00';
+                                                                    setSettings(prev => ({ ...prev, launch_date: dateValue ? `${dateValue}T${currentTime}` : '' }));
+                                                                }, className: "w-full px-4 py-2 bg-dashboard-card border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text block", children: "Time (24-hour format)" }), _jsx("input", { type: "time", step: "60", value: settings.launch_date?.includes('T') ? settings.launch_date.split('T')[1] : '00:00', onChange: (e) => {
+                                                                    const timeValue = e.target.value;
+                                                                    const currentDate = settings.launch_date?.includes('T') ? settings.launch_date.split('T')[0] : new Date().toISOString().split('T')[0];
+                                                                    setSettings(prev => ({ ...prev, launch_date: timeValue ? `${currentDate}T${timeValue}` : '' }));
+                                                                }, className: "w-full px-4 py-2 bg-dashboard-card border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text" })] }), _jsx("p", { className: "text-[10px] text-dashboard-text-secondary", children: "Used for countdown timers." })] })] }), _jsx(DomainLanguagesCard, { config: settings.domainLocaleConfig || [], onEdit: openDomainModal })] })] })] }), _jsx(DomainLanguagesModal, { isOpen: showDomainModal, config: settings.domainLocaleConfig || [], onSave: saveDomainConfig, onSaveAndClose: saveDomainConfigAndClose, onClose: closeDomainModal, isSaving: isSaving })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jhits/plugin-website",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "Website management and configuration plugin for the JHITS ecosystem",
   "publishConfig": {
     "access": "public"
@@ -25,10 +25,10 @@
     }
   },
   "dependencies": {
-    "lucide-react": "^0.564.0",
+    "lucide-react": "^0.577.0",
     "mongodb": "^7.1.0",
     "next-auth": "^4.24.13",
-    "react-icons": "^5.5.0",
+    "react-icons": "^5.6.0",
     "@jhits/plugin-core": "0.0.10"
   },
   "peerDependencies": {
@@ -37,7 +37,7 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@types/node": "^25.2.3",
+    "@types/node": "^25.3.3",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "next": "16.1.6",

package/src/types/settings.ts

@@ -4,6 +4,12 @@
 
 export type SupportedLocale = 'en' | 'sv' | 'nl';
 
+export interface DomainLocaleConfig {
+    domain: string;
+    locale: SupportedLocale;
+    allowUserOverride?: boolean;
+}
+
 export interface LocalizedContactInfo {
     physicalAddress?: string;
     phoneNumber?: string;
@@ -30,6 +36,7 @@ export interface WebsiteSettings {
     socials?: SocialLink[];
     localizedContactInfo?: Partial<Record<SupportedLocale, LocalizedContactInfo>>;
     localizedSocials?: Partial<Record<SupportedLocale, LocalizedSocialLink[]>>;
+    domainLocaleConfig?: DomainLocaleConfig[];
     updatedAt?: Date;
     createdAt?: Date;
 }

package/src/views/SettingsView.tsx

@@ -6,8 +6,8 @@
 'use client';
 
 import React, { useState, useEffect, useRef } from 'react';
-import { Save, RefreshCw, Globe, Mail, Phone, MapPin, Search, Settings2, Calendar } from 'lucide-react';
-import { WebsiteSettings, SocialLink, SupportedLocale, LocalizedSocialLink } from '../types/settings';
+import { Save, RefreshCw, Globe, Globe2, Mail, Search, Settings2, Calendar, Plus, Trash2, X, Edit3 } from 'lucide-react';
+import { WebsiteSettings, SupportedLocale, LocalizedSocialLink, DomainLocaleConfig } from '../types/settings';
 import { FaFacebook, FaInstagram, FaLinkedin, FaPinterest, FaTiktok } from 'react-icons/fa';
 import { FaXTwitter } from 'react-icons/fa6';
 
@@ -31,11 +31,217 @@ export interface SettingsViewProps {
     locale: string;
 }
 
+// =============================================================================
+// Sub-components
+// =============================================================================
+
+interface DomainLanguagesCardProps {
+    config: DomainLocaleConfig[];
+    onEdit: () => void;
+}
+
+function DomainLanguagesCard({ config, onEdit }: DomainLanguagesCardProps) {
+    return (
+        <section className="bg-dashboard-bg p-6 rounded-3xl border border-dashboard-border">
+            <div className="flex items-center justify-between border-b border-dashboard-border pb-4 mb-4">
+                <div className="flex items-center gap-2 font-bold text-dashboard-text">
+                    <Globe2 size={18} className="text-primary" />
+                    Domain Languages
+                </div>
+            </div>
+            <div className="space-y-2">
+                {config && config.length > 0 ? (
+                    <div className="flex flex-wrap gap-2">
+                        {config.map((entry, index) => (
+                            <div key={index} className="inline-flex items-center gap-2 px-3 py-1.5 bg-dashboard-card rounded-full border border-dashboard-border text-xs">
+                                <span className="font-medium text-dashboard-text">{entry.domain}</span>
+                                <span className="text-dashboard-text-secondary">→</span>
+                                <span>{AVAILABLE_LOCALES.find(l => l.code === entry.locale)?.flag}</span>
+                                <span className="text-dashboard-text-secondary">
+                                    {entry.allowUserOverride ? '' : '🔒'}
+                                </span>
+                            </div>
+                        ))}
+                    </div>
+                ) : (
+                    <p className="text-xs text-dashboard-text-secondary">
+                        No domain languages configured.
+                    </p>
+                )}
+            </div>
+            <button
+                onClick={onEdit}
+                className="mt-4 w-full flex items-center justify-center gap-2 px-4 py-2 bg-primary text-white rounded-xl text-xs font-bold uppercase tracking-wider hover:bg-primary/90 transition-colors"
+            >
+                <Edit3 size={14} />
+                {config?.length ? 'Edit Domains' : 'Add Domains'}
+            </button>
+        </section>
+    );
+}
+
+interface DomainLanguagesModalProps {
+    isOpen: boolean;
+    config: DomainLocaleConfig[];
+    onSave: (config: DomainLocaleConfig[]) => void;
+    onClose: () => void;
+    onSaveAndClose: (config: DomainLocaleConfig[]) => void;
+    isSaving?: boolean;
+}
+
+function DomainLanguagesModal({ isOpen, config, onSave, onClose, onSaveAndClose, isSaving = false }: DomainLanguagesModalProps) {
+    const [tempConfig, setTempConfig] = useState<DomainLocaleConfig[]>(config);
+    const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
+
+    useEffect(() => {
+        setTempConfig(config);
+        setExpandedIndex(null);
+    }, [config, isOpen]);
+
+    if (!isOpen) return null;
+
+    const handleAdd = () => {
+        setTempConfig([...tempConfig, { domain: '', locale: 'en', allowUserOverride: true }]);
+        setExpandedIndex(tempConfig.length);
+    };
+
+    const handleUpdate = (index: number, field: keyof DomainLocaleConfig, value: any) => {
+        const updated = [...tempConfig];
+        updated[index] = { ...updated[index], [field]: value };
+        setTempConfig(updated);
+    };
+
+    const handleRemove = (index: number) => {
+        setTempConfig(tempConfig.filter((_, i) => i !== index));
+        if (expandedIndex === index) setExpandedIndex(null);
+    };
+
+    const toggleExpand = (index: number) => {
+        setExpandedIndex(expandedIndex === index ? null : index);
+    };
+
+    return (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+            <div className="bg-dashboard-bg rounded-3xl border border-dashboard-border w-full max-w-lg max-h-[80vh] overflow-hidden flex flex-col">
+                <div className="flex items-center justify-between p-6 border-b border-dashboard-border">
+                    <h2 className="text-xl font-bold text-dashboard-text">Domain Languages</h2>
+                    <button onClick={onClose} className="p-2 text-dashboard-text-secondary hover:text-dashboard-text transition-colors">
+                        <X size={20} />
+                    </button>
+                </div>
+                <div className="flex-1 overflow-y-auto p-6 space-y-4">
+                    {/* Existing entries - collapsed by default */}
+                    {tempConfig.length > 0 && (
+                        <div className="space-y-2">
+                            <p className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-wider">Current Config</p>
+                            {tempConfig.map((entry, index) => (
+                                <div key={index} className="bg-dashboard-card rounded-xl border border-dashboard-border overflow-hidden">
+                                    <div
+                                        onClick={() => toggleExpand(index)}
+                                        className="w-full flex items-center justify-between p-3 text-left hover:bg-dashboard-border/50 transition-colors cursor-pointer"
+                                    >
+                                        <div className="flex items-center gap-2">
+                                            <span className="font-medium text-dashboard-text">{entry.domain || '(no domain)'}</span>
+                                            <span className="text-dashboard-text-secondary">→</span>
+                                            <span>{AVAILABLE_LOCALES.find(l => l.code === entry.locale)?.flag}</span>
+                                            {entry.allowUserOverride === false && <span className="text-dashboard-text-secondary">🔒</span>}
+                                        </div>
+                                        <div className="flex items-center gap-2">
+                                            <button
+                                                onClick={(e) => { e.stopPropagation(); handleRemove(index); }}
+                                                className="p-1 text-red-500 hover:bg-red-500/10 rounded transition-colors"
+                                                title="Remove"
+                                            >
+                                                <Trash2 size={14} />
+                                            </button>
+                                            <span className="text-dashboard-text-secondary text-xs">
+                                                {expandedIndex === index ? '▲' : '▼'}
+                                            </span>
+                                        </div>
+                                    </div>
+                                    {expandedIndex === index && (
+                                        <div className="p-3 pt-0 space-y-3 border-t border-dashboard-border">
+                                            <div className="space-y-1">
+                                                <label className="text-[10px] font-bold text-dashboard-text-secondary uppercase tracking-wider">Domain</label>
+                                                <input
+                                                    type="text"
+                                                    value={entry.domain}
+                                                    onChange={(e) => handleUpdate(index, 'domain', e.target.value)}
+                                                    placeholder="example.com"
+                                                    className="w-full px-3 py-2 bg-dashboard-bg border border-dashboard-border rounded-lg outline-none focus:ring-2 focus:ring-primary text-dashboard-text text-sm"
+                                                />
+                                            </div>
+                                            <div className="flex items-center gap-2">
+                                                <div className="flex-1 space-y-1">
+                                                    <label className="text-[10px] font-bold text-dashboard-text-secondary uppercase tracking-wider">Language</label>
+                                                    <select
+                                                        value={entry.locale}
+                                                        onChange={(e) => handleUpdate(index, 'locale', e.target.value)}
+                                                        className="w-full px-3 py-2 bg-dashboard-bg border border-dashboard-border rounded-lg outline-none focus:ring-2 focus:ring-primary text-dashboard-text text-sm"
+                                                    >
+                                                        {AVAILABLE_LOCALES.map(loc => (<option key={loc.code} value={loc.code}>{loc.flag} {loc.name}</option>))}
+                                                    </select>
+                                                </div>
+                                            </div>
+                                            <div className="flex items-center justify-between">
+                                                <label className="text-[10px] text-dashboard-text-secondary">Allow user to change</label>
+                                                <button
+                                                    onClick={() => handleUpdate(index, 'allowUserOverride', !entry.allowUserOverride)}
+                                                    className={`relative w-10 h-5 rounded-full transition-colors ${entry.allowUserOverride ? 'bg-primary' : 'bg-neutral-300 dark:bg-neutral-600'}`}
+                                                >
+                                                    <div className={`absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full transition-transform duration-200 ${entry.allowUserOverride ? 'translate-x-5' : 'translate-x-0'}`} />
+                                                </button>
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                            ))}
+                        </div>
+                    )}
+
+                    {/* Add new domain - always visible */}
+                    <div className="border-t border-dashboard-border pt-4">
+                        <p className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-wider mb-3">Add New Domain</p>
+                        <button 
+                            onClick={handleAdd} 
+                            className="w-full flex items-center justify-center gap-2 px-4 py-3 border-2 border-dashed border-dashboard-border text-dashboard-text-secondary hover:border-primary hover:text-primary rounded-xl transition-colors"
+                        >
+                            <Plus size={16} />
+                            Add Domain
+                        </button>
+                    </div>
+                    
+                    <p className="text-[10px] text-dashboard-text-secondary text-center pt-2">
+                        Configure which language to use per domain. E.g., botanicsandyou.nl → Dutch, botanicsandyou.se → Swedish.
+                    </p>
+                </div>
+                <div className="flex gap-3 p-6 border-t border-dashboard-border">
+                    <button onClick={onClose} className="flex-1 px-4 py-2 bg-dashboard-card text-dashboard-text rounded-xl text-sm font-bold hover:bg-dashboard-border transition-colors">
+                        Cancel
+                    </button>
+                    <button 
+                        onClick={() => onSaveAndClose(tempConfig)} 
+                        disabled={isSaving}
+                        className="flex-1 px-4 py-2 bg-primary text-white rounded-xl text-sm font-bold hover:bg-primary/90 transition-colors disabled:opacity-50"
+                    >
+                        {isSaving ? 'Saving...' : 'Save'}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+// =============================================================================
+// Main Component
+// =============================================================================
+
 export function SettingsView({ siteId, locale }: SettingsViewProps) {
     const [isLoading, setIsLoading] = useState(true);
     const [isSaving, setIsSaving] = useState(false);
     const [showSuccess, setShowSuccess] = useState(false);
     const [activeTab, setActiveTab] = useState<SupportedLocale>('en');
+    const [showDomainModal, setShowDomainModal] = useState(false);
     const [settings, setSettings] = useState<WebsiteSettings>({
         identifier: 'site_config',
         siteName: '',
@@ -59,6 +265,7 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
             sv: [],
             nl: [],
         },
+        domainLocaleConfig: [],
     });
 
     // Fetch settings on load
@@ -66,37 +273,21 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
         const fetchSettings = async () => {
             try {
                 setIsLoading(true);
-                const response = await fetch('/api/plugin-website/settings', {
-                    credentials: 'include',
-                });
-                if (!response.ok) {
-                    throw new Error('Failed to fetch settings');
-                }
+                const response = await fetch('/api/plugin-website/settings', { credentials: 'include' });
+                if (!response.ok) throw new Error('Failed to fetch settings');
                 const data = await response.json();
+                
                 if (data.siteName !== undefined) {
-                    // Convert launch_date to datetime-local format if it exists
                     let launchDate = '';
                     if (data.launch_date) {
-                        // If it's a Date object or ISO string, convert to datetime-local format
                         const date = new Date(data.launch_date);
                         if (!isNaN(date.getTime())) {
-                            // Format as YYYY-MM-DDTHH:mm for datetime-local input (24-hour format)
                             const year = date.getFullYear();
                             const month = String(date.getMonth() + 1).padStart(2, '0');
                             const day = String(date.getDate()).padStart(2, '0');
                             const hours = String(date.getHours()).padStart(2, '0');
                             const minutes = String(date.getMinutes()).padStart(2, '0');
                             launchDate = `${year}-${month}-${day}T${hours}:${minutes}`;
-                        } else {
-                            // If it's already a string in the correct format, use it
-                            // Ensure it has time component, default to 00:00 if missing
-                            if (data.launch_date.includes('T') && data.launch_date.split('T')[1]) {
-                                launchDate = data.launch_date;
-                            } else if (data.launch_date.includes('T')) {
-                                launchDate = `${data.launch_date.split('T')[0]}T00:00`;
-                            } else {
-                                launchDate = `${data.launch_date}T00:00`;
-                            }
                         }
                     }
 
@@ -118,11 +309,8 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                             sv: { physicalAddress: '', phoneNumber: '' },
                             nl: { physicalAddress: '', phoneNumber: '' },
                         },
-                        localizedSocials: data.localizedSocials || {
-                            en: [],
-                            sv: [],
-                            nl: [],
-                        },
+                        localizedSocials: data.localizedSocials || { en: [], sv: [], nl: [] },
+                        domainLocaleConfig: data.domainLocaleConfig || [],
                     });
                 }
             } catch (error) {
@@ -136,39 +324,21 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
 
     // Use ref to always get latest state
     const settingsRef = useRef(settings);
-    useEffect(() => {
-        settingsRef.current = settings;
-    }, [settings]);
+    useEffect(() => { settingsRef.current = settings; }, [settings]);
 
     // Save settings
     const handleSave = async () => {
         try {
             setIsSaving(true);
-
-            // Get the latest state from ref
             const currentSettings = settingsRef.current;
-
-            // Prepare settings for API - ensure launch_date is properly formatted
-            const settingsToSave: any = {
-                ...currentSettings,
-            };
-
-            // Handle launch_date - keep it if it has a value, otherwise don't include it
+            const settingsToSave: any = { ...currentSettings };
+            
             if (currentSettings.launch_date && currentSettings.launch_date.trim() !== '') {
                 settingsToSave.launch_date = currentSettings.launch_date;
             } else {
-                // Don't include launch_date if it's empty
                 delete settingsToSave.launch_date;
             }
 
-            console.log('[SettingsView] Saving settings:', {
-                launch_date: settingsToSave.launch_date,
-                launch_date_type: typeof settingsToSave.launch_date,
-                has_launch_date: 'launch_date' in settingsToSave,
-                currentState_launch_date: currentSettings.launch_date,
-                all_keys: Object.keys(settingsToSave),
-            });
-
             const response = await fetch('/api/plugin-website/settings', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
@@ -191,29 +361,18 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
         }
     };
 
-    // Remove social link
-    const handleRemoveSocial = (id: number) => {
-        setSettings({
-            ...settings,
-            socials: settings.socials?.filter(social => social.id !== id) || [],
-        });
-    };
-
     // Update localized contact info
     const handleUpdateLocalizedContact = (field: 'physicalAddress' | 'phoneNumber', value: string) => {
         setSettings({
             ...settings,
             localizedContactInfo: {
                 ...settings.localizedContactInfo,
-                [activeTab]: {
-                    ...settings.localizedContactInfo?.[activeTab],
-                    [field]: value,
-                },
+                [activeTab]: { ...settings.localizedContactInfo?.[activeTab], [field]: value },
             },
         });
     };
 
-    // Add localized social link
+    // Social links handlers
     const handleAddLocalizedSocial = () => {
         const currentSocials = settings.localizedSocials?.[activeTab] || [];
         const newId = currentSocials.length ? Math.max(...currentSocials.map(s => s.id)) + 1 : 1;
@@ -226,32 +385,56 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
         });
     };
 
-    // Update localized social link
     const handleUpdateLocalizedSocial = (id: number, field: 'platform' | 'url', value: string) => {
         const currentSocials = settings.localizedSocials?.[activeTab] || [];
         setSettings({
             ...settings,
             localizedSocials: {
                 ...settings.localizedSocials,
-                [activeTab]: currentSocials.map(social =>
-                    social.id === id ? { ...social, [field]: value } : social
-                ),
+                [activeTab]: currentSocials.map(s => s.id === id ? { ...s, [field]: value } : s),
             },
         });
     };
 
-    // Remove localized social link
     const handleRemoveLocalizedSocial = (id: number) => {
         const currentSocials = settings.localizedSocials?.[activeTab] || [];
         setSettings({
             ...settings,
             localizedSocials: {
                 ...settings.localizedSocials,
-                [activeTab]: currentSocials.filter(social => social.id !== id),
+                [activeTab]: currentSocials.filter(s => s.id !== id),
             },
         });
     };
 
+    // Domain locale handlers
+    const openDomainModal = () => setShowDomainModal(true);
+    const closeDomainModal = () => setShowDomainModal(false);
+    const saveDomainConfig = (config: DomainLocaleConfig[]) => {
+        setSettings({ ...settings, domainLocaleConfig: config });
+        setShowDomainModal(false);
+    };
+    const saveDomainConfigAndClose = async (config: DomainLocaleConfig[]) => {
+        setSettings({ ...settings, domainLocaleConfig: config });
+        setShowDomainModal(false);
+        
+        // Immediately save to API
+        try {
+            const response = await fetch('/api/plugin-website/settings', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({ ...settings, domainLocaleConfig: config }),
+            });
+            if (response.ok) {
+                setShowSuccess(true);
+                setTimeout(() => setShowSuccess(false), 3000);
+            }
+        } catch (error) {
+            console.error('Failed to save domain config:', error);
+        }
+    };
+
     if (isLoading) {
         return (
             <div className="h-full w-full bg-dashboard-card text-dashboard-text flex items-center justify-center">
@@ -279,29 +462,15 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                     <button
                         onClick={handleSave}
                         disabled={isSaving}
-                        className={`inline-flex items-center gap-2 px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-all shadow-lg shadow-primary/20 ${isSaving
-                            ? 'bg-neutral-400 text-white cursor-not-allowed'
-                            : showSuccess
-                                ? 'bg-green-600 text-white'
-                                : 'bg-primary text-white hover:bg-primary/90'
-                            }`}
+                        className={`inline-flex items-center gap-2 px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-all shadow-lg shadow-primary/20 ${
+                            isSaving ? 'bg-neutral-400 text-white cursor-not-allowed' :
+                            showSuccess ? 'bg-green-600 text-white' :
+                            'bg-primary text-white hover:bg-primary/90'
+                        }`}
                     >
-                        {isSaving ? (
-                            <>
-                                <RefreshCw className="w-4 h-4 animate-spin" />
-                                Saving...
-                            </>
-                        ) : showSuccess ? (
-                            <>
-                                <Settings2 className="w-4 h-4" />
-                                Saved!
-                            </>
-                        ) : (
-                            <>
-                                <Save className="w-4 h-4" />
-                                Save Settings
-                            </>
-                        )}
+                        {isSaving ? <><RefreshCw className="w-4 h-4 animate-spin" /> Saving...</> :
+                         showSuccess ? <><Settings2 className="w-4 h-4" /> Saved!</> :
+                         <><Save className="w-4 h-4" /> Save Settings</>}
                     </button>
                 </div>
 
@@ -316,9 +485,7 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                             </div>
                             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                 <div className="space-y-2">
-                                    <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">
-                                        Website Name
-                                    </label>
+                                    <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">Website Name</label>
                                     <input
                                         type="text"
                                         value={settings.siteName || ''}
@@ -328,9 +495,7 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                                     />
                                 </div>
                                 <div className="space-y-2">
-                                    <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">
-                                        Website Tagline
-                                    </label>
+                                    <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">Website Tagline</label>
                                     <input
                                         type="text"
                                         value={settings.siteTagline || ''}
@@ -341,9 +506,7 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                                 </div>
                             </div>
                             <div className="mt-6 space-y-2">
-                                <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">
-                                    Website Description
-                                </label>
+                                <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">Website Description</label>
                                 <textarea
                                     value={settings.siteDescription || ''}
                                     onChange={(e) => setSettings({ ...settings, siteDescription: e.target.value })}
@@ -353,9 +516,7 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                                 />
                             </div>
                             <div className="mt-6 space-y-2">
-                                <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">
-                                    Keywords (comma-separated)
-                                </label>
+                                <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">Keywords (comma-separated)</label>
                                 <input
                                     type="text"
                                     value={settings.keywords || ''}
@@ -372,17 +533,13 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                                 <Mail size={20} className="text-primary" />
                                 Contact Information
                             </div>
-
-                            {/* Language Tabs */}
                             <div className="flex gap-2 mb-6">
                                 {AVAILABLE_LOCALES.map((loc) => (
                                     <button
                                         key={loc.code}
                                         onClick={() => setActiveTab(loc.code)}
                                         className={`px-4 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all ${
-                                            activeTab === loc.code
-                                                ? 'bg-primary text-white'
-                                                : 'bg-dashboard-card text-dashboard-text-secondary hover:bg-dashboard-border'
+                                            activeTab === loc.code ? 'bg-primary text-white' : 'bg-dashboard-card text-dashboard-text-secondary hover:bg-dashboard-border'
                                         }`}
                                     >
                                         <span className="mr-1">{loc.flag}</span>
@@ -390,12 +547,9 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                                     </button>
                                 ))}
                             </div>
-
                             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                 <div className="space-y-2">
-                                    <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">
-                                        Contact Email (global)
-                                    </label>
+                                    <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">Contact Email (global)</label>
                                     <input
                                         type="email"
                                         value={settings.contactEmail || ''}
@@ -405,9 +559,7 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                                     />
                                 </div>
                                 <div className="space-y-2">
-                                    <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">
-                                        Phone Number ({activeTab.toUpperCase()})
-                                    </label>
+                                    <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">Phone Number ({activeTab.toUpperCase()})</label>
                                     <input
                                         type="tel"
                                         value={settings.localizedContactInfo?.[activeTab]?.phoneNumber || settings.phoneNumber || ''}
@@ -418,9 +570,7 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                                 </div>
                             </div>
                             <div className="mt-6 space-y-2">
-                                <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">
-                                    Physical Address ({activeTab.toUpperCase()})
-                                </label>
+                                <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest">Physical Address ({activeTab.toUpperCase()})</label>
                                 <textarea
                                     value={settings.localizedContactInfo?.[activeTab]?.physicalAddress || settings.physicalAddress || ''}
                                     onChange={(e) => handleUpdateLocalizedContact('physicalAddress', e.target.value)}
@@ -438,24 +588,17 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                                     <Globe size={20} className="text-primary" />
                                     Social Links ({activeTab.toUpperCase()})
                                 </div>
-                                <button
-                                    onClick={handleAddLocalizedSocial}
-                                    className="px-4 py-2 text-xs font-bold uppercase tracking-widest bg-primary text-white rounded-full hover:bg-primary/90 transition-all"
-                                >
+                                <button onClick={handleAddLocalizedSocial} className="px-4 py-2 text-xs font-bold uppercase tracking-widest bg-primary text-white rounded-full hover:bg-primary/90 transition-all">
                                     Add Social
                                 </button>
                             </div>
-
-                            {/* Language Tabs for Socials */}
                             <div className="flex gap-2 mb-6">
                                 {AVAILABLE_LOCALES.map((loc) => (
                                     <button
                                         key={loc.code}
                                         onClick={() => setActiveTab(loc.code)}
                                         className={`px-4 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all ${
-                                            activeTab === loc.code
-                                                ? 'bg-primary text-white'
-                                                : 'bg-dashboard-card text-dashboard-text-secondary hover:bg-dashboard-border'
+                                            activeTab === loc.code ? 'bg-primary text-white' : 'bg-dashboard-card text-dashboard-text-secondary hover:bg-dashboard-border'
                                         }`}
                                     >
                                         <span className="mr-1">{loc.flag}</span>
@@ -463,49 +606,43 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                                     </button>
                                 ))}
                             </div>
-
                             <div className="space-y-4">
                                 {(() => {
                                     const currentSocials = settings.localizedSocials?.[activeTab] || [];
                                     return currentSocials.length > 0 ? (
                                         currentSocials.map((social) => {
-                                        const platform = AVAILABLE_PLATFORMS.find(p => p.name === social.platform);
-                                        return (
-                                            <div key={social.id} className="flex items-center gap-4 p-4 bg-dashboard-card rounded-2xl border border-dashboard-border">
-                                                <div className="flex-shrink-0 text-dashboard-text-secondary">
-                                                    {platform?.icon || <Globe size={18} />}
+                                            const platform = AVAILABLE_PLATFORMS.find(p => p.name === social.platform);
+                                            return (
+                                                <div key={social.id} className="flex items-center gap-4 p-4 bg-dashboard-card rounded-2xl border border-dashboard-border">
+                                                    <div className="flex-shrink-0 text-dashboard-text-secondary">
+                                                        {platform?.icon || <Globe size={18} />}
+                                                    </div>
+                                                    <select
+                                                        value={social.platform}
+                                                        onChange={(e) => handleUpdateLocalizedSocial(social.id, 'platform', e.target.value)}
+                                                        className="flex-1 px-4 py-2 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text"
+                                                    >
+                                                        <option value="">Select Platform</option>
+                                                        {AVAILABLE_PLATFORMS.map(p => (<option key={p.name} value={p.name}>{p.name}</option>))}
+                                                    </select>
+                                                    <input
+                                                        type="url"
+                                                        value={social.url}
+                                                        onChange={(e) => handleUpdateLocalizedSocial(social.id, 'url', e.target.value)}
+                                                        placeholder="https://..."
+                                                        className="flex-1 px-4 py-2 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text"
+                                                    />
+                                                    <button onClick={() => handleRemoveLocalizedSocial(social.id)} className="px-4 py-2 text-xs font-bold text-red-500 hover:text-red-700 transition-colors">
+                                                        Remove
+                                                    </button>
                                                 </div>
-                                                <select
-                                                    value={social.platform}
-                                                    onChange={(e) => handleUpdateLocalizedSocial(social.id, 'platform', e.target.value)}
-                                                    className="flex-1 px-4 py-2 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text"
-                                                >
-                                                    <option value="">Select Platform</option>
-                                                    {AVAILABLE_PLATFORMS.map(p => (
-                                                        <option key={p.name} value={p.name}>{p.name}</option>
-                                                    ))}
-                                                </select>
-                                                <input
-                                                    type="url"
-                                                    value={social.url}
-                                                    onChange={(e) => handleUpdateLocalizedSocial(social.id, 'url', e.target.value)}
-                                                    placeholder="https://..."
-                                                    className="flex-1 px-4 py-2 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text"
-                                                />
-                                                <button
-                                                    onClick={() => handleRemoveLocalizedSocial(social.id)}
-                                                    className="px-4 py-2 text-xs font-bold text-red-500 hover:text-red-700 dark:hover:text-red-400 transition-colors"
-                                                >
-                                                    Remove
-                                                </button>
-                                            </div>
-                                        );
-                                    })
-                                ) : (
-                                    <p className="text-sm text-dashboard-text-secondary text-center py-8">
-                                        No social links added for {activeTab.toUpperCase()}. Click "Add Social" to get started.
-                                    </p>
-                                );
+                                            );
+                                        })
+                                    ) : (
+                                        <p className="text-sm text-dashboard-text-secondary text-center py-8">
+                                            No social links added for {activeTab.toUpperCase()}. Click "Add Social" to get started.
+                                        </p>
+                                    );
                                 })()}
                             </div>
                         </section>
@@ -521,21 +658,14 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                             </div>
                             <div className="flex items-center justify-between">
                                 <div>
-                                    <label className="text-xs font-bold text-dashboard-text block mb-1">
-                                        Maintenance Mode
-                                    </label>
-                                    <p className="text-[10px] text-dashboard-text-secondary">
-                                        Show maintenance page to visitors
-                                    </p>
+                                    <label className="text-xs font-bold text-dashboard-text block mb-1">Maintenance Mode</label>
+                                    <p className="text-[10px] text-dashboard-text-secondary">Show maintenance page to visitors</p>
                                 </div>
                                 <button
                                     onClick={() => setSettings({ ...settings, maintenanceMode: !settings.maintenanceMode })}
-                                    className={`relative w-12 h-6 rounded-full transition-colors ${settings.maintenanceMode ? 'bg-primary' : 'bg-neutral-200 dark:bg-neutral-700'
-                                        }`}
+                                    className={`relative w-12 h-6 rounded-full transition-colors ${settings.maintenanceMode ? 'bg-primary' : 'bg-neutral-200 dark:bg-neutral-700'}`}
                                 >
-                                    <div
-                                        className={`absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform duration-200 ${settings.maintenanceMode ? 'translate-x-6' : 'translate-x-0'}`}
-                                    />
+                                    <div className={`absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform duration-200 ${settings.maintenanceMode ? 'translate-x-6' : 'translate-x-0'}`} />
                                 </button>
                             </div>
                         </section>
@@ -548,75 +678,51 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                             </div>
                             <div className="space-y-4">
                                 <div className="space-y-2">
-                                    <label className="text-xs font-bold text-dashboard-text block">
-                                        Date
-                                    </label>
+                                    <label className="text-xs font-bold text-dashboard-text block">Date</label>
                                     <input
                                         type="date"
                                         value={settings.launch_date ? settings.launch_date.split('T')[0] : ''}
                                         onChange={(e) => {
                                             const dateValue = e.target.value;
-                                            const currentTime = settings.launch_date?.includes('T')
-                                                ? settings.launch_date.split('T')[1]
-                                                : '00:00';
-
-                                            const newLaunchDate = dateValue ? `${dateValue}T${currentTime}` : '';
-
-                                            console.log('[SettingsView] Date changed:', {
-                                                dateValue,
-                                                currentTime,
-                                                newLaunchDate,
-                                            });
-
-                                            setSettings(prev => ({
-                                                ...prev,
-                                                launch_date: newLaunchDate,
-                                            }));
+                                            const currentTime = settings.launch_date?.includes('T') ? settings.launch_date.split('T')[1] : '00:00';
+                                            setSettings(prev => ({ ...prev, launch_date: dateValue ? `${dateValue}T${currentTime}` : '' }));
                                         }}
                                         className="w-full px-4 py-2 bg-dashboard-card border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text"
                                     />
                                 </div>
                                 <div className="space-y-2">
-                                    <label className="text-xs font-bold text-dashboard-text block">
-                                        Time (24-hour format)
-                                    </label>
+                                    <label className="text-xs font-bold text-dashboard-text block">Time (24-hour format)</label>
                                     <input
                                         type="time"
                                         step="60"
-                                        value={settings.launch_date?.includes('T')
-                                            ? settings.launch_date.split('T')[1]
-                                            : '00:00'}
+                                        value={settings.launch_date?.includes('T') ? settings.launch_date.split('T')[1] : '00:00'}
                                         onChange={(e) => {
                                             const timeValue = e.target.value;
-                                            const currentDate = settings.launch_date?.includes('T')
-                                                ? settings.launch_date.split('T')[0]
-                                                : new Date().toISOString().split('T')[0];
-
-                                            const newLaunchDate = timeValue ? `${currentDate}T${timeValue}` : '';
-
-                                            console.log('[SettingsView] Time changed:', {
-                                                timeValue,
-                                                currentDate,
-                                                newLaunchDate,
-                                            });
-
-                                            setSettings(prev => ({
-                                                ...prev,
-                                                launch_date: newLaunchDate,
-                                            }));
+                                            const currentDate = settings.launch_date?.includes('T') ? settings.launch_date.split('T')[0] : new Date().toISOString().split('T')[0];
+                                            setSettings(prev => ({ ...prev, launch_date: timeValue ? `${currentDate}T${timeValue}` : '' }));
                                         }}
                                         className="w-full px-4 py-2 bg-dashboard-card border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary text-dashboard-text"
                                     />
                                 </div>
-                                <p className="text-[10px] text-dashboard-text-secondary">
-                                    Used for countdown timers. Time defaults to 00:00 if not specified.
-                                </p>
+                                <p className="text-[10px] text-dashboard-text-secondary">Used for countdown timers.</p>
                             </div>
                         </section>
+
+                        {/* Domain Languages Card */}
+                        <DomainLanguagesCard config={settings.domainLocaleConfig || []} onEdit={openDomainModal} />
                     </div>
                 </div>
             </div>
+
+            {/* Domain Languages Modal */}
+            <DomainLanguagesModal
+                isOpen={showDomainModal}
+                config={settings.domainLocaleConfig || []}
+                onSave={saveDomainConfig}
+                onSaveAndClose={saveDomainConfigAndClose}
+                onClose={closeDomainModal}
+                isSaving={isSaving}
+            />
         </div>
     );
 }
-