diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Qr.svelte | 9 | ||||
| -rw-r--r-- | src/components/Tip.svelte | 215 | ||||
| -rw-r--r-- | src/components/index.js | 1 |
3 files changed, 1 insertions, 224 deletions
diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte index d9bf63ba..e07906a5 100644 --- a/src/components/Qr.svelte +++ b/src/components/Qr.svelte @@ -18,14 +18,6 @@ backgroundOptions: { color: 'rgba(0, 0, 0, 0)' }, - cornersSquareOptions: { - type: 'extra-rounded' - }, - dotsOptions: { - type: 'extra-rounded' - }, - - image, imageOptions: { hideBackgroundDots: false } @@ -57,6 +49,7 @@ {#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} diff --git a/src/components/Tip.svelte b/src/components/Tip.svelte deleted file mode 100644 index 7e2df7f4..00000000 --- a/src/components/Tip.svelte +++ /dev/null @@ -1,215 +0,0 @@ -<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, - showMobileTip, - tipPercent, - tipAmount, - amount, - currency, - tip, - username, - rate; - - const tipAmounts = ['No thanks', '10%', '15%', '20%']; - let showCustomAmount; - - let customInput; - let customTipAmount; - - let apply = async () => { - if (customTipAmount > 0) { - tipPercent = (customTipAmount / amountFiat) * 100; - showMobileTip = false; - showCustomAmount = false; - } - }; - - let active = (amount) => - !customTipAmount && Math.round(tipPercent) === parseInt(amount.slice(0, 2)); - - const handleCustomTipAmount = (e) => { - tipPercent = 0; - customTipAmount = e.target.value; - }; - - let timeout; - const handleSlide = (e) => { - customTipAmount = ''; - if (customInput) { - customInput.value = ''; - } - tipPercent = e.target.value; - - clearTimeout(timeout); - timeout = setTimeout(update, 800); - }; - - let submitting; - const handleTipButtonClick = async (amount) => { - submitting = true; - if (amount === 'No thanks') { - tipPercent = 0; - } else { - tipPercent = parseInt(amount.slice(0, 2)); - } - - await tick(); - submit.click(); - }; - - let submit; - let update = async () => { - await tick(); - //submit.click(); - }; -</script> - -<form method="POST" use:enhance class:invisible={submitting}> - <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="rate" value={rate} /> - <input type="hidden" name="prompt" value="false" /> - - <h1 class="text-4xl font-semibold my-8">{$t('invoice.addTipq')}</h1> - {#if !showCustomAmount} - <div class="my-2 text-xl">{Math.round(tipPercent)}%</div> - - <input - id="slider" - type="range" - min="0" - max="100" - value={tipPercent} - class="px-0 py-0 my-5" - style="--bgPercent: {tipPercent}%;" - on:input={handleSlide} - on:change={() => (showMobileTip = false)} - /> - - <div class="flex mb-8"> - <div> - <span class="text-sm font-semibold mr-1"> - {f(amountFiat, currency)} - <span class="tect-secondary text-xl">+{f(tipAmount, currency)}</span></span - > - </div> - - <div class="ml-auto"> - <span class="text-secondary font-semibold text-sm">{s(amount)}</span> - <span class="text-secondary font-semibold text-lg">+{s(tip)} SAT</span> - </div> - </div> - - {#if tip} - <div> - <button - type="button" - class="w-full text-2xl mt-2 bg-primary text-black hover:bg-black hover:text-white font-semibold py-3 px-7 rounded-2xl" - on:click={() => submit.click()}>Next</button - > - <button - type="button" - class="w-full text-2xl mt-2 bg-primary text-black hover:bg-black hover:text-white font-semibold py-3 px-7 rounded-2xl" - on:click={() => (tipPercent = 0)}>Reset</button - > - </div> - {:else} - {#each tipAmounts as amount} - <button - type="button" - class:active={active(amount, tipPercent)} - class="w-full text-2xl text-black bg-primary hover:bg-black hover:text-white py-3 m-1 rounded-2xl font-semibold" - on:click={() => handleTipButtonClick(amount)}>{amount}</button - > - {/each} - {/if} - - <div> - <button - type="button" - class="w-full text-2xl mt-2 bg-primary text-black hover:bg-black hover:text-white font-semibold py-3 px-7 rounded-2xl" - on:click={() => (showCustomAmount = true)}>Custom</button - > - </div> - {/if} - - <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 - ? 'opacity-50' - : 'opacity-100'}">$</span - > - <input - bind:this={customInput} - type="number" - step="0.01" - on:input={(e) => handleCustomTipAmount(e)} - class="pl-10" - placeholder="Custom amount" - autofocus - /> - <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}>Apply</button - > - </div> - </form> -{/if} - -<style> - #slider { - -webkit-appearance: none; - width: 100%; - height: 6px; - border-radius: 5px; - background: linear-gradient( - to right, - black 0%, - black var(--bgPercent), - #f5f7fa var(--bgPercent), - #f5f7fa 100% - ); - outline: none; - } - - #slider:active { - background-color: black; - } - - #slider::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 30px; - height: 30px; - border-radius: 50%; - background: black; - cursor: pointer; - } - - #slider::-moz-range-thumb { - width: 30px; - height: 30px; - border-radius: 50%; - background: black; - cursor: pointer; - } - - .active { - @apply !bg-black !text-white; - } -</style> diff --git a/src/components/index.js b/src/components/index.js index c3a5000c..468e132e 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -26,4 +26,3 @@ export { default as Footer } from './Footer.svelte'; export { default as Toggle } from './Toggle.svelte'; export { default as LocationsMap } from './LocationsMap.svelte'; export { default as Qr } from './Qr.svelte'; -export { default as Tip } from './Tip.svelte'; |
