Merge branch 'dev' into build-with-vite

Author: binh-dam-ibigroup

__tests__/components/viewers/__snapshots__/nearby-view.js.snap

@@ -211,7 +211,7 @@ exports[`components > viewers > stop viewer should render with initial stop id a
                         >
                           <Styled(styled.span)>
                             <span
-                              className="sc-bSFUlv sc-jvfqPk gFxSud bAWwqY"
+                              className="sc-hkwmXC sc-bSFUlv eFsrhn gAUjbw"
                             >
                               <ArrowLeft>
                                 <StyledIconBase
@@ -267,11 +267,11 @@ exports[`components > viewers > stop viewer should render with initial stop id a
                 </div>
                 <styled.div>
                   <div
-                    className="sc-hRxcUd bbPqpb"
+                    className="sc-bTRMho fIdSEr"
                   >
                     <styled.div>
                       <div
-                        className="sc-hYAvtR eOlYfy"
+                        className="sc-iWRHom bUIXtU"
                       >
                         <h1>
                           <FormattedMessage

__tests__/components/viewers/__snapshots__/stop-schedule-viewer.ts.snap

@@ -438,6 +438,8 @@ itinerary:
   previewOverlay: false
   # Whether to add a OTP_RR_A11Y_ROUTING_ENABLED error to all itineraries with accessibility scores
   displayA11yError: false
+  # Whether to add OTP_RR_MICROBILITY_SUBJECT_TO_CHANGE error to all searches that include micromobiity rental.
+  displayMicromobilityRentalError: false
   # Whether to display itinerary info in the side of the preview or next to the departure times
   showInlineItinerarySummary: false
   # Whether to sync the sort type with the depart/arrive time in the date/time modal

example/example-config.yml

@@ -360,7 +360,9 @@ components:
     title: Define Your Mobility Profile
   NarrativeItinerariesHeader:
     changeSortDir: Change sort direction
-    howToFindResults: To view results, see the Itineraries Found heading below.
+    howToFindResults: >-
+      To view results, see the Itineraries Found heading below. To see itinerary
+      details, select a time button.
     itinerariesFound: >-
       {itineraryNum, plural, one {# itinerary found} other {# itineraries found}
       }

i18n/en-US.yml

@@ -504,7 +504,8 @@ export const fetchNearby = (position, radius, currentServiceWeek) => {
           error.message =
             'Check error.cause for more information. Are the OTP server and client on compatible versions?'
           error.cause = payload.errors
-          throw error
+          // TODO: How to present this error to the user?
+          console.error({ error })
         }
         return {
           coords: { lat, lon },
@@ -1203,27 +1204,36 @@ export function routingQuery(searchId = null, updateSearchInReducer) {
                 response.data?.plan?.routingErrors.filter(
                   (re) => re?.code !== 'NO_TRANSIT_CONNECTION'
                 )
-              if (
-                getActiveItineraries(getState())?.length > 0 &&
-                response?.data?.plan
-              ) {
-                // Add accessibility error, if it is turned on
+              if (withCollapsedShortNames.length > 0 && response?.data?.plan) {
+                if (!response.data.plan?.routingErrors) {
+                  response.data.plan.routingErrors = []
+                }
+                // Add configurable errors, if they're turned on.
                 const state = getState()
-                const { displayA11yError } = state.otp.config?.itinerary
+                const { displayA11yError, displayMicromobilityRentalWarning } =
+                  state.otp.config?.itinerary
                 if (displayA11yError) {
                   if (
-                    response.data.plan.itineraries.find(
+                    withCollapsedShortNames.find(
                       (itin) => !!itin?.accessibilityScore
                     )
                   ) {
-                    if (!response.data.plan?.routingErrors) {
-                      response.data.plan.routingErrors = []
-                    }
                     response.data.plan.routingErrors.push({
                       code: 'OTP_RR_A11Y_ROUTING_ENABLED'
                     })
                   }
                 }
+                if (displayMicromobilityRentalWarning) {
+                  if (
+                    withCollapsedShortNames.find((itin) =>
+                      itin.legs.find((leg) => leg.rentedBike)
+                    )
+                  ) {
+                    response.data.plan.routingErrors.push({
+                      code: 'OTP_RR_MICROBILITY_SUBJECT_TO_CHANGE'
+                    })
+                  }
+                }
               }
 
               return {

lib/actions/apiV2.js

@@ -176,17 +176,40 @@ const checkIfOriginSetToCurrentPosition = (query, currentPosition) =>
   query?.from?.lat === currentPosition?.coords?.latitude &&
   query?.from?.lon === currentPosition?.coords?.longitude
 
+function setTimeToNow() {
+  return function (dispatch, getState) {
+    const { homeTimezone } = getState().otp.config
+    const now = coreUtils.time.getCurrentTime(homeTimezone)
+    dispatch(settingQueryParam({ time: now }))
+  }
+}
 /**
  * If departArrive is set to 'NOW', update the query time to current
  */
 export function updateQueryTimeIfLeavingNow() {
+  return function (dispatch, getState) {
+    const state = getState()
+    const { currentQuery } = state.otp
+    if (currentQuery.departArrive === 'NOW') {
+      dispatch(setTimeToNow())
+    }
+  }
+}
+/**
+ * If d/t selector is blank, update the form fields on trip plan to avoid confusion
+ */
+export function updateDateTimeIfEmpty() {
   return function (dispatch, getState) {
     const state = getState()
     const { config, currentQuery } = state.otp
+    const { date, time } = currentQuery
     const { homeTimezone } = config
-    if (currentQuery.departArrive === 'NOW') {
-      const now = coreUtils.time.getCurrentTime(homeTimezone)
-      dispatch(settingQueryParam({ time: now }))
+    if (!time) {
+      dispatch(setTimeToNow())
+    }
+    if (!date) {
+      const today = coreUtils.time.getCurrentDate(homeTimezone)
+      dispatch(settingQueryParam({ date: today }))
     }
   }
 }

lib/actions/form.js

@@ -31,6 +31,7 @@ interface Props {
   mobile?: boolean
   routingQuery: () => void
   showUserSettings: boolean
+  updateDateTimeIfEmpty: () => void
   updateQueryTimeIfLeavingNow: () => void
 }
 
@@ -81,9 +82,15 @@ class BatchRoutingPanel extends Component<Props> {
   handleSubmit = (e: FormEvent) => e.preventDefault()
 
   handlePlanTripClick = () => {
-    const { currentQuery, intl, routingQuery, updateQueryTimeIfLeavingNow } =
-      this.props
+    const {
+      currentQuery,
+      intl,
+      routingQuery,
+      updateDateTimeIfEmpty,
+      updateQueryTimeIfLeavingNow
+    } = this.props
     updateQueryTimeIfLeavingNow()
+    updateDateTimeIfEmpty()
     alertUserTripPlan(
       intl,
       currentQuery,
@@ -217,6 +224,15 @@ class BatchRoutingPanel extends Component<Props> {
                       overflowY: 'hidden'
                     }}
                   >
+                    <InvisibleA11yLabel
+                      aria-live="assertive"
+                      as="div"
+                      role="alert"
+                    >
+                      {activeSearch?.pending > 0 && (
+                        <FormattedMessage id="common.forms.loading" />
+                      )}
+                    </InvisibleA11yLabel>
                     <NarrativeItineraries />
                   </div>
                 </div>
@@ -250,6 +266,7 @@ const mapStateToProps = (state: any) => {
 
 const mapDispatchToProps = {
   routingQuery: apiActions.routingQuery,
+  updateDateTimeIfEmpty: formActions.updateDateTimeIfEmpty,
   updateQueryTimeIfLeavingNow: formActions.updateQueryTimeIfLeavingNow
 }
 

lib/components/app/batch-routing-panel.tsx

@@ -16,7 +16,6 @@ const StyledTransparentButton = styled.button`
   color: ${grey[800]};
   display: flex;
   gap: 7px;
-  margin-bottom: 5px;
 `
 
 const AdvancedSettingsButton = ({ onClick }: Props): JSX.Element => (

lib/components/form/advanced-settings-button.tsx

@@ -58,6 +58,10 @@ const PanelOverlay = styled.div`
   top: 0;
   width: 100%;
   z-index: 100;
+
+  @media (max-width: 768px) {
+    padding: 1em;
+  }
 `
 
 const GlobalSettingsContainer = styled.div`
@@ -283,7 +287,7 @@ const AdvancedSettingsPanel = ({
         <h1 className="header-text">{headerText}</h1>
       </HeaderContainer>
       <DtSelectorContainer>
-        <DateTimeModal />
+        <DateTimeModal departArriveDropdown />
       </DtSelectorContainer>
       {processedGlobalSettings.length > 0 && (
         <>