Onboarding v2 - Welcome Message

[soyarsauce]

As a new map user,
I want to see a welcome message the first time I visit,
so I have some guidance on how to get started

Design file: terria-onboarding.sketch in https://drive.google.com/open?id=1ihNj5hr9pXnJxhsP9S9sRqvxntd4RVbz

Invision: https://projects.invisionapp.com/share/VQWC0P9FC3D#/screens/408368058

Other notes from Vic:

Welcome message - I’ve focused new designs on what people see when they load Terria for the first time, making it more about us wanting to help them. So, there is room for discussion about what links we show. It should really offer support from the get go and not just a brief intro

Currently we have a welcome message that can be repurposed for this (<WelcomeMessage />)

The new one is more like:

DoD:

• Unit test written (if applicable)
• Works on mobile (or deliberately disabled for mobile)
• Code/peer reviewed (if didn't pair)
• Relevant docs are updated
• Previewable/deployed to dev (see separation of deployments)
• Previewable/deployed to test (see separation of deployments)
• (If a map-specific ticket) Issue linked to a release ticket

Acceptance Criteria:

• Welcome message is OPT-IN, for the map owner. (e.g. configured at runtime/per terriamap, whether to show the welcome message for the map's users)

• WelcomeMessage.jsx is repurposed into this new design

• message fades in/out on open/close

• message has a video and placeholder thumbnail (reuse old thumbnails/video links until we have the generic one)

• message has (a disabled?) "take the tour" button that does nothing (placeholder for starting non-existent tour)

• message has "I'll need some help" button that opens to help menu

• message has "explore map data" button which opens the data catalog

• message buttons have new relevant icons

• buttons are using the tjs Button.jsx component framework

• modal can be closed with "close message and don't show me this again"

• modal can be closed with "X"

• modal can be closed with escape key

• modal doesn't open when map is embedded

• bit of padding for the invisible box, click outside that will close

• when modal is dismissed, save user preference to never show again regardless of closure method (dismissed from button action or explicit user close action) via WELCOME_MESSAGE_NAME (local key compiled down to welcomeMessagePrompt)

[soyarsauce]

Some other notes, @reginapramesti you'll have to remove the ObserveModelMixin & any other knockout related features of WelcomeMessage.jsx so that it can be used in mobx. Right now it's disabled.

[soyarsauce]

Clarification of video to be used: #4173 (comment)

[soyarsauce]

I've just written message fades in/out on open/close as one of the AC as there aren't any transitions defined in invision, but @vicborgy let me know if you had other ideas, otherwise it'll be a fade.

[soyarsauce]

Finally, mobile idea for you @reginapramesti is just to wrap the components as I've done for DEA in http://de-africa.terria.io/

[vicborgy]

@soyarsauce its cutting off for me at the top so i cant test the fade you're talking about.
Can we force a return after 'data' so we have 2 words on each line?
Also can we try and vertically align in too?

[soyarsauce]

@vicborgy see https://terria.slack.com/files/U5EQGEABB/F010RPZS3FD/trigger-welcome.mov

[soyarsauce]

Hide take a tour for mobile
hide video for mobile
stack buttons for mobile

[soyarsauce]

close forever - same text size as paragraph text

[soyarsauce]

@AnaBelgun to write the copy below "let's get you started"

[AnaBelgun]

Let's get you started!
"Interested in data discovery and exploration?
Dive right in and get started or check the following help guide options."

[soyarsauce]

bit of padding for the invisible box, click outside that will close (30px)

[soyarsauce]

all AC passes except for contended

when modal is dismissed, save user preference to never show again regardless of closure method (dismissed from button action or explicit user close action) via WELCOME_MESSAGE_NAME (local key compiled down to welcomeMessagePrompt)

compromise is having the welcome message opt in at this stage

[soyarsauce]

#4354