@autobusal/routes-order 1.8.0 → 1.9.1

package/Step4/Passenger/Passenger.tsx

@@ -1,9 +1,13 @@
+import { useId, useState } from 'react';
 import { TFunction } from 'i18next';
 import { FieldErrors, FieldValues, UseFormRegister } from 'react-hook-form';
-import { Calendar, Gender, ChooseSeat } from '@autobusal/common';
+import { Calendar, Gender, ChooseSeat, Required } from '@autobusal/common';
 import { Validate, Display } from '@autobusal/utilities';
-import { Container, Title } from './styles';
-import { PersonData } from '@autobusal/providers/types/persons';
+import Choose from '../Saved/Choose';
+import Remember from '../Saved/Remember';
+import { useGetSavedPassenger } from '../../services';
+import { Container, Title, Notice } from './styles';
+import { PersonData, SavedPassenger, SavedPassengerRecord } from '@autobusal/providers/types/persons';
 import { OccupiedData } from '@autobusal/providers/types/buses';
 
 interface Props {
@@ -16,6 +20,20 @@ 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
+  /** seat-selection add-on: picking optional, `seatsFee` on the CTA */
+  seatsOptional?: boolean
+  seatsFee?: string
   t: TFunction<'public'>
   errors: FieldErrors<FieldValues>
   refs: UseFormRegister<PersonData>
@@ -29,7 +47,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, seatsOptional, seatsFee, t, errors, refs, onSeatSelect, onUpdate }: Props): JSX.Element => {
   const name = `${ type }${ number }`;
 
   const names = {
@@ -42,24 +60,185 @@ 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);
 
+  /**
+   * Edited: Claude - Date: 2026-08-19
+   * Every field here was rendered as a bare <input> beside its label text,
+   * with no id and no association - so a screen reader announced the whole
+   * passenger block as a run of unnamed "edit text". The field NAMES are
+   * already unique per passenger (adult1_fn, adult2_fn), but they belong to
+   * the form payload; ids are page-global, so they get a useId prefix -
+   * this component renders once per passenger, and two forms on one page
+   * would otherwise emit duplicate ids, which is its own defect.
+   */
+  const uid = useId();
+
+  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">
-          { t('routes_order.step4.first_name') }
+          <Required htmlFor={ id(names.firstName) }>{ t('routes_order.step4.first_name') }</Required>
 
           <input
             type="text"
-            defaultValue={ values !== undefined ? values[names.firstName] : '' }
+            key={ `${ names.firstName }-${ applied }` }
+            id={ id(names.firstName) }
+            defaultValue={ start(names.firstName, record?.first_name) }
             { ...refs(names.firstName, Validate('required|min_length:2|max_length:100', t)) }
           />
 
@@ -67,11 +246,13 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
         </div>
 
         <div className="row">
-          { t('routes_order.step4.last_name') }
+          <Required htmlFor={ id(names.lastName) }>{ t('routes_order.step4.last_name') }</Required>
 
           <input
             type="text"
-            defaultValue={ values !== undefined ? values[names.lastName] : '' }
+            key={ `${ names.lastName }-${ applied }` }
+            id={ id(names.lastName) }
+            defaultValue={ start(names.lastName, record?.last_name) }
             { ...refs(names.lastName, Validate('required|min_length:2|max_length:100', t)) }
           />
 
@@ -81,12 +262,14 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
       <div className="column">
         <div className="row">
-          { t('routes_order.step4.dob') }
+          <Required htmlFor={ id(names.dob) }>{ t('routes_order.step4.dob') }</Required>
 
           <Calendar
+            key={ `${ names.dob }-${ applied }` }
             type="dob"
             name={ names.dob }
-            defaultValue={ values !== undefined ? String(values[names.dob]) : undefined }
+            id={ id(names.dob) }
+            defaultValue={ record !== undefined ? record.dob : (values !== undefined ? String(values[names.dob]) : undefined) }
             t={ t }
             validation="required"
             refs={ refs }
@@ -101,8 +284,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 }
             />
