fix(web): sync home iframe theme and language (#5917)

web/default/src/features/home/index.tsx

@@ -16,11 +16,13 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 
 For commercial licensing, please contact support@quantumnous.com
 For commercial licensing, please contact support@quantumnous.com
 */
 */
+import { useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useTranslation } from 'react-i18next'
 
 
 import { PublicLayout } from '@/components/layout'
 import { PublicLayout } from '@/components/layout'
 import { Footer } from '@/components/layout/components/footer'
 import { Footer } from '@/components/layout/components/footer'
 import { RichContent } from '@/components/rich-content'
 import { RichContent } from '@/components/rich-content'
+import { useTheme } from '@/context/theme-provider'
 import { isLikelyHtml } from '@/lib/content-format'
 import { isLikelyHtml } from '@/lib/content-format'
 import { useAuthStore } from '@/stores/auth-store'
 import { useAuthStore } from '@/stores/auth-store'
 
 
@@ -28,11 +30,34 @@ import { CTA, Features, Hero, HowItWorks, Stats } from './components'
 import { useHomePageContent } from './hooks'
 import { useHomePageContent } from './hooks'
 
 
 export function Home() {
 export function Home() {
-  const { t } = useTranslation()
+  const { i18n, t } = useTranslation()
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+  const { resolvedTheme } = useTheme()
   const { auth } = useAuthStore()
   const { auth } = useAuthStore()
   const isAuthenticated = !!auth.user
   const isAuthenticated = !!auth.user
   const { content, isLoaded, isUrl } = useHomePageContent()
   const { content, isLoaded, isUrl } = useHomePageContent()
 
 
+  const syncIframePreferences = useCallback(() => {
+    try {
+      iframeRef.current?.contentWindow?.postMessage(
+        { themeMode: resolvedTheme },
+        '*'
+      )
+      iframeRef.current?.contentWindow?.postMessage(
+        { lang: i18n.language },
+        '*'
+      )
+    } catch {
+      // Cross-origin frames may reject access while navigating.
+    }
+  }, [i18n.language, resolvedTheme])
+
+  useEffect(() => {
+    if (isUrl) {
+      syncIframePreferences()
+    }
+  }, [isUrl, syncIframePreferences])
+
   if (!isLoaded) {
   if (!isLoaded) {
     return (
     return (
       <PublicLayout showMainContainer={false}>
       <PublicLayout showMainContainer={false}>
@@ -48,10 +73,12 @@ export function Home() {
       return (
       return (
         <PublicLayout showMainContainer={false}>
         <PublicLayout showMainContainer={false}>
           <iframe
           <iframe
+            ref={iframeRef}
             src={content}
             src={content}
             className='h-screen w-full border-none'
             className='h-screen w-full border-none'
             title={t('Custom Home Page')}
             title={t('Custom Home Page')}
             sandbox='allow-forms allow-popups allow-popups-to-escape-sandbox allow-scripts'
             sandbox='allow-forms allow-popups allow-popups-to-escape-sandbox allow-scripts'
+            onLoad={syncIframePreferences}
           />
           />
         </PublicLayout>
         </PublicLayout>
       )
       )