build shipping and placeorder page

frontend/src/App.jsx

@@ -10,6 +10,8 @@ import Header from "./components/Header";
 import RegisterPage from "./Pages/RegisterPage";
 import UserProfilePage from "./Pages/UserProfilePage";
 import ShippingPage from "./Pages/ShippingPage";
+import PaymentPage from "./Pages/PaymentPage";
+import PlaceOrderPage from "./Pages/PlaceOrderPage";
 
 function App() {
   return (
@@ -23,6 +25,8 @@ function App() {
             <Route path="/register" component={RegisterPage} />
             <Route path="/profile" component={UserProfilePage} />
             <Route path="/shipping" component={ShippingPage} />
+            <Route path="/payment" component={PaymentPage} />
+            <Route path="/placeorder" component={PlaceOrderPage} />
             <Route path="/product/:id" component={ProductPage} />
             <Route path="/cart/:id?" component={CartPage} />
           </Switch>

frontend/src/Pages/PaymentPage.jsx

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Form, Button, Col } from "react-bootstrap";
+import FormContainer from "../components/FormContainer";
+import CheckoutSteps from "../components/CheckoutSteps";
+import { savePaymentMethod } from "../actions/cartActions";
+
+function PaymentPage({ history }) {
+  const cart = useSelector((state) => state.cart);
+  const { shippingAddress } = cart;
+
+  const dispatch = useDispatch();
+
+  const [paymentMethod, setPaymentMethod] = useState("PAYPAL");
+
+  if (!shippingAddress) {
+    history.push("/shipping");
+  }
+
+  const submitHandler = (e) => {
+    e.preventDefault();
+    dispatch(savePaymentMethod(paymentMethod));
+    history.push("/placeorder");
+  };
+
+  return (
+    <>
+      <CheckoutSteps step1 step2 step3 />
+      <FormContainer>
+        <Form onSubmit={submitHandler}>
+          <Form.Group>
+            <Form.Label as="legend">Select Method</Form.Label>
+            <Col>
+              <Form.Check
+                type="radio"
+                label="PayPal or Credit Card"
+                id="paypal"
+                name="paymentMethod"
+                checked
+                onChange={(e) => setPaymentMethod(e.target.value)}
+              ></Form.Check>
+            </Col>
+          </Form.Group>
+          <Button type="submit" variant="primary">
+            Submit
+          </Button>
+        </Form>
+      </FormContainer>
+    </>
+  );
+}
+
+export default PaymentPage;

frontend/src/Pages/PlaceOrderPage.jsx

@@ -0,0 +1,129 @@
+import React from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { Button, Col, Row, ListGroup, Image, Card } from "react-bootstrap";
+import CheckoutSteps from "../components/CheckoutSteps";
+import Message from "../components/Message";
+import { Link } from "react-router-dom";
+
+function PlaceOrderPage() {
+  const cart = useSelector((state) => state.cart);
+
+  cart.itemsPrice = cart.cartItems
+    .reduce((acc, item) => acc + item.price * item.qtn, 0)
+    .toFixed(2);
+
+  cart.shippingPrice = (cart.itemsPrice > 100 ? 0 : 10).toFixed(2);
+
+  cart.taxPrice = Number(0.2 * cart.itemsPrice).toFixed(2);
+
+  cart.totalPrice = (
+    Number(cart.itemsPrice) +
+    Number(cart.taxPrice) +
+    Number(cart.shippingPrice)
+  ).toFixed(2);
+
+  function placeorderHandler() {
+    console.log("placeorder");
+  }
+  return (
+    <>
+      <CheckoutSteps step1 step2 step3 step4 />
+      <Row>
+        <Col md={8}>
+          <ListGroup variant="flush">
+            <ListGroup.Item>
+              <h2>Shipping Info</h2>
+              <p>
+                <strong>Shipping: </strong>
+                {cart.shippingAddress.address}, {cart.shippingAddress.city},{" "}
+                {cart.shippingAddress.country}
+              </p>
+            </ListGroup.Item>
+            <ListGroup.Item>
+              <h2>Payment Method</h2>
+              <p>
+                <strong>Method: </strong>
+                {cart.paymentMethod}
+              </p>
+            </ListGroup.Item>
+            <ListGroup.Item>
+              <h2>Order Item: </h2>
+              {cart.cartItems.length === 0 ? (
+                <Message variant="info"> Your cart is empty.</Message>
+              ) : (
+                <ListGroup variant="flush">
+                  {cart.cartItems.map((item, index) => (
+                    <ListGroup.Item key={index}>
+                      <Row>
+                        <Col md={2}>
+                          <Image
+                            src={item.image}
+                            alt={item.name}
+                            fluid
+                            rounded
+                          />
+                        </Col>
+                        <Col>
+                          <Link to={`/product/${item._id}`}>{item.name}</Link>
+                        </Col>
+                        <Col md={5}>
+                          {item.qtn} x Rs.{item.price} = Rs.{" "}
+                          {(item.qtn * item.price).toFixed(2)}
+                        </Col>
+                      </Row>
+                    </ListGroup.Item>
+                  ))}
+                </ListGroup>
+              )}
+            </ListGroup.Item>
+          </ListGroup>
+        </Col>
+        <Col md={4}>
+          <Card>
+            <ListGroup variant="flush">
+              <ListGroup.Item>
+                <h2>Order Summery</h2>
+              </ListGroup.Item>
+              <ListGroup.Item>
+                <Row>
+                  <Col>Item:</Col>
+                  <Col>Rs. {cart.itemsPrice}</Col>
+                </Row>
+              </ListGroup.Item>
+              <ListGroup.Item>
+                <Row>
+                  <Col>Shipping: </Col>
+                  <Col>Rs. {cart.shippingPrice}</Col>
+                </Row>
+              </ListGroup.Item>
+              <ListGroup.Item>
+                <Row>
+                  <Col>Tax: </Col>
+                  <Col>Rs. {cart.taxPrice}</Col>
+                </Row>
+              </ListGroup.Item>
+              <ListGroup.Item>
+                <Row>
+                  <Col>Total: </Col>
+                  <Col>Rs. {cart.totalPrice}</Col>
+                </Row>
+              </ListGroup.Item>
+              <ListGroup.Item>
+                <Button
+                  type="button"
+                  className="btn-block"
+                  disabled={cart.cartItems.length === 0}
+                  onClick={placeorderHandler}
+                >
+                  Place Order
+                </Button>
+              </ListGroup.Item>
+            </ListGroup>
+          </Card>
+        </Col>
+      </Row>
+    </>
+  );
+}
+
+export default PlaceOrderPage;

frontend/src/Pages/ShippingPage.jsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Form, Button } from "react-bootstrap";
 import FormContainer from "../components/FormContainer";
+import CheckoutSteps from "../components/CheckoutSteps";
 import { saveShippingAddress } from "../actions/cartActions";
 
 function ShippingPage({ history }) {
@@ -16,7 +17,6 @@ function ShippingPage({ history }) {
   const [country, setCountry] = useState(shippingAddress.country);
   function submitHandler(e) {
     e.preventDefault();
-    console.log("submit");
     dispatch(
       saveShippingAddress({
         address,
@@ -28,7 +28,8 @@ function ShippingPage({ history }) {
     history.push("/payment");
   }
   return (
-    <div>
+    <>
+      <CheckoutSteps step1 step2 />
       <FormContainer>
         <h1>Shipping</h1>
         <Form onSubmit={submitHandler}>
@@ -77,7 +78,7 @@ function ShippingPage({ history }) {
           </Button>
         </Form>
       </FormContainer>
-    </div>
+    </>
   );
 }
 

frontend/src/actions/cartActions.jsx

@@ -3,6 +3,7 @@ import {
   CART_ADD_ITEM,
   CART_REMOVE_ITEM,
   CART_SAVE_SHIPPING_ADDRESS,
+  CART_SAVE_PAYMENT_METHOD,
 } from "../constants/cartConstants";
 
 export const addToCart = (id, qtn) => async (dispatch, getState) => {
@@ -29,3 +30,11 @@ export const saveShippingAddress = (data) => async (dispatch) => {
   });
   localStorage.setItem("shippingAddress", JSON.stringify(data));
 };
+
+export const savePaymentMethod = (data) => async (dispatch) => {
+  dispatch({
+    type: CART_SAVE_PAYMENT_METHOD,
+    payload: data,
+  });
+  localStorage.setItem("paymentMethod", JSON.stringify(data));
+};

frontend/src/components/CheckoutSteps.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Nav } from "react-bootstrap";
+import { LinkContainer } from "react-router-bootstrap";
+
+function CheckoutSteps({ step1, step2, step3, step4 }) {
+  return (
+    <Nav className="justify-content-center mb-4">
+      <Nav.Item>
+        {step1 ? (
+          <LinkContainer to="/login">
+            <Nav.Link>Login</Nav.Link>
+          </LinkContainer>
+        ) : (
+          <Nav.Link disabled>Login</Nav.Link>
+        )}
+      </Nav.Item>
+      <Nav.Item>
+        {step2 ? (
+          <LinkContainer to="/shipping">
+            <Nav.Link>Shipping</Nav.Link>
+          </LinkContainer>
+        ) : (
+          <Nav.Link disabled>Shipping</Nav.Link>
+        )}
+      </Nav.Item>
+      <Nav.Item>
+        {step3 ? (
+          <LinkContainer to="/payment">
+            <Nav.Link>Payment</Nav.Link>
+          </LinkContainer>
+        ) : (
+          <Nav.Link disabled>Payment</Nav.Link>
+        )}
+      </Nav.Item>
+      <Nav.Item>
+        {step4 ? (
+          <LinkContainer to="/placeorder">
+            <Nav.Link>Place Order</Nav.Link>
+          </LinkContainer>
+        ) : (
+          <Nav.Link disabled>Place Order</Nav.Link>
+        )}
+      </Nav.Item>
+    </Nav>
+  );
+}
+
+export default CheckoutSteps;

frontend/src/constants/cartConstants.jsx

@@ -1,3 +1,6 @@
 export const CART_ADD_ITEM = "CART_ADD_ITEM";
 export const CART_REMOVE_ITEM = "CART_REMOVE_ITEM";
+
 export const CART_SAVE_SHIPPING_ADDRESS = "CART_SAVE_SHIPPING_ADDRESS";
+
+export const CART_SAVE_PAYMENT_METHOD = "CART_SAVE_PAYMENT_METHOD";

frontend/src/reducers/cartReducer.jsx

@@ -2,10 +2,11 @@ import {
   CART_ADD_ITEM,
   CART_REMOVE_ITEM,
   CART_SAVE_SHIPPING_ADDRESS,
+  CART_SAVE_PAYMENT_METHOD,
 } from "../constants/cartConstants";
 
 export const cartReducer = (
-  state = { cartItems: [], shippingAddress: {} },
+  state = { cartItems: [], shippingAddress: {}, paymentMethod: null },
   action
 ) => {
   switch (action.type) {
@@ -36,6 +37,11 @@ export const cartReducer = (
         ...state,
         shippingAddress: action.payload,
       };
+    case CART_SAVE_PAYMENT_METHOD:
+      return {
+        ...state,
+        paymentMethod: action.payload,
+      };
     default:
       return state;
   }