From 86d3f67f96b7648b6815cfb2e7bd800afd7f9663 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 efff689d90..5cacc54956 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);
   }