@autobusal/routes-order 1.8.0 → 1.9.3

package/Found/Found.tsx

@@ -1,10 +1,18 @@
+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 { Results, Sidebar, Listing } from '../styles';
 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 +25,115 @@ 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>
+
+          <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 }
+            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>
+    </>
+  );
+};
+
+export default Found;

package/Found/Group/Group.tsx

@@ -0,0 +1,66 @@
+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'
+  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, 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 }
+      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/Orders/Orders.tsx

@@ -1,20 +1,27 @@
 import { TFunction } from 'i18next';
 import { Inline } from '@autobusal/common';
 import Route from '../Route/Route';
+import Group from '../Group/Group';
 import { getFavorites, getNormal } from './utilities';
-import { Container, ContainerNotFound } from './styles';
+import { sortItems, groupItems, SortKey } from '../refine';
+import { Container, ContainerNotFound, Reset } from './styles';
 import { FoundData } from '@autobusal/providers/types/routes';
 
 interface Props {
   loading: boolean
-  data?: FoundData[]
+  data: FoundData[]
+  empty: boolean
+  refined: boolean
+  sort: SortKey
   type: 'departure' | '_return'
+  passengers: number
   preferredStop?: number
   t: TFunction<'common'>
+  onReset: () => void
   onSave: (data: FoundData) => void
 }
 
