buttons on invoice page

3 files changed, 54 insertions, 18 deletions

diff --git a/src/locales/en.json b/src/locales/en.json
index 8176ae4c..0a00e7f8 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -239,7 +239,10 @@
     "takeFunds": "Take Funds",
     "show": "Show",
     "hide": "Hide",
+    "qr": "QR",
     "copyLink": "Copy Link",
+    "copyText": "Copy Text",
+    "openLink": "Open Link",
     "total": "Total",
     "gainLoss": "Gain/Loss",
     "presentValue": "Present Value",
diff --git a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
index 68783112..dbf36694 100644
--- a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
@@ -35,7 +35,7 @@
 		user: { username, currency }
 	} = invoice;
 
-	let showQr = !amount;
+	let showQr = invoice.uid === user.id;
 
 	$: src = sm;
 
@@ -58,14 +58,14 @@
 
 		tipPercent = (tip / amount) * 100;
 
-      // if (browser && window.NDEFReader) {
+		// if (browser && window.NDEFReader) {
 		// 	try {
 		// 		ndef = new NDEFReader();
 		// 		await ndef.scan();
-    //
+		//
 		// 		ndef.removeEventListener('readingerror', readingerror);
 		// 		ndef.removeEventListener('reading', reading);
-    //
+		//
 		// 		ndef.addEventListener('readingerror', readingerror);
 		// 		ndef.addEventListener('reading', reading);
 		// 	} catch (e) {
@@ -110,7 +110,7 @@
 	};
 </script>
 
-<div class="container mx-auto max-w-lg px-4 space-y-5">
+<div class="container mx-auto max-w-lg px-4 space-y-8">
 	<div class="whitespace-nowrap my-auto ml-auto flex gap-2">
 		<button
 			class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full"
@@ -136,18 +136,25 @@
 		</button>
 	</div>
 
-	<div>
-		<a href={invoice.type === 'bitcoin' ? invoice.text : 'lightning:' + invoice.text}>
-			<div class="relative flex">
-				<div class="flex mx-auto w-[360px] h-[360px]">
-					<img {src} class="w-[300px] h-[300px] mx-auto z-10 mt-[20px]" bind:this={qr} alt={txt} />
+	{#if showQr}
+		<div>
+			<a href={invoice.type === 'bitcoin' ? invoice.text : 'lightning:' + invoice.text}>
+				<div class="relative flex">
+					<div class="flex mx-auto w-[360px] h-[360px]">
+						<img
+							{src}
+							class="w-[300px] h-[300px] mx-auto z-10 mt-[20px]"
+							bind:this={qr}
+							alt={txt}
+						/>
+					</div>
+					<div
+						class="absolute m-auto left-0 right-0 w-[340px] h-[340px] rounded-full bg-gradient-to-r from-[#F2F6FC] to-[#E1E3FF] z-0"
+					/>
 				</div>
-				<div
-					class="absolute m-auto left-0 right-0 w-[340px] h-[340px] rounded-full bg-gradient-to-r from-[#F2F6FC] to-[#E1E3FF] z-0"
-				/>
-			</div>
-		</a>
-	</div>
+			</a>
+		</div>
+	{/if}
 
 	{#if amount > 0}
 		<div class="text-center font-bold text-2xl">
@@ -172,10 +179,35 @@
 		</div>
 	{/if}
 
-	<div class="w-full flex justify-center">
+    <div class="text-center">
+	<a href={link}>
+      
+    {txt.substr(0, 20)}...{txt.substr(-20)}
+    
+	</a>
+    </div>
+
+	<div class="w-full flex justify-center gap-2">
 		<button class="flex rounded-full border py-3 px-5 hover:opacity-80" on:click={() => copy(txt)}>
 			<Icon icon="copy" style="mr-1" />
-			<div class="text-secondary">{txt.substr(0, 10)}...{txt.substr(-10)}</div></button
+			<div class="text-secondary">{$t('payments.copyText')}</div></button
+		>
+		<a href={link}>
+			<button class="flex rounded-full border py-3 px-5 hover:opacity-80">
+				<Icon icon="link" style="mr-1 w-6" />
+				<div class="text-secondary">{$t('payments.openLink')}</div></button
+			>
+		</a>
+
+		<button
+			class="flex rounded-full border py-3 px-5 hover:opacity-80"
+			on:click={() => (showQr = !showQr)}
+		>
+			<Icon icon="qr" style="mr-1 invert" />
+			<div class="text-secondary">
+				{showQr ? $t('payments.hide') : $t('payments.show')}
+				{$t('payments.qr')}
+			</div></button
 		>
 	</div>
 </div>
diff --git a/static/icons/link.svg b/static/icons/link.svg
new file mode 100644
index 00000000..7b3654be
--- /dev/null
+++ b/static/icons/link.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M14.851 11.923c-.179-.641-.521-1.246-1.025-1.749-1.562-1.562-4.095-1.563-5.657 0l-4.998 4.998c-1.562 1.563-1.563 4.095 0 5.657 1.562 1.563 4.096 1.561 5.656 0l3.842-3.841.333.009c.404 0 .802-.04 1.189-.117l-4.657 4.656c-.975.976-2.255 1.464-3.535 1.464-1.28 0-2.56-.488-3.535-1.464-1.952-1.951-1.952-5.12 0-7.071l4.998-4.998c.975-.976 2.256-1.464 3.536-1.464 1.279 0 2.56.488 3.535 1.464.493.493.861 1.063 1.105 1.672l-.787.784zm-5.703.147c.178.643.521 1.25 1.026 1.756 1.562 1.563 4.096 1.561 5.656 0l4.999-4.998c1.563-1.562 1.563-4.095 0-5.657-1.562-1.562-4.095-1.563-5.657 0l-3.841 3.841-.333-.009c-.404 0-.802.04-1.189.117l4.656-4.656c.975-.976 2.256-1.464 3.536-1.464 1.279 0 2.56.488 3.535 1.464 1.951 1.951 1.951 5.119 0 7.071l-4.999 4.998c-.975.976-2.255 1.464-3.535 1.464-1.28 0-2.56-.488-3.535-1.464-.494-.495-.863-1.067-1.107-1.678l.788-.785z"/></svg>
\ No newline at end of file