@autobusal/routes-order 1.32.0 → 1.32.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 1.32.1
+
+### Added
+
+- **A saved-passenger chooser and a "remember this passenger" checkbox**, per passenger rather than per order, because "remember me but not the person I am buying for" is the ordinary case and one control per booking cannot say it. The list is fetched once for the whole checkout, not once per traveller.
+
+  Picking applies the whole person, not the filled parts: a passport left from a previous choice is cleared, because the customer has said who is sitting in that seat. Only fields the route actually collects are written - react-hook-form submits values set for names it never registered, so writing the rest would post a WhatsApp number to a route that never asked for one.
+
+  A journey that needs a field the saved profile lacks says so in the form's own words. `missing` absent means *not measured* and is not treated as "nothing missing".
+
 ## 1.32.0
 
 ### Added

package/Checkout/Checkout.tsx

@@ -24,7 +24,7 @@ import { CouponData } from '@autobusal/providers/types/orders';
 import { TotalData } from '../types';
 import { useUserStore } from '@autobusal/providers/stores/user';
 import { useGetSettings } from '@autobusal/providers/services';
-import { usePostOrder, useGetFlex, useGetPayments } from '../services';
+import { usePostOrder, useGetFlex, useGetPayments, useGetSavedPassengers } from '../services';
 import { addon as commerceAddon, beginCheckout, stash } from '@autobusal/providers/Setup/commerce';
 import { item as commerceItem } from '../commerce';
 
@@ -125,6 +125,38 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
     step1.babies ?? 0
   );
 
