Merge branch 'develop' into feature/paypal-integration

src/pages/index.tsx

@@ -29,10 +29,18 @@ import TeacherDashboard from "@/dashboards/Teacher";
 import AgentDashboard from "@/dashboards/Agent";
 import PaymentDue from "./(status)/PaymentDue";
 import {useRouter} from "next/router";
+import {PayPalScriptProvider} from "@paypal/react-paypal-js";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
 
+	const envVariables: {[key: string]: string} = {};
+	Object.keys(process.env)
+		.filter((x) => x.startsWith("NEXT_PUBLIC"))
+		.forEach((x: string) => {
+			envVariables[x] = process.env[x]!;
+		});
+
 	if (!user || !user.isVerified) {
 		res.setHeader("location", "/login");
 		res.statusCode = 302;
@@ -40,16 +48,17 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 		return {
 			props: {
 				user: null,
+				envVariables,
 			},
 		};
 	}
 
 	return {
-		props: {user: req.session.user},
+		props: {user: req.session.user, envVariables},
 	};
 }, sessionOptions);
 
-export default function Home() {
+export default function Home({envVariables}: {envVariables: {[key: string]: string}}) {
 	const [showDiagnostics, setShowDiagnostics] = useState(false);
 	const [showDemographicInput, setShowDemographicInput] = useState(false);
 	const {user, mutateUser} = useUser({redirectTo: "/login"});
@@ -92,7 +101,18 @@ export default function Home() {
 						</div>
 					</Layout>
 				)}
-				{(user.status === "paymentDue" || checkIfUserExpired()) && <PaymentDue hasExpired user={user} reload={router.reload} />}
+				{(user.status === "paymentDue" || checkIfUserExpired()) && (
+					<PayPalScriptProvider
+						options={{
+							clientId: envVariables["NEXT_PUBLIC_PAYPAL_CLIENT_ID"] || "",
+							currency: "EUR",
+							intent: "capture",
+							commit: true,
+							vault: true,
+						}}>
+						<PaymentDue hasExpired user={user} reload={router.reload} />
+					</PayPalScriptProvider>
+				)}
 			</>
 		);
 	}