@autobusal/routes-order 1.9.0 → 1.9.1

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;
 `;

package/Found/Orders/Orders.tsx

@@ -2,10 +2,13 @@ import { TFunction } from 'i18next';
 import { Inline } from '@autobusal/common';
 import Route from '../Route/Route';
 import Group from '../Group/Group';
+import Empty from '../Empty/Empty';
 import { getFavorites, getNormal } from './utilities';
 import { sortItems, groupItems, SortKey } from '../refine';
 import { Container, ContainerNotFound, Reset } from './styles';
 import { FoundData } from '@autobusal/providers/types/routes';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+import { AlternativesData } from '../../types';
 
 interface Props {
   loading: boolean
@@ -16,12 +19,15 @@ interface Props {
   type: 'departure' | '_return'
   passengers: number
   preferredStop?: number
+  step1: RoutesSearchForm
+  alternatives?: AlternativesData
+  alternativesLoading: boolean
   t: TFunction<'common'>
   onReset: () => void
   onSave: (data: FoundData) => void
 }
 
-const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferredStop, t, onReset, onSave }: Props): JSX.Element => {
+const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferredStop, step1, alternatives, alternativesLoading, t, onReset, onSave }: Props): JSX.Element => {
   if (loading) {
     return (
       <div className="box">
@@ -30,11 +36,14 @@ const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferr
     );
   }
 
-  // no results at all - the search itself found nothing (or errored, e.g.
-  // same origin and destination) - show the not-found message
+  // Edited: Ferjolt Ozuni - Date: 2026-08-01
+  // No results at all - the search itself found nothing (or errored, e.g.
+  // same origin and destination). Rather than a bare apology, offer the
+  // nearby origins, nearby destinations and other dates that obtapi has
+  // confirmed actually have seats.
   if (empty) {
     return (
-      <ContainerNotFound className="box">{ t('routes_order.step2.not_found') }</ContainerNotFound>
+      <Empty type={ type } step1={ step1 } data={ alternatives } loading={ alternativesLoading } t={ t } />
     );
   }
 
@@ -62,6 +71,16 @@ const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferr
    * Grouping runs AFTER sorting: groupItems keeps input order, so a
    * collapsed set of shuttles lands wherever its best member sorted to.
    */
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-05
+   *
+   * The day these results board on, for the cards that arrive on a later
+   * one. It is the date that was SEARCHED - the same value the strip above
+   * highlights - rather than anything the server sends back, so the two can
+   * never disagree about which day a card is for.
+   */
+  const date = step1[type];
+
   const render = (list: FoundData[], kind: 'favorite' | 'normal'): JSX.Element[] => (
     groupItems(sortItems(list, sort)).map(group => (
       group.length > 1
@@ -70,6 +89,7 @@ const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferr
             key={ group[0].id }
             items={ group }
             type={ kind }
+            date={ date }
             passengers={ passengers }
             t={ t }
             onSave={ onSave }
@@ -80,6 +100,7 @@ const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferr
             key={ group[0].id }
             type={ kind }
             data={ group[0] }
+            date={ date }
             passengers={ passengers }
             t={ t }
             onSave={ onSave }

package/Found/Picks/Picks.tsx

@@ -1,5 +1,5 @@
 import { TFunction } from 'i18next';
-import { Container, Pick, Label, Value, Meta } from './styles';
+import { Container, Pick, Label, Value, Meta, Company } from './styles';
 import { SortKey, sortItems } from '../refine';
 import { FoundData } from '@autobusal/providers/types/routes';
 
@@ -55,8 +55,15 @@ const Picks = ({ items, sort, t, onSelect }: Props): JSX.Element | null => {
             <Value>{ best.price.display }</Value>
 
             <Meta>
-              { best.duration !== '-' && `${ best.duration } · ` }
-              { best.operator.company }
+              { best.duration !== '-' && best.duration }
+
+              { /* The operator's name is hidden on a phone - see Company in
+                   styles. The separator goes with it, or a card reads
+                   "4h ·" with nothing after the dot. */ }
+              <Company>
+                { best.duration !== '-' && ' · ' }
+                { best.operator.company }
+              </Company>
             </Meta>
           </Pick>
         );

package/Found/Picks/styles.ts

@@ -1,13 +1,22 @@
 import styled, { css } from 'styled-components';
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Three across at every width, including phones, where these used to stack.
+ * Stacked, they cost three full bands of vertical space before a single
+ * result - so the thing that exists to summarise the list was pushing the
+ * list itself off the screen. Side by side they are a strip, and comparing
+ * three numbers is what they are for; a column of three is a list to read.
+ */
 export const Container = styled.div`
   display: grid;
