From ccc13974d22a47995b5f9f674891a39d54aa0620 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Wed, 9 Nov 2022 09:53:33 -0800
Subject: refactor settings

---
 src/components/Pin.svelte                          |   3 +-
 src/lib/socket.js                                  |   7 +-
 src/routes/(app)/[username]/+page.svelte           |   6 +
 .../(app)/[username]/settings/+page.server.js      |  20 --
 src/routes/(app)/[username]/settings/+page.svelte  | 104 ---------
 .../[username]/settings/[...tab]/+page.server.js   |  26 +++
 .../[username]/settings/[...tab]/+page.svelte      | 109 +++++++++
 .../[username]/settings/[...tab]/_account.svelte   | 255 +++++++++++++++++++++
 .../(app)/[username]/settings/[...tab]/_pos.svelte |  18 ++
 .../[username]/settings/[...tab]/_security.svelte  | 224 ++++++++++++++++++
 .../(app)/[username]/settings/_account.svelte      | 255 ---------------------
 src/routes/(app)/[username]/settings/_pos.svelte   |  18 --
 .../(app)/[username]/settings/_security.svelte     | 223 ------------------
 src/routes/(app)/invoice/[id]/+layout.server.js    |  10 +-
 src/routes/(app)/invoice/[id]/+page.svelte         |  21 +-
 src/routes/(app)/invoice/[id]/paid/+page.svelte    |  68 +++---
 src/routes/(app)/invoice/[id]/pending/+page.svelte |  56 -----
 17 files changed, 701 insertions(+), 722 deletions(-)
 delete mode 100644 src/routes/(app)/[username]/settings/+page.server.js
 delete mode 100644 src/routes/(app)/[username]/settings/+page.svelte
 create mode 100644 src/routes/(app)/[username]/settings/[...tab]/+page.server.js
 create mode 100644 src/routes/(app)/[username]/settings/[...tab]/+page.svelte
 create mode 100644 src/routes/(app)/[username]/settings/[...tab]/_account.svelte
 create mode 100644 src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
 create mode 100644 src/routes/(app)/[username]/settings/[...tab]/_security.svelte
 delete mode 100644 src/routes/(app)/[username]/settings/_account.svelte
 delete mode 100644 src/routes/(app)/[username]/settings/_pos.svelte
 delete mode 100644 src/routes/(app)/[username]/settings/_security.svelte
 delete mode 100644 src/routes/(app)/invoice/[id]/pending/+page.svelte

(limited to 'src')

diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte
index 2a6bf977..80e003b9 100644
--- a/src/components/Pin.svelte
+++ b/src/components/Pin.svelte
@@ -1,5 +1,6 @@
 <script>
 	import { pin } from '$lib/store';
+
 	let pinCode = '';
 	let pinInput;
 
@@ -9,7 +10,7 @@
 <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-20">
 	<div class="relative top-1/3 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white space-y-5">
 		<h1 class="text-center text-2xl font-semibold">Please enter your PIN</h1>
-		<input bind:value={pinCode} />
+		<input bind:value={pinCode} autofocus />
 		<div class="w-full flex">
 			<button
 				type="submit"
