@autobusal/routes-order 1.23.5 → 1.24.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 1.24.0
+
+**The booking wizard has real URLs.** The step now lives in the URL and `current` is derived from it, rather than the reverse.
+
+Before: the wizard held the step in component state and never touched the address bar, so the URL still said "search" while the buyer was on checkout. Nothing in the flow was shareable, a refresh dropped you back to the search, and Back did not step back through the wizard — it left it entirely, because no step had ever created a history entry.
+
+- A **search param** (`?step=checkout` / `?step=return`), not a path segment. `/bus-lines/:from/:to` is a crawlable page in the sitemap, and child routes would put near-identical URLs in front of a crawler for what is UI state. The search spec is already in the path on the 9-segment route, so between the two the whole position is in the URL.
+- **Guards, not a lookup.** A step is honoured only when the state it needs exists: a cold `?step=checkout` has no chosen route, so it falls back to results and clears the stale param rather than rendering half a screen.
+
+**Bug fixed on the way.** `Checkout` chose its back target with `step1._return ? 3 : 2`. On the 9-segment URL a one-way trip carries the literal segment `none` as its return date — a truthy string — so **every one-way booking's Back button aimed at the return-leg step**, which that booking does not have. Now keyed on `step1.type`, and guarded again in `onBack` so a step nobody can honour never reaches the URL.
+
+Verified: results → checkout writes the param; browser Back and Forward move between them; the in-page Back returns to results; a cold checkout URL falls back; and eight back/forward transitions produced no blank frame and no console error.
+
 ## 1.23.5
 
 **The operator cell centres its contents at every width.** LinkCompany already carried an auto horizontal margin, so the logo was centred in the cell whatever the screen - but the rating and the route code sat at flex-start, under the left edge of a box whose logo was in the middle of it. On a 768px card that was a ~300px gap between the logo and the code below it.

package/Checkout/Checkout.tsx

@@ -290,7 +290,12 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
               // than coming back to an empty one
               onStore(passenger.getValues());
 
-              onBack(step1._return ? 3 : 2);
+              // Edited: Ferjolt Ozuni - Date: 2026-08-03
+              // `type`, not `_return`. On the 9-segment search URL a one-way
+              // trip carries the literal segment "none" as its return date,
+              // which is a truthy string - so this always chose the
+              // return-leg step, even for a booking that has no return leg.
+              onBack(step1.type === 'return' ? 3 : 2);
             } }
           />
         </Actions>

package/RoutesOrder.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router-dom';
 import { TFunction } from 'i18next';
 import { AiOutlineSearch, AiOutlineCaretDown, AiOutlineCaretUp } from 'react-icons/ai';
 import { Meta } from '@autobusal/common';
@@ -54,12 +54,74 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
 
   const [ searchOpen, setSearchOpen ] = useState<boolean>(false);
   const [ redirected, setRedirected ] = useState<boolean>(false);
-  const [ current, setCurrent ] = useState<number>(1);
   const [ step1, setStep1 ] = useState<RoutesSearchForm | undefined>(undefined);
   const [ step2, setStep2 ] = useState<FoundData | undefined>(undefined);
   const [ step3, setStep3 ] = useState<FoundData | undefined>(undefined);
   const [ step4, setStep4 ] = useState<PersonData | undefined>(undefined);
 
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   *
+   * THE STEP LIVES IN THE URL, and `current` is derived from it - not the
+   * other way round. The wizard held the step in component state and never
+   * touched the address bar, so the URL still said "search" while the buyer
+   * was on the checkout screen. Nothing in the flow was shareable, a refresh
+   * dropped you back to the search, and Back did not step back through the
+   * wizard - it left it entirely, because no step had ever created a history
+   * entry.
+   *
+   * A SEARCH PARAM rather than a path segment, deliberately. The pair page
+   * /bus-lines/:from/:to is a crawlable page in the sitemap, and hanging
+   * child routes off it would put near-identical URLs in front of a crawler
+   * for what is UI state rather than content. The search spec itself is
+   * already in the path on the 9-segment route, so between the two the whole
+   * position is in the URL.
+   *
+   * THE GUARDS ARE THE POINT. A step is only honoured when the state it
+   * needs actually exists - arriving at ?step=checkout in a fresh tab has no
+   * chosen route to check out, so it falls back to the results rather than
+   * rendering half a screen. That is why this reads as a chain of conditions
+   * and not a lookup.
+   */
+  const [ searchParams, setSearchParams ] = useSearchParams();
+
+  const step = searchParams.get('step');
+
+  const current = (() => {
+    if (step === 'checkout' && step1 !== undefined && step2 !== undefined) {
+      return 4;
+    }
+
+    if (step === 'return' && step1 !== undefined && step2 !== undefined) {
+      return 3;
+    }
+
+    // A search has run, so the results are the honest screen to be on -
+    // whether the step param says so, names something we cannot honour, or
+    // is absent because the URL carried a complete search spec of its own.
+    return step1 !== undefined ? 2 : 1;
+  })();
+
+  /**
+   * Move to a step, leaving a history entry so Back returns here.
+   *
+   * `replace` for the screen a search lands on: a search is not somewhere a
+   * buyer chose to go back to mid-flow, it is where they already are.
+   */
+  const goto = (to: (string | null), replace = false): void => {
+    setSearchParams(previous => {
+      const next = new URLSearchParams(previous);
+
+      if (to === null) {
+        next.delete('step');
+      } else {
+        next.set('step', to);
+      }
+
+      return next;
+    }, { replace });
+  };
+
   const onSearchDate = (type: ('departure' | '_return'), day: string): void => {
     if (step1 !== undefined) {
       setStep1({
@@ -71,7 +133,7 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
 
   const onStep1 = (data: RoutesSearchForm): void => {
     setStep1(data);
-    setCurrent(2);
+    goto(null, true);
 
     // we mark it as redirected
     setRedirected(true);
@@ -80,20 +142,30 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
   const onStep2 = (data: FoundData): void => {
     setStep2(data);
 
-    if (step1?.type === 'return') {
-      setCurrent(3);
-    } else {
-      setCurrent(4);
-    }
+    goto(step1?.type === 'return' ? 'return' : 'checkout');
   };
 
   const onStep3 = (data: FoundData): void => {
     setStep3(data);
-    setCurrent(4);
+
+    goto('checkout');
   };
 
-  const onBack = (step: number): void => {
-    setCurrent(step);
+  /**
+   * The in-page Back buttons, moving through the URL like the browser's own
+   * - so the two can never disagree about where the buyer is.
+   *
+   * The return step is only reachable on a booking that HAS a return leg.
+   * Guarded here as well as at the call site, on the same principle as
+   * `current` above: a step nobody can honour should never reach the URL,
+   * whoever asked for it.
+   */
+  const onBack = (to: number): void => {
+    if (to === 3 && step1?.type === 'return') {
+      return goto('return');
+    }
+
+    goto(to === 4 ? 'checkout' : null);
   };
 
   const showStep1 = current === 1;

package/package.json

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