@autobusal/routes-order 1.8.0 → 1.9.1

package/Found/Filters/styles.ts

@@ -0,0 +1,188 @@
+import styled, { css } from 'styled-components';
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Below 1280px the filters stay a collapsible panel above the list; at and
+ * above it they become a permanent sidebar. 1280 rather than 1024 on
+ * purpose: the result CARDS switch to their wide row layout at 1024px based
+ * on the viewport, not on their container, so carving a 280px column out of
+ * a 1024px window would leave the cards using a layout their remaining
+ * ~700px cannot carry.
+ */
+export const Container = styled.div`
+  margin-bottom: 15px;
+
+  @media (min-width: 1280px) {
+    margin-bottom: 0;
+  }
+`;
+
+export const Toggle = styled.button<{ $open: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  font-size: ${ props => props.theme.size.s };
+  font-weight: 700;
+  border-radius: 100px;
+  border: 1px solid ${ props => props.theme.inputs.border };
+  background: ${ props => props.theme.background.normal };
+  color: ${ props => props.theme.font.normal };
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: ${ props => props.theme.primary.normal };
+  }
+
+  ${ props => props.$open && css`
+    border-color: ${ props => props.theme.primary.normal };
+  ` }
+
+  // the sidebar is always open, so there is nothing left to toggle
+  @media (min-width: 1280px) {
+    display: none;
+  }
+`;
+
+export const Count = styled.span`
+  min-width: 20px;
+  padding: 1px 7px;
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.primary.contrast };
+  background: ${ props => props.theme.primary.normal };
+  border-radius: 100px;
+`;
+
+export const Panel = styled.div<{ $open: boolean }>`
+  display: ${ props => props.$open ? 'grid' : 'none' };
+  gap: 20px;
+  margin-top: 12px;
+  padding: 20px;
+  // minmax(0, 1fr) rather than 1fr: a grid track's implicit min-width is
+  // auto, so a long stop name like "Terminali Lindor Interurban dhe
+  // Nderkombetar i Autobusave (TEG)" pushed the whole panel wider than its
+  // column and pushed the counts and prices out of sight
+  grid-template-columns: minmax(0, 1fr);
+
+  @media (min-width: 640px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @media (min-width: 1024px) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  // as a sidebar: always rendered, one column, and it follows the page down
+  // so the filters stay reachable while scrolling a long result list
+  @media (min-width: 1280px) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    margin-top: 0;
+    position: sticky;
+    top: 15px;
+    max-height: calc(100vh - 30px);
+    overflow-y: auto;
+  }
+`;
+
+export const Group = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+`;
+
+export const GroupTitle = styled.h6`
+  margin-bottom: 0;
+  font-size: ${ props => props.theme.size.xs };
+  text-transform: uppercase;
+  color: ${ props => props.theme.font.faded };
+`;
+
+export const Choice = styled.label<{ $disabled: boolean }>`
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  line-height: 1.35;
+  font-size: ${ props => props.theme.size.s };
+  cursor: pointer;
+
+  & > input {
+    cursor: pointer;
+    accent-color: ${ props => props.theme.primary.normal };
+  }
+
+  ${ props => props.$disabled && css`
+    cursor: default;
+    opacity: .45;
+
+    & > input {
+      cursor: default;
+    }
+  ` }
+`;
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Wraps rather than truncating. In the sidebar column an ellipsis turned
+ * "Terminali Lindor Interurban dhe Nderkombetar i Autobusave (TEG)" into
+ * "Terminali Lindor Inte..." - two stops at the same city are then
+ * indistinguishable, which is the one thing this filter exists to tell
+ * apart. A second line is cheaper than a useless label.
+ */
+export const ChoiceName = styled.span`
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+`;
+
+export const ChoiceMeta = styled.span`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.faded };
+  white-space: nowrap;
+`;
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * How many trips a facet value leaves, as a filled pill. It used to sit
+ * next to the price as "5 · 38.00 EUR" in one muted string, where the two
+ * numbers read as one and you had to work out which was which. A count and
+ * a fare are different kinds of thing and now look like it.
+ */
+export const ChoiceCount = styled.span`
+  min-width: 22px;
+  padding: 1px 6px;
+  text-align: center;
+  font-weight: 700;
+  color: ${ props => props.theme.font.normal };
+  background: ${ props => props.theme.background.neutral };
+  border-radius: 100px;
+`;
+
+export const ChoicePrice = styled.span`
+  color: ${ props => props.theme.font.faded };
+`;
+
+export const Slider = styled.input`
+  width: 100%;
+  accent-color: ${ props => props.theme.primary.normal };
+  cursor: pointer;
+`;
+
+export const Reset = styled.button`
+  align-self: flex-start;
+  font-size: ${ props => props.theme.size.s };
+  font-weight: 700;
+  color: ${ props => props.theme.font.error };
+  transition: all 0.2s ease;
+
+  &:hover {
+    opacity: .8;
+  }
+`;

