Onboarding Component (#84)

* Add <Onboarding/> Component

* Adjust softkey styling

* Add Onboarding utils and onboarding route

* bump cypress version

* Rename the key to prevent confusion with value Boolean

* 🚨 Fix test spec

* working tests skipping onboarding

* Revert "working tests skipping onboarding"

This reverts commit 7aa461b.

* Update code review

* 🚨 update test spec

* don't show the background image for the first onboard image

Co-authored-by: jose pita <[email protected]>

cypress/support/commands.js

@@ -53,5 +53,6 @@ Cypress.Commands.add('clickSettingsButton', () => {
 })
 
 Cypress.Commands.add('navigateToHomePage', () => {
+  localStorage.setItem('has-onboard-before', true)
   cy.visit('http://127.0.0.1:8080')
 })

i18n/en.json

@@ -36,8 +36,20 @@
     "language-setting-message": "Changing the language here will change the language throughout the app. You can also change the language on each article using the article menu.",
     "softkey-ok": "Okay",
     "softkey-read": "Read",
+    "softkey-next": "Next",
+    "softkey-back": "Back",
+    "softkey-skip": "Skip",
+    "softkey-get-started": "Get started",
     "reference-title": "Reference [$1]",
     "offline-message": "No internet connection ",
+    "onboarding-0-title": "The free encyclopedia",
+    "onboarding-0-description": "Wikipedia is a free resource written collaboratively by volunteers from around the world.",
+    "onboarding-1-title": "Access free knowledge",
+    "onboarding-1-description": "Read more than 40 million articles, completely ad-free! Updates and new articles added regularly.",
+    "onboarding-2-title": "Search in over 300 languages",
+    "onboarding-2-description": "Choose your preferred language or languages to search and read in.",
+    "onboarding-3-title": "Learn new facts and trivia",
+    "onboarding-3-description": "Explore the ‘Word of the day,’ view beautiful images and learn new information everyday with Wikipedia!",
     "settings-language": "Language",
     "settings-textsize": "Text size",
     "settings-about-wikipedia": "About Wikipedia",

i18n/qqq.json

@@ -36,8 +36,20 @@
 	"language-setting-message": "Message shown in the popup message in the language settings page",
 	"softkey-ok": "Label of the word \"ok\" shown in the popup message in the language settings page",
 	"softkey-read": "Text of the read option in the softkey. Used to read the selected article in the article preview.\n{{Identical|Read}}",
+	"softkey-next": "Label of the next softkey",
+	"softkey-back": "Label of the back softkey",
+	"softkey-skip": "Label of the skip softkey",
+	"softkey-get-started": "Label of the get started softkey",
 	"reference-title": "Header of the reference preview popup.\n* $1 - Number of the current reference.",
 	"offline-message": "Message to be display at the top of the screen when there is no internet connection.",
+	"onboarding-0-title": "First onboarding title message when the user first time start the application.",
+	"onboarding-0-description": "First onboarding description message when the user first time start the application.",
+	"onboarding-1-title": "Second onboarding title message when the user first time start the application.",
+	"onboarding-1-description": "Second onboarding description message when the user first time start the application.",
+	"onboarding-2-title": "Third onboarding title message when the user first time start the application.",
+	"onboarding-2-description": "Third onboarding description message when the user first time start the application.",
+	"onboarding-3-title": "Forth onboarding title message when the user first time start the application.",
+	"onboarding-3-description": "Forth onboarding description message when the user first time start the application.",
 	"settings-language": "Label of the language item list. Shown in the Settings menu, used in language setting.",
 	"settings-textsize": "Label of the Text size item list. Shown in the Settings menu, used in text size setting.",
 	"settings-about-wikipedia": "Label of the About Wikipedia item list. Shown in the Settings menu, used in showing the information of Wikipedia.",

package.json

@@ -39,7 +39,7 @@
     "babel-loader": "^8.0.6",
     "babel-plugin-module-resolver": "^3.2.0",
     "css-loader": "^3.2.0",
-    "cypress": "3.5.0",
+    "cypress": "3.8.2",
     "eslint": "^6.6.0",
     "eslint-config-standard": "^14.1.0",
     "eslint-config-standard-preact": "^1.1.6",

src/components/Onboarding.js

@@ -0,0 +1,54 @@
+import { h } from 'preact'
+import { useState, useEffect } from 'preact/hooks'
+import { route } from 'preact-router'
+import { useSoftkey, useI18n } from 'hooks'
+import { onboarding } from 'utils'
+
+export const Onboarding = () => {
+  const i18n = useI18n()
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const softkey = useSoftkey('onboarding')
+
+  const exitOnboard = () => {
+    onboarding.markAsDone()
+    route('/')
+  }
+
+  const nextOnboard = () => {
+    setCurrentIndex(currentIndex + 1)
+  }
+
+  const prevOnboard = () => {
+    setCurrentIndex(currentIndex - 1)
+  }
+
+  const getImageBackgroundStyle = index => {
+    // only the first onboard image doesn't have background image
+    return index ? { backgroundImage: `url(/images/onboarding-${index}-background.png)` } : {}
+  }
+
+  const softkeyConfig = [
+    { left: i18n.i18n('softkey-skip'), onKeyLeft: exitOnboard, right: i18n.i18n('softkey-next'), onKeyRight: nextOnboard },
+    { left: i18n.i18n('softkey-back'), onKeyLeft: prevOnboard, right: i18n.i18n('softkey-next'), onKeyRight: nextOnboard },
+    { left: i18n.i18n('softkey-back'), onKeyLeft: prevOnboard, right: i18n.i18n('softkey-next'), onKeyRight: nextOnboard },
+    { left: i18n.i18n('softkey-back'), onKeyLeft: prevOnboard, center: i18n.i18n('softkey-get-started'), onKeyCenter: exitOnboard }
+  ]
+
+  useEffect(() => {
+    softkey.dispatch({ type: 'replace', config: softkeyConfig[currentIndex] })
+  }, [currentIndex])
+
+  return (
+    <div class='onboarding'>
+      <div class='image' style={getImageBackgroundStyle(currentIndex)}>
+        <img src={`/images/onboarding-${currentIndex}.png`} />
+      </div>
+      <div class='title'>
+        {i18n.i18n(`onboarding-${currentIndex}-title`)}
+      </div>
+      <div class='description'>
+        {i18n.i18n(`onboarding-${currentIndex}-description`)}
+      </div>
+    </div>
+  )
+}

src/components/Routes.js

@@ -1,16 +1,26 @@
 import { h } from 'preact'
-import Router from 'preact-router'
+import { Router, route } from 'preact-router'
 import { createHashHistory } from 'history'
-import { Article, Search, Settings, QuickFacts, Language } from 'components'
+import { Article, Search, Settings, QuickFacts, Language, Onboarding } from 'components'
+import { onboarding } from 'utils'
 
-export const Routes = ({ onRouteChange }) => (
-  <Router history={createHashHistory()} onChange={onRouteChange}>
-    <Search path='/' />
-    <Settings path='/settings' />
-    <Article path='/article/:lang/:title/:subtitle?' />
-    <QuickFacts path='/quickfacts/:lang/:title' />
-    <Language path='/language' />
-  </Router>
-)
+export const Routes = ({ onRouteChange }) => {
+  const onChange = ({ url }) => {
+    if (!onboarding.isDone()) {
+      route('/onboarding')
+    }
+    onRouteChange(url)
+  }
+  return (
+    <Router history={createHashHistory()} onChange={onChange}>
+      <Onboarding path='/onboarding' />
+      <Search path='/' />
+      <Settings path='/settings' />
+      <Article path='/article/:lang/:title/:subtitle?' />
+      <QuickFacts path='/quickfacts/:lang/:title' />
+      <Language path='/language' />
+    </Router>
+  )
+}
 
 // todo: export navigation functions

src/components/index.js

@@ -9,6 +9,7 @@ export * from './Language'
 export * from './ListView'
 export * from './Loading'
 export * from './OfflineIndicator'
+export * from './Onboarding'
 export * from './PopupContainer'
 export * from './QuickFacts'
 export * from './RadioListView'

src/reducers/SoftkeyReducer.js

@@ -4,6 +4,8 @@ export const SoftkeyReducer = (state, action) => {
   switch (action.type) {
     case 'set':
       return { ...state, current: { ...state.current, ...action.config } }
+    case 'replace':
+      return { ...state, current: { ...action.config } }
     case 'push':
       stack = state.stack || []
       current = state.current

src/utils/index.js

@@ -6,4 +6,5 @@ export * from './goto'
 export * from './languages'
 export * from './mwApi'
 export * from './normalizeTitle'
+export * from './onboarding'
 export * from './viewport'

src/utils/onboarding.js

@@ -0,0 +1,11 @@
+const KEY = 'has-onboard-before'
+
+const isDone = () => {
+  return !!localStorage.getItem(KEY)
+}
+
+const markAsDone = () => {
+  localStorage.setItem(KEY, true)
+}
+
+export const onboarding = { isDone, markAsDone }

style/onboarding.less

@@ -0,0 +1,29 @@
+.onboarding {
+	font-family: @textFont;
+	padding: 0 20px;
+
+	.image {
+		text-align: center;
+		margin: 15px 0;
+		background-position: center center;
+		background-repeat: no-repeat;
+		background-size: 140px;
+
+		img {
+			width: 90px;
+			height: 90px;
+		}
+	}
+
+	.title {
+		font-weight: bold;
+		font-size: 22px;
+		line-height: 26px;
+	}
+
+	.description {
+		font-size: 12px;
+		line-height: 17px;
+		margin-top: 11px;
+	}
+}

style/softkey.less

@@ -1,4 +1,5 @@
 .softkey {
+	font-family: @textFont;
 	height: @softkeysHeight;
 	max-height: @softkeysHeight;
 	width: 100%;
@@ -34,11 +35,9 @@
 	.center {
 		color: #242424;
 		text-transform: uppercase;
-		font-size: 18px;
+		font-size: 16px;
 		text-align: center;
 		max-width: 120px;
-		overflow: hidden;
-		text-overflow: ellipsis;
 		width: 100%;
 	}
 

style/style.less

@@ -17,6 +17,7 @@
 @import './language';
 @import './menu';
 @import './offline';
+@import './onboarding';
 @import './preview';
 @import './quickfacts';
 @import './reference';