fix notification and add billing page and contract

apps/marketplace/src/components/MarketplaceShell.tsx

@@ -1,61 +1,63 @@
 'use client'
 
+import { ChevronDown, Globe } from 'lucide-react'
 import Image from 'next/image'
 import Link from 'next/link'
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { usePathname, useRouter } from 'next/navigation'
-import { MARKETPLACE_LANGUAGE_COOKIE, isMarketplaceLanguage, type MarketplaceLanguage } from '@/lib/i18n'
+import { MARKETPLACE_LANGUAGE_COOKIE, SHARED_LANGUAGE_COOKIE, isMarketplaceLanguage, type MarketplaceLanguage } from '@/lib/i18n'
 import { resolveBrowserAppUrl } from '@/lib/appUrls'
+import { SHARED_LANGUAGE_KEY, SHARED_THEME_KEY, readCurrentUserScopedPreference, readScopedPreference, writeScopedPreference } from '@/lib/preferences'
 
-type Theme = 'light' | 'dark'
+type Theme = 'light' | 'medium' | 'dark'
 
 type Dictionary = {
   marketplace: string
-  companyWorkspace: string
-  platformOperations: string
   explore: string
+  signIn: string
   ownerSignIn: string
   language: string
   theme: string
   light: string
+  medium: string
   dark: string
   preferences: string
 }
 
 const dictionaries: Record<MarketplaceLanguage, Dictionary> = {
   en: {
-    marketplace: 'Marketplace',
-    companyWorkspace: 'Company Workspace',
-    platformOperations: 'Platform Operations',
-    explore: 'Explore',
-    ownerSignIn: 'Owner sign in',
+    marketplace: 'Home',
+    explore: 'Marketplace',
+    signIn: 'Sign in',
+    ownerSignIn: 'Create account',
     language: 'Language',
     theme: 'Theme',
     light: 'Light',
+    medium: 'Medium',
     dark: 'Dark',
     preferences: 'Marketplace preferences',
   },
   fr: {
-    marketplace: 'Marketplace',
-    companyWorkspace: 'Espace entreprise',
-    platformOperations: 'Opérations plateforme',
-    explore: 'Explorer',
-    ownerSignIn: 'Connexion proprietaire',
+    marketplace: 'Accueil',
+    explore: 'Marketplace',
+    signIn: 'Connexion',
+    ownerSignIn: 'Créer un compte',
     language: 'Langue',
     theme: 'Mode',
     light: 'Clair',
+    medium: 'Moyen',
     dark: 'Sombre',
     preferences: 'Préférences marketplace',
   },
   ar: {
-    marketplace: 'السوق',
-    companyWorkspace: 'مساحة الشركة',
-    platformOperations: 'عمليات المنصة',
-    explore: 'استكشاف',
-    ownerSignIn: 'دخول المالك',
+    marketplace: 'الرئيسية',
+    explore: 'السوق',
+    signIn: 'تسجيل الدخول',
+    ownerSignIn: 'إنشاء حساب',
     language: 'اللغة',
     theme: 'الوضع',
     light: 'فاتح',
+    medium: 'متوسط',
     dark: 'داكن',
     preferences: 'تفضيلات السوق',
   },
@@ -71,6 +73,88 @@ type PreferencesContextValue = {
 
 const PreferencesContext = createContext<PreferencesContextValue | null>(null)
 
+type FooterItem = {
+  label: string
+  href?: string
+}
+
+const localeOptions: Array<{ value: MarketplaceLanguage; label: string }> = [
+  { value: 'en', label: 'Global (English)' },
+  { value: 'ar', label: 'NorthAfrica (Arabic)' },
+  { value: 'fr', label: 'Europ (French)' },
+]
+
+function getFooterContent(language: MarketplaceLanguage): {
+  primary: FooterItem[]
+  secondary: FooterItem[]
+  localeLabel: string
+  rightsLabel: string
+} {
+  switch (language) {
+    case 'fr':
+      return {
+        primary: [
+          { label: 'À propos', href: '/' },
+          { label: 'CLUF' },
+          { label: "Conditions d'utilisation" },
+          { label: 'Sécurité' },
+          { label: 'Conformité' },
+          { label: 'Politique de confidentialité' },
+          { label: 'Politique de cookies' },
+          { label: "Programme d'affiliation" },
+        ],
+        secondary: [
+          { label: 'Newsletter' },
+          { label: 'Contacter les ventes', href: `${resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3001')}/sign-in` },
+          { label: 'Nos bureaux', href: '/' },
+        ],
+        localeLabel: 'Europ (French)',
+        rightsLabel: 'Tous droits réservés.',
+      }
+    case 'ar':
+      return {
+        primary: [
+          { label: 'من نحن', href: '/' },
+          { label: 'اتفاقية الترخيص' },
+          { label: 'شروط الخدمة' },
+          { label: 'الأمان' },
+          { label: 'الامتثال' },
+          { label: 'سياسة الخصوصية' },
+          { label: 'سياسة ملفات الارتباط' },
+          { label: 'برنامج الشركاء' },
+        ],
+        secondary: [
+          { label: 'النشرة البريدية' },
+          { label: 'تواصل مع المبيعات', href: `${resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3001')}/sign-in` },
+          { label: 'مكاتبنا', href: '/' },
+        ],
+        localeLabel: 'NorthAfrica (Arabic)',
+        rightsLabel: 'جميع الحقوق محفوظة.',
+      }
+    case 'en':
+    default:
+      return {
+        primary: [
+          { label: 'About us', href: '/' },
+          { label: 'EULA' },
+          { label: 'Terms of service' },
+          { label: 'Security' },
+          { label: 'Compliance' },
+          { label: 'Privacy policy' },
+          { label: 'Cookie policy' },
+          { label: 'Affiliate program' },
+        ],
+        secondary: [
+          { label: 'Newsletter' },
+          { label: 'Contact sales', href: `${resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3001')}/sign-in` },
+          { label: 'Our offices', href: '/' },
+        ],
+        localeLabel: 'Global (English)',
+        rightsLabel: 'All rights reserved.',
+      }
+  }
+}
+
 function SegmentedControl<T extends string>({
   label,
   value,
@@ -126,44 +210,110 @@ export default function MarketplaceShell({ children }: { children: React.ReactNo
   const [theme, setTheme] = useState<Theme>('light')
   const [hydrated, setHydrated] = useState(false)
   const previousLanguage = useRef<MarketplaceLanguage>('en')
+  const localeMenuRef = useRef<HTMLDivElement | null>(null)
   const [companyName, setCompanyName] = useState<string | null>(null)
+  const [localeMenuOpen, setLocaleMenuOpen] = useState(false)
+
+  async function syncCompanyBrand() {
+    const token = document.cookie
+      .split(';')
+      .map((c) => c.trim())
+      .find((c) => c.startsWith('employee_token='))
+      ?.split('=')[1]
+
+    if (!token) {
+      setCompanyName(null)
+      return
+    }
+
+    try {
+      const response = await fetch(`${apiUrl}/companies/me/brand`, {
+        headers: { Authorization: `Bearer ${token}` },
+      })
+
+      if (!response.ok) {
+        setCompanyName(null)
+        return
+      }
+
+      const json = await response.json()
+      const name = json?.data?.displayName ?? json?.displayName ?? null
+      setCompanyName(name)
+    } catch {
+      setCompanyName(null)
+    }
+  }
+
+  function syncScopedPreferencesForSession() {
+    const scopedLanguage = readCurrentUserScopedPreference(SHARED_LANGUAGE_KEY)
+    const scopedTheme = readCurrentUserScopedPreference(SHARED_THEME_KEY)
+
+    if (isMarketplaceLanguage(scopedLanguage) && scopedLanguage !== language) {
+      setLanguage(scopedLanguage)
+    } else {
+      writeScopedPreference(SHARED_LANGUAGE_KEY, language, ['marketplace-language'])
+    }
+
+    if ((scopedTheme === 'light' || scopedTheme === 'medium' || scopedTheme === 'dark') && scopedTheme !== theme) {
+      setTheme(scopedTheme)
+    } else {
+      writeScopedPreference(SHARED_THEME_KEY, theme, ['marketplace-theme'])
+    }
+  }
 
   useEffect(() => {
-    const storedLanguage = window.localStorage.getItem('marketplace-language')
-    const storedTheme = window.localStorage.getItem('marketplace-theme') as Theme | null
+    const storedLanguage = readScopedPreference(SHARED_LANGUAGE_KEY, ['marketplace-language'])
+    const storedTheme = readScopedPreference(SHARED_THEME_KEY, ['marketplace-theme']) as Theme | null
 
     if (isMarketplaceLanguage(storedLanguage)) {
       setLanguage(storedLanguage)
     }
 
-    if (storedTheme === 'light' || storedTheme === 'dark') {
+    if (storedTheme === 'light' || storedTheme === 'medium' || storedTheme === 'dark') {
       setTheme(storedTheme)
     }
 
     setHydrated(true)
-
-    const token = document.cookie.split(';').map(c => c.trim()).find(c => c.startsWith('employee_token='))?.split('=')[1]
-    if (token) {
-      fetch(`${apiUrl}/companies/me/brand`, {
-        headers: { Authorization: `Bearer ${token}` },
-      })
-        .then(r => r.ok ? r.json() : null)
-        .then(json => {
-          const name = json?.data?.displayName ?? json?.displayName
-          if (name) setCompanyName(name)
-        })
-        .catch(() => {})
-    }
+    void syncCompanyBrand()
   }, [])
 
+  useEffect(() => {
+    function handleWindowFocus() {
+      syncScopedPreferencesForSession()
+      void syncCompanyBrand()
+    }
+
+    function handleAuthMessage(event: MessageEvent) {
+      if (!event.data || typeof event.data !== 'object') return
+
+      const message = event.data as { type?: string }
+
+      if (message.type === 'rentaldrivego:employee-login' || message.type === 'rentaldrivego:employee-logout') {
+        syncScopedPreferencesForSession()
+        void syncCompanyBrand()
+      }
+    }
+
+    window.addEventListener('focus', handleWindowFocus)
+    window.addEventListener('message', handleAuthMessage)
+    document.addEventListener('visibilitychange', handleWindowFocus)
+
+    return () => {
+      window.removeEventListener('focus', handleWindowFocus)
+      window.removeEventListener('message', handleAuthMessage)
+      document.removeEventListener('visibilitychange', handleWindowFocus)
+    }
+  }, [language, theme])
+
   useEffect(() => {
     document.documentElement.lang = language
     document.documentElement.dir = language === 'ar' ? 'rtl' : 'ltr'
-    document.documentElement.classList.toggle('dark', theme === 'dark')
+    document.documentElement.classList.toggle('dark', theme === 'dark' || theme === 'medium')
     document.body.dataset.theme = theme
-    window.localStorage.setItem('marketplace-language', language)
-    window.localStorage.setItem('marketplace-theme', theme)
+    writeScopedPreference(SHARED_LANGUAGE_KEY, language, ['marketplace-language'])
+    writeScopedPreference(SHARED_THEME_KEY, theme, ['marketplace-theme'])
     document.cookie = `${MARKETPLACE_LANGUAGE_COOKIE}=${language}; path=/; max-age=31536000; SameSite=Lax`
+    document.cookie = `${SHARED_LANGUAGE_COOKIE}=${language}; path=/; max-age=31536000; SameSite=Lax`
 
     if (hydrated && previousLanguage.current !== language) {
       router.refresh()
@@ -171,12 +321,23 @@ export default function MarketplaceShell({ children }: { children: React.ReactNo
     previousLanguage.current = language
   }, [hydrated, language, router, theme])
 
+  useEffect(() => {
+    function handlePointerDown(event: MouseEvent) {
+      if (!localeMenuRef.current?.contains(event.target as Node)) {
+        setLocaleMenuOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handlePointerDown)
+    return () => document.removeEventListener('mousedown', handlePointerDown)
+  }, [])
+
   const dict = dictionaries[language]
-  const isEmbeddedWorkspace =
-    pathname === '/company-workspace' ||
-    pathname === '/platform-operations' ||
-    pathname === '/branded-website'
-  const hideHeader = pathname === '/company-workspace'
+  const footerContent = getFooterContent(language)
+  const availableLocaleOptions = localeOptions.filter((option) => option.value !== language)
+  const isRenterApp = pathname.startsWith('/renter/')
+  const isEmbeddedWorkspace = pathname === '/branded-website' || isRenterApp
+  const hideHeader = isRenterApp
   const value = useMemo(
     () => ({ language, theme, dict, setLanguage, setTheme }),
     [dict, language, theme],
@@ -209,24 +370,18 @@ export default function MarketplaceShell({ children }: { children: React.ReactNo
                   >
                     {dict.marketplace}
                   </Link>
-                  <Link
-                    href={`${dashboardUrl}/dashboard`}
-                    className="rounded-full px-4 py-2 text-sm font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-stone-800 dark:hover:text-stone-100"
-                  >
-                    {dict.companyWorkspace}
-                  </Link>
-                  <Link
-                    href={`${adminUrl}/dashboard`}
-                    className="rounded-full px-4 py-2 text-sm font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-stone-800 dark:hover:text-stone-100"
-                  >
-                    {dict.platformOperations}
-                  </Link>
                   <Link
                     href="/explore"
                     className="rounded-full px-4 py-2 text-sm font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-stone-800 dark:hover:text-stone-100"
                   >
                     {dict.explore}
                   </Link>
+                  <Link
+                    href="/sign-in"
+                    className="rounded-full px-4 py-2 text-sm font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-stone-800 dark:hover:text-stone-100"
+                  >
+                    {dict.signIn}
+                  </Link>
                   {companyName ? (
                     <Link
                       href={`${dashboardUrl}/dashboard`}
@@ -239,13 +394,23 @@ export default function MarketplaceShell({ children }: { children: React.ReactNo
                     </Link>
                   ) : (
                     <Link
-                      href={`${dashboardUrl}/sign-in`}
+                      href={`${dashboardUrl}/sign-up`}
                       className="ml-2 rounded-full bg-stone-900 px-5 py-2 text-sm font-semibold text-white transition hover:bg-stone-700 dark:bg-amber-400 dark:text-stone-950 dark:hover:bg-amber-300"
                     >
                       {dict.ownerSignIn}
                     </Link>
                   )}
                 </nav>
+                <SegmentedControl
+                  label={dict.theme}
+                  value={theme}
+                  options={[
+                    { value: 'light', label: dict.light },
+                    { value: 'medium', label: dict.medium },
+                    { value: 'dark', label: dict.dark },
+                  ]}
+                  onChange={setTheme}
+                />
               </div>
             </div>
           </header>
@@ -257,32 +422,62 @@ export default function MarketplaceShell({ children }: { children: React.ReactNo
           </div>
 
           {!isEmbeddedWorkspace ? (
-            <footer className="border-t border-stone-200 bg-white/90 px-4 py-4 backdrop-blur-md transition-colors dark:border-stone-800 dark:bg-stone-950/90">
-              <div className="shell flex flex-col items-center justify-between gap-3 lg:flex-row">
-                <p className="text-xs font-medium uppercase tracking-[0.16em] text-stone-400 dark:text-stone-500">
-                  {dict.preferences}
-                </p>
-                <div className="flex flex-col items-center gap-3 sm:flex-row">
-                  <SegmentedControl
-                    label={dict.language}
-                    value={language}
-                    options={[
-                      { value: 'en', label: 'EN' },
-                      { value: 'fr', label: 'FR' },
-                      { value: 'ar', label: 'AR' },
-                    ]}
-                    onChange={setLanguage}
-                  />
-                  <SegmentedControl
-                    label={dict.theme}
-                    value={theme}
-                    options={[
-                      { value: 'light', label: dict.light },
-                      { value: 'dark', label: dict.dark },
-                    ]}
-                    onChange={setTheme}
-                  />
+            <footer className="border-t border-stone-200 bg-white/90 px-4 py-8 text-stone-600 transition-colors dark:border-white/5 dark:bg-[#111111] dark:text-stone-300">
+              <div className="shell flex flex-col items-center gap-5 text-center">
+                <nav className="flex flex-wrap items-center justify-center gap-y-3 text-sm">
+                  {footerContent.primary.map((item, index) => (
+                    <div key={item.label} className="flex items-center">
+                      <FooterNavItem item={item} />
+                      {index < footerContent.primary.length - 1 ? (
+                        <span className="px-2 text-stone-400 dark:text-stone-600" aria-hidden="true">|</span>
+                      ) : null}
+                    </div>
+                  ))}
+                </nav>
+
+                <div className="flex flex-wrap items-center justify-center gap-y-3 text-sm">
+                  {footerContent.secondary.map((item) => (
+                    <div key={item.label} className="flex items-center">
+                      <FooterNavItem item={item} />
+                      <span className="px-2 text-stone-400 dark:text-stone-600" aria-hidden="true">|</span>
+                    </div>
+                  ))}
+                  <div ref={localeMenuRef} className="relative px-3">
+                    <button
+                      type="button"
+                      onClick={() => setLocaleMenuOpen((open) => !open)}
+                      className="inline-flex items-center gap-2 text-sky-600 transition hover:text-sky-700 dark:text-sky-400 dark:hover:text-sky-300"
+                      aria-expanded={localeMenuOpen}
+                      aria-haspopup="menu"
+                    >
+                      <Globe className="h-4 w-4" />
+                      <span>{footerContent.localeLabel}</span>
+                      <ChevronDown className={`h-4 w-4 transition-transform ${localeMenuOpen ? 'rotate-180' : ''}`} />
+                    </button>
+                    {localeMenuOpen ? (
+                      <div className="absolute left-1/2 top-full z-20 mt-3 w-56 -translate-x-1/2 overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-stone-800 dark:bg-stone-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)]">
+                        {availableLocaleOptions.map((option) => (
+                          <button
+                            key={option.value}
+                            type="button"
+                            onClick={() => {
+                              setLanguage(option.value)
+                              setLocaleMenuOpen(false)
+                            }}
+                            className="flex w-full items-center gap-3 px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-stone-950 dark:text-stone-200 dark:hover:bg-stone-900 dark:hover:text-white"
+                          >
+                            <Globe className="h-4 w-4 text-sky-600 dark:text-sky-400" />
+                            <span>{option.label}</span>
+                          </button>
+                        ))}
+                      </div>
+                    ) : null}
+                  </div>
                 </div>
+
+                <p className="text-sm text-stone-500 dark:text-stone-400">
+                  &copy; {new Date().getFullYear()} RentalDriveGo. {footerContent.rightsLabel}
+                </p>
               </div>
             </footer>
           ) : null}
@@ -291,3 +486,17 @@ export default function MarketplaceShell({ children }: { children: React.ReactNo
     </PreferencesContext.Provider>
   )
 }
+
+function FooterNavItem({ item }: { item: FooterItem }) {
+  const className = 'px-3 text-stone-600 transition hover:text-stone-950 dark:text-stone-300 dark:hover:text-white'
+
+  if (item.href) {
+    return (
+      <Link href={item.href} className={className}>
+        {item.label}
+      </Link>
+    )
+  }
+
+  return <span className={className}>{item.label}</span>
+}