package/Found/Found.tsx

@@ -1,10 +1,22 @@
+import { useMemo, useState, useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { TFunction } from 'i18next';
 import Dates from './Dates/Dates';
-import Booking from './Booking/Booking';
 import Header from './Header/Header';
 import Orders from './Orders/Orders';
+import Sort from './Sort/Sort';
+import Picks from './Picks/Picks';
+import Filters from './Filters/Filters';
+import Summary from './Summary/Summary';
+import SameDay from './SameDay/SameDay';
+import Watch from './Watch/Watch';
+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 {
   type: 'departure' | '_return'
@@ -17,23 +29,201 @@ interface Props {
   onSave: (data: FoundData) => void
 }
 
-const Found = ({ type, loading, data, step1, preferredStop, t, onSearch, onSave }: Props): JSX.Element => (
-  <>
-    <Dates type={ type } step1={ step1 } t={ t } onSearch={ onSearch } />
+// every query parameter this component owns, so writing a new refinement
+// clears the previous one without touching anything else on the URL
+const OWNED = [ 'sort', 'operators', 'times', 'direct', 'from_stops', 'to_stops', 'features', 'max_price' ];
 
-    { (data !== undefined && data.length > 0) && <Booking data={ data } step1={ step1 } t={ t } /> }
+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]);
 
-    <Header t={ t } />
+  const [ searchParams, setSearchParams ] = useSearchParams();
+  const [ open, setOpen ] = useState<boolean>(false);
 
-    <Orders
-      loading={ loading }
-      data={ data }
-      type={ type }
-      preferredStop={ Number(preferredStop) }
-      t={ t }
-      onSave={ onSave }
-    />
-  </>
-);
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-01
+   *
+   * The refinement lives in the URL, not in component state, so a filtered
+   * result set survives a reload and can be sent to somebody else - which is
+   * how people actually share a trip they found.
+   */
+  const refinement = useMemo(() => fromParams(searchParams), [ searchParams ]);
 
