@autobusal/routes-order 1.37.7 → 1.37.9

package/Step5/Billing/Billing.tsx

@@ -93,7 +93,10 @@ const Billing = ({ errors, t, refs, only }: Props): JSX.Element => {
           <div className="row">
             <Required htmlFor={ id('bill_fn') }>{ t('routes_order.step5.billing.first_name') }</Required>
 
-            <input type="text" id={ id('bill_fn') } { ...refs('bill_fn', Validate('required|min_length:2|max_length:100', t)) } />
+            { /* Claude - 2026-09-16 (audit): `billing` autocomplete tokens, so a
+                 browser or password manager fills the block as the billing
+                 address it is; aria-required says what the asterisk shows. */ }
+            <input type="text" id={ id('bill_fn') } autoComplete="billing given-name" aria-required="true" { ...refs('bill_fn', Validate('required|min_length:2|max_length:100', t)) } />
 
             { Display(errors.bill_fn) }
           </div>
@@ -101,7 +104,7 @@ const Billing = ({ errors, t, refs, only }: Props): JSX.Element => {
           <div className="row">
             <Required htmlFor={ id('bill_ln') }>{ t('routes_order.step5.billing.last_name') }</Required>
 
-            <input type="text" id={ id('bill_ln') } { ...refs('bill_ln', Validate('required|min_length:2|max_length:100', t)) } />
+            <input type="text" id={ id('bill_ln') } autoComplete="billing family-name" aria-required="true" { ...refs('bill_ln', Validate('required|min_length:2|max_length:100', t)) } />
 
             { Display(errors.bill_ln) }
           </div>
@@ -113,7 +116,7 @@ const Billing = ({ errors, t, refs, only }: Props): JSX.Element => {
           <div className="row">
             <Required htmlFor={ id('email') }>{ t('routes_order.step5.billing.email') }</Required>
 
-            <input type="email" id={ id('email') } { ...refs('email', Validate('required|email|max_length:255', t)) } />
+            <input type="email" id={ id('email') } autoComplete="email" aria-required="true" { ...refs('email', Validate('required|email|max_length:255', t)) } />
 
             { Display(errors.email) }
 
@@ -127,7 +130,7 @@ const Billing = ({ errors, t, refs, only }: Props): JSX.Element => {
           <div className="row">
             <Required htmlFor={ id('bill_phone') }>{ t('routes_order.step5.billing.phone') }</Required>
 
-            <input type="text" id={ id('bill_phone') } { ...refs('bill_phone', Validate('required|min_length:10|max_length:20', t)) } />
+            <input type="text" id={ id('bill_phone') } autoComplete="billing tel" aria-required="true" { ...refs('bill_phone', Validate('required|min_length:10|max_length:20', t)) } />
 
             { Display(errors.bill_phone) }
           </div>
@@ -138,7 +141,7 @@ const Billing = ({ errors, t, refs, only }: Props): JSX.Element => {
         <div className="row">
           <Required htmlFor={ id('bill_address') }>{ t('routes_order.step5.billing.address') }</Required>
 
-          <textarea id={ id('bill_address') } { ...refs('bill_address', Validate(`required|min_length:${ gaps ? 5 : 2 }`, t)) }></textarea>
+          <textarea id={ id('bill_address') } autoComplete="billing street-address" aria-required="true" { ...refs('bill_address', Validate(`required|min_length:${ gaps ? 5 : 2 }`, t)) }></textarea>
 
           { Display(errors.bill_address) }
         </div>
@@ -149,7 +152,7 @@ const Billing = ({ errors, t, refs, only }: Props): JSX.Element => {
           <div className="row">
             <Required htmlFor={ id('bill_city') }>{ t('routes_order.step5.billing.city') }</Required>
 
-            <input type="text" id={ id('bill_city') } { ...refs('bill_city', Validate(`required|min_length:2|max_length:${ gaps ? 40 : 100 }`, t)) } />
+            <input type="text" id={ id('bill_city') } autoComplete="billing address-level2" aria-required="true" { ...refs('bill_city', Validate(`required|min_length:2|max_length:${ gaps ? 40 : 100 }`, t)) } />
 
             { Display(errors.bill_city) }
           </div>
@@ -159,7 +162,7 @@ const Billing = ({ errors, t, refs, only }: Props): JSX.Element => {
           <div className="row">
             <Required htmlFor={ id('bill_country') }>{ t('routes_order.step5.billing.country') }</Required>
 
-            <select id={ id('bill_country') } { ...refs('bill_country', Validate('required|min:1', t)) }>
+            <select id={ id('bill_country') } autoComplete="billing country-name" aria-required="true" { ...refs('bill_country', Validate('required|min:1', t)) }>
               <option value={ 0 }>{ t('routes_order.step5.billing.country_choose') }</option>
               { items }
             </select>
@@ -184,7 +187,7 @@ const Billing = ({ errors, t, refs, only }: Props): JSX.Element => {
                  rather than the asterisked one, but still associated */ }
             <label htmlFor={ id('bill_company') }>{ t('routes_order.step5.billing.company') }</label>
 
-            <input type="text" id={ id('bill_company') } { ...refs('bill_company') } />
+            <input type="text" id={ id('bill_company') } autoComplete="organization" { ...refs('bill_company') } />
 
             { Display(errors.bill_company) }
           </div>
@@ -210,7 +213,7 @@ const Billing = ({ errors, t, refs, only }: Props): JSX.Element => {
       { asked('terms') && (
         <div className="row row-nomargin">
           <label className="single">
-            <input type="checkbox" value="1" { ...refs('terms', Validate('required', t)) } />&nbsp;
+            <input type="checkbox" value="1" aria-required="true" { ...refs('terms', Validate('required', t)) } />&nbsp;
 
             <span dangerouslySetInnerHTML={{
               __html: t('routes_order.step5.billing.terms', {

package/Step5/Billing/styles.ts

@@ -2,6 +2,14 @@ import styled from 'styled-components';
 
 export const Container = styled.div`
   margin-top: 25px;
+
+  // Claude - 2026-09-16 (audit): the passenger block's 44px phone fields,
+  // for the same reason - see Step4/Passenger/styles.ts
+  @media (max-width: 639px) {
+    input:not([type='checkbox']):not([type='radio']), select {
+      min-height: 44px;
+    }
+  }
 `;
 
 export const NoticeEmail = styled.div`

package/Step5/Summary/About/About.tsx

@@ -1,7 +1,7 @@
 import { TFunction } from 'i18next';
 import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
 import { FaCircleDot, FaLocationDot } from 'react-icons/fa6';
-import { Trip, TripLabel, Container, ContainerIcon, Icon, Information, Title, Operator, Carrier, Logo, Leg, Point, PointIcon, PointCity, Country, PointMeta } from './styles';
+import { Trip, TripLabel, Container, ContainerIcon, Icon, Information, Title, Line, Code, Operator, Carrier, Logo, Leg, Point, PointIcon, PointCity, Country, PointMeta } from './styles';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { FoundData } from '@autobusal/providers/types/routes';
 
@@ -57,7 +57,20 @@ const About = ({ type, step1, data, number, t }: Props): (JSX.Element | null) =>
         </ContainerIcon>
 
         <Information>
-          <Title>{ data.name } ({ data.code })</Title>
+          { /* Claude - 2026-09-16 (audit): THE LEG THAT WAS BOUGHT, not the
+               coach's own name. "THESSALONIKI - VERIA - SHKODER (II)" is the
+               operator's route - a coach that carries on to Shkodër - and a
+               buyer who searched Thessaloniki to Tirana read it as the wrong
+               ticket. The two cities are the title, and the date and time sit
+               in bold on the origin line below. The code and the operator's
+               route name drop to a line of detail, where they still match
+               the printed ticket without claiming to be the journey. */ }
+          <Title>{ data.locations.from.city.name } → { data.locations.to.city.name }</Title>
+
+          <Line>
+            <Code title={ t('routes_order.step2.route.name') }>{ data.code }</Code>
+            { data.name }
+          </Line>
 
           { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
                Mark and name together, ranged right. The name used to sit

package/Step5/Summary/About/styles.ts

@@ -62,6 +62,28 @@ export const Title = styled.h2`
   text-transform: uppercase;
 `;
 
+/**
+ * The route code and the operator's own name for the route, under the title.
+ *
+ * Claude - 2026-09-16 (audit): detail, set as detail - small and faded, with
+ * only the code in the ordinary ink so it can be read back against a ticket.
+ * `anywhere`, because an operator's route name lists every city it calls at
+ * and the checkout sidebar is a narrow column.
+ */
+export const Line = styled.div`
+  margin-top: 2px;
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.faded };
+  overflow-wrap: anywhere;
+`;
+
+export const Code = styled.span`
+  margin-right: 6px;
+  font-weight: 700;
+  letter-spacing: .3px;
+  color: ${ props => props.theme.font.normal };
+`;
+
 export const SubTitle = styled.div`
   display: inline-block;
   padding: 4px 10px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/routes-order",
-  "version": "1.37.7",
+  "version": "1.37.9",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts",

package/styles.ts

@@ -4,6 +4,12 @@ export const Title = styled.h1`
   display: flex;
   align-items: center;
   gap: 10px;
+  /*
+   * Claude - 2026-09-16: pinned to the h1 scale, because Step1 now renders
+   * this AS an h2 on the pair page (see its heading prop) - the level is a
+   * document-outline decision, not a request for a smaller heading.
+   */
+  font-size: ${ props => props.theme.size.xxl };
 `;
 
 export const SubTitle = styled.h3`
@@ -147,4 +153,41 @@ export const Listing = styled.div`
   // column wider than its share of the row
   flex: 1;
   min-width: 0;
+
+  /*
+   * Edited: Claude - Date: 2026-09-16
+   *
+   * Real room at the FOOT of the list, on a narrow screen, for whatever the
+   * cookie notice (packages/common/CookieNotification) is currently taking
+   * up down there - not the fixed "20px" the notice used to assume, since a
+   * fixed guess is wrong the moment the sentence wraps to a different number
+   * of lines in a longer language. --obt-cookie-notice-height is the
+   * notice's own measured height, published as a CSS custom property so
+   * this column never has to ask it directly; 0px when the notice is not
+   * showing, so a visitor who has already dismissed it loses nothing here.
+   */
+  @media (max-width: 639px) {
+    padding-bottom: var(--obt-cookie-notice-height, 0px);
+  }
+`;
+
+/**
+ * A placeholder block, sized as a fraction of its cell.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * Shared by the two loading skeletons on this page - Availability/Skeleton
+ * and Found/Orders/Skeleton - so the one thing they agree on (what a
+ * "nothing has arrived yet" rectangle looks like) is defined once rather
+ * than twice. A flat fill, not the shimmering-gradient kind: the whole job
+ * of a skeleton here is to hold the page still while data arrives, and an
+ * animated one is itself something moving on the page for the second or so
+ * it is visible.
+ */
+export const Bone = styled.span<{ $width: number, $height?: number }>`
+  display: inline-block;
+  width: ${ props => props.$width }%;
+  height: ${ props => props.$height ?? 14 }px;
+  border-radius: 4px;
+  background: ${ props => props.theme.background.neutral };
 `;

package/Found/Group/Group.tsx

@@ -1,68 +0,0 @@
-import { useMemo, useState } from 'react';
-import { TFunction } from 'i18next';
-import Route from '../Route/Route';
-import { departureOf } from '../refine';
-import { Container, Title, Times, Time } from './styles';
-import { FoundData } from '@autobusal/providers/types/routes';
-
-interface Props {
-  items: FoundData[]
-  type: 'favorite' | 'normal'
-  date?: string
-  passengers: number
-  t: TFunction<'common'>
-  onSave: (data: FoundData) => void
-}
-
-/**
- * One card for a set of interchangeable departures.
- *
- * Edited: Ferjolt Ozuni - Date: 2026-08-01
- *
- * The card shows a real departure - never an abstract summary - and the
- * other times sit under it as a picker. Whatever is selected is what gets
- * booked, so there is no separate "now choose a time" step to forget: the
- * card always represents a bookable trip, starting with the earliest.
- */
-const Group = ({ items, type, date, passengers, t, onSave }: Props): JSX.Element => {
-  // chronological for the picker, regardless of how the list itself is
-  // sorted - a row of times out of time order is just confusing
-  const departures = useMemo(() => (
-    [ ...items ].sort((first, second) => departureOf(first) - departureOf(second))
-  ), [ items ]);
-
-  const [ selected, setSelected ] = useState<number>(0);
-
-  const current = departures[selected] ?? departures[0];
-
-  return (
-    <Route
-      type={ type }
-      data={ current }
-      date={ date }
-      passengers={ passengers }
-      t={ t }
-      onSave={ onSave }
-    >
-      <Container>
-        <Title>{ t('routes_order.step2.route.departures', { total: departures.length }) }</Title>
-
-        <Times>
-          { departures.map((item, index) => (
-            <Time
-              key={ item.id }
-              type="button"
-              $active={ index === selected }
-              aria-pressed={ index === selected }
-              onClick={ () => setSelected(index) }
-            >
-              { item.locations.from.departure }
-            </Time>
-          )) }
-        </Times>
-      </Container>
-    </Route>
-  );
-};
-
-export default Group;

package/Found/Group/styles.ts

@@ -1,44 +0,0 @@
-import styled, { css } from 'styled-components';
-
-export const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 12px;
-  background: ${ props => props.theme.background.neutral };
-  border-radius: ${ props => props.theme.borderRadius };
-`;
-
-export const Title = styled.h6`
-  margin-bottom: 0;
-  font-size: ${ props => props.theme.size.xs };
-  text-transform: uppercase;
-  color: ${ props => props.theme.font.faded };
-`;
-
-export const Times = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-`;
-
-export const Time = styled.button<{ $active: boolean }>`
-  padding: 5px 12px;
-  font-size: ${ props => props.theme.size.s };
-  font-weight: 700;
-  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 };
-  ` }
-`;