invoice updates

9 files changed, 143 insertions, 124 deletions

diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte
index 2b37dc9d..e590a228 100644
--- a/src/components/Qr.svelte
+++ b/src/components/Qr.svelte
@@ -17,8 +17,11 @@
 			backgroundOptions: {
 				color: 'rgba(0, 0, 0, 0)'
 			},
+			cornersSquareOptions: {
+				type: 'extra-rounded'
+			},
 			dotsOptions: {
-				type: 'rounded'
+				type: 'extra-rounded'
 			},
 
 			image,
diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte
index e1a0d60c..b40700ad 100644
--- a/src/components/RegisterOrLogin.svelte
+++ b/src/components/RegisterOrLogin.svelte
@@ -24,7 +24,7 @@
 
 	$: if ($user) goto(`/${username}/receive`);
 
-  let focus = (el) => setTimeout(() => el.focus());
+	let focus = (el) => setTimeout(() => el.focus());
 </script>
 
 <div class="pt-10">
diff --git a/src/routes/[username]/receive/+page.svelte b/src/routes/[username]/receive/+page.svelte
index 17b59f1f..a1dc0a0e 100644
--- a/src/routes/[username]/receive/+page.svelte
+++ b/src/routes/[username]/receive/+page.svelte
@@ -75,9 +75,10 @@
 
 	let submit = async () => {
 		loading = true;
-    let { uuid } = await post('/invoice', {
+		let { uuid } = await post('/invoice', {
 			amount,
 			rate: $selectedRate,
+			prompt: true,
 			username: $page.params.username
 		});
 		goto(`/invoice/${uuid}`);
diff --git a/src/routes/invoice/+server.js b/src/routes/invoice/+server.js
index c408c4e5..4538256c 100644
--- a/src/routes/invoice/+server.js
+++ b/src/routes/invoice/+server.js
@@ -1,8 +1,16 @@
 import { auth, get, post } from '$lib/utils';
 
 export async function POST({ request, parent }) {
-	let { amount, currency, network = 'lightning', rate, tip, username } = await request.json();
-	let invoice = { amount, currency, network, rate, tip };
+	let {
+		amount,
+		currency,
+		network = 'lightning',
+		prompt,
+		rate,
+		tip,
+		username
+	} = await request.json();
+	let invoice = { amount, currency, network, prompt, rate, tip };
 
 	if (network === 'lightning') {
 		invoice.text = (await post('/lightning/invoice', { amount }, auth(request))).text;
@@ -10,7 +18,7 @@ export async function POST({ request, parent }) {
 		invoice.address = (await get('/address?network=bitcoin&type=bech32')).address;
 	}
 
-  console.log("INVOICE", invoice)
+	console.log('INVOICE', invoice);
 
 	return new Response(
 		JSON.stringify(await post('/invoice', { invoice, user: { username } }, auth(request))),
diff --git a/src/routes/invoice/[id]/+page.server.js b/src/routes/invoice/[id]/+page.server.js
index e123c7d7..3adba31a 100644
--- a/src/routes/invoice/[id]/+page.server.js
+++ b/src/routes/invoice/[id]/+page.server.js
@@ -1,6 +1,7 @@
 import { get } from '$lib/utils';
 
 export async function load({ params }) {
+	console.log('PARAMS', params);
 	let { id } = params;
 	return { id, invoice: await get(`/invoice?uuid=${id}`) };
 }
diff --git a/src/routes/invoice/[id]/+page.svelte b/src/routes/invoice/[id]/+page.svelte
index d935affb..e8b1dd16 100644
--- a/src/routes/invoice/[id]/+page.svelte
+++ b/src/routes/invoice/[id]/+page.svelte
@@ -14,7 +14,8 @@
 	let {
 		amount,
 		rate,
-		status,
+		received,
+		prompt,
 		text,
 		tip,
 		user: { username, currency }
@@ -31,7 +32,8 @@
 		({
 			amount,
 			rate,
-			status,
+			received,
+			prompt,
 			text,
 			tip,
 			user: { username, currency }
@@ -44,7 +46,7 @@
 
 	$: tip = Math.round((amount / 100) * tipPercent);
 
-	$invoices[id] = { amount, id, rate, status, text, tip, username };
+	$invoices[id] = { amount, id, rate, received, text, tip, username };
 
 	$: amountFiat = parseFloat(((amount * rate) / 100000000).toFixed(2));
 
@@ -67,15 +69,16 @@
 
 	let update = async () => {
 		await tick();
-		let r = await post(`/invoice`, {
+		let { uuid } = await post(`/invoice`, {
 			amount: parseInt(amount + tip),
+			prompt,
 			rate,
 			tip,
 			text,
 			username
 		});
 
-		goto(`/invoice/${r}`);
+		goto(`/invoice/${uuid}`);
 	};
 
 	$: totalAmountFormatted = f(amountFiat + parseFloat(tipAmount), currency);
@@ -154,7 +157,33 @@
 	}
 </script>
 
-{#if $invoices[id]?.status !== 'paid'}
+{#if $invoices[id]?.received >= amount}
+	<div class="text-center mt-20 md:mt-0">
+		{#if typeof window !== 'undefined'}
+			<div class="w-full mx-auto max-w-xl">
+				<LottiePlayer
+					src="/lottie/success.json"
+					autoplay={true}
+					loop={true}
+					controls={false}
+					renderer="svg"
+					background="transparent"
+				/>
+			</div>
+		{/if}
+		<h1 class="text-3xl md:text-4xl font-bold mb-6">{$t('invoice.paymentSuccessful')}</h1>
+		<h2 class="text-2xl md:text-3xl font-semibold">
+			{totalAmountFormatted}
+		</h2>
+		<h3 class="text-secondary md:text-lg mb-6 mt-1">({totalAmountSats} SAT)</h3>
+		<button
+			class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80"
+			on:click={handleDoneClick}
+		>
+			{$t('invoice.done')}
+		</button>
+	</div>
+{:else}
 	<div class:full-shadow={showMobileTip}>
 		<button
 			class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80"
@@ -169,94 +198,96 @@
 			<div
 				class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 space-x-0 lg:space-x-24"
 			>
-				<!-- tipping section  -->
-				<div
-					class="w-[100%] md:w-auto absolute {showMobileTip
-						? '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">{tipAmountFormatted}</span><span
-								class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SAT)`}</span
+				{#if invoice.prompt}
+					<div
+						class="w-[100%] md:w-auto absolute {showMobileTip
+							? '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
 							>
-							<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>
+						<h1 class="hidden md:block text-4xl font-semibold">{$t('invoice.addTipq')}</h1>
 						{#if !showCustomAmount}
-							{#each tipAmounts as amount}
-								<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)) ||
-										  (!tipPercent && amount === 'None')
-										? '!bg-black !text-white'
-										: ''}"
-									on:click={() => handleTipButtonClick(amount)}>{amount}</button
-								>
-							{/each}
-						{/if}
-						{#if showCustomAmount}
-							<div class="relative">
-								<span
-									class="absolute top-[18px] left-5 font-semibold {!customTipAmount
-										? 'opacity-50'
-										: 'opacity-100'}">$</span
-								>
-								<input
-									bind:this={customInput}
-									type="number"
-									on:input={(e) => handleCustomTipAmount(e)}
-									class="pl-10"
-									placeholder="Other"
-								/>
-								<button
-									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
-								>
-								<!-- 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
+								<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
+									class="text-secondary font-semibold text-sm">{`(${tipAmountSats} 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>
+							{#if !showCustomAmount}
+								{#each tipAmounts as amount}
+									<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)) ||
+											  (!tipPercent && amount === 'None')
+											? '!bg-black !text-white'
+											: ''}"
+										on:click={() => handleTipButtonClick(amount)}>{amount}</button
+									>
+								{/each}
+							{/if}
+							{#if showCustomAmount}
+								<div class="relative">
+									<span
+										class="absolute top-[18px] left-5 font-semibold {!customTipAmount
+											? 'opacity-50'
+											: 'opacity-100'}">$</span
+									>
+									<input
+										bind:this={customInput}
+										type="number"
+										on:input={(e) => handleCustomTipAmount(e)}
+										class="pl-10"
+										placeholder="Other"
+									/>
+									<button
+										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
+									>
+									<!-- 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>
 					</div>
-				</div>
 
-				<div
-					class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
-					id="section-divider"
-				/>
+					<div
+						class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
+						id="section-divider"
+					/>
+				{/if}
 
 				<!-- invoice section -->
 				<div class="text-center space-y-5 max-w-[300px]">
@@ -340,32 +371,6 @@
 			</div>
 		</div>
 	</div>
-{:else}
-	<div class="text-center mt-20 md:mt-0">
-		{#if typeof window !== 'undefined'}
-			<div class="w-full mx-auto max-w-xl">
-				<LottiePlayer
-					src="/lottie/success.json"
-					autoplay={true}
-					loop={true}
-					controls={false}
-					renderer="svg"
-					background="transparent"
-				/>
-			</div>
-		{/if}
-		<h1 class="text-3xl md:text-4xl font-bold mb-6">{$t('invoice.paymentSuccessful')}</h1>
-		<h2 class="text-2xl md:text-3xl font-semibold">
-			{totalAmountFormatted}
-		</h2>
-		<h3 class="text-secondary md:text-lg mb-6 mt-1">({totalAmountSats} SAT)</h3>
-		<button
-			class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80"
-			on:click={handleDoneClick}
-		>
-			{$t('invoice.done')}
-		</button>
-	</div>
 {/if}
 
 <style>
diff --git a/src/routes/launch/+page.svelte b/src/routes/launch/+page.svelte
index feb8fe85..ee788101 100644
--- a/src/routes/launch/+page.svelte
+++ b/src/routes/launch/+page.svelte
@@ -8,10 +8,7 @@
 </script>
 
 <div class="flex mt-20 px-8">
-	<img
-		src="/images/ticket.webp"
-		class="mb-8 md:max-w-xl mx-auto border border-gray-400"
-	/>
+	<img src="/images/ticket.webp" class="mb-8 md:max-w-xl mx-auto border border-gray-400" />
 </div>
 <div class="mx-auto flex  items-center justify-center px-8">
 	<div class="flex flex-col w-full bg-white rounded shadow-lg sm:w-3/4 md:w-1/2 lg:w-3/5">
diff --git a/src/routes/launch/purchase/+page.svelte b/src/routes/launch/purchase/+page.svelte
index 4225101e..84f960e3 100644
--- a/src/routes/launch/purchase/+page.svelte
+++ b/src/routes/launch/purchase/+page.svelte
@@ -1,6 +1,8 @@
 <script>
 	import { selectedRate } from '$lib/store';
 	import { post } from '$lib/utils';
+	import { goto } from '$app/navigation';
+
 	export let data;
 
 	let amount = 35000;
@@ -11,12 +13,14 @@
 
 	let invoice;
 	let get = async (network) => {
-		invoice = await post('/invoice', {
+		let { uuid } = await post('/invoice', {
 			amount,
 			rate: $selectedRate,
 			network,
 			username
 		});
+
+		goto(`/invoice/${uuid}`);
 	};
 
 	let lightning = () => get('lightning');
diff --git a/src/routes/register/+page.server.js b/src/routes/register/+page.server.js
index 2ff4af67..f337a5ea 100644
--- a/src/routes/register/+page.server.js
+++ b/src/routes/register/+page.server.js
@@ -2,8 +2,8 @@ import { post, login } from '$lib/utils';
 
 export async function POST({ request, setHeaders }) {
 	let form = Object.fromEntries(await request.formData());
-  let { username, password, redirect } = form;
-	await post('/register', { user: { username, password }});
+	let { username, password, redirect } = form;
+	await post('/register', { user: { username, password } });
 	await login(user, setHeaders);
 
 	return { location: redirect || `/${user.username}/dashboard` };