i had developedcar booking app but here i am facing an issue when click on booknow button it has to pass the one object and has th launch the razorpay payment and after payment succeess it has to redirect to bookings page but when i click on buynow button it opening the razorpay model and redirecting to bookings page.
Please look into my code and help me
BookingCar.js
import React, { useEffect, useState } from "react";
import DefaultLayout from "../components/DefaultLayout";
import { useSelector, useDispatch } from "react-redux";
import { getAllCars } from "../redux/actions/carsActions";
import { useParams } from "react-router-dom";
import Spinner from "../components/Spinner";
import { Row, Col, Divider, DatePicker, Checkbox, Modal } from "antd";
import moment from "moment";
import { bookCar } from "../redux/actions/bookingAction";
import StripeCheckout from "react-stripe-checkout";
const { RangePicker } = DatePicker;
function BookingCar() {
const { carid } = useParams();
const { cars } = useSelector((state) => state.carsReducer);
const { loading } = useSelector((state) => state.alertsReducer);
const [car, setCar] = useState([]);
const [to, setTo] = useState();
const [from, setFrom] = useState();
const [totalHours, setTotalHours] = useState(0);
const [driver, setDriver] = useState(false);
const [totalAmount, setTotalAmount] = useState(0);
const [showModal, setShowModal] = useState(false);
const dispatch = useDispatch();
useEffect(() => {
if (cars.length == 0) {
dispatch(getAllCars());
} else {
setCar(cars.find((o) => o._id == carid));
}
}, [cars]);
useEffect(() => {
setTotalAmount(totalHours * car.rentPerHour);
if (driver) {
setTotalAmount(totalAmount + totalHours * 100);
}
}, [driver, totalHours]);
function selectTimeSlots(values) {
console.log(moment(values[0]).format("MMM DD YYYY HH:mm"));
console.log(moment(values[1]).format("MMM DD YYYY HH:mm"));
setFrom(moment(values[0]).format("MMM DD YYYY HH:mm"));
setTo(moment(values[1]).format("MMM DD YYYY HH:mm"));
setTotalHours(values[1].diff(values[0], "hours"));
}
const launchRazorpay = () => {
var options = {
key: process.env.REACT_APP_RAZORPAY_KEY_ID,
amount: totalAmount * 100,
currency: "INR",
name: "Acme Corp",
description: "Test Transaction",
image: "https://example.com/your_logo",
handler: function (response) {
alert(response.razorpay_payment_id);
alert(response.razorpay_order_id);
alert(response.razorpay_signature);
},
};
let razorpay = new window.Razorpay(options);
razorpay.open();
};
function bookNow() {
const reqObj = {
user: JSON.parse(localStorage.getItem("user"))._id,
car: car._id,
totalAmount,
totalHours,
driverRequired: driver,
bookedTimeSlots: {
from,
to,
},
};
dispatch(bookCar(reqObj));
launchRazorpay();
}
return (
<DefaultLayout>
{loading == true && <Spinner />}
<Row
justify="center"
className="d-flex align-items-center"
style={{ minHeight: "90vh" }}
>
<Col lg={10} sm={24} xs={24} className="p-3">
<img src={car.image} className="carimg2 bs1 w-100 p-2" />
</Col>
<Col lg={10} sm={24} xs={24} className="text-right">
<Divider type="horizontal" dashed>
Car Info
</Divider>
<div style={{ textAlign: "right" }}>
<p>{car.name}</p>
<p>{car.rentPerHour} per hour /-</p>
<p>Fuel Type: {car.fuelType}</p>
<p>Max Capacity: {car.capacity}</p>
</div>
<Divider type="horizontal" dashed>
Select Time Slots
</Divider>
<RangePicker
showTime={{ format: "HH:mm" }}
format="MMM DD YYYY HH:mm"
onChange={selectTimeSlots}
/>
<br />
<button
className="btn1 mt-3"
onClick={() => {
setShowModal(true);
}}
>
Booked Time Slots
</button>
{from && to && (
<div>
<p>
Total Hours: <b>{totalHours}</b>
</p>
<p>
Rent Per Hour: <b>{car.rentPerHour}</b>
</p>
<Checkbox
onChange={(e) => {
if (e.target.checked) {
setDriver(true);
} else {
setDriver(false);
}
}}
>
Driver Required{" "}
</Checkbox>
<h3>Total Amount: {totalAmount}</h3>
<button className="btn1" onClick={bookNow}>
Book Now
</button>
</div>
)}
</Col>
</Row>
<Modal
visible={showModal}
closable={false}
footer={false}
title="Booked Time Slots"
>
{car && (
<div className="p-2">
{car.bookedTimeSlots?.map((slot) => {
return (
<button className="btn1 mt-2">
{slot.from} - {slot.to}
</button>
);
})}
<div className="text-right mt-5">
<button className="btn1" onClick={() => setShowModal(false)}>
CLOSE
</button>
</div>
</div>
)}
</Modal>
</DefaultLayout>
);
}
export default BookingCar;
bookingRoute.js
const express = require("express");
const router = express.Router();
const Booking = require("../models/bookingModel");
const Car = require("../models/carModel");
const { v4: uuidv4 } = require("uuid");
const Razorpay = require("razorpay");
require("dotenv").config();
const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
router.post("/bookcar", async (req, res) => {
var razorpay = new Razorpay({
key_id: "rzp_test_2lNx88Blumt0AQ",
key_secret: "C04AFyyG9GTcT6bO6HWZ18mv",
});
var options = {
amount: req.body.totalAmount * 100,
currency: "INR",
receipt: "sn_booking_001122",
};
console.log(options);
razorpay.orders.create(options, (err, order) => {
console.log(order);
return res.send(order);
});
// try {
// req.body.transactionId = "Ordr_123";
// const newBooking = new Booking(req.body);
// await newBooking.save();
// const car = await Car.findOne({ _id: req.body.car });
// car.bookedTimeSlots.push(req.body.bookedTimeSlots);
// await car.save();
// res.send("Your Booking is Successful");
// } catch (error) {
// return res.status(400).send(error);
// }
});
router.get("/getallbookings", async (req, res) => {
try {
const bookings = await Booking.find().populate("car");
res.send(bookings);
} catch (error) {
return res.status(400).json(error);
}
});
module.exports = router;
bookingAction.js
import axios from "axios";
import { message } from "antd";
export const bookCar = (reqObj) => async (dispatch) => {
dispatch({ type: "LOADING", payload: true });
// const baseurl = "http://localhost:4500";
try {
await axios.post(`/api/bookings/bookcar`, reqObj);
dispatch({ type: "LOADING", payload: false });
setTimeout(() => {
message.success("Your Car Booked Successfully");
window.location.href = "/mybookings";
}, 500);
} catch (err) {
console.log(err);
dispatch({ type: "LOADING", payload: false });
message.error("Something went wrong, Please try again later");
}
};
export const getAllBookings = () => async (dispatch) => {
dispatch({ type: "LOADING", payload: true });
// const baseurl = "http://localhost:4500";
try {
const response = await axios.get(`/api/bookings/getallbookings`);
dispatch({ type: "GET_ALL_BOOKINGS", payload: response.data });
dispatch({ type: "LOADING", payload: false });
} catch (err) {
console.log(err);
dispatch({ type: "LOADING", payload: false });
}
};
