diff options
| -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 | ||||
| -rw-r--r-- | static/icons/printer.svg | 38 |
5 files changed, 158 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> diff --git a/static/icons/printer.svg b/static/icons/printer.svg new file mode 100644 index 00000000..1544a833 --- /dev/null +++ b/static/icons/printer.svg @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="iso-8859-1"?> +<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> +<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + viewBox="0 0 512 512" xml:space="preserve"> +<g> + <g> + <path d="M457.246,228.442h-38.074V57.469c0-12.015-9.741-21.933-21.756-21.933H116.034c-12.015,0-21.756,9.918-21.756,21.933 + v170.973H56.204C25.613,228.442,0,253.507,0,284.098v170.434c0,12.015,10.466,21.933,22.482,21.933h468.487 + c12.015,0,21.031-9.918,21.031-21.933V284.098C512,253.507,487.837,228.442,457.246,228.442z M137.79,79.048h237.87v149.394 + H137.79V79.048z M468.487,432.952H43.513V284.098c0-6.598,6.093-12.143,12.691-12.143h401.042c6.598,0,11.241,5.545,11.241,12.143 + V432.952z"/> + </g> +</g> +<g> + <g> + <path d="M397.416,353.178H116.034c-12.015,0-21.756,9.741-21.756,21.756s9.741,21.756,21.756,21.756h281.382 + c12.015,0,21.756-9.741,21.756-21.756S409.432,353.178,397.416,353.178z"/> + </g> +</g> +<g> + <g> + <path d="M89.926,292.261H76.872c-12.015,0-21.756,9.741-21.756,21.756s9.741,21.756,21.756,21.756h13.054 + c12.015,0,21.756-9.741,21.756-21.756S101.942,292.261,89.926,292.261z"/> + </g> +</g> +<g> + <g> + <path d="M336.499,105.156H176.952c-12.015,0-21.756,9.741-21.756,21.756s9.741,21.756,21.756,21.756h159.547 + c12.015,0,21.756-9.741,21.756-21.756S348.514,105.156,336.499,105.156z"/> + </g> +</g> +<g> + <g> + <path d="M336.499,160.272H176.952c-12.015,0-21.756,9.741-21.756,21.756s9.741,21.756,21.756,21.756h159.547 + c12.015,0,21.756-9.741,21.756-21.756S348.514,160.272,336.499,160.272z"/> + </g> +</g> +</svg>
\ No newline at end of file |
