@autobusal/routes-order 1.13.0 → 1.21.0

package/CHANGELOG.md

@@ -6,6 +6,148 @@ All notable changes to this package are documented here. This project follows
 > Note: 1.8.0 was published without a changelog entry. The gap is left as-is
 > rather than reconstructed after the fact.
 
+## 1.21.0
+
+The same-day notice no longer hedges about timezones. obtapi now holds a zone
+per country, so "has this coach already left" is judged against the departure
+stop's own clock — the warning is about the real remaining risk, which is
+whether a traveller can reach the terminal in time.
+
+## 1.20.0
+
+The date strip: three days on a phone, five on a tablet, seven on a desktop —
+and the label becomes "04 AUG" below desktop rather than "Tue 04".
+
+Seven fitted on a phone once the labels were trimmed, but only at ~36px a
+cell: readable, not comfortable to hit, with the price wrapping to three lines
+under it. Each step up in width now buys two more days instead of squeezing
+the same seven into less room.
+
+The weekday is what gives way, not the month. With three days showing, a date
+needs to say which date it is more than which weekday — "04 AUG" is
+unambiguous alone, while "Tue 04" leaves somebody counting forward to work out
+whether that is this week or next. On a full seven-day strip the weekday earns
+its place, because the row reads as a week; on three days it does not.
+
+## 1.19.0
+
+Same-day travel, and the last of the phone layout.
+
+**Today is bookable**, so today's results carry a countdown — "Leaves in 43
+min", turning red under the hour. Computed server-side: a countdown built from
+the visitor's own clock is wrong for anybody whose device is off or in another
+timezone, and that is exactly the claim that must not be wrong.
+
+**A same-day caution above the results.** A coach that has already gone is
+filtered out server-side, but "already gone" is judged against our clock and
+the system holds no timezone for a city — so on a cross-border route the
+stored departure time and our idea of now can be an hour apart. The notice asks
+the traveller to check against their own local time.
+
+**Five days on a phone, seven above it.** Seven fitted after the labels were
+trimmed, but only at ~36px a cell. The five are centred on the selected day and
+clamped at both ends, so shrinking never hides the day being looked at.
+
+**Fare and button share a row**, tax note beneath — reordered in CSS, because
+the source order (fare, note, button) is the right one to read aloud and the
+right one for a crawler: the note explains the number it follows.
+
+## 1.18.0
+
+The results page on a phone, rebuilt for density.
+
+**The three picks are one strip.** Cheapest, fastest and recommended stacked
+into three full-width bands before a single result — the thing that summarises
+the list was pushing the list off the screen. Side by side they are comparable
+at a glance, which is what they are for. The operator's name drops below 640px:
+at ~110px a card it would ellipsis to three characters.
+
+**All five sort options on one row.** They were wrapping onto three lines,
+taking more height than the first result they reorder. Sized to their own text
+rather than equal shares — equal shares gave all five 59px, which four did not
+need and "Recommended" did, so it alone was truncated to "Recom..." while its
+neighbours sat in whitespace.
+
+**The seven-day strip no longer scrolls sideways.** A 900px floor made half the
+week invisible on a phone, including whichever day was cheapest — and a week is
+a shape you read at a glance, not one you drag. The month is dropped from each
+label (it is identical across a seven-day window) and the week arrows are
+squeezed; the day prices wrap rather than painting over each other.
+
+**Details collapse.** Features, route, transit and policies were four stacked
+bands on every result. They are one wrapped row behind a toggle now, hidden
+with CSS rather than unmounted so the prerendered snapshot a crawler reads is
+unchanged.
+
+**The trip stacks vertically** with the arrow turned to point down. Side by
+side was tried first and does not survive the content: "Thessaloniki (GRC)
+16:30" measures 215px in a 96px column and painted 50px outside the card — the
+page never scrolled sideways, so nothing looked broken until it was measured.
+
+## 1.17.0
+
+Internal linking blocks: "Popular routes from Tirana" / "Popular routes to
+Thessaloniki", as real router links, because the entire value is that a
+crawler follows them.
+
+The sitemap already announces every sellable pair, but a sitemap is a hint —
+a page nothing links to is still orphaned. These put every pair one click from
+another.
+
+Ordered by paid bookings, never filtered by them: the pairs with no orders yet
+are exactly the orphans this exists to reach. The block also survives a pair
+with no facts, which is precisely where a reader most needs a way onward.
+
+## 1.16.0
+
+The crawlable timetable, and a section layout around the wizard.
+
+Every service on the pair as a real `<table>` — departs, arrives, duration,
+stops, operator with its rating, price — sorted by departure time. This is the
+part of Tier 3 that actually ranks: dense, unique to the pair, and made of the
+words somebody types, without a sentence of written copy. No interactivity, so
+a prerendered snapshot shows a non-JS crawler exactly what a reader sees.
+
+A sticky in-page nav (Trips · Facts · Timetable) so somebody who landed from a
+search engine can reach the timetable without scrolling past a booking form
+they have not decided to use. The wizard itself is untouched — this is a
+layout around it, not a change to the funnel.
+
+Facts and the timetable share ONE request. Two components each fetching the
+same response would have doubled what the prerender crawl costs on every pair.
+
+No "type" or "class" column, which the roadmap asked for: every route in this
+system is typed `international` and the bus names are inventory identifiers
+like "A100". A column that says nothing on every row reads as padding.
+
+## 1.15.0
+
+Distance is now measured along the route's own stops rather than as one line
+from origin to destination, and the facts payload carries two numbers instead
+of one: `road`, real driving distance from a routing service, and `approx`,
+the straight lines summed stop by stop.
+
+Real road distance prints plainly. The approximation prints with a caveat,
+because it understates every journey — 309 km against 401 km of actual tarmac
+on Tirana–Thessaloniki via Korça, a 23% shortfall. A straight line is the
+shortest path there is, so no number of extra points can ever close that gap.
+
+## 1.14.0
+
+The facts block on a route-pair page: fares from, journey time, first and last
+departure, how many run, distance and who operates it.
+
+Read off the timetable rather than a dated search, so it does not change with
+the date in the URL — a "from EUR 12" that moved depending on which day a
+crawler arrived would look unstable to a search engine and dishonest to a
+reader who came back.
+
+Distance is labelled "straight line" because that is what it is: we hold city
+coordinates, not routing data, so the figure is always shorter than the road.
+
+Renders nothing at all for a pair with no facts. An empty facts block is worse
+than none — it is the thin content this tier exists to remove.
+
 ## 1.13.0
 
 The operator's rating on each result card. The operator's rather than the

