Skip to content

Commit a65a35f

Browse files
coderj001coderj001
committed
add shipping page
1 parent 067b398 commit a65a35f

File tree

6 files changed

+122
-4
lines changed

6 files changed

+122
-4
lines changed

‎frontend/src/App.jsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Footer from "./components/Footer";
99
import Header from "./components/Header";
1010
import RegisterPage from "./Pages/RegisterPage";
1111
import UserProfilePage from "./Pages/UserProfilePage";
12+
import ShippingPage from "./Pages/ShippingPage";
1213

1314
function App() {
1415
return (
@@ -21,6 +22,7 @@ function App() {
2122
<Route path="/login" component={LoginPage} />
2223
<Route path="/register" component={RegisterPage} />
2324
<Route path="/profile" component={UserProfilePage} />
25+
<Route path="/shipping" component={ShippingPage} />
2426
<Route path="/product/:id" component={ProductPage} />
2527
<Route path="/cart/:id?" component={CartPage} />
2628
</Switch>

‎frontend/src/Pages/ShippingPage.jsx

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import React, { useState } from "react";
2+
import { useDispatch, useSelector } from "react-redux";
3+
import { Form, Button } from "react-bootstrap";
4+
import FormContainer from "../components/FormContainer";
5+
import { saveShippingAddress } from "../actions/cartActions";
6+
7+
function ShippingPage({ history }) {
8+
const cart = useSelector((state) => state.cart);
9+
const { shippingAddress } = cart;
10+
11+
const dispatch = useDispatch();
12+
13+
const [address, setAddress] = useState(shippingAddress.address);
14+
const [city, setCity] = useState(shippingAddress.city);
15+
const [pincode, setPincode] = useState(shippingAddress.pincode);
16+
const [country, setCountry] = useState(shippingAddress.country);
17+
function submitHandler(e) {
18+
e.preventDefault();
19+
console.log("submit");
20+
dispatch(
21+
saveShippingAddress({
22+
address,
23+
city,
24+
pincode,
25+
country,
26+
})
27+
);
28+
history.push("/payment");
29+
}
30+
return (
31+
<div>
32+
<FormContainer>
33+
<h1>Shipping</h1>
34+
<Form onSubmit={submitHandler}>
35+
<Form.Group controlId="address">
36+
<Form.Label>Enter Address</Form.Label>
37+
<Form.Control
38+
required
39+
type="text"
40+
placeholder="Enter Address"
41+
value={address ? address : ""}
42+
onChange={(e) => setAddress(e.target.value)}
43+
></Form.Control>
44+
</Form.Group>{" "}
45+
<Form.Group controlId="city">
46+
<Form.Label>Enter City</Form.Label>
47+
<Form.Control
48+
required
49+
type="text"
50+
placeholder="Enter City"
51+
value={city ? city : ""}
52+
onChange={(e) => setCity(e.target.value)}
53+
></Form.Control>
54+
</Form.Group>
55+
<Form.Group controlId="pincode">
56+
<Form.Label>Enter Pincode</Form.Label>
57+
<Form.Control
58+
required
59+
type="text"
60+
placeholder="Enter Pincode"
61+
value={pincode ? pincode : ""}
62+
onChange={(e) => setPincode(e.target.value)}
63+
></Form.Control>
64+
</Form.Group>
65+
<Form.Group controlId="country">
66+
<Form.Label>Enter Country</Form.Label>
67+
<Form.Control
68+
required
69+
type="text"
70+
placeholder="Enter Country"
71+
value={country ? country : ""}
72+
onChange={(e) => setCountry(e.target.value)}
73+
></Form.Control>
74+
</Form.Group>
75+
<Button type="submit" variant="primary">
76+
Continue
77+
</Button>
78+
</Form>
79+
</FormContainer>
80+
</div>
81+
);
82+
}
83+
84+
export default ShippingPage;

‎frontend/src/actions/cartActions.jsx

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import axios from "axios";
2-
import { CART_ADD_ITEM, CART_REMOVE_ITEM } from "../constants/cartConstants";
2+
import {
3+
CART_ADD_ITEM,
4+
CART_REMOVE_ITEM,
5+
CART_SAVE_SHIPPING_ADDRESS,
6+
} from "../constants/cartConstants";
37

48
export const addToCart = (id, qtn) => async (dispatch, getState) => {
59
const { data } = await axios.get(`/api/product/${id}`);
@@ -17,3 +21,11 @@ export const removeFromCart = (id) => async (dispatch, getState) => {
1721
});
1822
localStorage.setItem("cartItems", JSON.stringify(getState().cart.cartItems));
1923
};
24+
25+
export const saveShippingAddress = (data) => async (dispatch) => {
26+
dispatch({
27+
type: CART_SAVE_SHIPPING_ADDRESS,
28+
payload: data,
29+
});
30+
localStorage.setItem("shippingAddress", JSON.stringify(data));
31+
};

‎frontend/src/constants/cartConstants.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export const CART_ADD_ITEM = "CART_ADD_ITEM";
22
export const CART_REMOVE_ITEM = "CART_REMOVE_ITEM";
3+
export const CART_SAVE_SHIPPING_ADDRESS = "CART_SAVE_SHIPPING_ADDRESS";

‎frontend/src/reducers/cartReducer.jsx

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
1-
import { CART_ADD_ITEM, CART_REMOVE_ITEM } from "../constants/cartConstants";
1+
import {
2+
CART_ADD_ITEM,
3+
CART_REMOVE_ITEM,
4+
CART_SAVE_SHIPPING_ADDRESS,
5+
} from "../constants/cartConstants";
26

3-
export const cartReducer = (state = { cartItems: [] }, action) => {
7+
export const cartReducer = (
8+
state = { cartItems: [], shippingAddress: {} },
9+
action
10+
) => {
411
switch (action.type) {
512
case CART_ADD_ITEM:
613
const item = action.payload;
@@ -24,6 +31,11 @@ export const cartReducer = (state = { cartItems: [] }, action) => {
2431
...state,
2532
cartItems: state.cartItems.filter((x) => x._id !== action.payload),
2633
};
34+
case CART_SAVE_SHIPPING_ADDRESS:
35+
return {
36+
...state,
37+
shippingAddress: action.payload,
38+
};
2739
default:
2840
return state;
2941
}

‎frontend/src/store.jsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,15 @@ const userInfoFromStorage = localStorage.getItem("userInfo")
3131
? JSON.parse(localStorage.getItem("userInfo"))
3232
: null;
3333

34+
const shippingAddressFromStorage = localStorage.getItem("shippingAddress")
35+
? JSON.parse(localStorage.getItem("shippingAddress"))
36+
: {};
37+
3438
const initialState = {
35-
cart: { cartItems: cartItemsFromStorage },
39+
cart: {
40+
cartItems: cartItemsFromStorage,
41+
shippingAddress: shippingAddressFromStorage,
42+
},
3643
userLogin: { userInfo: userInfoFromStorage },
3744
};
3845

0 commit comments

Comments
 (0)