+
{{ planName }}
@@ -194,9 +194,7 @@ function setInterval(newInterval: ServerBillingInterval) {
/>
- ()
const router = useRouter()
@@ -214,6 +235,155 @@ const pollingState = ref({
initialServers: [] as Archon.Servers.v0.Server[],
})
+const purchaseModal = ref | null>(null)
+const affiliateCode = ref(null)
+const selectedCurrency = ref('USD')
+const regionPings = ref<
+ {
+ region: string
+ ping: number
+ }[]
+>([])
+
+const pyroProducts = computed(() => {
+ return [...props.products]
+ .filter((p) => p?.metadata?.type === 'pyro' || p?.metadata?.type === 'medal')
+ .sort((a, b) => {
+ const aRam =
+ a?.metadata?.type === 'pyro' || a?.metadata?.type === 'medal' ? a.metadata.ram : 0
+ const bRam =
+ b?.metadata?.type === 'pyro' || b?.metadata?.type === 'medal' ? b.metadata.ram : 0
+ return aRam - bRam
+ })
+})
+
+const {
+ data: customer,
+ refetch: refetchCustomer,
+ isLoading: customerLoading,
+} = useQuery({
+ queryKey: ['billing', 'customer'],
+ queryFn: () => client.labrinth.billing_internal.getCustomer() as Promise,
+})
+
+const {
+ data: paymentMethods,
+ refetch: refetchPaymentMethods,
+ isLoading: paymentMethodsLoading,
+} = useQuery({
+ queryKey: ['billing', 'payment-methods'],
+ queryFn: () =>
+ client.labrinth.billing_internal.getPaymentMethods() as Promise,
+})
+
+const { data: regions, isLoading: regionsLoading } = useQuery({
+ queryKey: ['servers', 'regions'],
+ queryFn: () => client.archon.servers_v1.getRegions(),
+})
+
+watch(
+ regions,
+ (newRegions) => {
+ regionPings.value = []
+ if (newRegions) {
+ newRegions.forEach((region) => {
+ runPingTest(region)
+ })
+ }
+ },
+ { immediate: true },
+)
+
+async function fetchPaymentData() {
+ await Promise.all([refetchCustomer(), refetchPaymentMethods()])
+}
+
+async function fetchStock(
+ region: Archon.Servers.v1.Region,
+ request: Archon.Servers.v0.StockRequest,
+): Promise {
+ const result = await client.archon.servers_v0.checkStock(region.shortcode, request)
+ return result.available
+}
+
+const PING_COUNT = 20
+const PING_INTERVAL = 200
+const MAX_PING_TIME = 1000
+
+function runPingTest(region: Archon.Servers.v1.Region, index = 1) {
+ if (index > 10) {
+ regionPings.value = regionPings.value.filter((entry) => entry.region !== region.shortcode)
+ regionPings.value.push({
+ region: region.shortcode,
+ ping: -1,
+ })
+ return
+ }
+
+ const wsUrl = `wss://${region.shortcode}${index}.${region.zone}/pingtest`
+ try {
+ const socket = new WebSocket(wsUrl)
+ const pings: number[] = []
+ let finalized = false
+
+ const finalize = (ping: number) => {
+ if (finalized) return
+ finalized = true
+ clearTimeout(connectTimeout)
+ regionPings.value = regionPings.value.filter((entry) => entry.region !== region.shortcode)
+ regionPings.value.push({
+ region: region.shortcode,
+ ping,
+ })
+ socket.close()
+ }
+
+ const retryNext = () => {
+ if (finalized) return
+ finalized = true
+ clearTimeout(connectTimeout)
+ socket.close()
+ runPingTest(region, index + 1)
+ }
+
+ // Prevent hangs where the socket never opens or errors.
+ const connectTimeout = setTimeout(() => {
+ retryNext()
+ }, 3000)
+
+ socket.onopen = () => {
+ clearTimeout(connectTimeout)
+
+ for (let i = 0; i < PING_COUNT; i++) {
+ setTimeout(() => {
+ socket.send(String(performance.now()))
+ }, i * PING_INTERVAL)
+ }
+ setTimeout(
+ () => {
+ const median =
+ pings.length > 0
+ ? Math.round([...pings].sort((a, b) => a - b)[Math.floor(pings.length / 2)])
+ : -1
+ finalize(median)
+ },
+ PING_COUNT * PING_INTERVAL + MAX_PING_TIME,
+ )
+ }
+
+ socket.onmessage = (event) => {
+ const start = Number(event.data)
+ pings.push(performance.now() - start)
+ }
+
+ socket.onerror = () => {
+ retryNext()
+ }
+ } catch {
+ runPingTest(region, index + 1)
+ }
+}
+
const {
data: serverResponse,
error: fetchError,
@@ -309,18 +479,43 @@ watch(serverResponse, (response) => {
}
})
-type ServersUpgradeModalWrapperRef = ComponentPublicInstance<{
- open: (id: string) => void | Promise
-}>
-
-const upgradeModal = ref(null)
-function openUpgradeModal(serverId: string) {
- upgradeModal.value?.open(serverId)
-}
-
const { addNotification } = injectNotificationManager()
const queryClient = useQueryClient()
+const canOpenPurchaseModal = computed(() => {
+ return (
+ Boolean(props.stripePublishableKey) &&
+ Boolean(customer.value) &&
+ paymentMethods.value !== undefined &&
+ Boolean(regions.value) &&
+ !customerLoading.value &&
+ !paymentMethodsLoading.value &&
+ !regionsLoading.value
+ )
+})
+
+function handleError(err: unknown) {
+ const error = err as Error & { data?: { description?: string } }
+ addNotification({
+ title: 'An error occurred',
+ type: 'error',
+ text: error?.message ?? error?.data?.description ?? String(err),
+ })
+}
+
+function openPurchaseModal() {
+ if (!canOpenPurchaseModal.value || !purchaseModal.value) {
+ addNotification({
+ title: 'Purchase unavailable',
+ text: 'Payment information is still loading. Please try again in a moment.',
+ type: 'warning',
+ })
+ return
+ }
+
+ purchaseModal.value.show('quarterly')
+}
+
const { data: subscriptions } = useQuery({
queryKey: ['billing', 'subscriptions'],
queryFn: () => client.labrinth.billing_internal.getSubscriptions(),
+
![]()
-
-
+
+
+
@@ -152,7 +173,7 @@
v-for="server in filteredData.filter((s) => s.is_medal)"
:key="server.server_id"
v-bind="server"
- @upgrade="openUpgradeModal(server.server_id)"
+ @upgrade="openPurchaseModal"
/>
+
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
index a089206ccc..ec85dbc2a2 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
@@ -3,12 +3,26 @@
data-pyro-server-list-root
class="experimental-styles-within relative mx-auto mb-6 flex min-h-screen w-full max-w-[1280px] flex-col px-6"
>
-
No payment required. Your downgrade will apply at the end of the current billing period.
You don't have any servers yet!
- Create a server
+ Create a server
+
@@ -116,11 +133,15 @@
placeholder="Search servers..."
wrapper-class="w-full md:w-72"
/>
- Modrinth Hosting is a new way to play modded Minecraft with your friends.