invoice requests

11 files changed, 99 insertions, 44 deletions

diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 5bfe7712..36e109e0 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -2,11 +2,11 @@
 	import { SvelteToast } from '@zerodevx/svelte-toast';
 	import { onDestroy, onMount } from 'svelte';
 	import { close, connect, send } from '$lib/socket';
-	import { last, selectedRate, rate, user, request } from '$lib/store';
+	import { last, selectedRate, invoice, rate, user, request } from '$lib/store';
 	import { page } from '$app/stores';
 	import { browser } from '$app/environment';
 	import { goto } from '$app/navigation';
-	import { LoadingSplash, Request } from '$comp';
+	import { LoadingSplash, Invoice, Request } from '$comp';
 	import { warning, protectedRoutes } from '$lib/utils';
 	import { t, locale } from '$lib/translations';
 
@@ -84,6 +84,10 @@
 	<slot />
 </main>
 
+{#if $invoice}
+	<Invoice user={u} />
+{/if}
+
 {#if $request}
-	<Request />
+	<Request user={u} />
 {/if}
diff --git a/src/routes/(app)/[username]/+page.svelte b/src/routes/(app)/[username]/+page.svelte
index b9deeb5f..ed11412f 100644
--- a/src/routes/(app)/[username]/+page.svelte
+++ b/src/routes/(app)/[username]/+page.svelte
@@ -48,15 +48,15 @@
 			<div>
 				<a href={`/${subject.username}/receive`}>
 					<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2">
-						Pay
+						Pay now
 					</button>
 				</a>
 
-				<!-- <a href={`/${subject.username}/request`}> -->
-				<!-- 	<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2" -->
-				<!-- 		>Request an invoice</button -->
-				<!-- 	> -->
-				<!-- </a> -->
+				<a href={`/${subject.username}/request`}>
+					<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2"
+						>Ask to pay</button
+					>
+				</a>
 			</div>
 		{/if}
 	</div>
diff --git a/src/routes/(app)/[username]/receive/+page.svelte b/src/routes/(app)/[username]/receive/+page.svelte
deleted file mode 100644
index 11d3a6db..00000000
--- a/src/routes/(app)/[username]/receive/+page.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script>
-	import { Icon, Numpad } from '$comp';
-	import { t } from '$lib/translations';
-	import { enhance } from '$app/forms';
-
-	export let data;
-	let amount;
-
-	let { currency, username } = data.subject;
-</script>
-
-<form method="POST" class="flex justify-center items-center mt-24 mb-3 px-3" use:enhance>
-	<input type="hidden" name="amount" value={amount} />
-	<input type="hidden" name="currency" value={currency} />
-	<input type="hidden" name="username" value={username} />
-	<input type="hidden" name="prompt" value="true" />
-
-	<div class="space-y-3 w-full md:w-[300px] mx-auto">
-		<Numpad bind:amount bind:currency />
-		<button
-			type="submit"
-			class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold {!amount
-				? 'opacity-50'
-				: 'opacity-100 hover:opacity-80'}"
-			disabled={!amount}
-		>
-			Next
-		</button>
-	</div>
-</form>
diff --git a/src/routes/(app)/[username]/receive/+page.server.js b/src/routes/(app)/[username]/receive/[...recipient]/+page.server.js
index 1068f273..1068f273 100644
--- a/src/routes/(app)/[username]/receive/+page.server.js
+++ b/src/routes/(app)/[username]/receive/[...recipient]/+page.server.js
diff --git a/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte b/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte
new file mode 100644
index 00000000..a0f9a1b0
--- /dev/null
+++ b/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte
@@ -0,0 +1,70 @@
+<script>
+	import { Avatar, Icon, Numpad } from '$comp';
+	import { t } from '$lib/translations';
+	import { enhance } from '$app/forms';
+	import { page } from '$app/stores';
+	import { request } from '$lib/store';
+
+	export let data;
+	export let form;
+
+	let req;
+
+	$: load($page);
+	let load = () => {
+		if ($request) {
+			req = { ...$request };
+			$request = null;
+		}
+	};
+
+	let amount;
+
+	let { currency, username } = data.subject;
+	let { user } = data;
+</script>
+
+{#if form}
+	<div class="container px-4 mt-20 max-w-xl mx-auto space-y-8">
+		<div class="text-center mb-8 space-y-5">
+			<p class="text-5xl break-words">
+				<span class="text-xl md:text-2xl">Invoice sent to</span>
+			</p>
+
+			<div class="flex p-1 gap-2 justify-center">
+				<Avatar user={req.requester} size={'20'} />
+				<p class="text-4xl break-words my-auto">{req.requester.username}</p>
+			</div>
+		</div>
+		<a href={`/${user.username}/dashboard`} class="mx-auto">
+			<button class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80">
+				Done
+			</button>
+		</a>
+	</div>
+{:else}
+	<form method="POST" class="flex justify-center items-center mt-24 mb-3 px-3" use:enhance>
+		<input type="hidden" name="amount" value={amount} />
+		<input type="hidden" name="currency" value={currency} />
+		<input type="hidden" name="username" value={username} />
+
+		{#if req}
+			<input type="hidden" name="requester" value={req.requester.username} />
+		{/if}
+
+		<input type="hidden" name="prompt" value="true" />
+
+		<div class="space-y-3 w-full md:w-[300px] mx-auto">
+			<Numpad bind:amount bind:currency />
+			<button
+				type="submit"
+				class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold {!amount
+					? 'opacity-50'
+					: 'opacity-100 hover:opacity-80'}"
+				disabled={!amount}
+			>
+				Next
+			</button>
+		</div>
+	</form>
+{/if}
diff --git a/src/routes/(app)/[username]/receive/[network]/[amount]/+page.server.js b/src/routes/(app)/[username]/receive/[network]/[amount]/+page.server.js
deleted file mode 100644
index e69de29b..00000000
--- a/src/routes/(app)/[username]/receive/[network]/[amount]/+page.server.js
+++ /dev/null
diff --git a/src/routes/(app)/[username]/receive/[network]/[amount]/+page.svelte b/src/routes/(app)/[username]/receive/[network]/[amount]/+page.svelte
deleted file mode 100644
index 45b983be..00000000
--- a/src/routes/(app)/[username]/receive/[network]/[amount]/+page.svelte
+++ /dev/null
@@ -1 +0,0 @@
-hi
diff --git a/src/routes/(app)/[username]/request/+page.svelte b/src/routes/(app)/[username]/request/+page.svelte
index 37fdae96..6e7eb08a 100644
--- a/src/routes/(app)/[username]/request/+page.svelte
+++ b/src/routes/(app)/[username]/request/+page.svelte
@@ -22,7 +22,7 @@
 
 		<textarea
 			name="memo"
-			placeholder="(Optionally) use this field to describe your order"
+			placeholder="You can use this field to describe your order"
 			class="w-full p-4 border rounded-xl h-48"
 		/>
 
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index 6de55bae..25ebf227 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -3,7 +3,7 @@
 	import { back, copy, f, get, sat, reverseFormat, s, sats } from '$lib/utils';
 	import { onMount, onDestroy } from 'svelte';
 	import { browser } from '$app/environment';
-	import { invoices, last } from '$lib/store';
+	import { invoice as inv, invoices, last } from '$lib/store';
 	import { Icon, Heart, Image, Qr } from '$comp';
 	import { goto } from '$app/navigation';
 	import { t } from '$lib/translations';
@@ -24,6 +24,8 @@
 	let tipPercent = 0;
 
 	let refresh = (data) => {
+		$inv = null;
+
 		({ invoice, id } = data);
 		({
 			amount,
diff --git a/src/routes/(app)/invoice/sent/+page.svelte b/src/routes/(app)/invoice/sent/+page.svelte
new file mode 100644
index 00000000..c4cbc5bb
--- /dev/null
+++ b/src/routes/(app)/invoice/sent/+page.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { Avatar, Icon } from '$comp';
+	export let user;
+</script>
+
+Invoice sent to
+<div class="flex">
+	<Avatar user={$request.requester} size={12} />
+	<h1 class="my-auto"><b>{$request.requester.username}</b> is ready to pay</h1>
+</div>
diff --git a/src/routes/(app)/send/[...text]/+page.server.js b/src/routes/(app)/send/[...text]/+page.server.js
index 7d2aa8b0..5e274c67 100644
--- a/src/routes/(app)/send/[...text]/+page.server.js
+++ b/src/routes/(app)/send/[...text]/+page.server.js
@@ -10,7 +10,7 @@ let parse = async (t, r) => {
 
 	t.startsWith('bitcoin:') &&
 		({
-      address: t,
+			address: t,
 			options: { amount }
 		} = bip21.decode(t));
 
@@ -46,7 +46,7 @@ let parse = async (t, r) => {
 		} catch (e) {
 			let r = `/send/bitcoin/${t}`;
 			if (amount) r += '/' + amount;
-      console.log("AM", amount)
+			console.log('AM', amount);
 			throw redirect(307, r);
 		}