Client Fixes (#9056)

* remove console.log calls used for debugging

* open member modal when clicking on user name or avatar in chat

* misc fixes to strings, payments, ...

* simplify code

* secure statsComputed

website/client/components/chat/chatMessages.vue

@@ -11,13 +11,20 @@
       .hr-middle(v-once) {{ msg.timestamp }}
     .row(v-if='user._id !== msg.uuid')
       .col-4
-        avatar(v-if='cachedProfileData[msg.uuid]',
-          :member="cachedProfileData[msg.uuid]", :avatarOnly="true",
-          :hideClassBadge='true')
+        avatar(
+          v-if='cachedProfileData[msg.uuid]',
+          :member="cachedProfileData[msg.uuid]", 
+          :avatarOnly="true",
+          :hideClassBadge='true',
+          @click.native="showMemberModal(msg.uuid)",
+        )
       .card.col-8
         .message-hidden(v-if='msg.flagCount > 0 && user.contributor.admin') Message Hidden
         .card-block
-            h3.leader(:class='userLevelStyle(cachedProfileData[msg.uuid])')
+            h3.leader(
+              :class='userLevelStyle(cachedProfileData[msg.uuid])'
+              @click="showMemberModal(msg.uuid)",
+            )
               | {{msg.user}}
               .svg-icon(v-html="icons[`tier${cachedProfileData[msg.uuid].contributor.level}`]", v-if='cachedProfileData[msg.uuid] && cachedProfileData[msg.uuid].contributor && cachedProfileData[msg.uuid].contributor.level')
             p {{msg.timestamp | timeAgo}}
@@ -39,11 +46,16 @@
             span.action.float-right(v-if='likeCount(msg) > 0')
               .svg-icon(v-html="icons.liked")
               | + {{ likeCount(msg) }}
+    // @TODO can we avoid duplicating all this code? Cannot we just push everything
+    // to the right if the user is the author?
     .row(v-if='user._id === msg.uuid')
       .card.col-8
         .message-hidden(v-if='msg.flagCount > 0 && user.contributor.admin') Message Hidden - {{ msg.flagCount }} Flags
         .card-block
-            h3.leader(:class='userLevelStyle(cachedProfileData[msg.uuid])')
+            h3.leader(
+              :class='userLevelStyle(cachedProfileData[msg.uuid])',
+              @click="showMemberModal(msg.uuid)",
+            )
               | {{msg.user}}
               .svg-icon(v-html="icons[`tier${cachedProfileData[msg.uuid].contributor.level}`]", v-if='cachedProfileData[msg.uuid] && cachedProfileData[msg.uuid].contributor && cachedProfileData[msg.uuid].contributor.level')
             p {{msg.timestamp | timeAgo}}
@@ -66,15 +78,19 @@
               .svg-icon(v-html="icons.liked")
               | + {{ likeCount(msg) }}
       .col-4
-        avatar(v-if='cachedProfileData[msg.uuid]',
-          :member="cachedProfileData[msg.uuid]", :avatarOnly="true",
-          :hideClassBadge='true')
+        avatar(
+          v-if='cachedProfileData[msg.uuid]',
+          :member="cachedProfileData[msg.uuid]", 
+          :avatarOnly="true",
+          :hideClassBadge='true',
+          @click.native="showMemberModal(msg.uuid)",
+        )
 </template>
 
 <style lang="scss" scoped>
   @import '~client/assets/scss/colors.scss';
 
-  // @TODO: Move this to an scss?
+  // @TODO: Move this to an scss
   .tier1 {
     color: #c42870;
   }
@@ -118,7 +134,9 @@
   }
   // End of tier colors
 
-  h3 {
+  h3 { // this is the user name
+    cursor: pointer;
+
     .svg-icon {
       width: 10px;
       display: inline-block;
@@ -362,6 +380,12 @@ export default {
         chatId: message.id,
       });
     },
+    showMemberModal (memberId) {
+      // @TODO move to action or anyway move from here because it's super duplicate
+      this.$store.state.profileUser = this.cachedProfileData[memberId];
+      this.$store.state.profileOptions.startingPage = 'profile';
+      this.$root.$emit('show::modal', 'profile');
+    },
   },
 };
 </script>

website/client/components/groups/tavern.vue

@@ -10,7 +10,7 @@
         h3(v-once) {{ $t('tavernChat') }}
 
         .row
-          textarea(placeholder="Friendly reminder: this is an all-ages chat, so please keep content and language appropriate! Consult the Community Guidelines in the sidebar if you have questions.", v-model='newMessage', @keydown='updateCarretPosition')
+          textarea(:placeholder="$t('tavernCommunityGuidelinesPlaceholder')", v-model='newMessage', @keydown='updateCarretPosition')
           autocomplete(:text='newMessage', v-on:select="selectedAutocomplete", :coords='coords', :chat='group.chat')
           button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }}
           button.btn.btn-secondary.float-left(v-once, @click='fetchRecentMessages()') {{ $t('fetchRecentMessages') }}
