From e34e0fee81a0aaebd8ff89986c1d4138c7b499c8 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Tue, 4 Oct 2022 20:28:29 -0700
Subject: tipping fixes

---
 src/components/Qr.svelte  |  22 +++++---
 src/components/Tip.svelte | 137 +++++++++++++++++++---------------------------
 2 files changed, 69 insertions(+), 90 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte
index 099d5fa5..23282589 100644
--- a/src/components/Qr.svelte
+++ b/src/components/Qr.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { fly, fade } from 'svelte/transition';
 	import screenfull from 'screenfull';
 	import { browser } from '$app/environment';
 	import { onMount, tick } from 'svelte';
@@ -7,16 +8,14 @@
 	export let image, text, qr, fullQr, full;
 
 	let toggle = async () => {
+		console.log('FULL', full);
 		full = !full;
 		await tick();
 		screenfull.toggle(fullQr.firstChild);
 	};
 
 	let opts = {
-		height: 300,
-		width: 300,
 		type: 'canvas',
-		data: text,
 		backgroundOptions: {
 			color: 'rgba(0, 0, 0, 0)'
 		},
@@ -33,26 +32,33 @@
 		}
 	};
 
+	let mask = false;
 	$: update(text);
 	let update = async (text, fullscreen) => {
+		mask = true;
 		if (!(browser && text)) return;
 		let { default: QRCodeStyling } = await import('qr-code-styling');
 
+		opts.data = text;
+		opts.height = opts.width = 300;
 		const qrCode = new QRCodeStyling(opts);
 
-		opts.height = Math.min(window.innerWidth, window.innerHeight);
-		opts.width = opts.height;
+		opts.height = opts.width = Math.min(window.innerWidth, window.innerHeight);
 		const fullQrCode = new QRCodeStyling(opts);
 
-		while (qr.firstChild) qr.removeChild(qr.lastChild);
+		while (qr && qr.firstChild) qr.removeChild(qr.lastChild);
 		qrCode.append(qr);
 
-		while (fullQr.firstChild) fullQr.removeChild(fullQr.lastChild);
+		while (fullQr && fullQr.firstChild) fullQr.removeChild(fullQr.lastChild);
 		fullQrCode.append(fullQr);
+		mask = false;
 	};
 </script>
 
