From 20610204e590ec82e0a3295a7d5e4cd9d706352b Mon Sep 17 00:00:00 2001 From: Fornax Date: Thu, 22 Feb 2024 17:20:41 +0100 Subject: [PATCH] Make it easier to switch between subscription plans --- svelte/src/speedtest/Speedtest.svelte | 2 +- svelte/src/user_home/Home.svelte | 94 ++++-------- .../user_home/PatreonActivationResult.svelte | 80 ++++++++++ svelte/src/user_home/Router.svelte | 20 +-- svelte/src/user_home/Subscription.svelte | 142 +++++++++++++----- 5 files changed, 227 insertions(+), 111 deletions(-) create mode 100644 svelte/src/user_home/PatreonActivationResult.svelte diff --git a/svelte/src/speedtest/Speedtest.svelte b/svelte/src/speedtest/Speedtest.svelte index a3ef0b1..bc769d6 100644 --- a/svelte/src/speedtest/Speedtest.svelte +++ b/svelte/src/speedtest/Speedtest.svelte @@ -140,7 +140,7 @@ onMount(() => { // Parse the results saved in the URL, if any if (window.location.hash[0] === "#") { const hash = window.location.hash.replace("#", ""); - const result = hash.replace("#", "").split('&').reduce((res, item) => { + const result = hash.split('&').reduce((res, item) => { const parts = item.split('=') const n = Number(parts[1]) if (n !== NaN) { diff --git a/svelte/src/user_home/Home.svelte b/svelte/src/user_home/Home.svelte index 100b220..0bfb307 100644 --- a/svelte/src/user_home/Home.svelte +++ b/svelte/src/user_home/Home.svelte @@ -1,5 +1,5 @@
- {#if patreon_response !== ""} - {#if patreon_response === "error"} -
- An error occurred while linking Patreon subscription. Please try - again later. -
- {:else if patreon_response === "pledge_not_found"} -
-

- We were not able to find your payment on Patreon. Please - wait until the payment is confirmed and try again. Even if - the payment says confirmed on Patreon itself it takes a - while before it's communicated to pixeldrain. Please wait at - least 10 minutes and try again. -

-

- If it has been more than 30 minutes, your payment is - complete and your account is still not upgraded please - contact me at support@pixeldrain.com, or send me a message - on Patreon. -

-

- {:else if patreon_response === "success"} -
- Success! Your Patreon pledge has been linked to your pixeldrain - account. You are now able to use Pro features. -
- {/if} -
- {/if} -

Account information

{#if window.user.subscription.storage_space === -1} @@ -259,8 +227,8 @@ onDestroy(() => { {/if} {#if transfer_cap === -1} - Premium transfer used in the last 30 days: {formatDataVolume(transfer_used, 3)}. - Configure limit + Premium transfer used in the last 30 days: {formatDataVolume(transfer_used, 3)} + (configure limit) {:else} Transfer cap: {formatDataVolume(transfer_used, 3)} diff --git a/svelte/src/user_home/PatreonActivationResult.svelte b/svelte/src/user_home/PatreonActivationResult.svelte new file mode 100644 index 0000000..1b1b935 --- /dev/null +++ b/svelte/src/user_home/PatreonActivationResult.svelte @@ -0,0 +1,80 @@ + + + +{#if patreon_result !== ""} + {#if patreon_result === "error"} +
+ An error occurred while linking Patreon subscription. Please try + again later. +
+

+ If it has been more than 30 minutes, your payment is complete and + the upgrade still fails please contact me on Patreon or through + e-mail at support@pixeldrain.com. +

+

+ When contacting support please provide the following information:
+ Server response: {patreon_message}
+ Server error code: {patreon_error} +

+ {:else if patreon_result === "pledge_not_found"} +
+

+ We were not able to find your payment on Patreon. Please + wait until the payment is confirmed and try again. Even if + the payment says confirmed on Patreon itself it takes a + while before it's communicated to pixeldrain. Please wait at + least 10 minutes and try again. +

+

+ If it has been more than 30 minutes, your payment is complete + and the upgrade still fails please contact me on Patreon or + through e-mail at support@pixeldrain.com. +

+

+ When contacting support please provide the following + information:
Server response: {patreon_message}
Server + error code: {patreon_error} +

+
+ {:else if patreon_result === "success"} +
+ Success! Your Patreon pledge has been linked to your pixeldrain + account. You are now able to use Pro features. +
+ {/if} +
+{/if} + + diff --git a/svelte/src/user_home/Router.svelte b/svelte/src/user_home/Router.svelte index 9ea6d08..090c709 100644 --- a/svelte/src/user_home/Router.svelte +++ b/svelte/src/user_home/Router.svelte @@ -24,20 +24,20 @@ let pages = [ icon: "settings", component: AccountSettings, }, { - path: "/user/prepaid", - title: "Prepaid", - icon: "receipt_long", + path: "/user/subscription", + title: "Subscription", + icon: "shopping_cart", subpages: [ { - path: "/user/prepaid/deposit", - title: "Deposit credit", - icon: "account_balance_wallet", - component: DepositCredit, - }, { - path: "/user/prepaid/subscriptions", - title: "Subscriptions", + path: "/user/subscription", + title: "Manage subscription", icon: "shopping_cart", component: Subscription, + }, { + path: "/user/prepaid/deposit", + title: "Prepaid", + icon: "account_balance_wallet", + component: DepositCredit, }, { path: "/user/prepaid/transactions", title: "Transactions", diff --git a/svelte/src/user_home/Subscription.svelte b/svelte/src/user_home/Subscription.svelte index 8611f7e..9a7a3eb 100644 --- a/svelte/src/user_home/Subscription.svelte +++ b/svelte/src/user_home/Subscription.svelte @@ -3,28 +3,44 @@ import { onMount } from "svelte"; import Euro from "../util/Euro.svelte" import LoadingIndicator from "../util/LoadingIndicator.svelte"; import SuccessMessage from "../util/SuccessMessage.svelte"; +import PatreonActivationResult from "./PatreonActivationResult.svelte"; let loading = false let subscription = window.user.subscription.id +let subscription_type = window.user.subscription.type let success_message -const update = async () => { +const update = async (plan) => { loading = true const form = new FormData() - form.append("subscription", subscription) + form.append("subscription", plan) try { - const resp = await fetch( - window.api_endpoint+"/user", - { method: "PUT", body: form }, - ) - if(resp.status >= 400) { - let json = await resp.json() - throw json.message + { + const resp = await fetch( + window.api_endpoint+"/user", + { method: "PUT", body: form }, + ) + if(resp.status >= 400) { + let json = await resp.json() + throw json.message + } + + success_message.set(true, "Subscription updated") } - success_message.set(true, "Subscription updated") + { + const resp = await fetch(window.api_endpoint+"/user") + if(resp.status >= 400) { + let json = await resp.json() + throw json.message + } + + window.user = await resp.json() + subscription = window.user.subscription.id + subscription_type = window.user.subscription.type + } } catch (err) { success_message.set(false, "Failed to update subscription: "+err) } finally { @@ -64,27 +80,16 @@ onMount(() => { {/if} - {#if window.user.subscription.type === "patreon"} -
-

- Activating a prepaid subscription will not cancel your active - Patreon subscription. Go to Patreon's - memberships - page to end your subscription there. -

-

- If you enable a prepaid plan here your Patreon subscription will - be overridden. If you wish to go back to your Patreon plan use - the Link Patreon subscription button on - the home page to link your Patreon account back to pixeldrain. -

-
- {/if} +

Manage subscription

- Current account balance: + On pixeldrain you can freely switch between active subscription plans + when you want. When switching from Patreon to Prepaid/free you should + separately cancel your subscription on Patreon. That does not happen automatically. + Pixeldrain cannot modify your Patreon membership in any way.

Prepaid subscriptions are charged daily based on usage. When you reach @@ -92,23 +97,65 @@ onMount(() => { a positive balance to activate the subscription again.

-

Prepaid plans

+

Available subscription plans

+
+
+ Patreon
+ {#if subscription_type === "patreon"} + Currently active
+ + settings + Manage + + {:else} + + add_link + Link Patreon + + {/if} +
+
+

+ This subscription is managed by Patreon. You will need to purchase a plan on Patreon before you + can activate this subscription. After your purchase you can + click the "Link Patreon" button and your account will be + upgraded. +

+
    +
  • €4 per month
    • +
  • 2 TB storage limit (higher plans available)
    • +
  • 4 TB transfer limit (higher plans available)
    • +
  • Access to the filesystem
    • +
  • File expire after 240 days for Pro, and never on the other plans
    • +
+
+
- Prepaid
+ Prepaid (credit )
{#if subscription === "prepaid"} Currently active {:else} - {/if}
+

+ You will need a positive account balance to activate this + plan. If you currently have a Patreon subscription active, + then enabling prepaid will not cancel that subscription. You + can end your subscription on Patreon.com. +

  • Base price of €1 per month
  • €4 per TB per month for storage
    • @@ -136,13 +183,17 @@ onMount(() => { {#if subscription === "prepaid_temp_storage_120d"} Currently active {:else} - {/if}
+

+ You will need a positive account balance to activate this + plan. +

  • Base price of €1 per month
  • €0.50 per TB per month for storage
    • @@ -172,13 +223,17 @@ onMount(() => { {#if subscription === ""} Currently active {:else} - {/if}
+

+ Switching to the free plan with another subscription active + may cause your files to expire! +

  • Standard free plan, files expire after 120 days.
  • Download limit of 5 GB per day
    • @@ -199,14 +254,16 @@ onMount(() => { } .feat_table > div > div:first-child { flex: 0 0 25%; - max-width: 25%; + border-radius: 8px 0 0 8px; } .feat_table > div > div { flex: 1 1 0; - margin: 0.25em; + margin: 2px; padding: 0.5em; word-wrap: break-word; hyphens: auto; + border-radius: 0 8px 8px 0; + border: 2px solid var(--separator) } .feat_table > div > .feat_label { border-top-left-radius: 0.5em; @@ -221,6 +278,17 @@ onMount(() => { border: 2px 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; } +/* On small screens we stack the table vertically */ +@media(max-width: 800px) { + .feat_table > div { + flex-direction: column; + } + .feat_table > div > div:first-child { + flex: 0 0 auto; + border-radius: 8px 8px 0 0; + } + .feat_table > div > div { + border-radius: 0 0 8px 8px; + } +}