@autobusal/routes-order 1.13.0 → 1.21.0

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,11 +1,11 @@
 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 { formatDuration, splitPrice } from '../refine';
 import { Button, RouteFeature, Policy, Rating } from '@autobusal/common';
-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 { Container, ButtonDetails, SpecialOffer, FavoriteStop, Trip, Company, Location, Stop, Iso, Time, Price, Amount, Decimals, Currency, PriceNotice, LinkCompany, Details, Detail, ButtonPolicy, TitleDetail, LinkRoute, FeaturesItems, Leaves } from './styles';
 import { FoundData } from '@autobusal/providers/types/routes';
 
 // neutral placeholder so a missing/broken operator logo doesn't render the
@@ -27,6 +27,14 @@ interface Props {
 const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Element => {
   const [ policy, setPolicy ] = 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(', ');
 
@@ -47,11 +55,26 @@ 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;
+
   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>
@@ -134,7 +157,16 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
 
       { children }
 
-      <Details>
+      <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

package/Found/Route/styles.ts

@@ -6,8 +6,20 @@ export const Container = styled.div<{ $type: 'favorite' | 'normal' }>`
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: 15px;
-  padding: 15px;
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * Tighter on a phone. Every result carried 15px of padding and 15px
+   * between each of its bands, which is most of a thumb of screen spent on
+   * gaps before anything is read.
+   */
+  gap: 8px;
+  padding: 10px;
+
+  @media (min-width: 640px) {
+    gap: 15px;
+    padding: 15px;
+  }
 
   ${ props => props.$type === 'favorite' && css`
     border: 1px solid ${ props => props.theme.font.success }; 
@@ -45,14 +57,32 @@ export const FavoriteStop = styled.div`
   border-bottom-right-radius: ${ props => props.theme.borderRadius };
 `;
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * VERTICAL on a phone, side by side from 640px up.
+ *
+ * Side by side was tried first and does not survive the content: each end
+ * gets about 96px at 375px, while "Thessaloniki (GRC) 16:30" measures 215px
+ * - it painted 50px outside the card, and the page never scrolled sideways
+ * so nothing looked broken until it was measured against the box it was
+ * supposed to be in. Stacked, each end has the full width, so nothing is
+ * truncated and nothing escapes.
+ *
+ * Compact is bought back a different way: tight gaps, a short arrow turned
+ * to point down the column, and the price on one row instead of a centred
+ * stack. Same information, roughly a third less height than before.
+ */
 export const Trip = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 6px;
 
   @media (min-width: 640px) {
     flex-direction: row;
     flex-wrap: wrap;
+    align-items: center;
+    gap: 15px;
   }
 
   @media (min-width: 1024px) {
@@ -95,12 +125,49 @@ export const Location = styled.div`
   min-width: 0;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 3px;
-  text-align: center;
 
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * Left-aligned while the ends are stacked - centred text in a full-width
+   * column leaves the two times floating in the middle of the card with
+   * nothing to line them up against. Centred again from 640px, where the
+   * two ends sit either side of the arrow and the symmetry is the point.
+   */
+  align-items: flex-start;
+  gap: 1px;
+  text-align: left;
+
+  @media (min-width: 640px) {
+    align-items: center;
+    gap: 3px;
+    text-align: center;
+  }
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   *
+   * The heading has to be allowed to WRAP now that the two ends share a
+   * row. The min-width:0 above lets this column shrink, but the heading
+   * inside kept its intrinsic single-line width and simply painted outside
+   * the card - "Thessaloniki (GRC) 16:30" measured 215px inside a 96px
+   * column and ran 50px past the card's right edge. The page never scrolled
+   * sideways, so nothing looked broken until the text was measured against
+   * the box it was supposed to be in.
+   *
+   * A step down in size as well, because three columns of a 375px screen do
+   * not have room for a headline at body-copy scale.
+   */
   & > h2 {
     margin-bottom: 0;
+    max-width: 100%;
+    line-height: 1.25;
+    overflow-wrap: anywhere;
+  }
+
+  @media (min-width: 640px) {
+    & > h2 {
+      overflow-wrap: normal;
+    }
   }
 `;
 
@@ -111,11 +178,30 @@ export const Location = styled.div`
  * 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.
  */
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Clamped to two lines on a phone. Now that the two ends of the journey
+ * share a row, each gets about 96px - and a name like "Terminali Lindor
+ * Interurban dhe Nderkombetar i Autobusave (TEG)" ran to five lines and
+ * stretched the whole row to match, so one terminal with a long name made
+ * every card taller than the screen. Two lines and an ellipsis, which is
+ * what the reference layouts do with the same problem.
+ */
 export const Stop = styled.span`
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
   font-size: ${ props => props.theme.size.xs };
   font-weight: 700;
   line-height: 1.3;
   color: ${ props => props.theme.font.faded };
+
+  @media (min-width: 1024px) {
+    display: block;
+    overflow: visible;
+  }
 `;
 
 /**
@@ -140,13 +226,39 @@ export const Iso = styled.span`
 
 export const Time = styled.div`
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+  flex-direction: row;
+  gap: 6px;
   align-items: center;
   font-weight: 700;
 
+  @media (min-width: 640px) {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * The arrow sat between two stacked blocks at 1.5x the largest type in
+   * the theme. Now that the two ends of the journey share a row with it,
+   * that size would take the width the city names need - it is a
+   * separator, not a headline.
+   */
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * Turned to point DOWN while the two ends are stacked - an arrow pointing
+   * right between two things sitting one above the other says the wrong
+   * thing about which way the journey goes.
+   */
   & > svg {
-    font-size: calc(1.5 * ${ props => props.theme.size.xxl });
+    font-size: ${ props => props.theme.size.l };
+    transform: rotate(90deg);
+  }
+
+  @media (min-width: 640px) {
+    & > svg {
+      font-size: calc(1.5 * ${ props => props.theme.size.xxl });
+      transform: none;
+    }
   }
 
   & > span {
@@ -176,12 +288,44 @@ export const Time = styled.div`
 export const Price = styled.div`
   flex-basis: 100%;
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   *
+   * On a phone: the fare and the button share one row, and the tax note sits
+   * under them.
+   *
+   * Reordered in CSS rather than in the markup, because the source order -
+   * fare, note, button - is the right one to read aloud and the right one
+   * for a crawler: the note explains the number it follows. Only the
+   * PAINTING needs to differ, and the order property says exactly that
+   * without moving the note away from the price it qualifies.
+   */
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
   align-items: center;
+  gap: 4px 8px;
+
+  & > *:nth-child(1) { order: 1; }
+
+  /* the note drops to its own line under both */
+  & > *:nth-child(2) { order: 3; flex-basis: 100%; }
+
+  & > *:nth-child(3) { order: 2; }
 
   @media (min-width: 768px) {
     flex: 0 0 165px;
+    flex-direction: column;
+    justify-content: initial;
+    gap: 8px;
+
+    & > *:nth-child(1),
+    & > *:nth-child(2),
+    & > *:nth-child(3) {
+      order: initial;
+      flex-basis: auto;
+    }
   }
 `;
 
@@ -220,11 +364,20 @@ export const Currency = styled.span`
  * frees the vertical space the Select button needs.
  */
 export const PriceNotice = styled.span`
-  margin-top: -4px;
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   * Left-aligned under the fare on a phone, where it is a full-width line
+   * beneath a price and a button rather than the middle of a centred stack.
+   */
   font-size: ${ props => props.theme.size.xxs };
   line-height: 1.25;
   color: ${ props => props.theme.font.faded };
-  text-align: center;
+  text-align: left;
+
+  @media (min-width: 768px) {
+    margin-top: -4px;
+    text-align: center;
+  }
 `;
 
 export const LinkCompany = styled(Link)`
@@ -239,24 +392,64 @@ export const LinkCompany = styled(Link)`
   }
 `;
 
-export const Details = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Collapsible, and inline at every width including phones.
+ *
+ * Hidden with CSS rather than unmounted, deliberately. These cards are on a
+ * page the prerender crawl snapshots for every route pair in the sitemap, so
+ * amenities, the route code, transit countries and the policy link have to
+ * be IN the DOM whether or not a reader has opened them - unmounting would
+ * take real per-pair content out of exactly the pages Tier 3 exists to
+ * fatten.
+ *
+ * Wrapping instead of stacking on a phone turns four bands of vertical space
+ * into one or two, which is the space the results themselves wanted.
+ */
+export const Details = styled.div<{ $open: boolean }>`
+  display: ${ props => (props.$open ? 'flex' : 'none') };
+  flex-wrap: wrap;
+  gap: 6px;
 
   @media (min-width: 640px) {
-    flex-direction: row;
-    flex-wrap: wrap;
+    gap: 15px;
   }
 `;
 
-export const Detail = styled.div`
-  padding: 8px 10px;
+/**
+ * The disclosure. Small and quiet - it is a way to get at supporting detail,
+ * not an action competing with "select".
+ */
+export const ButtonDetails = styled.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  align-self: flex-start;
+  padding: 4px 0;
   font-size: ${ props => props.theme.size.s };
+  color: ${ props => props.theme.font.faded };
+
+  &:hover {
+    color: ${ props => props.theme.font.normal };
+  }
+
+  svg {
+    transition: transform 0.2s ease;
+  }
+`;
+
+export const Detail = styled.div`
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 5px 8px;
+  font-size: calc(${ props => props.theme.size.s } - 1px);
   background: ${ props => props.theme.background.neutral };
   border-radius: ${ props => props.theme.borderRadius };
 
   @media (min-width: 480px) {
+    padding: 8px 10px;
+    font-size: ${ props => props.theme.size.s };
     flex-basis: calc(50% - 7.5px);
   }
   @media (min-width: 768px) {
@@ -300,4 +493,28 @@ export const FeaturesItems = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
-`;
+`;
+
+/**
+ * "Leaves in 40 minutes", on today's departures only.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Same-day seats are sellable now, and a time alone does not tell somebody
+ * whether they can make it - "14:00" reads very differently at nine in the
+ * morning and at half past one. Under an hour it turns urgent, because that
+ * is the point where the answer stops being "yes" and starts being "only if
+ * you leave now".
+ */
+export const Leaves = styled.div<{ $soon: boolean }>`
+  align-self: flex-start;
+  padding: 3px 10px;
+  border-radius: 100px;
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: 700;
+  white-space: nowrap;
+
+  color: ${ props => (props.$soon ? '#FFF' : props.theme.font.normal) };
+  background: ${ props => (props.$soon ? props.theme.font.error : props.theme.primary.neutral) };
+`;
+

package/Found/SameDay/SameDay.tsx

@@ -0,0 +1,35 @@
+import { TFunction } from 'i18next';
+import { HiOutlineExclamationCircle } from 'react-icons/hi';
+import { Container } from './styles';
+
+interface Props {
+  t: TFunction<'common'>
+}
+
+/**
+ * The caution that comes with selling today's seats.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Same-day departures are sellable now, and two things about them are worth
+ * saying plainly before somebody pays.
+ *
+ * A coach that has already left is filtered out server-side
+ * (Search\Departed), and since countries carry a timezone that filter is now
+ * judged against the DEPARTURE STOP's own clock rather than ours - so the
+ * warning is no longer about doubt on our side.
+ *
+ * What remains is the honest thing to say when the margin is minutes: every
+ * time on the page is local to its stop, the seat is real, the coach is
+ * about to go, and whether somebody can reach the terminal in time is not
+ * something we can know for them.
+ */
+const SameDay = ({ t }: Props): JSX.Element => (
+  <Container>
+    <HiOutlineExclamationCircle />
+
+    <span>{ t('routes_order.step2.same_day') }</span>
+  </Container>
+);
+
+export default SameDay;

package/Found/SameDay/styles.ts

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Shown only on a same-day search. A caution, not an alarm - the whole point
+ * of selling today is that these seats are worth selling, and a red banner
+ * over every one of them would say the opposite.
+ */
+export const Container = styled.div`
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  margin-bottom: 15px;
+  padding: 10px 12px;
+  border-radius: ${ props => props.theme.borderRadius };
+  background: ${ props => props.theme.primary.neutral };
+  color: ${ props => props.theme.font.normal };
+  font-size: ${ props => props.theme.size.s };
+  line-height: 1.4;
+
+  & > svg {
+    flex: 0 0 auto;
+    margin-top: 2px;
+    font-size: ${ props => props.theme.size.l };
+  }
+`;