@autobusal/routes-order 1.30.1 → 1.31.1

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## 1.31.1
+
+### Changed
+
+- **One payment method means one button.** The picker no longer renders when
+  there is nothing to pick, and the button reads "Pay Now" rather than "Make
+  Payment" - a heading over a single option the buyer had to press before
+  pressing the real one was a click that only ever had one answer, on the
+  last screen before paying.
+
+## 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

package/Checkout/Checkout.tsx

@@ -15,7 +15,7 @@ import Addons from '../Step5/Addons/Addons';
 import Billing from '../Step5/Billing/Billing';
 import Payments from '../Step5/Payments/Payments';
 import Sidebar from './Sidebar/Sidebar';
-import { getTotal, convertCoupon } from '../Step5/utilities';
+import { getTotal, convertCoupon, getAvailablePayments } from '../Step5/utilities';
 import { Title, Actions, Results, Listing } from '../styles';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { PersonData, BillingData } from '@autobusal/providers/types/persons';
@@ -24,7 +24,7 @@ import { CouponData } from '@autobusal/providers/types/orders';
 import { TotalData } from '../types';
 import { useUserStore } from '@autobusal/providers/stores/user';
 import { useGetSettings } from '@autobusal/providers/services';
-import { usePostOrder, useGetFlex } from '../services';
+import { usePostOrder, useGetFlex, useGetPayments } from '../services';
 import { addon as commerceAddon, beginCheckout, stash } from '@autobusal/providers/Setup/commerce';
 import { item as commerceItem } from '../commerce';
 
@@ -74,6 +74,20 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
   const [ total, setTotal ] = useState<TotalData>(getTotal(step2, step3));
   const [ action, setAction ] = useState<string | undefined>(undefined);
 
+  /*
+   * Edited: Ferjolt Ozuni - Date: 2026-08-07
+   *
+   * Whether there is a payment CHOICE to be made, which decides both whether
+   * the picker draws itself and what the button says.
+   *
+   * The same query the picker runs, under the same key, so react-query
+   * answers it from cache - this reads the answer, it does not fetch it a
+   * second time.
+   */
+  const { data: paymentsData } = useGetPayments();
+
+  const singleMethod = getAvailablePayments(paymentsData, isPartner ?? false).length === 1;
+
   const [ addonWhatsapp, setAddonWhatsapp ] = useState<boolean>(false);
   const [ addonWhatsappNumber, setAddonWhatsappNumber ] = useState<string>('');
   const [ addonTelegram, setAddonTelegram ] = useState<boolean>(false);
@@ -312,6 +326,7 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
           coupon={ coupon }
           total={ grandTotal }
           action={ action }
+          single={ singleMethod }
           pending={ isPending }
           t={ t }
           onPay={ onPay }

package/Checkout/Sidebar/Sidebar.tsx

