Обновлена логика добавления товаров в корзину во всех компонентах. Теперь добавление происходит асинхронно с обработкой успешных и ошибочных результатов. Добавлена информация о наличии товара при добавлении в корзину. Улучшены уведомления о добавлении товара с учетом статуса операции.

2025-07-06 02:21:33 +03:00
parent a8c8ae60bb
commit ac7b2de49f
10 changed files with 204 additions and 94 deletions
--- a/src/components/BestPriceCard.tsx
+++ b/src/components/BestPriceCard.tsx
@ -73,7 +73,7 @@ const BestPriceCard: React.FC<BestPriceCardProps> = ({
  };

  // Обработчик добавления в корзину
-  const handleAddToCart = (e: React.MouseEvent) => {
+  const handleAddToCart = async (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();

@ -88,14 +88,8 @@ const BestPriceCard: React.FC<BestPriceCardProps> = ({
      return;
    }

-    // Проверяем наличие
-    if (maxCount !== undefined && count > maxCount) {
-      toast.error(`Недостаточно товара в наличии. Доступно: ${maxCount} шт.`);
-      return;
-    }
-
    try {
-      addItem({
+      const result = await addItem({
        productId: offer.productId,
        offerKey: offer.offerKey,
        name: description,
@ -105,6 +99,7 @@ const BestPriceCard: React.FC<BestPriceCardProps> = ({
        price: numericPrice,
        currency: offer.currency || 'RUB',
        quantity: count,
+        stock: maxCount, // передаем информацию о наличии
        deliveryTime: delivery,
        warehouse: offer.warehouse || 'Склад',
        supplier: offer.supplier || (offer.isExternal ? 'AutoEuro' : 'Protek'),
@ -112,17 +107,22 @@ const BestPriceCard: React.FC<BestPriceCardProps> = ({
        image: offer.image,
      });

-      // Показываем тоастер об успешном добавлении
-      toast.success(
-        <div>
-          <div className="font-semibold" style={{ color: '#fff' }}>Товар добавлен в корзину!</div>
-          <div className="text-sm" style={{ color: '#fff', opacity: 0.9 }}>{`${offer.brand} ${offer.articleNumber} (${count} шт.)`}</div>
-        </div>,
-        {
-          duration: 3000,
-          icon: <CartIcon size={20} color="#fff" />,
-        }
-      );
+      if (result.success) {
+        // Показываем тоастер об успешном добавлении
+        toast.success(
+          <div>
+            <div className="font-semibold" style={{ color: '#fff' }}>Товар добавлен в корзину!</div>
+            <div className="text-sm" style={{ color: '#fff', opacity: 0.9 }}>{`${offer.brand} ${offer.articleNumber} (${count} шт.)`}</div>
+          </div>,
+          {
+            duration: 3000,
+            icon: <CartIcon size={20} color="#fff" />,
+          }
+        );
+      } else {
+        // Показываем ошибку
+        toast.error(result.error || 'Ошибка при добавлении товара в корзину');
+      }
    } catch (error) {
      console.error('Ошибка добавления в корзину:', error);
      toast.error('Ошибка добавления товара в корзину');
--- a/src/components/CartList.tsx
+++ b/src/components/CartList.tsx
@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import CartItem from "./CartItem";
 import { useCart } from "@/contexts/CartContext";
 import { useFavorites } from "@/contexts/FavoritesContext";
@ -8,7 +8,7 @@ interface CartListProps {
 }

 const CartList: React.FC<CartListProps> = ({ isSummaryStep = false }) => {
-  const { state, toggleSelect, updateComment, removeItem, selectAll, removeSelected, updateQuantity } = useCart();
+  const { state, toggleSelect, updateComment, removeItem, selectAll, removeSelected, updateQuantity, clearError } = useCart();
  const { addToFavorites, removeFromFavorites, isFavorite, favorites } = useFavorites();
  const { items } = state;

@ -73,8 +73,40 @@ const CartList: React.FC<CartListProps> = ({ isSummaryStep = false }) => {
  // На втором шаге показываем только выбранные товары
  const displayItems = isSummaryStep ? items.filter(item => item.selected) : items;

+  // Автоматически очищаем ошибки через 5 секунд
+  useEffect(() => {
+    if (state.error) {
+      const timer = setTimeout(() => {
+        clearError();
+      }, 5000);
+      return () => clearTimeout(timer);
+    }
+  }, [state.error, clearError]);
+
  return (
    <div className="w-layout-vflex flex-block-48">
+      {/* Отображение ошибок корзины */}
+      {state.error && (
+        <div className="alert alert-error mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center">
+              <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+              </svg>
+              <span>{state.error}</span>
+            </div>
+            <button 
+              onClick={clearError}
+              className="ml-2 text-red-500 hover:text-red-700"
+              aria-label="Закрыть уведомление"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      )}
      <div className="w-layout-vflex product-list-cart">
        {!isSummaryStep && (
          <div className="w-layout-hflex multi-control">
--- a/src/components/CartRecommended.tsx
+++ b/src/components/CartRecommended.tsx
@ -37,13 +37,14 @@ const RecommendedProductCard: React.FC<{
      }

      // Добавляем товар в корзину
-      addItem({
+      const result = await addItem({
        productId: String(item.artId) || undefined,
        name: item.name || `${item.brand} ${item.articleNumber}`,
        description: item.name || `${item.brand} ${item.articleNumber}`,
        price: numericPrice,
        currency: 'RUB',
        quantity: 1,
+        stock: undefined, // информация о наличии не доступна для рекомендуемых товаров
        image: displayImage,
        brand: item.brand,
        article: item.articleNumber,
@ -52,17 +53,22 @@ const RecommendedProductCard: React.FC<{
        isExternal: true
      });

-      // Показываем успешный тоастер
-      toast.success(
-        <div>
-          <div className="font-semibold" style={{ color: '#fff' }}>Товар добавлен в корзину!</div>
-          <div className="text-sm" style={{ color: '#fff', opacity: 0.9 }}>{item.name || `${item.brand} ${item.articleNumber}`}</div>
-        </div>,
-        {
-          duration: 3000,
-          icon: <CartIcon size={20} color="#fff" />,
-        }
-      );
+      if (result.success) {
+        // Показываем успешный тоастер
+        toast.success(
+          <div>
+            <div className="font-semibold" style={{ color: '#fff' }}>Товар добавлен в корзину!</div>
+            <div className="text-sm" style={{ color: '#fff', opacity: 0.9 }}>{item.name || `${item.brand} ${item.articleNumber}`}</div>
+          </div>,
+          {
+            duration: 3000,
+            icon: <CartIcon size={20} color="#fff" />,
+          }
+        );
+      } else {
+        // Показываем ошибку
+        toast.error(result.error || 'Ошибка при добавлении товара в корзину');
+      }
    } catch (error) {
      console.error('Ошибка добавления в корзину:', error);
      toast.error('Ошибка при добавлении товара в корзину');
--- a/src/components/CoreProductCard.tsx
+++ b/src/components/CoreProductCard.tsx
@ -123,19 +123,13 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
    });
  };

-  const handleAddToCart = (offer: CoreProductCardOffer, index: number) => {
+  const handleAddToCart = async (offer: CoreProductCardOffer, index: number) => {
    const quantity = quantities[index] || 1;
    const availableStock = parseStock(offer.pcs);
    
-    // Проверяем наличие
-    if (quantity > availableStock) {
-      toast.error(`Недостаточно товара в наличии. Доступно: ${availableStock} шт.`);
-      return;
-    }
-
    const numericPrice = parsePrice(offer.price);

-    addItem({
+    const result = await addItem({
      productId: offer.productId,
      offerKey: offer.offerKey,
      name: name,
@ -145,6 +139,7 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
      price: numericPrice,
      currency: offer.currency || 'RUB',
      quantity: quantity,
+      stock: availableStock, // передаем информацию о наличии
      deliveryTime: parseDeliveryTime(offer.days),
      warehouse: offer.warehouse || 'Склад',
      supplier: offer.supplier || (offer.isExternal ? 'AutoEuro' : 'Protek'),
@ -152,17 +147,22 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
      image: image,
    });

-    // Показываем тоастер вместо alert
-    toast.success(
-      <div>
-        <div className="font-semibold" style={{ color: '#fff' }}>Товар добавлен в корзину!</div>
-        <div className="text-sm" style={{ color: '#fff', opacity: 0.9 }}>{`${brand} ${article} (${quantity} шт.)`}</div>
-      </div>,
-      {
-        duration: 3000,
-        icon: <CartIcon size={20} color="#fff" />,
-      }
-    );
+    if (result.success) {
+      // Показываем тоастер вместо alert
+      toast.success(
+        <div>
+          <div className="font-semibold" style={{ color: '#fff' }}>Товар добавлен в корзину!</div>
+          <div className="text-sm" style={{ color: '#fff', opacity: 0.9 }}>{`${brand} ${article} (${quantity} шт.)`}</div>
+        </div>,
+        {
+          duration: 3000,
+          icon: <CartIcon size={20} color="#fff" />,
+        }
+      );
+    } else {
+      // Показываем ошибку
+      toast.error(result.error || 'Ошибка при добавлении товара в корзину');
+    }
  };

  // Обработчик клика по сердечку
--- a/src/components/ProductListCard.tsx
+++ b/src/components/ProductListCard.tsx
@ -59,19 +59,13 @@ const ProductListCard: React.FC<ProductListCardProps> = ({
    return match ? parseInt(match[0]) : 0;
  };

-  const handleAddToCart = () => {
+  const handleAddToCart = async () => {
    const availableStock = parseStock(stock);
    
-    // Проверяем наличие
-    if (count > availableStock) {
-      alert(`Недостаточно товара в наличии. Доступно: ${availableStock} шт.`);
-      return;
-    }
-
    const numericPrice = parsePrice(price);
    const numericOldPrice = oldPrice ? parsePrice(oldPrice) : undefined;

-    addItem({
+    const result = await addItem({
      productId: productId,
      offerKey: offerKey,
      name: title,
@ -81,6 +75,7 @@ const ProductListCard: React.FC<ProductListCardProps> = ({
      originalPrice: numericOldPrice,
      currency: currency,
      quantity: count,
+      stock: availableStock, // передаем информацию о наличии
      deliveryTime: deliveryTime || delivery,
      warehouse: warehouse || address,
      supplier: supplier,
@ -88,8 +83,13 @@ const ProductListCard: React.FC<ProductListCardProps> = ({
      image: image,
    });

-    // Показываем уведомление о добавлении
-    alert(`Товар "${title}" добавлен в корзину (${count} шт.)`);
+    if (result.success) {
+      // Показываем уведомление о добавлении
+      alert(`Товар "${title}" добавлен в корзину (${count} шт.)`);
+    } else {
+      // Показываем ошибку
+      alert(result.error || 'Ошибка при добавлении товара в корзину');
+    }
  };

  return (
--- a/src/components/card/ProductBuyBlock.tsx
+++ b/src/components/card/ProductBuyBlock.tsx
@ -38,7 +38,7 @@ const ProductBuyBlock = ({ offer }: ProductBuyBlockProps) => {
      }

      // Добавляем товар в корзину
-      addItem({
+      const result = await addItem({
        productId: offer.id ? String(offer.id) : undefined,
        offerKey: offer.offerKey || undefined,
        name: offer.name || `${offer.brand} ${offer.articleNumber}`,
@ -46,6 +46,7 @@ const ProductBuyBlock = ({ offer }: ProductBuyBlockProps) => {
        price: offer.price,
        currency: 'RUB',
        quantity: quantity,
+        stock: offer.quantity, // передаем информацию о наличии
        image: offer.image || undefined,
        brand: offer.brand,
        article: offer.articleNumber,
@ -54,17 +55,22 @@ const ProductBuyBlock = ({ offer }: ProductBuyBlockProps) => {
        isExternal: offer.type === 'external'
      });

-      // Показываем успешный тоастер
-      toast.success(
-        <div>
-          <div className="font-semibold" style={{ color: '#fff' }}>Товар добавлен в корзину!</div>
-          <div className="text-sm" style={{ color: '#fff', opacity: 0.9 }}>{offer.name || `${offer.brand} ${offer.articleNumber}`}</div>
-        </div>,
-        {
-          duration: 3000,
-          icon: <CartIcon size={20} color="#fff" />,
-        }
-      );
+      if (result.success) {
+        // Показываем успешный тоастер
+        toast.success(
+          <div>
+            <div className="font-semibold" style={{ color: '#fff' }}>Товар добавлен в корзину!</div>
+            <div className="text-sm" style={{ color: '#fff', opacity: 0.9 }}>{offer.name || `${offer.brand} ${offer.articleNumber}`}</div>
+          </div>,
+          {
+            duration: 3000,
+            icon: <CartIcon size={20} color="#fff" />,
+          }
+        );
+      } else {
+        // Показываем ошибку
+        toast.error(result.error || 'Ошибка при добавлении товара в корзину');
+      }
    } catch (error) {
      console.error('Ошибка добавления в корзину:', error);
      toast.error('Ошибка при добавлении товара в корзину');