all cart

2025-06-30 00:38:29 +03:00
parent a879e5e5e7
commit 215853e8c7
9 changed files with 310 additions and 136 deletions
--- a/src/components/CartList.tsx
+++ b/src/components/CartList.tsx
@ -3,7 +3,11 @@ import CartItem from "./CartItem";
 import { useCart } from "@/contexts/CartContext";
 import { useFavorites } from "@/contexts/FavoritesContext";

-const CartList: React.FC = () => {
+interface CartListProps {
+  isSummaryStep?: boolean;
+}
+
+const CartList: React.FC<CartListProps> = ({ isSummaryStep = false }) => {
  const { state, toggleSelect, updateComment, removeItem, selectAll, removeSelected, updateQuantity } = useCart();
  const { addToFavorites, removeFromFavorites, isFavorite, favorites } = useFavorites();
  const { items } = state;
@ -25,24 +29,18 @@ const CartList: React.FC = () => {
  const handleFavorite = (id: string) => {
    const item = items.find(item => item.id === id);
    if (!item) return;
-
    const isInFavorites = isFavorite(item.productId, item.offerKey, item.article, item.brand);
-
    if (isInFavorites) {
-      // Находим товар в избранном по правильному ID
      const favoriteItem = favorites.find((fav: any) => {
-        // Проверяем по разным комбинациям идентификаторов
        if (item.productId && fav.productId === item.productId) return true;
        if (item.offerKey && fav.offerKey === item.offerKey) return true;
        if (fav.article === item.article && fav.brand === item.brand) return true;
        return false;
      });
-      
      if (favoriteItem) {
        removeFromFavorites(favoriteItem.id);
      }
    } else {
-      // Добавляем в избранное
      addToFavorites({
        productId: item.productId,
        offerKey: item.offerKey,
@ -68,59 +66,73 @@ const CartList: React.FC = () => {
    updateQuantity(id, count);
  };

-  // Функция для форматирования цены
  const formatPrice = (price: number, currency: string = 'RUB') => {
    return `${price.toLocaleString('ru-RU')} ${currency === 'RUB' ? '₽' : currency}`;
  };

+  // На втором шаге показываем только выбранные товары
+  const displayItems = isSummaryStep ? items.filter(item => item.selected) : items;
+
  return (
    <div className="w-layout-vflex flex-block-48">
      <div className="w-layout-vflex product-list-cart">
-        <div className="w-layout-hflex multi-control">
-          <div className="w-layout-hflex select-all-block" onClick={handleSelectAll} style={{ cursor: 'pointer' }}>
-            <div
-              className={"div-block-7" + (allSelected ? " active" : "")}
-              style={{ marginRight: 8, cursor: 'pointer' }}
-            >
-              {allSelected && (
-                <svg width="14" height="10" viewBox="0 0 14 10" fill="none">
-                  <path d="M2 5.5L6 9L12 2" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-                </svg>
-              )}
+        {!isSummaryStep && (
+          <div className="w-layout-hflex multi-control">
+            <div className="w-layout-hflex select-all-block" onClick={handleSelectAll} style={{ cursor: 'pointer' }}>
+              <div
+                className={"div-block-7" + (allSelected ? " active" : "")}
+                style={{ marginRight: 8, cursor: 'pointer' }}
+              >
+                {allSelected && (
+                  <svg width="14" height="10" viewBox="0 0 14 10" fill="none">
+                    <path d="M2 5.5L6 9L12 2" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                  </svg>
+                )}
+              </div>
+              <div className="text-block-30">Выделить всё</div>
+            </div>
+            <div className="w-layout-hflex select-all-block" onClick={handleRemoveSelected} style={{ cursor: 'pointer' }}
+              onMouseEnter={e => {
+                const path = (e.currentTarget.querySelector('path'));
+                if (path) path.setAttribute('fill', '#ec1c24');
+              }}
+              onMouseLeave={e => {
+                const path = (e.currentTarget.querySelector('path'));
+                if (path) path.setAttribute('fill', '#D0D0D0');
+              }}
+            >
+              <div className="text-block-30">Удалить выбранные</div>
+              <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg" className="image-13">
+                <path
+                  d="M4.625 17.5C4.14375 17.5 3.73192 17.3261 3.3895 16.9782C3.04708 16.6304 2.87558 16.2117 2.875 15.7222V4.16667H2V2.38889H6.375V1.5H11.625V2.38889H16V4.16667H15.125V15.7222C15.125 16.2111 14.9538 16.6298 14.6114 16.9782C14.269 17.3267 13.8568 17.5006 13.375 17.5H4.625ZM6.375 13.9444H8.125V5.94444H6.375V13.9444ZM9.875 13.9444H11.625V5.94444H9.875V13.9444Z"
+                  fill="#D0D0D0"
+                  style={{ transition: 'fill 0.2s' }}
+                />
+              </svg>
            </div>
-            <div className="text-block-30">Выделить всё</div>
          </div>
-          <div className="w-layout-hflex select-all-block" onClick={handleRemoveSelected} style={{ cursor: 'pointer' }}
-            onMouseEnter={e => {
-              const path = (e.currentTarget.querySelector('path'));
-              if (path) path.setAttribute('fill', '#ec1c24');
-            }}
-            onMouseLeave={e => {
-              const path = (e.currentTarget.querySelector('path'));
-              if (path) path.setAttribute('fill', '#D0D0D0');
-            }}
-          >
-            <div className="text-block-30">Удалить выбранные</div>
-            <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg" className="image-13">
-              <path
-                d="M4.625 17.5C4.14375 17.5 3.73192 17.3261 3.3895 16.9782C3.04708 16.6304 2.87558 16.2117 2.875 15.7222V4.16667H2V2.38889H6.375V1.5H11.625V2.38889H16V4.16667H15.125V15.7222C15.125 16.2111 14.9538 16.6298 14.6114 16.9782C14.269 17.3267 13.8568 17.5006 13.375 17.5H4.625ZM6.375 13.9444H8.125V5.94444H6.375V13.9444ZM9.875 13.9444H11.625V5.94444H9.875V13.9444Z"
-                fill="#D0D0D0"
-                style={{ transition: 'fill 0.2s' }}
-              />
-            </svg>
-          </div>
-        </div>
-        {items.length === 0 ? (
+        )}
+        {displayItems.length === 0 ? (
          <div className="empty-cart-message" style={{ textAlign: 'center', padding: '2rem', color: '#666' }}>
            <p>Ваша корзина пуста</p>
            <p>Добавьте товары из каталога</p>
          </div>
        ) : (
-          items.map((item) => {
+          displayItems.map((item, idx) => {
            const isInFavorites = isFavorite(item.productId, item.offerKey, item.article, item.brand);
-            
            return (
-              <div className="div-block-21" key={item.id}>
+              <div
+                className={
+                  "div-block-21" +
+                  (isSummaryStep && idx === 0 ? " border-t-0" : "")
+                }
+                style={
+                  isSummaryStep && idx === 0
+                    ? { borderTop: 'none' }
+                    : undefined
+                }
+                key={item.id}
+              >
                <CartItem
                  name={item.name}
                  description={item.description}
@ -137,6 +149,8 @@ const CartList: React.FC = () => {
                  onComment={(comment) => handleComment(item.id, comment)}
                  onCountChange={(count) => handleCountChange(item.id, count)}
                  onRemove={() => handleRemove(item.id)}
+                  isSummaryStep={isSummaryStep}
+                  itemNumber={idx + 1}
                />
              </div>
            );