text: import React, { Fragment, useEffect } from "react";
  import CheckoutSteps from "../Cart/CheckoutSteps";
  import { useSelector } from "react-redux";
  import MetaData from "../layout/MetaData";
  import "./ConfirmOrder.css";
  import { Link } from "react-router-dom";
  import { Typography } from "@material-ui/core";
  import axios from "axios";
  import { useDispatch } from "react-redux";
  import { createOrder, clearErrors } from "../../actions/orderAction";
  import { useAlert } from "react-alert";
  
  
  const ConfirmOrder = ({ history }) => {
    const { shippingInfo, cartItems } = useSelector((state) => state.cart);
    const { user } = useSelector((state) => state.user);
    const { error } = useSelector((state) => state.newOrder);
    const dispatch = useDispatch();
    const alert = useAlert();
    const subtotal = cartItems.reduce(
      (acc, item) => acc + item.quantity * item.price * item.days,
      0
    );
  
    const shippingCharges = subtotal > 1000 ? 0 : 200;
  
    const tax = subtotal * 0.18;
  
    const totalPrice = subtotal + tax + shippingCharges;
  
    const address = `${shippingInfo.address}, ${shippingInfo.city}, ${shippingInfo.state}, ${shippingInfo.pinCode}, ${shippingInfo.country}`;
  
  
    const data = {
      subtotal,
      shippingCharges,
      tax,
      totalPrice,
    };
  
    sessionStorage.setItem("orderInfo", JSON.stringify(data));
  
  
    const paymentData = {
      amount: totalPrice,
    };
  
    const order = {
      shippingInfo,
      orderItems: cartItems,
      itemsPrice: subtotal,
      days: data.days,
      taxPrice: tax,
      shippingPrice: shippingCharges,
      totalPrice: totalPrice,
    };
  
  
  
    const submitHandler = async (e) => {
      const config = {
        headers: {
          "Content-Type": "application/json",
        },
      };
      await axios.post(
        "/api/v1/razorpay/order",
        paymentData,
        config
      ).then((info) => {
        console.log(info)
        const options = {
          key: 'rzp_test_cRvayq4By0Llod',
          name: user.name,
          description: cartItems,
          order_id: info.data.id,
          prefill: {
            name: user.name,
            email:user.email
          },
          handler: function (response) {
            localStorage.clear();
            dispatch(createOrder(order));
            history.push("/success");
            alert.success("Your order succesfully placed")
          },
          theme: {
            "color": "#3399cc"
          }
        };
        order.paymentInfo = {
          id: options.order_id,
          status: "succeeded",
        };
  
        const rzp1 = new window.Razorpay(options);
        rzp1.on('payment.failed', function (response) {
          alert(response.error.description, response.error.reason);
        })
        rzp1.on('payment.success', ()=> {
  
        })
        rzp1.open();
  
  
      }).catch((err) => {
        console.log(err)
      })
  
  
    };
  
    useEffect(() => {
      if (error) {
        alert.error(error);
        dispatch(clearErrors());
      }
    }, [dispatch, error,alert]);
  
  
  
    return (
      <Fragment>
        <MetaData title="Confirm Order" />
        <CheckoutSteps activeStep={1} />
        <div className="confirmOrderPage">
          <div>
            <div className="confirmshippingArea">
              <Typography>Shipping Info</Typography>
              <div className="confirmshippingAreaBox">
                <div>
                  <p>Name:</p>
                  <span>{user.name}</span>
                </div>
                <div>
                  <p>Phone:</p>
                  <span>{shippingInfo.phoneNo}</span>
                </div>
                <div>
                  <p>Address:</p>
                  <span>{address}</span>
                </div>
              </div>
            </div>
            <div className="confirmCartItems">
              <Typography>Your Cart Items:</Typography>
              <div className="confirmCartItemsContainer">
                {cartItems &&
                  cartItems.map((item) => (
                    <div key={item.product}>
                      <img src={item.image} alt="Product" />
                      <Link to={`/product/${item.product}`}>
                        {item.name}
                      </Link>{" "}
                      <span>
                        {item.quantity} X ₹{item.price} ={" "}
                        <b>₹{item.price * item.quantity}</b>
                      </span>
                    </div>
                  ))}
              </div>
            </div>
          </div>
          {/*  */}
          <div>
            <div className="orderSummary">
              <Typography>Order Summery</Typography>
              <div>
                <div>
                  <p>Subtotal:</p>
                  <span>₹{subtotal}</span>
                </div>
                <div>
                  <p>Shipping Charges:</p>
                  <span>₹{shippingCharges}</span>
                </div>
                <div>
                  <p>GST:</p>
                  <span>₹{tax}</span>
                </div>
              </div>
  
              <div className="orderSummaryTotal">
                <p>
                  <b>Total:</b>
                </p>
                <span>₹{totalPrice}</span>
              </div>
  
              <button id='rzp-button1' onClick={submitHandler}>Proceed To Payment</button>
            </div>
          </div>
        </div>
      </Fragment>
    );
  };
  
  export default ConfirmOrder;
  