diff options
| -rw-r--r-- | src/lib/socket.js | 5 | ||||
| -rw-r--r-- | src/lib/store.js | 2 | ||||
| -rw-r--r-- | src/routes/[username]/index.svelte | 7 | ||||
| -rw-r--r-- | src/routes/__layout.svelte | 2 | ||||
| -rw-r--r-- | src/routes/invoice/[id].svelte | 54 | ||||
| -rw-r--r-- | src/routes/support.svelte (renamed from src/routes/[username]/support.svelte) | 0 | ||||
| -rw-r--r-- | static/images/success.png | bin | 0 -> 191994 bytes |
7 files changed, 54 insertions, 16 deletions
diff --git a/src/lib/socket.js b/src/lib/socket.js index c7c541e1..4898f481 100644 --- a/src/lib/socket.js +++ b/src/lib/socket.js @@ -1,5 +1,5 @@ import { get } from 'svelte/store'; -import { rate, user, token } from '$lib/store'; +import { rate, user, token, invoicePaid, preferredCurrency } from '$lib/store'; let interval, socket; @@ -18,13 +18,14 @@ export const messages = (data) => ({ }, payment() { - console.log(data, 'payment'); + invoicePaid.set(true); }, connected: auth, login() { user.set(data); + preferredCurrency.set(data.currency); } }); diff --git a/src/lib/store.js b/src/lib/store.js index 6f4a9515..f910dfa6 100644 --- a/src/lib/store.js +++ b/src/lib/store.js @@ -18,3 +18,5 @@ export const user = writable(); export const invoiceAmount = writable(); export const invoiceAmountFiat = writable(); export const token = persisted('token'); +export const invoicePaid = writable(); +export const preferredCurrency = writable(); diff --git a/src/routes/[username]/index.svelte b/src/routes/[username]/index.svelte index a53b94cc..6e3978ad 100644 --- a/src/routes/[username]/index.svelte +++ b/src/routes/[username]/index.svelte @@ -7,8 +7,7 @@ import { copy } from '$lib/utils'; export let username; - //this needs to be pulled from user - let lightning = 'lnbc1p3dzl8tpp5jgq2dxefjdhvmvs3uvtjc'; + let lightningAddress = `${username}@coinos.io`; onMount(async () => { if (browser) { @@ -39,7 +38,7 @@ setTimeout(() => (qrSkeleton = false), 100); const handleCopy = () => { - copy(lightning); + copy(lightningAddress); toast.push('Copied!', { theme: { '--toastBarBackground': '#2F855A' @@ -84,7 +83,7 @@ <div class="bg-primary font-semibold rounded-xl text-sm py-2 px-3 flex flex-wrap justify-center items-center" > - <span>{lightning}</span> + <span>{lightningAddress}</span> <button on:click={handleCopy}> <Icon icon="copy" style="ml-2" /> </button> diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index b2cb8aae..406c29e2 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -11,7 +11,7 @@ import { LoadingSplash } from '$comp'; browser && ($token ||= $session.token); - let protectedRoutes = [/receive/]; + let protectedRoutes = [/receive/, /customers/, /dashboard/, /settings/, /transactions/]; let ready = false; onMount(() => { diff --git a/src/routes/invoice/[id].svelte b/src/routes/invoice/[id].svelte index 1f1a7aa3..dfb6be8d 100644 --- a/src/routes/invoice/[id].svelte +++ b/src/routes/invoice/[id].svelte @@ -1,12 +1,16 @@ <script> + import { toast } from '@zerodevx/svelte-toast'; import { browser } from '$app/env'; - import { user } from '$lib/store'; - import { Icon } from '$comp'; + import { user, invoicePaid, preferredCurrency } from '$lib/store'; + import { Icon, Image } from '$comp'; import { goto } from '$app/navigation'; import { onMount } from 'svelte'; + import { copy } from '$lib/utils'; export let amount, rate, text; + console.log($user); + $: amountFiat = parseFloat(((amount * rate) / 100000000).toFixed(2)); let tipPercent = 0; @@ -34,7 +38,7 @@ $: totalAmountFormatted = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' - }).format(amountFiat + tipAmount); + }).format(amountFiat + parseFloat(tipAmount)); const amountFormatted = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 @@ -51,6 +55,8 @@ const handleTipButtonClick = (amount) => { customTipAmount = ''; + customInput.value = ''; + if (amount === 'None') { tipPercent = 0; } else { @@ -102,9 +108,26 @@ }; let customInput; + + const handleCopy = () => { + copy(text); + toast.push('Copied!', { + theme: { + '--toastBarBackground': '#2F855A' + } + }); + }; + + const handleDoneClick = () => { + if ($user) { + goto(`/${user.username}/receive`); + } else { + goto('/'); + } + }; </script> -{#if $user} +{#if $user && !invoicePaid} <div class:full-shadow={showMobileTip}> <button class="ml-5 md:ml-20 mt-5 md:mt-10" on:click={handleBackButton}> <Icon icon="arrow-left" style="w-10" /> @@ -116,7 +139,7 @@ > <!-- tipping section --> <div - class="absolute {showMobileTip + class="w-[100%] md:w-auto absolute {showMobileTip ? 'bottom-0' : '-bottom-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 left-0 md:static text-center space-y-5" > @@ -138,6 +161,7 @@ class="px-2" on:input={(e) => { customTipAmount = ''; + customInput.value = ''; tipPercent = e.target.value; }} /> @@ -145,9 +169,10 @@ <div> {#each tipAmounts as amount} <button - class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {tipPercent === - amount.slice(0, 2) || - ((tipPercent === 0 || tipPercent === '0') && amount === 'None') + class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {customTipAmount + ? '' + : tipPercent === amount.slice(0, 2) || + ((tipPercent === 0 || tipPercent === '0') && amount === 'None') ? '!bg-black text-white' : ''}" on:click={() => handleTipButtonClick(amount)}>{amount}</button @@ -221,9 +246,10 @@ <div bind:this={qr} + on:click={handleCopy} class="border {showMobileTip ? 'border-gray-400' - : 'border-lightgrey'} rounded-3xl block md:flex md:p-5 justify-center items-center h-[300px] md:h-[342px] w-[250px] md:w-[342px] relative" + : 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center cursor-pointer" /> <div class="px-5 space-y-3"> @@ -255,6 +281,16 @@ </div> </div> </div> +{:else} + <div class="text-center mt-20 md:mt-0"> + <Image image="success" style="w-full md:w-3/4 xl:w-1/2 mx-auto max-w-3xl" /> + <h1 class="text-3xl md:text-4xl font-bold mb-6">Payment Successful!</h1> + <h2 class="text-2xl md:text-3xl font-semibold">{totalAmountFormatted} {$preferredCurrency}</h2> + <h3 class="text-secondary md:text-lg mb-6 mt-1">({totalAmountSats} SATS)</h3> + <button class="bg-black text-white rounded-2xl w-20 py-3 font-bold" on:click={handleDoneClick}> + Done + </button> + </div> {/if} <style> diff --git a/src/routes/[username]/support.svelte b/src/routes/support.svelte index 1935b156..1935b156 100644 --- a/src/routes/[username]/support.svelte +++ b/src/routes/support.svelte diff --git a/static/images/success.png b/static/images/success.png Binary files differnew file mode 100644 index 00000000..d547edd9 --- /dev/null +++ b/static/images/success.png |
