issue

import React, { Fragment, useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";

import MetaData from "../layout/MetaData";
import Loader from "../layout/Loader";

import { useParams } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";

import {
  ORDER_RESET,
  UPDATE_ORDER_RESET,
  ORDER_DETAILS_RESET,
} from "../constants/orderConstants";

import { toast } from "react-toastify";

import {
  getOrderDetails,
  clearErrors,
  updateOrderToBePaid,
} from "../../actions/orderActions";
import { resetCart } from "../../actions/cartActions";
import {
  useStripe,
  useElements,
  CardNumberElement,
  CardExpiryElement,
  CardCvcElement,
} from "@stripe/react-stripe-js";

import axios from "axios";

const OrderDetails2 = () => {
  const [initialLoading, setInitialLoading] = useState(true);
  const dispatch = useDispatch();

  const { id } = useParams();

  const { loading, success, error, order } = useSelector(
    (state) => state.orderDetails
  );
  const { isUpdated } = useSelector((state) => state.order);

  const {
    shippingInfo,
    orderItems,
    paymentInfo,
    user,
    totalPrice,
    orderStatus,
    shippingPrice,
    taxPrice,
    itemsPrice,
    paymentMethod,
  } = order;

  const stripe = useStripe();
  const elements = useElements();
  const queryParams = new URLSearchParams(window.location.search);

  const refId = queryParams.get("refId")
    ? queryParams.get("refId").trim()
    : null;

  useEffect(() => {
    if (refId) {
      const paymentInfo = {
        id: refId,
        status: "succeeded",
      };
      dispatch(updateOrderToBePaid(id, paymentInfo));
      if (error) {
        toast.error(error);
        dispatch(clearErrors());
      }
    }
  }, [refId, error]);

  useEffect(() => {
    dispatch(getOrderDetails(id, initialLoading));
    if (error) {
      toast.error(error);
      dispatch(clearErrors());
    }
    dispatch({ type: ORDER_RESET });
    dispatch(resetCart());
    dispatch({ type: UPDATE_ORDER_RESET });
  }, [dispatch,error, isUpdated, refId]);


  useEffect(() => {
    if (success && initialLoading) {
      setInitialLoading(false);
    }
  }, [success]);

  const shippingDetails =
    shippingInfo &&
    `${shippingInfo.address}, ${shippingInfo.city}, ${shippingInfo.postalCode}, ${shippingInfo.country}`;
  const isPaid =
    paymentInfo && paymentInfo.status === "succeeded" ? true : false;
  const paymentData = {
    amount: Math.round(totalPrice * 100),
  };
  const payWithEsewa = () => {
    var resultId = "";
    var characters =
      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    var charactersLength = characters.length;
    for (var i = 0; i < 14; i++) {
      resultId += characters.charAt(
        Math.floor(Math.random() * charactersLength)
      );
    }

    var path = "https://uat.esewa.com.np/epay/main";
    var params = {
      amt: order.itemsPrice,
      psc: order.shippingPrice,
      pdc: 0,
      txAmt: order.taxPrice,
      tAmt: order.totalPrice,
      pid: resultId,
      scd: "EPAYTEST",
      su: `http://localhost:3000/order/${id}`,
      fu: `http://localhost:3000/order/${id}`,
    };
    var form = document.createElement("form");
    form.setAttribute("method", "POST");
    form.setAttribute("action", path);

    Object.keys(params).forEach((key) => {
      var hiddenField = document.createElement("input");
      hiddenField.setAttribute("type", "hidden");
      hiddenField.setAttribute("name", key);
      hiddenField.setAttribute("value", params[key]);
      form.appendChild(hiddenField);
    });

    document.body.appendChild(form);
    form.submit();
  };
  const submitHandler = async (e) => {
    e.preventDefault();

    document.querySelector("#pay_btn").disabled = true;

    let res;
    try {
      const config = {
        headers: {
          "Content-Type": "application/json",
        },
      };
      res = await axios.post("/api/v1/payment/process", paymentData, config);
      console.log(res);

      const clientSecret = res.data.client_secret;

      console.log(clientSecret);

      if (!stripe || !elements) {
        return;
      }

      const result = await stripe.confirmCardPayment(clientSecret, {
        payment_method: {
          card: elements.getElement(CardNumberElement),
          billing_details: {
            name: user.name,
            email: user.email,
          },
        },
      });

      if (result.error) {
        toast.error(result.error.message);
        document.querySelector("#pay_btn").disabled = false;
      } else {
        // The payment is processed or not
        if (result.paymentIntent.status === "succeeded") {
          const paymentInfo = {
            id: result.paymentIntent.id,
            status: result.paymentIntent.status,
          };
          dispatch(updateOrderToBePaid(id, paymentInfo));
        } else {
          toast.error("There is some issue while payment processing");
        }
      }
    } catch (error) {
      document.querySelector("#pay_btn").disabled = false;
      toast.error(error.response.data.errMessage);
    }
  };
  return (
    <Fragment>
      {loading ? (
        <Loader />
      ) : (
        <Fragment>
          <MetaData title={"Order Details"} />
          <div className="row d-flex justify-content-between">
            <div className="col-12 col-lg-8 mt-5 order-details">
              <h1 className="my-5">Order # {order._id}</h1>

              <h4 className="mb-4">Shipping Info</h4>
              <p>
                <b>Name:</b> {user && user.name}
              </p>
              <p>
                <b>Phone:</b> {shippingInfo && shippingInfo.phoneNo}
              </p>
              <p className="mb-4">
                <b>Address:</b>
                {shippingDetails}
              </p>

              <hr />

              <h4 className="my-4">Payment</h4>
              <p className={isPaid ? "greenColor" : "redColor"}>
                <b>{isPaid ? "PAID" : "NOT PAID"}</b>
              </p>

              <h4 className="my-4">Order Status:</h4>
              <p
                className={
                  order.orderStatus &&
                  String(order.orderStatus).includes("Delivered")
                    ? "greenColor"
                    : "redColor"
                }
              >
                <b>{orderStatus}</b>
              </p>

              <h4 className="my-4">Order Items:</h4>

              <hr />
              <div className="cart-item my-1">
                {orderItems &&
                  orderItems.map((item) => (
                    <div key={item.product} className="row my-5">
                      <div className="col-4 col-lg-2">
                        <img
                          src={item.image}
                          alt={item.name}
                          height="45"
                          width="65"
                        />
                      </div>

                      <div className="col-5 col-lg-5">
                        <Link to={`/products/${item.product}`}>
                          {item.name}
                        </Link>
                      </div>

                      <div className="col-4 col-lg-2 mt-4 mt-lg-0">
                        <p>${item.price}</p>
                      </div>

                      <div className="col-4 col-lg-3 mt-4 mt-lg-0">
                        <p>{item.quantity} Piece(s)</p>
                      </div>
                    </div>
                  ))}
              </div>
              <hr />
            </div>
            <div className="col-lg-4 mt-5 order-summary">
              <h1 className="my-5">Order Summary</h1>
              <p>
                <b>ItemsPrice:</b>
                {itemsPrice}
              </p>
              <p>
                <b>ShippingPrice:</b>
                {shippingPrice}
              </p>
              <p>
                <b>TaxPrice:</b>
                {taxPrice}
              </p>
              <p>
                <b>TotalPrice:</b>
                {totalPrice}
              </p>
              {paymentMethod &&
                paymentMethod === "Credit/Debit Card" &&
                !isPaid && (
                  <form className="shadow-lg" onSubmit={submitHandler}>
                    <h1 className="mb-4">Card Info</h1>
                    <div className="form-group">
                      <label htmlFor="card_num_field">Card Number</label>
                      <CardNumberElement
                        type="text"
                        id="card_num_field"
                        className="form-control"
                      />
                    </div>

                    <div className="form-group">
                      <label htmlFor="card_exp_field">Card Expiry</label>
                      <CardExpiryElement
                        type="text"
                        id="card_exp_field"
                        className="form-control"
                      />
                    </div>

                    <div className="form-group">
                      <label htmlFor="card_cvc_field">Card CVC</label>
                      <CardCvcElement
                        type="text"
                        id="card_cvc_field"
                        className="form-control"
                      />
                    </div>

                    <button
                      id="pay_btn"
                      className="btn btn-primary btn-block"
                      type="submit"
                    >
                      Pay with Stripe
                    </button>
                  </form>
                )}
              {paymentMethod && paymentMethod === "Esewa" && !isPaid && (
                <button onClick={payWithEsewa}>Pay With Esewa</button>
              )}
            </div>
          </div>
        </Fragment>
      )}
    </Fragment>
  );
};

export default OrderDetails2;