-const Orders = ({ loading, data, type, preferredStop, t, onSave }: Props): JSX.Element => {
+const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferredStop, t, onReset, onSave }: Props): JSX.Element => {
   if (loading) {
     return (
       <div className="box">
@@ -23,33 +30,67 @@ const Orders = ({ loading, data, type, preferredStop, t, onSave }: Props): JSX.E
     );
   }
 
-  // undefined means the search errored (e.g. same origin and destination) -
-  // show the not-found message instead of an empty shell
-  if (data === undefined || data.length === 0) {
+  // no results at all - the search itself found nothing (or errored, e.g.
+  // same origin and destination) - show the not-found message
+  if (empty) {
     return (
       <ContainerNotFound className="box">{ t('routes_order.step2.not_found') }</ContainerNotFound>
     );
   }
 
-  const favorites = getFavorites(type, data, preferredStop).map(item => (
-    <Route
-      key={ item.id }
-      type="favorite"
-      data={ item }
-      t={ t }
-      onSave={ onSave }
-    />
-  ));
-
-  const items = getNormal(type, data, preferredStop).map(item => (
-    <Route
-      key={ item.id }
-      type="normal"
-      data={ item }
-      t={ t }
-      onSave={ onSave }
-    />
-  ));
+  // Edited: Ferjolt Ozuni - Date: 2026-08-01
+  // Results exist but the user's own filters hid all of them. Saying
+  // "we couldn't find any tickets" there would be a lie that sends people
+  // away from a page that does have inventory - offer the way out instead.
+  if (data.length === 0 && refined) {
+    return (
+      <ContainerNotFound className="box">
+        { t('routes_order.step2.filters.empty') }
+
+        <Reset type="button" onClick={ onReset }>{ t('routes_order.step2.filters.reset') }</Reset>
+      </ContainerNotFound>
+    );
+  }
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-01
+   *
+   * Preferred-stop pinning stays the OUTER partition and each side is
+   * sorted within itself. Sorting the whole list first would have let
+   * "cheapest" quietly un-pin a stop the user deliberately saved.
+   *
+   * Grouping runs AFTER sorting: groupItems keeps input order, so a
+   * collapsed set of shuttles lands wherever its best member sorted to.
+   */
+  const render = (list: FoundData[], kind: 'favorite' | 'normal'): JSX.Element[] => (
+    groupItems(sortItems(list, sort)).map(group => (
+      group.length > 1
+        ? (
+          <Group
+            key={ group[0].id }
+            items={ group }
+            type={ kind }
+            passengers={ passengers }
+            t={ t }
+            onSave={ onSave }
+          />
+        )
+        : (
+          <Route
+            key={ group[0].id }
+            type={ kind }
+            data={ group[0] }
+            passengers={ passengers }
+            t={ t }
+            onSave={ onSave }
+          />
+        )
+    ))
+  );
+
+  const favorites = render(getFavorites(type, data, preferredStop), 'favorite');
+
+  const items = render(getNormal(type, data, preferredStop), 'normal');
 
   return (
     <Container>
@@ -59,4 +100,4 @@ const Orders = ({ loading, data, type, preferredStop, t, onSave }: Props): JSX.E
   );
 };
 
-export default Orders;
+export default Orders;

package/Found/Orders/styles.ts

@@ -7,6 +7,20 @@ export const Container = styled.div`
 `;
 
 export const ContainerNotFound = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
   text-align: center;
   color: ${ props => props.theme.font.faded };
+`;
+
+export const Reset = styled.button`
+  font-weight: 700;
+  color: ${ props => props.theme.primary.normal };
+  transition: all 0.2s ease;
+
+  &:hover {
+    opacity: .8;
+  }
 `;

package/Found/Picks/Picks.tsx

@@ -0,0 +1,68 @@
+import { TFunction } from 'i18next';
+import { Container, Pick, Label, Value, Meta } from './styles';
+import { SortKey, sortItems } from '../refine';
+import { FoundData } from '@autobusal/providers/types/routes';
+
+interface Props {
+  items: FoundData[]
+  sort: SortKey
+  t: TFunction<'common'>
+  onSelect: (sort: SortKey) => void
+}
+
+const OFFERED: SortKey[] = [ 'cheapest', 'fastest', 'recommended' ];
+
+/**
+ * Three cards naming the best trip on each axis.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * They answer "what are my options here" before anyone reads a single row,
+ * and clicking one applies that ordering to the list below - so the card is
+ * both an answer and a control.
+ *
+ * Computed from the FILTERED list, so a pick never advertises a trip the
+ * user's own filters have hidden.
+ *
+ * "Recommended" is merit-first - price rank plus duration rank, with paid
+ * subscription priority only breaking ties. See `recommend` in refine.ts.
+ */
+const Picks = ({ items, sort, t, onSelect }: Props): JSX.Element | null => {
+  // below a handful of results the cards just restate the list underneath
+  if (items.length < 3) {
+    return null;
+  }
+
+  return (
+    <Container>
+      { OFFERED.map(key => {
+        const best = sortItems(items, key)[0];
+
+        if (best === undefined) {
+          return null;
+        }
+
+        return (
+          <Pick
+            key={ key }
+            type="button"
+            $active={ sort === key }
+            aria-pressed={ sort === key }
+            onClick={ () => onSelect(key) }
+          >
+            <Label>{ t(`routes_order.step2.sort.${ key }`) }</Label>
+
+            <Value>{ best.price.display }</Value>
+
+            <Meta>
+              { best.duration !== '-' && `${ best.duration } · ` }
+              { best.operator.company }
+            </Meta>
+          </Pick>
+        );
+      }) }
+    </Container>
+  );
+};
+
+export default Picks;

package/Found/Picks/styles.ts

@@ -0,0 +1,55 @@
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div`
+  display: grid;
+  gap: 10px;
+  margin-bottom: 15px;
+  grid-template-columns: 1fr;
+
+  @media (min-width: 640px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+`;
+
+export const Pick = styled.button<{ $active: boolean }>`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  padding: 12px 15px;
+  text-align: left;
+  border-radius: ${ props => props.theme.borderRadius };
+  border: 1px solid ${ props => props.theme.inputs.border };
+  background: ${ props => props.theme.background.normal };
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: ${ props => props.theme.primary.normal };
+  }
+
+  ${ props => props.$active && css`
+    border-color: ${ props => props.theme.primary.normal };
+    box-shadow: inset 0 0 0 1px ${ props => props.theme.primary.normal };
+  ` }
+`;
+
+export const Label = styled.span`
+  font-size: ${ props => props.theme.size.xs };
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  font-weight: 700;
+  color: ${ props => props.theme.font.faded };
+`;
+
+export const Value = styled.strong`
+  font-size: ${ props => props.theme.size.l };
+`;
+
+export const Meta = styled.span`
+  overflow: hidden;
+  max-width: 100%;
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.faded };
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;

package/Found/Route/Route.tsx

