82 lines
2.4 KiB
JavaScript
82 lines
2.4 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import './ShippingDetails.css';
|
|
|
|
function ShippingDetails() {
|
|
const [address, setAddress] = useState('');
|
|
const [deliveryDate, setDeliveryDate] = useState('');
|
|
const [deliveryTime, setDeliveryTime] = useState('');
|
|
const navigate = useNavigate();
|
|
|
|
const handleSubmit = () => {
|
|
navigate(`/delivery-form?address=${address}&deliveryDate=${deliveryDate}&deliveryTime=${deliveryTime}`);
|
|
};
|
|
|
|
return (
|
|
<section className="shipping-details">
|
|
<div className="container">
|
|
<h2>Shipping Details</h2>
|
|
<div className="shipping-forms">
|
|
<ShippingForm
|
|
title="Delivery Address"
|
|
inputPlaceholder="Enter your delivery address"
|
|
type="text"
|
|
value={address}
|
|
onChange={(e) => setAddress(e.target.value)}
|
|
/>
|
|
<ShippingForm
|
|
title="Delivery Date"
|
|
type="date"
|
|
value={deliveryDate}
|
|
onChange={(e) => setDeliveryDate(e.target.value)}
|
|
/>
|
|
<ShippingTimeForm
|
|
title="Delivery Time"
|
|
value={deliveryTime}
|
|
onChange={(e) => setDeliveryTime(e.target.value)}
|
|
/>
|
|
<FAQ
|
|
title="FAQ"
|
|
description="Answers to your delivery-related questions."
|
|
/>
|
|
</div>
|
|
<button className='button-form' onClick={handleSubmit}>Continue to Delivery Form</button>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function ShippingForm({ title, inputPlaceholder, type, value, onChange }) {
|
|
return (
|
|
<div className="shipping-form">
|
|
<h3>{title}</h3>
|
|
<input type={type} placeholder={inputPlaceholder} value={value} onChange={onChange} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ShippingTimeForm({ title, value, onChange }) {
|
|
return (
|
|
<div className="shipping-form">
|
|
<h3>{title}</h3>
|
|
<select value={value} onChange={(e) => onChange(e.target.value)}>
|
|
<option>Choose your desired delivery time slot</option>
|
|
<option value="8:00 AM - 12:00 PM">8:00 AM - 12:00 PM</option>
|
|
<option value="12:00 PM - 4:00 PM">12:00 PM - 4:00 PM</option>
|
|
<option value="4:00 PM - 8:00 PM">4:00 PM - 8:00 PM</option>
|
|
</select>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function FAQ({ title, description }) {
|
|
return (
|
|
<div className="shipping-form">
|
|
<h3>{title}</h3>
|
|
<p>{description}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ShippingDetails;
|