x

apps/spa/src/components/Footer.tsx

@@ -9,40 +9,8 @@ interface FooterProps {
 export default function Footer({ categories = [] }: FooterProps) {
   const { t } = useTranslation()
   const [exploreMenu, setExploreMenu] = useState<MenuItem[]>([])
+  const [supportMenu, setSupportMenu] = useState<MenuItem[]>([])
   const [settings, setSettings] = useState<StoreSettings | null>(null)
-  
-  const [email, setEmail] = useState('')
-  const [subscribing, setSubscribing] = useState(false)
-  const [subscribeStatus, setSubscribeStatus] = useState<'idle' | 'success' | 'error'>('idle')
-  const [subscribeMessage, setSubscribeMessage] = useState('')
-
-  const handleSubscribe = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!email) return
-    setSubscribing(true)
-    setSubscribeStatus('idle')
-    try {
-      const res = await fetch(`${API_BASE}/newsletter/subscribe`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email })
-      })
-      const data = await res.json()
-      if (res.ok) {
-        setSubscribeStatus('success')
-        setSubscribeMessage(data.message || 'Subscribed!')
-        setEmail('')
-      } else {
-        setSubscribeStatus('error')
-        setSubscribeMessage(data.error || data.message || 'Failed to subscribe')
-      }
-    } catch (err) {
-      setSubscribeStatus('error')
-      setSubscribeMessage('An error occurred. Please try again.')
-    } finally {
-      setSubscribing(false)
-    }
-  }
 
   useEffect(() => {
     fetch(`${API_BASE}/menus/footer-explore`)
@@ -52,6 +20,13 @@ export default function Footer({ categories = [] }: FooterProps) {
       })
       .catch(console.error)
 
+    fetch(`${API_BASE}/menus/footer-support`)
+      .then(r => r.ok ? r.json() : null)
+      .then(data => {
+        if (data && data.items) setSupportMenu(data.items.sort((a: any, b: any) => a.order - b.order))
+      })
+      .catch(console.error)
+
     fetch(`${API_BASE}/settings`)
       .then(r => r.ok ? r.json() : null)
       .then(data => {
@@ -124,46 +99,19 @@ export default function Footer({ categories = [] }: FooterProps) {
           </div>
         </div>
 
-        <div className="space-y-6">
-          <h4 className="font-bold uppercase tracking-widest text-xs text-white">
-            {settings?.newsletterTitle || 'Newsletter'}
-          </h4>
-          <p className="text-xs text-slate-500">
-            {settings?.newsletterDescription || 'Subscribe for exclusive releases and sensory wisdom.'}
-          </p>
-          
-          {subscribeStatus === 'success' ? (
-            <div className="p-4 bg-cyan-glow/10 border border-cyan-glow/20 rounded-lg text-cyan-glow text-sm text-center animate-fade-in">
-              ✨ {subscribeMessage}
-            </div>
-          ) : (
-            <form onSubmit={handleSubscribe} className="space-y-2">
-              <div className="flex bg-white/5 border border-white/10 p-1 rounded-sm focus-within:border-cyan-glow/50 transition-colors">
-                <input
-                  type="email"
-                  required
-                  value={email}
-                  onChange={e => setEmail(e.target.value)}
-                  placeholder={settings?.newsletterPlaceholder || "Your email"}
-                  className="bg-transparent border-none outline-none text-sm p-2 w-full text-white placeholder-slate-600"
-                />
-                <button 
-                  type="submit" 
-                  disabled={subscribing}
-                  className="bg-white text-black px-4 py-2 font-bold text-xs uppercase hover:bg-cyan-glow transition-colors shrink-0 disabled:opacity-50"
-                >
-                  {subscribing ? '...' : (settings?.newsletterButtonText || 'Join')}
-                </button>
-              </div>
-              {subscribeStatus === 'error' && (
-                <p className="text-[10px] text-rose-500">{subscribeMessage}</p>
-              )}
-            </form>
-          )}
+        <div className="space-y-4">
+          <h4 className="font-bold uppercase tracking-widest text-xs text-white">{t('footer.support', 'Support & Legal')}</h4>
+          <div className="flex flex-col space-y-2 text-sm text-slate-400">
+            {supportMenu.map(item => (
+              <Link key={item.id} to={item.url} className="hover:text-white transition-colors">{item.label}</Link>
+            ))}
+          </div>
 
-          <p className="text-[10px] text-slate-600 uppercase tracking-widest">
-            © {new Date().getFullYear()} HomAroma. {t('footer.rights')}
-          </p>
+          <div className="pt-4">
+            <p className="text-[10px] text-slate-600 uppercase tracking-widest">
+              © {new Date().getFullYear()} HomAroma. {t('footer.rights')}
+            </p>
+          </div>
         </div>
       </div>
     </footer>