feat(check-language): add info bubble and store language in localStorage

i18n/de.json

@@ -21,6 +21,9 @@
   "showcaseMode": "Show Case Modus",
   "play": "Abspielen",
   "language": "Sprache wechseln",
+  "detectedLanguage": "Deutsche Sprache erkannt",
+  "changeLanguage": "Sprache ändern",
+  "keepLanguage": "Behalten",
   "modes": "Modi",
   "offline": "Desktop Version",
   "download": "Anwendung herunterladen",

i18n/en.json

@@ -21,6 +21,9 @@
   "showcaseMode": "Showcase Mode",
   "play": "Play",
   "language": "Change language",
+  "detectedLanguage": "English language detected",
+  "changeLanguage": "Change language",
+  "keepLanguage": "Keep",
   "modes": "Modes",
   "offline": "Standalone Version",
   "download": "Download App",

i18n/es.json

@@ -21,6 +21,9 @@
   "showcaseMode": "Modo escaparate",
   "play": "Reproducir",
   "language": "Cambiar idioma",
+  "detectedLanguage": "Spanish language detected",
+  "changeLanguage": "Change language",
+  "keepLanguage": "Keep",
   "modes": "Modos",
   "offline": "Versión de escritorio",
   "download": "Descargar app",

i18n/fr.json

@@ -21,6 +21,9 @@
   "showcaseMode": "Showcase Mode",
   "play": "Play",
   "language": "Change language",
+  "detectedLanguage": "French language detected",
+  "changeLanguage": "Change language",
+  "keepLanguage": "Keep",
   "modes": "Modes",
   "offline": "Offline Mode",
   "download": "Download App",

i18n/nl.json

@@ -21,6 +21,9 @@
   "showcaseMode": "Showcase mode",
   "play": "Afspelen",
   "language": "Wijzig taal",
+  "detectedLanguage": "Dutch language detected",
+  "changeLanguage": "Change language",
+  "keepLanguage": "Keep",
   "modes": "Modes",
   "offline": "Offline mode",
   "download": "App downloaden",

src/scripts/components/main/app/app.tsx

@@ -25,6 +25,7 @@ import translations from '../../../i18n';
 
 import styles from './app.styl';
 import {useStoryMarkers} from '../../../hooks/use-story-markers';
+import {Language} from '../../../types/language';
 
 // create redux store
 const store = createReduxStore();
@@ -36,12 +37,21 @@ const App: FunctionComponent = () => (
 );
 
 const TranslatedApp: FunctionComponent = () => {
-  const language = useSelector(languageSelector);
   const markers = useStoryMarkers();
+  const language = useSelector(languageSelector);
+
+  const getLanguage = () => {
+    if (localStorage.getItem('language')) {
+      return localStorage.getItem('language') as Language;
+    }
+    return language;
+  };
 
   return (
     <Router>
-      <IntlProvider locale={language} messages={translations[language]}>
+      <IntlProvider
+        locale={getLanguage()}
+        messages={translations[getLanguage()]}>
         <Switch>
           <Route
             path={[

src/scripts/components/main/info-bubble/info-bubble.styl

@@ -0,0 +1,46 @@
+@require '../../../../variables.styl'
+
+.infoBubble
+  position: absolute
+  top: emCalc(50px)
+  right: emCalc(-16px)
+  display: flex
+  flex-direction: column
+  padding: emCalc(16px)
+  width: fit-content
+  height: fit-content
+  border-radius: 4px
+  background-color: $darkGrey4
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.2)
+
+.infoBubble:before
+  position: absolute
+  right: emCalc(20px)
+  bottom: 100%
+  border-top-color: inherit
+  border-right: 8px solid transparent
+  border-bottom: 10px solid $darkGrey4
+  border-left: 8px solid transparent
+  content: ''
+
+.language
+  margin: 0
+  color: $textWhite
+  font-size: emCalc(16px)
+  font-family: Arial
+
+.buttons
+  display: flex
+  flex-direction: row
+  justify-content: space-between
+  padding-top: emCalc(16px)
+
+.keepLanguage, .changeLanguage
+  color: $textColor
+  text-align: left
+  text-transform: uppercase
+  font-size: emCalc(11px)
+  font-family: NotesEsaBold
+
+.changeLanguage
+  color: $textDefault

src/scripts/components/main/info-bubble/info-bubble.tsx

@@ -0,0 +1,33 @@
+import React, {FunctionComponent} from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import Button from '../button/button';
+
+import styles from './info-bubble.styl';
+
+interface Props {
+  onClose: () => void;
+  onMenuOpen: () => void;
+}
+
+const InfoBubble: FunctionComponent<Props> = ({onClose, onMenuOpen}) => (
+  <div className={styles.infoBubble}>
+    <p className={styles.language}>
+      <FormattedMessage id={'detectedLanguage'} />
+    </p>
+    <div className={styles.buttons}>
+      <Button
+        className={styles.changeLanguage}
+        label="changeLanguage"
+        onClick={() => onMenuOpen()}
+      />
+      <Button
+        className={styles.keepLanguage}
+        label="keepLanguage"
+        onClick={() => onClose()}
+      />
+    </div>
+  </div>
+);
+
+export default InfoBubble;

src/scripts/components/main/language-selector/language-selector.tsx

@@ -21,6 +21,14 @@ const LanguageSelector: FunctionComponent<Props> = ({className = ''}) => {
   const selectedLanguage = useSelector(languageSelector);
   const dispatch = useDispatch();
 
+  const setLanguage = (language: Language) => {
+    localStorage.setItem('language', language);
+
+    if (localStorage.getItem('language')) {
+      dispatch(setLanguageAction(language));
+    }
+  };
+
   return (
     <ul className={styles.language}>
       {languages.map(language => {
@@ -34,7 +42,7 @@ const LanguageSelector: FunctionComponent<Props> = ({className = ''}) => {
             <Button
               className={buttonClasses}
               key={language}
-              onClick={() => dispatch(setLanguageAction(language))}
+              onClick={() => setLanguage(language)}
               label={`language.${language}`}
             />
           </li>

src/scripts/components/main/navigation/navigation.tsx

@@ -1,5 +1,5 @@
 import React, {FunctionComponent, useState} from 'react';
-import {useDispatch} from 'react-redux';
+import {useDispatch, useSelector} from 'react-redux';
 
 import Button from '../button/button';
 import Overlay from '../overlay/overlay';
@@ -11,10 +11,20 @@ import Share from '../share/share';
 import {MenuIcon} from '../icons/menu-icon';
 
 import styles from './navigation.styl';
+import InfoBubble from '../info-bubble/info-bubble';
+import {languageSelector} from '../../../selectors/language';
 
 const Navigation: FunctionComponent = () => {
   const dispatch = useDispatch();
   const [showMenu, setShowMenu] = useState(false);
+  const [showInfoBubble, setshowInfoBubble] = useState(true);
+  const language = useSelector(languageSelector);
+  const savedLanguage = localStorage.getItem('language');
+
+  const onSaveLanguage = () => {
+    localStorage.setItem('language', language);
+    setshowInfoBubble(false);
+  };
 
   return (
     <div className={styles.navigation}>
@@ -39,6 +49,12 @@ const Navigation: FunctionComponent = () => {
         onClick={() => setShowMenu(true)}
         hideLabelOnMobile
       />
+      {showInfoBubble && !savedLanguage && (
+        <InfoBubble
+          onMenuOpen={() => setShowMenu(true)}
+          onClose={() => onSaveLanguage()}
+        />
+      )}
       {showMenu && (
         <Overlay onClose={() => setShowMenu(false)}>
           <Menu />