@autobusal/routes-order 1.9.0 → 1.9.1

package/RoutesOrder.tsx

@@ -1,13 +1,22 @@
-import { useState } from 'react';
-import { useParams } from 'react-router-dom';
+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';
 import { Meta } from '@autobusal/common';
+import { useSystemTheme } from '@autobusal/hooks';
+import { useGetSettings } from '@autobusal/providers/services';
+import { selectItem } from '@autobusal/providers/Setup/commerce';
+import { item as commerceItem } from './commerce';
+import { currencyOf } from './Found/refine';
+import RoutesSearch from '@autobusal/routes-search';
 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 Step4 from './Step4/Step4';
-import Step5 from './Step5/Step5';
+import Checkout from './Checkout/Checkout';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { FoundData } from '@autobusal/providers/types/routes';
 import { PersonData } from '@autobusal/providers/types/persons';
@@ -30,6 +39,12 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
   // search form (no :from/:to params yet) or if a slug doesn't resolve.
   const { data: cities } = useGetSuggestions();
 
+  const { data: settings } = useGetSettings();
+
+  // same artwork the homepage hero uses, so the results page reads as the
+  // same site rather than a bare form on a white band
+  const mode = useSystemTheme();
+
   const fromCity = cities.find(city => city.slug === params.from);
   const toCity = cities.find(city => city.slug === params.to);
 
@@ -41,13 +56,123 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
     ? t('routes_order.meta.description_pair', { from: fromCity.name, to: toCity.name })
     : t('routes_order.meta.description');
 
