Merge pull request #5409 from HSLdevcom/DT-6922

DT-6929 Replacement notifications text update and new design

Author: vesameskanen

app/component/itinerary/ItineraryDetails.js

@@ -217,25 +217,32 @@ function ItineraryDetails(
         />,
       );
     }
+  }
 
-    if (config.showRouteDisclaimer) {
-      itinerary.legs.forEach(leg => {
-        const { route } = leg;
-        if (
-          route?.desc?.length &&
-          getRouteMode(route, config)?.includes('replacement')
-        ) {
-          disclaimers.push(
-            <RouteDisclaimer
-              key={disclaimers.length}
-              text={route.desc}
-              href={route.url}
-              linkText={intl.formatMessage({ id: 'extra-info' })}
-            />,
-          );
-        }
-      });
-    }
+  if (config.replacementBusNotification) {
+    itinerary.legs.forEach(({ route, trip }) => {
+      const isReplacementRoute =
+        route?.desc?.length &&
+        getRouteMode(route, config)?.includes('replacement');
+      const isReplacementTrip =
+        trip?.submode?.includes('replacement') || trip?.submode?.includes(714);
+
+      if (isReplacementRoute || isReplacementTrip) {
+        const notification =
+          isReplacementRoute && config.showRouteDescNotification
+            ? { content: route.desc, link: route.url }
+            : config.replacementBusNotification;
+
+        disclaimers.push(
+          <RouteDisclaimer
+            key="replacementBusNotification"
+            text={notification.content?.[currentLanguage]?.join(' ')}
+            href={notification.link?.[currentLanguage]}
+            linkText={intl.formatMessage({ id: 'extra-info' })}
+          />,
+        );
+      }
+    });
   }
 
   return (

app/component/itinerary/TransitLeg.js

@@ -362,7 +362,7 @@ class TransitLeg extends React.Component {
     const createNotificationWithLink = notification => {
       return (
         <a
-          href={`https://www.${notification.link[lang]}`}
+          href={`https://www.${notification.link?.[lang]}`}
           className="disruption-link"
           target="_blank"
           rel="noreferrer"
@@ -397,6 +397,7 @@ class TransitLeg extends React.Component {
             <div
               className={cx('disruption', {
                 'no-header': !notification.header,
+                'no-link': !notification.link,
               })}
               key={`note-${index}`}
             >

app/component/itinerary/itinerary.scss

@@ -2164,6 +2164,14 @@ $itinerary-tab-switch-height: 48px;
       border: solid 1px #ddd;
       margin-bottom: 10px;
 
+      &.no-link {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 6px 15px 8px 12px;
+        text-decoration: none;
+      }
+
       .disruption-icon {
         width: 18px;
         height: 18px;

app/component/routepage/RouteControlPanel.js

@@ -373,9 +373,9 @@ class RouteControlPanel extends React.Component {
               key={notification.id}
               header={notification.header[language]}
               content={notification.content[language]}
-              link={notification.link[language]}
+              link={notification.link?.[language]}
               id={notification.id}
-              closeButtonLabel={notification.closeButtonLabel[language]}
+              closeButtonLabel={notification.closeButtonLabel?.[language]}
             />,
           );
         }

app/configurations/config.default.js

@@ -863,8 +863,8 @@ export default {
   navigation: false,
   sendAnalyticsCustomEventGoals: false,
   shortenLongTextThreshold: 10, // for route number in itinerary summary
-  showRouteDisclaimer: true,
   allowFlexJourneys: false,
   allowDirectFlexJourneys: false,
   allowedFlexRouteTypes: [1501],
+  showRouteDescNotification: false,
 };

app/configurations/config.hsl.js

@@ -746,44 +746,36 @@ export default {
         sv: 'hsl.fi/sv/kampanjer/snabbsparvag',
       },
     },
-    {
-      showForRoute: route => route.type === 714,
-      id: 'replacementBusNotification',
-      header: {
-        fi: 'Korvaava bussi',
-        en: 'Korvaava bussi',
-        sv: 'Korvaava bussi',
-      },
-      content: {
-        fi: [
-          'Voit nousta kyytiin myös bussin keskiovista.',
-          'Pysäkit on merkitty punaisilla tunnuksilla.',
-          'Linja käyttää valikoituja pysäkkejä, eli bussi ei pysähdy kaikilla pysäkeillä.',
-        ],
-        en: [
-          'Voit nousta kyytiin myös bussin keskiovista.',
-          'Pysäkit on merkitty punaisilla tunnuksilla.',
-          'Linja käyttää valikoituja pysäkkejä, eli bussi ei pysähdy kaikilla pysäkeillä.',
-        ],
-        sv: [
-          'Voit nousta kyytiin myös bussin keskiovista.',
-          'Pysäkit on merkitty punaisilla tunnuksilla.',
-          'Linja käyttää valikoituja pysäkkejä, eli bussi ei pysähdy kaikilla pysäkeillä.',
-        ],
-      },
-      closeButtonLabel: {
-        fi: '',
-        en: '',
-        sv: '',
-      },
-      link: {
-        fi: 'hsl.fi/korvaavabussi',
-        en: 'hsl.fi/korvaavabussi',
-        sv: 'hsl.fi/korvaavabussi',
-      },
-    },
   ],
 
+  replacementBusNotification: {
+    header: {
+      fi: 'Korvaava bussi',
+      en: 'Replacement bus',
+      sv: 'Ersättande buss',
+    },
+    content: {
+      fi: [
+        'Voit nousta kyytiin myös bussin keskiovista.',
+        'Pysäkit on merkitty punaisilla tunnuksilla.',
+        'Linja käyttää valikoituja pysäkkejä, eli bussi ei pysähdy kaikilla pysäkeillä.',
+      ],
+      en: [
+        'You can also board the bus through the middle doors.',
+        'The stops are marked with red signs.',
+        'The bus stops only at designated stops and does not serve all stops.',
+      ],
+      sv: [
+        'Du kan också stiga på bussen genom mittdörren.',
+        'Hållplatserna är markerade med röda punkter.',
+        'Linjen stannar endast vid vissa hållplatser, dvs. bussen stannar inte vid alla hållplatser.',
+      ],
+    },
+    link: {
+      fi: 'https://hsl.fi/korvaavabussi',
+    },
+  },
+
   embeddedSearch: {
     title: {
       fi: 'Reittiopas-elementti',
@@ -818,7 +810,6 @@ export default {
   trafficLightGraphic: 'hsl/traffic-light.svg',
   naviGeolocationGraphic: 'hsl/geolocation.svg',
   navigation: true,
-  showRouteDisclaimer: true,
   crazyEgg: true,
   // features that should not be deployed to production
   experimental: {

app/configurations/config.waltti.js

@@ -312,44 +312,31 @@ export default {
   hideNaviTickets: true, // TODO: temporary force switch
   navigation: true,
 
-  routeNotifications: [
-    {
-      showForRoute: route => route.type === 714,
-      id: 'replacementBusNotification',
-      header: {
-        fi: 'Korvaava bussi',
-        en: 'Korvaava bussi',
-        sv: 'Korvaava bussi',
-      },
-      content: {
-        fi: [
-          'Voit nousta kyytiin myös bussin keskiovista.',
-          'Pysäkit on merkitty punaisilla tunnuksilla.',
-          'Linja käyttää valikoituja pysäkkejä, eli bussi ei pysähdy kaikilla pysäkeillä.',
-        ],
-        en: [
-          'Voit nousta kyytiin myös bussin keskiovista.',
-          'Pysäkit on merkitty punaisilla tunnuksilla.',
-          'Linja käyttää valikoituja pysäkkejä, eli bussi ei pysähdy kaikilla pysäkeillä.',
-        ],
-        sv: [
-          'Voit nousta kyytiin myös bussin keskiovista.',
-          'Pysäkit on merkitty punaisilla tunnuksilla.',
-          'Linja käyttää valikoituja pysäkkejä, eli bussi ei pysähdy kaikilla pysäkeillä.',
-        ],
-      },
-      closeButtonLabel: {
-        fi: '',
-        en: '',
-        sv: '',
-      },
-      link: {
-        fi: '',
-        en: '',
-        sv: '',
-      },
+  replacementBusNotification: {
+    header: {
+      fi: 'Korvaava bussi',
+      en: 'Replacement bus',
+      sv: 'Ersättande buss',
     },
-  ],
+    content: {
+      fi: [
+        'Voit nousta kyytiin myös bussin keskiovista.',
+        'Pysäkit on merkitty punaisilla tunnuksilla.',
+        'Linja käyttää valikoituja pysäkkejä, eli bussi ei pysähdy kaikilla pysäkeillä.',
+      ],
+      en: [
+        'You can also board the bus through the middle doors.',
+        'The stops are marked with red signs.',
+        'The bus stops only at designated stops and does not serve all stops.',
+      ],
+      sv: [
+        'Du kan också stiga på bussen genom mittdörren.',
+        'Hållplatserna är markerade med röda punkter.',
+        'Linjen stannar endast vid vissa hållplatser, dvs. bussen stannar inte vid alla hållplatser.',
+      ],
+    },
+  },
+
   externalFeedIds: ['02Taksi'],
 
   // features that should not be deployed to production