1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
<script>
import { goto } from "$app/navigation";
import InvoiceTypes from "$comp/InvoiceTypes.svelte";
let {
user,
invoice,
copy,
t,
link,
type,
showQr = $bindable(),
txt,
setAmount,
newAmount = $bindable(),
toggleType,
toggleAmount,
setType,
toggleMemo,
} = $props();
</script>
<div class="text-secondary space-y-2 text-xl pt-2">
<InvoiceTypes
{invoice}
{user}
{toggleType}
bind:newAmount
{setAmount}
{setType}
t={$t}
activeOnly={true}
/>
<div class="flex flex-wrap gap-2 justify-around text-secondary w-full">
<button type="button" class="btn !w-auto grow" onclick={() => copy(txt)}>
<iconify-icon noobserver icon="ph:copy-bold" width="32"></iconify-icon>
<div class="my-auto">
{t("payments.copy")}
</div>
</button>
<button class="btn grow !w-auto" onclick={() => goto("/receive")}>
<iconify-icon noobserver icon="ph:clipboard-text-bold" width="32"
></iconify-icon>
<div class="my-auto text-lg">{t("user.send.paste")}</div>
</button>
<button class="btn grow !w-auto" onclick={() => goto("/scan")}>
<iconify-icon noobserver icon="ph:camera-bold" width="32"></iconify-icon>
<div class="my-auto text-lg">{t("user.send.scan")}</div>
</button>
</div>
<div class="flex flex-wrap gap-2 justify-around text-secondary w-full">
{#if user?.id === invoice?.user?.id}
<button class="btn grow !w-auto" onclick={toggleAmount}>
<iconify-icon noobserver icon="ph:pencil-simple-bold" width="32"
></iconify-icon>
<div class="my-auto">{t("payments.setAmount")}</div>
</button>
{:else}
<a href={link} class="block">
<button class="btn grow !w-auto">
<iconify-icon noobserver icon="ph:wallet-bold" width="32"
></iconify-icon>
<div class="my-auto">{t("payments.openLink")}</div>
</button>
</a>
{/if}
<button class="btn grow !w-auto" onclick={toggleMemo}>
<iconify-icon noobserver icon="ph:chat-centered-text-bold" width="32"
></iconify-icon>
<div class="my-auto">
{t("invoice.setMemo")}
</div>
</button>
</div>
{#if txt.length > 120}
<div class="w-full flex justify-center gap-2 flex-wrap">
<button class="btn" onclick={() => (showQr = !showQr)}>
{#if showQr}
<iconify-icon noobserver icon="ph:text-align-center-bold" width="32"
></iconify-icon>
{:else}
<iconify-icon noobserver icon="ph:qr-code-bold" width="32"
></iconify-icon>
{/if}
<div class="my-auto">
{showQr ? t("payments.showText") : t("payments.showQr")}
</div></button
>
</div>
{/if}
</div>
|