+  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 });
+  };
+
+  /**
+   * 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({
@@ -59,7 +184,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);
@@ -68,35 +193,93 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
   const onStep2 = (data: FoundData): void => {
     setStep2(data);
 
-    if (step1?.type === 'return') {
-      setCurrent(3);
-    } else {
-      setCurrent(4);
-    }
+    selectItem(commerceItem(data), currencyOf([data]));
+
+    goto(step1?.type === 'return' ? 'return' : 'checkout');
   };
 
   const onStep3 = (data: FoundData): void => {
     setStep3(data);
-    setCurrent(4);
-  };
 
-  const onStep4 = (data: PersonData): void => {
-    setStep4(data);
-    setCurrent(5);
+    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;
   const showStep2 = current === 2 && step1 !== undefined;
   const showStep3 = current === 3 && step1 !== undefined && step2 !== undefined;
-  const showStep4 = current === 4 && step1 !== undefined && step2 !== undefined;
-  const showStep5 = current === 5 && step1 !== undefined && step2 !== undefined && step4 !== undefined;
+
+  // Edited: Ferjolt Ozuni - Date: 2026-08-01
+  // Step 4 is now the whole of the rest: passenger details and payment on
+  // one screen, so there is no step 5 and no intermediate handoff of
+  // passenger data between them.
+  const showCheckout = current === 4 && step1 !== undefined && step2 !== undefined;
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-01
+   *
+   * The search form stays on screen while the user is choosing a route.
+   * Adjusting a date or a city used to mean "Back to Search", which threw
+   * away the results and any filters with them.
+   *
+   * Only on the route-selection screens: past that point a passenger has
+   * committed to a specific trip, and quietly re-running the search under
+   * them would discard passenger details they had already typed.
+   *
+   * onStep1 is the same handler Step1 uses, so submitting here re-runs the
+   * search and lands back on step 2 exactly as a fresh search would.
+   */
+  const showSearchAgain = (current === 2 || current === 3) && step1 !== undefined;
 
   return (
     <Meta title={ title } description={ description }>
+      { showSearchAgain && step1 !== undefined && (
+        <SearchAgain $background={ `${ settings.url }/home/background-${ mode }.jpg` }>
+          <SearchInner>
+            <SearchToggle type="button" aria-expanded={ searchOpen } onClick={ () => setSearchOpen(!searchOpen) }>
+              <AiOutlineSearch />
+
+              <SearchSummary>
+                { fromCity?.name ?? step1.from } → { toCity?.name ?? step1.to } · { step1.departure }
+              </SearchSummary>
+
+              { searchOpen ? <AiOutlineCaretUp /> : <AiOutlineCaretDown /> }
+            </SearchToggle>
+
+            <SearchPanel $open={ searchOpen }>
+              <RoutesSearch
+                type={ step1.type ?? 'departure' }
+                from={ `${ step1.from }${ step1.stop_from ? `:${ step1.stop_from }` : '' }` }
+                to={ `${ step1.to }${ step1.stop_to ? `:${ step1.stop_to }` : '' }` }
+                departure={ step1.departure }
+                _return={ step1._return ?? '' }
+                adultsNo={ step1.adults }
+                childrenNo={ step1.children }
+                babiesNo={ step1.babies }
+                t={ t }
+                onSearch={ data => { setSearchOpen(false); onStep1(data); } }
+              />
+            </SearchPanel>
+          </SearchInner>
+        </SearchAgain>
+      ) }
+
       { showStep1 && (
         <Step1
           value={ step1 }
@@ -106,6 +289,13 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
         />
       ) }
 
+      { /* Edited: Ferjolt Ozuni - Date: 2026-08-03
+           The anchor the section nav's "Trips" link lands on. A plain
+           wrapper: the wizard inside is untouched, which is the whole point
+           of Tier 3.1 - the funnel keeps working exactly as it did and the
+           new sections sit around it. */ }
+      <div id="trips">
+
       { showStep2 && (
         <Step2
           step1={ step1 }
@@ -127,25 +317,43 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
         />
       ) }
 
-      { showStep4 && (
-        <Step4
-          values={ step4 }
-          step1={ step1 }
-          step2={ step2 }
-          step3={ step3 }
+      { /* Edited: Ferjolt Ozuni - Date: 2026-08-03, widened 2026-08-11
+           Roadmap Tier 3.2. NOT gated on step2/step3 (as it was originally)
+           - it now also renders on showStep1, which is what actually matters:
+           /bus-lines/:from/:to is the URL the sitemap lists and the
+           prerender crawl snapshots, and that URL is ALWAYS on step 1 - a
+           date has not been picked yet, so step2/step3 never mount and the
+           block never rendered for a single crawler. A logged human visitor
+           benefits the same way a search engine does: price/duration/
+           schedule for the pair, visible before they commit to a date.
+
+           Bare /bus-lines (no :from/:to) leaves both props undefined,
+           useGetFacts short-circuits on that, and Sections' own guard
+           returns null with nothing fetched - so the generic search form
+           gains no empty box underneath it.
+
+           Past step 2 the reader has picked a coach and is filling in
+           passenger details - facts about the pair are noise at that point,
+           which is why it still stops at step 3 and does not follow onto
+           checkout. */ }
+      { (showStep1 || showStep2 || showStep3) && (
+        <Sections
+          from={ fromCity?.slug ?? params.from }
+          to={ toCity?.slug ?? params.to }
           t={ t }
-          onSave={ onStep4 }
-          onBack={ onBack }
         />
       ) }
 
-      { showStep5 && (
-        <Step5
+      </div>
+
+      { showCheckout && (
+        <Checkout
+          values={ step4 }
           step1={ step1 }
           step2={ step2 }
           step3={ step3 }
-          step4={ step4 }
           t={ t }
+          onStore={ setStep4 }
           onBack={ onBack }
         />
       ) }

package/Schedule/Schedule.tsx

@@ -0,0 +1,123 @@
+import { TFunction } from 'i18next';
+import { Rating } from '@autobusal/common';
+import { Container, Table, Time, Faded, Price, Operator, NextDay } from './styles';
+import { ScheduleRow } from '../Facts/types';
+
+interface Props {
+  id: string
+  from: string
+  to: string
+  rows: ScheduleRow[]
+  t: TFunction<'common'>
+}
+
+/**
+ * Every service on this city pair, as a table.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Roadmap Tier 3.3, and the part of this tier that actually ranks. A page
+ * about "Tirana to Durres bus" competes on being dense, unique to the pair,
+ * and made of the words somebody types - and a timetable is all three at
+ * once, without a single sentence of written copy.
+ *
+ * A real <table>, not a grid of divs, because this genuinely is tabular data:
+ * the same structure that makes it readable is what lets a crawler
+ * understand the columns. No interactivity at all, so a prerendered snapshot
+ * shows a non-JS crawler exactly what a reader sees.
+ *
+ * Sorted by departure, server-side. Price order would scatter the day and
+ * make the table useless for the thing people actually do with a timetable,
+ * which is plan around a time.
+ */
+const Schedule = ({ id, from, to, rows, t }: Props): (JSX.Element | null) => {
+  if (rows.length === 0) {
+    return null;
+  }
+
+  const duration = (minutes: number | null): string => {
+    if (minutes === null) {
+      return '-';
+    }
+
+    const hours = Math.floor(minutes / 60);
+    const rest = minutes % 60;
+
+    // "8h 0m" is a number pretending to be a measurement
+    return rest === 0
+      ? t('routes_order.facts.duration_hours', { hours })
+      : t('routes_order.facts.duration_value', { hours, minutes: rest });
+  };
+
+  return (
+    <Container id={ id } className="box">
+      <h2>{ t('routes_order.schedule.title', { from, to }) }</h2>
+
+      <Table>
+        <thead>
+          <tr>
+            <th>{ t('routes_order.schedule.departure') }</th>
+            <th>{ t('routes_order.schedule.arrival') }</th>
+            <th>{ t('routes_order.schedule.duration') }</th>
+            <th>{ t('routes_order.schedule.stops') }</th>
+            <th>{ t('routes_order.schedule.operator') }</th>
+            <th>{ t('routes_order.schedule.price') }</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          { rows.map((row, index) => (
+            <tr key={ index }>
+              <td><Time>{ row.departure ?? '-' }</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>
+                { /* "Direct" is the word people scan for; "0 stops" makes
+                     the reader do that translation themselves.
+                     
+                     Above zero it is the bare NUMBER, not "{{count}} stops":
+                     the column header already says Stops, and an interpolated
+                     noun rendered "1 stops" - this codebase has no i18next
+                     plural forms anywhere, and adding them for one cell would
+                     mean getting three-form Slavic plurals right in fifteen
+                     languages to say something the header already said. */ }
+                <Faded>
+                  { row.stops === 0 ? t('routes_order.schedule.direct') : row.stops }
+                </Faded>
+              </td>
+
+              <td>
+                <Operator>
+                  { row.operator ?? '-' }
+
+                  { /* Renders nothing until the operator has enough
+                       published reviews - see Tier 2. A new operator must
+                       not read as a badly rated one. */ }
+                  <Rating rating={ row.rating } size="small" t={ t } />
+                </Operator>
+              </td>
+
+              <td><Price>{ row.price }</Price></td>
+            </tr>
+          )) }
+        </tbody>
+      </Table>
+    </Container>
+  );
+};
+
+export default Schedule;

package/Schedule/styles.ts

@@ -0,0 +1,71 @@
+import styled from 'styled-components';
+
+export const Container = styled.section`
+  margin-top: 25px;
+  overflow-x: auto;
+`;
+
+/**
+ * A real table, because this IS tabular data - the same reason a crawler
+ * understands it. Scrolls inside its own container on a narrow screen rather
+ * than pushing the page sideways.
+ */
+export const Table = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 620px;
+
+  th, td {
+    padding: 10px 12px;
+    text-align: left;
+    border-bottom: 1px solid ${ props => props.theme.background.neutral };
+    white-space: nowrap;
+  }
+
+  th {
+    font-size: ${ props => props.theme.size.s };
+    color: ${ props => props.theme.font.faded };
+    font-weight: 400;
+  }
+
+  tbody tr:last-child td {
+    border-bottom: none;
+  }
+`;
+
+export const Time = styled.strong`
+  font-weight: 700;
+`;
+
+export const Faded = styled.span`
+  color: ${ props => props.theme.font.faded };
+`;
+
+export const Price = styled.strong`
+  font-weight: 700;
+  white-space: nowrap;
+`;
+
+export const Operator = styled.div`
+  display: flex;
+  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 };
+`;