fix(subs): clarity and layout improvements

2025-12-18 07:07:35 +01:00 · 2023-01-03 17:05:48 -06:00
parent 4fc880d6de
commit e251fad12c
4 changed files with 99 additions and 15 deletions
--- a/website/client/src/components/payments/buttons/list.vue
+++ b/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;
--- a/website/client/src/components/settings/subscription.vue
+++ b/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;
-    height: 28px;
+    width: 36px;
    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
--- a/website/client/src/components/settings/subscriptionOptions.vue
+++ b/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) {
--- a/website/common/locales/en/subscriber.json
+++ b/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."
 }