@autobusal/routes-order 1.9.0 → 1.9.1

package/Sections/Schema.tsx

@@ -0,0 +1,186 @@
+import { TFunction } from 'i18next';
+import { JsonLd } from '@autobusal/common';
+import { FactsData } from '../Facts/types';
+import { Question } from '../Facts/questions';
+import { stopped } from '../Facts/service';
+
+interface Props {
+  facts: FactsData
+  // Edited: Claude - Date: 2026-08-20
+  // Built by Facts/questions and handed in, because the FAQ section a few
+  // hundred pixels down the page renders this same array. Google requires
+  // the answer in the markup to be the answer on the page, and the only way
+  // to guarantee that in fifteen languages is for there to be one string,
+  // not two that match.
+  questions: Question[]
+  t: TFunction<'common'>
+}
+
+/**
+ * Structured data for a route-pair page.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Roadmap Tier 3.5, and the cheapest item in the tier because the page
+ * already computes everything it needs.
+ *
+ * ONE RULE GOVERNS ALL OF IT: never state something here that the page does
+ * not show. A rich result built on a claim a visitor cannot find is the
+ * mismatch that gets a site's snippets pulled, and it is also just a lie
+ * told to a machine. Every value below is the same value rendered in the
+ * facts block or the timetable a few hundred pixels down - the duration
+ * range, the fares-from, the departure count, the operators.
+ *
+ * The rating hangs off the PROVIDER, not the trip. An operator's rating is
+ * earned across everything they run; attaching it to one city pair would be
+ * claiming travellers rated this journey when they rated the company. When
+ * an operator has no published rating - below the display threshold - it is
+ * simply absent, exactly as it is on the page.
+ *
+ * Edited: Claude - Date: 2026-08-20
+ *
+ * The trip now ALSO carries its own AggregateRating - and that is not the
+ * claim the paragraph above forbids, because `facts.rating` is a different
+ * number: obtapi aggregates the published reviews of exactly the routes in
+ * this timetable (Facts::rating, the same set Reviews\BrowseController's
+ * `pair` mode reads), not a company-wide score stretched over one leg.
+ * Travellers who booked these very coaches wrote those reviews, and every
+ * card on the page links to the operator profile where they are read in
+ * full. Below the display threshold obtapi sends null and nothing is
+ * emitted here - an AggregateRating of nothing is a guideline violation,
+ * worse than none.
+ */
+const Schema = ({ facts, questions, t }: Props): (JSX.Element | null) => {
+  const schedule = facts.schedule ?? [];
+
+  // Deduplicated operators, each keeping whatever rating it actually has.
+  const providers = schedule.reduce<{ name: string, rating: { average: number, count: number } | null }[]>((all, row) => {
+    if (!row.operator || all.some(item => item.name === row.operator)) {
+      return all;
+    }
+
+    return [ ...all, { name: row.operator, rating: row.rating } ];
+  }, []);
+
+  const organisation = (name: string, rating: { average: number, count: number } | null) => ({
+    '@type': 'Organization',
+    name,
+    ...(rating ? {
+      aggregateRating: {
+        '@type': 'AggregateRating',
+        ratingValue: rating.average,
+        reviewCount: rating.count,
+        bestRating: 5,
+        worstRating: 1
+      }
+    } : {})
+  });
+
+  /**
+   * Edited: Claude - Date: 2026-08-20
+   *
+   * A BusStop with its town and country on it, where obtapi knows the
+   * country. Two cities called Veria in two countries are one string to a
+   * machine and two different places to a traveller, and the pair page now
+   * says which country each end is in - so the markup can too without
+   * claiming anything the page does not.
+   */
+  const stop = (name: string, country: string | null) => ({
+    '@type': 'BusStop',
+    name,
+    ...(country ? {
+      address: {
+        '@type': 'PostalAddress',
+        addressLocality: name,
+        addressCountry: country
+      }
+    } : {})
+  });
+
+  const trip = {
+    '@context': 'https://schema.org',
+    '@type': 'BusTrip',
+    name: t('routes_order.facts.title', { from: facts.from, to: facts.to }),
+
+    departureBusStop: stop(facts.from, facts.from_country),
+    arrivalBusStop: stop(facts.to, facts.to_country),
+
+    // Edited: Claude - Date: 2026-08-20
+    // The stops in between - but ONLY when every service on the pair calls
+    // at all of them. An itinerary is a statement about THE trip, and on a
+    // pair where six of ten coaches run non-stop there is no single
+    // itinerary to state; the page says "some buses also call at" there,
+    // and there is no way to say "some" in this property. Absent rather
+    // than approximated.
+    ...(facts.via?.every ? {
+      itinerary: [
+        stop(facts.from, facts.from_country),
+        ...facts.via.cities.map(city => ({ '@type': 'BusStop', name: city })),
+        stop(facts.to, facts.to_country)
+      ]
+    } : {}),
+
+    // Edited: Claude - Date: 2026-08-20
+    // The pair's own score - see the header comment. Null below the
+    // display threshold, and then the property simply does not exist.
+    ...(facts.rating ? {
+      aggregateRating: {
+        '@type': 'AggregateRating',
+        ratingValue: facts.rating.average,
+        reviewCount: facts.rating.count,
+        bestRating: 5,
+        worstRating: 1
+      }
+    } : {}),
+
+    ...(providers.length > 0 ? {
+      provider: providers.map(item => organisation(item.name, item.rating))
+    } : {}),
+
+    // Only with a real ISO 4217 code. `price_from_display` is a formatted
+    // string with the symbol baked in, and guessing a code from it would
+    // produce structured data that is confidently wrong.
+    ...(facts.price_from !== null && facts.currency ? {
+      offers: {
+        '@type': 'Offer',
+        price: facts.price_from,
+        priceCurrency: facts.currency,
+
+        // Edited: Claude - Date: 2026-08-21
+        // The availability is now READ rather than asserted. This said
+        // InStock on every pair it was ever emitted for, including the
+        // ones whose every timetable window had closed - a machine-readable
+        // claim that a ticket could be bought, published about journeys
+        // that sell on no date a visitor can pick. OutOfStock is the same
+        // thing the page itself now says above the fare, which is the
+        // whole rule this file opens with: never state here what the page
+        // does not show.
+        availability: stopped(facts)
+          ? 'https://schema.org/OutOfStock'
+          : 'https://schema.org/InStock'
+      }
+    } : {})
+  };
+
+  // Google requires a FAQPage to carry at least one question, and a page
+  // claiming to be an FAQ with nothing on it is worse than not claiming it.
+  const faq = questions.length > 0 ? {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: questions.map(item => ({
+      '@type': 'Question',
+      name: item.q,
+      acceptedAnswer: { '@type': 'Answer', text: item.a }
+    }))
+  } : null;
+
+  return (
+    <>
+      <JsonLd data={ trip } />
+
+      { faq && <JsonLd data={ faq } /> }
+    </>
+  );
+};
+
+export default Schema;

