@autobusal/routes-order 1.26.0 → 1.29.0

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # Changelog
 
+## 1.29.0
+
+### Removed
+
+- **The reviews block on the route-pair page.** A review wall sat in the
+  middle of a page whose job is to compare departures. What a reader needs
+  there about reputation is one number per operator, which the result cards
+  already carry; the reviews themselves belong on the operator's own page,
+  where somebody who wants to read them has gone looking for them. The `pair`
+  mode of the reviews API is untouched — nothing calls it from here now.
+- The "Reviews" entry in the in-page nav, with it.
+
+## 1.28.0
+
+### Added
+
+- **Overnight trips now say so.** A result card that arrives on a later day
+  prints the calendar day under BOTH ends and a `+1` against the arrival
+  time; the pair-page timetable carries the same marker. "22:30 → 06:00" is
+  the one thing on a result card that can be read as the exact opposite of
+  what it means, and the duration beside it does not fix that because nobody
+  reads a duration to work out a date.
+- Nothing is added to a same-day card. A date under every arrival would make
+  the overnight ones stop standing out, which is the only reason this exists.
+
+### Changed
+
+- The day comes from the timetable's own midnight markers, computed
+  server-side, never from "the arrival looks earlier than the departure" —
+  which is wrong for exactly the cross-border journeys whose two ends keep
+  different clocks.
+
+## 1.27.0
+
+**`reloadDocument` is gone — the results follow the URL.**
+
+The search lives on `Step1`, which is **not mounted** once results are on screen. So a link that changed the address bar was read by nobody: the URL said one journey and the results underneath still showed another. That is why the empty-search suggestions threw away the whole application on every click.
+
+`RoutesOrder` now watches the search spec the URL describes and re-runs when it changes. Keyed on **the spec**, not on a "have we searched yet" flag — a flag can only answer once, a key re-answers whenever the question changes and stays quiet while it does not. It cannot loop either: writing state does not alter the URL the key derives from. The first search is still Step1's, so it does not run twice.
+
+Choosing a different search also clears the previously chosen coach. Leaving it set would let the step guards resolve to a checkout for a route the buyer never picked.
+
+Verified client-side: navigating from Tirana → Thessaloniki (10 trips) to Durres → Tirana updated the header and the results with the page never reloading.
+
 ## 1.26.0
 
 **Funnel events on every step**: the result list, the coach chosen, checkout reached, the Flexible Ticket ticked or unticked, and the value stashed for the purchase event.

package/Facts/types.ts

