@autobusal/routes-order 1.4.1 → 1.5.0

package/CHANGELOG.md

@@ -0,0 +1,48 @@
+# Changelog
+
+All notable changes to this package are documented here. This project follows
+[Keep a Changelog](https://keepachangelog.com/) and [Semantic Versioning](https://semver.org/).
+
+## [1.5.0] - 2026-07-25
+
+### Added
+
+- **Per-route passenger details in Step4.** The passenger form now renders
+  sex, passport, phone, and the new WhatsApp/Telegram contact fields ONLY
+  when the route's `trip.passenger_fields` requires them (then required);
+  name and date of birth stay always-mandatory. A return trip uses the
+  union of both legs' configs. Routes without a config keep the pre-feature
+  form (sex + passport). Request field suffixes: `_wa`, `_tg`.
+
+## [1.4.2] - 2026-07-19
+
+### Added
+
+- `Found/Route/Route.tsx`: added a neutral inline SVG data-URI `LOGO_FALLBACK`.
+  The operator logo `<img>` now falls back to it when `logo_url` is empty
+  (`data.operator.logo_url || LOGO_FALLBACK`) and via an `onError` handler
+  (which nulls `onerror` first to avoid a loop), so a missing or broken operator
+  logo no longer renders the browser's broken-image icon in route results.
+
+### Fixed
+
+- `Found/Orders/Orders.tsx`: the not-found branch now triggers on
+  `data === undefined || data.length === 0` instead of only `data?.length == 0`.
+  An `undefined` result means the search errored (e.g. same origin and
+  destination), and it now shows the not-found message instead of an empty
+  shell.
+- `Found/Booking/Booking.tsx`: the Booking.com logo `<img>` now has an
+  `alt="Booking.com"` attribute, giving the image an accessible name.
+- `Found/Route/Route.tsx`: the operator logo `<img>` now has an `alt` attribute
+  set to the operator company name.
+
+### Security
+
+- `Found/Booking/Booking.tsx`: the `LinkBooking` external link
+  (`target="_blank"`) now includes `rel="noopener noreferrer"`, closing the
+  reverse-tabnabbing / `window.opener` leak.
+- `Found/Route/Route.tsx`: the operator `LinkCompany` and route `LinkRoute`
+  external links (`target="_blank"`) now include `rel="noopener noreferrer"` for
+  the same tabnabbing protection.
+
+Authored by Ferjolt Ozuni. Consolidated from the magus and alvavel whitelabel patch sets into canonical @autobusal source (eliminates per-repo patch-package divergence).

package/Found/Booking/Booking.tsx

@@ -39,10 +39,10 @@ const Booking = ({ data, step1, t }: Props): (JSX.Element | null) => {
     <Container>
       <About>
         { t('routes_order.step2.booking.title', { location: destination.city.name }) }
-        <img src="https://s-ec.bstatic.com/static/img/b26logo/booking_logo_retina/22615963add19ac6b6d715a97c8d477e8b95b7ea.png" />
+        <img src="https://s-ec.bstatic.com/static/img/b26logo/booking_logo_retina/22615963add19ac6b6d715a97c8d477e8b95b7ea.png" alt="Booking.com" />
       </About>
 
-      <LinkBooking to={ location } target="_blank">{ t('routes_order.step2.booking.search') }</LinkBooking>
+      <LinkBooking to={ location } target="_blank" rel="noopener noreferrer">{ t('routes_order.step2.booking.search') }</LinkBooking>
     </Container>
   );
 };

package/Found/Orders/Orders.tsx

@@ -23,7 +23,9 @@ const Orders = ({ loading, data, type, preferredStop, t, onSave }: Props): JSX.E
     );
   }
 
