show users involved in voucher creation/redemption

8 files changed, 59 insertions, 28 deletions

diff --git a/src/routes/(app)/[username]/request/[id]/+page.svelte b/src/routes/(app)/[username]/request/[id]/+page.svelte
index 7dd10e09..dc002c1e 100644
--- a/src/routes/(app)/[username]/request/[id]/+page.svelte
+++ b/src/routes/(app)/[username]/request/[id]/+page.svelte
@@ -48,3 +48,7 @@
 <a href={$requestRedirect || `/${user.username}/dashboard`}>
 	<div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50" />
 </a>
+
+<div class="fixed bottom-10 w-full text-center">
+  (tap anywhere to continue)
+</div>
diff --git a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
index 95062f39..9fe9cde6 100644
--- a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
@@ -125,7 +125,17 @@
 					</div>
 
 					<div class="flex my-auto">
-						{#if tx.with}
+						{#if tx.redeemcode}
+							<a href={`/voucher/${tx.redeemcode}`}>
+								<div class="mx-auto text-secondary flex">
+									<div class="w-20 my-auto">
+										<img src="/icons/logo-symbol.svg" />
+									</div>
+
+									<div class="my-auto">Voucher</div>
+								</div>
+							</a>
+						{:else if tx.with}
 							<a href={`/${tx.with.username}`} class="mx-auto">
 								<div class="flex">
 									<div class="my-auto">
@@ -134,18 +144,6 @@
 									<div class="my-auto ml-1 text-secondary">{tx.with.username}</div>
 								</div>
 							</a>
-						{:else if tx.redeemcode}
-              <a href={`/voucher/${tx.redeemcode}`}>
-							<div class="mx-auto text-secondary flex">
-								<div class="w-20 my-auto">
-									<img src="/icons/logo-symbol.svg" />
-								</div>
-
-								<div class="my-auto">
-									Voucher
-								</div>
-							</div>
-              </a>
 						{:else}
 							<div class="mx-auto text-secondary flex">
 								{#if tx.network === 'lightning'}
diff --git a/src/routes/(app)/invoice/[id]/paid/+page.svelte b/src/routes/(app)/invoice/[id]/paid/+page.svelte
index 5b7b9ada..8185602e 100644
--- a/src/routes/(app)/invoice/[id]/paid/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/paid/+page.svelte
@@ -59,3 +59,7 @@
 <a href={`/${user.username}/receive`}>
 	<div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50" />
 </a>
+
+<div class="fixed bottom-10 w-full text-center">
+  (tap anywhere to continue)
+</div>
diff --git a/src/routes/(app)/logout/+page.server.js b/src/routes/(app)/logout/+page.server.js
index 779b760f..2dabc9d4 100644
--- a/src/routes/(app)/logout/+page.server.js
+++ b/src/routes/(app)/logout/+page.server.js
@@ -8,5 +8,5 @@ const opts = {
 export async function load({ cookies }) {
 	cookies.set('username', '', opts);
 	cookies.set('token', '', opts);
-	throw redirect(307, '/');
+	throw redirect(307, '/login');
 }
diff --git a/src/routes/(app)/redeem/[redeemcode]/+page.svelte b/src/routes/(app)/redeem/[redeemcode]/+page.svelte
index 45b983be..b2fcf2f4 100644
--- a/src/routes/(app)/redeem/[redeemcode]/+page.svelte
+++ b/src/routes/(app)/redeem/[redeemcode]/+page.svelte
@@ -1 +1,4 @@
-hi
+<script>
+  import { loginRedirect } from "$lib/store";
+  $loginRedirect = undefined;
+</script>
diff --git a/src/routes/(app)/sent/+page.svelte b/src/routes/(app)/sent/+page.svelte
index c7c88383..ade4136b 100644
--- a/src/routes/(app)/sent/+page.svelte
+++ b/src/routes/(app)/sent/+page.svelte
@@ -31,3 +31,7 @@
 <a href={`/${user.username}/transactions`}>
 	<div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50" />
 </a>
+
+<div class="fixed bottom-10 w-full text-center">
+  (tap anywhere to continue)
+</div>
diff --git a/src/routes/(app)/voucher/[redeemcode]/+page.server.js b/src/routes/(app)/voucher/[redeemcode]/+page.server.js
index 2f9516de..00fa0b68 100644
--- a/src/routes/(app)/voucher/[redeemcode]/+page.server.js
+++ b/src/routes/(app)/voucher/[redeemcode]/+page.server.js
@@ -4,6 +4,7 @@ import Qr from 'qrcode-base64';
 
 export let load = async ({ params: { redeemcode }, url }) => {
 	let payment = await get(`/payment/${redeemcode}`);
+  console.log(payment)
 
 	let src = Qr.drawImg(url.href, { size: 300 });
 	return { payment, src };
diff --git a/src/routes/(app)/voucher/[redeemcode]/+page.svelte b/src/routes/(app)/voucher/[redeemcode]/+page.svelte
index cfc6c8a8..2efd5937 100644
--- a/src/routes/(app)/voucher/[redeemcode]/+page.svelte
+++ b/src/routes/(app)/voucher/[redeemcode]/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { enhance } from '$app/forms';
 	import { page } from '$app/stores';
-	import { Icon } from '$comp';
+	import { Avatar, Icon } from '$comp';
 	import { toast } from '@zerodevx/svelte-toast';
 	import { t } from '$lib/translations';
 	import { copy, f, s, sat, sats } from '$lib/utils';
@@ -9,7 +9,7 @@
 
 	export let data;
 	let { src } = data;
-	$: ({ amount, currency, rate, redeemed, redeemcode, user } = data.payment);
+	$: ({ amount, currency, rate, redeemed, redeemcode, user, redeemer } = data.payment);
 
 	toast.pop(0);
 
@@ -25,23 +25,39 @@
 
 	<div class="flex justify-center items-center text-center">
 		<div class="shadow-xl rounded-3xl px-10 pt-5 pb-10 space-y-5 w-full mx-5">
-			<h1 class="text-3xl md:text-4xl font-bold">Voucher</h1>
-
+      {#if !redeemed}
 			<img
 				{src}
 				class="w-[300px] mx-auto cursor-pointer"
 				on:click={() => copy(redeemcode)}
 				alt="Redeem Code"
 			/>
-			<div>
-				<h2 class="text-2xl md:text-3xl font-semibold">
-					{f(amountFiat, currency)}
-				</h2>
-				<h3 class="text-secondary md:text-lg mb-6 mt-1">
-					{sat(amount)}
-				</h3>
+      {/if}
+			<div class="flex justify-center gap-4">
+				<div class="my-auto">
+					<h2 class="text-2xl md:text-3xl font-semibold">
+						{f(amountFiat, currency)}
+					</h2>
+					<h3 class="text-secondary md:text-lg mt-1">
+						{sat(amount)}
+					</h3>
+				</div>
+        <div class="my-auto">from</div>
+				<div class="flex">
+					<Avatar {user} size={20} />
+					<div class="my-auto">{user.username}</div>
+				</div>
 			</div>
 			<div class="mx-auto my-auto flex gap-2 justify-center" data-sveltekit-prefetch="off">
+        {#if redeemed}
+          <div class="my-auto">
+          Redeemed by
+          </div>
+				<div class="flex">
+					<Avatar user={redeemer} size={20} />
+					<div class="my-auto">{redeemer.username}</div>
+				</div>
+        {:else}
 				<form
 					method="POST"
 					use:enhance
@@ -51,11 +67,12 @@
 						type="submit"
 						class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80"
 						class:bg-gray-200={redeemed}
-						disabled={redeemed || $loginRedirect}
+						disabled={$loginRedirect}
 					>
-						{redeemed ? 'Redeemed' : 'Redeem'}
+						{'Redeem'}
 					</button>
 				</form>
+        {/if}
 			</div>
 		</div>
 	</div>