fix notification and add billing page and contract
This commit is contained in:
root
@@ -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">
|
||||
© {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>
|
||||
}
|
||||
|
||||
@@ -0,0 +1,223 @@
|
||||
'use client'
|
||||
|
||||
import Link from 'next/link'
|
||||
import { usePathname, useRouter } from 'next/navigation'
|
||||
import {
|
||||
LayoutDashboard,
|
||||
User,
|
||||
Bookmark,
|
||||
Bell,
|
||||
LogOut,
|
||||
ChevronRight,
|
||||
ChevronLeft,
|
||||
Car,
|
||||
} from 'lucide-react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useMarketplacePreferences } from '@/components/MarketplaceShell'
|
||||
import { clearRenterSession, loadRenterProfile } from '@/lib/renter'
|
||||
|
||||
const NAV_ITEMS = [
|
||||
{ href: '/renter/dashboard', key: 'dashboard', icon: LayoutDashboard, exact: true },
|
||||
{ href: '/renter/profile', key: 'profile', icon: User },
|
||||
{ href: '/renter/saved-companies', key: 'savedCompanies', icon: Bookmark },
|
||||
{ href: '/renter/notifications', key: 'notifications', icon: Bell },
|
||||
] as const
|
||||
|
||||
const dicts = {
|
||||
en: {
|
||||
dashboard: 'Dashboard',
|
||||
profile: 'Profile',
|
||||
savedCompanies: 'Saved companies',
|
||||
notifications: 'Notifications',
|
||||
signOut: 'Sign out',
|
||||
renterPortal: 'Renter Portal',
|
||||
rights: 'All rights reserved.',
|
||||
},
|
||||
fr: {
|
||||
dashboard: 'Tableau de bord',
|
||||
profile: 'Profil',
|
||||
savedCompanies: 'Entreprises sauvegardées',
|
||||
notifications: 'Notifications',
|
||||
signOut: 'Déconnexion',
|
||||
renterPortal: 'Espace client',
|
||||
rights: 'Tous droits réservés.',
|
||||
},
|
||||
ar: {
|
||||
dashboard: 'لوحة التحكم',
|
||||
profile: 'الملف الشخصي',
|
||||
savedCompanies: 'الشركات المحفوظة',
|
||||
notifications: 'الإشعارات',
|
||||
signOut: 'تسجيل الخروج',
|
||||
renterPortal: 'بوابة المستأجر',
|
||||
rights: 'جميع الحقوق محفوظة.',
|
||||
},
|
||||
} as const
|
||||
|
||||
function computeInitials(name: string): string {
|
||||
const parts = name.trim().split(/\s+/).filter(Boolean)
|
||||
if (parts.length === 0) return 'R'
|
||||
if (parts.length === 1) return parts[0].slice(0, 1).toUpperCase()
|
||||
return `${parts[0].slice(0, 1)}${parts[1].slice(0, 1)}`.toUpperCase()
|
||||
}
|
||||
|
||||
export default function RenterShell({ children }: { children: React.ReactNode }) {
|
||||
const pathname = usePathname()
|
||||
const router = useRouter()
|
||||
const { language } = useMarketplacePreferences()
|
||||
const dict = dicts[language]
|
||||
const isRtl = language === 'ar'
|
||||
const [open, setOpen] = useState(false)
|
||||
const [userInitials, setUserInitials] = useState('R')
|
||||
const [userName, setUserName] = useState<string | null>(null)
|
||||
const [userEmail, setUserEmail] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
loadRenterProfile()
|
||||
.then((profile) => {
|
||||
const fullName = `${profile.firstName ?? ''} ${profile.lastName ?? ''}`.trim()
|
||||
setUserName(fullName || profile.email.split('@')[0])
|
||||
setUserEmail(profile.email)
|
||||
setUserInitials(computeInitials(fullName || profile.email))
|
||||
})
|
||||
.catch(() => {})
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
setOpen(false)
|
||||
}, [pathname])
|
||||
|
||||
function signOut() {
|
||||
clearRenterSession()
|
||||
router.push('/renter/sign-in')
|
||||
}
|
||||
|
||||
const isActive = (item: (typeof NAV_ITEMS)[number]) => {
|
||||
if ('exact' in item && item.exact) return pathname === item.href
|
||||
return pathname.startsWith(item.href)
|
||||
}
|
||||
|
||||
const activeNav = NAV_ITEMS.find((item) => isActive(item))
|
||||
const pageTitle = activeNav ? (dict[activeNav.key as keyof typeof dict] as string) : dict.dashboard
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen bg-stone-50 dark:bg-stone-950">
|
||||
{open && (
|
||||
<div
|
||||
className="fixed inset-0 z-30 bg-black/50 lg:hidden"
|
||||
onClick={() => setOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!open && (
|
||||
<button
|
||||
onClick={() => setOpen(true)}
|
||||
aria-label="Open sidebar"
|
||||
className={[
|
||||
'fixed top-1/2 z-50 -translate-y-1/2 flex items-center justify-center w-6 h-14 bg-stone-900 text-white shadow-lg lg:hidden',
|
||||
isRtl ? 'right-0 rounded-l-lg' : 'left-0 rounded-r-lg',
|
||||
].join(' ')}
|
||||
>
|
||||
{isRtl ? <ChevronLeft className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />}
|
||||
</button>
|
||||
)}
|
||||
|
||||
<aside
|
||||
className={[
|
||||
'fixed inset-y-0 z-40 flex w-64 flex-col bg-stone-900 transition-transform duration-300',
|
||||
isRtl ? 'right-0' : 'left-0',
|
||||
'lg:translate-x-0',
|
||||
open ? 'translate-x-0' : isRtl ? 'translate-x-full' : '-translate-x-full',
|
||||
].join(' ')}
|
||||
>
|
||||
<div className="flex items-center gap-3 border-b border-stone-800 px-6 py-5">
|
||||
<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-amber-500 overflow-hidden">
|
||||
<Car className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
<span className="truncate text-sm font-bold tracking-wide text-white">
|
||||
{dict.renterPortal}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 space-y-0.5 overflow-y-auto px-3 py-4">
|
||||
{NAV_ITEMS.map((item) => {
|
||||
const Icon = item.icon
|
||||
const active = isActive(item)
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={[
|
||||
'flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors',
|
||||
active
|
||||
? 'bg-amber-500 text-white'
|
||||
: 'text-stone-400 hover:bg-stone-800 hover:text-white',
|
||||
].join(' ')}
|
||||
>
|
||||
<Icon className="h-4 w-4 flex-shrink-0" />
|
||||
{dict[item.key as keyof typeof dict] as string}
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="border-t border-stone-800 px-3 py-4">
|
||||
<div className="flex items-center gap-3 rounded-lg px-3 py-2">
|
||||
<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-amber-500 text-xs font-semibold text-white">
|
||||
{userInitials}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
{userName && (
|
||||
<p className="truncate text-sm font-medium text-white">{userName}</p>
|
||||
)}
|
||||
{userEmail && (
|
||||
<p className="truncate text-xs text-stone-400">{userEmail}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={signOut}
|
||||
className="mt-2 flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-stone-400 transition-colors hover:bg-stone-800 hover:text-white"
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
{dict.signOut}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => setOpen(false)}
|
||||
aria-label="Close sidebar"
|
||||
className={[
|
||||
'absolute top-1/2 z-10 -translate-y-1/2 flex items-center justify-center w-5 h-14 bg-stone-900 text-white shadow-lg lg:hidden',
|
||||
isRtl ? '-left-5 rounded-l-lg' : '-right-5 rounded-r-lg',
|
||||
].join(' ')}
|
||||
>
|
||||
{isRtl ? <ChevronRight className="h-3.5 w-3.5" /> : <ChevronLeft className="h-3.5 w-3.5" />}
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<div
|
||||
className={[
|
||||
'flex min-h-screen min-w-0 flex-1 flex-col',
|
||||
isRtl ? 'lg:mr-64' : 'lg:ml-64',
|
||||
].join(' ')}
|
||||
>
|
||||
<header className="flex h-16 items-center justify-between border-b border-stone-200 bg-white px-6 transition-colors dark:border-stone-800 dark:bg-stone-950">
|
||||
<h1 className="text-lg font-semibold text-stone-900 dark:text-stone-100">{pageTitle}</h1>
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-amber-500 text-xs font-semibold text-white">
|
||||
{userInitials}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 overflow-y-auto py-8">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
<footer className="border-t border-stone-200 bg-white/90 px-6 py-4 transition-colors dark:border-stone-800 dark:bg-stone-950/90">
|
||||
<p className="text-center text-xs text-stone-400 dark:text-stone-500">
|
||||
© {new Date().getFullYear()} RentalDriveGo. {dict.rights}
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,22 +1,16 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import { useMarketplacePreferences } from './MarketplaceShell'
|
||||
|
||||
type FrameId = 'dashboard' | 'admin' | 'public-site'
|
||||
type FrameId = 'sign-in' | 'public-site'
|
||||
|
||||
const frameConfig: Record<FrameId, { label: string; port: number; path: string }> = {
|
||||
dashboard: {
|
||||
label: 'Company Workspace',
|
||||
'sign-in': {
|
||||
label: 'Sign in',
|
||||
port: 3001,
|
||||
path: '/sign-in',
|
||||
},
|
||||
admin: {
|
||||
label: 'Platform Operations',
|
||||
port: 3002,
|
||||
path: '/',
|
||||
},
|
||||
'public-site': {
|
||||
label: 'Branded Website',
|
||||
port: 3003,
|
||||
@@ -24,24 +18,41 @@ const frameConfig: Record<FrameId, { label: string; port: number; path: string }
|
||||
},
|
||||
}
|
||||
|
||||
function getDefaultFramePath(target: FrameId) {
|
||||
if (typeof window === 'undefined') {
|
||||
return frameConfig[target].path
|
||||
}
|
||||
|
||||
const employeeToken = document.cookie
|
||||
.split(';')
|
||||
.map((c) => c.trim())
|
||||
.find((c) => c.startsWith('employee_token='))
|
||||
|
||||
if (target === 'sign-in' && employeeToken) {
|
||||
return '/dashboard'
|
||||
}
|
||||
|
||||
return frameConfig[target].path
|
||||
}
|
||||
|
||||
function withPort(port: number, path: string) {
|
||||
if (typeof window === 'undefined') return path
|
||||
|
||||
const url = new URL(window.location.href)
|
||||
url.port = String(port)
|
||||
url.pathname = path
|
||||
url.search = ''
|
||||
const target = new URL(path, url.origin)
|
||||
url.pathname = target.pathname
|
||||
url.search = target.search
|
||||
url.hash = ''
|
||||
return url.toString()
|
||||
}
|
||||
|
||||
export default function WorkspaceFrame({ target }: { target: FrameId }) {
|
||||
const pathname = usePathname()
|
||||
const { language } = useMarketplacePreferences()
|
||||
const { language, theme } = useMarketplacePreferences()
|
||||
const [src, setSrc] = useState('')
|
||||
const [framePath, setFramePath] = useState(() => getDefaultFramePath(target))
|
||||
const config = frameConfig[target]
|
||||
const fillViewport = pathname === '/company-workspace'
|
||||
const frameHeight = fillViewport ? '100vh' : 'calc(100vh - 56px)'
|
||||
const frameHeight = 'calc(100vh - 56px)'
|
||||
const loadingLabel = {
|
||||
en: 'Loading',
|
||||
fr: 'Chargement de',
|
||||
@@ -49,8 +60,30 @@ export default function WorkspaceFrame({ target }: { target: FrameId }) {
|
||||
}[language]
|
||||
|
||||
useEffect(() => {
|
||||
setSrc(withPort(config.port, config.path))
|
||||
}, [config.path, config.port])
|
||||
setFramePath(getDefaultFramePath(target))
|
||||
}, [target])
|
||||
|
||||
useEffect(() => {
|
||||
function handleFrameMessage(event: MessageEvent) {
|
||||
if (!event.data || typeof event.data !== 'object') return
|
||||
|
||||
const message = event.data as { type?: string; path?: string }
|
||||
|
||||
if ((message.type === 'rentaldrivego:embedded-path' || message.type === 'rentaldrivego:employee-login') && typeof message.path === 'string') {
|
||||
setFramePath(message.path)
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('message', handleFrameMessage)
|
||||
return () => window.removeEventListener('message', handleFrameMessage)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const nextUrl = new URL(withPort(config.port, framePath))
|
||||
nextUrl.searchParams.set('theme', theme)
|
||||
nextUrl.searchParams.set('lang', language)
|
||||
setSrc(nextUrl.toString())
|
||||
}, [config.port, framePath, language, theme])
|
||||
|
||||
return (
|
||||
<main className="bg-stone-950" style={{ minHeight: frameHeight }}>
|
||||
|
||||
Reference in New Issue
Block a user