payment process working

client/package.json

@@ -23,6 +23,7 @@
     "react-file-base64": "^1.0.3",
     "react-google-login": "^5.2.2",
     "react-html-parser": "^2.0.2",
+    "react-paypal-button-v2": "^2.6.3",
     "react-redux": "^7.2.4",
     "react-router-bootstrap": "^0.25.0",
     "react-router-dom": "^5.2.0",

client/src/components/Ecommerce/Screen/OrderScreen.js

@@ -0,0 +1,182 @@
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+import { Card, Col, Image, ListGroup, Row } from "react-bootstrap";
+import { PayPalButton } from 'react-paypal-button-v2';
+import { useDispatch, useSelector } from "react-redux";
+import { Link } from "react-router-dom";
+import { ORDER_PAY_RESET } from '../../../constants/orderConstants';
+import { getOrderDetails, payOrder } from "../../../redux/actions/orderActions";
+import Loader from "../Loader";
+import Message from "../Message";
+
+const OrderScreen = ({ match }) => {
+
+    const orderId = match.params.id
+    const dispatch = useDispatch();
+
+    const [sdkReady, setSdkReady] = useState(false)
+
+    const orderDetails = useSelector((state) => state.orderDetails);
+    const { order, loading, error } = orderDetails;
+
+    const orderPay = useSelector((state) => state.orderPay);
+    const { loading:loadingPay, success:successPay } = orderPay;
+
+
+
+    if (!loading) {
+         const addDecimals = (num) => {
+             return (Math.round(num * 100) / 100).toFixed(2);
+
+        };
+        order.itemsPrice = addDecimals(
+             order?.orderedItems?.reduce((acc, item) => acc + item.price * item.qty, 0)
+        );    
+    }
+
+
+
+    useEffect(() => {
+        const addPayPalScript = async (req, res) => {
+            const { data: clientId } = await axios.get('/api/config/paypal')
+            console.log(clientId);
+
+            const script = document.createElement('script')
+            script.type = 'text/javascript'
+            script.src = `https://www.paypal.com/sdk/js?client-id=${clientId}`
+            script.async = true
+            script.onload = () => {
+                setSdkReady(true)
+            }
+            document.body.appendChild(script)
+
+        }
+
+        if (!order || successPay) {
+            dispatch({type:ORDER_PAY_RESET})
+            dispatch(getOrderDetails(orderId))
+        } else if (!order.isPaid) {
+            if (!window.paypal) {
+                addPayPalScript()
+            }else setSdkReady(true)
+        }
+
+    }, [dispatch,order,orderId,successPay])
+
+    const successPaymentHandler = (paymentResult) => {
+        console.log(paymentResult);
+        dispatch(payOrder(orderId,paymentResult))
+    }
+
+
+    return loading ? <Loader /> : error ? <Message variant='danger'>{error}</Message> :
+        <>
+            <h1>Order {order._id}</h1>
+             <Row>
+                <Col md={8}>
+                <ListGroup variant="flush">
+                    <ListGroup.Item>
+                    <h2>Shipping</h2>
+                            <p><strong>Name: &nbsp; </strong> {order.user.name}</p>
+                            <p><strong>Email: &nbsp;</strong> {order.user.email}</p>
+                            <p>
+                                <strong>Address: &nbsp;</strong> 
+                                {order.shippingAddress.address}, {order.shippingAddress.city}{" "}
+                                {order.shippingAddress.thana}, {order.shippingAddress.houseNumber}
+                            </p>
+                            {order.isDelivered ? <Message variant='success'>Delivery Done</Message> : <Message variant='danger'>Not Delivered</Message>}
+
+
+                    </ListGroup.Item>
+
+                    <ListGroup.Item>
+                            <h2>Payment Method</h2>
+                            <p>
+                                <strong>Method: </strong>
+                                {order.paymentMethod}
+                            </p>
+
+                            {order.isPaid ? <Message variant='success'>Payment Done</Message> :  <Message variant='danger'>Not Paid</Message> }
+
+                    </ListGroup.Item>
+                    <ListGroup.Item>
+                    <h2>Order Items</h2>
+                    {order?.orderedItems?.length === 0 ? (
+                        <Message>Order is empty</Message>
+                    ) : (
+                        <ListGroup variant="flush">
+                        {order?.orderedItems?.map((item, index) => (
+                            <ListGroup.Item key={index}>
+                            <Row>
+                                <Col md={1}>
+                                <Image
+                                    src={item.image}
+                                    alt={item.name}
+                                    fluid
+                                    rounded
+                                />
+                                </Col>
+                                <Col>
+                                <Link to={`/product/${item.product}`}>
+                                    {item.name}
+                                </Link>
+                                </Col>
+                                <Col md={4}>
+                                {item.qty} x ৳{item.price} = ৳{item.qty * item.price}
+                                </Col>
+                            </Row>
+                            </ListGroup.Item>
+                        ))}
+                        </ListGroup>
+                    )}
+                    </ListGroup.Item>
+                </ListGroup>
+                </Col>
+                <Col md={4}>
+                <Card>
+                    <ListGroup variant="flush">
+                    <ListGroup.Item>
+                        <h3>Order Summary</h3>
+                    </ListGroup.Item>
+                    <ListGroup.Item>
+                        <Row>
+                        <Col>Items</Col>
+                        <Col>৳{order.itemsPrice}</Col>
+                        </Row>
+                    </ListGroup.Item>
+                    <ListGroup.Item>
+                        <Row>
+                        <Col>Delivery Charge</Col>
+                        <Col>৳{order.shippingPrice}</Col>
+                        </Row>
+                    </ListGroup.Item>
+
+                    <ListGroup.Item>
+                        <Row>
+                        <Col>Total</Col>
+                        <Col>৳{order.totalPrice}</Col>
+                        </Row>
+                    </ListGroup.Item>
+
+                            {!order.isPaid && (
+                                <ListGroup.Item>
+                                    {loadingPay && <Loader />}
+                                    {!sdkReady ? <Loader /> : (
+                                        <PayPalButton
+                                            amount={order.totalPrice}
+                                            onSuccess={successPaymentHandler}
+                                        />
+                                    )}
+                                </ListGroup.Item>
+
+                            )}
+
+                    </ListGroup>
+                </Card>
+                </Col>
+            </Row>
+        </>
+
+};
+
+export default OrderScreen;

