diff --git a/.gitignore b/.gitignore
index 4e9bf1cc..3124295c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,3 +25,5 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
+
+.vscode/
diff --git a/package.json b/package.json
index 77cfcdc3..282a669c 100644
--- a/package.json
+++ b/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"
diff --git a/src/components/NoSurvey/index.js b/src/components/NoSurvey/index.js
index b0634af2..7972d0ff 100644
--- a/src/components/NoSurvey/index.js
+++ b/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 (
diff --git a/src/components/UserNav/index.js b/src/components/UserNav/index.js
index c5d653aa..3c568f88 100644
--- a/src/components/UserNav/index.js
+++ b/src/components/UserNav/index.js
@@ -108,7 +108,7 @@ const UserNav = (props) => {
onClick={onClick}
/>
diff --git a/src/containers/Projects/List/index.js b/src/containers/Projects/List/index.js
index 865a69cf..f38b94e9 100644
--- a/src/containers/Projects/List/index.js
+++ b/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 = () => {
), [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 (
-