@autobusal/routes-order 1.9.0 → 1.9.1

package/Found/Sort/styles.ts

@@ -1,10 +1,24 @@
 import styled, { css } from 'styled-components';
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * A column on a phone, so the five options get the whole width for one row
+ * instead of losing a third of it to the "Sort by" label and wrapping onto
+ * three lines.
+ */
 export const Container = styled.div`
   display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 6px;
+
+  @media (min-width: 640px) {
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
 `;
 
 export const Label = styled.span`
@@ -13,17 +27,48 @@ export const Label = styled.span`
   color: ${ props => props.theme.font.faded };
 `;
 
+/**
+ * One row, always. Five short options wrapping onto three lines took more
+ * height than the first result they were meant to reorder.
+ */
 export const Options = styled.div`
   display: flex;
-  gap: 6px;
-  flex-wrap: wrap;
+  gap: 3px;
+  flex-wrap: nowrap;
+
+  @media (min-width: 640px) {
+    gap: 6px;
+    flex-wrap: wrap;
+  }
 `;
 
 export const Option = styled.button<{ $active: boolean }>`
-  padding: 6px 14px;
-  font-size: ${ props => props.theme.size.s };
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   *
+   * NATURAL width, allowed to shrink - not an equal share. Equal shares gave
+   * every option 59px, which four of the five did not need and the fifth
+   * did: "Recommended" wants 71px and was the only one ever truncated, to
+   * "Recom...", while its neighbours sat in whitespace. Left to size
+   * themselves the five come to 311px inside a 335px row and all fit.
+   *
+   * They can still shrink, so a language with longer words degrades to
+   * ellipsis rather than pushing an option off the edge.
+   */
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 5px 2px;
+  font-size: calc(${ props => props.theme.size.xs } - 2px);
   font-weight: 700;
   white-space: nowrap;
+
+  @media (min-width: 640px) {
+    flex: initial;
+    padding: 6px 14px;
+    font-size: ${ props => props.theme.size.s };
+  }
   border-radius: 100px;
   border: 1px solid ${ props => props.theme.inputs.border };
   background: ${ props => props.theme.background.normal };

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/Watch/Watch.tsx

