@autobusal/routes-order 1.9.0 → 1.9.1

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/Step4/checkAge.ts

@@ -3,12 +3,23 @@ import { error, differenceYears, createDate } from '@autobusal/utilities';
 import { PersonData } from '@autobusal/providers/types/persons';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 
+/**
+ * Edited: Claude - Date: 2026-08-28 (sweep finding, medium)
+ *
+ * ONE SET OF BANDS, the ones the picker advertises in all 15 languages:
+ * adults 12+, children 2-12, babies under 2. This check used to say
+ * adult>=18 / child 3-17 / baby<=2 while the server said something
+ * different again - a 2-year-old could not be booked in any category and
+ * a teenager the copy calls an adult was refused at pay time. The
+ * boundaries mirror obtapi's RulesGeneral::getDob exactly (2nd birthday
+ * makes a child, 12th an adult).
+ */
 const checkAge = (step1: RoutesSearchForm, data: PersonData, t: TFunction<'general'>): boolean => {
   // check adults ages
   for (let i = 1; i <= step1.adults; i++) {
     const age = getAge(data[`adult${ i }_dob`]);
 
-    if (age < 18) {
+    if (age < 12) {
       error(t('routes_order.step4.errors.age'));
       return false;
     }
@@ -18,7 +29,7 @@ const checkAge = (step1: RoutesSearchForm, data: PersonData, t: TFunction<'gener
   for (let i = 1; i <= step1.children; i++) {
     const age = getAge(data[`child${ i }_dob`])
 
-    if (age < 3 || age > 17) {
+    if (age < 2 || age >= 12) {
       error(t('routes_order.step4.errors.age'));
       return false;
     }
@@ -28,7 +39,7 @@ const checkAge = (step1: RoutesSearchForm, data: PersonData, t: TFunction<'gener
   for (let i = 1; i <= step1.babies; i++) {
     const age = getAge(data[`baby${ i }_dob`]);
 
-    if (age > 2) {
+    if (age >= 2) {
       error(t('routes_order.step4.errors.age'));
       return false;
     }
@@ -45,4 +56,4 @@ const getAge = (date: string | number): number => {
   return age;
 };
 
-export default checkAge;
+export default checkAge;

package/Step5/Addons/Addons.tsx

@@ -1,23 +1,40 @@
 import { TFunction } from 'i18next';
-import { RiWhatsappLine, RiTelegramLine } from 'react-icons/ri';
+import { useState } from 'react';
+import { RiWhatsappLine, RiTelegramLine, RiMessage2Line, RiCalendarCheckLine, RiArrowUpSLine, RiArrowDownSLine } from 'react-icons/ri';
+import { FlexOffer } from '@autobusal/providers/types/routes';
 import { SubTitle } from '../../styles';
-import { Container, Option, Notice } from './styles';
+import { Container, Option, Notice, Terms, Term, FlexHeader, FlexTitle, FlexToggle, FlexPrice, FlexAdd, FlexDetails } from './styles';
 
 interface AddonsData {
   whatsapp: { available: boolean, price: number }
   telegram: { available: boolean, price: number }
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-05
+   * The paid per-order CONFIRMATION by SMS. Route alerts over SMS are free
+   * and reach every passenger who gave a phone number - this is only the
+   * text that confirms the booking. Optional so an older settings payload
+   * does not crash the checkout.
+   */
+  sms?: { available: boolean, price: number }
 }
 
 interface Props {
   data?: AddonsData
+  flexOffer?: FlexOffer
   currency: string
   whatsapp: boolean
   whatsappNumber: string
   telegram: boolean
+  sms: boolean
+  smsNumber: string
+  flex: boolean
   t: TFunction<'common'>
   onChangeWhatsapp: (value: boolean) => void
   onChangeWhatsappNumber: (value: string) => void
   onChangeTelegram: (value: boolean) => void
+  onChangeSms: (value: boolean) => void
+  onChangeSmsNumber: (value: string) => void
+  onChangeFlex: (value: boolean) => void
 }
 
 // Edited: Ferjolt Ozuni - Date: 2026-07-25
@@ -25,8 +42,24 @@ interface Props {
 // enabled (an empty box would be confusing). The WhatsApp addon collects
 // the number here; Telegram is a "connect after purchase" flow (a bot
 // can't message a bare phone number cold), so it's just a checkbox.
-const Addons = ({ data, currency, whatsapp, whatsappNumber, telegram, t, onChangeWhatsapp, onChangeWhatsappNumber, onChangeTelegram }: Props): (JSX.Element | null) => {
-  if (!data || (!data.whatsapp.available && !data.telegram.available)) {
+const Addons = ({ data, flexOffer, currency, whatsapp, whatsappNumber, telegram, sms, smsNumber, flex, t, onChangeWhatsapp, onChangeWhatsappNumber, onChangeTelegram, onChangeSms, onChangeSmsNumber, onChangeFlex }: Props): (JSX.Element | null) => {
+  // Edited: Ferjolt Ozuni - Date: 2026-08-03
+  // Flexible Ticket is only on offer where the operators behind the chosen
+  // routes have agreed to honour it, which is a per-booking answer the
+  // settings payload cannot give - hence the separate offer (see
+  // useGetFlex). When it is unavailable nothing renders for it at all,
+  // rather than a disabled row: a checkbox that unlocks nothing is worse
+  // than no checkbox.
+  const hasFlex = flexOffer?.available === true;
+
+  // Closed to begin with. The title, the price and the Add button are the
+  // decision; the windows and the small print are for somebody who wants to
+  // check before making it.
+  const [ open, setOpen ] = useState<boolean>(false);
+
+  const hasSms = data?.sms?.available === true;
+
+  if (!data || (!data.whatsapp.available && !data.telegram.available && !hasSms && !hasFlex)) {
     return null;
   }
 
@@ -52,9 +85,15 @@ const Addons = ({ data, currency, whatsapp, whatsappNumber, telegram, t, onChang
 
           <Notice>{ t('routes_order.step5.addons.whatsapp.description') }</Notice>
 
+          { /* Edited: Claude - Date: 2026-08-19
+               The number fields below have no visible label of their own -
+               they appear under the checkbox they belong to - so the
+               placeholder wording is repeated as an accessible name rather
+               than leaving them unnamed. */ }
           { whatsapp && (
             <input
               type="text"
+              aria-label={ t('routes_order.step5.addons.whatsapp.phone_placeholder') }
               placeholder={ t('routes_order.step5.addons.whatsapp.phone_placeholder') }
               value={ whatsappNumber }
               onChange={ (event) => onChangeWhatsappNumber(event.target.value) }
@@ -80,6 +119,109 @@ const Addons = ({ data, currency, whatsapp, whatsappNumber, telegram, t, onChang
           <Notice>{ t('routes_order.step5.addons.telegram.description') }</Notice>
         </Option>
       ) }
+
+      { /* Edited: Ferjolt Ozuni - Date: 2026-08-05
+           The CONFIRMATION text, not route alerts - those are free and go to
+           every passenger who left a phone number, whether or not anything
+           was bought here. The description says so, because "SMS
+           notifications" as a paid line would otherwise read as buying the
+           delay warnings too.
+
+           Prefilled from the passenger phone the form above already
+           collected, and still editable: somebody booking for a relative
+           wants the text to reach the traveller. */ }
+      { hasSms && (
+        <Option>
+          <label>
+            <input
+              type="checkbox"
+              checked={ sms }
+              onChange={ (event) => onChangeSms(event.target.checked) }
+            />
+
+            <RiMessage2Line />
+
+            { t('routes_order.step5.addons.sms.label') } (+{ data.sms?.price } { currency })
+          </label>
+
+          <Notice>{ t('routes_order.step5.addons.sms.description') }</Notice>
+
+          { sms && (
+            <input
+              type="text"
+              aria-label={ t('routes_order.step5.addons.sms.phone_placeholder') }
+              placeholder={ t('routes_order.step5.addons.sms.phone_placeholder') }
+              value={ smsNumber }
+              onChange={ (event) => onChangeSmsNumber(event.target.value) }
+            />
+          ) }
+        </Option>
+      ) }
+
+      { hasFlex && (
+        <Option>
+          <FlexHeader>
+            <FlexTitle>
+              <RiCalendarCheckLine />
+
+              { t('routes_order.step5.flex.title') }
+
+              <FlexPrice>{ flexOffer?.price_display }</FlexPrice>
+            </FlexTitle>
+
+            <FlexAdd type="button" $added={ flex } onClick={ () => onChangeFlex(!flex) }>
+              { flex ? t('routes_order.step5.flex.remove') : t('routes_order.step5.flex.add') }
+            </FlexAdd>
+          </FlexHeader>
+
+          {/*
+            * Deliberately OUTSIDE the collapse. Everything else here is
+            * detail somebody can choose to read, but this one line is the
+            * material fact - a buyer is being asked to pay for a right they
+            * would otherwise not have, and hiding what they get for nothing
+            * behind a toggle is the shape of a dark pattern rather than a
+            * tidy layout.
+            */}
+          <Notice>{ t('routes_order.step5.flex.default') }</Notice>
+
+          <FlexToggle type="button" aria-expanded={ open } onClick={ () => setOpen(!open) }>
+            { open ? t('routes_order.step5.flex.less') : t('routes_order.step5.flex.more') }
+
+            { open ? <RiArrowUpSLine /> : <RiArrowDownSLine /> }
+          </FlexToggle>
+
+          { open && (
+            <FlexDetails>
+              <Terms>
+                { flexOffer?.refund_hours != null && (
+                  <Term>{ t('routes_order.step5.flex.refund', { hours: flexOffer.refund_hours }) }</Term>
+                ) }
+
+                {/*
+                  * Either half can be absent on its own. An operator who
+                  * will move a booking but not refund it is a real case, and
+                  * listing only what this booking actually includes is the
+                  * difference between an offer and a misrepresentation.
+                  */}
+                { flexOffer?.reschedule_hours != null && (
+                  <Term>{ t('routes_order.step5.flex.reschedule', { hours: flexOffer.reschedule_hours }) }</Term>
+                ) }
+              </Terms>
+
+              <Notice>{ t('routes_order.step5.flex.nonrefundable') }</Notice>
+
+              {/*
+                * Statutory rights when the OPERATOR cancels are untouched by
+                * this and by anything else sold here. Saying so is both
+                * accurate and reassuring; leaving it out would imply the
+                * add-on is what grants them.
+                */}
+              <Notice>{ t('routes_order.step5.flex.carrier') }</Notice>
+            </FlexDetails>
+          ) }
+        </Option>
+      ) }
+
     </Container>
   );
 };

package/Step5/Addons/styles.ts

@@ -30,3 +30,97 @@ export const Notice = styled.div`
   font-size: ${ props => props.theme.size.xs };
   color: ${ props => props.theme.font.faded };
 `;
+
+/**
+ * What the add-on actually unlocks, as a short list.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ * A list rather than a sentence because the two windows can differ, and
+ * because either can be absent - prose would have to be rewritten for each
+ * combination, a list simply gets shorter.
+ */
+export const Terms = styled.ul`
+  margin: 8px 0 10px;
+  padding: 0 0 0 18px;
+  list-style: disc;
+`;
+
+export const Term = styled.li`
+  margin: 2px 0;
+  font-size: 14px;
+  line-height: 1.5;
+`;
+
+/**
+ * The Flexible Ticket row: what it is and its price on the left, the
+ * decision on the right.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * A button rather than a checkbox, because this is not the same kind of
+ * choice as the notification add-ons beside it - those are a cheap tick, this
+ * one changes what the ticket IS. The two halves are separate controls on
+ * purpose: reading the terms must never be a way to accidentally buy them.
+ */
+export const FlexHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+`;
+
+export const FlexTitle = styled.span`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 700;
+`;
+
+/**
+ * "Read More", small and quiet, under the one line that always shows.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ * Its own control rather than the title, so the thing you click to READ is
+ * never next to the thing you click to BUY.
+ */
+export const FlexToggle = styled.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-top: 4px;
+  margin-left: 22px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: ${ props => props.theme.primary.normal };
+  font-family: inherit;
+  font-size: ${ props => props.theme.size.xs };
+  cursor: pointer;
+  text-decoration: underline;
+`;
+
+export const FlexPrice = styled.span`
+  font-weight: 700;
+  white-space: nowrap;
+`;
+
+export const FlexAdd = styled.button<{ $added: boolean }>`
+  flex: 0 0 auto;
+  padding: 6px 16px;
+  border-radius: 4px;
+  border: 1px solid ${ props => props.theme.primary.normal };
+  background: ${ props => props.$added ? 'transparent' : props.theme.primary.normal };
+  color: ${ props => props.$added ? props.theme.primary.normal : props.theme.primary.contrast };
+  font-family: inherit;
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: 700;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.85;
+  }
+`;
+
+export const FlexDetails = styled.div`
+  margin-left: 22px;
+`;