195 lines
9.3 KiB
React
195 lines
9.3 KiB
React
|
import { useState } from 'react';
|
||
|
|
import { Container, Row, Col, Card, Form, Button } from 'react-bootstrap';
|
||
|
|
|
||
|
|
const MakingAnOrder = () => {
|
||
|
|
const [deliveryMethod, setDeliveryMethod] = useState('selfPickup');
|
||
|
|
const [paymentMethod, setPaymentMethod] = useState('cash');
|
||
|
|
|
||
|
|
const handleDeliveryMethodChange = (e) => {
|
||
|
|
setDeliveryMethod(e.target.value);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handlePaymentMethodChange = (e) => {
|
||
|
|
setPaymentMethod(e.target.value);
|
||
|
|
};
|
||
|
|
|
||
|
|
const [validated, setValidated] = useState(false);
|
||
|
|
|
||
|
|
const handleSubmit = (event) => {
|
||
|
|
const form = event.currentTarget;
|
||
|
|
if (form.checkValidity() === false) {
|
||
|
|
event.preventDefault();
|
||
|
|
event.stopPropagation();
|
||
|
|
}
|
||
|
|
|
||
|
|
setValidated(true);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Container className="h-100">
|
||
|
|
<Row className="d-flex justify-content-center align-items-center h-100">
|
||
|
|
<Col xs={12} md={9} lg={7} xl={6}>
|
||
|
|
<Card style={{ borderRadius: '15px', borderColor: 'gold' }}>
|
||
|
|
<Card.Body className="p-5">
|
||
|
|
<h2 className="text-uppercase text-center mb-5">Оформление заказа</h2>
|
||
|
|
|
||
|
|
<Form noValidate validated={validated} onSubmit={handleSubmit}>
|
||
|
|
<Form.Group className="mb-4" controlId="name">
|
||
|
|
<Form.Label htmlFor="name">Ваше имя</Form.Label>
|
||
|
|
<Form.Control type="text" required />
|
||
|
|
<Form.Control.Feedback>Имя заполнено</Form.Control.Feedback>
|
||
|
|
<Form.Control.Feedback type="invalid">Имя не заполнено</Form.Control.Feedback>
|
||
|
|
</Form.Group>
|
||
|
|
|
||
|
|
<Form.Group className="mb-2">
|
||
|
|
<Form.Label htmlFor="form3Example5cg">Номер телефона</Form.Label>
|
||
|
|
<Form.Control type="tel" id="form3Example5cg" required />
|
||
|
|
<Form.Control.Feedback>Номер телефона заполнен</Form.Control.Feedback>
|
||
|
|
<Form.Control.Feedback type="invalid">Номер телефона не заполнен</Form.Control.Feedback>
|
||
|
|
</Form.Group>
|
||
|
|
|
||
|
|
<Form.Group className="mb-4">
|
||
|
|
<Form.Label>Вариант получения</Form.Label>
|
||
|
|
<Form.Check
|
||
|
|
type="radio"
|
||
|
|
label="Самовывоз"
|
||
|
|
id="selfPickup"
|
||
|
|
name="deliveryMethod"
|
||
|
|
value="selfPickup"
|
||
|
|
checked={deliveryMethod === 'selfPickup'}
|
||
|
|
onChange={handleDeliveryMethodChange}
|
||
|
|
/>
|
||
|
|
<Form.Check
|
||
|
|
type="radio"
|
||
|
|
label="Доставка"
|
||
|
|
id="delivery"
|
||
|
|
name="deliveryMethod"
|
||
|
|
value="delivery"
|
||
|
|
checked={deliveryMethod === 'delivery'}
|
||
|
|
onChange={handleDeliveryMethodChange}
|
||
|
|
/>
|
||
|
|
</Form.Group>
|
||
|
|
|
||
|
|
{deliveryMethod === 'delivery' && (
|
||
|
|
<div>
|
||
|
|
<Form.Group className="mb-4" controlId="adress">
|
||
|
|
<Form.Label>Ваш адрес доставки</Form.Label>
|
||
|
|
<Form.Control type="text" required/>
|
||
|
|
<Form.Control.Feedback>Адрес заполнен</Form.Control.Feedback>
|
||
|
|
<Form.Control.Feedback type="invalid">Адрес не заполнен</Form.Control.Feedback>
|
||
|
|
</Form.Group>
|
||
|
|
|
||
|
|
<Form.Group className="mb-4">
|
||
|
|
<Form.Label>Выберите время доставки:</Form.Label>
|
||
|
|
<Form.Select>
|
||
|
|
<option value="10:00-10:30">10:00-10:30</option>
|
||
|
|
<option value="10:30-11:00">10:30-11:00</option>
|
||
|
|
<option value="11:00-11:30">11:00-11:30</option>
|
||
|
|
<option value="11:30-12:00">11:30-12:00</option>
|
||
|
|
<option value="12:00-12:30">12:00-12:30</option>
|
||
|
|
<option value="12:30-13:00">12:30-13:00</option>
|
||
|
|
<option value="13:00-13:30">13:00-13:30</option>
|
||
|
|
<option value="13:30-14:00">13:30-14:00</option>
|
||
|
|
<option value="14:00-14:30">14:00-14:30</option>
|
||
|
|
<option value="14:30-15:00">14:30-15:00</option>
|
||
|
|
<option value="15:00-15:30">15:00-15:30</option>
|
||
|
|
<option value="15:30-16:00">15:30-16:00</option>
|
||
|
|
<option value="16:00-16:30">16:00-16:30</option>
|
||
|
|
<option value="16:30-17:00">16:30-17:00</option>
|
||
|
|
<option value="17:00-17:30">17:00-17:30</option>
|
||
|
|
<option value="17:30-18:00">17:30-18:00</option>
|
||
|
|
<option value="18:00-18:30">18:00-18:30</option>
|
||
|
|
<option value="18:30-19:00">18:30-19:00</option>
|
||
|
|
<option value="19:00-19:30">19:00-19:30</option>
|
||
|
|
<option value="19:30-20:00">19:30-20:00</option>
|
||
|
|
<option value="20:00-20:30">20:00-20:30</option>
|
||
|
|
<option value="20:30-21:00">20:30-21:00</option>
|
||
|
|
<option value="21:00-21:30">21:00-21:30</option>
|
||
|
|
<option value="21:30-22:00">21:30-22:00</option>
|
||
|
|
<option value="22:00-22:30">22:00-22:30</option>
|
||
|
|
<option value="22:30-23:00">22:30-23:00</option>
|
||
|
|
</Form.Select>
|
||
|
|
</Form.Group>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<Form.Group className="mb-4">
|
||
|
|
<Form.Label>Вариант оплаты</Form.Label>
|
||
|
|
<Form.Check
|
||
|
|
type="radio"
|
||
|
|
label="Наличные"
|
||
|
|
id="cash"
|
||
|
|
name="paymentMethod"
|
||
|
|
value="cash"
|
||
|
|
checked={paymentMethod === 'cash'}
|
||
|
|
onChange={handlePaymentMethodChange}
|
||
|
|
/>
|
||
|
|
<Form.Check
|
||
|
|
type="radio"
|
||
|
|
label="Оплата картой"
|
||
|
|
id="creditCard"
|
||
|
|
name="paymentMethod"
|
||
|
|
value="creditCard"
|
||
|
|
checked={paymentMethod === 'creditCard'}
|
||
|
|
onChange={handlePaymentMethodChange}
|
||
|
|
/>
|
||
|
|
</Form.Group>
|
||
|
|
|
||
|
|
{paymentMethod === 'creditCard' && (
|
||
|
|
<div>
|
||
|
|
<Row className="mb-4">
|
||
|
|
<Col>
|
||
|
|
<Form.Group className="mb-2" controlId="formNameOnCard">
|
||
|
|
<Form.Label>Имя держателя карты</Form.Label>
|
||
|
|
<Form.Control type="text" required />
|
||
|
|
<Form.Control.Feedback>Имя заполнено</Form.Control.Feedback>
|
||
|
|
<Form.Control.Feedback type="invalid">Имя не заполнено</Form.Control.Feedback>
|
||
|
|
</Form.Group>
|
||
|
|
</Col>
|
||
|
|
<Col>
|
||
|
|
<Form.Group className="mb-2" controlId="formCardNumber">
|
||
|
|
<Form.Label>Номер карты</Form.Label>
|
||
|
|
<Form.Control type="text" pattern="[0-9]{16}" required />
|
||
|
|
<Form.Control.Feedback>Номер карты заполнен</Form.Control.Feedback>
|
||
|
|
<Form.Control.Feedback type="invalid">Введите правильный номер карты</Form.Control.Feedback>
|
||
|
|
</Form.Group>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
|
||
|
|
<Row className="mb-4">
|
||
|
|
<Col>
|
||
|
|
<Form.Group className="mb-2" controlId="formExpiration">
|
||
|
|
<Form.Label>Срок действия</Form.Label>
|
||
|
|
<Form.Control type="text" pattern="\d{2}/\d{2}" required />
|
||
|
|
<Form.Control.Feedback>Срок действия заполнен</Form.Control.Feedback>
|
||
|
|
<Form.Control.Feedback type="invalid">Введите правильный срок действия</Form.Control.Feedback>
|
||
|
|
</Form.Group>
|
||
|
|
</Col>
|
||
|
|
<Col>
|
||
|
|
<Form.Group className="mb-2" controlId="formCVV">
|
||
|
|
<Form.Label>CVV</Form.Label>
|
||
|
|
<Form.Control type="text" pattern="\d{3}" required />
|
||
|
|
<Form.Control.Feedback>CVV заполнен</Form.Control.Feedback>
|
||
|
|
<Form.Control.Feedback type="invalid">Введите правильный CVV</Form.Control.Feedback>
|
||
|
|
</Form.Group>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="d-flex justify-content-center">
|
||
|
|
<Button variant="warning" type="submit" id="saveButton">
|
||
|
|
Оформить
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</Form>
|
||
|
|
</Card.Body>
|
||
|
|
</Card>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
</Container>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default MakingAnOrder;
|