Merge pull request #239 from sef-global/development

ScholarX Release 1.4
sef-global · Aug 8, 2021 · ddc9f94 · ddc9f94
2 parents 9bbbb58 + 32eab2c
commit ddc9f94
Show file tree

Hide file tree

Showing 11 changed files with 159 additions and 33 deletions.
diff --git a/src/scenes/Home/components/ActivePrograms/index.tsx b/src/scenes/Home/components/ActivePrograms/index.tsx
@@ -179,20 +179,23 @@ function ActivePrograms() {
                         )}
                       {(program.state === 'MENTOR_CONFIRMATION' ||
                         program.state === 'ONGOING') &&
-                      !isUserAdmin &&
-                      user != null &&
-                      !mentoringPrograms.length ? (
-                        <Button
-                          type="primary"
-                          onClick={() =>
-                            history.push(
-                              `/program/${program.id}/mentor/confirmation`
-                            )
-                          }
-                        >
-                          My mentor
-                        </Button>
-                      ) : null}
+                        !isUserAdmin &&
+                        user != null &&
+                        !mentoringPrograms.some(
+                          (mentoringProgram) =>
+                            mentoringProgram.id == program.id
+                        ) && (
+                          <Button
+                            type="primary"
+                            onClick={() =>
+                              history.push(
+                                `/program/${program.id}/mentor/confirmation`
+                              )
+                            }
+                          >
+                            My mentor
+                          </Button>
+                        )}
                     </Col>
                   </Row>
                   {program.state === 'MENTOR_SELECTION' && !isUserAdmin && (
@@ -207,14 +210,20 @@ function ActivePrograms() {
                   )}
                   {program.state === 'MENTOR_CONFIRMATION' &&
                   !isUserAdmin &&
-                  (mentoringPrograms.length || user === null) ? (
+                  (user === null ||
+                    mentoringPrograms.some(
+                      (mentoringProgram) => mentoringProgram.id == program.id
+                    )) ? (
                     <Tag className={styles.tag} color="green">
                       Mentor Confirmation Period
                     </Tag>
                   ) : null}
                   {program.state === 'ONGOING' &&
                   !isUserAdmin &&
-                  (mentoringPrograms.length || user === null) ? (
+                  (mentoringPrograms.some(
+                    (mentoringProgram) => mentoringProgram.id == program.id
+                  ) ||
+                    user === null) ? (
                     <Tag className={styles.tag} color="green">
                       Ongoing
                     </Tag>

diff --git a/src/scenes/Home/components/AddProgram/index.tsx b/src/scenes/Home/components/AddProgram/index.tsx
@@ -86,27 +86,46 @@ function AddProgram() {
             onFinish={addProgram}
             form={form}
           >
-            <Form.Item name="title" label="Title" rules={[{ required: true }]}>
+            <Form.Item
+              name="title"
+              label="Title"
+              rules={[
+                {
+                  required: true,
+                  message: 'Please provide a title for the program',
+                },
+              ]}
+            >
               <Input />
             </Form.Item>
             <Form.Item
               name="heading"
               label="Heading"
-              rules={[{ required: true }]}
+              rules={[{ required: true, message: 'Please provide a heading' }]}
             >
               <Input />
             </Form.Item>
             <Form.Item
               name="imgURL"
               label="Image URL"
-              rules={[{ required: true }]}
+              rules={[
+                {
+                  required: true,
+                  message: 'Please add a image URL for the program card',
+                },
+              ]}
             >
               <Input />
             </Form.Item>
             <Form.Item
               name="landingURL"
               label="Landing Page URL"
-              rules={[{ required: true }]}
+              rules={[
+                {
+                  required: true,
+                  message: 'Please add the link for the static page',
+                },
+              ]}
             >
               <Input />
             </Form.Item>

diff --git a/src/scenes/Home/components/HelpButton/index.tsx b/src/scenes/Home/components/HelpButton/index.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { Button, Popover, Typography } from 'antd';
+
+import styles from './styles.css';
+
+const { Paragraph, Title } = Typography;
+const content = (
+  <div>
+    <Title level={4}>Mentor</Title>
+    <Paragraph>
+      <ul>
+        <li>
+          <a
+            href="https://docs.google.com/document/d/1ZJeKxdAvHcPanXRoGP5rT-vkOTEfsYhrnqr1QVglS58/edit?usp=sharing"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Mentor Guide
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://drive.google.com/file/d/13b0xg3HdZeQohefYMY9gP8_r_G11pGFA/view?usp=sharing"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Mentor Video Guide
+          </a>
+        </li>
+      </ul>
+    </Paragraph>
+    <Title level={4}>Mentee</Title>
+    <Paragraph>
+      <ul>
+        <li>
+          <a
+            href="https://drive.google.com/file/d/1vnW1bhNzETtPtiGTsphzBT2GQ6K0LuX9/view"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Mentee Video Guide
+          </a>
+        </li>
+      </ul>
+    </Paragraph>
+  </div>
+);
+
+function HelpButton() {
+  return (
+    <div className={styles.helpPosition}>
+      <Popover placement="leftBottom" content={content} trigger="click">
+        <Button
+          type="primary"
+          shape="round"
+          size="large"
+          icon={<QuestionCircleOutlined />}
+        >
+          Watch Tutorial
+        </Button>
+      </Popover>
+    </div>
+  );
+}
+
+export default HelpButton;
diff --git a/src/scenes/Home/components/HelpButton/styles.css b/src/scenes/Home/components/HelpButton/styles.css
@@ -0,0 +1,9 @@
+.helpPosition {
+    position: fixed;
+    right: 30px;
+    bottom: 100px;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+}
diff --git a/src/scenes/Home/index.tsx b/src/scenes/Home/index.tsx
@@ -8,6 +8,7 @@ import { trackPageWithGoogleAnalytics } from '../../util/google-analytics';
 import ActivePrograms from './components/ActivePrograms';
 import CompletedPrograms from './components/CompletedPrograms';
 import Footer from './components/Footer';
+import HelpButton from './components/HelpButton';
 import MenteePrograms from './components/MenteePrograms';
 import MentorPrograms from './components/MentorPrograms';
 import NavigationBar from './components/NavigationBar';
@@ -82,6 +83,7 @@ const Home = () => {
         </Row>
         <div className={styles.push} />
       </div>
+      <HelpButton />
       <div className={styles.footer}>
         <Footer />
       </div>

diff --git a/src/scenes/Home/scenes/EditMentorApplication/index.tsx b/src/scenes/Home/scenes/EditMentorApplication/index.tsx
@@ -19,6 +19,7 @@ import {
 } from '../../../../util/mentor-services';
 import { getProgramDetails } from '../../../../util/program-services';
 import Footer from '../../components/Footer';
+import HelpButton from '../../components/HelpButton';
 import NavigationBar from '../../components/NavigationBar';
 import Result from '../../components/ResultScreen';
 import mainStyles from '../../styles.css';
@@ -126,15 +127,20 @@ function MentorApplication() {
                     {responses.length > 0 &&
                       responses.map(
                         (question: QuestionResponse, index: number) => (
-                          <Row key={question.id.questionId}>
+                          <Row key={index}>
                             <Col span={16} offset={4}>
                               <Title level={4}>
                                 {index + 1}.{question.question.question}
                               </Title>
                               <Form.Item
-                                name={question.id.questionId}
+                                name={question.question.id}
                                 initialValue={question.response}
-                                rules={[{ required: true }]}
+                                rules={[
+                                  {
+                                    required: true,
+                                    message: 'Required',
+                                  },
+                                ]}
                               >
                                 <TextArea rows={5} />
                               </Form.Item>
@@ -165,6 +171,7 @@ function MentorApplication() {
         </Spin>
         <div className={styles.push} />
       </div>
+      <HelpButton />
       <div className={styles.footer}>
         <Footer />
       </div>

diff --git a/src/scenes/Home/scenes/ManageMentees/index.tsx b/src/scenes/Home/scenes/ManageMentees/index.tsx
@@ -19,6 +19,7 @@ import { API_URL } from '../../../../constants';
 import { UserContext } from '../../../../index';
 import { Mentee, Profile, SavedProgram } from '../../../../types';
 import Footer from '../../components/Footer';
+import HelpButton from '../../components/HelpButton';
 import NavigationBar from '../../components/NavigationBar';
 import styles from '../../styles.css';
 import MenteeRow from './components/MenteeRow';
@@ -147,6 +148,7 @@ function ManageMentees() {
           </Row>
         </Spin>
       </div>
+      <HelpButton />
       <Footer />
     </>
   );

diff --git a/src/scenes/Home/scenes/MentorApplication/index.tsx b/src/scenes/Home/scenes/MentorApplication/index.tsx
@@ -19,6 +19,7 @@ import {
   getQuestions,
 } from '../../../../util/program-services';
 import Footer from '../../components/Footer';
+import HelpButton from '../../components/HelpButton';
 import NavigationBar from '../../components/NavigationBar';
 import Result from '../../components/ResultScreen';
 import mainStyles from '../../styles.css';
@@ -116,14 +117,19 @@ function MentorApplication() {
                   >
                     {questions.length > 0 &&
                       questions.map((question: Question, index: number) => (
-                        <Row key={question.id}>
+                        <Row key={index}>
                           <Col span={16} offset={4}>
                             <Title level={4}>
                               {index + 1}.{question.question}
                             </Title>
                             <Form.Item
                               name={question.id}
-                              rules={[{ required: true }]}
+                              rules={[
+                                {
+                                  required: true,
+                                  message: 'Required',
+                                },
+                              ]}
                             >
                               <TextArea rows={5} />
                             </Form.Item>
@@ -153,6 +159,7 @@ function MentorApplication() {
         </Spin>
         <div className={styles.push} />
       </div>
+      <HelpButton />
       <div className={styles.footer}>
         <Footer />
       </div>

diff --git a/src/scenes/Home/scenes/MentorConfirmation/index.tsx b/src/scenes/Home/scenes/MentorConfirmation/index.tsx
@@ -26,6 +26,7 @@ import { API_URL } from '../../../../constants';
 import { UserContext } from '../../../../index';
 import { Mentor, Profile } from '../../../../types';
 import Footer from '../../components/Footer';
+import HelpButton from '../../components/HelpButton';
 import NavigationBar from '../../components/NavigationBar';
 import mainStyles from '../../styles.css';
 import styles from './styles.css';
@@ -257,6 +258,7 @@ function MentorConfirmation() {
           )}
         </Spin>
       </div>
+      <HelpButton />
       <Footer />
     </>
   );

diff --git a/src/scenes/Home/scenes/RequestMentors/index.tsx b/src/scenes/Home/scenes/RequestMentors/index.tsx
@@ -10,6 +10,7 @@ import { API_URL } from '../../../../constants';
 import { UserContext } from '../../../../index';
 import { Profile, SavedProgram } from '../../../../types';
 import Footer from '../../components/Footer';
+import HelpButton from '../../components/HelpButton';
 import NavigationBar from '../../components/NavigationBar';
 import styles from '../../styles.css';
 import AppliedMentors from './components/AppliedMentors';
@@ -102,6 +103,7 @@ function RequestMentors() {
           </div>
         </Col>
       </Row>
+      <HelpButton />
       <Footer />
     </>
   );

diff --git a/src/scenes/Home/scenes/RequestMentors/scenes/MenteeApplication/index.tsx b/src/scenes/Home/scenes/RequestMentors/scenes/MenteeApplication/index.tsx
@@ -167,11 +167,10 @@ function MenteeApplication() {
               {isFormVisible ? (
                 <>
                   <Text className={styles.textPadding}>
-                    Download the template from the link below and make a
-                    document containing your information. Upload the document to
-                    a cloud storage platfrom (Ex: GoogleDrive, iCloud, OneDrive,
-                    etc) and provide a link. Make sure the document is in pdf
-                    and format and it is accessible to anybody with the link.
+                    Make a copy of the document linked below and fill out your
+                    information. Save the google document and provide a link.
+                    Make sure the document is accessible to anybody with the
+                    link.
                   </Text>
                   <Form
                     layout="vertical"
@@ -187,7 +186,7 @@ function MenteeApplication() {
                         href={APPLICATION_TEMPLATE}
                         target="_blank"
                       >
-                        Download Template
+                        Template Document
                       </Button>
                     </Row>
                     <Form.Item
@@ -196,11 +195,11 @@ function MenteeApplication() {
                       rules={[
                         {
                           required: true,
-                          message: 'Please provide a Google Drive link!',
+                          message: 'Please provide a Google Doc link!',
                         },
                       ]}
                     >
-                      <Input placeholder={'Enter the google drive link here'} />
+                      <Input placeholder={'Enter the Google Doc link here'} />
                     </Form.Item>
                     <Row>
                       <Button type="primary" htmlType="submit">