feat: medal promotion on servers page (#4117)

* 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>
2025-08-18 18:59:19 +01:00
parent 9af1391e0e
commit 14eac461be
34 changed files with 2476 additions and 285 deletions
--- a/packages/ui/src/components/billing/ModalBasedServerPlan.vue
+++ b/packages/ui/src/components/billing/ModalBasedServerPlan.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { DropdownIcon } from '@modrinth/assets'
+import { formatPrice } from '@modrinth/utils'
+import { type MessageDescriptor, useVIntl } from '@vintl/vintl'
+import { Menu } from 'floating-vue'
+import { computed, inject, type Ref } from 'vue'
+
+import { monthsInInterval, type ServerBillingInterval, type ServerPlan } from '../../utils/billing'
+import ServersSpecs from './ServersSpecs.vue'
+
+const props = withDefaults(
+	defineProps<{
+		plan: ServerPlan
+		title: MessageDescriptor
+		description: MessageDescriptor
+		buttonColor?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'
+		mostPopular?: boolean
+		selected?: boolean
+	}>(),
+	{
+		buttonColor: 'standard',
+		mostPopular: false,
+		selected: false,
+	},
+)
+
+const emit = defineEmits<{
+	(e: 'select', plan: ServerPlan): void
+}>()
+
+const { formatMessage, locale } = useVIntl()
+
+// TODO: Use DI framework when merged.
+const selectedInterval = inject<Ref<ServerBillingInterval>>('selectedInterval')
+const currency = inject<string>('currency')
+
+const perMonth = computed(() => {
+	if (!props.plan || !currency || !selectedInterval?.value) return undefined
+	const total = props.plan.prices?.find((x) => x.currency_code === currency)?.prices?.intervals?.[
+		selectedInterval.value
+	]
+	if (!total) return undefined
+	return total / monthsInInterval[selectedInterval.value]
+})
+
+const mostPopularStyle = computed(() => {
+	if (!props.mostPopular) return undefined
+	const style: Record<string, string> = {
+		backgroundImage:
+			'radial-gradient(86.12% 101.64% at 95.97% 94.07%, rgba(27, 217, 106, 0.23) 0%, rgba(14, 115, 56, 0.2) 100%)',
+		boxShadow: '0px 12px 38.1px rgba(27, 217, 106, 0.13)',
+	}
+
+	if (!props.selected) {
+		style.borderColor = 'rgba(12, 107, 52, 0.55)'
+	}
+
+	return style
+})
+</script>
+
+<template>
+	<div
+		class="rounded-2xl p-4 font-semibold transition-all duration-300 experimental-styles-within h-full border-2 border-solid cursor-pointer select-none"
+		:class="{
+			'bg-brand-highlight border-brand': selected,
+			'bg-button-bg border-transparent': !selected,
+			'!bg-bg': mostPopular,
+		}"
+		:style="mostPopularStyle"
+		role="button"
+		tabindex="0"
+		:aria-pressed="selected"
+		@click="emit('select', plan)"
+		@keydown.enter.prevent="emit('select', plan)"
+		@keydown.space.prevent="emit('select', plan)"
+	>
+		<div class="flex h-full flex-col justify-between gap-2">
+			<div class="flex flex-col">
+				<div class="flex items-center justify-between">
+					<span class="text-2xl font-semibold text-contrast">
+						{{ formatMessage(title) }}
+					</span>
+					<div
+						v-if="mostPopular"
+						class="relative w-fit rounded-full bg-highlight-green px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
+					>
+						Most Popular
+					</div>
+				</div>
+				<span class="m-0 text-lg font-bold text-contrast">
+					{{ formatPrice(locale, perMonth, currency, true) }}
+					<span class="text-sm font-semibold text-secondary">
+						/ month{{ selectedInterval !== 'monthly' ? `, billed ${selectedInterval}` : '' }}
+					</span>
+				</span>
+			</div>
+
+			<span class="text-sm">{{ formatMessage(description) }}</span>
+
+			<div class="flex flex-col gap-2">
+				<Menu
+					placement="bottom-start"
+					:triggers="['hover', 'focus']"
+					:auto-hide="true"
+					:delay="{ show: 100, hide: 120 }"
+					:distance="8"
+				>
+					<template #default="{ shown }">
+						<div
+							class="flex justify-between text-sm cursor-default select-none outline-none"
+							role="button"
+							tabindex="0"
+							aria-haspopup="true"
+							:aria-expanded="shown"
+						>
+							<span>View plan details</span>
+							<DropdownIcon
+								class="ml-auto my-auto size-4 transition-transform duration-300 shrink-0"
+								:class="{ 'rotate-180': shown }"
+							/>
+						</div>
+					</template>
+
+					<template #popper>
+						<div class="w-72 rounded-md border border-contrast/10 bg-bg p-3 shadow-lg">
+							<ServersSpecs
+								:ram="plan.metadata.ram!"
+								:storage="plan.metadata.storage!"
+								:cpus="plan.metadata.cpu!"
+							/>
+						</div>
+					</template>
+				</Menu>
+			</div>
+		</div>
+	</div>
+</template>