Merge pull request #5210 from HSLdevcom/DT-6620

DT-6620:Fix top cards width and another small adjustments

Author: vesameskanen

app/component/itinerary/navigator/NaviCardContainer.js

@@ -18,12 +18,34 @@ import { updateClient, getTopics } from '../ItineraryPageUtils';
 
 const TIME_AT_DESTINATION = 3; // * 10 seconds
 const TOPBAR_PADDING = 8; // pixels
+const HIDE_TOPCARD_DURATION = 2000; // milliseconds
 
 function addMessages(incominMessages, newMessages) {
   newMessages.forEach(m => {
     incominMessages.set(m.id, m);
   });
 }
+
+const handleLegChange = (leg, firstLeg, time) => {
+  let legType;
+  if (time < legTime(firstLeg.start)) {
+    legType = LEGTYPE.PENDING;
+  } else if (leg) {
+    if (!leg.transitLeg) {
+      if (leg.current >= TIME_AT_DESTINATION) {
+        legType = LEGTYPE.WAIT;
+      } else {
+        legType = LEGTYPE.MOVE;
+      }
+    } else {
+      legType = LEGTYPE.TRANSIT;
+    }
+  } else {
+    legType = LEGTYPE.WAIT;
+  }
+  return legType;
+};
+
 function NaviCardContainer(
   {
     focusToLeg,
@@ -36,6 +58,7 @@ function NaviCardContainer(
     nextLeg,
     firstLeg,
     lastLeg,
+    previousLeg,
     isJourneyCompleted,
   },
   context,
@@ -45,8 +68,7 @@ function NaviCardContainer(
   const [messages, setMessages] = useState(new Map());
   // notifications that are shown to the user.
   const [activeMessages, setActiveMessages] = useState([]);
-  const [topPosition, setTopPosition] = useState(0);
-
+  const [legChanging, setLegChanging] = useState(false);
   const legRef = useRef(currentLeg);
   const focusRef = useRef(false);
   // Destination counter. How long user has been at the destination. * 10 seconds
@@ -73,14 +95,6 @@ function NaviCardContainer(
     updateClient(topics, context);
   }, []);
 
-  useEffect(() => {
-    if (cardRef.current) {
-      const contentHeight = cardRef.current.getBoundingClientRect();
-      // Navistack top position depending on main card height.
-      setTopPosition(contentHeight.bottom + TOPBAR_PADDING);
-    }
-  }, [currentLeg, cardExpanded]);
-
   useEffect(() => {
     const incomingMessages = new Map();
 
@@ -113,9 +127,14 @@ function NaviCardContainer(
         ...getAdditionalMessages(nextLeg, time, intl, config, messages),
       ]);
     }
+    let timeoutId;
     if (legChanged) {
       updateClient(topics, context);
       setCardExpanded(false);
+      setLegChanging(true);
+      timeoutId = setTimeout(() => {
+        setLegChanging(false);
+      }, HIDE_TOPCARD_DURATION);
       if (currentLeg) {
         focusToLeg?.(currentLeg);
       }
@@ -161,32 +180,27 @@ function NaviCardContainer(
       // Todo: this works in transit legs, but do we need additional logic for bikes / scooters?
       destCountRef.current = 0;
     }
+
+    return () => clearTimeout(timeoutId);
   }, [time]);
 
-  let legType;
-
-  if (time < legTime(firstLeg.start)) {
-    legType = LEGTYPE.PENDING;
-  } else if (currentLeg) {
-    if (!currentLeg.transitLeg) {
-      if (destCountRef.current >= TIME_AT_DESTINATION) {
-        legType = LEGTYPE.WAIT;
-      } else {
-        legType = LEGTYPE.MOVE;
-      }
-    } else {
-      legType = LEGTYPE.TRANSIT;
-    }
-  } else {
-    legType = LEGTYPE.WAIT;
-  }
+  // LegChange fires animation, we need to keep the old data until card goes out of the view.
+  const l = legChanging ? previousLeg : currentLeg;
+  const legType = handleLegChange(l, firstLeg, time);
 
   const containerTopPosition =
     mapLayerRef.current.getBoundingClientRect().top + TOPBAR_PADDING;
-
+  let className;
+  if (isJourneyCompleted) {
+    className = 'slide-out';
+  } else if (legChanging) {
+    className = 'hide-card';
+  } else {
+    className = 'show-card';
+  }
   return (
     <div
-      className={`navi-card-container ${isJourneyCompleted ? 'slide-out' : ''}`}
+      className={`navi-card-container ${className}`}
       style={{ top: containerTopPosition }}
     >
       <button
@@ -197,7 +211,7 @@ function NaviCardContainer(
       >
         <div className="content">
           <NaviCard
-            leg={currentLeg}
+            leg={l}
             nextLeg={nextLeg}
             cardExpanded={cardExpanded}
             legType={legType}
@@ -209,11 +223,7 @@ function NaviCardContainer(
         </div>
       </button>
       {activeMessages.length > 0 && (
-        <NaviStack
-          messages={activeMessages}
-          handleRemove={handleRemove}
-          topPosition={topPosition}
-        />
+        <NaviStack messages={activeMessages} handleRemove={handleRemove} />
       )}
     </div>
   );
@@ -237,6 +247,7 @@ NaviCardContainer.propTypes = {
   nextLeg: legShape,
   firstLeg: legShape,
   lastLeg: legShape,
+  previousLeg: legShape,
   isJourneyCompleted: PropTypes.bool,
 
   /*
@@ -251,6 +262,7 @@ NaviCardContainer.defaultProps = {
   nextLeg: undefined,
   firstLeg: undefined,
   lastLeg: undefined,
+  previousLeg: undefined,
   isJourneyCompleted: false,
 };
 

app/component/itinerary/navigator/NaviContainer.js

@@ -86,6 +86,7 @@ function NaviContainer(
         firstLeg={firstLeg}
         lastLeg={lastLeg}
         isJourneyCompleted={isJourneyCompleted}
+        previousLeg={previousLeg}
       />
       {isJourneyCompleted && isNavigatorIntroDismissed && (
         <NavigatorOutroModal

app/component/itinerary/navigator/NaviStack.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import NaviMessage from './NaviMessage';
 
-const NaviStack = ({ messages, handleRemove, topPosition }) => {
+const NaviStack = ({ messages, handleRemove }) => {
   return (
-    <div className={cx('info-stack', 'slide-in')} style={{ top: topPosition }}>
+    <div className={cx('info-stack', 'slide-in')}>
       {messages.map((notification, index) => (
         <NaviMessage
           key={notification.id}
@@ -29,7 +29,6 @@ NaviStack.propTypes = {
     }),
   ).isRequired,
   handleRemove: PropTypes.func.isRequired,
-  topPosition: PropTypes.number.isRequired,
 };
 
 export default NaviStack;

app/component/itinerary/navigator/NaviUtils.js

@@ -321,7 +321,7 @@ export const getItineraryAlerts = (
             <span className="header"> {alert.alertHeaderText}</span>
           </div>
         ),
-        id: alert.id,
+        id: `${alert.effectiveStartDate}-${alert.alertDescriptionText}`,
       }));
   });
   const abortTrip = <FormattedMessage id="navigation-abort-trip" />;
@@ -368,6 +368,7 @@ export const getItineraryAlerts = (
           content,
           id: `canceled-${legId}`,
           hideClose: true,
+          expiresOn: alert.effectiveEndDate * 1000,
         });
       }
     });

app/component/itinerary/navigator/navigator.scss

@@ -1,3 +1,5 @@
+$fixed-width-padding: 16px;
+
 .navi-start-container {
   padding: 0 10px;
 
@@ -48,12 +50,19 @@
   &.slide-out {
     animation: slideUpToTop 3s ease-out forwards;
   }
+
+  &.hide-card {
+    animation: hideTopCard 2s ease-out forwards;
+    pointer-events: none;
+  }
+
+  &.show-card {
+    animation: slideDownFromTop 2s ease-out forwards;
+  }
 }
 
 .navitop {
-  margin-bottom: 5px;
-  width: 92%;
-  margin-left: 8px;
+  margin: 0 var(--space-s) 5px var(--space-s);
   border-radius: 8px;
   min-height: 70px;
   color: black;
@@ -62,6 +71,7 @@
   align-items: center;
   letter-spacing: -0.3px;
   box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.2);
+  width: calc(100vw - #{$fixed-width-padding});
 
   &.expanded {
     max-height: unset;
@@ -120,10 +130,9 @@
 
         .wait-leg {
           display: flex;
-          align-items: center;
           margin-top: 3px;
           flex-direction: column;
-          align-self: flex-start;
+          align-items: flex-start;
 
           .route-info {
             display: flex;
@@ -365,9 +374,10 @@
 .info-stack {
   position: fixed;
   height: 69px;
-  margin-left: 8px;
-  width: 90%;
   letter-spacing: -0.3px;
+  width: calc(100% - #{$fixed-width-padding});
+  margin-right: 8px;
+  margin-left: 8px;
 
   div:first-child {
     margin-top: 0;
@@ -418,6 +428,8 @@
       .navi-alert-content {
         width: 100%;
         margin: 0 8px;
+        display: flex;
+        flex-direction: column;
       }
     }
 
@@ -428,6 +440,7 @@
         display: flex;
         flex-direction: column;
         margin: 0 8px;
+        width: 100%;
 
         span:first-child {
           font-weight: $font-weight-medium;
@@ -443,24 +456,24 @@
           font-size: $font-size-small;
         }
       }
+    }
 
-      .alt-btn {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-
-        .show-options {
-          padding: var(--space-s, 16px) var(--space-xs, 8px)
-            var(--space-s, 16px) var(--space-s, 16px);
-          background: #0074bf;
-          color: #fff;
-          border-radius: 999px; // var(--radius-radius-medium, 8px);
-          margin-top: var(--space-xxs);
+    .alt-btn {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
 
-          /* box-shadow-card-s-strong */
-          box-shadow: 0 2px 4px 0
-            var(--color-shadow-strong, rgba(51, 51, 51, 0.2));
-        }
+      .show-options {
+        padding: var(--space-s, 16px) var(--space-xs, 8px) var(--space-s, 16px)
+          var(--space-s, 16px);
+        background: #0074bf;
+        color: #fff;
+        border-radius: 999px; // var(--radius-radius-medium, 8px);
+        margin-top: var(--space-xxs);
+
+        /* box-shadow-card-s-strong */
+        box-shadow: 0 2px 4px 0
+          var(--color-shadow-strong, rgba(51, 51, 51, 0.2));
       }
     }
 
@@ -601,6 +614,16 @@
   }
 }
 
+@keyframes hideTopCard {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(-100%);
+  }
+}
+
 @keyframes slideUpFromBottom {
   from {
     transform: translateY(100%);