Merge branch 'v3' into DT-5659-part2

HSLdevcom · Jul 31, 2023 · 9039031 · 9039031
2 parents a1d1ecb + 5357913
commit 9039031
Show file tree

Hide file tree

Showing 65 changed files with 2,170 additions and 909 deletions.
diff --git a/app/action/CountryActions.js b/app/action/CountryActions.js
@@ -0,0 +1,5 @@
+export const updateCountries = (actionContext, countries) => {
+  actionContext.dispatch('UpdateCountries', countries);
+};
+
+export default updateCountries;
diff --git a/app/action/SearchActions.js b/app/action/SearchActions.js
@@ -3,6 +3,10 @@ export function saveSearch(actionContext, endpoint) {
   actionContext.dispatch('SaveSearch', endpoint);
 }
 
+export function removeSearch(actionContext, endpoint) {
+  actionContext.dispatch('RemoveSearch', endpoint);
+}
+
 export function saveSearchItems(actionContext, items) {
   actionContext.dispatch('SaveSearchItems', items);
 }
diff --git a/app/app.js b/app/app.js
@@ -17,6 +17,7 @@ import UserStore from './store/UserStore';
 import FavouriteStore from './store/FavouriteStore';
 import RoutingSettingsStore from './store/RoutingSettingsStore';
 import FutureRouteStore from './store/FutureRouteStore';