@@ -0,0 +1,187 @@
+import { useState, useId } from 'react';
+import { TFunction } from 'i18next';
+import { useForm } from 'react-hook-form';
+import { AiOutlineBell, AiOutlineCheckCircle } from 'react-icons/ai';
+import { Button } from '@autobusal/common';
+import { Validate, Display } from '@autobusal/utilities';
+import { useGetSuggestions } from '@autobusal/routes-search/services';
+import { Container, Toggle, Panel, Lead, Journey, Fields, Field, Action, Privacy, Failure, Done } from './styles';
+import { PriceAlertForm, PriceAlertData } from '../../types';
+import { usePostPriceAlert } from '../../services';
+
+interface Props {
+  from: string
+  to: string
+  departure: string
+  t: TFunction<'common'>
+}
+
+/**
+ * "Watch this fare" - tell me by email if the price for this journey drops.
+ *
+ * Edited: Claude - Date: 2026-08-20
+ *
+ * WHERE IT SITS is the whole design. This renders at the END of the results,
+ * from <Found>, which is the one component on this screen that is mounted in
+ * every state it can be in: trips listed, trips all hidden by a filter, and
+ * nothing found at all. A control placed inside the listing would have
+ * disappeared in exactly the state that most needs it - "no buses for this
+ * search" is when somebody most wants telling if that changes - and one
+ * placed above the trips would have argued with the results for attention
+ * on the page whose entire job is showing them.
+ *
+ * The pair and the date are the search that has already been run, so the
+ * only thing asked for is an address. Collapsed until pressed: this is for
+ * the minority who did not find their price, and an open form under every
+ * result set is a second thing to read past.
+ *
+ * THRESHOLD IS DELIBERATELY NOT COLLECTED. The endpoint accepts one, but
+ * "tell me if it goes down" needs no number from the traveller, and a
+ * second field is how a one-line control becomes a form nobody fills in.
+ */
+const Watch = ({ from, to, departure, t }: Props): JSX.Element => {
+  const [ open, setOpen ] = useState<boolean>(false);
+  const [ done, setDone ] = useState<PriceAlertData | undefined>(undefined);
+  const [ failure, setFailure ] = useState<string | undefined>(undefined);
+
+  /**
+   * Edited: Claude - Date: 2026-08-20
+   * Same pairing @autobusal/auth and the checkout were just fixed to use: a
+   * real <label for> over an id nothing else can own. The results page also
+   * carries the footer's newsletter signup, so a bare id="email" would have
+   * been the second one on the page.
+   */
+  const uid = useId();
+
+  const id = (field: string): string => `${ uid }${ field }`;
+
+  const { register, handleSubmit, formState: { errors } } = useForm<PriceAlertForm>();
+
+  const { mutate: WatchFare, isPending } = usePostPriceAlert();
+
+  // the same cached city list the search form's autocomplete and the step
+  // heading already read, so naming the journey costs no extra request
+  const { data: cities } = useGetSuggestions();
+
+  const fromCity = cities.find(city => city.slug === from);
+  const toCity = cities.find(city => city.slug === to);
+
+  const names = {
+    from: fromCity?.name ?? from,
+    to: toCity?.name ?? to
+  };
+
+  /**
+   * Every answer this endpoint can give, turned into something readable.
+   *
+   * 404 is not an error the visitor made: nobody prices this pair, so there
+   * is genuinely no fare to watch, and saying that plainly is the only
+   * honest reply. 429 is the write-tier throttle (20/min). 422 also raises
+   * the global toast from apiClient's interceptor - it is repeated inline
+   * because a toast above the fold is easy to miss from the foot of a long
+   * result list, which is exactly where this control lives.
+   */
+  const message = (status?: number): string => {
+    if (status === 404) {
+      return t('routes_order.step2.watch.errors.not_found');
+    }
+
+    if (status === 422) {
+      return t('routes_order.step2.watch.errors.invalid');
+    }
+
+    if (status === 429) {
+      return t('routes_order.step2.watch.errors.throttled');
+    }
+
+    return t('routes_order.step2.watch.errors.failed');
+  };
+
+  const onSubmit = (data: PriceAlertForm): void => {
+    setFailure(undefined);
+
+    WatchFare({
+      email: data.email,
+      from,
+      to,
+      departure
+    }, {
+      onSuccess: (data) => {
+        setDone(data);
+      },
+      onError: (error) => {
+        setFailure(message(error.response?.status));
+      }
+    });
+  };
+
+  if (done !== undefined) {
+    return (
+      <Container className="box">
+        <Done>
+          <AiOutlineCheckCircle />
+
+          <span>
+            { t('routes_order.step2.watch.done', {
+              price: done.baseline_price_display,
+              from: names.from,
+              to: names.to
+            }) }
+          </span>
+        </Done>
+      </Container>
+    );
+  }
+
+  return (
+    <Container className="box">
+      <Toggle type="button" aria-expanded={ open } onClick={ () => setOpen(!open) }>
+        <AiOutlineBell />
+
+        <span>{ t('routes_order.step2.watch.toggle') }</span>
+      </Toggle>
+
+      { open && (
+        <Panel>
+          <Lead>{ t('routes_order.step2.watch.lead') }</Lead>
+
+          <Journey>
+            { t('routes_order.step2.watch.journey', {
+              from: names.from,
+              to: names.to,
+              date: departure
+            }) }
+          </Journey>
+
+          <form onSubmit={ handleSubmit(onSubmit) }>
+            <Fields>
+              <Field>
+                <label htmlFor={ id('email') }>{ t('routes_order.step2.watch.email') }</label>
+
+                <input type="email" id={ id('email') } { ...register('email', Validate('required|email|max_length:255', t)) } />
+              </Field>
+
+              <Action>
+                <Button
+                  type="submit"
+                  size="medium"
+                  loading={ isPending }
+                  text={ t('routes_order.step2.watch.submit') }
+                  noMargin
+                />
+              </Action>
+            </Fields>
+
+            { Display(errors.email) }
+
+            { failure !== undefined && <Failure role="alert">{ failure }</Failure> }
+
+            <Privacy>{ t('routes_order.step2.watch.privacy') }</Privacy>
+          </form>
+        </Panel>
+      ) }
+    </Container>
+  );
+};
+
+export default Watch;