+  /**
+   * "Book somebody you have booked before" - saved passengers.
+   *
+   * Edited: Claude - Date: 2026-08-20
+   *
+   * Fetched ONCE here and drilled down rather than asked for inside each
+   * passenger block: a family of five would otherwise be five requests for
+   * one list, and the list is the same list.
+   *
+   * ONLY FOR A SIGNED-IN CUSTOMER. The endpoint is `role:visitor`, so a
+   * guest and a member of staff both get a 404 - a deliberate refusal that
+   * confirms nothing (see obtapi's Account\PassengersController). Deciding
+   * that here, from a fact the app already knows, means the request is never
+   * made for them and there is no failed query on a checkout screen to
+   * accidentally surface.
+   *
+   * The price ids go with it so every row comes back saying what THIS
+   * journey would still have to ask for - see the chooser.
+   */
+  const isCustomer = UserData?.type === 'visitor';
+
+  const { data: SavedData } = useGetSavedPassengers(
+    step2.price.id as number,
+    step3?.price.id as (number | undefined),
+    isCustomer
+  );
+
+  // undefined until the list has landed, which is also what a guest gets and
+  // is exactly the right answer for both: nothing about the feature renders
+  // until there is an account behind it with an answer
+  const saved = isCustomer ? (SavedData?.data ?? []) : undefined;
+
   const addonItems = [
     addonWhatsapp && SettingsData?.addons?.whatsapp.available ? {
       label: t('routes_order.step5.addons.whatsapp.label'),
@@ -280,6 +312,8 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
             fields={ fields }
             busFrom={ busFrom }
             busTo={ busTo }
+            saved={ saved }
+            savedMax={ SavedData?.max }
             t={ t }
             errors={ passenger.formState.errors }
             refs={ passenger.register }

package/Step4/Passenger/Passenger.tsx

@@ -1,10 +1,13 @@
-import { useId } from 'react';
+import { useId, useState } from 'react';
 import { TFunction } from 'i18next';
 import { FieldErrors, FieldValues, UseFormRegister } from 'react-hook-form';
 import { Calendar, Gender, ChooseSeat, Required } from '@autobusal/common';
 import { Validate, Display } from '@autobusal/utilities';
+import Choose from '../Saved/Choose';
+import Remember from '../Saved/Remember';
+import { useGetSavedPassenger } from '../../services';
 import { Container, Title, Notice } from './styles';
-import { PersonData } from '@autobusal/providers/types/persons';
+import { PersonData, SavedPassenger, SavedPassengerRecord } from '@autobusal/providers/types/persons';
 import { OccupiedData } from '@autobusal/providers/types/buses';
 
 interface Props {
@@ -17,6 +20,17 @@ interface Props {
   busTo: OccupiedData
   pickedFrom: number[]
   pickedTo: number[]
+  /**
+   * Edited: Claude - Date: 2026-08-20
+   * The travellers this account has saved, or undefined when there is no
+   * account to have saved any - a guest, or a member of staff. UNDEFINED IS
+   * NOT AN EMPTY LIST: an empty list is a customer who has saved nobody yet
+   * and may tick "remember"; undefined is somebody the whole feature does
+   * not apply to, and nothing about it renders.
+   */
+  saved?: SavedPassenger[]
+  /** how many travellers one account may keep (obtapi's own cap) */
+  savedMax?: number
   t: TFunction<'public'>
   errors: FieldErrors<FieldValues>
   refs: UseFormRegister<PersonData>
@@ -30,7 +44,7 @@ interface Props {
 // telegram render ONLY when the route requires them - and are then
 // required. Name and date of birth stay mandatory always. `fields` is the
 // union of both legs on a return trip (see Step4).
-const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, pickedFrom, pickedTo, t, errors, refs, onSeatSelect, onUpdate }: Props): JSX.Element => {
+const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, pickedFrom, pickedTo, saved, savedMax, t, errors, refs, onSeatSelect, onUpdate }: Props): JSX.Element => {
   const name = `${ type }${ number }`;
 
   const names = {
@@ -43,7 +57,12 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
     whatsapp: `${ name }_wa`,
     telegram: `${ name }_tg`,
     seatDeparture: `${ name }_sd`,
-    seatReturn: `${ name }_sr`
+    seatReturn: `${ name }_sr`,
+
+    // Edited: Claude - Date: 2026-08-20
+    // "Remember this passenger" - obtapi reads `{type}{i}_save` alongside
+    // the `_fn` / `_pass` fields this form already posts.
+    save: `${ name }_save`
   };
 
   const has = (field: string): boolean => fields.includes(field);
@@ -62,20 +81,161 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
   const id = (field: string): string => `${ uid }${ field }`;
 
+  /**
+   * "Book somebody you have booked before" - the saved-passenger chooser.
+   *
+   * Edited: Claude - Date: 2026-08-20
+   *
+   * `picked` is the row currently filling these fields; `applied` counts how
+   * many times a choice has been applied, and exists only to key the two
+   * controls below that cannot be told a new value.
+   *
+   * WHY A KEY AT ALL. Every field here is uncontrolled - a defaultValue plus
+   * a react-hook-form registration - so nothing re-reads its default on a
+   * re-render, which is exactly right while somebody is typing and exactly
+   * wrong the moment they pick a different traveller. Remounting on a new
+   * key is what makes the visible form agree with the form's data, and it is
+   * done per field rather than by remounting the passenger, because the seat
+   * pickers hold state of their own that a chosen name has nothing to do
+   * with.
+   */
+  const [ picked, setPicked ] = useState<number>(0);
+  const [ applied, setApplied ] = useState<number>(0);
+  const [ record, setRecord ] = useState<SavedPassengerRecord | undefined>(undefined);
+
+  const { mutate: Fetch, isPending: isFetching } = useGetSavedPassenger();
+
+  /**
+   * What a field starts as: the chosen traveller's value once somebody has
+   * chosen one, otherwise whatever was typed before leaving this screen.
+   */
+  const start = (field: string, chosen?: (string | number | null)): string => {
+    if (record !== undefined) {
+      return chosen === null || chosen === undefined ? '' : String(chosen);
+    }
+
+    return values !== undefined ? String(values[field] ?? '') : '';
+  };
+
+  /**
+   * Apply a chosen traveller to this passenger's fields.
+   *
+   * THE WHOLE PERSON, NOT THE PARTS THAT HAPPEN TO BE FILLED. The customer
+   * has said who is sitting in this seat, so a passport left over from the
+   * previous choice is not theirs and is cleared rather than kept - the
+   * chooser's notice says what is now missing, which is a far better answer
+   * than a form quietly carrying one traveller's document under another
+   * traveller's name.
+   *
+   * The values are written BEFORE the remount so react-hook-form and the
+   * freshly mounted inputs start from the same answer, whichever of the two
+   * the library chooses to trust when a registered field reappears.
+   */
+  const apply = (chosen: SavedPassengerRecord): void => {
+    onUpdate(names.firstName, chosen.first_name);
+    onUpdate(names.lastName, chosen.last_name);
+    onUpdate(names.dob, chosen.dob);
+
+    // ONLY THE FIELDS THIS ROUTE COLLECTS. react-hook-form keeps a value set
+    // for a name it never registered and submits it with the rest, so writing
+    // all five here would post a WhatsApp number on a route that never asked
+    // for one - and obtapi's capture-at-checkout merges whatever it is sent.
+    // The form should post exactly what it shows.
+    if (has('sex')) {
+      // 0 is a perfectly good answer here, so this tests for null rather than
+      // for falsiness. A traveller with no stored sex leaves the control at
+      // its own default and is reported by `missing` instead.
+      onUpdate(names.sex, chosen.sex === null ? 0 : chosen.sex);
+    }
+
+    if (has('passport')) {
+      onUpdate(names.passport, chosen.passport ?? '');
+    }
+
+    if (has('phone')) {
+      onUpdate(names.phone, chosen.phone ?? '');
+    }
+
+    if (has('whatsapp')) {
+      onUpdate(names.whatsapp, chosen.whatsapp ?? '');
+    }
+
+    if (has('telegram')) {
+      onUpdate(names.telegram, chosen.telegram ?? '');
+    }
+
+    setRecord(chosen);
+    setApplied(applied + 1);
+  };
+
+  /**
+   * A pick is a fetch, because the list does not carry passport numbers -
+   * obtapi masks them there and returns the real one for one traveller at a
+   * time, at this exact moment. Choosing the blank option clears back to an
+   * empty form rather than leaving the last traveller's details behind under
+   * a chooser that no longer names them.
+   */
+  const onPick = (id: number): void => {
+    setPicked(id);
+
+    if (id === 0) {
+      onUpdate(names.firstName, '');
+      onUpdate(names.lastName, '');
+      onUpdate(names.dob, '');
+
+      ['passport', 'phone', 'whatsapp', 'telegram'].forEach(field => {
+        if (has(field)) {
+          onUpdate(names[field as keyof typeof names], '');
+        }
+      });
+
+      setRecord(undefined);
+      setApplied(applied + 1);
+
+      return;
+    }
+
+    Fetch(id, {
+      onSuccess: (data) => apply(data)
+    });
+  };
+
+  // An account at its cap can still MERGE into a traveller it already has -
+  // obtapi only refuses new people - so the box is only closed off when
+  // nobody has been chosen to merge into.
+  const full = saved !== undefined && savedMax !== undefined && savedMax > 0 && saved.length >= savedMax && picked === 0;
+
   return (
     <Container className="box">
       <Title>
         { `${ t('routes_order.step4.ticket', { no: number }) } (${ t(`data.persons.${ type }.singular`) })` }
       </Title>
 
+      { /* Edited: Claude - Date: 2026-08-20
+           Only for a signed-in customer who has actually saved somebody -
+           `saved` is undefined for a guest or for staff, and an empty list
+           is an account with nobody on it yet. Either way nothing renders,
+           so the form a first-time buyer sees is the form they saw before. */ }
+      { (saved !== undefined && saved.length > 0) && (
+        <Choose
+          passengers={ saved }
+          picked={ picked }
+          id={ id('saved_choose') }
+          pending={ isFetching }
+          t={ t }
+          onPick={ onPick }
+        />
+      ) }
+
       <div className="column">
         <div className="row">
           <Required htmlFor={ id(names.firstName) }>{ t('routes_order.step4.first_name') }</Required>
 
           <input
             type="text"
+            key={ `${ names.firstName }-${ applied }` }
             id={ id(names.firstName) }
-            defaultValue={ values !== undefined ? values[names.firstName] : '' }
+            defaultValue={ start(names.firstName, record?.first_name) }
             { ...refs(names.firstName, Validate('required|min_length:2|max_length:100', t)) }
           />
 
@@ -87,8 +247,9 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
           <input
             type="text"
+            key={ `${ names.lastName }-${ applied }` }
             id={ id(names.lastName) }
-            defaultValue={ values !== undefined ? values[names.lastName] : '' }
+            defaultValue={ start(names.lastName, record?.last_name) }
             { ...refs(names.lastName, Validate('required|min_length:2|max_length:100', t)) }
           />
 
@@ -101,10 +262,11 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
           <Required htmlFor={ id(names.dob) }>{ t('routes_order.step4.dob') }</Required>
 
           <Calendar
+            key={ `${ names.dob }-${ applied }` }
             type="dob"
             name={ names.dob }
             id={ id(names.dob) }
-            defaultValue={ values !== undefined ? String(values[names.dob]) : undefined }
+            defaultValue={ record !== undefined ? record.dob : (values !== undefined ? String(values[names.dob]) : undefined) }
             t={ t }
             validation="required"
             refs={ refs }
@@ -119,8 +281,9 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
             { t('routes_order.step4.gender') }
 
             <Gender
+              key={ `${ names.sex }-${ applied }` }
               name={ names.sex }
-              defaultValue={ values !== undefined ? Number(values[names.sex]) : undefined }
+              defaultValue={ record !== undefined ? (record.sex ?? undefined) : (values !== undefined ? Number(values[names.sex]) : undefined) }
               t={ t }
               refs={ refs }
             />
@@ -138,8 +301,9 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
               <input
                 type="text"
+                key={ `${ names.passport }-${ applied }` }
                 id={ id(names.passport) }
-                defaultValue={ values !== undefined ? values[names.passport] : '' }
+                defaultValue={ start(names.passport, record?.passport) }
                 { ...refs(names.passport, Validate('required|min_length:2|max_length:50', t)) }
               />
 
@@ -153,8 +317,9 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
               <input
                 type="text"
+                key={ `${ names.phone }-${ applied }` }
                 id={ id(names.phone) }
-                defaultValue={ values !== undefined ? values[names.phone] : '' }
+                defaultValue={ start(names.phone, record?.phone) }
                 { ...refs(names.phone, Validate('required|min_length:5|max_length:50', t)) }
               />
 
@@ -180,8 +345,9 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
               <input
                 type="text"
+                key={ `${ names.whatsapp }-${ applied }` }
                 id={ id(names.whatsapp) }
-                defaultValue={ values !== undefined ? values[names.whatsapp] : '' }
+                defaultValue={ start(names.whatsapp, record?.whatsapp) }
                 { ...refs(names.whatsapp, Validate('required|min_length:5|max_length:50', t)) }
               />
 
@@ -195,8 +361,9 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
               <input
                 type="text"
+                key={ `${ names.telegram }-${ applied }` }
                 id={ id(names.telegram) }
-                defaultValue={ values !== undefined ? values[names.telegram] : '' }
+                defaultValue={ start(names.telegram, record?.telegram) }
                 { ...refs(names.telegram, Validate('required|min_length:2|max_length:100', t)) }
               />
 
@@ -247,6 +414,23 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
           ) }
         </div>
       ) }
