update: success modal

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

@@ -78,11 +78,11 @@
           </div> -->
           <div
             v-if="!paymentData.newGroup"
-            class="form-group"
+            class=""
           >
             <div class="details-block group-billing-date">
               <span>
-                {{ $t('groupPaymentSubBilling') }}
+                {{ $t('groupsPaymentSubBilling') }}
               </span>
             </div>
             <div class="small-text group-auto-renew">
@@ -109,15 +109,15 @@
                 :value="groupPlanUpgraded.demographics"
                 @select="groupPlanUpgraded.demographics = $event"
               />
+              <button
+                v-if="!paymentData.newGroup"
+                class="btn btn-primary"
+                @click="close()"
+              >
+                {{ $t('submit') }}
+              </button>
             </div>
           </div>
-          <button
-            v-oncee="!paymentData.newGroup"
-            class="btn btn-primary"
-            @click="close()"
-          >
-            {{ $t('submit') }}
-          </button>
         </template>
         <template
           v-if="paymentData.paymentType === 'subscription'"
@@ -157,6 +157,7 @@
   border-bottom-left-radius: 8px;
 }
 
+
 #payments-success-modal .modal-header {
   justify-content: center;
   padding-top: 24px;
@@ -206,7 +207,7 @@
     border-radius: 4px;
     padding: 8px 24px;
     margin-top: 16px;
-    display: flex;
+    display: inline-flex;
     flex-direction: row;
     text-align: center;
 
@@ -236,22 +237,17 @@
     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%;
+    padding: 0 12px;
+    width: 100%;
+    padding: 16px 32px 32px 32px;
+  }
+  .group-billing-date {
+    width: 269px;
   }
 }
-
 #payments-success-modal .modal-footer {
   background: $gray-700;
   border-bottom-right-radius: 8px;

website/common/locales/en/npc.json

@@ -93,7 +93,7 @@
   "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>.",
+  "groupsPaymentSubBilling": "Your next billing date is <strong>11/11/1111</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.",