Add subscription management page and currency widget
This commit is contained in:
186
svelte/src/user_home/Subscription.svelte
Normal file
186
svelte/src/user_home/Subscription.svelte
Normal file
@@ -0,0 +1,186 @@
|
||||
<script>
|
||||
import Spinner from "../util/Spinner.svelte";
|
||||
import Euro from "../util/Euro.svelte"
|
||||
|
||||
let loading = false
|
||||
|
||||
let result = ""
|
||||
let result_success = false
|
||||
|
||||
const update_subscription = async name => {
|
||||
loading = true
|
||||
|
||||
const form = new FormData()
|
||||
form.append("subscription", name)
|
||||
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>
|
||||
|
||||
{#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={window.user.subscription.id === "prepaid"}>
|
||||
Prepaid<br/>
|
||||
{#if window.user.subscription.id === "prepaid"}
|
||||
Currently active
|
||||
{:else}
|
||||
<button on:click={() => {update_subscription("prepaid")}}>
|
||||
<i class="icon">attach_money</i>
|
||||
Activate
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="feat_normal round_tr">
|
||||
<ul>
|
||||
<li>Base price of €2 per month</li>
|
||||
<li>€4 per TB per month for storage</li>
|
||||
<li>€2 per TB for hotlink bandwidth</li>
|
||||
<li>No bandwidth limit, your files will download at the highest speed possible</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="feat_label" class:feat_highlight={window.user.subscription.id === "prepaid_storage"}>
|
||||
Prepaid (just storage)<br/>
|
||||
{#if window.user.subscription.id === "prepaid_storage"}
|
||||
Currently active
|
||||
{:else}
|
||||
<button on:click={() => {update_subscription("prepaid_storage")}}>
|
||||
<i class="icon">attach_money</i>
|
||||
Activate
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="feat_normal">
|
||||
<ul>
|
||||
<li>Base price of €0.10 per month</li>
|
||||
<li>€4 per TB per month for storage</li>
|
||||
<li>No hotlink bandwidth (rate limiting will be enabled when a file uses too much bandwidth)</li>
|
||||
<li>You don't see ads, but people downloading your files do see ads</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="feat_label" class:feat_highlight={window.user.subscription.id === ""}>
|
||||
Free<br/>
|
||||
{#if window.user.subscription.id === ""}
|
||||
Currently active
|
||||
{:else}
|
||||
<button on:click={() => {update_subscription("none")}}>
|
||||
<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>
|
||||
</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_tl { border-top-left-radius: 0.5em; }
|
||||
.feat_table > div > div.round_tr { border-top-right-radius: 0.5em; }
|
||||
.feat_table > div > div.round_br { border-bottom-right-radius: 0.5em; }
|
||||
.feat_table > div > div.round_bl { border-bottom-left-radius: 0.5em; }
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user