diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/locales/en.json | 3 | ||||
| -rw-r--r-- | src/routes/(app)/payment/[id]/+page.svelte | 47 | ||||
| -rw-r--r-- | src/routes/(app)/payment/[id]/plain/+page.server.js | 6 | ||||
| -rw-r--r-- | src/routes/(app)/payment/[id]/plain/+page.svelte | 77 |
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> |