feat(form): Ask a Question mode on bug report

website/client/src/components/bugReportModal.vue

@@ -8,24 +8,16 @@
       slot="modal-header"
       class="bug-report-modal-header"
     >
-      <h2 v-once>
-        {{ $t('reportBug') }}
+      <h2>
+        {{ question ? $t('askQuestion') : $t('reportBug') }}
       </h2>
-
-      <div
-        v-once
-        class="report-bug-header-describe"
-      >
-        {{ $t('reportBugHeaderDescribe') }}
+      <div class="report-bug-header-describe">
+        {{ question ? $t('askQuestionHeaderDescribe') : $t('reportBugHeaderDescribe') }}
       </div>
-
-      <div class="dialog-close">
-        <close-icon
-          :purple="true"
+      <close-x
         @click="close()"
       />
     </div>
-    </div>
     <div>
       <form
         class="form"
@@ -40,11 +32,8 @@
           >
             {{ $t('email') }}
           </label>
-          <div
-            v-once
-            class="mb-2 description-label"
-          >
-            {{ $t('reportEmailText') }}
+          <div class="mb-2 description-label">
+            {{ question ? $t('questionEmailText') : $t('reportEmailText') }}
           </div>
           <input
             id="emailInput"
@@ -64,21 +53,18 @@
           </div>
         </div>
 
-        <label v-once>
-          {{ $t('reportDescription') }}
+        <label>
+          {{ question ? $t('question') : $t('reportDescription') }}
         </label>
-        <div
-          v-once
-          class="mb-2 description-label"
-        >
-          {{ $t('reportDescriptionText') }}
+        <div class="mb-2 description-label">
+          {{ question ? $t('questionDescriptionText') : $t('reportDescriptionText') }}
         </div>
         <textarea
           v-model="message"
           class="form-control"
           rows="5"
           :required="true"
-          :placeholder="$t('reportDescriptionPlaceholder')"
+          :placeholder="question ? $t('questionPlaceholder') : $t('reportDescriptionPlaceholder')"
           :class="{'input-invalid': messageInvalid && this.message.length === 0}"
         >
 
@@ -89,7 +75,7 @@
           type="submit"
           :disabled="!message || !emailValid"
         >
-          {{ $t('submitBugReport') }}
+          {{ question ? $t('submitQuestion') : $t('submitBugReport') }}
         </button>
       </form>
     </div>
@@ -141,7 +127,7 @@ h2 {
 .bug-report-modal-header {
   color: $white;
   width: 100%;
-  padding: 2rem 3rem 1.5rem 1.5rem;
+  padding: 1.5rem 3rem 1.5rem 1.5rem;
 
   background-image: linear-gradient(288deg, #{$purple-200}, #{$purple-300});
 }
@@ -182,13 +168,13 @@ label {
 <script>
 import axios from 'axios';
 import isEmail from 'validator/lib/isEmail';
-import closeIcon from '@/components/shared/closeIcon';
+import closeX from '@/components/ui/closeX';
 import { mapState } from '@/libs/store';
 import { MODALS } from '@/libs/consts';
 
 export default {
   components: {
-    closeIcon,
+    closeX,
   },
   data () {
     return {
@@ -211,6 +197,7 @@ export default {
       await axios.post('/api/v4/bug-report', {
         message: this.message,
         email: this.email,
+        question: this.question,
       });
 
       this.message = '';
@@ -233,6 +220,9 @@ export default {
       if (this.email.length <= 3) return false;
       return !this.emailValid;
     },
+    question () {
+      return this.$store.state.bugReportOptions.question;
+    },
   },
   mounted () {
     const { user } = this;

website/client/src/components/header/menu.vue

@@ -312,12 +312,13 @@
               >
                 {{ $t('reportBug') }}
               </a>
-              <router-link
+              <a
                 class="topbar-dropdown-item dropdown-item"
-                to="/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a"
+                target="_blank"
+                @click.prevent="openBugReportModal(true)"
               >
                 {{ $t('askQuestion') }}
-              </router-link>
+              </a>
               <a
                 class="topbar-dropdown-item dropdown-item"
                 href="https://docs.google.com/forms/d/e/1FAIpQLScPhrwq_7P1C6PTrI3lbvTsvqGyTNnGzp1ugi1Ml0PFee_p5g/viewform?usp=sf_link"

website/client/src/mixins/reportBug.js

@@ -2,7 +2,8 @@ import { MODALS } from '@/libs/consts';
 
 export default {
   methods: {
-    openBugReportModal () {
+    openBugReportModal (questionMode = false) {
+      this.$store.state.bugReportOptions.question = questionMode;
       this.$root.$emit('bv::show::modal', MODALS.BUG_REPORT);
     },
   },

website/client/src/store/index.js

@@ -148,6 +148,9 @@ export default function () {
         egg: '',
         hatchingPotion: '',
       },
+      bugReportOptions: {
+        question: false,
+      },
     },
   });
 

website/common/locales/en/generic.json

@@ -216,5 +216,11 @@
   "refreshList": "Refresh List",
   "leaveHabitica": "You are about to leave Habitica.com",
   "leaveHabiticaText": "Habitica is not responsible for the content of any linked website that is not owned or operated by HabitRPG.<br>Please note that these websites' practices may differ from Habitica’s community guidelines.",
-  "skipExternalLinkModal": "Hold CTRL (Windows) or Command (Mac) when clicking a link to skip this modal."
+  "skipExternalLinkModal": "Hold CTRL (Windows) or Command (Mac) when clicking a link to skip this modal.",
+  "askQuestionHeaderDescribe": "New to Habitica and don't know what you're doing? Veteran but just can't figure out how to use one of the features? Fill out this form and our team will get back to you.",
+  "questionEmailText": "This will only be used to contact you regarding your question.",
+  "question": "Question",
+  "questionDescriptionText": "It's okay to ask your questions in your primary language if you aren't comfortable speaking in English.",
+  "questionPlaceholder": "Ask your question here",
+  "submitQuestion": "Submit Question"
 }

website/server/controllers/api-v4/bug-report.js

@@ -32,14 +32,14 @@ api.bugReport = {
     const validationErrors = req.validationErrors();
     if (validationErrors) throw validationErrors;
 
-    const { message, email } = req.body;
+    const { message, email, question } = req.body;
     const { user } = res.locals;
     const BROWSER_UA = req.get('User-Agent');
 
     const {
       emailData, sendMailResult,
     } = bugReportLogic(
-      user, email, message, BROWSER_UA,
+      user, email, message, BROWSER_UA, question,
     );
 
     res.status(200).send({

website/server/libs/bug-report.js

@@ -2,7 +2,7 @@ import nconf from 'nconf';
 import { convertVariableObjectToArray, sendTxn } from './email';
 
 export async function bugReportLogic (
-  user, userEmail, message, BROWSER_UA,
+  user, userEmail, message, BROWSER_UA, question,
 ) {
   const emailData = {
     USER_ID: user._id,
@@ -28,7 +28,7 @@ export async function bugReportLogic (
 
   const sendMailResult = await sendTxn(
     adminMail,
-    'report-a-bug',
+    question ? 'ask-a-question' : 'report-a-bug',
     convertVariableObjectToArray(emailData),
   );