fix: Populate the directionsUrl with a Google Maps link on the contact page.

src/app/contact/page.tsx

@@ -35,7 +35,7 @@ const defaultContactDetails: ContactDetails = {
   officeAddress: '123 Market Street',
   officeCity: 'New York CA 234737',
   mapUrl: '',
-  directionsUrl: '',
+  directionsUrl: 'https://maps.google.com/?q=123+Market+Street+New+York+CA+234737',
 };
 
 const defaultCta: ContactCta = {

src/components/providers/header-provider.tsx

@@ -10,6 +10,7 @@ import { notificationsApiService } from '@/services/notifications-api.service';
 interface HeaderData {
   profileImage: string | null;
   profileName: string | null;
+  profileTitle: string | null;
   avatarLoaded: boolean;
   setAvatarLoaded: (loaded: boolean) => void;
   notificationCount: number;
@@ -18,6 +19,7 @@ interface HeaderData {
 const HeaderContext = createContext<HeaderData>({
   profileImage: null,
   profileName: null,
+  profileTitle: null,
   avatarLoaded: false,
   setAvatarLoaded: () => {},
   notificationCount: 0,
@@ -31,6 +33,7 @@ export function HeaderProvider({ children }: { children: React.ReactNode }) {
   const { data: session, status } = useSession();
   const [profileImage, setProfileImage] = useState<string | null>(null);
   const [profileName, setProfileName] = useState<string | null>(null);
+  const [profileTitle, setProfileTitle] = useState<string | null>(null);
   const [avatarLoaded, setAvatarLoaded] = useState(false);
   const [notificationCount, setNotificationCount] = useState(0);
   const lastAvatarKeyRef = useRef<string | null>(null);
@@ -41,18 +44,22 @@ export function HeaderProvider({ children }: { children: React.ReactNode }) {
       const role = (session?.user as any)?.role;
       let avatar: string | null = null;
       let name: string | null = null;
+      let title: string | null = null;
 
       if (role === 'AGENT') {
         const profile = await agentsService.getMyProfile();
         avatar = profile.avatar;
         name = profile.firstName ? `${profile.firstName} ${profile.lastName || ''}`.trim() : null;
+        title = profile.agentType?.name || 'Real Estate Agent';
       } else if (role === 'USER') {
         const profile = await usersService.getMyProfile();
         avatar = profile.avatar;
         name = profile.firstName ? `${profile.firstName} ${profile.lastName || ''}`.trim() : null;
+        title = 'Member';
       }
 
       if (name) setProfileName(name);
+      if (title) setProfileTitle(title);
 
       if (avatar && (avatar !== lastAvatarKeyRef.current || forceRefresh)) {
         lastAvatarKeyRef.current = avatar;
@@ -79,6 +86,7 @@ export function HeaderProvider({ children }: { children: React.ReactNode }) {
       hasFetchedRef.current = false;
       setProfileImage(null);
       setProfileName(null);
+      setProfileTitle(null);
       setAvatarLoaded(false);
       lastAvatarKeyRef.current = null;
     }
@@ -119,7 +127,7 @@ export function HeaderProvider({ children }: { children: React.ReactNode }) {
   }, [status]);
 
   return (
-    <HeaderContext.Provider value={{ profileImage, profileName, avatarLoaded, setAvatarLoaded, notificationCount }}>
+    <HeaderContext.Provider value={{ profileImage, profileName, profileTitle, avatarLoaded, setAvatarLoaded, notificationCount }}>
       {children}
     </HeaderContext.Provider>
   );

src/components/settings/SettingsSidebar.tsx

@@ -1,13 +1,10 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { useSession } from 'next-auth/react';
+import { useHeaderData } from '@/components/providers/header-provider';
-import { agentsService } from '@/services/agents.service';
-import { usersService } from '@/services/users.service';
-import { uploadService } from '@/services/upload.service';
 
 interface NavItem {
   label: string;
@@ -23,74 +20,11 @@ export function SettingsSidebar({
   basePath = '/agent/settings',
 }: SettingsSidebarProps) {
   const pathname = usePathname();
-  const { data: session } = useSession();
+  const { profileImage, profileName, profileTitle, avatarLoaded, setAvatarLoaded } = useHeaderData();
+  const [localAvatarLoaded, setLocalAvatarLoaded] = useState(false);
 
-  const [avatarLoaded, setAvatarLoaded] = useState(false);
+  // Use header context's avatarLoaded or local state
-
+  const isAvatarLoaded = avatarLoaded || localAvatarLoaded;
-  const [profileData, setProfileData] = useState({
-    name: session?.user?.name || 'User',
-    title: 'Real Estate Agent',
-    avatarUrl: session?.user?.image || null,
-  });
-
-  const fetchProfile = useCallback(async () => {
-    try {
-      const role = (session?.user as any)?.role;
-      let avatarUrl: string | null = null;
-      let name = session?.user?.name || 'User';
-      let title = 'User';
-
-      if (role === 'AGENT') {
-        const profile = await agentsService.getMyProfile();
-        name = `${profile.firstName || ''} ${profile.lastName || ''}`.trim() || name;
-        title = profile.agentType?.name || 'Real Estate Agent';
-
-        if (profile.avatar) {
-          try {
-            avatarUrl = await uploadService.getPresignedDownloadUrl(profile.avatar);
-          } catch {
-            avatarUrl = profile.avatar;
-          }
-        }
-      } else if (role === 'USER') {
-        const profile = await usersService.getMyProfile();
-        name = `${profile.firstName || ''} ${profile.lastName || ''}`.trim() || name;
-        title = 'Member';
-
-        if (profile.avatar) {
-          try {
-            avatarUrl = await uploadService.getPresignedDownloadUrl(profile.avatar);
-          } catch {
-            avatarUrl = profile.avatar;
-          }
-        }
-      }
-
-      setProfileData({ name, title, avatarUrl });
-      setAvatarLoaded(false);
-    } catch (err) {
-      console.error('Failed to fetch profile for sidebar:', err);
-    }
-  }, [session]);
-
-  useEffect(() => {
-    if (session) {
-      fetchProfile();
-    }
-  }, [session, fetchProfile]);
-
-  useEffect(() => {
-    const handleProfileUpdate = () => {
-      if (session) {
-        fetchProfile();
-      }
-    };
-
-    window.addEventListener('profile-updated', handleProfileUpdate);
-    return () => {
-      window.removeEventListener('profile-updated', handleProfileUpdate);
-    };
-  }, [session, fetchProfile]);
 
   const isAgent = basePath === '/agent/settings';
 
@@ -137,25 +71,25 @@ export function SettingsSidebar({
       <div className="bg-white rounded-[15px] border border-[#00293D]/20 p-5">
         <div className="flex items-center gap-4">
           <div className="w-[70px] h-[70px] rounded-full overflow-hidden border-2 border-[#00293D]/20 flex-shrink-0 bg-gray-100 relative">
-            {(!profileData.avatarUrl || !avatarLoaded) && (
+            {(!profileImage || !isAvatarLoaded) && (
               <div className="absolute inset-0 rounded-full shimmer-loading" />
             )}
-            {profileData.avatarUrl && (
+            {profileImage && (
               <img
-                ref={(el) => { if (el?.complete && el.naturalWidth > 0) setAvatarLoaded(true); }}
+                ref={(el) => { if (el?.complete && el.naturalWidth > 0) { setAvatarLoaded(true); setLocalAvatarLoaded(true); } }}
-                src={profileData.avatarUrl}
+                src={profileImage}
-                alt={profileData.name}
+                alt={profileName || 'User'}
-                className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${avatarLoaded ? 'opacity-100' : 'opacity-0'}`}
+                className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${isAvatarLoaded ? 'opacity-100' : 'opacity-0'}`}
-                onLoad={() => setAvatarLoaded(true)}
+                onLoad={() => { setAvatarLoaded(true); setLocalAvatarLoaded(true); }}
               />
             )}
           </div>
           <div>
             <h3 className="font-fractul font-bold text-[16px] leading-[19px] text-[#00293D]">
-              {profileData.name}
+              {profileName || 'User'}
             </h3>
             <p className="font-serif font-normal text-[13px] leading-[17px] text-[#00293D]/60 mt-1">
-              {profileData.title}
+              {profileTitle || (isAgent ? 'Real Estate Agent' : 'Member')}
             </p>
           </div>
         </div>