x

apps/website/src/components/Footer.tsx

@@ -1,4 +1,6 @@
 "use client";
+
+import { useState, useEffect } from 'react'
 import Link from 'next/link'
 import type { Category, MenuItem, StoreSettings } from '@homaroma/types'
 import { useTranslation } from 'react-i18next'
@@ -20,12 +22,17 @@ export default function Footer({
 }: FooterProps) {
   const { t } = useTranslation()
   const lang = useLang()
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => { setMounted(true) }, [])
+  // Before mount: always 'th' to match SSR output → no hydration mismatch
+  // After mount:  real user language → correct content
+  const effectiveLang = mounted ? lang : 'th'
 
   // Translate a menu item label using its translations array or i18n key map
   const translateMenuLabel = (item: MenuItem): string => {
     // Use outer `lang` from closure — hooks cannot be called inside nested functions
-    if (lang !== 'en' && item.translations && item.translations.length > 0) {
-      const trans = item.translations.find((tr: any) => tr.langCode === lang)
+    if (effectiveLang !== 'en' && item.translations && item.translations.length > 0) {
+      const trans = item.translations.find((tr: any) => tr.langCode === effectiveLang)
       if (trans?.label) return trans.label
     }
     const map: Record<string, string> = {
@@ -56,7 +63,7 @@ export default function Footer({
             HomAroma <span className="text-sm font-semibold italic text-pop-pink">Essential</span>
           </div>
           <p className="text-sm leading-relaxed text-gray-600">
-            {settings?.footerDescription || t('footer.catchphrase')}
+            {resolveLocalized(settings?.footerDescription, effectiveLang) || t('footer.catchphrase')}
           </p>
           <div className="flex gap-4">
             {hasSocialLinks ? (
@@ -135,7 +142,7 @@ export default function Footer({
           <div className="flex flex-col space-y-2 text-sm text-gray-600">
             {categories.map((c) => (
               <Link key={c.id} href={`/category/${c.id}`} className="transition-colors hover:text-pop-pink">
-                {resolveLocalized(c.name)}
+                {resolveLocalized(c.name, effectiveLang)}
               </Link>
             ))}
           </div>
@@ -147,7 +154,7 @@ export default function Footer({
             {settings?.footerSupportHeading
               ? (typeof settings.footerSupportHeading === 'string'
                 ? settings.footerSupportHeading
-                : settings.footerSupportHeading[lang]
+                : settings.footerSupportHeading[effectiveLang]
                   || settings.footerSupportHeading.en
                   || 'Support & Legal')
               : t('footer.support', 'Support & Legal')}
@@ -165,7 +172,7 @@ export default function Footer({
               {settings?.footerCopyrightText
                 ? (typeof settings.footerCopyrightText === 'string'
                   ? settings.footerCopyrightText
-                  : settings.footerCopyrightText[lang]
+                  : settings.footerCopyrightText[effectiveLang]
                     || settings.footerCopyrightText.en
                     || `© ${new Date().getFullYear()} HomAroma. ${t('footer.rights')}`)
                 : `© ${new Date().getFullYear()} HomAroma. ${t('footer.rights')}`}