-  gap: 10px;
+  gap: 6px;
   margin-bottom: 15px;
-  grid-template-columns: 1fr;
+  grid-template-columns: repeat(3, 1fr);
 
   @media (min-width: 640px) {
-    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
   }
 `;
 
@@ -15,9 +24,15 @@ export const Pick = styled.button<{ $active: boolean }>`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 4px;
-  padding: 12px 15px;
+  gap: 2px;
+  padding: 8px 9px;
   text-align: left;
+  min-width: 0;
+
+  @media (min-width: 640px) {
+    gap: 4px;
+    padding: 12px 15px;
+  }
   border-radius: ${ props => props.theme.borderRadius };
   border: 1px solid ${ props => props.theme.inputs.border };
   background: ${ props => props.theme.background.normal };
@@ -34,22 +49,58 @@ export const Pick = styled.button<{ $active: boolean }>`
 `;
 
 export const Label = styled.span`
-  font-size: ${ props => props.theme.size.xs };
+  max-width: 100%;
+  overflow: hidden;
+  font-size: calc(${ props => props.theme.size.xs } - 1px);
   text-transform: uppercase;
-  letter-spacing: .5px;
+  letter-spacing: 0;
   font-weight: 700;
   color: ${ props => props.theme.font.faded };
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  @media (min-width: 640px) {
+    font-size: ${ props => props.theme.size.xs };
+    letter-spacing: .5px;
+  }
 `;
 
 export const Value = styled.strong`
-  font-size: ${ props => props.theme.size.l };
+  font-size: ${ props => props.theme.size.m };
+
+  @media (min-width: 640px) {
+    font-size: ${ props => props.theme.size.l };
+  }
 `;
 
 export const Meta = styled.span`
   overflow: hidden;
   max-width: 100%;
-  font-size: ${ props => props.theme.size.xs };
+  font-size: calc(${ props => props.theme.size.xs } - 1px);
   color: ${ props => props.theme.font.faded };
   text-overflow: ellipsis;
   white-space: nowrap;
+
+  @media (min-width: 640px) {
+    font-size: ${ props => props.theme.size.xs };
+  }
+`;
+
+/**
+ * The operator's name, dropped on a phone.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * At a third of a 375px screen each card gets about 110px, and a company
+ * name is the one thing here that will not fit in it - it would ellipsis to
+ * two or three characters, which is noise rather than information. The
+ * duration stays, because it is short and it is the number being compared;
+ * the name is one line down in the results anyway.
+ */
+export const Company = styled.span`
+  display: none;
+
+  @media (min-width: 640px) {
+    display: inline;
+  }
 `;

package/Found/Route/Route.tsx

@@ -1,9 +1,13 @@
 import { useState } from 'react';
 import { TFunction } from 'i18next';
-import { HiOutlineArrowNarrowRight, HiOutlineDocumentText } from 'react-icons/hi';
+import { HiOutlineArrowNarrowRight, HiOutlineDocumentText, HiChevronDown, HiChevronUp } from 'react-icons/hi';
+import { BiHourglass } from 'react-icons/bi';
 import { RiBus2Line } from 'react-icons/ri';
