Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-03-06 09:08:49 +01:00
Code Issues Projects Releases Packages Wiki Activity

web/donate: use links instead of onclick handler

Browse source
This commit is contained in:
dumbmoron 2024-09-09 12:57:58 +00:00
parent fba64df118
commit 3156831847
No known key found for this signature in database
2 changed files with 15 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
web/src/components/donate/DonateOptionsCard.svelte
View file

@ -20,6 +20,7 @@
import IconPhoto from "@tabler/icons-svelte/IconPhoto.svelte"; import IconPhoto from "@tabler/icons-svelte/IconPhoto.svelte";
import IconWorldWww from "@tabler/icons-svelte/IconWorldWww.svelte"; import IconWorldWww from "@tabler/icons-svelte/IconWorldWww.svelte";
import IconBath from "@tabler/icons-svelte/IconBath.svelte"; import IconBath from "@tabler/icons-svelte/IconBath.svelte";
import OuterLink from "$components/misc/OuterLink.svelte";
let customInput: HTMLInputElement; let customInput: HTMLInputElement;
let customInputValue: number | null; let customInputValue: number | null;
@ -44,32 +45,28 @@
type Processor = "stripe" | "liberapay"; type Processor = "stripe" | "liberapay";
let processor: Processor = "stripe"; let processor: Processor = "stripe";
const donationMethods: Record<Processor, (_: number) => void> = { const donationMethods: Record<Processor, (_: number) => string> = {
stripe: (amount: number) => { stripe: (amount: number) => {
const url = new URL(donate.stripe); const url = new URL(donate.stripe);
url.searchParams.set("__prefilled_amount", amount.toString()); url.searchParams.set("__prefilled_amount", amount.toString());
window.open(url, "_blank"); return url.toString();
}, },
liberapay: (amount: number) => { liberapay: (amount: number) => {
const url = new URL(donate.liberapay); const url = new URL(donate.liberapay);
url.searchParams.set("currency", "USD"); url.searchParams.set("currency", "USD");
url.searchParams.set("period", "monthly"); url.searchParams.set("period", "monthly");
url.searchParams.set("amount", (amount / 100).toString()); url.searchParams.set("amount", (amount / 100).toString());
window.open(url, "_blank"); return url.toString();
}, },
}; };
const send = (amount: number) => {
return donationMethods[processor](amount);
};
const sendCustom = () => { const sendCustom = () => {
if (!customInput.reportValidity()) { if (!customInput.reportValidity()) {
return; return;
} }
const amount = Number(customInputValue) * 100; const amount = Number(customInputValue) * 100;
send(amount); return donationMethods[processor](amount);
}; };
</script> </script>
@ -110,9 +107,11 @@
</div> </div>
<div id="donation-options"> <div id="donation-options">
{#each Object.entries(PRESET_DONATION_AMOUNTS) as [ amount, component ]} {#each Object.entries(PRESET_DONATION_AMOUNTS) as [ amount, component ]}
<DonationOption price={+amount} desc={$t(`donate.card.option.${amount}`)} {send}> <OuterLink href={donationMethods[processor](+amount * 100)}>
<svelte:component this={component} /> <DonationOption price={+amount} desc={$t(`donate.card.option.${amount}`)}>
</DonationOption> <svelte:component this={component} />
</DonationOption>
</OuterLink>
{/each} {/each}
</div> </div>
<div id="donation-custom"> <div id="donation-custom">
@ -313,4 +312,8 @@
display: block; display: block;
} }
} }
#donation-options > :global(a) {
text-decoration: none;
}
</style> </style>

4
web/src/components/donate/DonationOption.svelte
View file

@ -1,9 +1,7 @@
<script lang="ts"> <script lang="ts">
export let price: number; export let price: number;
export let desc: string; export let desc: string;
export let send: (amount: number) => void;
const click = () => send(price * 100);
const USD = new Intl.NumberFormat('en-US', { const USD = new Intl.NumberFormat('en-US', {
style: 'currency', style: 'currency',
currency: 'USD', currency: 'USD',
@ -11,7 +9,7 @@
}); });
</script> </script>
<button class="donation-option" on:click={click}> <button class="donation-option">
<div class="donate-card-title"> <div class="donate-card-title">
<slot></slot> <slot></slot>
{ USD.format(price) } { USD.format(price) }