@autobusal/routes-order 1.9.0 → 1.9.1

package/Found/Empty/Empty.tsx

@@ -0,0 +1,136 @@
+import { TFunction } from 'i18next';
+import { Container, Headline, Title, Lead, Group, GroupTitle, Options, Option, OptionName, OptionMeta, OptionPrice } from './styles';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+import { AlternativesData, NearbyCity, FoundDay } from '../../types';
+
+interface Props {
+  type: 'departure' | '_return'
+  step1: RoutesSearchForm
+  data?: AlternativesData
+  loading: boolean
+  t: TFunction<'common'>
+}
+
+/**
+ * A search that found nothing, answered rather than apologised for.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * "We couldn't find any tickets" is where people leave. Every suggestion
+ * here is a real search that obtapi has already confirmed returns seats on
+ * the requested date, with the fare it would cost - so a click is never a
+ * second dead end.
+ *
+ * Nearby cities are ordered by actual distance from the city that was
+ * asked for, which is why a 29km alternative is offered before a 73km one
+ * even when the further city is cheaper: the passenger's problem here is
+ * getting to the bus, not saving two euros.
+ */
+const Empty = ({ type, step1, data, loading, t }: Props): JSX.Element => {
+  // obtapi wants DD/MM/YYYY, the URL carries DD-MM-YYYY
+  const asPath = (date: string): string => date.replace(/\//g, '-');
+
+  /*
+   * Edited: Claude - Date: 2026-08-28 (sweep, low)
+   *
+   * The suggestions here are now leg-aware. The URL always carries the
+   * OUTBOUND pair and both dates, but on the return leg the search that
+   * came back empty is destination->origin on the return date - so a
+   * suggested day must land in the RETURN slot (the old link moved the
+   * departure the buyer never asked to change and led straight back into
+   * the same empty step), and a nearby city for the return's origin is a
+   * replacement for the URL's `to`, not its `from`.
+   */
+  const isReturn = type === '_return';
+
+  const link = (from: string, to: string, departure: string, _return: string | undefined): string => ([
+    '/bus-lines',
+    from,
+    to,
+    asPath(departure),
+    _return ? asPath(_return) : 'none',
+    step1.type ?? 'departure',
+    String(step1.adults),
+    String(step1.children),
+    String(step1.babies)
+  ].join('/'));
+
+  const cityLink = (item: NearbyCity, side: 'from' | 'to'): string => {
+    // `side` is relative to the leg that was searched; map it back to the
+    // URL's outbound pair
+    if (side === 'from') {
+      return isReturn
+        ? link(step1.from, item.city.slug, step1.departure, step1._return)
+        : link(item.city.slug, step1.to, step1.departure, step1._return);
+    }
+
+    return isReturn
+      ? link(item.city.slug, step1.to, step1.departure, step1._return)
+      : link(step1.from, item.city.slug, step1.departure, step1._return);
+  };
+
+  const city = (item: NearbyCity, side: 'from' | 'to'): JSX.Element => (
+    <Option key={ item.city.id } to={ cityLink(item, side) }>
+      <OptionName title={ item.city.name }>{ item.city.name }</OptionName>
+      <OptionMeta>{ t('routes_order.step2.empty.distance', { km: item.distance }) }</OptionMeta>
+      <OptionPrice>{ item.from_price_display }</OptionPrice>
+    </Option>
+  );
+
+  const day = (item: FoundDay): JSX.Element => (
+    <Option
+      key={ item.id }
+      to={ isReturn
+        ? link(step1.from, step1.to, step1.departure, item.day)
+        : link(step1.from, step1.to, item.day, step1._return) }
+    >
+      <OptionName>{ item.day }</OptionName>
+      <OptionMeta>{ t('routes_order.step2.empty.available') }</OptionMeta>
+      { item.from_price_display && <OptionPrice>{ item.from_price_display }</OptionPrice> }
+    </Option>
+  );
+
+  const hasFrom = (data?.from.length ?? 0) > 0;
+  const hasTo = (data?.to.length ?? 0) > 0;
+  const hasDates = (data?.dates.length ?? 0) > 0;
+
+  return (
+    <Container className="box">
+      <Headline>
+        <Title>{ t('routes_order.step2.empty.title') }</Title>
+
+        { /* while the alternatives are still being fetched, say nothing
+             about them - promising suggestions that then turn out not to
+             exist is worse than the plain message */ }
+        <Lead>
+          { loading || hasFrom || hasTo || hasDates
+            ? t('routes_order.step2.empty.lead')
+            : t('routes_order.step2.empty.lead_none') }
+        </Lead>
+      </Headline>
+
+      { hasDates && (
+        <Group>
+          <GroupTitle>{ t('routes_order.step2.empty.dates') }</GroupTitle>
+          <Options>{ data?.dates.map(day) }</Options>
+        </Group>
+      ) }
+
+      { hasFrom && (
+        <Group>
+          <GroupTitle>{ t('routes_order.step2.empty.from') }</GroupTitle>
+          <Options>{ data?.from.map(item => city(item, 'from')) }</Options>
+        </Group>
+      ) }
+
+      { hasTo && (
+        <Group>
+          <GroupTitle>{ t('routes_order.step2.empty.to') }</GroupTitle>
+          <Options>{ data?.to.map(item => city(item, 'to')) }</Options>
+        </Group>
+      ) }
+    </Container>
+  );
+};
+
+export default Empty;

package/Found/Empty/styles.ts

@@ -0,0 +1,98 @@
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+export const Headline = styled.div`
+  text-align: center;
+`;
+
+export const Title = styled.h3`
+  margin-bottom: 6px;
+`;
+
+export const Lead = styled.p`
+  margin: 0;
+  color: ${ props => props.theme.font.faded };
+`;
+
+export const Group = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+export const GroupTitle = styled.h6`
+  margin-bottom: 0;
+  font-size: ${ props => props.theme.size.xs };
+  text-transform: uppercase;
+  color: ${ props => props.theme.font.faded };
+`;
+
+export const Options = styled.div`
+  display: grid;
+  gap: 10px;
+  grid-template-columns: minmax(0, 1fr);
+
+  @media (min-width: 640px) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+`;
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-05
+ *
+ * Plain client-side links now. They used to force a full document reload,
+ * because the search lived on a Step1 that is not mounted once results are
+ * on screen - so a navigation changed the address bar and nothing else, and
+ * the old empty result set simply stayed there.
+ *
+ * RoutesOrder now follows the URL's search spec, which is the tidier fix
+ * the note here previously judged not worth the risk. It became worth it
+ * when the same root cause turned up a third time.
+ */
+export const Option = styled(Link)`
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 12px 15px;
+  border-radius: ${ props => props.theme.borderRadius };
+  border: 1px solid ${ props => props.theme.inputs.border };
+  background: ${ props => props.theme.background.normal };
+  transition: all 0.2s ease;
+
+  // Edited: Ferjolt Ozuni - Date: 2026-08-01
+  // These are cards, not sentences, so they lift and take the brand colour
+  // on hover rather than underlining. The global anchor rule underlines on
+  // hover, hence the explicit none.
+  &:hover {
+    text-decoration: none;
+    transform: translateY(-2px);
+    border-color: ${ props => props.theme.primary.normal };
+    box-shadow: ${ props => props.theme.boxShadow };
+  }
+
+  &:hover strong {
+    color: ${ props => props.theme.primary.normal };
+  }
+`;
+
+export const OptionName = styled.strong`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const OptionMeta = styled.span`
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.faded };
+`;
+
+export const OptionPrice = styled.span`
+  font-weight: 700;
+  font-size: ${ props => props.theme.size.s };
+`;

package/Found/Filters/Filters.tsx

@@ -1,7 +1,7 @@
 import { TFunction } from 'i18next';
 import { FaFilter } from 'react-icons/fa';
 import { AiOutlineCaretDown, AiOutlineCaretUp } from 'react-icons/ai';
-import { Container, Toggle, Count, Panel, Group, GroupTitle, Choice, ChoiceName, ChoiceMeta, Slider, Reset } from './styles';
+import { Container, Toggle, Count, Panel, Group, GroupTitle, Choice, ChoiceName, ChoiceMeta, ChoiceCount, ChoicePrice, Slider, Reset } from './styles';
 import { Refinement, Facets, FacetValue, BucketKey, EMPTY, isRefined } from '../refine';
 
 interface Props {
@@ -83,7 +83,8 @@ const Filters = ({ open, refinement, facets, range, currency, t, onToggle, onCha
             <ChoiceName title={ item.label }>{ item.label }</ChoiceName>
 
             <ChoiceMeta>
-              { item.count }{ item.fromDisplay ? ` · ${ item.fromDisplay }` : '' }
+              <ChoiceCount>{ item.count }</ChoiceCount>
+              { item.fromDisplay && <ChoicePrice>{ item.fromDisplay }</ChoicePrice> }
             </ChoiceMeta>
           </Choice>
         )) }
@@ -100,8 +101,10 @@ const Filters = ({ open, refinement, facets, range, currency, t, onToggle, onCha
         { open ? <AiOutlineCaretUp /> : <AiOutlineCaretDown /> }
       </Toggle>
 
-      { open && (
-        <Panel className="box">
+      { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
+           Rendered unconditionally and hidden with CSS rather than gated on
+           `open`, because at sidebar widths there is no toggle to open it. */ }
+      <Panel className="box" $open={ open }>
           { facets.buckets.length > 1 && (
             <Group>
               <GroupTitle>{ t('routes_order.step2.filters.times') }</GroupTitle>
@@ -118,7 +121,8 @@ const Filters = ({ open, refinement, facets, range, currency, t, onToggle, onCha
                   <ChoiceName>{ bucket.label }</ChoiceName>
 
                   <ChoiceMeta>
-                    { bucket.count }{ bucket.fromDisplay ? ` · ${ bucket.fromDisplay }` : '' }
+                    <ChoiceCount>{ bucket.count }</ChoiceCount>
+                    { bucket.fromDisplay && <ChoicePrice>{ bucket.fromDisplay }</ChoicePrice> }
                   </ChoiceMeta>
                 </Choice>
               )) }
@@ -182,8 +186,7 @@ const Filters = ({ open, refinement, facets, range, currency, t, onToggle, onCha
               </Reset>
             </Group>
           ) }
-        </Panel>
-      ) }
+      </Panel>
     </Container>
   );
 };

package/Found/Filters/styles.ts

@@ -1,7 +1,21 @@
 import styled, { css } from 'styled-components';
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Below 1280px the filters stay a collapsible panel above the list; at and
+ * above it they become a permanent sidebar. 1280 rather than 1024 on
+ * purpose: the result CARDS switch to their wide row layout at 1024px based
+ * on the viewport, not on their container, so carving a 280px column out of
+ * a 1024px window would leave the cards using a layout their remaining
+ * ~700px cannot carry.
+ */
 export const Container = styled.div`
   margin-bottom: 15px;
