Merge pull request #4646 from HSLdevcom/DT-5244

feat: show timetables 60 days into the future

app/component/DateSelect.js

@@ -28,7 +28,7 @@ function DateSelect(props, context) {
     value: date.add(1, 'd').format(props.dateFormat),
   });
 
-  for (let i = 0; i < 28; i++) {
+  for (let i = 0; i < 58; i++) {
     dates.push({
       value: date.add(1, 'd').format(props.dateFormat),
       label: date.format('dd D.M.'),

app/component/ItinerarySummaryListContainer.js

@@ -9,6 +9,7 @@ import { matchShape } from 'found';
 import isEqual from 'lodash/isEqual';
 
 import distance from '@digitransit-search-util/digitransit-search-util-distance';
+import moment from 'moment';
 import Icon from './Icon';
 import SummaryRow from './SummaryRow';
 import { isBrowser } from '../util/browser';
@@ -268,6 +269,13 @@ function ItinerarySummaryListContainer(
     } else {
       msgId = 'walk-bike-itinerary-3';
     }
+    // Show different message if trip is >30 days in the future
+    const timeDifferenceDays = moment
+      .duration(moment(searchTime).diff(moment()))
+      .asDays();
+    if (timeDifferenceDays > 30) {
+      msgId = 'no-route-msg-time-threshold';
+    }
   } else {
     const hasChanges = !isEqual(
       getCurrentSettings(config),

app/component/Timetable.js

@@ -7,6 +7,7 @@ import groupBy from 'lodash/groupBy';
 import padStart from 'lodash/padStart';
 import { FormattedMessage } from 'react-intl';
 import { matchShape, routerShape } from 'found';
+import cx from 'classnames';
 import Icon from './Icon';
 import FilterTimeTableModal from './FilterTimeTableModal';
 import TimeTableOptionsPanel from './TimeTableOptionsPanel';
@@ -291,6 +292,12 @@ class Timetable extends React.Component {
     const virtualMonitorUrl =
       this.context.config?.stopCard?.header?.virtualMonitorBaseUrl &&
       `${this.context.config.stopCard.header.virtualMonitorBaseUrl}${this.props.stop.gtfsId}`;
+    const timeTableRows = this.createTimeTableRows(timetableMap);
+    const timeDifferenceDays = moment
+      .duration(
+        moment(this.props.propsForDateSelect.selectedDate).diff(moment()),
+      )
+      .asDays();
     return (
       <>
         <ScrollableWrapper>
@@ -335,18 +342,50 @@ class Timetable extends React.Component {
             <div className="timetable-for-printing">
               {this.dateForPrinting()}
             </div>
-            <div className="timetable-note">
-              <h2>
-                <FormattedMessage
-                  id="departures-by-hour"
-                  defaultMessage="Departures by hour"
-                />{' '}
-                <FormattedMessage
-                  id="departures-by-hour-minutes-route"
-                  defaultMessage="(minutes/route)"
-                />
-              </h2>
-            </div>
+
+            {timeTableRows.length > 0 ? (
+              <div className="timetable-note">
+                <h2>
+                  <FormattedMessage
+                    id="departures-by-hour"
+                    defaultMessage="Departures by hour"
+                  />{' '}
+                  <FormattedMessage
+                    id="departures-by-hour-minutes-route"
+                    defaultMessage="(minutes/route)"
+                  />
+                </h2>
+              </div>
+            ) : (
+              <div className="no-timetable-found-container">
+                <div className="no-timetable-found">
+                  <div
+                    className={cx(
+                      'flex-horizontal',
+                      'timetable-notification',
+                      'info',
+                    )}
+                  >
+                    <Icon
+                      className={cx('no-timetable-icon', 'caution')}
+                      img="icon-icon_info"
+                      color="#0074be"
+                    />
+                    {timeDifferenceDays > 30 ? (
+                      <FormattedMessage
+                        id="departures-not-found-time-threshold"
+                        defaultMessage="No departures found"
+                      />
+                    ) : (
+                      <FormattedMessage
+                        id="departures-not-found"
+                        defaultMessage="No departures found"
+                      />
+                    )}
+                  </div>
+                </div>
+              </div>
+            )}
             <div className="momentum-scroll timetable-content-container">
               <div className="timetable-time-headers">
                 <div className="hour">
@@ -359,7 +398,7 @@ class Timetable extends React.Component {
                   />
                 </div>
               </div>
-              {this.createTimeTableRows(timetableMap)}
+              {timeTableRows}
               <div
                 className="route-remarks"
                 style={{

app/component/timetable.scss

@@ -176,3 +176,41 @@
     margin: 0em 16px 8px;
   }
 }
+
+.no-timetable-found-container {
+  border-top: 1px solid $light-gray;
+  margin-top: 8px;
+  font-weight: $font-weight-medium;
+  font-size: $font-size-normal;
+  line-height: 18px;
+  letter-spacing: -0.03em;
+}
+
+.no-timetable-found {
+  display: flex;
+  justify-content: center;
+  padding-top: 1em;
+  .no-timetable-icon {
+    margin-right: 1em;
+    margin-top: 0.5em;
+    color: white;
+    width: 2em;
+    height: 2em;
+  }
+  .info {
+    fill: $gray-blue
+  }
+}
+
+.timetable-notification {
+  margin: 0 auto;
+  width: calc(100% - 2em);
+  max-width: 400px;
+  border-radius: 5px;
+  padding: 18px 32px 18px 16px;
+  font-weight: normal;
+  font-size: 14px;
+  &.info {
+    background: #e5f1f9;
+  }
+}

app/configurations/config.default.js

@@ -247,7 +247,7 @@ export default {
       enableButtonArrows: false,
     },
     // Number of days to include to the service time range from the future (DT-3317)
-    serviceTimeRange: 30,
+    serviceTimeRange: 60,
   },
 
   map: {
@@ -593,6 +593,8 @@ export default {
 
   routeTimetableUrlResolver: {},
 
+  showTenWeeksOnRouteSchedule: true,
+
   aboutThisService: {
     fi: [
       {

app/translations.js

@@ -1018,6 +1018,10 @@ const translations = {
     departures: 'Departures',
     'departures-by-hour': 'Departures by hour',
     'departures-by-hour-minutes-route': '(minutes/route)',
+    'departures-not-found':
+      'Unfortunately, no timetable was found for the stop you selected',
+    'departures-not-found-time-threshold':
+      'Unfortunately, no timetable was found for the stop you selected. It is possible that the day you searched for is too ar in the future. Please try again nearer to the time of your journey',
     description: 'Find public transport services to locations near and far.',
     destination: 'Destination',
     'destination-defined': 'Destination defined',
@@ -1269,6 +1273,8 @@ const translations = {
     'no-route-found':
       'Unfortunately, route {shortName} ({longName}) could not be found.',
     'no-route-msg': 'Unfortunately, no route suggestions were found.',
+    'no-route-msg-time-threshold':
+      'Unfortunately, no route suggestions were found. It is possible that no timetables can yet be found for the day you selected. Please try again nearer to the time of your journey',
     'no-route-msg-with-changes':
       'Unfortunately, no route suggestions were found. Please check your search settings or try changing the origin or destination.',
     'no-route-origin-near-destination':
@@ -2112,6 +2118,10 @@ const translations = {
     departures: 'Lähdöt',
     'departures-by-hour': 'Lähdöt tunneittain',
     'departures-by-hour-minutes-route': '(minuutit/linja)',
+    'departures-not-found':
+      'Valitsemallesi pysäkille ei valitettavasti löytynyt aikataulua',
+    'departures-not-found-time-threshold':
+      'Valitsemallesi pysäkille ei valitettavasti löytynyt aikataulua. Syynä voi olla se, että hakemasi päivämäärä on niin pitkällä tulevaisuudessa. Ole hyvä ja yritä uudelleen lähempänä matkasi ajankohtaa',
     description: 'Löydä joukkoliikennetarjonta lähelle ja kauas.',
     destination: 'Määränpää',
     'destination-defined': 'Määränpää määritetty',
@@ -2358,6 +2368,8 @@ const translations = {
     'no-route-found':
       'Linjaa {shortName} ({longName}) ei valitettavasti löytynyt.',
     'no-route-msg': 'Reittiehdotuksia ei valitettavasti löytynyt.',
+    'no-route-msg-time-threshold':
+      'Reittiehdotuksia ei valitettavasti löytynyt. On mahdollista, ettei aikatauluja löydy vielä valitsemallesi päivälle. Ole hyvä ja yritä uudelleen lähempänä matkasi ajankohtaa',
     'no-route-msg-with-changes':
       'Reittiehdotuksia ei valitettavasti löytynyt. Ole hyvä ja tarkasta asettamasi hakuasetukset tai yritä muuttaa lähtöpaikkaa tai määränpäätä.',
     'no-route-origin-near-destination':
@@ -3983,6 +3995,10 @@ const translations = {
     departures: 'Avgångar',
     'departures-by-hour': 'Avgångar per timme',
     'departures-by-hour-minutes-route': '(minuter/rad)',
+    'departures-not-found':
+      'Kunda tyvärr inte hitta tidtabell för den valda hållplatsen',
+    'departures-not-found-time-threshold':
+      'Kunde tyvärr inte hitta tidtabell för den valda hållplatsen. Det kan bero på det att det valda datumet ligger så långt in i framtiden. Försök på nytt senare',
     description: 'Res kollektivt när och fjärran.',
     destination: 'Destination',
     'destination-defined': 'Destination definierat',
@@ -4232,6 +4248,8 @@ const translations = {
       'Tidtabellen har inga resor som avgår senare.',
     'no-route-found': 'Kunde tyvärr inte hitta linje {shortName} ({longName})',
     'no-route-msg': 'Kunde tyvärr inte hitta ruttförslag',
+    'no-route-msg-time-threshold':
+      'Kunde tyvärr inte hitta ruttförslag. Det kan bero på att det ännu inte finnd tidtabeller för den valda dagen. Försök på nytt senare',
     'no-route-msg-with-changes':
       'Kunde tyvärr inte hitta ruttförslag Var god och kontrollera dina val eller försök ändra avgångsplats eller destination.',
     'no-route-origin-near-destination':

test/unit/component/DateSelect.test.js

@@ -21,9 +21,9 @@ describe('<DateSelect />', () => {
     moment.tz.setDefault();
   });
 
-  it('should render 30 options', () => {
+  it('should render 60 options', () => {
     const wrapper = shallowWithIntl(<DateSelect {...defaultProps} />);
-    expect(wrapper.find(Select).props().options).to.have.lengthOf(30);
+    expect(wrapper.find(Select).props().options).to.have.lengthOf(60);
   });
 
   it('should render today and tomorrow as text, others as weekday abbreviation with date', () => {