From bf28a468030daf72b575949fb0acf8fb14a4e0dc Mon Sep 17 00:00:00 2001
From: Sabe Jones <sabrecat@gmail.com>
Date: Wed, 16 Dec 2020 16:33:47 -0600
Subject: [PATCH] feat(event): one more banner

---
 .../src/components/payments/sendGemsModal.vue | 23 +-----
 .../client/src/components/settings/index.vue  | 73 +++++++++++++++++++
 .../src/components/settings/subscription.vue  | 57 ++++-----------
 website/common/locales/en/limited.json        |  1 +
 4 files changed, 88 insertions(+), 66 deletions(-)

diff --git a/website/client/src/components/payments/sendGemsModal.vue b/website/client/src/components/payments/sendGemsModal.vue
index 192f6e1dc7..a5f7db986e 100644
--- a/website/client/src/components/payments/sendGemsModal.vue
+++ b/website/client/src/components/payments/sendGemsModal.vue
@@ -78,9 +78,7 @@
         </h3>
         <div class="panel-body">
           <div class="row">
-            <div
-              :class="columnClass"
-            >
+            <div class="col-md-12">
               <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 => {
diff --git a/website/client/src/components/settings/index.vue b/website/client/src/components/settings/index.vue
index 61e6f4bee7..e22daeef68 100644
--- a/website/client/src/components/settings/index.vue
+++ b/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>
diff --git a/website/client/src/components/settings/subscription.vue b/website/client/src/components/settings/subscription.vue
index d96daf1844..0a52fbefd4 100644
--- a/website/client/src/components/settings/subscription.vue
+++ b/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
-          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 class="d-flex flex-column align-items-center mt-4">
       <div
-        v-if="currentEvent && currentEvent.promo && currentEvent.promo === 'g1g1'"
-        class="m-5"
+        v-once
+        class="svg-icon svg-gift-box m-auto"
+        v-html="icons.giftBox"
       >
       </div>
-      <div
-        v-if="currentEvent && currentEvent.promo && currentEvent.promo === 'g1g1'"
-        class="ml-5 mt-3"
-      >
-        <h2 v-once>
-          {{ $t('winterPromoGiftHeader') }}
-        </h2>
-        <p v-once>
-          {{ $t('winterPromoGiftDetails1') }}
-        </p>
-        <p v-once>
-          {{ $t('winterPromoGiftDetails2') }}
-        </p>
+      <div class="muted mx-auto mt-3 mb-1">
+        {{ $t('giftSubscription') }}
       </div>
+      <a
+        class="mx-auto"
+        @click="showSelectUser()"
+      >
+        {{ $t('giftASubscription') }}
+      </a>
     </div>
   </div>
 </template>
@@ -624,11 +597,7 @@ export default {
     };
   },
   computed: {
-    ...mapState({
-      user: 'user.data',
-      credentials: 'credentials',
-      currentEvent: 'worldState.data.currentEvent',
-    }),
+    ...mapState({ user: 'user.data', credentials: 'credentials' }),
     purchasedPlanIdInfo () {
       if (!this.subscriptionBlocks[this.user.purchased.plan.planId]) {
         // @TODO: find which subs are in the common
diff --git a/website/common/locales/en/limited.json b/website/common/locales/en/limited.json
index f4bd8654de..620b08ea4b 100644
--- a/website/common/locales/en/limited.json
+++ b/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.",