parvki
This commit is contained in:
54CHA
@ -10,6 +10,7 @@ services:
|
|||||||
NEXT_PUBLIC_UPLOAD_URL: ${NEXT_PUBLIC_UPLOAD_URL:-http://localhost:4000/upload}
|
NEXT_PUBLIC_UPLOAD_URL: ${NEXT_PUBLIC_UPLOAD_URL:-http://localhost:4000/upload}
|
||||||
NEXT_PUBLIC_MAINTENANCE_MODE: ${NEXT_PUBLIC_MAINTENANCE_MODE:-false}
|
NEXT_PUBLIC_MAINTENANCE_MODE: ${NEXT_PUBLIC_MAINTENANCE_MODE:-false}
|
||||||
NEXT_PUBLIC_YANDEX_MAPS_API_KEY: ${NEXT_PUBLIC_YANDEX_MAPS_API_KEY}
|
NEXT_PUBLIC_YANDEX_MAPS_API_KEY: ${NEXT_PUBLIC_YANDEX_MAPS_API_KEY}
|
||||||
|
PARTSAPI_URL: ${PARTSAPI_URL:-https://api.parts-index.com}
|
||||||
FRONTEND_PORT: ${FRONTEND_PORT:-3000}
|
FRONTEND_PORT: ${FRONTEND_PORT:-3000}
|
||||||
NODE_ENV: ${NODE_ENV:-production}
|
NODE_ENV: ${NODE_ENV:-production}
|
||||||
container_name: protekauto-frontend
|
container_name: protekauto-frontend
|
||||||
@ -26,7 +27,8 @@ services:
|
|||||||
- NEXT_PUBLIC_CMS_GRAPHQL_URL=${NEXT_PUBLIC_CMS_GRAPHQL_URL:-http://localhost:4000/graphql}
|
- NEXT_PUBLIC_CMS_GRAPHQL_URL=${NEXT_PUBLIC_CMS_GRAPHQL_URL:-http://localhost:4000/graphql}
|
||||||
- NEXT_PUBLIC_UPLOAD_URL=${NEXT_PUBLIC_UPLOAD_URL:-http://localhost:4000/upload}
|
- NEXT_PUBLIC_UPLOAD_URL=${NEXT_PUBLIC_UPLOAD_URL:-http://localhost:4000/upload}
|
||||||
- NEXT_PUBLIC_MAINTENANCE_MODE=${NEXT_PUBLIC_MAINTENANCE_MODE:-false}
|
- NEXT_PUBLIC_MAINTENANCE_MODE=${NEXT_PUBLIC_MAINTENANCE_MODE:-false}
|
||||||
|
- PARTSAPI_URL=${PARTSAPI_URL:-https://api.parts-index.com}
|
||||||
|
|
||||||
# Yandex Maps API
|
# Yandex Maps API
|
||||||
- NEXT_PUBLIC_YANDEX_MAPS_API_KEY=${NEXT_PUBLIC_YANDEX_MAPS_API_KEY}
|
- NEXT_PUBLIC_YANDEX_MAPS_API_KEY=${NEXT_PUBLIC_YANDEX_MAPS_API_KEY}
|
||||||
|
|
||||||
|
|||||||
@ -72,6 +72,10 @@ const BestPriceCard: React.FC<BestPriceCardProps> = ({
|
|||||||
return parseFloat(cleanPrice) || 0;
|
return parseFloat(cleanPrice) || 0;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Note: BestPriceCard doesn't receive isInCart flags from backend
|
||||||
|
// Since it's a summary component, we'll remove cart state checking for now
|
||||||
|
const inCart = false; // Disabled for BestPriceCard
|
||||||
|
|
||||||
// Обработчик добавления в корзину
|
// Обработчик добавления в корзину
|
||||||
const handleAddToCart = async (e: React.MouseEvent) => {
|
const handleAddToCart = async (e: React.MouseEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@ -108,10 +112,14 @@ const BestPriceCard: React.FC<BestPriceCardProps> = ({
|
|||||||
});
|
});
|
||||||
|
|
||||||
if (result.success) {
|
if (result.success) {
|
||||||
// Показываем тоастер об успешном добавлении
|
// Показываем тоастер с разным текстом в зависимости от того, был ли товар уже в корзине
|
||||||
|
const toastMessage = inCart
|
||||||
|
? `Количество увеличено (+${count} шт.)`
|
||||||
|
: 'Товар добавлен в корзину!';
|
||||||
|
|
||||||
toast.success(
|
toast.success(
|
||||||
<div>
|
<div>
|
||||||
<div className="font-semibold" style={{ color: '#fff' }}>Товар добавлен в корзину!</div>
|
<div className="font-semibold" style={{ color: '#fff' }}>{toastMessage}</div>
|
||||||
<div className="text-sm" style={{ color: '#fff', opacity: 0.9 }}>{`${offer.brand} ${offer.articleNumber} (${count} шт.)`}</div>
|
<div className="text-sm" style={{ color: '#fff', opacity: 0.9 }}>{`${offer.brand} ${offer.articleNumber} (${count} шт.)`}</div>
|
||||||
</div>,
|
</div>,
|
||||||
{
|
{
|
||||||
@ -176,17 +184,55 @@ const BestPriceCard: React.FC<BestPriceCardProps> = ({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-layout-hflex flex-block-42">
|
<div className="w-layout-hflex flex-block-42">
|
||||||
<button
|
<div style={{ position: 'relative', display: 'inline-block' }}>
|
||||||
type="button"
|
<button
|
||||||
onClick={handleAddToCart}
|
type="button"
|
||||||
className="button-icon w-inline-block"
|
onClick={handleAddToCart}
|
||||||
style={{ cursor: 'pointer', textDecoration: 'none' }}
|
className={`button-icon w-inline-block ${inCart ? 'in-cart' : ''}`}
|
||||||
aria-label="Добавить в корзину"
|
style={{
|
||||||
>
|
cursor: 'pointer',
|
||||||
<div className="div-block-26">
|
textDecoration: 'none',
|
||||||
<div className="icon-setting w-embed"><svg width="currentWidht" height="currentHeight" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.1998 22.2C8.8798 22.2 7.81184 23.28 7.81184 24.6C7.81184 25.92 8.8798 27 10.1998 27C11.5197 27 12.5997 25.92 12.5997 24.6C12.5997 23.28 11.5197 22.2 10.1998 22.2ZM3 3V5.4H5.39992L9.71977 14.508L8.09982 17.448C7.90783 17.784 7.79984 18.18 7.79984 18.6C7.79984 19.92 8.8798 21 10.1998 21H24.5993V18.6H10.7037C10.5357 18.6 10.4037 18.468 10.4037 18.3L10.4397 18.156L11.5197 16.2H20.4594C21.3594 16.2 22.1513 15.708 22.5593 14.964L26.8552 7.176C26.9542 6.99286 27.004 6.78718 26.9997 6.57904C26.9955 6.37089 26.9373 6.16741 26.8309 5.98847C26.7245 5.80952 26.5736 5.66124 26.3927 5.55809C26.2119 5.45495 26.0074 5.40048 25.7992 5.4H8.05183L6.92387 3H3ZM22.1993 22.2C20.8794 22.2 19.8114 23.28 19.8114 24.6C19.8114 25.92 20.8794 27 22.1993 27C23.5193 27 24.5993 25.92 24.5993 24.6C24.5993 23.28 23.5193 22.2 22.1993 22.2Z" fill="currentColor"/></svg></div>
|
opacity: inCart ? 0.5 : 1,
|
||||||
</div>
|
backgroundColor: inCart ? '#9ca3af' : undefined
|
||||||
</button>
|
}}
|
||||||
|
aria-label={inCart ? "Товар уже в корзине" : "Добавить в корзину"}
|
||||||
|
title={inCart ? "Товар уже в корзине - нажмите для добавления еще" : "Добавить в корзину"}
|
||||||
|
>
|
||||||
|
<div className="div-block-26">
|
||||||
|
<div
|
||||||
|
className="icon-setting w-embed"
|
||||||
|
style={{
|
||||||
|
filter: inCart ? 'brightness(0.7)' : undefined
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<svg width="currentWidht" height="currentHeight" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.1998 22.2C8.8798 22.2 7.81184 23.28 7.81184 24.6C7.81184 25.92 8.8798 27 10.1998 27C11.5197 27 12.5997 25.92 12.5997 24.6C12.5997 23.28 11.5197 22.2 10.1998 22.2ZM3 3V5.4H5.39992L9.71977 14.508L8.09982 17.448C7.90783 17.784 7.79984 18.18 7.79984 18.6C7.79984 19.92 8.8798 21 10.1998 21H24.5993V18.6H10.7037C10.5357 18.6 10.4037 18.468 10.4037 18.3L10.4397 18.156L11.5197 16.2H20.4594C21.3594 16.2 22.1513 15.708 22.5593 14.964L26.8552 7.176C26.9542 6.99286 27.004 6.78718 26.9997 6.57904C26.9955 6.37089 26.9373 6.16741 26.8309 5.98847C26.7245 5.80952 26.5736 5.66124 26.3927 5.55809C26.2119 5.45495 26.0074 5.40048 25.7992 5.4H8.05183L6.92387 3H3ZM22.1993 22.2C20.8794 22.2 19.8114 23.28 19.8114 24.6C19.8114 25.92 20.8794 27 22.1993 27C23.5193 27 24.5993 25.92 24.5993 24.6C24.5993 23.28 23.5193 22.2 22.1993 22.2Z" fill="currentColor"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
{inCart && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: '-8px',
|
||||||
|
right: '-8px',
|
||||||
|
backgroundColor: '#22c55e',
|
||||||
|
color: 'white',
|
||||||
|
borderRadius: '50%',
|
||||||
|
width: '16px',
|
||||||
|
height: '16px',
|
||||||
|
fontSize: '10px',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
zIndex: 1
|
||||||
|
}}
|
||||||
|
title="В корзине"
|
||||||
|
>
|
||||||
|
✓
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -122,7 +122,6 @@ const BestPriceItem: React.FC<BestPriceItemProps> = ({
|
|||||||
currency: 'RUB',
|
currency: 'RUB',
|
||||||
image: image
|
image: image
|
||||||
});
|
});
|
||||||
toast.success('Товар добавлен в избранное');
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -1,79 +1,54 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React from 'react';
|
||||||
import { useCart } from '@/contexts/CartContext';
|
import { useCart } from '@/contexts/CartContext';
|
||||||
|
|
||||||
const CartDebug: React.FC = () => {
|
const CartDebug: React.FC = () => {
|
||||||
const { state, addItem, clearCart } = useCart();
|
const { state, isInCart } = useCart();
|
||||||
const [debugInfo, setDebugInfo] = useState<any>({});
|
|
||||||
|
|
||||||
useEffect(() => {
|
if (process.env.NODE_ENV !== 'development') {
|
||||||
if (typeof window !== 'undefined') {
|
return null;
|
||||||
const cartState = localStorage.getItem('cartState');
|
}
|
||||||
const cartSummaryState = localStorage.getItem('cartSummaryState');
|
|
||||||
const oldCart = localStorage.getItem('cart');
|
|
||||||
|
|
||||||
setDebugInfo({
|
|
||||||
cartState: cartState ? JSON.parse(cartState) : null,
|
|
||||||
cartSummaryState: cartSummaryState ? JSON.parse(cartSummaryState) : null,
|
|
||||||
oldCart: oldCart ? JSON.parse(oldCart) : null,
|
|
||||||
currentItems: state.items.length
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [state.items]);
|
|
||||||
|
|
||||||
const addTestItem = () => {
|
// Test the isInCart function with some example values from the cart
|
||||||
addItem({
|
const testItem = state.items[0];
|
||||||
name: 'Тестовый товар',
|
const testResult = testItem ? isInCart(testItem.productId, testItem.offerKey, testItem.article, testItem.brand) : false;
|
||||||
description: 'Описание тестового товара',
|
|
||||||
article: 'TEST123',
|
|
||||||
brand: 'TestBrand',
|
|
||||||
price: 1000,
|
|
||||||
currency: 'RUB',
|
|
||||||
quantity: 1,
|
|
||||||
image: '',
|
|
||||||
productId: 'test-product',
|
|
||||||
offerKey: 'test-offer',
|
|
||||||
isExternal: false
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const clearStorage = () => {
|
|
||||||
if (typeof window !== 'undefined') {
|
|
||||||
localStorage.removeItem('cartState');
|
|
||||||
localStorage.removeItem('cartSummaryState');
|
|
||||||
localStorage.removeItem('cart');
|
|
||||||
window.location.reload();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{
|
<div
|
||||||
position: 'fixed',
|
style={{
|
||||||
top: '10px',
|
position: 'fixed',
|
||||||
right: '10px',
|
top: '10px',
|
||||||
background: 'white',
|
right: '10px',
|
||||||
border: '1px solid #ccc',
|
background: 'rgba(0,0,0,0.9)',
|
||||||
padding: '10px',
|
color: 'white',
|
||||||
borderRadius: '5px',
|
padding: '10px',
|
||||||
maxWidth: '300px',
|
borderRadius: '5px',
|
||||||
fontSize: '12px',
|
fontSize: '11px',
|
||||||
zIndex: 9999
|
maxWidth: '350px',
|
||||||
}}>
|
zIndex: 9999,
|
||||||
<h4>Cart Debug</h4>
|
maxHeight: '400px',
|
||||||
<button onClick={addTestItem} style={{ marginBottom: '5px', marginRight: '5px' }}>
|
overflow: 'auto'
|
||||||
Добавить товар
|
}}
|
||||||
</button>
|
>
|
||||||
<button onClick={clearCart} style={{ marginBottom: '5px', marginRight: '5px' }}>
|
<div style={{ fontWeight: 'bold', marginBottom: '5px' }}>🛒 Cart Debug: {state.items.length} items</div>
|
||||||
Очистить корзину
|
{testItem && (
|
||||||
</button>
|
<div style={{ background: 'rgba(255,255,255,0.1)', padding: '5px', marginBottom: '5px', fontSize: '10px' }}>
|
||||||
<button onClick={clearStorage} style={{ marginBottom: '10px' }}>
|
<div>Testing isInCart for first item:</div>
|
||||||
Очистить localStorage
|
<div>Brand: {testItem.brand}, Article: {testItem.article}</div>
|
||||||
</button>
|
<div>Result: {testResult ? '✅ Found' : '❌ Not found'}</div>
|
||||||
<div>
|
</div>
|
||||||
<strong>Товаров в корзине:</strong> {state.items.length}
|
)}
|
||||||
</div>
|
{state.items.slice(0, 6).map((item, idx) => (
|
||||||
<pre style={{ fontSize: '10px', maxHeight: '200px', overflow: 'auto' }}>
|
<div key={idx} style={{ fontSize: '9px', marginTop: '3px', borderBottom: '1px solid rgba(255,255,255,0.2)', paddingBottom: '2px' }}>
|
||||||
{JSON.stringify(debugInfo, null, 2)}
|
{item.brand} {item.article}
|
||||||
</pre>
|
{item.productId && <div style={{ color: '#90EE90' }}>PID: {item.productId.substring(0, 8)}...</div>}
|
||||||
|
{item.offerKey && <div style={{ color: '#87CEEB' }}>OK: {item.offerKey.substring(0, 15)}...</div>}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{state.items.length > 6 && (
|
||||||
|
<div style={{ fontSize: '9px', marginTop: '3px', opacity: 0.7 }}>
|
||||||
|
...и еще {state.items.length - 6} товаров
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -17,6 +17,7 @@ interface CatalogProductCardProps {
|
|||||||
currency?: string;
|
currency?: string;
|
||||||
priceElement?: React.ReactNode; // Элемент для отображения цены (например, скелетон)
|
priceElement?: React.ReactNode; // Элемент для отображения цены (например, скелетон)
|
||||||
onAddToCart?: (e: React.MouseEvent) => void | Promise<void>;
|
onAddToCart?: (e: React.MouseEvent) => void | Promise<void>;
|
||||||
|
isInCart?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const CatalogProductCard: React.FC<CatalogProductCardProps> = ({
|
const CatalogProductCard: React.FC<CatalogProductCardProps> = ({
|
||||||
@ -34,6 +35,7 @@ const CatalogProductCard: React.FC<CatalogProductCardProps> = ({
|
|||||||
currency = 'RUB',
|
currency = 'RUB',
|
||||||
priceElement,
|
priceElement,
|
||||||
onAddToCart,
|
onAddToCart,
|
||||||
|
isInCart = false,
|
||||||
}) => {
|
}) => {
|
||||||
const { addToFavorites, removeFromFavorites, isFavorite, favorites } = useFavorites();
|
const { addToFavorites, removeFromFavorites, isFavorite, favorites } = useFavorites();
|
||||||
|
|
||||||
@ -150,7 +152,15 @@ const CatalogProductCard: React.FC<CatalogProductCardProps> = ({
|
|||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
{/* Обновляем кнопку купить */}
|
{/* Обновляем кнопку купить */}
|
||||||
<div className="catc w-inline-block" onClick={handleBuyClick} style={{ cursor: 'pointer' }}>
|
<div
|
||||||
|
className="catc w-inline-block"
|
||||||
|
onClick={handleBuyClick}
|
||||||
|
style={{
|
||||||
|
cursor: isInCart ? 'default' : 'pointer',
|
||||||
|
opacity: isInCart ? 0.5 : 1,
|
||||||
|
filter: isInCart ? 'grayscale(1)' : 'none'
|
||||||
|
}}
|
||||||
|
>
|
||||||
<div className="div-block-25">
|
<div className="div-block-25">
|
||||||
<div className="icon-setting w-embed">
|
<div className="icon-setting w-embed">
|
||||||
<svg width="currentWidht" height="currentHeight" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="currentWidht" height="currentHeight" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
@ -158,7 +168,7 @@ const CatalogProductCard: React.FC<CatalogProductCardProps> = ({
|
|||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-block-6">Купить</div>
|
<div className="text-block-6">{isInCart ? 'В корзине' : 'Купить'}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -21,6 +21,8 @@ interface CoreProductCardOffer {
|
|||||||
warehouse?: string;
|
warehouse?: string;
|
||||||
supplier?: string;
|
supplier?: string;
|
||||||
deliveryTime?: number;
|
deliveryTime?: number;
|
||||||
|
hasStock?: boolean;
|
||||||
|
isInCart?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface CoreProductCardProps {
|
interface CoreProductCardProps {
|
||||||
@ -34,6 +36,7 @@ interface CoreProductCardProps {
|
|||||||
isLoadingOffers?: boolean;
|
isLoadingOffers?: boolean;
|
||||||
onLoadOffers?: () => void;
|
onLoadOffers?: () => void;
|
||||||
partsIndexPowered?: boolean;
|
partsIndexPowered?: boolean;
|
||||||
|
hasStock?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const CoreProductCard: React.FC<CoreProductCardProps> = ({
|
const CoreProductCard: React.FC<CoreProductCardProps> = ({
|
||||||
@ -46,7 +49,8 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
|
|||||||
isAnalog = false,
|
isAnalog = false,
|
||||||
isLoadingOffers = false,
|
isLoadingOffers = false,
|
||||||
onLoadOffers,
|
onLoadOffers,
|
||||||
partsIndexPowered = false
|
partsIndexPowered = false,
|
||||||
|
hasStock = true
|
||||||
}) => {
|
}) => {
|
||||||
const { addItem } = useCart();
|
const { addItem } = useCart();
|
||||||
const { addToFavorites, removeFromFavorites, isFavorite, favorites } = useFavorites();
|
const { addToFavorites, removeFromFavorites, isFavorite, favorites } = useFavorites();
|
||||||
@ -120,6 +124,8 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
|
|||||||
brand
|
brand
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Теперь используем isInCart флаг из backend вместо frontend проверки
|
||||||
|
|
||||||
const handleInputChange = (idx: number, val: string) => {
|
const handleInputChange = (idx: number, val: string) => {
|
||||||
setInputValues(prev => ({ ...prev, [idx]: val }));
|
setInputValues(prev => ({ ...prev, [idx]: val }));
|
||||||
if (val === "") return;
|
if (val === "") return;
|
||||||
@ -154,6 +160,7 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
|
|||||||
const handleAddToCart = async (offer: CoreProductCardOffer, index: number) => {
|
const handleAddToCart = async (offer: CoreProductCardOffer, index: number) => {
|
||||||
const quantity = quantities[index] || 1;
|
const quantity = quantities[index] || 1;
|
||||||
const availableStock = parseStock(offer.pcs);
|
const availableStock = parseStock(offer.pcs);
|
||||||
|
const inCart = offer.isInCart || false; // Use backend flag
|
||||||
|
|
||||||
const numericPrice = parsePrice(offer.price);
|
const numericPrice = parsePrice(offer.price);
|
||||||
|
|
||||||
@ -176,10 +183,14 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
|
|||||||
});
|
});
|
||||||
|
|
||||||
if (result.success) {
|
if (result.success) {
|
||||||
// Показываем тоастер вместо alert
|
// Показываем тоастер с разным текстом в зависимости от того, был ли товар уже в корзине
|
||||||
|
const toastMessage = inCart
|
||||||
|
? `Количество увеличено (+${quantity} шт.)`
|
||||||
|
: 'Товар добавлен в корзину!';
|
||||||
|
|
||||||
toast.success(
|
toast.success(
|
||||||
<div>
|
<div>
|
||||||
<div className="font-semibold" style={{ color: '#fff' }}>Товар добавлен в корзину!</div>
|
<div className="font-semibold" style={{ color: '#fff' }}>{toastMessage}</div>
|
||||||
<div className="text-sm" style={{ color: '#fff', opacity: 0.9 }}>{`${brand} ${article} (${quantity} шт.)`}</div>
|
<div className="text-sm" style={{ color: '#fff', opacity: 0.9 }}>{`${brand} ${article} (${quantity} шт.)`}</div>
|
||||||
</div>,
|
</div>,
|
||||||
{
|
{
|
||||||
@ -256,7 +267,7 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
|
|||||||
|
|
||||||
if (!offers || offers.length === 0) {
|
if (!offers || offers.length === 0) {
|
||||||
return (
|
return (
|
||||||
<div className="w-layout-hflex core-product-search-s1">
|
<div className={`w-layout-hflex core-product-search-s1 ${!hasStock ? 'out-of-stock-highlight' : ''}`} style={!hasStock ? { backgroundColor: '#fee', borderColor: '#f87171' } : {}}>
|
||||||
<div className="w-layout-vflex core-product-s1">
|
<div className="w-layout-vflex core-product-s1">
|
||||||
<div className="w-layout-vflex flex-block-47">
|
<div className="w-layout-vflex flex-block-47">
|
||||||
<div className="div-block-19">
|
<div className="div-block-19">
|
||||||
@ -266,6 +277,19 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
|
|||||||
<div className="w-layout-hflex flex-block-79">
|
<div className="w-layout-hflex flex-block-79">
|
||||||
<h3 className="heading-10 name">{brand}</h3>
|
<h3 className="heading-10 name">{brand}</h3>
|
||||||
<h3 className="heading-10">{article}</h3>
|
<h3 className="heading-10">{article}</h3>
|
||||||
|
{!hasStock && (
|
||||||
|
<span className="out-of-stock-badge" style={{
|
||||||
|
backgroundColor: '#dc2626',
|
||||||
|
color: 'white',
|
||||||
|
padding: '2px 8px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
fontSize: '12px',
|
||||||
|
fontWeight: '500',
|
||||||
|
marginLeft: '8px'
|
||||||
|
}}>
|
||||||
|
Нет в наличии
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="text-block-21">{name}</div>
|
<div className="text-block-21">{name}</div>
|
||||||
</div>
|
</div>
|
||||||
@ -299,7 +323,7 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="w-layout-hflex core-product-search-s1">
|
<div className={`w-layout-hflex core-product-search-s1 ${!hasStock ? 'out-of-stock-highlight' : ''}`} style={!hasStock ? { backgroundColor: '#fee', borderColor: '#f87171' } : {}}>
|
||||||
<div className="w-layout-vflex flex-block-48-copy">
|
<div className="w-layout-vflex flex-block-48-copy">
|
||||||
<div className="w-layout-vflex product-list-search-s1">
|
<div className="w-layout-vflex product-list-search-s1">
|
||||||
|
|
||||||
@ -315,6 +339,19 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
|
|||||||
<div className="flex flex-row flex-nowrap items-center gap-2">
|
<div className="flex flex-row flex-nowrap items-center gap-2">
|
||||||
<h3 className="heading-10 name" style={{marginRight: 8}}>{brand}</h3>
|
<h3 className="heading-10 name" style={{marginRight: 8}}>{brand}</h3>
|
||||||
<h3 className="heading-10" style={{marginRight: 8}}>{article}</h3>
|
<h3 className="heading-10" style={{marginRight: 8}}>{article}</h3>
|
||||||
|
{!hasStock && (
|
||||||
|
<span className="out-of-stock-badge" style={{
|
||||||
|
backgroundColor: '#dc2626',
|
||||||
|
color: 'white',
|
||||||
|
padding: '2px 8px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
fontSize: '12px',
|
||||||
|
fontWeight: '500',
|
||||||
|
marginLeft: '8px'
|
||||||
|
}}>
|
||||||
|
Нет в наличии
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
<div
|
<div
|
||||||
className="favorite-icon w-embed"
|
className="favorite-icon w-embed"
|
||||||
onClick={handleFavoriteClick}
|
onClick={handleFavoriteClick}
|
||||||
@ -370,6 +407,10 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
|
|||||||
{displayedOffers.map((offer, idx) => {
|
{displayedOffers.map((offer, idx) => {
|
||||||
const isLast = idx === displayedOffers.length - 1;
|
const isLast = idx === displayedOffers.length - 1;
|
||||||
const maxCount = parseStock(offer.pcs);
|
const maxCount = parseStock(offer.pcs);
|
||||||
|
const inCart = offer.isInCart || false; // Use backend flag
|
||||||
|
|
||||||
|
// Backend now provides isInCart flag directly
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="w-layout-hflex product-item-search-s1"
|
className="w-layout-hflex product-item-search-s1"
|
||||||
@ -439,17 +480,56 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<div style={{ position: 'relative', display: 'inline-block' }}>
|
||||||
type="button"
|
<button
|
||||||
onClick={() => handleAddToCart(offer, idx)}
|
type="button"
|
||||||
className="button-icon w-inline-block"
|
onClick={() => handleAddToCart(offer, idx)}
|
||||||
style={{ cursor: 'pointer' }}
|
className={`button-icon w-inline-block ${inCart ? 'in-cart' : ''}`}
|
||||||
aria-label="Добавить в корзину"
|
style={{
|
||||||
>
|
cursor: 'pointer',
|
||||||
<div className="div-block-26">
|
opacity: inCart ? 0.5 : 1,
|
||||||
<img loading="lazy" src="/images/cart_icon.svg" alt="В корзину" className="image-11" />
|
backgroundColor: inCart ? '#9ca3af' : undefined
|
||||||
</div>
|
}}
|
||||||
</button>
|
aria-label={inCart ? "Товар уже в корзине" : "Добавить в корзину"}
|
||||||
|
title={inCart ? "Товар уже в корзине - нажмите для добавления еще" : "Добавить в корзину"}
|
||||||
|
>
|
||||||
|
<div className="div-block-26">
|
||||||
|
<img
|
||||||
|
loading="lazy"
|
||||||
|
src="/images/cart_icon.svg"
|
||||||
|
alt={inCart ? "В корзине" : "В корзину"}
|
||||||
|
className="image-11"
|
||||||
|
style={{
|
||||||
|
filter: inCart ? 'brightness(0.7)' : undefined
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
{inCart && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: '-8px',
|
||||||
|
right: '-8px',
|
||||||
|
backgroundColor: '#22c55e',
|
||||||
|
color: 'white',
|
||||||
|
borderRadius: '50%',
|
||||||
|
width: '16px',
|
||||||
|
height: '16px',
|
||||||
|
fontSize: '10px',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
zIndex: 1
|
||||||
|
}}
|
||||||
|
title="В корзине"
|
||||||
|
>
|
||||||
|
✓
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -89,7 +89,6 @@ const TopSalesItem: React.FC<TopSalesItemProps> = ({
|
|||||||
currency: 'RUB',
|
currency: 'RUB',
|
||||||
image: image
|
image: image
|
||||||
});
|
});
|
||||||
toast.success('Товар добавлен в избранное');
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -112,6 +112,19 @@ const LegalEntityFormBlock: React.FC<LegalEntityFormBlockProps> = ({
|
|||||||
onAdd,
|
onAdd,
|
||||||
onCancel,
|
onCancel,
|
||||||
}) => {
|
}) => {
|
||||||
|
// Состояния для отображения ошибок валидации
|
||||||
|
const [validationErrors, setValidationErrors] = React.useState({
|
||||||
|
inn: false,
|
||||||
|
shortName: false,
|
||||||
|
jurAddress: false,
|
||||||
|
form: false,
|
||||||
|
taxSystem: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Функция для очистки ошибки при изменении поля
|
||||||
|
const clearError = (field: keyof typeof validationErrors) => {
|
||||||
|
setValidationErrors(prev => ({ ...prev, [field]: false }));
|
||||||
|
};
|
||||||
const [createLegalEntity, { loading: createLoading }] = useMutation(CREATE_CLIENT_LEGAL_ENTITY, {
|
const [createLegalEntity, { loading: createLoading }] = useMutation(CREATE_CLIENT_LEGAL_ENTITY, {
|
||||||
onCompleted: () => {
|
onCompleted: () => {
|
||||||
console.log('Юридическое лицо создано');
|
console.log('Юридическое лицо создано');
|
||||||
@ -137,29 +150,27 @@ const LegalEntityFormBlock: React.FC<LegalEntityFormBlockProps> = ({
|
|||||||
const loading = createLoading || updateLoading;
|
const loading = createLoading || updateLoading;
|
||||||
|
|
||||||
const handleSave = async () => {
|
const handleSave = async () => {
|
||||||
// Валидация
|
// Сброс предыдущих ошибок
|
||||||
if (!inn || inn.length < 10) {
|
setValidationErrors({
|
||||||
alert('Введите корректный ИНН');
|
inn: false,
|
||||||
return;
|
shortName: false,
|
||||||
}
|
jurAddress: false,
|
||||||
|
form: false,
|
||||||
|
taxSystem: false,
|
||||||
|
});
|
||||||
|
|
||||||
if (!shortName.trim()) {
|
// Валидация с установкой ошибок
|
||||||
alert('Введите краткое наименование');
|
const errors = {
|
||||||
return;
|
inn: !inn || inn.length < 10,
|
||||||
}
|
shortName: !shortName.trim(),
|
||||||
|
jurAddress: !jurAddress.trim(),
|
||||||
|
form: form === 'Выбрать',
|
||||||
|
taxSystem: taxSystem === 'Выбрать',
|
||||||
|
};
|
||||||
|
|
||||||
if (!jurAddress.trim()) {
|
// Если есть ошибки, устанавливаем их и прерываем выполнение
|
||||||
alert('Введите юридический адрес');
|
if (Object.values(errors).some(error => error)) {
|
||||||
return;
|
setValidationErrors(errors);
|
||||||
}
|
|
||||||
|
|
||||||
if (form === 'Выбрать') {
|
|
||||||
alert('Выберите форму организации');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (taxSystem === 'Выбрать') {
|
|
||||||
alert('Выберите систему налогообложения');
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -238,13 +249,18 @@ const LegalEntityFormBlock: React.FC<LegalEntityFormBlockProps> = ({
|
|||||||
<div className="flex flex-wrap gap-5 items-start w-full whitespace-nowrap max-md:max-w-full">
|
<div className="flex flex-wrap gap-5 items-start w-full whitespace-nowrap max-md:max-w-full">
|
||||||
<div className="flex flex-col flex-1 shrink basis-0 min-w-[240px]">
|
<div className="flex flex-col flex-1 shrink basis-0 min-w-[240px]">
|
||||||
<div className="text-gray-950">ИНН</div>
|
<div className="text-gray-950">ИНН</div>
|
||||||
<div className="gap-2.5 self-stretch px-6 py-3.5 mt-1.5 w-full bg-white rounded border border-solid border-stone-300 min-h-[46px] max-md:px-5">
|
<div className={`gap-2.5 self-stretch px-6 py-3.5 mt-1.5 w-full bg-white rounded border border-solid min-h-[46px] max-md:px-5 ${
|
||||||
|
validationErrors.inn ? 'border-red-500' : 'border-stone-300'
|
||||||
|
}`}>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="ИНН"
|
placeholder="ИНН"
|
||||||
className="w-full bg-transparent outline-none text-gray-600"
|
className="w-full bg-transparent outline-none text-gray-600"
|
||||||
value={inn}
|
value={inn}
|
||||||
onChange={e => setInn(e.target.value)}
|
onChange={e => {
|
||||||
|
setInn(e.target.value);
|
||||||
|
clearError('inn');
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -252,7 +268,9 @@ const LegalEntityFormBlock: React.FC<LegalEntityFormBlockProps> = ({
|
|||||||
<div className="text-gray-950">Форма</div>
|
<div className="text-gray-950">Форма</div>
|
||||||
<div className="relative mt-1.5">
|
<div className="relative mt-1.5">
|
||||||
<div
|
<div
|
||||||
className="flex gap-10 justify-between items-center px-6 py-3.5 w-full bg-white rounded border border-solid border-stone-300 min-h-[46px] text-neutral-500 max-md:px-5 cursor-pointer select-none"
|
className={`flex gap-10 justify-between items-center px-6 py-3.5 w-full bg-white rounded border border-solid min-h-[46px] text-neutral-500 max-md:px-5 cursor-pointer select-none ${
|
||||||
|
validationErrors.form ? 'border-red-500' : 'border-stone-300'
|
||||||
|
}`}
|
||||||
onClick={() => setIsFormOpen((prev: boolean) => !prev)}
|
onClick={() => setIsFormOpen((prev: boolean) => !prev)}
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
onBlur={() => setIsFormOpen(false)}
|
onBlur={() => setIsFormOpen(false)}
|
||||||
@ -266,7 +284,11 @@ const LegalEntityFormBlock: React.FC<LegalEntityFormBlockProps> = ({
|
|||||||
<li
|
<li
|
||||||
key={option}
|
key={option}
|
||||||
className={`px-6 py-3.5 cursor-pointer hover:bg-blue-100 ${option === form ? 'bg-blue-50 font-semibold' : ''}`}
|
className={`px-6 py-3.5 cursor-pointer hover:bg-blue-100 ${option === form ? 'bg-blue-50 font-semibold' : ''}`}
|
||||||
onMouseDown={() => { setForm(option); setIsFormOpen(false); }}
|
onMouseDown={() => {
|
||||||
|
setForm(option);
|
||||||
|
setIsFormOpen(false);
|
||||||
|
clearError('form');
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{option}
|
{option}
|
||||||
</li>
|
</li>
|
||||||
@ -303,25 +325,35 @@ const LegalEntityFormBlock: React.FC<LegalEntityFormBlockProps> = ({
|
|||||||
<div className="flex flex-wrap gap-5 items-start mt-5 w-full max-md:max-w-full">
|
<div className="flex flex-wrap gap-5 items-start mt-5 w-full max-md:max-w-full">
|
||||||
<div className="flex flex-col flex-1 shrink basis-0 min-w-[240px]">
|
<div className="flex flex-col flex-1 shrink basis-0 min-w-[240px]">
|
||||||
<div className="text-gray-950">Юридический адрес</div>
|
<div className="text-gray-950">Юридический адрес</div>
|
||||||
<div className="gap-2.5 self-stretch px-6 py-3.5 mt-1.5 w-full bg-white rounded border border-solid border-stone-300 min-h-[46px] text-neutral-500 max-md:px-5">
|
<div className={`gap-2.5 self-stretch px-6 py-3.5 mt-1.5 w-full bg-white rounded border border-solid min-h-[46px] text-neutral-500 max-md:px-5 ${
|
||||||
|
validationErrors.jurAddress ? 'border-red-500' : 'border-stone-300'
|
||||||
|
}`}>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Юридический адрес"
|
placeholder="Юридический адрес"
|
||||||
className="w-full bg-transparent outline-none text-neutral-500"
|
className="w-full bg-transparent outline-none text-neutral-500"
|
||||||
value={jurAddress}
|
value={jurAddress}
|
||||||
onChange={e => setJurAddress(e.target.value)}
|
onChange={e => {
|
||||||
|
setJurAddress(e.target.value);
|
||||||
|
clearError('jurAddress');
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col flex-1 shrink basis-0 min-w-[240px]">
|
<div className="flex flex-col flex-1 shrink basis-0 min-w-[240px]">
|
||||||
<div className="text-gray-950">Краткое наименование</div>
|
<div className="text-gray-950">Краткое наименование</div>
|
||||||
<div className="gap-2.5 self-stretch px-6 py-3.5 mt-1.5 w-full bg-white rounded border border-solid border-stone-300 min-h-[46px] text-neutral-500 max-md:px-5">
|
<div className={`gap-2.5 self-stretch px-6 py-3.5 mt-1.5 w-full bg-white rounded border border-solid min-h-[46px] text-neutral-500 max-md:px-5 ${
|
||||||
|
validationErrors.shortName ? 'border-red-500' : 'border-stone-300'
|
||||||
|
}`}>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Краткое наименование"
|
placeholder="Краткое наименование"
|
||||||
className="w-full bg-transparent outline-none text-neutral-500"
|
className="w-full bg-transparent outline-none text-neutral-500"
|
||||||
value={shortName}
|
value={shortName}
|
||||||
onChange={e => setShortName(e.target.value)}
|
onChange={e => {
|
||||||
|
setShortName(e.target.value);
|
||||||
|
clearError('shortName');
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -355,7 +387,9 @@ const LegalEntityFormBlock: React.FC<LegalEntityFormBlockProps> = ({
|
|||||||
<div className="text-gray-950">Система налогоблажения</div>
|
<div className="text-gray-950">Система налогоблажения</div>
|
||||||
<div className="relative mt-1.5">
|
<div className="relative mt-1.5">
|
||||||
<div
|
<div
|
||||||
className="flex gap-10 justify-between items-center px-6 py-3.5 w-full whitespace-nowrap bg-white rounded border border-solid border-stone-300 min-h-[46px] text-neutral-500 max-md:px-5 cursor-pointer select-none"
|
className={`flex gap-10 justify-between items-center px-6 py-3.5 w-full whitespace-nowrap bg-white rounded border border-solid min-h-[46px] text-neutral-500 max-md:px-5 cursor-pointer select-none ${
|
||||||
|
validationErrors.taxSystem ? 'border-red-500' : 'border-stone-300'
|
||||||
|
}`}
|
||||||
onClick={() => setIsTaxSystemOpen((prev: boolean) => !prev)}
|
onClick={() => setIsTaxSystemOpen((prev: boolean) => !prev)}
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
onBlur={() => setIsTaxSystemOpen(false)}
|
onBlur={() => setIsTaxSystemOpen(false)}
|
||||||
@ -369,7 +403,11 @@ const LegalEntityFormBlock: React.FC<LegalEntityFormBlockProps> = ({
|
|||||||
<li
|
<li
|
||||||
key={option}
|
key={option}
|
||||||
className={`px-6 py-3.5 cursor-pointer hover:bg-blue-100 ${option === taxSystem ? 'bg-blue-50 font-semibold' : ''}`}
|
className={`px-6 py-3.5 cursor-pointer hover:bg-blue-100 ${option === taxSystem ? 'bg-blue-50 font-semibold' : ''}`}
|
||||||
onMouseDown={() => { setTaxSystem(option); setIsTaxSystemOpen(false); }}
|
onMouseDown={() => {
|
||||||
|
setTaxSystem(option);
|
||||||
|
setIsTaxSystemOpen(false);
|
||||||
|
clearError('taxSystem');
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{option}
|
{option}
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
@ -1,7 +1,10 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import React, { createContext, useContext, useReducer, useEffect, useState } from 'react'
|
import React, { createContext, useContext, useState, useEffect } from 'react'
|
||||||
|
import { useMutation, useQuery } from '@apollo/client'
|
||||||
import { CartState, CartContextType, CartItem, DeliveryInfo } from '@/types/cart'
|
import { CartState, CartContextType, CartItem, DeliveryInfo } from '@/types/cart'
|
||||||
|
import { ADD_TO_CART, REMOVE_FROM_CART, UPDATE_CART_ITEM_QUANTITY, CLEAR_CART, GET_CART } from '@/lib/graphql'
|
||||||
|
import { toast } from 'react-hot-toast'
|
||||||
|
|
||||||
// Начальное состояние корзины
|
// Начальное состояние корзины
|
||||||
const initialState: CartState = {
|
const initialState: CartState = {
|
||||||
@ -22,51 +25,53 @@ const initialState: CartState = {
|
|||||||
isLoading: false
|
isLoading: false
|
||||||
}
|
}
|
||||||
|
|
||||||
// Типы действий
|
// Создаем контекст
|
||||||
type CartAction =
|
const CartContext = createContext<CartContextType | undefined>(undefined)
|
||||||
| { type: 'ADD_ITEM'; payload: Omit<CartItem, 'id' | 'selected' | 'favorite'> }
|
|
||||||
| { type: 'ADD_ITEM_SUCCESS'; payload: { items: CartItem[]; summary: any } }
|
|
||||||
| { type: 'ADD_ITEM_ERROR'; payload: string }
|
|
||||||
| { type: 'REMOVE_ITEM'; payload: string }
|
|
||||||
| { type: 'UPDATE_QUANTITY'; payload: { id: string; quantity: number } }
|
|
||||||
| { type: 'TOGGLE_SELECT'; payload: string }
|
|
||||||
| { type: 'TOGGLE_FAVORITE'; payload: string }
|
|
||||||
| { type: 'UPDATE_COMMENT'; payload: { id: string; comment: string } }
|
|
||||||
| { type: 'UPDATE_ORDER_COMMENT'; payload: string }
|
|
||||||
| { type: 'SELECT_ALL' }
|
|
||||||
| { type: 'REMOVE_ALL' }
|
|
||||||
| { type: 'REMOVE_SELECTED' }
|
|
||||||
| { type: 'UPDATE_DELIVERY'; payload: Partial<DeliveryInfo> }
|
|
||||||
| { type: 'CLEAR_CART' }
|
|
||||||
| { type: 'LOAD_CART'; payload: CartItem[] }
|
|
||||||
| { type: 'LOAD_FULL_STATE'; payload: { items: CartItem[]; delivery: DeliveryInfo; orderComment: string } }
|
|
||||||
| { type: 'SET_LOADING'; payload: boolean }
|
|
||||||
| { type: 'SET_ERROR'; payload: string }
|
|
||||||
|
|
||||||
// Функция для генерации ID
|
|
||||||
const generateId = () => Math.random().toString(36).substr(2, 9)
|
|
||||||
|
|
||||||
// Утилитарная функция для парсинга количества в наличии
|
// Утилитарная функция для парсинга количества в наличии
|
||||||
const parseStock = (stockStr: string | number | undefined): number => {
|
const parseStock = (stockStr: string | number | undefined): number => {
|
||||||
if (typeof stockStr === 'number') return stockStr;
|
if (stockStr === undefined || stockStr === null) return 0
|
||||||
|
if (typeof stockStr === 'number') return stockStr
|
||||||
if (typeof stockStr === 'string') {
|
if (typeof stockStr === 'string') {
|
||||||
const match = stockStr.match(/\d+/);
|
// Извлекаем числа из строки типа "10 шт" или "В наличии: 5"
|
||||||
return match ? parseInt(match[0]) : 0;
|
const match = stockStr.match(/\d+/)
|
||||||
|
return match ? parseInt(match[0], 10) : 0
|
||||||
}
|
}
|
||||||
return 0;
|
return 0
|
||||||
};
|
}
|
||||||
|
|
||||||
// Функция для расчета итогов
|
// Функция для преобразования backend cart items в frontend format
|
||||||
const calculateSummary = (items: CartItem[], deliveryPrice: number) => {
|
const transformBackendItems = (backendItems: any[]): CartItem[] => {
|
||||||
const selectedItems = items.filter(item => item.selected)
|
return backendItems.map(item => ({
|
||||||
const totalItems = selectedItems.reduce((sum, item) => sum + item.quantity, 0)
|
id: item.id,
|
||||||
const totalPrice = selectedItems.reduce((sum, item) => sum + (item.price * item.quantity), 0)
|
productId: item.productId,
|
||||||
const totalDiscount = selectedItems.reduce((sum, item) => {
|
offerKey: item.offerKey,
|
||||||
const discount = item.originalPrice ? (item.originalPrice - item.price) * item.quantity : 0
|
name: item.name,
|
||||||
return sum + discount
|
description: item.description,
|
||||||
}, 0)
|
brand: item.brand,
|
||||||
// Доставка включена в стоимость товаров, поэтому добавляем её только если есть товары
|
article: item.article,
|
||||||
const finalPrice = totalPrice + (totalPrice > 0 ? 0 : 0) // Доставка всегда включена в цену товаров
|
price: item.price,
|
||||||
|
currency: item.currency || 'RUB',
|
||||||
|
quantity: item.quantity,
|
||||||
|
stock: item.stock,
|
||||||
|
deliveryTime: item.deliveryTime,
|
||||||
|
warehouse: item.warehouse,
|
||||||
|
supplier: item.supplier,
|
||||||
|
isExternal: item.isExternal,
|
||||||
|
image: item.image,
|
||||||
|
selected: true,
|
||||||
|
favorite: false,
|
||||||
|
comment: ''
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
// Функция для подсчета статистики корзины
|
||||||
|
const calculateSummary = (items: CartItem[]) => {
|
||||||
|
const totalItems = items.reduce((sum, item) => sum + item.quantity, 0)
|
||||||
|
const totalPrice = items.reduce((sum, item) => sum + (item.price * item.quantity), 0)
|
||||||
|
const totalDiscount = 0 // TODO: Implement discount logic
|
||||||
|
const deliveryPrice = 39
|
||||||
|
const finalPrice = totalPrice + deliveryPrice - totalDiscount
|
||||||
|
|
||||||
return {
|
return {
|
||||||
totalItems,
|
totalItems,
|
||||||
@ -77,373 +82,317 @@ const calculateSummary = (items: CartItem[], deliveryPrice: number) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Редьюсер корзины
|
// Провайдер контекста
|
||||||
const cartReducer = (state: CartState, action: CartAction): CartState => {
|
|
||||||
switch (action.type) {
|
|
||||||
case 'ADD_ITEM': {
|
|
||||||
const existingItemIndex = state.items.findIndex(
|
|
||||||
item =>
|
|
||||||
(item.productId && item.productId === action.payload.productId) ||
|
|
||||||
(item.offerKey && item.offerKey === action.payload.offerKey)
|
|
||||||
)
|
|
||||||
|
|
||||||
let newItems: CartItem[]
|
|
||||||
|
|
||||||
if (existingItemIndex >= 0) {
|
|
||||||
// Увеличиваем количество существующего товара
|
|
||||||
const existingItem = state.items[existingItemIndex];
|
|
||||||
const totalQuantity = existingItem.quantity + action.payload.quantity;
|
|
||||||
|
|
||||||
newItems = state.items.map((item, index) =>
|
|
||||||
index === existingItemIndex
|
|
||||||
? { ...item, quantity: totalQuantity }
|
|
||||||
: item
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
// Добавляем новый товар
|
|
||||||
const newItem: CartItem = {
|
|
||||||
...action.payload,
|
|
||||||
id: generateId(),
|
|
||||||
selected: true,
|
|
||||||
favorite: false
|
|
||||||
}
|
|
||||||
newItems = [...state.items, newItem]
|
|
||||||
}
|
|
||||||
|
|
||||||
const newSummary = calculateSummary(newItems, state.delivery.price)
|
|
||||||
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
items: newItems,
|
|
||||||
summary: newSummary
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'REMOVE_ITEM': {
|
|
||||||
const newItems = state.items.filter(item => item.id !== action.payload)
|
|
||||||
const newSummary = calculateSummary(newItems, state.delivery.price)
|
|
||||||
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
items: newItems,
|
|
||||||
summary: newSummary
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'UPDATE_QUANTITY': {
|
|
||||||
const newItems = state.items.map(item =>
|
|
||||||
item.id === action.payload.id
|
|
||||||
? { ...item, quantity: Math.max(1, action.payload.quantity) }
|
|
||||||
: item
|
|
||||||
)
|
|
||||||
const newSummary = calculateSummary(newItems, state.delivery.price)
|
|
||||||
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
items: newItems,
|
|
||||||
summary: newSummary
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'TOGGLE_SELECT': {
|
|
||||||
const newItems = state.items.map(item =>
|
|
||||||
item.id === action.payload
|
|
||||||
? { ...item, selected: !item.selected }
|
|
||||||
: item
|
|
||||||
)
|
|
||||||
const newSummary = calculateSummary(newItems, state.delivery.price)
|
|
||||||
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
items: newItems,
|
|
||||||
summary: newSummary
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'TOGGLE_FAVORITE': {
|
|
||||||
const newItems = state.items.map(item =>
|
|
||||||
item.id === action.payload
|
|
||||||
? { ...item, favorite: !item.favorite }
|
|
||||||
: item
|
|
||||||
)
|
|
||||||
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
items: newItems
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'UPDATE_COMMENT': {
|
|
||||||
const newItems = state.items.map(item =>
|
|
||||||
item.id === action.payload.id
|
|
||||||
? { ...item, comment: action.payload.comment }
|
|
||||||
: item
|
|
||||||
)
|
|
||||||
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
items: newItems
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'UPDATE_ORDER_COMMENT': {
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
orderComment: action.payload
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'SELECT_ALL': {
|
|
||||||
const allSelected = state.items.every(item => item.selected)
|
|
||||||
const newItems = state.items.map(item => ({
|
|
||||||
...item,
|
|
||||||
selected: !allSelected
|
|
||||||
}))
|
|
||||||
const newSummary = calculateSummary(newItems, state.delivery.price)
|
|
||||||
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
items: newItems,
|
|
||||||
summary: newSummary
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'REMOVE_ALL': {
|
|
||||||
const newSummary = calculateSummary([], state.delivery.price)
|
|
||||||
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
items: [],
|
|
||||||
summary: newSummary
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'REMOVE_SELECTED': {
|
|
||||||
const newItems = state.items.filter(item => !item.selected)
|
|
||||||
const newSummary = calculateSummary(newItems, state.delivery.price)
|
|
||||||
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
items: newItems,
|
|
||||||
summary: newSummary
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'UPDATE_DELIVERY': {
|
|
||||||
const newDelivery = { ...state.delivery, ...action.payload }
|
|
||||||
const newSummary = calculateSummary(state.items, newDelivery.price)
|
|
||||||
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
delivery: newDelivery,
|
|
||||||
summary: newSummary
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'CLEAR_CART': {
|
|
||||||
const newSummary = calculateSummary([], state.delivery.price)
|
|
||||||
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
items: [],
|
|
||||||
summary: newSummary
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'LOAD_CART': {
|
|
||||||
const newSummary = calculateSummary(action.payload, state.delivery.price)
|
|
||||||
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
items: action.payload,
|
|
||||||
summary: newSummary
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'LOAD_FULL_STATE': {
|
|
||||||
const newSummary = calculateSummary(action.payload.items, action.payload.delivery.price || state.delivery.price)
|
|
||||||
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
items: action.payload.items,
|
|
||||||
delivery: action.payload.delivery,
|
|
||||||
orderComment: action.payload.orderComment,
|
|
||||||
summary: newSummary
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'SET_LOADING': {
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
isLoading: action.payload
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'SET_ERROR': {
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
error: action.payload,
|
|
||||||
isLoading: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
default:
|
|
||||||
return state
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Создание контекста
|
|
||||||
const CartContext = createContext<CartContextType | undefined>(undefined)
|
|
||||||
|
|
||||||
// Провайдер корзины
|
|
||||||
export const CartProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
export const CartProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||||
const [state, dispatch] = useReducer(cartReducer, initialState)
|
const [state, setState] = useState<CartState>(initialState)
|
||||||
const [isInitialized, setIsInitialized] = useState(false)
|
const [error, setError] = useState<string>('')
|
||||||
|
|
||||||
// Загрузка корзины из localStorage при инициализации
|
// GraphQL operations
|
||||||
|
const { data: cartData, loading: cartLoading, refetch: refetchCart } = useQuery(GET_CART, {
|
||||||
|
errorPolicy: 'ignore' // Don't show errors for unauthenticated users
|
||||||
|
})
|
||||||
|
|
||||||
|
const [addToCartMutation] = useMutation(ADD_TO_CART)
|
||||||
|
const [removeFromCartMutation] = useMutation(REMOVE_FROM_CART)
|
||||||
|
const [updateQuantityMutation] = useMutation(UPDATE_CART_ITEM_QUANTITY)
|
||||||
|
const [clearCartMutation] = useMutation(CLEAR_CART)
|
||||||
|
|
||||||
|
// Load cart from backend when component mounts or cart data changes
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (typeof window === 'undefined') return
|
if (cartData?.getCart) {
|
||||||
|
const backendItems = transformBackendItems(cartData.getCart.items)
|
||||||
|
const summary = calculateSummary(backendItems)
|
||||||
|
|
||||||
|
setState(prev => ({
|
||||||
|
...prev,
|
||||||
|
items: backendItems,
|
||||||
|
summary,
|
||||||
|
isLoading: false
|
||||||
|
}))
|
||||||
|
} else {
|
||||||
|
setState(prev => ({
|
||||||
|
...prev,
|
||||||
|
items: [],
|
||||||
|
summary: calculateSummary([]),
|
||||||
|
isLoading: false
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
}, [cartData])
|
||||||
|
|
||||||
console.log('🔄 Загружаем состояние корзины из localStorage...')
|
// Set loading state
|
||||||
|
useEffect(() => {
|
||||||
const savedCartState = localStorage.getItem('cartState')
|
setState(prev => ({
|
||||||
if (savedCartState) {
|
...prev,
|
||||||
try {
|
isLoading: cartLoading
|
||||||
const cartState = JSON.parse(savedCartState)
|
}))
|
||||||
console.log('✅ Найдено сохраненное состояние корзины:', cartState)
|
}, [cartLoading])
|
||||||
// Загружаем полное состояние корзины
|
|
||||||
dispatch({ type: 'LOAD_FULL_STATE', payload: cartState })
|
// GraphQL-based cart operations
|
||||||
} catch (error) {
|
const addItem = async (item: Omit<CartItem, 'id' | 'selected' | 'favorite'>) => {
|
||||||
console.error('❌ Ошибка загрузки корзины из localStorage:', error)
|
try {
|
||||||
// Попытаемся загрузить старый формат (только товары)
|
setError('')
|
||||||
const savedCart = localStorage.getItem('cart')
|
setState(prev => ({ ...prev, isLoading: true }))
|
||||||
if (savedCart) {
|
|
||||||
try {
|
console.log('🛒 Adding item to backend cart:', item)
|
||||||
const cartItems = JSON.parse(savedCart)
|
|
||||||
console.log('✅ Найдены товары в старом формате:', cartItems)
|
const { data } = await addToCartMutation({
|
||||||
dispatch({ type: 'LOAD_CART', payload: cartItems })
|
variables: {
|
||||||
} catch (error) {
|
input: {
|
||||||
console.error('❌ Ошибка загрузки старой корзины:', error)
|
productId: item.productId || null,
|
||||||
|
offerKey: item.offerKey || null,
|
||||||
|
name: item.name,
|
||||||
|
description: item.description,
|
||||||
|
brand: item.brand,
|
||||||
|
article: item.article,
|
||||||
|
price: item.price,
|
||||||
|
currency: item.currency || 'RUB',
|
||||||
|
quantity: item.quantity,
|
||||||
|
stock: item.stock || null,
|
||||||
|
deliveryTime: item.deliveryTime || null,
|
||||||
|
warehouse: item.warehouse || null,
|
||||||
|
supplier: item.supplier || null,
|
||||||
|
isExternal: item.isExternal || false,
|
||||||
|
image: item.image || null
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (data?.addToCart?.success) {
|
||||||
|
// Update local state with backend response
|
||||||
|
if (data.addToCart.cart) {
|
||||||
|
const backendItems = transformBackendItems(data.addToCart.cart.items)
|
||||||
|
const summary = calculateSummary(backendItems)
|
||||||
|
|
||||||
|
setState(prev => ({
|
||||||
|
...prev,
|
||||||
|
items: backendItems,
|
||||||
|
summary,
|
||||||
|
isLoading: false
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Refetch to ensure data consistency
|
||||||
|
refetchCart()
|
||||||
|
|
||||||
|
return { success: true }
|
||||||
|
} else {
|
||||||
|
const errorMessage = data?.addToCart?.error || 'Ошибка добавления товара'
|
||||||
|
setError(errorMessage)
|
||||||
|
setState(prev => ({ ...prev, isLoading: false }))
|
||||||
|
toast.error(errorMessage)
|
||||||
|
return { success: false, error: errorMessage }
|
||||||
}
|
}
|
||||||
} else {
|
} catch (error) {
|
||||||
console.log('ℹ️ Сохраненное состояние корзины не найдено')
|
console.error('❌ Error adding item to cart:', error)
|
||||||
|
const errorMessage = 'Ошибка добавления товара в корзину'
|
||||||
|
setError(errorMessage)
|
||||||
|
setState(prev => ({ ...prev, isLoading: false }))
|
||||||
|
toast.error(errorMessage)
|
||||||
|
return { success: false, error: errorMessage }
|
||||||
}
|
}
|
||||||
|
|
||||||
setIsInitialized(true)
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
// Сохранение полного состояния корзины в localStorage при изменении (только после инициализации)
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isInitialized || typeof window === 'undefined') return
|
|
||||||
|
|
||||||
const stateToSave = {
|
|
||||||
items: state.items,
|
|
||||||
delivery: state.delivery,
|
|
||||||
orderComment: state.orderComment
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('💾 Сохраняем состояние корзины:', stateToSave)
|
|
||||||
localStorage.setItem('cartState', JSON.stringify(stateToSave))
|
|
||||||
// Сохраняем также старый формат для совместимости
|
|
||||||
localStorage.setItem('cart', JSON.stringify(state.items))
|
|
||||||
}, [state.items, state.delivery, state.orderComment, isInitialized])
|
|
||||||
|
|
||||||
// Функции для работы с корзиной
|
|
||||||
const addItem = async (item: Omit<CartItem, 'id' | 'selected' | 'favorite'>) => {
|
|
||||||
// Проверяем наличие товара на складе перед добавлением
|
|
||||||
const existingItemIndex = state.items.findIndex(
|
|
||||||
existingItem =>
|
|
||||||
(existingItem.productId && existingItem.productId === item.productId) ||
|
|
||||||
(existingItem.offerKey && existingItem.offerKey === item.offerKey)
|
|
||||||
)
|
|
||||||
|
|
||||||
let totalQuantity = item.quantity;
|
|
||||||
if (existingItemIndex >= 0) {
|
|
||||||
const existingItem = state.items[existingItemIndex];
|
|
||||||
totalQuantity = existingItem.quantity + item.quantity;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Проверяем наличие товара на складе
|
|
||||||
const availableStock = parseStock(item.stock);
|
|
||||||
if (availableStock > 0 && totalQuantity > availableStock) {
|
|
||||||
const errorMessage = `Недостаточно товара в наличии. Доступно: ${availableStock} шт., запрошено: ${totalQuantity} шт.`;
|
|
||||||
dispatch({ type: 'SET_ERROR', payload: errorMessage });
|
|
||||||
return { success: false, error: errorMessage };
|
|
||||||
}
|
|
||||||
|
|
||||||
// Если проверка прошла успешно, добавляем товар
|
|
||||||
dispatch({ type: 'ADD_ITEM', payload: item })
|
|
||||||
return { success: true }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const removeItem = (id: string) => {
|
const removeItem = async (id: string) => {
|
||||||
dispatch({ type: 'REMOVE_ITEM', payload: id })
|
try {
|
||||||
}
|
setError('')
|
||||||
|
setState(prev => ({ ...prev, isLoading: true }))
|
||||||
|
|
||||||
const updateQuantity = (id: string, quantity: number) => {
|
console.log('🗑️ Removing item from backend cart:', id)
|
||||||
// Найдем товар для проверки наличия
|
|
||||||
const item = state.items.find(item => item.id === id);
|
const { data } = await removeFromCartMutation({
|
||||||
if (item) {
|
variables: { itemId: id }
|
||||||
const availableStock = parseStock(item.stock);
|
})
|
||||||
if (availableStock > 0 && quantity > availableStock) {
|
|
||||||
// Показываем ошибку, но не изменяем количество
|
if (data?.removeFromCart?.success) {
|
||||||
dispatch({ type: 'SET_ERROR', payload: `Недостаточно товара в наличии. Доступно: ${availableStock} шт.` });
|
// Update local state
|
||||||
return;
|
if (data.removeFromCart.cart) {
|
||||||
|
const backendItems = transformBackendItems(data.removeFromCart.cart.items)
|
||||||
|
const summary = calculateSummary(backendItems)
|
||||||
|
|
||||||
|
setState(prev => ({
|
||||||
|
...prev,
|
||||||
|
items: backendItems,
|
||||||
|
summary,
|
||||||
|
isLoading: false
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
toast.success(data.removeFromCart.message || 'Товар удален из корзины')
|
||||||
|
refetchCart()
|
||||||
|
} else {
|
||||||
|
const errorMessage = data?.removeFromCart?.error || 'Ошибка удаления товара'
|
||||||
|
setError(errorMessage)
|
||||||
|
setState(prev => ({ ...prev, isLoading: false }))
|
||||||
|
toast.error(errorMessage)
|
||||||
}
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('❌ Error removing item from cart:', error)
|
||||||
|
const errorMessage = 'Ошибка удаления товара из корзины'
|
||||||
|
setError(errorMessage)
|
||||||
|
setState(prev => ({ ...prev, isLoading: false }))
|
||||||
|
toast.error(errorMessage)
|
||||||
}
|
}
|
||||||
|
|
||||||
dispatch({ type: 'UPDATE_QUANTITY', payload: { id, quantity } })
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const updateQuantity = async (id: string, quantity: number) => {
|
||||||
|
try {
|
||||||
|
if (quantity < 1) return
|
||||||
|
|
||||||
|
setError('')
|
||||||
|
setState(prev => ({ ...prev, isLoading: true }))
|
||||||
|
|
||||||
|
console.log('📝 Updating item quantity in backend cart:', id, quantity)
|
||||||
|
|
||||||
|
const { data } = await updateQuantityMutation({
|
||||||
|
variables: { itemId: id, quantity }
|
||||||
|
})
|
||||||
|
|
||||||
|
if (data?.updateCartItemQuantity?.success) {
|
||||||
|
// Update local state
|
||||||
|
if (data.updateCartItemQuantity.cart) {
|
||||||
|
const backendItems = transformBackendItems(data.updateCartItemQuantity.cart.items)
|
||||||
|
const summary = calculateSummary(backendItems)
|
||||||
|
|
||||||
|
setState(prev => ({
|
||||||
|
...prev,
|
||||||
|
items: backendItems,
|
||||||
|
summary,
|
||||||
|
isLoading: false
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
toast.success(data.updateCartItemQuantity.message || 'Количество обновлено')
|
||||||
|
refetchCart()
|
||||||
|
} else {
|
||||||
|
const errorMessage = data?.updateCartItemQuantity?.error || 'Ошибка обновления количества'
|
||||||
|
setError(errorMessage)
|
||||||
|
setState(prev => ({ ...prev, isLoading: false }))
|
||||||
|
toast.error(errorMessage)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('❌ Error updating item quantity:', error)
|
||||||
|
const errorMessage = 'Ошибка обновления количества товара'
|
||||||
|
setError(errorMessage)
|
||||||
|
setState(prev => ({ ...prev, isLoading: false }))
|
||||||
|
toast.error(errorMessage)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearCart = async () => {
|
||||||
|
try {
|
||||||
|
setError('')
|
||||||
|
setState(prev => ({ ...prev, isLoading: true }))
|
||||||
|
|
||||||
|
console.log('🧹 Clearing backend cart')
|
||||||
|
|
||||||
|
const { data } = await clearCartMutation()
|
||||||
|
|
||||||
|
if (data?.clearCart?.success) {
|
||||||
|
setState(prev => ({
|
||||||
|
...prev,
|
||||||
|
items: [],
|
||||||
|
summary: calculateSummary([]),
|
||||||
|
isLoading: false
|
||||||
|
}))
|
||||||
|
|
||||||
|
toast.success(data.clearCart.message || 'Корзина очищена')
|
||||||
|
refetchCart()
|
||||||
|
} else {
|
||||||
|
const errorMessage = data?.clearCart?.error || 'Ошибка очистки корзины'
|
||||||
|
setError(errorMessage)
|
||||||
|
setState(prev => ({ ...prev, isLoading: false }))
|
||||||
|
toast.error(errorMessage)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('❌ Error clearing cart:', error)
|
||||||
|
const errorMessage = 'Ошибка очистки корзины'
|
||||||
|
setError(errorMessage)
|
||||||
|
setState(prev => ({ ...prev, isLoading: false }))
|
||||||
|
toast.error(errorMessage)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Local-only operations (not synced with backend)
|
||||||
const toggleSelect = (id: string) => {
|
const toggleSelect = (id: string) => {
|
||||||
dispatch({ type: 'TOGGLE_SELECT', payload: id })
|
setState(prev => ({
|
||||||
|
...prev,
|
||||||
|
items: prev.items.map(item =>
|
||||||
|
item.id === id ? { ...item, selected: !item.selected } : item
|
||||||
|
)
|
||||||
|
}))
|
||||||
}
|
}
|
||||||
|
|
||||||
const toggleFavorite = (id: string) => {
|
const toggleFavorite = (id: string) => {
|
||||||
dispatch({ type: 'TOGGLE_FAVORITE', payload: id })
|
setState(prev => ({
|
||||||
|
...prev,
|
||||||
|
items: prev.items.map(item =>
|
||||||
|
item.id === id ? { ...item, favorite: !item.favorite } : item
|
||||||
|
)
|
||||||
|
}))
|
||||||
}
|
}
|
||||||
|
|
||||||
const updateComment = (id: string, comment: string) => {
|
const updateComment = (id: string, comment: string) => {
|
||||||
dispatch({ type: 'UPDATE_COMMENT', payload: { id, comment } })
|
setState(prev => ({
|
||||||
|
...prev,
|
||||||
|
items: prev.items.map(item =>
|
||||||
|
item.id === id ? { ...item, comment } : item
|
||||||
|
)
|
||||||
|
}))
|
||||||
}
|
}
|
||||||
|
|
||||||
const updateOrderComment = (comment: string) => {
|
const updateOrderComment = (comment: string) => {
|
||||||
dispatch({ type: 'UPDATE_ORDER_COMMENT', payload: comment })
|
setState(prev => ({
|
||||||
|
...prev,
|
||||||
|
orderComment: comment
|
||||||
|
}))
|
||||||
}
|
}
|
||||||
|
|
||||||
const selectAll = () => {
|
const selectAll = () => {
|
||||||
dispatch({ type: 'SELECT_ALL' })
|
setState(prev => ({
|
||||||
|
...prev,
|
||||||
|
items: prev.items.map(item => ({ ...item, selected: true }))
|
||||||
|
}))
|
||||||
}
|
}
|
||||||
|
|
||||||
const removeAll = () => {
|
const removeAll = () => {
|
||||||
dispatch({ type: 'REMOVE_ALL' })
|
clearCart()
|
||||||
}
|
}
|
||||||
|
|
||||||
const removeSelected = () => {
|
const removeSelected = async () => {
|
||||||
dispatch({ type: 'REMOVE_SELECTED' })
|
const selectedItems = state.items.filter(item => item.selected)
|
||||||
}
|
for (const item of selectedItems) {
|
||||||
|
await removeItem(item.id)
|
||||||
const updateDelivery = (delivery: Partial<DeliveryInfo>) => {
|
|
||||||
dispatch({ type: 'UPDATE_DELIVERY', payload: delivery })
|
|
||||||
}
|
|
||||||
|
|
||||||
const clearCart = () => {
|
|
||||||
dispatch({ type: 'CLEAR_CART' })
|
|
||||||
// Очищаем localStorage при очистке корзины
|
|
||||||
if (typeof window !== 'undefined') {
|
|
||||||
localStorage.removeItem('cartState')
|
|
||||||
localStorage.removeItem('cart')
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const updateDelivery = (delivery: Partial<DeliveryInfo>) => {
|
||||||
|
setState(prev => ({
|
||||||
|
...prev,
|
||||||
|
delivery: { ...prev.delivery, ...delivery }
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
const clearError = () => {
|
const clearError = () => {
|
||||||
dispatch({ type: 'SET_ERROR', payload: '' })
|
setError('')
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if item is in cart (using backend data)
|
||||||
|
const isInCart = (productId?: string, offerKey?: string, article?: string, brand?: string): boolean => {
|
||||||
|
return state.items.some(item => {
|
||||||
|
if (productId && item.productId === productId) return true
|
||||||
|
if (offerKey && item.offerKey === offerKey) return true
|
||||||
|
if (article && brand && item.article === article && item.brand === brand) return true
|
||||||
|
return false
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const contextValue: CartContextType = {
|
const contextValue: CartContextType = {
|
||||||
state,
|
state: {
|
||||||
|
...state,
|
||||||
|
error
|
||||||
|
},
|
||||||
addItem,
|
addItem,
|
||||||
removeItem,
|
removeItem,
|
||||||
updateQuantity,
|
updateQuantity,
|
||||||
@ -456,7 +405,8 @@ export const CartProvider: React.FC<{ children: React.ReactNode }> = ({ children
|
|||||||
removeSelected,
|
removeSelected,
|
||||||
updateDelivery,
|
updateDelivery,
|
||||||
clearCart,
|
clearCart,
|
||||||
clearError
|
clearError,
|
||||||
|
isInCart
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -466,7 +416,6 @@ export const CartProvider: React.FC<{ children: React.ReactNode }> = ({ children
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Хук для использования контекста корзины
|
// Хук для использования контекста корзины
|
||||||
export const useCart = (): CartContextType => {
|
export const useCart = (): CartContextType => {
|
||||||
const context = useContext(CartContext)
|
const context = useContext(CartContext)
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import { useState, useCallback } from 'react';
|
import { useState, useCallback } from 'react';
|
||||||
import { useLazyQuery } from '@apollo/client';
|
import { useLazyQuery } from '@apollo/client';
|
||||||
import { SEARCH_PRODUCT_OFFERS } from '@/lib/graphql';
|
import { SEARCH_PRODUCT_OFFERS } from '@/lib/graphql';
|
||||||
|
import { useCart } from '@/contexts/CartContext';
|
||||||
|
|
||||||
interface ProductOffer {
|
interface ProductOffer {
|
||||||
offerKey: string;
|
offerKey: string;
|
||||||
@ -15,6 +16,7 @@ interface ProductOffer {
|
|||||||
warehouse: string;
|
warehouse: string;
|
||||||
supplier: string;
|
supplier: string;
|
||||||
canPurchase: boolean;
|
canPurchase: boolean;
|
||||||
|
isInCart: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ProductPriceData {
|
interface ProductPriceData {
|
||||||
@ -25,12 +27,22 @@ interface ProductPriceData {
|
|||||||
externalOffers: ProductOffer[];
|
externalOffers: ProductOffer[];
|
||||||
analogs: number;
|
analogs: number;
|
||||||
hasInternalStock: boolean;
|
hasInternalStock: boolean;
|
||||||
|
isInCart: boolean;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface CartItemInput {
|
||||||
|
productId?: string;
|
||||||
|
offerKey?: string;
|
||||||
|
article: string;
|
||||||
|
brand: string;
|
||||||
|
quantity: number;
|
||||||
|
}
|
||||||
|
|
||||||
interface ProductPriceVariables {
|
interface ProductPriceVariables {
|
||||||
articleNumber: string;
|
articleNumber: string;
|
||||||
brand: string;
|
brand: string;
|
||||||
|
cartItems?: CartItemInput[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export const useProductPrices = () => {
|
export const useProductPrices = () => {
|
||||||
@ -38,6 +50,7 @@ export const useProductPrices = () => {
|
|||||||
const [loadingPrices, setLoadingPrices] = useState<Set<string>>(new Set());
|
const [loadingPrices, setLoadingPrices] = useState<Set<string>>(new Set());
|
||||||
const [loadedPrices, setLoadedPrices] = useState<Set<string>>(new Set());
|
const [loadedPrices, setLoadedPrices] = useState<Set<string>>(new Set());
|
||||||
|
|
||||||
|
const { state: cartState } = useCart();
|
||||||
const [searchOffers] = useLazyQuery<ProductPriceData, ProductPriceVariables>(SEARCH_PRODUCT_OFFERS);
|
const [searchOffers] = useLazyQuery<ProductPriceData, ProductPriceVariables>(SEARCH_PRODUCT_OFFERS);
|
||||||
|
|
||||||
const loadPrice = useCallback(async (product: { code: string; brand: string; id: string }) => {
|
const loadPrice = useCallback(async (product: { code: string; brand: string; id: string }) => {
|
||||||
@ -52,10 +65,22 @@ export const useProductPrices = () => {
|
|||||||
setLoadingPrices(prev => new Set([...prev, key]));
|
setLoadingPrices(prev => new Set([...prev, key]));
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
// Преобразуем товары корзины в формат для запроса
|
||||||
|
const cartItems: CartItemInput[] = cartState.items
|
||||||
|
.filter(item => item.article && item.brand) // Фильтруем товары с обязательными полями
|
||||||
|
.map(item => ({
|
||||||
|
productId: item.productId,
|
||||||
|
offerKey: item.offerKey,
|
||||||
|
article: item.article!,
|
||||||
|
brand: item.brand!,
|
||||||
|
quantity: item.quantity
|
||||||
|
}));
|
||||||
|
|
||||||
const result = await searchOffers({
|
const result = await searchOffers({
|
||||||
variables: {
|
variables: {
|
||||||
articleNumber: product.code,
|
articleNumber: product.code,
|
||||||
brand: product.brand
|
brand: product.brand,
|
||||||
|
cartItems
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -20,16 +20,25 @@ const authLink = setContext((_, { headers }) => {
|
|||||||
const user = JSON.parse(userData);
|
const user = JSON.parse(userData);
|
||||||
// Создаем токен в формате, который ожидает CMS
|
// Создаем токен в формате, который ожидает CMS
|
||||||
token = `client_${user.id}`;
|
token = `client_${user.id}`;
|
||||||
console.log('Apollo Client: создан токен:', token);
|
console.log('Apollo Client: создан токен для авторизованного пользователя:', token);
|
||||||
console.log('Apollo Client: user data:', user);
|
|
||||||
console.log('Apollo Client: заголовки:', { authorization: `Bearer ${token}` });
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Apollo Client: ошибка парсинга userData:', error);
|
console.error('Apollo Client: ошибка парсинга userData:', error);
|
||||||
localStorage.removeItem('userData');
|
localStorage.removeItem('userData');
|
||||||
localStorage.removeItem('authToken');
|
localStorage.removeItem('authToken');
|
||||||
}
|
}
|
||||||
} else {
|
}
|
||||||
console.log('Apollo Client: userData не найден в localStorage');
|
|
||||||
|
// Если нет авторизованного пользователя, создаем анонимную сессию для корзины
|
||||||
|
if (!token) {
|
||||||
|
let sessionId = localStorage.getItem('anonymousSessionId');
|
||||||
|
if (!sessionId) {
|
||||||
|
// Генерируем уникальный ID сессии
|
||||||
|
sessionId = 'anon_' + Math.random().toString(36).substr(2, 9) + '_' + Date.now();
|
||||||
|
localStorage.setItem('anonymousSessionId', sessionId);
|
||||||
|
console.log('Apollo Client: создана новая анонимная сессия:', sessionId);
|
||||||
|
}
|
||||||
|
token = `client_${sessionId}`;
|
||||||
|
console.log('Apollo Client: используется анонимная сессия:', token);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1125,14 +1125,25 @@ export const GET_LAXIMO_UNIT_IMAGE_MAP = gql`
|
|||||||
`
|
`
|
||||||
|
|
||||||
export const SEARCH_PRODUCT_OFFERS = gql`
|
export const SEARCH_PRODUCT_OFFERS = gql`
|
||||||
query SearchProductOffers($articleNumber: String!, $brand: String!) {
|
query SearchProductOffers($articleNumber: String!, $brand: String!, $cartItems: [CartItemInput!]) {
|
||||||
searchProductOffers(articleNumber: $articleNumber, brand: $brand) {
|
searchProductOffers(articleNumber: $articleNumber, brand: $brand, cartItems: $cartItems) {
|
||||||
articleNumber
|
articleNumber
|
||||||
brand
|
brand
|
||||||
name
|
name
|
||||||
description
|
description
|
||||||
hasInternalStock
|
hasInternalStock
|
||||||
totalOffers
|
totalOffers
|
||||||
|
isInCart
|
||||||
|
stockCalculation {
|
||||||
|
totalInternalStock
|
||||||
|
totalExternalStock
|
||||||
|
availableInternalOffers
|
||||||
|
availableExternalOffers
|
||||||
|
hasInternalStock
|
||||||
|
hasExternalStock
|
||||||
|
totalStock
|
||||||
|
hasAnyStock
|
||||||
|
}
|
||||||
images {
|
images {
|
||||||
id
|
id
|
||||||
url
|
url
|
||||||
@ -1168,6 +1179,7 @@ export const SEARCH_PRODUCT_OFFERS = gql`
|
|||||||
available
|
available
|
||||||
rating
|
rating
|
||||||
supplier
|
supplier
|
||||||
|
isInCart
|
||||||
}
|
}
|
||||||
externalOffers {
|
externalOffers {
|
||||||
offerKey
|
offerKey
|
||||||
@ -1185,6 +1197,7 @@ export const SEARCH_PRODUCT_OFFERS = gql`
|
|||||||
weight
|
weight
|
||||||
volume
|
volume
|
||||||
canPurchase
|
canPurchase
|
||||||
|
isInCart
|
||||||
}
|
}
|
||||||
analogs {
|
analogs {
|
||||||
brand
|
brand
|
||||||
@ -1192,6 +1205,16 @@ export const SEARCH_PRODUCT_OFFERS = gql`
|
|||||||
name
|
name
|
||||||
type
|
type
|
||||||
}
|
}
|
||||||
|
stockCalculation {
|
||||||
|
totalInternalStock
|
||||||
|
totalExternalStock
|
||||||
|
availableInternalOffers
|
||||||
|
availableExternalOffers
|
||||||
|
hasInternalStock
|
||||||
|
hasExternalStock
|
||||||
|
totalStock
|
||||||
|
hasAnyStock
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
@ -1738,4 +1761,164 @@ export const GET_NEW_ARRIVALS = gql`
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`;
|
||||||
|
|
||||||
|
// Cart mutations and queries
|
||||||
|
export const GET_CART = gql`
|
||||||
|
query GetCart {
|
||||||
|
getCart {
|
||||||
|
id
|
||||||
|
clientId
|
||||||
|
items {
|
||||||
|
id
|
||||||
|
productId
|
||||||
|
offerKey
|
||||||
|
name
|
||||||
|
description
|
||||||
|
brand
|
||||||
|
article
|
||||||
|
price
|
||||||
|
currency
|
||||||
|
quantity
|
||||||
|
stock
|
||||||
|
deliveryTime
|
||||||
|
warehouse
|
||||||
|
supplier
|
||||||
|
isExternal
|
||||||
|
image
|
||||||
|
createdAt
|
||||||
|
updatedAt
|
||||||
|
}
|
||||||
|
createdAt
|
||||||
|
updatedAt
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ADD_TO_CART = gql`
|
||||||
|
mutation AddToCart($input: AddToCartInput!) {
|
||||||
|
addToCart(input: $input) {
|
||||||
|
success
|
||||||
|
message
|
||||||
|
error
|
||||||
|
cart {
|
||||||
|
id
|
||||||
|
clientId
|
||||||
|
items {
|
||||||
|
id
|
||||||
|
productId
|
||||||
|
offerKey
|
||||||
|
name
|
||||||
|
description
|
||||||
|
brand
|
||||||
|
article
|
||||||
|
price
|
||||||
|
currency
|
||||||
|
quantity
|
||||||
|
stock
|
||||||
|
deliveryTime
|
||||||
|
warehouse
|
||||||
|
supplier
|
||||||
|
isExternal
|
||||||
|
image
|
||||||
|
createdAt
|
||||||
|
updatedAt
|
||||||
|
}
|
||||||
|
createdAt
|
||||||
|
updatedAt
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const REMOVE_FROM_CART = gql`
|
||||||
|
mutation RemoveFromCart($itemId: ID!) {
|
||||||
|
removeFromCart(itemId: $itemId) {
|
||||||
|
success
|
||||||
|
message
|
||||||
|
error
|
||||||
|
cart {
|
||||||
|
id
|
||||||
|
clientId
|
||||||
|
items {
|
||||||
|
id
|
||||||
|
productId
|
||||||
|
offerKey
|
||||||
|
name
|
||||||
|
description
|
||||||
|
brand
|
||||||
|
article
|
||||||
|
price
|
||||||
|
currency
|
||||||
|
quantity
|
||||||
|
stock
|
||||||
|
deliveryTime
|
||||||
|
warehouse
|
||||||
|
supplier
|
||||||
|
isExternal
|
||||||
|
image
|
||||||
|
}
|
||||||
|
createdAt
|
||||||
|
updatedAt
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const UPDATE_CART_ITEM_QUANTITY = gql`
|
||||||
|
mutation UpdateCartItemQuantity($itemId: ID!, $quantity: Int!) {
|
||||||
|
updateCartItemQuantity(itemId: $itemId, quantity: $quantity) {
|
||||||
|
success
|
||||||
|
message
|
||||||
|
error
|
||||||
|
cart {
|
||||||
|
id
|
||||||
|
clientId
|
||||||
|
items {
|
||||||
|
id
|
||||||
|
productId
|
||||||
|
offerKey
|
||||||
|
name
|
||||||
|
description
|
||||||
|
brand
|
||||||
|
article
|
||||||
|
price
|
||||||
|
currency
|
||||||
|
quantity
|
||||||
|
stock
|
||||||
|
deliveryTime
|
||||||
|
warehouse
|
||||||
|
supplier
|
||||||
|
isExternal
|
||||||
|
image
|
||||||
|
}
|
||||||
|
createdAt
|
||||||
|
updatedAt
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const CLEAR_CART = gql`
|
||||||
|
mutation ClearCart {
|
||||||
|
clearCart {
|
||||||
|
success
|
||||||
|
message
|
||||||
|
error
|
||||||
|
cart {
|
||||||
|
id
|
||||||
|
clientId
|
||||||
|
items {
|
||||||
|
id
|
||||||
|
name
|
||||||
|
brand
|
||||||
|
article
|
||||||
|
quantity
|
||||||
|
price
|
||||||
|
}
|
||||||
|
createdAt
|
||||||
|
updatedAt
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
@ -1,8 +1,14 @@
|
|||||||
import { PartsIndexCatalogsResponse, PartsIndexGroup, PartsIndexEntityInfoResponse } from '@/types/partsindex';
|
import { PartsIndexCatalogsResponse, PartsIndexGroup, PartsIndexEntityInfoResponse } from '@/types/partsindex';
|
||||||
|
|
||||||
const PARTS_INDEX_API_BASE = process.env.PARTSAPI_URL+"/v1" || 'https://api.parts-index.com/v1';
|
const PARTS_INDEX_API_BASE = process.env.PARTSAPI_URL || 'https://api.parts-index.com';
|
||||||
const API_KEY = 'PI-E1C0ADB7-E4A8-4960-94A0-4D9C0A074DAE';
|
const API_KEY = 'PI-E1C0ADB7-E4A8-4960-94A0-4D9C0A074DAE';
|
||||||
|
|
||||||
|
// Debug logging for development
|
||||||
|
if (process.env.NODE_ENV === 'development') {
|
||||||
|
console.log('🔍 PartsIndex API Base URL:', PARTS_INDEX_API_BASE);
|
||||||
|
console.log('🔍 Environment variable NEXT_PUBLIC_PARTSAPI_URL:', process.env.NEXT_PUBLIC_PARTSAPI_URL);
|
||||||
|
}
|
||||||
|
|
||||||
class PartsIndexService {
|
class PartsIndexService {
|
||||||
/**
|
/**
|
||||||
* Получить список каталогов
|
* Получить список каталогов
|
||||||
|
|||||||
@ -58,14 +58,12 @@ export default function App({ Component, pageProps }: AppProps) {
|
|||||||
style: {
|
style: {
|
||||||
background: '#363636',
|
background: '#363636',
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
marginTop: '80px', // Отступ сверху, чтобы не закрывать кнопки меню
|
|
||||||
},
|
},
|
||||||
success: {
|
success: {
|
||||||
duration: 3000,
|
duration: 3000,
|
||||||
style: {
|
style: {
|
||||||
background: '#22c55e', // Зеленый фон для успешных уведомлений
|
background: '#22c55e', // Зеленый фон для успешных уведомлений
|
||||||
color: '#fff', // Белый текст
|
color: '#fff', // Белый текст
|
||||||
marginTop: '80px', // Отступ сверху для успешных уведомлений
|
|
||||||
},
|
},
|
||||||
iconTheme: {
|
iconTheme: {
|
||||||
primary: '#22c55e',
|
primary: '#22c55e',
|
||||||
@ -75,7 +73,8 @@ export default function App({ Component, pageProps }: AppProps) {
|
|||||||
error: {
|
error: {
|
||||||
duration: 5000,
|
duration: 5000,
|
||||||
style: {
|
style: {
|
||||||
marginTop: '80px', // Отступ сверху для ошибок
|
background: '#ef4444',
|
||||||
|
color: '#fff',
|
||||||
},
|
},
|
||||||
iconTheme: {
|
iconTheme: {
|
||||||
primary: '#ef4444',
|
primary: '#ef4444',
|
||||||
@ -83,6 +82,9 @@ export default function App({ Component, pageProps }: AppProps) {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
|
containerStyle={{
|
||||||
|
top: '80px', // Отступ для всего контейнера toast'ов
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
<Script src="/js/webflow.js" strategy="beforeInteractive" />
|
<Script src="/js/webflow.js" strategy="beforeInteractive" />
|
||||||
<Script
|
<Script
|
||||||
|
|||||||
@ -1173,6 +1173,7 @@ export default function Catalog() {
|
|||||||
productId={entity.id}
|
productId={entity.id}
|
||||||
artId={entity.id}
|
artId={entity.id}
|
||||||
offerKey={priceData?.offerKey}
|
offerKey={priceData?.offerKey}
|
||||||
|
isInCart={priceData?.isInCart}
|
||||||
onAddToCart={async () => {
|
onAddToCart={async () => {
|
||||||
// Если цена не загружена, загружаем её и добавляем в корзину
|
// Если цена не загружена, загружаем её и добавляем в корзину
|
||||||
if (!priceData && !isLoadingPriceData) {
|
if (!priceData && !isLoadingPriceData) {
|
||||||
|
|||||||
@ -16,6 +16,7 @@ import MobileMenuBottomSection from '../components/MobileMenuBottomSection';
|
|||||||
import { SEARCH_PRODUCT_OFFERS, GET_ANALOG_OFFERS } from "@/lib/graphql";
|
import { SEARCH_PRODUCT_OFFERS, GET_ANALOG_OFFERS } from "@/lib/graphql";
|
||||||
import { useArticleImage } from "@/hooks/useArticleImage";
|
import { useArticleImage } from "@/hooks/useArticleImage";
|
||||||
import { usePartsIndexEntityInfo } from "@/hooks/usePartsIndex";
|
import { usePartsIndexEntityInfo } from "@/hooks/usePartsIndex";
|
||||||
|
import { useCart } from "@/contexts/CartContext";
|
||||||
import MetaTags from "@/components/MetaTags";
|
import MetaTags from "@/components/MetaTags";
|
||||||
import { createProductMeta } from "@/lib/meta-config";
|
import { createProductMeta } from "@/lib/meta-config";
|
||||||
|
|
||||||
@ -189,7 +190,28 @@ const getBestOffers = (offers: any[]) => {
|
|||||||
|
|
||||||
// Убрано: функция сортировки теперь в CoreProductCard
|
// Убрано: функция сортировки теперь в CoreProductCard
|
||||||
|
|
||||||
const transformOffersForCard = (offers: any[]) => {
|
// Функция для проверки наличия товара на складе
|
||||||
|
const checkProductStock = (result: any): boolean => {
|
||||||
|
if (!result) return false;
|
||||||
|
|
||||||
|
// Используем новые данные stockCalculation если доступны
|
||||||
|
if (result.stockCalculation) {
|
||||||
|
return result.stockCalculation.hasAnyStock;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fallback к старой логике для обратной совместимости
|
||||||
|
const hasInternalStock = result.internalOffers?.some((offer: any) =>
|
||||||
|
offer.quantity > 0 && offer.available
|
||||||
|
);
|
||||||
|
|
||||||
|
const hasExternalStock = result.externalOffers?.some((offer: any) =>
|
||||||
|
offer.quantity > 0
|
||||||
|
);
|
||||||
|
|
||||||
|
return hasInternalStock || hasExternalStock;
|
||||||
|
};
|
||||||
|
|
||||||
|
const transformOffersForCard = (offers: any[], hasStock: boolean = true) => {
|
||||||
return offers.map(offer => {
|
return offers.map(offer => {
|
||||||
const isExternal = offer.type === 'external';
|
const isExternal = offer.type === 'external';
|
||||||
const deliveryDays = isExternal ? offer.deliveryTime : offer.deliveryDays;
|
const deliveryDays = isExternal ? offer.deliveryTime : offer.deliveryDays;
|
||||||
@ -207,6 +229,7 @@ const transformOffersForCard = (offers: any[]) => {
|
|||||||
warehouse: offer.warehouse,
|
warehouse: offer.warehouse,
|
||||||
supplier: offer.supplier,
|
supplier: offer.supplier,
|
||||||
deliveryTime: deliveryDays,
|
deliveryTime: deliveryDays,
|
||||||
|
hasStock, // Добавляем информацию о наличии
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@ -214,6 +237,7 @@ const transformOffersForCard = (offers: any[]) => {
|
|||||||
export default function SearchResult() {
|
export default function SearchResult() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { article, brand, q, artId } = router.query;
|
const { article, brand, q, artId } = router.query;
|
||||||
|
const { state: cartState } = useCart();
|
||||||
|
|
||||||
// Убрано: глобальная сортировка теперь не используется
|
// Убрано: глобальная сортировка теперь не используется
|
||||||
const [showFiltersMobile, setShowFiltersMobile] = useState(false);
|
const [showFiltersMobile, setShowFiltersMobile] = useState(false);
|
||||||
@ -241,10 +265,20 @@ export default function SearchResult() {
|
|||||||
setVisibleAnalogsCount(ANALOGS_CHUNK_SIZE);
|
setVisibleAnalogsCount(ANALOGS_CHUNK_SIZE);
|
||||||
}, [article, brand]);
|
}, [article, brand]);
|
||||||
|
|
||||||
|
// Подготавливаем данные корзины для отправки на backend
|
||||||
|
const cartItems = cartState.items.map(item => ({
|
||||||
|
productId: item.productId,
|
||||||
|
offerKey: item.offerKey,
|
||||||
|
article: item.article || '',
|
||||||
|
brand: item.brand || '',
|
||||||
|
quantity: item.quantity
|
||||||
|
}));
|
||||||
|
|
||||||
const { data, loading, error } = useQuery(SEARCH_PRODUCT_OFFERS, {
|
const { data, loading, error } = useQuery(SEARCH_PRODUCT_OFFERS, {
|
||||||
variables: {
|
variables: {
|
||||||
articleNumber: searchQuery,
|
articleNumber: searchQuery,
|
||||||
brand: brandQuery || '' // Используем пустую строку если бренд не указан
|
brand: brandQuery || '', // Используем пустую строку если бренд не указан
|
||||||
|
cartItems: cartItems
|
||||||
},
|
},
|
||||||
skip: !searchQuery,
|
skip: !searchQuery,
|
||||||
errorPolicy: 'all'
|
errorPolicy: 'all'
|
||||||
@ -668,8 +702,10 @@ export default function SearchResult() {
|
|||||||
{/* Основной товар */}
|
{/* Основной товар */}
|
||||||
<div className="w-layout-vflex flex-block-14-copy">
|
<div className="w-layout-vflex flex-block-14-copy">
|
||||||
{hasOffers && result && (() => {
|
{hasOffers && result && (() => {
|
||||||
|
const hasMainProductStock = checkProductStock(result);
|
||||||
const mainProductOffers = transformOffersForCard(
|
const mainProductOffers = transformOffersForCard(
|
||||||
filteredOffers.filter(o => !o.isAnalog)
|
filteredOffers.filter(o => !o.isAnalog),
|
||||||
|
hasMainProductStock
|
||||||
);
|
);
|
||||||
|
|
||||||
// Не показываем основной товар, если у него нет предложений
|
// Не показываем основной товар, если у него нет предложений
|
||||||
@ -690,6 +726,7 @@ export default function SearchResult() {
|
|||||||
offers={mainProductOffers}
|
offers={mainProductOffers}
|
||||||
showMoreText={mainProductOffers.length < filteredOffers.filter(o => !o.isAnalog).length ? "Показать еще" : undefined}
|
showMoreText={mainProductOffers.length < filteredOffers.filter(o => !o.isAnalog).length ? "Показать еще" : undefined}
|
||||||
partsIndexPowered={!!partsIndexImage}
|
partsIndexPowered={!!partsIndexImage}
|
||||||
|
hasStock={hasMainProductStock}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
@ -795,9 +832,11 @@ export default function SearchResult() {
|
|||||||
return true;
|
return true;
|
||||||
});
|
});
|
||||||
|
|
||||||
return transformOffersForCard(filteredAnalogOffers);
|
return transformOffersForCard(filteredAnalogOffers, checkProductStock(loadedAnalogData));
|
||||||
})() : [];
|
})() : [];
|
||||||
|
|
||||||
|
const hasAnalogStock = loadedAnalogData ? checkProductStock(loadedAnalogData) : true;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CoreProductCard
|
<CoreProductCard
|
||||||
key={analogKey}
|
key={analogKey}
|
||||||
@ -807,6 +846,7 @@ export default function SearchResult() {
|
|||||||
offers={analogOffers}
|
offers={analogOffers}
|
||||||
isAnalog
|
isAnalog
|
||||||
isLoadingOffers={!loadedAnalogData}
|
isLoadingOffers={!loadedAnalogData}
|
||||||
|
hasStock={hasAnalogStock}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
|
|||||||
@ -379,3 +379,40 @@ button,
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Стили для состояния "товар в корзине" */
|
||||||
|
.button-icon.in-cart {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-icon.in-cart::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(156, 163, 175, 0.2);
|
||||||
|
pointer-events: none;
|
||||||
|
border-radius: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-icon.in-cart:hover {
|
||||||
|
opacity: 0.8 !important;
|
||||||
|
background-color: #6b7280 !important;
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Анимация для добавления в корзину */
|
||||||
|
.button-icon:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
transition: transform 0.1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Убеждаемся, что иконка корзины видна в сером состоянии */
|
||||||
|
.button-icon.in-cart .image-11,
|
||||||
|
.button-icon.in-cart svg {
|
||||||
|
filter: brightness(0.7) contrast(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@ -66,4 +66,5 @@ export interface CartContextType {
|
|||||||
updateDelivery: (delivery: Partial<DeliveryInfo>) => void
|
updateDelivery: (delivery: Partial<DeliveryInfo>) => void
|
||||||
clearCart: () => void
|
clearCart: () => void
|
||||||
clearError: () => void
|
clearError: () => void
|
||||||
|
isInCart: (productId?: string, offerKey?: string, article?: string, brand?: string) => boolean
|
||||||
}
|
}
|
||||||
@ -5,6 +5,7 @@ FRONTEND_PORT=3000
|
|||||||
NEXT_PUBLIC_CMS_GRAPHQL_URL=https://cms.protekauto.ru/api/graphql
|
NEXT_PUBLIC_CMS_GRAPHQL_URL=https://cms.protekauto.ru/api/graphql
|
||||||
NEXT_PUBLIC_UPLOAD_URL=https://cms.protekauto.ru/upload
|
NEXT_PUBLIC_UPLOAD_URL=https://cms.protekauto.ru/upload
|
||||||
NEXT_PUBLIC_MAINTENANCE_MODE=true
|
NEXT_PUBLIC_MAINTENANCE_MODE=true
|
||||||
|
NEXT_PUBLIC_PARTSAPI_URL=https://api.parts-index.com
|
||||||
|
|
||||||
# Build Configuration
|
# Build Configuration
|
||||||
NODE_ENV=production
|
NODE_ENV=production
|
||||||
|
|||||||
Reference in New Issue
Block a user