@autobusal/routes-search 1.2.0 → 1.3.0

package/Picker.tsx

@@ -0,0 +1,119 @@
+import { useState, useRef } from 'react';
+import { TFunction } from 'i18next';
+import { useQuery } from '@tanstack/react-query';
+import { FaMapMarkerAlt, FaChevronLeft } from 'react-icons/fa';
+import { apiClient } from '@autobusal/providers';
+import { useOutside } from '@autobusal/hooks';
+import { PickerContainer, PickerButton, Tooltip, TooltipTitle, TooltipList, TooltipItem, TooltipBack } from './styles';
+
+interface Country {
+  id: number
+  name: string
+  cities: { slug: string, name: string }[]
+}
+
+interface Props {
+  /**
+   * The departure slug, when this is the destination picker - the list then
+   * only offers cities actually reachable from it.
+   */
+  from?: string
+  t: TFunction<'common'>
+  onPick: (slug: string) => void
+}
+
+/**
+ * The map-pin browser on the From/To fields.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-07
+ *
+ * Autocomplete answers people who know where they are going; this answers
+ * the ones who do not. Click the pin, pick a country, pick a city - two
+ * steps over /api/cities/selectable, which only ever lists cities a ticket
+ * can actually be sold for. On the destination field the departure slug
+ * rides along, so the countries and cities shown are exactly the ones
+ * reachable from the chosen origin - the picker cannot compose a pair the
+ * search would answer with nothing.
+ *
+ * Fetched lazily on first open (keyed by origin), not with the form: most
+ * searches never open this.
+ */
+const Picker = ({ from, t, onPick }: Props): JSX.Element => {
+  const [ open, setOpen ] = useState<boolean>(false);
+
+  const [ country, setCountry ] = useState<Country | null>(null);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useOutside(ref, () => setOpen(false));
+
+  const { data } = useQuery<Country[]>({
+    queryKey: ['cities-selectable', { from: from ?? null }],
+    enabled: open,
+    queryFn: async () => (
+      await apiClient
+        .get('/api/cities/selectable', { params: from ? { from } : {} })
+        .then(response => response?.data ?? [])
+    )
+  });
+
+  const onToggle = (): void => {
+    setCountry(null);
+    setOpen(!open);
+  };
+
+  const onCity = (slug: string): void => {
+    onPick(slug);
+    setOpen(false);
+  };
+
+  return (
+    <PickerContainer ref={ ref }>
+      <PickerButton
+        type="button"
+        aria-label={ t('routes_search.picker.open', { ns: 'common' }) }
+        title={ t('routes_search.picker.open', { ns: 'common' }) }
+        onClick={ onToggle }
+      >
+        <FaMapMarkerAlt />
+      </PickerButton>
+
+      { open && (
+        <Tooltip>
+          { !country ? (
+            <>
+              <TooltipTitle>{ t('routes_search.picker.countries', { ns: 'common' }) }</TooltipTitle>
+
+              <TooltipList>
+                { (data ?? []).map(item => (
+                  <TooltipItem key={ item.id } type="button" onClick={ () => setCountry(item) }>
+                    { item.name }
+                  </TooltipItem>
+                )) }
+              </TooltipList>
+            </>
+          ) : (
+            <>
+              <TooltipBack type="button" onClick={ () => setCountry(null) }>
+                <FaChevronLeft />
+                { country.name }
+              </TooltipBack>
+
+              <TooltipTitle>{ t('routes_search.picker.cities', { ns: 'common' }) }</TooltipTitle>
+
+              <TooltipList>
+                { country.cities.map(city => (
+                  <TooltipItem key={ city.slug } type="button" onClick={ () => onCity(city.slug) }>
+                    { city.name }
+                  </TooltipItem>
+                )) }
+              </TooltipList>
+            </>
+          ) }
+        </Tooltip>
+      ) }
+    </PickerContainer>
+  );
+};
+
+export default Picker;

package/RoutesSearch.tsx

@@ -6,7 +6,8 @@ import { AiOutlineSearch } from 'react-icons/ai';
 import { Button, Autocomplete, Calendar, Passengers, setDepartureZone } from '@autobusal/common';
 import { Display, createDate } from '@autobusal/utilities';
 import { getCities } from './utilities';
-import { Options, Columns, Column, Item, Title, Action } from './styles';
+import Picker from './Picker';
+import { Options, Columns, Column, Item, Title, Action, PickerField } from './styles';
 import { RoutesSearchForm } from './types';
 import { useGetSuggestions } from './services';
 
