Created a webhook to allow the transaction to be completed

src/components/PaymobPayment.tsx

@@ -1,38 +1,73 @@
+import {PaymentIntention} from "@/interfaces/paymob";
 import {DurationUnit} from "@/interfaces/paypal";
 import {User} from "@/interfaces/user";
 import axios from "axios";
 import {useState} from "react";
 import Button from "./Low/Button";
+import Input from "./Low/Input";
+import Modal from "./Modal";
 
 interface Props {
 	user: User;
 	currency: string;
 	price: number;
-	title: string;
-	description: string;
-	paymentID: string;
+	packageID: string;
+	setIsPaymentLoading: (v: boolean) => void;
 	duration: number;
 	duration_unit: DurationUnit;
-	setIsLoading: (isLoading: boolean) => void;
 	onSuccess: (duration: number, duration_unit: DurationUnit) => void;
 }
 
-export default function PaymobPayment({
-	user,
-	price,
-	currency,
-	title,
-	description,
-	paymentID,
-	duration,
-	duration_unit,
-	setIsLoading,
-	onSuccess,
-}: Props) {
-	const [iframeURL, setIFrameURL] = useState<string>();
+export default function PaymobPayment({user, price, packageID, setIsPaymentLoading, currency, duration, duration_unit, onSuccess}: Props) {
+	const [isLoading, setIsLoading] = useState(false);
+	const [isModalOpen, setIsModalOpen] = useState(false);
+
+	const [firstName, setFirstName] = useState(user.name.split(" ")[0]);
+	const [lastName, setLastName] = useState([...user.name.split(" ")].pop());
+	const [street, setStreet] = useState("");
+	const [apartment, setApartment] = useState("");
+	const [building, setBuilding] = useState("");
+	const [state, setState] = useState("");
+	const [floor, setFloor] = useState("");
 
 	const handleCardPayment = async () => {
 		try {
+			setIsPaymentLoading(true);
+
+			const paymentIntention: PaymentIntention = {
+				amount: price * 1000,
+				currency: "OMR",
+				items: [],
+				payment_methods: [1540],
+				customer: {
+					email: user.email,
+					first_name: user.name.split(" ")[0],
+					last_name: [...user.name.split(" ")].pop() || "N/A",
+					extras: {
+						re: user.id,
+					},
+				},
+				billing_data: {
+					apartment: apartment || "N/A",
+					building: building || "N/A",
+					country: user.demographicInformation?.country || "N/A",
+					email: user.email,
+					first_name: user.name.split(" ")[0],
+					last_name: [...user.name.split(" ")].pop() || "N/A",
+					floor: floor || "N/A",
+					phone_number: user.demographicInformation?.phone || "N/A",
+					state: state || "N/A",
+					street: street || "N/A",
+				},
+				extras: {
+					userID: user.id,
+					packageID: packageID,
+				},
+			};
+
+			const response = await axios.post<{iframeURL: string}>(`/api/paymob`, paymentIntention);
+
+			window.open(response.data.iframeURL, "_blank", "noopener,noreferrer");
 		} catch (error) {
 			console.error("Error starting card payment process:", error);
 		}
@@ -40,8 +75,29 @@ export default function PaymobPayment({
 
 	return (
 		<>
-			<Button onClick={handleCardPayment}>Pay</Button>
-			{iframeURL}
+			<Modal isOpen={isModalOpen} title="Billing Data" onClose={() => setIsModalOpen(false)}>
+				<div className="flex flex-col gap-4 mt-4">
+					<div className="grid grid-cols-2 gap-4">
+						<Input label="First Name" value={firstName} onChange={setFirstName} type="text" name="firstName" />
+						<Input label="Last Name" value={lastName} onChange={setLastName} type="text" name="lastName" />
+					</div>
+					<div className="grid grid-cols-3 -md:grid-cols-1 gap-4">
+						<Input label="State" value={state} onChange={setState} type="text" name="state" />
+						<Input label="Street" value={street} onChange={setStreet} type="text" name="street" />
+						<Input label="Building" value={building} onChange={setBuilding} type="text" name="building" />
+					</div>
+					<div className="grid grid-cols-2 gap-4">
+						<Input label="Floor" value={floor} onChange={setFloor} type="text" name="floor" />
+						<Input label="Apartment" value={apartment} onChange={setApartment} type="text" name="apartment" />
+					</div>
+					<Button className="w-full max-w-[200px] self-end mt-4" disabled={!firstName || !lastName} onClick={handleCardPayment}>
+						Complete Payment
+					</Button>
+				</div>
+			</Modal>
+			<Button isLoading={isLoading} onClick={() => setIsModalOpen(true)}>
+				Select
+			</Button>
 		</>
 	);
 }