+import CountryStore from './store/CountryStore';
 
 export default config => {
   const app = new Fluxible({
@@ -39,6 +40,7 @@ export default config => {
   app.registerStore(FavouriteStore);
   app.registerStore(RoutingSettingsStore);
   app.registerStore(FutureRouteStore);
+  app.registerStore(CountryStore);
 
   app.plug({
     name: 'extra-context-plugin',

diff --git a/app/client.js b/app/client.js
@@ -41,6 +41,7 @@ import {
   initAnalyticsClientSide,
   addAnalyticsEvent,
 } from './util/analyticsUtils';
+import { configureCountry } from './util/configureCountry';
 
 const plugContext = f => () => ({
   plugComponentContext: f,
@@ -101,6 +102,12 @@ async function init() {
 
   const context = await app.rehydrate(window.state);
 
+  // Get additional feedIds and searchParams from localstorage
+  if (config.mainMenu.countrySelection) {
+    const selectedCountries = context.getStore('CountryStore').getCountries();
+    configureCountry(config, selectedCountries);
+  }
+
   // For Google Tag Manager
   if (!config.useCookiesPrompt) {
     initAnalyticsClientSide();

diff --git a/app/component/AboutPage.js b/app/component/AboutPage.js
@@ -1,12 +1,15 @@
 import PropTypes from 'prop-types';
 /* eslint-disable react/no-array-index-key */
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Link from 'found/Link';
 import { FormattedMessage } from 'react-intl';
 import connectToStores from 'fluxible-addons-react/connectToStores';
 
 const AboutPage = ({ currentLanguage }, { config }) => {
-  const about = config.aboutThisService[currentLanguage];
+  const [about, setAbout] = useState([]);
+  useEffect(() => {
+    setAbout(config.aboutThisService[currentLanguage]);
+  }, []);
   return (
     <div className="about-page fullscreen">
       <div className="page-frame fullscreen momentum-scroll">
@@ -16,7 +19,10 @@ const AboutPage = ({ currentLanguage }, { config }) => {
               <h1 className="about-header">{section.header}</h1>
               {section.paragraphs &&
                 section.paragraphs.map((p, j) => (
-                  <p key={`about-section-${i}-p-${j}`}>{p}</p>
+                  <p
+                    key={`about-section-${i}-p-${j}`}
+                    dangerouslySetInnerHTML={{ __html: p }}
+                  />
                 ))}
               {section.link && (
                 <a href={section.link}>

diff --git a/app/component/AppBar.js b/app/component/AppBar.js
@@ -19,7 +19,9 @@ const AppBar = (
 ) => {
   const { location } = match;
   const [disruptionInfoOpen, setDisruptionInfoOpen] = useState(false);
-  const [menuOpen, setMenuOpen] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(
+    window.sessionStorage.menuOpen === 'true',
+  );
   const url = encodeURI(`${window.location?.origin || ''}${location.pathname}`);
   const params = location.search && location.search.substring(1);
 
@@ -29,6 +31,8 @@ const AppBar = (
       action: newState ? 'OpenMenu' : 'CloseMenu',
       name: null,
     });
+    // Set sessionStorage menuOpen to false on closing the menu so it doesn't pop up opened on later refreshes.
+    window.sessionStorage.setItem('menuOpen', false);
     setMenuOpen(newState);
   };
 

diff --git a/app/component/AppBarHsl.scss b/app/component/AppBarHsl.scss
@@ -0,0 +1,12 @@
+.hslfi-cb__button-primary {
+    &:hover {
+        background-color: #0062A1 !important;
+        color: white !important;
+    }
+}
+
+.hslfi-cb__button-secondary {
+    &:hover {
+        color: #0062A1 !important;
+    }
+}
diff --git a/app/component/CarLeg.js b/app/component/CarLeg.js
@@ -74,7 +74,11 @@ function CarLeg(props, { config, intl }) {
         <div className="itinerary-leg-action">
           <div className="itinerary-leg-action-content">
             <FormattedMessage
-              id="car-distance-duration"
+              id={
+                config.hideCarSuggestionDuration
+                  ? 'car-distance-no-duration'
+                  : 'car-distance-duration'
+              }
               values={{ distance, duration }}
               defaultMessage="Drive {distance} ({duration})}"
             />

diff --git a/app/component/EmbeddedSearch/EmbeddedSearch.js b/app/component/EmbeddedSearch/EmbeddedSearch.js
@@ -276,14 +276,18 @@ const EmbeddedSearch = (props, context) => {
   };
 
   useEffect(() => {
-    import(
-      /* webpackChunkName: "embedded-search" */ `../../configurations/images/${
-        config.secondaryLogo || config.logo
-      }`
-    ).then(l => {
-      setLogo(l.default);
+    if (config.secondaryLogo || config.logo) {
+      import(
+        /* webpackChunkName: "embedded-search" */ `../../configurations/images/${
+          config.secondaryLogo || config.logo
+        }`
+      ).then(l => {
+        setLogo(l.default);
+        setLoading(false);
+      });
+    } else {
       setLoading(false);
-    });
+    }
   }, []);
 
   if (i18next.language !== lang) {
@@ -318,11 +322,15 @@ const EmbeddedSearch = (props, context) => {
             {...locationSearchProps}
           />
           <div className="embedded-search-button-container">
-            <img
-              src={logo}
-              className="brand-logo"
-              alt={`${config.title} logo`}
-            />
+            {logo ? (
+              <img
+                src={logo}
+                className="brand-logo"
+                alt={`${config.title} logo`}
+              />
+            ) : (
+              <span className="brand-logo">{config.title}</span>
+            )}
             <button
               ref={buttonRef}
               className="search-button"

diff --git a/app/component/ItinerarySummary.js b/app/component/ItinerarySummary.js
@@ -12,6 +12,7 @@ const ItinerarySummary = ({
   futureText,
   isMultiRow,
   isMobile,
+  hideBottomDivider,
 }) => {
   return (
     <div className="itinerary-summary">
@@ -50,7 +51,7 @@ const ItinerarySummary = ({
           mode="car"
         />
       )}
-      <div className={cx('divider-bottom')} />
+      {!hideBottomDivider && <div className={cx('divider-bottom')} />}
     </div>
   );
 };
@@ -66,6 +67,7 @@ ItinerarySummary.propTypes = {
   futureText: PropTypes.string,
   isMultiRow: PropTypes.bool,
   isMobile: PropTypes.bool,
+  hideBottomDivider: PropTypes.bool,
 };
 
 ItinerarySummary.defaultTypes = {
@@ -75,6 +77,7 @@ ItinerarySummary.defaultTypes = {
   futureText: '',
   isMultiRow: false,
   isMobile: false,
+  hideBottomDivider: false,
 };
 
 ItinerarySummary.displayName = 'ItinerarySummary';

diff --git a/app/component/ItineraryTab.js b/app/component/ItineraryTab.js
@@ -235,6 +235,7 @@ class ItineraryTab extends React.Component {
                 futureText={extraProps.futureText}
                 isMultiRow={extraProps.isMultiRow}
                 isMobile={this.props.isMobile}
+		hideBottomDivider={shouldShowFarePurchaseInfo(config,breakpoint,fares)}
               />
             ) : (
               <>

diff --git a/app/component/LogoSmall.js b/app/component/LogoSmall.js
@@ -11,6 +11,7 @@ const LogoSmall = ({ logo, title }, { config }) => {
       </span>
     );
   }
+
   return (
     <div
       className="logo"

diff --git a/app/component/MainMenu.js b/app/component/MainMenu.js
@@ -1,21 +1,26 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useState } from 'react';
 import { FormattedMessage, intlShape } from 'react-intl';
 import Link from 'found/Link';
 
+import { connectToStores } from 'fluxible-addons-react';
 import DisruptionInfoButtonContainer from './DisruptionInfoButtonContainer';
 import Icon from './Icon';
 import LangSelect from './LangSelect';
 import MainMenuLinks from './MainMenuLinks';
 import { addAnalyticsEvent } from '../util/analyticsUtils';
+import { updateCountries } from '../action/CountryActions';
+import Toggle from './customizesearch/Toggle';
+import searchContext from '../util/searchContext';
+import intializeSearchContext from '../util/DTSearchContextInitializer';
 
 function MainMenu(props, { config, intl }) {
+  const [countries, setCountries] = useState(props.countries);
   return (
-    <div className="main-menu no-select">
+    <div className="main-menu no-select" tabIndex={-1}>
       <div className="main-menu-top-section">
         <button
           type="button"
-          ref={input => input && input.focus()}
           onClick={props.closeMenu}
           className="close-button cursor-pointer"
           aria-label={intl.formatMessage({
@@ -77,23 +82,59 @@ function MainMenu(props, { config, intl }) {
             </Link>
           </div>
         )}
-        {config.appBarLink && config.appBarLink.name && config.appBarLink.href && (
-          <div className="offcanvas-section">
-            <a
-              id="appBarLink"
-              href={config.appBarLink.href}
-              onClick={() => {
-                addAnalyticsEvent({
-                  category: 'Navigation',
-                  action: 'appBarLink',
-                  name: null,
-                });
-              }}
-            >
-              {config.appBarLink.name}
-            </a>
-          </div>
-        )}
+        {config.mainMenu.countrySelection &&
+          config.mainMenu.countrySelection.map(country => (
+            <div key={country} className="offcanvas-section">
+              <FormattedMessage
+                id={`include-${country}`}
+                defaultMessage={`include-${country}`}
+              />
+              <div style={{ float: 'right', display: 'inline-block' }}>
+                {/* eslint-disable jsx-a11y/label-has-associated-control */}
+                <label key={country} htmlFor={`toggle-${country}`}>
+                  <Toggle
+                    id={`toggle-${country}`}
+                    toggled={!!countries[country]}
+                    onToggle={() => {
+                      setCountries({
+                        ...countries,
+                        [country]: !countries[country],
+                      });
+                      props.updateCountries({
+                        ...countries,
+                        [country]: !countries[country],
+                      });
+                      // Update searchContext to reflect changes in config
+                      intializeSearchContext({ config }, searchContext);
+                      // On changing country filters, set sessionStorage menuOpen to true. This item is used in AppBar.js to initially open the menu after refresh for visual confirmation.
+                      window.sessionStorage.setItem('menuOpen', true);
+                      window.location.reload();
+                    }}
+                  />
+                </label>
+              </div>
+            </div>
+          ))}
+        {config.appBarLink &&
+          config.appBarLink.name &&
+          config.appBarLink.href &&
+          !config.hideAppBarLink && (
+            <div className="offcanvas-section">
+              <a
+                id="appBarLink"
+                href={config.appBarLink.href}
+                onClick={() => {
+                  addAnalyticsEvent({
+                    category: 'Navigation',
+                    action: 'appBarLink',
+                    name: null,
+                  });
+                }}
+              >
+                {config.appBarLink.name}
+              </a>
+            </div>
+          )}
       </section>
       <section className="menu-section secondary-links">
         <MainMenuLinks
@@ -113,6 +154,8 @@ MainMenu.propTypes = {
   setDisruptionInfoOpen: PropTypes.func.isRequired,
   closeMenu: PropTypes.func.isRequired,
   homeUrl: PropTypes.string.isRequired,
+  countries: PropTypes.object,
+  updateCountries: PropTypes.func,
 };
 
 MainMenu.contextTypes = {
@@ -121,4 +164,16 @@ MainMenu.contextTypes = {
   intl: intlShape.isRequired,
 };
 
-export default MainMenu;
+const connectedComponent = connectToStores(
+  MainMenu,
+  ['CountryStore'],
+  ({ getStore, executeAction }) => ({
+    countries: getStore('CountryStore').getCountries(),
+    updateCountries: countries => executeAction(updateCountries, countries),
+  }),
+  {
+    executeAction: PropTypes.func,
+  },
+);
+
+export { connectedComponent as default, MainMenu as Component };
diff --git a/app/component/MenuDrawer.js b/app/component/MenuDrawer.js
@@ -26,6 +26,7 @@ function MenuDrawer({
       className={classNames}
       overlayClassName={overlayClassNames}
       onRequestClose={onRequestChange}
+      shouldFocusAfterRender={false}
     >
       {children}
     </Modal>