Contect with order api

2025-12-09 23:01:18 +05:00
parent d6c163dd06
commit 14f9bd400e
18 changed files with 910 additions and 624 deletions
--- a/features/home/components/ProductCard.tsx
+++ b/features/home/components/ProductCard.tsx
@@ -1,7 +1,7 @@
 "use client";

-import { useState, MouseEvent, useEffect, useRef } from "react";
-import { Heart } from "lucide-react";
+import { useState, MouseEvent, useEffect, useRef, useCallback } from "react";
+import { Heart, ShoppingCart, Loader2, Plus, Minus } from "lucide-react";
 import { toast } from "sonner";
 import {
  Carousel,
@@ -13,8 +13,14 @@ import {
 } from "@/components/ui/carousel";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { useToggleFavorite, useIsFavorite } from "@/lib/hooks";
-
+import {
+  useAddToCart,
+  useUpdateCartItemQuantity,
+  useCart,
+} from "@/features/cart/hooks/useCart";
+import { useTranslations } from "next-intl";
 type ProductCardProps = {
  id: number;
  name: string;
@@ -27,6 +33,8 @@ type ProductCardProps = {
  price_color?: string;
  height?: number;
  width?: number;
+  button?: boolean;
+  stock?: number;
 };

 export default function ProductCard({
@@ -41,19 +49,35 @@ export default function ProductCard({
  price_color = "#005bff",
  height = 360,
  width = 280,
+  button = false,
+  stock,
 }: ProductCardProps) {
  const { isFavorite, isLoading: isFavoriteLoading } = useIsFavorite(id);
-  const { mutate: toggleFavorite, isPending } = useToggleFavorite();
+  const { mutate: toggleFavorite, isPending: isFavoriteToggling } =
+    useToggleFavorite();
+  const addToCartMutation = useAddToCart();
+  const updateCartMutation = useUpdateCartItemQuantity();
+  const { data: cartData, refetch: refetchCart } = useCart();

  const [api, setApi] = useState<CarouselApi>();
  const [current, setCurrent] = useState(0);
+  const [localQuantity, setLocalQuantity] = useState(1);
+  const [isSyncing, setIsSyncing] = useState(false);
+
  const autoplayRef = useRef<NodeJS.Timeout | null>(null);
+  const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
+  const isRequestInFlightRef = useRef(false);
+  const pendingQuantityRef = useRef<number | null>(null);

  const hasMultipleImages = images.length > 1;

+  const cartItem = cartData?.data?.find((item: any) => item.product?.id === id);
+  const isInCart = !!cartItem;
+  const isOutOfStock = stock !== undefined && stock === 0;
+  const availableStock = stock || 999;
+  const t = useTranslations();
  useEffect(() => {
    if (!api) return;
-
    setCurrent(api.selectedScrollSnap());
    api.on("select", () => {
      setCurrent(api.selectedScrollSnap());
@@ -73,37 +97,158 @@ export default function ProductCard({
      }, 3000);
    };

-    const stopAutoplay = () => {
+    startAutoplay();
+    return () => {
      if (autoplayRef.current) {
        clearInterval(autoplayRef.current);
-        autoplayRef.current = null;
      }
    };
-
-    startAutoplay();
-    return () => stopAutoplay();
  }, [api, hasMultipleImages]);

-  const handleFavorite = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
+  // Sync localQuantity with cart
+  useEffect(() => {
+    if (cartItem?.product_quantity) {
+      setLocalQuantity(cartItem.product_quantity);
+    } else {
+      setLocalQuantity(1);
+    }
+  }, [cartItem]);

-    toggleFavorite(
-      { productId: id, isFavorite },
-      {
-        onSuccess: (data) => {
-          toast.success(
-            data.wasAdded
-              ? "Товар добавлен в избранное"
-              : "Товар удален из избранного"
-          );
-        },
-        onError: () => {
-          toast.error("Ошибка. Попробуйте снова");
-        },
+  const syncToServer = useCallback(
+    async (quantity: number) => {
+      if (isRequestInFlightRef.current) {
+        pendingQuantityRef.current = quantity;
+        return;
      }
-    );
-  };
+
+      isRequestInFlightRef.current = true;
+      setIsSyncing(true);
+
+      try {
+        await updateCartMutation.mutateAsync({
+          productId: id,
+          quantity: quantity,
+        });
+
+        isRequestInFlightRef.current = false;
+        setIsSyncing(false);
+        await refetchCart();
+
+        if (pendingQuantityRef.current !== null) {
+          const nextQuantity = pendingQuantityRef.current;
+          pendingQuantityRef.current = null;
+          setTimeout(() => syncToServer(nextQuantity), 100);
+        }
+      } catch (error) {
+        console.error("Sync failed:", error);
+        isRequestInFlightRef.current = false;
+        setIsSyncing(false);
+        setLocalQuantity(cartItem?.product_quantity || 1);
+      }
+    },
+    [id, updateCartMutation, cartItem, refetchCart]
+  );
+
+  // Debounced sync
+  useEffect(() => {
+    if (!isInCart) return;
+
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    if (localQuantity === (cartItem?.product_quantity || 1)) {
+      return;
+    }
+
+    debounceTimerRef.current = setTimeout(() => {
+      syncToServer(localQuantity);
+    }, 800);
+
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, [localQuantity, isInCart, cartItem, syncToServer]);
+
+  const handleFavorite = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      toggleFavorite(
+        { productId: id, isFavorite },
+        {
+          onSuccess: (data) => {
+            toast.success(
+              data.wasAdded ? "Added to favorites" : "Removed from favorites"
+            );
+          },
+          onError: () => {
+            toast.error("Error. Try again");
+          },
+        }
+      );
+    },
+    [id, isFavorite, toggleFavorite]
+  );
+
+  const handleAddToCart = useCallback(
+    async (e: MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      setIsSyncing(true);
+
+      try {
+        await addToCartMutation.mutateAsync({
+          productId: id,
+          quantity: localQuantity,
+        });
+
+        await refetchCart();
+        setIsSyncing(false);
+
+        toast.success("Added to cart", {
+          description: `${name} has been added to your cart`,
+        });
+      } catch (error) {
+        console.error("Add to cart error:", error);
+        setIsSyncing(false);
+        toast.error("Failed to add to cart");
+      }
+    },
+    [id, name, localQuantity, addToCartMutation, refetchCart]
+  );
+
+  const handleQuantityIncrease = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (localQuantity >= availableStock) {
+        toast.error("Stock limit reached", {
+          description: `Only ${availableStock} items available`,
+        });
+        return;
+      }
+
+      setLocalQuantity((prev) => prev + 1);
+    },
+    [localQuantity, availableStock]
+  );
+
+  const handleQuantityDecrease = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (localQuantity <= 1) return;
+      setLocalQuantity((prev) => prev - 1);
+    },
+    [localQuantity]
+  );

  const handleCardClick = (e: MouseEvent<HTMLAnchorElement>) => {
    const target = e.target as HTMLElement;
@@ -172,10 +317,10 @@ export default function ProductCard({
            )}
          </Carousel>

-          {/* Favorite button - show skeleton while loading favorites */}
+          {/* Favorite button */}
          <button
            onClick={handleFavorite}
-            disabled={isPending || isFavoriteLoading}
+            disabled={isFavoriteToggling || isFavoriteLoading}
            className="absolute top-3 right-3 z-10 rounded-full bg-white/80 p-2 hover:bg-white transition-all disabled:opacity-50"
          >
            {isFavoriteLoading ? (
@@ -215,6 +360,15 @@ 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">
+                Out of Stock
+              </Badge>
+            </div>
+          )}
        </div>

        <CardContent className="p-0 space-y-1">
@@ -228,6 +382,59 @@ export default function ProductCard({
            {name}
          </p>
        </CardContent>
+
+        {/* Cart controls - show on hover if button enabled */}
+        {button && !isOutOfStock && (
+          <div className=" px-1">
+            {!isInCart ? (
+              <Button
+                onClick={handleAddToCart}
+                disabled={isSyncing}
+                className="w-full rounded-lg gap-2 bg-[#005bff] hover:bg-[#0041c4] cursor-pointer"
+                size="sm"
+              >
+                {isSyncing ? (
+                  <>
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    Adding...
+                  </>
+                ) : (
+                  <>
+                    <ShoppingCart className="h-4 w-4" />
+                    {t("checkout")}
+                  </>
+                )}
+              </Button>
+            ) : (
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={handleQuantityDecrease}
+                  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}
+                  {isSyncing && (
+                    <Loader2 className="h-3 w-3 animate-spin absolute -top-1 -right-1 text-blue-500" />
+                  )}
+                </div>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={handleQuantityIncrease}
+                  disabled={localQuantity >= availableStock || isSyncing}
+                  className="rounded-lg cursor-pointer h-9 w-9 shrink-0"
+                >
+                  <Plus className="h-4 w-4 text-[#005bff]" />
+                </Button>
+              </div>
+            )}
+          </div>
+        )}
      </Card>
    </a>
  );
--- a/features/home/components/ProductGrid.tsx
+++ b/features/home/components/ProductGrid.tsx
@@ -101,6 +101,7 @@ export default function CollectionSection({ collection, locale }: Props) {
              price_color="#0059ff"
              height={360}
              width={250}
+              
            />
          );
        })}