feat(doctor profile): implement unclaimed doctor handling and UI adjustments
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user