@autobusal/routes-order 1.37.5 → 1.37.7

package/Availability/Availability.tsx

@@ -0,0 +1,166 @@
+import { TFunction } from 'i18next';
+import { NextDay } from '../Schedule/styles';
+import { Container, Heading, Lead, Wrap, Table, Time, Faded, Fare, Price, SeatsLeft, Book, Later, More, Updated } from './styles';
+import { LOW_SEATS, Day, Prepared } from './service';
+
+interface Props {
+  id: string
+  // Built by ./service and handed in, because the BusTrip markup a few
+  // hundred pixels up the document is emitted from this very object. One
+  // builder, two consumers - see the header comment there.
+  data: Prepared
+  t: TFunction<'common'>
+}
+
+/**
+ * How many days are open when the section first renders.
+ *
+ * A week: enough that somebody asking "is there a bus this weekend" never
+ * has to expand anything, few enough that the page still ends.
+ */
+const VISIBLE = 7;
+
+/**
+ * Real departures on real dates, for the next thirty days.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * WHY THIS EXISTS. A customer asked an assistant for a bus from
+ * Thessaloniki to Tirana on the 20th of September. This page answered with
+ * a date-independent timetable - the services that exist, in the abstract -
+ * and said nothing whatsoever about the 20th, so neither the customer nor
+ * the assistant could tell whether a seat existed on it. The timetable is
+ * still below, and is still the right thing for "what time do the buses
+ * go"; this is the answer to "is there one on Thursday, and is it full".
+ *
+ * A DAY WITH NOTHING ON IT IS STILL A ROW. "No departures on this date" is
+ * information - it is, in fact, the harder half of the question to answer
+ * anywhere else - and a day quietly missing from the list reads as an
+ * oversight rather than as an answer.
+ *
+ * NOTHING IS EVER CONDITIONALLY MOUNTED. Days past the first week sit
+ * inside a <details>, which hides them without removing them: a crawler and
+ * an assistant read all thirty, a visitor scrolls seven. See Later in
+ * ./styles for what this codebase already paid to learn about accordions
+ * that mount only what is open.
+ */
+const Availability = ({ id, data, t }: Props): JSX.Element => {
+  const columns = 6;
+
+  const body = (day: Day): JSX.Element => (
+    <tbody key={ day.date }>
+      <tr>
+        { /* The ISO date on the heading, so the machine-readable date is
+             the one under the words rather than one assembled elsewhere. */ }
+        <th colSpan={ columns } scope="colgroup">
+          <time dateTime={ day.date }>{ day.label }</time>
+        </th>
+      </tr>
+
+      { day.departures.length === 0 ? (
+        <tr>
+          <td className="none" colSpan={ columns }>{ t('routes_order.availability.none') }</td>
+        </tr>
+      ) : day.departures.map((row, index) => (
+        <tr key={ index }>
+          <td>
+            <Time dateTime={ row.departs ?? undefined }>{ row.time }</Time>
+          </td>
+
+          { /* The same +1 the timetable and the result cards carry, from the
+               same styled component - a row whose arrival is the following
+               morning and does not say so is the one row on the page
+               somebody will act on wrongly. */ }
+          <td>
+            { row.arrival ? (
+              <>
+                <Time dateTime={ row.arrives ?? undefined }>{ row.arrival }</Time>
+
+                { row.offset > 0 && (
+                  <NextDay title={ t('routes_order.step2.route.next_day', { count: row.offset }) }>
+                    +{ row.offset }
+                  </NextDay>
+                ) }
+              </>
+            ) : <Faded>-</Faded> }
+          </td>
+
+          <td><Faded>{ row.duration ?? '-' }</Faded></td>
+
+          <td>{ row.operator ?? '-' }</td>
+
+          <td>
+            <Fare>
+              <Price>{ row.price ?? '-' }</Price>
+
+              { /* The same wording and the same threshold as the result
+                   cards - "Seats left: 49", a label and a number, never a
+                   counted noun that fifteen languages would have to make
+                   agree. */ }
+              { row.seats !== null && (
+                <SeatsLeft $low={ row.seats <= LOW_SEATS }>
+                  { t('routes_order.step2.route.seats_left', { count: row.seats }) }
+                </SeatsLeft>
+              ) }
+            </Fare>
+          </td>
+
+          <td>
+            { row.url ? <Book href={ row.url }>{ t('routes_order.availability.book') }</Book> : null }
+          </td>
+        </tr>
+      )) }
+    </tbody>
+  );
+
+  const table = (days: Day[]): JSX.Element => (
+    <Wrap>
+      <Table>
+        <thead>
+          <tr>
+            { /* The column vocabulary is the timetable's, deliberately -
+                 two sections on one page that say "Departs" and "Departure"
+                 about the same thing are two sections a reader has to
+                 reconcile. Only the fare differs: the timetable's header is
+                 "From" because its prices are the cheapest anybody sells the
+                 leg for, and these are the actual fare on the actual date. */ }
+            <th>{ t('routes_order.schedule.departure') }</th>
+            <th>{ t('routes_order.schedule.arrival') }</th>
+            <th>{ t('routes_order.schedule.duration') }</th>
+            <th>{ t('routes_order.schedule.operator') }</th>
+            <th>{ t('routes_order.availability.price') }</th>
+            <th>{ t('routes_order.availability.book') }</th>
+          </tr>
+        </thead>
+
+        { days.map(body) }
+      </Table>
+    </Wrap>
+  );
+
+  const rest = data.days.slice(VISIBLE);
+
+  return (
+    <Container id={ id } className="box">
+      <Heading>{ t('routes_order.availability.title', { from: data.from, to: data.to }) }</Heading>
+
+      <Lead>{ t('routes_order.availability.lead') }</Lead>
+
+      { table(data.days.slice(0, VISIBLE)) }
+
+      { rest.length > 0 && (
+        <Later>
+          <More>{ t('routes_order.availability.more') }</More>
+
+          { table(rest) }
+        </Later>
+      ) }
+
+      { /* A seat count is only true of a moment, so the page says which
+           moment - and that is what earns the Offer markup its validFrom. */ }
+      { data.updated && <Updated>{ data.updated }</Updated> }
+    </Container>
+  );
+};
+
+export default Availability;

