From 4a2605bc1e8efe6dd173ddd8e7aa710b83f803e2 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Thu, 1 May 2025 10:36:51 -0700
Subject: [PATCH] Add ability to switch payment interval for Modrinth+ (#3581)

---
 .../src/pages/settings/billing/index.vue      | 100 +++++++++++++++---
 1 file changed, 88 insertions(+), 12 deletions(-)

diff --git a/apps/frontend/src/pages/settings/billing/index.vue b/apps/frontend/src/pages/settings/billing/index.vue
index 2a42d2557..04bf5a533 100644
--- a/apps/frontend/src/pages/settings/billing/index.vue
+++ b/apps/frontend/src/pages/settings/billing/index.vue
@@ -64,6 +64,21 @@
               </template>
             </span>
             <template v-if="midasCharge">
+              <span
+                v-if="
+                  midasCharge.status === 'open' && midasCharge.subscription_interval === 'monthly'
+                "
+                class="text-sm text-purple"
+              >
+                Save
+                {{
+                  formatPrice(
+                    vintl.locale,
+                    midasCharge.amount * 12 - oppositePrice,
+                    midasCharge.currency_code,
+                  )
+                }}/year by switching to yearly billing!
+              </span>
               <span class="text-sm text-secondary">
                 Since {{ $dayjs(midasSubscription.created).format("MMMM D, YYYY") }}
               </span>
@@ -118,19 +133,46 @@
               </OverflowMenu>
             </ButtonStyled>
           </div>
-          <ButtonStyled v-else-if="midasCharge && midasCharge.status !== 'cancelled'">
-            <button
-              class="ml-auto"
-              @click="
-                () => {
-                  cancelSubscriptionId = midasSubscription.id;
-                  $refs.modalCancel.show();
-                }
-              "
+          <div
+            v-else-if="midasCharge && midasCharge.status !== 'cancelled'"
+            class="ml-auto flex gap-2"
+          >
+            <ButtonStyled>
+              <button
+                :disabled="changingInterval"
+                @click="
+                  () => {
+                    cancelSubscriptionId = midasSubscription.id;
+                    $refs.modalCancel.show();
+                  }
+                "
+              >
+                <XIcon /> Cancel
+              </button>
+            </ButtonStyled>
+            <ButtonStyled
+              :color="midasCharge.subscription_interval === 'yearly' ? 'standard' : 'purple'"
+              color-fill="text"
             >
-              <XIcon /> Cancel
-            </button>
-          </ButtonStyled>
+              <button
+                v-tooltip="
+                  midasCharge.subscription_interval === 'yearly'
+                    ? `Monthly billing will cost you an additional ${formatPrice(
+                        vintl.locale,
+                        oppositePrice * 12 - midasCharge.amount,
+                        midasCharge.currency_code,
+                      )} per year`
+                    : undefined
+                "
+                :disabled="changingInterval"
+                @click="switchMidasInterval(oppositeInterval)"
+              >
+                <SpinnerIcon v-if="changingInterval" class="animate-spin" />
+                <TransferIcon v-else /> {{ changingInterval ? "Switching" : "Switch" }} to
+                {{ oppositeInterval }}
+              </button>
+            </ButtonStyled>
+          </div>
           <ButtonStyled
             v-else-if="midasCharge && midasCharge.status === 'cancelled'"
             color="purple"
@@ -551,6 +593,8 @@ import {
 } from "@modrinth/ui";
 import {
   PlusIcon,
+  TransferIcon,
+  SpinnerIcon,
   ArrowBigUpDashIcon,
   XIcon,
   CardIcon,
@@ -754,6 +798,13 @@ const midasCharge = computed(() =>
     : null,
 );
 
+const oppositePrice = computed(() =>
+  midasSubscription.value
+    ? midasProduct.value?.prices?.find((price) => price.id === midasSubscription.value.price_id)
+        ?.prices?.intervals?.[oppositeInterval.value]
+    : undefined,
+);
+
 const pyroSubscriptions = computed(() => {
   const pyroSubs = subscriptions.value?.filter((s) => s?.metadata?.type === "pyro") || [];
   const servers = serversData.value?.servers || [];
@@ -851,6 +902,31 @@ async function submit() {
 
 const removePaymentMethodIndex = ref();
 
+const changingInterval = ref(false);
+
+const oppositeInterval = computed(() =>
+  midasCharge.value?.subscription_interval === "yearly" ? "monthly" : "yearly",
+);
+
+async function switchMidasInterval(interval) {
+  changingInterval.value = true;
+  startLoading();
+  try {
+    await useBaseFetch(`billing/subscription/${midasSubscription.value.id}`, {
+      internal: true,
+      method: "PATCH",
+      body: {
+        interval,
+      },
+    });
+    await refresh();
+  } catch (error) {
+    console.error("Error switching Modrinth+ payment interval:", error);
+  }
+  stopLoading();
+  changingInterval.value = false;
+}
+
 async function editPaymentMethod(index, primary) {
   startLoading();
   try {