115 lines
3.9 KiB
JavaScript
115 lines
3.9 KiB
JavaScript
import { Badge } from "@/components/ui/badge";
|
|
import { MdOutlineMailOutline, MdVerifiedUser } from "react-icons/md";
|
|
import { IoMdStar } from "react-icons/io";
|
|
import { FiPhoneCall } from "react-icons/fi";
|
|
import { extractYear, t } from "@/utils";
|
|
import { usePathname } from "next/navigation";
|
|
import { useSelector } from "react-redux";
|
|
import { getCompanyName } from "@/redux/reducer/settingSlice";
|
|
import ShareDropdown from "@/components/Common/ShareDropdown";
|
|
import CustomLink from "@/components/Common/CustomLink";
|
|
import CustomImage from "@/components/Common/CustomImage";
|
|
import Link from "next/link";
|
|
|
|
const SellerDetailCard = ({ seller, ratings }) => {
|
|
const pathname = usePathname();
|
|
const memberSinceYear = seller?.created_at
|
|
? extractYear(seller.created_at)
|
|
: "";
|
|
const currentUrl = `${process.env.NEXT_PUBLIC_WEB_URL}${pathname}`;
|
|
const CompanyName = useSelector(getCompanyName);
|
|
const FbTitle = seller?.name + " | " + CompanyName;
|
|
|
|
|
|
return (
|
|
<div className="rounded-lg border overflow-hidden">
|
|
<div className="flex justify-between items-center p-4 bg-muted">
|
|
<h1 className="text-lg font-bold">{t("seller_info")}</h1>
|
|
<ShareDropdown
|
|
url={currentUrl}
|
|
title={FbTitle}
|
|
headline={FbTitle}
|
|
companyName={CompanyName}
|
|
className="rounded-md p-2 border bg-white"
|
|
/>
|
|
</div>
|
|
|
|
{(seller?.is_verified === 1 || memberSinceYear) && (
|
|
<div className="border-t p-4">
|
|
<div className="flex items-center">
|
|
{seller?.is_verified === 1 && (
|
|
<Badge className="p-1 bg-[#FA6E53] flex items-center gap-1 rounded-md text-white text-sm">
|
|
<MdVerifiedUser size={22} />
|
|
{t("verified")}
|
|
</Badge>
|
|
)}
|
|
|
|
{memberSinceYear && (
|
|
<div className="ltr:ml-auto rtl:mr-auto text-sm text-muted-foreground">
|
|
{t("memberSince")}: {memberSinceYear}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="border-t flex flex-col justify-center items-center p-4 gap-4">
|
|
<CustomImage
|
|
src={seller?.profile}
|
|
alt="Seller Image"
|
|
width={120}
|
|
height={120}
|
|
className="aspect-square rounded-xl object-cover"
|
|
/>
|
|
|
|
<div className="text-center w-full">
|
|
<h3 className="text-xl font-bold">{seller?.name}</h3>
|
|
<div className="flex items-center justify-center gap-1 text-sm mt-1">
|
|
<IoMdStar />
|
|
<span>
|
|
{Number(seller?.average_rating).toFixed(2)} |{" "}
|
|
{ratings?.data?.length} {t("ratings")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{seller?.show_personal_details === 1 &&
|
|
(seller?.email || seller?.mobile) && (
|
|
<div className="border-t p-4 flex flex-col gap-4">
|
|
{seller?.email && (
|
|
<div className="flex items-center gap-2">
|
|
<div className="p-3 bg-muted rounded-md border">
|
|
<MdOutlineMailOutline className="size-4" />
|
|
</div>
|
|
<CustomLink
|
|
href={`mailto:${seller?.email}`}
|
|
className="break-all"
|
|
>
|
|
{seller?.email}
|
|
</CustomLink>
|
|
</div>
|
|
)}
|
|
|
|
{seller?.mobile && (
|
|
<div className="flex items-center gap-2">
|
|
<div className="p-3 bg-muted rounded-md border">
|
|
<FiPhoneCall className="size-4" />
|
|
</div>
|
|
|
|
<Link
|
|
href={`tel:${seller?.mobile}`}
|
|
className="break-all"
|
|
>
|
|
{seller?.mobile}
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SellerDetailCard;
|