Add Mollie payment terminal

svelte/src/user_home/DepositCredit.svelte

@@ -3,20 +3,28 @@ import { onMount } from "svelte";
 import Euro from "../util/Euro.svelte";
 import { formatDate } from "../util/Formatting.svelte";
 import LoadingIndicator from "../util/LoadingIndicator.svelte";
+import MollieDeposit from "./MollieDeposit.svelte";
 
 let loading = false
 let credit_amount = 10
 
-const checkout = async (network) => {
+const checkout = async (network = "", amount = 0, country = "") => {
 	loading = true
+
+	if (amount < 10) {
+		alert("Amount needs to be at least €10")
+		return
+	}
+
 	const form = new FormData()
-	form.set("amount", credit_amount*1e6)
+	form.set("amount", amount*1e6)
 	form.set("network", network)
+	form.set("country", country)
 
 	try {
 		const resp = await fetch(
-			window.api_endpoint+"/btcpay/deposit",
-			{ method: "POST", body: form },
+			window.api_endpoint+"/user/invoice",
+			{method: "POST", body: form},
 		)
 		if(resp.status >= 400) {
 			let json = await resp.json()
@@ -35,7 +43,7 @@ let invoices = []
 const load_invoices = async () => {
 	loading = true
 	try {
-		const resp = await fetch(window.api_endpoint+"/btcpay/invoice")
+		const resp = await fetch(window.api_endpoint+"/user/invoice")
 		if(resp.status >= 400) {
 			throw new Error((await resp.json()).message)
 		}
@@ -66,19 +74,19 @@ onMount(() => {
 <section>
 	<h2>Deposit credits</h2>
 	<p>
-		To deposit funds on your pixeldrain account please contact
-		<a href="mailto:sales@pixeldrain.com">sales@pixeldrain.com</a>. We will
-		prepare an invoice for you. We accept wire transfers and PayPal. As we
-		are located in the Netherlands SEPA payments should be free and instant.
+		Pixeldrain credits can be used for our prepaid plans, which are
+		different from the Patreon plans. With prepaid you only pay for what you
+		use, at a rate of €4 per TB per month for storage and €2 per TB for data
+		transfer.
 	</p>
 	<p>
-		Pixeldrain credits can be used for our prepaid plans, which are
-		different from the Patreon plans. Because preparing invoices requires
-		some manual labour we only accept deposits of €100 or more. The prepaid
-		plans are meant for people who require a lot of bandwidth or storage.
-		Paying only for what you use means you can save money compared to a
-		fixed monthly price.
+		Use the form below to deposit credit on your pixeldrain account using
+		Mollie. The minimum deposit is €10. <b>Mollie payments are currently
+		only available in Europe</b>.
 	</p>
+
+	<MollieDeposit on:checkout={e => checkout("mollie", e.detail.amount, e.detail.country)}/>
+
 	<h3>Crypto payments</h3>
 	<p>
 		Alternatively you can use Bitcoin, Lightning network (<a
@@ -94,16 +102,16 @@ onMount(() => {
 	</p>
 	<div class="highlight_border">
 		Deposit amount €
-		<input type="number" bind:value={credit_amount} min="1"/>
+		<input type="number" bind:value={credit_amount} min="10"/>
 		<br/>
 		Choose payment method:<br/>
-		<button on:click={() => {checkout("btc")}}>
+		<button on:click={() => {checkout("btc", credit_amount)}}>
 			<span class="icon_unicode">₿</span> Bitcoin
 		</button>
-		<button on:click={() => {checkout("btc_lightning")}}>
+		<button on:click={() => {checkout("btc_lightning", credit_amount)}}>
 			<i class="icon">bolt</i> Lightning network
 		</button>
-		<button on:click={() => {checkout("doge")}}>
+		<button on:click={() => {checkout("doge", credit_amount)}}>
 			<span class="icon_unicode">Ð</span> Dogecoin
 		</button>
 	</div>
@@ -118,6 +126,9 @@ onMount(() => {
 				<tr>
 					<td>Created</td>
 					<td>Amount</td>
+					<td>VAT</td>
+					<td>Country</td>
+					<td>Method</td>
 					<td>Status</td>
 					<td></td>
 				</tr>
@@ -126,23 +137,28 @@ onMount(() => {
 				{#each invoices as row (row.id)}
 					<tr>
 						<td>{formatDate(row.time, true, true, false)}</td>
-						<td><Euro amount={row.amount}></Euro></td>
+						<td><Euro amount={row.amount}/></td>
+						<td><Euro amount={row.vat}/></td>
+						<td>{row.country}</td>
+						<td>{row.payment_method}</td>
 						<td>
-							{#if row.status === "InvoiceCreated"}
-								New (waiting for payment)
+							{#if row.status === "InvoiceCreated" || row.status === "open"}
+								Waiting for payment
 							{:else if row.status === "InvoiceProcessing"}
 								Payment received, waiting for confirmations
-							{:else if row.status === "InvoiceSettled"}
+							{:else if row.status === "InvoiceSettled" || row.status === "paid"}
 								Paid
 							{:else if row.status === "InvoiceExpired"}
 								Expired
+							{:else if row.status === "canceled"}
+								Canceled
 							{:else}
 								{row.status}
 							{/if}
 						</td>
 						<td>
-							{#if row.status === "New" || row.status === "InvoiceCreated"}
-								<a href={row.checkout_url} class="button button_highlight">
+							{#if row.status === "New" || row.status === "InvoiceCreated" || row.status === "open"}
+								<a href="/api/user/pay_invoice/{row.id}" class="button button_highlight">
 									<i class="icon">paid</i> Pay
 								</a>
 							{/if}