@autobusal/routes-order 1.8.0 → 1.9.1

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 { 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';
 
@@ -8,41 +9,112 @@ 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'>
 }
 
-const About = ({ type, step1, data, t }: Props): (JSX.Element | null) => {
-  const icon = type === 'departure' ? <FaArrowRight /> : <FaArrowLeft />;
-
+/**
+ * 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, number, t }: Props): (JSX.Element | null) => {
   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>
-      <ContainerIcon>
-        <Icon>{ icon }</Icon>
-      </ContainerIcon>
-
-      <Information>
-        <Title>{ data.name } ({ data.code })</Title>
-        <SubTitle>{ t(`routes_order.step5.summary.${ type }`, details) }</SubTitle>
-        <Operator>{ data.operator.company }</Operator>
-      </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.display_name } />
+            ) }
+
+            <Operator>{ data.operator.display_name }</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>
   );
 };
 
-export default About;
+export default About;

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;
@@ -42,8 +71,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/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,24 +1,79 @@
 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
-  const currency = step2.price.display.split(' ');
+/*
+ * Edited: Claude - Date: 2026-08-28 (sweep, low)
+ *
+ * The server formats thousands with a SPACE ('1 250.00 EUR', Fundable
+ * 2026-08-19), so split(' ')[0]/[1] read the wrong pieces the moment a
+ * basket crosses 1000 - the currency became '250.00' and a couponed total
+ * became the number 1, corrupting the rendered total and the GA4 values.
+ * The currency is the LAST token; the amount is everything else with the
+ * grouping spaces stripped.
+ */
+export const currencyOf = (display: string): string => (
+  display.trim().split(' ').pop() ?? ''
+);
+
+export const amountOf = (display: string): number => (
+  Number(display.trim().split(' ').slice(0, -1).join(''))
+);
 
+export const getTotal = (step2: FoundData, step3?: FoundData): TotalData => {
   const total = step2.price.value + (step3?.price.value ?? 0);
 
   return {
-    display: `${ total } ${ currency[1] }`,
+    display: `${ total } ${ currencyOf(step2.price.display) }`,
     value: total
   };
 };
 
-export const convertCoupon = (data: CouponData): TotalData => {
-  const currency = data.total.split(' ');
-
-  return {
+export const convertCoupon = (data: CouponData): TotalData => (
+  {
     display: data.total,
-    value: Number(currency[0])
-  };
-};
+    value: amountOf(data.total)
+  }
+);
+
+/**
+ * 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'); }
+
+  // Claude - 2026-08-22 (audit decision BOOK-07): an operator/employee on
+  // their own operator's route pays nothing - the flag is route-aware
+  // (services.ts) and re-checked server-side at payment time.
+  if (data.complimentary && !isPartner) { available.push('complimentary'); }
+
+  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/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/commerce.ts

@@ -0,0 +1,24 @@
+import { CommerceItem } from '@autobusal/providers/Setup/commerce';
+import { FoundData } from '@autobusal/providers/types/routes';
+
+/**
+ * A coach, as the analytics layer sees it.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-05
+ *
+ * One mapping used by every event, so a route cannot be identified one way
+ * in `select_item` and another in `purchase` - which is exactly how a funnel
+ * ends up unable to join its own steps together.
+ *
+ * The ROUTE CODE is the id rather than the numeric key: it is what appears
+ * on the ticket, in the timetable and on the operator's own paperwork, so a
+ * report built on it can be reconciled against something a human recognises.
+ */
+export const item = (route: FoundData): CommerceItem => ({
+  item_id: String(route.code ?? route.id),
+  item_name: `${ route.locations?.from?.city?.name ?? '' } - ${ route.locations?.to?.city?.name ?? '' }`.trim(),
+  item_brand: route.operator?.company,
+  price: Number(route.price?.value ?? 0),
+  quantity: 1
+});
+

package/package.json

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