@autobusal/routes-order 1.37.4 → 1.37.6

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,109 @@
+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 Schema = ({ data, t }: Props): (JSX.Element | null) => {
+  const stop = (name: string) => ({ '@type': 'BusStop', name });
+
+  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 } } />;
+};
+
+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)
+  })
+);