-<div bind:this={qr} on:click={toggle} class:hidden={full} />
+{#if mask}
+	<div class="absolute bg-white w-[300px] h-[300px] t-0 l-0 z-10" out:fade />
+{/if}
+<div bind:this={qr} on:click={toggle} class:hidden={full} class="relative overflow-visible" />
 <div bind:this={fullQr} on:click={toggle} class:hidden={!full} />
 
 <style>
diff --git a/src/components/Tip.svelte b/src/components/Tip.svelte
index 83bf0dfa..093fef46 100644
--- a/src/components/Tip.svelte
+++ b/src/components/Tip.svelte
@@ -1,24 +1,15 @@
 <script>
+	import { enhance } from '$app/forms';
 	import { Icon } from '$comp';
 	import { t } from '$lib/translations';
 	import { f, post, s } from '$lib/utils';
 	import { tick } from 'svelte';
 	import { goto } from '$app/navigation';
 
-	export let amountFiat,
-		showCustomAmount,
-		showMobileTip,
-		tipPercent,
-		tipAmount,
-		amount,
-		currency,
-		tip,
-		prompt,
-		rate,
-		text,
-		username;
+	export let amountFiat, showMobileTip, tipPercent, tipAmount, amount, currency, tip, username;
 
 	const tipAmounts = ['None', '10%', '15%', '20%'];
+	let showCustomAmount;
 
 	let customInput;
 	let customTipAmount;
@@ -26,42 +17,17 @@
 	let apply = async () => {
 		if (customTipAmount > 0) {
 			tipPercent = (customTipAmount / amountFiat) * 100;
-			update();
 			showMobileTip = false;
 			showCustomAmount = false;
+			update();
 		}
 	};
 
-	let update = async () => {
-		await tick();
-		let { uuid } = await post(`/invoice`, {
-			amount: parseInt(amount + tip),
-			prompt,
-			rate,
-			tip,
-			text,
-			user: { username }
-		});
-
-		goto(`/invoice/${uuid}`);
-	};
-
 	const handleCustomTipAmount = (e) => {
 		tipPercent = 0;
 		customTipAmount = e.target.value;
 	};
 
-	const handleMobileClose = () => {
-		tipPercent = 0;
-		if (customInput) {
-			customInput.value = '';
-		}
-		customTipAmount = 0;
-		tipAmount = 0;
-		showMobileTip = false;
-		showCustomAmount = false;
-	};
-
 	let timeout;
 	const handleSlide = (e) => {
 		customTipAmount = '';
@@ -71,7 +37,7 @@
 		tipPercent = e.target.value;
 
 		clearTimeout(timeout);
-		timeout = setTimeout(update, 100);
+		timeout = setTimeout(update, 800);
 	};
 
 	const handleTipButtonClick = (amount) => {
@@ -88,6 +54,12 @@
 		showMobileTip = false;
 		update();
 	};
+
+	let submit;
+	let update = async () => {
+		await tick();
+		submit.click();
+	};
 </script>
 
 <div
@@ -95,40 +67,34 @@
 		? 'bottom-0'
 		: '-top-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none left-0 md:static text-center space-y-5"
 >
-	<div class="flex justify-end items-center">
-		<button class="block md:hidden bg-primary rounded-full p-2" on:click={handleMobileClose}
-			><Icon icon="close" /></button
-		>
-		<button
-			class="hidden {showCustomAmount ? 'md:block' : ''}"
-			on:click={() => (showCustomAmount = false)}
-			><Icon icon="close" style="hover:opacity-80" /></button
-		>
-	</div>
-	<h1 class="hidden md:block text-4xl font-semibold">{$t('invoice.addTipq')}</h1>
-	{#if !showCustomAmount}
-		<div>
-			<span class="font-semibold mr-1">{f(tipAmount, currency)}</span><span
-				class="text-secondary font-semibold text-sm">{`(${s(tip)} SAT)`}</span
-			>
-			<span class="block text-secondary text-sm">{Math.round(tipPercent)}%</span>
-		</div>
-
-		<input
-			id="slider"
-			type="range"
-			min="0"
-			max="100"
-			value={tipPercent}
-			class="px-2 py-0"
-			on:input={handleSlide}
-			on:change={() => (showMobileTip = false)}
-		/>
-	{/if}
-	<div>
+	<form method="POST" use:enhance>
+		<input type="hidden" name="amount" value={amount} />
+		<input type="hidden" name="tip" value={tip} />
+		<input type="hidden" name="username" value={username} />
+		<input type="hidden" name="prompt" value="true" />
+
+		<h1 class="hidden md:block text-4xl font-semibold">{$t('invoice.addTipq')}</h1>
 		{#if !showCustomAmount}
+			<div>
+				<span class="font-semibold mr-1">{f(tipAmount, currency)}</span><span
+					class="text-secondary font-semibold text-sm">{`(${s(tip)} SAT)`}</span
+				>
+				<span class="block text-secondary text-sm">{Math.round(tipPercent)}%</span>
+			</div>
+
+			<input
+				id="slider"
+				type="range"
+				min="0"
+				max="100"
+				value={tipPercent}
+				class="px-2 py-0 mb-4"
+				on:input={handleSlide}
+				on:change={() => (showMobileTip = false)}
+			/>
 			{#each tipAmounts as amount}
 				<button
+					type="button"
 					class="bg-black text-white md:text-black md:bg-primary md:hover:bg-black md:hover:text-white w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {customTipAmount
 						? ''
 						: Math.round(tipPercent) === parseInt(amount.slice(0, 2)) ||
@@ -138,8 +104,21 @@
 					on:click={() => handleTipButtonClick(amount)}>{amount}</button
 				>
 			{/each}
+
+			<div>
+				<button
+					type="button"
+					class="w-full md:w-auto mt-2 bg-black md:bg-primary text-white md:text-black md:hover:bg-black md:hover:text-white font-semibold py-3 px-7 rounded-2xl"
+					on:click={() => (showCustomAmount = true)}>Custom amount</button
+				>
+			</div>
 		{/if}
-		{#if showCustomAmount}
+
+		<button type="submit" bind:this={submit} />
+	</form>
+
+	{#if showCustomAmount}
+		<form on:submit|preventDefault={apply}>
 			<div class="relative">
 				<span
 					class="absolute top-[18px] left-5 font-semibold {!customTipAmount
@@ -149,28 +128,22 @@
 				<input
 					bind:this={customInput}
 					type="number"
+					step="0.01"
 					on:input={(e) => handleCustomTipAmount(e)}
 					class="pl-10"
 					placeholder="Other"
 				/>
 				<button
+					type="submit"
 					class="w-full mt-2 bg-black text-white font-semibold py-3 px-7 rounded-2xl {!customTipAmount
 						? 'opacity-50'
 						: 'opacity-100 hover:opacity-80'}"
-					disabled={!customTipAmount}
-					on:click={apply}>Apply</button
+					disabled={!customTipAmount}>Apply</button
 				>
 				<!-- found missing translation --->
 			</div>
-		{:else}
-			<div>
-				<button
-					class="w-full md:w-auto mt-2 bg-black md:bg-primary text-white md:text-black md:hover:bg-black md:hover:text-white font-semibold py-3 px-7 rounded-2xl"
-					on:click={() => (showCustomAmount = true)}>Custom amount</button
-				>
-			</div>
-		{/if}
-	</div>
+		</form>
+	{/if}
 </div>
 
 <div
-- 
cgit v1.2.3