@autobusal/routes-order 1.4.2 → 1.5.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 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

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,6 @@
 {
   "name": "@autobusal/routes-order",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"