@jhits/plugin-website 0.0.16 → 0.0.17

package/src/views/Settings/components/StatusSection.tsx

@@ -0,0 +1,181 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Settings2, Rocket, ShieldAlert, Cpu } from 'lucide-react';
+import { WebsiteSettings } from '../../../types/settings';
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
+
+interface StatusSectionProps {
+    settings: WebsiteSettings;
+    onUpdate: (updates: Partial<WebsiteSettings>) => void;
+}
+
+export function StatusSection({ settings, onUpdate }: StatusSectionProps) {
+    const isDev = process.env.NODE_ENV === 'development';
+
+    // Virtualize the published state if the date has passed
+    const hasLaunchDatePassed = settings.launch_date && new Date(settings.launch_date).getTime() <= Date.now();
+    const isLaunched = settings.launched || hasLaunchDatePassed;
+    const isMaintenance = hasLaunchDatePassed ? false : settings.maintenanceMode;
+
+    // AUTO-RELEASE UI REFRESH
+    React.useEffect(() => {
+        if (!settings.launch_date || hasLaunchDatePassed) return;
+        const launchTime = new Date(settings.launch_date).getTime();
+        if (launchTime <= Date.now()) return; // Already passed
+
+        const timer = setInterval(() => {
+            if (new Date(settings.launch_date!).getTime() <= Date.now()) {
+                // Time is up! Trigger a re-fetch of the settings to get the virtualized/persisted state
+                window.location.reload();
+                clearInterval(timer);
+            }
+        }, 1000);
+
+        return () => clearInterval(timer);
+    }, [settings.launch_date]);
+
+    const handleToggleLaunch = () => {
+        const newLaunched = !settings.launched;
+        onUpdate({ 
+            launched: newLaunched,
+            maintenanceMode: newLaunched ? false : settings.maintenanceMode 
+        });
+    };
+
+    return (
+        <section className="space-y-12">
+            <div className="flex items-center gap-6">
+                <div className="size-14 rounded-2xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20 shadow-inner">
+                    <Settings2 size={28} />
+                </div>
+                <h3 className="text-4xl lg:text-5xl font-bold text-dashboard-text leading-none">
+                    Site <span className="text-primary">Status</span>
+                </h3>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                {/* 1. Launch Status */}
+                <motion.div 
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    className="bg-dashboard-card/50 border border-dashboard-border/50 p-10 rounded-[3rem] group relative overflow-hidden"
+                >
+                    <div className="absolute top-0 right-0 w-32 h-32 blur-3xl opacity-0 group-hover:opacity-10 transition-opacity bg-primary pointer-events-none" />
+                    
+                    <div className="flex items-center justify-between mb-10">
+                        <div className={cn(
+                            "size-16 rounded-2xl flex items-center justify-center transition-all duration-500 border relative overflow-hidden shadow-inner",
+                            isLaunched 
+                                ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-500" 
+                                : "bg-neutral-500/5 border-neutral-500/10 text-neutral-400"
+                        )}>
+                            <Rocket size={28} className={cn("relative z-10 transition-transform duration-500 group-hover:scale-110", isLaunched && "animate-pulse")} />
+                        </div>
+                        <button
+                            onClick={handleToggleLaunch}
+                            className={cn(
+                                "relative w-16 h-8 rounded-full transition-all duration-500 p-1 shadow-inner",
+                                isLaunched ? "bg-emerald-500" : "bg-neutral-200 dark:bg-neutral-800"
+                            )}
+                        >
+                            <div className={cn(
+                                "w-6 h-6 bg-white rounded-full transition-transform duration-500 shadow-lg",
+                                isLaunched ? "translate-x-8" : "translate-x-0"
+                            )} />
+                        </button>
+                    </div>
+                    
+                    <div>
+                        <span className="text-[10px] font-bold text-primary uppercase tracking-[0.3em] mb-3 block opacity-60">Deployment Vector</span>
+                        <h4 className="text-2xl font-bold text-dashboard-text mb-3">
+                            {isLaunched ? 'System Published' : 'Private Mode'}
+                        </h4>
+                        <p className="text-sm text-neutral-500 dark:text-neutral-400 font-medium leading-relaxed">
+                            {isLaunched 
+                                ? 'Your website is live and visible to all users across the world.' 
+                                : 'The website is currently restricted to internal use and development.'}
+                        </p>
+                    </div>
+                </motion.div>
+
+                {/* 2. Maintenance Status */}
+                <motion.div 
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.1 }}
+                    className={cn(
+                        "bg-dashboard-card/50 border border-dashboard-border/50 p-10 rounded-[3rem] group relative overflow-hidden transition-all duration-500",
+                        isMaintenance && "border-orange-500/30 bg-orange-500/10"
+                    )}
+                >
+                    <div className="absolute top-0 right-0 w-32 h-32 blur-3xl opacity-0 group-hover:opacity-10 transition-opacity bg-orange-500 pointer-events-none" />
+                    
+                    <div className="flex items-center justify-between mb-10">
+                        <div className={cn(
+                            "size-16 rounded-2xl flex items-center justify-center transition-all duration-500 border relative overflow-hidden shadow-inner",
+                            isMaintenance 
+                                ? "bg-orange-500/10 border-orange-500/20 text-orange-500" 
+                                : "bg-neutral-500/5 border-neutral-500/10 text-neutral-400"
+                        )}>
+                            <ShieldAlert size={28} className="relative z-10 transition-transform duration-500 group-hover:scale-110" />
+                        </div>
+                        <button
+                            onClick={() => onUpdate({ maintenanceMode: !settings.maintenanceMode })}
+                            className={cn(
+                                "relative w-16 h-8 rounded-full transition-all duration-500 p-1 shadow-inner",
+                                isMaintenance ? "bg-orange-500" : "bg-neutral-200 dark:bg-neutral-800"
+                            )}
+                        >
+                            <div className={cn(
+                                "w-6 h-6 bg-white rounded-full transition-transform duration-500 shadow-lg",
+                                isMaintenance ? "translate-x-8" : "translate-x-0"
+                            )} />
+                        </button>
+                    </div>
+
+                    <div>
+                        <span className="text-[10px] font-bold text-orange-500 uppercase tracking-[0.3em] mb-3 block opacity-60">Operational Mode</span>
+                        <h4 className="text-2xl font-bold text-dashboard-text mb-3">
+                            Maintenance
+                        </h4>
+                        <p className="text-sm text-neutral-500 dark:text-neutral-400 font-medium leading-relaxed">
+                            {isMaintenance 
+                                ? 'Visitors see a maintenance screen. You can still access the dashboard.' 
+                                : 'System is running normally. All features are available to public users.'}
+                        </p>
+                    </div>
+                </motion.div>
+            </div>
+
+            {/* 3. Developer Mode Info */}
+            {isDev && (
+                <motion.div 
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ delay: 0.2 }}
+                    className="bg-dashboard-card/50 border border-dashboard-border/50 p-10 rounded-[3rem] relative overflow-hidden group"
+                >
+                    <div className="absolute top-0 right-0 p-10 opacity-[0.03] group-hover:opacity-[0.07] transition-opacity">
+                        <Cpu size={160} />
+                    </div>
+                    <div className="flex flex-col md:flex-row items-start md:items-center gap-8 relative z-10">
+                        <div className="size-14 rounded-2xl bg-primary/10 flex items-center justify-center text-primary shrink-0 border border-primary/20">
+                            <Cpu size={24} />
+                        </div>
+                        <div>
+                            <span className="text-[10px] font-bold uppercase tracking-[0.4em] text-primary mb-2 block">Developer Engine Protocol</span>
+                            <p className="text-sm text-neutral-500 dark:text-neutral-400 font-medium leading-relaxed max-w-3xl">
+                                Authentication and status checks are bypassed during development. Changes made here will affect the production environment once deployed.
+                            </p>
+                        </div>
+                    </div>
+                </motion.div>
+            )}
+        </section>
+    );
+}

