@autobusal/routes-order 1.26.0 → 1.27.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 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/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/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/package.json

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