From 167d08643a9872d35f1fcee971025d6988ba8925 Mon Sep 17 00:00:00 2001
From: Simo Partinen <simo.partinen@twoday.com>
Date: Tue, 31 Dec 2024 12:16:18 +0200
Subject: [PATCH 1/4] feat: ticketsaleless Navigator bottom sheet

---
 .../itinerary/navigator/NaviBottom.js         | 61 +++++++++++--------
 .../itinerary/navigator/navigator.scss        |  6 +-
 2 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/app/component/itinerary/navigator/NaviBottom.js b/app/component/itinerary/navigator/NaviBottom.js
index 9d6507b155..40c070cad0 100644
--- a/app/component/itinerary/navigator/NaviBottom.js
+++ b/app/component/itinerary/navigator/NaviBottom.js
@@ -1,3 +1,4 @@
+import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -8,35 +9,47 @@ export default function NaviBottom(
   { setNavigation, arrival, time },
   { config },
 ) {
+  const handleClose = () => setNavigation(false);
+  const handleTicketButtonClick = e => e.stopPropagation();
+
+  const isTicketSaleActive = !!config?.ticketLink;
   const remainingDuration = Math.ceil((arrival - time) / 60000); // ms to minutes
+
+  const controlsClasses = cx('navi-bottom-controls', {
+    '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" />
-        </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 && (
+      <div className={controlsClasses}>
+        {FirstElement}
+        {SecondElement}
+        {isTicketSaleActive && (
           <button type="button" className="navi-ticket-button">
             <a
-              onClick={e => {
-                e.stopPropagation();
-              }}
+              onClick={handleTicketButtonClick}
               href={config.ticketLink}
               target="_blank"
               rel="noopener noreferrer"
diff --git a/app/component/itinerary/navigator/navigator.scss b/app/component/itinerary/navigator/navigator.scss
index 5f09e1c6f8..84b07d618d 100644
--- a/app/component/itinerary/navigator/navigator.scss
+++ b/app/component/itinerary/navigator/navigator.scss
@@ -554,7 +554,11 @@ $fixed-width-padding: 16px;
     justify-content: space-between;
     font-size: $font-size-normal;
     text-align: center;
-    margin: 20px 24px 10px 24px;
+    margin: var(--space-m) var(--space-l);
+
+    &.ticket-link {
+      margin: var(--space-l) var(--space-m);
+    }
 
     .navi-close-button {
       border-style: solid;

From ac12e35fc6eed354c5264a1ebd140fbba793e334 Mon Sep 17 00:00:00 2001
From: Simo Partinen <simo.partinen@twoday.com>
Date: Tue, 31 Dec 2024 15:50:31 +0200
Subject: [PATCH 2/4] fix: Fixed fare issue in envs without ticket sales

---
 .../itinerary/navigator/NaviCardContainer.js  |  1 -
 .../itinerary/navigator/NaviUtils.js          | 39 ++++++++++---------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/app/component/itinerary/navigator/NaviCardContainer.js b/app/component/itinerary/navigator/NaviCardContainer.js
index 31c2282d08..322198c61b 100644
--- 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
index d258d9a5ba..ca607a9ee4 100644
--- 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;
 };

From 53aa7db7a0d6293d2bb5380c1260e7faf128aa08 Mon Sep 17 00:00:00 2001
From: Simo Partinen <simo.partinen@twoday.com>
Date: Tue, 31 Dec 2024 16:03:48 +0200
Subject: [PATCH 3/4] chore: removed unnecessary div

---
 .../itinerary/navigator/NaviBottom.js         | 34 ++++---
 .../itinerary/navigator/navigator.scss        | 90 +++++++++----------
 2 files changed, 59 insertions(+), 65 deletions(-)

diff --git a/app/component/itinerary/navigator/NaviBottom.js b/app/component/itinerary/navigator/NaviBottom.js
index 40c070cad0..d87cbef12b 100644
--- a/app/component/itinerary/navigator/NaviBottom.js
+++ b/app/component/itinerary/navigator/NaviBottom.js
@@ -15,7 +15,7 @@ export default function NaviBottom(
   const isTicketSaleActive = !!config?.ticketLink;
   const remainingDuration = Math.ceil((arrival - time) / 60000); // ms to minutes
 
-  const controlsClasses = cx('navi-bottom-controls', {
+  const sheetClasses = cx('navi-bottom-sheet', {
     'ticket-link': isTicketSaleActive,
   });
 
@@ -42,23 +42,21 @@ export default function NaviBottom(
     : [durationDiv, closeButton];
 
   return (
-    <div className="navi-bottom-sheet">
-      <div className={controlsClasses}>
-        {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>
-        )}
-      </div>
+    <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>
+      )}
     </div>
   );
 }
diff --git a/app/component/itinerary/navigator/navigator.scss b/app/component/itinerary/navigator/navigator.scss
index 84b07d618d..aa92bafea9 100644
--- a/app/component/itinerary/navigator/navigator.scss
+++ b/app/component/itinerary/navigator/navigator.scss
@@ -540,62 +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);
 
-  .navi-bottom-controls {
-    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);
 
-    &.ticket-link {
-      margin: var(--space-l) var(--space-m);
+    .navi-time {
+      align-items: inherit;
     }
+  }
 
-    .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;
-    }
+  .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;
+  }
 
-    .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;
     }
   }
 }

From 07c23ba5d1bb86fa51ce39df9e34313802ead71d Mon Sep 17 00:00:00 2001
From: Simo Partinen <simo.partinen@twoday.com>
Date: Tue, 31 Dec 2024 16:05:43 +0200
Subject: [PATCH 4/4] chore: useCallbacked functions

---
 app/component/itinerary/navigator/NaviBottom.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/component/itinerary/navigator/NaviBottom.js b/app/component/itinerary/navigator/NaviBottom.js
index d87cbef12b..d4b9140b40 100644
--- a/app/component/itinerary/navigator/NaviBottom.js
+++ b/app/component/itinerary/navigator/NaviBottom.js
@@ -1,6 +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';
@@ -9,8 +9,8 @@ export default function NaviBottom(
   { setNavigation, arrival, time },
   { config },
 ) {
-  const handleClose = () => setNavigation(false);
-  const handleTicketButtonClick = e => e.stopPropagation();
+  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