fix(promo): update hardcoded event references

website/client/src/app.vue

@@ -38,7 +38,7 @@
       <template v-else>
         <template v-if="isUserLoaded">
           <damage-paused-banner />
-          <!-- <gems-promo-banner /> -->
+          <gems-promo-banner />
           <gift-promo-banner />
           <notifications-display />
           <app-menu />
@@ -154,7 +154,7 @@ import { loadProgressBar } from 'axios-progress-bar';
 import AppMenu from './components/header/menu';
 import AppHeader from './components/header/index';
 import DamagePausedBanner from './components/header/banners/damagePaused';
-// import GemsPromoBanner from './components/header/banners/gemsPromo';
+import GemsPromoBanner from './components/header/banners/gemsPromo';
 import GiftPromoBanner from './components/header/banners/giftPromo';
 import AppFooter from './components/appFooter';
 import notificationsDisplay from './components/notifications';
@@ -186,7 +186,7 @@ export default {
     AppHeader,
     AppFooter,
     DamagePausedBanner,
-    // GemsPromoBanner,
+    GemsPromoBanner,
     GiftPromoBanner,
     notificationsDisplay,
     snackbars,

website/client/src/components/header/banners/gemsPromo.vue

@@ -12,7 +12,7 @@
       @click="openGemsModal"
     >
       <img
-        v-if="eventName === 'fall2020'"
+        v-if="eventName === 'fall2021'"
         class="d-none d-xl-block"
         srcset="
     ~@/assets/images/gems/fall-confetti-left/confetti.png,
@@ -21,7 +21,7 @@
         src="~@/assets/images/gems/fall-confetti-left/confetti.png"
       >
       <img
-        v-else-if="eventName === 'fall2020SecondPromo'"
+        v-else-if="eventName === 'fall2021SecondPromo'"
         class="d-none d-xl-block"
         srcset="
     ~@/assets/images/gems/spooky-confetti-left/confetti.png,
@@ -31,7 +31,7 @@
       >
       <div class="promo-test">
         <img
-          v-if="eventName === 'fall2020'"
+          v-if="eventName === 'fall2021'"
           srcset="
       ~@/assets/images/gems/fall-text/text.png,
       ~@/assets/images/gems/fall-text/text@2x.png 2x,
@@ -39,7 +39,7 @@
           src="~@/assets/images/gems/fall-text/text.png"
         >
         <img
-          v-else-if="eventName === 'fall2020SecondPromo'"
+          v-else-if="eventName === 'fall2021SecondPromo'"
           srcset="
       ~@/assets/images/gems/spooky-text/text.png,
       ~@/assets/images/gems/spooky-text/text@2x.png 2x,
@@ -48,7 +48,7 @@
         >
       </div>
       <img
-        v-if="eventName === 'fall2020'"
+        v-if="eventName === 'fall2021'"
         class="d-none d-xl-block"
         srcset="
     ~@/assets/images/gems/fall-confetti-right/confetti.png,
@@ -57,7 +57,7 @@
         src="~@/assets/images/gems/fall-confetti-right/confetti.png"
       >
       <img
-        v-else-if="eventName === 'fall2020SecondPromo'"
+        v-else-if="eventName === 'fall2021SecondPromo'"
         class="d-none d-xl-block"
         srcset="
     ~@/assets/images/gems/spooky-confetti-right/confetti.png,
@@ -72,11 +72,11 @@
 <style lang="scss" scoped>
 @import '~@/assets/scss/colors.scss';
 
-.gems-promo-banner-fall2020 {
+.gems-promo-banner-fall2021 {
   background: $gray-10;
 }
 
-.gems-promo-banner-fall2020SecondPromo {
+.gems-promo-banner-fall2021SecondPromo {
   background: $black;
 }
 
@@ -105,8 +105,8 @@ export default {
     },
     showGemsPromoBanner () {
       const currEvt = this.currentEvent;
-      if (!currEvt) return false;
+      if (!currEvt || !currEvt.gemsPromo) return false;
-      return currEvt.event === 'fall2020' || currEvt.event === 'fall2020SecondPromo';
+      return true;
     },
     bannerClass () {
       const bannerClass = 'gems-promo-banner';

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

@@ -21,7 +21,7 @@
             class="col-12 text-center"
           >
             <img
-              v-if="eventName === 'fall2020'"
+              v-if="eventName === 'fall2021'"
               :alt="$t('supportHabitica')"
               srcset="
           ~@/assets/images/gems/fall-header.png,
@@ -30,7 +30,7 @@
               src="~@/assets/images/gems/fall-header.png"
             >
             <img
-              v-else-if="eventName === 'fall2020SecondPromo'"
+              v-else-if="eventName === 'fall2021SecondPromo'"
               :alt="$t('supportHabitica')"
               srcset="
           ~@/assets/images/gems/spooky-header.png,
@@ -207,8 +207,8 @@
     }
   }
 
-  // Fall 2020 events styles
+  // Fall events styles
-  /* #buy-gems.event-fall2020, #buy-gems.event-fall2020SecondPromo {
+  #buy-gems.event-fall2021, #buy-gems.event-fall2021SecondPromo {
     .header-wrap {
       padding-top: 4.5rem;
       padding-bottom: 1.5rem;
@@ -234,21 +234,21 @@
     .close-icon:hover svg path {
       stroke: $gray-400;
     }
-  } */
+  }
 
-  /* #buy-gems.event-fall2020 {
+  #buy-gems.event-fall2021 {
     .header-wrap {
       background-image: url('~@/assets/images/gems/fall-header-bg@2x.png');
       background-size: 100%;
     }
   }
 
-  #buy-gems.event-fall2020SecondPromo {
+  #buy-gems.event-fall2021SecondPromo {
     .header-wrap {
       background-image: url('~@/assets/images/gems/spooky-header-bg@2x.png');
       background-size: 100%;
     }
-  } */
+  }
 </style>
 
 <style lang="scss" scoped>