Updated the payment to work with Paymob

src/pages/(status)/PaymentDue.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
 import Layout from "@/components/High/Layout";
-import PayPalPayment from "@/components/PayPalPayment";
 import useGroups from "@/hooks/useGroups";
 import usePackages from "@/hooks/usePackages";
 import useUsers from "@/hooks/useUsers";
@@ -13,8 +12,6 @@ import useInvites from "@/hooks/useInvites";
 import {BsArrowRepeat} from "react-icons/bs";
 import InviteCard from "@/components/Medium/InviteCard";
 import {useRouter} from "next/router";
-import {PayPalScriptProvider} from "@paypal/react-paypal-js";
-import {usePaypalTracking} from "@/hooks/usePaypalTracking";
 import {ToastContainer} from "react-toastify";
 import useDiscounts from "@/hooks/useDiscounts";
 import PaymobPayment from "@/components/PaymobPayment";
@@ -37,7 +34,6 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
 	const {users} = useUsers();
 	const {groups} = useGroups();
 	const {invites, isLoading: isInvitesLoading, reload: reloadInvites} = useInvites({to: user?.id});
-	const trackingId = usePaypalTracking();
 
 	useEffect(() => {
 		const userDiscounts = discounts.filter((x) => user.email.endsWith(`@${x.domain}`));
@@ -65,9 +61,15 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
 			<ToastContainer />
 			{isLoading && (
 				<div className="absolute left-0 top-0 z-[999] h-screen w-screen overflow-hidden bg-black/60">
-					<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-8 text-white">
-						<span className={clsx("loading loading-infinity w-48")} />
-						<span className={clsx("text-2xl font-bold")}>Completing your payment...</span>
+					<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-8 text-white">
+						<span className={clsx("loading loading-infinity w-48 animate-pulse")} />
+						<span className={clsx("text-2xl font-bold animate-pulse")}>Completing your payment...</span>
+						<span>If you canceled your payment or it failed, please click the button below to restart</span>
+						<button
+							onClick={() => setIsLoading(false)}
+							className="border border-white rounded-full px-4 py-2 hover:bg-white/80 hover:text-black cursor-pointer transition ease-in-out duration-300">
+							Cancel Payment
+						</button>
 					</div>
 				</div>
 			)}
@@ -137,29 +139,10 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
 														</span>
 													</div>
 												)}
-												{/* <PayPalPayment
-                            key={clientID}
-                            clientID={clientID}
-                            setIsLoading={setIsLoading}
-                            onSuccess={() => {
-                              setTimeout(reload, 500);
-                            }}
-                            trackingId={trackingId}
-                            currency={p.currency}
-                            duration={p.duration}
-                            duration_unit={p.duration_unit}
-                            price={
-                              +(
-                                p.price -
-                                p.price * (appliedDiscount / 100)
-                              ).toFixed(2)
-                            }
-                          /> */}
 												<PaymobPayment
 													key={clientID}
 													user={user}
 													setIsPaymentLoading={setIsLoading}
-													packageID={p.id}
 													onSuccess={() => {
 														setTimeout(reload, 500);
 													}}
@@ -179,7 +162,6 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
 											</div>
 										</div>
 									))}
-									z
 								</div>
 							</div>
 						)}
@@ -198,10 +180,10 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
 											{user.corporateInformation.payment.value}
 											{getSymbolFromCurrency(user.corporateInformation.payment.currency)}
 										</span>
-										<PayPalPayment
+										<PaymobPayment
 											key={clientID}
-											clientID={clientID}
-											setIsLoading={setIsLoading}
+											user={user}
+											setIsPaymentLoading={setIsLoading}
 											currency={user.corporateInformation.payment.currency}
 											price={user.corporateInformation.payment.value}
 											duration={user.corporateInformation.monthlyDuration}
@@ -210,8 +192,6 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
 												setIsLoading(false);
 												setTimeout(reload, 500);
 											}}
-											loadScript
-											trackingId={trackingId}
 										/>
 									</div>
 									<div className="flex flex-col items-start gap-1">

src/pages/api/paymob/webhook.ts

@@ -5,7 +5,7 @@ import {getFirestore, collection, getDocs, setDoc, doc, getDoc, query, where} fr
 import {withIronSessionApiRoute} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
 import {Group, User} from "@/interfaces/user";
-import {Package, Payment} from "@/interfaces/paypal";
+import {DurationUnit, Package, Payment} from "@/interfaces/paypal";
 import {v4} from "uuid";
 import ShortUniqueId from "short-unique-id";
 import axios from "axios";
@@ -25,24 +25,37 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 	if (!checkTransaction(authToken, transactionResult.transaction.order.id)) return res.status(404).json({ok: false});
 	if (!transactionResult.transaction.success) return res.status(200).json({ok: false});
 
-	const {userID, packageID} = transactionResult.intention.extras.creation_extras;
+	const {userID, duration, duration_unit} = transactionResult.intention.extras.creation_extras as {
+		userID: string;
+		duration: number;
+		duration_unit: DurationUnit;
+	};
 
-	const userSnapshot = await getDoc(doc(db, "users", userID));
-	const packageSnapshot = await getDoc(doc(db, "packages", packageID));
+	const userSnapshot = await getDoc(doc(db, "users", userID as string));
 
-	if (!userSnapshot.exists() || !packageSnapshot.exists()) return res.status(404).json({ok: false});
+	if (!userSnapshot.exists() || !duration || !duration_unit) return res.status(404).json({ok: false});
 
 	const user = {...userSnapshot.data(), id: userSnapshot.id} as User;
-	const pack = {...packageSnapshot.data(), id: packageSnapshot.id} as Package;
 
 	const subscriptionExpirationDate = user.subscriptionExpirationDate;
 	if (!subscriptionExpirationDate) return res.status(200).json({ok: false});
 
 	const initialDate = moment(subscriptionExpirationDate).isAfter(moment()) ? moment(subscriptionExpirationDate) : moment();
 
-	const updatedSubscriptionExpirationDate = moment(initialDate).add(pack.duration, pack.duration_unit).toISOString();
+	const updatedSubscriptionExpirationDate = moment(initialDate).add(duration, duration_unit).toISOString();
 
 	await setDoc(userSnapshot.ref, {subscriptionExpirationDate: updatedSubscriptionExpirationDate}, {merge: true});
+	await setDoc(doc(db, "paypalpayments", v4()), {
+		createdAt: new Date().toISOString(),
+		currency: transactionResult.transaction.currency,
+		orderId: transactionResult.transaction.id,
+		status: "COMPLETED",
+		subscriptionDuration: duration,
+		subscriptionDurationUnit: duration_unit,
+		subscriptionExpirationDate: updatedSubscriptionExpirationDate,
+		userId: userID,
+		value: transactionResult.transaction.amount_cents / 1000,
+	});
 
 	if (user.type === "corporate") {
 		const groupsSnapshot = await getDocs(query(collection(db, "groups"), where("admin", "==", user.id)));