Merge pull request opentripplanner#750 from ibi-group/add-about-to-no…

…ntransit-legs Add approximate prefix to non transit leg durations
ibi-group · Jul 8, 2024 · dd8e3c3 · dd8e3c3
2 parents add63cd + ac662e8
commit dd8e3c3
Show file tree

Hide file tree

Showing 28 changed files with 33,001 additions and 25,503 deletions.
diff --git a/__snapshots__/storybook.test.ts.snap b/__snapshots__/storybook.test.ts.snap
diff --git a/packages/itinerary-body/i18n/en-US.yml b/packages/itinerary-body/i18n/en-US.yml
@@ -69,7 +69,9 @@ otpUi:
       vehicle: Vehicle
   ItineraryBody:
     common:
-      durationShort: "{hours, plural, =0 {} other {# hr }}{minutes} min"
+      durationShort: >-
+        {approximatePrefix, select, true {About } other {}}{hours, plural, =0 {}
+        other {# hr }}{minutes} min
     flexAdvanceNotice: " at least {leadDays, plural, one {# day} other {# days}} in advance"
     flexCallAhead: call ahead
     flexCallNumber: call {phoneNumber}

diff --git a/packages/itinerary-body/i18n/es.yml b/packages/itinerary-body/i18n/es.yml
@@ -18,15 +18,12 @@ otpUi:
       bookRide: Reservar un viaje
       bookRideLater: Espere hasta las {timeMillis, time, short} para reservar
       estimatedCost: "Costo estimado: {minFare} - {maxFare}"
-      estimatedTravelTime: "Tiempo de viaje estimado: {duration} (no tiene en cuenta
-        el tráfico)"
-      waitForPickup: "Espera al conductor {company}{minutes, plural, =0 {} other {
-        # minutos}}"
+      estimatedTravelTime: "Tiempo de viaje estimado: {duration} (no tiene en cuenta el tráfico)"
+      waitForPickup: "Espera al conductor {company}{minutes, plural, =0 {} other { # minutos}}"
     mapillaryTooltip: Mostrar imágenes de la calle en esta ubicación
     step:
       circleClockwise: Siga el círculo en el sentido de las agujas del reloj
-      circleCounterClockwise: Siga el círculo en sentido contrario a las agujas del
-        reloj
+      circleCounterClockwise: Siga el círculo en sentido contrario a las agujas del reloj
       continue: Continuar
       enterStation: Entrar a la estación
       exitStation: Salir de la estación
@@ -72,9 +69,10 @@ otpUi:
       vehicle: Vehículo
   ItineraryBody:
     common:
-      durationShort: "{hours, plural, =0 {} other {# hr. }}{minutes} min"
-    flexAdvanceNotice: " al menos {leadDays, plural, one {# día} other {# días}} de
-      antelación"
+      durationShort: >-
+        {approximatePrefix, select, true {Unos } other {}}{hours, plural, =0 {}
+        other {# hr. }}{minutes} min
+    flexAdvanceNotice: " al menos {leadDays, plural, one {# día} other {# días}} de antelación"
     flexCallAhead: llama con anticipación
     flexCallNumber: llama {phoneNumber}
     flexPickupMessage: Para tomar esta ruta, tiene que {action}{advanceNotice}.
@@ -85,13 +83,13 @@ otpUi:
       car: en carro
       escooter: en patineta
       walk: a pie
-    viewOnMap: Ver en el mapa
     tripAccessibility:
       inaccessible: inaccesible
-      unclear: desconocido
-      legAccessibility: 'Accesibilidad para sillas de ruedas en este tramo del viaje: '
+      itineraryAccessibility: "Accesibilidad para sillas de ruedas en este viaje: "
+      legAccessibility: "Accesibilidad para sillas de ruedas en este tramo del viaje: "
       likelyAccessible: probablemente accesible
-      itineraryAccessibility: 'Accesibilidad para sillas de ruedas en este viaje: '
+      unclear: desconocido
+    viewOnMap: Ver en el mapa
   TransitLegBody:
     AlertsBody:
       effectiveDate: A partir de {dateTime, date, long}

diff --git a/packages/itinerary-body/i18n/fr.yml b/packages/itinerary-body/i18n/fr.yml
@@ -73,7 +73,9 @@ otpUi:
       vehicle: Véhicule
   ItineraryBody:
     common:
-      durationShort: "{hours, plural, =0 {} other {# h }}{minutes} min"
+      durationShort: >-
+        {approximatePrefix, select, true {Environ } other {}}{hours, plural, =0
+        {} other {# h }}{minutes} min
     flexAdvanceNotice: " au moins {leadDays, plural, one {# jour} other {# jours}} à l'avance"
     flexCallAhead: réserver au préalable
     flexCallNumber: réserver au {phoneNumber}

diff --git a/packages/itinerary-body/i18n/ko.yml b/packages/itinerary-body/i18n/ko.yml
@@ -69,7 +69,9 @@ otpUi:
       vehicle: 차량
   ItineraryBody:
     common:
-      durationShort: "{hours, plural, =0 {} other {# 시간 }}{minutes} 분"
+      durationShort: >-
+        {approximatePrefix, select, true {약 } other {}}{hours, plural, =0 {}
+        other {# 시간 }}{minutes} 분
     flexAdvanceNotice: " 최소 {leadDays}일 전에"
     flexCallAhead: 미리 전화
     flexCallNumber: "{phoneNumber}에 전화"

diff --git a/packages/itinerary-body/i18n/ru.yml b/packages/itinerary-body/i18n/ru.yml
@@ -69,7 +69,9 @@ otpUi:
       vehicle: Транспортное средство
   ItineraryBody:
     common:
-      durationShort: "{hours, plural, =0 {} other {# ч }}{minutes} мин"
+      durationShort: >-
+        {approximatePrefix, select, true {Около } other {}}{hours, plural, =0 {}
+        other {# ч }}{minutes} мин
     flexCallAhead: звоните заранее
     flexCallNumber: звоните {phoneNumber}
     flexPickupMessage: Чтобы воспользоваться этим маршрутом, {action}{advanceNotice}.

diff --git a/packages/itinerary-body/i18n/vi.yml b/packages/itinerary-body/i18n/vi.yml
@@ -69,7 +69,9 @@ otpUi:
       vehicle: Xe
   ItineraryBody:
     common:
-      durationShort: "{hours, plural, =0 {} other {# giờ }}{minutes} phút"
+      durationShort: >-
+        {approximatePrefix, select, true {Khoảng } other {}}{hours, plural, =0
+        {} other {# giờ }}{minutes} phút
     flexAdvanceNotice: " ít nhất trước {leadDays} ngày"
     flexCallAhead: gọi điện trước khi đi
     flexCallNumber: gọi {phoneNumber}

diff --git a/packages/itinerary-body/i18n/zh_Hans.yml b/packages/itinerary-body/i18n/zh_Hans.yml
@@ -69,7 +69,9 @@ otpUi:
       vehicle: 车辆
   ItineraryBody:
     common:
-      durationShort: "{hours, plural, =0 {} other {# 시간 }}{minutes} 分钟"
+      durationShort: >-
+        {approximatePrefix, select, true {约 } other {}}{hours, plural, =0 {}
+        other {# 시간 }}{minutes} 分钟
     flexAdvanceNotice: " 至少提前 {leadDays} 天"
     flexCallAhead: 提前打电话
     flexCallNumber: 拨打 {phoneNumber}

diff --git a/packages/itinerary-body/src/AccessLegBody/index.tsx b/packages/itinerary-body/src/AccessLegBody/index.tsx
@@ -1,4 +1,5 @@
 import { Config, Leg, LegIconComponent } from "@opentripplanner/types";
+import { isTransit } from "@opentripplanner/core-utils/lib/itinerary";
 import React, { Component, FunctionComponent, ReactElement } from "react";
 import AnimateHeight from "react-animate-height";
 import { FormattedMessage } from "react-intl";
@@ -35,6 +36,7 @@ interface Props {
   mapillaryKey?: string;
   setActiveLeg: SetActiveLegFunction;
   setLegDiagram: (leg: Leg) => void;
+  showApproximateTravelTime?: boolean;
   showElevationProfile: boolean;
   showLegIcon: boolean;
   TransitLegSubheader?: FunctionComponent<TransitLegSubheaderProps>;
@@ -75,6 +77,7 @@ class AccessLegBody extends Component<Props, State> {
       mapillaryCallback,
       mapillaryKey,
       setLegDiagram,
+      showApproximateTravelTime,
       showElevationProfile,
       showLegIcon,
       TransitLegSubheader
@@ -137,7 +140,12 @@ class AccessLegBody extends Component<Props, State> {
                     aria-expanded={expanded}
                     onClick={this.onStepsHeaderClick}
                   >
-                    <Duration seconds={leg.duration} />
+                    <Duration
+                      seconds={leg.duration}
+                      showApproximatePrefix={
+                        showApproximateTravelTime && !isTransit(leg.mode)
+                      }
+                    />
                     {leg.steps && leg.steps.length > 0 && (
                       <S.CaretToggle expanded={expanded} />
                     )}

diff --git a/packages/itinerary-body/src/ItineraryBody/index.tsx b/packages/itinerary-body/src/ItineraryBody/index.tsx
@@ -33,6 +33,7 @@ const ItineraryBody = ({
   setActiveLeg,
   setLegDiagram,
   setViewedTrip,
+  showApproximateAccessLegTravelTimes,
   showAgencyInfo,
   showElevationProfile,
   showLegIcon,
@@ -82,6 +83,9 @@ const ItineraryBody = ({
           setActiveLeg={setActiveLeg}
           setLegDiagram={setLegDiagram}
           setViewedTrip={setViewedTrip}
+          showApproximateAccessLegTravelTimes={
+            showApproximateAccessLegTravelTimes
+          }
           showAgencyInfo={showAgencyInfo}
           showElevationProfile={showElevationProfile}
           showLegIcon={showLegIcon}

diff --git a/packages/itinerary-body/src/ItineraryBody/place-row.tsx b/packages/itinerary-body/src/ItineraryBody/place-row.tsx
@@ -40,6 +40,7 @@ export default function PlaceRow({
   setLegDiagram,
   setViewedTrip,
   showAgencyInfo,
+  showApproximateAccessLegTravelTimes,
   showElevationProfile,
   showLegIcon,
   showMapButtonColumn,
@@ -177,6 +178,7 @@ export default function PlaceRow({
               mapillaryKey={mapillaryKey}
               setActiveLeg={setActiveLeg}
               setLegDiagram={setLegDiagram}
+              showApproximateTravelTime={showApproximateAccessLegTravelTimes}
               showElevationProfile={showElevationProfile}
               showLegIcon={showLegIcon}
               TransitLegSubheader={TransitLegSubheader}

diff --git a/packages/itinerary-body/src/defaults/duration.tsx b/packages/itinerary-body/src/defaults/duration.tsx
@@ -6,21 +6,28 @@ import { defaultMessages } from "../util";
 
 interface Props {
   seconds: number;
+  showApproximatePrefix?: boolean;
 }
 
 /**
  * This is a clickable component that summarizes the leg (travel time, stops
  * passed). On click it will expand and show the list of intermediate stops.
  */
-export default function Duration({ seconds }: Props): ReactElement {
+export default function Duration({
+  seconds,
+  showApproximatePrefix
+}: Props): ReactElement {
   return (
     <FormattedMessage
       defaultMessage={
         defaultMessages["otpUi.ItineraryBody.common.durationShort"]
       }
       description="Duration in abbreviated hours (if over one hour) and minutes"
       id="otpUi.ItineraryBody.common.durationShort"
-      values={coreUtils.time.toHoursMinutesSeconds(seconds)}
+      values={{
+        ...coreUtils.time.toHoursMinutesSeconds(seconds),
+        approximatePrefix: showApproximatePrefix
+      }}
     />
   );
 }
diff --git a/packages/itinerary-body/src/stories/OtpRrItineraryBody.story.tsx b/packages/itinerary-body/src/stories/OtpRrItineraryBody.story.tsx
@@ -59,6 +59,7 @@ interface StoryWrapperProps {
   defaultFareSelector?: FareProductSelector;
   hideDrivingDirections?: boolean;
   itinerary: Itinerary;
+  showApproximateAccessLegTravelTimes?: boolean;
   TimeColumnContent?: FunctionComponent<TimeColumnContentProps>;
 }
 
@@ -67,6 +68,7 @@ function OtpRRItineraryBodyWrapper({
   defaultFareSelector,
   hideDrivingDirections = false,
   itinerary,
+  showApproximateAccessLegTravelTimes = false,
   TimeColumnContent
 }: StoryWrapperProps): ReactElement {
   return (
@@ -80,6 +82,7 @@ function OtpRRItineraryBodyWrapper({
       PlaceName={OtpRRPlaceName}
       RouteDescription={OtpRRRouteDescription}
       showAgencyInfo
+      showApproximateAccessLegTravelTimes={showApproximateAccessLegTravelTimes}
       showLegIcon
       showMapButtonColumn={false}
       showViewTripButton
@@ -243,3 +246,10 @@ export const HideDrivingDirections = (): ReactElement => (
     itinerary={parkAndRideItinerary}
   />
 );
+
+export const ApproximatePrefixItinerary = (): ReactElement => (
+  <OtpRRItineraryBodyWrapper
+    itinerary={walkTransitWalkItinerary}
+    showApproximateAccessLegTravelTimes
+  />
+);
diff --git a/packages/itinerary-body/src/stories/OtpUiItineraryBody.story.tsx b/packages/itinerary-body/src/stories/OtpUiItineraryBody.story.tsx
@@ -226,3 +226,10 @@ export const HideDrivingDirections = (): ReactElement => (
     itinerary={parkAndRideItinerary}
   />
 );
+
+export const ApproximatePrefixItinerary = (): ReactElement => (
+  <ItineraryBodyDefaultsWrapper
+    itinerary={parkAndRideItinerary}
+    showApproximateAccessLegTravelTimes
+  />
+);
diff --git a/packages/itinerary-body/src/stories/itinerary-body-defaults-wrapper.tsx b/packages/itinerary-body/src/stories/itinerary-body-defaults-wrapper.tsx
@@ -53,6 +53,7 @@ export default class ItineraryBodyDefaultsWrapper extends Component<
       RouteDescription,
       RouteDescriptionFooter = undefined,
       showAgencyInfo,
+      showApproximateAccessLegTravelTimes = false,
       showLegIcon,
       showMapButtonColumn = true,
       showViewTripButton,
@@ -104,6 +105,9 @@ export default class ItineraryBodyDefaultsWrapper extends Component<
         setLegDiagram={this.setLegDiagram}
         setViewedTrip={action("setViewedTrip")}
         showAgencyInfo={showAgencyInfo}
+        showApproximateAccessLegTravelTimes={
+          showApproximateAccessLegTravelTimes
+        }
         showElevationProfile
         showLegIcon={showLegIcon}
         showMapButtonColumn={showMapButtonColumn}

diff --git a/packages/itinerary-body/src/styled.tsx b/packages/itinerary-body/src/styled.tsx
@@ -387,7 +387,7 @@ export const LineColumn = styled.div`
 
 export const LegDetails = styled.span`
   display: grid;
-  grid-template-columns: 100px auto;
+  grid-template-columns: 130px auto;
 `;
 
 export const PlaceRowWrapper = styled.li`

diff --git a/packages/itinerary-body/src/types.ts b/packages/itinerary-body/src/types.ts
@@ -201,6 +201,8 @@ interface ItineraryBodySharedProps {
   setViewedTrip: SetViewedTripFunction;
   /** If true, will show agency information in transit legs */
   showAgencyInfo?: boolean;
+  /** Whether to prefix non transit legs with 'About' text */
+  showApproximateAccessLegTravelTimes?: boolean;
   /** If true, will show the elevation profile for walk/bike legs */
   showElevationProfile?: boolean;
   /** If true will show the leg icon in the leg body */

diff --git a/packages/trip-details/i18n/en-US.yml b/packages/trip-details/i18n/en-US.yml
@@ -18,8 +18,8 @@ otpUi:
     hideDetail: Hide details
     legMissingFareInfo: No fare information for this leg
     minutesActive: >-
-      Time Spent Active: <strong>{minutes, plural, one {# minute} other {#
-      minutes}}</strong>
+      Time Spent Active: <strong>{approximatePrefix, select, true {~} other
+      {}}{minutes, plural, one {# minute} other {# minutes}}</strong>
     missingFareTotal: No fare total available
     showDetail: Show details
     timeActiveDescription: >

diff --git a/packages/trip-details/i18n/es.yml b/packages/trip-details/i18n/es.yml
@@ -16,9 +16,11 @@ otpUi:
       Salida <strong>{departureDate, date, long}</strong> a las
       <strong>{departureDate, time, short}</strong>
     hideDetail: Ocultar detalles
+    legMissingFareInfo: No hay información sobre tarifas para este tramo
     minutesActive: >-
-      Tiempo de actividad: <strong>{minutes, plural, one {# minuto} other {#
-      minutos}}</strong>
+      Tiempo de actividad: <strong>{approximatePrefix, select, true {~} other
+      {}}{minutes, plural, one {# minuto} other {# minutos}}</strong>
+    missingFareTotal: No hay tarifas disponibles
     showDetail: Mostrar detalles
     timeActiveDescription: >
       Al hacer este viaje, gastarás <strong>{walkMinutes, plural, one {# minuto}
@@ -30,5 +32,3 @@ otpUi:
     transitFare: Tarifa de tránsito
     transitFareEntry: "{name} : <strong>{value}</strong>"
     tripIncludesFlex: Este viaje incluye rutas flexibles. {extraMessage}
-    missingFareTotal: No hay tarifas disponibles
-    legMissingFareInfo: No hay información sobre tarifas para este tramo
diff --git a/packages/trip-details/i18n/fr.yml b/packages/trip-details/i18n/fr.yml
@@ -17,7 +17,7 @@ otpUi:
       <strong>{departureDate, time, short}</strong>
     hideDetail: Masquer les détails
     legMissingFareInfo: Tarif inconnu pour cette étape
-    minutesActive: "Activité physique\_: <strong>{minutes, plural, one {# minute} other {# minutes}}</strong>"
+    minutesActive: "Activité physique\_: <strong>{approximatePrefix, select, true {~} other {}}{minutes, plural, one {# minute} other {# minutes}}</strong>"
     missingFareTotal: Tarif total inconnu
     showDetail: Afficher les détails
     timeActiveDescription: >

diff --git a/packages/trip-details/i18n/ko.yml b/packages/trip-details/i18n/ko.yml
@@ -15,7 +15,9 @@ otpUi:
       <strong>{departureDate, time, short}</strong>에 <strong>{departureDate,
       date, long}</strong> 출발
     hideDetail: 세부정보 숨기기
-    minutesActive: "소요 시간 사용 중: <strong>{minutes} 분</strong>"
+    minutesActive: >-
+      소요 시간 사용 중: <strong>{approximatePrefix, select, true {약 } other
+      {}}{minutes} 분</strong>
     showDetail: 세부정보 표시
     timeActiveDescription: >
       이 이동편을 이용하면, 도보로 <strong>{walkMinutes} 분</strong> 및 자전거로

diff --git a/packages/trip-details/i18n/ru.yml b/packages/trip-details/i18n/ru.yml
@@ -18,8 +18,8 @@ otpUi:
       <strong>{departureDate, time, short}</strong>
     hideDetail: Скрыть детали
     minutesActive: >-
-      Время в активном режиме: <strong>{minutes, plural, one {# минуту} other {#
-      минуты}}</strong>
+      Время в активном режиме: <strong>{approximatePrefix, select, true {~}
+      other {}}{minutes, plural, one {# минуту} other {# минуты}}</strong>
     showDetail: Показать детали
     timeActiveDescription: >
       Проделав этот маршрут, вы потратите <strong>{walkMinutes, plural, one {#

diff --git a/packages/trip-details/i18n/tl.yml b/packages/trip-details/i18n/tl.yml
@@ -17,7 +17,9 @@ otpUi:
       Aalis <strong>{departureDate, date, long}</strong> nang
       <strong>{departureDate, time, short}</strong>
     hideDetail: Itago ang mga detalye
-    minutesActive: "Oras na Ginugol sa pagiging Aktibo: <strong>{minutes} minuto</strong>"
+    minutesActive: >-
+      Oras na Ginugol sa pagiging Aktibo: <strong>{approximatePrefix, select,
+      true {~} other {}}{minutes} minuto</strong>
     showDetail: Ipakita ang mga detalye
     timeActiveDescription: >
       Sa pagbiyahe nang ganitong paraan, gugugol ka ng <strong>{walkMinutes}

diff --git a/packages/trip-details/i18n/vi.yml b/packages/trip-details/i18n/vi.yml
@@ -16,7 +16,9 @@ otpUi:
       Khởi hành <strong>{departureDate, date, long}</strong> lúc
       <strong>{departureDate, time, short}</strong>
     hideDetail: Ẩn chi tiết
-    minutesActive: "Thời gian hoạt động: <strong>{minutes} phút</strong>"
+    minutesActive: >-
+      Thời gian hoạt động: <strong>{approximatePrefix, select, true {~} other
+      {}}{minutes} phút</strong>
     showDetail: Hiển thị chi tiết
     timeActiveDescription: >
       Nếu thực hiện chuyến đi này, quý vị sẽ dành <strong>{walkMinutes}

diff --git a/packages/trip-details/i18n/zh_Hans.yml b/packages/trip-details/i18n/zh_Hans.yml
@@ -13,7 +13,9 @@ otpUi:
       <strong>{departureDate, date, long}</strong> <strong>{departureDate, time,
       short}</strong> 出发
     hideDetail: 隐藏细节
-    minutesActive: "活动时间: <strong>{minutes} 分钟</strong>"
+    minutesActive: >-
+      活动时间: <strong>{approximatePrefix, select, true {约 } other {}}{minutes}
+      分钟</strong>
     showDetail: 显示详细资料
     timeActiveDescription: >
       在本次行程中，您将步行 <strong>{walkMinutes} 分钟</strong>，骑行<strong>{bikeMinutes}