You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
4.1 KiB
104 lines
4.1 KiB
import React, { useState, useEffect } from 'react';
|
|
import Image from 'next/image';
|
|
import Link from "next/link";
|
|
import classNames from 'classnames';
|
|
import { useSelector } from 'react-redux';
|
|
import { HiMinus, HiPlus } from "react-icons/hi";
|
|
import { CardBasketProduct, CardAdditionally } from './'
|
|
import { BoxScroll, Box } from '../../../../../../components/customer/containers';
|
|
import {ButtonImg, Button } from '../../../../../UI';
|
|
|
|
type PizzaProps = {
|
|
id: number;
|
|
title: string;
|
|
heft: string[];
|
|
description: string;
|
|
img: string[];
|
|
price: string[];
|
|
size: string[];
|
|
};
|
|
|
|
const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
|
|
|
|
export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
|
|
id,
|
|
title,
|
|
img,
|
|
heft,
|
|
description,
|
|
price,
|
|
size,
|
|
}) => {
|
|
//const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
|
|
const totalCount =0;
|
|
const [basket, setBasket] = useState([{name:'Ggg', size:'30 ffv', sum:345}, {name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345}]);
|
|
const [quantityGoods, setQuantityGoods] = useState(basket.length);
|
|
const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
|
|
{src:'/assets/img/coca.png', name: 'Coca', price: 100},
|
|
{src:'/assets/img/coca.png', name: 'Coca', price: 100},
|
|
{src:'/assets/img/coca.png', name: 'Coca', price: 100},
|
|
{src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
|
|
|
|
const [delivery, setDelivery] = useState(0);
|
|
|
|
const [sum, setSum] = useState<number>(0);
|
|
|
|
const addBasket = () => {
|
|
console.log('add');
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
<>
|
|
<Link href={"/"} as={"/"} scroll={false}>
|
|
<button className={classNames('button_close')} onClick={addBasket}>X</button>
|
|
</Link>
|
|
<div className='header'>
|
|
<p>{totalCount} товар(а)</p>
|
|
</div>
|
|
<div className='body'>
|
|
<div className='body_order'>
|
|
{Object.keys(basket).length > 0 ? basket.map((rows, count) =>
|
|
<CardBasketProduct
|
|
key={count}
|
|
src={'/assets/img/smal_pizza.png'}
|
|
alt={'pizza'}
|
|
title_name={rows.name}
|
|
title_size={rows.size}
|
|
sum={rows.sum}/>
|
|
): ' Корзина пуста'}
|
|
</div>
|
|
<div className='body_additionally'>
|
|
<p className='body_additionally_text'>Добавить к заказу?</p>
|
|
<BoxScroll>
|
|
{additionally.map((name, count) =>
|
|
<CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
|
|
}
|
|
</BoxScroll>
|
|
</div>
|
|
</div>
|
|
<div className='basket_footer'>
|
|
<div className='promo_code_box'>
|
|
<input className='promo_input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
|
|
<button className='promo_button' type="submit">Применить</button>
|
|
</div>
|
|
<div className='check'>
|
|
<div className='check_box'>
|
|
<p >Доставка </p> <p className='check_text'>{delivery} ₽</p>
|
|
</div>
|
|
<div className='check_box'>
|
|
<p >{quantityGoods} товар(а) </p>
|
|
<p className='check_text'>{sum} ₽</p>
|
|
</div>
|
|
</div>
|
|
<Button styles={'yellow button_size_48'}
|
|
align={'button_align_center'}
|
|
onClick={() => console.log('add')}>Оформить заказ {sum} ₽
|
|
</Button>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
|
|
|