package/Sections/Sections.tsx

@@ -0,0 +1,160 @@
+import { TFunction } from 'i18next';
+import Facts from '../Facts/Facts';
+import Faq from '../Faq/Faq';
+import Schedule from '../Schedule/Schedule';
+import Links from '../Links/Links';
+import Schema from './Schema';
+import { useGetFacts } from '../Facts/services';
+import buildQuestions from '../Facts/questions';
+import { stopped } from '../Facts/service';
+import { Nav, Anchor, Anchored } from './styles';
+
+interface Props {
+  from?: string
+  to?: string
+  t: TFunction<'common'>
+}
+
+const TRIPS = 'trips';
+const FACTS = 'facts';
+const SCHEDULE = 'schedule';
+const FAQ = 'faq';
+const LINKS = 'links';
+
+/**
+ * Everything on a route-pair page that is not the booking wizard.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Roadmap Tier 3.1. The wizard stays exactly where it is and keeps working
+ * exactly as it did - this is a layout around it, not a rewrite of the
+ * funnel. Somebody who arrived ready to book still books; somebody who
+ * arrived from a search engine asking "how long does that take" now has an
+ * answer without scrolling through a form first.
+ *
+ * ONE fetch for both sections. Facts and Schedule are built from the same
+ * response, and letting each fetch its own would have doubled what the
+ * prerender crawl costs on every pair in the sitemap.
+ *
+ * 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 facts = data?.facts;
+
+  const links = data?.links ?? { from: [], to: [], reverse: null };
+
+  // Edited: Ferjolt Ozuni - Date: 2026-08-03
+  // The linking block survives a pair with no facts. A pair that cannot be
+  // sold is precisely where somebody most needs a way onward - dropping the
+  // links there would leave them on a dead end.
+  if (!facts) {
+    return links.from.length > 0 || links.to.length > 0 || links.reverse
+      ? <Links id={ LINKS } from={ links.from } to={ links.to } reverse={ links.reverse } t={ t } />
+      : null;
+  }
+
+  const schedule = facts.schedule ?? [];
+
+  // Edited: Claude - Date: 2026-08-20
+  // Built ONCE, here, and handed to both consumers. The FAQ section renders
+  // these strings and the FAQPage structured data quotes them; Google
+  // requires the two to be the same text and the only way to guarantee that
+  // across fifteen languages is for there to be one array, not two lists
+  // that happen to agree today.
+  const questions = buildQuestions(facts, t);
+
+  /**
+   * Edited: Claude - Date: 2026-08-21
+   *
+   * ON A PAIR THAT HAS STOPPED RUNNING, THE WAY OUT COMES FIRST. The facts
+   * block now says plainly that the route is not currently scheduled - and
+   * the moment it does, the most useful thing on the page is the list of
+   * nearby pairs that ARE running, not four hundred pixels of timetable
+   * the reader has just been told they cannot travel on.
+   *
+   * Hoisted rather than duplicated: it is the same <Links> element, moved,
+   * so a crawler still finds exactly one copy of each internal link. That
+   * is the whole reason this page keeps its ranking instead of being
+   * de-listed - an honest seasonal page that converts to a live journey is
+   * worth more than a 404, and it only converts if the link is where the
+   * reader is looking.
+   *
+   * Everything below stays exactly where it was. The timetable is still
+   * what the operator published and the FAQ still answers the questions
+   * this journey raises; neither is hidden, because a page that hides its
+   * content to admit a problem is thin content, which is what noindex is
+   * for and what this deliberately is not.
+   */
+  const onward = (
+    <Links
+      id={ LINKS }
+      from={ links.from }
+      to={ links.to }
+      reverse={ links.reverse }
+      fromName={ facts.from }
+      toName={ facts.to }
+      t={ t }
+    />
+  );
+
+  const dead = Boolean(stopped(facts));
+
+  return (
+    <>
+      <Nav aria-label={ t('routes_order.sections.label') }>
+        <Anchor href={ `#${ TRIPS }` }>{ t('routes_order.sections.trips') }</Anchor>
+        <Anchor href={ `#${ FACTS }` }>{ t('routes_order.sections.facts') }</Anchor>
+
+        { schedule.length > 0 && (
+          <Anchor href={ `#${ SCHEDULE }` }>{ t('routes_order.sections.schedule') }</Anchor>
+        ) }
+
+        { questions.length > 0 && (
+          <Anchor href={ `#${ FAQ }` }>{ t('routes_order.sections.faq') }</Anchor>
+        ) }
+      </Nav>
+
+      { /* Edited: Ferjolt Ozuni - Date: 2026-08-03
+           Roadmap Tier 3.5. Emits nothing the sections below do not also
+           show - same facts, same numbers, same operators. */ }
+      <Schema facts={ facts } questions={ questions } t={ t } />
+
+      <Anchored>
+        <Facts id={ FACTS } facts={ facts } t={ t } />
+      </Anchored>
+
+      { dead && onward }
+
+      <Anchored>
+        <Schedule id={ SCHEDULE } from={ facts.from } to={ facts.to } rows={ schedule } t={ t } />
+      </Anchored>
+
+      { /* Edited: Claude - Date: 2026-08-20
+           Below the timetable, because it is where somebody who has already
+           looked at the departures goes for the rest - and because the
+           answers reference the timetable rather than replace it. Renders
+           nothing when the pair's data supports no questions. */ }
+      <Anchored>
+        <Faq id={ FAQ } from={ facts.from } to={ facts.to } questions={ questions } t={ t } />
+      </Anchored>
+
+      { /* Edited: Ferjolt Ozuni - Date: 2026-08-05
+           NO reviews block here any more. A pair-level review wall sat in
+           the middle of a page whose job is to compare departures, where
+           what a reader needs about reputation is one number per operator -
+           and the result cards already carry exactly that.
+
+           The reviews themselves live on the operator's own page, which is
+           where somebody who wants to read them has gone looking for them.
+           The `pair` mode of Reviews\BrowseController is untouched and
+           still works; nothing calls it from here. */ }
+
+      { !dead && onward }
+    </>
+  );
+};
+
+export default Sections;