@@ -1,9 +1,11 @@
 import { useState } from 'react';
 import { TFunction } from 'i18next';
 import { HiOutlineArrowNarrowRight, HiOutlineDocumentText } from 'react-icons/hi';
+import { BiHourglass } from 'react-icons/bi';
 import { RiBus2Line } from 'react-icons/ri';
+import { formatDuration } from '../refine';
 import { Button, RouteFeature, Policy } from '@autobusal/common';
-import { Container, SpecialOffer, FavoriteStop, Trip, Company, Location, Time, Price, LinkCompany, Details, Detail, ButtonPolicy, TitleDetail, LinkRoute, Features, TitleFeatures, FeaturesItems } from './styles';
+import { Container, SpecialOffer, FavoriteStop, Trip, Company, Location, Stop, Iso, Time, Price, PriceNotice, LinkCompany, Details, Detail, ButtonPolicy, TitleDetail, LinkRoute, Features, TitleFeatures, FeaturesItems } from './styles';
 import { FoundData } from '@autobusal/providers/types/routes';
 
 // neutral placeholder so a missing/broken operator logo doesn't render the
@@ -13,11 +15,16 @@ const LOGO_FALLBACK = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s
 interface Props {
   data: FoundData
   type: 'favorite' | 'normal'
+  passengers: number
   t: TFunction<'common'>
   onSave: (data: FoundData) => void
+  // Edited: Ferjolt Ozuni - Date: 2026-08-01
+  // Slot under the trip row, used by Group to hang a departure-time picker
+  // on a card that stands for several interchangeable departures.
+  children?: React.ReactNode
 }
 
-const Route = ({ data, type, t, onSave }: Props): JSX.Element => {
+const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Element => {
   const [ policy, setPolicy ] = useState<boolean>(false);
 
   const customs = Object.values(data.customs).join(', ');
@@ -49,23 +56,53 @@ const Route = ({ data, type, t, onSave }: Props): JSX.Element => {
         </Company>
 
         <Location>
-          <h2>{ data.locations.from.city.name } ({ data.locations.from.city.country?.iso_code }) { data.locations.from.departure }</h2>
-          <span>{ data.locations.from.stop?.name }</span>
+          <h2>
+            { data.locations.from.city.name }
+            <Iso>({ data.locations.from.city.country?.iso_code })</Iso>
+            { data.locations.from.departure }
+          </h2>
+
+          <Stop>{ data.locations.from.stop?.name }</Stop>
         </Location>
 
         <Time>
           <HiOutlineArrowNarrowRight />
-          <span>{ data.duration }</span>
+
+          { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
+               The clock is the point: this number sits between two real
+               departure times, and "08:30" gave nothing to distinguish a
+               trip length from a time of day. */ }
+          <span><BiHourglass />{ formatDuration(data.duration, t) }</span>
         </Time>
 
         <Location>
-          <h2>{ data.locations.to.city.name } ({ data.locations.to.city.country?.iso_code }) { data.locations.to.arrival }</h2>
-          <span>{ data.locations.to.stop?.name }</span>
+          <h2>
+            { data.locations.to.city.name }
+            <Iso>({ data.locations.to.city.country?.iso_code })</Iso>
+            { data.locations.to.arrival }
+          </h2>
+
+          <Stop>{ data.locations.to.stop?.name }</Stop>
         </Location>
 
         <Price>
           <strong>{ data.price.display }</strong>
 
+          { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
+               obtapi's price.value is the total for the WHOLE party
+               (adult * adults + child * children + baby * babies), not a
+               per-person fare - so this says how many people it covers
+               rather than the "per adult" line the competitors use, which
+               would be wrong here for any multi-passenger search. */ }
+          <PriceNotice>
+            { t(
+              passengers === 1
+                ? 'routes_order.step2.route.price_notice_single'
+                : 'routes_order.step2.route.price_notice_multiple',
+              { total: passengers }
+            ) }
+          </PriceNotice>
+
           <Button
             type="button"
             size="medium"
@@ -81,6 +118,8 @@ const Route = ({ data, type, t, onSave }: Props): JSX.Element => {
         </Price>
       </Trip>
 
+      { children }
+
       <Details>
         <Detail>
           <TitleDetail>{ t('routes_order.step2.route.name') }</TitleDetail>