diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Qr.svelte | 15 | ||||
| -rw-r--r-- | src/routes/invoice/[id]/+page.svelte | 166 |
2 files changed, 108 insertions, 73 deletions
diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte index 51616eac..2b37dc9d 100644 --- a/src/components/Qr.svelte +++ b/src/components/Qr.svelte @@ -3,7 +3,7 @@ import { onMount } from 'svelte'; import { copy } from '$lib/utils'; - export let image, text, qr; + export let image, text, qr, disabled; $: update(text); let update = async (text) => { @@ -32,13 +32,18 @@ }; </script> -<div bind:this={qr} on:click={() => copy(text)} /> +<div + bind:this={qr} + on:click={() => { + if (!disabled) copy(text); + }} +/> <style> div { - @apply px-5 - md:px-0 - w-[292px] + @apply px-5 + md:px-0 + w-[292px] h-[302px] md:w-[300px] md:h-[300px] diff --git a/src/routes/invoice/[id]/+page.svelte b/src/routes/invoice/[id]/+page.svelte index 3f96bf06..b4550814 100644 --- a/src/routes/invoice/[id]/+page.svelte +++ b/src/routes/invoice/[id]/+page.svelte @@ -20,6 +20,8 @@ user: { username, currency } } = invoice; + let showCustomAmount = false; + let image = '/images/invoice.svg'; let qr; let tipPercent = 0; @@ -55,9 +57,12 @@ $: totalAmountSats = s(amount + parseFloat(tipAmountSats.replace(/,/g, ''))); let apply = async () => { - tipPercent = (customTipAmount / amountFiat) * 100; - update(); - showMobileTip = false; + if (customTipAmount > 0) { + tipPercent = (customTipAmount / amountFiat) * 100; + update(); + showMobileTip = false; + showCustomAmount = false; + } }; let update = async () => { @@ -86,22 +91,27 @@ let timeout; const handleSlide = (e) => { customTipAmount = ''; - customInput.value = ''; + if (customInput) { + customInput.value = ''; + } tipPercent = e.target.value; + clearTimeout(timeout); timeout = setTimeout(update, 100); }; const handleTipButtonClick = (amount) => { customTipAmount = ''; - customInput.value = ''; + if (customInput) { + customInput.value = ''; + } if (amount === 'None') { tipPercent = 0; } else { tipPercent = parseInt(amount.slice(0, 2)); } - + showMobileTip = false; update(); }; @@ -113,15 +123,18 @@ let showMobileTip = false; const handleBackButton = () => { - if (showMobileTip) { - tipPercent = 0; + goto(`/${username}/receive`); + }; + + const handleMobileClose = () => { + tipPercent = 0; + if (customInput) { customInput.value = ''; - customTipAmount = 0; - tipAmount = 0; - showMobileTip = false; - } else { - goto(`/${username}/receive`); } + customTipAmount = 0; + tipAmount = 0; + showMobileTip = false; + showCustomAmount = false; }; let customInput; @@ -146,6 +159,7 @@ <button class="ml-5 md:ml-20 mt-5 md:mt-10" class:invisible={!$user} + disabled={showMobileTip} on:click={handleBackButton} > <Icon icon="arrow-left" style="w-10" /> @@ -161,65 +175,81 @@ ? '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" > - <h1 class="hidden md:block text-4xl font-semibold">{$t('invoice.addTipq')}</h1> - - <div> - <span class="font-semibold mr-1">{tipAmountFormatted}</span><span - class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SAT)`}</span + <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 > - <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} - /> - - <div> - {#each tipAmounts as amount} - <button - class="bg-primary 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 + <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 > - {/each} + <span class="block text-secondary text-sm">{Math.round(tipPercent)}%</span> + </div> - <div class="relative"> - <span - class="absolute top-[18px] left-5 font-semibold {!customTipAmount - ? 'opacity-50' - : 'opacity-100'}">$</span - > - <input - bind:this={customInput} - type="number" - min="0" - on:input={(e) => handleCustomTipAmount(e)} - class="pl-10" - placeholder="Other" - /> - <button - class="w-full md:w-auto mt-2 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip - ? !customTipAmount && !tipAmount + <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' - : !customTipAmount - ? 'opacity-50' - : 'opacity-100'}" - disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount} - on:click={apply}>Apply</button - > - <!-- found missing translation ---> - </div> + : 'opacity-100'}">$</span + > + <input + bind:this={customInput} + type="number" + min="0" + on:input={(e) => handleCustomTipAmount(e)} + class="pl-10" + placeholder="Other" + /> + <button + class="w-full md:w-auto mt-2 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip + ? !customTipAmount && !tipAmount + ? 'opacity-50' + : 'opacity-100' + : !customTipAmount + ? 'opacity-50' + : 'opacity-100'}" + disabled={showMobileTip ? !customTipAmount && !tipAmount : !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> @@ -262,7 +292,7 @@ > <div class="border border-gray-200 rounded-2xl"> - <Qr {text} {image} bind:qr /> + <Qr {text} {image} disabled={showMobileTip} bind:qr /> </div> <div> |