tomasalias/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

feat: medal promotion on servers page (#4117)

Browse Source 
* feat: medal promotion on servers page

* feat: medal server card

* fix: styling changes

* fix: colors for dark mode only

* fix: light mode medal promotion

* feat: finish server card layout

* feat: countdown on server panel

* fix: lint

* feat: use same gradient as promo

* fix: scale for medal bg

* fix: border around server icon

* feat: medal subscr expiry date stuff

* feat: progress on plans within the modal

* feat: finalize plan modal stage

* fix: unused scss

* feat: remove buttons from cards

* feat: upgrade button opens modal on server panel

* feat: billing endpoint

* fix: lint issues

* fix: lint issues

* fix: lint issues

* feat: better handling of downgrades + existing plan checks

* feat: update medal url

* feat: proration visual in modal

* feat: standardize upgrade modal into ServersUpgradeModalWrapper

* feat: replace upgrade PurchaseModal with ServersUpgradeModalWrapper

* feat: allow server region

* fix: lint

* fix: lint

* fix: medal frontend completion

* fix: lint issues

* feat: ad

* fix: hover tooltip + orange new server sparkle

* feat: ad

* fix: lint issues new eslint

* feat: match ad

* feat: support for ?dry=true

* fix: lint isuses

* fix: lint issues

* fix: TeleportDropdownMenu imports

* fix: hash nav issues

* feat: clarify confirm changes btn

* fix: lint issues

* fix: "Using new payment method"

* fix: lint

* fix: re-add -mt-2

---------

Signed-off-by: Cal H. <hendersoncal117@gmail.com>
This commit is contained in:
Cal H.
2025-08-18 18:59:19 +01:00
committed by GitHub
parent 9af1391e0e
commit 14eac461be
34 changed files with 2476 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
apps/frontend/src/pages/servers/index.vue
View File

@@ -392,7 +392,7 @@
<div class="relative flex flex-col gap-4 rounded-2xl bg-bg p-6 text-left md:p-12">
<h1 class="m-0 text-lg font-bold">Frequently Asked Questions</h1>
<div class="details-hide flex flex-col gap-1">
<details pyro-hash="cpus" class="group" :open="$route.hash === '#cpus'">
<details nav-hash="cpus" class="group" :open="$route.hash === '#cpus'">
<summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
<span class="mr-2 transition-transform duration-200 group-open:rotate-90">
<RightArrowIcon />
@@ -404,7 +404,7 @@
GHz, paired with DDR5 memory.
</p>
</details>
<details pyro-hash="cpu-burst" class="group" :open="$route.hash === '#cpu-burst'">
<details nav-hash="cpu-burst" class="group" :open="$route.hash === '#cpu-burst'">
<summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
<span class="mr-2 transition-transform duration-200 group-open:rotate-90">
<RightArrowIcon />
@@ -420,7 +420,7 @@
</p>
</details>
<details pyro-hash="ddos" class="group" :open="$route.hash === '#ddos'">
<details nav-hash="ddos" class="group" :open="$route.hash === '#ddos'">
<summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
<span class="mr-2 transition-transform duration-200 group-open:rotate-90">
<RightArrowIcon />
@@ -433,7 +433,7 @@
</p>
</details>
<details pyro-hash="region" class="group" :open="$route.hash === '#region'">
<details nav-hash="region" class="group" :open="$route.hash === '#region'">
<summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
<span class="mr-2 transition-transform duration-200 group-open:rotate-90">
<RightArrowIcon />
@@ -447,7 +447,7 @@
</p>
</details>
<details pyro-hash="storage" class="group" :open="$route.hash === '#storage'">
<details nav-hash="storage" class="group" :open="$route.hash === '#storage'">
<summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
<span class="mr-2 transition-transform duration-200 group-open:rotate-90">
<RightArrowIcon />
@@ -460,7 +460,7 @@
</p>
</details>
<details pyro-hash="performance" class="group" :open="$route.hash === '#performance'">
<details nav-hash="performance" class="group" :open="$route.hash === '#performance'">
<summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
<span class="mr-2 transition-transform duration-200 group-open:rotate-90">
<RightArrowIcon />
@@ -481,7 +481,7 @@
</p>
</details>
<details pyro-hash="prices" class="group" :open="$route.hash === '#prices'">
<details nav-hash="prices" class="group" :open="$route.hash === '#prices'">
<summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
<span class="mr-2 transition-transform duration-200 group-open:rotate-90">
<RightArrowIcon />
@@ -493,7 +493,7 @@
</p>
</details>
<details pyro-hash="versions" class="group" :open="$route.hash === '#versions'">
<details nav-hash="versions" class="group" :open="$route.hash === '#versions'">
<summary class="flex cursor-pointer items-center py-3 font-medium text-contrast">
<span class="mr-2 transition-transform duration-200 group-open:rotate-90">
<RightArrowIcon />
@@ -516,12 +516,13 @@
</section>
<section
id="plan"
pyro-hash="plan"
class="relative mt-24 flex flex-col bg-[radial-gradient(65%_50%_at_50%_-10%,var(--color-brand-highlight)_0%,var(--color-accent-contrast)_100%)] px-3 pt-24 md:mt-48 md:pt-48"
>
<div class="faded-brand-line absolute left-0 top-0 h-[1px] w-full"></div>
<div class="mx-auto flex w-full max-w-7xl flex-col items-center gap-8 text-center">
<div
nav-hash="plan"
class="mx-auto flex w-full max-w-7xl flex-col items-center gap-8 text-center"
>
<h1 class="relative m-0 text-4xl leading-[120%] md:text-7xl">
There's a server for everyone
</h1>
@@ -551,6 +552,8 @@
<span v-else></span>
</div>
<MedalPlanPromotion v-if="flags.enableMedalPromotion" />
<ul class="m-0 flex w-full grid-cols-3 flex-col gap-8 p-0 lg:grid">
<ServerPlanSelector
:capacity="capacityStatuses?.small?.available"
@@ -651,12 +654,14 @@ import { computed } from 'vue'
import { useBaseFetch } from '@/composables/fetch.js'
import OptionGroup from '~/components/ui/OptionGroup.vue'
import LoaderIcon from '~/components/ui/servers/icons/LoaderIcon.vue'
import MedalPlanPromotion from '~/components/ui/servers/marketing/MedalPlanPromotion.vue'
import ServerPlanSelector from '~/components/ui/servers/marketing/ServerPlanSelector.vue'
import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
import { products } from '~/generated/state.json'
const { addNotification } = injectNotificationManager()
const { locale } = useVIntl()
const flags = useFeatureFlags()
const billingPeriods = ref(['monthly', 'quarterly'])
const billingPeriod = ref(billingPeriods.value.includes('quarterly') ? 'quarterly' : 'monthly')
@@ -850,8 +855,8 @@ const isAtCapacity = computed(
const scrollToFaq = () => {
if (route.hash) {
// where pyro-hash === route.hash
const faq = document.querySelector(`[pyro-hash="${route.hash.slice(1)}"]`)
// where nav-hash === route.hash
const faq = document.querySelector(`[nav-hash="${route.hash.slice(1)}"]`)
if (faq) {
faq.open = true
const top = faq.getBoundingClientRect().top
@@ -923,16 +928,20 @@ const selectProduct = async (product) => {
await nextTick()
if (product === 'custom') {
purchaseModal.value?.show(billingPeriod.value, undefined, selectedProjectId.value)
purchaseModal.value?.show(billingPeriod.value, null, selectedProjectId.value)
} else {
purchaseModal.value?.show(billingPeriod.value, selectedProduct.value, selectedProjectId.value)
}
}
const planQuery = () => {
if (route.query.plan) {
document.getElementById('plan').scrollIntoView()
selectProduct(route.query.plan)
const planQuery = async () => {
if ('plan' in route.query) {
await nextTick()
const planElement = document.querySelector(`[nav-hash="plan"]`)
if (planElement) {
planElement.scrollIntoView({ behavior: 'smooth' })
await selectProduct(route.query.plan)
}
}
}