@@ -116,11 +300,13 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
         <div className="column">
           { has('passport') && (
             <div className="row">
-              { t('routes_order.step4.passport') }
+              <Required htmlFor={ id(names.passport) }>{ t('routes_order.step4.passport') }</Required>
 
               <input
                 type="text"
-                defaultValue={ values !== undefined ? values[names.passport] : '' }
+                key={ `${ names.passport }-${ applied }` }
+                id={ id(names.passport) }
+                defaultValue={ start(names.passport, record?.passport) }
                 { ...refs(names.passport, Validate('required|min_length:2|max_length:50', t)) }
               />
 
@@ -130,15 +316,25 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
           { has('phone') && (
             <div className="row">
-              { t('routes_order.step4.phone') }
+              <Required htmlFor={ id(names.phone) }>{ t('routes_order.step4.phone') }</Required>
 
               <input
                 type="text"
-                defaultValue={ values !== undefined ? values[names.phone] : '' }
+                key={ `${ names.phone }-${ applied }` }
+                id={ id(names.phone) }
+                defaultValue={ start(names.phone, record?.phone) }
                 { ...refs(names.phone, Validate('required|min_length:5|max_length:50', t)) }
               />
 
               { Display(errors[names.phone]) }
+
+              { /* Edited: Ferjolt Ozuni - Date: 2026-08-05
+                   Said because the use changed. This number was collected
+                   for the operator to ring; it is now also where a service
+                   SMS goes if the departure moves. Service messages about
+                   this booking only - never marketing, which is what makes
+                   the sentence true. */ }
+              <Notice>{ t('routes_order.step4.phone_notice') }</Notice>
             </div>
           ) }
         </div>
@@ -148,11 +344,13 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
         <div className="column">
           { has('whatsapp') && (
             <div className="row">
-              { t('routes_order.step4.whatsapp') }
+              <Required htmlFor={ id(names.whatsapp) }>{ t('routes_order.step4.whatsapp') }</Required>
 
               <input
                 type="text"
-                defaultValue={ values !== undefined ? values[names.whatsapp] : '' }
+                key={ `${ names.whatsapp }-${ applied }` }
+                id={ id(names.whatsapp) }
+                defaultValue={ start(names.whatsapp, record?.whatsapp) }
                 { ...refs(names.whatsapp, Validate('required|min_length:5|max_length:50', t)) }
               />
 
@@ -162,11 +360,13 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
           { has('telegram') && (
             <div className="row">
-              { t('routes_order.step4.telegram') }
+              <Required htmlFor={ id(names.telegram) }>{ t('routes_order.step4.telegram') }</Required>
 
               <input
                 type="text"
-                defaultValue={ values !== undefined ? values[names.telegram] : '' }
+                key={ `${ names.telegram }-${ applied }` }
+                id={ id(names.telegram) }
+                defaultValue={ start(names.telegram, record?.telegram) }
                 { ...refs(names.telegram, Validate('required|min_length:2|max_length:100', t)) }
               />
 
@@ -179,7 +379,13 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
       { type !== 'baby' && (
         <div className="column">
           <div className="row">
-            { t('seats.departure') }
+            { /* Edited: Claude - Date: 2026-08-26 - with the seat-selection
+                 add-on on, a pick is neither required nor free: the label
+                 drops its required mark and validation, ChooseSeat carries
+                 the fee and a way back to the free automatic seat. */ }
+            { seatsOptional
+              ? <span>{ t('seats.departure') }</span>
+              : <Required>{ t('seats.departure') }</Required> }
 
             <ChooseSeat
               name={ names.seatDeparture }
@@ -187,7 +393,9 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
               defaultValue={ values !== undefined ? Number(values[names.seatDeparture]) : undefined }
               bus={ busFrom }
               picked={ pickedFrom }
-              validation="required|min:1"
+              validation={ seatsOptional ? '' : 'required|min:1' }
+              optional={ seatsOptional }
+              fee={ seatsFee }
               t={ t }
               refs={ refs }
               onUpdate={ onSeatSelect }
@@ -198,7 +406,9 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
           { withReturn && (
             <div className="row">
-              { t('seats.return') }
+              { seatsOptional
+                ? <span>{ t('seats.return') }</span>
+                : <Required>{ t('seats.return') }</Required> }
 
               <ChooseSeat
                 name={ names.seatReturn }
@@ -206,7 +416,9 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
                 defaultValue={ values !== undefined ? Number(values[names.seatReturn]) : undefined }
                 bus={ busTo }
                 picked={ pickedTo }
-                validation="required|min:1"
+                validation={ seatsOptional ? '' : 'required|min:1' }
+                optional={ seatsOptional }
+                fee={ seatsFee }
                 t={ t }
                 refs={ refs }
                 onUpdate={ onSeatSelect }
@@ -217,6 +429,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/Passenger/styles.ts

@@ -7,4 +7,24 @@ export const Container = styled.div`
 export const Title = styled.h3`
   padding-bottom: 16px;
   border-bottom: 1px solid ${ props => props.theme.background.neutral };
-`;
+`;
+
+/**
+ * What the phone number will be used for.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-05
+ *
+ * The number has always been collected so the operator could ring it. It is
+ * now also the number a service SMS goes to when a departure changes, and
+ * that is a different use of the same data - so it is said here, at the
+ * point of collection, rather than assumed. Quiet, but not hidden: a notice
+ * nobody can read is not consent.
+ */
+export const Notice = styled.small`
+  display: block;
+  margin-top: 4px;
+  font-size: ${ props => props.theme.size.xxs };
+  font-weight: 400;
+  line-height: 1.4;
+  color: ${ props => props.theme.font.faded };
+`;

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,14 +14,18 @@ interface Props {
   busTo: OccupiedData
   pickedFrom: number[]
   pickedTo: number[]
+  saved?: SavedPassenger[]
+  savedMax?: number
   t: TFunction<'public'>
   errors: FieldErrors<FieldValues>
   refs: UseFormRegister<PersonData>
+  seatsOptional?: boolean
+  seatsFee?: string
   onSeatSelect: (name: string, type: ('from' | 'to'), seat: number, previous: number) => void
   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, seatsOptional, seatsFee, t, errors, refs, onSeatSelect, onUpdate }: Props): JSX.Element[] => {
   const passengers: JSX.Element[] = [];
 
   for (let i = 1; i <= amount; i++) {
@@ -37,6 +41,10 @@ const Display = ({ type, amount, fields, withReturn, values, busFrom, busTo, pic
         busTo={ busTo }
         pickedFrom={ pickedFrom }
         pickedTo={ pickedTo }
+        saved={ saved }
+        savedMax={ savedMax }
+        seatsOptional={ seatsOptional }
+        seatsFee={ seatsFee }
         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,32 @@ 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
+  /**
+   * Edited: Claude - Date: 2026-08-26
+   * The seat-selection add-on, when this brand sells it: picking becomes
+   * optional (auto-assign is the free default) and each hand-picked seat
+   * costs `seatsFee` (a display string - the server prices the real one).
+   * `onPickedCount` reports how many seats are currently hand-picked, so
+   * the checkout can price the summary line live.
+   */
+  seatsOptional?: boolean
+  seatsFee?: string
+  onPickedCount?: (count: number) => void
   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, seatsOptional, seatsFee, onPickedCount, t, errors, refs, onUpdate }: Props): JSX.Element => {
   const [ pickedFrom, setPickedFrom ] = useState<number[]>([]);
   const [ pickedTo, setPickedTo ] = useState<number[]>([]);
 
@@ -27,10 +46,19 @@ const Passengers = ({ values, step1, fields, busFrom, busTo, t, errors, refs, on
     let newPicked = type === 'from' ? [...pickedFrom] : [...pickedTo];
 
     if (previous > 0) {
-      newPicked = pickedFrom.filter(item => item !== previous);
+      // Edited: Claude - Date: 2026-08-26
+      // Was `pickedFrom.filter(...)` regardless of leg, so re-picking a
+      // RETURN seat rebuilt the return list from the departure's - the
+      // old choice stayed greyed out on the return map and other
+      // passengers' return picks vanished from it.
+      newPicked = newPicked.filter(item => item !== previous);
     }
 
-    newPicked.push(seat);
+    // seat 0 is the add-on's "back to automatic": remove the old pick and
+    // push nothing
+    if (seat > 0) {
+      newPicked.push(seat);
+    }
 
     if (type === 'from') {
       setPickedFrom(newPicked);
@@ -38,6 +66,15 @@ const Passengers = ({ values, step1, fields, busFrom, busTo, t, errors, refs, on
       setPickedTo(newPicked);
     }
 
+    // how many seats are hand-picked RIGHT NOW, for the fee line - built
+    // from the fresh arrays, since state has not committed yet
+    if (onPickedCount) {
+      onPickedCount(
+        (type === 'from' ? newPicked : pickedFrom).length
+        + (type === 'to' ? newPicked : pickedTo).length
+      );
+    }
+
     onUpdate(name, seat);
   };
 
@@ -53,6 +90,10 @@ const Passengers = ({ values, step1, fields, busFrom, busTo, t, errors, refs, on
         busTo={ busTo }
         pickedFrom={ pickedFrom }
         pickedTo={ pickedTo }
+        saved={ saved }
+        savedMax={ savedMax }
+        seatsOptional={ seatsOptional }
+        seatsFee={ seatsFee }
         t={ t }
         errors={ errors }
         refs={ refs }
@@ -70,6 +111,10 @@ const Passengers = ({ values, step1, fields, busFrom, busTo, t, errors, refs, on
         busTo={ busTo }
         pickedFrom={ pickedFrom }
         pickedTo={ pickedTo }
+        saved={ saved }
+        savedMax={ savedMax }
+        seatsOptional={ seatsOptional }
+        seatsFee={ seatsFee }
         t={ t }
         errors={ errors }
         refs={ refs }
@@ -87,6 +132,10 @@ const Passengers = ({ values, step1, fields, busFrom, busTo, t, errors, refs, on
         busTo={ busTo }
         pickedFrom={ pickedFrom }
         pickedTo={ pickedTo }
+        saved={ saved }
+        savedMax={ savedMax }
+        seatsOptional={ seatsOptional }
+        seatsFee={ seatsFee }
         t={ t }
         errors={ errors }
         refs={ refs }