feat(doctor profile): implement unclaimed doctor handling and UI adjustments

This commit is contained in:
hamed
2026-07-12 10:00:03 +03:30
parent ce05e464c4
commit 42ac6645d5
5 changed files with 195 additions and 25 deletions
+34 -21
View File
@@ -20,6 +20,8 @@ const SOCIAL_ICONS = {
};
function Title({ doctor }) {
const isUnclaimed = doctor?.owner_status !== "claimed";
const hasRating = Number(doctor?.point) > 0;
return (
<div className="flex flex-col lg:flex-row items-center justify-start gap-[8px] lg:gap-[32px]">
<CircularLoading width={100} height={100}>
@@ -31,9 +33,16 @@ function Title({ doctor }) {
</CircularLoading>
<div className="flex flex-col items-center lg:items-start gap-[8px] lg:gap-[16px]">
<TextLoading width={90} height={20}>
<h1 className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
{doctor?.name}
</h1>
<div className="flex items-center gap-2">
<h1 className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
{doctor?.name}
</h1>
{isUnclaimed && (
<span className="text-[#737373] bg-[#F5F5F5] border border-[#E5E5E5] rounded-full px-2 py-0.5 text-[10px] md:text-[12px] font-medium whitespace-nowrap">
پروفایل تأییدنشده
</span>
)}
</div>
</TextLoading>
<TextLoading width={100} height={20}>
<h2 className="text-[#525252] text-[14px] md:text-[16px] font-medium">
@@ -53,9 +62,11 @@ function Title({ doctor }) {
</TextLoading>
)}
<div className="flex items-center gap-1">
<div className="hidden lg:flex">
<TickCircle />
</div>
{!isUnclaimed && (
<div className="hidden lg:flex">
<TickCircle />
</div>
)}
<TextLoading width={120} height={20}>
<p className="text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-medium">
کد نظام پزشکی: {doctor?.medical_system_code}
@@ -63,22 +74,24 @@ function Title({ doctor }) {
</TextLoading>
</div>
</div>
<CustomLoading width={160} height={25}>
<div className="flex items-center justify-start gap-2">
<div className="flex p-1 gap-0.5 items-start justify-center">
<StarDI />
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">
امتیاز: {doctor?.point}
</p>
{hasRating && (
<CustomLoading width={160} height={25}>
<div className="flex items-center justify-start gap-2">
<div className="flex p-1 gap-0.5 items-start justify-center">
<StarDI />
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">
امتیاز: {doctor?.point}
</p>
</div>
<div className="flex p-1 items-start gap-0.5">
<LikeDI />
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">
{doctor?.satisfaction}% رضایت کاربران
</p>
</div>
</div>
<div className="flex p-1 items-start gap-0.5">
<LikeDI />
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">
{doctor?.satisfaction}% رضایت کاربران
</p>
</div>
</div>
</CustomLoading>
</CustomLoading>
)}
{doctor?.social_media && Object.values(doctor.social_media).some(Boolean) && (
<div className="flex items-center gap-2">
{Object.entries(doctor.social_media).map(([key, url]) => {
@@ -5,6 +5,10 @@ import Comment from "@/app/component/comment";
import ModalAnswer from "./modal/ModalAnswer";
function Comments({ doctor, comments, rateAggregate }) {
const isUnclaimed = doctor?.owner_status !== "claimed";
const hasComments = comments?.length > 0;
const hideRatingBlock = isUnclaimed && !hasComments;
return (
<div className="mt-[24px] sm:mt-[27px] md:mt-[29px] lg:mt-[32px]">
<a
@@ -20,8 +24,16 @@ function Comments({ doctor, comments, rateAggregate }) {
</p>
<ModalAnswer doctor={doctor} />
</div>
<Chart comments={comments} rateAggregate={rateAggregate} />
<Comment comments={comments} doctor={doctor} />
{hideRatingBlock ? (
<p className="mt-[16px] text-[#616161] text-[14px] md:text-[16px] font-normal">
هنوز نظری برای این پزشک ثبت نشده است.
</p>
) : (
<>
<Chart comments={comments} rateAggregate={rateAggregate} />
<Comment comments={comments} doctor={doctor} />
</>
)}
</div>
);
}