aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/Qr.svelte9
-rw-r--r--src/components/Tip.svelte215
-rw-r--r--src/components/index.js1
-rw-r--r--src/routes/invoice/[id]/+page.svelte36
-rw-r--r--src/routes/invoice/[id]/tip/+page.svelte41
5 files changed, 36 insertions, 266 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';
diff --git a/src/routes/invoice/[id]/+page.svelte b/src/routes/invoice/[id]/+page.svelte
index 16ec186e..17eac2f5 100644
--- a/src/routes/invoice/[id]/+page.svelte
+++ b/src/routes/invoice/[id]/+page.svelte
@@ -3,7 +3,7 @@
import { onMount, onDestroy } from 'svelte';
import { browser } from '$app/environment';
import { invoices, last } from '$lib/store';
- import { Icon, Heart, Image, Qr, Tip } from '$comp';
+ import { Icon, Heart, Image, Qr } from '$comp';
import { goto } from '$app/navigation';
import { t } from '$lib/translations';
@@ -62,7 +62,7 @@
<div
class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 space-x-0 lg:space-x-24"
>
- <div class="text-center space-y-5">
+ <div class="text-center">
<span class="text-secondary block text-2xl break-all"
>Scan to pay <a href="/{username}" class="text-black font-semibold hover:opacity-80"
>{username}</a
@@ -71,7 +71,7 @@
<Qr {text} image={'/images/invoice.svg'} bind:qr />
- <div>
+ <div class="mb-10">
<button
class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80 mb-2 mx-auto"
on:click={() => copy(text)}
@@ -81,21 +81,23 @@
</div>
<div class="px-5 space-y-3">
- <div class="flex justify-between">
- <span class="font-semibold text-sm">{$t('invoice.invoice')}</span>
- <span class="font-semibold text-sm"
- >{f(amountFiat, currency)}
- <span class="text-secondary font-normal">{`(${s(amount)} SAT)`}</span></span
- >
- </div>
+ {#if invoice.tip}
+ <div class="flex justify-between">
+ <span class="font-semibold text-sm">{$t('invoice.invoice')}</span>
+ <span class="font-semibold text-sm"
+ >{f(amountFiat, currency)}
+ <span class="text-secondary font-normal">{`(${s(amount)} SAT)`}</span></span
+ >
+ </div>
- <div class="flex justify-between">
- <span class="font-semibold text-sm">{$t('invoice.tip')}</span>
- <span class="font-semibold text-sm"
- >{f(tipAmount, currency)}
- <span class="text-secondary font-normal">{`(${s(tip)} SAT)`}</span></span
- >
- </div>
+ <div class="flex justify-between">
+ <span class="font-semibold text-sm">{$t('invoice.tip')}</span>
+ <span class="font-semibold text-sm"
+ >{f(tipAmount, currency)}
+ <span class="text-secondary font-normal">{`(${s(tip)} SAT)`}</span></span
+ >
+ </div>
+ {/if}
<div class="flex flex-wrap justify-between">
<span class="font-bold mr-1">{$t('invoice.total')}</span>
diff --git a/src/routes/invoice/[id]/tip/+page.svelte b/src/routes/invoice/[id]/tip/+page.svelte
index 26eeba31..12e8e257 100644
--- a/src/routes/invoice/[id]/tip/+page.svelte
+++ b/src/routes/invoice/[id]/tip/+page.svelte
@@ -2,13 +2,13 @@
import { browser } from '$app/environment';
import { invoices } from '$lib/store';
import { copy, f, get, reverseFormat, s, sats } from '$lib/utils';
- import { Icon, Tip } from '$comp';
+ import { Icon } from '$comp';
import { goto } from '$app/navigation';
import { t } from '$lib/translations';
import { enhance } from '$app/forms';
import { tick } from 'svelte';
- const tipAmounts = ['No thank you', '10%', '15%', '20%'];
+ const tipAmounts = ['None', '10%', '15%', '20%'];
let showCustomAmount;
let customInput;
@@ -44,7 +44,7 @@
let submitting;
const handleTipButtonClick = async (amount) => {
submitting = true;
- if (amount === 'No thank you') {
+ if (amount === 'None') {
tipPercent = 0;
} else {
tipPercent = parseInt(amount.slice(0, 2));
@@ -138,50 +138,37 @@
on:input={handleSlide}
/>
- <div class="flex mb-8">
+ <div class="flex mb-8 text-sm">
<div>
- <span class="text-sm font-semibold mr-1">
+ <span class="mr-1">
{f(amountFiat, currency)}
- <span class="tect-secondary text-xl">+{f(tipAmount, currency)}</span></span
- >
+ <span class="font-semibold">+{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>
+ {s(amount)}
+ <span class="font-semibold">+{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
- >
+ <button type="button" on:click={() => submit.click()}>Next</button>
+ <button type="button" 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
- >
+ <button type="button" on:click={() => (showCustomAmount = true)}>Custom</button>
</div>
{/if}
@@ -258,4 +245,8 @@
.active {
@apply !bg-black !text-white;
}
+
+ .container button[type='button'] {
+ @apply w-full mt-2 bg-primary text-black hover:bg-black hover:text-white font-semibold py-5 px-7 rounded-2xl;
+ }
</style>
generated by cgit v1.2.3 (git 2.51.0) at 2026-10-15 21:01:26 +0000