+
+  @media (min-width: 1280px) {
+    margin-bottom: 0;
+  }
 `;
 
 export const Toggle = styled.button<{ $open: boolean }>`
@@ -24,6 +38,11 @@ export const Toggle = styled.button<{ $open: boolean }>`
   ${ props => props.$open && css`
     border-color: ${ props => props.theme.primary.normal };
   ` }
+
+  // the sidebar is always open, so there is nothing left to toggle
+  @media (min-width: 1280px) {
+    display: none;
+  }
 `;
 
 export const Count = styled.span`
@@ -35,18 +54,35 @@ export const Count = styled.span`
   border-radius: 100px;
 `;
 
-export const Panel = styled.div`
-  display: grid;
+export const Panel = styled.div<{ $open: boolean }>`
+  display: ${ props => props.$open ? 'grid' : 'none' };
   gap: 20px;
   margin-top: 12px;
   padding: 20px;
+  // minmax(0, 1fr) rather than 1fr: a grid track's implicit min-width is
+  // auto, so a long stop name like "Terminali Lindor Interurban dhe
+  // Nderkombetar i Autobusave (TEG)" pushed the whole panel wider than its
+  // column and pushed the counts and prices out of sight
+  grid-template-columns: minmax(0, 1fr);
 
   @media (min-width: 640px) {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   @media (min-width: 1024px) {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  // as a sidebar: always rendered, one column, and it follows the page down
+  // so the filters stay reachable while scrolling a long result list
+  @media (min-width: 1280px) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    margin-top: 0;
+    position: sticky;
+    top: 15px;
+    max-height: calc(100vh - 30px);
+    overflow-y: auto;
   }
 `;
 
