requests flow

6 files changed, 64 insertions, 35 deletions

diff --git a/src/routes/(app)/[username]/dashboard/+page.svelte b/src/routes/(app)/[username]/dashboard/+page.svelte
index 3cba081d..ffefc1be 100644
--- a/src/routes/(app)/[username]/dashboard/+page.svelte
+++ b/src/routes/(app)/[username]/dashboard/+page.svelte
@@ -57,8 +57,8 @@
 </script>
 
 <div class="container px-4 max-w-md mx-auto mt-20 space-y-12">
-	<div>
-		<div class="text-5xl font-bold mb-2">
+	<div class="mt-24 space-y-2">
+		<div class="text-5xl font-bold">
 			{$selectedRate ? f(accountBalanceFiat, user.currency) : $t('user.dashboard.fetchingRate')}
 		</div>
 
@@ -109,16 +109,16 @@
 					<div class="text-secondary">{sat(amount)}</div>
 				</div>
 				<div class="flex ml-auto my-auto gap-2">
-					<a href={`/invoice/${uuid}`}>
+					<a href={`/invoice/${uuid}/tip`}>
 						<div class="p-2 border rounded-xl bg-white flex">
 							<Icon icon="send" style="w-8 opacity-50 hover:opacity-100" />
 						</div>
 					</a>
-					<a href={`/invoice/${uuid}`}>
+					<form action="/request?/delete" method="POST">
 						<div class="p-2 border rounded-xl bg-white flex">
 							<Icon icon="close" style="w-8 opacity-50 hover:opacity-100" />
 						</div>
-					</a>
+					</form>
 				</div>
 			</div>
 		</div>
@@ -150,7 +150,7 @@
 	</div>
 </div>
 
-<div class="flex fixed bottom-4 w-full px-4">
+<div class="flex fixed w-full px-4 bg-white py-2 bottom-0">
 	<div class="text-secondary flex mr-auto">
 		<div class="flex mr-1">
 			<div class="my-auto mr-1">1</div>