diff --git a/src/lib/socket.js b/src/lib/socket.js
index 6678b979..9b4a8dce 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -36,11 +36,8 @@ export const messages = (data) => ({
 	async payment() {
 		let { amount, invoice } = data;
 
-		if (invoice) {
-			invoices.set({ ...get(invoices), [invoice.uuid]: invoice });
-		}
-
-		if (get(user).account_id !== data.account_id) return;
+    if (invoice) invalidate("app:invoice");
+		if (get(user)?.account_id !== data.account_id) return;
 
 		let payments = get(txns);
 		let i = payments.findIndex((p) => p.id === data.id);
diff --git a/src/routes/(app)/[username]/+page.svelte b/src/routes/(app)/[username]/+page.svelte
index 960cf897..8afb5280 100644
--- a/src/routes/(app)/[username]/+page.svelte
+++ b/src/routes/(app)/[username]/+page.svelte
@@ -59,6 +59,12 @@
 						>
 					</a>
 				{/if}
+
+				<a href={`/${subject.username}/address`}>
+					<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2">
+						Bitcoin address
+					</button>
+				</a>
 			</div>
 		{/if}
 	</div>
diff --git a/src/routes/(app)/[username]/settings/+page.server.js b/src/routes/(app)/[username]/settings/+page.server.js
deleted file mode 100644
index 482b70b1..00000000
--- a/src/routes/(app)/[username]/settings/+page.server.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { invalid } from '@sveltejs/kit';
-import { auth, get, post } from '$lib/utils';
-export const actions = {
-	default: async ({ cookies, locals, request }) => {
-		let form = Object.fromEntries(await request.formData());
-
-		let user = {
-			...locals.user,
-			...form
-		};
-
-		try {
-			await post(`/user`, user, auth(cookies));
-		} catch (e) {
-			return invalid(400, { message: e.message });
-		}
-
-		return { user, success: true };
-	}
-};
diff --git a/src/routes/(app)/[username]/settings/+page.svelte b/src/routes/(app)/[username]/settings/+page.svelte
deleted file mode 100644
index 250087c1..00000000
--- a/src/routes/(app)/[username]/settings/+page.svelte
+++ /dev/null
@@ -1,104 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-	import { fly } from 'svelte/transition';
-	import { enhance } from '$app/forms';
-	import Account from './_account.svelte';
-	import Pos from './_pos.svelte';
-	import Security from './_security.svelte';
-
-	import { Icon, Spinner, Pin } from '$comp';
-	import { t } from '$lib/translations';
-	import { failure, success } from '$lib/utils';
-	import { avatarUpload, bannerUpload, pin } from '$lib/store';
-	import { upload } from '$lib/upload';
-
-	export let data;
-	export let form;
-
-	let { user, token } = data;
-	$: update(data);
-	let update = () => ({ user, token } = data);
-
-	$: form?.user && ({ user } = form);
-
-	$: if (form?.message?.startsWith('Pin')) {
-		failure('Wrong pin, try again');
-		$pin = '';
-	}
-
-	let tab = 'account';
-
-	let tabs = [
-		{ name: 'account', key: 'ACCOUNT', comp: Account },
-		{ name: 'pos', key: 'POINT_OF_SALE', comp: Pos },
-		{ name: 'security', key: 'SECURITY', comp: Security }
-	];
-
-	$: ({ comp } = tabs.find((t) => t.name === tab));
-
-	let loading, submit;
-	let save = async (msg) => {
-		loading = true;
-
-		try {
-			if ($avatarUpload) {
-				await upload($avatarUpload.file, $avatarUpload.type, $avatarUpload.progress, token);
-			}
-
-			if ($bannerUpload) {
-				await upload($bannerUpload.file, $bannerUpload.type, $bannerUpload.progress, token);
-			}
-		} catch (e) {
-			console.log(e);
-			failure('Something went wrong');
-		}
-
-		loading = false;
-	};
-
-	let loaded;
-	onMount(() => setTimeout(() => (loaded = true), 50));
-</script>
-
-{#if loaded && user.haspin && $pin?.length !== 6}
-	<Pin />
-{/if}
-
-<form method="POST" class="mb-[154px]" use:enhance on:submit={save}>
-	<input type="hidden" name="pin" value={$pin} />
-
-	<div class="mt-24 mb-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
-		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
-			{$t('user.settings.header')}
-		</h1>
-
-		<div class="font-bold flex justify-between items-center border-b pb-3 text-secondary">
-			{#each tabs as { name, key }}
-				<button
-					class="hover:opacity-80"
-					class:text-black={tab === name}
-					on:click|preventDefault={() => (tab = name)}>{$t(`user.settings.${key}`)}</button
-				>
-			{/each}
-		</div>
-
-		<svelte:component this={comp} {user} {submit} />
-	</div>
-
-	<div
-		class="z-10 fixed bottom-0 bg-white shadow border-t w-full flex justify-center items-center py-3"
-	>
-		<button
-			bind:this={submit}
-			type="submit"
-			class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80"
-			class:bg-black={loading}
-		>
-			{#if loading}
-				<Spinner />
-			{:else}
-				<div class="my-auto">Save Settings</div>
-			{/if}
-		</button>
-	</div>
-</form>
diff --git a/src/routes/(app)/[username]/settings/[...tab]/+page.server.js b/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
new file mode 100644
index 00000000..a6fbd9bf
--- /dev/null
+++ b/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
@@ -0,0 +1,26 @@
+import { invalid, redirect } from '@sveltejs/kit';
+import { auth, get, post } from '$lib/utils';
+
+export function load({ params, url }) {
+	if (url.pathname.endsWith('settings')) throw redirect(307, url.pathname + '/account');
+	return params;
+}
+
+export const actions = {
+	default: async ({ cookies, locals, request }) => {
+		let form = Object.fromEntries(await request.formData());
+
+		let user = {
+			...locals.user,
+			...form
+		};
+
+		try {
+			await post(`/user`, user, auth(cookies));
+		} catch (e) {
+			return invalid(400, { message: e.message });
+		}
+
+		return { user, success: true };
+	}
+};
diff --git a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
new file mode 100644
index 00000000..20e1fd8f
--- /dev/null
+++ b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
@@ -0,0 +1,109 @@
+<script>
+  import { onMount } from 'svelte';
+  import { fly } from 'svelte/transition';
+  import { enhance } from '$app/forms';
+
+  import { Icon, Spinner, Pin } from '$comp';
+  import { t } from '$lib/translations';
+  import { failure, success } from '$lib/utils';
+  import { avatarUpload, bannerUpload, pin } from '$lib/store';
+  import { upload } from '$lib/upload';
+  import { page } from '$app/stores';
+
+  import Account from './_account.svelte';
+  import Pos from './_pos.svelte';
+  import Security from './_security.svelte';
+
+  export let data;
+  export let form;
+
+  let submit;
+
+  let { user, token, tab } = data;
+  console.log("TAB", tab)
+
+  $: update(data);
+  let update = () => ({ user, token } = data);
+
+  $: form?.user && ({ user } = form);
+
+  // $: if (form?.message?.startsWith('Pin')) {
+  // 	failure('Wrong pin, try again');
+  // 	$pin = '';
+  // }
+
+  let tabs = [
+    { name: 'account', key: 'ACCOUNT', comp: Account },
+    { name: 'pos', key: 'POINT_OF_SALE', comp: Pos },
+    { name: 'security', key: 'SECURITY', comp: Security }
+  ];
+
+  $: ({ comp } = tabs.find((t) => t.name === tab));
+
+  let loading;
+  let save = async (msg) => {
+    loading = true;
+
+    try {
+      if ($avatarUpload) {
+        await upload($avatarUpload.file, $avatarUpload.type, $avatarUpload.progress, token);
+      }
+
+      if ($bannerUpload) {
+        await upload($bannerUpload.file, $bannerUpload.type, $bannerUpload.progress, token);
+      }
+    } catch (e) {
+      console.log(e);
+      failure('Something went wrong');
+    }
+
+    loading = false;
+  };
+
+  let loaded;
+  onMount(() => setTimeout(() => (loaded = true), 50));
+</script>
+
+{#if loaded && user.haspin && $pin?.length !== 6}
+  <Pin />
+{/if}
+
+<form method="POST" class="mb-[154px]" use:enhance on:submit={save}>
+  <input type="hidden" name="pin" value={$pin} />
+
+  <div class="mt-24 mb-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
+    <h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
+      {$t('user.settings.header')}
+    </h1>
+
+    <div class="font-bold flex justify-between items-center border-b pb-3 text-secondary">
+      {#each tabs as { name, key }}
+        <a href={`/${user.username}/settings/${name}`}>
+          <button class="hover:opacity-80" class:text-black={tab === name}
+            >{$t(`user.settings.${key}`)}</button
+          >
+        </a>
+      {/each}
+    </div>
+
+    <svelte:component this={comp} {user} {submit} />
+  </div>
+
+  <div
+    class="z-10 fixed bottom-0 bg-white shadow border-t w-full flex justify-center items-center py-3"
+  >
+    <button
+      bind:this={submit}
+      type="submit"
+      class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80"
+      class:bg-black={loading}
+    >
+      {#if loading}
+        <Spinner />
+      {:else}
+        <div class="my-auto">Save Settings</div>
+      {/if}
+    </button>
+  </div>
+</form>
+
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
new file mode 100644
index 00000000..5d5f731f
--- /dev/null
+++ b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
@@ -0,0 +1,255 @@
+<script>
+	import { tick } from 'svelte';
+	import { colorTheme, tempProfileFiles, avatarUpload, bannerUpload } from '$lib/store';
+	import { Icon, Toggle, LocaleSelector } from '$comp';
+	import { t } from '$lib/translations';
+	import { upload } from '$lib/upload';
+
+  export let user;
+
+	let selectedTheme = 1;
+	let revealPassword = false;
+	let password;
+	let profileFile;
+	let select = (type) => files[type].el.click();
+
+	$: profile = files.profile.src;
+	$: banner = files.banner.src;
+	$: $tempProfileFiles = { profile: files.profile.src, banner: files.banner.src };
+
+	let togglePassword = () => (revealPassword = !revealPassword);
+	let colorThemes = [
+		{ theme: 1, color1: 'from-[#F5F7FA]', color2: 'to-[#C3CFE2]' },
+		{ theme: 2, color1: 'from-[#FDFCFB]', color2: 'to-[#E2D1C3]' },
+		{ theme: 3, color1: 'from-[#E6E9F0]', color2: 'to-[#EEF1F5]' },
+		{ theme: 4, color1: 'from-[#D5D4D0]', color2: 'to-[#EEEEEC]' },
+		{ theme: 5, color1: 'from-[#F3E7E9]', color2: 'to-[#E3EEFF]' },
+		{ theme: 6, color1: 'from-[#F5F7FA]', color2: 'via-[#EAF2FF] to-[#DEDFFF]' }
+	];
+
+	let handleThemeClick = (colors) => {
+		selectedTheme = colors.theme;
+		$colorTheme = colors.color1 + ' ' + colors.color2;
+	};
+
+	let percent;
+	let progress = async (event) => {
+		percent = Math.round((event.loaded / event.total) * 100);
+	};
+
+	let tooLarge = {};
+
+	let files = { profile: {}, banner: {} };
+	let handleFile = async ({ target }, type) => {
+		tooLarge[type] = false;
+		let file = target.files[0];
+		if (file.size > 10000000) return (tooLarge[type] = true);
+		var reader = new FileReader();
+		reader.onload = async (e) => {
+			files[type].src = e.target.result;
+		};
+		reader.readAsDataURL(file);
+
+		files[type].filename = file.name;
+		if (type === 'profile') {
+			$avatarUpload = { file, type, progress };
+		} else if (type === 'banner') {
+			$bannerUpload = { file, type, progress };
+		}
+	};
+
+	$: user.password = user.confirm = password;
+</script>
+
+<div>
+	<label for="language" class="font-bold block mb-1">{$t('user.settings.locale')}</label>
+	<LocaleSelector style="select-styles block py-3 w-full" />
+</div>
+
+<!-- TODO
+<div>
+	<label for="email" class="font-bold mb-1 block">{$t('user.settings.email')}</label>
+	<input type="email" name="email" bind:value={user.email} />
+</div> -->
+
+<!-- TODO fix breaking changes when user updates this field -->
+<div>
+	<label for="username" class="font-bold mb-1 block">{$t('user.settings.username')}</label>
+	<input disabled type="text" name="username" bind:value={user.username} />
+	<input type="hidden" name="username" bind:value={user.username} />
+</div>
+
+<div class="relative">
+	<label for="password" class="block font-bold block mb-1">{$t('user.settings.newPassword')}</label>
+	{#if revealPassword}
+		<input name="password" type="text" bind:value={password} />
+	{:else}
+		<input name="password" type="password" bind:value={password} />
+	{/if}
+	<button
+		type="button"
+		on:click={togglePassword}
+		on:keydown={togglePassword}
+		class="absolute right-5 top-11"
+	>
+		<Icon icon={revealPassword ? 'eye' : 'eye-off'} />
+	</button>
+</div>
+
+<div>
+	<label for="address" class="font-bold mb-1 block">{$t('user.settings.businessAddress')}</label>
+	<input type="text" name="address" bind:value={user.address} />
+</div>
+
+<!-- TODO -->
+<!-- <div> -->
+<!-- 	<div class="flex justify-between items-center"> -->
+<!-- 		<span class="font-bold">{$t('user.settings.emailNotifications')}</span> -->
+<!-- 		<Toggle id="email-notify" /> -->
+<!-- 	</div> -->
+<!-- 	<p class="text-secondary mt-1 w-9/12"> -->
+<!-- 		{$t('user.settings.emailNotificationsDescription')} -->
+<!-- 	</p> -->
+<!-- </div> -->
+<!--  -->
+<!-- <div> -->
+<!-- 	<div class="flex justify-between items-center"> -->
+<!-- 		<span class="font-bold">{$t('user.settings.smsNotifications')}</span> -->
+<!-- 		<Toggle id="sms-notify" /> -->
+<!-- 	</div> -->
+<!-- 	<p class="text-secondary mt-1 w-9/12"> -->
+<!-- 		{$t('user.settings.smsNotificationsDescription')} -->
+<!-- 	</p> -->
+<!-- </div> -->
+
+<div>
+	<span class="font-bold">{$t('user.settings.profileImage')}</span>
+
+	<div class="flex">
+		{#if profile}
+			<div
+				class="relative rounded-full overflow-hidden text-center w-20 h-20 my-auto hover:opacity-80 cursor-pointer"
+				on:click={() => select('profile')}
+				on:keydown={() => select('profile')}
+			>
+				<img
+					src={profile}
+					class="absolute w-full h-full object-cover object-center visible overflow-hidden"
+					alt={user.username}
+				/>
+			</div>
+		{:else if user.profile}
+			<div
+				class="relative rounded-full overflow-hidden text-center w-20 h-20 my-auto hover:opacity-80 cursor-pointer"
+				on:click={() => select('profile')}
+				on:keydown={() => select('profile')}
+			>
+				<img
+					src={`/api/public/${user.username}-profile.webp`}
+					class="absolute w-full h-full object-cover object-center visible overflow-hidden"
+					alt={user.username}
+				/>
+			</div>
+		{:else}
+			<div
+				class="rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 my-auto hover:opacity-80 cursor-pointer"
+				on:click={() => select('profile')}
+				on:keydown={() => select('profile')}
+			>
+				<Icon icon="logo-symbol-white" style="mx-auto" />
+			</div>
+		{/if}
+		<div class="ml-2 p-2">
+			<!-- found missing translation -->
+			<button
+				type="button"
+				class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80"
+				on:click={() => select('profile')}
+				on:keydown={() => select('profile')}>Select</button
+			>
+			<input
+				type="file"
+				class="hidden"
+				bind:this={files.profile.el}
+				on:change={(e) => handleFile(e, 'profile')}
+			/>
+			{#if files.profile.filename}
+				<div class="mt-2 text-sm">{files.profile.filename}</div>
+			{/if}
+		</div>
+	</div>
+
+	{#if tooLarge['profile']}
+		<div class="text-red-600">Max file size 10MB</div>
+	{/if}
+</div>
+
+<div>
+	<div class="flex justify-between items-center">
+		<span class="font-bold">{$t('user.settings.bannerImage')}</span>
+	</div>
+	<!-- found missing translation -->
+
+	{#if banner}
+		<img
+			src={banner}
+			class="w-full object-cover object-center visible overflow-hidden h-48 mb-4 hover:opacity-80"
+			on:click={() => select('banner')}
+			on:keydown={() => select('banner')}
+			alt="Banner"
+		/>
+	{:else if user.banner}
+		<img
+			src={`/api/public/${user.username}-banner.webp`}
+			class="w-full object-cover object-center visible overflow-hidden h-48 mb-4 hover:opacity-80"
+			on:click={() => select('banner')}
+			on:keydown={() => select('banner')}
+			alt="Banner"
+		/>
+	{:else}
+		<div
+			class="bg-gradient-to-r {$colorTheme} w-full h-48 mb-4 cursor-pointer hover:opacity-80"
+			on:click={() => select('banner')}
+			on:keydown={() => select('banner')}
+			alt="Banner"
+		/>
+	{/if}
+
+	<!-- found missing translation -->
+	<button
+		type="button"
+		class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80"
+		on:click={() => select('banner')}
+		on:keydown={() => select('banner')}>Select</button
+	>
+	<input
+		type="file"
+		class="hidden"
+		bind:this={files.banner.el}
+		on:change={(e) => handleFile(e, 'banner')}
+	/>
+	{#if files.banner.filename}
+		<div class="mt-2 text-sm">{files.banner.filename}</div>
+	{/if}
+
+	{#if tooLarge['banner']}
+		<div class="text-red-600">Max file size 10MB</div>
+	{/if}
+</div>
+
+<!-- TODO
+<div>
+	<span class="font-bold mb-1 block">{$t('user.settings.theme')}</span>
+	<p class="text-secondary mb-1">{$t('user.settings.themeDescription')}</p>
+	{#each colorThemes as colors}
+		<button
+			type="button"
+			class="hover:opacity-80 mr-2 w-10 h-10 bg-gradient-to-r {colors.color1} {colors.color2} rounded-xl border-2 {selectedTheme ===
+			colors.theme
+				? 'border-black'
+				: ''}"
+			on:click={() => handleThemeClick(colors)}
+			on:keydown={() => handleThemeClick(colors)}
+		/>
+	{/each}
+</div> -->
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
new file mode 100644
index 00000000..ccbeeff4
--- /dev/null
+++ b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
@@ -0,0 +1,18 @@
+<script>
+	import { Icon, Toggle } from '$comp';
+	import { t } from '$lib/translations';
+	import { success, failure } from '$lib/utils';
+	import { page } from '$app/stores';
+
+	let { rates, user } = $page.data;
+	const fiats = Object.keys(rates);
+</script>
+
+<div>
+	<label for="currency" class="font-bold block mb-1">{$t('user.settings.localCurrency')}</label>
+	<select name="currency" class="select-styles block py-3 w-full">
+		{#each fiats as fiat}
+			<option value={fiat} selected={user.currency === fiat}>{fiat}</option>
+		{/each}
+	</select>
+</div>
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_security.svelte b/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
new file mode 100644
index 00000000..0f45966d
--- /dev/null
+++ b/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
@@ -0,0 +1,224 @@
+<script>
+	import { tick } from 'svelte';
+	import { t } from '$lib/translations';
+	import { Icon, Qr } from '$comp';
+	import { Pincode, PincodeInput } from 'svelte-pincode';
+	import { post, success, failure } from '$lib/utils';
+	import { pin as current } from '$lib/store';
+	import { invalidate } from '$app/navigation';
+	import { page } from '$app/stores';
+
+  export let user, submit;
+	let settingPin, setting2fa, disabling2fa;
+
+	let token = '';
+	let pinCode = [];
+	let verifyCode = [];
+	let tokenInput, pinInput, verifyInput;
+	let verifying = false;
+	let old;
+
+	let startVerifying = () => {
+		verifying = true;
+	};
+
+	$: pin = pinCode.join('');
+
+	let otp;
+	$: pinChange($current);
+	let pinChange = async (pin) => {
+		// otp = await post('/otpsecret', { pin });
+	};
+
+	let locked;
+	$: verifyCode.join('').length > 5 && checkPin();
+	let checkPin = async () => {
+		old = $current;
+		if (locked) return;
+		locked = true;
+
+		let verify = verifyCode.join('');
+
+		pinCode = ['', '', '', '', '', ''];
+		verifyCode = ['', '', '', '', '', ''];
+		settingPin = false;
+
+		try {
+			if (pin.length > 5 && pin === verify) {
+				user.haspin = true;
+				$current = pin;
+				submit.click();
+			} else {
+				failure('Pin mismatch, try again');
+				settingPin = true;
+				pinInput.focusFirstInput();
+			}
+		} catch (e) {
+			failure('Problem setting PIN');
+		}
+
+		verifying = false;
+
+		await new Promise((r) => setTimeout(r, 500));
+		locked = false;
+	};
+
+	$: if (verifying) verifyInput && tick().then(verifyInput.focusFirstInput);
+	$: if (settingPin) pinInput && tick().then(pinInput.focusFirstInput);
+	$: if (setting2fa || disabling2fa) tokenInput && tick().then(tokenInput?.focusFirstInput);
+
+	let reset = () => {
+		token = '';
+		return true;
+	};
+
+	let togglePin = async () => {
+		if (user.haspin) {
+			try {
+				pin = null;
+				submit.click();
+			} catch (e) {
+        console.log(e)
+				failure('Failed to disable pin');
+			}
+		} else {
+			settingPin = true;
+		}
+	};
+
+	let toggleEnabling = () => reset() && (setting2fa = !setting2fa);
+	let toggleDisabling = () => reset() && (disabling2fa = !disabling2fa);
+
+	$: enable2fa(token);
+	let enable2fa = async (twoFa) => {
+		try {
+			if (setting2fa && token.length === 6) {
+				await post('/enable2fa', { token });
+				success('2FA enabled');
+				user.twofa = 1;
+				toggleEnabling();
+			}
+		} catch (e) {
+			failure('Failed to enable 2FA, try again');
+		}
+	};
+
+	$: disable2fa(token);
+	let disable2fa = async () => {
+		try {
+			if (disabling2fa && token.length === 6) {
+				await post('/disable2fa', { token });
+				success('2FA disabled');
+				user.twofa = 0;
+				toggleDisabling();
+			}
+		} catch (e) {
+			failure('Failed to disable 2FA, try again');
+		}
+	};
+</script>
+
+<div>
+	<input type="hidden" name="newpin" value={pin} />
+
+	<span class="font-bold mb-1">{verifying ? 'Verify' : 'Security'} PIN</span>
+	<p class="text-secondary mb-1">
+		{$t('user.settings.securityPINDescription')}
+	</p>
+	{#if settingPin}
+		<div class="flex my-4">
+			<div class="mx-auto">
+				<div class:hidden={verifying}>
+					<Pincode on:complete={startVerifying} bind:code={pinCode} bind:this={pinInput}>
+						<PincodeInput />
+						<PincodeInput />
+						<PincodeInput />
+						<PincodeInput />
+						<PincodeInput />
+						<PincodeInput />
+					</Pincode>
+				</div>
+				<div class:hidden={!verifying}>
+					<Pincode bind:code={verifyCode} bind:this={verifyInput}>
+						<PincodeInput />
+						<PincodeInput />
+						<PincodeInput />
+						<PincodeInput />
+						<PincodeInput />
+						<PincodeInput />
+					</Pincode>
+				</div>
+			</div>
+		</div>
+	{:else}
+		<button type="button" class="primary" on:click={togglePin}
+			><Icon icon="lock" style="mr-1" /> {user.haspin ? 'Disable Pin' : 'Enable Pin'}</button
+		>
+	{/if}
+</div>
+
+<!-- TODO
+<div>
+	<label for="auto-lock" class="font-bold mb-1">{$t('user.settings.autoLock')}</label>
+	<p class="text-secondary mb-1">
+		{$t('user.settings.autoLockDescription')}
+	</p>
+	<select name="auto-lock" class="select-styles block py-3 w-full">
+		<option value="5">5 min</option>
+		<option value="10">10 min</option>
+		<option value="30">30 min</option>
+		<option value="60">1 h</option>
+		<option value="480">8 h</option>
+	</select>
+</div> -->
+
+<div>
+	<span class="font-bold mb-1">{$t('user.settings.twofa')}</span>
+	<p class="text-secondary mb-4">
+		{$t('user.settings.twofaDescription')}
+	</p>
+	{#if setting2fa}
+		<a href={otp.uri}>
+			<Qr src={otp.qr} />
+		</a>
+
+		<div class="text-center my-4">
+			{$t('user.settings.accountId')}<br />
+			<b>{otp.secret}</b>
+		</div>
+
+		<div class="text-center my-4">
+			{$t('user.settings.oneTimeCode')}<br />
+			<Pincode bind:value={token} bind:this={tokenInput}>
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+			</Pincode>
+		</div>
+	{:else if disabling2fa}
+		<div class="text-center my-4">
+			{$t('user.settings.oneTimeCode')}<br />
+			<Pincode bind:value={token} bind:this={tokenInput}>
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+				<PincodeInput />
+			</Pincode>
+		</div>
+	{:else if user.twofa}
+		<button type="button" class="primary" on:click={toggleDisabling}>
+			<Icon icon="mobile" style="mr-1" />
+			{$t('user.settings.twofaDisable')}
+		</button>
+	{:else}
+		<button type="button" class="primary" on:click={toggleEnabling}>
+			<Icon icon="mobile" style="mr-1" />
+			{$t('user.settings.twofaSetup')}
+		</button>
+	{/if}
+</div>
diff --git a/src/routes/(app)/[username]/settings/_account.svelte b/src/routes/(app)/[username]/settings/_account.svelte
deleted file mode 100644
index e49205ca..00000000
--- a/src/routes/(app)/[username]/settings/_account.svelte
+++ /dev/null
@@ -1,255 +0,0 @@
-<script>
-	import { tick } from 'svelte';
-	import { colorTheme, tempProfileFiles, avatarUpload, bannerUpload } from '$lib/store';
-	import { Icon, Toggle, LocaleSelector } from '$comp';
-	import { t } from '$lib/translations';
-	import { upload } from '$lib/upload';
-
-	export let user;
-
-	let selectedTheme = 1;
-	let revealPassword = false;
-	let password;
-	let profileFile;
-	let select = (type) => files[type].el.click();
-
-	$: profile = files.profile.src;
-	$: banner = files.banner.src;
-	$: $tempProfileFiles = { profile: files.profile.src, banner: files.banner.src };
-
-	let togglePassword = () => (revealPassword = !revealPassword);
-	let colorThemes = [
-		{ theme: 1, color1: 'from-[#F5F7FA]', color2: 'to-[#C3CFE2]' },
-		{ theme: 2, color1: 'from-[#FDFCFB]', color2: 'to-[#E2D1C3]' },
-		{ theme: 3, color1: 'from-[#E6E9F0]', color2: 'to-[#EEF1F5]' },
-		{ theme: 4, color1: 'from-[#D5D4D0]', color2: 'to-[#EEEEEC]' },
-		{ theme: 5, color1: 'from-[#F3E7E9]', color2: 'to-[#E3EEFF]' },
-		{ theme: 6, color1: 'from-[#F5F7FA]', color2: 'via-[#EAF2FF] to-[#DEDFFF]' }
-	];
-
-	let handleThemeClick = (colors) => {
-		selectedTheme = colors.theme;
-		$colorTheme = colors.color1 + ' ' + colors.color2;
-	};
-
-	let percent;
-	let progress = async (event) => {
-		percent = Math.round((event.loaded / event.total) * 100);
-	};
-
-	let tooLarge = {};
-
-	let files = { profile: {}, banner: {} };
-	let handleFile = async ({ target }, type) => {
-		tooLarge[type] = false;
-		let file = target.files[0];
-		if (file.size > 10000000) return (tooLarge[type] = true);
-		var reader = new FileReader();
-		reader.onload = async (e) => {
-			files[type].src = e.target.result;
-		};
-		reader.readAsDataURL(file);
-
-		files[type].filename = file.name;
-		if (type === 'profile') {
-			$avatarUpload = { file, type, progress };
-		} else if (type === 'banner') {
-			$bannerUpload = { file, type, progress };
-		}
-	};
-
-	$: user.password = user.confirm = password;
-</script>
-
-<div>
-	<label for="language" class="font-bold block mb-1">{$t('user.settings.locale')}</label>
-	<LocaleSelector style="select-styles block py-3 w-full" />
-</div>
-
-<!-- TODO
-<div>
-	<label for="email" class="font-bold mb-1 block">{$t('user.settings.email')}</label>
-	<input type="email" name="email" bind:value={user.email} />
-</div> -->
-
-<!-- TODO fix breaking changes when user updates this field -->
-<div>
-	<label for="username" class="font-bold mb-1 block">{$t('user.settings.username')}</label>
-	<input disabled type="text" name="username" bind:value={user.username} />
-	<input type="hidden" name="username" bind:value={user.username} />
-</div>
-
-<div class="relative">
-	<label for="password" class="block font-bold block mb-1">{$t('user.settings.newPassword')}</label>
-	{#if revealPassword}
-		<input name="password" type="text" bind:value={password} />
-	{:else}
-		<input name="password" type="password" bind:value={password} />
-	{/if}
-	<button
-		type="button"
-		on:click={togglePassword}
-		on:keydown={togglePassword}
-		class="absolute right-5 top-11"
-	>
-		<Icon icon={revealPassword ? 'eye' : 'eye-off'} />
-	</button>
-</div>
-
-<div>
-	<label for="address" class="font-bold mb-1 block">{$t('user.settings.businessAddress')}</label>
-	<input type="text" name="address" bind:value={user.address} />
-</div>
-
-<!-- TODO -->
-<!-- <div> -->
-<!-- 	<div class="flex justify-between items-center"> -->
-<!-- 		<span class="font-bold">{$t('user.settings.emailNotifications')}</span> -->
-<!-- 		<Toggle id="email-notify" /> -->
-<!-- 	</div> -->
-<!-- 	<p class="text-secondary mt-1 w-9/12"> -->
-<!-- 		{$t('user.settings.emailNotificationsDescription')} -->
-<!-- 	</p> -->
-<!-- </div> -->
-<!--  -->
-<!-- <div> -->
-<!-- 	<div class="flex justify-between items-center"> -->
-<!-- 		<span class="font-bold">{$t('user.settings.smsNotifications')}</span> -->
-<!-- 		<Toggle id="sms-notify" /> -->
-<!-- 	</div> -->
-<!-- 	<p class="text-secondary mt-1 w-9/12"> -->
-<!-- 		{$t('user.settings.smsNotificationsDescription')} -->
-<!-- 	</p> -->
-<!-- </div> -->
-
-<div>
-	<span class="font-bold">{$t('user.settings.profileImage')}</span>
-
-	<div class="flex">
-		{#if profile}
-			<div
-				class="relative rounded-full overflow-hidden text-center w-20 h-20 my-auto hover:opacity-80 cursor-pointer"
-				on:click={() => select('profile')}
-				on:keydown={() => select('profile')}
-			>
-				<img
-					src={profile}
-					class="absolute w-full h-full object-cover object-center visible overflow-hidden"
-					alt={user.username}
-				/>
-			</div>
-		{:else if user.profile}
-			<div
-				class="relative rounded-full overflow-hidden text-center w-20 h-20 my-auto hover:opacity-80 cursor-pointer"
-				on:click={() => select('profile')}
-				on:keydown={() => select('profile')}
-			>
-				<img
-					src={`/api/public/${user.username}-profile.webp`}
-					class="absolute w-full h-full object-cover object-center visible overflow-hidden"
-					alt={user.username}
-				/>
-			</div>
-		{:else}
-			<div
-				class="rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 my-auto hover:opacity-80 cursor-pointer"
-				on:click={() => select('profile')}
-				on:keydown={() => select('profile')}
-			>
-				<Icon icon="logo-symbol-white" style="mx-auto" />
-			</div>
-		{/if}
-		<div class="ml-2 p-2">
-			<!-- found missing translation -->
-			<button
-				type="button"
-				class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80"
-				on:click={() => select('profile')}
-				on:keydown={() => select('profile')}>Select</button
-			>
-			<input
-				type="file"
-				class="hidden"
-				bind:this={files.profile.el}
-				on:change={(e) => handleFile(e, 'profile')}
-			/>
-			{#if files.profile.filename}
-				<div class="mt-2 text-sm">{files.profile.filename}</div>
-			{/if}
-		</div>
-	</div>
-
-	{#if tooLarge['profile']}
-		<div class="text-red-600">Max file size 10MB</div>
-	{/if}
-</div>
-
-<div>
-	<div class="flex justify-between items-center">
-		<span class="font-bold">{$t('user.settings.bannerImage')}</span>
-	</div>
-	<!-- found missing translation -->
-
-	{#if banner}
-		<img
-			src={banner}
-			class="w-full object-cover object-center visible overflow-hidden h-48 mb-4 hover:opacity-80"
-			on:click={() => select('banner')}
-			on:keydown={() => select('banner')}
-			alt="Banner"
-		/>
-	{:else if user.banner}
-		<img
-			src={`/api/public/${user.username}-banner.webp`}
-			class="w-full object-cover object-center visible overflow-hidden h-48 mb-4 hover:opacity-80"
-			on:click={() => select('banner')}
-			on:keydown={() => select('banner')}
-			alt="Banner"
-		/>
-	{:else}
-		<div
-			class="bg-gradient-to-r {$colorTheme} w-full h-48 mb-4 cursor-pointer hover:opacity-80"
-			on:click={() => select('banner')}
-			on:keydown={() => select('banner')}
-			alt="Banner"
-		/>
-	{/if}
-
-	<!-- found missing translation -->
-	<button
-		type="button"
-		class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80"
-		on:click={() => select('banner')}
-		on:keydown={() => select('banner')}>Select</button
-	>
-	<input
-		type="file"
-		class="hidden"
-		bind:this={files.banner.el}
-		on:change={(e) => handleFile(e, 'banner')}
-	/>
-	{#if files.banner.filename}
-		<div class="mt-2 text-sm">{files.banner.filename}</div>
-	{/if}
-
-	{#if tooLarge['banner']}
-		<div class="text-red-600">Max file size 10MB</div>
-	{/if}
-</div>
-
-<!-- TODO
-<div>
-	<span class="font-bold mb-1 block">{$t('user.settings.theme')}</span>
-	<p class="text-secondary mb-1">{$t('user.settings.themeDescription')}</p>
-	{#each colorThemes as colors}
-		<button
-			type="button"
-			class="hover:opacity-80 mr-2 w-10 h-10 bg-gradient-to-r {colors.color1} {colors.color2} rounded-xl border-2 {selectedTheme ===
-			colors.theme
-				? 'border-black'
-				: ''}"
-			on:click={() => handleThemeClick(colors)}
-			on:keydown={() => handleThemeClick(colors)}
-		/>
-	{/each}
-</div> -->
diff --git a/src/routes/(app)/[username]/settings/_pos.svelte b/src/routes/(app)/[username]/settings/_pos.svelte
deleted file mode 100644
index ccbeeff4..00000000
--- a/src/routes/(app)/[username]/settings/_pos.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-	import { Icon, Toggle } from '$comp';
-	import { t } from '$lib/translations';
-	import { success, failure } from '$lib/utils';
-	import { page } from '$app/stores';
-
-	let { rates, user } = $page.data;
-	const fiats = Object.keys(rates);
-</script>
-
-<div>
-	<label for="currency" class="font-bold block mb-1">{$t('user.settings.localCurrency')}</label>
-	<select name="currency" class="select-styles block py-3 w-full">
-		{#each fiats as fiat}
-			<option value={fiat} selected={user.currency === fiat}>{fiat}</option>
-		{/each}
-	</select>
-</div>
diff --git a/src/routes/(app)/[username]/settings/_security.svelte b/src/routes/(app)/[username]/settings/_security.svelte
deleted file mode 100644
index 4bdb00d4..00000000
--- a/src/routes/(app)/[username]/settings/_security.svelte
+++ /dev/null
@@ -1,223 +0,0 @@
-<script>
-	import { tick } from 'svelte';
-	import { t } from '$lib/translations';
-	import { Icon, Qr } from '$comp';
-	import { Pincode, PincodeInput } from 'svelte-pincode';
-	import { post, success, failure } from '$lib/utils';
-	import { pin as current } from '$lib/store';
-	import { invalidate } from '$app/navigation';
-	import { page } from '$app/stores';
-
-	export let user, submit;
-	let settingPin, setting2fa, disabling2fa;
-
-	let token = '';
-	let pinCode = [];
-	let verifyCode = [];
-	let tokenInput, pinInput, verifyInput;
-	let verifying = false;
-	let old;
-
-	let startVerifying = () => {
-		verifying = true;
-	};
-
-	$: pin = pinCode.join('');
-
-	let otp;
-	$: pinChange($current);
-	let pinChange = async (pin) => {
-		otp = await post('/otpsecret', { pin });
-	};
-
-	let locked;
-	$: verifyCode.join('').length > 5 && checkPin();
-	let checkPin = async () => {
-		old = $current;
-		if (locked) return;
-		locked = true;
-
-		let verify = verifyCode.join('');
-
-		pinCode = ['', '', '', '', '', ''];
-		verifyCode = ['', '', '', '', '', ''];
-		settingPin = false;
-
-		try {
-			if (pin.length > 5 && pin === verify) {
-				user.haspin = true;
-				$current = pin;
-				submit.click();
-			} else {
-				failure('Pin mismatch, try again');
-				settingPin = true;
-				pinInput.focusFirstInput();
-			}
-		} catch (e) {
-			failure('Problem setting PIN');
-		}
-
-		verifying = false;
-
-		await new Promise((r) => setTimeout(r, 500));
-		locked = false;
-	};
-
-	$: if (verifying) verifyInput && tick().then(verifyInput.focusFirstInput);
-	$: if (settingPin) pinInput && tick().then(pinInput.focusFirstInput);
-	$: if (setting2fa || disabling2fa) tokenInput && tick().then(tokenInput?.focusFirstInput);
-
-	let reset = () => {
-		token = '';
-		return true;
-	};
-
-	let togglePin = async () => {
-		if (user.haspin) {
-			try {
-				pin = null;
-				submit.click();
-			} catch (e) {
-				failure('Failed to disable pin');
-			}
-		} else {
-			settingPin = true;
-		}
-	};
-
-	let toggleEnabling = () => reset() && (setting2fa = !setting2fa);
-	let toggleDisabling = () => reset() && (disabling2fa = !disabling2fa);
-
-	$: enable2fa(token);
-	let enable2fa = async (twoFa) => {
-		try {
-			if (setting2fa && token.length === 6) {
-				await post('/enable2fa', { token });
-				success('2FA enabled');
-				user.twofa = 1;
-				toggleEnabling();
-			}
-		} catch (e) {
-			failure('Failed to enable 2FA, try again');
-		}
-	};
-
-	$: disable2fa(token);
-	let disable2fa = async () => {
-		try {
-			if (disabling2fa && token.length === 6) {
-				await post('/disable2fa', { token });
-				success('2FA disabled');
-				user.twofa = 0;
-				toggleDisabling();
-			}
-		} catch (e) {
-			failure('Failed to disable 2FA, try again');
-		}
-	};
-</script>
-
-<div>
-	<input type="hidden" name="newpin" value={pin} />
-
-	<span class="font-bold mb-1">{verifying ? 'Verify' : 'Security'} PIN</span>
-	<p class="text-secondary mb-1">
-		{$t('user.settings.securityPINDescription')}
-	</p>
-	{#if settingPin}
-		<div class="flex my-4">
-			<div class="mx-auto">
-				<div class:hidden={verifying}>
-					<Pincode on:complete={startVerifying} bind:code={pinCode} bind:this={pinInput}>
-						<PincodeInput />
-						<PincodeInput />
-						<PincodeInput />
-						<PincodeInput />
-						<PincodeInput />
-						<PincodeInput />
-					</Pincode>
-				</div>
-				<div class:hidden={!verifying}>
-					<Pincode bind:code={verifyCode} bind:this={verifyInput}>
-						<PincodeInput />
-						<PincodeInput />
-						<PincodeInput />
-						<PincodeInput />
-						<PincodeInput />
-						<PincodeInput />
-					</Pincode>
-				</div>
-			</div>
-		</div>
-	{:else}
-		<button type="button" class="primary" on:click={togglePin}
-			><Icon icon="lock" style="mr-1" /> {user.haspin ? 'Disable Pin' : 'Enable Pin'}</button
-		>
-	{/if}
-</div>
-
-<!-- TODO
-<div>
-	<label for="auto-lock" class="font-bold mb-1">{$t('user.settings.autoLock')}</label>
-	<p class="text-secondary mb-1">
-		{$t('user.settings.autoLockDescription')}
-	</p>
-	<select name="auto-lock" class="select-styles block py-3 w-full">
-		<option value="5">5 min</option>
-		<option value="10">10 min</option>
-		<option value="30">30 min</option>
-		<option value="60">1 h</option>
-		<option value="480">8 h</option>
-	</select>
-</div> -->
-
-<div>
-	<span class="font-bold mb-1">{$t('user.settings.twofa')}</span>
-	<p class="text-secondary mb-4">
-		{$t('user.settings.twofaDescription')}
-	</p>
-	{#if setting2fa}
-		<a href={otp.uri}>
-			<Qr src={otp.qr} />
-		</a>
-
-		<div class="text-center my-4">
-			{$t('user.settings.accountId')}<br />
-			<b>{otp.secret}</b>
-		</div>
-
-		<div class="text-center my-4">
-			{$t('user.settings.oneTimeCode')}<br />
-			<Pincode bind:value={token} bind:this={tokenInput}>
-				<PincodeInput />
-				<PincodeInput />
-				<PincodeInput />
-				<PincodeInput />
-				<PincodeInput />
-				<PincodeInput />
-			</Pincode>
-		</div>
-	{:else if disabling2fa}
-		<div class="text-center my-4">
-			{$t('user.settings.oneTimeCode')}<br />
-			<Pincode bind:value={token} bind:this={tokenInput}>
-				<PincodeInput />
-				<PincodeInput />
-				<PincodeInput />
-				<PincodeInput />
-				<PincodeInput />
-				<PincodeInput />
-			</Pincode>
-		</div>
-	{:else if user.twofa}
-		<button type="button" class="primary" on:click={toggleDisabling}>
-			<Icon icon="mobile" style="mr-1" />
-			{$t('user.settings.twofaDisable')}
-		</button>
-	{:else}
-		<button type="button" class="primary" on:click={toggleEnabling}>
-			<Icon icon="mobile" style="mr-1" />
-			{$t('user.settings.twofaSetup')}
-		</button>
-	{/if}
-</div>
diff --git a/src/routes/(app)/invoice/[id]/+layout.server.js b/src/routes/(app)/invoice/[id]/+layout.server.js
index 4b6cf97e..dacc44e6 100644
--- a/src/routes/(app)/invoice/[id]/+layout.server.js
+++ b/src/routes/(app)/invoice/[id]/+layout.server.js
@@ -1,9 +1,17 @@
 import Qr from 'qrcode-base64';
 import { get } from '$lib/utils';
+import { redirect } from '@sveltejs/kit';
+
+export async function load({ depends, params, url }) {
+	depends('app:invoice');
 
-export async function load({ params }) {
 	let { id } = params;
 	let invoice = await get(`/invoice?uuid=${id}`);
+	let { amount, received, pending } = invoice;
+
+	let paid = (!amount && (received || pending)) || (amount > 0 && received + pending >= amount);
+	if (paid && !url.pathname.endsWith('paid')) throw redirect(307, `/invoice/${id}/paid`);
+
 	let sm = Qr.drawImg(invoice.text, { size: 300 });
 	let lg = Qr.drawImg(invoice.text, { size: 1200 });
 
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index dec33b62..fadf7270 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { send } from '$lib/socket';
 	import { back, copy, f, get, sat, reverseFormat, s, sats } from '$lib/utils';
-	import { onMount, onDestroy } from 'svelte';
+	import { tick, onMount, onDestroy } from 'svelte';
 	import { browser } from '$app/environment';
 	import { invoices, last } from '$lib/store';
 	import { Avatar, Icon, Heart, Image, Qr } from '$comp';
@@ -11,8 +11,6 @@
 
 	export let data;
 
-	let showQr;
-
 	$: refresh(data);
 	let { invoice, id, user, sm, lg } = data;
 	let {
@@ -27,6 +25,8 @@
 		user: { username, currency }
 	} = invoice;
 
+	let showQr = !amount;
+
 	let src = sm;
 
 	let qr;
@@ -49,14 +49,6 @@
 		tipPercent = (tip / amount) * 100;
 	};
 
-	$invoices[id] = { amount, id, rate, received, text, tip, username };
-	$: browser &&
-		$invoices[id].amount > 0 &&
-		$invoices[id]?.received >= $invoices[id]?.amount &&
-		goto(($invoices[id].memo === 'launch' && '/launch/purchase') || `/invoice/${id}/paid`);
-
-	$: browser && $invoices[id].pending > 0 && goto(`/invoice/${id}/pending`);
-
 	$: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
 	$: tipAmount = ((tip * rate) / sats).toFixed(2);
 
@@ -66,6 +58,7 @@
 			last.subscribe((v) => {
 				if (!v || subbed) return;
 				subbed = true;
+				console.log('SUBBING', invoice.uuid);
 				send('subscribe', invoice);
 			});
 	});
@@ -88,7 +81,7 @@
 <div class="container mx-auto max-w-lg px-4 space-y-5">
 	<div class="w-full flex">
 		<h1 class="text-secondary block text-2xl flex mx-auto">
-			<div class="my-auto">Pay</div>
+			<div class="my-auto">Send to</div>
 
 			<div>
 				<a href="/{username}" class="text-black font-semibold hover:opacity-80 mx-auto">
@@ -107,6 +100,10 @@
 				<img {src} class:p-4={full} class="w-[300px] mx-auto" bind:this={qr} on:click={toggle} />
 			</div>
 
+			{#if address}
+				<div>{address}</div>
+			{/if}
+
 			<div class="mb-10 flex gap-2 justify-center">
 				<button
 					class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80 mb-2"
diff --git a/src/routes/(app)/invoice/[id]/paid/+page.svelte b/src/routes/(app)/invoice/[id]/paid/+page.svelte
index 4f0a8ed1..60bc4592 100644
--- a/src/routes/(app)/invoice/[id]/paid/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/paid/+page.svelte
@@ -9,41 +9,55 @@
 	import { invoices } from '$lib/store';
 
 	export let data;
-	let { invoice } = data;
-	let { amount, currency, rate, tip } = invoice;
+	let amount, currency, rate, received, pending, tip, user, uuid;
+	$: data && ({ amount, currency, rate, received, pending, tip, user, uuid } = data.invoice);
 
 	toast.pop(0);
 
-	$: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
+	$: amountFiat = parseFloat(((received * rate) / sats).toFixed(2));
+	$: pendingFiat = parseFloat(((pending * rate) / sats).toFixed(2));
 	$: tipFiat = parseFloat(((tip * rate) / sats).toFixed(2));
-
-	const handleDoneClick = () => {
-		delete $invoices[invoice.uuid];
-		goto(`/${invoice.user.username}/receive`);
-	};
 </script>
 
 <div class="container px-4 text-center mx-auto">
 	<div class="flex w-full py-20 max-w-[200px] mx-auto" in:scale={{ start: 0.5 }}>
 		<Icon icon="check" style="mx-auto" />
 	</div>
-	<h1 class="text-3xl md:text-4xl font-bold mb-6">{$t('invoice.paymentSuccessful')}</h1>
-	<h2 class="text-2xl md:text-3xl font-semibold">
-		{f(amountFiat, currency)}
-		{#if tip}
-			+ {f(tipFiat, currency)}
-		{/if}
-	</h2>
-	<h3 class="text-secondary md:text-lg mb-6 mt-1">
-		{sat(amount)}
-		{#if tip}
-			+{sat(tip)}
-		{/if}
-	</h3>
-	<button
-		class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80"
-		on:click={handleDoneClick}
-	>
-		{$t('invoice.done')}
-	</button>
+	{#if received}
+		<h1 class="text-3xl md:text-4xl font-bold mb-6">{$t('invoice.paymentSuccessful')}</h1>
+		<h2 class="text-2xl md:text-3xl font-semibold">
+			{f(amountFiat, currency)}
+			{#if tip}
+				+ {f(tipFiat, currency)}
+			{/if}
+		</h2>
+		<h3 class="text-secondary md:text-lg mb-6 mt-1">
+			{sat(received)}
+			{#if tip}
+				+{sat(tip)}
+			{/if}
+		</h3>
+	{/if}
+
+	{#if pending}
+		<h1 class="text-3xl md:text-4xl font-bold mb-6">Payment detected</h1>
+		<h2 class="text-2xl md:text-3xl font-semibold">
+			{f(pendingFiat, currency)}
+			{#if tip}
+				+ {f(tipFiat, currency)}
+			{/if}
+		</h2>
+		<h3 class="text-secondary md:text-lg mb-6 mt-1">
+			{sat(pending)}
+			{#if tip}
+				+{sat(tip)}
+			{/if}
+		</h3>
+	{/if}
+
+	<a href={`/${user.username}/receive`}>
+		<button class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80">
+			{$t('invoice.done')}
+		</button>
+	</a>
 </div>
diff --git a/src/routes/(app)/invoice/[id]/pending/+page.svelte b/src/routes/(app)/invoice/[id]/pending/+page.svelte
deleted file mode 100644
index d3970dab..00000000
--- a/src/routes/(app)/invoice/[id]/pending/+page.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<script>
-	import { scale } from 'svelte/transition';
-	import { Icon } from '$comp';
-	import { toast } from '@zerodevx/svelte-toast';
-	import { browser } from '$app/environment';
-	import { t } from '$lib/translations';
-	import { f, s, sat, sats } from '$lib/utils';
-	import { goto } from '$app/navigation';
-	import { invoices } from '$lib/store';
-
-	export let data;
-	let { invoice } = data;
-	let { pending, currency, rate, tip } = invoice;
-
-	toast.pop(0);
-
-	$: pendingFiat = parseFloat(((pending * rate) / sats).toFixed(2));
-	$: tipFiat = parseFloat(((tip * rate) / sats).toFixed(2));
-
-	const handleDoneClick = () => {
-		delete $invoices[invoice.uuid];
-		goto(`/${invoice.user.username}/receive`);
-	};
-</script>
-
-<div class="container px-4 text-center mx-auto space-y-5">
-	<div class="flex w-full py-20 max-w-[200px] mx-auto" in:scale={{ start: 0.5 }}>
-		<Icon icon="check" style="mx-auto" />
-	</div>
-
-	<h1 class="text-3xl md:text-4xl font-bold">Payment detected</h1>
-
-	<div>
-		<h2 class="text-2xl md:text-3xl font-semibold">
-			{f(pendingFiat, currency)}
-			{#if tip}
-				+ {f(tipFiat, currency)}
-			{/if}
-		</h2>
-		<h3 class="text-secondary md:text-lg mt-1">
-			{sat(pending)}
-			{#if tip}
-				+{sat(tip)}
-			{/if}
-		</h3>
-	</div>
-
-	<p class="text-xl text-red-600">Pending confirmation</p>
-
-	<button
-		class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80"
-		on:click={handleDoneClick}
-	>
-		{$t('invoice.done')}
-	</button>
-</div>
-- 
cgit v1.2.3