@jhits/plugin-newsletter 0.0.16 → 0.0.17

package/src/views/components/DomainPromptModal.tsx

@@ -0,0 +1,160 @@
+/**
+ * Domain Prompt Modal Component
+ * Non-technical modal to ask for the website domain when it's missing in dev mode.
+ */
+
+'use client';
+
+import React, { useState } from 'react';
+import { X, Globe, Save, RefreshCw, CheckCircle2, Info } from 'lucide-react';
+
+interface DomainPromptModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSave: (domain: string) => Promise<void>;
+    language: string;
+}
+
+export function DomainPromptModal({ isOpen, onClose, onSave, language }: DomainPromptModalProps) {
+    const [domain, setDomain] = useState('');
+    const [isSaving, setIsSaving] = useState(false);
+    const [isSuccess, setIsSuccess] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const languageNames: Record<string, string> = {
+        en: 'English',
+        nl: 'Dutch',
+        sv: 'Swedish',
+    };
+
+    const handleSave = async () => {
+        if (!domain.trim()) {
+            setError('Please enter a website address');
+            return;
+        }
+
+        // Basic URL validation/cleanup
+        let cleanDomain = domain.trim().toLowerCase();
+        if (cleanDomain.startsWith('http://')) cleanDomain = cleanDomain.replace('http://', '');
+        if (cleanDomain.startsWith('https://')) cleanDomain = cleanDomain.replace('https://', '');
+        if (cleanDomain.endsWith('/')) cleanDomain = cleanDomain.slice(0, -1);
+
+        try {
+            setIsSaving(true);
+            setError(null);
+            await onSave(cleanDomain);
+            setIsSuccess(true);
+            setTimeout(() => {
+                onClose();
+            }, 1500);
+        } catch (err: any) {
+            setError(err.message || 'Failed to save domain configuration');
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="fixed inset-0 z-[60] flex items-center justify-center p-4">
+            {/* Backdrop */}
+            <div 
+                className="absolute inset-0 bg-black/60 backdrop-blur-md"
+                onClick={() => !isSaving && onClose()}
+            />
+            
+            {/* Modal */}
+            <div className="relative w-full max-w-lg bg-white dark:bg-neutral-900 rounded-[2.5rem] border border-dashboard-border shadow-2xl overflow-hidden animate-in fade-in zoom-in duration-300">
+                {/* Header */}
+                <div className="px-10 pt-10 pb-6 text-center">
+                    <div className="w-20 h-20 bg-primary/10 rounded-[2rem] flex items-center justify-center mx-auto mb-6">
+                        <Globe size={40} className="text-primary" />
+                    </div>
+                    <h2 className="text-3xl font-black text-dashboard-text uppercase tracking-tighter leading-none mb-2">
+                        Website Connection<span className="text-primary">.</span>
+                    </h2>
+                    <p className="text-sm text-neutral-500 dark:text-neutral-400 font-medium">
+                        We need to know where your <span className="font-bold text-dashboard-text">{languageNames[language] || language}</span> website is hosted to ensure links work correctly.
+                    </p>
+                </div>
+
+                {/* Content */}
+                <div className="px-10 pb-10 space-y-6">
+                    <div className="bg-blue-50/50 dark:bg-blue-900/10 border border-blue-100 dark:border-blue-900/20 rounded-2xl p-4 flex gap-3">
+                        <Info size={18} className="text-blue-500 flex-shrink-0 mt-0.5" />
+                        <p className="text-xs text-blue-700 dark:text-blue-300 leading-relaxed">
+                            Since you are in development mode, we couldn't automatically find the domain for this language. Please provide it below.
+                        </p>
+                    </div>
+
+                    <div>
+                        <label className="text-[10px] font-black text-dashboard-text-secondary uppercase tracking-[0.2em] block mb-3 ml-1">
+                            Your {languageNames[language] || language} Website URL
+                        </label>
+                        <div className="relative group">
+                            <div className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400 group-focus-within:text-primary transition-colors font-mono text-sm">
+                                https://
+                            </div>
+                            <input
+                                type="text"
+                                value={domain}
+                                onChange={(e) => {
+                                    setDomain(e.target.value);
+                                    setError(null);
+                                }}
+                                onKeyDown={(e) => e.key === 'Enter' && handleSave()}
+                                placeholder="www.yourwebsite.com"
+                                className="w-full pl-20 pr-6 py-4 bg-dashboard-bg border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all text-dashboard-text font-medium"
+                                autoFocus
+                            />
+                        </div>
+                        {error && (
+                            <p className="text-[10px] text-red-500 font-bold uppercase tracking-widest mt-3 ml-1">
+                                {error}
+                            </p>
+                        )}
+                    </div>
+
+                    <div className="flex gap-3 pt-2">
+                        <button
+                            onClick={onClose}
+                            disabled={isSaving}
+                            className="flex-1 px-6 py-4 rounded-full text-[10px] font-black uppercase tracking-widest transition-all bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border active:scale-95"
+                        >
+                            Skip for now
+                        </button>
+                        <button
+                            onClick={handleSave}
+                            disabled={isSaving || isSuccess}
+                            className={`flex-[2] inline-flex items-center justify-center gap-2 px-6 py-4 rounded-full text-[10px] font-black uppercase tracking-widest transition-all shadow-lg active:scale-95 ${
+                                isSaving 
+                                    ? 'bg-neutral-400 text-white cursor-not-allowed'
+                                    : isSuccess
+                                        ? 'bg-green-600 text-white'
+                                        : 'bg-primary text-white hover:shadow-primary/20'
+                            }`}
+                        >
+                            {isSaving ? (
+                                <>
+                                    <RefreshCw className="w-4 h-4 animate-spin" />
+                                    Connecting...
+                                </>
+                            ) : isSuccess ? (
+                                <>
+                                    <CheckCircle2 className="w-4 h-4" />
+                                    Saved!
+                                </>
+                            ) : (
+                                <>
+                                    <Save className="w-4 h-4" />
+                                    Link Website
+                                </>
+                            )}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}