Contact form links (#10187)

* Added links to contact form

* Fixed encoding link. Added link to tavern. Updated copy

* Converted link to cookie link

* Updated domain format

* Updated links

* Added apikey to cookie

website/client/components/groups/tavern.vue

@@ -133,6 +133,8 @@
               .svg-icon(v-html="icons.downIcon")
         .section.row(v-if="sections.helpfulLinks")
           ul
+            li
+              a(href='', @click.prevent='modForm()') {{ $t('contactForm') }}
             li
              router-link(to='/static/community-guidelines', v-once) {{ $t('communityGuidelinesLink') }}
             li
@@ -510,12 +512,12 @@
     padding: 1em;
     cursor: pointer;
   }
-
 </style>
 
 <script>
 import debounce from 'lodash/debounce';
 import { mapState } from 'client/libs/store';
+import { goToModForm } from 'client/libs/modform';
 
 import { TAVERN_ID } from '../../../common/script/constants';
 import chatMessage from '../chat/chatMessages';
@@ -705,6 +707,9 @@ export default {
     this.group = await this.$store.dispatch('guilds:getGroup', {groupId: TAVERN_ID});
   },
   methods: {
+    modForm () {
+      goToModForm(this.user);
+    },
     // https://medium.com/@_jh3y/how-to-where-s-the-caret-getting-the-xy-position-of-the-caret-a24ba372990a
     getCoord (e, text) {
       let carPos = text.selectionEnd;

website/client/components/header/menu.vue

@@ -55,6 +55,7 @@ div
             a.dropdown-item(href="https://trello.com/c/odmhIqyW/440-read-first-table-of-contents", target='_blank') {{ $t('requestAF') }}
             a.dropdown-item(href="http://habitica.wikia.com/wiki/Contributing_to_Habitica", target='_blank') {{ $t('contributing') }}
             a.dropdown-item(href="http://habitica.wikia.com/wiki/Habitica_Wiki", target='_blank') {{ $t('wiki') }}
+            a.dropdown-item(@click='modForm()') {{ $t('contactForm') }}
       .user-menu.d-flex.align-items-center
         .item-with-icon(v-if="userHourglasses > 0")
           .top-menu-icon.svg-icon(v-html="icons.hourglasses", v-b-tooltip.hover.bottom="$t('mysticHourglassesTooltip')")
@@ -283,11 +284,14 @@ div
 <script>
 import { mapState, mapGetters } from 'client/libs/store';
 import * as Analytics from 'client/libs/analytics';
+import { goToModForm } from 'client/libs/modform';
+
 import gemIcon from 'assets/svg/gem.svg';
 import goldIcon from 'assets/svg/gold.svg';
 import syncIcon from 'assets/svg/sync.svg';
 import svgHourglasses from 'assets/svg/hourglass.svg';
 import logo from 'assets/svg/logo.svg';
+
 import InboxModal from '../userMenu/inbox.vue';
 import notificationMenu from './notificationsDropdown';
 import creatorIntro from '../creatorIntro';
@@ -328,6 +332,9 @@ export default {
     this.getUserGroupPlans();
   },
   methods: {
+    modForm () {
+      goToModForm(this.user);
+    },
     toggleUserDropdown () {
       this.isUserDropdownOpen = !this.isUserDropdownOpen;
     },

website/client/components/static/contact.vue

@@ -14,10 +14,11 @@
           a(target='_blank', href='/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac') Report a Bug guild
           |  or 
           a(target='_blank', href='https://github.com/HabitRPG/habitica/issues?q=is%3Aopen') GitHub
+          span(v-if='this.user')
             br
             | {{ $t('reportCommunityIssues') }}
             | : 
-          a(href='mailto:leslie@habitica.com') leslie@habitica.com
+            a(@click.prevent='modForm()', href='') {{ $t('contactForm') }}
           br
           | {{ $t('subscriptionPaymentIssues') }}
           | : 
@@ -29,13 +30,27 @@
           br
           | {{ $t('businessInquiries') }}
           | : 
-          a(href='mailto:vicky@habitica.com') vicky@habitica.com
+          a(href='mailto:admin@habitica.com') admin@habitica.com
           br
           | {{ $t('merchandiseInquiries') }}
           | : 
-          a(href='mailto:store@habitica.com') store@habitica.com
-          br
-          | {{ $t('marketingInquiries') }}
-          | : 
-          a(href='mailto:leslie@habitica.com') leslie@habitica.com
+          a(href='mailto:admin@habitica.com') admin@habitica.com
 </template>
+
+<script>
+import { mapState } from 'client/libs/store';
+import { goToModForm } from 'client/libs/modform';
+
+export default {
+  computed: {
+    ...mapState({
+      user: 'user.data',
+    }),
+  },
+  methods: {
+    modForm () {
+      goToModForm(this.user);
+    },
+  },
+};
+</script>

website/client/libs/modform.js

@@ -0,0 +1,38 @@
+// @TODO: I have abstracted this in another PR. Use that function when merged
+function getApiKey () {
+  let AUTH_SETTINGS = localStorage.getItem('habit-mobile-settings');
+
+  if (AUTH_SETTINGS) {
+    AUTH_SETTINGS = JSON.parse(AUTH_SETTINGS);
+
+    if (AUTH_SETTINGS.auth && AUTH_SETTINGS.auth.apiId && AUTH_SETTINGS.auth.apiToken) {
+      return AUTH_SETTINGS.auth.apiToken;
+    }
+  }
+}
+
+export function goToModForm (user) {
+  if (!user) return;
+
+  const apiKey = getApiKey();
+  if (!apiKey) return;
+
+  const tenMins = 10 * 60 * 1000;
+  let dateTime;
+  dateTime = new Date();
+  dateTime.setTime(dateTime.getTime() + tenMins);
+  const expires = `expires=${dateTime.toGMTString()}`;
+
+  const email = encodeURIComponent(user.auth.local.email);
+
+  const userData = {
+    email,
+    profileName: user.profile.name,
+    uuid: user._id,
+    apiKey,
+  };
+
+  document.cookie = `habiticauserdata=${JSON.stringify(userData)};${expires};domain=.habitica.com;path=/`;
+
+  window.location.href = 'http://contact.habitica.com';
+}

website/common/locales/en/front.json

@@ -221,7 +221,7 @@
   "reportCommunityIssues": "Report Community Issues",
   "subscriptionPaymentIssues": "Subscription and Payment Issues",
   "generalQuestionsSite": "General Questions about the Site",
-  "businessInquiries": "Business Inquiries",
+  "businessInquiries": "Business/Marketing Inquiries",
   "merchandiseInquiries": "Physical Merchandise (T-Shirts, Stickers) Inquiries",
   "marketingInquiries": "Marketing/Social Media Inquiries",
   "tweet": "Tweet",

website/common/locales/en/generic.json

@@ -293,5 +293,6 @@
   "letsgo": "Let's Go!",
   "selected": "Selected",
   "howManyToBuy": "How many would you like to buy?",
-  "habiticaHasUpdated": "There is a new Habitica update. Refresh to get the latest version!"
+  "habiticaHasUpdated": "There is a new Habitica update. Refresh to get the latest version!",
+  "contactForm": "Contact the Moderation Team"
 }