package/Found/Watch/styles.ts

@@ -0,0 +1,118 @@
+import styled from 'styled-components';
+
+/**
+ * Edited: Claude - Date: 2026-08-20
+ *
+ * A strip under the results, not a panel over them. This sits at the end of
+ * the list - where somebody has read every price and none of them was the
+ * one they wanted - so it has to be findable without ever competing with
+ * the trips themselves for attention.
+ */
+export const Container = styled.div`
+  margin-top: 15px;
+
+  &.box {
+    padding: 12px 15px;
+  }
+`;
+
+export const Toggle = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  text-align: left;
+  font-size: ${ props => props.theme.size.s };
+  font-weight: 700;
+  color: ${ props => props.theme.font.normal };
+
+  & > svg {
+    flex: 0 0 auto;
+    font-size: ${ props => props.theme.size.l };
+    color: ${ props => props.theme.primary.normal };
+  }
+
+  &:hover {
+    color: ${ props => props.theme.primary.normal };
+  }
+`;
+
+export const Panel = styled.div`
+  margin-top: 12px;
+`;
+
+export const Lead = styled.p`
+  margin: 0 0 4px;
+  font-size: ${ props => props.theme.size.s };
+`;
+
+export const Journey = styled.p`
+  margin: 0 0 12px;
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.faded };
+`;
+
+/**
+ * The field and its action on one line from the tablet up, stacked on a
+ * phone - the same shape the coupon box uses, so the two read as siblings.
+ */
+export const Fields = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  @media (min-width: 640px) {
+    flex-direction: row;
+    align-items: flex-end;
+  }
+`;
+
+export const Field = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+  font-weight: 700;
+  font-size: calc(${ props => props.theme.size.m } - 1px);
+`;
+
+export const Action = styled.div`
+  flex: 0 0 auto;
+`;
+
+export const Privacy = styled.p`
+  margin: 10px 0 0;
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.faded };
+`;
+
+/**
+ * Every answer the server can give, said out loud.
+ *
+ * Edited: Claude - Date: 2026-08-20
+ *
+ * The contact form swallowed submissions for months because a failure had
+ * nowhere to render. A 404 (nobody prices this pair), a 429 (throttled) and
+ * an unreachable API all end up here rather than in the console.
+ */
+export const Failure = styled.p`
+  margin: 10px 0 0;
+  font-size: ${ props => props.theme.size.s };
+  color: ${ props => props.theme.font.error };
+`;
+
+export const Done = styled.div`
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  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 };
+    color: ${ props => props.theme.primary.normal };
+  }
+`;

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/Links/Links.tsx

@@ -0,0 +1,91 @@
+import { TFunction } from 'i18next';
+import { Container, Group, Heading, List, Item, Reverse, ReverseLink } from './styles';
+import { LinkRow } from '../Facts/types';
+
+interface Props {
+  id: string
+  from: LinkRow[]
+  to: LinkRow[]
+  // Edited: Claude - Date: 2026-08-20
+  // The journey home, or null when it is not sold. Belongs to neither list
+  // below - it is a pair from the DESTINATION back to the origin - which is
+  // why the one link a reader is most likely to want next was the one this
+  // block could not produce.
+  reverse: LinkRow | null
+  fromName?: string
+  toName?: string
+  t: TFunction<'common'>
+}
+
+/**
+ * Where else you can go from here.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Roadmap Tier 3.4. The sitemap announces every sellable pair, but a sitemap
+ * is a hint - a page nothing links to is still orphaned, and a crawler that
+ * has to be TOLD about a page treats it as less important than one it
+ * arrives at by following a link. These blocks put every pair one click from
+ * another.
+ *
+ * Real router links, deliberately: the whole value is that they are followed.
+ * Ordered by paid bookings server-side, but never filtered by them - the
+ * pairs with no orders yet are exactly the orphans this exists to reach.
+ */
+const Links = ({ id, from, to, reverse, fromName, toName, t }: Props): (JSX.Element | null) => {
+  if (from.length === 0 && to.length === 0 && !reverse) {
+    return null;
+  }
+
+  return (
+    <Container id={ id } className="box">
+      { /* Edited: Claude - Date: 2026-08-20
+           First, and on its own, because pairs are DIRECTIONAL: the return
+           leg is a different page with its own timetable and its own fares,
+           and it is the likeliest next page for anybody who is planning a
+           trip rather than a one-way transfer. Only ever rendered when
+           obtapi found the reverse pair among the ones it actually sells -
+           the same list the sitemap publishes - so it can never point at an
+           empty page. */ }
+      { reverse && (
+        <Reverse>
+          <Heading>{ t('routes_order.links.reverse') }</Heading>
+
+          <ReverseLink to={ reverse.url }>
+            { t('routes_order.links.reverse_link', { from: reverse.from_name, to: reverse.to_name }) }
+          </ReverseLink>
+        </Reverse>
+      ) }
+
+      { from.length > 0 && (
+        <Group>
+          <Heading>{ t('routes_order.links.from', { city: fromName ?? from[0].from_name }) }</Heading>
+
+          <List>
+            { from.map(row => (
+              <li key={ row.url }>
+                <Item to={ row.url }>{ row.to_name }</Item>
+              </li>
+            )) }
+          </List>
+        </Group>
+      ) }
+
+      { to.length > 0 && (
+        <Group>
+          <Heading>{ t('routes_order.links.to', { city: toName ?? to[0].to_name }) }</Heading>
+
+          <List>
+            { to.map(row => (
+              <li key={ row.url }>
+                <Item to={ row.url }>{ row.from_name }</Item>
+              </li>
+            )) }
+          </List>
+        </Group>
+      ) }
+    </Container>
+  );
+};
+
+export default Links;

package/Links/styles.ts

@@ -0,0 +1,75 @@
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+export const Container = styled.section`
+  margin-top: 25px;
+`;
+
+export const Group = styled.div`
+  & + & {
+    margin-top: 20px;
+  }
+`;
+
+export const Heading = styled.h3`
+  margin: 0 0 10px;
+  font-size: ${ props => props.theme.size.m };
+`;
+
+export const List = styled.ul`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`;
+
+/**
+ * A real router Link, not a styled div with a click handler - the entire
+ * point of these blocks is that a crawler follows them.
+ */
+export const Item = styled(Link)`
+  display: inline-block;
+  padding: 6px 12px;
+  border-radius: ${ props => props.theme.borderRadius };
+  background: ${ props => props.theme.background.neutral };
+  color: ${ props => props.theme.font.normal };
+  font-size: ${ props => props.theme.size.s };
+  white-space: nowrap;
+
+  &:hover {
+    text-decoration: none;
+    background: ${ props => props.theme.primary.neutral };
+  }
+`;
+
+/**
+ * The return journey.
+ *
+ * Edited: Claude - Date: 2026-08-20
+ *
+ * Set apart from the two "popular routes" lists rather than dropped into
+ * one of them: it is a single specific page, not a browse list, and a
+ * reader planning a round trip is looking for exactly it.
+ */
+export const Reverse = styled.div`
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid ${ props => props.theme.background.neutral };
+`;
+
+export const ReverseLink = styled(Link)`
+  display: inline-block;
+  padding: 8px 16px;
+  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 };
+  font-weight: 700;
+
+  &:hover {
+    text-decoration: none;
+    background: ${ props => props.theme.background.neutral };
+  }
+`;