FediMovies/fedimovies-web
1
1
Fork 0
Code Pull requests Activity

Allow user to change subscription settings

Browse source
This commit is contained in:
silverpill 2022-09-15 21:30:02 +00:00
parent 9e1765505e
commit 58419379f0
2 changed files with 30 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/api/subscriptions-monero.ts
View file

@ -20,7 +20,7 @@ export function getPricePerMonth(pricePerSec: number): number {
return formatAmount(pricePerMonthInt, 12).toUnsafeFloat() return formatAmount(pricePerMonthInt, 12).toUnsafeFloat()
} }
export async function enableMoneroSubscriptions( export async function registerMoneroSubscriptionOption(
authToken: string, authToken: string,
price: number, price: number,
payoutAddress: string, payoutAddress: string,

49
src/components/SubscriptionSettingsMonero.vue
View file

@ -2,7 +2,7 @@
<div class="subscription-settings"> <div class="subscription-settings">
<div class="info" v-if="!isLoading"> <div class="info" v-if="!isLoading">
<template v-if="subscriptionOption !== null"> <template v-if="subscriptionOption !== null">
Subscriptions are enabled <span>Subscriptions are enabled</span>
<div class="price"> <div class="price">
{{ getPricePerMonth(subscriptionOption.price) }} XMR per month {{ getPricePerMonth(subscriptionOption.price) }} XMR per month
</div> </div>
@ -11,7 +11,7 @@
Subscriptions are not enabled Subscriptions are not enabled
</template> </template>
</div> </div>
<div class="subscription-page" v-if="subscriptionOption !== null && !isLoading"> <div class="subscription-page" v-if="subscriptionOption !== null && !isFormVisible && !isLoading">
<div> <div>
Subscribers can pay for subscription by navigating to Subscribers can pay for subscription by navigating to
<br> <br>
@ -21,7 +21,12 @@
{{ getSubscriptionPageUrl() }} {{ getSubscriptionPageUrl() }}
</router-link> </router-link>
</div> </div>
<form v-if="canEnableSubscriptions()"> <div class="edit-settings" v-if="!isFormVisible && !isLoading">
<button class="btn" @click="isFormVisible = true">
Edit settings
</button>
</div>
<form class="settings" v-if="isFormVisible">
<div class="price-input-group"> <div class="price-input-group">
<label for="price">Price</label> <label for="price">Price</label>
<input type="number" id="price" v-model="subscriptionPrice" min="0.00" step="0.01"> <input type="number" id="price" v-model="subscriptionPrice" min="0.00" step="0.01">
@ -37,9 +42,10 @@
type="submit" type="submit"
class="btn" class="btn"
:disabled="!isFormValid()" :disabled="!isFormValid()"
@click.prevent="enableSubscriptions()" @click.prevent="saveSubscriptionSettings()"
> >
Enable subscriptions <template v-if="subscriptionOption">Save</template>
<template v-else>Enable subscriptions</template>
</button> </button>
</form> </form>
<loader v-if="isLoading"></loader> <loader v-if="isLoading"></loader>
@ -56,7 +62,7 @@ import {
SubscriptionOption, SubscriptionOption,
} from "@/api/subscriptions-common" } from "@/api/subscriptions-common"
import { import {
enableMoneroSubscriptions, registerMoneroSubscriptionOption,
getPricePerMonth, getPricePerMonth,
getPricePerSec, getPricePerSec,
} from "@/api/subscriptions-monero" } from "@/api/subscriptions-monero"
@ -70,22 +76,31 @@ const {
setCurrentUser, setCurrentUser,
} = $(useCurrentUser()) } = $(useCurrentUser())
const subscriptionPrice = $ref(0.01)
const subscriptionPayoutAddress = $ref("")
let isLoading = $ref(false) let isLoading = $ref(false)
let subscriptionOption = $ref<SubscriptionOption | null>(null) let subscriptionOption = $ref<SubscriptionOption | null>(null)
let subscriptionPrice = $ref(0.01)
let subscriptionPayoutAddress = $ref("")
let isFormVisible = $ref(false)
onMounted(async () => { onMounted(async () => {
isLoading = true isLoading = true
await loadSubscriptionConfig() await loadSubscriptionSettings()
isLoading = false isLoading = false
}) })
async function loadSubscriptionConfig() { async function loadSubscriptionSettings() {
const subscriptionOptions = await getSubscriptionOptions(ensureAuthToken()) const subscriptionOptions = await getSubscriptionOptions(ensureAuthToken())
subscriptionOption = subscriptionOptions.find((item) => { subscriptionOption = subscriptionOptions.find((item) => {
return item.type === "monero" return item.type === "monero"
}) || null }) || null
if (subscriptionOption?.price && subscriptionOption?.payout_address) {
subscriptionPrice = getPricePerMonth(subscriptionOption.price)
subscriptionPayoutAddress = subscriptionOption.payout_address
}
if (subscriptionOption === null) {
isFormVisible = true
}
} }
function getSubscriptionPagePath(): string { function getSubscriptionPagePath(): string {
@ -100,13 +115,6 @@ function getSubscriptionPageUrl(): string {
return window.location.origin + getSubscriptionPagePath() return window.location.origin + getSubscriptionPagePath()
} }
function canEnableSubscriptions(): boolean {
return (
!isLoading &&
subscriptionOption === null
)
}
function isFormValid(): boolean { function isFormValid(): boolean {
return ( return (
getPricePerSec(subscriptionPrice) > 0 && getPricePerSec(subscriptionPrice) > 0 &&
@ -114,15 +122,16 @@ function isFormValid(): boolean {
) )
} }
async function enableSubscriptions() { async function saveSubscriptionSettings() {
isLoading = true isLoading = true
const user = await enableMoneroSubscriptions( const user = await registerMoneroSubscriptionOption(
ensureAuthToken(), ensureAuthToken(),
getPricePerSec(subscriptionPrice), getPricePerSec(subscriptionPrice),
subscriptionPayoutAddress, subscriptionPayoutAddress,
) )
setCurrentUser(user) setCurrentUser(user)
await loadSubscriptionConfig() await loadSubscriptionSettings()
isFormVisible = false
isLoading = false isLoading = false
} }
</script> </script>