fixed some bugs
This commit is contained in:
@jcarymuhammedow
@@ -2,7 +2,14 @@
|
||||
|
||||
import { useState, useEffect, useRef, useCallback, MouseEvent } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Heart, ShoppingCart, Plus, Minus, AlertTriangle } from "lucide-react";
|
||||
import {
|
||||
Heart,
|
||||
ShoppingCart,
|
||||
Plus,
|
||||
Minus,
|
||||
AlertTriangle,
|
||||
Zap,
|
||||
} from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
Carousel,
|
||||
@@ -53,9 +60,9 @@ export default function ProductCard({
|
||||
struct_price_text,
|
||||
images,
|
||||
labels = [],
|
||||
price_color = "#005bff",
|
||||
height = 360,
|
||||
width = 280,
|
||||
price_color = "#0A0A0A",
|
||||
height = 400,
|
||||
width = 300,
|
||||
button = false,
|
||||
stock,
|
||||
}: ProductCardProps) {
|
||||
@@ -73,6 +80,7 @@ export default function ProductCard({
|
||||
const [localQuantity, setLocalQuantity] = useState(1);
|
||||
const [isSyncing, setIsSyncing] = useState(false);
|
||||
const [showStockModal, setShowStockModal] = useState(false);
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
const autoplayRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
|
||||
@@ -141,7 +149,7 @@ export default function ProductCard({
|
||||
setIsSyncing(false);
|
||||
}
|
||||
},
|
||||
[id, updateCartMutation, cartItem, refetchCart]
|
||||
[id, updateCartMutation, cartItem, refetchCart],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -169,13 +177,15 @@ export default function ProductCard({
|
||||
{
|
||||
onSuccess: (data) =>
|
||||
toast.success(
|
||||
data.wasAdded ? t("added_to_favorites") : t("removed_from_favorites")
|
||||
data.wasAdded
|
||||
? t("added_to_favorites")
|
||||
: t("removed_from_favorites"),
|
||||
),
|
||||
onError: () => toast.error("Error. Try again"),
|
||||
}
|
||||
},
|
||||
);
|
||||
},
|
||||
[id, isFavorite, toggleFavorite]
|
||||
[id, isFavorite, toggleFavorite],
|
||||
);
|
||||
|
||||
const handleAddToCart = useCallback(
|
||||
@@ -205,7 +215,7 @@ export default function ProductCard({
|
||||
setIsSyncing(false);
|
||||
}
|
||||
},
|
||||
[id, name, localQuantity, availableStock, addToCartMutation]
|
||||
[id, name, localQuantity, availableStock, addToCartMutation],
|
||||
);
|
||||
|
||||
const handleQuantityChange = useCallback(
|
||||
@@ -224,27 +234,28 @@ export default function ProductCard({
|
||||
|
||||
setLocalQuantity(newQuantity);
|
||||
},
|
||||
[localQuantity, availableStock]
|
||||
[localQuantity, availableStock],
|
||||
);
|
||||
|
||||
const handleCardClick = useCallback((e: MouseEvent<HTMLDivElement>) => {
|
||||
const target = e.target as HTMLElement;
|
||||
|
||||
// Prevent navigation if clicking on buttons or interactive elements
|
||||
if (
|
||||
target.closest("button") ||
|
||||
target.closest('[data-carousel-control="true"]') ||
|
||||
target.closest('[role="dialog"]')
|
||||
) {
|
||||
const handleCardClick = useCallback(
|
||||
(e: MouseEvent<HTMLDivElement>) => {
|
||||
const target = e.target as HTMLElement;
|
||||
|
||||
if (
|
||||
target.closest("button") ||
|
||||
target.closest('[data-carousel-control="true"]') ||
|
||||
target.closest('[role="dialog"]')
|
||||
) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return;
|
||||
}
|
||||
|
||||
// Programmatic navigation
|
||||
e.preventDefault();
|
||||
router.push(`/product/${id}`);
|
||||
}, [router, id]);
|
||||
router.push(`/product/${id}`);
|
||||
},
|
||||
[router, id],
|
||||
);
|
||||
|
||||
const handleNavClick = (e: MouseEvent, action: () => void) => {
|
||||
e.preventDefault();
|
||||
@@ -256,26 +267,31 @@ export default function ProductCard({
|
||||
<>
|
||||
<div
|
||||
onClick={handleCardClick}
|
||||
className="flex justify-center cursor-pointer"
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
className="flex justify-center cursor-pointer group"
|
||||
>
|
||||
<Card
|
||||
className="relative gap-2 border-none shadow-none p-0 w-full overflow-hidden rounded-2xl"
|
||||
className="relative bg-white border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-300 p-0 w-full overflow-hidden rounded-lg"
|
||||
style={{ height, maxWidth: width }}
|
||||
>
|
||||
<div className="relative w-full h-[260px] group">
|
||||
{/* Image Section */}
|
||||
<div className="relative w-full h-[280px] bg-gradient-to-br from-gray-50 to-gray-100 overflow-hidden">
|
||||
<Carousel
|
||||
opts={{ align: "start", loop: true, watchDrag: false }}
|
||||
setApi={setApi}
|
||||
className="w-full h-full"
|
||||
>
|
||||
<CarouselContent className="h-[260px] ml-0">
|
||||
<CarouselContent className="h-[280px] ml-0">
|
||||
{images.map((image, idx) => (
|
||||
<CarouselItem key={idx} className="h-[260px] pl-0">
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<CarouselItem key={idx} className="h-[280px] pl-0">
|
||||
<div className="h-full flex items-center justify-center p-3">
|
||||
<img
|
||||
src={image}
|
||||
alt={`${name} - ${idx + 1}`}
|
||||
className="max-w-full max-h-full object-contain"
|
||||
className={`max-w-full max-h-full object-contain transition-transform duration-500 ${
|
||||
isHovered ? "scale-105" : "scale-100"
|
||||
}`}
|
||||
draggable="false"
|
||||
/>
|
||||
</div>
|
||||
@@ -287,42 +303,47 @@ export default function ProductCard({
|
||||
<>
|
||||
<CarouselPrevious
|
||||
data-carousel-control="true"
|
||||
className="absolute left-2 opacity-0 group-hover:opacity-100 transition-opacity z-20"
|
||||
className="absolute left-3 opacity-0 group-hover:opacity-100 transition-all duration-300 z-20 h-9 w-9 bg-white/95 hover:bg-white border-0 shadow-lg"
|
||||
onClick={(e) => handleNavClick(e, () => api?.scrollPrev())}
|
||||
/>
|
||||
<CarouselNext
|
||||
data-carousel-control="true"
|
||||
className="absolute right-2 opacity-0 group-hover:opacity-100 transition-opacity z-20"
|
||||
className="absolute right-3 opacity-0 group-hover:opacity-100 transition-all duration-300 z-20 h-9 w-9 bg-white/95 hover:bg-white border-0 shadow-lg"
|
||||
onClick={(e) => handleNavClick(e, () => api?.scrollNext())}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Carousel>
|
||||
|
||||
|
||||
|
||||
{/* Image Dots */}
|
||||
{hasMultipleImages && (
|
||||
<div className="absolute bottom-2 left-1/2 -translate-x-1/2 z-10 flex gap-1.5">
|
||||
<div className="absolute bottom-3 left-1/2 -translate-x-1/2 z-10 flex gap-1.5">
|
||||
{images.map((_, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
data-carousel-control="true"
|
||||
onClick={(e) => handleNavClick(e, () => api?.scrollTo(idx))}
|
||||
className={`h-1.5 rounded-full cursor-pointer transition-all ${
|
||||
idx === current ? "w-6 bg-white" : "w-1.5 bg-white/60"
|
||||
className={`h-1.5 rounded-full transition-all duration-300 ${
|
||||
idx === current
|
||||
? "w-8 bg-gray-900"
|
||||
: "w-1.5 bg-gray-400 hover:bg-gray-600"
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Labels */}
|
||||
{labels.length > 0 && (
|
||||
<div className="absolute top-2 left-2 flex flex-col gap-1 z-10">
|
||||
<div className="absolute top-3 left-3 flex flex-col gap-2 z-10">
|
||||
{labels.map((label, idx) => (
|
||||
<Badge
|
||||
key={idx}
|
||||
className="text-white text-[10px] font-bold uppercase rounded-r-md"
|
||||
style={{ backgroundColor: label.bg_color }}
|
||||
className="text-white text-xs font-bold px-3 py-1 shadow-md backdrop-blur-sm"
|
||||
style={{
|
||||
backgroundColor: label.bg_color,
|
||||
borderRadius: "12px",
|
||||
}}
|
||||
>
|
||||
{label.text}
|
||||
</Badge>
|
||||
@@ -330,120 +351,147 @@ export default function ProductCard({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Out of Stock Overlay */}
|
||||
{isOutOfStock && (
|
||||
<div className="absolute inset-0 bg-black/50 flex items-center justify-center z-10">
|
||||
<Badge variant="secondary" className="text-sm font-bold">
|
||||
{t("outOfStock")}
|
||||
</Badge>
|
||||
<div className="absolute inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center z-20">
|
||||
<div className="text-center">
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="text-sm font-bold px-4 py-2 bg-gray-900 text-white"
|
||||
>
|
||||
{t("outOfStock")}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<CardContent className="p-0 space-y-1">
|
||||
<p
|
||||
className="text-sm mx-2 font-medium"
|
||||
style={{ color: price_color }}
|
||||
>
|
||||
{struct_price_text}
|
||||
</p>
|
||||
<p className="text-black text-sm font-semibold leading-normal truncate mx-2">
|
||||
{/* Content Section */}
|
||||
<CardContent className="p-3 space-y-3">
|
||||
{/* Product Name */}
|
||||
<h3 className="text-gray-900 text-base font-semibold leading-tight line-clamp-2 min-h-[2.5rem]">
|
||||
{name}
|
||||
</p>
|
||||
</CardContent>
|
||||
</h3>
|
||||
|
||||
<div className="flex">
|
||||
<button
|
||||
onClick={handleFavorite}
|
||||
disabled={isFavoriteToggling || isFavoriteLoading}
|
||||
className=" cursor-pointer z-10 rounded-full bg-white/80 p-2 hover:bg-white transition-all disabled:opacity-50"
|
||||
>
|
||||
{isFavoriteLoading ? (
|
||||
<div className="w-5 h-5 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin" />
|
||||
) : (
|
||||
<Heart
|
||||
className={`w-5 h-5 ${
|
||||
isFavorite ? "text-[#005bff] fill-[#005bff]" : "text-gray-700"
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
{button && !isOutOfStock && (
|
||||
<div className="px-1 w-full">
|
||||
{!isInCart ? (
|
||||
<Button
|
||||
onClick={handleAddToCart}
|
||||
disabled={isSyncing}
|
||||
className="w-full rounded-lg cursor-pointer gap-2 bg-[#005bff] hover:bg-[#0041c4]"
|
||||
size="sm"
|
||||
>
|
||||
{isSyncing ? (
|
||||
<>
|
||||
|
||||
{t("adding")}
|
||||
</>
|
||||
{/* Price */}
|
||||
<div className="flex items-baseline gap-2">
|
||||
<p
|
||||
className="text-2xl font-bold tracking-tight"
|
||||
style={{ color: price_color }}
|
||||
>
|
||||
{struct_price_text}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2 items-center">
|
||||
{/* Favorite Button */}
|
||||
<Button
|
||||
onClick={handleFavorite}
|
||||
disabled={isFavoriteToggling || isFavoriteLoading}
|
||||
className=" w-9 h-9 rounded-[10px] bg-white/95 backdrop-blur-sm hover:bg-white hover:scale-110 transition-all duration-200 shadow-md disabled:opacity-50"
|
||||
>
|
||||
{isFavoriteLoading ? (
|
||||
<div className="w-5 h-5 border-2 border-gray-200 border-t-gray-700 rounded-full animate-spin" />
|
||||
) : (
|
||||
<Heart
|
||||
className={`w-5 h-5 transition-all duration-200 ${
|
||||
isFavorite
|
||||
? "text-rose-500 fill-rose-500 scale-110"
|
||||
: "text-gray-600 hover:text-rose-500"
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
</Button>
|
||||
{/* Action Buttons */}
|
||||
{button && !isOutOfStock && (
|
||||
<div className="pt-2 w-full">
|
||||
{!isInCart ? (
|
||||
<Button
|
||||
onClick={handleAddToCart}
|
||||
disabled={isSyncing}
|
||||
className="w-full h-9 rounded-[10px] bg-gradient-to-r from-gray-900 to-gray-800 hover:from-gray-800 hover:to-gray-700 text-white font-semibold shadow-md hover:shadow-lg transition-all duration-300 gap-2"
|
||||
>
|
||||
{isSyncing ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
<span>{t("adding")}</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<ShoppingCart className="h-5 w-5" />
|
||||
<span>{t("add_to_cart")}</span>
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<ShoppingCart className="h-4 w-4" />
|
||||
{t("add_to_cart")}
|
||||
</>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={(e) => handleQuantityChange(e, -1)}
|
||||
disabled={isSyncing || localQuantity <= 1}
|
||||
className="rounded-[10px] h-9 w-9 border-2 border-gray-200 hover:border-gray-900 hover:bg-gray-50 transition-all duration-200 disabled:opacity-30"
|
||||
>
|
||||
<Minus className="h-5 w-5 text-gray-700" />
|
||||
</Button>
|
||||
|
||||
<div className="flex-1 text-center font-bold text-lg border-2 border-gray-200 rounded-[10px] h-9 flex items-center justify-center bg-white relative">
|
||||
{isSyncing && (
|
||||
<div className="absolute inset-0 bg-white/80 rounded-xl flex items-center justify-center">
|
||||
<div className="w-4 h-4 border-2 border-gray-300 border-t-gray-700 rounded-full animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
<span className={isSyncing ? "opacity-30" : ""}>
|
||||
{localQuantity}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={(e) => handleQuantityChange(e, 1)}
|
||||
disabled={isSyncing}
|
||||
className="rounded-[10px] h-9 w-9 border-2 border-gray-900 bg-gray-900 hover:bg-gray-800 transition-all duration-200 disabled:opacity-30"
|
||||
>
|
||||
<Plus className="h-5 w-5 text-white" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={(e) => handleQuantityChange(e, -1)}
|
||||
disabled={isSyncing || localQuantity <= 1}
|
||||
className="rounded-lg cursor-pointer h-9 w-9 shrink-0"
|
||||
>
|
||||
<Minus className="h-4 w-4" />
|
||||
</Button>
|
||||
<div className="flex-1 text-center font-semibold text-sm border rounded-lg h-9 flex items-center justify-center bg-white relative">
|
||||
{localQuantity}
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={(e) => handleQuantityChange(e, 1)}
|
||||
disabled={isSyncing}
|
||||
className="rounded-lg cursor-pointer h-9 w-9 shrink-0"
|
||||
>
|
||||
<Plus className="h-4 w-4 text-[#005bff]" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Stock Warning Modal */}
|
||||
<Dialog open={showStockModal} onOpenChange={setShowStockModal}>
|
||||
<DialogContent className="sm:max-w-md" onClick={(e) => e.stopPropagation()}>
|
||||
<DialogContent
|
||||
className="sm:max-w-md rounded-lg border-0 shadow-2xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<DialogHeader>
|
||||
<div className="flex items-center justify-center mb-4">
|
||||
<div className="rounded-full bg-orange-100 p-3">
|
||||
<AlertTriangle className="h-6 w-6 text-orange-600" />
|
||||
<div className="flex items-center justify-center mb-6">
|
||||
<div className="rounded-full bg-amber-100 p-3">
|
||||
<AlertTriangle className="h-8 w-8 text-amber-600" />
|
||||
</div>
|
||||
</div>
|
||||
<DialogTitle className="text-center text-xl">
|
||||
<DialogTitle className="text-center text-2xl font-bold text-gray-900">
|
||||
{t("stock_limit_title")}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-center text-base pt-2">
|
||||
<DialogDescription className="text-center text-base pt-4 text-gray-600 leading-relaxed">
|
||||
{t("stock_limit_message", {
|
||||
product: name,
|
||||
stock: availableStock,
|
||||
})}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex justify-center mt-4">
|
||||
<div className="flex justify-center mt-6">
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setShowStockModal(false);
|
||||
}}
|
||||
className="w-full rounded-lg cursor-pointer"
|
||||
className="w-full h-12 rounded-lg bg-gray-900 hover:bg-gray-800 text-white font-semibold shadow-md hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
{t("understood")}
|
||||
</Button>
|
||||
@@ -452,4 +500,4 @@ export default function ProductCard({
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user