diff --git a/src/routes/(app)/[username]/request/+page.server.js b/src/routes/(app)/[username]/request/+page.server.js
index f32c118c..15b06962 100644
--- a/src/routes/(app)/[username]/request/+page.server.js
+++ b/src/routes/(app)/[username]/request/+page.server.js
@@ -6,9 +6,9 @@ export let load = ({ locals }) => {
 };
 
 export const actions = {
-	default: async ({ cookies, request, url }) => {
+	default: async ({ cookies, locals, request, url }) => {
 		let form = Object.fromEntries(await request.formData());
-		await post('/requests', form, auth(cookies));
-		throw redirect(307, url.href + '/sent');
+		let { id } = await post('/requests', form, auth(cookies));
+		throw redirect(307, `/${locals.user.username}/request/${id}`);
 	}
 };
diff --git a/src/routes/(app)/[username]/request/[id]/+page.server.js b/src/routes/(app)/[username]/request/[id]/+page.server.js
index 79db5d42..99f2e8e2 100644
--- a/src/routes/(app)/[username]/request/[id]/+page.server.js
+++ b/src/routes/(app)/[username]/request/[id]/+page.server.js
@@ -1,3 +1,19 @@
 import { auth, get } from '$lib/utils';
+import { redirect } from '@sveltejs/kit';
 
-export let load = async ({ cookies, params }) => get(`/request/${params.id}`, auth(cookies));
+export let load = async ({ cookies, depends, locals: { user }, params }) => {
+	depends('app:invoice');
+	if (!user) throw redirect(307, '/login');
+
+	let { request } = await get(`/request/${params.id}`, auth(cookies));
+	let { invoice } = request;
+	if (invoice) {
+		let { amount, received, uuid } = invoice;
+		if ((received && !amount) || received >= amount) throw redirect(307, `/send/${uuid}`);
+
+		if (request.requester.username === user.username)
+			throw redirect(307, `/send/${request.invoice.uuid}`);
+	}
+
+	return { request };
+};
diff --git a/src/routes/(app)/[username]/request/[id]/+page.svelte b/src/routes/(app)/[username]/request/[id]/+page.svelte
index 74b037d3..0f979284 100644
--- a/src/routes/(app)/[username]/request/[id]/+page.svelte
+++ b/src/routes/(app)/[username]/request/[id]/+page.svelte
@@ -1,35 +1,46 @@
 <script>
-	import { scale } from 'svelte/transition';
-	import { Avatar, Icon } from '$comp';
+	import { Avatar } from '$comp';
 	import { f, sat, sats } from '$lib/utils';
 	import { request as req, requestRedirect } from '$lib/store';
+	import { onMount } from 'svelte';
 
 	export let data;
 	let { request, user } = data;
-	let { amount, rate, currency } = request.invoice;
-	let fiat = (amount * rate) / sats;
-	req.set();
+
+	let amount, currency, rate, fiat;
+	if (request.invoice) {
+		({ amount, rate, currency } = request.invoice);
+		fiat = (amount * rate) / sats;
+	}
+
+	onMount(() => req.set());
 </script>
 
 <div class="container px-4 mt-20 max-w-xl mx-auto space-y-8">
-	<div class="flex w-full max-w-[200px] mx-auto" in:scale={{ start: 0.5 }}>
-		<Icon icon="check" style="mx-auto" />
-	</div>
-
 	<div class="text-center mb-8 space-y-5">
-		<p class="text-5xl break-words">
-			<span class="text-xl md:text-2xl">Sent invoice to</span>
-		</p>
-		<div class="flex p-1 gap-2 justify-center">
-			<Avatar user={request.requester} size={20} />
-			<p class="text-4xl break-words my-auto">{request.requester.username}</p>
-		</div>
-		<div>
-			<h2 class="text-2xl md:text-3xl font-semibold">
-				{f(fiat, currency)}
-			</h2>
-			<h3 class="text-secondary md:text-lg mb-6 mt-1">{sat(amount)}</h3>
-		</div>
+		{#if request.recipient_id === user.id}
+			<p class="text-5xl break-words">
+				<span class="text-xl md:text-2xl">Sent invoice to</span>
+			</p>
+			<div class="flex p-1 gap-2 justify-center">
+				<Avatar user={request.requester} size={20} />
+				<p class="text-4xl break-words my-auto">{request.requester.username}</p>
+			</div>
+			<div>
+				<h2 class="text-2xl md:text-3xl font-semibold">
+					{f(fiat, currency)}
+				</h2>
+				<h3 class="text-secondary md:text-lg mb-6 mt-1">{sat(amount)}</h3>
+			</div>
+		{:else}
+			<p class="text-5xl break-words">
+				<span class="text-xl md:text-2xl">Sent request to</span>
+			</p>
+			<div class="flex p-1 gap-2 justify-center">
+				<Avatar user={request.recipient} size={20} />
+				<p class="text-4xl break-words my-auto">{request.recipient.username}</p>
+			</div>
+		{/if}
 	</div>
 </div>
 
diff --git a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
index d316b23c..4d6fbc33 100644
--- a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
@@ -31,8 +31,6 @@
 		pages = [];
 	$: data && ({ page: p, pages, start, end, total, transactions } = data);
 
-	$: console.log($txns.length), ($txns = transactions);
-
 	$: $page && ($newPayment = false);
 	$: $newPayment && invalidate(`/users/${user.username}`);
 
diff --git a/src/routes/(app)/invoice/[id]/tip/+page.svelte b/src/routes/(app)/invoice/[id]/tip/+page.svelte
index ca0a0437..34393827 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/tip/+page.svelte
@@ -1,6 +1,7 @@
 <script>
+  import { onMount } from "svelte";
 	import { browser } from '$app/environment';
-	import { invoice as inv, invoices } from '$lib/store';
+	import { invoice as inv, invoices, request } from '$lib/store';
 	import { back, copy, f, sat, get, reverseFormat, s, sats } from '$lib/utils';
 	import { Icon } from '$comp';
 	import { goto } from '$app/navigation';
@@ -112,6 +113,8 @@
 	$: tipAmount = ((tip * rate) / sats).toFixed(2);
 
 	$: invoiceAmountFiatFormatted = f(amountFiat, currency);
+
+  onMount(() => ($request = undefined));
 </script>
 
 <button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
@@ -126,6 +129,7 @@
 		<input type="hidden" name="rate" value={rate} />
 		<input type="hidden" name="prompt" value="false" />
 		<input type="hidden" name="network" value={network} />
+		<input type="hidden" name="request_id" value={invoice.request?.id} />
 
 		<h1 class="text-4xl font-semibold my-8">{$t('invoice.addTipq')}</h1>
 		{#if !showCustomAmount}