Add tour for project and no survey

.gitignore

@@ -25,3 +25,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vscode/

package.json

@@ -16,12 +16,14 @@
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
+    "reactour": "^1.18.7",
     "recharts": "^2.1.9",
     "redux": "^4.1.1",
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
     "reselect": "^4.1.5",
     "sass": "^1.49.9",
+    "styled-components": "^4.0.0",
     "web-vitals": "^2.1.4",
     "whatwg-fetch": "^3.6.2",
     "yet-another-abortcontroller-polyfill": "^0.0.4"

src/components/NoSurvey/index.js

@@ -1,7 +1,8 @@
-import {useMemo} from 'react';
+import {useMemo, useState, useCallback} from 'react';
 import {Link, useParams} from 'react-router-dom';
 import {useSelector} from 'react-redux';
 import hoistNonReactStatics from 'hoist-non-react-statics';
+import Tour from 'reactour';
 
 import {BsPlus} from 'react-icons/bs';
 import {BiChevronLeft} from 'react-icons/bi';
@@ -27,6 +28,26 @@ const NoSurveys = () => {
 
     const hasEditAccess = useMemo(() => checkEditAccess(activeProject?.accessLevel), [activeProject]);
 
+    const stepContent =  `Surveys are individual U-NEAT+ assessments, conducted through a questionnaire.
+    Surveys are within projects. To take a survey, simply click on “Take Survey” and go through the questionnaire.
+    Please provide a meaningful name. There will be questions to provide more project information later.
+    Note that responses are saved continuously in your browser cache – you can skip questions or return to a partially
+    completed survey later using the same web browser on the same device. You can find your survey in the bottom-right corner of your screen.`;
+
+
+    const steps = [{
+        'content': stepContent
+    }];
+
+    const [isTourOpen, setIsTourOpen] = useState(
+        !localStorage.getItem('survey-onboarding')
+    );
+
+    const onTourClose = useCallback(() => {
+        localStorage.setItem('survey-onboarding', true);
+        setIsTourOpen(false);
+    }, []);
+
     return (
         <div className={styles.container}>
             <Link to="/projects" className={styles.backLink}>
@@ -37,12 +58,21 @@ const NoSurveys = () => {
                     <img src={noSurveyImage} alt="No Surveys" className={styles.infoImage} />
                     <p className={styles.infoText}><Localize>No surveys found</Localize></p>
                     {hasEditAccess && (
-                        <Button 
-                            className={styles.button} 
-                            onClick={surveyModalsConfig.handleShowDeleteDraft}
-                        >
-                            <BsPlus size={24} className={styles.buttonIcon} /><Localize>Take Survey</Localize>
-                        </Button>
+                        <>
+                            <Button
+                                className={styles.button}
+                                onClick={surveyModalsConfig.handleShowDeleteDraft}
+                            >
+                                <BsPlus size={24} className={styles.buttonIcon} /><Localize>Take Survey</Localize>
+                            </Button>
+                            <Tour
+                                closeWithMask={false}
+                                steps={steps}
+                                isOpen={isTourOpen}
+                                lastStepNextButton={<Button>Done</Button>}
+                                onRequestClose={onTourClose}
+                            />
+                        </>
                     )}
                 </div>
             </main>

src/components/UserNav/index.js

@@ -108,7 +108,7 @@ const UserNav = (props) => {
                     onClick={onClick}
                 />
                 <Dropdown
-                    labelContainerClassName={styles.userAvatar}
+                    labelContainerClassName={cs(styles.userAvatar, 'dropdown-menu')}
                     renderLabel={getInitial}
                     align='right'
                 >

src/containers/Projects/List/index.js

@@ -1,6 +1,8 @@
 import {useState, useCallback, useMemo, useEffect} from 'react';
 import {useHistory} from 'react-router-dom';
 import {BsPlus} from 'react-icons/bs';
+import Tour from 'reactour';
+
 
 import {NeatLoader} from 'components/Loader';
 import Button from 'components/Button';
@@ -13,6 +15,7 @@ import Pagination from '@ra/components/Pagination';
 import SelectInput from '@ra/components/Form/SelectInput';
 import {Localize} from '@ra/components/I18n';
 import {_} from 'services/i18n';
+import cs from '@ra/cs';
 
 import Api from 'services/api';
 import usePromise from '@ra/hooks/usePromise';
@@ -220,9 +223,47 @@ const ProjectList = () => {
         </Button>
     ), [handleShowCreateModal]);
 
+    const [isTourOpen, setIsTourOpen] = useState(
+        !localStorage.getItem('project-onboarding')
+    );
+
+    const onTourClose = useCallback(() => {
+        localStorage.setItem('project-onboarding', true);
+        setIsTourOpen(false);
+    }, []);
+
+    const steps = [
+        {
+            selector: '.project-list-div',
+            content: 'Welcome to Projects. Projects act as a portfolio for NEAT+ surveys in shared programmes or for surveys at the same location over time.'
+        },
+        {
+            selector: '.project-list-div',
+            content: 'You can view your projects here. Projects can be made public, public within your organization, or private.'
+        },
+        {
+            selector: '[label="my_project"]',
+            content: 'Here you can see projects that are created by you or you are added as user of project'
+        },
+        {
+            selector: '[label="organization"]',
+            content: 'Here you can see projects that are public within organization or project where you are admin of project organization'
+        },
+        {
+            selector: '[label="public"]',
+            content: 'Here you can see all other public projects which are not present in My Project and organization tab'
+        },
+        {
+            selector: '.dropdown-menu',
+            content: 'You can join organization by clicking on on your name initial letter present at top right and then clicking Organizations option',
+            position: [0, 0],
+            action: () => {document.getElementsByClassName('dropdown-menu')[0].click();}
+        }
+    ];
+
     return (
-        <div className={styles.container}>
-            <Tabs 
+        <div className={cs(styles.container, 'project-list-div')}>
+            <Tabs
                 activeTab={tab}
                 secondary
                 PreHeaderComponent={renderTitle}
@@ -256,6 +297,13 @@ const ProjectList = () => {
                 onClose={handleHideCreateModal}
                 mode='create'
             />
+            <Tour
+                closeWithMask={false}
+                steps={steps}
+                isOpen={isTourOpen}
+                lastStepNextButton={<Button>Done</Button>}
+                onRequestClose={onTourClose}
+            />
         </div>
     );
 };