@autobusal/routes-order 1.25.0 → 1.27.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # 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.
+
+- `view_item_list` is keyed on the **result set**, not on render — this component re-renders on every filter tick and sort change, and announcing again each time would report a dozen searches for one.
+- `begin_checkout` lives in `Checkout` rather than `RoutesOrder`, because that screen already derives the currency from its own formatted total (the public settings payload deliberately carries none) and it mounts exactly once per arrival.
+- The **add-on attach rate** is the one input the Flexible Ticket pricing decision has been waiting on — it cannot be banded by window without knowing how often each window is actually bought.
+- One `item()` mapping shared by every event, keyed on the **route code** rather than the numeric id, so a report can be reconciled against something a human recognises.
+
 ## 1.25.0
 
 **Reviews on the route-pair page.** A new section between the timetable and the internal links, with its own nav anchor.

package/Checkout/Checkout.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useState, useEffect } from 'react';
 import { TFunction } from 'i18next';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
@@ -25,6 +25,8 @@ import { TotalData } from '../types';
 import { useUserStore } from '@autobusal/providers/stores/user';
 import { useGetSettings } from '@autobusal/providers/services';
 import { usePostOrder, useGetFlex } from '../services';
+import { addon as commerceAddon, beginCheckout, stash } from '@autobusal/providers/Setup/commerce';
+import { item as commerceItem } from '../commerce';
 
 interface Props {
   values?: PersonData
@@ -129,6 +131,21 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
     value: total.value + addonsValue
   };
 
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-05
+   *
+   * Here rather than in RoutesOrder because this screen already derives the
+   * currency from its own formatted total - the public settings payload
+   * carries none - and because it mounts exactly once per arrival at
+   * checkout, which is the cadence this event wants.
+   */
+  useEffect(() => {
+    const items = [commerceItem(step2), ...(step3 ? [commerceItem(step3)] : [])];
+
+    beginCheckout(total.value, items, currency);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const { mutate: OrderSend, isPending } = usePostOrder(step1, step2, step3, coupon, action, {
     whatsapp: addonWhatsapp,
     whatsappNumber: addonWhatsappNumber,
@@ -200,6 +217,21 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
 
         const hash = step1.type === 'return' ? data.return : data.departure;
 
+        // Edited: Ferjolt Ozuni - Date: 2026-08-05
+        //
+        // Remembered here because the confirmation page cannot work it out.
+        // A card payment leaves the site for the bank and returns on a URL
+        // carrying nothing but this hash, and most buyers are guests with no
+        // account the order could be read back from. Keyed on the SAME hash
+        // the confirmation is reached with, so it cannot be attributed to a
+        // different order.
+        stash(
+          String(hash),
+          grandTotal.value,
+          [commerceItem(step2), ...(step3 ? [commerceItem(step3)] : [])],
+          currency
+        );
+
         navigate(`/orders/process/${ action }/${ hash }`);
       }
     });
@@ -244,7 +276,14 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
             onChangeWhatsapp={ setAddonWhatsapp }
             onChangeWhatsappNumber={ setAddonWhatsappNumber }
             onChangeTelegram={ setAddonTelegram }
-            onChangeFlex={ setAddonFlex }
+            onChangeFlex={ (value) => {
+              setAddonFlex(value);
+
+              // The attach rate this records is the one input the Flexible
+              // Ticket pricing decision is waiting on - it cannot be banded
+              // by window without knowing how often each is actually bought.
+              commerceAddon(value, 'Flexible Ticket', FlexData?.price ?? 0, currency);
+            } }
           />
 
           { UserData === undefined && (

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/Found.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useMemo, useState, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { TFunction } from 'i18next';
 import Dates from './Dates/Dates';
@@ -13,6 +13,8 @@ import { Results, Sidebar, Listing } from '../styles';
 import { useGetAlternatives } from '../services';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { FoundData } from '@autobusal/providers/types/routes';
+import { viewItemList } from '@autobusal/providers/Setup/commerce';
+import { item as commerceItem } from '../commerce';
 import { Refinement, BucketKey, fromParams, toParams, filterItems, buildFacets, priceRange, currencyOf, isRefined } from './refine';
 
 interface Props {
@@ -31,6 +33,17 @@ interface Props {
 const OWNED = [ 'sort', 'operators', 'times', 'direct', 'from_stops', 'to_stops', 'features', 'max_price' ];
 
 const Found = ({ type, loading, data, step1, preferredStop, t, onSearch, onSave }: Props): JSX.Element => {
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-05
+   *
+   * Keyed on the RESULT SET, not on every render. This component re-renders
+   * on each filter tick and sort change, and announcing the list again every
+   * time would report a dozen searches for one.
+   */
+  useEffect(() => {
+    viewItemList((data ?? []).map(commerceItem), currencyOf(data ?? []));
+  }, [data]);
+
   const [ searchParams, setSearchParams ] = useSearchParams();
   const [ open, setOpen ] = useState<boolean>(false);
 

package/RoutesOrder.tsx

@@ -1,15 +1,19 @@
-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';
 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 Checkout from './Checkout/Checkout';
@@ -122,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({
@@ -142,6 +193,8 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
   const onStep2 = (data: FoundData): void => {
     setStep2(data);
 
+    selectItem(commerceItem(data), currencyOf([data]));
+
     goto(step1?.type === 'return' ? 'return' : 'checkout');
   };
 

package/commerce.ts

@@ -0,0 +1,24 @@
+import { CommerceItem } from '@autobusal/providers/Setup/commerce';
+import { FoundData } from '@autobusal/providers/types/routes';
+
+/**
+ * A coach, as the analytics layer sees it.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-05
+ *
+ * One mapping used by every event, so a route cannot be identified one way
+ * in `select_item` and another in `purchase` - which is exactly how a funnel
+ * ends up unable to join its own steps together.
+ *
+ * The ROUTE CODE is the id rather than the numeric key: it is what appears
+ * on the ticket, in the timetable and on the operator's own paperwork, so a
+ * report built on it can be reconciled against something a human recognises.
+ */
+export const item = (route: FoundData): CommerceItem => ({
+  item_id: String(route.code ?? route.id),
+  item_name: `${ route.locations?.from?.city?.name ?? '' } - ${ route.locations?.to?.city?.name ?? '' }`.trim(),
+  item_brand: route.operator?.company,
+  price: Number(route.price?.value ?? 0),
+  quantity: 1
+});
+

package/package.json

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