Modify the checkout widget to support subscriptions. Add usage-based billing toggle to sharing settings.

This commit is contained in:
2026-09-30 19:26:21 +02:00
parent 4b9434ce0a
commit 7b2e4b4240
25 changed files with 1060 additions and 684 deletions

View File

@@ -18,6 +18,7 @@ import Tree from "./Tree.svelte";
import MenuEntry from "./MenuEntry.svelte";
import { writable } from "svelte/store";
import { breadcrumbs_store } from "./BreadcrumbStore";
import ProgressBar from "util/ProgressBar.svelte";
// The menu swipe will be detected if it was less than this much pixels from the
// screen edge
@@ -176,18 +177,37 @@ const set_offset = (off: number) => {
{#snippet body()}
<div class="stats_table">
<div>Subscription</div>
<div>{$user.subscription.name}</div>
<div>Sub</div>
<div>
{$user.subscription.name}
{#if $user.subscription_months === 1}
(monthly)
{:else if $user.subscription_months === 6}
(bi-yearly)
{:else if $user.subscription_months === 12}
(yearly)
{/if}
</div>
{#if $user.subscription.type === "prepaid"}
<div>Credit</div>
<div><Euro amount={$user.balance_micro_eur}/></div>
{/if}
<div>Credit</div>
<div><Euro amount={$user.balance_micro_eur}/></div>
<div>Storage used</div>
<div>{formatDataVolume($user.filesystem_storage_used, 3)}</div>
<div>Transfer used</div>
<div>{formatDataVolume($user.monthly_transfer_used, 3)}</div>
<div>Storage</div>
<div>
{formatDataVolume($user.filesystem_storage_used, 3)} /
{formatDataVolume($user.subscription.storage_limit, 3)}
</div>
<div style="grid-column: span 2">
<ProgressBar used={$user.storage_space_used} total={$user.subscription.storage_limit}/>
</div>
<div>Transfer</div>
<div>
{formatDataVolume($user.monthly_transfer_used, 3)} /
{formatDataVolume($user.subscription.monthly_transfer_cap, 3)}
</div>
<div style="grid-column: span 2">
<ProgressBar used={$user.monthly_transfer_used} total={$user.subscription.monthly_transfer_cap}/>
</div>
</div>
{/snippet}
</MenuEntry>
@@ -305,7 +325,7 @@ const set_offset = (off: number) => {
.nav {
display: flex;
flex-direction: column;
width: 15em;
width: 16em;
margin: 0;
padding: 4px;
backdrop-filter: blur(3px);