invoice requests

1 files changed, 32 insertions, 5 deletions

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}