package/src/views/Settings/constants.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { FaFacebook, FaInstagram, FaLinkedin, FaPinterest, FaTiktok } from 'react-icons/fa';
+import { FaXTwitter } from 'react-icons/fa6';
+import { LocaleDefinition } from '../../types/settings';
+
+/**
+ * Popular Locale Suggestions
+ * These are used for "Quick Add" in the UI.
+ */
+export const GLOBAL_LOCALE_DATABASE: LocaleDefinition[] = [
+    { code: 'en', name: 'English', countryCode: 'gb' },
+    { code: 'sv', name: 'Swedish', countryCode: 'se' },
+    { code: 'nl', name: 'Dutch', countryCode: 'nl' },
+    { code: 'de', name: 'German', countryCode: 'de' },
+    { code: 'fr', name: 'French', countryCode: 'fr' },
+    { code: 'es', name: 'Spanish', countryCode: 'es' },
+];
+
+export const AVAILABLE_PLATFORMS = [
+    { name: 'Instagram', icon: React.createElement(FaInstagram, { size: 18 }) },
+    { name: 'Facebook', icon: React.createElement(FaFacebook, { size: 18 }) },
+    { name: 'Twitter', icon: React.createElement(FaXTwitter, { size: 18 }) },
+    { name: 'Pinterest', icon: React.createElement(FaPinterest, { size: 18 }) },
+    { name: 'LinkedIn', icon: React.createElement(FaLinkedin, { size: 18 }) },
+    { name: 'TikTok', icon: React.createElement(FaTiktok, { size: 18 }) },
+];

