You've already forked AstralRinth
forked from didirus/AstralRinth
refactor: migrate to common eslint+prettier configs (#4168)
* refactor: migrate to common eslint+prettier configs * fix: prettier frontend * feat: config changes * fix: lint issues * fix: lint * fix: type imports * fix: cyclical import issue * fix: lockfile * fix: missing dep * fix: switch to tabs * fix: continue switch to tabs * fix: rustfmt parity * fix: moderation lint issue * fix: lint issues * fix: ui intl * fix: lint issues * Revert "fix: rustfmt parity" This reverts commit cb99d2376c321d813d4b7fc7e2a213bb30a54711. * feat: revert last rs
This commit is contained in:
Cal H.
@@ -1,170 +1,165 @@
|
||||
<template>
|
||||
<PurchaseModal
|
||||
ref="purchaseModal"
|
||||
:product="midasProduct"
|
||||
:country="country"
|
||||
:publishable-key="config.public.stripePublishableKey"
|
||||
:send-billing-request="
|
||||
async (body) =>
|
||||
await useBaseFetch('billing/payment', { internal: true, method: 'POST', body })
|
||||
"
|
||||
:fetch-payment-data="fetchPaymentData"
|
||||
: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`"
|
||||
/>
|
||||
<div class="main-hero">
|
||||
<div class="flex max-w-screen-lg flex-col items-center gap-4 text-center">
|
||||
<ModrinthPlusIcon class="h-8 w-max text-contrast" />
|
||||
<h1 class="m-0 text-[4rem]">Support creators and go ad-free</h1>
|
||||
<p class="m-0 mb-4 text-[18px] leading-relaxed">
|
||||
Subscribe to Modrinth Plus to go ad-free, support Modrinth's development, and get an
|
||||
exclusive profile badge! Half your subscription goes directly to Modrinth creators. Cancel
|
||||
anytime.
|
||||
</p>
|
||||
<p class="m-0 text-[2rem] font-bold text-purple">
|
||||
{{ formatPrice(vintl.locale, price.prices.intervals.monthly, price.currency_code) }}/mo
|
||||
</p>
|
||||
<p class="m-0 mb-4 text-secondary">
|
||||
or save
|
||||
{{ calculateSavings(price.prices.intervals.monthly, price.prices.intervals.yearly) }}% with
|
||||
annual billing!
|
||||
</p>
|
||||
<nuxt-link
|
||||
v-if="auth.user && isPermission(auth.user.badges, 1 << 0)"
|
||||
to="/settings/billing"
|
||||
class="btn btn-purple btn-large"
|
||||
>
|
||||
<SettingsIcon aria-hidden="true" />
|
||||
Manage subscription
|
||||
</nuxt-link>
|
||||
<button v-else-if="auth.user" class="btn btn-purple btn-large" @click="purchaseModal.show()">
|
||||
Subscribe
|
||||
</button>
|
||||
<nuxt-link
|
||||
v-else
|
||||
:to="`/auth/sign-in?redirect=${encodeURIComponent('/plus?showModal=true')}`"
|
||||
class="btn btn-purple btn-large"
|
||||
>
|
||||
Subscribe
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="perks-hero">
|
||||
<h2>What you get with Modrinth Plus!</h2>
|
||||
<div class="mt-8 grid max-w-screen-lg gap-8 lg:grid-cols-3">
|
||||
<div class="flex flex-col gap-4 rounded-xl bg-bg-raised p-4">
|
||||
<HeartIcon class="h-8 w-8 text-purple" />
|
||||
<span class="text-lg font-bold">Support Modrinth creators</span>
|
||||
<span class="leading-5 text-secondary">
|
||||
50% of your subscription goes directly to Modrinth creators.
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4 rounded-xl bg-bg-raised p-4">
|
||||
<SparklesIcon class="h-8 w-8 text-purple" />
|
||||
<span class="text-lg font-bold">Remove all ads</span>
|
||||
<span class="leading-5 text-secondary">
|
||||
Never see an advertisement again on the Modrinth app.
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4 rounded-xl bg-bg-raised p-4">
|
||||
<StarIcon class="h-8 w-8 text-purple" />
|
||||
<span class="text-lg font-bold">Profile badge</span>
|
||||
<span class="leading-5 text-secondary">Get an exclusive badge on your user page.</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="mt-4 text-secondary">...and much more coming soon™!</span>
|
||||
</div>
|
||||
<PurchaseModal
|
||||
ref="purchaseModal"
|
||||
:product="midasProduct"
|
||||
:country="country"
|
||||
:publishable-key="config.public.stripePublishableKey"
|
||||
:send-billing-request="
|
||||
async (body) =>
|
||||
await useBaseFetch('billing/payment', { internal: true, method: 'POST', body })
|
||||
"
|
||||
:fetch-payment-data="fetchPaymentData"
|
||||
: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`"
|
||||
/>
|
||||
<div class="main-hero">
|
||||
<div class="flex max-w-screen-lg flex-col items-center gap-4 text-center">
|
||||
<ModrinthPlusIcon class="h-8 w-max text-contrast" />
|
||||
<h1 class="m-0 text-[4rem]">Support creators and go ad-free</h1>
|
||||
<p class="m-0 mb-4 text-[18px] leading-relaxed">
|
||||
Subscribe to Modrinth Plus to go ad-free, support Modrinth's development, and get an
|
||||
exclusive profile badge! Half your subscription goes directly to Modrinth creators. Cancel
|
||||
anytime.
|
||||
</p>
|
||||
<p class="m-0 text-[2rem] font-bold text-purple">
|
||||
{{ formatPrice(vintl.locale, price.prices.intervals.monthly, price.currency_code) }}/mo
|
||||
</p>
|
||||
<p class="m-0 mb-4 text-secondary">
|
||||
or save
|
||||
{{ calculateSavings(price.prices.intervals.monthly, price.prices.intervals.yearly) }}% with
|
||||
annual billing!
|
||||
</p>
|
||||
<nuxt-link
|
||||
v-if="auth.user && isPermission(auth.user.badges, 1 << 0)"
|
||||
to="/settings/billing"
|
||||
class="btn btn-purple btn-large"
|
||||
>
|
||||
<SettingsIcon aria-hidden="true" />
|
||||
Manage subscription
|
||||
</nuxt-link>
|
||||
<button v-else-if="auth.user" class="btn btn-purple btn-large" @click="purchaseModal.show()">
|
||||
Subscribe
|
||||
</button>
|
||||
<nuxt-link
|
||||
v-else
|
||||
:to="`/auth/sign-in?redirect=${encodeURIComponent('/plus?showModal=true')}`"
|
||||
class="btn btn-purple btn-large"
|
||||
>
|
||||
Subscribe
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="perks-hero">
|
||||
<h2>What you get with Modrinth Plus!</h2>
|
||||
<div class="mt-8 grid max-w-screen-lg gap-8 lg:grid-cols-3">
|
||||
<div class="flex flex-col gap-4 rounded-xl bg-bg-raised p-4">
|
||||
<HeartIcon class="h-8 w-8 text-purple" />
|
||||
<span class="text-lg font-bold">Support Modrinth creators</span>
|
||||
<span class="leading-5 text-secondary">
|
||||
50% of your subscription goes directly to Modrinth creators.
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4 rounded-xl bg-bg-raised p-4">
|
||||
<SparklesIcon class="h-8 w-8 text-purple" />
|
||||
<span class="text-lg font-bold">Remove all ads</span>
|
||||
<span class="leading-5 text-secondary">
|
||||
Never see an advertisement again on the Modrinth app.
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4 rounded-xl bg-bg-raised p-4">
|
||||
<StarIcon class="h-8 w-8 text-purple" />
|
||||
<span class="text-lg font-bold">Profile badge</span>
|
||||
<span class="leading-5 text-secondary">Get an exclusive badge on your user page.</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="mt-4 text-secondary">...and much more coming soon™!</span>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
HeartIcon,
|
||||
ModrinthPlusIcon,
|
||||
SettingsIcon,
|
||||
SparklesIcon,
|
||||
StarIcon,
|
||||
} from "@modrinth/assets";
|
||||
import { injectNotificationManager, PurchaseModal } from "@modrinth/ui";
|
||||
import { calculateSavings, formatPrice, getCurrency } from "@modrinth/utils";
|
||||
import { products } from "~/generated/state.json";
|
||||
import { HeartIcon, ModrinthPlusIcon, SettingsIcon, SparklesIcon, StarIcon } from '@modrinth/assets'
|
||||
import { injectNotificationManager, PurchaseModal } from '@modrinth/ui'
|
||||
import { calculateSavings, formatPrice, getCurrency } from '@modrinth/utils'
|
||||
|
||||
const { addNotification } = injectNotificationManager();
|
||||
import { products } from '~/generated/state.json'
|
||||
|
||||
const title = "Subscribe to Modrinth Plus!";
|
||||
const { addNotification } = injectNotificationManager()
|
||||
|
||||
const title = 'Subscribe to Modrinth Plus!'
|
||||
const description =
|
||||
"Subscribe to Modrinth Plus to go ad-free, support Modrinth's development, and get an exclusive profile badge! Half your subscription goes directly to Modrinth creators.";
|
||||
"Subscribe to Modrinth Plus to go ad-free, support Modrinth's development, and get an exclusive profile badge! Half your subscription goes directly to Modrinth creators."
|
||||
|
||||
useSeoMeta({
|
||||
title,
|
||||
description,
|
||||
ogTitle: title,
|
||||
ogDescription: description,
|
||||
});
|
||||
title,
|
||||
description,
|
||||
ogTitle: title,
|
||||
ogDescription: description,
|
||||
})
|
||||
|
||||
useHead({
|
||||
script: [
|
||||
{
|
||||
src: "https://js.stripe.com/v3/",
|
||||
defer: true,
|
||||
async: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
script: [
|
||||
{
|
||||
src: 'https://js.stripe.com/v3/',
|
||||
defer: true,
|
||||
async: true,
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
const vintl = useVIntl();
|
||||
const vintl = useVIntl()
|
||||
|
||||
const config = useRuntimeConfig();
|
||||
const config = useRuntimeConfig()
|
||||
|
||||
const auth = await useAuth();
|
||||
const purchaseModal = ref();
|
||||
const midasProduct = ref(products.find((x) => x.metadata.type === "midas"));
|
||||
const country = useUserCountry();
|
||||
const auth = await useAuth()
|
||||
const purchaseModal = ref()
|
||||
const midasProduct = ref(products.find((x) => x.metadata.type === 'midas'))
|
||||
const country = useUserCountry()
|
||||
const price = computed(() =>
|
||||
midasProduct.value.prices.find((x) => x.currency_code === getCurrency(country.value)),
|
||||
);
|
||||
const customer = ref();
|
||||
const paymentMethods = ref([]);
|
||||
midasProduct.value.prices.find((x) => x.currency_code === getCurrency(country.value)),
|
||||
)
|
||||
const customer = ref()
|
||||
const paymentMethods = ref([])
|
||||
|
||||
async function fetchPaymentData() {
|
||||
[customer.value, paymentMethods.value] = await Promise.all([
|
||||
useBaseFetch("billing/customer", { internal: true }),
|
||||
useBaseFetch("billing/payment_methods", { internal: true }),
|
||||
]);
|
||||
;[customer.value, paymentMethods.value] = await Promise.all([
|
||||
useBaseFetch('billing/customer', { internal: true }),
|
||||
useBaseFetch('billing/payment_methods', { internal: true }),
|
||||
])
|
||||
}
|
||||
|
||||
const route = useRoute();
|
||||
const route = useRoute()
|
||||
onMounted(() => {
|
||||
if (route.query.showModal) {
|
||||
purchaseModal.value.show();
|
||||
}
|
||||
});
|
||||
if (route.query.showModal) {
|
||||
purchaseModal.value.show()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.main-hero {
|
||||
background:
|
||||
linear-gradient(360deg, rgba(199, 138, 255, 0.2) 10.92%, var(--color-bg) 100%),
|
||||
var(--color-accent-contrast);
|
||||
margin-top: -5rem;
|
||||
padding: 11.25rem 1rem 8rem;
|
||||
background:
|
||||
linear-gradient(360deg, rgba(199, 138, 255, 0.2) 10.92%, var(--color-bg) 100%),
|
||||
var(--color-accent-contrast);
|
||||
margin-top: -5rem;
|
||||
padding: 11.25rem 1rem 8rem;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.perks-hero {
|
||||
background-color: var(--color-accent-contrast);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 4rem 1rem;
|
||||
background-color: var(--color-accent-contrast);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 4rem 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user