@autobusal/routes-order 1.9.0 → 1.11.1

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, splitPrice } from '../refine';
 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 { Container, SpecialOffer, FavoriteStop, Trip, Company, Location, Stop, Iso, Time, Price, Amount, Decimals, Currency, PriceNotice, LinkCompany, Details, Detail, ButtonPolicy, TitleDetail, LinkRoute, FeaturesItems } from './styles';
 import { FoundData } from '@autobusal/providers/types/routes';
 
 // neutral placeholder so a missing/broken operator logo doesn't render the
@@ -28,8 +30,10 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
   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
@@ -54,22 +58,41 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
         </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>
+          <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
@@ -104,6 +127,21 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
       { children }
 
       <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>
+        ) }
+
         <Detail>
           <TitleDetail>{ t('routes_order.step2.route.name') }</TitleDetail>
           <LinkRoute to={ bookOnUrl ?? data.link } target="_blank" rel="noopener noreferrer">{ data.code }</LinkRoute>
@@ -135,16 +173,6 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
         ) }
       </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) } /> }
     </Container>
   );

package/Found/Route/styles.ts

@@ -64,26 +64,67 @@ export const Company = styled.div`
   flex-basis: 100%;
 
   @media (min-width: 1024px) {
-    flex-basis: 185px;
+    flex: 0 0 185px;
   }
 `;
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * min-width: 0 is what makes `flex: 1` mean "an equal share". Without it
+ * the default min-width:auto stops a column shrinking below its content,
+ * so the arrival column (long city plus a long stop name) grew to 215px
+ * while the departure column got 155px - the two halves of the same row
+ * were different widths, and no fixed header could ever line up with
+ * both. It also stops one long stop name stealing width from the other
+ * side of the card.
+ */
 export const Location = styled.div`
   flex: 1;
+  min-width: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 5px;
+  gap: 3px;
   text-align: center;
 
   & > h2 {
     margin-bottom: 0;
   }
+`;
 
-  & > span {
-    font-weight: 700;
-    color: ${ props => props.theme.font.faded };
-  }
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * The stop name is supporting detail, not a heading. At the same 16px as
+ * body copy it competed with the city above it; a step down lets the eye
+ * land on the city first and read the stop only when it needs to.
+ */
+export const Stop = styled.span`
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: 700;
+  line-height: 1.3;
+  color: ${ props => props.theme.font.faded };
+`;
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * The country code comes out of the database lowercase ("alb", "grc").
+ * An ISO country code is by definition upper case, so it is cased here at
+ * render time rather than left to the data - every consumer would otherwise
+ * have to remember to do it. Set smaller and muted so it qualifies the city
+ * without competing with it.
+ */
+export const Iso = styled.span`
+  // JSX drops the literal spaces around this element, so the gap on either
+  // side of "(ALB)" is this margin's job, not whitespace's
+  margin: 0 5px;
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  color: ${ props => props.theme.font.faded };
 `;
 
 export const Time = styled.div`
@@ -98,15 +139,26 @@ export const Time = styled.div`
   }
 
   & > span {
-    display: block;
-    padding: 3px 10px;
-    font-size: ${ props => props.theme.size.l };
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 3px 12px;
+    white-space: nowrap;
+    font-size: ${ props => props.theme.size.m };
     background: ${ props => props.theme.background.neutral };
     border-radius: 100px;
   }
 
+  // the hourglass is a hint, not a heading - the big arrow above already
+  // owns the visual weight in this column
+  & > span > svg {
+    flex-shrink: 0;
+    font-size: ${ props => props.theme.size.m };
+    opacity: .7;
+  }
+
   @media (min-width: 640px) {
-    flex-basis: 120px;
+    flex: 0 0 120px;
   }
 `;
 
@@ -114,21 +166,52 @@ export const Price = styled.div`
   flex-basis: 100%;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
   align-items: center;
 
-  & > strong {
-    font-size: ${ props => props.theme.size.xxl };
-  }
-
   @media (min-width: 768px) {
-    flex-basis: 165px;
+    flex: 0 0 165px;
   }
 `;
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * The decimals ride as superscript rather than at full size. On a fare
+ * board the cents are almost never what anyone is comparing, and at the
+ * headline size they were taking a third of the width of the widest thing
+ * on the card. The line-height is pinned to 1 so the shrunk decimals do
+ * not leave a gap under the row.
+ */
+export const Amount = styled.strong`
+  display: flex;
+  align-items: flex-start;
+  line-height: 1;
+  font-size: ${ props => props.theme.size.xxl };
+`;
+
+export const Decimals = styled.span`
+  margin-left: 1px;
+  font-size: ${ props => props.theme.size.s };
+  line-height: 1;
+`;
+
+export const Currency = styled.span`
+  margin-left: 4px;
+  align-self: center;
+  font-size: ${ props => props.theme.size.m };
+`;
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Tucked up against the price it qualifies, which reads as one unit and
+ * frees the vertical space the Select button needs.
+ */
 export const PriceNotice = styled.span`
