diff --git a/src/app/components/nav/Header.tsx b/src/app/components/nav/Header.tsx
index 2ccf732..10af093 100644
--- a/src/app/components/nav/Header.tsx
+++ b/src/app/components/nav/Header.tsx
@@ -48,8 +48,13 @@ export default function Header() {
const [mounted, setMounted] = useState(false) // added
const user = useAuthStore((s) => s.user);
const logout = useAuthStore((s) => s.logout);
+ const accessToken = useAuthStore((s) => s.accessToken);
+ const refreshAuthToken = useAuthStore((s) => s.refreshAuthToken);
const router = useRouter();
+ // NEW: permission flag
+ const [hasReferralPerm, setHasReferralPerm] = useState(false)
+
const handleLogout = async () => {
try {
await logout();
@@ -101,6 +106,84 @@ export default function Header() {
})
}, [])
+ // Fetch user permissions and set hasReferralPerm
+ useEffect(() => {
+ let cancelled = false
+
+ const fetchPermissions = async () => {
+ if (!mounted) {
+ console.log('⏸️ Header: not mounted yet, skipping permissions fetch')
+ return
+ }
+ if (!user) {
+ console.log('ℹ️ Header: no user, clearing permission flag')
+ if (!cancelled) setHasReferralPerm(false)
+ return
+ }
+
+ const uid = (user as any)?.id ?? (user as any)?._id ?? (user as any)?.userId
+ if (!uid) {
+ console.warn('⚠️ Header: user id missing, cannot fetch permissions', user)
+ if (!cancelled) setHasReferralPerm(false)
+ return
+ }
+
+ const base = process.env.NEXT_PUBLIC_API_BASE_URL || ''
+ const url = `${base}/api/users/${uid}/permissions`
+ console.log('🌐 Header: fetching permissions:', { url, uid })
+
+ // Ensure we have a token (try refresh if needed)
+ let tokenToUse = accessToken
+ try {
+ if (!tokenToUse && refreshAuthToken) {
+ const ok = await refreshAuthToken()
+ if (ok) tokenToUse = useAuthStore.getState().accessToken
+ }
+ } catch (e) {
+ console.error('❌ Header: refreshAuthToken error:', e)
+ }
+
+ try {
+ const res = await fetch(url, {
+ method: 'GET',
+ credentials: 'include',
+ headers: {
+ 'Content-Type': 'application/json',
+ ...(tokenToUse ? { Authorization: `Bearer ${tokenToUse}` } : {})
+ }
+ })
+ console.log('📡 Header: permissions status:', res.status)
+ const body = await res.json().catch(() => null)
+ console.log('📦 Header: permissions body:', body)
+
+ // Try common shapes
+ const permsSrc =
+ body?.data?.permissions ??
+ body?.permissions ??
+ body
+
+ let can = false
+ if (Array.isArray(permsSrc)) {
+ // Could be array of strings or objects
+ can =
+ permsSrc.includes?.('can_create_referrals') ||
+ permsSrc.some?.((p: any) => p?.name === 'can_create_referrals' || p?.key === 'can_create_referrals')
+ } else if (permsSrc && typeof permsSrc === 'object') {
+ can = !!permsSrc.can_create_referrals
+ }
+
+ console.log('✅ Header: can_create_referrals =', can)
+ if (!cancelled) setHasReferralPerm(!!can)
+ } catch (e) {
+ console.error('❌ Header: fetch permissions error:', e)
+ if (!cancelled) setHasReferralPerm(false)
+ }
+ }
+
+ fetchPermissions()
+ return () => { cancelled = true }
+ }, [mounted, user, accessToken, refreshAuthToken])
+
const isLoggedIn = !!user
const userPresent = mounted && isLoggedIn
@@ -145,12 +228,13 @@ export default function Header() {
+ {/* Shop dropdown stays first */}
Shop
- {/* Redesigned mega menu panel */}
+ {/* ...existing Shop PopoverPanel... */}
- {navLinks.map(l => (
+ {/* Affiliate Links */}
+
+
+ {/* Memberships */}
+
+
+ {/* Referral Management - match others (no highlight) */}
+ {userPresent && hasReferralPerm && (
- ))}
- {/* Removed user profile Popover from here (now on right side) */}
+ )}
+
+ {/* About us */}
+
{/* Stable auth slot to avoid SSR/CSR structural drift */}
@@ -267,6 +374,12 @@ export default function Header() {
+
+ {/* REMOVE sub header bar */}
+ {/* ...existing code... */}
+ {/* Deleted previous Sub header nav for Referral Management */}
+ {/* ...existing code... */}
+