417 lines
17 KiB
TypeScript
417 lines
17 KiB
TypeScript
import React, { useState } from "react";
|
||
import { useCart } from "@/contexts/CartContext";
|
||
import { useFavorites } from "@/contexts/FavoritesContext";
|
||
import toast from "react-hot-toast";
|
||
|
||
const INITIAL_OFFERS_LIMIT = 5;
|
||
|
||
interface CoreProductCardOffer {
|
||
id?: string;
|
||
productId?: string;
|
||
offerKey?: string;
|
||
pcs: string;
|
||
days: string;
|
||
recommended?: boolean;
|
||
price: string;
|
||
count: string;
|
||
isExternal?: boolean;
|
||
currency?: string;
|
||
warehouse?: string;
|
||
supplier?: string;
|
||
deliveryTime?: number;
|
||
}
|
||
|
||
interface CoreProductCardProps {
|
||
brand: string;
|
||
article: string;
|
||
name: string;
|
||
image?: string;
|
||
offers: CoreProductCardOffer[];
|
||
showMoreText?: string;
|
||
isAnalog?: boolean;
|
||
isLoadingOffers?: boolean;
|
||
onLoadOffers?: () => void;
|
||
partsIndexPowered?: boolean;
|
||
}
|
||
|
||
const CoreProductCard: React.FC<CoreProductCardProps> = ({
|
||
brand,
|
||
article,
|
||
name,
|
||
image,
|
||
offers,
|
||
showMoreText,
|
||
isAnalog = false,
|
||
isLoadingOffers = false,
|
||
onLoadOffers,
|
||
partsIndexPowered = false
|
||
}) => {
|
||
const { addItem } = useCart();
|
||
const { addToFavorites, removeFromFavorites, isFavorite, favorites } = useFavorites();
|
||
const [visibleOffersCount, setVisibleOffersCount] = useState(INITIAL_OFFERS_LIMIT);
|
||
const [quantities, setQuantities] = useState<{ [key: number]: number }>(
|
||
offers.reduce((acc, _, index) => ({ ...acc, [index]: 1 }), {})
|
||
);
|
||
const [quantityErrors, setQuantityErrors] = useState<{ [key: number]: string }>({});
|
||
|
||
const displayedOffers = offers.slice(0, visibleOffersCount);
|
||
const hasMoreOffers = visibleOffersCount < offers.length;
|
||
|
||
// Проверяем, есть ли товар в избранном
|
||
const isItemFavorite = isFavorite(
|
||
offers[0]?.productId,
|
||
offers[0]?.offerKey,
|
||
article,
|
||
brand
|
||
);
|
||
|
||
// Функция для парсинга цены из строки
|
||
const parsePrice = (priceStr: string): number => {
|
||
const cleanPrice = priceStr.replace(/[^\d.,]/g, '').replace(',', '.');
|
||
return parseFloat(cleanPrice) || 0;
|
||
};
|
||
|
||
// Функция для парсинга времени доставки
|
||
const parseDeliveryTime = (daysStr: string): string => {
|
||
const match = daysStr.match(/\d+/);
|
||
return match ? `${match[0]} дней` : daysStr;
|
||
};
|
||
|
||
// Функция для парсинга количества в наличии
|
||
const parseStock = (stockStr: string): number => {
|
||
const match = stockStr.match(/\d+/);
|
||
return match ? parseInt(match[0]) : 0;
|
||
};
|
||
|
||
const handleQuantityInput = (index: number, value: string) => {
|
||
const offer = offers[index];
|
||
const availableStock = parseStock(offer.pcs);
|
||
let num = parseInt(value, 10);
|
||
if (isNaN(num) || num < 1) num = 1;
|
||
if (num > availableStock) {
|
||
toast.error(`Максимум ${availableStock} шт.`);
|
||
return;
|
||
}
|
||
setQuantities(prev => ({ ...prev, [index]: num }));
|
||
};
|
||
|
||
const handleAddToCart = (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({
|
||
productId: offer.productId,
|
||
offerKey: offer.offerKey,
|
||
name: name,
|
||
description: `${brand} ${article} - ${name}`,
|
||
brand: brand,
|
||
article: article,
|
||
price: numericPrice,
|
||
currency: offer.currency || 'RUB',
|
||
quantity: quantity,
|
||
deliveryTime: parseDeliveryTime(offer.days),
|
||
warehouse: offer.warehouse || 'Склад',
|
||
supplier: offer.supplier || (offer.isExternal ? 'AutoEuro' : 'Protek'),
|
||
isExternal: offer.isExternal || false,
|
||
image: image,
|
||
});
|
||
|
||
// Показываем тоастер вместо alert
|
||
toast.success(
|
||
<div>
|
||
<div className="font-semibold">Товар добавлен в корзину!</div>
|
||
<div className="text-sm text-gray-600">{`${brand} ${article} (${quantity} шт.)`}</div>
|
||
</div>,
|
||
{
|
||
duration: 3000,
|
||
icon: '🛒',
|
||
}
|
||
);
|
||
};
|
||
|
||
// Обработчик клика по сердечку
|
||
const handleFavoriteClick = (e: React.MouseEvent) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
if (isItemFavorite) {
|
||
// Находим товар в избранном и удаляем по правильному ID
|
||
const favoriteItem = favorites.find((item: any) => {
|
||
// Проверяем по разным комбинациям идентификаторов
|
||
if (offers[0]?.productId && item.productId === offers[0].productId) return true;
|
||
if (offers[0]?.offerKey && item.offerKey === offers[0].offerKey) return true;
|
||
if (item.article === article && item.brand === brand) return true;
|
||
return false;
|
||
});
|
||
|
||
if (favoriteItem) {
|
||
removeFromFavorites(favoriteItem.id);
|
||
}
|
||
} else {
|
||
// Добавляем в избранное
|
||
const bestOffer = offers[0]; // Берем первое предложение как лучшее
|
||
const numericPrice = bestOffer ? parsePrice(bestOffer.price) : 0;
|
||
|
||
addToFavorites({
|
||
productId: bestOffer?.productId,
|
||
offerKey: bestOffer?.offerKey,
|
||
name: name,
|
||
brand: brand,
|
||
article: article,
|
||
price: numericPrice,
|
||
currency: bestOffer?.currency || 'RUB',
|
||
image: image
|
||
});
|
||
}
|
||
};
|
||
|
||
if (isLoadingOffers) {
|
||
return (
|
||
<div className="w-layout-hflex core-product-search-s1">
|
||
<div className="w-layout-vflex core-product-s1">
|
||
<div className="w-layout-vflex flex-block-47">
|
||
<div className="div-block-19">
|
||
<img src="/images/info.svg" loading="lazy" alt="info" className="image-9" />
|
||
</div>
|
||
<div className="w-layout-vflex flex-block-50">
|
||
<div className="w-layout-hflex flex-block-79">
|
||
<h3 className="heading-10 name">{brand}</h3>
|
||
<h3 className="heading-10">{article}</h3>
|
||
</div>
|
||
<div className="text-block-21">{name}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="w-layout-vflex flex-block-48-copy items-center justify-center">
|
||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-red-600"></div>
|
||
<p className="mt-2 text-gray-500">Загрузка предложений...</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (!offers || offers.length === 0) {
|
||
return (
|
||
<div className="w-layout-hflex core-product-search-s1">
|
||
<div className="w-layout-vflex core-product-s1">
|
||
<div className="w-layout-vflex flex-block-47">
|
||
<div className="div-block-19">
|
||
<img src="/images/info.svg" loading="lazy" alt="info" className="image-9" />
|
||
</div>
|
||
<div className="w-layout-vflex flex-block-50">
|
||
<div className="w-layout-hflex flex-block-79">
|
||
<h3 className="heading-10 name">{brand}</h3>
|
||
<h3 className="heading-10">{article}</h3>
|
||
</div>
|
||
<div className="text-block-21">{name}</div>
|
||
</div>
|
||
</div>
|
||
{image && (
|
||
<div className="div-block-20">
|
||
<img src={image} loading="lazy" alt={name} className="image-10" />
|
||
{partsIndexPowered && (
|
||
<div className="text-xs text-gray-500 mt-1 text-center">
|
||
powered by <span className="font-semibold text-blue-600">Parts Index</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="w-layout-vflex flex-block-48-copy items-center justify-center">
|
||
{onLoadOffers ? (
|
||
<button
|
||
onClick={onLoadOffers}
|
||
className="bg-blue-600 text-white font-bold py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors"
|
||
>
|
||
Загрузить предложения
|
||
</button>
|
||
) : (
|
||
<p className="text-gray-500">Предложений не найдено.</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<div className="w-layout-hflex core-product-search-s1">
|
||
<div className="w-layout-vflex core-product-s1">
|
||
<div className="w-layout-vflex flex-block-47">
|
||
<div className="div-block-19">
|
||
<img src="/images/info.svg" loading="lazy" alt="info" className="image-9" />
|
||
</div>
|
||
<div className="w-layout-vflex flex-block-50">
|
||
<div className="w-layout-hflex flex-block-79">
|
||
<h3 className="heading-10 name">{brand}</h3>
|
||
<h3 className="heading-10">{article}</h3>
|
||
<div
|
||
className="favorite-icon w-embed"
|
||
onClick={handleFavoriteClick}
|
||
style={{ cursor: 'pointer', marginLeft: '10px', color: isItemFavorite ? '#e53935' : undefined }}
|
||
>
|
||
<svg width="24" height="24" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M15 25L13.405 23.5613C7.74 18.4714 4 15.1035 4 10.9946C4 7.6267 6.662 5 10.05 5C11.964 5 13.801 5.88283 15 7.26703C16.199 5.88283 18.036 5 19.95 5C23.338 5 26 7.6267 26 10.9946C26 15.1035 22.26 18.4714 16.595 23.5613L15 25Z"
|
||
fill={isItemFavorite ? "#e53935" : "currentColor"}
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div className="text-block-21">{name}</div>
|
||
</div>
|
||
</div>
|
||
{image && (
|
||
<div className="div-block-20">
|
||
<img src={image} loading="lazy" alt={name} className="image-10" />
|
||
{partsIndexPowered && (
|
||
<div className="text-xs text-gray-500 mt-1 text-center">
|
||
powered by <span className="font-semibold text-blue-600">Parts Index</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="w-layout-vflex flex-block-48-copy">
|
||
<div className="w-layout-hflex sort-list-s1">
|
||
<div className="w-layout-hflex flex-block-49">
|
||
<div className="sort-item first">Наличие</div>
|
||
<div className="sort-item">Доставка</div>
|
||
</div>
|
||
<div className="sort-item price">Цена</div>
|
||
</div>
|
||
<div className="w-layout-vflex product-list-search-s1">
|
||
{displayedOffers.map((offer, idx) => {
|
||
const isLast = idx === displayedOffers.length - 1;
|
||
return (
|
||
<div
|
||
className="w-layout-hflex product-item-search-s1"
|
||
key={idx}
|
||
style={isLast ? { borderBottom: 'none' } : undefined}
|
||
>
|
||
<div className="w-layout-hflex flex-block-81">
|
||
<div className="w-layout-hflex info-block-search-s1">
|
||
<div className="pcs-search-s1">{offer.pcs}</div>
|
||
<div className="pcs-search">{offer.days}</div>
|
||
</div>
|
||
<div className="w-layout-hflex info-block-product-card-search-s1">
|
||
{offer.recommended && (
|
||
<>
|
||
<div className="w-layout-hflex item-recommend">
|
||
<img src="/images/ri_refund-fill.svg" loading="lazy" alt="" />
|
||
</div>
|
||
<div className="text-block-25-s1">Рекомендуем</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
<div className="price-s1">{offer.price}</div>
|
||
</div>
|
||
<div className="w-layout-hflex add-to-cart-block-s1">
|
||
<div className="w-layout-hflex flex-block-82">
|
||
<div className="w-layout-hflex pcs-cart-s1">
|
||
<button
|
||
type="button"
|
||
className="minus-plus"
|
||
onClick={() => handleQuantityInput(idx, ((quantities[idx] || 1) - 1).toString())}
|
||
style={{ cursor: 'pointer' }}
|
||
aria-label="Уменьшить количество"
|
||
>
|
||
<div className="pluspcs w-embed">
|
||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M6 10.5V9.5H14V10.5H6Z" fill="currentColor" />
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
<div className="input-pcs">
|
||
<input
|
||
type="number"
|
||
min={1}
|
||
max={parseStock(offer.pcs)}
|
||
value={quantities[idx] || 1}
|
||
onChange={e => handleQuantityInput(idx, e.target.value)}
|
||
className="text-block-26 w-full text-center outline-none"
|
||
aria-label="Количество"
|
||
/>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="minus-plus"
|
||
onClick={() => handleQuantityInput(idx, ((quantities[idx] || 1) + 1).toString())}
|
||
style={{ cursor: 'pointer' }}
|
||
aria-label="Увеличить количество"
|
||
>
|
||
<div className="pluspcs w-embed">
|
||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M6 10.5V9.5H14V10.5H6ZM9.5 6H10.5V14H9.5V6Z" fill="currentColor" />
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => handleAddToCart(offer, idx)}
|
||
className="button-icon w-inline-block"
|
||
style={{ cursor: 'pointer' }}
|
||
aria-label="Добавить в корзину"
|
||
>
|
||
<div className="div-block-26">
|
||
<img loading="lazy" src="/images/cart_icon.svg" alt="В корзину" className="image-11" />
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
{hasMoreOffers || visibleOffersCount > INITIAL_OFFERS_LIMIT ? (
|
||
<div
|
||
className="w-layout-hflex show-more-search"
|
||
onClick={() => {
|
||
if (hasMoreOffers) {
|
||
setVisibleOffersCount(prev => Math.min(prev + 10, offers.length));
|
||
} else {
|
||
setVisibleOffersCount(INITIAL_OFFERS_LIMIT);
|
||
}
|
||
}}
|
||
style={{ cursor: 'pointer' }}
|
||
tabIndex={0}
|
||
role="button"
|
||
aria-label={hasMoreOffers ? `Еще ${offers.length - visibleOffersCount} предложений` : 'Скрыть предложения'}
|
||
onKeyDown={e => {
|
||
if (e.key === 'Enter' || e.key === ' ') {
|
||
if (hasMoreOffers) {
|
||
setVisibleOffersCount(prev => Math.min(prev + 10, offers.length));
|
||
} else {
|
||
setVisibleOffersCount(INITIAL_OFFERS_LIMIT);
|
||
}
|
||
}
|
||
}}
|
||
>
|
||
<div className="text-block-27">
|
||
{hasMoreOffers ? `Еще ${offers.length - visibleOffersCount} предложений` : 'Скрыть'}
|
||
</div>
|
||
<img
|
||
src="/images/arrow_drop_down.svg"
|
||
loading="lazy"
|
||
alt=""
|
||
className={`transition-transform duration-200 ${!hasMoreOffers ? 'rotate-180' : ''}`}
|
||
/>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default CoreProductCard;
|