package/Sections/styles.ts

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+
+/**
+ * The in-page nav.
+ *
+ * Sticky, because the sections below it are long and the whole point is to
+ * let somebody who landed from a search engine jump to the part they came
+ * for - a timetable, usually - without scrolling past a booking wizard they
+ * have not decided to use yet.
+ */
+export const Nav = styled.nav`
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: flex;
+  gap: 6px;
+  overflow-x: auto;
+  margin-top: 25px;
+  padding: 8px 10px;
+  border-radius: ${ props => props.theme.borderRadius };
+  background: ${ props => props.theme.background.normal };
+  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
+`;
+
+export const Anchor = styled.a`
+  padding: 6px 14px;
+  border-radius: ${ props => props.theme.borderRadius };
+  font-size: ${ props => props.theme.size.s };
+  color: ${ props => props.theme.font.normal };
+  white-space: nowrap;
+
+  &:hover {
+    text-decoration: none;
+    background: ${ props => props.theme.background.neutral };
+  }
+`;
+
+/**
+ * Anchored sections need somewhere to land that is not under the sticky bar
+ * above them.
+ */
+export const Anchored = styled.div`
+  scroll-margin-top: 60px;
+`;

package/Step1/prepare.ts

@@ -1,5 +1,5 @@
 import { Params } from 'react-router-dom';
