Merge pull request #5218 from HSLdevcom/DT-6592

DT-6592 Navigator bottom sheet for envs without ticket sales
HSLdevcom · Dec 31, 2024 · 73cf654 · 73cf654
2 parents fe48e46 + 07c23ba
commit 73cf654
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 100 deletions.
diff --git a/app/component/itinerary/navigator/NaviBottom.js b/app/component/itinerary/navigator/NaviBottom.js
@@ -1,5 +1,6 @@
+import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { configShape } from '../../../util/shapes';
 import { epochToTime } from '../../../util/timeUtils';
@@ -8,44 +9,54 @@ export default function NaviBottom(
   { setNavigation, arrival, time },
   { config },
 ) {
+  const handleClose = useCallback(() => setNavigation(false), [setNavigation]);
+  const handleTicketButtonClick = useCallback(e => e.stopPropagation(), []);
+
+  const isTicketSaleActive = !!config?.ticketLink;
   const remainingDuration = Math.ceil((arrival - time) / 60000); // ms to minutes
+
+  const sheetClasses = cx('navi-bottom-sheet', {
+    'ticket-link': isTicketSaleActive,
+  });
+
+  const closeButton = (
+    <button type="button" onClick={handleClose} className="navi-close-button">
+      <FormattedMessage id="navigation-quit" />
+    </button>
+  );
+
+  const durationDiv = remainingDuration >= 0 && (
+    <div className="navi-time">
+      <span>
+        <FormattedMessage
+          id="travel-time"
+          values={{ min: remainingDuration }}
+        />
+      </span>
+      <span className="navi-daytime">{epochToTime(arrival, config)}</span>
+    </div>
+  );
+
+  const [FirstElement, SecondElement] = isTicketSaleActive
+    ? [closeButton, durationDiv]
+    : [durationDiv, closeButton];
+
   return (
-    <div className="navi-bottom-sheet">
-      <div className="navi-bottom-controls">
-        <button
-          type="button"
-          onClick={() => setNavigation(false)}
-          className="navi-close-button"
-        >
-          <FormattedMessage id="navigation-quit" />
+    <div className={sheetClasses}>
+      {FirstElement}
+      {SecondElement}
+      {isTicketSaleActive && (
+        <button type="button" className="navi-ticket-button">
+          <a
+            onClick={handleTicketButtonClick}
+            href={config.ticketLink}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <FormattedMessage id="navigation-ticket" />
+          </a>
         </button>
-
-        {remainingDuration >= 0 && (
-          <div className="navi-time">
-            <span>
-              <FormattedMessage
-                id="travel-time"
-                values={{ min: remainingDuration }}
-              />
-            </span>
-            <span className="navi-daytime">{epochToTime(arrival, config)}</span>
-          </div>
-        )}
-        {config.ticketLink && (
-          <button type="button" className="navi-ticket-button">
-            <a
-              onClick={e => {
-                e.stopPropagation();
-              }}
-              href={config.ticketLink}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <FormattedMessage id="navigation-ticket" />
-            </a>
-          </button>
-        )}
-      </div>
+      )}
     </div>
   );
 }

diff --git a/app/component/itinerary/navigator/NaviCardContainer.js b/app/component/itinerary/navigator/NaviCardContainer.js
@@ -141,7 +141,6 @@ function NaviCardContainer(
           nextLeg,
           firstLeg,
           time,
-          intl,
           config,
           messages,
         ),

diff --git a/app/component/itinerary/navigator/NaviUtils.js b/app/component/itinerary/navigator/NaviUtils.js
@@ -1,13 +1,13 @@
-import React from 'react';
 import distance from '@digitransit-search-util/digitransit-search-util-distance';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { ExtendedRouteTypes } from '../../../constants';
+import { getFaresFromLegs } from '../../../util/fareUtils';
 import { GeodeticToEnu } from '../../../util/geo-utils';
 import { legTime, legTimeAcc } from '../../../util/legUtils';
