Removed the billing details modal

src/components/PaymobPayment.tsx

@@ -20,15 +20,6 @@ interface Props {
 
 export default function PaymobPayment({user, price, 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 router = useRouter();
 
@@ -50,16 +41,16 @@ export default function PaymobPayment({user, price, setIsPaymentLoading, currenc
 					},
 				},
 				billing_data: {
-					apartment: apartment || "N/A",
+					apartment: "N/A",
-					building: building || "N/A",
+					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",
+					floor: "N/A",
 					phone_number: user.demographicInformation?.phone || "N/A",
-					state: state || "N/A",
+					state: "N/A",
-					street: street || "N/A",
+					street: "N/A",
 				},
 				extras: {
 					userID: user.id,
@@ -71,7 +62,6 @@ export default function PaymobPayment({user, price, setIsPaymentLoading, currenc
 			const response = await axios.post<{iframeURL: string}>(`/api/paymob`, paymentIntention);
 
 			router.push(response.data.iframeURL);
-			setIsModalOpen(false);
 		} catch (error) {
 			console.error("Error starting card payment process:", error);
 		}
@@ -79,27 +69,7 @@ export default function PaymobPayment({user, price, setIsPaymentLoading, currenc
 
 	return (
 		<>
-			<Modal isOpen={isModalOpen} title="Billing Data" onClose={() => setIsModalOpen(false)}>
+			<Button isLoading={isLoading} onClick={handleCardPayment}>
-				<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>
 		</>