diff --git a/res/static/img/payment_providers/bancontact.svg b/res/static/img/payment_providers/bancontact.svg index 5d5484f..3fca830 100644 --- a/res/static/img/payment_providers/bancontact.svg +++ b/res/static/img/payment_providers/bancontact.svg @@ -1,20 +1,105 @@ - - - - - - - - - - - - - - - - - - - + + diff --git a/res/static/img/payment_providers/eps.svg b/res/static/img/payment_providers/eps.svg index dca5431..f472df3 100644 --- a/res/static/img/payment_providers/eps.svg +++ b/res/static/img/payment_providers/eps.svg @@ -1,11 +1,143 @@ - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - diff --git a/res/static/img/payment_providers/ideal.svg b/res/static/img/payment_providers/ideal.svg index b8c10f9..9401101 100644 --- a/res/static/img/payment_providers/ideal.svg +++ b/res/static/img/payment_providers/ideal.svg @@ -1,19 +1,54 @@ - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/res/static/img/payment_providers/p24.svg b/res/static/img/payment_providers/p24.svg index 2b8e43d..2fbd4d5 100644 --- a/res/static/img/payment_providers/p24.svg +++ b/res/static/img/payment_providers/p24.svg @@ -1,13 +1,6 @@ - - - - - - - - - - - - - + + + + + + \ No newline at end of file diff --git a/res/static/img/payment_providers/paypal.svg b/res/static/img/payment_providers/paypal.svg index b1d09fb..1eaa536 100644 --- a/res/static/img/payment_providers/paypal.svg +++ b/res/static/img/payment_providers/paypal.svg @@ -1,13 +1 @@ - - - - - - - - - - - - - + \ No newline at end of file diff --git a/res/static/img/payment_providers/paypal_full.svg b/res/static/img/payment_providers/paypal_full.svg deleted file mode 100644 index 1eaa536..0000000 --- a/res/static/img/payment_providers/paypal_full.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/res/static/img/payment_providers/trustly.svg b/res/static/img/payment_providers/trustly.svg new file mode 100644 index 0000000..2ef36f6 --- /dev/null +++ b/res/static/img/payment_providers/trustly.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/svelte/src/admin_panel/InvoiceVAT.svelte b/svelte/src/admin_panel/InvoiceVAT.svelte index bd31d4b..930fbaa 100644 --- a/svelte/src/admin_panel/InvoiceVAT.svelte +++ b/svelte/src/admin_panel/InvoiceVAT.svelte @@ -12,6 +12,7 @@ type Invoice = { vat: number processing_fee: number country: string + payment_gateway: string payment_method: string status: string } @@ -197,6 +198,7 @@ onMount(() => { VAT Fee Country + Gateway Method Status @@ -210,6 +212,7 @@ onMount(() => { {row.country} + {row.payment_gateway} {row.payment_method} {row.status} diff --git a/svelte/src/home_page/GetStarted.svelte b/svelte/src/home_page/GetStarted.svelte index d864888..68b93a9 100644 --- a/svelte/src/home_page/GetStarted.svelte +++ b/svelte/src/home_page/GetStarted.svelte @@ -1,5 +1,5 @@ @@ -19,13 +19,13 @@ import Euro from "util/Euro.svelte"; balance is . Use the form below to top up your balance.

- + {:else}

You are currently logged in as '{window.user.username}'. Use the form below to activate prepaid on this account.

- + {/if} diff --git a/svelte/src/layout/CreditDeposit.svelte b/svelte/src/layout/CreditDeposit.svelte deleted file mode 100644 index 7772a4a..0000000 --- a/svelte/src/layout/CreditDeposit.svelte +++ /dev/null @@ -1,334 +0,0 @@ - - -
- - - {#if country === null} - -
- Please pick your country of residence -
-
-
-
- - {#each countries.all.filter(c => c.status === "assigned") as c} - - {/each} - - - -
- -
-
-
-
- We support the following payment processors -
-
- {#each payment_providers as p (p.name)} -
- {p.name} - {p.name} -
- {/each} -
- - {:else if provider === null} - - -

Please select a payment provider

- -
- {#each providers as p (p.name)} - - {/each} -
- - {:else} - - - {#if provider.crypto === true} -

- When paying with cryptocurrencies it is important that you pay the - exact amount stated on the order. If you pay too little, the - order fails. If you pay too much then the remaining credit will not - be added to your account. Pay close attention when sending a payment - from an online exchange, sometimes they will subtract the fees from - the amount sent which will cause the payment to fail. -

- {/if} - -
-
Please choose an amount
- {#each amounts as a} - - {/each} - -
-
Custom amount €
- -
- -
- Total including VAT: - -
- - -
-
-

- This Pixeldrain premium plan costs €1 per month, but due to - processing fees we can't accept payments less than €10. So your - deposit will give roughly 10 months of premium service depending on - usage. You can track your spending on the transactions page. -

- {/if} -
- - diff --git a/svelte/src/layout/CreditDepositNav.svelte b/svelte/src/layout/CreditDepositNav.svelte deleted file mode 100644 index abda731..0000000 --- a/svelte/src/layout/CreditDepositNav.svelte +++ /dev/null @@ -1,29 +0,0 @@ - - -
- {#if provider !== null} - - {:else if country !== null} - - {/if} -
-
- Paying from - {country.emoji} - - {country.name} - ({vat}% VAT) - {#if provider !== null}with {provider.label}{/if} - -
-
diff --git a/svelte/src/layout/checkout/Checkout.svelte b/svelte/src/layout/checkout/Checkout.svelte new file mode 100644 index 0000000..38d7f4d --- /dev/null +++ b/svelte/src/layout/checkout/Checkout.svelte @@ -0,0 +1,100 @@ + + +
+ + + {#if state.country !== null} +
+ {#if state.country !== null} + + {/if} + + {#if state.provider !== null} + + {/if} + + {#if state.name !== ""} + + {/if} +
+
+ {/if} + + {#if state.country === null} + + {:else if state.provider === null} + + {:else if state.provider.need_name === true && state.name === ""} + + {:else} + + {/if} +
+ + diff --git a/svelte/src/layout/checkout/CheckoutLib.ts b/svelte/src/layout/checkout/CheckoutLib.ts new file mode 100644 index 0000000..657b5f4 --- /dev/null +++ b/svelte/src/layout/checkout/CheckoutLib.ts @@ -0,0 +1,106 @@ +import type { countries } from "country-data-list"; +import { get_endpoint } from "lib/PixeldrainAPI"; + +export type CheckoutState = { + country: typeof countries.all[0] + provider: PaymentProvider + amount: number + vat: number + name: string +} + +export type PaymentProvider = { + icon: string + name: string + label: string + crypto?: boolean + need_name?: boolean + country_filter?: string[] +}; + +export const payment_providers: PaymentProvider[] = [ + { + icon: "paypal", + name: "paypal", + label: "PayPal", + }, { + icon: "bancontact", + name: "bancontact", + label: "Bancontact", + need_name: true, + country_filter: ["BE"], + }, { + icon: "eps", + name: "eps", + label: "EPS", + need_name: true, + country_filter: ["AT"], + }, { + icon: "ideal", + name: "ideal", + label: "iDEAL", + need_name: true, + country_filter: ["NL"], + }, { + icon: "p24", + name: "p24", + label: "Przelewy24", + need_name: true, + country_filter: ["PL"], + }, { + // icon: "trustly", + // name: "trustly", + // label: "Trustly", + // need_name: true, + // country_filter: ["AT", "DE", "DK", "EE", "ES", "FI", "GB", "LT", "LV", "NL", "NO", "SE"] + // }, { + icon: "bitcoin", + name: "btc", + label: "Bitcoin", + crypto: true, + }, { + icon: "dogecoin", + name: "doge", + label: "Dogecoin", + crypto: true, + }, { + icon: "monero", + name: "xmr", + label: "Monero", + crypto: true, + }, +] + +export const checkout = async (state: CheckoutState) => { + if (state.amount < 10) { + alert("Amount needs to be at least €10") + return + } else if (state.provider.need_name && !state.name) { + alert("Name is required for this provider") + return + } + + const form = new FormData() + form.set("amount", String(state.amount * 1e6)) + form.set("network", state.provider.name) + form.set("country", state.country.alpha2) + + if (state.provider.need_name) { + form.set("name", state.name) + } + + try { + const resp = await fetch( + get_endpoint() + "/user/invoice", + { method: "POST", body: form }, + ) + if (resp.status >= 400) { + let json = await resp.json() + throw json.message + } + + window.location = (await resp.json()).checkout_url + } catch (err) { + alert(err) + } +} diff --git a/svelte/src/layout/checkout/PickAmount.svelte b/svelte/src/layout/checkout/PickAmount.svelte new file mode 100644 index 0000000..c296e39 --- /dev/null +++ b/svelte/src/layout/checkout/PickAmount.svelte @@ -0,0 +1,97 @@ + + +{#if state.provider.crypto === true} +

+ When paying with cryptocurrencies it is important that you pay + the exact amount stated on the order. If you pay too + little, the order fails. If you pay too much then the remaining + credit will not be added to your account. Pay close attention + when sending a payment from an online exchange, sometimes they + will subtract the fees from the amount sent which will cause the + payment to fail. +

+{/if} + +
+
Please choose an amount
+ {#each amounts as a} + + {/each} + +
+
Custom amount €
+ +
+ +
+ Total including VAT: + +
+ + +
+
+

+ This Pixeldrain premium plan costs €1 per month, but due to + processing fees we can't accept payments less than €10. So your + deposit will give roughly 10 months of premium service depending on + usage. You can track your spending on the transactions page. +

+ + diff --git a/svelte/src/layout/checkout/PickCountry.svelte b/svelte/src/layout/checkout/PickCountry.svelte new file mode 100644 index 0000000..aabf169 --- /dev/null +++ b/svelte/src/layout/checkout/PickCountry.svelte @@ -0,0 +1,122 @@ + + +
+ Please pick your country of residence +
+
+
+
+ + {#each countries.all.filter(c => c.status === "assigned") as c} + + {/each} + + + +
+ +
+
+
+
+ We support the following payment processors +
+
+ {#each payment_providers as p (p.name)} +
+ {p.label} + {p.label} +
+ {/each} +
+ + diff --git a/svelte/src/layout/checkout/PickName.svelte b/svelte/src/layout/checkout/PickName.svelte new file mode 100644 index 0000000..e2c9fcc --- /dev/null +++ b/svelte/src/layout/checkout/PickName.svelte @@ -0,0 +1,50 @@ + + +
+
+ This payment provider requires a name for checkout. Please enter your + full name below +
+ + + +
+
+

+ This Pixeldrain premium plan costs €1 per month, but due to + processing fees we can't accept payments less than €10. So your + deposit will give roughly 10 months of premium service depending on + usage. You can track your spending on the transactions page. +

+ + diff --git a/svelte/src/layout/checkout/PickProvider.svelte b/svelte/src/layout/checkout/PickProvider.svelte new file mode 100644 index 0000000..9319be3 --- /dev/null +++ b/svelte/src/layout/checkout/PickProvider.svelte @@ -0,0 +1,44 @@ + + +Please select a payment provider + +
+ {#each payment_providers as p (p.name)} + {#if p.country_filter === undefined || p.country_filter.includes(state.country.alpha2)} + + {/if} + {/each} +
+ + diff --git a/svelte/src/lib/PixeldrainAPI.ts b/svelte/src/lib/PixeldrainAPI.ts index 6fedb62..5b5bb22 100644 --- a/svelte/src/lib/PixeldrainAPI.ts +++ b/svelte/src/lib/PixeldrainAPI.ts @@ -24,6 +24,9 @@ export type User = { file_embed_domains: string, skip_file_viewer: boolean, affiliate_user_name: string, + checkout_country: string, + checkout_name: string, + checkout_provider: string, } export type Subscription = { diff --git a/svelte/src/user_home/AccountSettings.svelte b/svelte/src/user_home/AccountSettings.svelte index 5281152..fc2de01 100644 --- a/svelte/src/user_home/AccountSettings.svelte +++ b/svelte/src/user_home/AccountSettings.svelte @@ -4,6 +4,7 @@ import CopyButton from "layout/CopyButton.svelte"; import Form from "util/Form.svelte"; import Button from "layout/Button.svelte"; import OtpSetup from "./OTPSetup.svelte"; + import { put_user } from "lib/PixeldrainAPI"; let affiliate_link = window.location.protocol+"//"+window.location.host + "?ref=" + encodeURIComponent(window.user.username) let affiliate_deny = false @@ -52,6 +53,22 @@ let account_settings = { log in. If you forget your username you can still log in using your e-mail address if you have one configured`, separator: true, + }, { + name: "checkout_country", + label: "Country code used at checkout", + type: "text", + default_value: window.user.checkout_country, + }, { + name: "checkout_provider", + label: "Default payment provider used at checkout", + type: "text", + default_value: window.user.checkout_provider, + }, { + name: "checkout_name", + label: "Full name used at checkout", + type: "text", + default_value: window.user.checkout_name, + separator: true, }, ], submit_label: `save Save`, @@ -67,11 +84,23 @@ let account_settings = { form.append("email", fields.email) form.append("password_new", fields.password_new1) form.append("username", fields.username) + form.append("checkout_country", fields.checkout_country) + form.append("checkout_provider", fields.checkout_provider) + form.append("checkout_name", fields.checkout_name) - const resp = await fetch(window.api_endpoint+"/user", { method: "PUT", body: form }); - if(resp.status >= 400) { - return {error_json: await resp.json()} + try { + await put_user({ + email: fields.email, + password_new: fields.password_new1, + username: fields.username, + checkout_country: fields.checkout_country, + checkout_provider: fields.checkout_provider, + checkout_name: fields.checkout_name, + }) + } catch (err) { + return {error_json: err} } + return {success: true, message: "Success! Your changes have been saved"} }, } diff --git a/svelte/src/user_home/DepositCredit.svelte b/svelte/src/user_home/DepositCredit.svelte index f96321f..d02388b 100644 --- a/svelte/src/user_home/DepositCredit.svelte +++ b/svelte/src/user_home/DepositCredit.svelte @@ -1,5 +1,5 @@