You've already forked AstralRinth
forked from didirus/AstralRinth
Truman Gao
681ae5d1d8
* refactor: most places with useAsyncData replaced with tanstack query * refactor report list and report view * refactor organization page to use tanstack query * fix types * refactor collection page and include proper loading state * fix followed projects proper loading state * fix 404 handling * fix organization loading and 404 states * pnpm prepr * refactor: remove useAsyncData on newsletter button * refactor: remove useAsyncData on auth globals fetch * refactor: settings/billing/index.vue to useQuery instead of useAsyncData * refactor: user page to remove useAsyncData * pnpm prepr * fix reports pages * fix notifications page * fix billing page cannot read properties of null and prop warnings * fix refresh causing 404 by removing useBaseFetch and use api-client * fix stale data after removing organization from project * pnpm prepr * fix news erroring in build * fix: project page loads header only after content * fix: user page tanstack problems (start on migrating away from useBaseFetch) * fix: start swapping useBaseFetch usages to api-client * Revert "fix: start swapping useBaseFetch usages to api-client" This reverts commit 3df3fab11d535159132b1288dd7cacc38282b553. * fix: remove debug logging * fix: lint --------- Co-authored-by: Calum H. <calum@modrinth.com> Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>
1124 lines
34 KiB
Vue
1124 lines
34 KiB
Vue
<template>
|
|
<ServersUpgradeModalWrapper ref="upgradeModal" />
|
|
<section class="universal-card experimental-styles-within">
|
|
<h2>{{ formatMessage(messages.subscriptionTitle) }}</h2>
|
|
<p>{{ formatMessage(messages.subscriptionDescription) }}</p>
|
|
<div class="universal-card recessed">
|
|
<ConfirmModal
|
|
ref="modalCancel"
|
|
:title="formatMessage(cancelModalMessages.title)"
|
|
:description="formatMessage(cancelModalMessages.description)"
|
|
:proceed-label="formatMessage(cancelModalMessages.action)"
|
|
@proceed="cancelSubscription(cancelSubscriptionId, true)"
|
|
/>
|
|
<div class="flex flex-wrap justify-between gap-4">
|
|
<div class="flex flex-col gap-4">
|
|
<template v-if="midasCharge">
|
|
<span v-if="midasCharge.status === 'open'"> You're currently subscribed to: </span>
|
|
<span v-else-if="midasCharge.status === 'processing'" class="text-orange">
|
|
Your payment is being processed. Perks will activate once payment is complete.
|
|
</span>
|
|
<span v-else-if="midasCharge.status === 'cancelled'">
|
|
You've cancelled your subscription. <br />
|
|
You will retain your perks until the end of the current billing cycle.
|
|
</span>
|
|
<span v-else-if="midasCharge.status === 'failed'" class="text-red">
|
|
Your subscription payment failed. Please update your payment method.
|
|
</span>
|
|
</template>
|
|
|
|
<span v-else>Become a subscriber to Modrinth Plus!</span>
|
|
<ModrinthPlusIcon class="h-8 w-min" />
|
|
<div class="flex flex-col gap-2">
|
|
<span class="font-bold">Benefits</span>
|
|
<div class="flex items-center gap-2">
|
|
<CheckCircleIcon class="h-5 w-5 shrink-0 text-brand" />
|
|
<span> Ad-free browsing on modrinth.com and Modrinth App </span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<CheckCircleIcon class="h-5 w-5 shrink-0 text-brand" />
|
|
<span>Modrinth+ badge on your profile</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<CheckCircleIcon class="h-5 w-5 shrink-0 text-brand" />
|
|
<span>Support Modrinth and creators directly</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex w-full flex-wrap justify-between gap-4 xl:w-auto xl:flex-col">
|
|
<div class="flex flex-col gap-1 xl:ml-auto xl:text-right">
|
|
<span class="text-2xl font-bold text-dark">
|
|
<template v-if="midasCharge">
|
|
{{
|
|
formatPrice(
|
|
midasSubscriptionPrice.prices.intervals[midasSubscription.interval],
|
|
midasSubscriptionPrice.currency_code,
|
|
)
|
|
}}
|
|
/
|
|
{{ midasSubscription.interval }}
|
|
</template>
|
|
<template v-else>
|
|
{{ formatPrice(price.prices.intervals.monthly, price.currency_code) }}
|
|
/ month
|
|
</template>
|
|
</span>
|
|
<!-- Next charge preview for Midas when interval is changing -->
|
|
<div
|
|
v-if="
|
|
midasCharge &&
|
|
midasCharge.status === 'open' &&
|
|
midasSubscription &&
|
|
midasSubscription.interval &&
|
|
midasCharge.subscription_interval !== midasSubscription.interval
|
|
"
|
|
class="-mt-1 flex items-baseline gap-2 text-sm text-secondary"
|
|
>
|
|
<span class="opacity-70">Next:</span>
|
|
<span class="font-semibold text-contrast">
|
|
{{ formatPrice(midasCharge.amount, midasCharge.currency_code) }}
|
|
</span>
|
|
<span>/{{ midasCharge.subscription_interval.replace('ly', '') }}</span>
|
|
</div>
|
|
<template v-if="midasCharge">
|
|
<span
|
|
v-if="
|
|
midasCharge.status === 'open' && midasCharge.subscription_interval === 'monthly'
|
|
"
|
|
class="text-sm text-purple"
|
|
>
|
|
Save
|
|
{{
|
|
formatPrice(midasCharge.amount * 12 - oppositePrice, midasCharge.currency_code)
|
|
}}/year by switching to yearly billing!
|
|
</span>
|
|
<span class="text-sm text-secondary">
|
|
Since {{ formatDate(midasSubscription.created) }}
|
|
</span>
|
|
<span v-if="midasCharge.status === 'open'" class="text-sm text-secondary">
|
|
Renews {{ formatDate(midasCharge.due) }}
|
|
</span>
|
|
<span v-else-if="midasCharge.status === 'cancelled'" class="text-sm text-secondary">
|
|
Expires {{ formatDate(midasCharge.due) }}
|
|
</span>
|
|
<span
|
|
v-if="
|
|
midasCharge.status === 'open' &&
|
|
midasSubscription &&
|
|
midasSubscription.interval &&
|
|
midasCharge.subscription_interval !== midasSubscription.interval
|
|
"
|
|
class="text-sm text-secondary"
|
|
>
|
|
Switches to {{ midasCharge.subscription_interval }} billing on
|
|
{{ formatDate(midasCharge.due) }}
|
|
</span>
|
|
</template>
|
|
|
|
<span v-else class="text-sm text-secondary">
|
|
Or
|
|
{{ formatPrice(price.prices.intervals.yearly, price.currency_code) }} / year (save
|
|
{{
|
|
calculateSavings(price.prices.intervals.monthly, price.prices.intervals.yearly)
|
|
}}%)!
|
|
</span>
|
|
</div>
|
|
<div
|
|
v-if="midasCharge && midasCharge.status === 'failed'"
|
|
class="ml-auto flex flex-row-reverse items-center gap-2"
|
|
>
|
|
<ButtonStyled v-if="midasCharge && midasCharge.status === 'failed'">
|
|
<button
|
|
@click="
|
|
() => {
|
|
$refs.midasPurchaseModal.show()
|
|
}
|
|
"
|
|
>
|
|
<UpdatedIcon />
|
|
Update method
|
|
</button>
|
|
</ButtonStyled>
|
|
<ButtonStyled type="transparent" circular>
|
|
<OverflowMenu
|
|
:dropdown-id="`${baseId}-cancel-midas`"
|
|
:options="[
|
|
{
|
|
id: 'cancel',
|
|
action: () => {
|
|
cancelSubscriptionId = midasSubscription.id
|
|
$refs.modalCancel.show()
|
|
},
|
|
},
|
|
]"
|
|
>
|
|
<MoreVerticalIcon />
|
|
<template #cancel><XIcon /> Cancel</template>
|
|
</OverflowMenu>
|
|
</ButtonStyled>
|
|
</div>
|
|
<div
|
|
v-else-if="midasCharge && midasCharge.status !== 'cancelled'"
|
|
class="ml-auto flex gap-2"
|
|
>
|
|
<ButtonStyled>
|
|
<button
|
|
:disabled="changingInterval"
|
|
@click="
|
|
() => {
|
|
cancelSubscriptionId = midasSubscription.id
|
|
$refs.modalCancel.show()
|
|
}
|
|
"
|
|
>
|
|
<XIcon /> Cancel
|
|
</button>
|
|
</ButtonStyled>
|
|
<ButtonStyled
|
|
:color="midasCharge.subscription_interval === 'yearly' ? 'standard' : 'purple'"
|
|
color-fill="text"
|
|
>
|
|
<button
|
|
v-tooltip="
|
|
midasCharge.subscription_interval === 'yearly'
|
|
? `Monthly billing will cost you an additional ${formatPrice(
|
|
oppositePrice * 12 - midasCharge.amount,
|
|
midasCharge.currency_code,
|
|
)} per year`
|
|
: undefined
|
|
"
|
|
:disabled="changingInterval"
|
|
@click="switchMidasInterval(oppositeInterval)"
|
|
>
|
|
<SpinnerIcon v-if="changingInterval" class="animate-spin" />
|
|
<TransferIcon v-else /> {{ changingInterval ? 'Switching' : 'Switch' }} to
|
|
{{ oppositeInterval }}
|
|
</button>
|
|
</ButtonStyled>
|
|
</div>
|
|
<ButtonStyled
|
|
v-else-if="midasCharge && midasCharge.status === 'cancelled'"
|
|
color="purple"
|
|
>
|
|
<button class="ml-auto" @click="cancelSubscription(midasSubscription.id, false)">
|
|
Resubscribe <RightArrowIcon />
|
|
</button>
|
|
</ButtonStyled>
|
|
<ButtonStyled v-else color="purple" size="large">
|
|
<button
|
|
class="ml-auto"
|
|
@click="
|
|
() => {
|
|
$refs.midasPurchaseModal.show()
|
|
}
|
|
"
|
|
>
|
|
Subscribe <RightArrowIcon />
|
|
</button>
|
|
</ButtonStyled>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="pyroSubscriptions.length > 0">
|
|
<div
|
|
v-for="(subscription, index) in pyroSubscriptions"
|
|
:key="index"
|
|
class="universal-card recessed mt-4"
|
|
>
|
|
<div class="flex flex-col justify-between gap-4">
|
|
<div class="flex flex-col gap-4">
|
|
<ModrinthServersIcon class="flex h-8 w-fit" />
|
|
<div class="flex flex-col gap-2">
|
|
<ServerListing
|
|
v-if="subscription.serverInfo"
|
|
v-bind="subscription.serverInfo"
|
|
:pending-change="getPendingChange(subscription)"
|
|
/>
|
|
<div v-else class="w-fit">
|
|
<p>
|
|
A linked server couldn't be found for this subscription. There are a few possible
|
|
explanations for this. If you just purchased your server, this is normal. It could
|
|
take up to an hour for your server to be provisioned. Otherwise, if you purchased
|
|
this server a while ago, it has likely since been suspended. If this is not what
|
|
you were expecting, please contact Modrinth Support with the following
|
|
information:
|
|
</p>
|
|
<div class="flex w-full flex-col gap-2">
|
|
<CopyCode
|
|
class="whitespace-nowrap"
|
|
:text="'Server ID: ' + subscription.metadata.id"
|
|
/>
|
|
<CopyCode class="whitespace-nowrap" :text="'Stripe ID: ' + subscription.id" />
|
|
</div>
|
|
</div>
|
|
<h3 class="m-0 mt-4 text-xl font-semibold leading-none text-contrast">
|
|
{{ getProductSize(getPyroProduct(subscription)) }} Plan
|
|
</h3>
|
|
<div class="flex flex-row justify-between">
|
|
<div class="mt-2 flex flex-col gap-2">
|
|
<div class="flex items-center gap-2">
|
|
<CheckCircleIcon class="h-5 w-5 text-brand" />
|
|
<span>
|
|
{{ getPyroProduct(subscription)?.metadata?.cpu / 2 }} Shared CPUs (Bursts up
|
|
to {{ getPyroProduct(subscription)?.metadata?.cpu }} CPUs)
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<CheckCircleIcon class="h-5 w-5 text-brand" />
|
|
<span>
|
|
{{
|
|
getPyroProduct(subscription)?.metadata?.ram
|
|
? getPyroProduct(subscription).metadata.ram / 1024 + ' GB RAM'
|
|
: ''
|
|
}}
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<CheckCircleIcon class="h-5 w-5 text-brand" />
|
|
<span>
|
|
{{
|
|
getPyroProduct(subscription)?.metadata?.swap
|
|
? getPyroProduct(subscription).metadata.swap / 1024 + ' GB Swap'
|
|
: ''
|
|
}}
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<CheckCircleIcon class="h-5 w-5 text-brand" />
|
|
<span>
|
|
{{
|
|
getPyroProduct(subscription)?.metadata?.storage
|
|
? getPyroProduct(subscription).metadata.storage / 1024 + ' GB SSD'
|
|
: ''
|
|
}}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col items-end justify-between">
|
|
<div class="flex flex-col items-end gap-2">
|
|
<div class="flex text-2xl font-bold text-contrast">
|
|
<span class="text-contrast">
|
|
{{
|
|
getProductPrice(getPyroProduct(subscription), subscription.interval)
|
|
? formatPrice(
|
|
getProductPrice(getPyroProduct(subscription), subscription.interval)
|
|
.prices.intervals[subscription.interval],
|
|
getProductPrice(getPyroProduct(subscription), subscription.interval)
|
|
.currency_code,
|
|
)
|
|
: ''
|
|
}}
|
|
</span>
|
|
<span>/{{ subscription.interval.replace('ly', '') }}</span>
|
|
</div>
|
|
<div
|
|
v-if="
|
|
getPyroCharge(subscription) &&
|
|
getPyroCharge(subscription).status === 'open' &&
|
|
((getPyroCharge(subscription).price_id &&
|
|
getPyroCharge(subscription).price_id !== subscription.price_id) ||
|
|
(getPyroCharge(subscription).subscription_interval &&
|
|
getPyroCharge(subscription).subscription_interval !==
|
|
subscription.interval))
|
|
"
|
|
class="-mt-1 flex items-baseline gap-2 text-sm text-secondary"
|
|
>
|
|
<span class="opacity-70">Next:</span>
|
|
<span class="font-semibold text-contrast">
|
|
{{
|
|
formatPrice(
|
|
getPyroCharge(subscription).amount,
|
|
getPyroCharge(subscription).currency_code,
|
|
)
|
|
}}
|
|
</span>
|
|
<span>
|
|
/
|
|
{{
|
|
(
|
|
getPyroCharge(subscription).subscription_interval ||
|
|
subscription.interval
|
|
).replace('ly', '')
|
|
}}
|
|
</span>
|
|
</div>
|
|
<div v-if="getPyroCharge(subscription)" class="mb-4 flex flex-col items-end">
|
|
<span class="text-sm text-secondary">
|
|
Since {{ formatDate(subscription.created) }}
|
|
</span>
|
|
<span
|
|
v-if="getPyroCharge(subscription).status === 'open'"
|
|
class="text-sm text-secondary"
|
|
>
|
|
Renews {{ formatDate(getPyroCharge(subscription).due) }}
|
|
</span>
|
|
<span
|
|
v-if="
|
|
getPyroCharge(subscription).status === 'open' &&
|
|
getPyroCharge(subscription).subscription_interval &&
|
|
getPyroCharge(subscription).subscription_interval !==
|
|
subscription.interval
|
|
"
|
|
class="text-sm text-secondary"
|
|
>
|
|
Switches to
|
|
{{ getPyroCharge(subscription).subscription_interval }}
|
|
billing on
|
|
{{ formatDate(getPyroCharge(subscription).due) }}
|
|
</span>
|
|
<span
|
|
v-else-if="getPyroCharge(subscription).status === 'processing'"
|
|
class="text-sm text-orange"
|
|
>
|
|
Your payment is being processed. Your server will activate once payment is
|
|
complete.
|
|
</span>
|
|
<span
|
|
v-else-if="getPyroCharge(subscription).status === 'cancelled'"
|
|
class="text-sm text-secondary"
|
|
>
|
|
Expires {{ formatDate(getPyroCharge(subscription).due) }}
|
|
</span>
|
|
<span
|
|
v-else-if="getPyroCharge(subscription).status === 'failed'"
|
|
class="text-sm text-red"
|
|
>
|
|
Your subscription payment failed. Please update your payment method, then
|
|
resubscribe.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<ButtonStyled
|
|
v-if="
|
|
getPyroCharge(subscription) &&
|
|
getPyroCharge(subscription).status !== 'cancelled'
|
|
"
|
|
>
|
|
<button @click="showCancellationSurvey(subscription)">
|
|
<XIcon />
|
|
Cancel
|
|
</button>
|
|
</ButtonStyled>
|
|
<ButtonStyled
|
|
v-if="
|
|
getPyroCharge(subscription) &&
|
|
getPyroCharge(subscription).status !== 'cancelled' &&
|
|
getPyroCharge(subscription).status !== 'failed'
|
|
"
|
|
color="green"
|
|
color-fill="text"
|
|
>
|
|
<button @click="showPyroUpgradeModal(subscription)">
|
|
<ArrowBigUpDashIcon />
|
|
Upgrade
|
|
</button>
|
|
</ButtonStyled>
|
|
<ButtonStyled
|
|
v-else-if="
|
|
getPyroCharge(subscription) &&
|
|
(getPyroCharge(subscription).status === 'cancelled' ||
|
|
getPyroCharge(subscription).status === 'failed')
|
|
"
|
|
color="green"
|
|
>
|
|
<button
|
|
@click="
|
|
resubscribePyro(
|
|
subscription.id,
|
|
$dayjs(getPyroCharge(subscription).due).isBefore($dayjs()),
|
|
)
|
|
"
|
|
>
|
|
Resubscribe <RightArrowIcon />
|
|
</button>
|
|
</ButtonStyled>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="universal-card experimental-styles-within">
|
|
<ConfirmModal
|
|
ref="modal_confirm"
|
|
:title="formatMessage(deleteModalMessages.title)"
|
|
:description="formatMessage(deleteModalMessages.description)"
|
|
:proceed-label="formatMessage(deleteModalMessages.action)"
|
|
@proceed="removePaymentMethod(removePaymentMethodIndex)"
|
|
/>
|
|
<PurchaseModal
|
|
v-if="customer && paymentMethods"
|
|
ref="midasPurchaseModal"
|
|
:product="midasProduct"
|
|
:country="country"
|
|
:publishable-key="config.public.stripePublishableKey"
|
|
:send-billing-request="
|
|
async (body) =>
|
|
await useBaseFetch('billing/payment', { internal: true, method: 'POST', body })
|
|
"
|
|
:on-error="
|
|
(err) =>
|
|
addNotification({
|
|
title: 'An error occurred',
|
|
type: 'error',
|
|
text: err.message ?? (err.data ? err.data.description : err),
|
|
})
|
|
"
|
|
:customer="customer"
|
|
:payment-methods="paymentMethods"
|
|
:return-url="`${config.public.siteUrl}/settings/billing`"
|
|
/>
|
|
<AddPaymentMethodModal
|
|
ref="addPaymentMethodModal"
|
|
:publishable-key="config.public.stripePublishableKey"
|
|
:return-url="`${config.public.siteUrl}/settings/billing`"
|
|
:create-setup-intent="createSetupIntent"
|
|
:on-error="handleError"
|
|
/>
|
|
<div class="header__row">
|
|
<div class="header__title">
|
|
<h2 class="text-2xl">{{ formatMessage(messages.paymentMethodTitle) }}</h2>
|
|
</div>
|
|
<nuxt-link class="btn" to="/settings/billing/charges">
|
|
<HistoryIcon /> {{ formatMessage(messages.paymentMethodHistory) }}
|
|
</nuxt-link>
|
|
<button class="btn" @click="addPaymentMethod">
|
|
<PlusIcon /> {{ formatMessage(messages.paymentMethodAdd) }}
|
|
</button>
|
|
</div>
|
|
<div
|
|
v-if="!paymentMethods || paymentMethods.length === 0"
|
|
class="universal-card recessed !mb-0"
|
|
>
|
|
{{ formatMessage(messages.paymentMethodNone) }}
|
|
</div>
|
|
<div v-else class="flex flex-col gap-4">
|
|
<div
|
|
v-for="(method, index) in paymentMethods"
|
|
:key="index"
|
|
class="universal-card recessed !mb-0 flex items-center justify-between"
|
|
>
|
|
<div class="flex gap-2">
|
|
<component :is="getPaymentMethodIcon(method.type)" class="h-8 w-8" />
|
|
<div class="flex flex-col">
|
|
<div class="flex items-center gap-2">
|
|
<div class="font-bold text-contrast">
|
|
<template v-if="method.type === 'card'">
|
|
{{
|
|
formatMessage(paymentMethodMessages.paymentMethodCardDisplay, {
|
|
card_brand:
|
|
formatMessage(paymentMethodMessages[method.card.brand]) ??
|
|
formatMessage(paymentMethodMessages.unknown),
|
|
last_four: method.card.last4,
|
|
})
|
|
}}
|
|
</template>
|
|
<template v-else>
|
|
{{
|
|
formatMessage(paymentMethodMessages[method.type]) ??
|
|
formatMessage(paymentMethodMessages.unknown)
|
|
}}
|
|
</template>
|
|
</div>
|
|
<div
|
|
v-if="primaryPaymentMethodId === method.id"
|
|
class="border-r-ma rounded-full bg-button-bg px-2 py-0.5 text-sm font-bold text-secondary"
|
|
>
|
|
{{ formatMessage(messages.paymentMethodPrimary) }}
|
|
</div>
|
|
</div>
|
|
<div v-if="method.type === 'card'" class="text-secondary">
|
|
{{
|
|
formatMessage(messages.paymentMethodCardExpiry, {
|
|
month: method.card.exp_month,
|
|
year: method.card.exp_year,
|
|
})
|
|
}}
|
|
</div>
|
|
<div v-else-if="method.type === 'cashapp'" class="text-secondary">
|
|
{{ method.cashapp.cashtag }}
|
|
</div>
|
|
<div v-else-if="method.type === 'paypal'" class="text-secondary">
|
|
{{ method.paypal.payer_email }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<OverflowMenu
|
|
:dropdown-id="`${baseId}-payment-method-overflow-${index}`"
|
|
class="btn icon-only transparent"
|
|
:options="
|
|
[
|
|
{
|
|
id: 'primary',
|
|
action: () => editPaymentMethod(index, true),
|
|
},
|
|
{
|
|
id: 'remove',
|
|
action: () => {
|
|
removePaymentMethodIndex = index
|
|
$refs.modal_confirm.show()
|
|
},
|
|
color: 'red',
|
|
hoverOnly: true,
|
|
},
|
|
].slice(primaryPaymentMethodId === method.id ? 1 : 0, 2)
|
|
"
|
|
>
|
|
<MoreVerticalIcon />
|
|
<template #primary>
|
|
<StarIcon />
|
|
{{ formatMessage(messages.paymentMethodMakePrimary) }}
|
|
</template>
|
|
<template #edit>
|
|
<EditIcon />
|
|
{{ formatMessage(commonMessages.editButton) }}
|
|
</template>
|
|
<template #remove>
|
|
<TrashIcon />
|
|
{{ formatMessage(commonMessages.deleteLabel) }}
|
|
</template>
|
|
</OverflowMenu>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ArrowBigUpDashIcon,
|
|
CheckCircleIcon,
|
|
EditIcon,
|
|
HistoryIcon,
|
|
ModrinthPlusIcon,
|
|
MoreVerticalIcon,
|
|
PlusIcon,
|
|
RightArrowIcon,
|
|
SpinnerIcon,
|
|
StarIcon,
|
|
TransferIcon,
|
|
TrashIcon,
|
|
UpdatedIcon,
|
|
XIcon,
|
|
} from '@modrinth/assets'
|
|
import {
|
|
AddPaymentMethodModal,
|
|
ButtonStyled,
|
|
commonMessages,
|
|
ConfirmModal,
|
|
CopyCode,
|
|
defineMessages,
|
|
getPaymentMethodIcon,
|
|
injectNotificationManager,
|
|
OverflowMenu,
|
|
paymentMethodMessages,
|
|
PurchaseModal,
|
|
ServerListing,
|
|
useFormatDateTime,
|
|
useFormatPrice,
|
|
useVIntl,
|
|
} from '@modrinth/ui'
|
|
import { calculateSavings, getCurrency } from '@modrinth/utils'
|
|
import { useQuery, useQueryClient } from '@tanstack/vue-query'
|
|
import { computed, ref } from 'vue'
|
|
|
|
import { useBaseFetch } from '@/composables/fetch.js'
|
|
import ModrinthServersIcon from '~/components/ui/servers/ModrinthServersIcon.vue'
|
|
import ServersUpgradeModalWrapper from '~/components/ui/servers/ServersUpgradeModalWrapper.vue'
|
|
import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
|
|
import { products } from '~/generated/state.json'
|
|
|
|
const { addNotification, handleError } = injectNotificationManager()
|
|
definePageMeta({
|
|
middleware: 'auth',
|
|
})
|
|
|
|
const auth = await useAuth()
|
|
const baseId = useId()
|
|
|
|
useHead({
|
|
script: [
|
|
{
|
|
src: 'https://js.stripe.com/v3/',
|
|
defer: true,
|
|
async: true,
|
|
},
|
|
],
|
|
})
|
|
|
|
const config = useRuntimeConfig()
|
|
|
|
const { formatMessage } = useVIntl()
|
|
const formatPrice = useFormatPrice()
|
|
const formatDate = useFormatDateTime({
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
})
|
|
|
|
const deleteModalMessages = defineMessages({
|
|
title: {
|
|
id: 'settings.billing.modal.delete.title',
|
|
defaultMessage: 'Are you sure you want to remove this payment method?',
|
|
},
|
|
description: {
|
|
id: 'settings.billing.modal.delete.description',
|
|
defaultMessage: 'This will remove this payment method forever (like really forever).',
|
|
},
|
|
action: {
|
|
id: 'settings.billing.modal.delete.action',
|
|
defaultMessage: 'Remove this payment method',
|
|
},
|
|
})
|
|
|
|
const cancelModalMessages = defineMessages({
|
|
title: {
|
|
id: 'settings.billing.modal.cancel.title',
|
|
defaultMessage: 'Are you sure you want to cancel your subscription?',
|
|
},
|
|
description: {
|
|
id: 'settings.billing.modal.cancel.description',
|
|
defaultMessage:
|
|
'This will cancel your subscription. You will retain your perks until the end of the current billing cycle.',
|
|
},
|
|
action: {
|
|
id: 'settings.billing.modal.cancel.action',
|
|
defaultMessage: 'Cancel subscription',
|
|
},
|
|
})
|
|
|
|
const messages = defineMessages({
|
|
subscriptionTitle: {
|
|
id: 'settings.billing.subscription.title',
|
|
defaultMessage: 'Subscriptions',
|
|
},
|
|
subscriptionDescription: {
|
|
id: 'settings.billing.subscription.description',
|
|
defaultMessage: 'Manage your Modrinth subscriptions.',
|
|
},
|
|
paymentMethodTitle: {
|
|
id: 'settings.billing.payment_method.title',
|
|
defaultMessage: 'Payment methods',
|
|
},
|
|
paymentMethodNone: {
|
|
id: 'settings.billing.payment_method.none',
|
|
defaultMessage: 'You have not added any payment methods.',
|
|
},
|
|
paymentMethodHistory: {
|
|
id: 'settings.billing.payment_method.action.history',
|
|
defaultMessage: 'View past charges',
|
|
},
|
|
paymentMethodAdd: {
|
|
id: 'settings.billing.payment_method.action.add',
|
|
defaultMessage: 'Add payment method',
|
|
},
|
|
paymentMethodPrimary: {
|
|
id: 'settings.billing.payment_method.primary',
|
|
defaultMessage: 'Primary',
|
|
},
|
|
paymentMethodMakePrimary: {
|
|
id: 'settings.billing.payment_method.action.primary',
|
|
defaultMessage: 'Make primary',
|
|
},
|
|
paymentMethodCardExpiry: {
|
|
id: 'settings.billing.payment_method.card_expiry',
|
|
defaultMessage: 'Expires {month}/{year}',
|
|
},
|
|
pyroSubscriptionTitle: {
|
|
id: 'settings.billing.pyro_subscription.title',
|
|
defaultMessage: 'Modrinth Server Subscriptions',
|
|
},
|
|
pyroSubscriptionDescription: {
|
|
id: 'settings.billing.pyro_subscription.description',
|
|
defaultMessage: 'Manage your Modrinth Server subscriptions.',
|
|
},
|
|
})
|
|
|
|
const queryClient = useQueryClient()
|
|
|
|
const { data: paymentMethods } = useQuery({
|
|
queryKey: ['billing', 'payment_methods'],
|
|
queryFn: () => useBaseFetch('billing/payment_methods', { internal: true }),
|
|
})
|
|
const { data: charges } = useQuery({
|
|
queryKey: ['billing', 'payments'],
|
|
queryFn: () => useBaseFetch('billing/payments', { internal: true }),
|
|
})
|
|
const { data: customer } = useQuery({
|
|
queryKey: ['billing', 'customer'],
|
|
queryFn: () => useBaseFetch('billing/customer', { internal: true }),
|
|
})
|
|
const { data: subscriptions } = useQuery({
|
|
queryKey: ['billing', 'subscriptions'],
|
|
queryFn: () => useBaseFetch('billing/subscriptions', { internal: true }),
|
|
})
|
|
const { data: productsData } = useQuery({
|
|
queryKey: ['billing', 'products'],
|
|
queryFn: () => useBaseFetch('billing/products', { internal: true }),
|
|
})
|
|
const { data: serversData } = useQuery({
|
|
queryKey: ['servers'],
|
|
queryFn: () => useServersFetch('servers'),
|
|
})
|
|
|
|
const midasProduct = ref(products.find((x) => x.metadata?.type === 'midas'))
|
|
const midasSubscription = computed(() =>
|
|
subscriptions.value?.find(
|
|
(x) =>
|
|
x.status === 'provisioned' && midasProduct.value?.prices?.find((y) => y.id === x.price_id),
|
|
),
|
|
)
|
|
const midasSubscriptionPrice = computed(() =>
|
|
midasSubscription.value
|
|
? midasProduct.value?.prices?.find((x) => x.id === midasSubscription.value.price_id)
|
|
: null,
|
|
)
|
|
const midasCharge = computed(() =>
|
|
midasSubscription.value
|
|
? charges.value?.find((x) => x.subscription_id === midasSubscription.value.id)
|
|
: null,
|
|
)
|
|
|
|
const oppositePrice = computed(() =>
|
|
midasSubscription.value
|
|
? midasProduct.value?.prices?.find((price) => price.id === midasSubscription.value.price_id)
|
|
?.prices?.intervals?.[oppositeInterval.value]
|
|
: undefined,
|
|
)
|
|
|
|
const pyroSubscriptions = computed(() => {
|
|
const pyroSubs = subscriptions.value?.filter((s) => s?.metadata?.type === 'pyro') || []
|
|
const servers = serversData.value?.servers || []
|
|
|
|
return pyroSubs.map((subscription) => {
|
|
const server = servers.find((s) => s.server_id === subscription.metadata.id)
|
|
return {
|
|
...subscription,
|
|
serverInfo: server,
|
|
}
|
|
})
|
|
})
|
|
|
|
const midasPurchaseModal = ref()
|
|
const country = useUserCountry()
|
|
const price = computed(() =>
|
|
midasProduct.value?.prices?.find((x) => x.currency_code === getCurrency(country.value)),
|
|
)
|
|
|
|
const primaryPaymentMethodId = computed(() => {
|
|
if (customer.value?.invoice_settings?.default_payment_method) {
|
|
return customer.value.invoice_settings.default_payment_method
|
|
} else if (paymentMethods.value?.[0]?.id) {
|
|
return paymentMethods.value[0].id
|
|
} else {
|
|
return null
|
|
}
|
|
})
|
|
|
|
const addPaymentMethodModal = ref()
|
|
|
|
function addPaymentMethod() {
|
|
addPaymentMethodModal.value.show(paymentMethods.value)
|
|
}
|
|
|
|
async function createSetupIntent() {
|
|
return await useBaseFetch('billing/payment_method', {
|
|
internal: true,
|
|
method: 'POST',
|
|
})
|
|
}
|
|
|
|
const removePaymentMethodIndex = ref()
|
|
|
|
const changingInterval = ref(false)
|
|
|
|
const oppositeInterval = computed(() =>
|
|
midasCharge.value?.subscription_interval === 'yearly' ? 'monthly' : 'yearly',
|
|
)
|
|
|
|
async function switchMidasInterval(interval) {
|
|
changingInterval.value = true
|
|
startLoading()
|
|
try {
|
|
await useBaseFetch(`billing/subscription/${midasSubscription.value.id}`, {
|
|
internal: true,
|
|
method: 'PATCH',
|
|
body: {
|
|
interval,
|
|
},
|
|
})
|
|
await refresh()
|
|
} catch (error) {
|
|
console.error('Error switching Modrinth+ payment interval:', error)
|
|
}
|
|
stopLoading()
|
|
changingInterval.value = false
|
|
}
|
|
|
|
async function editPaymentMethod(index, primary) {
|
|
startLoading()
|
|
try {
|
|
await useBaseFetch(`billing/payment_method/${paymentMethods.value[index].id}`, {
|
|
internal: true,
|
|
method: 'PATCH',
|
|
data: {
|
|
primary,
|
|
},
|
|
})
|
|
await refresh()
|
|
} catch (err) {
|
|
addNotification({
|
|
title: 'An error occurred',
|
|
text: err.data ? err.data.description : err,
|
|
type: 'error',
|
|
})
|
|
}
|
|
stopLoading()
|
|
}
|
|
|
|
async function removePaymentMethod(index) {
|
|
startLoading()
|
|
try {
|
|
await useBaseFetch(`billing/payment_method/${paymentMethods.value[index].id}`, {
|
|
internal: true,
|
|
method: 'DELETE',
|
|
})
|
|
await refresh()
|
|
} catch (err) {
|
|
addNotification({
|
|
title: 'An error occurred',
|
|
text: err.data ? err.data.description : err,
|
|
type: 'error',
|
|
})
|
|
}
|
|
stopLoading()
|
|
}
|
|
|
|
const cancelSubscriptionId = ref(null)
|
|
async function cancelSubscription(id, cancelled) {
|
|
startLoading()
|
|
try {
|
|
await useBaseFetch(`billing/subscription/${id}`, {
|
|
internal: true,
|
|
method: 'PATCH',
|
|
body: {
|
|
cancelled,
|
|
},
|
|
})
|
|
await refresh()
|
|
} catch (err) {
|
|
addNotification({
|
|
title: 'An error occurred',
|
|
text: err.data ? err.data.description : err,
|
|
type: 'error',
|
|
})
|
|
}
|
|
stopLoading()
|
|
}
|
|
|
|
const getPyroProduct = (subscription) => {
|
|
if (!subscription || !productsData.value) return null
|
|
return productsData.value.find((p) => p.prices?.some((x) => x.id === subscription.price_id))
|
|
}
|
|
|
|
// Get product by a price ID (useful for pending next-charge changes)
|
|
const getProductFromPriceId = (priceId) => {
|
|
if (!priceId || !productsData.value) return null
|
|
return productsData.value.find((p) => p.prices?.some((x) => x.id === priceId))
|
|
}
|
|
|
|
const getPyroCharge = (subscription) => {
|
|
if (!subscription || !charges.value) return null
|
|
return charges.value.find(
|
|
(charge) => charge.subscription_id === subscription.id && charge.status !== 'succeeded',
|
|
)
|
|
}
|
|
|
|
const getProductSize = (product) => {
|
|
if (!product || !product.metadata) return 'Unknown'
|
|
const ramSize = product.metadata.ram
|
|
if (ramSize === 4096) return 'Small'
|
|
if (ramSize === 6144) return 'Medium'
|
|
if (ramSize === 8192) return 'Large'
|
|
return 'Custom'
|
|
}
|
|
|
|
const getProductPrice = (product, interval) => {
|
|
if (!product || !product.prices) return null
|
|
const countryValue = country.value
|
|
return (
|
|
product.prices.find(
|
|
(p) => p.currency_code === getCurrency(countryValue) && p.prices?.intervals?.[interval],
|
|
) ??
|
|
product.prices.find((p) => p.currency_code === 'USD' && p.prices?.intervals?.[interval]) ??
|
|
product.prices[0]
|
|
)
|
|
}
|
|
|
|
const getPlanChangeVerb = (currentProduct, nextProduct) => {
|
|
const curRam = currentProduct?.metadata?.ram ?? 0
|
|
const nextRam = nextProduct?.metadata?.ram ?? 0
|
|
|
|
return nextRam < curRam ? 'downgrade' : 'upgrade'
|
|
}
|
|
|
|
const modalCancel = ref(null)
|
|
|
|
const upgradeModal = ref(null)
|
|
const showPyroUpgradeModal = (subscription) => {
|
|
upgradeModal.value?.open(subscription?.metadata?.id)
|
|
}
|
|
|
|
const resubscribePyro = async (subscriptionId, wasSuspended) => {
|
|
try {
|
|
await useBaseFetch(`billing/subscription/${subscriptionId}`, {
|
|
internal: true,
|
|
method: 'PATCH',
|
|
body: {
|
|
cancelled: false,
|
|
},
|
|
})
|
|
await refresh()
|
|
if (wasSuspended) {
|
|
addNotification({
|
|
title: 'Resubscription request submitted',
|
|
text: 'If the server is currently suspended, it may take up to 10 minutes for another charge attempt to be made.',
|
|
type: 'success',
|
|
})
|
|
} else {
|
|
addNotification({
|
|
title: 'Success',
|
|
text: 'Server subscription resubscribed successfully',
|
|
type: 'success',
|
|
})
|
|
}
|
|
} catch {
|
|
addNotification({
|
|
title: 'Error resubscribing',
|
|
text: 'An error occurred while resubscribing to your Modrinth server.',
|
|
type: 'error',
|
|
})
|
|
}
|
|
}
|
|
|
|
const refresh = async () => {
|
|
await Promise.all([
|
|
queryClient.invalidateQueries({ queryKey: ['billing'] }),
|
|
queryClient.invalidateQueries({ queryKey: ['servers'] }),
|
|
])
|
|
}
|
|
|
|
function showCancellationSurvey(subscription) {
|
|
if (!subscription) {
|
|
console.warn('No survey notice to open')
|
|
return
|
|
}
|
|
|
|
const product = getPyroProduct(subscription)
|
|
const priceObj = product?.prices?.find((x) => x.id === subscription.price_id)
|
|
const price = priceObj?.prices?.intervals?.[subscription.interval]
|
|
const currency = priceObj?.currency_code
|
|
|
|
const popupOptions = {
|
|
layout: 'modal',
|
|
width: 700,
|
|
autoClose: 2000,
|
|
hideTitle: true,
|
|
hiddenFields: {
|
|
username: auth.value?.user?.username,
|
|
user_id: auth.value?.user?.id,
|
|
user_email: auth.value?.user?.email,
|
|
subscription_id: subscription.id,
|
|
price_id: subscription.price_id,
|
|
interval: subscription.interval,
|
|
started: subscription.created,
|
|
plan_ram: product?.metadata.ram / 1024,
|
|
plan_cpu: product?.metadata.cpu,
|
|
price: price ? `${price / 100}` : 'unknown',
|
|
currency: currency ?? 'unknown',
|
|
},
|
|
onOpen: () => console.log(`Opened cancellation survey for: ${subscription.id}`),
|
|
onClose: () => console.log(`Closed cancellation survey for: ${subscription.id}`),
|
|
onSubmit: (payload) => {
|
|
console.log('Form submitted, cancelling server.', payload)
|
|
cancelSubscription(subscription.id, true)
|
|
},
|
|
}
|
|
|
|
const formId = 'mOr7lM'
|
|
|
|
try {
|
|
if (window.Tally?.openPopup) {
|
|
console.log(
|
|
`Opening Tally popup for servers subscription ${subscription.id} (form ID: ${formId})`,
|
|
)
|
|
window.Tally.openPopup(formId, popupOptions)
|
|
} else {
|
|
console.warn('Tally script not yet loaded')
|
|
cancelSubscription(subscription.id, true)
|
|
}
|
|
} catch (e) {
|
|
console.error('Error opening Tally popup:', e)
|
|
}
|
|
}
|
|
|
|
useHead({
|
|
script: [
|
|
{
|
|
src: 'https://tally.so/widgets/embed.js',
|
|
defer: true,
|
|
},
|
|
],
|
|
})
|
|
|
|
const getPendingChange = (subscription) => {
|
|
const charge = getPyroCharge(subscription)
|
|
if (!charge || charge.status !== 'open') return null
|
|
|
|
const nextProduct = getProductFromPriceId(charge.price_id)
|
|
if (!nextProduct || charge.price_id === subscription.price_id) {
|
|
// Not a plan change, but interval could change
|
|
if (charge.subscription_interval && charge.subscription_interval !== subscription.interval) {
|
|
return {
|
|
planSize: getProductSize(getPyroProduct(subscription)),
|
|
cpu: getPyroProduct(subscription)?.metadata?.cpu / 2,
|
|
cpuBurst: getPyroProduct(subscription)?.metadata?.cpu,
|
|
ramGb: (getPyroProduct(subscription)?.metadata?.ram || 0) / 1024,
|
|
swapGb: (getPyroProduct(subscription)?.metadata?.swap || 0) / 1024 || undefined,
|
|
storageGb: (getPyroProduct(subscription)?.metadata?.storage || 0) / 1024 || undefined,
|
|
date: charge.due,
|
|
intervalChange: charge.subscription_interval,
|
|
verb: 'Switches',
|
|
}
|
|
}
|
|
return null
|
|
}
|
|
|
|
const curProduct = getPyroProduct(subscription)
|
|
const verb = getPlanChangeVerb(curProduct, nextProduct)
|
|
const cpu = nextProduct?.metadata?.cpu ?? 0
|
|
const ram = nextProduct?.metadata?.ram ?? 0
|
|
const swap = nextProduct?.metadata?.swap ?? 0
|
|
const storage = nextProduct?.metadata?.storage ?? 0
|
|
|
|
return {
|
|
planSize: getProductSize(nextProduct),
|
|
cpu: cpu / 2,
|
|
cpuBurst: cpu,
|
|
ramGb: ram / 1024,
|
|
swapGb: swap ? swap / 1024 : undefined,
|
|
storageGb: storage ? storage / 1024 : undefined,
|
|
date: charge.due,
|
|
intervalChange:
|
|
charge.subscription_interval && charge.subscription_interval !== subscription.interval
|
|
? charge.subscription_interval
|
|
: null,
|
|
verb,
|
|
}
|
|
}
|
|
</script>
|