From 0abdefd58919b56700df4c0bf9f374907b63aa2a Mon Sep 17 00:00:00 2001 From: tdgao Date: Mon, 23 Mar 2026 14:45:54 -0600 Subject: [PATCH] refactor: reduce code duplication for server listing --- .../src/components/servers/ServerListing.vue | 263 +++++++----------- 1 file changed, 96 insertions(+), 167 deletions(-) diff --git a/packages/ui/src/components/servers/ServerListing.vue b/packages/ui/src/components/servers/ServerListing.vue index 2928a38dad..7119df5c7f 100644 --- a/packages/ui/src/components/servers/ServerListing.vue +++ b/packages/ui/src/components/servers/ServerListing.vue @@ -12,18 +12,12 @@ :data-pyro-server-listing-id="server_id" >
- -
-
- - + +
@@ -75,162 +69,28 @@
-
-
+ +
+
Please wait while we set up your server. This should only take a minute.
-
-
-
+
Your server's hardware is currently being upgraded and will be back online shortly.
-
-
-
+
Your subscription was cancelled.30 days and can be downloaded below before + they're deleted.
-
- - - - - - - - Support - - - - - -
-
-
-
- Your subscription was cancelled - due to payment failure. -
-
- - - - - - - - Support - - - - - Manage billing - - -
-
-
-
Your server has been suspended due to a moderation action.
-
- - - - - Support - - -
-
-
-
- Your server has been suspended. Please contact Modrinth Support for more information. -
-
- - - - - Support - - -
-
-
-
+
Your subscription is set to cancel
-
- +
+ Your server has been suspended due to a moderation action. Please contact Modrinth Support + for more information. +
+
+ Your server has been suspended. Please contact Modrinth Support for more information. +
+ +
+ - + - + Support - + + + Manage billing + + +
+
Your server will {{ pendingChange.verb.toLowerCase() }} to the "{{ @@ -370,14 +248,65 @@ const isFilesExpired = computed(() => { const thirtyDaysLater = new Date(cancellation.getTime() + 30 * 24 * 60 * 60 * 1000) return new Date() > thirtyDaysLater }) -const hasNotice = computed( - () => - isProvisioning.value || - props.status === 'suspended' || - isSetToCancel.value || - !!props.pendingChange, + +const hasIconOverlay = computed( + () => isProvisioning.value || isUpgrading.value || props.status === 'suspended', ) +type NoticeType = + | 'provisioning' + | 'upgrading' + | 'cancelled' + | 'paymentfailed' + | 'moderated' + | 'suspended' + | 'setToCancel' + +const noticeType = computed(() => { + if (isProvisioning.value) return 'provisioning' + if (props.status === 'suspended') { + switch (props.suspension_reason) { + case 'upgrading': + return 'upgrading' + case 'cancelled': + return 'cancelled' + case 'paymentfailed': + return 'paymentfailed' + case 'moderated': + return 'moderated' + default: + return 'suspended' + } + } + if (isSetToCancel.value) return 'setToCancel' + return null +}) + +type NoticeButtons = { + downloadBackup?: boolean + copyId?: boolean + support?: boolean + manageBilling?: boolean + resubscribe?: boolean +} + +const noticeButtons = computed(() => { + switch (noticeType.value) { + case 'cancelled': + case 'setToCancel': + return { downloadBackup: true, copyId: true, support: true, resubscribe: true } + case 'paymentfailed': + return { downloadBackup: true, copyId: true, support: true, manageBilling: true } + case 'moderated': + case 'suspended': + return { copyId: true, support: true } + default: + return null + } +}) + +const hasNotice = computed(() => !!noticeType.value || !!props.pendingChange) + const showGameLabel = computed(() => !!props.game && !isConfiguring.value) const showLoaderLabel = computed(() => !!props.loader && !isConfiguring.value) const showPlayerCount = computed(() => !!props.playerCount && !isConfiguring.value)