91 lines
3.9 KiB
TypeScript
91 lines
3.9 KiB
TypeScript
import React from "react";
|
||
import { useCart } from "@/contexts/CartContext";
|
||
|
||
const CartList2: React.FC = () => {
|
||
const { state, updateComment } = useCart();
|
||
const { items } = state;
|
||
|
||
const handleComment = (id: string, comment: string) => {
|
||
updateComment(id, comment);
|
||
};
|
||
|
||
// Функция для форматирования цены
|
||
const formatPrice = (price: number, currency: string = 'RUB') => {
|
||
return `${price.toLocaleString('ru-RU')} ${currency === 'RUB' ? '₽' : currency}`;
|
||
};
|
||
|
||
// Показываем только выбранные товары на втором этапе
|
||
const selectedItems = items.filter(item => item.selected);
|
||
|
||
return (
|
||
<div className="w-layout-vflex flex-block-48">
|
||
<div className="w-layout-vflex product-list-cart-check">
|
||
{selectedItems.length === 0 ? (
|
||
<div className="empty-cart-message" style={{ textAlign: 'center', padding: '2rem', color: '#666' }}>
|
||
<p>Не выбрано товаров для заказа</p>
|
||
<p>Вернитесь на предыдущий шаг и выберите товары</p>
|
||
</div>
|
||
) : (
|
||
selectedItems.map((item, index) => (
|
||
<div
|
||
className={
|
||
"div-block-21-copy" +
|
||
(index === 0 ? " border-t-0" : "")
|
||
}
|
||
style={
|
||
index === 0 ? { borderTop: 'none' } : undefined
|
||
}
|
||
key={item.id}
|
||
>
|
||
<div className="w-layout-hflex cart-item-check">
|
||
<div className="w-layout-hflex info-block-search">
|
||
<div className="text-block-35">{item.quantity}</div>
|
||
<div className="w-layout-hflex block-name">
|
||
<h4 className="heading-9-copy">{item.name}</h4>
|
||
<div className="text-block-21-copy">{item.description}</div>
|
||
</div>
|
||
<div className="form-block-copy w-form">
|
||
<form className="form-copy" onSubmit={e => e.preventDefault()}>
|
||
<input
|
||
className="text-field-copy w-input"
|
||
maxLength={256}
|
||
name="Search-5"
|
||
data-name="Search 5"
|
||
placeholder="Комментарий"
|
||
type="text"
|
||
id={`Search-${item.id}`}
|
||
value={item.comment || ''}
|
||
onChange={e => handleComment(item.id, e.target.value)}
|
||
/>
|
||
</form>
|
||
<div className="success-message w-form-done">
|
||
<div>Thank you! Your submission has been received!</div>
|
||
</div>
|
||
<div className="error-message w-form-fail">
|
||
<div>Oops! Something went wrong while submitting the form.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="w-layout-hflex add-to-cart-block">
|
||
<div className="w-layout-hflex flex-block-39-copy">
|
||
<h4 className="heading-9-copy">{item.deliveryTime || 'Уточняется'}</h4>
|
||
<div className="text-block-21-copy">{item.deliveryDate || ''}</div>
|
||
</div>
|
||
<div className="w-layout-hflex pcs">
|
||
<div className="pcs-text">{item.quantity} шт.</div>
|
||
</div>
|
||
<div className="w-layout-hflex flex-block-39-copy-copy">
|
||
<h4 className="heading-9-copy-copy">{formatPrice(item.price * item.quantity, item.currency)}</h4>
|
||
<div className="text-block-21-copy-copy">{formatPrice(item.price, item.currency)}/шт</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default CartList2;
|