@autobusal/routes-order 1.8.0 → 1.9.1

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,87 @@
+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;
+  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`
+  font-size: ${ props => props.theme.size.s };
+  font-weight: 700;
+  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: 3px;
+  flex-wrap: nowrap;
+
+  @media (min-width: 640px) {
+    gap: 6px;
+    flex-wrap: wrap;
+  }
+`;
+
+export const Option = styled.button<{ $active: boolean }>`
+  /**
+   * 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 };
+  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 className="box">
+    <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,42 @@
+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;
+    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 };
+`;

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