@@ -26,6 +26,7 @@ interface Props {
   coupon?: CouponData
   total: TotalData
   action?: string
+  single?: boolean
   pending: boolean
   t: TFunction<'common'>
   onPay: () => void
@@ -45,7 +46,7 @@ interface Props {
  * page and scrolled away while add-ons were being ticked - so the number
  * changed out of sight of the person it was changing for.
  */
-const Sidebar = ({ step1, step2, step3, fare, addons, coupon, total, action, pending, t, onPay, children, payments }: Props): JSX.Element => (
+const Sidebar = ({ step1, step2, step3, fare, addons, coupon, total, action, single, pending, t, onPay, children, payments }: Props): JSX.Element => (
   <Container>
     <Panel className="box">
       <SubTitle>
@@ -53,9 +54,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
@@ -84,7 +90,13 @@ const Sidebar = ({ step1, step2, step3, fare, addons, coupon, total, action, pen
         { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
              The label follows the chosen method, so the button says what it
              is about to do - "Reserve" does not take money, and a button
-             reading "Make Payment" for it would be a lie. */ }
+             reading "Make Payment" for it would be a lie.
+
+             Edited: Ferjolt Ozuni - Date: 2026-08-07
+             And when there is only one method, the picker above renders
+             nothing, so this is the whole payment step. "Make Payment" reads
+             as "proceed to the part where you pay"; with nothing left in
+             between, it should say what actually happens next. */ }
         <Button
           loading={ pending }
           noMargin
@@ -93,7 +105,9 @@ const Sidebar = ({ step1, step2, step3, fare, addons, coupon, total, action, pen
               <MdDone />
               { action === 'reserve'
                 ? t('routes_order.step5.reserve')
-                : t('routes_order.step5.next') }
+                : single
+                  ? t('routes_order.step5.pay_now')
+                  : t('routes_order.step5.next') }
             </>
           ) }
           onClick={ onPay }

package/Step5/Payments/Payments.tsx

@@ -7,6 +7,7 @@ import { Inline } from '@autobusal/common';
 import { SubTitle } from '../../styles';
 import { Container, ContainerPayments, ButtonPayment } from './styles';
 import { useGetPayments } from '../../services';
+import { getAvailablePayments } from '../utilities';
 
 interface Props {
   selected: string
@@ -15,9 +16,11 @@ interface Props {
   onChange: (action: string) => void
 }
 
-const Payments = ({ selected, isPartner, t, onChange }: Props): JSX.Element => {
+const Payments = ({ selected, isPartner, t, onChange }: Props): JSX.Element | null => {
   const { data, isLoading, isSuccess } = useGetPayments();
 
+  const available = getAvailablePayments(data, isPartner);
+
   useEffect(() => {
     if (isSuccess) {
       const found = Object.keys(data).find(item => {
@@ -37,6 +40,26 @@ const Payments = ({ selected, isPartner, t, onChange }: Props): JSX.Element => {
     );
   }
 
+  /*
+   * Edited: Ferjolt Ozuni - Date: 2026-08-07
+   *
+   * One method is not a choice, so there is nothing to draw.
+   *
+   * A heading reading "Payment Method" over a single button the buyer must
+   * press before pressing the real one is a step that only ever has one
+   * answer - and it is the last screen before paying, which is the worst
+   * place to spend a click. The effect above has already selected it, so the
+   * button beside this can simply say "Pay Now".
+   *
+   * Rendering nothing rather than hiding with CSS: the picker is a control,
+   * and a control nobody can act on should not be in the page at all - it
+   * would still be reachable by keyboard and still announced by a screen
+   * reader as a thing to decide.
+   */
+  if (available.length <= 1) {
+    return null;
+  }
+
   return (
     <>
       <Container>

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/Step5/utilities.ts

@@ -1,6 +1,6 @@
 import { FoundData } from '@autobusal/providers/types/routes';
 import { CouponData } from '@autobusal/providers/types/orders';
-import { TotalData } from '../types';
+import { ActionData, TotalData } from '../types';
 
 export const getTotal = (step2: FoundData, step3?: FoundData): TotalData => {
   // we get the currency
@@ -21,4 +21,41 @@ export const convertCoupon = (data: CouponData): TotalData => {
     display: data.total,
     value: Number(currency[0])
   };
-};
+};
+
+/**
+ * The payment methods actually offered on this checkout, in the order the
+ * picker shows them.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-07
+ *
+ * Pulled out of Payments because two places need the same answer and they
+ * must not disagree: the picker decides what to draw, and the button decides
+ * whether it is asking the buyer to choose ("Make Payment", after picking a
+ * method) or simply to pay ("Pay Now", when there is nothing to pick). A
+ * second copy of these conditions would eventually drift and produce a
+ * button offering a choice that is not on screen.
+ *
+ * The conditions themselves are unchanged, including their oddities: `cash`
+ * rides on the `funds` flag rather than one of its own, and a partner is
+ * offered every card gateway regardless of what the label enabled. Both were
+ * already true; this is a move, not a rewrite.
+ */
+export const getAvailablePayments = (data?: ActionData, isPartner = false): string[] => {
+  if (!data) {
+    return [];
+  }
+
+  const available: string[] = [];
+
+  if (data.reserve && !isPartner) { available.push('reserve'); }
+  if (data.funds && !isPartner) { available.push('funds', 'cash'); }
+
+  if (data.bkt || isPartner) { available.push('bkt'); }
+  if (data.stripe || isPartner) { available.push('stripe'); }
+  if (data.mollie || isPartner) { available.push('mollie'); }
+  if (data.raiffeisen || isPartner) { available.push('raiffeisen'); }
+  if (data.nexi || isPartner) { available.push('nexi'); }
+
+  return available;
+};

package/package.json

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