text: import React, {useEffect} from 'react';
  import {Button, Row, Col, ListGroup, Image, Card} from 'react-bootstrap';
  import {useDispatch, useSelector } from 'react-redux';
  import CheckoutSteps from '../components/CheckoutSteps';
  import Message from '../components/Message';
  import { Link } from 'react-router-dom';
  import { createOrder } from '../actions/orderActions';
  
  const PlaceOrderScreen = ({history}) => {
  
    const cart = useSelector(state => state.cart);
    const dispatch = useDispatch();
  
    //add decimals
    const addDecimals = (num) => {
        return (Math.round(num*100)/100).toFixed(2);
    }
    
    
    //calculate prices
  
    cart.itemsPrice = addDecimals(cart.cartItems.reduce(
        (acc, item) => acc+ item.price * item.qty, 0
    ));
  
    cart.shippingPrice = addDecimals(cart.itemsPrice > 100? 0: 10);
  
    cart.taxPrice = (cart.itemsPrice * 0.0909).toFixed(2);
   
    cart.totalPrice = (Number(cart.itemsPrice) + Number(cart.shippingPrice)).toFixed(2);
    
  
    const orderCreate = useSelector( state => state.orderCreate);
    const {order, success, error} = orderCreate;
  
    useEffect( ()=> {
        if(success) {
            history.push(`/order/${order._id}`);
        }
  // eslint-disable-next-line
    },[history, success]);
  
    const placeOrderHandler = () => {
       dispatch(createOrder({
          orderItems: cart.cartItems,
          shippingAddress:cart.shippingAddress,
          paymentMethod:cart.paymentMethod,
          itemsPrice: cart.itemsPrice,
          taxPrice: cart.taxPrice,
          shippingPrice: cart.shippingPrice,
          totalPrice: cart.totalPrice,
       }));
    }
  
    return (
      <>
       <CheckoutSteps step1 step2 step3 step4/>
          <Row>
              <Col md={8}>
                  <ListGroup variant='flush'>
                      <ListGroup.Item>
                          <h2>Shipping</h2>
                          <p><strong>Address:</strong> {cart.shippingAddress.street}, {cart.shippingAddress.suburb}, {cart.shippingAddress.state}, {cart.shippingAddress.country}.  <strong>Postcode:</strong>{cart.shippingAddress.postCode}</p>
                      </ListGroup.Item>
  
                      <ListGroup.Item>
                          <h2>Payment Method</h2>
                          <strong>Method: </strong>
                          {cart.paymentMethod}
                      </ListGroup.Item>
  
                      <ListGroup.Item>
                          <h2>Order Items</h2>
                          {cart.cartItems.length ===0 ? (<Message>Your cart is empty</Message>): (
                              <ListGroup variant='flush'>
                                 {
                                     cart.cartItems.map(item => (
                                         <ListGroup.Item key={item.product}>
                                             <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).toFixed(2)}
                                                 </Col>
                                             </Row>
                                         </ListGroup.Item>
                                     ))
                                 }
                              </ListGroup>
                          )}
                      </ListGroup.Item>
                  </ListGroup>
              </Col>
  
              <Col md={4}>
                  <Card>
                      <ListGroup variant='flush'>
                          <ListGroup.Item>
                              <h2>Order Summary</h2>
                          </ListGroup.Item>
  
                          <ListGroup.Item>
                              <Row>
                                  <Col>Sub total</Col>
                                  <Col>${cart.itemsPrice}</Col>
                              </Row>
                          </ListGroup.Item>
  
                          <ListGroup.Item>
                              <Row>
                                  <Col>Delivery</Col>
                                  <Col>${cart.shippingPrice}</Col>
                              </Row>
                          </ListGroup.Item>
  
                          <ListGroup.Item>
                              <Row>
                                  <Col>GST included in Order</Col>
                                  <Col>${cart.taxPrice}</Col>
                              </Row>
                          </ListGroup.Item>
  
                          <ListGroup.Item>
                              <Row>
                                  <Col><strong>Order total inc GST</strong></Col>
                                  <Col>${cart.totalPrice}</Col>
                              </Row>
                          </ListGroup.Item>
  
                          <ListGroup.Item>
                              {error && <Message variant='danger'>{error}</Message>}
                          </ListGroup.Item>
  
                          <ListGroup.Item>
                              <Button 
                              type='button' 
                              className='w-100' 
                              disabled={cart.cartItems.length ===0}
                              onClick={placeOrderHandler}
                              >Place Order</Button>
                          </ListGroup.Item>
  
                      </ListGroup>
                  </Card>
              </Col>
          </Row>
  
      
      
      </>
    )
  }
  
  export default PlaceOrderScreen