import Apis from "../../APIs";
import React, { useState } from "react";
import axios from "axios";
import emailjs from "@emailjs/browser";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { useNavigate } from "react-router-dom";
const RegisterForm = () => {
const [email, setEmail] = useState("");
const [name, setName] = useState("");
const [phone, setPhone] = useState("");
const [emailError, setEmailError] = useState("");
const [nameError, setNameError] = useState("");
const [phoneError, setPhoneError] = useState("");
const [loading, setLoading] = useState(false);
const navigate = useNavigate();
const loadScript = (src) => {
return new Promise((resolve) => {
const script = document.createElement("script");
script.src = src;
script.onload = () => resolve(true);
script.onerror = () => resolve(false);
document.body.appendChild(script);
});
};
const createRazorpayOrder = async (amount) => {
setLoading(true); // Start loading before order creation
const data = {
amount: amount * 100,
currency: "INR",
};
try {
const response = await axios.post(Apis.PAYMENT_API.CREATE_ORDER, data);
handleRazorpayScreen(response.data.amount, response.data.order_id);
} catch (error) {
console.error("Error creating order:", error);
toast.error("Payment failed. Please try again.");
setLoading(false); // Stop loading on error
}
};
const handleRazorpayScreen = async (amount, orderId) => {
const res = await loadScript(
"https://checkout.razorpay.com/v1/checkout.js"
);
if (!res) {
alert("Failed to load Razorpay SDK. Are you online?");
setLoading(false); // Stop loading if script fails to load
return;
}
const options = {
key: "rzp_test_GcZZFDPP0jHtC4",
amount: amount,
currency: "INR",
name: name,
description: "Payment for Registration",
image: "https://papayacoders.com/demo.png",
order_id: orderId,
handler: async function (response) {
setLoading(false); // Stop loading after payment
if (response && response.razorpay_payment_id) {
await registerUser(response); // Pass the response object to registerUser
} else {
console.error("Payment response is missing or invalid.");
toast.error("Payment verification failed. Please try again.");
}
},
prefill: {
name: name,
email: email,
},
theme: {
color: "#F4C430",
},
modal: {
ondismiss: function () {
setLoading(false); // Stop loading when Razorpay modal is dismissed
},
},
};
const paymentObject = new window.Razorpay(options);
setLoading(false); // Stop showing the loader once the payment interface is ready to open
paymentObject.open();
};
const generateRandomPassword = () => {
return Math.random().toString(36).slice(-8);
};
const sendEmail = (password) => {
emailjs
.send(
import.meta.env.VITE_APP_EMAILJS_SERVICE_ID,
import.meta.env.VITE_APP_EMAILJS_TEMPLATE_ID,
{
from_name: "See Change",
to_name: name,
from_email: "rishirri108@gmail.com",
to_email: email,
phoneNumber: phone,
message: "Thank you for registering on SEE CHANGE",
password: password,
},
import.meta.env.VITE_APP_EMAILJS_PUBLIC_KEY
)
.then((result) => {
console.log("Email successfully sent:", result.text);
})
.catch((error) => {
console.error("Error sending email:", error);
});
};
const registerUser = async (paymentResponse) => {
if (!paymentResponse || !paymentResponse.razorpay_payment_id) {
toast.error("Payment response is missing or invalid.");
return;
}
const password = generateRandomPassword();
const userData = {
fullName: name,
email: email,
phoneNumber: phone,
password: password,
};
try {
const response = await axios.post(Apis.USER_API, userData);
if (response.status === 201 || response.status === 200) {
const paymentData = {
paymentId: paymentResponse.razorpay_payment_id,
user: response.data._id,
amount: 100,
currency: "INR",
status: "captured",
method: "razorpay",
};
await axios.post(Apis.PAYMENT_API.SAVE_PAYMENT, paymentData);
setEmail("");
setName("");
setPhone("");
sendEmail(password);
navigate("/login", {
state: { message: "User registered successfully!" },
});
} else {
toast.error("Failed to register user. Please try again.");
}
} catch (error) {
toast.error("This Email or Phone already in use");
console.error("Error while registering user:", error);
}
};
const handleSubmit = async (e) => {
e.preventDefault();
if (!name) setNameError("Please enter your name");
if (!email) setEmailError("Please enter your email");
if (!phone) setPhoneError("Please enter your phone number");
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email))
setEmailError("Please enter a valid email address");
if (phone.length !== 10) setPhoneError("Phone number must be 10 digits");
if (name && emailRegex.test(email) && phone.length === 10) {
createRazorpayOrder(100);
}
};
return (
<>
{loading && (
<div className="min-h-screen w-full flex items-center justify-center bg-primary-gradient fixed inset-0 z-50">
<l-infinity
size="200"
stroke="4"
stroke-length="0.15"
bg-opacity="0.1"
speed="1.3"
color="white"
></l-infinity>
</div>
)}
<form className="mt-[25px]" onSubmit={handleSubmit}>
<label className="relative">
<input
value={name}
onChange={(e) => {
setName(e.target.value.toUpperCase());
setNameError("");
}}
type="text"
placeholder="Enter Full Name"
className="w-full h-[55px] bg-secondary2 pl-4 text-[22px] font-Roboto font-light rounded-lg outline-none border-[0.5px] border-[#1e1e1e] placeholder-gray-600"
/>
<p className="absolute text-white mix-blend-difference top-[-40px] left-2 text-sm animate-pulse">
{nameError}
</p>
</label>
<label className="relative">
<input
value={email}
onChange={(e) => {
setEmail(e.target.value);
setEmailError("");
}}
type="email"
placeholder="Enter Email"
className="w-full h-[55px] bg-secondary2 pl-4 text-[22px] font-Roboto font-light rounded-lg mt-[22px] outline-none border-[0.5px] border-[#1e1e1e] placeholder-gray-600"
/>
<p className="absolute text-white mix-blend-difference top-[-40px] left-2 text-sm animate-pulse">
{emailError}
</p>
</label>
<label className="relative">
<input
value={phone}
onChange={(e) => {
setPhone(e.target.value.replace(/[^0-9]/g, ""));
setPhoneError("");
}}
type="text"
placeholder="Enter Phone Number"
maxLength={10}
className="w-full h-[55px] bg-secondary2 pl-4 text-[22px] font-Roboto font-light rounded-lg mt-[22px] outline-none border-[0.5px] border-[#1e1e1e] placeholder-gray-600"
/>
<p className="absolute text-white mix-blend-difference top-[-40px] left-2 text-sm animate-pulse">
{phoneError}
</p>
</label>
<button
className="w-full h-[50px] bg-secondary1 hover:bg-sky-300 outline-none rounded-lg mt-5 font-black font-Roboto text-lg border-[2px] border-[#1e1e1e]"
type="submit"
>
Pay and Register
</button>
</form>
<ToastContainer />
</>
);
};
export default RegisterForm;
