Merge pull request #4837 from HSLdevcom/DT-5986

feat: ui switch for including Estonia in searches
HSLdevcom · Jul 6, 2023 · ae680b5 · ae680b5
2 parents c058837 + 5ecf602
commit ae680b5
Show file tree

Hide file tree

Showing 9 changed files with 172 additions and 27 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/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/MainMenu.js b/app/component/MainMenu.js
@@ -1,15 +1,19 @@
 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';
 
 function MainMenu(props, { config, intl }) {
+  const [countries, setCountries] = useState(props.countries);
   return (
     <div className="main-menu no-select">
       <div className="main-menu-top-section">
@@ -77,23 +81,56 @@ 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]}
+                    title={`toggle-${country}`}
+                    onToggle={() => {
+                      setCountries({
+                        ...countries,
+                        [country]: !countries[country],
+                      });
+                      props.updateCountries({
+                        ...countries,
+                        [country]: !countries[country],
+                      });
+                      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 +150,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 +160,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/configurations/config.matka.js b/app/configurations/config.matka.js
@@ -29,6 +29,7 @@ export default {
       show: true,
       url: 'https://matkamonitori.digitransit.fi/createview',
     },
+    countrySelection: ['estonia'],
   },
 
   contactName: {
@@ -39,12 +40,7 @@ export default {
 
   availableLanguages: ['fi', 'sv', 'en'],
   defaultLanguage: 'fi',
-
-  appBarLink: {
-    name: 'Traficom',
-    href:
-      'https://www.traficom.fi/fi/liikenne/liikennejarjestelma/joukkoliikenteen-informaatiopalvelut',
-  },
+  hideAppBarLink: true,
 
   socialMedia: {
     title: APP_TITLE,
@@ -95,10 +91,21 @@ export default {
     'Kajaani',
     'Salo',
     'Pori',
-    'Viro',
-    'Vikingline',
   ],
 
+  additionalFeedIds: {
+    estonia: ['Vikingline', 'Viro'],
+  },
+
+  additionalSearchParams: {
+    default: {
+      'boundary.country': 'FIN',
+    },
+    estonia: {
+      'boundary.country': 'EST',
+    },
+  },
+
   stopSearchFilter: stop => {
     const props = stop.properties;
     if (
@@ -123,6 +130,11 @@ export default {
   menu: {
     copyright: { label: `© Matka.fi ${YEAR}` },
     content: [
+      {
+        name: 'Traficom',
+        href:
+          'https://www.traficom.fi/fi/liikenne/liikennejarjestelma/joukkoliikenteen-informaatiopalvelut',
+      },
       {
         name: 'about-service-feedback',
         href: 'http://www.matka.fi',

diff --git a/app/store/CountryStore.js b/app/store/CountryStore.js
@@ -0,0 +1,24 @@
+import Store from 'fluxible/addons/BaseStore';
+import { getCountries, setCountries } from './localStorage';
+
+class CountryStore extends Store {
+  static handlers = {
+    UpdateCountries: 'updateCountries',
+  };
+
+  static storeName = 'CountryStore';
+
+  countries = getCountries();
+
+  getCountries = () => {
+    return this.countries;
+  };
+
+  updateCountries = countries => {
+    this.countries = countries;
+    setCountries(countries);
+    this.emitChange();
+  };
+}
+
+export default CountryStore;
diff --git a/app/store/localStorage.js b/app/store/localStorage.js
@@ -209,8 +209,14 @@ export const setMapLayerSettings = settings => {
   setItem('map-layers', settings);
 };
 
+export const setCountries = countries => {
+  setItem('countries', countries);
+};
+
 export const getMapLayerSettings = () => getItemAsJson('map-layers', '{}');
 
+export const getCountries = () => getItemAsJson('countries', '{}');
+
 /**
  * Sets the seen state of the given dialog.
  *

diff --git a/app/translations.js b/app/translations.js
@@ -1088,6 +1088,7 @@ const translations = {
     hsl_ticket: 'HSL ticket',
     hsl_travel_card: 'HSL card',
     'in-addition': 'In addition',
+    'include-estonia': 'Include Estonia',
     'index.title': 'Journey Planner',
     inquiry: 'How did you find the new Journey Planner? Please tell us!',
     instructions: 'Instructions',
@@ -2223,6 +2224,7 @@ const translations = {
     hsl_ticket: 'HSL-lipulla',
     hsl_travel_card: 'HSL-kortilla',
     'in-addition': 'Lisäksi',
+    'include-estonia': 'Sisällytä Viron liikenne',
     'index.title': 'Reittiopas',
     inquiry: 'Mitä pidät uudesta Reittioppaasta? Kerro se meille! ',
     instructions: 'Ohjeet',
@@ -4129,6 +4131,7 @@ const translations = {
     hsl_ticket: 'HRT-biljetten',
     hsl_travel_card: 'HRT-kortet',
     'in-addition': 'Även',
+    'include-estonia': 'Inkludera Estland',
     'index.title': 'Reseplaneraren',
     inquiry: 'Vad tycker du om den nya Reseplaneraren. Berätta för oss!',
     instructions: 'Anvisningar',

diff --git a/app/util/configureCountry.js b/app/util/configureCountry.js
@@ -0,0 +1,35 @@
+/* eslint-disable no-param-reassign */
+export const configureCountry = (config, countries) => {
+  if (config.mainMenu.countrySelection) {
+    const selectedCountries = countries;
+    const keys = Object.keys(selectedCountries);
+    let boundaries = config.additionalSearchParams.default['boundary.country'];
+    let feedIds = [...config.feedIds];
+    keys.forEach(key => {
+      const additionalFeedIds = config.additionalFeedIds[key];
+      if (selectedCountries[key]) {
+        // Country selected
+        if (config.additionalSearchParams[key]['boundary.country']) {
+          boundaries += ',';
+        }
+        boundaries += config.additionalSearchParams[key]['boundary.country'];
+        if (additionalFeedIds.every(id => feedIds.indexOf(id) < 0)) {
+          feedIds = [...feedIds, ...additionalFeedIds];
+        }
+      } else {
+        // Country not selected
+        feedIds = [...feedIds].filter(id => additionalFeedIds.indexOf(id) < 0);
+      }
+    });
+    if (!config.searchParams) {
+      config.searchParams = {};
+    }
+    config.searchParams = {
+      ...config.searchParams,
+      'boundary.country': boundaries,
+    };
+    config.feedIds = feedIds;
+  }
+};
+
+export default configureCountry;