Move payment to home and enable fetching data

frontend/src/params/int.ts

@@ -0,0 +1,5 @@
+import type { ParamMatcher } from '@sveltejs/kit';
+
+export const match: ParamMatcher = (param) => {
+	return /^\d+$/.test(param);
+};

frontend/src/routes/auth/+page.svelte

@@ -3,7 +3,7 @@
 	import { page } from '$app/stores';
 	import { fade, fly } from 'svelte/transition';
 
-	let isSignIn = false;
+	let isSignIn = true;
 	let email = '';
 	let password = '';
 	let name = '';
@@ -22,7 +22,7 @@
 	};
 </script>
 
-<div in:fly={{ y: 200 }} class="container" id="container">
+<div in:fly|local={{ y: 200 }} class="container" id="container">
 	<div class="form-container {isSignIn ? 'sign-in-container' : 'sign-up-container'}">
 		<form method="POST" action={isSignIn ? '?/login' : '?/register'} use:enhance>
 			<h1>{isSignIn ? 'Sign In' : 'Create Account'}</h1>

frontend/src/routes/home/payment/+page.server.ts

@@ -0,0 +1,27 @@
+import type { PageServerLoad } from './$types';
+import RazorPay from 'razorpay';
+import { KEY_ID, KEY_SECRET } from '$env/static/private';
+import type { Product } from '../+layout.server';
+import { error } from '@sveltejs/kit';
+
+const razorpay = new RazorPay({
+	key_id: KEY_ID,
+	key_secret: KEY_SECRET
+});
+
+export const load: PageServerLoad = async ({ url, parent }) => {
+	const id = Number(url.searchParams.get('id'));
+	const products: { products: Product[] } = await parent();
+
+	try {
+		const product = products.products.filter((e) => e.id === id)[0];
+
+		const response = await razorpay.orders.create({
+			amount: product.bidPrice,
+			currency: 'INR'
+		});
+		return { product, id: response.id };
+	} catch (e) {
+		throw error(404, { message: 'ID not found!' });
+	}
+};

frontend/src/routes/payment/+page.svelte → frontend/src/routes/home/payment/+page.svelte

@@ -2,6 +2,7 @@
 	import Button from '$lib/components/Button.svelte';
 	import { onMount } from 'svelte';
 	import { PUBLIC_KEY_ID } from '$env/static/public';
+	import { page } from '$app/stores';
 
 	export let data;
 	let rzp;
@@ -34,17 +35,17 @@
 <div class="payment-container">
 	<h1>Payment Checkout</h1>
 
-	<img src="" alt="item" />
+	<img src={data.product.image.url} alt={data.product.image.alt} />
 	<div class="desc-container">
-		<p>Item: Cloth</p>
-		<p>Price: $5</p>
+		<p>Item: {data.product.name}</p>
+		<p>Price: ${data.product.bidPrice}</p>
 	</div>
 
 	<Button id="rzp" func={openCheckout} text="Make Payment" />
 </div>
 
 <style lang="sass">
-	@use '../../vars'
+	@use '../../../vars'
 
 	.payment-container
 		display: flex