import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import Header from "./../components/Header";
//import { PayPalButton } from "react-paypal-button-v2";
//import PaystackPop from '@paystack/inline-js';
import { PaystackButton } from "../components/paystack";
import { useDispatch, useSelector } from "react-redux";
import { getOrderDetails, payOrder } from "../Redux/Actions/OrderActions";
import Loading from "./../components/LoadingError/Loading";
import Message from "./../components/LoadingError/Error";
import moment from "moment";
import axios from "axios";
import { ORDER_PAY_RESET } from "../Redux/Constants/OrderConstants";
const OrderScreen = ({ match }) => {
window.scrollTo(0, 0);
//const [sdkReady, setSdkReady] = useState(false);
const orderId = match.params.id;
const dispatch = useDispatch();
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.orderItems.reduce((acc, item) => acc + item.price * item.qty, 0)
);
}
console.log(orderDetails);
const config = {
reference: (new Date()).getTime().toString(),
//email: order.user.email,
amount: 20000,
publicKey: 'pk_test_fb43e3697bfead0dafcd0c46e8b8ab52986cdc76',
//firstname: {order.user.name},
lastname: 'story',
// split: { //if you want to use transaction split
// "type": "percentage",
// "bearer_type": "all",
// "subaccounts": [
// {
// "subaccount": "ACCT_mtl3xzwjfhcldkw",
// "share": 30
// },
// {
// "subaccount": "ACCT_y19ht107y44o294",
// "share": 20
// }
// ]
// }
};
const onSuccess = (reference) => {
// Implementation for whatever you want to do with reference and after success call.
console.log(reference);
//alert("Success");
};
const onClose = () => {
// implementation for whatever you want to do when the Paystack dialog closed.
console.log('closed')
}
useEffect(() => {
// const addPayPalScript = async () => {
// const { data: clientId } = await axios.get("/api/config/paypal");
// 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);
// }
// }
if (!order || successPay) {
dispatch({ type: ORDER_PAY_RESET });
dispatch(getOrderDetails(orderId));
} else if (!order.isPaid) {
}
}, [dispatch, orderId, successPay, order]);
const componentProps = {
...config,
text: 'Paystack Payment',
onSuccess,
onClose
};
const successPaymentHandler = (paymentResult) => {
dispatch(payOrder(orderId, paymentResult));
};
return (
<>
<Header />
<div className="container">
{loading ? (
<Loading />
) : error ? (
<Message variant="alert-danger">{error}</Message>
) : (
<>
<div className="row order-detail">
<div className="col-lg-4 col-sm-4 mb-lg-4 mb-5 mb-sm-0">
<div className="row">
<div className="col-md-4 center">
<div className="alert-success order-box">
<i className="fas fa-user"></i>
</div>
</div>
<div className="col-md-8 center">
<h5>
<strong>Customer</strong>
</h5>
<p>{order.user.name}</p>
<p>
<a href={`mailto:${order.user.email}`}>
{order.user.email}
</a>
</p>
</div>
</div>
</div>
{/* 2 */}
<div className="col-lg-4 col-sm-4 mb-lg-4 mb-5 mb-sm-0">
<div className="row">
<div className="col-md-4 center">
<div className="alert-success order-box">
<i className="fas fa-truck-moving"></i>
</div>
</div>
<div className="col-md-8 center">
<h5>
<strong>Order info</strong>
</h5>
<p>Shipping: {order.shippingAddress.country}</p>
<p>Pay method: {order.paymentMethod}</p>
{order.isPaid ? (
<div className="bg-info p-2 col-12">
<p className="text-white text-center text-sm-start">
Paid on {moment(order.paidAt).calendar()}
</p>
</div>
) : (
<div className="bg-danger p-2 col-12">
<p className="text-white text-center text-sm-start">
Not Paid
</p>
</div>
)}
</div>
</div>
</div>
{/* 3 */}
<div className="col-lg-4 col-sm-4 mb-lg-4 mb-5 mb-sm-0">
<div className="row">
<div className="col-md-4 center">
<div className="alert-success order-box">
<i className="fas fa-map-marker-alt"></i>
</div>
</div>
<div className="col-md-8 center">
<h5>
<strong>Deliver to</strong>
</h5>
<p>
Address: {order.shippingAddress.city},{" "}
{order.shippingAddress.address},{" "}
{order.shippingAddress.postalCode}
</p>
{order.isDelivered ? (
<div className="bg-info p-2 col-12">
<p className="text-white text-center text-sm-start">
Delivered on {moment(order.deliveredAt).calendar()}
</p>
</div>
) : (
<div className="bg-danger p-2 col-12">
<p className="text-white text-center text-sm-start">
Not Delivered
</p>
</div>
)}
</div>
</div>
</div>
</div>
<div className="row order-products justify-content-between">
<div className="col-lg-8">
{order.orderItems.length === 0 ? (
<Message variant="alert-info mt-5">
Your order is empty
</Message>
) : (
<>
{order.orderItems.map((item, index) => (
<div className="order-product row" key={index}>
<div className="col-md-3 col-6">
<img src={item.image} alt={item.name} />
</div>
<div className="col-md-5 col-6 d-flex align-items-center">
<Link to={`/products/${item.product}`}>
<h6>{item.name}</h6>
</Link>
</div>
<div className="mt-3 mt-md-0 col-md-2 col-6 d-flex align-items-center flex-column justify-content-center ">
<h4>QUANTITY</h4>
<h6>{item.qty}</h6>
</div>
<div className="mt-3 mt-md-0 col-md-2 col-6 align-items-end d-flex flex-column justify-content-center ">
<h4>SUBTOTAL</h4>
<h6>${item.qty * item.price}</h6>
</div>
</div>
))}
</>
)}
</div>
{/* total */}
<div className="col-lg-3 d-flex align-items-end flex-column mt-5 subtotal-order">
<table className="table table-bordered">
<tbody>
<tr>
<td>
<strong>Products</strong>
</td>
<td>${order.itemsPrice}</td>
</tr>
<tr>
<td>
<strong>Shipping</strong>
</td>
<td>${order.shippingPrice}</td>
</tr>
<tr>
<td>
<strong>Tax</strong>
</td>
<td>${order.taxPrice}</td>
</tr>
<tr>
<td>
<strong>Total</strong>
</td>
<td>${order.totalPrice}</td>
</tr>
</tbody>
</table>
{/* {!order.isPaid && (
<div className="col-12">
{loadingPay && <Loading />}
{!sdkReady ? (
<Loading />
) : (
<PayPalButton
amount={order.totalPrice}
onSuccess={successPaymentHandler}
/>
)}
</div>
)} */}
{!order.isPaid && (
<div className="col-12">
{loadingPay && <Loading />}
{
<PaystackButton {...componentProps}
onSuccess={successPaymentHandler}
/>
}
</div>
)}
</div>
</div>
</>
)}
</div>
</>
);
};
export default OrderScreen;
Hi, can you tell us what are you trying to achieve ? Which object do you want to put in the config object ? With which function ?
Trying to take the order details from order… Like the name, email, total price etc from order and then place it in config for paystack payment. But what is that it displays the order.user.email in console.log but when I refresh the order page order.user. becomes undefined.
1 Like
This is because when you refresh the page, you component is mounted again and user becomes undefined as it has not been setted previously. When you refresh the page, the values in the redux store become the initial value.
You can store them into cookie or SessionStorage for example.
1 Like
how to do this please
You can check here for session storage :
Find the place where your redux store is initialised, then use the sessionStorage to initialize it with the user object stored in it. Put the user in the session storage where it is appropriated (for example, when you fetch data about the current user after log in).
Thank so much. It worked.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.