fix(layout): less ridiculous flow

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-200 mb-3" v-once>
+          {{ $t('groupPlanBillingFYIShort') }}
+        </div>
+        <div
+          class="btn btn-sm btn-danger"
+          @click="cancelSubscriptionConfirm({group: group})"
+        >
+          {{ $t('cancelGroupSub') }}
+        </div>
       </div>
     </div>
   </div>

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 {

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."
 }