@autobusal/routes-order 1.4.2 → 1.6.0

package/CHANGELOG.md

@@ -3,6 +3,31 @@
 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.6.0] - 2026-07-25
+
+### Added
+
+- **Checkout addon selection (Step5).** Buyers can now add WhatsApp and/or
+  Telegram notification addons at checkout, if the label has them enabled
+  (`SettingsData.addons` from `@autobusal/providers`). WhatsApp collects a
+  phone number inline; Telegram is a "connect after purchase" flow (a bot
+  can't message a bare phone number cold). Selected addons render as line
+  items in the order summary and are folded into the grand total shown
+  before payment - pricing/availability is re-verified server-side, this is
+  only what the buyer requests. `usePostOrder` now takes an `AddonsSelection`
+  and posts `addon_whatsapp`/`addon_whatsapp_number`/`addon_telegram`.
+
+## [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/Step5/Addons/Addons.tsx

@@ -0,0 +1,87 @@
+import { TFunction } from 'i18next';
+import { RiWhatsappLine, RiTelegramLine } from 'react-icons/ri';
+import { SubTitle } from '../../styles';
+import { Container, Option, Notice } from './styles';
+
+interface AddonsData {
+  whatsapp: { available: boolean, price: number }
+  telegram: { available: boolean, price: number }
+}
+
+interface Props {
+  data?: AddonsData
+  currency: string
+  whatsapp: boolean
+  whatsappNumber: string
+  telegram: boolean
+  t: TFunction<'common'>
+  onChangeWhatsapp: (value: boolean) => void
+  onChangeWhatsappNumber: (value: string) => void
+  onChangeTelegram: (value: boolean) => void
+}
+
+// Edited: Ferjolt Ozuni - Date: 2026-07-25
+// Paid checkout addons - hidden entirely if the label has neither channel
+// 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)) {
+    return null;
+  }
+
+  return (
+    <Container className="box">
+      <SubTitle>
+        { t('routes_order.step5.addons.title') }
+      </SubTitle>
+
+      { data.whatsapp.available && (
+        <Option>
+          <label>
+            <input
+              type="checkbox"
+              checked={ whatsapp }
+              onChange={ (event) => onChangeWhatsapp(event.target.checked) }
+            />
+
+            <RiWhatsappLine />
+
+            { t('routes_order.step5.addons.whatsapp.label') } (+{ data.whatsapp.price } { currency })
+          </label>
+
+          <Notice>{ t('routes_order.step5.addons.whatsapp.description') }</Notice>
+
+          { whatsapp && (
+            <input
+              type="text"
+              placeholder={ t('routes_order.step5.addons.whatsapp.phone_placeholder') }
+              value={ whatsappNumber }
+              onChange={ (event) => onChangeWhatsappNumber(event.target.value) }
+            />
+          ) }
+        </Option>
+      ) }
+
+      { data.telegram.available && (
+        <Option>
+          <label>
+            <input
+              type="checkbox"
+              checked={ telegram }
+              onChange={ (event) => onChangeTelegram(event.target.checked) }
+            />
+
+            <RiTelegramLine />
+
+            { t('routes_order.step5.addons.telegram.label') } (+{ data.telegram.price } { currency })
+          </label>
+
+          <Notice>{ t('routes_order.step5.addons.telegram.description') }</Notice>
+        </Option>
+      ) }
+    </Container>
+  );
+};
+
+export default Addons;