-export default Found;
+  const items = useMemo(() => data ?? [], [ data ]);
+
+  const bucketLabel = (key: BucketKey): string => t(`routes_order.step2.filters.buckets.${ key }`);
+
+  const facets = useMemo(() => buildFacets(items, refinement, bucketLabel), [ items, refinement, t ]);
+
+  const refined = useMemo(() => filterItems(items, refinement), [ items, refinement ]);
+
+  const range = useMemo(() => priceRange(refined.length > 0 ? refined : items), [ refined, items ]);
+
+  // the slider's bounds must come from the WHOLE result set, not the
+  // filtered one - bounds that shrink as you drag make it impossible to
+  // widen the range again
+  const bounds = useMemo(() => priceRange(items), [ items ]);
+
+  const currency = useMemo(() => currencyOf(items), [ items ]);
+
+  const onRefine = (next: Refinement): void => {
+    const params = new URLSearchParams(searchParams);
+
+    OWNED.forEach(name => params.delete(name));
+
+    Object.entries(toParams(next)).forEach(([ name, value ]) => params.set(name, value));
+
+    // `replace` so a back press returns to the search form rather than
+    // walking back through every checkbox the user just ticked
+    setSearchParams(params, { replace: true });
+  };
+
+  const passengers = Number(step1.adults ?? 0) + Number(step1.children ?? 0) + Number(step1.babies ?? 0);
+
+  // Edited: Ferjolt Ozuni - Date: 2026-08-01
+  // Only fetched once the search itself has finished and come back empty,
+  // so a search that found something never pays for the alternatives.
+  /*
+   * Edited: Claude - Date: 2026-08-28 (sweep, low)
+   *
+   * On the return leg the journey with no results is destination->origin
+   * on the RETURN date - the same swap useGetDates and `watched` below
+   * have always made. Passing step1 unswapped asked the API for OUTBOUND
+   * alternatives, so the empty return step suggested days for a leg the
+   * buyer already has (including the very day they booked).
+   */
+  const alternativesQuery = type === '_return'
+    ? { ...step1, from: step1.to, to: step1.from, departure: step1._return ?? '' }
+    : step1;
+
+  const { data: alternatives, isFetching: alternativesLoading } = useGetAlternatives(
+    alternativesQuery,
+    !loading && items.length === 0
+  );
+
+  // controls are pointless while there is nothing (or only one thing) to
+  // refine, and they'd only add noise above an empty state
+  const showControls = !loading && items.length > 1;
+
+  /**
+   * The journey the "watch this fare" control below is about.
+   *
+   * Edited: Claude - Date: 2026-08-20
+   *
+   * On the return leg the pair is the reverse of the one that was searched
+   * and the date is the return date - the same swap useGetDates has always
+   * made for the date strip, and for the same reason: step 3 is a search
+   * from the destination back, and watching the outbound fare there would
+   * watch a journey the visitor is no longer looking at.
+   */
+  const watched = type === '_return'
+    ? { from: step1.to, to: step1.from, departure: step1._return ?? '' }
+    : { from: step1.from, to: step1.to, departure: step1.departure };
+
+  return (
+    <>
+      <Dates type={ type } step1={ step1 } t={ t } onSearch={ onSearch } />
+
+      { /* Edited: Ferjolt Ozuni - Date: 2026-08-03
+           Keyed off obtapi sending a countdown at all, which it does only
+           for a same-day search - so there is no second copy of "is this
+           today" here to fall out of step with the server's. */ }
+      { items.some(item => item.departs_in !== null && item.departs_in !== undefined) && (
+        <SameDay t={ t } />
+      ) }
+
+      { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
+           The Booking.com banner used to sit here, between the date strip
+           and the trips, pushing the actual results below it to advertise a
+           hotel to somebody still deciding whether they can travel at all.
+           It was unmounted earlier today and the component is now removed
+           outright, along with cities.booking_id - it was never really an
+           integration, just a hand-built searchresults.xu.html link, and
+           leaving the column and its admin field behind made it look like
+           one. */ }
+
+      { showControls && (
+        <>
+          <Summary shown={ refined.length } total={ items.length } range={ range } t={ t }>
+            <Sort value={ refinement.sort } t={ t } onChange={ sort => onRefine({ ...refinement, sort }) } />
+          </Summary>
+
+          <Picks
+            items={ refined }
+            sort={ refinement.sort }
+            t={ t }
+            onSelect={ sort => onRefine({ ...refinement, sort }) }
+          />
+        </>
+      ) }
+
+      <Results>
+        { showControls && (
+          <Sidebar>
+            <Filters
+              open={ open }
+              refinement={ refinement }
+              facets={ facets }
+              range={ bounds }
+              currency={ currency }
+              t={ t }
+              onToggle={ () => setOpen(!open) }
+              onChange={ onRefine }
+            />
+          </Sidebar>
+        ) }
+
+        <Listing>
+          <Header t={ t } />
+
+          <Orders
+            loading={ loading }
+            data={ refined }
+            empty={ items.length === 0 }
+            step1={ step1 }
+            alternatives={ alternatives }
+            alternativesLoading={ alternativesLoading }
+            refined={ isRefined(refinement) }
+            sort={ refinement.sort }
+            type={ type }
+            passengers={ passengers }
+            preferredStop={ Number(preferredStop) }
+            t={ t }
+            onReset={ () => onRefine({ ...refinement, ...{ operators: [], buckets: [], direct: false, fromStops: [], toStops: [], features: [], maxPrice: null } }) }
+            onSave={ onSave }
+          />
+        </Listing>
+      </Results>
+
+      { /* Edited: Claude - Date: 2026-08-20
+           At the FOOT of the results, and outside <Results> so it spans the
+           full width rather than sitting under the filter column.
+
+           This is the one spot on the screen that is reached in every
+           outcome a search can have - a list of prices none of which was
+           the one the reader wanted, a filter that hid them all, and a
+           search that found nothing at all. That last case is the one that
+           decided the placement: "no buses for this search" is precisely
+           when somebody wants telling if that changes, and a control living
+           inside the listing would have been absent exactly there.
+
+           Held back while the search is still running - offering to watch a
+           fare before we know whether there is one to watch, under a
+           spinner, is noise. A pair nobody prices answers 404 and says so.
+           */ }
+      { !loading && watched.departure !== '' && (
+        <Watch from={ watched.from } to={ watched.to } departure={ watched.departure } t={ t } />
+      ) }
+    </>
+  );
+};
+
+export default Found;

package/Found/Group/Group.tsx

