@autobusal/routes-order 1.30.0 → 1.31.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Changelog
 
+## 1.31.0
+
+### Changed
+
+- **The checkout Order Summary stacks the legs vertically and numbers them**
+  — "Trip 1" above the outbound, "Trip 2" above the return.
+
+  They sat side by side from 768px up, which was written when the summary
+  spanned the page. It has lived in the checkout *sidebar* since 1.11.0 — a
+  narrow column — so two legs abreast left each about half the width a single
+  line like "Terminali Lindor Interurban dhe Nderkombetar i Autobusave (TEG)"
+  needs, and nothing said which was which. Vertical at every width now, in the
+  order they are travelled.
+
+  **The number is only rendered on a round trip.** A one-way has nothing to
+  enumerate, and a lone "Trip 1" would send the reader looking for a Trip 2
+  that was never bought. `Checkout/Sidebar` is the one component that knows
+  whether a second leg exists, so it is the one that decides — `About` just
+  takes an optional `number`.
+
+  "Trip" rather than "Segment": segment is airline jargon, and this is the
+  last screen before somebody pays for a bus ticket.
+
+## 1.30.1
+
+### Fixed
+
+- **Step 3 could never list a single return leg.** `useGetReturns` spread the
+  search form straight into the query string, so the return date went over as
+  `_return` — the form's name for it, because `return` is a reserved word in
+  JS — while the API validates `return`. Every request answered
+  `422 The return field is required`, and "Select a Return Schedule" was empty
+  for every round trip ever searched. The order builder in the same file has
+  always done this mapping (`order.return = step1._return`); only this call
+  was missed.
+
+  Paired with an obtapi fix — `Routes\Search\Returns::find()` returned nothing
+  on its success path — so the step was broken twice over and neither failure
+  could be seen past the other.
+
 ## 1.30.0
 
 ### Added

package/Checkout/Sidebar/Sidebar.tsx

@@ -53,9 +53,14 @@ const Sidebar = ({ step1, step2, step3, fare, addons, coupon, total, action, pen
         { t('routes_order.step5.summary.title') }
       </SubTitle>
 
+      { /* Edited: Ferjolt Ozuni - Date: 2026-08-06
+           Numbered only on a ROUND TRIP. This is the one place that knows
+           whether a second leg exists, so it is the one place that can
+           decide - a one-way labelled "Trip 1" would send the reader looking
+           for a Trip 2 that was never bought. */ }
       <Information>
-        <About type="departure" step1={ step1 } data={ step2 } t={ t } />
-        <About type="return" step1={ step1 } data={ step3 } t={ t } />
+        <About type="departure" step1={ step1 } data={ step2 } number={ step3 ? 1 : undefined } t={ t } />
+        <About type="return" step1={ step1 } data={ step3 } number={ step3 ? 2 : undefined } t={ t } />
       </Information>
 
       { /* Edited: Ferjolt Ozuni - Date: 2026-08-01

package/Step5/Summary/About/About.tsx

@@ -1,7 +1,7 @@
 import { TFunction } from 'i18next';
 import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
 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 { Trip, TripLabel, 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';
 
@@ -9,6 +9,16 @@ interface Props {
   type: 'departure' | 'return'
   step1: RoutesSearchForm
   data?: FoundData
+
+  /**
+   * Which leg of the journey this is, 1-based.
+   *
+   * Ferjolt Ozuni - Date: 2026-08-06
+   * Only passed on a ROUND TRIP - the caller is the one that knows whether
+   * there is a second leg, and a one-way has nothing to number.
+   */
+  number?: number
+
   t: TFunction<'public'>
 }
 
@@ -26,7 +36,7 @@ interface Props {
  * 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 About = ({ type, step1, data, number, t }: Props): (JSX.Element | null) => {
   if (!data) {
     return null;
   }
@@ -36,68 +46,74 @@ const About = ({ type, step1, data, t }: Props): (JSX.Element | null) => {
   const date = type === 'departure' ? step1.departure : step1._return;
 
   return (
-    <Container>
-      <ContainerIcon>
-        <Icon>{ icon }</Icon>
-      </ContainerIcon>
-
-      <Information>
-        <Title>{ data.name } ({ data.code })</Title>
-
-        { /* 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>
+    <Trip>
+      { number !== undefined && (
+        <TripLabel>{ t('routes_order.step5.summary.trip', { number }) }</TripLabel>
+      ) }
+
+      <Container>
+        <ContainerIcon>
+          <Icon>{ icon }</Icon>
+        </ContainerIcon>
+
+        <Information>
+          <Title>{ data.name } ({ data.code })</Title>
+
+          { /* 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>
+    </Trip>
   );
 };
 

package/Step5/Summary/About/styles.ts

@@ -1,5 +1,34 @@
 import styled from 'styled-components';
 
+/**
+ * One leg, with its number above it.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-06
+ * This wrapper exists so the label can sit ACROSS the leg rather than beside
+ * the arrow: Container below is the icon-and-content row, and a heading
+ * placed inside it would indent into the content column and read as part of
+ * the route name.
+ */
+export const Trip = styled.div`
+  flex: 1;
+`;
+
+/**
+ * "Trip 1", "Trip 2" - only rendered when there are two.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-06
+ * A one-way booking has nothing to enumerate, and numbering a lone leg would
+ * invite the reader to go looking for the other one.
+ */
+export const TripLabel = styled.div`
+  margin-bottom: 8px;
+  color: ${ props => props.theme.font.faded };
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+`;
+
 export const Container = styled.div`
   flex: 1;
   display: flex;

package/Step5/Summary/styles.ts

@@ -1,11 +1,18 @@
 import styled from 'styled-components';
 
+/**
+ * The legs of the booking, stacked.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-06
+ * They used to sit SIDE BY SIDE from 768px up. That was written when the
+ * summary spanned the page; it now lives in the checkout sidebar, a narrow
+ * column, where two legs abreast left each one about half the room a single
+ * line like "Terminali Lindor Interurban dhe Nderkombetar i Autobusave
+ * (TEG)" needs. Vertical at every width, so each leg gets the panel's full
+ * width and the two read in the order they are travelled.
+ */
 export const Information = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 15px;
-
-  @media (min-width: 768px) {
-    flex-direction: row;
-  }
+  gap: 20px;
 `;

package/package.json

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

package/services.ts

@@ -47,6 +47,18 @@ export const useGetAlternatives = (data: RoutesSearchForm, enabled: boolean): Us
   })
 );
 
+/**
+ * The return legs on offer for an already-chosen outbound.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-05
+ * The return date goes over as `return`. The form calls it `_return`
+ * because `return` is a reserved word in JS, and spreading the form
+ * straight into the query string therefore sent a field the API does not
+ * know while omitting the one it validates - so this request answered 422
+ * "The return field is required" every single time, and step 3 could never
+ * list anything. The order builder below has always done this mapping
+ * (`order.return = step1._return`); only this call was missed.
+ */
 export const useGetReturns = (data: RoutesSearchForm, departure: FoundData): UseQueryResult<FoundData[]> => (
   useQuery({
     queryKey: ['search-routes-step3', { data }],
@@ -55,6 +67,7 @@ export const useGetReturns = (data: RoutesSearchForm, departure: FoundData): Use
         .get('/api/routes/search/return', {
           params: {
             ...data,
+            return: data._return,
             operator_id: departure.operator.id
           }
         })