@autobusal/routes-order 1.9.3 → 1.11.3

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/Coupons.tsx

@@ -1,10 +1,8 @@
 import { TFunction } from 'i18next';
 import { useForm } from 'react-hook-form';
 import { RiCoupon3Line } from 'react-icons/ri';
-import { Button } from '@autobusal/common';
 import { Validate, Display } from '@autobusal/utilities';
-import { SubTitle } from '../../styles';
-import { Container, ContainerForm, ContainerInput } from './styles';
+import { Container, ContainerForm, ContainerInput, Apply } from './styles';
 import { CouponData } from '@autobusal/providers/types/orders';
 import { FoundData } from '@autobusal/providers/types/routes';
 import { TotalData, CouponForm } from '../../types';
@@ -46,27 +44,35 @@ const Coupons = ({ current, step2, t, total, onApplied }: Props): (JSX.Element |
     return null;
   }
 
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-01
+   *
+   * One field with the apply control tucked inside it. In the checkout
+   * sidebar this used to be a card of its own, with a heading and a
+   * full-width button, taking more room than the totals it exists to
+   * change - for something most buyers do not have.
+   *
+   * The button keeps its accessible name via aria-label and title, so
+   * dropping the visible text costs a screen reader nothing.
+   */
   return (
-    <Container className="box">
-      <SubTitle>
-        <RiCoupon3Line />
-        { t('routes_order.step5.coupon.title') }
-      </SubTitle>
-
+    <Container>
       <form onSubmit={ handleSubmit(onSubmit) }>
         <ContainerForm>
           <ContainerInput>
             <input type="text" placeholder={ t('routes_order.step5.coupon.code') } { ...register('code', Validate('required|min_length:4', t)) } />
-            { Display(errors.code) }
+
+            <Apply
+              type="submit"
+              disabled={ isPending }
+              aria-label={ t('routes_order.step5.coupon.apply') }
+              title={ t('routes_order.step5.coupon.apply') }
+            >
+              <RiCoupon3Line />
+            </Apply>
           </ContainerInput>
 
-          <Button
-            type="submit"
-            loading={ isPending }
-            text={ t('routes_order.step5.coupon.apply') }
-            noMargin
-            maxWidth={ 175 }
-          />
+          { Display(errors.code) }
         </ContainerForm>
       </form>
     </Container>

package/Step5/Coupons/styles.ts

@@ -1,20 +1,53 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
-  margin-top: 25px;
+  margin-top: 0;
 `;
 
 export const ContainerForm = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 15px;
-  max-width: 450px;
+  gap: 4px;
+`;
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * The apply control sits INSIDE the field rather than beside it. Beside it
+ * in a narrow sidebar, the two either fought for width or stacked into two
+ * full-width rows for something most buyers never use.
+ */
+export const ContainerInput = styled.div`
+  position: relative;
 
-  @media (min-width: 480px) {
-    flex-direction: row;
+  & > input {
+    width: 100%;
+    padding-right: 42px;
   }
 `;
 
-export const ContainerInput = styled.div`
-  flex: 1;
-`;
+export const Apply = styled.button`
+  position: absolute;
+  top: 50%;
+  right: 6px;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  font-size: ${ props => props.theme.size.l };
+  color: ${ props => props.theme.primary.contrast };
+  background: ${ props => props.theme.primary.normal };
+  border-radius: ${ props => props.theme.borderRadius };
+  transition: all 0.2s ease;
+
+  &:hover {
+    opacity: .85;
+  }
+
+  &:disabled {
+    opacity: .5;
+    cursor: default;
+  }
+`;

package/Step5/Payments/Payments.tsx

@@ -31,7 +31,7 @@ const Payments = ({ selected, isPartner, t, onChange }: Props): JSX.Element => {
 
   if (isLoading) {
     return (
-      <Container className="box">
+      <Container>
         <Inline text={ t('routes_order.step5.actions.loading') } />
       </Container>
     );
@@ -39,7 +39,7 @@ const Payments = ({ selected, isPartner, t, onChange }: Props): JSX.Element => {
 
   return (
     <>
-      <Container className="box">
+      <Container>
         <SubTitle>
           <RiSecurePaymentLine />
           { t('routes_order.step5.actions.title') }

package/Step5/Payments/styles.ts

@@ -1,14 +1,20 @@
 import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
-  margin-top: 25px;
+  margin-top: 0;
 `;
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * All options on one row inside the checkout sidebar. They are a choice of
+ * three short labels, not three products, so stacking them into tall cards
+ * gave a minor decision more visual weight than the total above it.
+ */
 export const ContainerPayments = styled.div`
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
-  gap: 15px;
+  gap: 6px;
   justify-content: center;
 `;
 
@@ -17,9 +23,12 @@ export const ButtonPayment = styled.button<{ $selected: boolean }>`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 10px;
-  flex-basis: 150px;
-  padding: 10px;
+  gap: 4px;
+  // equal shares of one row, never wrapping - min-width:0 lets them shrink
+  // below their label width instead of pushing each other onto new lines
+  flex: 1 1 0;
+  min-width: 0;
+  padding: 8px 4px;
   text-align: center;
   font-weight: 700;
   border: 1px solid ${ props => props.theme.background.neutral };
@@ -27,7 +36,7 @@ export const ButtonPayment = styled.button<{ $selected: boolean }>`
   transition: all 0.3s ease;
 
   & > svg {
-    font-size: 35px;
+    font-size: 22px;
   }
 
   &:hover {

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, Carrier, 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,62 @@ 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>
-        <Operator>{ data.operator.company }</Operator>
+
+        { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
+             Mark and name together, ranged right. The name used to sit
+             alone at the foot of the block, so the logo read as decoration
+             rather than as the operator being identified. */ }
+        <Carrier>
+          { data.operator.logo_url && (
+            <Logo src={ data.operator.logo_url } alt={ data.operator.company } />
+          ) }
+
+          <Operator>{ data.operator.company }</Operator>
+        </Carrier>
+
+        <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>
       </Information>
     </Container>
   );
 };
 
-export default About;
+export default About;

package/Step5/Summary/About/styles.ts

@@ -42,8 +42,96 @@ 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 Carrier = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  margin: 6px 0;
+`;
+
+export const Logo = styled.img`
+  display: block;
+  max-width: 90px;
+  max-height: 30px;
+  object-fit: contain;
+`;
+
 export const Operator = styled.div`
-  padding-left: 10px;
   font-size: calc(${ props => props.theme.size.s } - 1px);
+  font-weight: 700;
+  text-align: right;
   color: ${ props => props.theme.font.faded };
 `;

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.3",
   "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 = {};