@autobusal/routes-order 1.24.0 → 1.26.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 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.
+
+Renders nothing below the display threshold, so a pair without enough reviews does not gain an empty box.
+
 ## 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.

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/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

@@ -5,6 +5,9 @@ import { AiOutlineSearch, AiOutlineCaretDown, AiOutlineCaretUp } from 'react-ico
 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';
@@ -142,6 +145,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/Sections/Sections.tsx

@@ -2,6 +2,7 @@ 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';
@@ -16,6 +17,7 @@ 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.
@@ -63,6 +65,8 @@ 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
@@ -78,6 +82,23 @@ 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>
+
       <Links
         id={ LINKS }
         from={ links.from }

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.24.0",
+  "version": "1.26.0",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"