@@ -54,6 +90,7 @@ export const Group = styled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
+  min-width: 0;
 `;
 
 export const GroupTitle = styled.h6`
@@ -65,8 +102,9 @@ export const GroupTitle = styled.h6`
 
 export const Choice = styled.label<{ $disabled: boolean }>`
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 8px;
+  line-height: 1.35;
   font-size: ${ props => props.theme.size.s };
   cursor: pointer;
 
@@ -85,19 +123,52 @@ export const Choice = styled.label<{ $disabled: boolean }>`
   ` }
 `;
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Wraps rather than truncating. In the sidebar column an ellipsis turned
+ * "Terminali Lindor Interurban dhe Nderkombetar i Autobusave (TEG)" into
+ * "Terminali Lindor Inte..." - two stops at the same city are then
+ * indistinguishable, which is the one thing this filter exists to tell
+ * apart. A second line is cheaper than a useless label.
+ */
 export const ChoiceName = styled.span`
   flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  min-width: 0;
+  overflow-wrap: anywhere;
 `;
 
 export const ChoiceMeta = styled.span`
+  display: flex;
+  align-items: center;
+  gap: 6px;
   font-size: ${ props => props.theme.size.xs };
   color: ${ props => props.theme.font.faded };
   white-space: nowrap;
 `;
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * How many trips a facet value leaves, as a filled pill. It used to sit
+ * next to the price as "5 · 38.00 EUR" in one muted string, where the two
+ * numbers read as one and you had to work out which was which. A count and
+ * a fare are different kinds of thing and now look like it.
+ */
+export const ChoiceCount = styled.span`
+  min-width: 22px;
+  padding: 1px 6px;
+  text-align: center;
+  font-weight: 700;
+  color: ${ props => props.theme.font.normal };
+  background: ${ props => props.theme.background.neutral };
+  border-radius: 100px;
+`;
+
+export const ChoicePrice = styled.span`
+  color: ${ props => props.theme.font.faded };
+`;
+
 export const Slider = styled.input`
   width: 100%;
   accent-color: ${ props => props.theme.primary.normal };

