Skip to content

Commit ccbe684

Browse files
coderj001coderj001
committed
build shipping and placeorder page
1 parent a65a35f commit ccbe684

File tree

8 files changed

+257
-4
lines changed

8 files changed

+257
-4
lines changed

‎frontend/src/App.jsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import Header from "./components/Header";
1010
import RegisterPage from "./Pages/RegisterPage";
1111
import UserProfilePage from "./Pages/UserProfilePage";
1212
import ShippingPage from "./Pages/ShippingPage";
13+
import PaymentPage from "./Pages/PaymentPage";
14+
import PlaceOrderPage from "./Pages/PlaceOrderPage";
1315

1416
function App() {
1517
return (
@@ -23,6 +25,8 @@ function App() {
2325
<Route path="/register" component={RegisterPage} />
2426
<Route path="/profile" component={UserProfilePage} />
2527
<Route path="/shipping" component={ShippingPage} />
28+
<Route path="/payment" component={PaymentPage} />
29+
<Route path="/placeorder" component={PlaceOrderPage} />
2630
<Route path="/product/:id" component={ProductPage} />
2731
<Route path="/cart/:id?" component={CartPage} />
2832
</Switch>

‎frontend/src/Pages/PaymentPage.jsx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React, { useState } from "react";
2+
import { useDispatch, useSelector } from "react-redux";
3+
import { Form, Button, Col } from "react-bootstrap";
4+
import FormContainer from "../components/FormContainer";
5+
import CheckoutSteps from "../components/CheckoutSteps";
6+
import { savePaymentMethod } from "../actions/cartActions";
7+
8+
function PaymentPage({ history }) {
9+
const cart = useSelector((state) => state.cart);
10+
const { shippingAddress } = cart;
11+
12+
const dispatch = useDispatch();
13+
14+
const [paymentMethod, setPaymentMethod] = useState("PAYPAL");
15+
16+
if (!shippingAddress) {
17+
history.push("/shipping");
18+
}
19+
20+
const submitHandler = (e) => {
21+
e.preventDefault();
22+
dispatch(savePaymentMethod(paymentMethod));
23+
history.push("/placeorder");
24+
};
25+
26+
return (
27+
<>
28+
<CheckoutSteps step1 step2 step3 />
29+
<FormContainer>
30+
<Form onSubmit={submitHandler}>
31+
<Form.Group>
32+
<Form.Label as="legend">Select Method</Form.Label>
33+
<Col>
34+
<Form.Check
35+
type="radio"
36+
label="PayPal or Credit Card"
37+
id="paypal"
38+
name="paymentMethod"
39+
checked
40+
onChange={(e) => setPaymentMethod(e.target.value)}
41+
></Form.Check>
42+
</Col>
43+
</Form.Group>
44+
<Button type="submit" variant="primary">
45+
Submit
46+
</Button>
47+
</Form>
48+
</FormContainer>
49+
</>
50+
);
51+
}
52+
53+
export default PaymentPage;

‎frontend/src/Pages/PlaceOrderPage.jsx

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
import React from "react";
2+
import { useSelector, useDispatch } from "react-redux";
3+
import { Button, Col, Row, ListGroup, Image, Card } from "react-bootstrap";
4+
import CheckoutSteps from "../components/CheckoutSteps";
5+
import Message from "../components/Message";
6+
import { Link } from "react-router-dom";
7+
8+
function PlaceOrderPage() {
9+
const cart = useSelector((state) => state.cart);
10+
11+
cart.itemsPrice = cart.cartItems
12+
.reduce((acc, item) => acc + item.price * item.qtn, 0)
13+
.toFixed(2);
14+
15+
cart.shippingPrice = (cart.itemsPrice > 100 ? 0 : 10).toFixed(2);
16+
17+
cart.taxPrice = Number(0.2 * cart.itemsPrice).toFixed(2);
18+
19+
cart.totalPrice = (
20+
Number(cart.itemsPrice) +
21+
Number(cart.taxPrice) +
22+
Number(cart.shippingPrice)
23+
).toFixed(2);
24+
25+
function placeorderHandler() {
26+
console.log("placeorder");
27+
}
28+
return (
29+
<>
30+
<CheckoutSteps step1 step2 step3 step4 />
31+
<Row>
32+
<Col md={8}>
33+
<ListGroup variant="flush">
34+
<ListGroup.Item>
35+
<h2>Shipping Info</h2>
36+
<p>
37+
<strong>Shipping: </strong>
38+
{cart.shippingAddress.address}, {cart.shippingAddress.city},{" "}
39+
{cart.shippingAddress.country}
40+
</p>
41+
</ListGroup.Item>
42+
<ListGroup.Item>
43+
<h2>Payment Method</h2>
44+
<p>
45+
<strong>Method: </strong>
46+
{cart.paymentMethod}
47+
</p>
48+
</ListGroup.Item>
49+
<ListGroup.Item>
50+
<h2>Order Item: </h2>
51+
{cart.cartItems.length === 0 ? (
52+
<Message variant="info"> Your cart is empty.</Message>
53+
) : (
54+
<ListGroup variant="flush">
55+
{cart.cartItems.map((item, index) => (
56+
<ListGroup.Item key={index}>
57+
<Row>
58+
<Col md={2}>
59+
<Image
60+
src={item.image}
61+
alt={item.name}
62+
fluid
63+
rounded
64+
/>
65+
</Col>
66+
<Col>
67+
<Link to={`/product/${item._id}`}>{item.name}</Link>
68+
</Col>
69+
<Col md={5}>
70+
{item.qtn} x Rs.{item.price} = Rs.{" "}
71+
{(item.qtn * item.price).toFixed(2)}
72+
</Col>
73+
</Row>
74+
</ListGroup.Item>
75+
))}
76+
</ListGroup>
77+
)}
78+
</ListGroup.Item>
79+
</ListGroup>
80+
</Col>
81+
<Col md={4}>
82+
<Card>
83+
<ListGroup variant="flush">
84+
<ListGroup.Item>
85+
<h2>Order Summery</h2>
86+
</ListGroup.Item>
87+
<ListGroup.Item>
88+
<Row>
89+
<Col>Item:</Col>
90+
<Col>Rs. {cart.itemsPrice}</Col>
91+
</Row>
92+
</ListGroup.Item>
93+
<ListGroup.Item>
94+
<Row>
95+
<Col>Shipping: </Col>
96+
<Col>Rs. {cart.shippingPrice}</Col>
97+
</Row>
98+
</ListGroup.Item>
99+
<ListGroup.Item>
100+
<Row>
101+
<Col>Tax: </Col>
102+
<Col>Rs. {cart.taxPrice}</Col>
103+
</Row>
104+
</ListGroup.Item>
105+
<ListGroup.Item>
106+
<Row>
107+
<Col>Total: </Col>
108+
<Col>Rs. {cart.totalPrice}</Col>
109+
</Row>
110+
</ListGroup.Item>
111+
<ListGroup.Item>
112+
<Button
113+
type="button"
114+
className="btn-block"
115+
disabled={cart.cartItems.length === 0}
116+
onClick={placeorderHandler}
117+
>
118+
Place Order
119+
</Button>
120+
</ListGroup.Item>
121+
</ListGroup>
122+
</Card>
123+
</Col>
124+
</Row>
125+
</>
126+
);
127+
}
128+
129+
export default PlaceOrderPage;

‎frontend/src/Pages/ShippingPage.jsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useState } from "react";
22
import { useDispatch, useSelector } from "react-redux";
33
import { Form, Button } from "react-bootstrap";
44
import FormContainer from "../components/FormContainer";
5+
import CheckoutSteps from "../components/CheckoutSteps";
56
import { saveShippingAddress } from "../actions/cartActions";
67

78
function ShippingPage({ history }) {
@@ -16,7 +17,6 @@ function ShippingPage({ history }) {
1617
const [country, setCountry] = useState(shippingAddress.country);
1718
function submitHandler(e) {
1819
e.preventDefault();
19-
console.log("submit");
2020
dispatch(
2121
saveShippingAddress({
2222
address,
@@ -28,7 +28,8 @@ function ShippingPage({ history }) {
2828
history.push("/payment");
2929
}
3030
return (
31-
<div>
31+
<>
32+
<CheckoutSteps step1 step2 />
3233
<FormContainer>
3334
<h1>Shipping</h1>
3435
<Form onSubmit={submitHandler}>
@@ -77,7 +78,7 @@ function ShippingPage({ history }) {
7778
</Button>
7879
</Form>
7980
</FormContainer>
80-
</div>
81+
</>
8182
);
8283
}
8384

‎frontend/src/actions/cartActions.jsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
CART_ADD_ITEM,
44
CART_REMOVE_ITEM,
55
CART_SAVE_SHIPPING_ADDRESS,
6+
CART_SAVE_PAYMENT_METHOD,
67
} from "../constants/cartConstants";
78

89
export const addToCart = (id, qtn) => async (dispatch, getState) => {
@@ -29,3 +30,11 @@ export const saveShippingAddress = (data) => async (dispatch) => {
2930
});
3031
localStorage.setItem("shippingAddress", JSON.stringify(data));
3132
};
33+
34+
export const savePaymentMethod = (data) => async (dispatch) => {
35+
dispatch({
36+
type: CART_SAVE_PAYMENT_METHOD,
37+
payload: data,
38+
});
39+
localStorage.setItem("paymentMethod", JSON.stringify(data));
40+
};

‎frontend/src/components/CheckoutSteps.jsx

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from "react";
2+
import { Nav } from "react-bootstrap";
3+
import { LinkContainer } from "react-router-bootstrap";
4+
5+
function CheckoutSteps({ step1, step2, step3, step4 }) {
6+
return (
7+
<Nav className="justify-content-center mb-4">
8+
<Nav.Item>
9+
{step1 ? (
10+
<LinkContainer to="/login">
11+
<Nav.Link>Login</Nav.Link>
12+
</LinkContainer>
13+
) : (
14+
<Nav.Link disabled>Login</Nav.Link>
15+
)}
16+
</Nav.Item>
17+
<Nav.Item>
18+
{step2 ? (
19+
<LinkContainer to="/shipping">
20+
<Nav.Link>Shipping</Nav.Link>
21+
</LinkContainer>
22+
) : (
23+
<Nav.Link disabled>Shipping</Nav.Link>
24+
)}
25+
</Nav.Item>
26+
<Nav.Item>
27+
{step3 ? (
28+
<LinkContainer to="/payment">
29+
<Nav.Link>Payment</Nav.Link>
30+
</LinkContainer>
31+
) : (
32+
<Nav.Link disabled>Payment</Nav.Link>
33+
)}
34+
</Nav.Item>
35+
<Nav.Item>
36+
{step4 ? (
37+
<LinkContainer to="/placeorder">
38+
<Nav.Link>Place Order</Nav.Link>
39+
</LinkContainer>
40+
) : (
41+
<Nav.Link disabled>Place Order</Nav.Link>
42+
)}
43+
</Nav.Item>
44+
</Nav>
45+
);
46+
}
47+
48+
export default CheckoutSteps;

‎frontend/src/constants/cartConstants.jsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
export const CART_ADD_ITEM = "CART_ADD_ITEM";
22
export const CART_REMOVE_ITEM = "CART_REMOVE_ITEM";
3+
34
export const CART_SAVE_SHIPPING_ADDRESS = "CART_SAVE_SHIPPING_ADDRESS";
5+
6+
export const CART_SAVE_PAYMENT_METHOD = "CART_SAVE_PAYMENT_METHOD";

‎frontend/src/reducers/cartReducer.jsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import {
22
CART_ADD_ITEM,
33
CART_REMOVE_ITEM,
44
CART_SAVE_SHIPPING_ADDRESS,
5+
CART_SAVE_PAYMENT_METHOD,
56
} from "../constants/cartConstants";
67

78
export const cartReducer = (
8-
state = { cartItems: [], shippingAddress: {} },
9+
state = { cartItems: [], shippingAddress: {}, paymentMethod: null },
910
action
1011
) => {
1112
switch (action.type) {
@@ -36,6 +37,11 @@ export const cartReducer = (
3637
...state,
3738
shippingAddress: action.payload,
3839
};
40+
case CART_SAVE_PAYMENT_METHOD:
41+
return {
42+
...state,
43+
paymentMethod: action.payload,
44+
};
3945
default:
4046
return state;
4147
}

0 commit comments

Comments
 (0)