feat: disable financial stuff on app frontend

Author: IMB11

apps/frontend/src/components/ui/servers/ServersUpgradeModalWrapper.vue

@@ -8,7 +8,8 @@
 </template>
 
 <script setup lang="ts">
-import ServersUpgradeModalWrapperBase from '@modrinth/ui/src/components/billing/ServersUpgradeModalWrapper.vue'
+// TODO: Remove this wrapper when we figure out how to do cross platform state + stripe
+import { ServersUpgradeModalWrapper as ServersUpgradeModalWrapperBase } from '@modrinth/ui'
 import { useGeneratedState } from '~/composables/generated'
 
 const config = useRuntimeConfig()

packages/ui/src/components/servers/marketing/MedalServerListing.vue

@@ -80,7 +80,7 @@
 				</div>
 			</AutoLink>
 
-			<div class="z-10 ml-auto">
+			<div class="z-10 ml-auto" v-if="isNuxt">
 				<ButtonStyled color="medal-promo" type="outlined" size="large">
 					<button class="my-auto" @click="handleUpgrade"><RocketIcon /> Upgrade</button>
 				</ButtonStyled>
@@ -128,7 +128,7 @@
 </template>
 
 <script setup lang="ts">
-import type { Archon } from '@modrinth/api-client'
+import { NuxtModrinthClient, type Archon } from '@modrinth/api-client'
 import {
 	ChevronRightIcon,
 	LoaderCircleIcon,
@@ -157,6 +157,8 @@ const emit = defineEmits<{ (e: 'upgrade'): void }>()
 
 const client = injectModrinthClient()
 
+const isNuxt = computed(() => client instanceof NuxtModrinthClient)
+
 const showGameLabel = computed(() => !!props.game)
 const showLoaderLabel = computed(() => !!props.loader)
 

packages/ui/src/pages/servers/manage/index.vue

@@ -4,10 +4,11 @@
 		class="experimental-styles-within relative mx-auto mb-6 flex min-h-screen w-full max-w-[1280px] flex-col px-6"
 	>
 		<ServersUpgradeModalWrapper
+			v-if="stripePublishableKey && siteUrl && products"
 			ref="upgradeModal"
-			:stripe-publishable-key="props.stripePublishableKey"
-			:site-url="props.siteUrl"
-			:products="props.products"
+			:stripe-publishable-key
+			:site-url
+			:products
 		/>
 
 		<div
@@ -189,15 +190,15 @@ import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import ServersUpgradeModalWrapper from '../../../components/billing/ServersUpgradeModalWrapper.vue'
-
-const props = defineProps<{
-	stripePublishableKey: string
-	siteUrl: string
-	products: Labrinth.Billing.Internal.Product[]
-}>()
 import MedalServerListing from '../../../components/servers/marketing/MedalServerListing.vue'
 import ServerListing from '../../../components/servers/ServerListing.vue'
 
+defineProps<{
+	stripePublishableKey?: string
+	siteUrl?: string
+	products?: Labrinth.Billing.Internal.Product[]
+}>()
+
 const router = useRouter()
 const route = useRoute()
 const { labrinth, archon } = injectModrinthClient()