update: more work on success modal

website/client/src/components/payments/successModal.vue

@@ -70,7 +70,7 @@
             v-html="$t(paymentData.newGroup
               ? 'groupPlanCreated' : 'groupPlanUpgraded', {groupName: paymentData.group.name})"
           ></span>
-<!--           <div class="details-block">
+          <!--<div class="details-block">
             <span
               v-html="$t('paymentSubBilling', {
                 amount: groupPlanCost, months: paymentData.subscription.months})"
@@ -80,11 +80,18 @@
             v-if="!paymentData.newGroup"
             class="form-group"
           >
-            <div class="details-block">
+            <div class="details-block group-billing-date">
               <span>
-                Your next billing date is <strong>{{ dateRenewal }}</strong>.
+                {{ $t('groupPaymentSubBilling') }}
               </span>
             </div>
+            <div class="small-text group-auto-renew">
+              <span
+                v-once
+              >{{ $t('groupsPaymentAutoRenew') }}
+              </span>
+            </div>
+            <div class="demographics">
               <lockable-label
                 :text="$t('groupUse')"
               />
@@ -103,10 +110,17 @@
                 @select="groupPlanUpgraded.demographics = $event"
               />
             </div>
+          </div>
+          <button
+            v-oncee="!paymentData.newGroup"
+            class="btn btn-primary"
+            @click="close()"
+          >
+            {{ $t('submit') }}
+          </button>
         </template>
         <template
-          v-if="paymentData.paymentType === 'groupPlan'
+          v-if="paymentData.paymentType === 'subscription'"
-            || paymentData.paymentType === 'subscription'"
         >
           <span
             v-once
@@ -115,14 +129,7 @@
         </template>
         <div>
           <button
-            v-if="!paymentData.newGroup"
+            v-if="paymentData.paymentType === 'subscription'"
-            class="btn btn-primary"
-            @click="close()"
-          >
-            {{ $t('submit') }}
-          </button>
-          <button
-            v-else
             class="btn btn-primary"
             @click="close()"
           >
@@ -223,6 +230,26 @@
     color: $orange-10;
     font-style: normal;
   }
+  .group-auto-renew {
+    margin-top: 16px;
+    margin-bottom: 16px;
+    color: $yellow-5;
+    font-style: normal;
+  }
+
+  .group-billing-date {
+    width: 269px;
+    text-align: center;
+    margin-left: 57px;
+  }
+  .form-group {
+    // padding-top: 32px;
+  }
+
+  .demographics {
+    background-color: $gray-700;
+    width: 100%;
+  }
 }
 
 #payments-success-modal .modal-footer {

website/common/locales/en/npc.json

@@ -93,8 +93,10 @@
   "paymentYouSentGems": "You sent <strong><%- name %></strong>:",
   "paymentYouSentSubscription": "You sent <strong><%- name %></strong> a <%= months %>-months Habitica subscription.",
   "paymentSubBilling": "Your subscription will be billed <strong>$<%= amount %></strong> every <strong><%= months %> months</strong>.",
+  "groupPaymentSubBilling": "Your subscription will auto-renew on <strong><%= dateRenewal %></strong>.",
   "paymentSubBillingWithMethod": "Your subscription will be billed <strong>$<%= amount %></strong> every <strong><%= months %> months</strong> via <strong><%= paymentMethod %></strong>.",
   "paymentAutoRenew": "This subscription will auto-renew until it is canceled. If you need to cancel this subscription, you can do so from your settings.",
+  "groupsPaymentAutoRenew": "This subscription will auto-renew until it is canceled. If you need to cancel, you can do so from the Group Billing tab.",
   "paymentCanceledDisputes": "We’ve sent a cancelation confirmation to your email. If you don’t see the email, please contact us to prevent future billing disputes.",
   "success": "Success!",
   "classGear": "Class Gear",