-import { Button, RouteFeature, Policy } from '@autobusal/common';
-import { Container, SpecialOffer, FavoriteStop, Trip, Company, Location, Time, Price, PriceNotice, LinkCompany, Details, Detail, ButtonPolicy, TitleDetail, LinkRoute, Features, TitleFeatures, FeaturesItems } from './styles';
+import { MdOutlineAltRoute } from 'react-icons/md';
+import { formatDuration, splitPrice } from '../refine';
+import { Button, RouteFeature, Information, Rating } from '@autobusal/common';
+import { createDate, getDayParts } from '@autobusal/utilities';
+import { Container, ButtonDetails, SpecialOffer, FavoriteStop, Trip, Company, Location, Stop, Iso, Time, Price, Amount, Decimals, Currency, PriceNotice, LinkCompany, CodeCompany, Details, Detail, ButtonPolicy, TitleDetail, FeaturesItems, Leaves, Day, NextDay } from './styles';
 import { FoundData } from '@autobusal/providers/types/routes';
 
 // neutral placeholder so a missing/broken operator logo doesn't render the
@@ -13,6 +17,11 @@ const LOGO_FALLBACK = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s
 interface Props {
   data: FoundData
   type: 'favorite' | 'normal'
+  // Edited: Ferjolt Ozuni - Date: 2026-08-05
+  // The searched boarding day, dd/mm/yyyy. Only used to print the two dates
+  // on an overnight trip - a card that arrives the same day says nothing
+  // about days at all, which is why this can be absent.
+  date?: string
   passengers: number
   t: TFunction<'common'>
   onSave: (data: FoundData) => void
@@ -22,14 +31,24 @@ interface Props {
   children?: React.ReactNode
 }
 
-const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Element => {
-  const [ policy, setPolicy ] = useState<boolean>(false);
+const Route = ({ data, type, date, passengers, t, onSave, children }: Props): JSX.Element => {
+  const [ information, setInformation ] = useState<boolean>(false);
+
+  // Edited: Ferjolt Ozuni - Date: 2026-08-03
+  // Closed to begin with. Amenities, route code, transit and policies are
+  // supporting detail on a row somebody is scanning, and four bands of it
+  // per result pushed the next result off a phone screen. The content stays
+  // in the DOM either way (see Details in styles) so the prerendered
+  // snapshot a crawler reads is unchanged.
+  const [ details, setDetails ] = useState<boolean>(false);
 
   const customs = Object.values(data.customs).join(', ');
   const transiting = Object.values(data.transiting).join(', ');
 
+  const price = splitPrice(data.price.display);
+
   const features = data.trip.features_data.map((item, index) => (
-    <RouteFeature key={ index } item={ item } />
+    <RouteFeature key={ index } item={ item } compact />
   ));
 
   // Edited: Ferjolt Ozuni - Date: 2026-07-27
@@ -43,33 +62,161 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
     ? `${ import.meta.env.VITE_API_OBT }/api/external/go/${ data.external.offer_id }`
     : undefined;
 
+  // Edited: Ferjolt Ozuni - Date: 2026-08-03
+  // Only today's results carry this - obtapi sends null on every other date,
+  // so there is no "in 26 days" badge to suppress here.
+  const leaves = data.departs_in ?? null;
+
+  const soon = leaves !== null && leaves < 60;
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-05
+   *
+   * Overnight trips. "22:30 -> 06:00" is the one thing on this card that
+   * can be read as the exact opposite of what it means - a seven-and-a-half
+   * hour journey looks like a sixteen-hour one run backwards - and the
+   * duration beside it does not fix that, because nobody reads a duration
+   * to work out a date. So when the coach arrives on a later day, BOTH ends
+   * print their day and the arrival carries a +1.
+   *
+   * Nothing is added to a same-day card: a date under every arrival on a
+   * page of same-day results is noise that makes the overnight ones stop
+   * standing out, which is the only reason any of this is here.
+   *
+   * The offset comes from the timetable's own midnight markers, computed
+   * server-side (Libraries\Routes\Search\Locations::offset) - it is not
+   * inferred from "arrival looks earlier than departure", which is wrong
+   * for exactly the cross-border journeys where the two ends keep
+   * different clocks.
+   */
+  const offset = data.arrival_offset ?? 0;
+
+  const days = ((): { departure: string, arrival: string } | null => {
+    if (offset <= 0 || !date) {
+      return null;
+    }
+
+    const departs = createDate(date);
+
+    // an invalid or unexpected date string must not print "NaN Invalid" on
+    // a result card - showing no day is better than showing a wrong one
+    if (Number.isNaN(departs.getTime())) {
+      return null;
+    }
+
+    const arrives = new Date(departs);
+    arrives.setUTCDate(arrives.getUTCDate() + offset);
+
+    const format = (value: Date): string => {
+      const parts = getDayParts(value, t as any);
+
+      return `${ parts.day } ${ parts.month }`;
+    };
+
+    return { departure: format(departs), arrival: format(arrives) };
+  })();
+
   return (
     <Container className="box" $type={ type }>
       { data.price.offer === true && <SpecialOffer>{ t('routes_order.step2.route.offer') }</SpecialOffer> }
       { type === 'favorite' && <FavoriteStop>{ t('routes_order.step2.route.preferred_stop') }</FavoriteStop> }
 
+      { leaves !== null && (
+        <Leaves $soon={ soon }>
+          { leaves < 60
+            ? t('routes_order.step2.route.leaves_minutes', { minutes: leaves })
+            : t('routes_order.step2.route.leaves_hours', { hours: Math.floor(leaves / 60), minutes: leaves % 60 }) }
+        </Leaves>
+      ) }
+
       <Trip>
         <Company>
-          <LinkCompany to={ bookOnUrl ?? data.operator.link } target="_blank" rel="noopener noreferrer" title={ data.operator.company }><img src={ data.operator.logo_url || LOGO_FALLBACK } onError={ (e) => { e.currentTarget.onerror = null; e.currentTarget.src = LOGO_FALLBACK; } } alt={ data.operator.company } /></LinkCompany>
+          <LinkCompany to={ bookOnUrl ?? data.operator.link } target="_blank" rel="noopener noreferrer" title={ data.operator.display_name }><img src={ data.operator.logo_url || LOGO_FALLBACK } onError={ (e) => { e.currentTarget.onerror = null; e.currentTarget.src = LOGO_FALLBACK; } } alt={ data.operator.display_name } /></LinkCompany>
+
+          { /* Edited: Ferjolt Ozuni - Date: 2026-08-03
+               The OPERATOR's rating rather than this route's: a single route
+               rarely has enough published reviews to clear the display
+               threshold, and a card with a rating beats one without. Renders
+               nothing when there is no rating yet, which is why a brand-new
+               operator does not look like a badly rated one. */ }
+          <Rating rating={ data.operator.rating } size="small" t={ t } />
+
+          { /* Edited: Ferjolt Ozuni - Date: 2026-08-03
+               The route code, moved up out of the collapsed details. It is an
+               identifier of the same kind as the logo above it, and moving it
+               here frees a slot in the details row for things that actually
+               need explaining - customs on a cross-border run, for one. */ }
+          <CodeCompany to={ bookOnUrl ?? data.link } target="_blank" rel="noopener noreferrer" title={ t('routes_order.step2.route.name') }>
+            <MdOutlineAltRoute />
+            { data.code }
+          </CodeCompany>
         </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 }
+            { /* Edited: Ferjolt Ozuni - Date: 2026-08-03
+                 REAL SPACES, and they are load-bearing. JSX drops the
+                 whitespace around a newline, so city, country and time were
+                 concatenated into one unbreakable token - "Thessaloniki(GRC)
+                 06:00" measured 215px inside a 165px column and painted 50px
+                 into the price beside it. Nothing about the widths could fix
+                 that on its own: with nowhere to wrap, text will always
+                 overflow eventually. */ }
+            { ' ' }
+            <Iso>({ data.locations.from.city.country?.iso_code })</Iso>
+            { ' ' }
+            { data.locations.from.departure }
+          </h2>
+
+          { days && <Day>{ days.departure }</Day> }
+
+          <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 }
+            { /* Edited: Ferjolt Ozuni - Date: 2026-08-03
+                 REAL SPACES, and they are load-bearing. JSX drops the
+                 whitespace around a newline, so city, country and time were
+                 concatenated into one unbreakable token - "Thessaloniki(GRC)
+                 06:00" measured 215px inside a 165px column and painted 50px
+                 into the price beside it. Nothing about the widths could fix
+                 that on its own: with nowhere to wrap, text will always
+                 overflow eventually. */ }
+            { ' ' }
+            <Iso>({ data.locations.to.city.country?.iso_code })</Iso>
+            { ' ' }
+            { data.locations.to.arrival }
+            { offset > 0 && (
+              <NextDay title={ t('routes_order.step2.route.next_day', { count: offset }) }>
+                +{ offset }
+              </NextDay>
+            ) }
+          </h2>
+
+          { days && <Day>{ days.arrival }</Day> }
+
+          <Stop>{ data.locations.to.stop?.name }</Stop>
         </Location>
 
         <Price>
-          <strong>{ data.price.display }</strong>
+          <Amount>
+            { price.whole }
+            { price.decimals !== null && <Decimals>{ price.decimals }</Decimals> }
+            { price.currency !== null && <Currency>{ price.currency }</Currency> }
+          </Amount>
 
           { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
                obtapi's price.value is the total for the WHOLE party
@@ -93,7 +240,7 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
             text={
               <>
                 <RiBus2Line />
-                { isExternalRedirect ? t('routes_order.step2.route.book_on', { provider: data.operator.company }) : t('routes_order.step2.route.select') }
+                { isExternalRedirect ? t('routes_order.step2.route.book_on', { provider: data.operator.display_name }) : t('routes_order.step2.route.select') }
               </>
             }
             onClick={ () => (isExternalRedirect && bookOnUrl ? window.open(bookOnUrl, '_blank', 'noopener,noreferrer') : onSave(data)) }
@@ -103,11 +250,30 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
 
       { children }
 
-      <Details>
-        <Detail>
-          <TitleDetail>{ t('routes_order.step2.route.name') }</TitleDetail>
-          <LinkRoute to={ bookOnUrl ?? data.link } target="_blank" rel="noopener noreferrer">{ data.code }</LinkRoute>
-        </Detail>
+      <ButtonDetails
+        type="button"
+        aria-expanded={ details }
+        onClick={ () => setDetails(!details) }
+      >
+        { details ? <HiChevronUp /> : <HiChevronDown /> }
+        { t('routes_order.step2.route.details') }
+      </ButtonDetails>
+
+      <Details $open={ details }>
+        { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
+             Amenities were a separate full-width block under the card.
+             They are the same kind of thing as route, transit and policies
+             - supporting detail - so they join that row as the first
+             column, which is one fewer band of vertical space per result. */ }
+        { data.trip.features_data.length > 0 && (
+          <Detail>
+            <TitleDetail>{ t('routes_order.step2.route.features') }</TitleDetail>
+
+            <FeaturesItems>
+              { features }
+            </FeaturesItems>
+          </Detail>
+        ) }
 
         { customs && (
           <Detail>
@@ -125,27 +291,17 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
 
         { !data.external && (
           <Detail>
-            <TitleDetail>{ t('routes_order.step2.route.policies.title') }</TitleDetail>
+            <TitleDetail>{ t('routes_order.step2.route.information.title') }</TitleDetail>
 
-            <ButtonPolicy type="button" onClick={ () => setPolicy(true) }>
+            <ButtonPolicy type="button" onClick={ () => setInformation(true) }>
               <HiOutlineDocumentText />
-              { t('routes_order.step2.route.policies.view') }
+              { t('routes_order.step2.route.information.view') }
             </ButtonPolicy>
           </Detail>
         ) }
       </Details>
 
-      { data.trip.features_data.length > 0 && (
-        <Features>
-          <TitleFeatures>{ t('routes_order.step2.route.features') }</TitleFeatures>
-
-          <FeaturesItems>
-            { features }
-          </FeaturesItems>
-        </Features>
-      ) }
-
-      { policy && typeof data.id === 'number' && <Policy id={ data.id } t={ t } onClose={ () => setPolicy(false) } /> }
+      { information && typeof data.id === 'number' && <Information id={ data.id } t={ t } onClose={ () => setInformation(false) } /> }
     </Container>
   );
 };