Updated the payment to work with Paymob

src/components/PaymobPayment.tsx

@@ -2,6 +2,7 @@ import {PaymentIntention} from "@/interfaces/paymob";
 import {DurationUnit} from "@/interfaces/paypal";
 import {User} from "@/interfaces/user";
 import axios from "axios";
+import {useRouter} from "next/router";
 import {useState} from "react";
 import Button from "./Low/Button";
 import Input from "./Low/Input";
@@ -11,14 +12,13 @@ interface Props {
 	user: User;
 	currency: string;
 	price: number;
-	packageID: string;
 	setIsPaymentLoading: (v: boolean) => void;
 	duration: number;
 	duration_unit: DurationUnit;
 	onSuccess: (duration: number, duration_unit: DurationUnit) => void;
 }
 
-export default function PaymobPayment({user, price, packageID, setIsPaymentLoading, currency, duration, duration_unit, onSuccess}: Props) {
+export default function PaymobPayment({user, price, setIsPaymentLoading, currency, duration, duration_unit, onSuccess}: Props) {
 	const [isLoading, setIsLoading] = useState(false);
 	const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -30,6 +30,8 @@ export default function PaymobPayment({user, price, packageID, setIsPaymentLoadi
 	const [state, setState] = useState("");
 	const [floor, setFloor] = useState("");
 
+	const router = useRouter();
+
 	const handleCardPayment = async () => {
 		try {
 			setIsPaymentLoading(true);
@@ -61,13 +63,15 @@ export default function PaymobPayment({user, price, packageID, setIsPaymentLoadi
 				},
 				extras: {
 					userID: user.id,
-					packageID: packageID,
+					duration,
+					duration_unit,
 				},
 			};
 
 			const response = await axios.post<{iframeURL: string}>(`/api/paymob`, paymentIntention);
 
-			window.open(response.data.iframeURL, "_blank", "noopener,noreferrer");
+			router.push(response.data.iframeURL);
+			setIsModalOpen(false);
 		} catch (error) {
 			console.error("Error starting card payment process:", error);
 		}