package/Availability/Schema.tsx

@@ -0,0 +1,127 @@
+import { TFunction } from 'i18next';
+import { JsonLd } from '@autobusal/common';
+import { LOW_SEATS, Prepared } from './service';
+
+interface Props {
+  // The SAME object the section renders from - see ./service. Not a second
+  // pass over the payload that happens to agree with the first one.
+  data: Prepared
+  t: TFunction<'common'>
+}
+
+/**
+ * One BusTrip per dated departure.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * The pair-level BusTrip in ../Sections/Schema describes the journey in the
+ * abstract - how long it takes, who runs it, what it costs from. This
+ * describes the actual coaches: this operator, leaving at this instant on
+ * this date, at this fare, with this many seats left. That is the thing an
+ * assistant was asked for and could not find.
+ *
+ * THE RULE THIS FILE INHERITS: never state here what the page does not
+ * show. It is not enforced by care - it is enforced by the fact that every
+ * value below comes out of the same prepared array the table is built from,
+ * including the datetimes, which the cells carry as their own `datetime`
+ * attributes. There is no path by which the markup can describe a departure
+ * the reader cannot see.
+ *
+ * CAPPED AT THE DAYS IN THE DOM, which is all thirty of them: the days past
+ * the first week are collapsed, not unmounted. If that ever changes, this
+ * has to be sliced to match - a thirty-day promise over a seven-day page is
+ * the mismatch that costs a site its rich results.
+ *
+ * ONE SCRIPT, not one per departure. A @graph of a hundred and fifty nodes
+ * is a single parse for a consumer and a single tag in the snapshot;
+ * scattering them would multiply the boilerplate by the number of coaches.
+ */
+const TRIPS = 100;
+
+const Schema = ({ data, t }: Props): (JSX.Element | null) => {
+  const stop = (name: string) => ({ '@type': 'BusStop', name });
+
+  /**
+   * HOW MANY DEPARTURES GET MARKUP, which is not the same as how many the
+   * page shows.
+   *
+   * Edited: Claude - Date: 2026-09-16
+   *
+   * MEASURED on a busy pair (Tirana-Thessaloniki, ten coaches a day): thirty
+   * days produced 300 BusTrip nodes and 194 KB of JSON-LD - 41% of a 482 KB
+   * page, for a hundred near-identical descriptions of the same two-hour
+   * journey at different clock times. The table underneath still lists every
+   * one of the thirty days in plain text, so nothing is hidden from a reader
+   * or from a crawler; what is capped is the repetition in the markup.
+   *
+   * A hundred is roughly a fortnight on the busiest pair here and the whole
+   * month on most of them, which is the horizon anybody books within.
+   */
+  const trips = data.days.flatMap(day => day.departures.map(row => ({
+    '@type': 'BusTrip',
+    name: t('routes_order.facts.title', { from: data.from, to: data.to }),
+
+    departureBusStop: stop(data.from),
+    arrivalBusStop: stop(data.to),
+
+    // Real instants - date, clock time, and the offset of the city whose
+    // clock that time is read from: the origin's for the departure, the
+    // destination's for the arrival (see arrival_timezone in ./types). An overnight service's arrival is already on the following day;
+    // the payload's arrival_offset is what makes that knowable from two
+    // clock times. Absent rather than approximated when the date or the
+    // zone could not be resolved.
+    ...(row.departs ? { departureTime: row.departs } : {}),
+    ...(row.arrives ? { arrivalTime: row.arrives } : {}),
+
+    ...(row.operator ? {
+      provider: { '@type': 'Organization', name: row.operator }
+    } : {}),
+
+    // Only with a real ISO 4217 code and a real number: `price` formatted
+    // for display has the symbol baked in, and an Offer built by guessing a
+    // currency back out of it would be confidently wrong.
+    ...(row.amount !== null && data.currency ? {
+      offers: {
+        '@type': 'Offer',
+        price: row.amount,
+        priceCurrency: data.currency,
+
+        ...(row.url ? { url: row.url } : {}),
+
+        /*
+         * READ off the seat count the row prints, never asserted. Below the
+         * threshold that makes the cell bold, this says LimitedAvailability
+         * - the same claim, to the same standard, from the same number. A
+         * departure whose seat count is unknown is InStock, which is what
+         * listing it as bookable on a date already says.
+         */
+        availability: (row.seats !== null && row.seats <= LOW_SEATS)
+          ? 'https://schema.org/LimitedAvailability'
+          : 'https://schema.org/InStock',
+
+        /*
+         * WHEN THE FARE AND THE SEATS WERE MEASURED. Non-null only when the
+         * page prints that moment in its own footnote - see `checked` in
+         * ./service, where the two are tied together so that this cannot
+         * carry a timestamp a reader has no way to see.
+         */
+        ...(data.quoted ? { validFrom: data.quoted } : {}),
+
+        /*
+         * And when the offer stops being one: a seat cannot be bought after
+         * the coach has left. The instant is the departure the row shows,
+         * not a separate claim about a sales deadline.
+         */
+        ...(row.departs ? { availabilityEnds: row.departs } : {})
+      }
+    } : {})
+  })));
+
+  if (trips.length === 0) {
+    return null;
+  }
+
+  return <JsonLd data={ { '@context': 'https://schema.org', '@graph': trips.slice(0, TRIPS) } } />;
+};
+
+export default Schema;