package/Found/Found.tsx

@@ -1,16 +1,21 @@
-import { useMemo, useState } from 'react';
+import { useMemo, useState, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { TFunction } from 'i18next';
 import Dates from './Dates/Dates';
-import Booking from './Booking/Booking';
 import Header from './Header/Header';
 import Orders from './Orders/Orders';
 import Sort from './Sort/Sort';
 import Picks from './Picks/Picks';
 import Filters from './Filters/Filters';
 import Summary from './Summary/Summary';
+import SameDay from './SameDay/SameDay';
+import Watch from './Watch/Watch';
+import { Results, Sidebar, Listing } from '../styles';
+import { useGetAlternatives } from '../services';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { FoundData } from '@autobusal/providers/types/routes';
+import { viewItemList } from '@autobusal/providers/Setup/commerce';
+import { item as commerceItem } from '../commerce';
 import { Refinement, BucketKey, fromParams, toParams, filterItems, buildFacets, priceRange, currencyOf, isRefined } from './refine';
 
 interface Props {
@@ -29,6 +34,17 @@ interface Props {
 const OWNED = [ 'sort', 'operators', 'times', 'direct', 'from_stops', 'to_stops', 'features', 'max_price' ];
 
 const Found = ({ type, loading, data, step1, preferredStop, t, onSearch, onSave }: Props): JSX.Element => {
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-05
+   *
+   * Keyed on the RESULT SET, not on every render. This component re-renders
+   * on each filter tick and sort change, and announcing the list again every
+   * time would report a dozen searches for one.
+   */
+  useEffect(() => {
+    viewItemList((data ?? []).map(commerceItem), currencyOf(data ?? []));
+  }, [data]);
+
   const [ searchParams, setSearchParams ] = useSearchParams();
   const [ open, setOpen ] = useState<boolean>(false);
 
@@ -72,15 +88,67 @@ const Found = ({ type, loading, data, step1, preferredStop, t, onSearch, onSave
 
   const passengers = Number(step1.adults ?? 0) + Number(step1.children ?? 0) + Number(step1.babies ?? 0);
 
+  // Edited: Ferjolt Ozuni - Date: 2026-08-01
+  // Only fetched once the search itself has finished and come back empty,
+  // so a search that found something never pays for the alternatives.
+  /*
+   * Edited: Claude - Date: 2026-08-28 (sweep, low)
+   *
+   * On the return leg the journey with no results is destination->origin
+   * on the RETURN date - the same swap useGetDates and `watched` below
+   * have always made. Passing step1 unswapped asked the API for OUTBOUND
+   * alternatives, so the empty return step suggested days for a leg the
+   * buyer already has (including the very day they booked).
+   */
+  const alternativesQuery = type === '_return'
+    ? { ...step1, from: step1.to, to: step1.from, departure: step1._return ?? '' }
+    : step1;
+
+  const { data: alternatives, isFetching: alternativesLoading } = useGetAlternatives(
+    alternativesQuery,
+    !loading && items.length === 0
+  );
+
   // controls are pointless while there is nothing (or only one thing) to
   // refine, and they'd only add noise above an empty state
   const showControls = !loading && items.length > 1;
 
+  /**
+   * The journey the "watch this fare" control below is about.
+   *
+   * Edited: Claude - Date: 2026-08-20
+   *
+   * On the return leg the pair is the reverse of the one that was searched
+   * and the date is the return date - the same swap useGetDates has always
+   * made for the date strip, and for the same reason: step 3 is a search
+   * from the destination back, and watching the outbound fare there would
+   * watch a journey the visitor is no longer looking at.
+   */
+  const watched = type === '_return'
+    ? { from: step1.to, to: step1.from, departure: step1._return ?? '' }
+    : { from: step1.from, to: step1.to, departure: step1.departure };
+
   return (
     <>
       <Dates type={ type } step1={ step1 } t={ t } onSearch={ onSearch } />
 
-      { (data !== undefined && data.length > 0) && <Booking data={ data } step1={ step1 } t={ t } /> }
+      { /* Edited: Ferjolt Ozuni - Date: 2026-08-03
+           Keyed off obtapi sending a countdown at all, which it does only
+           for a same-day search - so there is no second copy of "is this
+           today" here to fall out of step with the server's. */ }
+      { items.some(item => item.departs_in !== null && item.departs_in !== undefined) && (
+        <SameDay t={ t } />
+      ) }
+
+      { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
+           The Booking.com banner used to sit here, between the date strip
+           and the trips, pushing the actual results below it to advertise a
+           hotel to somebody still deciding whether they can travel at all.
+           It was unmounted earlier today and the component is now removed
+           outright, along with cities.booking_id - it was never really an
+           integration, just a hand-built searchresults.xu.html link, and
+           leaving the column and its admin field behind made it look like
+           one. */ }
 
       { showControls && (
         <>
@@ -88,17 +156,6 @@ const Found = ({ type, loading, data, step1, preferredStop, t, onSearch, onSave
             <Sort value={ refinement.sort } t={ t } onChange={ sort => onRefine({ ...refinement, sort }) } />
           </Summary>
 
-          <Filters
-            open={ open }
-            refinement={ refinement }
-            facets={ facets }
-            range={ bounds }
-            currency={ currency }
-            t={ t }
-            onToggle={ () => setOpen(!open) }
-            onChange={ onRefine }
-          />
-
           <Picks
             items={ refined }
             sort={ refinement.sort }
@@ -108,21 +165,63 @@ const Found = ({ type, loading, data, step1, preferredStop, t, onSearch, onSave
         </>
       ) }
 
-      <Header t={ t } />
-
-      <Orders
-        loading={ loading }
-        data={ refined }
-        empty={ items.length === 0 }
-        refined={ isRefined(refinement) }
-        sort={ refinement.sort }
-        type={ type }
-        passengers={ passengers }
-        preferredStop={ Number(preferredStop) }
-        t={ t }
-        onReset={ () => onRefine({ ...refinement, ...{ operators: [], buckets: [], direct: false, fromStops: [], toStops: [], features: [], maxPrice: null } }) }
-        onSave={ onSave }
-      />
+      <Results>
+        { showControls && (
+          <Sidebar>
+            <Filters
+              open={ open }
+              refinement={ refinement }
+              facets={ facets }
+              range={ bounds }
+              currency={ currency }
+              t={ t }
+              onToggle={ () => setOpen(!open) }
+              onChange={ onRefine }
+            />
+          </Sidebar>
+        ) }
+
+        <Listing>
+          <Header t={ t } />
+
+          <Orders
+            loading={ loading }
+            data={ refined }
+            empty={ items.length === 0 }
+            step1={ step1 }
+            alternatives={ alternatives }
+            alternativesLoading={ alternativesLoading }
+            refined={ isRefined(refinement) }
+            sort={ refinement.sort }
+            type={ type }
+            passengers={ passengers }
+            preferredStop={ Number(preferredStop) }
+            t={ t }
+            onReset={ () => onRefine({ ...refinement, ...{ operators: [], buckets: [], direct: false, fromStops: [], toStops: [], features: [], maxPrice: null } }) }
+            onSave={ onSave }
+          />
+        </Listing>
+      </Results>
+
+      { /* Edited: Claude - Date: 2026-08-20
+           At the FOOT of the results, and outside <Results> so it spans the
+           full width rather than sitting under the filter column.
+
+           This is the one spot on the screen that is reached in every
+           outcome a search can have - a list of prices none of which was
+           the one the reader wanted, a filter that hid them all, and a
+           search that found nothing at all. That last case is the one that
+           decided the placement: "no buses for this search" is precisely
+           when somebody wants telling if that changes, and a control living
+           inside the listing would have been absent exactly there.
+
+           Held back while the search is still running - offering to watch a
+           fare before we know whether there is one to watch, under a
+           spinner, is noise. A pair nobody prices answers 404 and says so.
+           */ }
+      { !loading && watched.departure !== '' && (
+        <Watch from={ watched.from } to={ watched.to } departure={ watched.departure } t={ t } />
+      ) }
     </>
   );
 };

package/Found/Group/Group.tsx

@@ -8,6 +8,7 @@ import { FoundData } from '@autobusal/providers/types/routes';
 interface Props {
   items: FoundData[]
   type: 'favorite' | 'normal'
+  date?: string
   passengers: number
   t: TFunction<'common'>
   onSave: (data: FoundData) => void
@@ -23,7 +24,7 @@ interface Props {
  * booked, so there is no separate "now choose a time" step to forget: the
  * card always represents a bookable trip, starting with the earliest.
  */
-const Group = ({ items, type, passengers, t, onSave }: Props): JSX.Element => {
+const Group = ({ items, type, date, passengers, t, onSave }: Props): JSX.Element => {
   // chronological for the picker, regardless of how the list itself is
   // sorted - a row of times out of time order is just confusing
   const departures = useMemo(() => (
@@ -38,6 +39,7 @@ const Group = ({ items, type, passengers, t, onSave }: Props): JSX.Element => {
     <Route
       type={ type }
       data={ current }
+      date={ date }
       passengers={ passengers }
       t={ t }
       onSave={ onSave }