Oct 2 fixes (#9124)

* Prevented filters from closing when editing tags

* Fixed group plan upgrade

* Add check for class change

* Fixed scrolling stopping on bailey

* Added server side results for armoire

* Added persistend equipment drawer toggle

* Updated reactivity in amazon payments

website/client/app.vue

@@ -56,6 +56,10 @@
 </style>
 
 <style>
+  .modal {
+    overflow-y: scroll !important;
+  }
+
   .modal-backdrop.show {
     opacity: 1 !important;
     background-color: rgba(67, 40, 116, 0.9) !important;

website/client/components/groups/groupPlan.vue

@@ -1,6 +1,7 @@
 <template lang="pug">
+// @TODO: Move to group plans folder
 div
-  amazon-payments-modal(:amazon-payments='amazonPayments')
+  amazon-payments-modal(:amazon-payments-prop='amazonPayments')
   div
     .header
       h1.text-center Need more for your Group?
@@ -390,21 +391,23 @@ export default {
       this.changePage(this.PAGES.PAY);
     },
     pay (paymentMethod) {
-      this.paymentMethod = paymentMethod;
       let subscriptionKey = 'group_monthly'; // @TODO: Get from content API?
+      let paymentData = {
+        subscription: subscriptionKey,
+        coupon: null,
+      };
+
+      if (this.upgradingGroup && this.upgradingGroup._id) {
+        paymentData.groupId = this.upgradingGroup._id;
+      } else {
+        paymentData.groupToCreate = this.newGroup;
+      }
+
+      this.paymentMethod = paymentMethod;
       if (this.paymentMethod === this.PAYMENTS.STRIPE) {
-        this.showStripe({
+        this.showStripe(paymentData);
-          subscription: subscriptionKey,
-          coupon: null,
-          groupToCreate: this.newGroup,
-        });
       } else if (this.paymentMethod === this.PAYMENTS.AMAZON) {
-        this.amazonPaymentsInit({
+        this.amazonPaymentsInit(paymentData);
-          type: 'subscription',
-          subscription: subscriptionKey,
-          coupon: null,
-          groupToCreate: this.newGroup,
-        });
       }
     },
   },

website/client/components/inventory/equipment/index.vue

@@ -38,6 +38,8 @@
     drawer(
       :title="$t('equipment')",
       :errorMessage="(costume && !user.preferences.costume) ? $t('costumeDisabled') : null",
+      :openStatus='openStatus',
+      v-on:toggled='drawerToggled'
     )
       div(slot="drawer-header")
         .drawer-tab-container
@@ -137,6 +139,8 @@
 
 <script>
 import { mapState } from 'client/libs/store';
+import { CONSTANTS, setLocalSetting, getLocalSetting } from 'client/libs/userlocalManager';
+
 import each from 'lodash/each';
 import map from 'lodash/map';
 import throttle from 'lodash/throttle';
@@ -220,6 +224,12 @@ export default {
       this.searchTextThrottled = this.searchText;
     }, 250),
   },
