feat(event): one more banner

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

@@ -78,9 +78,7 @@
         </h3>
         <div class="panel-body">
           <div class="row">
-            <div
+            <div class="col-md-12">
-              :class="columnClass"
-            >
               <div class="form-group mb-0">
                 <!-- eslint-disable vue/no-use-v-if-with-v-for -->
                 <div
@@ -102,20 +100,6 @@
                 </div>
               </div>
             </div>
-            <div
-              v-if="currentEvent && currentEvent.promo && currentEvent.promo === 'g1g1'"
-              class="col-md-7"
-            >
-              <h4 v-once>
-                {{ $t('winterPromoGiftHeader') }}
-              </h4>
-              <p v-once>
-                {{ $t('winterPromoGiftDetails1') }}
-              </p>
-              <p v-once>
-                {{ $t('winterPromoGiftDetails2') }}
-              </p>
-            </div>
           </div>
         </div>
       </div>
@@ -224,7 +208,6 @@ export default {
     ...mapState({
       userLoggedIn: 'user.data',
       originalSubscriptionBlocks: 'content.subscriptionBlocks',
-      currentEvent: 'worldState.data.currentEvent',
     }),
     subscriptionBlocks () {
       let subscriptionBlocks = toArray(this.originalSubscriptionBlocks);
@@ -250,10 +233,6 @@ export default {
       }
       return this.userReceivingGems.profile.name;
     },
-    columnClass () {
-      if (this.currentEvent && this.currentEvent.promo && this.currentEvent.promo === 'g1g1') return 'col-md-5';
-      return 'col-md-12';
-    },
   },
   mounted () {
     this.$root.$on('habitica::send-gems', data => {

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

@@ -45,18 +45,91 @@
         {{ $t('notifications') }}
       </router-link>
     </secondary-menu>
+    <div
+      class="g1g1-banner d-flex justify-content-center"
+      v-if="$route.name === 'subscription' && promo === 'g1g1'"
+    >
+      <div
+        v-once
+        class="svg-icon svg-gifts left-gift"
+        v-html="icons.gifts"
+      >
+      </div>
+      <div class="d-flex flex-column align-items-center text-center">
+        <strong
+          class="mt-auto mb-1"
+        > {{ $t('g1g1Event') }} </strong>
+        <p
+          class="mb-auto"
+        > {{ $t('g1g1Details') }} </p>
+      </div>
+      <div
+        v-once
+        class="svg-icon svg-gifts right-gift"
+        v-html="icons.gifts"
+      >
+      </div>
+    </div>
     <div class="col-12">
       <router-view />
     </div>
   </div>
 </template>
 
+<style scoped lang="scss">
+  @import '~@/assets/scss/colors.scss';
+
+  strong {
+    font-size: 1rem;
+    line-height: 1.25;
+  }
+
+  .g1g1-banner {
+    color: $white;
+    width: 100%;
+    height: 5.75rem;
+    background-image: linear-gradient(90deg, $teal-50 0%, $purple-400 100%);
+  }
+
+  .left-gift {
+    margin: auto 3rem auto auto;
+  }
+
+  .right-gift {
+    margin: auto auto auto 3rem;
+    filter: flipH;
+    transform: scaleX(-1);
+  }
+
+  .svg-gifts {
+    width: 3.5rem;
+  }
+</style>
+
 <script>
+import { mapState } from '@/libs/store';
 import SecondaryMenu from '@/components/secondaryMenu';
+import gifts from '@/assets/svg/gifts-vertical.svg';
 
 export default {
   components: {
     SecondaryMenu,
   },
+  data () {
+    return {
+      icons: Object.freeze({
+        gifts,
+      }),
+    };
+  },
+  computed: {
+    ...mapState({
+      currentEvent: 'worldState.data.currentEvent',
+    }),
+    promo () {
+      if (!this.currentEvent || !this.currentEvent.promo) return 'none';
+      return this.currentEvent.promo;
+    },
+  },
 };
 </script>

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

@@ -113,7 +113,6 @@
           </div>
           <div
             v-else
-            v-once
             class="w-55 text-center"
             v-html="$t('paymentSubBillingWithMethod', {
               amount: purchasedPlanIdInfo.price,
@@ -144,7 +143,6 @@
           </div>
           <div
             v-else
-            v-once
             class="svg-icon"
             :class="paymentMethodLogo.class"
             v-html="paymentMethodLogo.icon"
@@ -152,7 +150,6 @@
           </div>
           <div
             v-if="purchasedPlanExtraMonthsDetails.months > 0"
-            v-once
             class="extra-months green-10 py-2 px-3 mt-4"
             v-html="$t('purchasedPlanExtraMonths',
                        {months: purchasedPlanExtraMonthsDetails.months})"
@@ -174,7 +171,6 @@
             {{ $t('subscriptionCanceled') }}
           </h2>
           <div
-            v-once
             class="w-75 text-center mb-4"
             v-html="$t('subscriptionInactiveDate', {date: subscriptionEndDate})"
           >
@@ -269,13 +265,11 @@
         </div>
         <div
           v-if="!hasGroupPlan && !canCancelSubscription"
-          v-once
           v-html="$t(`cancelSubInfo${user.purchased.plan.paymentMethod}`)"
         >
         </div>
         <div
           v-if="canCancelSubscription"
-          v-once
           v-html="$t('cancelSubAlternatives')"
         >
         </div>
@@ -289,43 +283,22 @@
         </div>
       </div>
     </div>
-    <div class="d-flex justify-content-center align-items-start">
+    <div class="d-flex flex-column align-items-center mt-4">
-      <div class="d-flex flex-column align-items-center mt-4">
-        <div
-          v-once
-          class="svg-icon svg-gift-box m-auto"
-          v-html="icons.giftBox"
-        >
-        </div>
-        <div class="muted mx-auto mt-3 mb-1">
-          {{ $t('giftSubscription') }}
-        </div>
-        <a
-          class="mx-auto"
-          @click="showSelectUser()"
-        >
-          {{ $t('giftASubscription') }}
-        </a>
-      </div>
       <div
-        v-if="currentEvent && currentEvent.promo && currentEvent.promo === 'g1g1'"
+        v-once
-        class="m-5"
+        class="svg-icon svg-gift-box m-auto"
+        v-html="icons.giftBox"
       >
       </div>
-      <div
+      <div class="muted mx-auto mt-3 mb-1">
-        v-if="currentEvent && currentEvent.promo && currentEvent.promo === 'g1g1'"
+        {{ $t('giftSubscription') }}
-        class="ml-5 mt-3"
-      >
-        <h2 v-once>
-          {{ $t('winterPromoGiftHeader') }}
-        </h2>
-        <p v-once>
-          {{ $t('winterPromoGiftDetails1') }}
-        </p>
-        <p v-once>
-          {{ $t('winterPromoGiftDetails2') }}
-        </p>
       </div>
+      <a
+        class="mx-auto"
+        @click="showSelectUser()"
+      >
+        {{ $t('giftASubscription') }}
+      </a>
     </div>
   </div>
 </template>
@@ -624,11 +597,7 @@ export default {
     };
   },
   computed: {
-    ...mapState({
+    ...mapState({ user: 'user.data', credentials: 'credentials' }),
-      user: 'user.data',
-      credentials: 'credentials',
-      currentEvent: 'worldState.data.currentEvent',
-    }),
     purchasedPlanIdInfo () {
       if (!this.subscriptionBlocks[this.user.purchased.plan.planId]) {
         // @TODO: find which subs are in the common

website/common/locales/en/limited.json

@@ -190,6 +190,7 @@
     "g1g1Announcement": "<strong>Gift a subscription and get a subscription free</strong> event going on now!",
     "g1g1Details": "Gift a subscription to a friend, and you'll receive the same subscription for free!",
     "g1g1": "Gift One, Get One",
+    "g1g1Event": "Gift One, Get One event going on now!",
     "g1g1Returning": "In honor of the season, we’re bringing back a very special promotion. Now when you gift a subscription, you’ll receive the same in return!",
     "howItWorks": "How it Works",
     "g1g1HowItWorks": "Type in the username of the account you’d like to gift to. From there, pick the sub length you’d like to gift and check out. Your account will automatically be rewarded with the same level of subscription you just gifted.",