@autobusal/routes-order 1.25.0 → 1.26.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # 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.

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/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.26.0",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"