@@ -37,6 +37,13 @@ export interface ScheduleRow {
   rating: { average: number, count: number } | null
   departure: string | null
   arrival: string | null
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-05
+   * Days between boarding and arriving - 0 same day, 1 the next morning.
+   * A timetable of two clock times per row cannot show an overnight service
+   * without it.
+   */
+  offset?: number
   minutes: number | null
   // 0 is a direct service
   stops: number

package/Found/Empty/Empty.tsx

@@ -44,7 +44,6 @@ const Empty = ({ step1, data, loading, t }: Props): JSX.Element => {
   const city = (item: NearbyCity, side: 'from' | 'to'): JSX.Element => (
     <Option
       key={ item.city.id }
-      reloadDocument
       to={ side === 'from'
         ? link(item.city.slug, step1.to, step1.departure)
         : link(step1.from, item.city.slug, step1.departure) }
@@ -56,7 +55,7 @@ const Empty = ({ step1, data, loading, t }: Props): JSX.Element => {
   );
 
   const day = (item: FoundDay): JSX.Element => (
-    <Option key={ item.id } reloadDocument to={ link(step1.from, step1.to, item.day) }>
+    <Option key={ item.id } to={ link(step1.from, step1.to, item.day) }>
       <OptionName>{ item.day }</OptionName>
       <OptionMeta>{ t('routes_order.step2.empty.available') }</OptionMeta>
       { item.from_price_display && <OptionPrice>{ item.from_price_display }</OptionPrice> }

package/Found/Empty/styles.ts

@@ -44,17 +44,16 @@ export const Options = styled.div`
 `;
 
 /**
- * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ * Edited: Ferjolt Ozuni - Date: 2026-08-05
  *
- * These links carry `reloadDocument` at the call site. RoutesOrder holds
- * the search in component state and Step1 only kicks off a search when it
- * has not already redirected, so a client-side navigation changes the URL
- * and nothing else - the old, empty result set just stays on screen.
+ * Plain client-side links now. They used to force a full document reload,
+ * because the search lived on a Step1 that is not mounted once results are
+ * on screen - so a navigation changed the address bar and nothing else, and
+ * the old empty result set simply stayed there.
  *
- * A full load re-enters the flow from the URL exactly as arriving from a
- * search engine does. Teaching RoutesOrder to resync its state from
- * changing params would be the tidier fix, but that is the main booking
- * flow and this is a dead-end page: not worth the risk for the gain.
+ * RoutesOrder now follows the URL's search spec, which is the tidier fix
+ * the note here previously judged not worth the risk. It became worth it
+ * when the same root cause turned up a third time.
  */
 export const Option = styled(Link)`
   display: flex;

package/Found/Group/Group.tsx

@@ -8,6 +8,7 @@ import { FoundData } from '@autobusal/providers/types/routes';
 interface Props {
   items: FoundData[]
   type: 'favorite' | 'normal'
+  date?: string
   passengers: number
   t: TFunction<'common'>
   onSave: (data: FoundData) => void
@@ -23,7 +24,7 @@ interface Props {
  * booked, so there is no separate "now choose a time" step to forget: the
  * card always represents a bookable trip, starting with the earliest.
  */
-const Group = ({ items, type, passengers, t, onSave }: Props): JSX.Element => {
+const Group = ({ items, type, date, passengers, t, onSave }: Props): JSX.Element => {
   // chronological for the picker, regardless of how the list itself is
   // sorted - a row of times out of time order is just confusing
   const departures = useMemo(() => (
@@ -38,6 +39,7 @@ const Group = ({ items, type, passengers, t, onSave }: Props): JSX.Element => {
     <Route
       type={ type }
       data={ current }
+      date={ date }
       passengers={ passengers }
       t={ t }
       onSave={ onSave }

package/Found/Orders/Orders.tsx

@@ -71,6 +71,16 @@ const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferr
    * Grouping runs AFTER sorting: groupItems keeps input order, so a
    * collapsed set of shuttles lands wherever its best member sorted to.
    */
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-05
+   *
+   * The day these results board on, for the cards that arrive on a later
+   * one. It is the date that was SEARCHED - the same value the strip above
+   * highlights - rather than anything the server sends back, so the two can
+   * never disagree about which day a card is for.
+   */
+  const date = step1[type];
+
   const render = (list: FoundData[], kind: 'favorite' | 'normal'): JSX.Element[] => (
     groupItems(sortItems(list, sort)).map(group => (
       group.length > 1
@@ -79,6 +89,7 @@ const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferr
             key={ group[0].id }
             items={ group }
             type={ kind }
+            date={ date }
             passengers={ passengers }
             t={ t }
             onSave={ onSave }
@@ -89,6 +100,7 @@ const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferr
             key={ group[0].id }
             type={ kind }
             data={ group[0] }
+            date={ date }
             passengers={ passengers }
             t={ t }
             onSave={ onSave }

package/Found/Route/Route.tsx

@@ -6,7 +6,8 @@ import { RiBus2Line } from 'react-icons/ri';
 import { MdOutlineAltRoute } from 'react-icons/md';
 import { formatDuration, splitPrice } from '../refine';
 import { Button, RouteFeature, Information, Rating } from '@autobusal/common';
-import { Container, ButtonDetails, SpecialOffer, FavoriteStop, Trip, Company, Location, Stop, Iso, Time, Price, Amount, Decimals, Currency, PriceNotice, LinkCompany, CodeCompany, Details, Detail, ButtonPolicy, TitleDetail, FeaturesItems, Leaves } from './styles';
+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 } from './styles';
 import { FoundData } from '@autobusal/providers/types/routes';
 
 // neutral placeholder so a missing/broken operator logo doesn't render the
@@ -16,6 +17,11 @@ const LOGO_FALLBACK = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s
 interface Props {
   data: FoundData
   type: 'favorite' | 'normal'
+  // Edited: Ferjolt Ozuni - Date: 2026-08-05
+  // The searched boarding day, dd/mm/yyyy. Only used to print the two dates
+  // on an overnight trip - a card that arrives the same day says nothing
+  // about days at all, which is why this can be absent.
+  date?: string
   passengers: number
   t: TFunction<'common'>
   onSave: (data: FoundData) => void
@@ -25,7 +31,7 @@ interface Props {
   children?: React.ReactNode
 }
 
-const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Element => {
+const Route = ({ data, type, date, passengers, t, onSave, children }: Props): JSX.Element => {
   const [ information, setInformation ] = useState<boolean>(false);
 
   // Edited: Ferjolt Ozuni - Date: 2026-08-03
@@ -63,6 +69,53 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
 
   const soon = leaves !== null && leaves < 60;
 
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-05
+   *
+   * Overnight trips. "22:30 -> 06:00" is the one thing on this card that
+   * can be read as the exact opposite of what it means - a seven-and-a-half
+   * hour journey looks like a sixteen-hour one run backwards - and the
+   * duration beside it does not fix that, because nobody reads a duration
+   * to work out a date. So when the coach arrives on a later day, BOTH ends
+   * print their day and the arrival carries a +1.
+   *
+   * Nothing is added to a same-day card: a date under every arrival on a
+   * page of same-day results is noise that makes the overnight ones stop
+   * standing out, which is the only reason any of this is here.
+   *
+   * The offset comes from the timetable's own midnight markers, computed
+   * server-side (Libraries\Routes\Search\Locations::offset) - it is not
+   * inferred from "arrival looks earlier than departure", which is wrong
+   * for exactly the cross-border journeys where the two ends keep
+   * different clocks.
+   */
+  const offset = data.arrival_offset ?? 0;
+
+  const days = ((): { departure: string, arrival: string } | null => {
+    if (offset <= 0 || !date) {
+      return null;
+    }
+
+    const departs = createDate(date);
+
+    // an invalid or unexpected date string must not print "NaN Invalid" on
+    // a result card - showing no day is better than showing a wrong one
+    if (Number.isNaN(departs.getTime())) {
+      return null;
+    }
+
+    const arrives = new Date(departs);
+    arrives.setUTCDate(arrives.getUTCDate() + offset);
+
+    const format = (value: Date): string => {
+      const parts = getDayParts(value, t as any);
+
+      return `${ parts.day } ${ parts.month }`;
+    };
+
+    return { departure: format(departs), arrival: format(arrives) };
+  })();
+
   return (
     <Container className="box" $type={ type }>
       { data.price.offer === true && <SpecialOffer>{ t('routes_order.step2.route.offer') }</SpecialOffer> }
@@ -116,6 +169,8 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
             { data.locations.from.departure }
           </h2>
 
+          { days && <Day>{ days.departure }</Day> }
+
           <Stop>{ data.locations.from.stop?.name }</Stop>
         </Location>
 
@@ -144,8 +199,15 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
             <Iso>({ data.locations.to.city.country?.iso_code })</Iso>
             { ' ' }
             { data.locations.to.arrival }
+            { offset > 0 && (
+              <NextDay title={ t('routes_order.step2.route.next_day', { count: offset }) }>
+                +{ offset }
+              </NextDay>
+            ) }
           </h2>
 
+          { days && <Day>{ days.arrival }</Day> }
+
           <Stop>{ data.locations.to.stop?.name }</Stop>
         </Location>
 

package/Found/Route/styles.ts

@@ -609,3 +609,44 @@ export const Leaves = styled.div<{ $soon: boolean }>`
   background: ${ props => (props.$soon ? props.theme.font.error : props.theme.primary.neutral) };
 `;
 
+/**
+ * The +1 on an overnight arrival.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-05
+ *
+ * Sits INSIDE the h2, right against the clock time it qualifies, because
+ * that is the number it changes the meaning of. Raised and shrunk rather
+ * than boxed: it reads as an annotation on the time, the way a footnote
+ * marker does, and a second pill on a card that already carries an offer
+ * badge and a countdown would compete with both.
+ *
+ * The title attribute carries the sentence - "arrives the next day" - so
+ * the meaning is available to anyone for whom "+1" is not self-evident,
+ * which on a first visit is most people.
+ */
+export const NextDay = styled.sup`
+  margin-left: 4px;
+  padding: 1px 4px;
+  border-radius: 4px;
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: 700;
+  white-space: nowrap;
+  vertical-align: super;
+  cursor: help;
+  color: ${ props => props.theme.font.normal };
+  background: ${ props => props.theme.primary.neutral };
+`;
+
+/**
+ * The calendar day under one end of an overnight trip.
+ *
+ * Rendered on BOTH ends or neither: a date shown only over the arrival
+ * leaves the reader working out what day the departure was, which is the
+ * question the whole thing exists to answer.
+ */
+export const Day = styled.span`
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: 700;
+  white-space: nowrap;
+  color: ${ props => props.theme.primary.normal };
+`;

package/RoutesOrder.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { TFunction } from 'i18next';
 import { AiOutlineSearch, AiOutlineCaretDown, AiOutlineCaretUp } from 'react-icons/ai';
@@ -13,6 +13,7 @@ import { useGetSuggestions } from '@autobusal/routes-search/services';
 import { SearchAgain, SearchInner, SearchToggle, SearchSummary, SearchPanel } from './styles';
 import Sections from './Sections/Sections';
 import Step1 from './Step1/Step1';
+import prepare from './Step1/prepare';
 import Step2 from './Step2';
 import Step3 from './Step3';
 import Checkout from './Checkout/Checkout';
@@ -125,6 +126,53 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
     }, { replace });
   };
 
+  /**
+   * Follow the URL when it describes a different search.
+   *
+   * Edited: Ferjolt Ozuni - Date: 2026-08-05
+   *
+   * THE SEARCH LIVES ON STEP 1, WHICH IS NOT MOUNTED once results are on
+   * screen - `showStep1` is false from step 2 onwards. So a link that
+   * changed the address bar was read by nobody: the URL said one journey
+   * and the results underneath still showed another. That is why the
+   * empty-search suggestions carried `reloadDocument`, throwing away the
+   * whole application to do what a route change should have done by itself.
+   *
+   * Keyed on the SPEC the URL describes rather than on a "have we searched
+   * yet" flag. A flag can only ever answer once; a key re-answers whenever
+   * the question changes and stays quiet while it does not, which is the
+   * behaviour that was actually wanted. It also cannot loop: writing state
+   * does not alter the URL the key is derived from.
+   *
+   * The FIRST search is still Step1's - it owns the empty state a visitor
+   * arrives at, and duplicating that here would run it twice.
+   */
+  const urlSpec = useMemo(
+    () => prepare(undefined, params, searchParams, settings.preferences.defaultLocations),
+    [params, searchParams, settings.preferences.defaultLocations]
+  );
+
+  // Only a URL that actually carries a complete search - the bare
+  // /bus-lines form describes nothing to follow.
+  const urlKey = params.departure !== undefined ? JSON.stringify(urlSpec) : null;
+
+  useEffect(() => {
+    if (urlKey === null || step1 === undefined || urlKey === JSON.stringify(step1)) {
+      return;
+    }
+
+    setStep1(urlSpec);
+
+    // the previous journey's chosen coach is not on offer for a different
+    // search, and leaving it set would let the guards resolve to a checkout
+    // for a route the buyer never picked
+    setStep2(undefined);
+    setStep3(undefined);
+
+    goto(null, true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [urlKey]);
+
   const onSearchDate = (type: ('departure' | '_return'), day: string): void => {
     if (step1 !== undefined) {
       setStep1({

package/Schedule/Schedule.tsx

@@ -1,6 +1,6 @@
 import { TFunction } from 'i18next';
 import { Rating } from '@autobusal/common';
-import { Container, Table, Time, Faded, Price, Operator } from './styles';
+import { Container, Table, Time, Faded, Price, Operator, NextDay } from './styles';
 import { ScheduleRow } from '../Facts/types';
 
 interface Props {
@@ -69,7 +69,20 @@ const Schedule = ({ id, from, to, rows, t }: Props): (JSX.Element | null) => {
           { rows.map((row, index) => (
             <tr key={ index }>
               <td><Time>{ row.departure ?? '-' }</Time></td>
-              <td><Time>{ row.arrival ?? '-' }</Time></td>
+              { /* Edited: Ferjolt Ozuni - Date: 2026-08-05
+                   The same +1 the result cards carry. A timetable is read
+                   precisely to plan around a time, so a row whose arrival
+                   is the following morning and does not say so is the one
+                   row on the page somebody will actually act on wrongly. */ }
+              <td>
+                <Time>{ row.arrival ?? '-' }</Time>
+
+                { (row.offset ?? 0) > 0 && (
+                  <NextDay title={ t('routes_order.step2.route.next_day', { count: row.offset }) }>
+                    +{ row.offset }
+                  </NextDay>
+                ) }
+              </td>
               <td><Faded>{ duration(row.minutes) }</Faded></td>
 
               <td>

package/Schedule/styles.ts

@@ -51,3 +51,21 @@ export const Operator = styled.div`
   flex-direction: column;
   gap: 2px;
 `;
+
+/**
+ * The +1 on an overnight arrival, matching the result cards.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-05
+ */
+export const NextDay = styled.sup`
+  margin-left: 4px;
+  padding: 1px 4px;
+  border-radius: 4px;
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: 700;
+  white-space: nowrap;
+  vertical-align: super;
+  cursor: help;
+  color: ${ props => props.theme.font.normal };
+  background: ${ props => props.theme.primary.neutral };
+`;

package/Sections/Sections.tsx

@@ -2,7 +2,6 @@ import { TFunction } from 'i18next';
 import Facts from '../Facts/Facts';
 import Schedule from '../Schedule/Schedule';
 import Links from '../Links/Links';
-import { Reviews } from '@autobusal/reviews';
 import Schema from './Schema';
 import { useGetFacts } from '../Facts/services';
 import { Nav, Anchor, Anchored } from './styles';
@@ -17,7 +16,6 @@ const TRIPS = 'trips';
 const FACTS = 'facts';
 const SCHEDULE = 'schedule';
 const LINKS = 'links';
-const REVIEWS = 'reviews';
 
 /**
  * Everything on a route-pair page that is not the booking wizard.
@@ -65,8 +63,6 @@ const Sections = ({ from, to, t }: Props): (JSX.Element | null) => {
         { schedule.length > 0 && (
           <Anchor href={ `#${ SCHEDULE }` }>{ t('routes_order.sections.schedule') }</Anchor>
         ) }
-
-        <Anchor href={ `#${ REVIEWS }` }>{ t('routes_order.sections.reviews') }</Anchor>
       </Nav>
 
       { /* Edited: Ferjolt Ozuni - Date: 2026-08-03
@@ -82,22 +78,16 @@ const Sections = ({ from, to, t }: Props): (JSX.Element | null) => {
         <Schedule id={ SCHEDULE } from={ facts.from } to={ facts.to } rows={ schedule } t={ t } />
       </Anchored>
 
-      { /* Edited: Ferjolt Ozuni - Date: 2026-08-03
-           Reviews for the PAIR, not for one coach on it. A review belongs to
-           a route, but a single route rarely has enough published reviews to
-           clear the display threshold - the pair it runs on often does, so
-           aggregating across the routes that sell this leg is what makes the
-           block appear at all rather than a nicety.
-
-           Renders nothing below the threshold, so a pair without enough
-           reviews does not gain an empty box. */ }
-      <Anchored>
-        { /* the anchor lives on a wrapper: Reviews takes the SUBJECT's id,
-             which a pair does not have - it is named by its two ends */ }
-        <div id={ REVIEWS }>
-          <Reviews type="pair" id={ 0 } pair={ { from: from ?? '', to: to ?? '' } } t={ t } />
-        </div>
-      </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. */ }
 
       <Links
         id={ LINKS }

package/package.json

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