Merge pull request #5061 from HSLdevcom/fix-ctrlpanel-localization

Fix ctrlpanel localization

Author: sharhio

digitransit-component/packages/digitransit-component-control-panel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitransit-component/digitransit-component-control-panel",
-  "version": "1.1.8",
+  "version": "2.0.0",
   "description": "digitransit-component control-panel module",
   "main": "index.js",
   "files": [

digitransit-component/packages/digitransit-component-control-panel/src/index.js

@@ -4,8 +4,6 @@
 import PropTypes from 'prop-types';
 import React, { Fragment, useEffect, useState } from 'react';
 import i18next from 'i18next';
-import { useCookies } from 'react-cookie';
-import cx from 'classnames';
 import Icon from '@digitransit-component/digitransit-component-icon';
 import styles from './helpers/styles.scss';
 import translations from './helpers/translations';
@@ -67,73 +65,6 @@ OriginToDestination.defaultProps = {
   language: 'fi',
 };
 
-function BubbleDialog({ title, content, closeDialog, shouldRender, lang }) {
-  const [show, setShow] = useState(false);
-  useEffect(() => {
-    setTimeout(() => {
-      setShow(true);
-    }, 500);
-  }, [show]);
-
-  return (
-    <div
-      className={cx(styles['nearby-stops-bubble-dialog'], {
-        [styles['visible']]: shouldRender && show,
-      })}
-    >
-      <div
-        id="nearby-stops-bubble-dialog-container"
-        className={styles['nearby-stops-bubble-dialog-container']}
-      >
-        <div>
-          <div
-            className={cx(
-              styles['nearby-stops-bubble-dialog-header'],
-              styles[lang],
-            )}
-          >
-            {title}
-          </div>
-          <div className={styles['nearby-stops-bubble-dialog-content']}>
-            {content}
-          </div>
-          <button
-            className={styles['nearby-stops-bubble-dialog-close']}
-            aria-label={i18next.t('close-nearby-teaser')}
-            onClick={event => {
-              event.preventDefault();
-              closeDialog();
-            }}
-            onKeyDown={event => {
-              event.preventDefault();
-              const space = [13, ' ', 'Spacebar'];
-              const enter = [32, 'Enter'];
-              const key = event && event.key;
-              if (key && space.concat(enter).includes(key)) {
-                closeDialog();
-              }
-            }}
-            type="button"
-          >
-            <Icon img="close" />
-          </button>
-        </div>
-        <div className={styles['nearby-stops-bubble-dialog-tip-container']}>
-          <div className={styles['nearby-stops-bubble-dialog-tip']} />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-BubbleDialog.propTypes = {
-  title: PropTypes.string.isRequired,
-  content: PropTypes.string.isRequired,
-  closeDialog: PropTypes.func.isRequired,
-  shouldRender: PropTypes.bool.isRequired,
-  lang: PropTypes.string.isRequired,
-};
-
 /**
  * Show button links to near you page for different travel modes
  *
@@ -196,15 +127,11 @@ function NearStopsAndRoutes({
   modeSet,
   modeIconColors,
   fontWeights,
-  showTeaser,
 }) {
   const [modesWithAlerts, setModesWithAlerts] = useState([]);
-  const [cookies, setCookie] = useCookies(['nearbyTeaserShown']);
 
   useEffect(() => {
-    Object.keys(translations).forEach(lang => {
-      i18next.addResourceBundle(lang, 'translation', translations[lang]);
-    });
+    i18next.changeLanguage(language);
     if (alertsContext) {
       alertsContext
         .getModesWithAlerts(alertsContext.currentTime, alertsContext.feedIds)
@@ -214,12 +141,6 @@ function NearStopsAndRoutes({
     }
   }, []);
 
-  const closeBubbleDialog = () =>
-    setCookie('nearbyTeaserShown', true, {
-      path: '/',
-      maxAge: 10 * 365 * 24 * 60 * 60,
-    });
-
   let urlStart;
   if (omitLanguageUrl) {
     urlStart = urlPrefix;
@@ -328,20 +249,6 @@ function NearStopsAndRoutes({
             : title[language]}
         </h2>
       )}
-      {showTeaser && !cookies?.nearbyTeaserShown && (
-        <BubbleDialog
-          title={i18next.t('nearby-stops-teaser-header', { lng: language })}
-          content={i18next.t('nearby-stops-teaser-content', {
-            lng: language,
-          })}
-          closeDialog={closeBubbleDialog}
-          shouldRender={
-            i18next.t('nearby-stops-teaser-header', { lng: language }) !==
-            'nearby-stops-teaser-header'
-          }
-          lang={language}
-        />
-      )}
       <div
         className={
           !modes
@@ -381,7 +288,6 @@ NearStopsAndRoutes.propTypes = {
   fontWeights: PropTypes.shape({
     medium: PropTypes.number,
   }),
-  showTeaser: PropTypes.bool,
 };
 
 NearStopsAndRoutes.defaultProps = {
@@ -407,7 +313,6 @@ NearStopsAndRoutes.defaultProps = {
   fontWeights: {
     medium: 500,
   },
-  showTeaser: false,
 };
 
 /**
@@ -432,11 +337,8 @@ class CtrlPanel extends React.Component {
 
   static SeparatorLine = SeparatorLine;
 
-  static BubbleDialog = BubbleDialog;
-
   static propTypes = {
     children: PropTypes.arrayOf(PropTypes.node),
-    language: PropTypes.string.isRequired,
     position: PropTypes.string.isRequired,
     fontWeights: PropTypes.shape({
       medium: PropTypes.number,
@@ -450,29 +352,25 @@ class CtrlPanel extends React.Component {
     },
   };
 
+  constructor(props) {
+    super(props);
+    Object.keys(translations).forEach(lang => {
+      i18next.addResourceBundle(lang, 'translation', translations[lang]);
+    });
+  }
+
   render() {
     const className =
       this.props.position === 'bottom'
         ? styles['main-bottom']
         : styles['main-left'];
-    const children = React.Children.map(this.props.children, child => {
-      if (child) {
-        let lang = this.props.language;
-        if (lang === undefined) {
-          lang = 'fi';
-        }
-        i18next.changeLanguage(lang);
-        return React.cloneElement(child, { lang });
-      }
-      return null;
-    });
     return (
       <div
         key="main"
         className={className}
         style={{ '--font-weight-medium': this.props.fontWeights.medium }}
       >
-        {children}
+        {this.props.children}
       </div>
     );
   }

digitransit-component/packages/digitransit-component/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@digitransit-component/digitransit-component-autosuggest": "^2.0.8",
     "@digitransit-component/digitransit-component-autosuggest-panel": "^3.0.8",
-    "@digitransit-component/digitransit-component-control-panel": "^1.1.8",
+    "@digitransit-component/digitransit-component-control-panel": "^2.0.0",
     "@digitransit-component/digitransit-component-favourite-bar": "2.0.5",
     "@digitransit-component/digitransit-component-favourite-editing-modal": "^2.0.2",
     "@digitransit-component/digitransit-component-favourite-modal": "^1.0.6",

yarn.lock

@@ -2013,7 +2013,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@digitransit-component/digitransit-component-control-panel@^1.1.8, @digitransit-component/digitransit-component-control-panel@workspace:digitransit-component/packages/digitransit-component-control-panel":
+"@digitransit-component/digitransit-component-control-panel@^2.0.0, @digitransit-component/digitransit-component-control-panel@workspace:digitransit-component/packages/digitransit-component-control-panel":
   version: 0.0.0-use.local
   resolution: "@digitransit-component/digitransit-component-control-panel@workspace:digitransit-component/packages/digitransit-component-control-panel"
   peerDependencies:
@@ -2168,7 +2168,7 @@ __metadata:
   dependencies:
     "@digitransit-component/digitransit-component-autosuggest": ^2.0.8
     "@digitransit-component/digitransit-component-autosuggest-panel": ^3.0.8
-    "@digitransit-component/digitransit-component-control-panel": ^1.1.8
+    "@digitransit-component/digitransit-component-control-panel": ^2.0.0
     "@digitransit-component/digitransit-component-favourite-bar": 2.0.5
     "@digitransit-component/digitransit-component-favourite-editing-modal": ^2.0.2
     "@digitransit-component/digitransit-component-favourite-modal": ^1.0.6