package/Availability/service.ts

@@ -0,0 +1,368 @@
+import { TFunction } from 'i18next';
+import { MONTHS } from '../Facts/service';
+import { DAYS as WEEKDAYS, duration as spell } from '../Facts/questions';
+import { AvailabilityResponse } from './types';
+
+/**
+ * Every departure this section shows, ready to render.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * ONE BUILDER, TWO CONSUMERS, and that is the entire point - the same
+ * argument ../Facts/questions makes for the FAQ. The table a human reads
+ * and the BusTrip markup a machine reads are both built from the array this
+ * returns, so every datetime, fare and seat count in the structured data is
+ * literally the value printed a few pixels away. The rule this codebase
+ * enforces - never emit what the page does not show - stops being a thing
+ * somebody has to remember and becomes a thing the types make true.
+ *
+ * It is also where everything the wire can get wrong is dealt with, once: a
+ * date that does not parse, a departure with no clock time, a payload with
+ * no days in it at all. A caller gets either a complete object or null, and
+ * null means the page renders exactly as well as it did before this section
+ * existed.
+ */
+export interface Departure {
+  // local clock time at the origin, as the row prints it
+  time: string
+  arrival: string | null
+  // days between boarding and arriving, 0 same day
+  offset: number
+  // already spelled out - "9h", "8h 30m"
+  duration: string | null
+  operator: string | null
+  // the formatted fare the cell prints
+  price: string | null
+  // the same fare as a number, for the Offer
+  amount: number | null
+  seats: number | null
+  url: string | null
+  // ISO 8601 instants, for the markup AND for the datetime attributes the
+  // cells carry - so the two cannot drift
+  departs: string | null
+  arrives: string | null
+}
+
+export interface Day {
+  // ISO, for the datetime attribute on the day heading
+  date: string
+  // "Sun, 20 September", in the reader's language
+  label: string
+  // empty on a day nothing runs
+  departures: Departure[]
+}
+
+export interface Prepared {
+  from: string
+  to: string
+  currency: string | null
+  days: Day[]
+  // "Fares and seats checked: ...", or null when generated_at is unusable
+  updated: string | null
+  // the same instant, unformatted, for Offer.validFrom - NON-NULL ONLY WHEN
+  // `updated` is, so the markup can never carry a timestamp the page does
+  // not print
+  quoted: string | null
+}
+
+/**
+ * At or below this many seats, the count is emphasised.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * THE SAME FIVE the search results use - see LOW_SEATS in
+ * ../Found/Route/Route.tsx, where the reasoning lives (a coach carries
+ * roughly fifty, so single figures are the point at which the number
+ * changes what somebody does about it rather than merely describing the
+ * bus). It is also the number the BusTrip markup turns into
+ * LimitedAvailability, so a coach that reads "nearly full" here says so to
+ * a machine as well.
+ *
+ * DUPLICATED, and that is a deliberate, temporary cost: the result card's
+ * copy is module-private and its file is being edited elsewhere as this is
+ * written. Worth folding into one exported constant the moment both are
+ * settled - two fives in two files is one edit away from a coach that reads
+ * "nearly full" on the search results and "plenty of room" here.
+ */
+export const LOW_SEATS = 5;
+
+const CLOCK = /^(\d{1,2}):(\d{2})/;
+
+const DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
+
+const pad = (value: number): string => (value < 10 ? `0${ value }` : String(value));
+
+/**
+ * What a zone's clocks read against UTC at a given instant, "+03:00".
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * Read from Intl rather than carried in the payload, because the offset is
+ * a property of the DATE as much as of the zone: a 30-day window that
+ * crosses the last Sunday in October contains departures at +03:00 and
+ * departures at +02:00, and one number stamped on the whole response would
+ * be wrong for half of them.
+ *
+ * Null on anything unexpected - an engine without `longOffset`, a zone name
+ * the browser does not know - and the caller then falls back to a local
+ * datetime with no offset at all, which is still valid ISO 8601 and still
+ * exactly the clock time the page prints. A GUESSED offset would not be.
+ */
+const zoned = (at: Date, zone: string): (string | null) => {
+  try {
+    const name = new Intl.DateTimeFormat('en-US', { timeZone: zone, timeZoneName: 'longOffset' })
+      .formatToParts(at)
+      .find(part => part.type === 'timeZoneName')
+      ?.value;
+
+    if (!name) {
+      return null;
+    }
+
+    // Iceland and friends format as a bare "GMT" rather than "GMT+00:00"
+    if (name === 'GMT' || name === 'UTC') {
+      return '+00:00';
+    }
+
+    const parts = /^(?:GMT|UTC)([+-])(\d{1,2})(?::?(\d{2}))?$/.exec(name);
+
+    return parts
+      ? `${ parts[1] }${ pad(Number(parts[2])) }:${ parts[3] ?? '00' }`
+      : null;
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * A date and a clock time in a zone, as one ISO 8601 instant.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * `plus` is the overnight marker: an arrival with an offset of 1 lands on
+ * the following date, which is the whole reason the payload carries the
+ * number instead of a second date string.
+ *
+ * TWO PASSES over the offset, deliberately. The wall-clock time is turned
+ * into a provisional instant, the zone is asked what it was doing THEN, and
+ * the question is asked again at the instant that implies. One pass is
+ * wrong for the couple of hours either side of a clock change - it would
+ * stamp an 02:30 departure on the last Sunday in March with the offset that
+ * ends at 02:00 - and a bus leaving at the wrong hour is precisely the
+ * thing this section exists to get right.
+ */
+export const instant = (date: string, time: string, zone: string, plus = 0): (string | null) => {
+  const day = DATE.exec(date);
+
+  const clock = CLOCK.exec(time);
+
+  if (!day || !clock) {
+    return null;
+  }
+
+  // Date.UTC rolls the month and the year over for us, so an overnight
+  // arrival on the 31st lands on the 1st without any calendar arithmetic
+  const wall = new Date(Date.UTC(
+    Number(day[1]),
+    Number(day[2]) - 1,
+    Number(day[3]) + plus,
+    Number(clock[1]),
+    Number(clock[2])
+  ));
+
+  if (Number.isNaN(wall.getTime())) {
+    return null;
+  }
+
+  const stamp = `${ wall.getUTCFullYear() }-${ pad(wall.getUTCMonth() + 1) }-${ pad(wall.getUTCDate()) }`
+    + `T${ pad(wall.getUTCHours()) }:${ pad(wall.getUTCMinutes()) }:00`;
+
+  const first = zoned(wall, zone);
+
+  if (!first) {
+    return stamp;
+  }
+
+  const minutes = (Number(first.slice(1, 3)) * 60) + Number(first.slice(4, 6));
+
+  const real = new Date(wall.getTime() - (first.startsWith('-') ? -minutes : minutes) * 60000);
+
+  return `${ stamp }${ zoned(real, zone) ?? first }`;
+};
+
+/**
+ * "Sun, 20 September", from the day and month names the site already ships
+ * in all fifteen languages.
+ *
+ * Three interpolations rather than one joined string, so a locale that
+ * orders them differently can - the same reason ../Facts/service spells out
+ * the date a route last ran.
+ *
+ * Null on anything that is not an ISO date, and the day is then dropped
+ * entirely rather than headed with a half-parsed one.
+ */
+export const dated = (date: string, t: TFunction<'common'>): (string | null) => {
+  const parts = DATE.exec(date);
+
+  if (!parts) {
+    return null;
+  }
+
+  const at = new Date(Date.UTC(Number(parts[1]), Number(parts[2]) - 1, Number(parts[3])));
+
+  if (Number.isNaN(at.getTime())) {
+    return null;
+  }
+
+  const month = MONTHS[Number(parts[2]) - 1];
+
+  // getUTCDay is 0 for Sunday; WEEKDAYS is keyed ISO, 1 Monday to 7 Sunday
+  const weekday = WEEKDAYS[at.getUTCDay() === 0 ? 7 : at.getUTCDay()];
+
+  if (!month || !weekday) {
+    return null;
+  }
+
+  return t('routes_order.availability.date', {
+    weekday: t(`data.days.${ weekday }`),
+    day: String(Number(parts[3])),
+    month: t(`data.months.${ month }`)
+  });
+};
+
+/**
+ * When the seats and fares below were measured.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * A seat count is only true of a moment, and this section is the one place
+ * on the site that prints one out of a booking flow - so it says which
+ * moment. It is also what earns the Offer its `validFrom`: the markup may
+ * carry that timestamp precisely because the page prints it.
+ *
+ * Shown in the ORIGIN's zone, not the reader's. Every other time in the
+ * table is local to the departure city, and a footnote that silently
+ * switched to the reader's own clock would be the one line on the page
+ * measured differently from the rest of it.
+ */
+export const checked = (stamp: string, zone: string, t: TFunction<'common'>): (string | null) => {
+  const at = new Date(stamp);
+
+  if (Number.isNaN(at.getTime())) {
+    return null;
+  }
+
+  try {
+    const parts = new Intl.DateTimeFormat('en-GB', {
+      timeZone: zone,
+      year: 'numeric',
+      month: 'numeric',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    }).formatToParts(at);
+
+    const value = (type: string): string => (parts.find(part => part.type === type)?.value ?? '');
+
+    const month = MONTHS[Number(value('month')) - 1];
+
+    if (!month || !value('year')) {
+      return null;
+    }
+
+    return t('routes_order.availability.updated', {
+      day: String(Number(value('day'))),
+      month: t(`data.months.${ month }`),
+      year: value('year'),
+      // hour12: false renders midnight as "24" in some engines
+      time: `${ value('hour') === '24' ? '00' : value('hour') }:${ value('minute') }`
+    });
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * The whole section's data, or nothing at all.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * NOTHING AT ALL IS THE IMPORTANT CASE. The endpoint may not answer - it
+ * may not exist yet, it may time out, it may answer with a window in which
+ * nothing runs - and in every one of those the page has to be exactly as
+ * good as it was before this section was written. No empty box, no "we
+ * could not load departures", no heading over a blank table: a visitor who
+ * never knew this section was coming must not be shown its absence.
+ *
+ * A window in which NOTHING runs on any of the thirty days returns null
+ * too. A day with no departures is information - it sits in the table
+ * saying so, next to the days that do run - but thirty consecutive rows of
+ * "no departures" is not a timetable, it is a wall, and the facts block
+ * above already says plainly when a pair has stopped running.
+ */
+export const prepare = (response: (AvailabilityResponse | undefined), t: TFunction<'common'>): (Prepared | null) => {
+  const data = response?.availability;
+
+  if (!data || !data.from || !data.to || !Array.isArray(data.days)) {
+    return null;
+  }
+
+  const zone = typeof data.timezone === 'string' ? data.timezone : '';
+
+  // Edited: Claude - Date: 2026-09-16
+  // The far end keeps its own clock; see arrival_timezone in ./types. Falls
+  // back to the departure zone, which is what this did before the API sent
+  // it - wrong only by the border, and never more wrong than that.
+  const arrivalZone = typeof data.arrival_timezone === 'string' && data.arrival_timezone
+    ? data.arrival_timezone
+    : zone;
+
+  const days = data.days.reduce<Day[]>((all, item) => {
+    const label = dated(item.date, t);
+
+    if (!label) {
+      return all;
+    }
+
+    const departures = (Array.isArray(item.departures) ? item.departures : []).reduce<Departure[]>((rows, row) => {
+      // a departure with no clock time is not a departure anybody can use
+      if (!row || typeof row.departure !== 'string' || !CLOCK.test(row.departure)) {
+        return rows;
+      }
+
+      const offset = Math.max(0, Number(row.arrival_offset ?? 0)) || 0;
+
+      return [ ...rows, {
+        time: row.departure,
+        arrival: row.arrival ?? null,
+        offset,
+        duration: typeof row.duration_min === 'number' ? spell(row.duration_min, t) : null,
+        operator: row.operator ?? null,
+        price: row.price_display ?? null,
+        amount: typeof row.price === 'number' ? row.price : null,
+        seats: typeof row.seats_left === 'number' ? row.seats_left : null,
+        url: row.url ?? null,
+        departs: instant(item.date, row.departure, zone),
+        arrives: row.arrival ? instant(item.date, row.arrival, arrivalZone, offset) : null
+      } ];
+    }, []);
+
+    return [ ...all, { date: item.date, label, departures } ];
+  }, []);
+
+  if (!days.some(day => day.departures.length > 0)) {
+    return null;
+  }
+
+  const updated = typeof data.generated_at === 'string' ? checked(data.generated_at, zone, t) : null;
+
+  return {
+    from: data.from,
+    to: data.to,
+    currency: data.currency ?? null,
+    days,
+    updated,
+    quoted: updated ? data.generated_at : null
+  };
+};

package/Availability/services.ts

@@ -0,0 +1,48 @@
+import { UseQueryResult, useQuery } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { AvailabilityResponse } from './types';
+
+/**
+ * How far ahead the section looks.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * Thirty, because that is the horizon somebody actually plans a coach
+ * journey on and it is the window an assistant is asked about ("is there a
+ * bus on the 20th"). It goes to the API as a parameter rather than being
+ * the endpoint's private opinion, so this number and the number of day
+ * blocks rendered below can never disagree.
+ */
+export const DAYS = 30;
+
+/**
+ * Real departures, on real dates.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * A SEPARATE request from useGetFacts, which is a cost worth naming: the
+ * pair page now makes two calls where it made one, on every page of the
+ * sitemap the prerender crawl walks. It is not avoidable - see ./types for
+ * why the two payloads cannot share a cache - and it is bounded, because
+ * this is one query per pair page, not one per departure.
+ *
+ * NO retry policy of its own. The client-wide one (providers/Queries)
+ * already does the right thing here: a 404, which is exactly what this
+ * answers with until the endpoint ships, is a decided answer and fails
+ * immediately without spending three attempts and two seconds on it.
+ */
+export const useGetAvailability = (from?: string, to?: string): UseQueryResult<AvailabilityResponse> => (
+  useQuery({
+    queryKey: ['route-availability', from, to],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/routes/search/availability', {
+          params: { from, to, days: DAYS }
+        })
+        .then(response => (
+          response.data
+        ))
+    ),
+    enabled: Boolean(from && to)
+  })
+);

package/Availability/styles.ts

@@ -0,0 +1,282 @@
+import styled from 'styled-components';
+
+export const Container = styled.section`
+  margin-top: 25px;
+`;
+
+export const Heading = styled.h2`
+  margin: 0 0 8px;
+`;
+
+/**
+ * One sentence saying what the table underneath is.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * Written for the reader who arrived asking whether there is a bus on a
+ * particular day - and, just as much, for the assistant answering that
+ * question on their behalf. A table of numbers with no sentence around it
+ * is perfectly readable to a person looking at it and gives a machine
+ * quoting the page nothing to quote.
+ */
+export const Lead = styled.p`
+  margin: 0 0 15px;
+  color: ${ props => props.theme.font.faded };
+  line-height: 1.6;
+`;
+
+/**
+ * Sideways scrolling is confined to the table, never the page.
+ */
+export const Wrap = styled.div`
+  overflow-x: auto;
+`;
+
+/**
+ * A real table, for the same reason the timetable above is one: this is
+ * tabular data, and the structure that makes it readable is the structure
+ * that lets a crawler understand the columns.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * Grouped by date, with the date as a row heading spanning the width -
+ * thirty separate tables would repeat the column headers thirty times, and
+ * a flat list of two hundred rows with the date in a seventh column is
+ * unreadable at exactly the moment somebody is scanning for one day.
+ *
+ * NO INTERACTIVITY ANYWHERE IN IT. A prerendered snapshot shows a
+ * non-JavaScript crawler precisely what a reader sees.
+ */
+export const Table = styled.table`
+  width: 100%;
+  min-width: 620px;
+  border-collapse: collapse;
+
+  th, td {
+    padding: 10px 12px;
+    text-align: left;
+    border-bottom: 1px solid ${ props => props.theme.background.neutral };
+    white-space: nowrap;
+  }
+
+  thead th {
+    font-size: ${ props => props.theme.size.s };
+    color: ${ props => props.theme.font.faded };
+    font-weight: 400;
+  }
+
+  /*
+   * The date, as a heading row. Sticky-looking rather than sticky: a
+   * position: sticky heading inside a table fights the sticky section nav
+   * at the top of the page, and the two overlapping is worse than neither.
+   */
+  tbody th {
+    padding: 16px 12px 8px;
+    border-bottom: 1px solid ${ props => props.theme.background.neutral };
+    font-size: ${ props => props.theme.size.s };
+    font-weight: 700;
+    background: ${ props => props.theme.background.normal };
+  }
+
+  /* a day nothing runs on - stated, never omitted */
+  tbody td.none {
+    color: ${ props => props.theme.font.faded };
+  }
+
+  tbody tr:last-child td {
+    border-bottom: none;
+  }
+
+  /*
+   * The same reasoning as the timetable's own narrow-screen rule: six
+   * columns need 620px and the phone reading this has 375, so the columns
+   * that fall off the right edge would be the ones that matter most.
+   *
+   * Duration is the one that goes, and it is the right one: it is DERIVED
+   * from the departure and arrival already on the row, so a reader loses
+   * arithmetic rather than a fact. Everything else stays, including the
+   * seat count, which is the whole reason this section exists.
+   */
+  @media (max-width: 767px) {
+    min-width: 0;
+    table-layout: fixed;
+
+    th:nth-child(3), td:nth-child(3) {
+      display: none;
+    }
+
+    th, td {
+      padding: 8px 4px;
+      font-size: ${ props => props.theme.size.xs };
+    }
+
+    /* the times, the fare and the link take what they need; the operator
+       takes the remainder and wraps inside it */
+    th:nth-child(1), td:nth-child(1),
+    th:nth-child(2), td:nth-child(2) {
+      width: 17%;
+    }
+
+    th:nth-child(5), td:nth-child(5) {
+      width: 23%;
+    }
+
+    th:nth-child(6), td:nth-child(6) {
+      width: 17%;
+    }
+
+    th:nth-child(4), td:nth-child(4),
+    td.none {
+      white-space: normal;
+      word-break: break-word;
+    }
+  }
+`;
+
+/**
+ * A clock time that also carries the machine-readable instant.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * A <time datetime> rather than a <strong>, and the attribute is the very
+ * string the BusTrip markup emits - so the page does not merely happen to
+ * agree with its own structured data, it renders it.
+ */
+export const Time = styled.time`
+  font-weight: 700;
+`;
+
+export const Faded = styled.span`
+  color: ${ props => props.theme.font.faded };
+`;
+
+/**
+ * The fare, with the seat count under it - the arrangement the result
+ * cards already use, because how many are left is a fact about this fare on
+ * this coach and is read at the same moment as the price.
+ */
+export const Fare = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+
+export const Price = styled.strong`
+  font-weight: 700;
+  white-space: nowrap;
+`;
+
+/**
+ * How many seats are still on sale.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * The same string and the same threshold as the result cards - see
+ * SeatsLeft in ../Found/Route/styles and LOW_SEATS in ./service, where the
+ * reasoning lives. The component is not shared because the container is
+ * not: there it
+ * is centred under a fare in a card, here it is left-aligned in a table
+ * cell, and a shared component carrying both would be two components in a
+ * trench coat.
+ *
+ * What IS shared is the only thing that matters - the wording and the
+ * number - because a coach that reads "nearly full" on the search results
+ * and "plenty of room" here is a bug, and one that nobody would notice
+ * until a customer did.
+ */
+export const SeatsLeft = styled.span<{ $low: boolean }>`
+  font-size: ${ props => props.theme.size.xxs };
+  line-height: 1.25;
+  white-space: nowrap;
+  font-weight: ${ props => (props.$low ? 700 : 400) };
+  color: ${ props => (props.$low ? props.theme.font.error : props.theme.font.faded) };
+`;
+
+/**
+ * The booking link for one departure.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * A plain anchor, not a router Link. The URL is built by obtapi and arrives
+ * absolute, carrying the date, the direction and its tracking parameters;
+ * picking it apart into a router path would mean re-deriving on the client
+ * something the server already decided, and getting it subtly wrong on a
+ * whitelabel domain. Same tab, because it is our own site and the reader is
+ * continuing, not leaving.
+ */
+export const Book = styled.a`
+  display: inline-block;
+  padding: 6px 12px;
+  border-radius: ${ props => props.theme.borderRadius };
+  background: ${ props => props.theme.primary.neutral };
+  color: ${ props => props.theme.font.normal };
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: 700;
+  white-space: nowrap;
+
+  &:hover {
+    text-decoration: none;
+    background: ${ props => props.theme.background.neutral };
+  }
+`;
+
+/**
+ * Everything past the first week.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * A native <details>, for the one property that decides it: THE ROWS ARE IN
+ * THE DOM WHETHER IT IS OPEN OR SHUT. This page is snapshot by the
+ * prerender crawl and read by machines that do not click, and the whole
+ * point of the section is that all thirty days are visible to them. An
+ * accordion built out of useState would ship a crawler seven days and a
+ * button - which is exactly how the homepage FAQ came to be prerendered
+ * with zero answers in it - while the BusTrip markup alongside promised
+ * thirty days of departures.
+ *
+ * Collapsed rather than not, because thirty day-blocks between the
+ * timetable and the footer is a page nobody reaches the bottom of.
+ */
+export const Later = styled.details`
+  margin-top: 4px;
+
+  &[open] summary {
+    margin-bottom: 4px;
+  }
+`;
+
+export const More = styled.summary`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 0;
+  cursor: pointer;
+  font-size: ${ props => props.theme.size.s };
+  font-weight: 700;
+  list-style: none;
+
+  /* the default disclosure triangle, replaced below by one that turns */
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  &:after {
+    content: '+';
+    color: ${ props => props.theme.font.faded };
+    font-weight: 400;
+  }
+
+  [open] > &:after {
+    content: '-';
+  }
+`;
+
+/**
+ * When the seats and fares above were measured - see `checked` in
+ * ./service for why the page says so at all.
+ */
+export const Updated = styled.p`
+  margin: 12px 0 0;
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.faded };
+`;

package/Availability/types.ts

@@ -0,0 +1,91 @@
+/**
+ * What /api/routes/search/availability answers with.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * A SECOND endpoint, deliberately, rather than another branch of
+ * /facts. The facts payload is cached for six hours because everything in
+ * it - the duration range, the fares-from, the operators - is a property of
+ * the TIMETABLE and does not change between two visitors. A seat count is
+ * the opposite: it is true at the moment it was measured and false by the
+ * afternoon, and folding it into a payload with a six-hour cache would have
+ * published stale seat counts as structured data.
+ *
+ * The nullable fields mirror ScheduleRow in ../Facts/types for the same
+ * reason it has them: this arrives over the wire from a search that can
+ * legitimately not know an operator name or a formatted fare, and a page
+ * that renders "undefined" in a timetable cell is worse than one that
+ * renders a dash.
+ */
+export interface AvailabilityDeparture {
+  // local clock time at the origin, "08:30"
+  departure: string
+  arrival: string | null
+  /**
+   * Days between boarding and arriving - 0 same day, 1 the next morning.
+   * Optional because an older build of the endpoint may not send it, and
+   * absent has to read as "same day" rather than as a crash.
+   */
+  arrival_offset?: number
+  duration_min: number | null
+  operator: string | null
+  // how many intermediate calls - carried for completeness; this section
+  // does not show it, and the timetable below already does
+  stops: number
+  price: number | null
+  price_display: string | null
+  // null where the search cannot say - see the render, which then shows
+  // nothing rather than guessing at a number people act on
+  seats_left: number | null
+  // the booking URL for THIS departure, already carrying its date and its
+  // tracking parameters - built by obtapi, never assembled here
+  url: string | null
+}
+
+export interface AvailabilityDay {
+  // ISO date, "2026-09-20"
+  date: string
+  // empty on a day nothing runs, which is information rather than an
+  // omission - see Availability.tsx
+  departures: AvailabilityDeparture[]
+}
+
+export interface AvailabilityData {
+  from: string
+  to: string
+  from_slug: string
+  to_slug: string
+  // ISO 4217, for the Offer - price_display has the symbol baked in and
+  // guessing a code back out of it would be confidently wrong
+  currency: string | null
+  // IANA zone of the ORIGIN, which is what turns "08:30 on 20 September"
+  // into an instant a machine can compare against another operator's
+  timezone: string
+
+  /**
+   * The clock the ARRIVAL times are on, which is not the departure city's on
+   * exactly the journeys this section exists for.
+   *
+   * Edited: Claude - Date: 2026-09-16
+   *
+   * A timetable prints every stop in its own local time. Stamping an arrival
+   * with the origin's offset publishes an instant that is wrong by the
+   * difference between the two - Thessaloniki to Tirana arrives 16:30 in
+   * Tirana, an hour after the +03:00 reading of the same clock face - and in
+   * schema.org markup that is a claim an assistant repeats as fact.
+   *
+   * Optional: an older API does not send it, and the code falls back to the
+   * departure zone, which is exactly what it did before this existed.
+   */
+  arrival_timezone?: string
+  // when the seats and fares below were measured
+  generated_at: string
+  days: AvailabilityDay[]
+}
+
+export interface AvailabilityResponse {
+  // an envelope rather than a bare null, matching FactsResponse - `{}` is
+  // truthy in JavaScript and a bare null tells a caller nothing about
+  // whether the request was even understood
+  availability: AvailabilityData | null
+}

package/Facts/service.ts

@@ -41,8 +41,15 @@ export const stopped = (facts: FactsData): (Stopped | null) => {
  * ISO month index to the month names the site already ships in all fifteen
  * languages (`data.months.*`), rather than a new set nobody would have
  * translated for one sentence.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ * Exported, because the next-30-days section names months too. Two copies
+ * of this list is two chances for one of them to be edited - and the whole
+ * value of leaning on `data.months.*` is that there is exactly one set of
+ * month names on the site, in fifteen languages, that somebody has already
+ * proof-read.
  */
-const MONTHS = [
+export const MONTHS = [
   'january', 'february', 'march', 'april', 'may', 'june',
   'july', 'august', 'september', 'october', 'november', 'december'
 ];

package/Found/Route/Route.tsx

@@ -97,11 +97,18 @@ const Route = ({ data, type, date, passengers, t, onSave, children }: Props): JS
    * Typed rather than truthy-checked: 0 is a real answer from obtapi and it
    * means a full bus, which never reaches a result list - and a `!` test
    * would have hidden the field on exactly the coach it mattered most on if
-   * one ever did. An external-provider offer (Mode A) carries no trip of
-   * ours to count, so it simply shows nothing.
+   * one ever did. An external-provider offer (Mode A) carries no count of
+   * ours, so it simply shows nothing.
+   *
+   * Edited: Claude - Date: 2026-09-16
+   * `seats_left`, NOT `trip.available_seats`. The first version of this read
+   * the capacity column - the only seat number the payload had - and shipped
+   * it as "Seats left", which announces an empty coach on a sold-out one.
+   * The search has always worked out the real figure to decide whether to
+   * offer the departure; it just never sent it. Now it does.
    */
-  const seats = typeof data.trip?.available_seats === 'number' && data.trip.available_seats > 0
-    ? data.trip.available_seats
+  const seats = typeof data.seats_left === 'number' && data.seats_left > 0
+    ? data.seats_left
     : null;
 
   // Edited: Ferjolt Ozuni - Date: 2026-08-03

package/Sections/Sections.tsx

@@ -1,10 +1,14 @@
 import { TFunction } from 'i18next';
 import Facts from '../Facts/Facts';
 import Faq from '../Faq/Faq';
+import Availability from '../Availability/Availability';
+import AvailabilitySchema from '../Availability/Schema';
 import Schedule from '../Schedule/Schedule';
 import Links from '../Links/Links';
 import Schema from './Schema';
 import { useGetFacts } from '../Facts/services';
+import { useGetAvailability } from '../Availability/services';
+import { prepare } from '../Availability/service';
 import buildQuestions from '../Facts/questions';
 import { stopped } from '../Facts/service';
 import { Nav, Anchor, Anchored } from './styles';
@@ -17,6 +21,7 @@ interface Props {
 
 const TRIPS = 'trips';
 const FACTS = 'facts';
+const AVAILABILITY = 'availability';
 const SCHEDULE = 'schedule';
 const FAQ = 'faq';
 const LINKS = 'links';
@@ -36,12 +41,25 @@ const LINKS = 'links';
  * response, and letting each fetch its own would have doubled what the
  * prerender crawl costs on every pair in the sitemap.
  *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * TWO fetches now, and the second one is not a regression of the paragraph
+ * above. The next-30-days section needs live seat counts, and the facts
+ * payload is cached for six hours precisely because nothing in it moves -
+ * folding one into the other would either publish stale seat counts or
+ * throw away a cache that every pair page depends on. It stays one request
+ * per page rather than one per departure, and it renders NOTHING when it
+ * fails, so a page whose second call never answers is exactly the page it
+ * was yesterday.
+ *
  * The nav renders only when there is more than the wizard to navigate to -
  * a bar whose only link is "Trips" is furniture.
  */
 const Sections = ({ from, to, t }: Props): (JSX.Element | null) => {
   const { data } = useGetFacts(from, to);
 
+  const { data: dates } = useGetAvailability(from, to);
+
   const facts = data?.facts;
 
   const links = data?.links ?? { from: [], to: [], reverse: null };
@@ -66,6 +84,19 @@ const Sections = ({ from, to, t }: Props): (JSX.Element | null) => {
   // that happen to agree today.
   const questions = buildQuestions(facts, t);
 
+  /**
+   * Edited: Claude - Date: 2026-09-16
+   *
+   * Prepared once, here, and handed to the section AND to its structured
+   * data - the same arrangement `questions` above is in, for the same
+   * reason. Null when the endpoint did not answer, answered with nothing,
+   * or answered with a window in which no coach runs; every consumer below
+   * is gated on that single value, so there is no arrangement in which the
+   * nav offers a link to a section that rendered nothing, or the markup
+   * describes departures the page does not list.
+   */
+  const availability = prepare(dates, t);
+
   /**
    * Edited: Claude - Date: 2026-08-21
    *
@@ -108,6 +139,10 @@ const Sections = ({ from, to, t }: Props): (JSX.Element | null) => {
         <Anchor href={ `#${ TRIPS }` }>{ t('routes_order.sections.trips') }</Anchor>
         <Anchor href={ `#${ FACTS }` }>{ t('routes_order.sections.facts') }</Anchor>
 
+        { availability && (
+          <Anchor href={ `#${ AVAILABILITY }` }>{ t('routes_order.sections.availability') }</Anchor>
+        ) }
+
         { schedule.length > 0 && (
           <Anchor href={ `#${ SCHEDULE }` }>{ t('routes_order.sections.schedule') }</Anchor>
         ) }
@@ -122,12 +157,34 @@ const Sections = ({ from, to, t }: Props): (JSX.Element | null) => {
            show - same facts, same numbers, same operators. */ }
       <Schema facts={ facts } questions={ questions } t={ t } />
 
+      { /* Edited: Claude - Date: 2026-09-16
+           One BusTrip per dated departure, alongside the pair-level one
+           above rather than instead of it: that one describes the journey,
+           these describe the actual coaches on actual days. Built from the
+           same prepared array the section renders. */ }
+      { availability && <AvailabilitySchema data={ availability } t={ t } /> }
+
       <Anchored>
         <Facts id={ FACTS } facts={ facts } t={ t } />
       </Anchored>
 
       { dead && onward }
 
+      { /* Edited: Claude - Date: 2026-09-16
+           ABOVE the timetable, because a reader who has a date in mind is
+           answered here and a reader who does not is answered below. The
+           timetable is the pattern - what runs, in the abstract; this is
+           the next thirty days of it, with fares and seats. Renders nothing
+           at all when the endpoint gives us nothing, which is also what
+           happens on a pair that has stopped running: the notice in the
+           facts block above has already said so, and thirty rows of "no
+           departures" underneath it would be a wall, not an answer. */ }
+      { availability && (
+        <Anchored>
+          <Availability id={ AVAILABILITY } data={ availability } t={ t } />
+        </Anchored>
+      ) }
+
       <Anchored>
         <Schedule id={ SCHEDULE } from={ facts.from } to={ facts.to } rows={ schedule } t={ t } />
       </Anchored>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/routes-order",
-  "version": "1.37.5",
+  "version": "1.37.7",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts",