@autobusal/routes-order 1.37.4 → 1.37.6

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/questions.ts

@@ -170,17 +170,40 @@ const questions = (facts: FactsData, t: TFunction<'common'>): Question[] => {
     });
   }
 
-  // Asked only where the answer is a real count. `direct` is meaningless
-  // without a total to read it against, and `departures` is that total.
+  /**
+   * DIRECT MEANS NO CHANGE OF BUS. That is the question being asked.
+   *
+   * Edited: Claude - Date: 2026-09-16
+   *
+   * This was answered out of `facts.direct` alone, which counts services
+   * with no intermediate STOPS - so it said "No. Every scheduled service
+   * calls at stops along the way" on 201 of the 202 published pairs, under
+   * a timetable showing a single coach running the whole route. Every bus
+   * in the Balkans calls somewhere, so the answer was structurally always
+   * no. A traveller reads that as "you have to change buses", and so does
+   * an assistant: ChatGPT quoted the contradiction back to us against the
+   * Thessaloniki-Tirana page.
+   *
+   * Nothing in Libraries\Routes\Search ever joins two routes into one
+   * journey, so every service that can be booked here is one bus end to
+   * end, and yes is not a generous reading - it is the fact.
+   *
+   * The stop count keeps its own word, NON-STOP, and its own sentence. It
+   * is the rarer and more valuable fact, still counted out of the total
+   * rather than claimed for the whole pair, but it no longer decides
+   * whether the pair has a direct bus at all.
+   */
   if (facts.departures > 0 && !dead) {
     all.push({
       id: 'direct',
       q: t('routes_order.schema.direct_q', cities),
-      a: facts.direct === 0
-        ? t('routes_order.schema.direct_a_none', cities)
-        : (facts.direct === facts.departures
-            ? t('routes_order.schema.direct_a_all', cities)
-            : t('routes_order.schema.direct_a', { ...cities, count: facts.direct, total: facts.departures }))
+      a: facts.direct === facts.departures
+        ? t('routes_order.schema.direct_a_nonstop_all', cities)
+        : (facts.direct > 0
+            ? t('routes_order.schema.direct_a_nonstop_some', { ...cities, count: facts.direct, total: facts.departures })
+            : (facts.departures === 1
+                ? t('routes_order.schema.direct_a_through_single', cities)
+                : t('routes_order.schema.direct_a_through', { ...cities, total: facts.departures })))
     });
   }
 
@@ -190,9 +213,17 @@ const questions = (facts: FactsData, t: TFunction<'common'>): Question[] => {
     all.push({
       id: 'overnight',
       q: t('routes_order.schema.overnight_q', cities),
+      // Edited: Claude - Date: 2026-09-16
+      // "1 of the 2 scheduled services ... travel overnight" was published
+      // on 40 pairs, in the visible FAQ and in the JSON-LD both. Its own
+      // key rather than an i18next plural, for the reason spelled out
+      // above departures_a_single: the eight Slavic locales here do not
+      // share English's one rule.
       a: facts.overnight === facts.departures
         ? t('routes_order.schema.overnight_a_all', cities)
-        : t('routes_order.schema.overnight_a', { ...cities, count: facts.overnight, total: facts.departures })
+        : (facts.overnight === 1
+            ? t('routes_order.schema.overnight_a_single', { ...cities, total: facts.departures })
+            : t('routes_order.schema.overnight_a', { ...cities, count: facts.overnight, total: facts.departures }))
     });
   }
 

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

@@ -8,9 +8,20 @@ import { formatDuration, splitPrice } from '../refine';
 import { Button, RouteFeature, Information, Rating } from '@autobusal/common';
 import { useGetSettings } from '@autobusal/providers/services';
 import { createDate, getDayParts } from '@autobusal/utilities';
-import { Container, ButtonDetails, SpecialOffer, FavoriteStop, Trip, Company, Location, Stop, Iso, Time, Price, Amount, Decimals, Currency, PriceNotice, LinkCompany, CodeCompany, Details, Detail, ButtonPolicy, TitleDetail, FeaturesItems, Leaves, Day, NextDay, Standard, Stops, StopsItems, StopRow, StopTime, StopDay, StopBorder } from './styles';
+import { Container, ButtonDetails, SpecialOffer, FavoriteStop, Trip, Company, Location, Stop, Iso, Time, Price, Amount, Decimals, Currency, PriceNotice, SeatsLeft, LinkCompany, CodeCompany, Details, Detail, ButtonPolicy, TitleDetail, FeaturesItems, Leaves, Day, NextDay, Standard, Stops, StopsItems, StopRow, StopTime, StopDay, StopBorder } from './styles';
 import { FoundData } from '@autobusal/providers/types/routes';
 
