From eb2cb9e9218c53e4e9f7c72bf35ba0ae60da7c7c Mon Sep 17 00:00:00 2001
From: Sabe Jones <sabrecat@gmail.com>
Date: Thu, 15 Dec 2022 11:34:07 -0600
Subject: [PATCH] Refactor FAQ (#14372)

* refactor(faq): fetch from API on web
Also make question list more maintainable, allowing different questions across platforms

* fix(tests): don't return null when function is expected
Also removes the unnecessary default to web in controller

* fix(tests): add new fields to expectation, add placeholders

* refactor(faq): allow reordering

Co-authored-by: SabreCat <sabe@habitica.com>
---
 test/api/v4/faq/GET-faq.test.js              |  4 +
 website/client/src/components/static/faq.vue | 97 +++++++++-----------
 website/client/src/store/actions/faq.js      |  7 ++
 website/client/src/store/actions/index.js    |  2 +
 website/common/locales/en/faq.json           |  2 +
 website/common/script/content/faq.js         | 70 ++++++++++++--
 website/server/controllers/api-v4/faq.js     |  1 +
 7 files changed, 120 insertions(+), 63 deletions(-)
 create mode 100644 website/client/src/store/actions/faq.js

diff --git a/test/api/v4/faq/GET-faq.test.js b/test/api/v4/faq/GET-faq.test.js
index 5c7ab31ce6..f18eddd625 100644
--- a/test/api/v4/faq/GET-faq.test.js
+++ b/test/api/v4/faq/GET-faq.test.js
@@ -37,6 +37,8 @@ describe('GET /faq', () => {
 
       expect(res).to.have.property('questions');
       expect(res.questions[0]).to.eql({
+        exclusions: [],
+        heading: 'overview',
         question: translate('faqQuestion0'),
         ios: translate('iosFaqAnswer0'),
       });
@@ -57,6 +59,8 @@ describe('GET /faq', () => {
 
       expect(res).to.have.property('questions');
       expect(res.questions[0]).to.eql({
+        exclusions: [],
+        heading: 'overview',
         question: translate('faqQuestion0'),
         android: translate('androidFaqAnswer0'),
       });
diff --git a/website/client/src/components/static/faq.vue b/website/client/src/components/static/faq.vue
index 783270f2bc..f4ed0faefd 100644
--- a/website/client/src/components/static/faq.vue
+++ b/website/client/src/components/static/faq.vue
@@ -5,40 +5,44 @@
   >
     <div class="row">
       <div class="col-12 col-md-6 offset-md-3">
-        <h1 id="faq-heading">
+        <h1
+          v-once
+          id="faq-heading"
+        >
           {{ $t('frequentlyAskedQuestions') }}
         </h1>
         <div
-          v-for="(heading, index) in headings"
+          v-for="(entry, index) in faq.questions"
           :key="index"
           class="faq-question"
         >
-          <div
-            v-if="heading !== 'world-boss'"
+          <h2
+            v-once
+            v-b-toggle="entry.heading"
+            role="tab"
+            variant="info"
+            @click="handleClick($event)"
           >
-            <h2
-              v-b-toggle="heading"
-              role="tab"
-              variant="info"
-              @click="handleClick($event)"
-            >
-              {{ $t(`faqQuestion${index}`) }}
-            </h2>
-            <b-collapse
-              :id="heading"
-              :visible="isVisible(heading)"
-              accordion="faq"
-              role="tabpanel"
-            >
-              <div
-                v-markdown="$t(`webFaqAnswer${index}`, replacements)"
-                class="card-body"
-              ></div>
-            </b-collapse>
-          </div>
+            {{ entry.question }}
+          </h2>
+          <b-collapse
+            :id="entry.heading"
+            :visible="isVisible(entry.heading)"
+            accordion="faq"
+            role="tabpanel"
+          >
+            <div
+              v-once
+              v-markdown="entry.web"
+              class="card-body"
+            ></div>
+          </b-collapse>
         </div>
         <hr>
-        <p v-markdown="$t('webFaqStillNeedHelp')"></p>
+        <p
+          v-once
+          v-markdown="stillNeedHelp"
+        ></p>
       </div>
     </div>
   </div>
@@ -46,7 +50,7 @@
 
 <style lang='scss' scoped>
   .card-body {
-      margin-bottom: 1em;
+    margin-bottom: 1em;
   }
 
   .faq-question h2 {
@@ -74,53 +78,34 @@
 </style>
 
 <script>
-// @TODO:  env.EMAILS.TECH_ASSISTANCE_EMAIL
 import markdownDirective from '@/directives/markdown';
 
-const TECH_ASSISTANCE_EMAIL = 'admin@habitica.com';
-
 export default {
   directives: {
     markdown: markdownDirective,
   },
   data () {
-    const headings = [
-      'overview',
-      'set-up-tasks',
-      'sample-tasks',
-      'task-color',
-      'health',
-      'party-with-friends',
-      'pets-mounts',
-      'character-classes',
-      'blue-mana-bar',
-      'monsters-quests',
-      'gems',
-      'bugs-features',
-      'world-boss',
-      'group-plans',
-    ];
-
-    const hash = window.location.hash.replace('#', '');
-
     return {
-      headings,
-      replacements: {
-        techAssistanceEmail: TECH_ASSISTANCE_EMAIL,
-        wikiTechAssistanceEmail: `mailto:${TECH_ASSISTANCE_EMAIL}`,
-      },
-      visible: hash && headings.includes(hash) ? hash : null,
+      faq: {},
+      headings: [],
+      stillNeedHelp: '',
     };
   },
-  mounted () {
+  async mounted () {
     this.$store.dispatch('common:setTitle', {
       section: this.$t('help'),
       subSection: this.$t('faq'),
     });
+    this.faq = await this.$store.dispatch('faq:getFAQ');
+    for (const entry of this.faq.questions) {
+      this.headings.push(entry.heading);
+    }
+    this.stillNeedHelp = this.faq.stillNeedHelp.web;
   },
   methods: {
     isVisible (heading) {
-      return this.visible && this.visible === heading;
+      const hash = window.location.hash.replace('#', '');
+      return hash && this.headings.includes(hash) && hash === heading;
     },
     handleClick (e) {
       if (!e) return;
diff --git a/website/client/src/store/actions/faq.js b/website/client/src/store/actions/faq.js
new file mode 100644
index 0000000000..80420774ea
--- /dev/null
+++ b/website/client/src/store/actions/faq.js
@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+export async function getFAQ () {
+  const url = '/api/v4/faq?platform=web';
+  const response = await axios.get(url);
+  return response.data.data;
+}
diff --git a/website/client/src/store/actions/index.js b/website/client/src/store/actions/index.js
index adc7a38fb2..f514eec99a 100644
--- a/website/client/src/store/actions/index.js
+++ b/website/client/src/store/actions/index.js
@@ -18,6 +18,7 @@ import * as snackbars from './snackbars';
 import * as worldState from './worldState';
 import * as news from './news';
 import * as analytics from './analytics';
+import * as faq from './faq';
 
 // Actions should be named as 'actionName' and can be accessed as 'namespace:actionName'
 // Example: fetch in user.js -> 'user:fetch'
@@ -41,6 +42,7 @@ const actions = flattenAndNamespace({
   worldState,
   news,
   analytics,
+  faq,
 });
 
 export default actions;
diff --git a/website/common/locales/en/faq.json b/website/common/locales/en/faq.json
index a91851b6c3..3e53eb7327 100644
--- a/website/common/locales/en/faq.json
+++ b/website/common/locales/en/faq.json
@@ -67,6 +67,8 @@
   "webFaqAnswer12": "World Bosses are special monsters that appear in the Tavern. All active users are automatically battling the Boss, and their tasks and Skills will damage the Boss as usual. You can also be in a normal Quest at the same time. Your tasks and Skills will count towards both the World Boss and the Boss/Collection Quest in your party. A World Boss will never hurt you or your account in any way. Instead, it has a Rage Bar that fills when users skip Dailies. If its Rage bar fills, it will attack one of the Non-Player Characters around the site and their image will change. You can read more about [past World Bosses](https://habitica.fandom.com/wiki/World_Bosses) on the wiki.",
 
   "faqQuestion13": "What is a Group Plan?",
+  "iosFaqAnswer13": "## How do Group Plans work?\n\nA [Group Plan](/group-plans) gives your Party or Guild access to a shared task board that’s similar to your personal task board! It’s a shared Habitica experience where tasks can be created and checked off by anyone in the group.\n\nThere are also features available like member roles, status view, and task assigning that give you a more controlled experience. [Visit our wiki](https://habitica.fandom.com/wiki/Group_Plans) to learn more about our Group Plans’ features!\n\n## Who benefits from a Group Plan?\n\nGroup Plans work best when you have a small team of people who want to collaborate together. We recommend 2-5 members.\n\nGroup Plans are great for families, whether it’s a parent and child or you and a partner. Shared goals, chores, or responsibilities are easy to keep track of on one board.\n\nGroup Plans can also be useful for teams of colleagues that have shared goals, or managers that want to introduce their employees to gamification.\n\n## Quick tips for using Groups\n\nHere are some quick tips to get you started with your new Group. We’ll provide more details in the following sections:\n\n* Make a member a manager to give them the ability to create and edit tasks\n* Leave tasks unassigned if anyone can complete it and it only needs done once\n* Assign a task to one person to make sure no one else can complete their task\n* Assign a task to multiple people if they all need to complete it\n* Toggle the ability to display shared tasks on your personal board to not miss anything\n* You get rewarded for the tasks you complete, even multi-assigned\n* Task completion rewards aren’t shared or split between Team members\n* Use task color on the team board to judge the average completion rate of tasks\n* Regularly review the tasks on your Team Board to make sure they are still relevant\n* Missing a Daily won’t damage you or your team, but the task will degrade in color\n\n## How can others in the group create tasks?\n\nOnly the group leader and managers can create tasks. If you’d like a group member to be able to create tasks, then you should promote them to be a manager by going to the Group Information tab, viewing the member list, and clicking the dot icon by their name.\n\n## How does assigning a task work?\n\nGroup Plans give you the unique ability to assign tasks to other group members. Assigning a task is great for delegating. If you assign a task to someone, then other members are prevented from completing it.\n\nYou can also assign a task to multiple people if it needs to be completed by more than one member. For example, if everyone has to brush their teeth, create a task and assign it to each group member. They will all be able to check it off and get their individual rewards for doing so. The main task will show as complete once everyone checks it off.\n\n## How do unassigned tasks work?\n\nUnassigned tasks can be completed by anyone in the group, so leave a task unassigned to allow any member to complete it. For example, taking out the trash. Whoever takes out the trash can check off the unassigned task and it will show as completed for everyone.\n\n## How does the synchronized day reset work?\n\nShared tasks will reset at the same time for everyone to keep the shared task board in sync. This time is visible on the shared task board and is determined by the group leader’s day start time. Because shared tasks reset automatically, you will not get a chance to complete yesterday’s uncompleted shared Dailies when you check in the next morning.\n\nShared Dailies will not do damage if they are missed, however they will degrade in color to help visualize progress. We don’t want the shared experience to be a negative one!\n\n## How do I use my Group on the mobile apps?\n\nWhile the mobile apps don’t fully support all Group Plans functionality yet, you can still complete shared tasks from the iOS and Android app by copying the tasks onto your personal task board. You can switch this preference on from Settings in the mobile apps or from the group task board on the browser version. Now open and assigned shared tasks will display on your personal task board across all platforms.\n\n## What’s the difference between a Group’s shared tasks and Challenges?\n\nGroup Plan shared task boards are more dynamic than Challenges, in that they can constantly be updated and interacted with. Challenges are great if you have one set of tasks to send out to many people.\n\nGroup Plans are also a paid feature, while Challenges are available free to everyone.\n\nYou cannot assign specific tasks in Challenges, and Challenges do not have a shared day reset. In general, Challenges offer less control and direct interaction.",
+  "androidFaqAnswer13": "## How do Group Plans work?\n\nA [Group Plan](/group-plans) gives your Party or Guild access to a shared task board that’s similar to your personal task board! It’s a shared Habitica experience where tasks can be created and checked off by anyone in the group.\n\nThere are also features available like member roles, status view, and task assigning that give you a more controlled experience. [Visit our wiki](https://habitica.fandom.com/wiki/Group_Plans) to learn more about our Group Plans’ features!\n\n## Who benefits from a Group Plan?\n\nGroup Plans work best when you have a small team of people who want to collaborate together. We recommend 2-5 members.\n\nGroup Plans are great for families, whether it’s a parent and child or you and a partner. Shared goals, chores, or responsibilities are easy to keep track of on one board.\n\nGroup Plans can also be useful for teams of colleagues that have shared goals, or managers that want to introduce their employees to gamification.\n\n## Quick tips for using Groups\n\nHere are some quick tips to get you started with your new Group. We’ll provide more details in the following sections:\n\n* Make a member a manager to give them the ability to create and edit tasks\n* Leave tasks unassigned if anyone can complete it and it only needs done once\n* Assign a task to one person to make sure no one else can complete their task\n* Assign a task to multiple people if they all need to complete it\n* Toggle the ability to display shared tasks on your personal board to not miss anything\n* You get rewarded for the tasks you complete, even multi-assigned\n* Task completion rewards aren’t shared or split between Team members\n* Use task color on the team board to judge the average completion rate of tasks\n* Regularly review the tasks on your Team Board to make sure they are still relevant\n* Missing a Daily won’t damage you or your team, but the task will degrade in color\n\n## How can others in the group create tasks?\n\nOnly the group leader and managers can create tasks. If you’d like a group member to be able to create tasks, then you should promote them to be a manager by going to the Group Information tab, viewing the member list, and clicking the dot icon by their name.\n\n## How does assigning a task work?\n\nGroup Plans give you the unique ability to assign tasks to other group members. Assigning a task is great for delegating. If you assign a task to someone, then other members are prevented from completing it.\n\nYou can also assign a task to multiple people if it needs to be completed by more than one member. For example, if everyone has to brush their teeth, create a task and assign it to each group member. They will all be able to check it off and get their individual rewards for doing so. The main task will show as complete once everyone checks it off.\n\n## How do unassigned tasks work?\n\nUnassigned tasks can be completed by anyone in the group, so leave a task unassigned to allow any member to complete it. For example, taking out the trash. Whoever takes out the trash can check off the unassigned task and it will show as completed for everyone.\n\n## How does the synchronized day reset work?\n\nShared tasks will reset at the same time for everyone to keep the shared task board in sync. This time is visible on the shared task board and is determined by the group leader’s day start time. Because shared tasks reset automatically, you will not get a chance to complete yesterday’s uncompleted shared Dailies when you check in the next morning.\n\nShared Dailies will not do damage if they are missed, however they will degrade in color to help visualize progress. We don’t want the shared experience to be a negative one!\n\n## How do I use my Group on the mobile apps?\n\nWhile the mobile apps don’t fully support all Group Plans functionality yet, you can still complete shared tasks from the iOS and Android app by copying the tasks onto your personal task board. You can switch this preference on from Settings in the mobile apps or from the group task board on the browser version. Now open and assigned shared tasks will display on your personal task board across all platforms.\n\n## What’s the difference between a Group’s shared tasks and Challenges?\n\nGroup Plan shared task boards are more dynamic than Challenges, in that they can constantly be updated and interacted with. Challenges are great if you have one set of tasks to send out to many people.\n\nGroup Plans are also a paid feature, while Challenges are available free to everyone.\n\nYou cannot assign specific tasks in Challenges, and Challenges do not have a shared day reset. In general, Challenges offer less control and direct interaction.",
   "webFaqAnswer13": "## How do Group Plans work?\n\nA [Group Plan](/group-plans) gives your Party or Guild access to a shared task board that’s similar to your personal task board! It’s a shared Habitica experience where tasks can be created and checked off by anyone in the group.\n\nThere are also features available like member roles, status view, and task assigning that give you a more controlled experience. [Visit our wiki](https://habitica.fandom.com/wiki/Group_Plans) to learn more about our Group Plans’ features!\n\n## Who benefits from a Group Plan?\n\nGroup Plans work best when you have a small team of people who want to collaborate together. We recommend 2-5 members.\n\nGroup Plans are great for families, whether it’s a parent and child or you and a partner. Shared goals, chores, or responsibilities are easy to keep track of on one board.\n\nGroup Plans can also be useful for teams of colleagues that have shared goals, or managers that want to introduce their employees to gamification.\n\n## Quick tips for using Groups\n\nHere are some quick tips to get you started with your new Group. We’ll provide more details in the following sections:\n\n* Make a member a manager to give them the ability to create and edit tasks\n* Leave tasks unassigned if anyone can complete it and it only needs done once\n* Assign a task to one person to make sure no one else can complete their task\n* Assign a task to multiple people if they all need to complete it\n* Toggle the ability to display shared tasks on your personal board to not miss anything\n* You get rewarded for the tasks you complete, even multi-assigned\n* Task completion rewards aren’t shared or split between Team members\n* Use task color on the team board to judge the average completion rate of tasks\n* Regularly review the tasks on your Team Board to make sure they are still relevant\n* Missing a Daily won’t damage you or your team, but the task will degrade in color\n\n## How can others in the group create tasks?\n\nOnly the group leader and managers can create tasks. If you’d like a group member to be able to create tasks, then you should promote them to be a manager by going to the Group Information tab, viewing the member list, and clicking the dot icon by their name.\n\n## How does assigning a task work?\n\nGroup Plans give you the unique ability to assign tasks to other group members. Assigning a task is great for delegating. If you assign a task to someone, then other members are prevented from completing it.\n\nYou can also assign a task to multiple people if it needs to be completed by more than one member. For example, if everyone has to brush their teeth, create a task and assign it to each group member. They will all be able to check it off and get their individual rewards for doing so. The main task will show as complete once everyone checks it off.\n\n## How do unassigned tasks work?\n\nUnassigned tasks can be completed by anyone in the group, so leave a task unassigned to allow any member to complete it. For example, taking out the trash. Whoever takes out the trash can check off the unassigned task and it will show as completed for everyone.\n\n## How does the synchronized day reset work?\n\nShared tasks will reset at the same time for everyone to keep the shared task board in sync. This time is visible on the shared task board and is determined by the group leader’s day start time. Because shared tasks reset automatically, you will not get a chance to complete yesterday’s uncompleted shared Dailies when you check in the next morning.\n\nShared Dailies will not do damage if they are missed, however they will degrade in color to help visualize progress. We don’t want the shared experience to be a negative one!\n\n## How do I use my Group on the mobile apps?\n\nWhile the mobile apps don’t fully support all Group Plans functionality yet, you can still complete shared tasks from the iOS and Android app by copying the tasks onto your personal task board. You can switch this preference on from Settings in the mobile apps or from the group task board on the browser version. Now open and assigned shared tasks will display on your personal task board across all platforms.\n\n## What’s the difference between a Group’s shared tasks and Challenges?\n\nGroup Plan shared task boards are more dynamic than Challenges, in that they can constantly be updated and interacted with. Challenges are great if you have one set of tasks to send out to many people.\n\nGroup Plans are also a paid feature, while Challenges are available free to everyone.\n\nYou cannot assign specific tasks in Challenges, and Challenges do not have a shared day reset. In general, Challenges offer less control and direct interaction.",
 
   "iosFaqStillNeedHelp": "If you have a question that isn't on this list or on the [Wiki FAQ](https://habitica.fandom.com/wiki/FAQ), come ask in the Tavern chat under Menu > Tavern! We're happy to help.",
diff --git a/website/common/script/content/faq.js b/website/common/script/content/faq.js
index 6b640390bc..10b87a4cbe 100644
--- a/website/common/script/content/faq.js
+++ b/website/common/script/content/faq.js
@@ -1,6 +1,60 @@
 import t from './translation';
 
-const NUMBER_OF_QUESTIONS = 12;
+const questionList = [
+  {
+    heading: 'overview',
+    translationIndex: 0,
+  },
+  {
+    heading: 'set-up-tasks',
+    translationIndex: 1,
+  },
+  {
+    heading: 'sample-tasks',
+    translationIndex: 2,
+  },
+  {
+    heading: 'task-color',
+    translationIndex: 3,
+  },
+  {
+    heading: 'health',
+    translationIndex: 4,
+  },
+  {
+    heading: 'party-with-friends',
+    translationIndex: 5,
+  },
+  {
+    heading: 'pets-mounts',
+    translationIndex: 6,
+  },
+  {
+    heading: 'character-classes',
+    translationIndex: 7,
+  },
+  {
+    heading: 'blue-mana-bar',
+    translationIndex: 8,
+  },
+  {
+    heading: 'monsters-quests',
+    translationIndex: 9,
+  },
+  {
+    heading: 'gems',
+    translationIndex: 10,
+  },
+  {
+    heading: 'bugs-features',
+    translationIndex: 11,
+  },
+  {
+    heading: 'group-plans',
+    translationIndex: 13,
+    excludedPlatforms: ['android', 'ios'],
+  },
+];
 
 const faq = {
   questions: [],
@@ -10,12 +64,14 @@ const faq = {
   },
 };
 
-for (let i = 0; i <= NUMBER_OF_QUESTIONS; i += 1) {
+questionList.forEach(listEntry => {
   const question = {
-    question: t(`faqQuestion${i}`),
-    ios: t(`iosFaqAnswer${i}`),
-    android: t(`androidFaqAnswer${i}`),
-    web: t(`webFaqAnswer${i}`, {
+    exclusions: listEntry.excludedPlatforms || [],
+    heading: listEntry.heading,
+    question: t(`faqQuestion${listEntry.translationIndex}`),
+    android: t(`androidFaqAnswer${listEntry.translationIndex}`),
+    ios: t(`iosFaqAnswer${listEntry.translationIndex}`),
+    web: t(`webFaqAnswer${listEntry.translationIndex}`, {
       //  TODO: Need to pull these values from nconf
       techAssistanceEmail: 'admin@habitica.com',
       wikiTechAssistanceEmail: 'mailto:admin@habitica.com',
@@ -23,6 +79,6 @@ for (let i = 0; i <= NUMBER_OF_QUESTIONS; i += 1) {
   };
 
   faq.questions.push(question);
-}
+});
 
 export default faq;
diff --git a/website/server/controllers/api-v4/faq.js b/website/server/controllers/api-v4/faq.js
index 6e791c8395..b46c3ee5a4 100644
--- a/website/server/controllers/api-v4/faq.js
+++ b/website/server/controllers/api-v4/faq.js
@@ -22,6 +22,7 @@ function _deleteProperties (obj, keysToDelete, platform) {
 
 function _deleteOtherPlatformsAnswers (faqObject, platform) {
   const faqCopy = _.cloneDeep(faqObject);
+  _.remove(faqCopy.questions, question => question.exclusions.indexOf(platform) !== -1);
   const keysToDelete = _.without(['web', 'ios', 'android'], platform);
 
   _deleteProperties(faqCopy.stillNeedHelp, keysToDelete, platform);