Improved some issues with the payment

src/components/PaymobPayment.tsx

@@ -20,6 +20,7 @@ interface Props {
 
 export default function PaymobPayment({user, price, setIsPaymentLoading, currency, duration, duration_unit, onSuccess}: Props) {
 	const [isLoading, setIsLoading] = useState(false);
+	console.log(user.id);
 
 	const router = useRouter();
 

src/pages/(status)/PaymentDue.tsx

@@ -18,11 +18,10 @@ import PaymobPayment from "@/components/PaymobPayment";
 interface Props {
 	user: User;
 	hasExpired?: boolean;
-	clientID: string;
 	reload: () => void;
 }
 
-export default function PaymentDue({user, hasExpired = false, clientID, reload}: Props) {
+export default function PaymentDue({user, hasExpired = false, reload}: Props) {
 	const [isLoading, setIsLoading] = useState(false);
 	const [appliedDiscount, setAppliedDiscount] = useState(0);
 
@@ -136,7 +135,6 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
 													</div>
 												)}
 												<PaymobPayment
-													key={clientID}
 													user={user}
 													setIsPaymentLoading={setIsLoading}
 													onSuccess={() => {
@@ -176,7 +174,6 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
 											{user.corporateInformation.payment.value} {user.corporateInformation.payment.currency}
 										</span>
 										<PaymobPayment
-											key={clientID}
 											user={user}
 											setIsPaymentLoading={setIsLoading}
 											currency={user.corporateInformation.payment.currency}

src/pages/api/paymob/index.ts

@@ -41,7 +41,12 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 
 	const response = await axios.post<IntentionResult>(
 		"https://oman.paymob.com/v1/intention/",
-		{...intention, payment_methods: [parseInt(process.env.PAYMOB_INTEGRATION_ID || "0")], items: []},
+		{
+			...intention,
+			payment_methods: [parseInt(process.env.PAYMOB_INTEGRATION_ID || "0")],
+			items: [],
+			extras: {...intention.extras, userID: req.session.user!.id},
+		} as PaymentIntention,
 		{headers: {Authorization: `Token ${process.env.PAYMOB_SECRET_KEY}`}},
 	);
 	const intentionResult = response.data;

src/pages/api/paymob/webhook.ts

@@ -43,7 +43,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 
 	const initialDate = moment(subscriptionExpirationDate).isAfter(moment()) ? moment(subscriptionExpirationDate) : moment();
 
-	const updatedSubscriptionExpirationDate = moment(initialDate).add(duration, duration_unit).endOf("day").toISOString();
+	const updatedSubscriptionExpirationDate = moment(initialDate).add(duration, duration_unit).endOf("day").subtract(2, "hours").toISOString();
 
 	await setDoc(userSnapshot.ref, {subscriptionExpirationDate: updatedSubscriptionExpirationDate}, {merge: true});
 	await setDoc(doc(db, "paypalpayments", v4()), {

src/pages/index.tsx

@@ -49,7 +49,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 			redirect: {
 				destination: "/login",
 				permanent: false,
-			}
+			},
 		};
 	}
 
@@ -63,7 +63,7 @@ interface Props {
 	envVariables: {[key: string]: string};
 }
 export default function Home(props: Props) {
-	const { envVariables} = props;
+	const {envVariables} = props;
 	const [showDiagnostics, setShowDiagnostics] = useState(false);
 	const [showDemographicInput, setShowDemographicInput] = useState(false);
 	const [selectedScreen, setSelectedScreen] = useState<Type>("admin");
@@ -112,15 +112,7 @@ export default function Home(props: Props) {
 						</div>
 					</Layout>
 				)}
-				{(user.status === "paymentDue" || checkIfUserExpired()) && (
-					<PaymentDue
-						key={envVariables["NEXT_PUBLIC_PAYPAL_CLIENT_ID"]}
-						hasExpired
-						user={user}
-						reload={router.reload}
-						clientID={envVariables["NEXT_PUBLIC_PAYPAL_CLIENT_ID"] || ""}
-					/>
-				)}
+				{(user.status === "paymentDue" || checkIfUserExpired()) && <PaymentDue hasExpired user={user} reload={router.reload} />}
 			</>
 		);
 	}

src/pages/payment.tsx

@@ -1,15 +1,15 @@
 /* eslint-disable @next/next/no-img-element */
 import Head from "next/head";
-import { withIronSessionSsr } from "iron-session/next";
-import { sessionOptions } from "@/lib/session";
+import {withIronSessionSsr} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
 import useUser from "@/hooks/useUser";
 import PaymentDue from "./(status)/PaymentDue";
-import { useRouter } from "next/router";
+import {useRouter} from "next/router";
 
-export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
+export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
 
-  const envVariables: { [key: string]: string } = {};
+	const envVariables: {[key: string]: string} = {};
 	Object.keys(process.env)
 		.filter((x) => x.startsWith("NEXT_PUBLIC"))
 		.forEach((x: string) => {
@@ -21,21 +21,17 @@ export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
 			redirect: {
 				destination: "/login",
 				permanent: false,
-			}
+			},
 		};
 	}
 
 	return {
-    props: { user: req.session.user, envVariables },
+		props: {user: req.session.user, envVariables},
 	};
 }, sessionOptions);
 
-export default function Home({
-  envVariables,
-}: {
-  envVariables: { [key: string]: string };
-}) {
-  const { user } = useUser({ redirectTo: "/login" });
+export default function Home({envVariables}: {envVariables: {[key: string]: string}}) {
+	const {user} = useUser({redirectTo: "/login"});
 	const router = useRouter();
 
 	return (
@@ -49,14 +45,7 @@ export default function Home({
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
-      {user && (
-        <PaymentDue
-          key={envVariables["NEXT_PUBLIC_PAYPAL_CLIENT_ID"]}
-          clientID={envVariables["NEXT_PUBLIC_PAYPAL_CLIENT_ID"] || ""}
-          user={user}
-          reload={router.reload}
-        />
-      )}
+			{user && <PaymentDue user={user} reload={router.reload} />}
 		</>
 	);
 }