package/Facts/Facts.tsx

@@ -0,0 +1,119 @@
+import { TFunction } from 'i18next';
+import { Container, Grid, Fact, Label, Value, Note, Operators } from './styles';
+import { FactsData } from './types';
+
+interface Props {
+  id: string
+  // Edited: Ferjolt Ozuni - Date: 2026-08-03
+  // Handed in rather than fetched here. The schedule table is built from the
+  // same response, and two components each running the same query would have
+  // meant the prerender crawl paying for every pair twice.
+  facts: FactsData
+  t: TFunction<'common'>
+}
+
+/**
+ * The facts about this city pair.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Roadmap Tier 3.2. What somebody searching "Tirana to Durres bus" wants
+ * answered before they trust the page: cost, length, when the first and last
+ * coach go, how many there are, how far, and who runs it.
+ *
+ * Everything here is read off the TIMETABLE rather than a dated search, so it
+ * does not change with the date in the URL. That is deliberate: a "from EUR
+ * 12" that moved depending on which day a crawler arrived would look unstable
+ * to a search engine and dishonest to a reader who came back.
+ *
+ * Renders nothing at all when the API has no facts for the pair. An empty
+ * facts block is worse than none - it is exactly the thin content this tier
+ * exists to remove.
+ */
+const Facts = ({ id, facts, t }: Props): JSX.Element => {
+  // "07:30" built from a duration in minutes reads as a time of day, so the
+  // hours and minutes are spelled out instead.
+  const duration = (minutes: number): string => (
+    t('routes_order.facts.duration_value', {
+      hours: Math.floor(minutes / 60),
+      minutes: minutes % 60
+    })
+  );
+
+  const range = facts.duration_min !== null && facts.duration_max !== null
+    ? (facts.duration_min === facts.duration_max
+        ? duration(facts.duration_min)
+        : `${ duration(facts.duration_min) } – ${ duration(facts.duration_max) }`)
+    : null;
+
+  return (
+    <Container id={ id } className="box">
+      <h2>{ t('routes_order.facts.title', { from: facts.from, to: facts.to }) }</h2>
+
+      <Grid>
+        { facts.price_from_display && (
+          <Fact>
+            <Label>{ t('routes_order.facts.price') }</Label>
+            <Value>{ facts.price_from_display }</Value>
+          </Fact>
+        ) }
+
+        { range && (
+          <Fact>
+            <Label>{ t('routes_order.facts.duration') }</Label>
+            <Value>{ range }</Value>
+          </Fact>
+        ) }
+
+        { facts.departure_first && (
+          <Fact>
+            <Label>{ t('routes_order.facts.first') }</Label>
+            <Value>{ facts.departure_first }</Value>
+          </Fact>
+        ) }
+
+        { facts.departure_last && (
+          <Fact>
+            <Label>{ t('routes_order.facts.last') }</Label>
+            <Value>{ facts.departure_last }</Value>
+          </Fact>
+        ) }
+
+        <Fact>
+          <Label>{ t('routes_order.facts.departures') }</Label>
+          <Value>{ facts.departures }</Value>
+        </Fact>
+
+        { facts.distance && (
+          <Fact>
+            <Label>{ t('routes_order.facts.distance') }</Label>
+
+            <Value>
+              { t('routes_order.facts.distance_value', {
+                km: facts.distance.road ?? facts.distance.approx
+              }) }
+
+              { /* The caveat appears only on the approximation. A real road
+                   distance needs no apology; a sum of straight lines does,
+                   because it understates every journey - 309 km against 401
+                   km of tarmac on Tirana-Thessaloniki. Printing that bare, as
+                   though it were the driving distance, would be quietly wrong
+                   on every single pair. */ }
+              { facts.distance.road === null && (
+                <Note>{ t('routes_order.facts.distance_note') }</Note>
+              ) }
+            </Value>
+          </Fact>
+        ) }
+      </Grid>
+
+      { facts.operators.length > 0 && (
+        <Operators>
+          { t('routes_order.facts.operators', { operators: facts.operators.join(', ') }) }
+        </Operators>
+      ) }
+    </Container>
+  );
+};
+
+export default Facts;