client/src/components/Ecommerce/Screen/PlaceOrderScreen.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Button, Card, Col, Image, ListGroup, Row } from "react-bootstrap";
 import { useDispatch, useSelector } from "react-redux";
 import { Link } from "react-router-dom";
@@ -13,18 +13,16 @@ const PlaceOrderScreen = ({ history }) => {
   const cart = useSelector((state) => state.cart);
 
   const orderCreate = useSelector((state) => state.orderCreate);
-  const { error } = orderCreate;
+  const { order,success,error } = orderCreate;
 
-  // useEffect(() => {
-  //   if (success) {
-  //     // history.push(`/order/${order._id}`);
-  //     // history.push("/order")
-  //   }
-  //   // eslint-disable-next-line
-  // }, [history, success]);
+  useEffect(() => {
+    if (success) {
+      history.push(`/order/${order._id}`);
+    }
+    // eslint-disable-next-line
+  }, [history, success]);
 
   const placeOrderHandler = () => {
-    console.log(cart.cartItems);
 
     dispatch(
       createOrder({

client/src/components/Ecommerce/Screen/ShippingScreen.js

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import { Button, Form } from "react-bootstrap";
 import { useDispatch, useSelector } from "react-redux";
-import FormContainer from "../FormContainer";
-import CheckoutSteps from "../CheckoutSteps";
 import { saveShippingAddress } from "../../../redux/actions/cartActions";
+import CheckoutSteps from "../CheckoutSteps";
+import FormContainer from "../FormContainer";
 
 const ShippingScreen = ({ history }) => {
   const cart = useSelector((state) => state.cart);
@@ -19,7 +19,6 @@ const ShippingScreen = ({ history }) => {
 
   const submitHandler = (e) => {
     e.preventDefault();
-    console.log("submit");
     dispatch(saveShippingAddress({ address, city, thana, houseNumber }));
     history.push("/payment");
   };

client/src/components/LandingPage/Feature.js

@@ -66,7 +66,7 @@ function Feature() {
     <Container className={classes.gridContainer}>
       <Grid container spacing={5} elevate={3} >
         {data.map(d => (
-          <Grid item xs={12} sm={6} md={4}>
+          <Grid item xs={12} sm={6} md={4} key={d.title}>
             <FeatureCard title={d.title} text={d.text} image={d.image}/>
           </Grid>
         ))}  

client/src/constants/orderConstants.js

@@ -2,10 +2,19 @@ export const ORDER_CREATE_REQUEST = "ORDER_CREATE_REQUEST";
 export const ORDER_CREATE_SUCCESS = "ORDER_CREATE_SUCCESS";
 export const ORDER_CREATE_FAIL = "ORDER_CREATE_FAIL";
 
+export const ORDER_DETAILS_REQUEST = "ORDER_DETAILS_REQUEST";
+export const ORDER_DETAILS_SUCCESS = "ORDER_DETAILS_SUCCESS";
+export const ORDER_DETAILS_FAIL = "ORDER_DETAILS_FAIL";
+
 export const ORDER_LIST_REQUEST = "ORDER_LIST_REQUEST";
 export const ORDER_LIST_SUCCESS = "ORDER_LIST_SUCCESS";
 export const ORDER_LIST_FAIL = "ORDER_LIST_FAIL";
 
+export const ORDER_PAY_REQUEST = "ORDER_PAY_REQUEST";
+export const ORDER_PAY_SUCCESS = "ORDER_PAY_SUCCESS";
+export const ORDER_PAY_FAIL = "ORDER_PAY_FAIL";
+export const ORDER_PAY_RESET = "ORDER_PAY_RESET";
+
 export const ORDER_DATA_REQUEST = "ORDER_DATA_REQUEST";
 export const ORDER_DATA_SUCCESS = "ORDER_DATA_SUCCESS";
 export const ORDER_DATA_FAIL = "ORDER_DATA_FAIL";

client/src/pages/MainPage.js

@@ -14,6 +14,7 @@ import HomeScreen from '../components/Ecommerce/Screen/HomeScreen';
 import LoginScreen from '../components/Ecommerce/Screen/LoginScreen';
 import OrderDataScreen from "../components/Ecommerce/Screen/OrderDataScreen";
 import OrderListScreen from "../components/Ecommerce/Screen/OrderListScreen";
+import OrderScreen from "../components/Ecommerce/Screen/OrderScreen";
 import PasswordResetScreen from '../components/Ecommerce/Screen/PasswordResetScreen';
 import PaymentScreen from "../components/Ecommerce/Screen/PaymentScreen";
 import PlaceOrderScreen from "../components/Ecommerce/Screen/PlaceOrderScreen";
@@ -58,10 +59,12 @@ function MainPage() {
           <Route path="/admin/saleData" component={SaleDataScreen} />
           <Route path="/admin/product/:id/edit" component={ProductEditScreen} />
           <Route path="/product/:id" component={ProductScreen} />
+          <Route path="/order/:id" component={OrderScreen} />
           <Route path="/cart/:id?" component={CartScreen} />
           <Route path="/shipping" component={ShippingScreen} />
           <Route path="/placeorder" component={PlaceOrderScreen} />
           <Route path="/payment" component={PaymentScreen} />
+
         </Container>
         {/* Blog Routes */}
         <Route path="/blog" exact component={Blog} />

client/src/redux/actions/orderActions.js

@@ -1,6 +1,6 @@
 import axios from "axios";
 import {
-  ORDER_CREATE_FAIL, ORDER_CREATE_REQUEST, ORDER_CREATE_SUCCESS, ORDER_DATA_FAIL, ORDER_DATA_REQUEST, ORDER_DATA_SUCCESS, ORDER_LIST_FAIL, ORDER_LIST_REQUEST, ORDER_LIST_SUCCESS, ORDER_SALE_DATA_FAIL, ORDER_SALE_DATA_REQUEST, ORDER_SALE_DATA_SUCCESS
+  ORDER_CREATE_FAIL, ORDER_CREATE_REQUEST, ORDER_CREATE_SUCCESS, ORDER_DATA_FAIL, ORDER_DATA_REQUEST, ORDER_DATA_SUCCESS, ORDER_DETAILS_FAIL, ORDER_DETAILS_REQUEST, ORDER_DETAILS_SUCCESS, ORDER_LIST_FAIL, ORDER_LIST_REQUEST, ORDER_LIST_SUCCESS, ORDER_PAY_FAIL, ORDER_PAY_REQUEST, ORDER_PAY_SUCCESS, ORDER_SALE_DATA_FAIL, ORDER_SALE_DATA_REQUEST, ORDER_SALE_DATA_SUCCESS
 } from "../../constants/orderConstants";
 
 
@@ -89,6 +89,82 @@ export const getOrderList = () => async (dispatch,getState) => {
 }
 
 
+export const getOrderDetails = (id) => async (dispatch,getState) => {
+
+  try {
+
+        dispatch({
+            type:ORDER_DETAILS_REQUEST
+        })
+
+        const { userLogin: { userInfo } } = getState()
+
+
+    const config = {
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${userInfo.token}`
+      }
+
+    }
+
+
+        const { data } = await axios.get(`/api/orders/${id}`,config)
+        dispatch({
+            type: ORDER_DETAILS_SUCCESS,
+            payload:data
+        })
+
+    } catch (error) {
+        console.log(error);
+        dispatch({
+            type: ORDER_DETAILS_FAIL,
+            payload: error.response && error.response.data.message ? error.response.data.message : error.message
+
+        })
+
+    }
+}
+
+export const payOrder = (id,paymentResult) => async (dispatch,getState) => {
+
+  try {
+        dispatch({
+            type:ORDER_PAY_REQUEST
+        })
+
+        const { userLogin: { userInfo } } = getState()
+
+
+    const config = {
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${userInfo.token}`
+      }
+
+    }
+
+        const { data } = await axios.put(`/api/orders/${id}/pay`,paymentResult,config)
+
+      console.log(data);
+        dispatch({
+            type: ORDER_PAY_SUCCESS,
+            payload:data
+        })
+
+    } catch (error) {
+        console.log(error);
+        dispatch({
+            type: ORDER_PAY_FAIL,
+            payload: error.response && error.response.data.message ? error.response.data.message : error.message
+
+        })
+
+    }
+
+}
+
+
 export const getOrderData = () => async (dispatch,getState) => {
 
     try {