+
+      { /* Edited: Claude - Date: 2026-08-20
+           At the foot of the passenger it applies to, so the question and
+           the passport number it would store are read in one glance. Only
+           for a signed-in customer: a guest has no account to save into, and
+           obtapi's Libraries\Passengers\Capture skips staff accounts for a
+           different reason - selling to a walk-in traveller must not
+           accumulate that person's documents under the agency. */ }
+      { saved !== undefined && (
+        <Remember
+          name={ names.save }
+          id={ id(names.save) }
+          full={ full }
+          t={ t }
+          refs={ refs }
+        />
+      ) }
     </Container>
   );
 };

package/Step4/Passengers/Display.tsx

@@ -1,7 +1,7 @@
 import { TFunction } from 'i18next';
 import { FieldErrors, FieldValues, UseFormRegister } from 'react-hook-form';
 import Passenger from '../Passenger/Passenger';
-import { PersonData } from '@autobusal/providers/types/persons';
+import { PersonData, SavedPassenger } from '@autobusal/providers/types/persons';
 import { OccupiedData } from '@autobusal/providers/types/buses';
 
 interface Props {
@@ -14,6 +14,8 @@ interface Props {
   busTo: OccupiedData
   pickedFrom: number[]
   pickedTo: number[]
+  saved?: SavedPassenger[]
+  savedMax?: number
   t: TFunction<'public'>
   errors: FieldErrors<FieldValues>
   refs: UseFormRegister<PersonData>
@@ -21,7 +23,7 @@ interface Props {
   onUpdate: (name: string, value: (string | number)) => void
 }
 
-const Display = ({ type, amount, fields, withReturn, values, busFrom, busTo, pickedFrom, pickedTo, t, errors, refs, onSeatSelect, onUpdate }: Props): JSX.Element[] => {
+const Display = ({ type, amount, fields, withReturn, values, busFrom, busTo, pickedFrom, pickedTo, saved, savedMax, t, errors, refs, onSeatSelect, onUpdate }: Props): JSX.Element[] => {
   const passengers: JSX.Element[] = [];
 
   for (let i = 1; i <= amount; i++) {
@@ -37,6 +39,8 @@ const Display = ({ type, amount, fields, withReturn, values, busFrom, busTo, pic
         busTo={ busTo }
         pickedFrom={ pickedFrom }
         pickedTo={ pickedTo }
+        saved={ saved }
+        savedMax={ savedMax }
         t={ t }
         errors={ errors }
         refs={ refs }

package/Step4/Passengers/Passengers.tsx

@@ -4,7 +4,7 @@ import { FieldErrors, FieldValues, UseFormRegister } from 'react-hook-form';
 import Display from './Display';
 import { Container } from './styles';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
-import { PersonData } from '@autobusal/providers/types/persons';
+import { PersonData, SavedPassenger } from '@autobusal/providers/types/persons';
 import { OccupiedData } from '@autobusal/providers/types/buses';
 
 interface Props {
@@ -13,13 +13,21 @@ interface Props {
   fields: string[]
   busFrom: OccupiedData
   busTo: OccupiedData
+  /**
+   * Edited: Claude - Date: 2026-08-20
+   * This account's saved travellers, drilled to every passenger block so the
+   * list is fetched once for the checkout rather than once per seat.
+   * Undefined for a guest or for staff - see Passenger.tsx.
+   */
+  saved?: SavedPassenger[]
+  savedMax?: number
   t: TFunction<'public'>
   errors: FieldErrors<FieldValues>
   refs: UseFormRegister<PersonData>
   onUpdate: (name: string, value: (string | number)) => void
 }
 
-const Passengers = ({ values, step1, fields, busFrom, busTo, t, errors, refs, onUpdate }: Props): JSX.Element => {
+const Passengers = ({ values, step1, fields, busFrom, busTo, saved, savedMax, t, errors, refs, onUpdate }: Props): JSX.Element => {
   const [ pickedFrom, setPickedFrom ] = useState<number[]>([]);
   const [ pickedTo, setPickedTo ] = useState<number[]>([]);
 
@@ -53,6 +61,8 @@ const Passengers = ({ values, step1, fields, busFrom, busTo, t, errors, refs, on
         busTo={ busTo }
         pickedFrom={ pickedFrom }
         pickedTo={ pickedTo }
+        saved={ saved }
+        savedMax={ savedMax }
         t={ t }
         errors={ errors }
         refs={ refs }
@@ -70,6 +80,8 @@ const Passengers = ({ values, step1, fields, busFrom, busTo, t, errors, refs, on
         busTo={ busTo }
         pickedFrom={ pickedFrom }
         pickedTo={ pickedTo }
+        saved={ saved }
+        savedMax={ savedMax }
         t={ t }
         errors={ errors }
         refs={ refs }
@@ -87,6 +99,8 @@ const Passengers = ({ values, step1, fields, busFrom, busTo, t, errors, refs, on
         busTo={ busTo }
         pickedFrom={ pickedFrom }
         pickedTo={ pickedTo }
+        saved={ saved }
+        savedMax={ savedMax }
         t={ t }
         errors={ errors }
         refs={ refs }

package/Step4/Saved/Choose.tsx

@@ -0,0 +1,99 @@
+import { TFunction } from 'i18next';
+import { Container, Label, Missing, Hint } from './styles';
+import { SavedPassenger } from '@autobusal/providers/types/persons';
+
+interface Props {
+  /** this account's saved travellers, already measured against this journey */
+  passengers: SavedPassenger[]
+  /** the row currently filling the fields below, 0 for "typing from scratch" */
+  picked: number
+  /** the id to give the select, so the visible label actually points at it */
+  id: string
+  pending: boolean
+  t: TFunction<'common'>
+  onPick: (id: number) => void
+}
+
+/**
+ * The option keys obtapi reports in `missing`, in the order the form asks
+ * for them, paired with the label the form already uses for each. One list,
+ * so the notice cannot name a field by a word that appears nowhere on the
+ * screen it is pointing at.
+ */
+const LABELS: Record<string, string> = {
+  sex: 'routes_order.step4.gender',
+  passport: 'routes_order.step4.passport',
+  phone: 'routes_order.step4.phone',
+  whatsapp: 'routes_order.step4.whatsapp',
+  telegram: 'routes_order.step4.telegram'
+};
+
+/**
+ * "Book somebody you have booked before."
+ *
+ * Edited: Claude - Date: 2026-08-20
+ *
+ * WHAT IT IS FOR. The same families ride the same corridors several times a
+ * year, and every trip has been another round of typing the same passport
+ * number. This turns that into one choice.
+ *
+ * WHO SEES IT. Only a signed-in customer with at least one saved traveller.
+ * The list is not fetched at all for a guest or for staff (see
+ * useGetSavedPassengers), so this component is simply never rendered for
+ * them - the endpoint's 404 for those accounts never reaches a screen. An
+ * account that has saved nobody yet also sees nothing: an empty chooser
+ * above an empty form is one more thing to read and nothing to use.
+ *
+ * A NAMED PERSON IS NOT A COMPLETE ONE, and that is what `missing` is for.
+ * Routes collect different fields, so somebody saved on a route that only
+ * wanted a name has no passport and must still be offerable on a route that
+ * wants one. Rather than quietly filling four of five fields and letting
+ * validation explain the fifth after they press pay, the gap is named here,
+ * in the fields' own words, at the moment they pick.
+ *
+ * `missing` may be ABSENT rather than empty - obtapi omits it when no
+ * journey was named - so it is tested as an array. An undefined `missing`
+ * means "not measured", never "nothing needed", and this says nothing at
+ * all in that case rather than promising a completeness it has not checked.
+ */
+const Choose = ({ passengers, picked, id, pending, t, onPick }: Props): JSX.Element => {
+  const chosen = passengers.find(item => item.id === picked);
+
+  const missing = Array.isArray(chosen?.missing) ? chosen.missing : [];
+
+  const named = missing
+    .filter(field => LABELS[field] !== undefined)
+    .map(field => t(LABELS[field], { ns: 'common' }));
+
+  return (
+    <Container>
+      <Label htmlFor={ id }>{ t('routes_order.step4.saved.choose', { ns: 'common' }) }</Label>
+
+      <select
+        id={ id }
+        value={ picked }
+        disabled={ pending }
+        onChange={ (event) => onPick(Number(event.target.value)) }
+      >
+        <option value={ 0 }>{ t('routes_order.step4.saved.none', { ns: 'common' }) }</option>
+
+        { passengers.map(item => (
+          <option key={ item.id } value={ item.id }>
+            { /* The date of birth is what tells two relatives with the same
+                 name apart, and it is the one thing on a saved row that is
+                 never blank. The passport tail is NOT shown here: the list
+                 is a chooser on a shared screen, and it is enough that the
+                 person can be named. */ }
+            { `${ item.first_name } ${ item.last_name } (${ item.dob })` }
+          </option>
+        )) }
+      </select>
+
+      { named.length > 0
+        ? <Missing>{ t('routes_order.step4.saved.missing', { fields: named.join(', '), ns: 'common' }) }</Missing>
+        : <Hint>{ t('routes_order.step4.saved.hint', { ns: 'common' }) }</Hint> }
+    </Container>
+  );
+};
+
+export default Choose;

package/Step4/Saved/Remember.tsx

@@ -0,0 +1,58 @@
+import { TFunction } from 'i18next';
+import { UseFormRegister } from 'react-hook-form';
+import { Remember as Container } from './styles';
+import { PersonData } from '@autobusal/providers/types/persons';
+
+interface Props {
+  /** the checkout field this posts as - adult1_save, child2_save, ... */
+  name: string
+  id: string
+  /** whether this account is already at its limit, and cannot store another */
+  full: boolean
+  t: TFunction<'common'>
+  refs: UseFormRegister<PersonData>
+}
+
+/**
+ * "Remember this passenger for next time."
+ *
+ * Edited: Claude - Date: 2026-08-20
+ *
+ * OFF BY DEFAULT, and there is no version of this that is not. What the box
+ * stores is a passport number and a date of birth, frequently belonging to
+ * somebody who is not the buyer - a family books together, and grandmother
+ * did not agree to anything. Nobody is opted into keeping an identity
+ * document on file because they did not notice a tick.
+ *
+ * PER PASSENGER, for the same reason. "Remember me but not the person I am
+ * buying a ticket for" is an ordinary thing to want, and one checkbox for
+ * the whole order cannot say it. That is why this renders inside the
+ * passenger it belongs to rather than beside the paid add-ons.
+ *
+ * NOT REGISTERED WITH A `value`. react-hook-form hands back the value
+ * attribute for a ticked checkbox and `false` for an unticked one; with no
+ * value attribute it is a plain true/false, which is exactly the
+ * `nullable|boolean` obtapi validates this field as (Orders\Make\Rules) and
+ * exactly the set Libraries\Passengers\Capture treats as a yes.
+ *
+ * Rendered only for a signed-in customer - the caller decides that, from the
+ * same fact that decides whether the chooser above appears.
+ */
+const Remember = ({ name, id, full, t, refs }: Props): JSX.Element => (
+  <Container>
+    <label htmlFor={ id }>
+      <input
+        type="checkbox"
+        id={ id }
+        disabled={ full }
+        { ...refs(name) }
+      />
+
+      { full
+        ? t('routes_order.step4.saved.full', { ns: 'common' })
+        : t('routes_order.step4.saved.remember', { ns: 'common' }) }
+    </label>
+  </Container>
+);
+
+export default Remember;

package/Step4/Saved/styles.ts

@@ -0,0 +1,87 @@
+import styled from 'styled-components';
+
+/**
+ * "Book this person again" - the saved-passenger chooser.
+ *
+ * Edited: Claude - Date: 2026-08-20
+ *
+ * UNOBTRUSIVE ON PURPOSE. It sits above the fields it fills, and for a
+ * first-time buyer - which is most of them - it is not rendered at all. It
+ * is a shortcut past a form, not a step in one, so it is quieter than the
+ * form: no box of its own, no heading, and it never takes the visual weight
+ * of a required field away from the fields that are actually required.
+ */
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+  margin-bottom: 16px;
+  border: 1px dashed ${ props => props.theme.background.neutral };
+  border-radius: 6px;
+
+  select {
+    max-width: 320px;
+  }
+`;
+
+export const Label = styled.label`
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: 600;
+`;
+
+/**
+ * What this journey still needs from a traveller we already know.
+ *
+ * Amber rather than red: nothing has gone wrong and nothing has been
+ * refused - the person was saved on a route that never asked for a passport
+ * and this one does. It is an instruction, not an error, so it does not
+ * borrow the styling of the validation messages sitting a few pixels below
+ * it.
+ */
+export const Missing = styled.small`
+  display: block;
+  margin-top: 2px;
+  font-size: ${ props => props.theme.size.xxs };
+  font-weight: 400;
+  line-height: 1.4;
+  color: ${ props => props.theme.font.warning };
+`;
+
+export const Hint = styled.small`
+  display: block;
+  font-size: ${ props => props.theme.size.xxs };
+  font-weight: 400;
+  line-height: 1.4;
+  color: ${ props => props.theme.font.faded };
+`;
+
+/**
+ * "Remember this passenger for next time".
+ *
+ * Edited: Claude - Date: 2026-08-20
+ *
+ * At the FOOT of the passenger it applies to rather than beside the paid
+ * add-ons, because it is a question about this person and not about the
+ * order - and because a checkbox that stores somebody's passport number
+ * should be read in the same glance as the passport number it would store.
+ */
+export const Remember = styled.div`
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid ${ props => props.theme.background.neutral };
+
+  label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: ${ props => props.theme.size.xs };
+    font-weight: 400;
+    cursor: pointer;
+  }
+
+  input {
+    width: auto;
+    margin: 0;
+  }
+`;

package/package.json

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

package/services.ts

@@ -4,7 +4,7 @@ import { apiClient } from '@autobusal/providers';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { FoundData, FlexOffer } from '@autobusal/providers/types/routes';
 import { CouponData } from '@autobusal/providers/types/orders';
-import { BillingData, PersonData } from '@autobusal/providers/types/persons';
+import { BillingData, PersonData, SavedPassengerRecord, SavedPassengersData } from '@autobusal/providers/types/persons';
 import { FoundDay, ActionData, SaveData, OrderedData, CouponForm, AddonsSelection, AlternativesData, PriceAlertRequest, PriceAlertData } from './types';
 
 export const useGetDepartures = (data: RoutesSearchForm): UseQueryResult<FoundData[]> => (
@@ -313,3 +313,77 @@ export const usePostPriceAlert = (): UseMutationResult<PriceAlertData, AxiosErro
     retry: false
   })
 );
+
+/**
+ * The travellers this account has saved, measured against THIS journey.
+ *
+ * Edited: Claude - Date: 2026-08-20
+ *
+ * The price ids are what make the answer journey-specific: obtapi puts a
+ * `missing` array on every row naming the fields these particular routes
+ * collect and this particular saved traveller has not got (see
+ * Account\PassengersController::browse). Without them the rows come back
+ * with no `missing` key at all, which is a different answer from an empty
+ * one - so they are always sent from here.
+ *
+ * `enabled` is the whole gate, and it is not an optimisation. The endpoint
+ * is `role:visitor`, so a guest or a member of staff gets a 404 - a correct
+ * refusal that confirms nothing, and one this UI must never turn into an
+ * error on somebody's checkout. Not asking is the only way to be sure of
+ * that; `retry: false` covers the case where the account changes underneath
+ * a query already in flight.
+ */
+export const useGetSavedPassengers = (
+  departurePriceId: (number | undefined),
+  returnPriceId: (number | undefined),
+  enabled: boolean
+): UseQueryResult<SavedPassengersData> => (
+  useQuery({
+    queryKey: ['saved-passengers-checkout', { departurePriceId, returnPriceId }],
+    enabled: enabled && departurePriceId !== undefined,
+    retry: false,
+    queryFn: async () => (
+      await apiClient
+        .get('/api/account/passengers/browse', {
+          params: {
+            departure_price_id: departurePriceId,
+            return_price_id: returnPriceId
+          }
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+/**
+ * One saved traveller, passport included.
+ *
+ * Edited: Claude - Date: 2026-08-20
+ *
+ * A mutation for a GET, deliberately. This is not data the screen renders -
+ * it is fetched at the moment somebody picks a name out of the chooser, and
+ * what comes back is written into a form rather than displayed. A query
+ * would need the chosen id in render state and an effect to notice it
+ * landing; `mutate(id, { onSuccess })` is the same fetch with the answer
+ * arriving where the decision was made.
+ *
+ * This is also the ONLY request in the app that returns a stored passport
+ * number, which is why it is one traveller at a time and only after a
+ * customer has said who is sitting in this seat.
+ */
+export const useGetSavedPassenger = (): UseMutationResult<SavedPassengerRecord, Error, number, unknown> => (
+  useMutation({
+    mutationKey: ['saved-passenger-record'],
+    mutationFn: async (id: number) => (
+      await apiClient
+        .get('/api/account/passengers/get', {
+          params: { id }
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);