package/src/views/Settings/hooks/useWebsiteSettings.ts

@@ -0,0 +1,240 @@
+import { useState, useEffect } from 'react';
+import { 
+    WebsiteSettings, 
+    LocalizedContactInfo, 
+    LocalizedSocialLink, 
+    DomainLocaleConfig, 
+    LocaleDefinition,
+    LocalizedIdentity
+} from '../../../types/settings';
+
+export function useWebsiteSettings(siteId: string) {
+    const [isLoading, setIsLoading] = useState(true);
+    const [isSaving, setIsSaving] = useState(false);
+    const [showSuccess, setShowSuccess] = useState(false);
+    const [activeTab, setActiveTab] = useState<string>('');
+    const [showDomainModal, setShowDomainModal] = useState(false);
+    
+    // Initial data from server to compare for "dirty" state
+    const [initialSettings, setInitialSettings] = useState<string>('');
+    
+    const [settings, setSettings] = useState<WebsiteSettings>({
+        identifier: 'site_config',
+        contactEmail: '',
+        smtpUser: '',
+        maintenanceMode: false,
+        launched: false,
+        launch_date: '',
+        supportedLocales: [],
+        localizedIdentity: {},
+        localizedContactInfo: {},
+        localizedSocials: {},
+        domainLocaleConfig: [],
+    });
+
+    const isDirty = initialSettings !== JSON.stringify(settings);
+    const activeLocales = settings.supportedLocales;
+
+    // Ensure activeTab is always valid
+    useEffect(() => {
+        if (activeLocales.length > 0) {
+            if (!activeTab || !activeLocales.some(l => l.code === activeTab)) {
+                setActiveTab(activeLocales[0].code);
+            }
+        }
+    }, [activeLocales, activeTab]);
+
+    // Fetch settings on load
+    useEffect(() => {
+        const fetchSettings = async () => {
+            try {
+                setIsLoading(true);
+                const response = await fetch('/api/plugin-website/settings', { 
+                    credentials: 'include',
+                    cache: 'no-store' 
+                });
+                if (!response.ok) throw new Error('Failed to fetch settings');
+                const data = await response.json();
+                
+                if (data && data.identifier) {
+                    let launchDate = '';
+                    if (data.launch_date) {
+                        const date = new Date(data.launch_date);
+                        if (!isNaN(date.getTime())) {
+                            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}`;
+                        }
+                    }
+
+                    const loaded = {
+                        ...data,
+                        launch_date: launchDate,
+                        supportedLocales: data.supportedLocales || [],
+                        localizedIdentity: data.localizedIdentity || {},
+                        localizedContactInfo: data.localizedContactInfo || {},
+                        localizedSocials: data.localizedSocials || {},
+                        domainLocaleConfig: data.domainLocaleConfig || [],
+                    };
+
+                    setSettings(loaded);
+                    setInitialSettings(JSON.stringify(loaded));
+
+                    if (loaded.supportedLocales.length > 0) {
+                        setActiveTab(loaded.supportedLocales[0].code);
+                    }
+                }
+            } catch (error) {
+                console.error('Failed to load settings:', error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+        fetchSettings();
+    }, [siteId]);
+
+    const handleUpdateSettings = (updates: Partial<WebsiteSettings>) => {
+        setSettings(prev => ({ ...prev, ...updates }));
+    };
+
+    const handleUpdateLocalizedIdentity = (field: keyof LocalizedIdentity, value: string) => {
+        if (!activeTab) return;
+        setSettings(prev => ({
+            ...prev,
+            localizedIdentity: {
+                ...prev.localizedIdentity,
+                [activeTab]: { ...(prev.localizedIdentity?.[activeTab] || {}), [field]: value },
+            },
+        }));
+    };
+
+    const handleUpdateLocalizedContact = (field: keyof LocalizedContactInfo, value: string) => {
+        if (!activeTab) return;
+        setSettings(prev => ({
+            ...prev,
+            localizedContactInfo: {
+                ...prev.localizedContactInfo,
+                [activeTab]: { ...(prev.localizedContactInfo?.[activeTab] || {}), [field]: value },
+            },
+        }));
+    };
+
+    const handleAddLocalizedSocial = () => {
+        if (!activeTab) return;
+        const currentSocials = settings.localizedSocials?.[activeTab] || [];
+        const newId = Date.now();
+        setSettings(prev => ({
+            ...prev,
+            localizedSocials: {
+                ...prev.localizedSocials,
+                [activeTab]: [...currentSocials, { id: newId, platform: '', url: '' }],
+            },
+        }));
+    };
+
+    const handleUpdateLocalizedSocial = (id: number, field: string, value: string) => {
+        if (!activeTab) return;
+        const currentSocials = settings.localizedSocials?.[activeTab] || [];
+        setSettings(prev => ({
+            ...prev,
+            localizedSocials: {
+                ...prev.localizedSocials,
+                [activeTab]: currentSocials.map(s => s.id === id ? { ...s, [field]: value } : s),
+            },
+        }));
+    };
+
+    const handleRemoveLocalizedSocial = (id: number) => {
+        if (!activeTab) return;
+        const currentSocials = settings.localizedSocials?.[activeTab] || [];
+        setSettings(prev => ({
+            ...prev,
+            localizedSocials: {
+                ...prev.localizedSocials,
+                [activeTab]: currentSocials.filter(s => s.id !== id),
+            },
+        }));
+    };
+
+    const handleUpdateLocales = (locales: LocaleDefinition[]) => {
+        setSettings(prev => ({ ...prev, supportedLocales: locales }));
+    };
+
+    const handleReset = () => {
+        if (initialSettings) {
+            setSettings(JSON.parse(initialSettings));
+        }
+    };
+
+    const handleSave = async () => {
+        if (settings.supportedLocales.length === 0) {
+            alert('At least one language must be enabled.');
+            return;
+        }
+
+        try {
+            setIsSaving(true);
+            const response = await fetch('/api/plugin-website/settings', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify(settings),
+            });
+
+            if (!response.ok) throw new Error('Failed to save settings');
+
+            setInitialSettings(JSON.stringify(settings));
+            setShowSuccess(true);
+            setTimeout(() => setShowSuccess(false), 3000);
+        } catch (error: any) {
+            console.error('Failed to save settings:', error);
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    const saveDomainConfigAndClose = async (config: DomainLocaleConfig[]) => {
+        const newSettings = { ...settings, domainLocaleConfig: config };
+        setSettings(newSettings);
+        setShowDomainModal(false);
+        try {
+            await fetch('/api/plugin-website/settings', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify(newSettings),
+            });
+            setInitialSettings(JSON.stringify(newSettings));
+            setShowSuccess(true);
+            setTimeout(() => setShowSuccess(false), 3000);
+        } catch (e) {
+            console.error('Auto-save failed');
+        }
+    };
+
+    return {
+        settings,
+        isLoading,
+        isSaving,
+        isDirty,
+        showSuccess,
+        activeTab,
+        setActiveTab,
+        activeLocales,
+        showDomainModal,
+        setShowDomainModal,
+        handleUpdateSettings,
+        handleUpdateLocalizedIdentity,
+        handleUpdateLocalizedContact,
+        handleAddLocalizedSocial,
+        handleUpdateLocalizedSocial,
+        handleRemoveLocalizedSocial,
+        handleUpdateLocales,
+        handleSave,
+        handleReset,
+        saveDomainConfigAndClose
+    };
+}

package/src/views/Settings/types.ts

@@ -0,0 +1,4 @@
+export interface SettingsViewProps {
+    siteId: string;
+    locale: string;
+}