feat(event): Winter Wonderland 2021 and Gift-One-Get-One Promotion

2020-12-10 16:53:37 -06:00
parent 74ebcf919e
commit 53f19c4da3
282 changed files with 681 additions and 198 deletions
@@ -0,0 +1,107 @@
+<template>
+  <base-banner
+    banner-id="gift-promo"
+    class="gift-promo-banner"
+    :show="showGiftPromoBanner"
+    height="3rem"
+  >
+    <div
+      slot="content"
+      :aria-label="$t('subscription')"
+      class="content d-flex justify-content-around align-items-center ml-auto mr-auto"
+      @click="showSelectUser"
+    >
+      <div
+        class="svg-icon svg-gifts left-gift"
+        v-html="icons.gifts"
+      >
+      </div>
+      <div
+        class="announce-text"
+      >
+        {{ $t('g1g1Announcement') }}
+      </div>
+      <div
+        class="svg-icon svg-gifts right-gift"
+        v-html="icons.gifts"
+      >
+      </div>
+    </div>
+  </base-banner>
+</template>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  .announce-text {
+    color: $white;
+  }
+
+  .gift-promo-banner {
+    width: 100%;
+    min-height: 2.5rem;
+    background: $teal-50;
+    cursor: pointer;
+  }
+
+  .left-gift {
+    margin: auto 1rem auto auto;
+  }
+
+  .right-gift {
+    margin: auto auto auto 1rem;
+    filter: flipH;
+    transform: scaleX(-1);
+  }
+
+  .svg-gifts {
+    width: 4.6rem;
+    opacity: 1;
+  }
+</style>
+
+<script>
+// import * as Analytics from '@/libs/analytics';
+import { mapState } from '@/libs/store';
+import BaseBanner from './base';
+
+import gifts from '@/assets/svg/gifts.svg';
+
+export default {
+  components: {
+    BaseBanner,
+  },
+  computed: {
+    ...mapState({
+      currentEvent: 'worldState.data.currentEvent',
+    }),
+    eventName () {
+      return this.currentEvent && this.currentEvent.event;
+    },
+    showGiftPromoBanner () {
+      const currEvt = this.currentEvent;
+      if (!currEvt) return false;
+      return currEvt && currEvt.promo === 'g1g1';
+    },
+  },
+  data () {
+    return {
+      icons: Object.freeze({
+        gifts,
+      }),
+    };
+  },
+  methods: {
+    showSelectUser () {
+      /* Analytics.track({
+        hitType: 'event',
+        eventCategory: 'button',
+        eventAction: 'click',
+        eventLabel: 'Gift Promo Banner',
+      }); */
+
+      this.$root.$emit('bv::show::modal', 'select-user-modal');
+    },
+  },
+};
+</script>