+/**
+ * At or below this many seats, the count is emphasised.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * 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.
+ */
+const LOW_SEATS = 5;
+
 // neutral placeholder so a missing/broken operator logo doesn't render the
 // browser's broken-image icon in the route results
 const LOGO_FALLBACK = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Crect width='120' height='60' rx='6' fill='%23e5e7eb'/%3E%3Cpath d='M42 22h36v14a2 2 0 0 1-2 2h-2a3 3 0 0 1-6 0H52a3 3 0 0 1-6 0h-2a2 2 0 0 1-2-2z' fill='%239ca3af'/%3E%3C/svg%3E";
@@ -78,6 +89,28 @@ const Route = ({ data, type, date, passengers, t, onSave, children }: Props): JS
     ? `${ import.meta.env.VITE_API_OBT }/api/external/go/${ data.external.offer_id }`
     : undefined;
 
+  /**
+   * Seats still on sale on this coach.
+   *
+   * Edited: Claude - Date: 2026-09-16
+   *
+   * 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 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.seats_left === 'number' && data.seats_left > 0
+    ? data.seats_left
+    : null;
+
   // Edited: Ferjolt Ozuni - Date: 2026-08-03
   // Only today's results carry this - obtapi sends null on every other date,
   // so there is no "in 26 days" badge to suppress here.
@@ -296,6 +329,19 @@ const Route = ({ data, type, date, passengers, t, onSave, children }: Props): JS
             { details ? <HiChevronUp /> : <HiChevronDown /> }
             { t('routes_order.step2.route.details') }
           </ButtonDetails>
+
+          { /* Claude - 2026-09-16 (Ferjolt: "show somewhere on each search
+               result the number of available/bookable seats per route").
+
+               Last in source, and ordered by class rather than by position -
+               see Price in ./styles. It sits inside the fare cell because
+               how many are left is a fact about this fare on this coach, and
+               it is read at the same moment as the price. */ }
+          { seats !== null && (
+            <SeatsLeft className="seats-left" $low={ seats <= LOW_SEATS }>
+              { t('routes_order.step2.route.seats_left', { count: seats }) }
+            </SeatsLeft>
+          ) }
         </Price>
       </Trip>
 

package/Found/Route/styles.ts

@@ -510,6 +510,17 @@ export const Price = styled.div`
     flex: 0 0 auto;
   }
 
+  /*
+   * Claude - 2026-09-16: last line of the fare cell on a phone, on a row of
+   * its own under the note and the toggle. By class for the same reason as
+   * the two above - a dynamic-price drop renders an extra child and shifts
+   * every nth-child index in this block by one.
+   */
+  & > .seats-left {
+    order: 5;
+    flex: 1 1 100%;
+  }
+
   @media (min-width: 768px) {
     flex: 0 0 165px;
     flex-direction: column;
@@ -530,7 +541,8 @@ export const Price = styled.div`
      * just now inside the price cell rather than under the whole card.
      */
     & > .price-notice,
-    & > .details-toggle {
+    & > .details-toggle,
+    & > .seats-left {
       order: initial;
       flex-basis: auto;
     }
@@ -970,3 +982,33 @@ export const Day = styled.span`
   white-space: nowrap;
   color: ${ props => props.theme.primary.normal };
 `;
+
+/**
+ * How many seats are still on sale, under the fare.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * Ferjolt asked for the seat count on every result. obtapi has always sent
+ * it (trip.available_seats) and nothing on the card ever showed it, so the
+ * only way to find out how full a coach was, was to try to book it.
+ *
+ * The string is "Seats left: 49", a label and a number, rather than
+ * "49 seats left" - this codebase carries no i18next plural rules, and a
+ * counted noun that has to agree in fifteen languages is how "1 stops"
+ * happened in the timetable. A colon sidesteps the agreement entirely and
+ * translates cleanly into all of them.
+ *
+ * Low stock is emphasised rather than coloured red on its own: it is a real
+ * fact about the bus, not a countdown we invented to hurry anyone.
+ */
+export const SeatsLeft = styled.span<{ $low: boolean }>`
+  font-size: ${ props => props.theme.size.xxs };
+  line-height: 1.25;
+  text-align: left;
+  font-weight: ${ props => (props.$low ? 700 : 400) };
+  color: ${ props => (props.$low ? props.theme.font.error : props.theme.font.faded) };
+
+  @media (min-width: 768px) {
+    text-align: center;
+  }
+`;