From 9fd0bfae463ff428acd8f87dd86f2288d4f06115 Mon Sep 17 00:00:00 2001
From: Kalista Payne <kalista@habitica.com>
Date: Tue, 25 Nov 2025 11:47:13 -0600
Subject: [PATCH] Squashed commit of the following:

commit 05933be20513ebdf86b85cef6c947848fc13d583
Author: Kalista Payne <kalista@habitica.com>
Date:   Tue Nov 25 11:46:16 2025 -0600

    fix(layout): contrast

commit f36f3c8a218c873ffb6684e75c170465cb88c418
Author: Kalista Payne <kalista@habitica.com>
Date:   Thu Nov 20 17:29:06 2025 -0600

    fix(layout): less ridiculous flow

commit 74fcbe9494784cd2d95bda8fd527f72abcd35f90
Author: Kalista Payne <kalista@habitica.com>
Date:   Thu Nov 20 17:19:23 2025 -0600

    fix(billing): adjust placement and copy

commit c0c1ea43090f8f6313a9309b1265fbdc8e9bf754
Author: Kalista Payne <kalista@habitica.com>
Date:   Thu Nov 20 10:48:45 2025 -0600

    fix(groups): fine print about billing
---
 .../src/components/group-plans/billing.vue       | 16 ++++++++++------
 .../client/src/components/static/groupPlans.vue  | 11 +++++++++++
 website/common/locales/en/groups.json            |  4 +++-
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/website/client/src/components/group-plans/billing.vue b/website/client/src/components/group-plans/billing.vue
index a9fe133d2b..e3be8d9717 100644
--- a/website/client/src/components/group-plans/billing.vue
+++ b/website/client/src/components/group-plans/billing.vue
@@ -57,12 +57,16 @@
       >
         {{ $t('subUpdateCard') }}
       </div>
-      <div
-        v-if="!group.purchased.plan.dateTerminated"
-        class="btn btn-sm btn-danger"
-        @click="cancelSubscriptionConfirm({group: group})"
-      >
-        {{ $t('cancelGroupSub') }}
+      <div v-if="!group.purchased.plan.dateTerminated">
+        <div class="small gray-50 mb-3" v-once>
+          {{ $t('groupPlanBillingFYIShort') }}
+        </div>
+        <div
+          class="btn btn-sm btn-danger"
+          @click="cancelSubscriptionConfirm({group: group})"
+        >
+          {{ $t('cancelGroupSub') }}
+        </div>
       </div>
     </div>
   </div>
diff --git a/website/client/src/components/static/groupPlans.vue b/website/client/src/components/static/groupPlans.vue
index d88ef0a85d..2bcedada89 100644
--- a/website/client/src/components/static/groupPlans.vue
+++ b/website/client/src/components/static/groupPlans.vue
@@ -45,6 +45,9 @@
           <p class="gray-200">
             {{ $t('billedMonthly') }}
           </p>
+          <small class="gray-200">
+            {{ $t('groupPlanBillingFYI') }}
+          </small>
         </div>
         <div class="top-right"></div>
         <div class="d-flex justify-content-between align-items-middle w-100 gap-72 mb-100">
@@ -114,6 +117,9 @@
             <p class="gray-200">
               {{ $t('billedMonthly') }}
             </p>
+            <small class="gray-200">
+              {{ $t('groupPlanBillingFYI') }}
+            </small>
           </div>
           <div class="bot-right"></div>
         </div>
@@ -174,6 +180,11 @@
     line-height: 28px;
   }
 
+  small {
+    font-size: 12px;
+    line-height: 1.67;
+  }
+
   // Major layout elements
 
   .bottom-banner {
diff --git a/website/common/locales/en/groups.json b/website/common/locales/en/groups.json
index 8c8920684a..9d1dbadf0e 100644
--- a/website/common/locales/en/groups.json
+++ b/website/common/locales/en/groups.json
@@ -426,5 +426,7 @@
   "tavernDiscontinuedLinks": "Read more about the <a href='/static/faq/tavern-and-guilds'>Tavern and Guild Service Discontinuation</a> or head back to the <a href='/'>homepage</a>.",
   "chatSunsetWarning": "⚠️ <strong>Habitica Guilds and Tavern chat will be discontinued on 8/8/2023.</strong> <a href='/static/faq/tavern-and-guilds'>Click here</a> to read more about this change.",
   "interestedLearningMore": "Interested in Learning More?",
-  "checkGroupPlanFAQ": "Check out the <a href='/static/faq#what-is-group-plan'>Group Plans FAQ</a> to learn how to get the most out of your shared task experience."
+  "checkGroupPlanFAQ": "Check out the <a href='/static/faq#what-is-group-plan'>Group Plans FAQ</a> to learn how to get the most out of your shared task experience.",
+  "groupPlanBillingFYI": "Group Plan subscriptions automatically renew unless you cancel at least 24 hours before the end of your current period. You can cancel from the Group Billing tab of your Group Plan. You will be charged within 24 hours before your subscription renews, based on the number of members in your Group Plan at that time. If you add members between payment periods, you'll see an additional prorated charge for their benefits at your next billing cycle.",
+  "groupPlanBillingFYIShort": "Group Plan subscriptions automatically renew unless you cancel at least 24 hours before the end of your current period. You will be charged within 24 hours before your subscription renews, based on the number of members in your Group Plan at that time. If you add members between payment periods, you'll see an additional prorated charge for their benefits at your next billing cycle."
 }