@@ -50,6 +50,7 @@
             .toggle-down(@click="sections.staff = !sections.staff", v-if="!sections.staff")
               .svg-icon(v-html="icons.downIcon")
         .section.row(v-if="sections.staff")
+          // @TODO open member modal when clicking on a staff member
           .col-4.staff(v-for='user in staff', :class='{staff: user.type === "Staff", moderator: user.type === "Moderator", bailey: user.name === "It\'s Bailey"}')
             div
               .title {{user.name}}

website/client/components/payments/sendGemsModal.vue

@@ -83,7 +83,7 @@ import planGemLimits from '../../../common/script/libs/planGemLimits';
 import paymentsMixin from 'client/mixins/payments';
 import notificationsMixin from 'client/mixins/notifications';
 
-// @TODO: EMAILS.TECH_ASSISTANCE_EMAIL
+// @TODO: EMAILS.TECH_ASSISTANCE_EMAIL, load from config
 const TECH_ASSISTANCE_EMAIL = 'admin@habitica.com';
 
 export default {
@@ -104,6 +104,7 @@ export default {
         subscription: {key: ''},
         message: '',
       },
+      amazonPayments: {},
       assistanceEmailObject: {
         hrefTechAssistanceEmail: `<a href="mailto:${TECH_ASSISTANCE_EMAIL}">${TECH_ASSISTANCE_EMAIL}</a>`,
       },

website/client/mixins/payments.js

@@ -64,7 +64,7 @@ export default {
         description: sub ? this.$t('subscribe') : this.$t('checkout'),
         // image: '/apple-touch-icon-144-precomposed.png',
         panelLabel: sub ? this.$t('subscribe') : this.$t('checkout'),
-        async token (res) {
+        token: async (res) => {
           let url = '/stripe/checkout?a=a'; // just so I can concat &x=x below
 
           if (data.groupToCreate) {
@@ -89,6 +89,7 @@ export default {
 
           let newGroup = response.data.data;
           if (newGroup && newGroup._id) {
+            // @TODO this does not do anything as we reload just below
             // @TODO: Just append? or $emit?
             this.$router.push(`/group-plans/${newGroup._id}/task-information`);
             // @TODO action

website/common/locales/en/communityGuidelines.json

@@ -1,6 +1,6 @@
 {
     "iAcceptCommunityGuidelines": "I agree to abide by the Community Guidelines",
-    "tavernCommunityGuidelinesPlaceholder": "Friendly reminder: this is an all-ages chat, so please keep content and language appropriate! Consult the Community Guidelines below if you have questions.",
+    "tavernCommunityGuidelinesPlaceholder": "Friendly reminder: this is an all-ages chat, so please keep content and language appropriate! Consult the Community Guidelines in the sidebar if you have questions.",
     "commGuideHeadingWelcome": "Welcome to Habitica!",
     "commGuidePara001": "Greetings, adventurer! Welcome to Habitica, the land of productivity, healthy living, and the occasional rampaging gryphon. We have a cheerful community full of helpful people supporting each other on their way to self-improvement.",
     "commGuidePara002": "To help keep everyone safe, happy, and productive in the community, we have some guidelines. We have carefully crafted them to make them as friendly and easy-to-read as possible. Please take the time to read them.",

website/common/script/libs/statsComputed.js

@@ -15,16 +15,16 @@ function equipmentStatBonusComputed (stat, user) {
   let equipped = user.items.gear.equipped;
   let equippedKeys = values(!equipped.toObject ? equipped : equipped.toObject());
 
-  /* eslint-disable no-console */
-  console.log(equippedKeys);
   each(equippedKeys, (equippedItem) => {
-    console.log(equippedItem, gear[equippedItem]);
-    /* eslint-enable no-console */
-    let equipmentStat = gear[equippedItem][stat];
-    let classBonusMultiplier = gear[equippedItem].klass === user.stats.class ||
-      gear[equippedItem].specialClass === user.stats.class ? 0.5 : 0;
-    gearBonus += equipmentStat;
-    classBonus += equipmentStat * classBonusMultiplier;
+    let item = gear[equippedItem];
+
+    if (item) {
+      let equipmentStat = item[stat];
+      let classBonusMultiplier = item.klass === user.stats.class ||
+        item.specialClass === user.stats.class ? 0.5 : 0;
+      gearBonus += equipmentStat;
+      classBonus += equipmentStat * classBonusMultiplier;
+    }
   });
 
   return {