From a4ba41bf15f9654989560164fe6aa4bddcdd4e87 Mon Sep 17 00:00:00 2001
From: Prospector <prospectordev@gmail.com>
Date: Tue, 3 Jun 2025 10:37:29 -0700
Subject: [PATCH] Lint, make save button not clickable when quarterly is
 selected

---
 apps/frontend/src/pages/servers/index.vue            | 12 ++++--------
 .../billing/ModrinthServersPurchaseModal.vue         | 10 +++++++++-
 packages/ui/src/components/billing/PurchaseModal.vue |  9 ++++++++-
 .../billing/ServersPurchase2PaymentMethod.vue        |  1 -
 .../components/billing/ServersPurchase3Review.vue    |  6 +++---
 packages/ui/src/composables/stripe.ts                |  8 ++------
 6 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/apps/frontend/src/pages/servers/index.vue b/apps/frontend/src/pages/servers/index.vue
index 9ccd98e89..05be94833 100644
--- a/apps/frontend/src/pages/servers/index.vue
+++ b/apps/frontend/src/pages/servers/index.vue
@@ -520,19 +520,15 @@
           </OptionGroup>
           <template v-if="billingPeriods.includes('quarterly')">
             <button
+              v-if="billingPeriod !== 'quarterly'"
               class="bg-transparent p-0 text-sm font-medium text-brand hover:underline active:scale-95"
               @click="billingPeriod = 'quarterly'"
             >
               Save 16% with quarterly billing!
             </button>
-          </template>
-          <template v-else-if="billingPeriods.includes('yearly')">
-            <button
-              class="bg-transparent p-0 text-sm font-medium text-brand hover:underline active:scale-95"
-              @click="billingPeriod = 'yearly'"
-            >
-              Save 16% with yearly billing!
-            </button>
+            <span v-else class="bg-transparent p-0 text-sm font-medium text-brand">
+              Save 16% with quarterly billing!
+            </span>
           </template>
           <span v-else></span>
         </div>
diff --git a/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue b/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
index b988105f8..ddad3beb2 100644
--- a/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
+++ b/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
@@ -309,7 +309,15 @@ defineExpose({
         </button>
       </ButtonStyled>
       <ButtonStyled color="brand">
-        <button v-tooltip="currentStep === 'review' && !acceptedEula ? 'You must accept the Minecraft EULA to proceed.' : undefined" :disabled="!canProceed" @click="setStep(nextStep)">
+        <button
+          v-tooltip="
+            currentStep === 'review' && !acceptedEula
+              ? 'You must accept the Minecraft EULA to proceed.'
+              : undefined
+          "
+          :disabled="!canProceed"
+          @click="setStep(nextStep)"
+        >
           <template v-if="currentStep === 'review'">
             <SpinnerIcon v-if="completingPurchase" class="animate-spin" />
             <CheckCircleIcon v-else />
diff --git a/packages/ui/src/components/billing/PurchaseModal.vue b/packages/ui/src/components/billing/PurchaseModal.vue
index a47499e3d..7b216b9a6 100644
--- a/packages/ui/src/components/billing/PurchaseModal.vue
+++ b/packages/ui/src/components/billing/PurchaseModal.vue
@@ -217,7 +217,14 @@
               v-if="interval === 'yearly' || interval === 'quarterly'"
               class="rounded-full bg-brand px-2 py-1 font-bold text-brand-inverted"
             >
-              SAVE {{ calculateSavings(price.prices.intervals.monthly, rawPrice, interval === 'quarterly' ? 3 : 12) }}%
+              SAVE
+              {{
+                calculateSavings(
+                  price.prices.intervals.monthly,
+                  rawPrice,
+                  interval === 'quarterly' ? 3 : 12,
+                )
+              }}%
             </span>
             <span class="ml-auto text-lg" :class="{ 'text-secondary': selectedPlan !== interval }">
               {{ formatPrice(locale, rawPrice, price.currency_code) }}
diff --git a/packages/ui/src/components/billing/ServersPurchase2PaymentMethod.vue b/packages/ui/src/components/billing/ServersPurchase2PaymentMethod.vue
index ce9ff4730..91fdafc32 100644
--- a/packages/ui/src/components/billing/ServersPurchase2PaymentMethod.vue
+++ b/packages/ui/src/components/billing/ServersPurchase2PaymentMethod.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type Stripe from 'stripe'
-import ModalLoadingIndicator from '../modal/ModalLoadingIndicator.vue'
 import { useVIntl, defineMessages } from '@vintl/vintl'
 import PaymentMethodOption from './PaymentMethodOption.vue'
 
diff --git a/packages/ui/src/components/billing/ServersPurchase3Review.vue b/packages/ui/src/components/billing/ServersPurchase3Review.vue
index 5f17efc18..ce5e13f08 100644
--- a/packages/ui/src/components/billing/ServersPurchase3Review.vue
+++ b/packages/ui/src/components/billing/ServersPurchase3Review.vue
@@ -177,13 +177,13 @@ function setInterval(newInterval: ServerBillingInterval) {
       <RadioButtonIcon v-else class="size-6 text-secondary" />
       <div class="flex flex-col items-start gap-1 font-medium text-primary">
         <span class="flex items-center gap-1" :class="{ 'text-contrast': interval === 'quarterly' }"
-        >Pay quarterly
+          >Pay quarterly
           <span class="text-xs font-bold text-brand px-1.5 py-0.5 rounded-full bg-brand-highlight"
-          >{{ interval === 'quarterly' ? 'Saving' : 'Save' }} 16%</span
+            >{{ interval === 'quarterly' ? 'Saving' : 'Save' }} 16%</span
           ></span
         >
         <span class="text-sm text-secondary flex items-center gap-1"
-        >{{
+          >{{
             formatPrice(
               locale,
               prices?.prices?.intervals?.['quarterly'] ?? 0 / monthsInInterval['quarterly'],
diff --git a/packages/ui/src/composables/stripe.ts b/packages/ui/src/composables/stripe.ts
index 38afecb7e..1550dac19 100644
--- a/packages/ui/src/composables/stripe.ts
+++ b/packages/ui/src/composables/stripe.ts
@@ -1,9 +1,5 @@
 import type Stripe from 'stripe'
-import {
-  type Stripe as StripeJs,
-  loadStripe,
-  type StripeElements,
-} from '@stripe/stripe-js'
+import { type Stripe as StripeJs, loadStripe, type StripeElements } from '@stripe/stripe-js'
 import { computed, ref, type Ref } from 'vue'
 import type { ContactOption } from '@stripe/stripe-js/dist/stripe-js/elements/address'
 import type {
@@ -391,6 +387,6 @@ export const useStripe = (
     tax,
     total,
     submitPayment,
-    completingPurchase
+    completingPurchase,
   }
 }