+  mounted () {
+    const drawerState = getLocalSetting(CONSTANTS.keyConstants.EQUIPMENT_DRAWER_STATE);
+    if (drawerState === CONSTANTS.valueConstants.DRAWER_CLOSED) {
+      this.$store.state.equipmentDrawerOpen = false;
+    }
+  },
   methods: {
     openEquipDialog (item) {
       this.gearToEquip = item;
@@ -241,6 +251,16 @@ export default {
     sortItems (items, sortBy) {
       return _reverse(_sortBy(items, sortGearTypeMap[sortBy]));
     },
+    drawerToggled (newState) {
+      this.$store.state.equipmentDrawerOpen = newState;
+
+      if (newState) {
+        setLocalSetting(CONSTANTS.keyConstants.EQUIPMENT_DRAWER_STATE, CONSTANTS.valueConstants.DRAWER_OPEN);
+        return;
+      }
+
+      setLocalSetting(CONSTANTS.keyConstants.EQUIPMENT_DRAWER_STATE, CONSTANTS.valueConstants.DRAWER_CLOSED);
+    },
   },
   computed: {
     ...mapState({
@@ -251,6 +271,9 @@ export default {
       costumeItems: 'user.data.items.gear.costume',
       flatGear: 'content.gear.flat',
     }),
+    openStatus () {
+      return this.$store.state.equipmentDrawerOpen ? 1 : 0;
+    },
     drawerPreference () {
       return this.costume === true ? 'costume' : 'autoEquip';
     },

website/client/components/notifications.vue

@@ -294,6 +294,7 @@ export default {
       this.$store.dispatch('user:fetch'),
       this.$store.dispatch('tasks:fetchUserTasks'),
     ]).then(() => {
+      // List of prompts for user on changes. Sounds like we may need a refactor here, but it is clean for now
       if (this.user.flags.newStuff) {
         this.$root.$emit('show::modal', 'new-stuff');
       }
@@ -312,6 +313,10 @@ export default {
         this.$root.$emit('show::modal', 'quest-completed');
       }
 
+      if (this.userClassSelect) {
+        this.$root.$emit('show::modal', 'choose-class');
+      }
+
       // @TODO: This is a timeout to ensure dom is loaded
       window.setTimeout(() => {
         this.initTour();

website/client/components/payments/amazonModal.vue

@@ -2,8 +2,10 @@
   b-modal#amazon-payment(title="Amazon", :hide-footer="true", size='md')
     h2.text-center Continue with Amazon
     #AmazonPayButton
-    #AmazonPayWallet(v-if="amazonPayments.loggedIn", style="width: 400px; height: 228px;")
+    | {{amazonPayments}}
-    #AmazonPayRecurring(v-if="amazonPayments.loggedIn && amazonPayments.type === 'subscription'",
+    | {{amazonLoggedIn}}
+    #AmazonPayWallet(v-if="amazonLoggedIn", style="width: 400px; height: 228px;")
+    #AmazonPayRecurring(v-if="amazonLoggedIn && amazonPayments.type === 'subscription'",
                         style="width: 400px; height: 140px;")
     .modal-footer
       .text-center
@@ -34,7 +36,7 @@ export default {
   components: {
     bModal,
   },
-  props: ['amazonPayments'],
+  props: ['amazonPaymentsProp'],
   data () {
     return {
       OffAmazonPayments: {},
@@ -43,11 +45,21 @@ export default {
       amazonPaymentsbillingAgreementId: '',
       amazonPaymentspaymentSelected: false,
       amazonPaymentsrecurringConsent: 'false',
+      amazonLoggedIn: false,
     };
   },
   computed: {
     ...mapState({user: 'user.data'}),
     ...mapState(['isAmazonReady']),
+    // @TODO: Eh, idk if we should move data props here or move these props to data. But we shouldn't have both
+    amazonPayments () {
+      let amazonPayments = {
+        type: 'single',
+        loggedIn: this.amazonLoggedIn,
+      };
+      amazonPayments = Object.assign({}, amazonPayments, this.amazonPaymentsProp);
+      return amazonPayments;
+    },
     amazonPaymentsCanCheckout () {
       if (this.amazonPayments.type === 'single') {
         return this.amazonPaymentspaymentSelected === true;
@@ -87,9 +99,10 @@ export default {
 
           onSignIn: async (contract) => {
             this.amazonPaymentsbillingAgreementId = contract.getAmazonBillingAgreementId();
+            this.amazonLoggedIn = true;
+            this.$set(this.amazonPayments, 'loggedIn', true);
 
             if (this.amazonPayments.type === 'subscription') {
-              this.amazonPayments.loggedIn = true;
               this.amazonPaymentsinitWidgets();
             } else {
               let url = '/amazon/createOrderReferenceId';
@@ -97,8 +110,7 @@ export default {
                 billingAgreementId: this.amazonPaymentsbillingAgreementId,
               });
 
-              if (response.status === 200) {
+              if (response.status <= 400) {
-                this.amazonPayments.loggedIn = true;
                 this.amazonPayments.orderReferenceId = response.data.data.orderReferenceId;
 
                 // @TODO: Clarify the deifference of these functions by renaming
@@ -228,6 +240,11 @@ export default {
           return;
         }
 
+        if (this.amazonPayments.groupId) {
+          this.$router.push(`/group-plans/${this.amazonPayments.groupId}/task-information`);
+          return;
+        }
+
         window.location.reload(true);
         this.reset();
       }
@@ -285,7 +302,7 @@ export default {
     reset () {
       this.amazonPaymentsmodal = null;
       this.amazonPayments.type = null;
-      this.amazonPayments.loggedIn = false;
+      this.amazonLoggedIn = false;
       this.amazonPaymentsgift = null;
       this.amazonPaymentsbillingAgreementId = null;
       this.amazonPayments.orderReferenceId = null;

website/client/components/payments/buyGemsModal.vue

@@ -7,7 +7,7 @@
       .col-md-8.align-self-center
         p=text
   div(v-if='user')
-    amazon-payments-modal(:amazon-payments='amazonPayments')
+    amazon-payments-modal(:amazon-payments-prop='amazonPayments')
     b-modal(:hide-footer='true', :hide-header='true', :id='"buy-gems"', size='lg')
       .container-fluid.purple-gradient
         .gemfall

website/client/components/settings/subscription.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .standard-page
-    amazon-payments-modal(:amazon-payments='amazonPayments')
+    amazon-payments-modal(:amazon-payments-prop='amazonPayments')
 
     h1 {{ $t('subscription') }}
     .row

website/client/components/tasks/spells.vue

@@ -195,8 +195,9 @@ export default {
       this.castCancel();
     });
 
+    // @TODO: should we abstract the drawer state/local store to a library and mixing combo? We use a similar pattern in equipment
     const spellDrawerState = getLocalSetting(CONSTANTS.keyConstants.SPELL_DRAWER_STATE);
-    if (spellDrawerState === CONSTANTS.valueConstants.SPELL_DRAWER_CLOSED) {
+    if (spellDrawerState === CONSTANTS.valueConstants.DRAWER_CLOSED) {
       this.$store.state.spellOptions.spellDrawOpen = false;
     }
   },
@@ -211,11 +212,11 @@ export default {
       this.$store.state.spellOptions.spellDrawOpen = newState;
 
       if (newState) {
-        setLocalSetting(CONSTANTS.keyConstants.SPELL_DRAWER_STATE, CONSTANTS.valueConstants.SPELL_DRAWER_OPEN);
+        setLocalSetting(CONSTANTS.keyConstants.SPELL_DRAWER_STATE, CONSTANTS.valueConstants.DRAWER_OPEN);
         return;
       }
 
-      setLocalSetting(CONSTANTS.keyConstants.SPELL_DRAWER_STATE, CONSTANTS.valueConstants.SPELL_DRAWER_CLOSED);
+      setLocalSetting(CONSTANTS.keyConstants.SPELL_DRAWER_STATE, CONSTANTS.valueConstants.DRAWER_CLOSED);
     },
     spellDisabled (skill) {
       if (skill === 'frost' && this.user.stats.buffs.streaks) {

website/client/components/tasks/user.vue

@@ -374,6 +374,7 @@ export default {
   methods: {
     ...mapActions({setUser: 'user:set'}),
     checkMouseOver: throttle(function throttleSearch () {
+      if (this.editingTags) return;
       this.closeFilterPanel();
     }, 250),
     editTags () {

website/client/libs/userlocalManager.js

@@ -1,10 +1,12 @@
+// @TODO: This might become too generic. If so, check the refactor docs
 const CONSTANTS = {
   keyConstants: {
     SPELL_DRAWER_STATE: 'spell-drawer-state',
+    EQUIPMENT_DRAWER_STATE: 'equipment-drawer-state',
   },
   valueConstants: {
-    SPELL_DRAWER_CLOSED: 'spell-drawer-closed',
+    DRAWER_CLOSED: 'drawer-closed',
-    SPELL_DRAWER_OPEN: 'spell-drawer-open',
+    DRAWER_OPEN: 'drawer-open',
   },
 };
 

website/client/mixins/payments.js

@@ -100,6 +100,11 @@ export default {
             return;
           }
 
+          if (data.groupId) {
+            this.$router.push(`/group-plans/${data.groupId}/task-information`);
+            return;
+          }
+
           window.location.reload(true);
         },
       });

website/client/store/actions/shops.js

@@ -70,28 +70,31 @@ export function unlock (store, params) {
   };
 }
 
-export function genericPurchase (store, params) {
+export async function genericPurchase (store, params) {
   switch (params.pinType) {
     case 'mystery_set':
       return purchaseMysterySet(store, params);
     case 'armoire': // eslint-disable-line
       let buyResult = buyArmoire(store.state.user.data);
 
+      // We need the server result because armoir has random item in the result
+      let result = await axios.post('/api/v3/user/buy-armoire');
+      buyResult = result.data.data;
+
       // @TODO: We might need to abstract notifications to library rather than mixin
-      if (buyResult[1]) {
+      if (buyResult) {
-        const resData = buyResult[0];
+        const resData = buyResult;
         const item = resData.armoire;
 
         store.state.notificationStore.push({
           title: '',
-          text: buyResult[1],
+          text: item.dropText,
           type: item.type === 'experience' ? 'xp' : 'drop',
           icon: item.type === 'experience' ? null : getDropClass({type: item.type, key: item.dropKey}),
           timeout: true,
         });
       }
 
-      axios.post('/api/v3/user/buy-armoire');
       return;
     case 'fortify': {
       let rerollResult = rerollOp(store.state.user.data);

website/client/store/index.js

@@ -134,6 +134,7 @@ export default function () {
       modalStack: [],
       userIdToMessage: '',
       brokenChallengeTask: {},
+      equipmentDrawerOpen: true,
     },
   });