Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
pradeepkumar
2026-03-19 13:56:09 +05:30
parent ee51f4b554
commit 896f49d1e1
3 changed files with 25 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/contact/page.tsx
View File

@@ -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 = {

10
src/components/providers/header-provider.tsx
View File

@@ -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>
);

96
src/components/settings/SettingsSidebar.tsx
View File

@@ -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 { agentsService } from '@/services/agents.service';
import { usersService } from '@/services/users.service';
import { uploadService } from '@/services/upload.service';
import { useHeaderData } from '@/components/providers/header-provider';
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);
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]);
// Use header context's avatarLoaded or local state
const isAvatarLoaded = avatarLoaded || localAvatarLoaded;
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); }}
src={profileData.avatarUrl}
alt={profileData.name}
className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${avatarLoaded ? 'opacity-100' : 'opacity-0'}`}
onLoad={() => setAvatarLoaded(true)}
ref={(el) => { if (el?.complete && el.naturalWidth > 0) { setAvatarLoaded(true); setLocalAvatarLoaded(true); } }}
src={profileImage}
alt={profileName || 'User'}
className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${isAvatarLoaded ? 'opacity-100' : 'opacity-0'}`}
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>