@autobusal/routes-order 1.27.0 → 1.30.0

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # Changelog
 
+## 1.30.0
+
+### Added
+
+- **The SMS booking-confirmation add-on at checkout**, with its own number
+  field prefilled from the passenger phone already collected — somebody
+  booking for a relative wants the text to reach the traveller. The
+  description says the free route alerts are not what is being sold here.
+- **A line under the passenger phone field** saying what the number is used
+  for: reaching you about this trip, and service messages if the departure
+  changes — never marketing. The number was always collected so a driver
+  could ring it; texting it is a different use of the same data, and saying
+  so at the point of collection is what makes it consent rather than an
+  assumption.
+## 1.29.0
+
+### Removed
+
+- **The reviews block on the route-pair page.** A review wall sat in the
+  middle of a page whose job is to compare departures. What a reader needs
+  there about reputation is one number per operator, which the result cards
+  already carry; the reviews themselves belong on the operator's own page,
+  where somebody who wants to read them has gone looking for them. The `pair`
+  mode of the reviews API is untouched — nothing calls it from here now.
+- The "Reviews" entry in the in-page nav, with it.
+
+## 1.28.0
+
+### Added
+
+- **Overnight trips now say so.** A result card that arrives on a later day
+  prints the calendar day under BOTH ends and a `+1` against the arrival
+  time; the pair-page timetable carries the same marker. "22:30 → 06:00" is
+  the one thing on a result card that can be read as the exact opposite of
+  what it means, and the duration beside it does not fix that because nobody
+  reads a duration to work out a date.
+- Nothing is added to a same-day card. A date under every arrival would make
+  the overnight ones stop standing out, which is the only reason this exists.
+
+### Changed
+
+- The day comes from the timetable's own midnight markers, computed
+  server-side, never from "the arrival looks earlier than the departure" —
+  which is wrong for exactly the cross-border journeys whose two ends keep
+  different clocks.
+
 ## 1.27.0
 
 **`reloadDocument` is gone — the results follow the URL.**

package/Checkout/Checkout.tsx

@@ -77,6 +77,8 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
   const [ addonWhatsapp, setAddonWhatsapp ] = useState<boolean>(false);
   const [ addonWhatsappNumber, setAddonWhatsappNumber ] = useState<string>('');
   const [ addonTelegram, setAddonTelegram ] = useState<boolean>(false);
+  const [ addonSms, setAddonSms ] = useState<boolean>(false);
+  const [ addonSmsNumber, setAddonSmsNumber ] = useState<string>('');
   const [ addonFlex, setAddonFlex ] = useState<boolean>(false);
 
   const { data: UserData } = useUserStore();
@@ -118,6 +120,10 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
       label: t('routes_order.step5.addons.telegram.label'),
       price: SettingsData.addons.telegram.price
     } : null,
+    addonSms && SettingsData?.addons?.sms?.available ? {
+      label: t('routes_order.step5.addons.sms.label'),
+      price: SettingsData.addons.sms.price
+    } : null,
     addonFlex && FlexData?.available && FlexData.price !== undefined ? {
       label: t('routes_order.step5.flex.title'),
       price: FlexData.price
@@ -150,6 +156,8 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
     whatsapp: addonWhatsapp,
     whatsappNumber: addonWhatsappNumber,
     telegram: addonTelegram,
+    sms: addonSms,
+    smsNumber: addonSmsNumber,
     flex: addonFlex
   });
 
@@ -271,11 +279,15 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
             whatsapp={ addonWhatsapp }
             whatsappNumber={ addonWhatsappNumber }
             telegram={ addonTelegram }
+            sms={ addonSms }
+            smsNumber={ addonSmsNumber }
             flex={ addonFlex }
             t={ t }
             onChangeWhatsapp={ setAddonWhatsapp }
             onChangeWhatsappNumber={ setAddonWhatsappNumber }
             onChangeTelegram={ setAddonTelegram }
