@autobusal/routes-order 1.8.0 → 1.9.0

package/CHANGELOG.md

@@ -3,6 +3,64 @@
 All notable changes to this package are documented here. This project follows
 [Keep a Changelog](https://keepachangelog.com/) and [Semantic Versioning](https://semver.org/).
 
+> Note: 1.8.0 was published without a changelog entry. The gap is left as-is
+> rather than reconstructed after the fact.
+
+## [1.9.0] - 2026-08-01
+
+### Added
+
+- **Sorting on the results list** - recommended, cheapest, fastest,
+  earliest, latest. Preferred-stop pinning stays the outer partition and
+  each side sorts within itself, so choosing "cheapest" can no longer
+  silently un-pin a stop the user saved. Every sort carries a tiebreak on
+  the other axis, so three trips tied on journey time are led by the
+  cheapest of them rather than by whichever happened to come first.
+- **"Recommended" is defined and merit-first**: price rank plus duration
+  rank across the current result set, with the operator's paid subscription
+  priority breaking ties only between trips already equal on both. Paid
+  placement cannot overtake a cheaper or faster competitor. This is a
+  deliberate commercial decision (Ferjolt, 2026-08-01) and it is the answer
+  if anyone asks what the word means on this page. It replaces the previous
+  default, which was obtapi's departure-time order - that view is still one
+  click away as "earliest".
+- **Quick-pick cards** for cheapest / fastest / recommended, each naming
+  the winning fare, journey time and operator, and applying that ordering
+  on click. Computed from the filtered list, so a card never advertises a
+  trip the user's own filters have hidden.
+- **Faceted filters with live counts and a from-price per value** -
+  departure-time bucket, operator, direct-only, departure stop, arrival
+  stop, on-board amenities, and a maximum price. Counts recompute against
+  the *other* active filters, and values that would return nothing render
+  disabled rather than vanishing mid-interaction.
+- **Per-day prices on the date strip**, from obtapi's `from_price` /
+  `from_price_display`. The cheapest day is badged only when the cheap days
+  are a genuine minority - badging six days out of seven trains people to
+  ignore the badge.
+- **Result count and price range** above the list, which also makes it
+  visible when a filter is hiding results.
+- **Collapsed duplicate departures.** Trips from the same operator between
+  the same two stops at the same price and duration render as one card with
+  a departure-time picker instead of a wall of near-identical rows - the
+  shape hourly Albanian intercity service produces. Whatever time is picked
+  is what gets booked.
+- **Price clarity line** under every fare. It states the party size rather
+  than "per adult", because `price.value` is the total for the whole
+  passenger mix, not a per-person fare.
+
+The refinement lives in the URL, so a filtered result set survives a reload
+and can be shared. External-provider offers are never dropped by a facet
+they cannot report (stops, amenities) - a filter that deletes paid partner
+inventory is a revenue bug, not a UI detail.
+
+### Fixed
+
+- **`useGetDates` cache key ignored the search.** It was
+  `['step2-dates', { number }]`, so every city pair and passenger mix shared
+  one cache entry and the strip could show a previous trip's days. Harmless
+  while the strip held only booleans; with per-day prices on it, it would
+  have quoted one route's fares under another route's dates.
+
 ## [1.7.0] - 2026-07-30
 
 ### Added

package/Found/Dates/Dates.tsx

@@ -4,7 +4,7 @@ import { AiOutlineCaretLeft, AiOutlineCaretRight } from 'react-icons/ai';
 import { Button } from '@autobusal/common';
 import { createDate, getFormattedShort } from '@autobusal/utilities';
 import Loading from './Loading';
-import { Container, Inner, ButtonDay } from './styles';
+import { Container, Inner, ButtonDay, DayPrice, Cheapest } from './styles';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { FoundDay } from '../../types';
 import { useGetDates } from '../../services';
@@ -43,14 +43,50 @@ const Dates = ({ type, step1, t, onSearch }: Props): JSX.Element => {
 
   const today = new Date();
 
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-01
+   *
+   * The cheapest fare in the visible window, so it can be called out.
+   *
+   * Two guards, both learned by looking at it: the badge is pointless when
+   * every day costs the same, and it is worse than pointless when most days
+   * tie at the minimum - badging six of seven days trains people to ignore
+   * the badge entirely. It only appears when the cheap days are genuinely
+   * the minority, which is when shifting a date is actually worth telling
+   * somebody about.
+   */
+  const prices = (data ?? [])
+    .filter(item => typeof item.from_price === 'number')
+    .map(item => item.from_price as number);
+
+  const lowest = prices.length > 0 ? Math.min(...prices) : null;
+
+  const atLowest = prices.filter(price => price === lowest).length;
+
+  const varies = prices.length > 1
+    && Math.max(...prices) > (lowest as number)
+    && atLowest * 2 <= prices.length;
+
   const items = data?.map(item => {
     const date = createDate(item.day);
 
     // if date in the future, and we have routes available
     const isAvailable = today.getTime() <= date.getTime() && item.routes;
 
+    const isCheapest = varies && lowest !== null && item.from_price === lowest;
+
     return (
-      <ButtonDay key={ item.id } $available={ isAvailable } $selected={ step1[type] === item.day } onClick={ () => onClick(item, isAvailable) }>{ getFormattedShort(date, t) }</ButtonDay>
+      <ButtonDay key={ item.id } $available={ isAvailable } $selected={ step1[type] === item.day } onClick={ () => onClick(item, isAvailable) }>
+        { getFormattedShort(date, t) }
+
+        { isAvailable && item.from_price_display && (
+          <DayPrice $cheapest={ isCheapest }>{ item.from_price_display }</DayPrice>
+        ) }
+
+        { isCheapest && isAvailable && (
+          <Cheapest $selected={ step1[type] === item.day }>{ t('routes_order.step2.dates.cheapest') }</Cheapest>
+        ) }
+      </ButtonDay>
     );
   })
 

package/Found/Dates/styles.ts

@@ -18,12 +18,17 @@ export const Inner = styled.div`
 
 export const ButtonDay = styled.button<{ $available: boolean, $selected: boolean }>`
   flex: 1;
-  height: 26px;
-  line-height: 26px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  padding: 4px 0;
+  min-height: 26px;
   font-weight: 700;
   text-align: center;
   font-size: ${ props => props.theme.size.s };
-  border-radius: 100px;
+  border-radius: 12px;
   transition: all 0.3s ease;
 
   ${ props => !props.$available && css`
@@ -41,6 +46,35 @@ export const ButtonDay = styled.button<{ $available: boolean, $selected: boolean
   ` }
 `;
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Inherits colour from the selected/hovered day rather than setting its own,
+ * so the price stays readable once the parent flips to the primary fill.
+ */
+export const DayPrice = styled.span<{ $cheapest: boolean }>`
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: ${ props => props.$cheapest ? 700 : 400 };
+  opacity: .85;
+`;
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Success green reads well against the dark strip, but the SELECTED day
+ * fills with the brand primary - green on that yellow measured about 1.5:1,
+ * unreadable at 10px. On the selected day it inherits the button's own
+ * contrast colour and leans on weight instead of hue.
+ */
+export const Cheapest = styled.span<{ $selected: boolean }>`
+  display: block;
+  font-size: ${ props => props.theme.size.xxs };
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  font-weight: 700;
+  color: ${ props => props.$selected ? 'inherit' : props.theme.font.success };
+`;
+
 export const ContainerLoading = styled.div`
   height: 26px;
   text-align: center;

package/Found/Filters/Filters.tsx

@@ -0,0 +1,191 @@
+import { TFunction } from 'i18next';
+import { FaFilter } from 'react-icons/fa';
+import { AiOutlineCaretDown, AiOutlineCaretUp } from 'react-icons/ai';
+import { Container, Toggle, Count, Panel, Group, GroupTitle, Choice, ChoiceName, ChoiceMeta, Slider, Reset } from './styles';
+import { Refinement, Facets, FacetValue, BucketKey, EMPTY, isRefined } from '../refine';
+
+interface Props {
+  open: boolean
+  refinement: Refinement
+  facets: Facets
+  range: { min: number, max: number } | null
+  currency: string
+  t: TFunction<'common'>
+  onToggle: () => void
+  onChange: (refinement: Refinement) => void
+}
+
+type ListFacet = 'operators' | 'fromStops' | 'toStops' | 'features';
+
+/**
+ * Faceted filters for the results list.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Collapsed by default and rendered above the list rather than in a
+ * sidebar: the result cards are already a full-width layout that works on a
+ * phone, and carving a column out of it would have cost more than the
+ * filters are worth on the screen size most of our traffic arrives on.
+ *
+ * Counts come from `buildFacets`, which recomputes each facet against the
+ * OTHER active filters - so ticking one operator doesn't zero out every
+ * other operator's count and strand the user in a dead end.
+ */
+const Filters = ({ open, refinement, facets, range, currency, t, onToggle, onChange }: Props): JSX.Element => {
+  const active = [
+    refinement.operators.length,
+    refinement.buckets.length,
+    refinement.fromStops.length,
+    refinement.toStops.length,
+    refinement.features.length,
+    refinement.direct ? 1 : 0,
+    refinement.maxPrice === null ? 0 : 1
+  ].reduce((total, value) => total + value, 0);
+
+  const onList = (facet: ListFacet, value: number): void => {
+    const current = refinement[facet];
+
+    onChange({
+      ...refinement,
+      [facet]: current.includes(value) ? current.filter(item => item !== value) : [ ...current, value ]
+    });
+  };
+
+  const onBucket = (value: BucketKey): void => {
+    onChange({
+      ...refinement,
+      buckets: refinement.buckets.includes(value)
+        ? refinement.buckets.filter(item => item !== value)
+        : [ ...refinement.buckets, value ]
+    });
+  };
+
+  const list = (facet: ListFacet, title: string, values: FacetValue[]): JSX.Element | null => {
+    // a facet with a single value cannot narrow anything - showing it is
+    // just a checkbox that does nothing
+    if (values.length < 2) {
+      return null;
+    }
+
+    return (
+      <Group>
+        <GroupTitle>{ title }</GroupTitle>
+
+        { values.map(item => (
+          <Choice key={ item.value } $disabled={ item.count === 0 }>
+            <input
+              type="checkbox"
+              checked={ refinement[facet].includes(item.value) }
+              disabled={ item.count === 0 && !refinement[facet].includes(item.value) }
+              onChange={ () => onList(facet, item.value) }
+            />
+
+            <ChoiceName title={ item.label }>{ item.label }</ChoiceName>
+
+            <ChoiceMeta>
+              { item.count }{ item.fromDisplay ? ` · ${ item.fromDisplay }` : '' }
+            </ChoiceMeta>
+          </Choice>
+        )) }
+      </Group>
+    );
+  };
+
+  return (
+    <Container>
+      <Toggle type="button" $open={ open } aria-expanded={ open } onClick={ onToggle }>
+        <FaFilter />
+        { t('routes_order.step2.filters.title') }
+        { active > 0 && <Count>{ active }</Count> }
+        { open ? <AiOutlineCaretUp /> : <AiOutlineCaretDown /> }
+      </Toggle>
+
+      { open && (
+        <Panel className="box">
+          { facets.buckets.length > 1 && (
+            <Group>
+              <GroupTitle>{ t('routes_order.step2.filters.times') }</GroupTitle>
+
+              { facets.buckets.map(bucket => (
+                <Choice key={ bucket.value } $disabled={ bucket.count === 0 }>
+                  <input
+                    type="checkbox"
+                    checked={ refinement.buckets.includes(String(bucket.value) as BucketKey) }
+                    disabled={ bucket.count === 0 && !refinement.buckets.includes(String(bucket.value) as BucketKey) }
+                    onChange={ () => onBucket(String(bucket.value) as BucketKey) }
+                  />
+
+                  <ChoiceName>{ bucket.label }</ChoiceName>
+
+                  <ChoiceMeta>
+                    { bucket.count }{ bucket.fromDisplay ? ` · ${ bucket.fromDisplay }` : '' }
+                  </ChoiceMeta>
+                </Choice>
+              )) }
+            </Group>
+          ) }
+
+          { list('operators', t('routes_order.step2.filters.operators'), facets.operators) }
+
+          { facets.hasDirect && (
+            <Group>
+              <GroupTitle>{ t('routes_order.step2.filters.stops') }</GroupTitle>
+
+              <Choice $disabled={ facets.direct === 0 && !refinement.direct }>
+                <input
+                  type="checkbox"
+                  checked={ refinement.direct }
+                  disabled={ facets.direct === 0 && !refinement.direct }
+                  onChange={ () => onChange({ ...refinement, direct: !refinement.direct }) }
+                />
+
+                <ChoiceName>{ t('routes_order.step2.filters.direct') }</ChoiceName>
+
+                <ChoiceMeta>{ facets.direct }</ChoiceMeta>
+              </Choice>
+            </Group>
+          ) }
+
+          { list('fromStops', t('routes_order.step2.filters.from_stops'), facets.fromStops) }
+          { list('toStops', t('routes_order.step2.filters.to_stops'), facets.toStops) }
+          { list('features', t('routes_order.step2.filters.features'), facets.features) }
+
+          { range !== null && range.max > range.min && (
+            <Group>
+              <GroupTitle>{ t('routes_order.step2.filters.max_price') }</GroupTitle>
+
+              <ChoiceMeta>
+                { (refinement.maxPrice ?? range.max).toFixed(2) } { currency }
+              </ChoiceMeta>
+
+              <Slider
+                type="range"
+                min={ Math.floor(range.min) }
+                max={ Math.ceil(range.max) }
+                step={ 1 }
+                value={ refinement.maxPrice ?? Math.ceil(range.max) }
+                onChange={ event => {
+                  const value = Number(event.target.value);
+
+                  // dragging back to the top is the same as no filter at all,
+                  // so it clears rather than pinning a max nobody can exceed
+                  onChange({ ...refinement, maxPrice: value >= Math.ceil(range.max) ? null : value });
+                } }
+              />
+            </Group>
+          ) }
+
+          { isRefined(refinement) && (
+            <Group>
+              <Reset type="button" onClick={ () => onChange({ ...EMPTY, sort: refinement.sort }) }>
+                { t('routes_order.step2.filters.reset') }
+              </Reset>
+            </Group>
+          ) }
+        </Panel>
+      ) }
+    </Container>
+  );
+};
+
+export default Filters;

package/Found/Filters/styles.ts

@@ -0,0 +1,117 @@
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div`
+  margin-bottom: 15px;
+`;
+
+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 };
+  ` }
+`;
+
+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`
+  display: grid;
+  gap: 20px;
+  margin-top: 12px;
+  padding: 20px;
+
+  @media (min-width: 640px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (min-width: 1024px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+`;
+
+export const Group = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+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: center;
+  gap: 8px;
+  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;
+    }
+  ` }
+`;
+
+export const ChoiceName = styled.span`
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const ChoiceMeta = styled.span`
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.faded };
+  white-space: nowrap;
+`;
+
+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,17 @@
+import { useMemo, useState } 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 { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { FoundData } from '@autobusal/providers/types/routes';
+import { Refinement, BucketKey, fromParams, toParams, filterItems, buildFacets, priceRange, currencyOf, isRefined } from './refine';
 
 interface Props {
   type: 'departure' | '_return'
@@ -17,23 +24,107 @@ 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 => {
+  const [ searchParams, setSearchParams ] = useSearchParams();
+  const [ open, setOpen ] = useState<boolean>(false);
 
-    <Header t={ t } />
+  /**
+   * 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 ]);
 
-    <Orders
-      loading={ loading }
-      data={ data }
-      type={ type }
-      preferredStop={ Number(preferredStop) }
-      t={ t }
-      onSave={ onSave }
-    />
-  </>
-);
+  const items = useMemo(() => data ?? [], [ data ]);
 
-export default Found;
+  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);
+
+  // 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;
+
+  return (
+    <>
+      <Dates type={ type } step1={ step1 } t={ t } onSearch={ onSearch } />
+
+      { (data !== undefined && data.length > 0) && <Booking data={ data } step1={ step1 } t={ t } /> }
+
+      { showControls && (
+        <>
+          <Summary shown={ refined.length } total={ items.length } range={ range } t={ t }>
+            <Sort value={ refinement.sort } t={ t } onChange={ sort => onRefine({ ...refinement, sort }) } />
+          </Summary>
+
+          <Filters
+            open={ open }
+            refinement={ refinement }
+            facets={ facets }
+            range={ bounds }
+            currency={ currency }
+            t={ t }
+            onToggle={ () => setOpen(!open) }
+            onChange={ onRefine }
+          />
+
+          <Picks
+            items={ refined }
+            sort={ refinement.sort }
+            t={ t }
+            onSelect={ sort => onRefine({ ...refinement, sort }) }
+          />
+        </>
+      ) }
+
+      <Header t={ t } />
+
+      <Orders
+        loading={ loading }
+        data={ refined }
+        empty={ items.length === 0 }
+        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 }
+      />
+    </>
+  );
+};
+
+export default Found;