Subscription Page Overhaul (#11823)

* WIP(settings): subscriber page improvements

* WIP(subscriptions): more design build-out

* fix(css): disabled button styles

* fix(css): better Amazon targeting

* WIP(g1g1): notif

* WIP(g1g1): notif cont'd

* WIP(gifting): partial modal implementation

* feat(gifting): select giftee modal

* fix(gifting): notification order, modal dismiss

* fix(modals): correct some repops

* fix(gifting): style updates

* fix(modals): also clean out "prev"

* refactor(modals): hide in dismiss event

* fix(modals): new dismiss logic

* fix(modals): new dismiss no go??

* WIP(subscription): unsubscribed state

* WIP(subscription): partial subscribed

* WIP(subscription): finish subscribed

* feat(subscription): revised sub page RC

* fix(subs): style tweaks

* fix(subs): moar style tweaks

website/client/src/components/header/menu.vue

@@ -4,6 +4,7 @@
     <profileModal />
     <report-flag-modal />
     <send-gems-modal />
+    <select-user-modal />
     <b-navbar
       class="topbar navbar-inverse static-top"
       toggleable="lg"
@@ -360,7 +361,7 @@
               class="top-menu-icon svg-icon gem"
               :aria-label="$t('gems')"
               href="#buy-gems"
-              @click.prevent="showBuyGemsModal('gems')"
+              @click.prevent="showBuyGemsModal()"
               v-html="icons.gem"
             ></a>
             <span>{{ userGems }}</span>
@@ -719,6 +720,7 @@ import notificationMenu from './notificationsDropdown';
 import profileModal from '../userMenu/profileModal';
 import reportFlagModal from '../chat/reportFlagModal';
 import sendGemsModal from '@/components/payments/sendGemsModal';
+import selectUserModal from '@/components/payments/selectUserModal';
 import sync from '@/mixins/sync';
 import userDropdown from './userDropdown';
 
@@ -730,6 +732,7 @@ export default {
     profileModal,
     reportFlagModal,
     sendGemsModal,
+    selectUserModal,
     userDropdown,
   },
   mixins: [sync],
@@ -787,9 +790,7 @@ export default {
     openPartyModal () {
       this.$root.$emit('bv::show::modal', 'create-party-modal');
     },
-    showBuyGemsModal (startingPage) {
-      this.$store.state.gemModalOptions.startingPage = startingPage;
-
+    showBuyGemsModal () {
       Analytics.track({
         hitType: 'event',
         eventCategory: 'button',

website/client/src/components/header/notifications/g1g1.vue

@@ -0,0 +1,95 @@
+<template>
+  <div
+    class="notification d-flex flex-column justify-content-center text-center"
+  >
+    <strong class="mx-auto mb-2"> {{ $t('g1g1Announcement') }} </strong>
+    <p class="mx-4"> {{ $t('g1g1Details') }} </p>
+    <div
+      class="btn-secondary mx-auto d-flex"
+      @click="showSelectUser()"
+    >
+      <div class="m-auto"> {{ $t('sendGift') }} </div>
+    </div>
+    <div
+      class="notification-remove"
+      @click.stop="remove()"
+    >
+      <div class="svg-icon" v-html="icons.close"></div>
+    </div>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  p, strong {
+    color: $white;
+  }
+
+  p {
+    font-size: 14px;
+  }
+
+  .notification {
+    background-image: url('~@/assets/images/g1g1-notif.png');
+    background-size: 378px 204px;
+    width: 378px;
+    height: 204px;
+    padding: 3rem;
+    position: relative;
+    overflow: hidden;
+    white-space: normal;
+    cursor: pointer;
+  }
+
+  .notification-remove {
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    padding: 4px;
+    right: 24px;
+    top: 24px;
+
+    .svg-icon {
+      width: 10px;
+      height: 10px;
+    }
+  }
+
+  .btn-secondary {
+    width: 5.75rem;
+    min-height: 1.5rem;
+    border-radius: 2px;
+    border-color: $white;
+    box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
+    font-size: 12px;
+    font-weight: bold;
+  }
+</style>
+
+<script>
+import closeIcon from '@/assets/svg/close-teal.svg';
+import { mapActions } from '@/libs/store';
+
+export default {
+  props: ['notification'],
+  data () {
+    return {
+      icons: Object.freeze({
+        close: closeIcon,
+      }),
+    };
+  },
+  methods: {
+    ...mapActions({
+      readNotification: 'notifications:readNotification',
+    }),
+    remove () {
+      this.readNotification({ notificationId: this.notification.id });
+    },
+    showSelectUser () {
+      this.$root.$emit('bv::show::modal', 'select-user-modal');
+    },
+  },
+};
+</script>

website/client/src/components/header/notificationsDropdown.vue

@@ -147,6 +147,7 @@ import ACHIEVEMENT_JUST_ADD_WATER from './notifications/justAddWater';
 import ACHIEVEMENT_LOST_MASTERCLASSER from './notifications/lostMasterclasser';
 import ACHIEVEMENT_MIND_OVER_MATTER from './notifications/mindOverMatter';
 import ONBOARDING_COMPLETE from './notifications/onboardingComplete';
+import GIFT_ONE_GET_ONE from './notifications/g1g1';
 import OnboardingGuide from './onboardingGuide';
 
 export default {
@@ -176,6 +177,7 @@ export default {
     VERIFY_USERNAME,
     OnboardingGuide,
     ONBOARDING_COMPLETE,
+    GIFT_ONE_GET_ONE,
   },
   data () {
     return {
@@ -195,7 +197,7 @@ export default {
       // listed in the order they should appear in the notifications panel.
       // NOTE: Those not listed here won't be shown in the notification panel!
       handledNotifications: [
-        'NEW_STUFF', 'GROUP_TASK_NEEDS_WORK',
+        'NEW_STUFF', 'GIFT_ONE_GET_ONE', 'GROUP_TASK_NEEDS_WORK',
         'GUILD_INVITATION', 'PARTY_INVITATION', 'CHALLENGE_INVITATION',
         'QUEST_INVITATION', 'GROUP_TASK_ASSIGNED', 'GROUP_TASK_APPROVAL', 'GROUP_TASK_APPROVED',
         'GROUP_TASK_CLAIMED', 'NEW_MYSTERY_ITEMS', 'CARD_RECEIVED',

website/client/src/components/header/userDropdown.vue

@@ -75,7 +75,7 @@
       >{{ $t('logout') }}</a>
       <li
         v-if="!user.purchased.plan.customerId"
-        @click="showBuyGemsModal('subscribe')"
+        @click="showBuyGemsModal()"
       >
         <div class="dropdown-item text-center">
           <h3 class="purple">
@@ -176,9 +176,7 @@ export default {
     showProfile (startingPage) {
       this.$router.push({ name: startingPage });
     },
-    showBuyGemsModal (startingPage) {
-      this.$store.state.gemModalOptions.startingPage = startingPage;
-
+    showBuyGemsModal () {
       Analytics.track({
         hitType: 'event',
         eventCategory: 'button',