fnx_web/svelte/src/user_home/Subscription.svelte

<script>
import Spinner from "../util/Spinner.svelte";
import Euro from "../util/Euro.svelte"

let loading = false
let subscription = window.user.subscription.id
let hotlinking = window.user.hotlinking_enabled
let transfer_cap = window.user.monthly_transfer_cap / 1e12

let result = ""
let result_success = false

const update_subscription = async () => {
	loading = true

	const form = new FormData()
	form.append("subscription", subscription)
	form.append("hotlinking_enabled", hotlinking)
	form.append("transfer_cap", transfer_cap*1e12)
	try {
		const resp = await fetch(
			window.api_endpoint+"/user/subscription",
			{ method: "PUT", body: form },
		)
		if(resp.status >= 400) {
			let json = await resp.json()
			throw json.message
		}

		result_success = true
		result = "Subscription updated"

		setTimeout(() => {location.reload()}, 1000)
	} catch (err) {
		result_success = false
		result = "Failed to update subscription: "+err
		loading = false
	}
}

</script>

<div>
	{#if loading}
		<div class="spinner_container">
			<Spinner />
		</div>
	{/if}
	<div class="limit_width">
		<h2>Manage subscription</h2>
		<p>
			Current account balance: <Euro amount={window.user.balance_micro_eur}></Euro>
		</p>
		<p>
			When your prepaid subscription is active you will be charged daily
			based on usage. Hotlink bandwidth is charged per TB based on the
			usage of the previous day. The amount charged for storage each day
			is your storage usage at the end of the day multiplied by the
			storage price (€4 / TB) and divided by the average number of days in
			a month (30.4375). So if you have exactly 1 TB on your account you
			will be charged €0.131416838 per day.
		</p>
		<p>
			The prepaid subscription will stay active for as long as you have
			credit on your account. When you reach negative balance the
			subscription will automatically end. You will need a positive
			balance to activate the subscription again.
		</p>

		<h3>Prepaid plans</h3>
		{#if window.user.subscription.type === "patreon"}
			<p>Prepaid subscriptions are not available for Patreon supporters.</p>
		{:else}
			{#if result !== ""}
				<div class:highlight_green={result_success} class:highlight_red={!result_success}>
					{result}
				</div>
			{/if}

			<div class="feat_table">
				<div>
					<div class="feat_label" class:feat_highlight={subscription === "prepaid"}>
						Prepaid<br/>
						{#if subscription === "prepaid"}
							Currently active
						{:else}
							<button on:click={() => {subscription = "prepaid"; update_subscription()}}>
								<i class="icon">attach_money</i>
								Activate
							</button>
						{/if}
					</div>
					<div class="feat_normal round_tr">
						<ul>
							<li>Base price of €1 per month</li>
							<li>€4 per TB per month for storage</li>
							<li>€2 per TB for data transfer</li>
							<li>Files never expire as long as subscription is active</li>
						</ul>
					</div>
				</div>
				<div>
					<div class="feat_label" class:feat_highlight={subscription === "prepaid_temp_storage_120d"}>
						120 days storage<br/>
						{#if subscription === "prepaid_temp_storage_120d"}
							Currently active
						{:else}
							<button on:click={() => {subscription = "prepaid_temp_storage_120d"; update_subscription()}}>
								<i class="icon">attach_money</i>
								Activate
							</button>
						{/if}
					</div>
					<div class="feat_normal">
						<ul>
							<li>Base price of €1 per month</li>
							<li>€2 per TB per month for storage</li>
							<li>€2 per TB for data transfer</li>
							<li>Files expire 120 days after the last time they're viewed</li>
						</ul>
					</div>
				</div>
				<div>
					<div class="feat_label" class:feat_highlight={subscription === "prepaid_temp_storage_60d"}>
						60 days storage<br/>
						{#if subscription === "prepaid_temp_storage_60d"}
							Currently active
						{:else}
							<button on:click={() => {subscription = "prepaid_temp_storage_60d"; update_subscription()}}>
								<i class="icon">attach_money</i>
								Activate
							</button>
						{/if}
					</div>
					<div class="feat_normal">
						<ul>
							<li>Base price of €1 per month</li>
							<li>€1 per TB per month for storage</li>
							<li>€2 per TB for data transfer</li>
							<li>Files expire 60 days after the last time they're viewed</li>
						</ul>
					</div>
				</div>
				<div>
					<div class="feat_label" class:feat_highlight={subscription === ""}>
						Free<br/>
						{#if subscription === ""}
							Currently active
						{:else}
							<button on:click={() => {subscription = ""; update_subscription()}}>
								<i class="icon">money_off</i>
								Activate
							</button>
						{/if}
					</div>
					<div class="feat_normal round_br">
						<ul>
							<li>Standard free plan, files expire after 30 days.</li>
						</ul>
					</div>
				</div>
			</div>
		{/if}

		<h3>Bandwidth sharing</h3>

		{#if hotlinking}
			<button on:click={() => { hotlinking = false; update_subscription() }}>
				<i class="icon green">check</i> ON (click to turn off)
			</button>
		{:else}
			<button on:click={() => { hotlinking = true; update_subscription() }}>
				<i class="icon red">close</i> OFF (click to turn on)
			</button>
		{/if}
		<p>
			When bandwidth sharing is enabled all the bandwidth that your files
			use will be subtracted from your data cap. Advertisements will be
			disabled on the download pages for your files and download speed
			will be unlimited. The rate limiting captcha for files is also
			disabled when bandwidth sharing is on. You can directly embed your
			file's download link anywhere, you don't need to use the file viewer
			page.
		</p>

		<h3>Bill shock limit</h3>
		Billshock limit in terabytes per month. Set to 0 to disable<br/>
		<input type="number" bind:value={transfer_cap}/> TB
		<button on:click={update_subscription}>
			<i class="icon">save</i> Save
		</button>
		<p>
			The billshock limit limits how much bandwidth your account can use
			in a 30 day window. When this limit is reached files will show ads
			again and can only be downloaded from the file viewer page. This is
			mostly useful for prepaid plans, but it works for patreon plans too.
			Set to 0 to disable the limit.
		</p>
	</div>
</div>

<style>
.spinner_container {
	position: absolute;
	top: 10px;
	left: 10px;
	height: 100px;
	width: 100px;
	z-index: 1000;
}
.feat_table {
	display: flex;
	flex-direction: column;
}
.feat_table > div {
	display: flex;
	flex-direction: row;
}
.feat_table > div > div:first-child {
	flex: 0 0 25%;
	max-width: 25%;
}
.feat_table > div > div {
	flex: 1 1 0;
	margin: 0.25em;
	padding: 0.5em;
	word-wrap: break-word;
	hyphens: auto;
}
.feat_table > div > .feat_label {
	border-top-left-radius: 0.5em;
	border-bottom-left-radius: 0.5em;
	background-color: var(--layer_1_color);
	font-size: 1.1em;
	color: #ffffff;
	text-shadow: 0 0 3px #000000;
}
.feat_table > div > .feat_normal {
	background-color: var(--layer_3_color);
	box-shadow: 1px 1px 3px -1px var(--shadow_color);
	text-shadow: 1px 1px 3px var(--shadow_color);
}
.feat_table > div > .feat_highlight {
	border: 1px solid var(--highlight_color)
}

.feat_table > div > div.round_tr { border-top-right-radius:    0.5em; }
.feat_table > div > div.round_br { border-bottom-right-radius: 0.5em; }

.green {
	color: var(--highlight_color);
}
.red {
	color: var(--danger_color);
}

</style>