From 7a06263cf4f54c4253182dbb89f2e256119d7aaa Mon Sep 17 00:00:00 2001
From: Hafiz <hafizbhamidi@gmail.com>
Date: Wed, 14 Jan 2026 19:43:29 -0600
Subject: [PATCH] Show warning for pending party invites when upgrading to paid
 group plan

Show warning for pending party invites when upgrading to paid group plan. If user upgrades from party to group, remove any pending invites
---
 .../group-plans/groupPlanSelectionModal.vue   | 72 +++++++++++++++++++
 website/common/locales/en/groups.json         |  4 +-
 website/server/libs/payments/subscriptions.js |  4 ++
 3 files changed, 79 insertions(+), 1 deletion(-)

diff --git a/website/client/src/components/group-plans/groupPlanSelectionModal.vue b/website/client/src/components/group-plans/groupPlanSelectionModal.vue
index 77573138ac..87f6c0d247 100644
--- a/website/client/src/components/group-plans/groupPlanSelectionModal.vue
+++ b/website/client/src/components/group-plans/groupPlanSelectionModal.vue
@@ -77,6 +77,7 @@
         <selectable-card
           v-if="upgradeableParty"
           class="option-card"
+          :class="{ 'has-pending-warning': partyPendingInviteCount > 0 }"
           :selected="isSelected(upgradeableParty)"
           @click="selectOption(upgradeableParty)"
         >
@@ -87,6 +88,12 @@
               </div>
               <div class="option-members">
                 {{ formatMemberCount(upgradeableParty.memberCount) }}
+                <span
+                  v-if="partyPendingInviteCount > 0"
+                  class="pending-count"
+                >
+                  {{ $t('pendingCount', { count: partyPendingInviteCount }) }}
+                </span>
               </div>
               <div class="option-label your-party">
                 <div
@@ -100,6 +107,16 @@
               ${{ calculatePrice(upgradeableParty.memberCount) }}.00/mo
             </div>
           </div>
+          <div
+            v-if="partyPendingInviteCount > 0"
+            class="pending-warning-banner"
+          >
+            <div
+              class="svg-icon alert-icon"
+              v-html="icons.alert"
+            ></div>
+            <span class="warning-text">{{ $t('upgradeCancelsPendingInvites') }}</span>
+          </div>
         </selectable-card>
 
         <div
@@ -214,6 +231,39 @@
   }
 }
 
+.pending-warning-banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  background-color: $yellow-50;
+  border-radius: 0 0 6px 6px;
+  margin: 16px -16px 0 -16px;
+  gap: 4px;
+
+  .selected & {
+    margin: 15px -15px 0 -15px;
+  }
+
+  .alert-icon {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+
+    ::v-deep path {
+      fill: $gray-10;
+    }
+  }
+
+  .warning-text {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    color: $gray-10;
+  }
+}
+
 .option-content {
   display: flex;
   justify-content: space-between;
@@ -241,6 +291,11 @@
   line-height: 16px;
   color: $gray-100;
   margin-bottom: 8px;
+
+  .pending-count {
+    font-weight: 700;
+    color: $yellow-5;
+  }
 }
 
 .option-label {
@@ -358,6 +413,10 @@
   .modal-body {
     padding: 0;
   }
+
+  .option-card.has-pending-warning.selectable-card {
+    padding-bottom: 0;
+  }
 }
 </style>
 
@@ -368,6 +427,7 @@ import { mapState } from '@/libs/store';
 import SelectableCard from '@/components/ui/selectableCard.vue';
 import svgSparkles from '@/assets/svg/sparkles.svg?raw';
 import svgMember from '@/assets/svg/member-icon.svg?raw';
+import svgAlert from '@/assets/svg/for-css/alert.svg?raw';
 
 export default {
   components: {
@@ -386,7 +446,9 @@ export default {
       icons: Object.freeze({
         sparkles: svgSparkles,
         member: svgMember,
+        alert: svgAlert,
       }),
+      partyPendingInviteCount: 0,
     };
   },
   computed: {
@@ -420,6 +482,7 @@ export default {
     async loadData () {
       this.loading = true;
       this.selectedOption = null;
+      this.partyPendingInviteCount = 0;
 
       try {
         const [guildsResponse, partyResponse] = await Promise.all([
@@ -430,6 +493,15 @@ export default {
         this.userGuilds = guildsResponse.data.data || [];
         this.userParty = partyResponse.data.data;
 
+        if (this.userParty) {
+          try {
+            const invitesResponse = await axios.get(`/api/v4/groups/${this.userParty._id}/invites`);
+            this.partyPendingInviteCount = invitesResponse.data.data?.length || 0;
+          } catch (e) {
+            this.partyPendingInviteCount = 0;
+          }
+        }
+
         await this.$store.dispatch('guilds:getGroupPlans', true);
         const groupPlans = this.$store.state.groupPlans?.data || [];
         this.activeGroupPlanIds = groupPlans.map(g => g._id);
diff --git a/website/common/locales/en/groups.json b/website/common/locales/en/groups.json
index c287f6047b..b5c5c64a3f 100644
--- a/website/common/locales/en/groups.json
+++ b/website/common/locales/en/groups.json
@@ -438,5 +438,7 @@
   "perMember": "per member",
   "additionalMembersProrated": "Additional members invited during the month will be added to the next billing cycle's total as a pro-rated charge.",
   "oneMember": "1 member",
-  "membersCount": "<%= count %> members"
+  "membersCount": "<%= count %> members",
+  "pendingCount": "(<%= count %> pending)",
+  "upgradeCancelsPendingInvites": "Upgrading your Party will cancel all pending invites"
 }
diff --git a/website/server/libs/payments/subscriptions.js b/website/server/libs/payments/subscriptions.js
index 93ff285b41..9a0dd3126c 100644
--- a/website/server/libs/payments/subscriptions.js
+++ b/website/server/libs/payments/subscriptions.js
@@ -153,6 +153,10 @@ async function prepareSubscriptionValues (data) {
     groupId = group._id;
     recipient.purchased.plan.quantity = data.sub.quantity;
 
+    if (group.type === 'party') {
+      await group.removeGroupInvitations();
+    }
+
     await addSubscriptionToGroupUsers(group);
   }