package/Facts/services.ts

@@ -0,0 +1,19 @@
+import { UseQueryResult, useQuery } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { FactsResponse } from './types';
+
+export const useGetFacts = (from?: string, to?: string): UseQueryResult<FactsResponse> => (
+  useQuery({
+    queryKey: ['route-facts', from, to],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/routes/search/facts', {
+          params: { from, to }
+        })
+        .then(response => (
+          response.data
+        ))
+    ),
+    enabled: Boolean(from && to)
+  })
+);

package/Facts/styles.ts

@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+
+export const Container = styled.section`
+  margin-top: 25px;
+`;
+
+export const Grid = styled.dl`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 18px;
+  margin: 0;
+`;
+
+export const Fact = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+`;
+
+export const Label = styled.dt`
+  font-size: ${ props => props.theme.size.s };
+  color: ${ props => props.theme.font.faded };
+`;
+
+export const Value = styled.dd`
+  margin: 0;
+  font-size: ${ props => props.theme.size.l };
+  font-weight: 700;
+  line-height: 1.2;
+`;
+
+/**
+ * Qualifies a value that is not quite what its label implies - the straight
+ * line distance, which is always shorter than the road.
+ */
+export const Note = styled.span`
+  display: block;
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: 400;
+  color: ${ props => props.theme.font.faded };
+`;
+
+export const Operators = styled.p`
+  margin: 20px 0 0;
+  color: ${ props => props.theme.font.faded };
+  font-size: ${ props => props.theme.size.s };
+  line-height: 1.5;
+`;

package/Facts/types.ts

@@ -0,0 +1,60 @@
+export interface FactsData {
+  from: string
+  to: string
+  // cheapest adult fare anybody sells this leg for
+  price_from: number | null
+  // formatted by the API with the brand's own currency - the PUBLIC settings
+  // payload carries no currency, so a frontend has nothing to format with
+  price_from_display: string | null
+  // both ends of the range, in minutes
+  duration_min: number | null
+  duration_max: number | null
+  departure_first: string | null
+  departure_last: string | null
+  // how many coaches serve the pair in the TIMETABLE, not on a given date
+  departures: number
+  operators: string[]
+  // Two numbers that must never be conflated.
+  //
+  // `road` is real driving distance from a routing service and is null unless
+  // one is configured. `approx` sums straight lines stop by stop - always
+  // available, and ALWAYS SHORT, because a straight line is the shortest path
+  // there is. Measured on Tirana-Thessaloniki via Korca: approx 309 km
+  // against 401 km of actual road, a 23% understatement. Show `road` plainly
+  // when it exists; show `approx` only with its caveat attached.
+  distance: { road: number | null, approx: number } | null
+  // every service on the pair, sorted by departure - Tier 3.3
+  schedule: ScheduleRow[]
+}
+
+export interface ScheduleRow {
+  route: string
+  operator: string | null
+  // null until the operator has enough published reviews - see Tier 2
+  rating: { average: number, count: number } | null
+  departure: string | null
+  arrival: string | null
+  minutes: number | null
+  // 0 is a direct service
+  stops: number
+  price: string
+}
+
+export interface LinkRow {
+  from: string
+  to: string
+  from_name: string
+  to_name: string
+  url: string
+  // paid orders in the last year - ranks the list, never gates membership
+  orders: number
+}
+
+export interface FactsResponse {
+  // null for a pair that is not sold - an envelope rather than a bare null,
+  // because `{}` is truthy in JavaScript
+  facts: FactsData | null
+  // Tier 3.4 - pairs leaving the origin, and pairs arriving at the
+  // destination. Present even when `facts` is null.
+  links: { from: LinkRow[], to: LinkRow[] }
+}

package/Found/Dates/Dates.tsx

@@ -2,9 +2,10 @@ import { useState } from 'react';
 import { TFunction } from 'i18next';
 import { AiOutlineCaretLeft, AiOutlineCaretRight } from 'react-icons/ai';
 import { Button } from '@autobusal/common';
-import { createDate, getFormattedShort } from '@autobusal/utilities';
+import { useMediaQuery } from '@autobusal/hooks';
+import { createDate, getDayParts } from '@autobusal/utilities';
 import Loading from './Loading';
-import { Container, Inner, ButtonDay, DayPrice, Cheapest } from './styles';
+import { Container, Inner, ButtonDay, DayPrice, Cheapest, Weekday, DayNumber, Month } from './styles';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { FoundDay } from '../../types';
 import { useGetDates } from '../../services';
@@ -19,6 +20,24 @@ interface Props {
 const Dates = ({ type, step1, t, onSearch }: Props): JSX.Element => {
   const [number, setNumber] = useState<number>(0);
 
+  // Edited: Ferjolt Ozuni - Date: 2026-08-03
+  // Three days on a phone, five on a tablet, seven on a desktop.
+  //
+  // Seven fit on a phone without a scroller once the labels were trimmed,
+  // but only at about 36px a cell - enough to read, not enough to be
+  // comfortable to hit with a thumb, and with the price wrapping to three
+  // lines underneath. Each step up in width buys two more days rather than
+  // squeezing the same seven.
+  //
+  // This is one of the few things CSS genuinely cannot do: hiding cells
+  // would mean hiding FIXED positions, and the days that matter least are
+  // the ones furthest from the selected date, which moves.
+  const phone = useMediaQuery('(max-width: 639px)');
+
+  const tablet = useMediaQuery('(max-width: 1023px)');
+
+  const visible = phone ? 3 : (tablet ? 5 : 7);
+
   const { data, isLoading } = useGetDates(step1, type, number);
 
   if (isLoading) {
@@ -67,7 +86,34 @@ const Dates = ({ type, step1, t, onSearch }: Props): JSX.Element => {
     && Math.max(...prices) > (lowest as number)
     && atLowest * 2 <= prices.length;
 
-  const items = data?.map(item => {
+  /**
+   * The days actually shown.
+   *
+   * Centred on the selected day where the window allows, so shrinking to
+   * five never hides the day somebody is looking at - and clamped at both
+   * ends, so a selection sitting at the very start or end of the week still
+   * yields five days rather than three.
+   */
+  const shown = (() => {
+    const days = data ?? [];
+
+    if (days.length <= visible) {
+      return days;
+    }
+
+    const selected = days.findIndex(item => item.day === step1[type]);
+
+    // Centre on the selected day, then clamp - so a selection at either end
+    // of the week still yields a full window rather than a short one.
+    const start = Math.min(
+      Math.max(0, (selected === -1 ? 0 : selected) - Math.floor(visible / 2)),
+      days.length - visible
+    );
+
+    return days.slice(start, start + visible);
+  })();
+
+  const items = shown.map(item => {
     const date = createDate(item.day);
 
     // if date in the future, and we have routes available
@@ -77,7 +123,15 @@ const Dates = ({ type, step1, t, onSearch }: Props): JSX.Element => {
 
     return (
       <ButtonDay key={ item.id } $available={ isAvailable } $selected={ step1[type] === item.day } onClick={ () => onClick(item, isAvailable) }>
-        { getFormattedShort(date, t) }
+        { /* Edited: Ferjolt Ozuni - Date: 2026-08-03
+             In parts, so a phone can drop the month and fit seven days
+             without a horizontal scroller - see Month in styles. */ }
+        <Weekday>{ getDayParts(date, t).weekday }</Weekday>
+
+        <DayNumber>
+          { getDayParts(date, t).day }
+          <Month>{ ' ' + getDayParts(date, t).month }</Month>
+        </DayNumber>
 
         { isAvailable && item.from_price_display && (
           <DayPrice $cheapest={ isCheapest }>{ item.from_price_display }</DayPrice>
@@ -88,7 +142,7 @@ const Dates = ({ type, step1, t, onSearch }: Props): JSX.Element => {
         ) }
       </ButtonDay>
     );
-  })
+  });
 
   return (
     <Container>

package/Found/Dates/styles.ts

@@ -1,23 +1,105 @@
 import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
-  overflow-x: auto;
   margin-bottom: 15px;
-  padding: 10px 15px;
+  padding: 8px 6px;
   background-color: ${ props => props.theme.background.neutral };
   border-radius: ${ props => props.theme.borderRadius };
+
+  @media (min-width: 640px) {
+    overflow-x: auto;
+    padding: 10px 15px;
+  }
 `;
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * The 900px floor is what forced the strip to scroll sideways on a phone -
+ * seven days plus two arrows in a box the screen could not hold. A week is a
+ * shape people read at a glance, and a shape you have to drag is not one:
+ * half the week was simply invisible, including whichever day was cheapest.
+ *
+ * The floor now applies only from 640px up, where there is room for it.
+ * Below that the days share the width and the month is dropped from each
+ * label (see Month) so seven of them fit.
+ */
 export const Inner = styled.div`
-  min-width: 900px;
   display: flex;
-  gap: 5px;
+  gap: 2px;
   justify-content: center;
   align-items: center;
+
+  /**
+   * The two week-stepping arrows, squeezed on a phone. At their default size
+   * they took 70px of a 355px row between them - a fifth of the week's worth
+   * of space spent on two chevrons, which left each day 34px and forced the
+   * prices to wrap three times.
+   */
+  & > button:first-child,
+  & > button:last-child {
+    flex: 0 0 auto;
+    padding: 0 6px;
+    height: 30px;
+  }
+
+  @media (min-width: 640px) {
+    min-width: 900px;
+    gap: 5px;
+
+    & > button:first-child,
+    & > button:last-child {
+      padding: 0 20px;
+      height: auto;
+    }
+  }
+`;
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * The WEEKDAY is what goes below a desktop, not the month.
+ *
+ * With three or five days showing rather than seven, a date needs to say
+ * which date it is more than it needs to say which weekday - "04 AUG" is
+ * unambiguous on its own, while "Tue 04" leaves somebody counting forward
+ * from today to work out whether that is this week or next. On a full
+ * seven-day strip the weekday earns its place, because the row reads as a
+ * week; on three days it does not.
+ */
+export const Weekday = styled.span`
+  display: none;
+
+  @media (min-width: 1024px) {
+    display: inline;
+  }
+`;
+
+export const DayNumber = styled.span`
+  display: block;
+  line-height: 1.2;
+
+  @media (min-width: 1024px) {
+    display: inline;
+
+    &::before {
+      content: ', ';
+    }
+  }
+`;
+
+export const Month = styled.span`
+  text-transform: uppercase;
+
+  @media (min-width: 1024px) {
+    text-transform: none;
+  }
 `;
 
 export const ButtonDay = styled.button<{ $available: boolean, $selected: boolean }>`
-  flex: 1;
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -27,10 +109,14 @@ export const ButtonDay = styled.button<{ $available: boolean, $selected: boolean
   min-height: 26px;
   font-weight: 700;
   text-align: center;
-  font-size: ${ props => props.theme.size.s };
+  font-size: ${ props => props.theme.size.xs };
   border-radius: 12px;
   transition: all 0.3s ease;
 
+  @media (min-width: 640px) {
+    font-size: ${ props => props.theme.size.s };
+  }
+
   ${ props => !props.$available && css`
     opacity: .6;
   ` }
@@ -53,7 +139,23 @@ export const ButtonDay = styled.button<{ $available: boolean, $selected: boolean
  * so the price stays readable once the parent flips to the primary fill.
  */
 export const DayPrice = styled.span<{ $cheapest: boolean }>`
-  font-size: ${ props => props.theme.size.xs };
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * Allowed to WRAP on a phone. "38.00 EUR" is wider than the ~45px a
+   * seventh of the screen gives a cell, and held on one line it simply
+   * painted over its neighbours - seven prices overlapping into an
+   * unreadable smear, which is worse than the scroller this replaced. Two
+   * short lines fit.
+   */
+  white-space: normal;
+  overflow-wrap: anywhere;
+  line-height: 1.15;
+  font-size: calc(${ props => props.theme.size.xs } - 1px);
+
+  @media (min-width: 640px) {
+    white-space: nowrap;
+    font-size: ${ props => props.theme.size.xs };
+  }
   font-weight: ${ props => props.$cheapest ? 700 : 400 };
   opacity: .85;
 `;

package/Found/Found.tsx

@@ -8,6 +8,7 @@ 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 { Results, Sidebar, Listing } from '../styles';
 import { useGetAlternatives } from '../services';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
@@ -89,6 +90,14 @@ const Found = ({ type, loading, data, step1, preferredStop, t, onSearch, onSave
     <>
       <Dates type={ type } step1={ step1 } t={ t } onSearch={ onSearch } />
 
+      { /* 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