96 lines
3.3 KiB
JavaScript
96 lines
3.3 KiB
JavaScript
import { formatDateMonthYear, t } from "@/utils/index";
|
|
import { FaHeart, FaRegCalendarCheck, FaRegHeart } from "react-icons/fa";
|
|
import { manageFavouriteApi } from "@/utils/api";
|
|
import { toast } from "sonner";
|
|
import { usePathname } from "next/navigation";
|
|
import { getIsLoggedIn } from "@/redux/reducer/authSlice";
|
|
import { useSelector } from "react-redux";
|
|
import { getCompanyName } from "@/redux/reducer/settingSlice";
|
|
import ShareDropdown from "@/components/Common/ShareDropdown";
|
|
import { setIsLoginOpen } from "@/redux/reducer/globalStateSlice";
|
|
|
|
const ProductDetailCard = ({ productDetails, setProductDetails }) => {
|
|
const path = usePathname();
|
|
const currentUrl = `${process.env.NEXT_PUBLIC_WEB_URL}${path}`;
|
|
const translated_item = productDetails?.translated_item;
|
|
const isLoggedIn = useSelector(getIsLoggedIn);
|
|
const CompanyName = useSelector(getCompanyName);
|
|
const FbTitle =
|
|
(translated_item?.name || productDetails?.name) + " | " + CompanyName;
|
|
const headline = `🚀 Discover the perfect deal! Explore "${
|
|
translated_item?.name || productDetails?.name
|
|
}" from ${CompanyName} and grab it before it's gone. Shop now at`;
|
|
|
|
const isJobCategory = Number(productDetails?.category?.is_job_category) === 1;
|
|
const price = isJobCategory
|
|
? productDetails?.formatted_salary_range
|
|
: productDetails?.formatted_price;
|
|
|
|
const handleLikeItem = async () => {
|
|
if (!isLoggedIn) {
|
|
setIsLoginOpen(true);
|
|
return;
|
|
}
|
|
try {
|
|
const response = await manageFavouriteApi.manageFavouriteApi({
|
|
item_id: productDetails?.id,
|
|
});
|
|
if (response?.data?.error === false) {
|
|
setProductDetails((prev) => ({
|
|
...prev,
|
|
is_liked: !productDetails?.is_liked,
|
|
}));
|
|
}
|
|
toast.success(response?.data?.message);
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4 border p-4 rounded-lg">
|
|
<div className="flex justify-between max-w-full">
|
|
<div className="flex flex-col gap-2">
|
|
<h1
|
|
className="text-2xl font-medium word-break-all line-clamp-2"
|
|
title={translated_item?.name || productDetails?.name}
|
|
>
|
|
{translated_item?.name || productDetails?.name}
|
|
</h1>
|
|
<h2
|
|
className="text-primary text-3xl font-bold break-all text-balance line-clamp-2"
|
|
title={price}
|
|
>
|
|
{price}
|
|
</h2>
|
|
</div>
|
|
<div className="flex flex-col gap-4">
|
|
<button
|
|
className="rounded-full size-10 flex items-center justify-center p-2 border"
|
|
onClick={handleLikeItem}
|
|
>
|
|
{productDetails?.is_liked === true ? (
|
|
<FaHeart size={20} className="text-primary" />
|
|
) : (
|
|
<FaRegHeart size={20} />
|
|
)}
|
|
</button>
|
|
<ShareDropdown
|
|
url={currentUrl}
|
|
title={FbTitle}
|
|
headline={headline}
|
|
companyName={CompanyName}
|
|
className="rounded-full p-2 border bg-white"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-1 items-center">
|
|
<FaRegCalendarCheck />
|
|
{t("postedOn")}:{formatDateMonthYear(productDetails?.created_at)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProductDetailCard;
|