@autobusal/routes-order 1.7.0 → 1.9.0

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

@@ -3,7 +3,7 @@ import { TFunction } from 'i18next';
 import { HiOutlineArrowNarrowRight, HiOutlineDocumentText } from 'react-icons/hi';
 import { RiBus2Line } from 'react-icons/ri';
 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, 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 +13,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(', ');
@@ -66,6 +71,21 @@ const Route = ({ data, type, t, onSave }: Props): JSX.Element => {
         <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 +101,8 @@ const Route = ({ data, type, t, onSave }: Props): JSX.Element => {
         </Price>
       </Trip>
 
+      { children }
+
       <Details>
         <Detail>
           <TitleDetail>{ t('routes_order.step2.route.name') }</TitleDetail>

package/Found/Route/styles.ts

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import { Link } from 'react-router-dom';
+import { logoBox } from '@autobusal/common/styles';
 
 export const Container = styled.div<{ $type: 'favorite' | 'normal' }>`
   position: relative;
@@ -125,14 +126,21 @@ export const Price = styled.div`
   }
 `;
 
+export const PriceNotice = styled.span`
+  margin-top: -6px;
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.faded };
+  text-align: center;
+`;
+
 export const LinkCompany = styled(Link)`
   display: block;
   max-width: 165px;
   margin: 0 auto;
 
   & > img {
-    display: block;
-    width: 100%;
+    ${ logoBox('100%', '60px') }
+
     border-radius: 8px;
   }
 `;

package/Found/Sort/Sort.tsx

@@ -0,0 +1,40 @@
+import { TFunction } from 'i18next';
+import { Container, Label, Options, Option } from './styles';
+import { SortKey, SORTS } from '../refine';
+
+interface Props {
+  value: SortKey
+  t: TFunction<'common'>
+  onChange: (value: SortKey) => void
+}
+
+/**
+ * Sort control for the results list.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Rendered as always-visible pills rather than a <select>: the options are
+ * few and short, and the point is that somebody who never opens a dropdown
+ * still sees that "cheapest" is one click away.
+ */
+const Sort = ({ value, t, onChange }: Props): JSX.Element => (
+  <Container>
+    <Label>{ t('routes_order.step2.sort.title') }</Label>
+
+    <Options>
+      { SORTS.map(sort => (
+        <Option
+          key={ sort }
+          type="button"
+          $active={ value === sort }
+          aria-pressed={ value === sort }
+          onClick={ () => onChange(sort) }
+        >
+          { t(`routes_order.step2.sort.${ sort }`) }
+        </Option>
+      )) }
+    </Options>
+  </Container>
+);
+
+export default Sort;

package/Found/Sort/styles.ts

@@ -0,0 +1,42 @@
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+`;
+
+export const Label = styled.span`
+  font-size: ${ props => props.theme.size.s };
+  font-weight: 700;
+  color: ${ props => props.theme.font.faded };
+`;
+
+export const Options = styled.div`
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+`;
+
+export const Option = styled.button<{ $active: boolean }>`
+  padding: 6px 14px;
+  font-size: ${ props => props.theme.size.s };
+  font-weight: 700;
+  white-space: nowrap;
+  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/Summary/Summary.tsx

@@ -0,0 +1,49 @@
+import { TFunction } from 'i18next';
+import { Container, Result, Total, Range } from './styles';
+
+interface Props {
+  shown: number
+  total: number
+  range: { minDisplay: string, maxDisplay: string } | null
+  t: TFunction<'common'>
+  children?: React.ReactNode
+}
+
+/**
+ * "8 of 10 trips - from 38.00 EUR to 70.00 EUR".
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Cheap to render and it answers the two questions somebody has before they
+ * start reading rows: is there enough choice here, and what will this cost
+ * me. The shown/total split also makes it obvious when a filter is hiding
+ * results, which is otherwise easy to forget after scrolling.
+ */
+const Summary = ({ shown, total, range, t, children }: Props): JSX.Element => (
+  <Container>
+    <Result>
+      { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
+           `total`, not `count` - i18next treats a `count` variable as a
+           request for plural resolution and would look for _one/_few/_other
+           suffixes we'd then owe in all fifteen languages, several of which
+           have more plural categories than English. */ }
+      <Total>
+        { shown === total
+          ? t('routes_order.step2.summary.count', { total })
+          : t('routes_order.step2.summary.filtered', { shown, total }) }
+      </Total>
+
+      { range !== null && (
+        <Range>
+          { range.minDisplay === range.maxDisplay
+            ? range.minDisplay
+            : t('routes_order.step2.summary.range', { min: range.minDisplay, max: range.maxDisplay }) }
+        </Range>
+      ) }
+    </Result>
+
+    { children }
+  </Container>
+);
+
+export default Summary;

package/Found/Summary/styles.ts

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 15px;
+
+  @media (min-width: 1024px) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+`;
+
+export const Result = styled.div`
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+`;
+
+export const Total = styled.strong`
+  font-size: ${ props => props.theme.size.l };
+`;
+
+export const Range = styled.span`
+  font-size: ${ props => props.theme.size.s };
+  color: ${ props => props.theme.font.faded };
+`;