@@ -0,0 +1,68 @@
+import { useMemo, useState } from 'react';
+import { TFunction } from 'i18next';
+import Route from '../Route/Route';
+import { departureOf } from '../refine';
+import { Container, Title, Times, Time } from './styles';
+import { FoundData } from '@autobusal/providers/types/routes';
+
+interface Props {
+  items: FoundData[]
+  type: 'favorite' | 'normal'
+  date?: string
+  passengers: number
+  t: TFunction<'common'>
+  onSave: (data: FoundData) => void
+}
+
+/**
+ * One card for a set of interchangeable departures.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * The card shows a real departure - never an abstract summary - and the
+ * other times sit under it as a picker. Whatever is selected is what gets
+ * booked, so there is no separate "now choose a time" step to forget: the
+ * card always represents a bookable trip, starting with the earliest.
+ */
+const Group = ({ items, type, date, passengers, t, onSave }: Props): JSX.Element => {
+  // chronological for the picker, regardless of how the list itself is
+  // sorted - a row of times out of time order is just confusing
+  const departures = useMemo(() => (
+    [ ...items ].sort((first, second) => departureOf(first) - departureOf(second))
+  ), [ items ]);
+
+  const [ selected, setSelected ] = useState<number>(0);
+
+  const current = departures[selected] ?? departures[0];
+
+  return (
+    <Route
+      type={ type }
+      data={ current }
+      date={ date }
+      passengers={ passengers }
+      t={ t }
+      onSave={ onSave }
+    >
+      <Container>
+        <Title>{ t('routes_order.step2.route.departures', { total: departures.length }) }</Title>
+
+        <Times>
+          { departures.map((item, index) => (
+            <Time
+              key={ item.id }
+              type="button"
+              $active={ index === selected }
+              aria-pressed={ index === selected }
+              onClick={ () => setSelected(index) }
+            >
+              { item.locations.from.departure }
+            </Time>
+          )) }
+        </Times>
+      </Container>
+    </Route>
+  );
+};
+
+export default Group;

package/Found/Group/styles.ts

@@ -0,0 +1,44 @@
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  background: ${ props => props.theme.background.neutral };
+  border-radius: ${ props => props.theme.borderRadius };
+`;
+
+export const Title = styled.h6`
+  margin-bottom: 0;
+  font-size: ${ props => props.theme.size.xs };
+  text-transform: uppercase;
+  color: ${ props => props.theme.font.faded };
+`;
+
+export const Times = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+`;
+
+export const Time = styled.button<{ $active: boolean }>`
+  padding: 5px 12px;
+  font-size: ${ props => props.theme.size.s };
+  font-weight: 700;
+  border-radius: 100px;
+  border: 1px solid ${ props => props.theme.inputs.border };
+  background: ${ props => props.theme.background.normal };
+  color: ${ props => props.theme.font.normal };
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: ${ props => props.theme.primary.normal };
+  }
+
+  ${ props => props.$active && css`
+    color: ${ props => props.theme.primary.contrast };
+    background: ${ props => props.theme.primary.normal };
+    border-color: ${ props => props.theme.primary.normal };
+  ` }
+`;

package/Found/Header/styles.ts

@@ -1,8 +1,21 @@
 import styled from 'styled-components';
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * This row only means anything if its labels sit over the columns they
+ * name, so its geometry has to match the result card's exactly: the same
+ * 15px horizontal padding and the same 15px gap between columns. It had
+ * 4px padding and no gap at all, which pushed every label right of the
+ * data it labelled - Duration was out by 34px.
+ *
+ * If Found/Route/styles.ts ever changes the card's padding or the Trip
+ * gap, this has to move with it.
+ */
 export const Container = styled.div`
   display: none;
-  padding: 8px 4px;
+  gap: 15px;
+  padding: 8px 15px;
   margin-bottom: 15px;
 
   @media (min-width: 1024px) {
@@ -23,18 +36,21 @@ const Item = styled.div`
   }
 `;
 
+// these five must stay identical to their counterparts in
+// Found/Route/styles.ts, or the labels stop sitting over their columns
 export const Company = styled(Item)`
-  flex-basis: 185px;
+  flex: 0 0 185px;
 `;
 
 export const Location = styled(Item)`
   flex: 1;
+  min-width: 0;
 `;
 
 export const Time = styled(Item)`
-  flex-basis: 120px;
+  flex: 0 0 120px;
 `;
 
 export const Price = styled(Item)`
-  flex-basis: 165px;
+  flex: 0 0 165px;
 `;