Merge branch 'main' of https://gittea.biveki.ru/Sfera/sfera
This commit is contained in:
Veronika Smirnova
@ -8,6 +8,8 @@ import { Badge } from '@/components/ui/badge'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||
import { Calendar as CalendarComponent } from '@/components/ui/calendar'
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
|
||||
import { Sidebar } from '@/components/dashboard/sidebar'
|
||||
import { useSidebar } from '@/hooks/useSidebar'
|
||||
import {
|
||||
@ -34,6 +36,8 @@ import { apolloClient } from '@/lib/apollo-client'
|
||||
import { GET_MY_COUNTERPARTIES, GET_COUNTERPARTY_SERVICES, GET_COUNTERPARTY_SUPPLIES } from '@/graphql/queries'
|
||||
import { CREATE_WILDBERRIES_SUPPLY } from '@/graphql/mutations'
|
||||
import { toast } from 'sonner'
|
||||
import { format } from 'date-fns'
|
||||
import { ru } from 'date-fns/locale'
|
||||
import { SelectedCard, FulfillmentService, ConsumableService, WildberriesCard } from '@/types/supplies'
|
||||
|
||||
|
||||
@ -56,8 +60,10 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [wbCards, setWbCards] = useState<WildberriesCard[]>([])
|
||||
const [selectedCards, setSelectedCards] = useState<SelectedCard[]>([])
|
||||
const [selectedCards, setSelectedCards] = useState<SelectedCard[]>([]) // Товары в корзине
|
||||
const [preparingCards, setPreparingCards] = useState<SelectedCard[]>([]) // Товары, готовящиеся к добавлению
|
||||
const [showSummary, setShowSummary] = useState(false)
|
||||
const [globalDeliveryDate, setGlobalDeliveryDate] = useState<Date | undefined>(undefined)
|
||||
const [fulfillmentServices, setFulfillmentServices] = useState<FulfillmentService[]>([])
|
||||
const [organizationServices, setOrganizationServices] = useState<{[orgId: string]: Array<{id: string, name: string, description?: string, price: number}>}>({})
|
||||
const [organizationSupplies, setOrganizationSupplies] = useState<{[orgId: string]: Array<{id: string, name: string, description?: string, price: number}>}>({})
|
||||
@ -436,7 +442,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
||||
const filteredCards = mockCards.filter(card =>
|
||||
card.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
card.brand.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
card.vendorCode.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
card.nmID.toString().includes(searchTerm.toLowerCase()) ||
|
||||
card.object?.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
)
|
||||
|
||||
@ -449,7 +455,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
||||
const filteredCards = mockCards.filter(card =>
|
||||
card.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
card.brand.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
card.vendorCode.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
card.nmID.toString().includes(searchTerm.toLowerCase()) ||
|
||||
card.object?.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
)
|
||||
setWbCards(filteredCards)
|
||||
@ -460,7 +466,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
||||
}
|
||||
|
||||
const updateCardSelection = (card: WildberriesCard, field: keyof SelectedCard, value: string | number | string[]) => {
|
||||
setSelectedCards(prev => {
|
||||
setPreparingCards(prev => {
|
||||
const existing = prev.find(sc => sc.card.nmID === card.nmID)
|
||||
|
||||
if (field === 'selectedQuantity' && typeof value === 'number' && value === 0) {
|
||||
@ -468,10 +474,15 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
||||
}
|
||||
|
||||
if (existing) {
|
||||
const updatedCard = { ...existing, [field]: value }
|
||||
|
||||
// При изменении количества сбрасываем цену, чтобы пользователь ввел новую
|
||||
if (field === 'selectedQuantity' && typeof value === 'number' && existing.customPrice > 0) {
|
||||
updatedCard.customPrice = 0
|
||||
}
|
||||
|
||||
return prev.map(sc =>
|
||||
sc.card.nmID === card.nmID
|
||||
? { ...sc, [field]: value }
|
||||
: sc
|
||||
sc.card.nmID === card.nmID ? updatedCard : sc
|
||||
)
|
||||
} else if (field === 'selectedQuantity' && typeof value === 'number' && value > 0) {
|
||||
const newSelectedCard: SelectedCard = {
|
||||
@ -496,11 +507,73 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
||||
})
|
||||
}
|
||||
|
||||
// Функция для получения цены за единицу товара
|
||||
const getSelectedUnitPrice = (card: WildberriesCard): number => {
|
||||
const selected = preparingCards.find(sc => sc.card.nmID === card.nmID)
|
||||
if (!selected || selected.selectedQuantity === 0) return 0
|
||||
return selected.customPrice / selected.selectedQuantity
|
||||
}
|
||||
|
||||
// Функция для получения общей стоимости товара
|
||||
const getSelectedTotalPrice = (card: WildberriesCard): number => {
|
||||
const selected = preparingCards.find(sc => sc.card.nmID === card.nmID)
|
||||
return selected ? selected.customPrice : 0
|
||||
}
|
||||
|
||||
const getSelectedQuantity = (card: WildberriesCard): number => {
|
||||
const selected = selectedCards.find(sc => sc.card.nmID === card.nmID)
|
||||
const selected = preparingCards.find(sc => sc.card.nmID === card.nmID)
|
||||
return selected ? selected.selectedQuantity : 0
|
||||
}
|
||||
|
||||
// Функция для добавления подготовленных товаров в корзину
|
||||
const addToCart = () => {
|
||||
const validCards = preparingCards.filter(card =>
|
||||
card.selectedQuantity > 0 && card.customPrice > 0
|
||||
)
|
||||
|
||||
if (validCards.length === 0) {
|
||||
toast.error('Выберите товары и укажите цены')
|
||||
return
|
||||
}
|
||||
|
||||
if (!globalDeliveryDate) {
|
||||
toast.error('Выберите дату поставки')
|
||||
return
|
||||
}
|
||||
|
||||
setSelectedCards(prev => {
|
||||
const newCards = [...prev]
|
||||
validCards.forEach(prepCard => {
|
||||
const cardWithDate = {
|
||||
...prepCard,
|
||||
deliveryDate: globalDeliveryDate.toISOString().split('T')[0]
|
||||
}
|
||||
const existingIndex = newCards.findIndex(sc => sc.card.nmID === prepCard.card.nmID)
|
||||
if (existingIndex >= 0) {
|
||||
// Обновляем существующий товар
|
||||
newCards[existingIndex] = cardWithDate
|
||||
} else {
|
||||
// Добавляем новый товар
|
||||
newCards.push(cardWithDate)
|
||||
}
|
||||
})
|
||||
return newCards
|
||||
})
|
||||
|
||||
// Очищаем подготовленные товары
|
||||
setPreparingCards([])
|
||||
toast.success(`Добавлено ${validCards.length} товар(ов) в корзину`)
|
||||
}
|
||||
|
||||
// Функции подсчета для подготовленных товаров
|
||||
const getPreparingTotalItems = () => {
|
||||
return preparingCards.reduce((sum, card) => sum + card.selectedQuantity, 0)
|
||||
}
|
||||
|
||||
const getPreparingTotalAmount = () => {
|
||||
return preparingCards.reduce((sum, card) => sum + card.customPrice, 0)
|
||||
}
|
||||
|
||||
const formatCurrency = (amount: number) => {
|
||||
return new Intl.NumberFormat('ru-RU', {
|
||||
style: 'currency',
|
||||
@ -665,7 +738,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
||||
<div className="flex-1 space-y-4">
|
||||
<div>
|
||||
<h3 className="text-white font-medium">{sc.card.title}</h3>
|
||||
<p className="text-white/60 text-sm">{sc.card.vendorCode}</p>
|
||||
<p className="text-white/60 text-sm">WB: {sc.card.nmID}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
@ -734,15 +807,6 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
||||
return null
|
||||
})()}
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-white/60 text-sm">Дата поставки:</label>
|
||||
<Input
|
||||
type="date"
|
||||
value={sc.deliveryDate}
|
||||
onChange={(e) => updateCardSelection(sc.card, 'deliveryDate', e.target.value)}
|
||||
className="bg-white/5 border-white/20 text-white mt-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Услуги */}
|
||||
@ -966,24 +1030,92 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
||||
</div>
|
||||
|
||||
{/* Поиск */}
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-4">
|
||||
<div className="flex space-x-3">
|
||||
{/* Поиск товаров и выбор даты поставки */}
|
||||
<Card className="bg-white/10 backdrop-blur border-white/20 p-3">
|
||||
<div className="flex space-x-2 items-center">
|
||||
{/* Поиск */}
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
placeholder="Поиск товаров по названию, артикулу или бренду..."
|
||||
placeholder="Поиск товаров..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="bg-white/5 border-white/20 text-white placeholder-white/50"
|
||||
className="bg-white/5 border-white/20 text-white placeholder-white/50 h-9"
|
||||
onKeyPress={(e) => e.key === 'Enter' && searchCards()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Выбор даты поставки */}
|
||||
<div className="w-44">
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full justify-start text-left font-normal bg-white/5 border-white/20 text-white hover:bg-white/10 hover:text-white h-9 text-xs"
|
||||
>
|
||||
<Calendar className="mr-1 h-3 w-3" />
|
||||
{globalDeliveryDate ? (
|
||||
format(globalDeliveryDate, "dd.MM.yy", { locale: ru })
|
||||
) : (
|
||||
<span className="text-white/50">Дата поставки</span>
|
||||
)}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-72 p-0 glass-card" align="end">
|
||||
<div className="p-4 border-b border-white/10">
|
||||
<p className="text-white font-medium text-sm">Дата поставки</p>
|
||||
<p className="text-white/60 text-xs">Выберите дату для всех товаров</p>
|
||||
</div>
|
||||
<CalendarComponent
|
||||
mode="single"
|
||||
selected={globalDeliveryDate}
|
||||
onSelect={setGlobalDeliveryDate}
|
||||
disabled={(date) => date < new Date()}
|
||||
initialFocus
|
||||
locale={ru}
|
||||
className="glass-card border-0 p-3"
|
||||
classNames={{
|
||||
months: "flex flex-col space-y-3",
|
||||
month: "space-y-3",
|
||||
caption: "flex justify-center pt-2 relative items-center",
|
||||
caption_label: "text-sm font-medium text-white",
|
||||
nav: "space-x-1 flex items-center",
|
||||
nav_button: "h-7 w-7 glass-secondary text-white hover:bg-white/20 hover:text-white rounded-md border-white/20",
|
||||
nav_button_previous: "absolute left-1",
|
||||
nav_button_next: "absolute right-1",
|
||||
table: "w-full border-collapse space-y-1",
|
||||
head_row: "flex",
|
||||
head_cell: "text-white/70 rounded-md w-9 font-normal text-xs",
|
||||
row: "flex w-full mt-2",
|
||||
cell: "h-9 w-9 text-center text-xs p-0 relative focus-within:relative focus-within:z-20",
|
||||
day: "h-9 w-9 p-0 font-normal text-white hover:bg-white/15 hover:text-white rounded-md transition-colors",
|
||||
day_selected: "glass-button text-white hover:bg-gradient-to-r hover:from-purple-500 hover:to-pink-500",
|
||||
day_today: "bg-white/15 text-white font-semibold border border-white/30",
|
||||
day_outside: "text-white/30 opacity-50",
|
||||
day_disabled: "text-white/20 opacity-30",
|
||||
}}
|
||||
/>
|
||||
{globalDeliveryDate && (
|
||||
<div className="p-4 border-t border-white/10">
|
||||
<Badge className="glass-secondary text-white border-white/20 text-xs">
|
||||
<Calendar className="h-3 w-3 mr-1" />
|
||||
{format(globalDeliveryDate, "dd MMMM yyyy", { locale: ru })}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* Кнопка поиска */}
|
||||
<Button
|
||||
onClick={searchCards}
|
||||
disabled={loading || !searchTerm.trim()}
|
||||
className="bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600"
|
||||
variant="glass"
|
||||
size="sm"
|
||||
className="h-9 px-3"
|
||||
>
|
||||
<Search className="h-4 w-4 mr-2" />
|
||||
{loading ? 'Поиск...' : 'Найти'}
|
||||
<Search className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
@ -1017,7 +1149,7 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
||||
|
||||
return (
|
||||
<Card key={card.nmID} className={`bg-white/10 backdrop-blur border-white/20 transition-all hover:scale-105 hover:shadow-2xl group ${isSelected ? 'ring-2 ring-purple-500/50 bg-purple-500/10' : ''} relative overflow-hidden`}>
|
||||
<div className="p-3 space-y-3">
|
||||
<div className="p-2 space-y-2">
|
||||
{/* Изображение и основная информация */}
|
||||
<div className="space-y-2">
|
||||
<div className="relative">
|
||||
@ -1039,9 +1171,9 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
||||
{/* Индикатор выбранного товара */}
|
||||
{isSelected && (
|
||||
<div className="absolute top-2 left-2">
|
||||
<Badge className="bg-gradient-to-r from-purple-500 to-pink-500 text-white border-0 text-xs font-medium">
|
||||
<ShoppingCart className="h-3 w-3 mr-1" />
|
||||
В корзине
|
||||
<Badge className="bg-gradient-to-r from-orange-500 to-amber-500 text-white border-0 text-xs font-medium">
|
||||
<Package className="h-3 w-3 mr-1" />
|
||||
Подготовлен
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
@ -1073,7 +1205,6 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
||||
<h3 className="text-white font-semibold text-sm mb-1 line-clamp-2 leading-tight cursor-pointer hover:text-purple-300 transition-colors" onClick={() => handleCardClick(card)}>
|
||||
{card.title}
|
||||
</h3>
|
||||
<p className="text-white/60 text-xs mb-2">Артикул: {card.vendorCode}</p>
|
||||
</div>
|
||||
|
||||
{/* Информация о товаре */}
|
||||
@ -1085,56 +1216,89 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Управление количеством */}
|
||||
{/* Компактное управление */}
|
||||
<div className="space-y-2 bg-white/5 rounded-lg p-2">
|
||||
<div className="flex items-center justify-center mb-1">
|
||||
<span className="text-white/60 text-xs font-medium">Добавить в поставку:</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* Количество - компактно */}
|
||||
<div className="flex items-center space-x-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => updateCardSelection(card, 'selectedQuantity', Math.max(0, selectedQuantity - 1))}
|
||||
onClick={() => {
|
||||
const newQuantity = Math.max(0, selectedQuantity - 1)
|
||||
updateCardSelection(card, 'selectedQuantity', newQuantity)
|
||||
}}
|
||||
disabled={selectedQuantity <= 0}
|
||||
className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20 disabled:opacity-50"
|
||||
className="h-7 w-7 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20 disabled:opacity-50"
|
||||
>
|
||||
<Minus className="h-3 w-3" />
|
||||
</Button>
|
||||
<div className="flex-1">
|
||||
<input
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]*"
|
||||
value={selectedQuantity}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value.replace(/[^0-9]/g, '')
|
||||
const numValue = Math.max(0, parseInt(value) || 0)
|
||||
updateCardSelection(card, 'selectedQuantity', numValue)
|
||||
}}
|
||||
onFocus={(e) => e.target.select()}
|
||||
className="h-8 w-full text-center bg-white/10 border border-white/20 text-white text-sm rounded focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
||||
placeholder="0"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]*"
|
||||
value={selectedQuantity}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value.replace(/[^0-9]/g, '')
|
||||
const numValue = Math.max(0, parseInt(value) || 0)
|
||||
updateCardSelection(card, 'selectedQuantity', numValue)
|
||||
}}
|
||||
onFocus={(e) => e.target.select()}
|
||||
className="flex-1 h-7 text-center bg-white/10 border border-white/20 text-white text-xs rounded focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
||||
placeholder="Кол-во"
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => updateCardSelection(card, 'selectedQuantity', selectedQuantity + 1)}
|
||||
className="h-8 w-8 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
|
||||
onClick={() => {
|
||||
const newQuantity = selectedQuantity + 1
|
||||
updateCardSelection(card, 'selectedQuantity', newQuantity)
|
||||
}}
|
||||
className="h-7 w-7 p-0 text-white/60 hover:text-white hover:bg-white/10 border border-white/20"
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Указание что настройки в корзине */}
|
||||
{/* Цена - компактно, показывается только если есть количество */}
|
||||
{selectedQuantity > 0 && (
|
||||
<div className="bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-blue-500/30 rounded p-2 mt-2">
|
||||
<div className="text-center">
|
||||
<span className="text-blue-300 text-xs">В корзине: {selectedQuantity} шт</span>
|
||||
<p className="text-blue-200 text-xs mt-1">Настройте цену и услуги в корзине</p>
|
||||
<input
|
||||
type="text"
|
||||
inputMode="decimal"
|
||||
value={getSelectedTotalPrice(card) || ''}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value.replace(/[^0-9.,]/g, '').replace(',', '.')
|
||||
const totalPrice = parseFloat(value) || 0
|
||||
updateCardSelection(card, 'customPrice', totalPrice)
|
||||
}}
|
||||
onFocus={(e) => e.target.select()}
|
||||
className="w-full h-7 text-center bg-white/10 border border-white/20 text-white text-xs rounded focus:outline-none focus:ring-1 focus:ring-green-500 focus:border-transparent"
|
||||
placeholder={`Общая цена за ${selectedQuantity} шт`}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Результат - очень компактно */}
|
||||
{selectedQuantity > 0 && getSelectedTotalPrice(card) > 0 && (
|
||||
<div className="bg-gradient-to-r from-green-500/20 to-emerald-500/20 border border-green-500/30 rounded p-1.5">
|
||||
<div className="text-center space-y-0.5">
|
||||
<div className="text-green-300 text-xs font-medium">
|
||||
{formatCurrency(getSelectedTotalPrice(card))}
|
||||
</div>
|
||||
<div className="text-green-200 text-[10px]">
|
||||
~{formatCurrency(getSelectedUnitPrice(card))}/шт
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Индикатор подготовки к добавлению */}
|
||||
{selectedQuantity > 0 && (
|
||||
<div className="flex items-center justify-center">
|
||||
<Badge className="bg-orange-500/20 text-orange-300 border-orange-500/30 text-[10px] px-2 py-0.5">
|
||||
<Package className="h-2.5 w-2.5 mr-1" />
|
||||
Подготовлен
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
@ -1143,15 +1307,15 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Плавающая корзина */}
|
||||
{selectedCards.length > 0 && !showSummary && (
|
||||
{/* Плавающая кнопка "В корзину" для подготовленных товаров */}
|
||||
{preparingCards.length > 0 && getPreparingTotalItems() > 0 && (
|
||||
<div className="fixed bottom-6 right-6 z-50">
|
||||
<Button
|
||||
onClick={() => setShowSummary(true)}
|
||||
className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-lg h-12 px-6"
|
||||
onClick={addToCart}
|
||||
className="bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white shadow-lg h-12 px-6"
|
||||
>
|
||||
<ShoppingCart className="h-5 w-5 mr-2" />
|
||||
Корзина ({getTotalItems()}) • {formatCurrency(getTotalAmount())}
|
||||
В корзину ({getPreparingTotalItems()}) • {formatCurrency(getPreparingTotalAmount())}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
@ -1197,149 +1361,87 @@ export function WBProductCards({ onBack, onComplete }: WBProductCardsProps) {
|
||||
|
||||
{/* Модальное окно с детальной информацией о товаре */}
|
||||
<Dialog open={!!selectedCardForDetails} onOpenChange={(open) => !open && closeDetailsModal()}>
|
||||
<DialogContent className="max-w-6xl w-[95vw] max-h-[95vh] bg-black/95 backdrop-blur-xl border border-white/20 p-0 overflow-hidden">
|
||||
<DialogHeader className="sr-only">
|
||||
<DialogTitle>Детальная информация о товаре</DialogTitle>
|
||||
<DialogContent className="glass-card border-white/10 max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-white">Информация о товаре</DialogTitle>
|
||||
</DialogHeader>
|
||||
{selectedCardForDetails && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-0 h-full max-w-full">
|
||||
{/* Изображения */}
|
||||
<div className="p-4 lg:p-6 space-y-4 overflow-hidden">
|
||||
<div className="relative">
|
||||
<img
|
||||
src={WildberriesService.getCardImages(selectedCardForDetails)[currentImageIndex] || '/api/placeholder/400/400'}
|
||||
alt={selectedCardForDetails.title}
|
||||
className="w-full aspect-square rounded-lg object-cover"
|
||||
/>
|
||||
|
||||
{/* Навигация по изображениям */}
|
||||
{WildberriesService.getCardImages(selectedCardForDetails).length > 1 && (
|
||||
<>
|
||||
<button
|
||||
onClick={prevImage}
|
||||
className="absolute left-3 top-1/2 -translate-y-1/2 bg-black/70 hover:bg-black/90 text-white p-2 rounded-full transition-all"
|
||||
>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={nextImage}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 bg-black/70 hover:bg-black/90 text-white p-2 rounded-full transition-all"
|
||||
>
|
||||
<ChevronRight className="h-5 w-5" />
|
||||
</button>
|
||||
|
||||
<div className="absolute bottom-3 left-1/2 -translate-x-1/2 bg-black/70 px-3 py-1 rounded-full text-white text-sm">
|
||||
{currentImageIndex + 1} из {WildberriesService.getCardImages(selectedCardForDetails).length}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{/* Изображение */}
|
||||
<div className="relative">
|
||||
<img
|
||||
src={WildberriesService.getCardImages(selectedCardForDetails)[currentImageIndex] || '/api/placeholder/400/400'}
|
||||
alt={selectedCardForDetails.title}
|
||||
className="w-full aspect-video rounded-lg object-cover"
|
||||
/>
|
||||
|
||||
{/* Миниатюры изображений */}
|
||||
{/* Навигация по изображениям */}
|
||||
{WildberriesService.getCardImages(selectedCardForDetails).length > 1 && (
|
||||
<div className="w-full overflow-hidden">
|
||||
<div className="flex space-x-2 overflow-x-auto pb-2 scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent">
|
||||
{WildberriesService.getCardImages(selectedCardForDetails).map((image, index) => (
|
||||
<img
|
||||
key={index}
|
||||
src={image}
|
||||
alt={`${selectedCardForDetails.title} ${index + 1}`}
|
||||
className={`w-16 h-16 rounded-lg object-cover cursor-pointer flex-shrink-0 transition-all ${
|
||||
index === currentImageIndex ? 'ring-2 ring-purple-500' : 'opacity-60 hover:opacity-100'
|
||||
}`}
|
||||
onClick={() => setCurrentImageIndex(index)}
|
||||
/>
|
||||
))}
|
||||
<>
|
||||
<button
|
||||
onClick={prevImage}
|
||||
className="absolute left-3 top-1/2 -translate-y-1/2 bg-black/70 hover:bg-black/90 text-white p-2 rounded-full transition-all"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={nextImage}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 bg-black/70 hover:bg-black/90 text-white p-2 rounded-full transition-all"
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<div className="absolute bottom-3 left-1/2 -translate-x-1/2 bg-black/70 px-3 py-1 rounded-full text-white text-sm">
|
||||
{currentImageIndex + 1} из {WildberriesService.getCardImages(selectedCardForDetails).length}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Информация о товаре */}
|
||||
<div className="p-4 lg:p-6 overflow-y-auto max-h-[95vh] space-y-4 max-w-full">
|
||||
{/* Основная информация */}
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-white mb-2 leading-tight">{selectedCardForDetails.title}</h2>
|
||||
<p className="text-white/60 mb-3 text-sm">Артикул: {selectedCardForDetails.vendorCode}</p>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 text-sm bg-white/5 rounded-lg p-4">
|
||||
<div className="flex justify-between items-start gap-2">
|
||||
<span className="text-white/60 flex-shrink-0">Бренд:</span>
|
||||
<span className="text-white font-medium text-right break-words">{selectedCardForDetails.brand}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-start gap-2">
|
||||
<span className="text-white/60 flex-shrink-0">Категория:</span>
|
||||
<span className="text-white font-medium text-right break-words">{selectedCardForDetails.object}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-start gap-2">
|
||||
<span className="text-white/60 flex-shrink-0">Родительская:</span>
|
||||
<span className="text-white font-medium text-right break-words">{selectedCardForDetails.parent}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-start gap-2">
|
||||
<span className="text-white/60 flex-shrink-0">Страна:</span>
|
||||
<span className="text-white font-medium text-right break-words">{selectedCardForDetails.countryProduction}</span>
|
||||
</div>
|
||||
<h3 className="text-white font-semibold text-lg">{selectedCardForDetails.title}</h3>
|
||||
<p className="text-white/60 text-sm">Артикул WB: {selectedCardForDetails.nmID}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">Бренд:</span>
|
||||
<span className="text-white font-medium">{selectedCardForDetails.brand}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">Категория:</span>
|
||||
<span className="text-white font-medium">{selectedCardForDetails.object}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedCardForDetails.description && (
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-2 text-lg">Описание</h3>
|
||||
<div className="bg-white/5 rounded-lg p-4 max-h-40 overflow-y-auto scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent">
|
||||
<p className="text-white/80 text-sm leading-relaxed whitespace-pre-wrap break-words">
|
||||
{selectedCardForDetails.description}
|
||||
</p>
|
||||
</div>
|
||||
<h4 className="text-white font-medium mb-2">Описание</h4>
|
||||
<p className="text-white/70 text-sm leading-relaxed max-h-32 overflow-y-auto">
|
||||
{selectedCardForDetails.description}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Размеры и цены */}
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3 text-lg">Доступные варианты</h3>
|
||||
<div className="space-y-2">
|
||||
{selectedCardForDetails.sizes.map((size) => (
|
||||
<div key={size.chrtID} className="bg-white/5 border border-white/10 rounded-lg p-4">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<span className="text-white font-medium">{size.wbSize}</span>
|
||||
<Badge className={`${size.quantity > 10 ? 'bg-green-500/30 text-green-200' : size.quantity > 0 ? 'bg-yellow-500/30 text-yellow-200' : 'bg-red-500/30 text-red-200'} font-medium`}>
|
||||
{size.quantity} шт.
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-sm">
|
||||
<span className="text-white/60">Размер: {size.techSize}</span>
|
||||
<div className="text-right">
|
||||
<div className="text-white font-bold text-base">{formatCurrency(size.discountedPrice || size.price)}</div>
|
||||
{size.discountedPrice && size.discountedPrice < size.price && (
|
||||
<div className="text-white/40 line-through text-xs">{formatCurrency(size.price)}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Кнопки действий в модальном окне */}
|
||||
<div className="flex gap-3 pt-4 border-t border-white/20 sticky bottom-0 bg-black/50 backdrop-blur">
|
||||
<Button
|
||||
className="flex-1 bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-medium"
|
||||
onClick={() => {
|
||||
const currentQuantity = getSelectedQuantity(selectedCardForDetails)
|
||||
updateCardSelection(selectedCardForDetails, 'selectedQuantity', currentQuantity + 1)
|
||||
closeDetailsModal()
|
||||
}}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Добавить в корзину
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-white/20 text-white hover:bg-white/10"
|
||||
onClick={closeDetailsModal}
|
||||
>
|
||||
Закрыть
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Миниатюры изображений */}
|
||||
{WildberriesService.getCardImages(selectedCardForDetails).length > 1 && (
|
||||
<div className="flex space-x-2 overflow-x-auto pb-2">
|
||||
{WildberriesService.getCardImages(selectedCardForDetails).map((image, index) => (
|
||||
<img
|
||||
key={index}
|
||||
src={image}
|
||||
alt={`${selectedCardForDetails.title} ${index + 1}`}
|
||||
className={`w-16 h-16 rounded-lg object-cover cursor-pointer flex-shrink-0 transition-all ${
|
||||
index === currentImageIndex ? 'ring-2 ring-purple-500' : 'opacity-60 hover:opacity-100'
|
||||
}`}
|
||||
onClick={() => setCurrentImageIndex(index)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
|
||||
Reference in New Issue
Block a user