fnx_web/svelte/src/user_home/Transactions.svelte

<script>
import { onMount } from "svelte";
import { formatDataVolume, formatDate } from "../util/Formatting.svelte";
import Spinner from "../util/Spinner.svelte";
import Euro from "../util/Euro.svelte"

let loading = false
let months = []

const load_transactions = async () => {
	loading = true
	try {
		// We keep fetching history until there is no history left
		let now = new Date()
		while (true) {
			const resp = await fetch(
				window.api_endpoint+"/user/transactions/" +
					now.getFullYear()+"-"+("00"+(now.getMonth()+1)).slice(-2),
			)
			if(resp.status >= 400) {
				let json = await resp.json()
				if (json.value === "authentication_failed") {
					window.location = "/login"
					return
				} else {
					throw new Error(json.message)
				}
			}

			let month = {
				rows: await resp.json(),
				month: now.getFullYear()+"-"+("00"+(now.getMonth()+1)).slice(-2),
				total_subscription_charge: 0,
				total_storage_charge: 0,
				total_bandwidth_charge: 0,
				total_deposited: 0,
				total_deducted: 0,
			}

			if (month.rows.length === 0) {
				break
			}

			month.rows.forEach(row => {
				row.time = new Date(row.time)
				month.total_deposited += row.deposit_amount
				month.total_subscription_charge += row.subscription_charge
				month.total_storage_charge += row.storage_charge
				month.total_bandwidth_charge += row.bandwidth_charge
				month.total_deducted += row.subscription_charge + row.storage_charge + row.bandwidth_charge
			})
			months.push(month)
			months = months

			// Fetch the previous month
			now.setMonth(now.getMonth()-1)
		}
	} catch (err) {
		alert(err)
	} finally {
		loading = false
	}
};

let credit_amount = 10

const checkout = async () => {
	loading = true
	const form = new FormData()
	form.set("amount", credit_amount*1e6)

	try {
		const resp = await fetch(
			window.api_endpoint+"/btcpay/deposit",
			{ 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)
	} finally {
		loading = false
	}
}

let show_expired = false
let invoices = []
const load_invoices = async () => {
	loading = true
	try {
		const resp = await fetch(window.api_endpoint+"/btcpay/invoice")
		if(resp.status >= 400) {
			throw new Error((await resp.json()).message)
		}

		let invoices_tmp = await resp.json()
		invoices_tmp.forEach(row => {
			row.time = new Date(row.time)
		})
		invoices_tmp.sort((a, b) => {
			return b.time - a.time
		})
		invoices = invoices_tmp
	} catch (err) {
		alert(err)
	} finally {
		loading = false
	}
};

onMount(() => {
	load_transactions()
	load_invoices()
})
</script>

<div>
	{#if loading}
		<div class="spinner_container">
			<Spinner />
		</div>
	{/if}
	<div class="limit_width">
		<h2>Deposit Bitcoin</h2>
		<p>
			You can deposit credit on your pixeldrain account with Bitcoin. We
			support regular Bitcoin transactions and Lightning transactions. You
			must pay the full amount as stated on the invoice, else your payment
			will fail.
		</p>
		<div class="indent" style="text-align: center;">
			<img src="/res/img/btcpay.svg" alt="BTCPay server logo"/>
			<br/>
			<form on:submit|preventDefault={checkout} class="checkout_form">
				<div style="margin: 0.5em;">€</div>
				<input type="number" bind:value={credit_amount} min="1"/>
				<button type="submit">
					<i class="icon">paid</i> Checkout
				</button>
			</form>
		</div>

		<h3>Open invoices</h3>
		<div class="table_scroll">
			<table style="text-align: left;">
				<thead>
					<tr>
						<td>Created</td>
						<td>Amount</td>
						<td>Status</td>
						<td></td>
					</tr>
				</thead>
				<tbody>
					{#each invoices as row (row.id)}
						{#if row.status === "New" || row.status === "InvoiceCreated" || show_expired}
							<tr>
								<td>{formatDate(row.time, true, true, false)}</td>
								<td><Euro amount={row.amount}></Euro></td>
								<td>
									{#if row.status === "New" || row.status === "InvoiceCreated"}
										New (waiting for payment)
									{:else if row.status === "InvoiceProcessing"}
										Payment received, waiting for confirmations
									{:else if row.status === "InvoiceSettled"}
										Paid
									{:else if row.status === "InvoiceExpired"}
										Expired
									{:else}
										{row.status}
									{/if}
								</td>
								<td>
									{#if row.status === "New" || row.status === "InvoiceCreated"}
										<a href={row.checkout_url} class="button button_highlight">
											<i class="icon">paid</i> Pay
										</a>
									{/if}
								</td>
							</tr>
						{/if}
					{/each}
				</tbody>
			</table>
			<div style="text-align: center;">
				<button on:click={() => {show_expired = !show_expired}}>
					{#if show_expired}
						Hide
					{:else}
						Show
					{/if}
					expired and settled invoices
				</button>
			</div>
		</div>


		<h2>Transaction log</h2>
		<p>
			Here is a log of all transactions on your account balance.
		</p>

		{#each months as month}
			<h3>{month.month}</h3>
			<ul>
				<li>Subscription charge: <Euro amount={month.total_subscription_charge}></Euro></li>
				<li>Storage charge: <Euro amount={month.total_storage_charge}></Euro></li>
				<li>Bandwidth charge: <Euro amount={month.total_bandwidth_charge}></Euro></li>
				<li>Total charge: <Euro amount={month.total_deducted}></Euro></li>
				<li>Deposited: <Euro amount={month.total_deposited}></Euro></li>
			</ul>

			<div class="table_scroll">
				<table style="text-align: left;">
					<thead>
						<tr>
							<td>Time</td>
							<td>Balance</td>
							<td>Subscription</td>
							<td colspan="2">Storage</td>
							<td colspan="2">Bandwidth</td>
							<td>Deposited</td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td>Charged</td>
							<td>Charged</td>
							<td>Used</td>
							<td>Charged</td>
							<td>Used</td>
							<td></td>
						</tr>
					</thead>
					<tbody>
						{#each month.rows as row}
							<tr>
								<td>{formatDate(row.time, true, true, false)}</td>
								<td><Euro amount={row.new_balance}></Euro></td>
								<td><Euro amount={row.subscription_charge} precision="4"></Euro></td>
								<td><Euro amount={row.storage_charge} precision="4"></Euro></td>
								<td>{formatDataVolume(row.storage_used, 3)}</td>
								<td><Euro amount={row.bandwidth_charge} precision="4"></Euro></td>
								<td>{formatDataVolume(row.bandwidth_used, 3)}</td>
								<td><Euro amount={row.deposit_amount}></Euro></td>
							</tr>
						{/each}
					</tbody>
				</table>
			</div>
		{/each}
	</div>
</div>

<style>
.spinner_container {
	position: absolute;
	top: 10px;
	left: 10px;
	height: 100px;
	width: 100px;
	z-index: 1000;
}
.checkout_form {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
</style>