-import { futureDate } from '@autobusal/utilities';
+import { futureDate, isPreparedDate } from '@autobusal/utilities';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 
 const prepare = (
@@ -18,7 +18,26 @@ const prepare = (
   const to = params.to ?? defaultLocations.to;
 
   const departure = params.departure?.replace(/-/g, '/') ?? futureDate(1);
-  const _return = params._return?.replace(/-/g, '/') ?? futureDate(2);
+
+  /*
+   * Edited: Claude - Date: 2026-08-29
+   *
+   * THE RETURN DATE IS TIED TO THE OUTBOUND. A one-way URL carries the
+   * literal "none" in the return slot, and `??` only catches null - so
+   * "none" travelled all the way into the picker, whose grid is built by
+   * splitting on "/" and feeding Date.UTC: an Invalid Date, rendered as
+   * January. Switching a collapsed search from One Way to Round Trip
+   * showed exactly that.
+   *
+   * Anything that is not a real date falls back to the departure, which is
+   * also the picker's floor - so the return calendar opens on the month
+   * being travelled and cannot offer a day before the outbound.
+   */
+  const requested = params._return?.replace(/-/g, '/');
+
+  const _return = isPreparedDate(requested)
+    ? String(requested)
+    : (isPreparedDate(departure) ? departure : futureDate(2));
 
   const adults = params.adults ?? 1;
   const children = params.children ?? 0;

package/Step2.tsx

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