From 44186d1b0897d89277f4903f5c8415d265d0eb43 Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 11 Oct 2023 10:56:04 -0400
Subject: [PATCH] refactor: Optional lateness display

---
 example-config.yml                            |  2 +
 .../viewers/realtime-status-label.tsx         | 71 ++++++++++---------
 2 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/example-config.yml b/example-config.yml
index cc270ada0..6fa37cf94 100644
--- a/example-config.yml
+++ b/example-config.yml
@@ -349,6 +349,8 @@ itinerary:
   # This flag disables the dot between legs in the metro itnerary summary, replacing it with
   # a gray background
   disableMetroSeperatorDot: false
+  # Show the number of minutes of delay or early beneath a time in the itinerary body
+  showLateness: true
   # Shows the duration of a leg below the leg in the metro itinerary summary
   showLegDurations: false
   # The sort option to use by default
diff --git a/lib/components/viewers/realtime-status-label.tsx b/lib/components/viewers/realtime-status-label.tsx
index ff5f088d2..b4afaeddf 100644
--- a/lib/components/viewers/realtime-status-label.tsx
+++ b/lib/components/viewers/realtime-status-label.tsx
@@ -2,11 +2,11 @@
 // Typescript TODO: Waiting on viewer.js being typed
 import { connect } from 'react-redux'
 import { FormattedMessage, FormattedTime } from 'react-intl'
+import { InvisibleAdditionalDetails } from '@opentripplanner/itinerary-body/lib/styled'
 import React from 'react'
 import styled from 'styled-components'
 
 import { getTripStatus, REALTIME_STATUS } from '../../util/viewer'
-import { InvisibleAdditionalDetails } from '@opentripplanner/itinerary-body/lib/styled'
 import FormattedDuration from '../util/formatted-duration'
 import FormattedRealtimeStatusLabel from '../util/formatted-realtime-status-label'
 
@@ -66,6 +66,7 @@ const RealtimeStatusLabel = ({
   isRealtime,
   onTimeThresholdSeconds,
   originalTime,
+  showLateness,
   time,
   withBackground
 }: {
@@ -74,6 +75,7 @@ const RealtimeStatusLabel = ({
   isRealtime?: boolean
   onTimeThresholdSeconds?: number
   originalTime?: number
+  showLateness?: boolean
   time?: number
   withBackground?: boolean
 }): JSX.Element => {
@@ -117,45 +119,48 @@ const RealtimeStatusLabel = ({
       withBackground={withBackground}
     >
       {renderedTime}
-      <MainContent>
-        <FormattedRealtimeStatusLabel
-          minutes={
-            isEarlyOrLate ? (
-              <DelayText>
-                <FormattedDuration
-                  duration={Math.abs(delay)}
-                  includeSeconds={false}
-                />
-              </DelayText>
-            ) : (
-              <>{null}</>
-            )
-          }
-          // @ts-ignore getTripStatus is not typed yet
-          status={STATUS[status].label}
-        />
-        {isEarlyOrLate && (
-          <InvisibleAdditionalDetails>
-            <FormattedMessage
-              id="components.MetroUI.originallyScheduledTime"
-              values={{
-                originalTime: (
-                  <FormattedTime timeStyle="short" value={originalTime} />
-                )
-              }}
-            />
-          </InvisibleAdditionalDetails>
-        )}
-      </MainContent>
+      {showLateness && (
+        <MainContent>
+          <FormattedRealtimeStatusLabel
+            minutes={
+              isEarlyOrLate ? (
+                <DelayText>
+                  <FormattedDuration
+                    duration={Math.abs(delay)}
+                    includeSeconds={false}
+                  />
+                </DelayText>
+              ) : (
+                <>{null}</>
+              )
+            }
+            // @ts-ignore getTripStatus is not typed yet
+            status={STATUS[status].label}
+          />
+          {isEarlyOrLate && (
+            <InvisibleAdditionalDetails>
+              <FormattedMessage
+                id="components.MetroUI.originallyScheduledTime"
+                values={{
+                  originalTime: (
+                    <FormattedTime timeStyle="short" value={originalTime} />
+                  )
+                }}
+              />
+            </InvisibleAdditionalDetails>
+          )}
+        </MainContent>
+      )}
     </Container>
   )
 }
 
 const mapStateToProps = (state: {
   // Typescript TODO: type state
-  otp: { config: { onTimeThresholdSeconds: any } }
+  otp: { config: { onTimeThresholdSeconds: any; showLateness: boolean } }
 }) => ({
-  onTimeThresholdSeconds: state.otp.config.onTimeThresholdSeconds
+  onTimeThresholdSeconds: state.otp.config.onTimeThresholdSeconds,
+  showLateness: state.otp.config.showLateness
 })
 
 export default connect(mapStateToProps)(RealtimeStatusLabel)