From f4e8bf9c2e7ca5c0f2d118ecf2a9c4dbc518aa15 Mon Sep 17 00:00:00 2001
From: SabreCat <sabe@habitica.com>
Date: Fri, 2 Jun 2023 15:58:24 -0500
Subject: [PATCH] feat(form): Ask a Question mode on bug report

---
 .../client/src/components/bugReportModal.vue  | 54 ++++++++-----------
 website/client/src/components/header/menu.vue |  7 +--
 website/client/src/mixins/reportBug.js        |  3 +-
 website/client/src/store/index.js             |  3 ++
 website/common/locales/en/generic.json        |  8 ++-
 .../server/controllers/api-v4/bug-report.js   |  4 +-
 website/server/libs/bug-report.js             |  4 +-
 7 files changed, 42 insertions(+), 41 deletions(-)

diff --git a/website/client/src/components/bugReportModal.vue b/website/client/src/components/bugReportModal.vue
index 8712c910d3..a085d9be75 100644
--- a/website/client/src/components/bugReportModal.vue
+++ b/website/client/src/components/bugReportModal.vue
@@ -8,23 +8,15 @@
       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>
-
-      <div class="dialog-close">
-        <close-icon
-          :purple="true"
-          @click="close()"
-        />
+      <div class="report-bug-header-describe">
+        {{ question ? $t('askQuestionHeaderDescribe') : $t('reportBugHeaderDescribe') }}
       </div>
+      <close-x
+        @click="close()"
+      />
     </div>
     <div>
       <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;
diff --git a/website/client/src/components/header/menu.vue b/website/client/src/components/header/menu.vue
index ecd2cc4288..9f77bf2c49 100644
--- a/website/client/src/components/header/menu.vue
+++ b/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"
diff --git a/website/client/src/mixins/reportBug.js b/website/client/src/mixins/reportBug.js
index 6a87da8546..8d3c7c8861 100644
--- a/website/client/src/mixins/reportBug.js
+++ b/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);
     },
   },
diff --git a/website/client/src/store/index.js b/website/client/src/store/index.js
index dd3a0e28dd..20d2332406 100644
--- a/website/client/src/store/index.js
+++ b/website/client/src/store/index.js
@@ -148,6 +148,9 @@ export default function () {
         egg: '',
         hatchingPotion: '',
       },
+      bugReportOptions: {
+        question: false,
+      },
     },
   });
 
diff --git a/website/common/locales/en/generic.json b/website/common/locales/en/generic.json
index 167627413c..cef3781f5a 100644
--- a/website/common/locales/en/generic.json
+++ b/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"
 }
diff --git a/website/server/controllers/api-v4/bug-report.js b/website/server/controllers/api-v4/bug-report.js
index cb45d1a8fc..630ffde3f8 100644
--- a/website/server/controllers/api-v4/bug-report.js
+++ b/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({
diff --git a/website/server/libs/bug-report.js b/website/server/libs/bug-report.js
index ca8d18e794..c46b92c1f3 100644
--- a/website/server/libs/bug-report.js
+++ b/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),
   );