fix(promo): use mobile generic key, maintain gear date range

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

@@ -12,7 +12,7 @@
       @click="openGemsModal"
     >
       <img
-        v-if="eventName === 'fall2021'"
+        v-if="eventName === 'fall_extra_gems'"
         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 === 'fall2021SecondPromo'"
+        v-else-if="eventName === 'spooky_extra_gems'"
         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 === 'fall2021'"
+          v-if="eventName === 'fall_extra_gems'"
           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 === 'fall2021SecondPromo'"
+          v-else-if="eventName === 'spooky_extra_gems'"
           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 === 'fall2021'"
+        v-if="eventName === 'fall_extra_gems'"
         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 === 'fall2021SecondPromo'"
+        v-else-if="eventName === 'spooky_extra_gems'"
         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-fall2021 {
+.gems-promo-banner-fall_extra_gems {
   background: $gray-10;
 }
 
-.gems-promo-banner-fall2021SecondPromo {
+.gems-promo-banner-spooky_extra_gems {
   background: $black;
 }
 

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

@@ -21,7 +21,7 @@
             class="col-12 text-center"
           >
             <img
-              v-if="eventName === 'fall2021'"
+              v-if="eventName === 'fall_extra_gems'"
               :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 === 'fall2021SecondPromo'"
+              v-else-if="eventName === 'spooky_extra_gems'"
               :alt="$t('supportHabitica')"
               srcset="
           ~@/assets/images/gems/spooky-header.png,
@@ -208,7 +208,7 @@
   }
 
   // Fall events styles
-  #buy-gems.event-fall2021, #buy-gems.event-fall2021SecondPromo {
+  #buy-gems.event-fall_extra_gems, #buy-gems.event-spooky_extra_gems {
     .header-wrap {
       padding-top: 4.5rem;
       padding-bottom: 1.5rem;
@@ -236,14 +236,14 @@
     }
   }
 
-  #buy-gems.event-fall2021 {
+  #buy-gems.event-fall_extra_gems {
     .header-wrap {
       background-image: url('~@/assets/images/gems/fall-header-bg@2x.png');
       background-size: 100%;
     }
   }
 
-  #buy-gems.event-fall2021SecondPromo {
+  #buy-gems.event-spooky_extra_gems {
     .header-wrap {
       background-image: url('~@/assets/images/gems/spooky-header-bg@2x.png');
       background-size: 100%;

website/common/script/content/constants/events.js

@@ -15,13 +15,19 @@ export const EVENTS = {
     season: 'normal',
     npcImageSuffix: '',
   },
+  fall_extra_gems: { // eslint-disable-line camelcase
+    start: '2021-09-23T14:00-04:00',
+    end: '2021-10-31T20:00-04:00',
+    npcImageSuffix: '_fall',
+    season: 'fall',
+    gemsPromo,
+  },
   fall2021: {
     start: '2021-09-21T08:00-04:00',
     end: '2021-10-31T20:00-04:00',
     npcImageSuffix: '_fall',
     season: 'fall',
     gear: true,
-    gemsPromo,
   },
   bundle202109: {
     start: '2021-09-13T08:00-04:00',