@autobusal/routes-search 1.3.3 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.4.0 (2026-08-29)
+
+- A departure city near the visitor pre-fills From (obtapi /api/geo/origin), applied once and only while the field is untouched; opt-in through the new `suggest` prop.
+
 ## 1.3.3 (2026-08-29)
 
 - A city with a single station lists that station instead of an identical "All Stations" entry beside it; the submitted value stays the city's slug, so URLs are unchanged.

package/RoutesSearch.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { TFunction } from 'i18next';
 import { useForm } from 'react-hook-form';
 import { FaArrowUp, FaHistory } from 'react-icons/fa';
@@ -9,7 +9,7 @@ import { getCities } from './utilities';
 import Picker from './Picker';
 import { Options, Columns, Column, Item, Title, Action, PickerField } from './styles';
 import { RoutesSearchForm } from './types';
-import { useGetSuggestions } from './services';
+import { useGetSuggestions, useSuggestedOrigin } from './services';
 
 interface Props {
   type: 'departure' | 'return'
@@ -20,11 +20,21 @@ interface Props {
   adultsNo: number
   childrenNo: number
   babiesNo: number
+  /**
+   * Edited: Claude - Date: 2026-08-29
+   *
+   * Open "From" on a departure city near the visitor instead of the
+   * brand's configured default. Only for a FRESH form (the homepage, the
+   * bare /bus-lines page) - never for the collapsed form on a results
+   * page, where the pair on screen is the one being searched and must not
+   * be quietly rewritten under the visitor.
+   */
+  suggest?: boolean
   t: TFunction<'common'>
   onSearch: (data: RoutesSearchForm) => void
 }
 
-const RoutesSearch = ({ type, from, to, departure, _return, adultsNo, childrenNo, babiesNo, t, onSearch }: Props): JSX.Element => {
+const RoutesSearch = ({ type, from, to, departure, _return, adultsNo, childrenNo, babiesNo, suggest = false, t, onSearch }: Props): JSX.Element => {
   const [ selected, setSelected ] = useState<'departure' | 'return'>(type);
 
   // Edited: Ferjolt Ozuni - Date: 2026-08-01
@@ -54,6 +64,41 @@ const RoutesSearch = ({ type, from, to, departure, _return, adultsNo, childrenNo
 
   const { data: CitiesData } = useGetSuggestions();
 
+  /**
+   * Where the visitor most likely wants to leave from.
+   *
+   * Edited: Claude - Date: 2026-08-29
+   *
+   * Applied ONCE and only while the field is untouched: it is a better
+   * opening guess than the brand default, not a correction of anybody's
+   * typing. The remount-to-reseed trick is the map picker's, above -
+   * Autocomplete is uncontrolled, so changing its defaultValue needs a new
+   * key.
+   */
+  const { data: suggestedOrigin } = useSuggestedOrigin(suggest);
+
+  const touchedFrom = useRef<boolean>(false);
+  const appliedSuggestion = useRef<boolean>(false);
+
+  useEffect(() => {
+    if (!suggest || appliedSuggestion.current || touchedFrom.current) {
+      return;
+    }
+
+    if (!suggestedOrigin || suggestedOrigin === from) {
+      return;
+    }
+
+    appliedSuggestion.current = true;
+
+    setPicked(previous => ({ ...previous, from: suggestedOrigin }));
+
+    setValue('from', suggestedOrigin);
+
+    onDeparture(suggestedOrigin);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ suggestedOrigin ]);
+
   /**
    * Tell the date picker which clock this journey starts on.
    *
@@ -158,7 +203,12 @@ const RoutesSearch = ({ type, from, to, departure, _return, adultsNo, childrenNo
                 validation="required"
                 t={ t }
                 refs={ register }
-                onUpdate={ (_, value) => { setValue('from', value); onDeparture(String(value)); } }
+                onUpdate={ (_, value) => {
+                  touchedFrom.current = true;
+
+                  setValue('from', value);
+                  onDeparture(String(value));
+                } }
               />
 
               <Picker t={ t } onPick={ (slug) => onPick('from', slug) } />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/routes-search",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"

package/services.ts

@@ -1,4 +1,4 @@
-import { useSuspenseQuery, UseSuspenseQueryResult } from '@tanstack/react-query';
+import { useQuery, useSuspenseQuery, UseQueryResult, UseSuspenseQueryResult } from '@tanstack/react-query';
 import { apiClient } from '@autobusal/providers';
 import { CityData } from '@autobusal/providers/types/locations';
 
@@ -13,4 +13,37 @@ export const useGetSuggestions = (): UseSuspenseQueryResult<CityData[]> => (
         ))
     )
   })
-);
+);
+
+/**
+ * The departure city to open the form on, for THIS visitor.
+ *
+ * Claude - Date: 2026-08-29
+ *
+ * obtapi answers with the origin serving the most destinations in the
+ * visitor's own country - see Libraries\Geo\Origin, and note the
+ * precision is the COUNTRY: the geo database is country-level, so this is
+ * "somewhere you can actually leave from near you", not "your city".
+ *
+ * A plain useQuery, not a suspense one: the form must render immediately
+ * with the brand's default and improve on it when the answer arrives -
+ * suspending the whole search box on a geolocation lookup would be a far
+ * worse trade than a slightly-late pre-fill. Null (no database, a private
+ * address, a country we sell nothing from) simply leaves the default.
+ */
+export const useSuggestedOrigin = (enabled: boolean): UseQueryResult<string | null> => (
+  useQuery({
+    queryKey: ['search-suggested-origin'],
+    enabled,
+    // the answer only changes with the brand's inventory, and the visitor's
+    // country does not change mid-session
+    staleTime: 1000 * 60 * 30,
+    retry: false,
+    queryFn: async () => (
+      await apiClient
+        .get('/api/geo/origin')
+        .then(response => response?.data?.from ?? null)
+        .catch(() => null)
+    )
+  })
+);