Guided tour

[JadeMaveric]

This addresses the issue laid out in #111
React-Joyride is used to generate the tour.

There's 5 stages in the tour: Title, Description, AvailableTimes controls, AvailableTimes calendar and the submit button.

A simple localStorage variable is used to detect if the user has already visited the page. (The poll page is double loading - due to some preexisting code. It's noticeable since the popup reloads along with the page)

There's also a help button, so that users can trigger the tour manually. And I matched the color scheme to the res of the site. (This one line may need to be refactored as part of #56)

I couldn't find any design docs, but I've tried to use the same coding style that was already present. Typescript typings et all (thankfully, joyride provides those)

By default the tour scrolls to the relevant elements, this causes a minor disturbance. The scrolling can be disabled, but a better fix is to adjust the height of the page to the viewport.

The code doesn't affect any existing modules, but I still tested it against a production build. Everything looks fine.

[anandbaburajan]

Thank you @JadeMaveric! :D @VipinVIP can you check out the tour and let us know what you think? Thanks!

[VipinVIP]

Very good work. Everything looks neat, and thankyou for that extra effort to find and use the matching colour scheme. 😃

Will merge right after i get an OK from @anandbaburajan

[VipinVIP]

The scrolling can be disabled, but a better fix is to adjust the height of the page to the viewport.

Yep. I guess hat viewport issue can also be considered in #62

[JadeMaveric]

Thanks! You guys are really supportive, pleasure working with you :D

[anandbaburajan]

I checked it out, it's really nice, thanks! Some comments: please lint your code and try to fix those warnings/errors. Most of them are trivial and I think Prettier would help. You can also setup auto linting in vscode. Btw, we'll soon have a ESLint checker, thanks to @aysp-99. Also, @anaswaratrajan can you take a look and check if it would be good to use Redux here? Thanks!

[JadeMaveric]

Alright, I'll go through them and push a commit. I could have sworn I setup auto linting 🙆🏼‍♂️

[VipinVIP]

All the linting errors have been solved and its good to go. 😇

[anandbaburajan]

@JadeMaveric cool! @anaswaratrajan will soon let us know if using Redux here would be a good idea.

[anandbaburajan]

All the linting errors have been solved and its good to go.

@JadeMaveric can rebase and force-push to see the ESLint checker in action here, if he wishes.

[JadeMaveric]

Am I missing something? I don't see any gh action in action

[anandbaburajan]

Am I missing something? I don't see any gh action in action

Haha, my bad. #109 is still WIP.

[anandbaburajan]

Hey @JadeMaveric, we would be happy if you could check our texts at Gitter. We've an upcoming meet!

[anastr0]

@anaswaratrajan can you take a look and check if it would be good to use Redux here?

Using the store might be an overkill since the flag is required in only 1 file. No need of global state.

@JadeMaveric Thanks! We really needed this. Looks good. :D
And sorry for the late comment.

[anandbaburajan]

Cool, merging! Thanks!