Show orb of rebirth confirmation modal after use (window refresh) (#15540)

* fix(content): textual tweaks and updates

* fix(link): direct to FAQ instead of wiki

* fix(faq): correct Markdown

* Show orb of rebirth confirmation modal after use (window refresh)

* Set and check rebirth confirmation modal from localstorage

Set and check rebirth confirmation modal from localstorage after window reload

* Don't show orb of rebirth confirmation modal until page reloads

---------

Co-authored-by: Kalista Payne <kalista@habitica.com>

website/client/src/components/notifications.vue

@@ -328,6 +328,8 @@ export default {
       alreadyReadNotification,
       nextCron: null,
       handledNotifications,
+      isInitialLoadComplete: false,
+      pendingRebirthNotification: null,
     };
   },
   computed: {
@@ -453,6 +455,18 @@ export default {
 
       return this.runYesterDailies();
     },
+    async showPendingRebirthModal () {
+      if (this.pendingRebirthNotification) {
+        this.playSound('Achievement_Unlocked');
+        this.$root.$emit('bv::show::modal', 'rebirth');
+
+        await axios.post('/api/v4/notifications/read', {
+          notificationIds: [this.pendingRebirthNotification.id],
+        });
+
+        this.pendingRebirthNotification = null;
+      }
+    },
     showDeathModal () {
       this.playSound('Death');
       this.$root.$emit('bv::show::modal', 'death');
@@ -661,6 +675,18 @@ export default {
         this.showLevelUpNotifications(this.user.stats.lvl);
       }
       this.handleUserNotifications(this.user.notifications);
+
+      this.isInitialLoadComplete = true;
+
+      const hasRebirthConfirmationFlag = localStorage.getItem('show-rebirth-confirmation') === 'true';
+
+      if (hasRebirthConfirmationFlag) {
+        localStorage.removeItem('show-rebirth-confirmation');
+        this.playSound('Achievement_Unlocked');
+        this.$root.$emit('bv::show::modal', 'rebirth');
+      } else {
+        this.showPendingRebirthModal();
+      }
     },
     async handleUserNotifications (after) {
       if (this.$store.state.isRunningYesterdailies) return;
@@ -700,8 +726,15 @@ export default {
             this.$root.$emit('habitica:won-challenge', notification);
             break;
           case 'REBIRTH_ACHIEVEMENT':
+            if (localStorage.getItem('show-rebirth-confirmation') === 'true') {
+              markAsRead = false;
+            } else if (!this.isInitialLoadComplete) {
+              this.pendingRebirthNotification = notification;
+              markAsRead = false;
+            } else {
               this.playSound('Achievement_Unlocked');
               this.$root.$emit('bv::show::modal', 'rebirth');
+            }
             break;
           case 'STREAK_ACHIEVEMENT':
             this.text(`${this.$t('streaks')}: ${this.user.achievements.streak}`, () => {

website/client/src/components/shops/buyModal.vue

@@ -873,10 +873,15 @@ export default {
           return;
         }
         if (this.genericPurchase) {
+          if (this.item.key === 'rebirth_orb') {
+            localStorage.setItem('show-rebirth-confirmation', 'true');
+          }
           await this.makeGenericPurchase(this.item, 'buyModal', this.selectedAmountToBuy);
+          if (this.item.key !== 'rebirth_orb') {
             await this.purchased(this.item.text);
           }
         }
+      }
 
       this.$emit('buyPressed', this.item);
       this.hideDialog();