Enable global payments with PayPal

svelte/package.json

@@ -21,7 +21,6 @@
   },
   "dependencies": {
     "behave-js": "^1.5.0",
-    "chart.js": "^4.2.0",
-    "svelte-flag-icons": "^0.7.1"
+    "chart.js": "^4.2.0"
   }
 }

svelte/src/home_page/FeatureTable.svelte

@@ -37,7 +37,8 @@ onMount(() => {
 			<span class="bold">Pro</span>
 		</div>
 		<div class="top_row prepaid_feat">
-			<span class="bold">Prepaid</span> (currently only in Europe)
+			<span class="bold">Prepaid</span><br/>
+			Now available worldwide!
 		</div>
 
 		<div class="left_col">
@@ -134,34 +135,6 @@ onMount(() => {
 			<span class="bold">100 GB</span> per file
 		</div>
 
-		<div class="left_col">
-			Advertising
-		</div>
-		<div class="feature_cell span3 pro_feat">
-			<span class="bold">None</span>. Pixeldrain does not have third-party
-			advertising. Though we do promote our own product on the free plan
-		</div>
-
-		<div class="left_col">
-			Privacy
-		</div>
-		<div class="feature_cell span3 pro_feat">
-			<span class="bold">Completely private</span>.
-			No third party tracking scripts and no logging
-		</div>
-
-		<div class="left_col">
-			Download page customization
-		</div>
-		<div class="feature_cell free_feat span2">
-			No customization
-		</div>
-		<div class="feature_cell prepaid_feat">
-			Custom <span class="bold">colour theme</span>,
-			<span class="bold">background</span> and
-			<span class="bold">banner images</span>
-		</div>
-
 		<div class="left_col">
 			Online file previews
 		</div>
@@ -169,10 +142,20 @@ onMount(() => {
 			<span class="bold">Image, audio, video, PDF and text files</span><br/>
 			Can all be viewed in the browser
 		</div>
-		<!-- <div class="feature_cell span2 pro_feat">
-			<span class="bold">Video streaming</span><br/>
-			Plus the free previews of course
-		</div> -->
+
+		<div class="left_col">
+			Payment processors
+		</div>
+		<div class="feature_cell free_feat">
+			None
+		</div>
+		<div class="feature_cell pro_feat">
+			<span class="bold">PayPal</span>, <span class="bold">Credit card</span>
+		</div>
+		<div class="feature_cell prepaid_feat">
+			<span class="bold">PayPal</span>, <span class="bold">SEPA</span><br/>
+			And many EU regional providers
+		</div>
 
 		<div></div>
 		<div class="bottom_row free_feat">

svelte/src/home_page/HomePage.svelte

@@ -39,9 +39,23 @@ import UploadWidget from "./UploadWidget.svelte";
 			An account is not required to use pixeldrain, but it enables some
 			useful features. With a pixeldrain account you can access your files
 			and albums on all your devices. You can also rename and delete files
-			you have uploaded. And create and reorder albums you have created.
-			Sign up for a pixeldrain account on <a href="/register">the
-			registration page</a>. More about pixeldrain's features below.
+			you have uploaded. Sign up for a pixeldrain account on
+			<a href="/register">the registration page</a>. More about
+			pixeldrain's features below.
+		</p>
+		<h2>Privacy</h2>
+		<p>
+			Privacy is an important value for pixeldrain. There is too much
+			tracking on the web nowadays. Pixeldrain goes in the other
+			direction, this site does not contain any advertisements or third
+			party tracking scripts. We don't even require you to enter an e-mail
+			address to register an account.
+		</p>
+		<p>
+			Not running ads does mean that we miss out on a lot of revenue of
+			course. Running a site like this is a very expensive endeavour.
+			Please consider supporting the project with one of the premium plans
+			below.
 		</p>
 	</section>
 </div>

svelte/src/user_home/MollieDeposit.svelte

@@ -1,8 +1,4 @@
 <script>
-import {
-	At, Be, Bg, Hr, Cy, Cz, Dk, Ee, Fi, Fr, De, Gr, Hu, Ie, It, Lv, Lt, Lu, Mt,
-	Nl, Pl, Pt, Ro, Sk, Si, Es, Se,
-} from 'svelte-flag-icons';
 import Euro from '../util/Euro.svelte';
 import LoadingIndicator from '../util/LoadingIndicator.svelte';
 
@@ -14,33 +10,34 @@ $: credit_micro = amount*1e6
 $: vat_micro = country === null ? 0 : (amount*1e6)*(country.vat/100)
 
 let countries = [
-	{name: "Austria", code: At, vat: 20},
-	{name: "Belgium", code: Be, vat: 21},
-	{name: "Bulgaria", code: Bg, vat: 20},
-	{name: "Croatia", code: Hr, vat: 25},
-	{name: "Cyprus", code: Cy, vat: 19},
-	{name: "Czechia", code: Cz, vat: 21},
-	{name: "Denmark", code: Dk, vat: 25},
-	{name: "Estonia", code: Ee, vat: 20},
-	{name: "Finland", code: Fi, vat: 24},
-	{name: "France", code: Fr, vat: 20},
-	{name: "Germany", code: De, vat: 19},
-	{name: "Greece", code: Gr, vat: 24},
-	{name: "Hungary", code: Hu, vat: 27},
-	{name: "Ireland", code: Ie, vat: 23},
-	{name: "Italy", code: It, vat: 22},
-	{name: "Latvia", code: Lv, vat: 21},
-	{name: "Lithuania", code: Lt, vat: 21},
-	{name: "Luxembourg", code: Lu, vat: 16},
-	{name: "Malta", code: Mt, vat: 18},
-	{name: "Netherlands", code: Nl, vat: 21},
-	{name: "Poland", code: Pl, vat: 23},
-	{name: "Portugal", code: Pt, vat: 23},
-	{name: "Romania", code: Ro, vat: 19},
-	{name: "Slovakia", code: Sk, vat: 20},
-	{name: "Slovenia", code: Si, vat: 22},
-	{name: "Spain", code: Es, vat: 21},
-	{name: "Sweden", code: Se, vat: 25},
+	{name: "Austria", flag: "🇦🇹", vat: 20},
+	{name: "Belgium", flag: "🇧🇪", vat: 21},
+	{name: "Bulgaria", flag: "🇧🇬", vat: 20},
+	{name: "Croatia", flag: "🇭🇷", vat: 25},
+	{name: "Cyprus", flag: "🇨🇾", vat: 19},
+	{name: "Czechia", flag: "🇨🇿", vat: 21},
+	{name: "Denmark", flag: "🇩🇰", vat: 25},
+	{name: "Estonia", flag: "🇪🇪", vat: 20},
+	{name: "Finland", flag: "🇫🇮", vat: 24},
+	{name: "France", flag: "🇫🇷", vat: 20},
+	{name: "Germany", flag: "🇩🇪", vat: 19},
+	{name: "Greece", flag: "🇬🇷", vat: 24},
+	{name: "Hungary", flag: "🇭🇺", vat: 27},
+	{name: "Ireland", flag: "🇮🇪", vat: 23},
+	{name: "Italy", flag: "🇮🇹", vat: 22},
+	{name: "Latvia", flag: "🇱🇻", vat: 21},
+	{name: "Lithuania", flag: "🇱🇹", vat: 21},
+	{name: "Luxembourg", flag: "🇱🇺", vat: 16},
+	{name: "Malta", flag: "🇲🇹", vat: 18},
+	{name: "Netherlands", flag: "🇳🇱", vat: 21},
+	{name: "Poland", flag: "🇵🇱", vat: 23},
+	{name: "Portugal", flag: "🇵🇹", vat: 23},
+	{name: "Romania", flag: "🇷🇴", vat: 19},
+	{name: "Slovakia", flag: "🇸🇰", vat: 20},
+	{name: "Slovenia", flag: "🇸🇮", vat: 22},
+	{name: "Spain", flag: "🇪🇸", vat: 21},
+	{name: "Sweden", flag: "🇸🇪", vat: 25},
+	{name: "Other", flag: "🌐", vat: 0},
 ]
 
 let amounts = [10, 20, 50, 100, 200, 500, 1000, 2000, 5000]
@@ -89,11 +86,7 @@ const checkout = async () => {
 		<div class="countries">
 			{#each countries as c}
 				<button on:click={() => country = c}>
-					{#if c.code}
-						<svelte:component this={c.code} size="1.5em" />
-					{:else}
-						<i class="icon">public</i>
-					{/if}
+					<span style="font-size: 1.7em; line-height: 0.9em;">{c.flag}</span>
 					<span>{c.name}</span>
 				</button>
 			{/each}
@@ -158,11 +151,7 @@ const checkout = async () => {
 			<div style="flex: 1 1 auto;"></div>
 			<div style="flex: 0 0 auto; display: flex; gap: 0.25em; align-items: center;">
 				<span>Paying from</span>
-				{#if country.code}
-					<svelte:component this={country.code} size="1.5em" />
-				{:else}
-					<i class="icon">public</i>
-				{/if}
+				<span style="font-size: 1.5em; line-height: 1em;">{country.flag}</span>
 				<span>{country.name} ({country.vat}% VAT)</span>
 			</div>
 		</div>

svelte/src/user_home/Subscription.svelte

@@ -32,13 +32,11 @@ const update = async () => {
 	}
 }
 
-
 let checkout_success = false
 
 onMount(() => {
 	if (window.location.hash === "#checkout_complete") {
 		checkout_success = true
-		window.location.hash = ""
 	}
 })
 </script>
@@ -58,8 +56,9 @@ onMount(() => {
 				If your account credit has not been updated, please check the
 				status of your invoice on <a
 				href="/user/prepaid/deposit#invoices">the invoices page</a>.
-				Depending on the payment processor you used to can take a while
-				before your credit is deposited. If it takes too long contact
+				Depending on the payment processor you used it can take a while
+				before your credit is deposited. SEPA transfers can take up to
+				two working days for example. If it takes too long contact
 				support@pixeldrain.com.
 			</p>
 		</div>