@autobusal/routes-order 1.9.3 → 1.11.1

package/Step4/Passenger/Passenger.tsx

@@ -1,6 +1,6 @@
 import { TFunction } from 'i18next';
 import { FieldErrors, FieldValues, UseFormRegister } from 'react-hook-form';
-import { Calendar, Gender, ChooseSeat } from '@autobusal/common';
+import { Calendar, Gender, ChooseSeat, Required } from '@autobusal/common';
 import { Validate, Display } from '@autobusal/utilities';
 import { Container, Title } from './styles';
 import { PersonData } from '@autobusal/providers/types/persons';
@@ -55,7 +55,7 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
       <div className="column">
         <div className="row">
-          { t('routes_order.step4.first_name') }
+          <Required>{ t('routes_order.step4.first_name') }</Required>
 
           <input
             type="text"
@@ -67,7 +67,7 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
         </div>
 
         <div className="row">
-          { t('routes_order.step4.last_name') }
+          <Required>{ t('routes_order.step4.last_name') }</Required>
 
           <input
             type="text"
@@ -81,7 +81,7 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
       <div className="column">
         <div className="row">
-          { t('routes_order.step4.dob') }
+          <Required>{ t('routes_order.step4.dob') }</Required>
 
           <Calendar
             type="dob"
@@ -116,7 +116,7 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
         <div className="column">
           { has('passport') && (
             <div className="row">
-              { t('routes_order.step4.passport') }
+              <Required>{ t('routes_order.step4.passport') }</Required>
 
               <input
                 type="text"
@@ -130,7 +130,7 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
           { has('phone') && (
             <div className="row">
-              { t('routes_order.step4.phone') }
+              <Required>{ t('routes_order.step4.phone') }</Required>
 
               <input
                 type="text"
@@ -148,7 +148,7 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
         <div className="column">
           { has('whatsapp') && (
             <div className="row">
-              { t('routes_order.step4.whatsapp') }
+              <Required>{ t('routes_order.step4.whatsapp') }</Required>
 
               <input
                 type="text"
@@ -162,7 +162,7 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
           { has('telegram') && (
             <div className="row">
-              { t('routes_order.step4.telegram') }
+              <Required>{ t('routes_order.step4.telegram') }</Required>
 
               <input
                 type="text"
@@ -179,7 +179,7 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
       { type !== 'baby' && (
         <div className="column">
           <div className="row">
-            { t('seats.departure') }
+            <Required>{ t('seats.departure') }</Required>
 
             <ChooseSeat
               name={ names.seatDeparture }
@@ -198,7 +198,7 @@ const Passenger = ({ type, number, values, fields, withReturn, busFrom, busTo, p
 
           { withReturn && (
             <div className="row">
-              { t('seats.return') }
+              <Required>{ t('seats.return') }</Required>
 
               <ChooseSeat
                 name={ names.seatReturn }

package/Step5/Billing/Billing.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { TFunction } from 'i18next';
+import { Required } from '@autobusal/common';
 import { UseFormRegister, FieldErrors } from 'react-hook-form';
 import { RiPencilFill } from 'react-icons/ri';
 import { AiOutlineInfoCircle } from 'react-icons/ai';
@@ -42,7 +43,7 @@ const Billing = ({ errors, t, refs }: Props): JSX.Element => {
 
       <div className="column">
         <div className="row">
-          { t('routes_order.step5.billing.first_name') }
+          <Required>{ t('routes_order.step5.billing.first_name') }</Required>
 
           <input type="text" { ...refs('bill_fn', Validate('required|min_length:2|max_length:100', t)) } />
 
@@ -50,7 +51,7 @@ const Billing = ({ errors, t, refs }: Props): JSX.Element => {
         </div>
 
         <div className="row">
-          { t('routes_order.step5.billing.last_name') }
+          <Required>{ t('routes_order.step5.billing.last_name') }</Required>
 
           <input type="text" { ...refs('bill_ln', Validate('required|min_length:2|max_length:100', t)) } />
 
@@ -60,7 +61,7 @@ const Billing = ({ errors, t, refs }: Props): JSX.Element => {
 
       <div className="column">
         <div className="row">
-          { t('routes_order.step5.billing.email') }
+          <Required>{ t('routes_order.step5.billing.email') }</Required>
           
           <input type="email" { ...refs('email', Validate('required|email|max_length:255', t)) } />
 
@@ -72,7 +73,7 @@ const Billing = ({ errors, t, refs }: Props): JSX.Element => {
         </div>
 
         <div className="row">
-          { t('routes_order.step5.billing.phone') }
+          <Required>{ t('routes_order.step5.billing.phone') }</Required>
 
           <input type="text" { ...refs('bill_phone', Validate('required|min_length:10|max_length:20', t)) } />
 
@@ -81,7 +82,7 @@ const Billing = ({ errors, t, refs }: Props): JSX.Element => {
       </div>
 
       <div className="row">
-        { t('routes_order.step5.billing.address') }
+        <Required>{ t('routes_order.step5.billing.address') }</Required>
 
         <textarea { ...refs('bill_address', Validate('required|min_length:2', t)) }></textarea>
 
@@ -90,7 +91,7 @@ const Billing = ({ errors, t, refs }: Props): JSX.Element => {
 
       <div className="column">
         <div className="row">
-          { t('routes_order.step5.billing.city') }
+          <Required>{ t('routes_order.step5.billing.city') }</Required>
 
           <input type="text" { ...refs('bill_city', Validate('required|min_length:2|max_length:100', t)) } />
 
@@ -98,7 +99,7 @@ const Billing = ({ errors, t, refs }: Props): JSX.Element => {
         </div>
 
         <div className="row">
-          { t('routes_order.step5.billing.country') }
+          <Required>{ t('routes_order.step5.billing.country') }</Required>
 
           <select { ...refs('bill_country', Validate('required|min:1', t)) }>
             <option value={ 0 }>{ t('routes_order.step5.billing.country_choose') }</option>

package/Step5/Coupons/styles.ts

@@ -1,20 +1,27 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
-  margin-top: 25px;
+  margin-top: 0;
 `;
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Wraps on its OWN width rather than switching layout at a viewport
+ * breakpoint. This now sits in a ~290px sidebar on a 1440px screen, so the
+ * old `@media (min-width: 480px)` put the field and the button side by side
+ * in a column too narrow for either - the input came out 86px wide.
+ *
+ * flex-basis plus wrap is container-responsive without container queries:
+ * they sit side by side where there is room and stack where there is not.
+ */
 export const ContainerForm = styled.div`
   display: flex;
-  flex-direction: column;
-  gap: 15px;
+  flex-wrap: wrap;
+  gap: 10px;
   max-width: 450px;
-
-  @media (min-width: 480px) {
-    flex-direction: row;
-  }
 `;
 
 export const ContainerInput = styled.div`
-  flex: 1;
-`;
+  flex: 1 1 165px;
+`;

package/Step5/Payments/styles.ts

@@ -1,14 +1,14 @@
 import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
-  margin-top: 25px;
+  margin-top: 0;
 `;
 
 export const ContainerPayments = styled.div`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  gap: 15px;
+  gap: 10px;
   justify-content: center;
 `;
 
@@ -17,8 +17,11 @@ export const ButtonPayment = styled.button<{ $selected: boolean }>`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 10px;
-  flex-basis: 150px;
+  gap: 8px;
+  // Edited: Ferjolt Ozuni - Date: 2026-08-01
+  // grow-and-wrap rather than a fixed 150px basis, so two fit per row in
+  // the checkout sidebar instead of one card per line down a tall column
+  flex: 1 1 110px;
   padding: 10px;
   text-align: center;
   font-weight: 700;

package/Step5/Summary/About/About.tsx

@@ -1,6 +1,7 @@
 import { TFunction } from 'i18next';
 import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
-import { Container, ContainerIcon, Icon, Information, Title, SubTitle, Operator } from './styles';
+import { FaCircleDot, FaLocationDot } from 'react-icons/fa6';
+import { Container, ContainerIcon, Icon, Information, Title, Operator, Logo, Leg, Point, PointIcon, PointCity, Country, PointMeta } from './styles';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { FoundData } from '@autobusal/providers/types/routes';
 
@@ -11,24 +12,28 @@ interface Props {
   t: TFunction<'public'>
 }
 
+/**
+ * One leg of the trip, both ends of it.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * This used to render a single line - the departure point on the outbound
+ * leg, the arrival point on the return one - so a one-way buyer reached the
+ * payment screen having never been shown where the bus actually drops them.
+ * Both ends are now stated, origin above destination.
+ *
+ * The country is named in full rather than coded: this is the last screen
+ * before someone pays, and "Thessaloniki, Greece" settles a doubt that
+ * "(GRC)" only half answers.
+ */
 const About = ({ type, step1, data, t }: Props): (JSX.Element | null) => {
-  const icon = type === 'departure' ? <FaArrowRight /> : <FaArrowLeft />;
-
   if (!data) {
     return null;
   }
 
-  const details = type === 'departure' ? {
-    date: step1.departure,
-    hour: data.locations.from.departure,
-    stop: data.locations.from.stop?.name,
-    city: data.locations.from.city.name
-  } : {
-    date: step1._return,
-    hour: data.locations.to.arrival,
-    stop: data.locations.to.stop?.name,
-    city: data.locations.to.city.name
-  };
+  const icon = type === 'departure' ? <FaArrowRight /> : <FaArrowLeft />;
+
+  const date = type === 'departure' ? step1.departure : step1._return;
 
   return (
     <Container>
@@ -38,11 +43,56 @@ const About = ({ type, step1, data, t }: Props): (JSX.Element | null) => {
 
       <Information>
         <Title>{ data.name } ({ data.code })</Title>
-        <SubTitle>{ t(`routes_order.step5.summary.${ type }`, details) }</SubTitle>
+
+        { data.operator.logo_url && (
+          <Logo src={ data.operator.logo_url } alt={ data.operator.company } />
+        ) }
+
+        <Leg>
+          <Point>
+            <PointIcon><FaCircleDot /></PointIcon>
+
+            <PointCity>
+              { data.locations.from.city.name }
+              { data.locations.from.city.country?.name && (
+                <Country>, { data.locations.from.city.country.name }</Country>
+              ) }
+            </PointCity>
+
+            { /* the date and time are what a buyer double-checks before
+                 paying, so they carry the weight here */ }
+            <PointMeta $strong>
+              { t('routes_order.step5.summary.departs', {
+                date,
+                hour: data.locations.from.departure,
+                stop: data.locations.from.stop?.name
+              }) }
+            </PointMeta>
+          </Point>
+
+          <Point>
+            <PointIcon><FaLocationDot /></PointIcon>
+
+            <PointCity>
+              { data.locations.to.city.name }
+              { data.locations.to.city.country?.name && (
+                <Country>, { data.locations.to.city.country.name }</Country>
+              ) }
+            </PointCity>
+
+            <PointMeta>
+              { t('routes_order.step5.summary.arrives', {
+                hour: data.locations.to.arrival,
+                stop: data.locations.to.stop?.name
+              }) }
+            </PointMeta>
+          </Point>
+        </Leg>
+
         <Operator>{ data.operator.company }</Operator>
       </Information>
     </Container>
   );
 };
 
-export default About;
+export default About;

package/Step5/Summary/About/styles.ts

@@ -42,6 +42,87 @@ export const SubTitle = styled.div`
   border-radius: ${ props => props.theme.borderRadius };
 `;
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Origin above destination, each with a city line and a detail line.
+ * Replaces the single pill that carried only one end of the leg.
+ */
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * The line runs down the Leg itself, not down each Point, so it reads as
+ * one continuous journey rather than two separate bars. Each point's icon
+ * then sits ON that line - centred over it with a background matching the
+ * card, so the line appears to pass behind the icon.
+ */
+export const Leg = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin: 10px 0;
+  padding-left: 26px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 8px;
+    top: 6px;
+    bottom: 6px;
+    width: 2px;
+    background: ${ props => props.theme.background.neutral };
+  }
+`;
+
+export const Point = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const PointIcon = styled.span`
+  position: absolute;
+  left: -26px;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  font-size: 11px;
+  color: ${ props => props.theme.primary.contrast };
+  background: ${ props => props.theme.primary.normal };
+  border-radius: 100px;
+`;
+
+export const PointCity = styled.div`
+  font-weight: 700;
+`;
+
+export const Country = styled.span`
+  font-weight: 400;
+  color: ${ props => props.theme.font.faded };
+`;
+
+export const PointMeta = styled.div<{ $strong?: boolean }>`
+  font-size: calc(${ props => props.theme.size.s } - 1px);
+  font-weight: ${ props => props.$strong ? 700 : 400 };
+  color: ${ props => props.$strong ? props.theme.font.normal : props.theme.font.faded };
+`;
+
+// Edited: Ferjolt Ozuni - Date: 2026-08-01
+// The operator's mark under the route name - who the buyer is actually
+// travelling with, which a company name alone conveys less quickly.
+export const Logo = styled.img`
+  display: block;
+  max-width: 110px;
+  max-height: 34px;
+  object-fit: contain;
+  object-position: left;
+  margin: 6px 0;
+`;
+
 export const Operator = styled.div`
   padding-left: 10px;
   font-size: calc(${ props => props.theme.size.s } - 1px);

package/Steps/Steps.tsx

@@ -8,7 +8,9 @@ interface Props {
 const Steps = ({ value }: Props): JSX.Element => {
   const items: JSX.Element[] = [];
   
-  for (let i = 1; i <= 5; i++) {
+  // Edited: Ferjolt Ozuni - Date: 2026-08-01
+  // Four, not five: passenger details and checkout are one screen now.
+  for (let i = 1; i <= 4; i++) {
     items.push(
       <Item key={ i }>
         <Content $selected={ value > i }>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/routes-order",
-  "version": "1.9.3",
+  "version": "1.11.1",
   "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, AddonsSelection } from './types';
+import { FoundDay, ActionData, SaveData, OrderedData, CouponForm, AddonsSelection, AlternativesData } from './types';
 
 export const useGetDepartures = (data: RoutesSearchForm): UseQueryResult<FoundData[]> => (
   useQuery({
@@ -21,6 +21,32 @@ export const useGetDepartures = (data: RoutesSearchForm): UseQueryResult<FoundDa
   })
 );
 
+/**
+ * What to offer when a search finds nothing.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * `enabled` is the whole point: this only runs once the departure search
+ * has come back empty, so a search that succeeded never pays for it. On
+ * obtapi's side it costs a handful of real searches, which is why it is
+ * not simply folded into /departure.
+ */
+export const useGetAlternatives = (data: RoutesSearchForm, enabled: boolean): UseQueryResult<AlternativesData> => (
+  useQuery({
+    queryKey: ['search-alternatives', { data }],
+    enabled,
+    queryFn: async () => (
+      await apiClient
+        .get('/api/routes/search/alternatives', {
+          params: data
+        })
+        .then(response => (
+          response?.data ?? { from: [], to: [], dates: [] }
+        ))
+    )
+  })
+);
+
 export const useGetReturns = (data: RoutesSearchForm, departure: FoundData): UseQueryResult<FoundData[]> => (
   useQuery({
     queryKey: ['search-routes-step3', { data }],
@@ -74,18 +100,34 @@ export const useGetDates = (step1: RoutesSearchForm, type: ('departure' | '_retu
   })
 };
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * The passenger details moved from a hook argument into the mutation
+ * variables. On the merged checkout screen they are only known at the
+ * moment the buyer presses pay - validated right then, in the same handler
+ * - so baking them into the hook's closure at render time would have sent
+ * whatever was in state one render earlier.
+ */
+export interface OrderSubmission {
+  billing: BillingData
+  person: PersonData
+}
+
 export const usePostOrder = (
   step1: RoutesSearchForm,
   step2: FoundData,
   step3: (FoundData | undefined),
-  step4: PersonData,
   coupon: (CouponData | undefined),
   action: (string | undefined),
   addons: AddonsSelection
-): UseMutationResult<OrderedData, Error, BillingData, unknown> => (
+): UseMutationResult<OrderedData, Error, OrderSubmission, unknown> => (
   useMutation({
     mutationKey: ['save-order'],
-    mutationFn: async (data: BillingData) => {
+    mutationFn: async ({ billing, person }: OrderSubmission) => {
+      const data = billing;
+      const step4 = person;
+
       const type =  step1.type ?? 'departure';
 
       const order: SaveData = {};

package/styles.ts

@@ -23,6 +23,19 @@ export const Actions = styled.div`
   margin-top: 25px;
 `;
 
+/**
+ * The search form kept on screen while browsing results.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Changing a date or a city used to mean going Back to Search and losing
+ * your place. The form stays available above the results so an adjustment
+ * is one edit rather than a round trip.
+ */
+export const SearchAgain = styled.div`
+  margin-bottom: 20px;
+`;
+
 /**
  * Results layout: filters beside the list, not above it.
  *

package/types.ts

@@ -10,6 +10,30 @@ export interface FoundDay {
   from_price_display?: string | null
 }
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ * Alternatives offered when a search finds nothing - see obtapi's
+ * Routes\Search\Nearby.
+ */
+export interface NearbyCity {
+  city: {
+    id: number
+    name: string
+    slug: string
+  }
+  /** kilometres from the city the passenger actually asked for */
+  distance: number
+  routes: number
+  from_price: number
+  from_price_display: string
+}
+
+export interface AlternativesData {
+  from: NearbyCity[]
+  to: NearbyCity[]
+  dates: FoundDay[]
+}
+
 export interface CouponForm {
   code: string
 }

package/Step4/Step4.tsx

@@ -1,114 +0,0 @@
-import { TFunction } from 'i18next';
-import { useForm } from 'react-hook-form';
-import { HiUsers } from 'react-icons/hi';
-import { RiShoppingCartLine } from 'react-icons/ri';
-import { AiOutlineCaretLeft } from 'react-icons/ai';
-import { useBusOccupied } from '@autobusal/hooks';
-import { Button } from '@autobusal/common';
-import Steps from '../Steps/Steps';
-import Loading from './Loading';
-import Passengers from './Passengers/Passengers';
-import checkAge from './checkAge';
-import { Title, Actions } from '../styles';
-import { RoutesSearchForm } from '@autobusal/routes-search/types';
-import { PersonData } from '@autobusal/providers/types/persons';
-import { FoundData } from '@autobusal/providers/types/routes';
-
-interface Props {
-  values?: PersonData
-  step1: RoutesSearchForm
-  step2: FoundData
-  step3?: FoundData
-  isPartner?: boolean
-  t: TFunction<'common'>
-  onSave: (data: PersonData) => void
-  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) : [])
-  ]));
-
-  // Edited: Ferjolt Ozuni - Date: 2026-07-27
-  // FoundData.id is widened to (number | string) for external-provider
-  // offers (Mode A: search + redirect), but those never reach Step4 -
-  // Found/Route.tsx's CTA opens the provider's click-out link for them
-  // instead of calling onSave, so a real local numeric id is guaranteed here.
-  const busFrom = useBusOccupied(step1.departure, step2.id as number);
-  const busTo = useBusOccupied(step1._return, step3?.id as (number | undefined));
-
-  if (busFrom === undefined || busTo === undefined) {
-    return <Loading t={ t } />;
-  }
-
-  const onSubmit = (data: PersonData): void => {
-    // if all the ages are ok, we move forward
-    if (checkAge(step1, data, t)) {
-      onSave(data);
-    }
-  };
-
-  const onUpdate = (name: string, value: (string | number)): void => {
-    setValue(name, value);
-    setError(name, {});
-  };
-
-  const onSendForm = (): void => {
-    handleSubmit(onSubmit)();
-  };
-
-  return (
-    <>
-      <Title>
-        <HiUsers />
-        { t('routes_order.step4.title') }
-      </Title>
-
-      <Steps value={ 4 } />
-
-      <Passengers
-        values={ values }
-        step1={ step1 }
-        fields={ fields }
-        busFrom={ busFrom }
-        busTo={ busTo }
-        t={ t }
-        errors={ errors }
-        refs={ register }
-        onUpdate={ onUpdate }
-      />
-
-      <Actions>
-        { isPartner === undefined && (
-          <Button
-            type="button"
-            subtype="secondary"
-            text={ <><AiOutlineCaretLeft /> { t('routes_order.step4.back') }</> }
-            noMargin
-            onClick={ () => onBack(step1._return ? 3 : 2) }
-          />
-        ) }
-
-        <Button
-          type="button"
-          text={ <><RiShoppingCartLine /> { t('routes_order.step4.next') }</> }
-          noMargin
-          onClick={ onSendForm }
-        />
-      </Actions>
-    </>
-  );
-};
-
-export default Step4;