FAQs

UI/package.json

@@ -18,6 +18,7 @@
     "moment": "^2.29.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-faq-component": "^1.3.1",
     "react-player": "^2.8.2",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

UI/src/forms/FAQForm.js

@@ -0,0 +1,125 @@
+import React, { useState, Text, useEffect, Component } from 'react';
+import LandingForm from './LandingForm';
+import Faq from 'react-faq-component';
+import { Link } from 'react-router-dom';
+import { Redirect } from 'react-router';
+
+const data = {
+    title: "Badge Related Questions",
+    rows: [
+      {
+        title: "How do I apply for a minor badge?",
+        content: 
+            "Under <b> Badges </b> tab, select the minor badge then click the <b>Search </b> icon on the right side. " 
+            + "At the bottom, the <b> Request Badge </b> button appears."
+      },
+      {
+        title: "How do I earn a major badge?",
+        content: "You must complete the prerequisite minor badges to earn the major badges. "
+        + "It is no longer required to manually request for a major badge. "
+        + "Major badges will be automatically added to your <b> My Backpack </b> once the validation for minor badges  is done."
+      },
+      {
+        title: "How do I earn a master badge?",
+        content: "You must complete the prerequisite major badges to earn the master badge. "
+        + "It is no longer required to manually request for a master badge. "
+        + "Master badges will be automatically added to your <b> My Backpack </b> once the validation for major badges is done. "
+      },
+      {
+        title: "How do I become an AI Mentor?",
+        content: "There are three main criteria. (1) You achieved the the master badge. (2) Mentored a minimum of 2 Guilds, and (3) Reviewed a minimum of 25 applied badge evidence"
+      }
+    ]
+  }
+
+  const data2 = {
+    title: "App Related Questions",
+    rows: [
+      {
+        title: "Where do I view my earned badges?",
+        content: "You can view all of your earned and ongoing badges in <b> My Backpack </b> tab."
+      },
+      {
+        title: "How do I export my badge to LinkedIn?",
+        content: "Under <b> My Backpack </b>, click on the badge you wish to share. "
+        + "You will see the details and a <b> LinkedIn </b> icon. Click on it and it shall redirect you to add the badge in your LinkedIn account."
+      },
+      {
+        title: "How do I resubmit a badge application when I am done with my rework?",
+        content: "Under <b> My Backpack </b>, you will see a tab dedicated for <b> Ongoing Badges </b>. "
+        + "Click on the <b>Resubmit </b> button besides the badge. It shall notify your reviewer that your badge is for review."
+      },
+      {
+        title: "How do I know if my badge has been approved?",
+        content: "You will be notified via email once the reviewer has approved your badge application."
+      },
+      {
+        title: "I have other questions not listed here. How do I reach technical support?",
+        content: "Click the <b> Support </b> tab at the right navigation bar to send us an email at <b>[email protected]</b>" 
+      }
+    ]
+  }
+
+
+const FAQForm = (props) => {
+
+
+
+    return(
+        // //css here
+        // // <h1> Frequently Asked Questions</h1>
+        // <dt>
+        //     <button aria-controls="answerId" aria-expanded="true/false" onclick="toggle"> Question text </button>
+        // </dt>
+        <div>
+            <Faq 
+                data={data}
+                styles={{
+                    // titleTextColor: "blue",
+                    // rowTitleColor: "black",
+                    // rowContentColor: "black",
+                    bgColor: "white",
+                    titleTextColor: "#3f51b5",
+                    // rowTitleColor: "#78789a",
+                    rowTitleTextSize: 'large',
+                    rowContentColor: "#48484a",
+                    rowContentTextSize: '16px',
+                    rowContentPaddingTop: '10px',
+                    rowContentPaddingBottom: '10px',
+                    rowContentPaddingLeft: '50px',
+                    rowContentPaddingRight: '150px',
+                    arrowColor: "black",
+                }}
+
+            />
+            <div>
+            <br />
+            <Faq data={data2}
+                styles={{
+                    // titleTextColor: "blue",
+                    // rowTitleColor: "black",
+                    // rowContentColor: "black",
+                    bgColor: "white",
+                    titleTextColor: "#3f51b5",
+                    // rowTitleColor: "#78789a",
+                    rowTitleTextSize: 'large',
+                    rowContentColor: "#48484a",
+                    rowContentTextSize: '16px',
+                    rowContentPaddingTop: '10px',
+                    rowContentPaddingBottom: '10px',
+                    rowContentPaddingLeft: '50px',
+                    rowContentPaddingRight: '150px',
+                    arrowColor: "black",
+                    titlePaddingTop: '20px',
+                }}
+            />
+        </div>
+        </div>
+
+
+    )
+
+
+
+}
+export default FAQForm;

UI/src/forms/LandingForm.js

@@ -47,6 +47,7 @@ import getJIRAResponse from '../API/AddJIRARequestAPI';
 import Button from '@material-ui/core/Button';
 import ExitToAppIcon from '@material-ui/icons/ExitToApp';
 import { Redirect } from 'react-router';
+import FAQForm from './FAQForm'
 
 const LandingForm = (props)=>
 {
@@ -90,6 +91,11 @@ const LandingForm = (props)=>
       setClickedItem('ViewProfileForm');
     }
 
+    const handleFAQButtonClick =()=> {
+      setClickedItem('FAQForm');
+    }
+
+
     const handleLogout =()=>{      
       sessionStorage.removeItem("Token");
       sessionStorage.removeItem("Email");
@@ -155,14 +161,15 @@ const LandingForm = (props)=>
             </ListItemIcon>
             <ListItemText primary="Support"/>
           </ListItem>
-          <ListItem button>
+
+          <ListItem button id="FAQ_button" onClick={handleFAQButtonClick}>
             <ListItemIcon>
             <BootstrapTooltip title ="FAQ"><LayersIcon /></BootstrapTooltip>
             </ListItemIcon>
             <ListItemText primary="FAQ" />
           </ListItem>
+
           <ListItem button id="LandingForm_updateProfile" onClick={handleUpdateProfileButtonClick}>
-
             <ListItemIcon>
             <BootstrapTooltip title ="Profile"><PersonIcon /></BootstrapTooltip>
             </ListItemIcon>
@@ -395,14 +402,15 @@ if (clickedItem=='BacktoLoginForm'){
                (clickedItem=='ViewAssertionsForm'?(<ViewAssertionsForm email={email} userType={userType} userID={userID}/>):
                (clickedItem=='ViewBadgeForm'?(<ViewBadgeForm userType={userType} userID={userID}/>):
                (clickedItem=='CreateBadgeForm'? (<CreateBadgeForm />):
+               (clickedItem=='FAQForm'? (<FAQForm />):
                (clickedItem=='MyBackpackForm'? (<MyBackpackForm userID={userID}/>):
                (clickedItem=='ViewProfileForm'? (<ViewProfileForm email={email} userID={userID} />):              
                (<div>
                  <ReactPlayer url={logo} data-testid="DashboardForm_Logo" playing loop />
                  {/* <video preload='auto' autoplay muted data-testid='DashboardForm_Logo' className={classes.images}>
                    <source src={logo} type="video/mp4"></source>
                    </video> */}
-                 </div>))))))}
+                 </div>)))))))}
               </Paper>
             </Grid>