@@ -34,6 +35,23 @@ const RoutesSearch = ({ type, from, to, departure, _return, adultsNo, childrenNo
 
   const { register, handleSubmit, formState: { errors }, setValue } = useForm<RoutesSearchForm>();
 
+  // Edited: Ferjolt Ozuni - Date: 2026-08-07
+  // What the map-pin picker chose, per field. Autocomplete is uncontrolled,
+  // so a pick remounts it (the `key` below) with the picked slug as its
+  // defaultValue - the same remount-to-reseed trick the admin label form
+  // uses. Null until the picker is used, so typing stays untouched.
+  const [ picked, setPicked ] = useState<{ from: string | null, to: string | null }>({ from: null, to: null });
+
+  const onPick = (field: 'from' | 'to', slug: string): void => {
+    setValue(field, slug);
+
+    setPicked(previous => ({ ...previous, [field]: slug }));
+
+    if (field === 'from') {
+      onDeparture(slug);
+    }
+  };
+
   const { data: CitiesData } = useGetSuggestions();
 
   /**
@@ -130,15 +148,20 @@ const RoutesSearch = ({ type, from, to, departure, _return, adultsNo, childrenNo
           <Item>
             <Title>{ t('routes_search.from', { ns: 'common' }) }</Title>
 
-            <Autocomplete
-              name="from"
-              defaultValue={ from }
-              data={ cities }
-              validation="required"
-              t={ t }
-              refs={ register }
-              onUpdate={ (_, value) => { setValue('from', value); onDeparture(String(value)); } }
-            />
+            <PickerField>
+              <Autocomplete
+                key={ `from-${ picked.from ?? '' }` }
+                name="from"
+                defaultValue={ picked.from ?? from }
+                data={ cities }
+                validation="required"
+                t={ t }
+                refs={ register }
+                onUpdate={ (_, value) => { setValue('from', value); onDeparture(String(value)); } }
+              />
+
+              <Picker t={ t } onPick={ (slug) => onPick('from', slug) } />
+            </PickerField>
 
             { Display(errors.from) }
           </Item>
@@ -146,15 +169,23 @@ const RoutesSearch = ({ type, from, to, departure, _return, adultsNo, childrenNo
           <Item>
             <Title>{ t('routes_search.to', { ns: 'common' }) }</Title>
 
-            <Autocomplete
-              name="to"
-              defaultValue={ to }
-              data={ cities }
-              validation="required"
-              t={ t }
-              refs={ register }
-              onUpdate={ setValue }
-            />
+            <PickerField>
+              <Autocomplete
+                key={ `to-${ picked.to ?? '' }` }
+                name="to"
+                defaultValue={ picked.to ?? to }
+                data={ cities }
+                validation="required"
+                t={ t }
+                refs={ register }
+                onUpdate={ setValue }
+              />
+
+              { /* the departure the picker itself chose, or the one the form
+                   opened with - reachability filters against what is actually
+                   in the From field */ }
+              <Picker from={ (picked.from ?? from)?.split(':')[0] } t={ t } onPick={ (slug) => onPick('to', slug) } />
+            </PickerField>
 
             { Display(errors.to) }
           </Item>

package/package.json

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

package/styles.ts

@@ -46,4 +46,99 @@ export const Action = styled.div`
   @media (min-width: 640px) {
     justify-content: right;
   }
-`;
+`;
+/**
+ * Ferjolt Ozuni - Date: 2026-08-07
+ * The map-pin picker riding on the From/To fields - see Picker.tsx.
+ * The container wraps the field so the pin can sit inside its right edge
+ * and the tooltip can anchor beneath it.
+ */
+export const PickerContainer = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 38px;
+  display: flex;
+  align-items: center;
+`;
+
+export const PickerField = styled.div`
+  position: relative;
+
+  input {
+    padding-right: 36px;
+  }
+`;
+
+export const PickerButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 100%;
+  border: none;
+  background: transparent;
+  color: ${ props => props.theme.font.faded };
+  cursor: pointer;
+
+  &:hover {
+    color: ${ props => props.theme.primary.normal };
+  }
+`;
+
+export const Tooltip = styled.div`
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 30;
+  width: 260px;
+  max-height: 320px;
+  overflow-y: auto;
+  padding: 12px;
+  background: ${ props => props.theme.background.box };
+  border-radius: ${ props => props.theme.borderRadius };
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
+`;
+
+export const TooltipTitle = styled.div`
+  margin-bottom: 8px;
+  font-size: ${ props => props.theme.size.s };
+  font-weight: 700;
+`;
+
+export const TooltipList = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const TooltipItem = styled.button`
+  padding: 8px 6px;
+  border: none;
+  background: transparent;
+  color: ${ props => props.theme.font.normal };
+  font-size: ${ props => props.theme.size.s };
+  text-align: left;
+  cursor: pointer;
+  border-radius: ${ props => props.theme.borderRadius };
+
+  &:hover {
+    background: ${ props => props.theme.background.neutral };
+  }
+`;
+
+export const TooltipBack = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+  padding: 4px 0;
+  border: none;
+  background: transparent;
+  color: ${ props => props.theme.font.faded };
+  font-size: ${ props => props.theme.size.xs };
+  cursor: pointer;
+
+  &:hover {
+    color: ${ props => props.theme.primary.normal };
+  }
+`;