package/Step5/Addons/styles.ts

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  margin-top: 25px;
+`;
+
+export const Option = styled.div`
+  margin-top: 15px;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    font-weight: 700;
+  }
+
+  input[type="text"] {
+    margin-top: 10px;
+  }
+`;
+
+export const Notice = styled.div`
+  margin-top: 4px;
+  margin-left: 22px;
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.faded };
+`;

package/Step5/Step5.tsx

@@ -9,6 +9,7 @@ import { Button } from '@autobusal/common';
 import Steps from '../Steps/Steps';
 import Summary from './Summary/Summary';
 import Coupons from './Coupons/Coupons';
+import Addons from './Addons/Addons';
 import Billing from './Billing/Billing';
 import Payments from './Payments/Payments';
 import { getTotal, convertCoupon } from './utilities';
@@ -19,6 +20,7 @@ import { CouponData } from '@autobusal/providers/types/orders';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { TotalData } from '../types';
 import { useUserStore } from '@autobusal/providers/stores/user';
+import { useGetSettings } from '@autobusal/providers/services';
 import { usePostOrder } from '../services';
 
 interface Props {
@@ -38,13 +40,46 @@ const Step5 = ({ step1, step2, step3, step4, isPartner, t, onBack }: Props): JSX
   );
   const [ action, setAction ] = useState<string | undefined>(undefined);
 
+  const [ addonWhatsapp, setAddonWhatsapp ] = useState<boolean>(false);
+  const [ addonWhatsappNumber, setAddonWhatsappNumber ] = useState<string>('');
+  const [ addonTelegram, setAddonTelegram ] = useState<boolean>(false);
+
   const { data: UserData } = useUserStore();
+  const { data: SettingsData } = useGetSettings();
 
   const navigate = useNavigate();
 
   const { register, handleSubmit, formState: { errors } } = useForm<BillingData>();
 
-  const { mutate: OrderSend, isPending } = usePostOrder(step1, step2, step3, step4, coupon, action);
+  // Edited: Ferjolt Ozuni - Date: 2026-07-25
+  // Paid addons are priced/verified server-side (see obtapi's
+  // App\Libraries\Orders\Make\Addons) - this is only for the checkout
+  // summary display and the grand total shown before payment.
+  const currency = total.display.split(' ')[1] ?? '';
+
+  const addonItems = [
+    addonWhatsapp && SettingsData?.addons?.whatsapp.available ? {
+      label: t('routes_order.step5.addons.whatsapp.label'),
+      price: SettingsData.addons.whatsapp.price
+    } : null,
+    addonTelegram && SettingsData?.addons?.telegram.available ? {
+      label: t('routes_order.step5.addons.telegram.label'),
+      price: SettingsData.addons.telegram.price
+    } : null
+  ].filter((item): item is { label: string, price: number } => item !== null);
+
+  const addonsValue = addonItems.reduce((sum, item) => sum + item.price, 0);
+
+  const grandTotal: TotalData = {
+    display: `${ total.value + addonsValue } ${ currency }`,
+    value: total.value + addonsValue
+  };
+
+  const { mutate: OrderSend, isPending } = usePostOrder(step1, step2, step3, step4, coupon, action, {
+    whatsapp: addonWhatsapp,
+    whatsappNumber: addonWhatsappNumber,
+    telegram: addonTelegram
+  });
 
   const onApplyCoupon = (data: CouponData): void => {
     setTotal(
@@ -59,6 +94,12 @@ const Step5 = ({ step1, step2, step3, step4, isPartner, t, onBack }: Props): JSX
   }, []);
 
   const onSendForm = async (): Promise<void> => {
+    if (addonWhatsapp && addonWhatsappNumber.trim().length < 5) {
+      alert(t('routes_order.step5.addons.whatsapp.phone_error'));
+
+      return;
+    }
+
     await handleSubmit(onSubmit)();
   };
 
@@ -91,12 +132,25 @@ const Step5 = ({ step1, step2, step3, step4, isPartner, t, onBack }: Props): JSX
         step3={ step3 }
         step4={ step4 }
         coupon={ coupon }
-        total={ total }
+        addons={ addonItems.map(item => ({ label: item.label, value: `${ item.price } ${ currency }` })) }
+        total={ grandTotal }
         t={ t }
       />
 
       <Coupons current={ coupon } step2={ step2 } total={ total } t={ t } onApplied={ onApplyCoupon } />
 
+      <Addons
+        data={ SettingsData?.addons }
+        currency={ currency }
+        whatsapp={ addonWhatsapp }
+        whatsappNumber={ addonWhatsappNumber }
+        telegram={ addonTelegram }
+        t={ t }
+        onChangeWhatsapp={ setAddonWhatsapp }
+        onChangeWhatsappNumber={ setAddonWhatsappNumber }
+        onChangeTelegram={ setAddonTelegram }
+      />
+
       { UserData === undefined && <Billing t={ t } errors={ errors } refs={ register } /> }
 
       <Payments

package/Step5/Summary/Amount/Amount.tsx

@@ -2,15 +2,16 @@ import { TFunction } from 'i18next';
 import { Container, Value, Code } from './styles';
 
 interface Props {
-  type: 'total' | 'discount'
+  type: 'total' | 'discount' | 'addon'
   value: string
   code?: string
+  label?: string
   t: TFunction<'common'>
 }
 
-const Amount = ({ type, value, code, t }: Props): JSX.Element => (
+const Amount = ({ type, value, code, label, t }: Props): JSX.Element => (
   <Container $type={ type }>
-    { t(`routes_order.step5.summary.${ type }`) }
+    { label ?? t(`routes_order.step5.summary.${ type }`) }
 
     { code && <Code>{ code }</Code> }
 

package/Step5/Summary/Amount/styles.ts

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 
-export const Container = styled.div<{ $type: 'total' | 'discount' }>`
+export const Container = styled.div<{ $type: 'total' | 'discount' | 'addon' }>`
   display: flex;
   align-items: center;
   padding: 10px 15px;

package/Step5/Summary/Summary.tsx

@@ -11,17 +11,23 @@ import { PersonData } from '@autobusal/providers/types/persons';
 import { CouponData } from '@autobusal/providers/types/orders';
 import { TotalData } from '../../types';
 
+interface AddonItem {
+  label: string
+  value: string
+}
+
 interface Props {
   step1: RoutesSearchForm
   step2: FoundData
   step3?: FoundData
   step4: PersonData
   coupon?: CouponData
+  addons?: AddonItem[]
   total: TotalData
   t: TFunction<'common'>
 }
 
-const Summary = ({ step1, step2, step3, step4, coupon, total, t }: Props): JSX.Element => (
+const Summary = ({ step1, step2, step3, step4, coupon, addons, total, t }: Props): JSX.Element => (
   <div className="box">
     <SubTitle>
       <AiOutlineInfoCircle />
@@ -35,6 +41,10 @@ const Summary = ({ step1, step2, step3, step4, coupon, total, t }: Props): JSX.E
 
     <Tickets step1={ step1 } step4={ step4 } t={ t } />
 
+    { addons?.map(item => (
+      <Amount key={ item.label } type="addon" label={ item.label } value={ item.value } t={ t } />
+    )) }
+
     { coupon && <Amount type="discount" code={ coupon.code } value={ coupon.discount } t={ t } /> }
 
     <Amount type="total" value={ total.display } t={ t } />

package/package.json

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

package/services.ts

@@ -4,7 +4,7 @@ import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { FoundData } from '@autobusal/providers/types/routes';
 import { CouponData } from '@autobusal/providers/types/orders';
 import { BillingData, PersonData } from '@autobusal/providers/types/persons';
-import { FoundDay, ActionData, SaveData, OrderedData, CouponForm } from './types';
+import { FoundDay, ActionData, SaveData, OrderedData, CouponForm, AddonsSelection } from './types';
 
 export const useGetDepartures = (data: RoutesSearchForm): UseQueryResult<FoundData[]> => (
   useQuery({
@@ -74,7 +74,8 @@ export const usePostOrder = (
   step3: (FoundData | undefined),
   step4: PersonData,
   coupon: (CouponData | undefined),
-  action: (string | undefined)
+  action: (string | undefined),
+  addons: AddonsSelection
 ): UseMutationResult<OrderedData, Error, BillingData, unknown> => (
   useMutation({
     mutationKey: ['save-order'],
@@ -95,6 +96,18 @@ export const usePostOrder = (
         order.coupon = coupon.code;
       }
 
+      // Edited: Ferjolt Ozuni - Date: 2026-07-25
+      // Paid addons - obtapi re-verifies availability/price server-side
+      // against the label's own settings, this is just the buyer's request
+      if (addons.whatsapp && addons.whatsappNumber) {
+        order.addon_whatsapp = '1';
+        order.addon_whatsapp_number = addons.whatsappNumber;
+      }
+
+      if (addons.telegram) {
+        order.addon_telegram = '1';
+      }
+
       Object.keys(step4).forEach(index => {
         order[index] = step4[index];
       });

package/types.ts

@@ -33,4 +33,12 @@ export interface OrderedData {
 export interface TotalData {
   display: string
   value: number
+}
+
+// Edited: Ferjolt Ozuni - Date: 2026-07-25
+// The buyer's paid-addon selection at checkout - see Step5/Addons/Addons.tsx
+export interface AddonsSelection {
+  whatsapp: boolean
+  whatsappNumber: string
+  telegram: boolean
 }