fix(subs): clarity and layout improvements

website/client/src/components/payments/buttons/list.vue

@@ -83,6 +83,7 @@
   }
 
   h4 {
+    color: $gray-10;
     font-size: 0.875rem;
     font-weight: bold;
     text-align: center;

website/client/src/components/settings/subscription.vue

@@ -93,7 +93,7 @@
       <div class="subscribe-card mx-auto">
         <div
           v-if="hasSubscription && !hasCanceledSubscription"
-          class="d-flex flex-column align-items-center"
+          class="d-flex flex-column align-items-center pt-4"
         >
           <div class="round-container bg-green-10 d-flex align-items-center justify-content-center">
             <div
@@ -107,7 +107,7 @@
           </h2>
           <div
             v-if="hasGroupPlan"
-            class="mx-5 text-center"
+            class="mx-5 mb-4 text-center"
           >
             {{ $t('youHaveGroupPlan') }}
           </div>
@@ -157,7 +157,47 @@
           </div>
         </div>
         <div
-          v-if="hasCanceledSubscription"
+          v-if="hasGiftSubscription"
+          class="d-flex flex-column align-items-center mt-4"
+        >
+          <div class="round-container bg-green-10 d-flex align-items-center justify-content-center">
+            <div
+              v-once
+              class="svg-icon svg-check"
+              v-html="icons.checkmarkIcon"
+            ></div>
+          </div>
+          <h2 class="green-10 mx-auto mb-75">
+            {{ $t('youAreSubscribed') }}
+          </h2>
+          <div
+            class="mx-4 text-center mb-4 lh-71"
+          >
+            <span v-once>
+              {{ $t('haveNonRecurringSub') }}
+            </span>
+            <span
+              v-once
+              v-html="$t('subscriptionInactiveDate', {date: subscriptionEndDate})"
+            >
+            </span>
+          </div>
+          <h2 v-once>
+            {{ $t('switchToRecurring') }}
+          </h2>
+          <small
+            v-once
+            class="mx-4 mb-3 text-center"
+          >
+            {{ $t('continueGiftSubBenefits') }}
+          </small>
+          <subscription-options
+            :note="'subscriptionCreditConversion'"
+            class="w-100 mb-2"
+          />
+        </div>
+        <div
+          v-else-if="hasCanceledSubscription"
           class="d-flex flex-column align-items-center mt-4"
         >
           <div class="round-container bg-gray-300 d-flex align-items-center justify-content-center">
@@ -180,7 +220,7 @@
         </div>
         <div
           v-if="hasSubscription"
-          class="bg-gray-700 py-3 mt-4 mb-3 text-center"
+          class="bg-gray-700 py-3 mb-3 text-center"
         >
           <div class="header-mini mb-3">
             {{ $t('subscriptionStats') }}
@@ -322,6 +362,12 @@
     max-width: 21rem;
   }
 
+  small {
+    color: $gray-100;
+    font-size: 12px ;
+    line-height: 1.33;
+  }
+
   strong {
     font-size: 16px;
   }
@@ -399,6 +445,10 @@
     height: 49px;
   }
 
+  .lh-71 {
+    line-height: 1.71;
+  }
+
   .maroon-50 {
     color: $maroon-50;
   }
@@ -443,7 +493,6 @@
   }
 
   .subscribe-card {
-    padding-top: 2rem;
     width: 28rem;
     border-radius: 8px;
     box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
@@ -472,8 +521,7 @@
   }
 
   .svg-check {
-    width: 35.1px;
+    width: 36px;
-    height: 28px;
     color: $white;
   }
 
