print button

4 files changed, 120 insertions, 13 deletions

diff --git a/src/locales/en.json b/src/locales/en.json
index 7dd7c258..1ec8cced 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -312,6 +312,7 @@
 		"redeemed": "Redeemed",
 		"redeemedBy": "Redeemed by",
 		"sendMessage": "Write a message...",
-    "fundsClaimed": "Funds claimed!"
+    "fundsClaimed": "Funds claimed!",
+    "print": "Print"
 	}
 }
diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index 12bb1c2d..38b91658 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -18,11 +18,16 @@
 	};
 
 	fee = fee || 0;
+
+  let direction = amount > 0 ? $t('payments.from') : $t('payments.to')
+  direction = direction[0].toUpperCase() + direction.substr(1, direction.length);
 </script>
 
-<button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
-	<Icon icon="arrow-left" style="w-10" />
-</button>
+<a href={`/${username}/payments`}>
+	<button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80">
+		<Icon icon="arrow-left" style="w-10" />
+	</button>
+</a>
 
 <div class="container mx-auto max-w-lg px-4 space-y-8 break-all text-2xl">
 	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
@@ -31,7 +36,7 @@
 
 	{#if p.with}
 		<div>
-			<span class="text-lg text-secondary my-auto mr-2">{amount > 0 ? 'From' : 'To'}</span>
+			<span class="text-lg text-secondary my-auto mr-2">{direction}</span>
 			<a href={`/${p.with.username}`}>
 				<div class="flex">
 					<div class="my-auto">
@@ -44,7 +49,7 @@
 	{/if}
 	{#if p.type === types.pot}
 		<div>
-			<span class="text-lg text-secondary my-auto mr-2">{amount > 0 ? 'From' : 'To'}</span>
+			<span class="text-lg text-secondary my-auto mr-2">{direction}</span>
 			<a href={`/pot/${p.memo}`}>
 				<div class="flex">
 					<div class="my-auto">
@@ -56,7 +61,7 @@
 		</div>
 	{/if}
 	<div>
-		<span class="text-lg text-secondary">Amount</span>
+		<span class="text-lg text-secondary">{$t('payments.amount')}</span>
 		<div>
 			{f(fiat(a, rate), currency)}
 			<span class="text-secondary text-lg">
@@ -67,7 +72,7 @@
 
 	{#if tip}
 		<div>
-			<span class="text-lg text-secondary">Tip</span>
+			<span class="text-lg text-secondary">{$t('invoice.tip')}</span>
 			<div>
 				{f(fiat(tip, rate), currency)}
 				({Math.round((tip * 100) / Math.abs(a))}%)
@@ -126,10 +131,28 @@
 		</div>
 	{/if}
 
-	{#if ['laughingbean', 'burnabyartigiano', 'milanowestend', 'eotl', 'bigbite', 'edgemontartigiano'].includes(user.username.toLowerCase())}
-		<button
-			class="text-sm md:text-lg rounded-full border py-2 px-4 hover:opacity-80 min-w-[72px] bg-black text-white"
-			on:click={print}>Print Receipt</button
-		>
+	{#if user.hasprinter}
+		<div>
+			<button
+				class="rounded-full border py-3 px-6 hover:opacity-80 flex w-full md:w-60"
+				on:click={print}
+			>
+				<div class="mx-auto flex">
+					<Icon icon="printer" style="my-auto h-6 mr-2" />
+					<div class="my-auto mt-1 text-base">{$t('payments.print')}</div>
+				</div>
+			</button>
+		</div>
+	{:else}
+		<div>
+			<a href={`/payment/${id}/plain`}>
+				<button class="rounded-full border py-3 px-6 hover:opacity-80 flex w-full md:w-60">
+					<div class="mx-auto flex">
+						<Icon icon="printer" style="my-auto h-6 mr-2" />
+						<div class="my-auto mt-1 text-base">{$t('payments.print')}</div>
+					</div>
+				</button>
+			</a>
+		</div>
 	{/if}
 </div>
diff --git a/src/routes/(app)/payment/[id]/plain/+page.server.js b/src/routes/(app)/payment/[id]/plain/+page.server.js
new file mode 100644
index 00000000..1c90ab69
--- /dev/null
+++ b/src/routes/(app)/payment/[id]/plain/+page.server.js
@@ -0,0 +1,6 @@
+import { auth, get } from '$lib/utils';
+
+export async function load({ cookies, params }) {
+	let payment = await get(`/payments/${params.id}`, auth(cookies));
+	return { payment };
+}
diff --git a/src/routes/(app)/payment/[id]/plain/+page.svelte b/src/routes/(app)/payment/[id]/plain/+page.svelte
new file mode 100644
index 00000000..5ffd1656
--- /dev/null
+++ b/src/routes/(app)/payment/[id]/plain/+page.svelte
@@ -0,0 +1,77 @@
+<script>
+	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+	import { t } from '$lib/translations';
+	import { back, copy, f, s, fiat, post, sats, success, types } from '$lib/utils';
+	import { Avatar, Icon } from '$comp';
+	import { format } from 'date-fns';
+	import { PUBLIC_EXPLORER as expl } from '$env/static/public';
+
+	export let data;
+	let { user, payment: p } = data;
+
+	let { username } = user;
+	let { id, amount, created, rate, type, ref, tip, ourfee, fee, currency } = p;
+	let a = Math.abs(amount);
+
+	onMount(() => {
+		if (browser) {
+			let main = document.querySelector('main');
+			main.style.paddingBottom = '0';
+			window.onfocus = () => goto(`/payment/${id}`);
+			window.print();
+		}
+	});
+
+	fee = fee || 0;
+</script>
+
+<div class="space-y-5">
+	<div>
+		<span class="text-lg text-secondary">Amount</span>
+		<div>
+			{f(fiat(a, rate), currency)}
+		</div>
+	</div>
+
+	{#if tip}
+		<div>
+			<span class="text-lg text-secondary">Tip</span>
+			<div>
+				{f(fiat(tip, rate), currency)}
+				({Math.round((tip * 100) / Math.abs(a))}%)
+			</div>
+		</div>
+
+		<div>
+			<span class="text-lg text-secondary">Total</span>
+			<div>
+				{f(fiat(a + (tip || 0), rate), currency)}
+			</div>
+		</div>
+	{/if}
+
+	<div>
+		<span class="text-lg text-secondary">Date</span>
+		<div>
+			{format(new Date(created), 'MMMM d')},
+			{format(new Date(created), 'h:mm aaa')}
+		</div>
+	</div>
+
+	{#if type === 'bitcoin'}
+		<div>
+			<span class="text-lg text-secondary">Txid</span>
+			<div class="flex">
+				<div>
+					{id}
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<a href={`/payment/${id}`}>
+	<div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50" />
+</a>