update invoice paid status

4 files changed, 15 insertions, 10 deletions

diff --git a/src/lib/socket.js b/src/lib/socket.js
index 4898f481..66091d76 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -1,5 +1,5 @@
 import { get } from 'svelte/store';
-import { rate, user, token, invoicePaid, preferredCurrency } from '$lib/store';
+import { rate, user, token, invoices, preferredCurrency } from '$lib/store';
 
 let interval, socket;
 
@@ -18,7 +18,7 @@ export const messages = (data) => ({
 	},
 
 	payment() {
-		invoicePaid.set(true);
+		invoices.set({ ...get(invoices), [data.invoice.uuid]: data.invoice });
 	},
 
 	connected: auth,
diff --git a/src/lib/store.js b/src/lib/store.js
index f910dfa6..b20fd10f 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -18,5 +18,5 @@ export const user = writable();
 export const invoiceAmount = writable();
 export const invoiceAmountFiat = writable();
 export const token = persisted('token');
-export const invoicePaid = writable();
+export const invoices = writable({});
 export const preferredCurrency = writable();
diff --git a/src/routes/invoice/[id].js b/src/routes/invoice/[id].js
index bba1693c..a58d02a1 100644
--- a/src/routes/invoice/[id].js
+++ b/src/routes/invoice/[id].js
@@ -5,9 +5,10 @@ export async function GET({ params }) {
 	let {
 		amount,
 		rate,
+		status,
 		text,
 		user: { username }
 	} = await get(`/invoice?uuid=${id}`);
 
-	return { body: { amount, rate, username, text } };
+	return { body: { amount, id, rate, username, status, text } };
 }
diff --git a/src/routes/invoice/[id].svelte b/src/routes/invoice/[id].svelte
index b302d12d..17c7de1f 100644
--- a/src/routes/invoice/[id].svelte
+++ b/src/routes/invoice/[id].svelte
@@ -2,15 +2,15 @@
 	import { toast } from '@zerodevx/svelte-toast';
 	import { get, post, reverseFormat } from '$lib/utils';
 	import { browser } from '$app/env';
-	import { user, invoicePaid, preferredCurrency } from '$lib/store';
+	import { invoices, user, preferredCurrency } from '$lib/store';
 	import { Icon, Image } from '$comp';
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
 	import { copy } from '$lib/utils';
 
-	export let amount, rate, text, username;
+	export let amount, id, rate, status, text, username;
 
-	console.log($user);
+	$invoices[id] = { amount, id, rate, status, text, username };
 
 	$: amountFiat = parseFloat(((amount * rate) / 100000000).toFixed(2));
 
@@ -133,16 +133,20 @@
 
 	const handleDoneClick = () => {
 		if ($user) {
-			goto(`/${user.username}/receive`);
+			goto(`/${$user.username}/receive`);
 		} else {
 			goto('/');
 		}
 	};
 </script>
 
-{#if $user && !invoicePaid}
+{#if $invoices[id]?.status !== 'paid'}
 	<div class:full-shadow={showMobileTip}>
-		<button class="ml-5 md:ml-20 mt-5 md:mt-10" on:click={handleBackButton}>
+		<button
+			class="ml-5 md:ml-20 mt-5 md:mt-10"
+			class:invisible={!$user}
+			on:click={handleBackButton}
+		>
 			<Icon icon="arrow-left" style="w-10" />
 		</button>