@autobusal/routes-order 1.9.3 → 1.11.3

package/Found/Empty/styles.ts

@@ -0,0 +1,99 @@
+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-01
+ *
+ * These links carry `reloadDocument` at the call site. RoutesOrder holds
+ * the search in component state and Step1 only kicks off a search when it
+ * has not already redirected, so a client-side navigation changes the URL
+ * and nothing else - the old, empty result set just stays on screen.
+ *
+ * A full load re-enters the flow from the URL exactly as arriving from a
+ * search engine does. Teaching RoutesOrder to resync its state from
+ * changing params would be the tidier fix, but that is the main booking
+ * flow and this is a dead-end page: not worth the risk for the gain.
+ */
+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/Found.tsx

@@ -2,7 +2,6 @@ import { useMemo, useState } 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';
@@ -10,6 +9,7 @@ import Picks from './Picks/Picks';
 import Filters from './Filters/Filters';
 import Summary from './Summary/Summary';
 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 { Refinement, BucketKey, fromParams, toParams, filterItems, buildFacets, priceRange, currencyOf, isRefined } from './refine';
@@ -73,6 +73,14 @@ 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.
+  const { data: alternatives, isFetching: alternativesLoading } = useGetAlternatives(
+    step1,
+    !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;
@@ -81,7 +89,13 @@ const Found = ({ type, loading, data, step1, preferredStop, t, onSearch, onSave
     <>
       <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-01
+           The Booking.com banner is gone from the results. It sat between
+           the date strip and the trips, pushing the actual results below
+           it and advertising a hotel to somebody still deciding whether
+           they can travel at all. The component is kept, unused, so the
+           affiliate placement can be reinstated somewhere it does not
+           interrupt the search. */ }
 
       { showControls && (
         <>
@@ -121,6 +135,9 @@ const Found = ({ type, loading, data, step1, preferredStop, t, onSearch, onSave
             loading={ loading }
             data={ refined }
             empty={ items.length === 0 }
+            step1={ step1 }
+            alternatives={ alternatives }
+            alternativesLoading={ alternativesLoading }
             refined={ isRefined(refinement) }
             sort={ refinement.sort }
             type={ type }

package/Found/Header/styles.ts

@@ -1,8 +1,21 @@
 import styled from 'styled-components';
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * This row only means anything if its labels sit over the columns they
+ * name, so its geometry has to match the result card's exactly: the same
+ * 15px horizontal padding and the same 15px gap between columns. It had
+ * 4px padding and no gap at all, which pushed every label right of the
+ * data it labelled - Duration was out by 34px.
+ *
+ * If Found/Route/styles.ts ever changes the card's padding or the Trip
+ * gap, this has to move with it.
+ */
 export const Container = styled.div`
   display: none;
-  padding: 8px 4px;
+  gap: 15px;
+  padding: 8px 15px;
   margin-bottom: 15px;
 
   @media (min-width: 1024px) {
@@ -23,18 +36,21 @@ const Item = styled.div`
   }
 `;
 
+// these five must stay identical to their counterparts in
+// Found/Route/styles.ts, or the labels stop sitting over their columns
 export const Company = styled(Item)`
-  flex-basis: 185px;
+  flex: 0 0 185px;
 `;
 
 export const Location = styled(Item)`
   flex: 1;
+  min-width: 0;
 `;
 
 export const Time = styled(Item)`
-  flex-basis: 120px;
+  flex: 0 0 120px;
 `;
 
 export const Price = styled(Item)`
-  flex-basis: 165px;
+  flex: 0 0 165px;
 `;

package/Found/Orders/Orders.tsx

@@ -2,10 +2,13 @@ import { TFunction } from 'i18next';
 import { Inline } from '@autobusal/common';
 import Route from '../Route/Route';
 import Group from '../Group/Group';
+import Empty from '../Empty/Empty';
 import { getFavorites, getNormal } from './utilities';
 import { sortItems, groupItems, SortKey } from '../refine';
 import { Container, ContainerNotFound, Reset } from './styles';
 import { FoundData } from '@autobusal/providers/types/routes';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+import { AlternativesData } from '../../types';
 
 interface Props {
   loading: boolean
@@ -16,12 +19,15 @@ interface Props {
   type: 'departure' | '_return'
   passengers: number
   preferredStop?: number
+  step1: RoutesSearchForm
+  alternatives?: AlternativesData
+  alternativesLoading: boolean
   t: TFunction<'common'>
   onReset: () => void
   onSave: (data: FoundData) => void
 }
 
-const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferredStop, t, onReset, onSave }: Props): JSX.Element => {
+const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferredStop, step1, alternatives, alternativesLoading, t, onReset, onSave }: Props): JSX.Element => {
   if (loading) {
     return (
       <div className="box">
@@ -30,11 +36,14 @@ const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferr
     );
   }
 
-  // no results at all - the search itself found nothing (or errored, e.g.
-  // same origin and destination) - show the not-found message
+  // Edited: Ferjolt Ozuni - Date: 2026-08-01
+  // No results at all - the search itself found nothing (or errored, e.g.
+  // same origin and destination). Rather than a bare apology, offer the
+  // nearby origins, nearby destinations and other dates that obtapi has
+  // confirmed actually have seats.
   if (empty) {
     return (
-      <ContainerNotFound className="box">{ t('routes_order.step2.not_found') }</ContainerNotFound>
+      <Empty step1={ step1 } data={ alternatives } loading={ alternativesLoading } t={ t } />
     );
   }
 

package/Found/Route/Route.tsx

@@ -3,9 +3,9 @@ import { TFunction } from 'i18next';
 import { HiOutlineArrowNarrowRight, HiOutlineDocumentText } from 'react-icons/hi';
 import { BiHourglass } from 'react-icons/bi';
 import { RiBus2Line } from 'react-icons/ri';
-import { formatDuration } from '../refine';
+import { formatDuration, splitPrice } from '../refine';
 import { Button, RouteFeature, Policy } from '@autobusal/common';
-import { Container, SpecialOffer, FavoriteStop, Trip, Company, Location, Stop, Iso, Time, Price, PriceNotice, LinkCompany, Details, Detail, ButtonPolicy, TitleDetail, LinkRoute, Features, TitleFeatures, FeaturesItems } from './styles';
+import { Container, SpecialOffer, FavoriteStop, Trip, Company, Location, Stop, Iso, Time, Price, Amount, Decimals, Currency, PriceNotice, LinkCompany, Details, Detail, ButtonPolicy, TitleDetail, LinkRoute, FeaturesItems } from './styles';
 import { FoundData } from '@autobusal/providers/types/routes';
 
 // neutral placeholder so a missing/broken operator logo doesn't render the
@@ -30,8 +30,10 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
   const customs = Object.values(data.customs).join(', ');
   const transiting = Object.values(data.transiting).join(', ');
 
+  const price = splitPrice(data.price.display);
+
   const features = data.trip.features_data.map((item, index) => (
-    <RouteFeature key={ index } item={ item } />
+    <RouteFeature key={ index } item={ item } compact />
   ));
 
   // Edited: Ferjolt Ozuni - Date: 2026-07-27
@@ -86,7 +88,11 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
         </Location>
 
         <Price>
-          <strong>{ data.price.display }</strong>
+          <Amount>
+            { price.whole }
+            { price.decimals !== null && <Decimals>{ price.decimals }</Decimals> }
+            { price.currency !== null && <Currency>{ price.currency }</Currency> }
+          </Amount>
 
           { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
                obtapi's price.value is the total for the WHOLE party
@@ -121,6 +127,21 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
       { children }
 
       <Details>
+        { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
+             Amenities were a separate full-width block under the card.
+             They are the same kind of thing as route, transit and policies
+             - supporting detail - so they join that row as the first
+             column, which is one fewer band of vertical space per result. */ }
+        { data.trip.features_data.length > 0 && (
+          <Detail>
+            <TitleDetail>{ t('routes_order.step2.route.features') }</TitleDetail>
+
+            <FeaturesItems>
+              { features }
+            </FeaturesItems>
+          </Detail>
+        ) }
+
         <Detail>
           <TitleDetail>{ t('routes_order.step2.route.name') }</TitleDetail>
           <LinkRoute to={ bookOnUrl ?? data.link } target="_blank" rel="noopener noreferrer">{ data.code }</LinkRoute>
@@ -152,16 +173,6 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
         ) }
       </Details>
 
-      { data.trip.features_data.length > 0 && (
-        <Features>
-          <TitleFeatures>{ t('routes_order.step2.route.features') }</TitleFeatures>
-
-          <FeaturesItems>
-            { features }
-          </FeaturesItems>
-        </Features>
-      ) }
-
       { policy && typeof data.id === 'number' && <Policy id={ data.id } t={ t } onClose={ () => setPolicy(false) } /> }
     </Container>
   );

package/Found/Route/styles.ts

@@ -64,12 +64,24 @@ export const Company = styled.div`
   flex-basis: 100%;
 
   @media (min-width: 1024px) {
-    flex-basis: 185px;
+    flex: 0 0 185px;
   }
 `;
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * min-width: 0 is what makes `flex: 1` mean "an equal share". Without it
+ * the default min-width:auto stops a column shrinking below its content,
+ * so the arrival column (long city plus a long stop name) grew to 215px
+ * while the departure column got 155px - the two halves of the same row
+ * were different widths, and no fixed header could ever line up with
+ * both. It also stops one long stop name stealing width from the other
+ * side of the card.
+ */
 export const Location = styled.div`
   flex: 1;
+  min-width: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -146,7 +158,7 @@ export const Time = styled.div`
   }
 
   @media (min-width: 640px) {
-    flex-basis: 120px;
+    flex: 0 0 120px;
   }
 `;
 
@@ -154,21 +166,52 @@ export const Price = styled.div`
   flex-basis: 100%;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
   align-items: center;
 
-  & > strong {
-    font-size: ${ props => props.theme.size.xxl };
-  }
-
   @media (min-width: 768px) {
-    flex-basis: 165px;
+    flex: 0 0 165px;
   }
 `;
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * The decimals ride as superscript rather than at full size. On a fare
+ * board the cents are almost never what anyone is comparing, and at the
+ * headline size they were taking a third of the width of the widest thing
+ * on the card. The line-height is pinned to 1 so the shrunk decimals do
+ * not leave a gap under the row.
+ */
+export const Amount = styled.strong`
+  display: flex;
+  align-items: flex-start;
+  line-height: 1;
+  font-size: ${ props => props.theme.size.xxl };
+`;
+
+export const Decimals = styled.span`
+  margin-left: 1px;
+  font-size: ${ props => props.theme.size.s };
+  line-height: 1;
+`;
+
+export const Currency = styled.span`
+  margin-left: 4px;
+  align-self: center;
+  font-size: ${ props => props.theme.size.m };
+`;
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Tucked up against the price it qualifies, which reads as one unit and
+ * frees the vertical space the Select button needs.
+ */
 export const PriceNotice = styled.span`
-  margin-top: -6px;
-  font-size: ${ props => props.theme.size.xs };
+  margin-top: -4px;
+  font-size: ${ props => props.theme.size.xxs };
+  line-height: 1.25;
   color: ${ props => props.theme.font.faded };
   text-align: center;
 `;
@@ -235,20 +278,15 @@ export const ButtonPolicy = styled.button`
   }
 `;
 
-export const Features = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-export const TitleFeatures = styled.h6`
-  font-size: ${ props => props.theme.size.s };
-  margin-bottom: 8px;
-`;
-
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Left-aligned now that this sits inside a Detail column alongside route,
+ * transit and policies, rather than centred in a full-width band of its
+ * own under the card.
+ */
 export const FeaturesItems = styled.div`
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
-  justify-content: center;
+  gap: 6px;
 `;

package/Found/refine.ts

@@ -140,6 +140,32 @@ export const formatDuration = (duration: string, t: TFunction<'common'>): string
   return parts.join(' ');
 };
 
+/**
+ * Split obtapi's formatted price into its parts so the decimals can be set
+ * as superscript.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * obtapi sends a rendered string ("1,048.00 EUR" - number_format, so the
+ * thousands separator is a comma and the decimal point a dot). Splitting it
+ * here rather than reformatting from `price.value` keeps the label's own
+ * currency and formatting as the single source of truth; we only decide how
+ * big each piece is drawn.
+ *
+ * Anything that does not match the expected shape is returned whole, so an
+ * unusual currency format degrades to today's rendering instead of being
+ * mangled.
+ */
+export const splitPrice = (display: string): { whole: string, decimals: string | null, currency: string | null } => {
+  const match = /^(.+)\.(\d{2})\s+(\S+)$/.exec(display ?? '');
+
+  if (match === null) {
+    return { whole: display ?? '', decimals: null, currency: null };
+  }
+
+  return { whole: match[1], decimals: match[2], currency: match[3] };
+};
+
 export const bucketOf = (item: FoundData): BucketKey => {
   const hour = Math.floor(departureOf(item) / 60);
 

package/RoutesOrder.tsx

@@ -1,13 +1,17 @@
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { TFunction } from 'i18next';
+import { AiOutlineSearch, AiOutlineCaretDown, AiOutlineCaretUp } from 'react-icons/ai';
 import { Meta } from '@autobusal/common';
+import { useSystemTheme } from '@autobusal/hooks';
+import { useGetSettings } from '@autobusal/providers/services';
+import RoutesSearch from '@autobusal/routes-search';
 import { useGetSuggestions } from '@autobusal/routes-search/services';
+import { SearchAgain, SearchInner, SearchToggle, SearchSummary, SearchPanel } from './styles';
 import Step1 from './Step1/Step1';
 import Step2 from './Step2';
 import Step3 from './Step3';
-import Step4 from './Step4/Step4';
-import Step5 from './Step5/Step5';
+import Checkout from './Checkout/Checkout';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { FoundData } from '@autobusal/providers/types/routes';
 import { PersonData } from '@autobusal/providers/types/persons';
@@ -30,6 +34,12 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
   // search form (no :from/:to params yet) or if a slug doesn't resolve.
   const { data: cities } = useGetSuggestions();
 
+  const { data: settings } = useGetSettings();
+
+  // same artwork the homepage hero uses, so the results page reads as the
+  // same site rather than a bare form on a white band
+  const mode = useSystemTheme();
+
   const fromCity = cities.find(city => city.slug === params.from);
   const toCity = cities.find(city => city.slug === params.to);
 
@@ -41,6 +51,7 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
     ? t('routes_order.meta.description_pair', { from: fromCity.name, to: toCity.name })
     : t('routes_order.meta.description');
 
+  const [ searchOpen, setSearchOpen ] = useState<boolean>(false);
   const [ redirected, setRedirected ] = useState<boolean>(false);
   const [ current, setCurrent ] = useState<number>(1);
   const [ step1, setStep1 ] = useState<RoutesSearchForm | undefined>(undefined);
@@ -80,11 +91,6 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
     setCurrent(4);
   };
 
-  const onStep4 = (data: PersonData): void => {
-    setStep4(data);
-    setCurrent(5);
-  };
-
   const onBack = (step: number): void => {
     setCurrent(step);
   };
@@ -92,11 +98,62 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
   const showStep1 = current === 1;
   const showStep2 = current === 2 && step1 !== undefined;
   const showStep3 = current === 3 && step1 !== undefined && step2 !== undefined;
-  const showStep4 = current === 4 && step1 !== undefined && step2 !== undefined;
-  const showStep5 = current === 5 && step1 !== undefined && step2 !== undefined && step4 !== undefined;
+
+  // Edited: Ferjolt Ozuni - Date: 2026-08-01
+  // Step 4 is now the whole of the rest: passenger details and payment on
+  // one screen, so there is no step 5 and no intermediate handoff of
+  // passenger data between them.
+  const showCheckout = current === 4 && step1 !== undefined && step2 !== undefined;
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-01
+   *
+   * The search form stays on screen while the user is choosing a route.
+   * Adjusting a date or a city used to mean "Back to Search", which threw
+   * away the results and any filters with them.
+   *
+   * Only on the route-selection screens: past that point a passenger has
+   * committed to a specific trip, and quietly re-running the search under
+   * them would discard passenger details they had already typed.
+   *
+   * onStep1 is the same handler Step1 uses, so submitting here re-runs the
+   * search and lands back on step 2 exactly as a fresh search would.
+   */
+  const showSearchAgain = (current === 2 || current === 3) && step1 !== undefined;
 
   return (
     <Meta title={ title } description={ description }>
+      { showSearchAgain && step1 !== undefined && (
+        <SearchAgain $background={ `${ settings.url }/home/background-${ mode }.jpg` }>
+          <SearchInner>
+            <SearchToggle type="button" aria-expanded={ searchOpen } onClick={ () => setSearchOpen(!searchOpen) }>
+              <AiOutlineSearch />
+
+              <SearchSummary>
+                { fromCity?.name ?? step1.from } → { toCity?.name ?? step1.to } · { step1.departure }
+              </SearchSummary>
+
+              { searchOpen ? <AiOutlineCaretUp /> : <AiOutlineCaretDown /> }
+            </SearchToggle>
+
+            <SearchPanel $open={ searchOpen }>
+              <RoutesSearch
+                type={ step1.type ?? 'departure' }
+                from={ `${ step1.from }${ step1.stop_from ? `:${ step1.stop_from }` : '' }` }
+                to={ `${ step1.to }${ step1.stop_to ? `:${ step1.stop_to }` : '' }` }
+                departure={ step1.departure }
+                _return={ step1._return ?? '' }
+                adultsNo={ step1.adults }
+                childrenNo={ step1.children }
+                babiesNo={ step1.babies }
+                t={ t }
+                onSearch={ data => { setSearchOpen(false); onStep1(data); } }
+              />
+            </SearchPanel>
+          </SearchInner>
+        </SearchAgain>
+      ) }
+
       { showStep1 && (
         <Step1
           value={ step1 }
@@ -127,25 +184,14 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
         />
       ) }
 
-      { showStep4 && (
-        <Step4
+      { showCheckout && (
+        <Checkout
           values={ step4 }
           step1={ step1 }
           step2={ step2 }
           step3={ step3 }
           t={ t }
-          onSave={ onStep4 }
-          onBack={ onBack }
-        />
-      ) }
-
-      { showStep5 && (
-        <Step5
-          step1={ step1 }
-          step2={ step2 }
-          step3={ step3 }
-          step4={ step4 }
-          t={ t }
+          onStore={ setStep4 }
           onBack={ onBack }
         />
       ) }

package/Step2.tsx

@@ -8,6 +8,7 @@ import { Title, Actions } from './styles';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { FoundData } from '@autobusal/providers/types/routes';
 import { useGetDepartures } from './services';
+import { useGetSuggestions } from '@autobusal/routes-search/services';
 
 interface Props {
   step1: RoutesSearchForm
@@ -20,11 +21,43 @@ interface Props {
 const Step2 = ({ step1, t, onSearch, onSave, onBack }: Props): JSX.Element => {
   const { data, isFetching } = useGetDepartures(step1);
 
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-01
+   *
+   * "Select a Departure Schedule" said nothing about the trip and nothing
+   * a search engine could use. The heading now names the actual journey.
+   *
+   * Countries are dropped when both ends share one: "from Tirana Albania
+   * to Durres Albania" is noise, while on a cross-border trip the country
+   * is the part that matters.
+   *
+   * Read from the city list rather than from the results, so the heading
+   * is right even when the search finds nothing - which is exactly when
+   * being told what was searched for matters most. That list is the same
+   * cached query the search form's autocomplete already uses, so it costs
+   * no extra request.
+   */
+  const { data: cities } = useGetSuggestions();
+
+  const from = cities.find(city => city.slug === step1.from);
+  const to = cities.find(city => city.slug === step1.to);
+
+  const sameCountry = from?.country?.id !== undefined && from.country.id === to?.country?.id;
+
+  const title = from && to
+    ? t('routes_order.step2.title_pair', {
+        from: from.name,
+        to: to.name,
+        from_country: sameCountry ? '' : ` ${ from.country?.name ?? '' }`,
+        to_country: sameCountry ? '' : ` ${ to.country?.name ?? '' }`
+      })
+    : t('routes_order.step2.title');
+
   return (
     <>
       <Title>
         <RiBus2Line />
-        { t('routes_order.step2.title') }
+        { title }
       </Title>
 
       <Steps value={ 2 } />