-  if (data?.length == 0) {
+  // undefined means the search errored (e.g. same origin and destination) -
+  // show the not-found message instead of an empty shell
+  if (data === undefined || data.length === 0) {
     return (
       <ContainerNotFound className="box">{ t('routes_order.step2.not_found') }</ContainerNotFound>
     );

package/Found/Route/Route.tsx

@@ -6,6 +6,10 @@ import { Button, RouteFeature, Policy } from '@autobusal/common';
 import { Container, SpecialOffer, FavoriteStop, Trip, Company, Location, Time, Price, LinkCompany, Details, Detail, ButtonPolicy, TitleDetail, LinkRoute, Features, TitleFeatures, FeaturesItems } from './styles';
 import { FoundData } from '@autobusal/providers/types/routes';
 
+// neutral placeholder so a missing/broken operator logo doesn't render the
+// browser's broken-image icon in the route results
+const LOGO_FALLBACK = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Crect width='120' height='60' rx='6' fill='%23e5e7eb'/%3E%3Cpath d='M42 22h36v14a2 2 0 0 1-2 2h-2a3 3 0 0 1-6 0H52a3 3 0 0 1-6 0h-2a2 2 0 0 1-2-2z' fill='%239ca3af'/%3E%3C/svg%3E";
+
 interface Props {
   data: FoundData
   type: 'favorite' | 'normal'
@@ -30,7 +34,7 @@ const Route = ({ data, type, t, onSave }: Props): JSX.Element => {
 
       <Trip>
         <Company>
-          <LinkCompany to={ data.operator.link } target="_blank" title={ data.operator.company }><img src={ data.operator.logo_url } /></LinkCompany>
+          <LinkCompany to={ data.operator.link } target="_blank" rel="noopener noreferrer" title={ data.operator.company }><img src={ data.operator.logo_url || LOGO_FALLBACK } onError={ (e) => { e.currentTarget.onerror = null; e.currentTarget.src = LOGO_FALLBACK; } } alt={ data.operator.company } /></LinkCompany>
         </Company>
 
         <Location>
@@ -69,7 +73,7 @@ const Route = ({ data, type, t, onSave }: Props): JSX.Element => {
       <Details>
         <Detail>
           <TitleDetail>{ t('routes_order.step2.route.name') }</TitleDetail>
-          <LinkRoute to={ data.link } target="_blank">{ data.code }</LinkRoute>
+          <LinkRoute to={ data.link } target="_blank" rel="noopener noreferrer">{ data.code }</LinkRoute>
         </Detail>
 
         { customs && (

package/Step4/Passenger/Passenger.tsx

@@ -10,6 +10,7 @@ interface Props {
   type: 'adult' | 'child' | 'baby'
   number: number
   values?: PersonData
+  fields: string[]
   withReturn: boolean
   busFrom: OccupiedData
   busTo: OccupiedData
@@ -22,7 +23,13 @@ interface Props {
   onUpdate: (name: string, value: (string | number)) => void
 }
 
-const Passenger = ({ type, number, values, withReturn, busFrom, busTo, pickedFrom, pickedTo, t, errors, refs, onSeatSelect, onUpdate }: Props): JSX.Element => {
+// Edited: Ferjolt Ozuni - Date: 2026-07-25
+// The route now decides which passenger details it collects
+// (routes_trip.passenger_fields): sex, passport, phone, whatsapp and
+// 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 name = `${ type }${ number }`;
 
   const names = {
@@ -32,10 +39,14 @@ const Passenger = ({ type, number, values, withReturn, busFrom, busTo, pickedFro
     sex: `${ name }_sex`,
     passport: `${ name }_pass`,
     phone: `${ name }_phone`,
+    whatsapp: `${ name }_wa`,
+    telegram: `${ name }_tg`,
     seatDeparture: `${ name }_sd`,
     seatReturn: `${ name }_sr`
   };
 
+  const has = (field: string): boolean => fields.includes(field);
+
   return (
     <Container className="box">
       <Title>
@@ -85,45 +96,85 @@ const Passenger = ({ type, number, values, withReturn, busFrom, busTo, pickedFro
           { Display(errors[names.dob]) }
         </div>
 
-        <div className="row">
-          { t('routes_order.step4.gender') }
+        { has('sex') && (
+          <div className="row">
+            { t('routes_order.step4.gender') }
 
-          <Gender
-            name={ names.sex }
-            defaultValue={ values !== undefined ? Number(values[names.sex]) : undefined }
-            t={ t }
-            refs={ refs }
-          />
+            <Gender
+              name={ names.sex }
+              defaultValue={ values !== undefined ? Number(values[names.sex]) : undefined }
+              t={ t }
+              refs={ refs }
+            />
 
-          { Display(errors[names.sex]) }
-        </div>
+            { Display(errors[names.sex]) }
+          </div>
+        ) }
       </div>
-      
-      <div className="column">
-        <div className="row">
-          { t('routes_order.step4.passport') }
 
-          <input
-            type="text"
-            defaultValue={ values !== undefined ? values[names.passport] : '' }
-            { ...refs(names.passport, Validate('required|min_length:2|max_length:50', t)) }
-          />
+      { (has('passport') || has('phone')) && (
+        <div className="column">
+          { has('passport') && (
+            <div className="row">
+              { t('routes_order.step4.passport') }
+
+              <input
+                type="text"
+                defaultValue={ values !== undefined ? values[names.passport] : '' }
+                { ...refs(names.passport, Validate('required|min_length:2|max_length:50', t)) }
+              />
+
+              { Display(errors[names.passport]) }
+            </div>
+          ) }
+
+          { has('phone') && (
+            <div className="row">
+              { t('routes_order.step4.phone') }
+
+              <input
+                type="text"
+                defaultValue={ values !== undefined ? values[names.phone] : '' }
+                { ...refs(names.phone, Validate('required|min_length:5|max_length:50', t)) }
+              />
 
-          { Display(errors[names.passport]) }
+              { Display(errors[names.phone]) }
+            </div>
+          ) }
         </div>
+      ) }
 
-        <div className="row">
-          { t('routes_order.step4.phone') }
+      { (has('whatsapp') || has('telegram')) && (
+        <div className="column">
+          { has('whatsapp') && (
+            <div className="row">
+              { t('routes_order.step4.whatsapp') }
 
-          <input
-            type="text"
-            defaultValue={ values !== undefined ? values[names.phone] : '' }
-            { ...refs(names.phone) }
-          />
+              <input
+                type="text"
+                defaultValue={ values !== undefined ? values[names.whatsapp] : '' }
+                { ...refs(names.whatsapp, Validate('required|min_length:5|max_length:50', t)) }
+              />
+
+              { Display(errors[names.whatsapp]) }
+            </div>
+          ) }
+
+          { has('telegram') && (
+            <div className="row">
+              { t('routes_order.step4.telegram') }
 
-          { Display(errors[names.phone]) }
+              <input
+                type="text"
+                defaultValue={ values !== undefined ? values[names.telegram] : '' }
+                { ...refs(names.telegram, Validate('required|min_length:2|max_length:100', t)) }
+              />
+
+              { Display(errors[names.telegram]) }
+            </div>
+          ) }
         </div>
-      </div>
+      ) }
 
       { type !== 'baby' && (
         <div className="column">
@@ -170,4 +221,4 @@ const Passenger = ({ type, number, values, withReturn, busFrom, busTo, pickedFro
   );
 };
 
-export default Passenger;
+export default Passenger;

package/Step4/Passengers/Display.tsx

@@ -7,6 +7,7 @@ import { OccupiedData } from '@autobusal/providers/types/buses';
 interface Props {
   type: 'adult' | 'child' | 'baby'
   amount: number
+  fields: string[]
   withReturn: boolean
   values?: PersonData
   busFrom: OccupiedData
@@ -20,7 +21,7 @@ interface Props {
   onUpdate: (name: string, value: (string | number)) => void
 }
 
-const Display = ({ type, amount, 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, t, errors, refs, onSeatSelect, onUpdate }: Props): JSX.Element[] => {
   const passengers: JSX.Element[] = [];
 
   for (let i = 1; i <= amount; i++) {
@@ -29,6 +30,7 @@ const Display = ({ type, amount, withReturn, values, busFrom, busTo, pickedFrom,
         key={ i }
         type={ type }
         number={ i }
+        fields={ fields }
         withReturn={ withReturn }
         values={ values }
         busFrom={ busFrom }

package/Step4/Passengers/Passengers.tsx

@@ -10,6 +10,7 @@ import { OccupiedData } from '@autobusal/providers/types/buses';
 interface Props {
   values?: PersonData
   step1: RoutesSearchForm
+  fields: string[]
   busFrom: OccupiedData
   busTo: OccupiedData
   t: TFunction<'public'>
@@ -18,7 +19,7 @@ interface Props {
   onUpdate: (name: string, value: (string | number)) => void
 }
 
-const Passengers = ({ values, step1, busFrom, busTo, t, errors, refs, onUpdate }: Props): JSX.Element => {
+const Passengers = ({ values, step1, fields, busFrom, busTo, t, errors, refs, onUpdate }: Props): JSX.Element => {
   const [ pickedFrom, setPickedFrom ] = useState<number[]>([]);
   const [ pickedTo, setPickedTo ] = useState<number[]>([]);
 
@@ -45,6 +46,7 @@ const Passengers = ({ values, step1, busFrom, busTo, t, errors, refs, onUpdate }
       <Display
         type="adult"
         amount={ step1.adults }
+        fields={ fields }
         withReturn={ step1.type === 'return' }
         values={ values }
         busFrom={ busFrom }
@@ -61,6 +63,7 @@ const Passengers = ({ values, step1, busFrom, busTo, t, errors, refs, onUpdate }
       <Display
         type="child"
         amount={ step1.children }
+        fields={ fields }
         withReturn={ step1.type === 'return' }
         values={ values }
         busFrom={ busFrom }
@@ -77,6 +80,7 @@ const Passengers = ({ values, step1, busFrom, busTo, t, errors, refs, onUpdate }
       <Display
         type="baby"
         amount={ step1.babies }
+        fields={ fields }
         withReturn={ step1.type === 'return' }
         values={ values }
         busFrom={ busFrom }

package/Step4/Step4.tsx

@@ -25,9 +25,21 @@ interface Props {
   onBack: (step: number) => void
 }
 
+// Edited: Ferjolt Ozuni - Date: 2026-07-25
+// Routes without a passenger_fields config keep the pre-feature form
+const DEFAULT_FIELDS = ['sex', 'passport'];
+
 const Step4 = ({ values, step1, step2, step3, isPartner, t, onSave, onBack }: Props): JSX.Element => {
   const { register, handleSubmit, formState: { errors }, setValue, setError } = useForm<PersonData>();
 
+  // Edited: Ferjolt Ozuni - Date: 2026-07-25
+  // one form serves both legs of a return trip, so it collects the UNION of
+  // what either route requires (mirrored by the backend rules)
+  const fields = Array.from(new Set([
+    ...(step2.trip?.passenger_fields ?? DEFAULT_FIELDS),
+    ...(step3 !== undefined ? (step3.trip?.passenger_fields ?? DEFAULT_FIELDS) : [])
+  ]));
+
   const busFrom = useBusOccupied(step1.departure, step2.id);
   const busTo = useBusOccupied(step1._return, step3?.id);
 
@@ -63,6 +75,7 @@ const Step4 = ({ values, step1, step2, step3, isPartner, t, onSave, onBack }: Pr
       <Passengers
         values={ values }
         step1={ step1 }
+        fields={ fields }
         busFrom={ busFrom }
         busTo={ busTo }
         t={ t }

package/package.json

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