Ab#74 latest near you development from next

app/component/Disclaimer.js

@@ -0,0 +1,127 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+import Icon from './Icon';
+import { useDeepLink } from '../util/vehicleRentalUtils';
+import { useConfigContext } from '../configurations/ConfigContext';
+import { useTranslationsContext } from '../util/useTranslationsContext';
+
+export default function Disclaimer({
+  header,
+  headerId,
+  text,
+  textId,
+  linkLabel,
+  linkLabelId,
+  values,
+  href,
+  useLinkButton,
+  closable,
+  onClose, // hook e.g. for remembering closing
+}) {
+  const { colors } = useConfigContext();
+  const intl = useTranslationsContext();
+
+  const [showCard, setShowCard] = useState(true);
+
+  const handleClose = () => {
+    setShowCard(false);
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  const onClick = href?.startsWith('http')
+    ? () => {
+        window.open(href, '_blank', 'noopener,noreferrer');
+      }
+    : () => useDeepLink(href, window.location.href);
+
+  if (!showCard) {
+    return null;
+  }
+  const hdr = headerId ? (
+    <FormattedMessage id={headerId} values={values} />
+  ) : (
+    header
+  );
+  const txt = textId ? <FormattedMessage id={textId} values={values} /> : text;
+  const label = linkLabelId ? (
+    <FormattedMessage id={linkLabelId} values={values} />
+  ) : (
+    linkLabel
+  );
+
+  return (
+    <div className="disclaimer-container">
+      <Icon className="info" img="icon_info" />
+      <div className="disclaimer">
+        <div className="disclaimer-header">
+          {hdr && <h3>{hdr}</h3>}
+          {closable && (
+            <button
+              className="disclaimer-close"
+              aria-label={intl.formatMessage({ id: 'close' })}
+              onClick={handleClose}
+              type="button"
+            >
+              <Icon color={colors.primary} img="icon_close" />
+            </button>
+          )}
+        </div>
+        {txt}
+        {href && useLinkButton && (
+          <button
+            type="button"
+            className="external-link-button"
+            onClick={e => {
+              e.stopPropagation();
+              onClick(e);
+            }}
+          >
+            {label}
+          </button>
+        )}
+        {href && !useLinkButton && (
+          <a
+            className="external-link"
+            href={href}
+            target="_blank"
+            rel="noreferrer"
+          >
+            {label}
+            <Icon className="arrow" img="icon_arrow-collapse--right" />
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}
+
+Disclaimer.propTypes = {
+  header: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  headerId: PropTypes.string,
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  textId: PropTypes.string,
+  linkLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  linkLabelId: PropTypes.string,
+  values: PropTypes.objectOf(PropTypes.string),
+  href: PropTypes.string,
+  useLinkButton: PropTypes.bool,
+  closable: PropTypes.bool,
+  onClose: PropTypes.func,
+};
+
+Disclaimer.defaultProps = {
+  header: null,
+  headerId: undefined,
+  text: null,
+  textId: undefined,
+  linkLabel: null,
+  linkLabelId: undefined,
+  values: {},
+  href: undefined,
+  useLinkButton: false,
+  closable: false,
+  onClose: undefined,
+};

app/component/IndexPage.js

@@ -45,6 +45,7 @@ import {
   checkPositioningPermission,
   startLocationWatch,
 } from '../action/PositionActions';
+import FavouriteStore from '../store/FavouriteStore';
 
 const StopRouteSearch = withSearchContext(DTAutoSuggest);
 const LocationSearch = withSearchContext(DTAutosuggestPanel);
@@ -63,26 +64,22 @@ class IndexPage extends React.Component {
     breakpoint: PropTypes.string.isRequired,
     origin: locationShape.isRequired,
     destination: locationShape.isRequired,
-    lang: PropTypes.string,
     currentTime: PropTypes.number.isRequired,
     // eslint-disable-next-line
     query: PropTypes.object.isRequired,
     favouriteModalAction: PropTypes.string,
     fromMap: PropTypes.string,
     locationState: locationShape.isRequired,
+    favouriteStatus: PropTypes.string.isRequired,
+    // eslint-disable-next-line
+    favourites: PropTypes.array.isRequired,
   };
 
   static defaultProps = {
-    lang: 'fi',
     favouriteModalAction: '',
     fromMap: undefined,
   };
 
-  constructor(props, context) {
-    super(props, context);
-    this.state = {};
-  }
-
   componentDidMount() {
     const { from, to } = this.context.match.params;
     /* initialize stores from URL params */
@@ -226,9 +223,10 @@ class IndexPage extends React.Component {
 
   NearStops() {
     const { intl, config } = this.context;
-    const { colors, fontWeights } = config;
-    const { lang } = this.props;
-    const nearYouModes = getNearYouModes(config);
+    const { colors, fontWeights, language } = config;
+
+    const nearYouModes = getNearYouModes(config, this.props.favourites);
+
     // If nearYouModes is configured, display those. Otherwise, display all configured transport modes
     const modeArray =
       nearYouModes.length > 0
@@ -255,9 +253,13 @@ class IndexPage extends React.Component {
       <CtrlPanel.NearStopsAndRoutes
         appElement="#app"
         modeArray={modeArray}
+        loading={
+          this.props.favouriteStatus ===
+          FavouriteStore.STATUS_FETCHING_OR_UPDATING
+        }
         modeSet={config.iconModeSet}
         urlPrefix={`/${PREFIX_NEARYOU}`}
-        language={lang}
+        language={language}
         title={config.nearYouTitle}
         alertsContext={alertsContext}
         origin={this.props.origin}
@@ -284,7 +286,7 @@ class IndexPage extends React.Component {
   render() {
     const { intl, config } = this.context;
     const { trafficNowLink, colors, fontWeights } = config;
-    const { breakpoint, lang } = this.props;
+    const { breakpoint } = this.props;
     const origin = this.pendingOrigin || this.props.origin;
     const destination = this.pendingDestination || this.props.destination;
     const locationSources = ['History', 'Datasource'];
@@ -313,7 +315,7 @@ class IndexPage extends React.Component {
       appElement: '#app',
       origin,
       destination,
-      lang,
+      lang: config.language,
       sources: locationSources,
       targets,
       refPoint,
@@ -341,7 +343,7 @@ class IndexPage extends React.Component {
       selectHandler: this.onSelectStopRoute,
       getAutoSuggestIcons: config.getAutoSuggestIcons,
       value: '',
-      lang,
+      lang: config.language,
       sources,
       targets: stopAndRouteSearchTargets,
       fontWeights,
@@ -383,15 +385,15 @@ class IndexPage extends React.Component {
               <DatetimepickerContainer
                 realtime
                 color={colors.primary}
-                lang={lang}
+                lang={config.language}
               />
             </div>
             {!config.hideFavourites && (
               <>
                 <FavouritesContainer
                   favouriteModalAction={this.props.favouriteModalAction}
                   onClickFavourite={this.clickFavourite}
-                  lang={lang}
+                  lang={config.language}
                 />
                 <CtrlPanel.SeparatorLine usePaddingBottom20 />
               </>
@@ -404,9 +406,9 @@ class IndexPage extends React.Component {
                 <CtrlPanel.SeparatorLine />
               </>
             )}
-            {trafficNowLink?.[lang] && (
+            {trafficNowLink?.[config.language] && (
               <TrafficNowLink
-                lang={lang}
+                lang={config.language}
                 handleClick={this.trafficNowHandler}
               />
             )}
@@ -437,12 +439,12 @@ class IndexPage extends React.Component {
               <DatetimepickerContainer
                 realtime
                 color={colors.primary}
-                lang={lang}
+                lang={config.language}
               />
             </div>
             <FavouritesContainer
               onClickFavourite={this.clickFavourite}
-              lang={lang}
+              lang={config.language}
               isMobile
             />
             <CtrlPanel.SeparatorLine />
@@ -452,9 +454,9 @@ class IndexPage extends React.Component {
             </div>
             <CtrlPanel.SeparatorLine usePaddingBottom20 />
             {!trafficNowLink ||
-              (trafficNowLink[lang] !== '' && (
+              (trafficNowLink[config.language] !== '' && (
                 <TrafficNowLink
-                  lang={lang}
+                  lang={config.language}
                   handleClick={this.trafficNowHandler}
                   fontWeights={fontWeights}
                 />
@@ -473,9 +475,9 @@ const Index = memo(
     isEqual(nextProps.origin, props.origin) &&
     isEqual(nextProps.destination, props.destination) &&
     isEqual(nextProps.breakpoint, props.breakpoint) &&
-    isEqual(nextProps.lang, props.lang) &&
     isEqual(nextProps.query, props.query) &&
-    isEqual(nextProps.locationState, props.locationState),
+    isEqual(nextProps.locationState, props.locationState) &&
+    isEqual(nextProps.favouriteStatus, props.favouriteStatus),
 );
 
 const IndexPageWithBreakpoint = withBreakpoint(Index);
@@ -486,8 +488,8 @@ const IndexPageWithStores = connectToStores(
     'OriginStore',
     'DestinationStore',
     'TimeStore',
-    'PreferencesStore',
     'PositionStore',
+    'FavouriteStore',
   ],
   (context, props) => {
     const origin = context.getStore('OriginStore').getOrigin();
@@ -507,9 +509,10 @@ const IndexPageWithStores = connectToStores(
     }
     newProps.origin = origin;
     newProps.destination = destination;
-    newProps.lang = context.getStore('PreferencesStore').getLanguage();
     newProps.currentTime = context.getStore('TimeStore').getCurrentTime();
     newProps.query = query; // defines itinerary search time & arriveBy
+    newProps.favouriteStatus = context.getStore('FavouriteStore').getStatus();
+    newProps.favourites = context.getStore('FavouriteStore').getFavourites();
 
     return newProps;
   },