-import { timeStr, epochToIso } from '../../../util/timeUtils';
-import { getFaresFromLegs } from '../../../util/fareUtils';
-import { ExtendedRouteTypes } from '../../../constants';
-import { getItineraryPagePath } from '../../../util/path';
 import { locationToUri } from '../../../util/otpStrings';
+import { getItineraryPagePath } from '../../../util/path';
+import { epochToIso, timeStr } from '../../../util/timeUtils';
 
 const TRANSFER_SLACK = 60000;
 const DISPLAY_MESSAGE_THRESHOLD = 120 * 1000; // 2 minutes
@@ -217,7 +217,6 @@ export const getAdditionalMessages = (
   nextLeg,
   firstLeg,
   time,
-  intl,
   config,
   messages,
 ) => {
@@ -229,19 +228,21 @@ export const getAdditionalMessages = (
     legTime(leg.end) - time < DISPLAY_MESSAGE_THRESHOLD
   ) {
     // Todo: multiple fares?
-    const fare = getFaresFromLegs([nextLeg], config)[0];
-    msgs.push({
-      severity: 'INFO',
-      content: (
-        <div className="navi-info-content">
-          <FormattedMessage id="navigation-remember-ticket" />
-          <span>
-            {fare.ticketName} {fare.price} €
-          </span>
-        </div>
-      ),
-      id: 'ticket',
-    });
+    const fares = getFaresFromLegs([nextLeg], config);
+    if (fares?.length) {
+      msgs.push({
+        severity: 'INFO',
+        content: (
+          <div className="navi-info-content">
+            <FormattedMessage id="navigation-remember-ticket" />
+            <span>
+              {fares[0].ticketName} {fares[0].price} €
+            </span>
+          </div>
+        ),
+        id: 'ticket',
+      });
+    }
   }
   return msgs;
 };

diff --git a/app/component/itinerary/navigator/navigator.scss b/app/component/itinerary/navigator/navigator.scss
@@ -540,58 +540,58 @@ $fixed-width-padding: 16px;
 }
 
 .navi-bottom-sheet {
-  .divider {
-    width: 100%;
-    height: 1px;
-    border-top: 1px solid #ddd;
-    margin-top: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  font-size: $font-size-normal;
+  text-align: center;
+  margin: var(--space-m) var(--space-l);
+
+  &.ticket-link {
+    margin: var(--space-l) var(--space-m);
+
+    .navi-time {
+      align-items: inherit;
+    }
   }
 
-  .navi-bottom-controls {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    font-size: $font-size-normal;
+  .navi-close-button {
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 20px;
+    width: 100px;
+    height: 40px;
     text-align: center;
-    margin: 20px 24px 10px 24px;
-
-    .navi-close-button {
-      border-style: solid;
-      border-width: 1px;
-      border-radius: 20px;
-      width: 100px;
-      height: 40px;
-      text-align: center;
-      background-color: white;
-      border-color: $cancelation-red;
-      color: $cancelation-red;
-    }
+    background-color: white;
+    border-color: $cancelation-red;
+    color: $cancelation-red;
+  }
 
-    .navi-time {
-      display: flex;
-      flex-direction: column;
-      color: $black;
+  .navi-time {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    color: $black;
 
-      .navi-daytime {
-        font-size: $font-size-xsmall;
-        font-weight: $font-weight-book;
-      }
+    .navi-daytime {
+      font-size: $font-size-xsmall;
+      font-weight: $font-weight-book;
     }
+  }
 
-    .navi-ticket-button {
-      border-radius: 20px;
-      width: 100px;
-      height: 40px;
-      text-align: center;
-      margin-left: 16px;
-      background-color: $primary-color;
-      color: white;
+  .navi-ticket-button {
+    border-radius: 20px;
+    width: 100px;
+    height: 40px;
+    text-align: center;
+    margin-left: 16px;
+    background-color: $primary-color;
+    color: white;
 
-      a {
-        color: white;
-        text-decoration: none;
-      }
+    a {
+      color: white;
+      text-decoration: none;
     }
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -141,7 +141,6 @@ function NaviCardContainer( @@
               nextLeg,
               firstLeg,
               time,
-              intl,
               config,
               messages,
             ),
@@ Expand Down @@