Capstone 3 Added
parent
12b87b8d2f
commit
82a05cde7f
@ -0,0 +1,13 @@
|
|||||||
|
// models/ShippingMethod.js
|
||||||
|
|
||||||
|
const mongoose = require('mongoose');
|
||||||
|
|
||||||
|
const shippingMethodSchema = new mongoose.Schema({
|
||||||
|
name: { type: String, required: true },
|
||||||
|
description: { type: String, required: true },
|
||||||
|
// Add other fields as needed
|
||||||
|
});
|
||||||
|
|
||||||
|
const ShippingMethod = mongoose.model('ShippingMethod', shippingMethodSchema);
|
||||||
|
|
||||||
|
module.exports = ShippingMethod;
|
||||||
@ -0,0 +1,134 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Button, Collapse, Col, Row, Table, Form } from "react-bootstrap";
|
||||||
|
import AddressForm from "./AddressForm"; // Assuming the path is correct
|
||||||
|
|
||||||
|
const AddressCollapse = ({
|
||||||
|
addressOpen,
|
||||||
|
setAddressOpen,
|
||||||
|
isCustomerLoggedIn,
|
||||||
|
selectedAddress,
|
||||||
|
setSelectedAddress,
|
||||||
|
handleContinueAddress,
|
||||||
|
addAddressFormOpen,
|
||||||
|
setAddAddressFormOpen,
|
||||||
|
addressFormError,
|
||||||
|
addresses,
|
||||||
|
handleDeleteAddress,
|
||||||
|
}) => {
|
||||||
|
const handleAddressSelect = (addressId) => {
|
||||||
|
// Update the selectedAddressId
|
||||||
|
setSelectedAddress(addressId);
|
||||||
|
|
||||||
|
// If you also want to update the selectedAddress object, find the corresponding address
|
||||||
|
const selected = addresses.find((address) => address._id === addressId);
|
||||||
|
setSelectedAddress(selected);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="border rounded mb-3 p-3">
|
||||||
|
<h3>
|
||||||
|
<div className="d-flex justify-content-between align-items-start">
|
||||||
|
<span className="fs-6">2. Address</span>
|
||||||
|
<Button
|
||||||
|
variant="link"
|
||||||
|
onClick={() => setAddressOpen(!addressOpen)}
|
||||||
|
aria-controls="addressCollapse"
|
||||||
|
aria-expanded={addressOpen}
|
||||||
|
>
|
||||||
|
<i className={`bi bi-chevron-${addressOpen ? "up" : "down"}`}></i>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</h3>
|
||||||
|
<Collapse in={addressOpen}>
|
||||||
|
<div id="addressCollapse">
|
||||||
|
{isCustomerLoggedIn ? (
|
||||||
|
<Row>
|
||||||
|
<span className="mb-2" style={{ fontSize: "16px" }}>
|
||||||
|
The selected address will be used both as your personal address
|
||||||
|
(for invoice) and as your delivery address.
|
||||||
|
</span>
|
||||||
|
<Col className="border rounded mb-3 p-3" md={6}>
|
||||||
|
{/* Left column - Add New Address Form Dropdown */}
|
||||||
|
<div>
|
||||||
|
{addAddressFormOpen && (
|
||||||
|
<AddressForm
|
||||||
|
selectedAddress={selectedAddress}
|
||||||
|
setSelectedAddress={setSelectedAddress}
|
||||||
|
handleContinueAddress={handleContinueAddress}
|
||||||
|
addressFormError={addressFormError}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
className="my-3"
|
||||||
|
variant="primary"
|
||||||
|
onClick={() => setAddAddressFormOpen(!addAddressFormOpen)}
|
||||||
|
>
|
||||||
|
Add New Address
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col md={6}>
|
||||||
|
{/* Right column - My Addresses from addressForm */}
|
||||||
|
{addresses && addresses.length > 0 ? (
|
||||||
|
<Table striped bordered hover>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>My Addresses</th>
|
||||||
|
<th>Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{addresses.map((address, index) => (
|
||||||
|
<tr key={index}>
|
||||||
|
<td>
|
||||||
|
<div className="d-flex justify-content-between align-items-center">
|
||||||
|
<Form.Check
|
||||||
|
type="radio"
|
||||||
|
id={`addressRadio${index}`}
|
||||||
|
name="addressRadio"
|
||||||
|
checked={
|
||||||
|
selectedAddress &&
|
||||||
|
selectedAddress._id === address._id
|
||||||
|
}
|
||||||
|
onChange={() =>
|
||||||
|
handleAddressSelect(address._id)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<p className="mx-3">
|
||||||
|
{address.street}, {address.city},{" "}
|
||||||
|
{address.state}, {address.zipCode},{" "}
|
||||||
|
{address.country}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<Button
|
||||||
|
variant="link"
|
||||||
|
className="text-danger"
|
||||||
|
onClick={() => handleDeleteAddress(address._id)}
|
||||||
|
>
|
||||||
|
<i className="bi bi-trash"></i>
|
||||||
|
</Button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</Table>
|
||||||
|
) : (
|
||||||
|
<p>No existing addresses. Add a new address below.</p>
|
||||||
|
)}
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
) : (
|
||||||
|
<p>User not logged in. Log in to view and manage addresses.</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Collapse>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddressCollapse;
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
const BankOption = ({ totalPrice }) => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h4>Bank Payment Details</h4>
|
||||||
|
<div style={{ border: '1px solid #ddd', padding: '10px', borderRadius: '5px', marginBottom: '10px' }}>
|
||||||
|
<p>
|
||||||
|
Please transfer the amount to the following bank account:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<strong>Bank:</strong> BPI Bank
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>Account Holder:</strong> istore philippines
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>Account Number:</strong> 1234-1234-1234-1234
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>Amount:</strong> {new Intl.NumberFormat('en-PH', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'PHP',
|
||||||
|
}).format(totalPrice)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-3">
|
||||||
|
<p>
|
||||||
|
After completing the bank transfer, please submit the reference number{' '}
|
||||||
|
<a href="mailto:customercare@istore.com.ph">customercare@istore.com.ph</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BankOption;
|
||||||
|
|
||||||
@ -0,0 +1,73 @@
|
|||||||
|
// OrderDetails.js
|
||||||
|
import React from "react";
|
||||||
|
import PropTypes from "prop-types";
|
||||||
|
|
||||||
|
const OrderDetails = ({ orderData }) => {
|
||||||
|
if (!orderData) {
|
||||||
|
// Handle the case where orderData is not available
|
||||||
|
return <div>Loading...</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const {
|
||||||
|
userDetails,
|
||||||
|
selectedAddress,
|
||||||
|
selectedShippingMethod,
|
||||||
|
cartItems,
|
||||||
|
appliedPromoCode,
|
||||||
|
selectedPaymentOption,
|
||||||
|
termsAgreed,
|
||||||
|
// Include any other necessary data
|
||||||
|
} = orderData;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2>Order Details</h2>
|
||||||
|
|
||||||
|
<h3>User Details</h3>
|
||||||
|
<pre>{JSON.stringify(userDetails, null, 2)}</pre>
|
||||||
|
|
||||||
|
<h3>Selected Address</h3>
|
||||||
|
<pre>{JSON.stringify(selectedAddress, null, 2)}</pre>
|
||||||
|
|
||||||
|
<h3>Selected Shipping Method</h3>
|
||||||
|
<pre>{selectedShippingMethod}</pre>
|
||||||
|
|
||||||
|
<h3>Cart Items</h3>
|
||||||
|
<ul>
|
||||||
|
{cartItems.map((item, index) => (
|
||||||
|
<li key={index}>
|
||||||
|
<h4>Item {index + 1}</h4>
|
||||||
|
<pre>{JSON.stringify(item, null, 2)}</pre>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Applied Promo Code</h3>
|
||||||
|
<pre>{appliedPromoCode}</pre>
|
||||||
|
|
||||||
|
<h3>Selected Payment Option</h3>
|
||||||
|
<pre>{selectedPaymentOption}</pre>
|
||||||
|
|
||||||
|
<h3>Terms Agreed</h3>
|
||||||
|
<pre>{termsAgreed ? "Agreed" : "Not Agreed"}</pre>
|
||||||
|
|
||||||
|
{/* Include additional sections as needed for other data */}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Specify PropTypes for the orderData prop
|
||||||
|
OrderDetails.propTypes = {
|
||||||
|
orderData: PropTypes.shape({
|
||||||
|
userDetails: PropTypes.object,
|
||||||
|
selectedAddress: PropTypes.object,
|
||||||
|
selectedShippingMethod: PropTypes.string,
|
||||||
|
cartItems: PropTypes.array,
|
||||||
|
appliedPromoCode: PropTypes.string,
|
||||||
|
selectedPaymentOption: PropTypes.string,
|
||||||
|
termsAgreed: PropTypes.bool,
|
||||||
|
// Include PropTypes for other data properties
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
|
||||||
|
export default OrderDetails;
|
||||||
@ -0,0 +1,86 @@
|
|||||||
|
// components/OrderSummary.js
|
||||||
|
import React from 'react';
|
||||||
|
import { Col, Table, Form, Button } from 'react-bootstrap';
|
||||||
|
|
||||||
|
const OrderSummary = ({
|
||||||
|
cartItems,
|
||||||
|
shippingFee,
|
||||||
|
totalPrice,
|
||||||
|
discountAmount,
|
||||||
|
promoCode,
|
||||||
|
setPromoCode,
|
||||||
|
handleApplyPromoCode,
|
||||||
|
appliedPromoCode,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<Col xs={12} md={4} className="text-start">
|
||||||
|
<h3>Order Summary</h3>
|
||||||
|
<Table striped bordered hover>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Total Items</td>
|
||||||
|
<td>
|
||||||
|
{cartItems.reduce((total, item) => total + item.quantity, 0)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shipping Fee</td>
|
||||||
|
<td>{new Intl.NumberFormat('en-PH', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'PHP',
|
||||||
|
}).format(shippingFee.value)}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Shipping Details</td>
|
||||||
|
<td>{shippingFee.details}</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>Total</td>
|
||||||
|
<td>
|
||||||
|
<strong>{new Intl.NumberFormat('en-PH', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'PHP',
|
||||||
|
}).format(totalPrice)}</strong>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Discount</td>
|
||||||
|
<td>
|
||||||
|
<strong>{discountAmount}%</strong>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colSpan="2">
|
||||||
|
<Form.Group controlId="promoCode">
|
||||||
|
<Form.Label>Promo Code</Form.Label>
|
||||||
|
<Form.Control
|
||||||
|
type="text"
|
||||||
|
placeholder="Enter promo code"
|
||||||
|
value={promoCode}
|
||||||
|
onChange={(e) => setPromoCode(e.target.value)}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
className="mt-3"
|
||||||
|
variant="primary"
|
||||||
|
onClick={handleApplyPromoCode}
|
||||||
|
>
|
||||||
|
Apply Promo Code
|
||||||
|
</Button>
|
||||||
|
</Form.Group>
|
||||||
|
{appliedPromoCode && (
|
||||||
|
<div>
|
||||||
|
<p className="mt-2">
|
||||||
|
Applied Promo Code: <strong>{appliedPromoCode}</strong>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</Table>
|
||||||
|
</Col>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default OrderSummary;
|
||||||
@ -0,0 +1,144 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { Button, Collapse, Form } from "react-bootstrap";
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import PropTypes from "prop-types"; // Import PropTypes
|
||||||
|
import BankOption from "./BankOption";
|
||||||
|
|
||||||
|
const PaymentCollapse = ({
|
||||||
|
totalPrice,
|
||||||
|
userDetails,
|
||||||
|
selectedAddress,
|
||||||
|
selectedShippingMethod,
|
||||||
|
cartItems,
|
||||||
|
appliedPromoCode,
|
||||||
|
}) => {
|
||||||
|
const [paymentOpen, setPaymentOpen] = useState(false);
|
||||||
|
const [selectedPaymentOption, setSelectedPaymentOption] = useState(null);
|
||||||
|
const [termsAgreed, setTermsAgreed] = useState(false);
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const handlePaymentOptionChange = (option) => {
|
||||||
|
setSelectedPaymentOption(option);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTermsAgreementChange = () => {
|
||||||
|
setTermsAgreed(!termsAgreed);
|
||||||
|
};
|
||||||
|
|
||||||
|
const isSubmitButtonDisabled = !termsAgreed || selectedPaymentOption === null;
|
||||||
|
|
||||||
|
const handleOrderSubmission = () => {
|
||||||
|
try {
|
||||||
|
const orderData = {
|
||||||
|
userDetails,
|
||||||
|
selectedAddress,
|
||||||
|
selectedShippingMethod,
|
||||||
|
cartItems,
|
||||||
|
appliedPromoCode,
|
||||||
|
selectedPaymentOption,
|
||||||
|
termsAgreed,
|
||||||
|
// Include any other necessary data
|
||||||
|
};
|
||||||
|
|
||||||
|
// Log the order data to the console for testing
|
||||||
|
console.log("Order Data:", orderData);
|
||||||
|
|
||||||
|
// Display a success message to the user (for testing)
|
||||||
|
console.log("Order submission simulated successfully!");
|
||||||
|
|
||||||
|
// Navigate to the order confirmation page with orderData
|
||||||
|
navigate("/order-confirmation", { state: { orderData } });
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error submitting order:", error);
|
||||||
|
|
||||||
|
// Handle general error (for testing)
|
||||||
|
console.log("Order submission simulated failed.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="border rounded mb-3 p-3">
|
||||||
|
<h3>
|
||||||
|
<div className="d-flex justify-content-between align-items-start">
|
||||||
|
<span className="fs-6">4. Payment</span>
|
||||||
|
<Button
|
||||||
|
variant="link"
|
||||||
|
onClick={() => setPaymentOpen(!paymentOpen)}
|
||||||
|
aria-controls="paymentCollapse"
|
||||||
|
aria-expanded={paymentOpen}
|
||||||
|
>
|
||||||
|
<i className={`bi bi-chevron-${paymentOpen ? "up" : "down"}`}></i>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</h3>
|
||||||
|
<Collapse in={paymentOpen}>
|
||||||
|
<div id="paymentCollapse">
|
||||||
|
<Form.Group className="mb-3">
|
||||||
|
<Form.Label>Select Payment Option:</Form.Label>
|
||||||
|
<Form.Control
|
||||||
|
as="select"
|
||||||
|
value={selectedPaymentOption}
|
||||||
|
onChange={(e) => handlePaymentOptionChange(e.target.value)}
|
||||||
|
>
|
||||||
|
<option value="">Select</option>
|
||||||
|
<option value="bank">Bank Option</option>
|
||||||
|
{/* Add other payment options here */}
|
||||||
|
</Form.Control>
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
{selectedPaymentOption === "bank" && (
|
||||||
|
<BankOption totalPrice={totalPrice} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Terms Agreement */}
|
||||||
|
<Form.Group
|
||||||
|
className="mb-3"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "#343a40",
|
||||||
|
padding: "10px",
|
||||||
|
borderRadius: "5px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Form.Check
|
||||||
|
type="checkbox"
|
||||||
|
label="I agree to the terms of service and will adhere to them unconditionally."
|
||||||
|
checked={termsAgreed}
|
||||||
|
onChange={handleTermsAgreementChange}
|
||||||
|
style={{ color: "white" }}
|
||||||
|
/>
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
{/* Payment Button */}
|
||||||
|
<Button
|
||||||
|
variant="primary"
|
||||||
|
onClick={handleOrderSubmission}
|
||||||
|
disabled={isSubmitButtonDisabled}
|
||||||
|
>
|
||||||
|
Submit Order
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{/* Message below the Payment Button */}
|
||||||
|
{!termsAgreed && (
|
||||||
|
<div className="mt-2 text-danger">
|
||||||
|
Please agree to the terms of service before submitting the order.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Collapse>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Specify PropTypes for each prop used in the component
|
||||||
|
PaymentCollapse.propTypes = {
|
||||||
|
totalPrice: PropTypes.number.isRequired,
|
||||||
|
userDetails: PropTypes.object,
|
||||||
|
selectedAddress: PropTypes.object,
|
||||||
|
selectedShippingMethod: PropTypes.string,
|
||||||
|
cartItems: PropTypes.array,
|
||||||
|
appliedPromoCode: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PaymentCollapse;
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Button, Collapse } from "react-bootstrap";
|
||||||
|
|
||||||
|
const PersonalInfoCollapse = ({ personalInfoOpen, setPersonalInfoOpen, isCustomerLoggedIn, userDetails }) => {
|
||||||
|
return (
|
||||||
|
<div className="border rounded mb-3 p-3">
|
||||||
|
<h3>
|
||||||
|
<div className="d-flex justify-content-between align-items-start">
|
||||||
|
<span className="fs-6">1. Personal Information</span>
|
||||||
|
<Button
|
||||||
|
variant="link"
|
||||||
|
onClick={() => setPersonalInfoOpen(!personalInfoOpen)}
|
||||||
|
aria-controls="personalInfoCollapse"
|
||||||
|
aria-expanded={personalInfoOpen}
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
className={`bi bi-chevron-${personalInfoOpen ? "up" : "down"}`}
|
||||||
|
></i>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</h3>
|
||||||
|
<Collapse in={personalInfoOpen}>
|
||||||
|
<div id="personalInfoCollapse">
|
||||||
|
{isCustomerLoggedIn ? (
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<strong>Name:</strong> {userDetails?.firstName}{" "}
|
||||||
|
{userDetails?.lastName}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>Email:</strong> {userDetails?.email}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>Mobile Number:</strong> {userDetails?.mobileNo}
|
||||||
|
</p>
|
||||||
|
<p>If you want to update your information</p>
|
||||||
|
<Button variant="primary" href="/update-profile">
|
||||||
|
Update Information
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="mx-4">
|
||||||
|
<p>
|
||||||
|
You are not logged in. Please log in or register to proceed.
|
||||||
|
</p>
|
||||||
|
<Button variant="primary" href="/register">
|
||||||
|
Register
|
||||||
|
</Button>
|
||||||
|
<Button className="mx-2" variant="primary" href="/login">
|
||||||
|
Login
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Collapse>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PersonalInfoCollapse;
|
||||||
@ -0,0 +1,132 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { Button, Collapse } from "react-bootstrap";
|
||||||
|
|
||||||
|
const ShippingMethodCollapse = ({ shippingMethodOpen, setShippingMethodOpen, setSelectedShippingMethod }) => {
|
||||||
|
const [selectedOption, setSelectedOption] = useState(null);
|
||||||
|
|
||||||
|
const handleOptionChange = (option) => {
|
||||||
|
setSelectedOption(option);
|
||||||
|
setSelectedShippingMethod(option); // Update the parent component state
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="border rounded mb-3 p-3">
|
||||||
|
<h3>
|
||||||
|
<div className="d-flex justify-content-between align-items-start">
|
||||||
|
<span className="fs-6">3. Shipping Method</span>
|
||||||
|
<Button
|
||||||
|
variant="link"
|
||||||
|
onClick={() => setShippingMethodOpen(!shippingMethodOpen)}
|
||||||
|
aria-controls="shippingMethodCollapse"
|
||||||
|
aria-expanded={shippingMethodOpen}
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
className={`bi bi-chevron-${shippingMethodOpen ? "up" : "down"}`}
|
||||||
|
></i>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</h3>
|
||||||
|
<Collapse in={shippingMethodOpen}>
|
||||||
|
<div id="shippingMethodCollapse">
|
||||||
|
{/* Infographic-style table for Shipping Methods */}
|
||||||
|
<div className="row">
|
||||||
|
{/* Option 1 */}
|
||||||
|
<div className="col-md-4 mb-3">
|
||||||
|
<div
|
||||||
|
className="border p-3 text-center"
|
||||||
|
style={{ height: "auto" }}
|
||||||
|
>
|
||||||
|
<div className="d-grid gap-2 justify-content-center">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="form-check-input d-flex justify-content-center mx-auto fs-5"
|
||||||
|
id="option1Checkbox"
|
||||||
|
checked={selectedOption === "courier"}
|
||||||
|
onChange={() => handleOptionChange("courier")}
|
||||||
|
/>
|
||||||
|
<i
|
||||||
|
className="bi bi-truck text-primary"
|
||||||
|
style={{ fontSize: "3.7rem" }}
|
||||||
|
></i>
|
||||||
|
<label
|
||||||
|
className="form-check-label"
|
||||||
|
htmlFor="option1Checkbox"
|
||||||
|
>
|
||||||
|
<strong> Pickup by Courier (Lalamove/Grab)</strong>
|
||||||
|
<br />
|
||||||
|
Note: Customer pays for shipping. Wait for us to notify you
|
||||||
|
that your order is ready before you book your courier.
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Option 2 */}
|
||||||
|
<div className="col-md-4 mb-3">
|
||||||
|
<div
|
||||||
|
className="border p-3 text-center"
|
||||||
|
style={{ height: "auto" }}
|
||||||
|
>
|
||||||
|
<div className="d-grid gap-2 justify-content-center">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="form-check-input d-flex justify-content-center mx-auto fs-5"
|
||||||
|
id="option2Checkbox"
|
||||||
|
checked={selectedOption === "curbside"}
|
||||||
|
onChange={() => handleOptionChange("curbside")}
|
||||||
|
/>
|
||||||
|
<i
|
||||||
|
className="bi bi-shop text-primary"
|
||||||
|
style={{ fontSize: "3.7rem" }}
|
||||||
|
></i>
|
||||||
|
<label
|
||||||
|
className="form-check-label"
|
||||||
|
htmlFor="option2Checkbox"
|
||||||
|
>
|
||||||
|
<strong>Curbside Pickup</strong>
|
||||||
|
<br />
|
||||||
|
Note: Wait for us to notify you that your order is ready
|
||||||
|
before proceeding to our designated pickup area in front of
|
||||||
|
our building.
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Option 3 */}
|
||||||
|
<div className="col-md-4 mb-3">
|
||||||
|
<div
|
||||||
|
className="border p-3 text-center"
|
||||||
|
style={{ height: "auto" }}
|
||||||
|
>
|
||||||
|
<div className="d-grid gap-2 justify-content-center">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="form-check-input d-flex justify-content-center mx-auto fs-5"
|
||||||
|
id="option3Checkbox"
|
||||||
|
checked={selectedOption === "express"}
|
||||||
|
onChange={() => handleOptionChange("express")}
|
||||||
|
/>
|
||||||
|
<i
|
||||||
|
className="bi bi-clock text-primary"
|
||||||
|
style={{ fontSize: "3.7rem" }}
|
||||||
|
></i>
|
||||||
|
<label
|
||||||
|
className="form-check-label"
|
||||||
|
htmlFor="option3Checkbox"
|
||||||
|
>
|
||||||
|
<strong>Local Express Delivery</strong>
|
||||||
|
<br />
|
||||||
|
within 24 - 48 hours during business days
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Collapse>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ShippingMethodCollapse;
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
// OrderConfirmationPage.js
|
||||||
|
import React from "react";
|
||||||
|
import OrderDetails from "../components/OrderDetails";
|
||||||
|
import { Container } from "react-bootstrap";
|
||||||
|
|
||||||
|
const OrderConfirmationPage = ({ location }) => {
|
||||||
|
// Check if location is undefined
|
||||||
|
if (!location || !location.state) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Container>
|
||||||
|
<h2>Order Confirmation</h2>
|
||||||
|
<p>Error: No order data found.</p>
|
||||||
|
</Container>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Retrieve orderData from location.state
|
||||||
|
const orderData = location.state.orderData;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Container>
|
||||||
|
<h2>Order Confirmation</h2>
|
||||||
|
{/* Use the OrderDetails component to display order details */}
|
||||||
|
<OrderDetails orderData={orderData} />
|
||||||
|
</Container>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default OrderConfirmationPage;
|
||||||
Loading…
Reference in New Issue