remove modals stack (#12423)

website/client/src/app.vue

@@ -513,13 +513,9 @@ export default {
     } else {
       this.hideLoadingScreen();
     }
-
-    this.initializeModalStack();
   },
   beforeDestroy () {
     this.$root.$off('playSound');
-    this.$root.$off('bv::modal::hidden');
-    this.$root.$off('bv::show::modal');
     this.$root.$off('buyModal::showItem');
     this.$root.$off('selectMembersModal::showItem');
   },
@@ -549,112 +545,6 @@ export default {
       this.$store.dispatch('auth:logout', { redirectToLogin: true });
       return true;
     },
-    initializeModalStack () {
-      // Manage modals
-      this.$root.$on('bv::show::modal', (modalId, data = {}) => {
-        if (data.fromRoot) return;
-        const { modalStack } = this.$store.state;
-
-        this.trackGemPurchase(modalId, data);
-
-        // Add new modal to the stack
-        const prev = modalStack[modalStack.length - 1];
-        const prevId = prev ? prev.modalId : undefined;
-        modalStack.push({ modalId, prev: prevId });
-      });
-
-      this.$root.$on('bv::modal::hidden', bvEvent => {
-        let modalId = bvEvent.target && bvEvent.target.id;
-
-        // sometimes the target isn't passed to the hidden event, fallback is the vueTarget
-        if (!modalId) {
-          modalId = bvEvent.vueTarget && bvEvent.vueTarget.id;
-        }
-
-        if (!modalId) {
-          return;
-        }
-
-        const { modalStack } = this.$store.state;
-
-        const modalOnTop = modalStack[modalStack.length - 1];
-
-        // Check for invalid modal. Event systems can send multiples
-        if (!this.validStack(modalStack)) return;
-
-        // If we are moving forward
-        if (modalOnTop && modalOnTop.prev === modalId) return;
-
-        // Remove modal from stack
-        this.$store.state.modalStack.pop();
-
-        // Get previous modal
-        const modalBefore = modalOnTop ? modalOnTop.prev : undefined;
-
-        if (modalBefore) this.$root.$emit('bv::show::modal', modalBefore, { fromRoot: true });
-      });
-
-      // Dismiss modal aggressively. Pass a modal ID to remove a modal instance from the stack
-      // (both the stack entry itself and its "prev" reference) so we don't reopen it
-      this.$root.$on('habitica::dismiss-modal', oldModal => {
-        if (!oldModal) return;
-        this.$root.$emit('bv::hide::modal', oldModal);
-        let removeIndex = this.$store.state.modalStack
-          .map(modal => modal.modalId)
-          .indexOf(oldModal);
-        if (removeIndex >= 0) {
-          this.$store.state.modalStack.splice(removeIndex, 1);
-        }
-        removeIndex = this.$store.state.modalStack
-          .map(modal => modal.prev)
-          .indexOf(oldModal);
-        if (removeIndex >= 0) {
-          delete this.$store.state.modalStack[removeIndex].prev;
-        }
-      });
-    },
-    validStack (modalStack) {
-      const modalsThatCanShowTwice = ['profile'];
-      const modalCount = {};
-      const prevAndCurrent = 2;
-
-      for (const current of modalStack) {
-        if (!modalCount[current.modalId]) modalCount[current.modalId] = 0;
-        modalCount[current.modalId] += 1;
-        if (
-          modalCount[current.modalId] > prevAndCurrent
-          && modalsThatCanShowTwice.indexOf(current.modalId) === -1
-        ) {
-          this.$store.state.modalStack = [];
-          return false;
-        }
-
-        if (!current.prev) continue; // eslint-disable-line
-        if (!modalCount[current.prev]) modalCount[current.prev] = 0;
-        modalCount[current.prev] += 1;
-        if (
-          modalCount[current.prev] > prevAndCurrent
-          && modalsThatCanShowTwice.indexOf(current.prev) === -1
-        ) {
-          this.$store.state.modalStack = [];
-          return false;
-        }
-      }
-
-      return true;
-    },
-    trackGemPurchase (modalId, data) {
-      // Track opening of gems modal unless it's been already tracked
-      // For example the gems button in the menu already tracks the event by itself
-      if (modalId === 'buy-gems' && data.alreadyTracked !== true) {
-        Analytics.track({
-          hitType: 'event',
-          eventCategory: 'button',
-          eventAction: 'click',
-          eventLabel: 'Gems > Wallet',
-        });
-      }
-    },
     itemSelected (item) {
       this.selectedItemToBuy = item;
     },

website/client/src/components/achievements/firstDrops.vue

@@ -126,7 +126,7 @@ export default {
         egg: '',
         hatchingPotion: '',
       };
