invoice requests

4 files changed, 68 insertions, 6 deletions

diff --git a/src/components/Invoice.svelte b/src/components/Invoice.svelte
new file mode 100644
index 00000000..4b42f851
--- /dev/null
+++ b/src/components/Invoice.svelte
@@ -0,0 +1,34 @@
+<script>
+	import { fly } from 'svelte/transition';
+	import { Avatar, Icon } from '$comp';
+	import { invoice } from '$lib/store';
+
+	export let user;
+</script>
+
+{#if $invoice}
+	<div
+		class="flex flex-wrap md:flex-nowrap fixed bottom-0 border-t w-full p-4 bg-white z-50"
+		in:fly
+	>
+		<div class="my-auto md:w-1/2">
+			<div class="flex">
+				<Avatar user={$invoice.user.username} size={12} />
+				<h1 class="my-auto"><b>{$invoice.user.username}</b> sent an invoice</h1>
+			</div>
+		</div>
+		<div class="mx-auto my-auto">
+			<a href={`/invoice/${$invoice.uuid}`}>
+				<button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-full">
+					Pay
+				</button>
+			</a>
+		</div>
+		<button
+			class="absolute right-4 top-4 ml-auto mb-auto rounded-full border font-bold hover:opacity-80 p-3"
+			on:click={() => ($invoice = undefined)}
+		>
+			<Icon icon="close" />
+		</button>
+	</div>
+{/if}
diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte
index b4f2bbbb..de292f2a 100644
--- a/src/components/Numpad.svelte
+++ b/src/components/Numpad.svelte
@@ -8,7 +8,7 @@
 		currency,
 		fiat = !amount;
 
-  export let amountFiat = amount ? amount * ($selectedRate / sats) : 0;
+	export let amountFiat = amount ? amount * ($selectedRate / sats) : 0;
 
 	let amountSats = amount;
 	let loading = false;
diff --git a/src/components/Request.svelte b/src/components/Request.svelte
index ea314f13..2c87d436 100644
--- a/src/components/Request.svelte
+++ b/src/components/Request.svelte
@@ -1,10 +1,37 @@
 <script>
 	import { fly } from 'svelte/transition';
-	import { Avatar } from '$comp';
+	import { Avatar, Icon } from '$comp';
 	import { request } from '$lib/store';
+
+	export let user;
 </script>
 
-<div class="fixed bottom-0 h-24 border-t w-full bg-primary" in:fly>
-	<Avatar user={$request.requester} />
-	{$request.requester.username} is requesting an invoice
-</div>
+{#if $request}
+	<div
+		class="flex flex-wrap md:flex-nowrap fixed bottom-0 border-t w-full p-4 bg-white z-50"
+		in:fly
+	>
+		<div class="my-auto md:w-1/2">
+			<div class="flex">
+				<Avatar user={$request.requester} size={12} />
+				<h1 class="my-auto"><b>{$request.requester.username}</b> is ready to pay</h1>
+			</div>
+			{#if $request.memo}
+				<div class="border-l-4 pl-4 my-2">{$request.memo}</div>
+			{/if}
+		</div>
+		<div class="mx-auto my-auto">
+			<a href={`/${user.username}/receive`}>
+				<button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-full">
+					Create invoice
+				</button>
+			</a>
+		</div>
+		<button
+			class="absolute right-4 top-4 ml-auto mb-auto rounded-full border font-bold hover:opacity-80 p-3"
+			on:click={() => ($request = undefined)}
+		>
+			<Icon icon="close" />
+		</button>
+	</div>
+{/if}
diff --git a/src/components/index.js b/src/components/index.js
index f3d550ec..07b169bb 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,3 +1,4 @@
+export { default as Invoice } from './Invoice.svelte';
 export { default as Request } from './Request.svelte';
 export { default as Pin } from './Pin.svelte';
 export { default as Card } from './Card.svelte';