@@ -670,6 +718,9 @@ export default {
     hasSubscription () {
       return Boolean(this.user.purchased.plan.customerId);
     },
+    hasGiftSubscription () {
+      return this.user.purchased.plan.customerId === 'Gift';
+    },
     hasCanceledSubscription () {
       return (
         this.hasSubscription

website/client/src/components/settings/subscriptionOptions.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="subscription-form">
-    <b-form-group class="mb-4 w-100 h-100">
+    <b-form-group class="mb-3 w-100 h-100">
       <!-- eslint-disable vue/no-use-v-if-with-v-for -->
       <b-form-radio
         v-for="block in subscriptionBlocksOrdered"
@@ -32,6 +32,15 @@
         </div>
       </b-form-radio>
     </b-form-group>
+    <div class="mx-4 mb-4 text-center">
+      <small
+        v-if="note"
+        v-once
+        class="font-italic"
+      >
+        {{ $t(note) }}
+      </small>
+    </div>
     <!-- payment buttons first is for gift subs and the second is for renewing subs -->
     <payments-buttons
       v-if="userReceivingGift && userReceivingGift._id"
@@ -82,7 +91,10 @@
 
     .subscription-bubble, .discount-bubble {
       border-radius: 100px;
+      padding-left: 12px;
+      padding-right: 12px;
       font-size: 12px;
+      line-height: 1.33;
     }
 
     .subscription-bubble {
@@ -100,9 +112,21 @@
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
 
+  small {
+    color: $gray-100;
+    display: inline-block;
+    font-size: 12px ;
+    font-weight: normal;
+    line-height: 1.33;
+  }
+
   .subscribe-option {
+    background-color: $gray-700;
+
+    &:not(:last-of-type) {
       border-bottom: 1px solid $gray-600;
     }
+  }
 </style>
 
 <script>
@@ -121,6 +145,10 @@ export default {
     paymentsMixin,
   ],
   props: {
+    note: {
+      type: String,
+      default: null,
+    },
     userReceivingGift: {
       type: Object,
       default () {},
@@ -154,13 +182,13 @@ export default {
     subscriptionBubbles (subscription) {
       switch (subscription) {
         case 'basic_3mo':
-          return '<span class="subscription-bubble px-2 py-1 mr-1">Gem cap raised to 30</span><span class="subscription-bubble px-2 py-1">+1 Mystic Hourglass</span>';
+          return '<span class="subscription-bubble py-1 mr-1">Gem cap raised to 30</span><span class="subscription-bubble py-1">+1 Mystic Hourglass</span>';
         case 'basic_6mo':
-          return '<span class="subscription-bubble px-2 py-1 mr-1">Gem cap raised to 35</span><span class="subscription-bubble px-2 py-1">+2 Mystic Hourglass</span>';
+          return '<span class="subscription-bubble py-1 mr-1">Gem cap raised to 35</span><span class="subscription-bubble py-1">+2 Mystic Hourglass</span>';
         case 'basic_12mo':
-          return '<span class="discount-bubble px-2 py-1 mr-1">Save 20%</span><span class="subscription-bubble px-2 py-1 mr-1">Gem cap raised to 45</span><span class="subscription-bubble px-2 py-1">+4 Mystic Hourglass</span>';
+          return '<span class="discount-bubble py-1 mr-1">Save 20%</span><span class="subscription-bubble py-1 mr-1">Gem cap raised to 45</span><span class="subscription-bubble py-1">+4 Mystic Hourglass</span>';
         default:
-          return '<span class="subscription-bubble px-2 py-1">Gem cap at 25</span>';
+          return '<span class="subscription-bubble py-1">Gem cap at 25</span>';
       }
     },
     updateSubscriptionData (key) {

website/common/locales/en/subscriber.json

@@ -202,12 +202,16 @@
     "lookingForMoreItems": "Looking for More Items?",
     "dropCapSubs": "Habitica subscribers can find double the random items each day and receive monthly mystery items!",
     "subscriptionCanceled": "Your subscription is canceled",
-    "subscriptionInactiveDate": "Your subscription benefits will become inactive on <strong><%= date %></strong>",
+    "subscriptionInactiveDate": "Your subscription benefits will become inactive on <br><strong><%= date %></strong>",
     "subscriptionStats": "Subscription Stats",
     "subMonths": "Sub Months",
     "needToUpdateCard": "Need to update your card?",
     "readyToResubscribe": "Are you ready to resubscribe?",
     "cancelYourSubscription": "Cancel your subscription?",
     "cancelSubAlternatives": "If you're having technical problems or Habitica doesn't seem to be working out for you, please consider <a href='mailto:admin@habitica.com'>contacting us</a>. We want to help you get the most from Habitica.",
-    "sendAGift": "Send Gift"
+    "sendAGift": "Send Gift",
+    "haveNonRecurringSub": "You have a non-recurring gift subscription.",
+    "switchToRecurring": "Switch to a recurring subscription?",
+    "continueGiftSubBenefits": "Want to continue your benefits? You can start a new subscription before your gifted one runs out to keep your benefits active.",
+    "subscriptionCreditConversion": "Starting a new subscription will convert any remaining months to credit that will be used after the recurring subscription is canceled."
 }