+            onChangeSms={ setAddonSms }
+            onChangeSmsNumber={ setAddonSmsNumber }
             onChangeFlex={ (value) => {
               setAddonFlex(value);
 

package/Facts/types.ts

@@ -37,6 +37,13 @@ export interface ScheduleRow {
   rating: { average: number, count: number } | null
   departure: string | null
   arrival: string | null
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-05
+   * Days between boarding and arriving - 0 same day, 1 the next morning.
+   * A timetable of two clock times per row cannot show an overnight service
+   * without it.
+   */
+  offset?: number
   minutes: number | null
   // 0 is a direct service
   stops: number

package/Found/Group/Group.tsx

@@ -8,6 +8,7 @@ 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
@@ -23,7 +24,7 @@ interface Props {
  * 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, passengers, t, onSave }: Props): JSX.Element => {
+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(() => (
@@ -38,6 +39,7 @@ const Group = ({ items, type, passengers, t, onSave }: Props): JSX.Element => {
     <Route
       type={ type }
       data={ current }
+      date={ date }
       passengers={ passengers }
       t={ t }
       onSave={ onSave }

package/Found/Orders/Orders.tsx

@@ -71,6 +71,16 @@ const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferr
    * Grouping runs AFTER sorting: groupItems keeps input order, so a
    * collapsed set of shuttles lands wherever its best member sorted to.
    */
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-05
+   *
+   * The day these results board on, for the cards that arrive on a later
+   * one. It is the date that was SEARCHED - the same value the strip above
+   * highlights - rather than anything the server sends back, so the two can
+   * never disagree about which day a card is for.
+   */
+  const date = step1[type];
+
   const render = (list: FoundData[], kind: 'favorite' | 'normal'): JSX.Element[] => (
     groupItems(sortItems(list, sort)).map(group => (
       group.length > 1
@@ -79,6 +89,7 @@ const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferr
             key={ group[0].id }
             items={ group }
             type={ kind }
+            date={ date }
             passengers={ passengers }
             t={ t }
             onSave={ onSave }
@@ -89,6 +100,7 @@ const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferr
             key={ group[0].id }
             type={ kind }
             data={ group[0] }
+            date={ date }
             passengers={ passengers }
             t={ t }
             onSave={ onSave }

package/Found/Route/Route.tsx

@@ -6,7 +6,8 @@ import { RiBus2Line } from 'react-icons/ri';
 import { MdOutlineAltRoute } from 'react-icons/md';
 import { formatDuration, splitPrice } from '../refine';
 import { Button, RouteFeature, Information, Rating } from '@autobusal/common';
-import { Container, ButtonDetails, SpecialOffer, FavoriteStop, Trip, Company, Location, Stop, Iso, Time, Price, Amount, Decimals, Currency, PriceNotice, LinkCompany, CodeCompany, Details, Detail, ButtonPolicy, TitleDetail, FeaturesItems, Leaves } from './styles';
+import { createDate, getDayParts } from '@autobusal/utilities';
+import { Container, ButtonDetails, SpecialOffer, FavoriteStop, Trip, Company, Location, Stop, Iso, Time, Price, Amount, Decimals, Currency, PriceNotice, LinkCompany, CodeCompany, Details, Detail, ButtonPolicy, TitleDetail, FeaturesItems, Leaves, Day, NextDay } from './styles';
 import { FoundData } from '@autobusal/providers/types/routes';
 
 // neutral placeholder so a missing/broken operator logo doesn't render the
@@ -16,6 +17,11 @@ const LOGO_FALLBACK = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s
 interface Props {
   data: FoundData
   type: 'favorite' | 'normal'
+  // Edited: Ferjolt Ozuni - Date: 2026-08-05
+  // The searched boarding day, dd/mm/yyyy. Only used to print the two dates
+  // on an overnight trip - a card that arrives the same day says nothing
+  // about days at all, which is why this can be absent.
+  date?: string
   passengers: number
   t: TFunction<'common'>
   onSave: (data: FoundData) => void
@@ -25,7 +31,7 @@ interface Props {
   children?: React.ReactNode
 }
 
-const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Element => {
+const Route = ({ data, type, date, passengers, t, onSave, children }: Props): JSX.Element => {
   const [ information, setInformation ] = useState<boolean>(false);
 
   // Edited: Ferjolt Ozuni - Date: 2026-08-03
@@ -63,6 +69,53 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
 
   const soon = leaves !== null && leaves < 60;
 
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-05
+   *
+   * Overnight trips. "22:30 -> 06:00" is the one thing on this card that
+   * can be read as the exact opposite of what it means - a seven-and-a-half
+   * hour journey looks like a sixteen-hour one run backwards - and the
+   * duration beside it does not fix that, because nobody reads a duration
+   * to work out a date. So when the coach arrives on a later day, BOTH ends
+   * print their day and the arrival carries a +1.
+   *
+   * Nothing is added to a same-day card: a date under every arrival on a
+   * page of same-day results is noise that makes the overnight ones stop
+   * standing out, which is the only reason any of this is here.
+   *
+   * The offset comes from the timetable's own midnight markers, computed
+   * server-side (Libraries\Routes\Search\Locations::offset) - it is not
+   * inferred from "arrival looks earlier than departure", which is wrong
+   * for exactly the cross-border journeys where the two ends keep
+   * different clocks.
+   */
+  const offset = data.arrival_offset ?? 0;
+
+  const days = ((): { departure: string, arrival: string } | null => {
+    if (offset <= 0 || !date) {
+      return null;
+    }
+
+    const departs = createDate(date);
+
+    // an invalid or unexpected date string must not print "NaN Invalid" on
+    // a result card - showing no day is better than showing a wrong one
+    if (Number.isNaN(departs.getTime())) {
+      return null;
+    }
+
+    const arrives = new Date(departs);
+    arrives.setUTCDate(arrives.getUTCDate() + offset);
+
+    const format = (value: Date): string => {
+      const parts = getDayParts(value, t as any);
+
+      return `${ parts.day } ${ parts.month }`;
+    };
+
+    return { departure: format(departs), arrival: format(arrives) };
+  })();
+
   return (
     <Container className="box" $type={ type }>
       { data.price.offer === true && <SpecialOffer>{ t('routes_order.step2.route.offer') }</SpecialOffer> }
@@ -116,6 +169,8 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
             { data.locations.from.departure }
           </h2>
 
+          { days && <Day>{ days.departure }</Day> }
+
           <Stop>{ data.locations.from.stop?.name }</Stop>
         </Location>
 
@@ -144,8 +199,15 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
             <Iso>({ data.locations.to.city.country?.iso_code })</Iso>
             { ' ' }
             { data.locations.to.arrival }
+            { offset > 0 && (
+              <NextDay title={ t('routes_order.step2.route.next_day', { count: offset }) }>
+                +{ offset }
+              </NextDay>
+            ) }
           </h2>
 
+          { days && <Day>{ days.arrival }</Day> }
+
           <Stop>{ data.locations.to.stop?.name }</Stop>
         </Location>
 

package/Found/Route/styles.ts

@@ -609,3 +609,44 @@ export const Leaves = styled.div<{ $soon: boolean }>`
   background: ${ props => (props.$soon ? props.theme.font.error : props.theme.primary.neutral) };
 `;
 
+/**
+ * The +1 on an overnight arrival.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-05
+ *
+ * Sits INSIDE the h2, right against the clock time it qualifies, because
+ * that is the number it changes the meaning of. Raised and shrunk rather
+ * than boxed: it reads as an annotation on the time, the way a footnote
+ * marker does, and a second pill on a card that already carries an offer
+ * badge and a countdown would compete with both.
+ *
+ * The title attribute carries the sentence - "arrives the next day" - so
+ * the meaning is available to anyone for whom "+1" is not self-evident,
+ * which on a first visit is most people.
+ */
+export const NextDay = styled.sup`
+  margin-left: 4px;
+  padding: 1px 4px;
+  border-radius: 4px;
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: 700;
+  white-space: nowrap;
+  vertical-align: super;
+  cursor: help;
+  color: ${ props => props.theme.font.normal };
+  background: ${ props => props.theme.primary.neutral };
+`;
+
+/**
+ * The calendar day under one end of an overnight trip.
+ *
+ * Rendered on BOTH ends or neither: a date shown only over the arrival
+ * leaves the reader working out what day the departure was, which is the
+ * question the whole thing exists to answer.
+ */
+export const Day = styled.span`
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: 700;
+  white-space: nowrap;
+  color: ${ props => props.theme.primary.normal };
+`;

package/Schedule/Schedule.tsx

@@ -1,6 +1,6 @@
 import { TFunction } from 'i18next';
 import { Rating } from '@autobusal/common';
-import { Container, Table, Time, Faded, Price, Operator } from './styles';
+import { Container, Table, Time, Faded, Price, Operator, NextDay } from './styles';
 import { ScheduleRow } from '../Facts/types';
 
 interface Props {
@@ -69,7 +69,20 @@ const Schedule = ({ id, from, to, rows, t }: Props): (JSX.Element | null) => {
           { rows.map((row, index) => (
             <tr key={ index }>
               <td><Time>{ row.departure ?? '-' }</Time></td>
-              <td><Time>{ row.arrival ?? '-' }</Time></td>
+              { /* Edited: Ferjolt Ozuni - Date: 2026-08-05
+                   The same +1 the result cards carry. A timetable is read
+                   precisely to plan around a time, so a row whose arrival
+                   is the following morning and does not say so is the one
+                   row on the page somebody will actually act on wrongly. */ }
+              <td>
+                <Time>{ row.arrival ?? '-' }</Time>
+
+                { (row.offset ?? 0) > 0 && (
+                  <NextDay title={ t('routes_order.step2.route.next_day', { count: row.offset }) }>
+                    +{ row.offset }
+                  </NextDay>
+                ) }
+              </td>
               <td><Faded>{ duration(row.minutes) }</Faded></td>
 
               <td>

package/Schedule/styles.ts

@@ -51,3 +51,21 @@ export const Operator = styled.div`
   flex-direction: column;
   gap: 2px;
 `;
+
+/**
+ * The +1 on an overnight arrival, matching the result cards.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-05
+ */
+export const NextDay = styled.sup`
+  margin-left: 4px;
+  padding: 1px 4px;
+  border-radius: 4px;
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: 700;
+  white-space: nowrap;
+  vertical-align: super;
+  cursor: help;
+  color: ${ props => props.theme.font.normal };
+  background: ${ props => props.theme.primary.neutral };
+`;

package/Sections/Sections.tsx

@@ -2,7 +2,6 @@ import { TFunction } from 'i18next';
 import Facts from '../Facts/Facts';
 import Schedule from '../Schedule/Schedule';
 import Links from '../Links/Links';
-import { Reviews } from '@autobusal/reviews';
 import Schema from './Schema';
 import { useGetFacts } from '../Facts/services';
 import { Nav, Anchor, Anchored } from './styles';
@@ -17,7 +16,6 @@ const TRIPS = 'trips';
 const FACTS = 'facts';
 const SCHEDULE = 'schedule';
 const LINKS = 'links';
-const REVIEWS = 'reviews';
 
 /**
  * Everything on a route-pair page that is not the booking wizard.
@@ -65,8 +63,6 @@ const Sections = ({ from, to, t }: Props): (JSX.Element | null) => {
         { schedule.length > 0 && (
           <Anchor href={ `#${ SCHEDULE }` }>{ t('routes_order.sections.schedule') }</Anchor>
         ) }
-
-        <Anchor href={ `#${ REVIEWS }` }>{ t('routes_order.sections.reviews') }</Anchor>
       </Nav>
 
       { /* Edited: Ferjolt Ozuni - Date: 2026-08-03
@@ -82,22 +78,16 @@ const Sections = ({ from, to, t }: Props): (JSX.Element | null) => {
         <Schedule id={ SCHEDULE } from={ facts.from } to={ facts.to } rows={ schedule } t={ t } />
       </Anchored>
 
-      { /* Edited: Ferjolt Ozuni - Date: 2026-08-03
-           Reviews for the PAIR, not for one coach on it. A review belongs to
-           a route, but a single route rarely has enough published reviews to
-           clear the display threshold - the pair it runs on often does, so
-           aggregating across the routes that sell this leg is what makes the
-           block appear at all rather than a nicety.
-
-           Renders nothing below the threshold, so a pair without enough
-           reviews does not gain an empty box. */ }
-      <Anchored>
-        { /* the anchor lives on a wrapper: Reviews takes the SUBJECT's id,
-             which a pair does not have - it is named by its two ends */ }
-        <div id={ REVIEWS }>
-          <Reviews type="pair" id={ 0 } pair={ { from: from ?? '', to: to ?? '' } } t={ t } />
-        </div>
-      </Anchored>
+      { /* Edited: Ferjolt Ozuni - Date: 2026-08-05
+           NO reviews block here any more. A pair-level review wall sat in
+           the middle of a page whose job is to compare departures, where
+           what a reader needs about reputation is one number per operator -
+           and the result cards already carry exactly that.
+
+           The reviews themselves live on the operator's own page, which is
+           where somebody who wants to read them has gone looking for them.
+           The `pair` mode of Reviews\BrowseController is untouched and
+           still works; nothing calls it from here. */ }
 
       <Links
         id={ LINKS }

package/Step4/Passenger/Passenger.tsx

@@ -2,7 +2,7 @@ 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 { Container, Title } from './styles';
+import { Container, Title, Notice } from './styles';
 import { PersonData } from '@autobusal/providers/types/persons';
 import { OccupiedData } from '@autobusal/providers/types/buses';
 
@@ -139,6 +139,14 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
               />
 
               { 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>

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/Step5/Addons/Addons.tsx

@@ -1,6 +1,6 @@
 import { TFunction } from 'i18next';
 import { useState } from 'react';
-import { RiWhatsappLine, RiTelegramLine, RiCalendarCheckLine, RiArrowUpSLine, RiArrowDownSLine } from 'react-icons/ri';
+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, Terms, Term, FlexHeader, FlexTitle, FlexToggle, FlexPrice, FlexAdd, FlexDetails } from './styles';
@@ -8,6 +8,14 @@ import { Container, Option, Notice, Terms, Term, FlexHeader, FlexTitle, FlexTogg
 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 {
@@ -17,11 +25,15 @@ interface Props {
   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
 }
 
@@ -30,7 +42,7 @@ 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, flexOffer, currency, whatsapp, whatsappNumber, telegram, flex, t, onChangeWhatsapp, onChangeWhatsappNumber, onChangeTelegram, onChangeFlex }: Props): (JSX.Element | null) => {
+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
@@ -45,7 +57,9 @@ const Addons = ({ data, flexOffer, currency, whatsapp, whatsappNumber, telegram,
   // check before making it.
   const [ open, setOpen ] = useState<boolean>(false);
 
-  if (!data || (!data.whatsapp.available && !data.telegram.available && !hasFlex)) {
+  const hasSms = data?.sms?.available === true;
+
+  if (!data || (!data.whatsapp.available && !data.telegram.available && !hasSms && !hasFlex)) {
     return null;
   }
 
@@ -100,6 +114,43 @@ const Addons = ({ data, flexOffer, currency, whatsapp, whatsappNumber, telegram,
         </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"
+              placeholder={ t('routes_order.step5.addons.sms.phone_placeholder') }
+              value={ smsNumber }
+              onChange={ (event) => onChangeSmsNumber(event.target.value) }
+            />
+          ) }
+        </Option>
+      ) }
+
       { hasFlex && (
         <Option>
           <FlexHeader>

package/package.json

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

package/services.ts

@@ -156,6 +156,14 @@ export const usePostOrder = (
         order.addon_telegram = '1';
       }
 
+      // The number may be blank here: obtapi falls back to the first
+      // passenger phone the form already collected (Orders\Make\Addons),
+      // so ticking the box on a route that asks for a phone is enough.
+      if (addons.sms) {
+        order.addon_sms = '1';
+        order.addon_sms_number = addons.smsNumber;
+      }
+
       if (addons.flex) {
         order.addon_flex = '1';
       }

package/types.ts

@@ -72,6 +72,15 @@ export interface AddonsSelection {
   whatsappNumber: string
   telegram: boolean
 
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-05
+   * The paid per-order CONFIRMATION by SMS - route alerts over SMS are free
+   * and need nothing here. Carries its own number like WhatsApp does, since
+   * somebody booking for a relative wants the text to reach the traveller.
+   */
+  sms: boolean
+  smsNumber: string
+
   // Edited: Ferjolt Ozuni - Date: 2026-08-03
   // Flexible Ticket. A bare boolean, like Telegram - the window and the
   // price are the server's to decide (Libraries\Orders\Flex), and a client