done with payment

JaberHPranto · Oct 17, 2021 · 607a764 · 607a764
1 parent 1749050
commit 607a764
Show file tree

Hide file tree

Showing 11 changed files with 254 additions and 33 deletions.
diff --git a/client/src/components/Blog/BlogDetails.js b/client/src/components/Blog/BlogDetails.js
@@ -31,10 +31,10 @@ function BlogDetails({match}) {
                             <p>Published in <span className='info-span'>{blog.category}</span></p>
                             <p>{blog.createdAt && new Date(blog.createdAt).toDateString()}</p>
                         </div>
-                        <div className='blog-card-icons blog-det-icons'>
+                        {/* <div className='blog-card-icons blog-det-icons'>
                             <i className="far fa-thumbs-up blog-det-like" aria-hidden="true"><span>&nbsp;5</span></i>
                             <i className="far fa-comments blog-det-comments" aria-hidden="true"><span>&nbsp;4</span></i>
-                        </div>
+                        </div> */}
                     </div>
 
                     <div className='blog-det-desc'>

diff --git a/client/src/components/Ecommerce/Screen/OrderDataScreen.js b/client/src/components/Ecommerce/Screen/OrderDataScreen.js
@@ -101,9 +101,9 @@ function OrderDataScreen({history}) {
                                             <tbody>
                                                 {orderData?.customerBuyData?.map(customer => (
                                                     <tr key={customer.customer_email}>
-                                                        <td>{ customer.customer_name}</td>
+                                                        <td>{customer.customer_name}</td>
                                                         <td>{customer.customer_email}</td>
-                                                        <td>{customer.total}</td>
+                                                        <td>{Math.ceil(customer.total)}</td>
                                                     </tr>
                                                 ))}
                                             </tbody>

diff --git a/client/src/components/Ecommerce/Screen/OrderListScreen.js b/client/src/components/Ecommerce/Screen/OrderListScreen.js
@@ -52,14 +52,14 @@ function OrderListScreen({history}) {
                                         <td>{order.createdAt.substring(0, 10)}</td>
                                         <td><span style={{fontSize:'1.5rem',marginRight:'0.1rem'}}>৳</span>&nbsp;{order.totalPrice}</td>               
                                         <td>
-                                            {order.isPaid ? order.paidAt.substring(0,10) : <Button variant='light' ><i className='fas fa-times' style={{color:'red'}}></i></Button>}
+                                            {order?.isPaid ? order.paidAt.substring(0,10) : <Button variant='light' ><i className='fas fa-times' style={{color:'red'}}></i></Button>}
                                         </td>
                                         <td>
-                                            {order.isDelivered ? order.deliveredAt.substring(0,10) : <Button variant='light' ><i className='fas fa-times' style={{color:'red'}}></i></Button>}
+                                            {order?.isDelivered ? order.deliverAt.substring(0,10) : <Button variant='light' ><i className='fas fa-times' style={{color:'red'}}></i></Button>}
                                         </td>
                                         <td>
                                             <LinkContainer to={`/order/${order._id}`}>
-                                                <Button className='bg-col-primary' >Details</Button>
+                                                <Button className='bg-col-primary btn-sm' >Details</Button>
                                             </LinkContainer>
                                         </td>                               
                                     </tr>

diff --git a/client/src/components/Ecommerce/Screen/OrderScreen.js b/client/src/components/Ecommerce/Screen/OrderScreen.js
@@ -1,27 +1,33 @@
 import axios from "axios";
 import React, { useEffect, useState } from "react";
-import { Card, Col, Image, ListGroup, Row } from "react-bootstrap";
+import { Button, 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 { ORDER_DELIVER_RESET, ORDER_PAY_RESET } from '../../../constants/orderConstants';
+import { deliverOrder, getOrderDetails, payOrder } from "../../../redux/actions/orderActions";
 import Loader from "../Loader";
 import Message from "../Message";
 
-const OrderScreen = ({ match }) => {
+const OrderScreen = ({ match,history }) => {
 
     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;
-
+    const { loading: loadingPay, success: successPay } = orderPay;
+
+    const orderDeliver = useSelector((state) => state.orderDeliver);
+    const { success: successDeliver } = orderDeliver;
+
+    const userLogin = useSelector((state) => state.userLogin);
+    const { userInfo:{user} } = userLogin;
 
 
     if (!loading) {
@@ -37,6 +43,10 @@ const OrderScreen = ({ match }) => {
 
 
     useEffect(() => {
+        if (!user) {
+            return history.push('/login')
+        }
+
         const addPayPalScript = async (req, res) => {
             const { data: clientId } = await axios.get('/api/config/paypal')
             console.log(clientId);
@@ -53,21 +63,26 @@ const OrderScreen = ({ match }) => {
         }
 
         if (!order || successPay) {
-            dispatch({type:ORDER_PAY_RESET})
+            dispatch({ type: ORDER_PAY_RESET })
+            dispatch({ type: ORDER_DELIVER_RESET })
             dispatch(getOrderDetails(orderId))
         } else if (!order.isPaid) {
             if (!window.paypal) {
                 addPayPalScript()
             }else setSdkReady(true)
         }
 
-    }, [dispatch,order,orderId,successPay])
+    }, [dispatch,order,orderId,successPay,successDeliver,history,user])
 
     const successPaymentHandler = (paymentResult) => {
-        console.log(paymentResult);
         dispatch(payOrder(orderId,paymentResult))
     }
 
+    const handleDeliver = () => {
+        dispatch(deliverOrder(order))
+    }
+
+    // console.log(order._id)
 
     return loading ? <Loader /> : error ? <Message variant='danger'>{error}</Message> :
         <>
@@ -158,7 +173,7 @@ const OrderScreen = ({ match }) => {
                         </Row>
                     </ListGroup.Item>
 
-                            {!order.isPaid && (
+                            {user && !user.isAdmin && !order.isPaid && (
                                 <ListGroup.Item>
                                     {loadingPay && <Loader />}
                                     {!sdkReady ? <Loader /> : (
@@ -170,6 +185,12 @@ const OrderScreen = ({ match }) => {
                                 </ListGroup.Item>
 
                             )}
+
+                            {user && user.isAdmin && order.isPaid && !order.isDelivered && (
+                                <ListGroup.Item>
+                                    <Button className='bg-col-primary' style={{width:'100%'}}  onClick={handleDeliver} > Mark as Delivered</Button>
+                                </ListGroup.Item>
+                            )}
 
                     </ListGroup>
                 </Card>

diff --git a/client/src/components/Ecommerce/Screen/ProfileScreen.js b/client/src/components/Ecommerce/Screen/ProfileScreen.js
@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from 'react'
-import { Button, Col, Form, Row } from 'react-bootstrap'
+import { Button, Col, Form, Row, Table } from 'react-bootstrap'
 import { useDispatch, useSelector } from 'react-redux'
+import { LinkContainer } from 'react-router-bootstrap'
 import { useLocation } from 'react-router-dom'
+import { getMyOrders } from '../../../redux/actions/orderActions'
 import { getUserDetails, updateUserProfile } from '../../../redux/actions/userActions'
 import Loader from '../Loader'
 import Message from '../Message'
@@ -23,6 +25,10 @@ function ProfileScreen({history}) {
 
     const userDetails = useSelector(state => state.userDetails)
     const { loading, error, user } = userDetails
+
+    const myOrderList = useSelector(state => state.myOrderList)
+    const { loading: loadingOrders, error: errorOrders, orders } = myOrderList
+
 
     useEffect(() => {
         if (!userInfo) {
@@ -36,8 +42,10 @@ function ProfileScreen({history}) {
 
             } else {
                 if (!user.name) {            
-                        dispatch(getUserDetails('profile'))
-                    }
+                    dispatch(getUserDetails('profile'))
+                    dispatch(getMyOrders())
+                }
+
                     else {
                         setEmail(user.email)
                         setName(user.name)
@@ -80,10 +88,50 @@ function ProfileScreen({history}) {
                     <Form.Control type="password" placeholder="Confirm Password" value={confirmPassword} onChange={(e)=> setConfirmPassword(e.target.value)} />
                 </Form.Group>
 
-                <Button type='submit' variant='primary'>Update</Button>
+                    <Button type='submit' className='bg-col-primary' style={{ marginTop:'2rem' }}>
+                        Update
+                    </Button>
             </Form>
             </Col>
-            <Col md={8} ><h1>My Orders</h1></Col>
+            <Col md={8} >
+                <>
+                        <h1>MY Orders</h1>
+                    {loadingOrders ? <Loader /> : errorOrders ? <Message variant='danger' >{errorOrders}</Message> : (
+                        <Table striped bordered hover>   
+                            <thead>
+                                <tr>
+                                <th>ID</th>
+                                <th>DATE</th>
+                                <th>TOTAL</th>
+                                <th>PAID</th>
+                                <th>Delivered</th>
+                                <th></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {orders.map(order=>(
+                                    <tr key={order._id}>
+                                        <td>{order._id}</td>
+                                        <td>{order.createdAt.substring(0, 10)}</td>
+                                        <td><span style={{fontSize:'1.5rem',marginRight:'0.1rem'}}>৳</span>&nbsp;{order.totalPrice}</td>               
+                                        <td>
+                                            {order.isPaid ? order.paidAt.substring(0,10) : <Button variant='light' ><i className='fas fa-times' style={{color:'red'}}></i></Button>}
+                                        </td>
+                                        <td>
+                                            {order.isDelivered ? order.deliverAt.substring(0,10) : <Button variant='light' ><i className='fas fa-times' style={{color:'red'}}></i></Button>}
+                                        </td>
+                                        <td>
+                                            <LinkContainer to={`/order/${order._id}`}>
+                                                <Button className='bg-col-primary btn-sm' >Details</Button>
+                                            </LinkContainer>
+                                        </td>                               
+                                    </tr>
+                                ))}
+                            </tbody>    
+                        </Table>        
+                    )}
+                    </>
+            </Col>
         </Row>
     )
 }

diff --git a/client/src/constants/orderConstants.js b/client/src/constants/orderConstants.js
@@ -6,6 +6,10 @@ 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_MY_LIST_REQUEST = "ORDER_MY_LIST_REQUEST";
+export const ORDER_MY_LIST_SUCCESS = "ORDER_MY_LIST_SUCCESS";
+export const ORDER_MY_LIST_FAIL = "ORDER_MY_LIST_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";
@@ -15,6 +19,11 @@ 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_DELIVER_REQUEST = "ORDER_DELIVER_REQUEST";
+export const ORDER_DELIVER_SUCCESS = "ORDER_DELIVER_SUCCESS";
+export const ORDER_DELIVER_FAIL = "ORDER_DELIVER_FAIL";
+export const ORDER_DELIVER_RESET = "ORDER_DELIVER_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";

diff --git a/client/src/redux/actions/orderActions.js b/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_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
+  ORDER_CREATE_FAIL, ORDER_CREATE_REQUEST, ORDER_CREATE_SUCCESS, ORDER_DATA_FAIL, ORDER_DATA_REQUEST, ORDER_DATA_SUCCESS, ORDER_DELIVER_FAIL, ORDER_DELIVER_REQUEST, ORDER_DELIVER_SUCCESS, ORDER_DETAILS_FAIL, ORDER_DETAILS_REQUEST, ORDER_DETAILS_SUCCESS, ORDER_LIST_FAIL, ORDER_LIST_REQUEST, ORDER_LIST_SUCCESS, ORDER_MY_LIST_FAIL, ORDER_MY_LIST_REQUEST, ORDER_MY_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";
 
 
@@ -88,6 +88,41 @@ export const getOrderList = () => async (dispatch,getState) => {
 
 }
 
+export const getMyOrders = () => async (dispatch,getState) => {
+
+    try {
+        dispatch({
+            type:ORDER_MY_LIST_REQUEST
+        })
+
+        const { userLogin: { userInfo } } = getState()
+
+
+        const config = {
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization: `Bearer ${userInfo.token}`
+            }
+        }
+
+        const { data } = await axios.get(`/api/orders/my-orders`,config)
+
+        dispatch({
+            type: ORDER_MY_LIST_SUCCESS,
+            payload:data
+        })
+
+    } catch (error) {
+        console.log(error);
+        dispatch({
+            type: ORDER_MY_LIST_FAIL,
+            payload: error.response && error.response.data.message ? error.response.data.message : error.message
+
+        })
+
+    }
+
+}
 
 export const getOrderDetails = (id) => async (dispatch,getState) => {
 
@@ -164,6 +199,45 @@ export const payOrder = (id,paymentResult) => async (dispatch,getState) => {
 
 }
 
+export const deliverOrder = (order) => async (dispatch,getState) => {
+
+  try {
+        dispatch({
+          type: ORDER_DELIVER_REQUEST
+        })
+
+        const { userLogin: { userInfo } } = getState()
+
+
+    const config = {
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${userInfo.token}`
+      }
+
+    }
+
+        const { data } = await axios.put(`/api/orders/${order._id}/deliver`,{},config)
+
+      console.log(data);
+        dispatch({
+            type: ORDER_DELIVER_SUCCESS,
+            payload:data
+        })
+
+    } catch (error) {
+        console.log(error);
+        dispatch({
+            type: ORDER_DELIVER_FAIL,
+            payload: error.response && error.response.data.message ? error.response.data.message : error.message
+
+        })
+
+    }
+
+}
+
+
 
 export const getOrderData = () => async (dispatch,getState) => {