forked from amer2004/SweetHome
371 lines
13 KiB
JavaScript
371 lines
13 KiB
JavaScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { motion } from "framer-motion";
|
|
import { useRouter } from "next/navigation";
|
|
import Link from "next/link";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
User,
|
|
Mail,
|
|
Phone,
|
|
MessageCircle,
|
|
Check,
|
|
X,
|
|
ArrowLeft,
|
|
Building,
|
|
Home,
|
|
Calendar,
|
|
MapPin,
|
|
Loader2,
|
|
Pencil,
|
|
} from "lucide-react";
|
|
import toast, { Toaster } from "react-hot-toast";
|
|
import AuthService from "../services/AuthService";
|
|
import { getCustomerByUserId, getOwnerByUserId } from "../utils/api";
|
|
|
|
export default function ProfilePage() {
|
|
const { t, i18n } = useTranslation();
|
|
const router = useRouter();
|
|
const [user, setUser] = useState(null);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
const [editingBio, setEditingBio] = useState(false);
|
|
const [bioDraft, setBioDraft] = useState("");
|
|
|
|
const [formData, setFormData] = useState({
|
|
name: "",
|
|
email: "",
|
|
phone: "",
|
|
whatsapp: "",
|
|
bio: "",
|
|
location: "",
|
|
joinedDate: "",
|
|
});
|
|
|
|
const [avatarPreview, setAvatarPreview] = useState("");
|
|
|
|
useEffect(() => {
|
|
const authUser = AuthService.getUser();
|
|
if (authUser) {
|
|
const userData = {
|
|
id: authUser.id,
|
|
name: authUser.name || "",
|
|
email: authUser.email || "",
|
|
phone: authUser.phone || "",
|
|
role: AuthService.isOwner() ? "owner" : "customer",
|
|
};
|
|
setUser(userData);
|
|
|
|
async function fetchProfile() {
|
|
try {
|
|
const fetchFn =
|
|
userData.role === "owner" ? getOwnerByUserId : getCustomerByUserId;
|
|
const profile = await fetchFn(userData.id);
|
|
|
|
if (profile) {
|
|
const profileData = {
|
|
name:
|
|
profile.fullName ||
|
|
profile.name ||
|
|
`${profile.firstName || ""} ${profile.lastName || ""}`.trim() ||
|
|
userData.name ||
|
|
"",
|
|
email: profile.email || userData.email || "",
|
|
phone:
|
|
profile.phone || profile.phoneNumber || userData.phone || "",
|
|
whatsapp: profile.whatsAppNumber || profile.whatsapp || "",
|
|
bio: profile.bio || "",
|
|
location: profile.address || profile.location || "",
|
|
joinedDate: profile.createdAt
|
|
? new Date(profile.createdAt).toLocaleDateString(i18n.language === 'ar' ? 'ar-SA' : 'en-US', {
|
|
month: "long",
|
|
year: "numeric",
|
|
})
|
|
: new Date().toLocaleDateString(i18n.language === 'ar' ? 'ar-SA' : 'en-US', {
|
|
month: "long",
|
|
year: "numeric",
|
|
}),
|
|
};
|
|
setFormData(profileData);
|
|
setBioDraft(profileData.bio);
|
|
localStorage.setItem("userProfile", JSON.stringify(profileData));
|
|
setIsLoading(false);
|
|
return;
|
|
}
|
|
} catch (err) {
|
|
// Ignore API errors and fall back to local data.
|
|
}
|
|
|
|
const savedProfile = localStorage.getItem("userProfile");
|
|
let profileData;
|
|
if (savedProfile) {
|
|
profileData = JSON.parse(savedProfile);
|
|
} else {
|
|
profileData = {
|
|
name: userData.name || "",
|
|
email: userData.email || "",
|
|
phone: "",
|
|
whatsapp: "",
|
|
bio: "",
|
|
location: "",
|
|
joinedDate: new Date().toLocaleDateString(i18n.language === 'ar' ? 'ar-SA' : 'en-US', {
|
|
month: "long",
|
|
year: "numeric",
|
|
}),
|
|
};
|
|
}
|
|
setFormData(profileData);
|
|
setBioDraft(profileData.bio || "");
|
|
setIsLoading(false);
|
|
}
|
|
|
|
const savedAvatar = localStorage.getItem("userAvatar");
|
|
if (savedAvatar) {
|
|
setAvatarPreview(savedAvatar);
|
|
}
|
|
|
|
fetchProfile();
|
|
} else {
|
|
router.push("/login");
|
|
}
|
|
}, [router]);
|
|
|
|
const startBioEditing = () => {
|
|
setBioDraft(formData.bio || "");
|
|
setEditingBio(true);
|
|
};
|
|
|
|
const cancelBioEditing = () => {
|
|
setBioDraft(formData.bio || "");
|
|
setEditingBio(false);
|
|
};
|
|
|
|
const saveBio = () => {
|
|
const updatedData = { ...formData, bio: bioDraft };
|
|
setFormData(updatedData);
|
|
localStorage.setItem("userProfile", JSON.stringify(updatedData));
|
|
setEditingBio(false);
|
|
toast.success(t('bio-updated-success'));
|
|
};
|
|
|
|
const fadeInUp = {
|
|
initial: { opacity: 0, y: 20 },
|
|
animate: { opacity: 1, y: 0 },
|
|
transition: { duration: 0.5 },
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<Loader2 className="w-12 h-12 text-amber-500 animate-spin mx-auto mb-4" />
|
|
<p className="text-gray-600">{t('loading-profile')}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div dir={i18n.language === 'ar' ? 'rtl' : 'ltr'} className="min-h-screen bg-gray-50 py-8">
|
|
<Toaster position="top-center" reverseOrder={false} />
|
|
|
|
<div className="container mx-auto px-4 max-w-4xl">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="flex justify-between items-center mb-6"
|
|
>
|
|
<Link
|
|
href="/"
|
|
className="flex items-center gap-2 text-gray-600 hover:text-amber-600 transition-colors"
|
|
>
|
|
<ArrowLeft className="w-5 h-5" />
|
|
<span>{t('backToHome')}</span>
|
|
</Link>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={fadeInUp}
|
|
initial="initial"
|
|
animate="animate"
|
|
className="bg-white rounded-3xl shadow-xl overflow-hidden"
|
|
>
|
|
<div className="h-48 bg-gradient-to-r from-amber-500 to-amber-600 relative overflow-hidden">
|
|
<motion.div
|
|
className="absolute inset-0 bg-white/10"
|
|
animate={{
|
|
x: ["-100%", "100%"],
|
|
}}
|
|
transition={{
|
|
duration: 3,
|
|
repeat: Infinity,
|
|
ease: "linear",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="px-8 pb-8">
|
|
<div className="flex justify-center -mt-16 mb-6">
|
|
<div className="relative group">
|
|
<div className="w-32 h-32 rounded-full border-4 border-white bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center text-white text-4xl font-bold shadow-xl overflow-hidden">
|
|
{avatarPreview ? (
|
|
<img
|
|
src={avatarPreview}
|
|
alt={formData.name}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
formData.name?.charAt(0).toUpperCase() || "U"
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-center mb-6">
|
|
<div className="flex items-center justify-center gap-2">
|
|
<h1 className="text-3xl font-bold text-gray-900">
|
|
{formData.name}
|
|
</h1>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center gap-2 text-gray-500 mt-2">
|
|
<MapPin className="w-4 h-4" />
|
|
<span>{formData.location || t('addressNotSpecified')}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center gap-2 text-gray-500 mt-1">
|
|
<Calendar className="w-4 h-4" />
|
|
<span> {t('member-since')} {formData.joinedDate}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="bg-gray-50 p-4 rounded-xl group">
|
|
<div className="flex justify-between items-start mb-2">
|
|
<label className="text-sm font-medium text-gray-600">
|
|
{t('emailLabel')}
|
|
</label>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-gray-900">
|
|
<Mail className="w-5 h-5 text-gray-400" />
|
|
<span>{formData.email}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-gray-50 p-4 rounded-xl group">
|
|
<div className="flex justify-between items-start mb-2">
|
|
<label className="text-sm font-medium text-gray-600">
|
|
{t('phoneLabel')}
|
|
</label>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-gray-900">
|
|
<Phone className="w-5 h-5 text-gray-400" />
|
|
<span>{formData.phone || t('not-specified')}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-gray-50 p-4 rounded-xl group">
|
|
<div className="flex justify-between items-start mb-2">
|
|
<label className="text-sm font-medium text-gray-600">
|
|
{t('whatsapp-label')}
|
|
</label>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-gray-900">
|
|
<MessageCircle className="w-5 h-5 text-gray-400" />
|
|
<span>{formData.whatsapp || t('not-specified')}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-gray-50 p-4 rounded-xl">
|
|
<label className="block text-sm font-medium text-gray-600 mb-2">
|
|
{t('account-type')}
|
|
</label>
|
|
<div className="flex items-center gap-2">
|
|
{user?.role === "owner" ? (
|
|
<>
|
|
<Building className="w-5 h-5 text-amber-500" />
|
|
<span className="text-gray-900">{t('property-owner')}</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Home className="w-5 h-5 text-blue-500" />
|
|
<span className="text-gray-900">{t('customer')}</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* noo need for the descption of me on the profile*/}
|
|
{/* <div className="mt-6 bg-gray-50 p-4 rounded-xl group">
|
|
<div className="flex justify-between items-start mb-2">
|
|
<label className="text-sm font-medium text-gray-600">
|
|
نبذة عني
|
|
</label>
|
|
{!editingBio && (
|
|
<button
|
|
onClick={startBioEditing}
|
|
className="opacity-0 group-hover:opacity-100 transition-opacity text-gray-400 hover:text-amber-500"
|
|
>
|
|
<Pencil className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{editingBio ? (
|
|
<div className="space-y-2">
|
|
<textarea
|
|
value={bioDraft}
|
|
onChange={(e) => setBioDraft(e.target.value)}
|
|
rows="4"
|
|
autoFocus
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent"
|
|
placeholder="اكتب نبذة عن نفسك..."
|
|
/>
|
|
<div className="flex justify-end gap-2">
|
|
<button
|
|
onClick={saveBio}
|
|
className="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 flex items-center gap-2"
|
|
>
|
|
<Check className="w-4 h-4" />
|
|
حفظ
|
|
</button>
|
|
<button
|
|
onClick={cancelBioEditing}
|
|
className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 flex items-center gap-2"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
إلغاء
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<p className="text-gray-700 leading-relaxed">
|
|
{formData.bio || 'لا توجد نبذة تعريفية بعد'}
|
|
</p>
|
|
)}
|
|
</div> */}
|
|
|
|
{user?.role === "owner" && (
|
|
<div className="grid grid-cols-3 gap-4 mt-6">
|
|
<div className="bg-amber-50 p-4 rounded-xl text-center">
|
|
<div className="text-2xl font-bold text-amber-600">12</div>
|
|
<div className="text-xs text-gray-600">{t('propertiesListed')}</div>
|
|
</div>
|
|
<div className="bg-blue-50 p-4 rounded-xl text-center">
|
|
<div className="text-2xl font-bold text-blue-600">8</div>
|
|
<div className="text-xs text-gray-600">{t('citiesCovered')}</div>
|
|
</div>
|
|
<div className="bg-green-50 p-4 rounded-xl text-center">
|
|
<div className="text-2xl font-bold text-green-600">4.8</div>
|
|
<div className="text-xs text-gray-600">{t('customerSatisfaction')}</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|