-      this.$root.$emit('habitica::dismiss-modal', 'first-drops');
+      this.$root.$emit('bv::hide::modal', 'first-drops');
     },
     toInventory () {
       this.$router.push('/inventory/items');

website/client/src/components/challenges/challengeModal.vue

@@ -607,7 +607,7 @@ export default {
       this.$emit('createChallenge', challenge);
       this.resetWorkingChallenge();
 
-      this.$root.$emit('habitica::dismiss-modal', 'challenge-modal');
+      this.$root.$emit('bv::hide::modal', 'challenge-modal');
       this.$router.push(`/challenges/${challenge._id}`);
     },
     async updateChallenge () {
@@ -628,7 +628,7 @@ export default {
       const challenge = await this.$store.dispatch('challenges:updateChallenge', { challenge: challengeDetails });
       this.$emit('updatedChallenge', { challenge });
       this.resetWorkingChallenge();
-      this.$root.$emit('habitica::dismiss-modal', 'challenge-modal');
+      this.$root.$emit('bv::hide::modal', 'challenge-modal');
     },
     toggleCategorySelect () {
       this.showCategorySelect = !this.showCategorySelect;

website/client/src/components/challenges/closeChallengeModal.vue

@@ -144,7 +144,7 @@ export default {
         challengeId: this.challengeId,
         winnerId: this.winner._id,
       });
-      this.$root.$emit('habitica::dismiss-modal', 'close-challenge-modal');
+      this.$root.$emit('bv::hide::modal', 'close-challenge-modal');
       this.$router.push('/challenges/myChallenges');
     },
     async deleteChallenge () {
@@ -153,7 +153,7 @@ export default {
         challengeId: this.challengeId,
         prize: this.prize,
       });
-      this.$root.$emit('habitica::dismiss-modal', 'close-challenge-modal');
+      this.$root.$emit('bv::hide::modal', 'close-challenge-modal');
       this.$router.push('/challenges/myChallenges');
     },
   },

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

@@ -295,6 +295,7 @@
 </style>
 
 <script>
+import * as Analytics from '@/libs/analytics';
 import { mapState } from '@/libs/store';
 import markdown from '@/directives/markdown';
 import planGemLimits from '@/../../common/script/libs/planGemLimits';
@@ -305,10 +306,7 @@ import creditCardIcon from '@/assets/svg/credit-card-icon.svg';
 import heart from '@/assets/svg/health.svg';
 import logo from '@/assets/svg/habitica-logo.svg';
 
-import fourGems from '@/assets/svg/4-gems.svg';
 import twentyOneGems from '@/assets/svg/21-gems.svg';
-import fortyTwoGems from '@/assets/svg/42-gems.svg';
-import eightyFourGems from '@/assets/svg/84-gems.svg';
 
 import amazonButton from '@/components/payments/amazonButton';
 
@@ -326,16 +324,12 @@ export default {
         logo,
         check: checkIcon,
         creditCardIcon,
-        fourGems,
         heart,
         twentyOneGems,
-        fortyTwoGems,
-        eightyFourGems,
       }),
       gemAmount: 0,
-      subscriptionPlan: '',
-      selectedPage: 'subscribe',
       planGemLimits,
+      alreadyTracked: false,
     };
   },
   computed: {
@@ -349,6 +343,20 @@ export default {
         >= (this.user.purchased.plan.consecutive.gemCapExtra + this.planGemLimits.convCap);
     },
   },
+  mounted () {
+    this.$root.$on('bv::show::modal', (modalId, data = {}) => {
+      // Track opening of gems modal unless it's been already tracked
+      // For example the gems button in the menu already tracks the event by itself
+      if (modalId === 'buy-gems' && data.alreadyTracked !== true) {
+        Analytics.track({
+          hitType: 'event',
+          eventCategory: 'button',
+          eventAction: 'click',
+          eventLabel: 'Gems > Wallet',
+        });
+      }
+    });
+  },
   methods: {
     close () {
       this.$root.$emit('bv::hide::modal', 'buy-gems');

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

@@ -177,7 +177,7 @@ export default {
   },
   methods: {
     close () {
-      this.$root.$emit('habitica::dismiss-modal', 'select-user-modal');
+      this.$root.$emit('bv::hide::modal', 'select-user-modal');
     },
     searchUser: debounce(async function userSearch (searchTerm) {
       this.foundUser = {};

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

@@ -296,7 +296,7 @@ export default {
       this.sendingInProgress = false;
     },
     close () {
-      this.$root.$emit('habitica::dismiss-modal', 'send-gems');
+      this.$root.$emit('bv::hide::modal', 'send-gems');
     },
   },
 };

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

@@ -244,7 +244,7 @@ export default {
   methods: {
     close () {
       this.paymentData = {};
-      this.$root.$emit('habitica::dismiss-modal', 'payments-success-modal');
+      this.$root.$emit('bv::hide::modal', 'payments-success-modal');
     },
   },
 };

website/client/src/pages/private-messages.vue

@@ -644,8 +644,8 @@ export default {
     await this.reload();
 
     // close members modal if the Private Messages page is opened in an existing tab
-    this.$root.$emit('habitica::dismiss-modal', 'profile');
-    this.$root.$emit('habitica::dismiss-modal', 'members-modal');
+    this.$root.$emit('bv::hide::modal', 'profile');
+    this.$root.$emit('bv::hide::modal', 'members-modal');
 
     const data = this.$store.state.privateMessageOptions;
     if (data && data.userIdToMessage) {