x

apps/spa/src/components/Footer.tsx

@@ -1,13 +1,65 @@
 import { Link } from 'react-router-dom'
-import type { Category } from '../types'
+import { useState, useEffect } from 'react'
+import { API_BASE, type Category, type StoreSettings, type MenuItem } from '../types'
 import { useTranslation } from 'react-i18next'
-
 interface FooterProps {
   categories?: Category[]
 }
 
 export default function Footer({ categories = [] }: FooterProps) {
   const { t } = useTranslation()
+  const [exploreMenu, setExploreMenu] = 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`)
+      .then(r => r.ok ? r.json() : null)
+      .then(data => {
+        if (data && data.items) setExploreMenu(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 => {
+        if (data) setSettings(data)
+      })
+      .catch(console.error)
+  }, [])
+
   return (
     <footer className="bg-black py-20 px-6 border-t border-white/5">
       <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-12">
@@ -16,26 +68,48 @@ export default function Footer({ categories = [] }: FooterProps) {
             HomAroma <span className="text-cyan-glow text-sm font-light italic">Essential</span>
           </div>
           <p className="text-slate-500 text-sm leading-relaxed">
-            {t('footer.catchphrase')}
+            {settings?.footerDescription || t('footer.catchphrase')}
           </p>
           <div className="flex gap-4">
-            {['IG', 'FB', 'TW', 'YT'].map((s) => (
-              <a key={s} href="#" className="glass w-9 h-9 rounded-full flex items-center justify-center text-[10px] font-bold hover:bg-cyan-glow hover:text-night-900 transition-all duration-300">
-                {s}
-              </a>
-            ))}
+            {settings && (settings.facebookUrl || settings.instagramUrl || settings.tiktokUrl) ? (
+              <>
+                {settings.facebookUrl && (
+                  <a href={settings.facebookUrl} target="_blank" rel="noreferrer" className="glass w-9 h-9 rounded-full flex items-center justify-center text-[10px] font-bold hover:bg-cyan-glow hover:text-night-900 transition-all duration-300">FB</a>
+                )}
+                {settings.instagramUrl && (
+                  <a href={settings.instagramUrl} target="_blank" rel="noreferrer" className="glass w-9 h-9 rounded-full flex items-center justify-center text-[10px] font-bold hover:bg-cyan-glow hover:text-night-900 transition-all duration-300">IG</a>
+                )}
+                {settings.tiktokUrl && (
+                  <a href={settings.tiktokUrl} target="_blank" rel="noreferrer" className="glass w-9 h-9 rounded-full flex items-center justify-center text-[10px] font-bold hover:bg-cyan-glow hover:text-night-900 transition-all duration-300">TT</a>
+                )}
+              </>
+            ) : (
+              ['IG', 'FB', 'TW', 'YT'].map((s) => (
+                <a key={s} href="#" className="glass w-9 h-9 rounded-full flex items-center justify-center text-[10px] font-bold hover:bg-cyan-glow hover:text-night-900 transition-all duration-300">
+                  {s}
+                </a>
+              ))
+            )}
           </div>
         </div>
 
         <div className="space-y-4">
           <h4 className="font-bold uppercase tracking-widest text-xs text-white">{t('footer.explore')}</h4>
           <div className="flex flex-col space-y-2 text-sm text-slate-400">
-            <Link to="/" className="hover:text-white transition-colors">{t('nav.home')}</Link>
-            <Link to="/shop" className="hover:text-white transition-colors">{t('nav.shop')}</Link>
-            <Link to="/scent-guide" className="hover:text-white transition-colors">{t('nav.scentGuide')}</Link>
-            <Link to="/about" className="hover:text-white transition-colors">{t('nav.about')}</Link>
-            <Link to="/contact" className="hover:text-white transition-colors">{t('nav.contact')}</Link>
-            <Link to="/faq" className="hover:text-white transition-colors">{t('nav.faq')}</Link>
+            {exploreMenu.length > 0 ? (
+              exploreMenu.map(item => (
+                <Link key={item.id} to={item.url} className="hover:text-white transition-colors">{item.label}</Link>
+              ))
+            ) : (
+              <>
+                <Link to="/" className="hover:text-white transition-colors">{t('nav.home')}</Link>
+                <Link to="/shop" className="hover:text-white transition-colors">{t('nav.shop')}</Link>
+                <Link to="/scent-guide" className="hover:text-white transition-colors">{t('nav.scentGuide')}</Link>
+                <Link to="/about" className="hover:text-white transition-colors">{t('nav.about')}</Link>
+                <Link to="/contact" className="hover:text-white transition-colors">{t('nav.contact')}</Link>
+                <Link to="/faq" className="hover:text-white transition-colors">{t('nav.faq')}</Link>
+              </>
+            )}
           </div>
         </div>
 
@@ -51,18 +125,42 @@ export default function Footer({ categories = [] }: FooterProps) {
         </div>
 
         <div className="space-y-6">
-          <h4 className="font-bold uppercase tracking-widest text-xs text-white">Newsletter</h4>
-          <p className="text-xs text-slate-500">Subscribe for exclusive releases and sensory wisdom.</p>
-          <div className="flex bg-white/5 border border-white/10 p-1 rounded-sm">
-            <input
-              type="email"
-              placeholder="Your email"
-              className="bg-transparent border-none outline-none text-sm p-2 w-full text-white placeholder-slate-600"
-            />
-            <button className="bg-white text-black px-4 py-2 font-bold text-xs uppercase hover:bg-cyan-glow transition-colors shrink-0">
-              Join
-            </button>
-          </div>
+          <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>
+          )}
+
           <p className="text-[10px] text-slate-600 uppercase tracking-widest">
             © {new Date().getFullYear()} HomAroma. {t('footer.rights')}
           </p>

apps/spa/src/components/Navbar.tsx

@@ -1,6 +1,6 @@
 import { Link, NavLink, useNavigate } from 'react-router-dom'
 import { useState, useEffect } from 'react'
-import type { Category } from '../types'
+import { API_BASE, type Category, type MenuItem } from '../types'
 import { ShoppingBag, MapPin, Menu as MenuIcon, X, Heart } from 'lucide-react'
 import { useCartStore } from '../store/cartStore'
 import { useWishlistStore } from '../store/wishlistStore'
@@ -20,6 +20,7 @@ export default function Navbar({ categories = [], topOffsetClassName = 'top-0' }
   const [scrolled, setScrolled] = useState(false)
   const [localOrdersCount, setLocalOrdersCount] = useState(0)
   const [hasAnnouncement, setHasAnnouncement] = useState(false)
+  const [menuItems, setMenuItems] = useState<MenuItem[]>([])
   const navigate = useNavigate()
   
   const { toggleCart, getCartCount } = useCartStore()
@@ -56,6 +57,19 @@ export default function Navbar({ categories = [], topOffsetClassName = 'top-0' }
       try { setLocalOrdersCount(JSON.parse(stored).length) } catch (e) {}
     }
     
+    // Fetch dynamic menu
+    fetch(`${API_BASE}/menus/main`)
+      .then(res => {
+        if (!res.ok) throw new Error('Menu not found')
+        return res.json()
+      })
+      .then(data => {
+        if (data && data.items) {
+          setMenuItems(data.items.sort((a: any, b: any) => a.order - b.order))
+        }
+      })
+      .catch(console.error)
+    
     return () => {
       window.removeEventListener('scroll', onScroll)
       clearTimeout(timer)
@@ -104,9 +118,19 @@ export default function Navbar({ categories = [], topOffsetClassName = 'top-0' }
 
         {/* ── DESKTOP NAV ── */}
         <div className="hidden md:flex space-x-7 text-sm font-medium tracking-wide uppercase">
-          <NavLink to="/" end className={navLinkClass}>{t('nav.home')}</NavLink>
-          <NavLink to="/shop" className={navLinkClass}>{t('nav.shop')}</NavLink>
-          <NavLink to="/coupons" className={navLinkClass}>🔥 {t('nav.promotions') || 'Promotions'}</NavLink>
+          {menuItems.length > 0 ? (
+            menuItems.map(item => (
+              <NavLink key={item.id} to={item.url} end={item.url === '/'} className={navLinkClass}>
+                {item.label}
+              </NavLink>
+            ))
+          ) : (
+            <>
+              <NavLink to="/" end className={navLinkClass}>{t('nav.home')}</NavLink>
+              <NavLink to="/shop" className={navLinkClass}>{t('nav.shop')}</NavLink>
+              <NavLink to="/coupons" className={navLinkClass}>🔥 {t('nav.promotions') || 'Promotions'}</NavLink>
+            </>
+          )}
 
           {/* Collections dropdown */}
           {categories.length > 0 && (
@@ -136,8 +160,12 @@ export default function Navbar({ categories = [], topOffsetClassName = 'top-0' }
             </div>
           )}
 
-          <NavLink to="/scent-guide" className={navLinkClass}>{t('nav.scentGuide')}</NavLink>
-          <NavLink to="/about" className={navLinkClass}>{t('nav.about')}</NavLink>
+          {menuItems.length === 0 && (
+            <>
+              <NavLink to="/scent-guide" className={navLinkClass}>{t('nav.scentGuide')}</NavLink>
+              <NavLink to="/about" className={navLinkClass}>{t('nav.about')}</NavLink>
+            </>
+          )}
         </div>
 
         {/* ── DESKTOP RIGHT ACTIONS ── */}
@@ -362,7 +390,10 @@ export default function Navbar({ categories = [], topOffsetClassName = 'top-0' }
 
           {/* Drawer Nav Links */}
           <div className="flex-1 overflow-y-auto px-4 py-6 space-y-1">
-            {[
+            {(menuItems.length > 0 ? [
+              ...menuItems.map(item => ({ to: item.url, label: item.label, end: item.url === '/' })),
+              ...(customer ? [{ to: '/profile', label: `👤 ${t('nav.profile') || 'My Profile'}` }] : []),
+            ] : [
               { to: '/', label: t('nav.home'), end: true },
               { to: '/shop', label: t('nav.shop') },
               ...(customer ? [{ to: '/profile', label: `👤 ${t('nav.profile') || 'My Profile'}` }] : []),
@@ -371,7 +402,7 @@ export default function Navbar({ categories = [], topOffsetClassName = 'top-0' }
               { to: '/about', label: t('nav.about') },
               { to: '/faq', label: t('nav.faq') },
               { to: '/contact', label: t('nav.contact') },
-            ].map(item => (
+            ]).map((item: any) => (
               <NavLink
                 key={item.to}
                 to={item.to}