remove modals stack (#12423)

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');
     },
   },
 };