-  margin-top: -6px;
-  font-size: ${ props => props.theme.size.xs };
+  margin-top: -4px;
+  font-size: ${ props => props.theme.size.xxs };
+  line-height: 1.25;
   color: ${ props => props.theme.font.faded };
   text-align: center;
 `;
@@ -195,20 +278,15 @@ export const ButtonPolicy = styled.button`
   }
 `;
 
-export const Features = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-export const TitleFeatures = styled.h6`
-  font-size: ${ props => props.theme.size.s };
-  margin-bottom: 8px;
-`;
-
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Left-aligned now that this sits inside a Detail column alongside route,
+ * transit and policies, rather than centred in a full-width band of its
+ * own under the card.
+ */
 export const FeaturesItems = styled.div`
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
-  justify-content: center;
+  gap: 6px;
 `;

package/Found/Summary/Summary.tsx

@@ -20,7 +20,7 @@ interface Props {
  * results, which is otherwise easy to forget after scrolling.
  */
 const Summary = ({ shown, total, range, t, children }: Props): JSX.Element => (
-  <Container>
+  <Container className="box">
     <Result>
       { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
            `total`, not `count` - i18next treats a `count` variable as a

package/Found/Summary/styles.ts

@@ -1,11 +1,23 @@
 import styled from 'styled-components';
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Carries the `box` surface (padding is overridden to something tighter -
+ * this is a bar, not a panel) so the count and the sort control sit on the
+ * same card background as everything else on the page rather than floating
+ * loose on the page background.
+ */
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-bottom: 15px;
 
+  &.box {
+    padding: 12px 15px;
+  }
+
   @media (min-width: 1024px) {
     flex-direction: row;
     align-items: center;

package/Found/refine.ts

@@ -1,3 +1,4 @@
+import { TFunction } from 'i18next';
 import { FoundData } from '@autobusal/providers/types/routes';
 
 /**
@@ -97,6 +98,74 @@ export const durationOf = (item: FoundData): number | null => {
   return minutesOf(item.duration);
 };
 
+/**
+ * Turn obtapi's "HH:MM" trip length into something that reads as a
+ * duration rather than a clock time.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * "08:30" sitting between two departure times is genuinely ambiguous -
+ * nothing about it says "eight and a half hours" rather than "half past
+ * eight", and on this card it sits directly between 09:00 and 16:30. The
+ * unit labels come from the translation files because "h"/"m" are not
+ * universal; Greek and the Cyrillic locales carry their own.
+ *
+ * The "-" sentinel (obtapi could not compute a duration) passes straight
+ * through - it must not become "0h 0m", which would read as a real answer.
+ */
+export const formatDuration = (duration: string, t: TFunction<'common'>): string => {
+  if (!duration || duration === '-') {
+    return duration;
+  }
+
+  const total = minutesOf(duration);
+
+  const hours = Math.floor(total / 60);
+  const minutes = total % 60;
+
+  const pad = (value: number): string => (value <= 9 ? `0${ value }` : String(value));
+
+  const parts: string[] = [];
+
+  if (hours > 0) {
+    parts.push(t('routes_order.step2.route.duration.hours', { value: pad(hours) }));
+  }
+
+  // a trip under an hour still needs a number, and so does an exact
+  // number of hours - but "08h 00m" is noise, so zero minutes are dropped
+  if (minutes > 0 || hours === 0) {
+    parts.push(t('routes_order.step2.route.duration.minutes', { value: pad(minutes) }));
+  }
+
+  return parts.join(' ');
+};
+
+/**
+ * Split obtapi's formatted price into its parts so the decimals can be set
+ * as superscript.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * obtapi sends a rendered string ("1,048.00 EUR" - number_format, so the
+ * thousands separator is a comma and the decimal point a dot). Splitting it
+ * here rather than reformatting from `price.value` keeps the label's own
+ * currency and formatting as the single source of truth; we only decide how
+ * big each piece is drawn.
+ *
+ * Anything that does not match the expected shape is returned whole, so an
+ * unusual currency format degrades to today's rendering instead of being
+ * mangled.
+ */
+export const splitPrice = (display: string): { whole: string, decimals: string | null, currency: string | null } => {
+  const match = /^(.+)\.(\d{2})\s+(\S+)$/.exec(display ?? '');
+
+  if (match === null) {
+    return { whole: display ?? '', decimals: null, currency: null };
+  }
+
+  return { whole: match[1], decimals: match[2], currency: match[3] };
+};
+
 export const bucketOf = (item: FoundData): BucketKey => {
   const hour = Math.floor(departureOf(item) / 60);
 

package/RoutesOrder.tsx

@@ -2,12 +2,13 @@ import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { TFunction } from 'i18next';
 import { Meta } from '@autobusal/common';
+import RoutesSearch from '@autobusal/routes-search';
 import { useGetSuggestions } from '@autobusal/routes-search/services';
+import { SearchAgain } from './styles';
 import Step1 from './Step1/Step1';
 import Step2 from './Step2';
 import Step3 from './Step3';
-import Step4 from './Step4/Step4';
-import Step5 from './Step5/Step5';
+import Checkout from './Checkout/Checkout';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { FoundData } from '@autobusal/providers/types/routes';
 import { PersonData } from '@autobusal/providers/types/persons';
@@ -80,11 +81,6 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
     setCurrent(4);
   };
 
-  const onStep4 = (data: PersonData): void => {
-    setStep4(data);
-    setCurrent(5);
-  };
-
   const onBack = (step: number): void => {
     setCurrent(step);
   };
@@ -92,11 +88,48 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
   const showStep1 = current === 1;
   const showStep2 = current === 2 && step1 !== undefined;
   const showStep3 = current === 3 && step1 !== undefined && step2 !== undefined;
-  const showStep4 = current === 4 && step1 !== undefined && step2 !== undefined;
-  const showStep5 = current === 5 && step1 !== undefined && step2 !== undefined && step4 !== undefined;
+
+  // Edited: Ferjolt Ozuni - Date: 2026-08-01
+  // Step 4 is now the whole of the rest: passenger details and payment on
+  // one screen, so there is no step 5 and no intermediate handoff of
+  // passenger data between them.
+  const showCheckout = current === 4 && step1 !== undefined && step2 !== undefined;
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-01
+   *
+   * The search form stays on screen while the user is choosing a route.
+   * Adjusting a date or a city used to mean "Back to Search", which threw
+   * away the results and any filters with them.
+   *
+   * Only on the route-selection screens: past that point a passenger has
+   * committed to a specific trip, and quietly re-running the search under
+   * them would discard passenger details they had already typed.
+   *
+   * onStep1 is the same handler Step1 uses, so submitting here re-runs the
+   * search and lands back on step 2 exactly as a fresh search would.
+   */
+  const showSearchAgain = (current === 2 || current === 3) && step1 !== undefined;
 
   return (
     <Meta title={ title } description={ description }>
+      { showSearchAgain && step1 !== undefined && (
+        <SearchAgain className="box">
+          <RoutesSearch
+            type={ step1.type ?? 'departure' }
+            from={ `${ step1.from }${ step1.stop_from ? `:${ step1.stop_from }` : '' }` }
+            to={ `${ step1.to }${ step1.stop_to ? `:${ step1.stop_to }` : '' }` }
+            departure={ step1.departure }
+            _return={ step1._return ?? '' }
+            adultsNo={ step1.adults }
+            childrenNo={ step1.children }
+            babiesNo={ step1.babies }
+            t={ t }
+            onSearch={ onStep1 }
+          />
+        </SearchAgain>
+      ) }
+
       { showStep1 && (
         <Step1
           value={ step1 }
@@ -127,25 +160,14 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
         />
       ) }
 
-      { showStep4 && (
-        <Step4
+      { showCheckout && (
+        <Checkout
           values={ step4 }
           step1={ step1 }
           step2={ step2 }
           step3={ step3 }
           t={ t }
-          onSave={ onStep4 }
-          onBack={ onBack }
-        />
-      ) }
-
-      { showStep5 && (
-        <Step5
-          step1={ step1 }
-          step2={ step2 }
-          step3={ step3 }
-          step4={ step4 }
-          t={ t }
+          onStore={ setStep4 }
           onBack={ onBack }
         />
       ) }

package/Step2.tsx

@@ -8,6 +8,7 @@ import { Title, Actions } from './styles';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { FoundData } from '@autobusal/providers/types/routes';
 import { useGetDepartures } from './services';
+import { useGetSuggestions } from '@autobusal/routes-search/services';
 
 interface Props {
   step1: RoutesSearchForm
@@ -20,11 +21,43 @@ interface Props {
 const Step2 = ({ step1, t, onSearch, onSave, onBack }: Props): JSX.Element => {
   const { data, isFetching } = useGetDepartures(step1);
 
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-01
+   *
+   * "Select a Departure Schedule" said nothing about the trip and nothing
+   * a search engine could use. The heading now names the actual journey.
+   *
+   * Countries are dropped when both ends share one: "from Tirana Albania
+   * to Durres Albania" is noise, while on a cross-border trip the country
+   * is the part that matters.
+   *
+   * Read from the city list rather than from the results, so the heading
+   * is right even when the search finds nothing - which is exactly when
+   * being told what was searched for matters most. That list is the same
+   * cached query the search form's autocomplete already uses, so it costs
+   * no extra request.
+   */
+  const { data: cities } = useGetSuggestions();
+
+  const from = cities.find(city => city.slug === step1.from);
+  const to = cities.find(city => city.slug === step1.to);
+
+  const sameCountry = from?.country?.id !== undefined && from.country.id === to?.country?.id;
+
+  const title = from && to
+    ? t('routes_order.step2.title_pair', {
+        from: from.name,
+        to: to.name,
+        from_country: sameCountry ? '' : ` ${ from.country?.name ?? '' }`,
+        to_country: sameCountry ? '' : ` ${ to.country?.name ?? '' }`
+      })
+    : t('routes_order.step2.title');
+
   return (
     <>
       <Title>
         <RiBus2Line />
-        { t('routes_order.step2.title') }
+        { title }
       </Title>
 
       <Steps value={ 2 } />

package/Step4/Passenger/Passenger.tsx

@@ -1,6 +1,6 @@
 import { TFunction } from 'i18next';
 import { FieldErrors, FieldValues, UseFormRegister } from 'react-hook-form';
-import { Calendar, Gender, ChooseSeat } from '@autobusal/common';
+import { Calendar, Gender, ChooseSeat, Required } from '@autobusal/common';
 import { Validate, Display } from '@autobusal/utilities';
 import { Container, Title } from './styles';
 import { PersonData } from '@autobusal/providers/types/persons';
@@ -55,7 +55,7 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
       <div className="column">
         <div className="row">
-          { t('routes_order.step4.first_name') }
+          <Required>{ t('routes_order.step4.first_name') }</Required>
 
           <input
             type="text"
@@ -67,7 +67,7 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
         </div>
 
         <div className="row">
-          { t('routes_order.step4.last_name') }
+          <Required>{ t('routes_order.step4.last_name') }</Required>
 
           <input
             type="text"
@@ -81,7 +81,7 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
       <div className="column">
         <div className="row">
-          { t('routes_order.step4.dob') }
+          <Required>{ t('routes_order.step4.dob') }</Required>
 
           <Calendar
             type="dob"
@@ -116,7 +116,7 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
         <div className="column">
           { has('passport') && (
             <div className="row">
-              { t('routes_order.step4.passport') }
+              <Required>{ t('routes_order.step4.passport') }</Required>
 
               <input
                 type="text"
@@ -130,7 +130,7 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
           { has('phone') && (
             <div className="row">
-              { t('routes_order.step4.phone') }
+              <Required>{ t('routes_order.step4.phone') }</Required>
 
               <input
                 type="text"
@@ -148,7 +148,7 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
         <div className="column">
           { has('whatsapp') && (
             <div className="row">
-              { t('routes_order.step4.whatsapp') }
+              <Required>{ t('routes_order.step4.whatsapp') }</Required>
 
               <input
                 type="text"
@@ -162,7 +162,7 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
           { has('telegram') && (
             <div className="row">
-              { t('routes_order.step4.telegram') }
+              <Required>{ t('routes_order.step4.telegram') }</Required>
 
               <input
                 type="text"
@@ -179,7 +179,7 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
       { type !== 'baby' && (
         <div className="column">
           <div className="row">
-            { t('seats.departure') }
+            <Required>{ t('seats.departure') }</Required>
 
             <ChooseSeat
               name={ names.seatDeparture }
@@ -198,7 +198,7 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
           { withReturn && (
             <div className="row">
-              { t('seats.return') }
+              <Required>{ t('seats.return') }</Required>
 
               <ChooseSeat
                 name={ names.seatReturn }