@autobusal/routes-order 1.40.1 → 1.40.3

package/Checkout/Checkout.tsx

@@ -16,6 +16,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 { useLocalPrice } from './LocalPrice';
 import { getTotal, convertCoupon, getAvailablePayments, currencyOf, surchargeOf } from '../Step5/utilities';
 import { Title, Actions, Results, Listing } from '../styles';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
@@ -396,6 +397,10 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
     value: owed
   } : grandTotal;
 
+  // Claude - 2026-09-26: the same total in the currency Google quoted, for
+  // a traveller who arrived from Google Travel on this route (LocalPrice)
+  const local = useLocalPrice(step2.id as number | undefined, payable.value);
+
   /**
    * Edited: Ferjolt Ozuni - Date: 2026-08-05
    *
@@ -634,6 +639,7 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
           addons={ addonItems.map(item => ({ label: item.label, value: `${ item.price } ${ currency }` })) }
           coupon={ coupon }
           total={ payable }
+          local={ local }
           surcharge={ surcharge > 0 ? `${ surcharge } ${ currency }` : undefined }
           /* the seller's own cut, taken off what they settle - the same line
              their invoice carries (audit A4-17), so the two documents for one

package/Checkout/LocalPrice.ts

@@ -0,0 +1,78 @@
+import { useQuery } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+
+/**
+ * The price Google showed, beside the price we charge.
+ *
+ * Claude - 2026-09-26 (Ferjolt: "build the checkout price display"). Google
+ * Travel quotes a departure in its origin's currency (obtapi Google\Transport
+ * - lekë from Albania) and requires the landing page to show the price the
+ * traveller picked. The ticket link names that currency (`local=ALL`, next
+ * to `route=`); this remembers it for the session, and the checkout shows
+ * "≈ 1,840 ALL" under the euro total for THAT route only - a later booking
+ * from Greece in the same tab shows nothing. Display only: the charge stays
+ * in the brand's currency. No rate known: no line.
+ */
+
+const KEY = 'checkout_local_currency';
+
+// whole units where prices are quoted whole - the same rule as the quote
+const WHOLE = ['ALL', 'MKD', 'RSD', 'HUF', 'ISK'];
+
+interface Stored {
+  currency: string
+  route: number
+}
+
+/** called on every wizard render: keeps the currency the landing URL named */
+export const rememberLocalCurrency = (params: URLSearchParams): void => {
+  const currency = params.get('local');
+  const route = Number(params.get('route'));
+
+  if (!currency || !/^[A-Z]{3}$/.test(currency) || !route) {
+    return;
+  }
+
+  try {
+    sessionStorage.setItem(KEY, JSON.stringify({ currency, route }));
+  } catch {
+    // private mode / storage blocked: the line is a nicety, not a feature
+  }
+};
+
+const stored = (): Stored | null => {
+  try {
+    const value = JSON.parse(sessionStorage.getItem(KEY) ?? 'null');
+
+    return value && typeof value.currency === 'string' && typeof value.route === 'number' ? value : null;
+  } catch {
+    return null;
+  }
+};
+
+/** "1,840 ALL" for this route's total, or undefined */
+export const useLocalPrice = (routeId: number | undefined, total: number): string | undefined => {
+  const local = stored();
+
+  const currency = local && routeId && local.route === routeId ? local.currency : null;
+
+  const { data: rate } = useQuery({
+    queryKey: ['exchange-rate-local', currency],
+    queryFn: async () => (
+      await apiClient.get('/api/exchange-rates/local', { params: { currency } }).then(response => response.data?.rate as number | null)
+    ),
+    enabled: currency !== null,
+    staleTime: 10 * 60 * 1000,
+    retry: false
+  });
+
+  if (!currency || !rate || !(total > 0)) {
+    return undefined;
+  }
+
+  const decimals = WHOLE.includes(currency) ? 0 : 2;
+
+  const amount = Number((total * rate).toFixed(decimals));
+
+  return `${ amount.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals }) } ${ currency }`;
+};

package/Checkout/Sidebar/Sidebar.tsx

@@ -4,7 +4,7 @@ import { AiOutlineInfoCircle } from 'react-icons/ai';
 import { Button } from '@autobusal/common';
 import About from '../../Step5/Summary/About/About';
 import Amount from '../../Step5/Summary/Amount/Amount';
-import { Container, Panel, Actions, Notice } from './styles';
+import { Container, Panel, Actions, Notice, Local } from './styles';
 import { SubTitle } from '../../styles';
 import { Information } from '../../Step5/Summary/styles';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
@@ -25,6 +25,11 @@ interface Props {
   addons: AddonItem[]
   coupon?: CouponData
   total: TotalData
+  /**
+   * Claude - 2026-09-26: the total in the currency Google Travel quoted
+   * ("1,840 ALL"), shown under it for a Google arrival - display only.
+   */
+  local?: string
   /**
    * The card surcharge already included in `total`, formatted with its
    * currency - undefined when the chosen method carries none.
@@ -65,7 +70,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, surcharge, comission, action, single, pending, t, onPay, children, payments }: Props): JSX.Element => (
+const Sidebar = ({ step1, step2, step3, fare, addons, coupon, total, local, surcharge, comission, action, single, pending, t, onPay, children, payments }: Props): JSX.Element => (
   <Container>
     <Panel className="box">
       <SubTitle>
@@ -116,6 +121,10 @@ const Sidebar = ({ step1, step2, step3, fare, addons, coupon, total, surcharge,
         ) }
 
         <Amount type="total" value={ total.display } t={ t } />
+
+        { local && (
+          <Local>{ t('routes_order.step5.summary.local', { ns: 'common', amount: local }) }</Local>
+        ) }
       </div>
 
       <Actions>

package/Checkout/Sidebar/styles.ts

@@ -50,3 +50,11 @@ export const Notice = styled.p`
   color: ${ props => props.theme.font.faded };
   text-align: center;
 `;
+
+// Claude - 2026-09-26: the total in the currency Google Travel quoted
+export const Local = styled.div`
+  margin-top: -4px;
+  text-align: right;
+  color: ${ props => props.theme.font.faded };
+  font-size: ${ props => props.theme.size.s };
+`;

package/Found/Route/Route.tsx

@@ -3,12 +3,12 @@ import { TFunction } from 'i18next';
 import { HiOutlineArrowNarrowRight, HiOutlineDocumentText, HiChevronDown, HiChevronUp } from 'react-icons/hi';
 import { BiHourglass } from 'react-icons/bi';
 import { RiBus2Line } from 'react-icons/ri';
-import { MdOutlineAltRoute } from 'react-icons/md';
+import { MdOutlineAltRoute, MdEventSeat } from 'react-icons/md';
 import { formatDuration, splitPrice } from '../refine';
 import { Button, RouteFeature, Information, Rating } from '@autobusal/common';
 import { useGetSettings } from '@autobusal/providers/services';
 import { createDate, getDayParts } from '@autobusal/utilities';
-import { Container, ButtonDetails, SpecialOffer, FavoriteStop, Trip, Company, Location, Stop, Iso, Time, Price, Amount, Decimals, Currency, PriceNotice, SeatsLeft, LinkCompany, CodeCompany, Details, Detail, ButtonPolicy, TitleDetail, FeaturesItems, Leaves, Day, NextDay, Standard, Stops, StopsItems, StopRow, StopTime, StopDay, StopBorder } from './styles';
+import { Container, ButtonDetails, SpecialOffer, FavoriteStop, Trip, Company, Location, Stop, Iso, Time, Price, Amount, Decimals, Currency, PriceNotice, SeatsLeft, SeatsCompact, LinkCompany, CodeCompany, Details, Detail, ButtonPolicy, TitleDetail, FeaturesItems, Leaves, Day, NextDay, Standard, Stops, StopsItems, StopRow, StopTime, StopDay, StopBorder } from './styles';
 import { FoundData } from '@autobusal/providers/types/routes';
 
 /**
@@ -195,6 +195,25 @@ const Route = ({ data, type, date, passengers, t, onSave }: Props): JSX.Element
             <MdOutlineAltRoute />
             { data.code }
           </CodeCompany>
+
+          { /* Claude - 2026-09-27 (Ferjolt: "on small screens, can we show the
+               Seats left inline with operator logo and route code, on the
+               right side of the row?"). A seat and the number rather than the
+               sentence: the row is short on a phone, and a seat icon ALONE
+               could be read as "choose your seat" (a paid add-on) - the
+               number is what makes it a count. The full sentence stays for
+               screen readers and as the tooltip. Phones only; wider screens
+               keep the sentence under the price. */ }
+          { seats !== null && (
+            <SeatsCompact
+              $low={ seats <= LOW_SEATS }
+              title={ t('routes_order.step2.route.seats_left', { count: seats }) }
+              aria-label={ t('routes_order.step2.route.seats_left', { count: seats }) }
+            >
+              <MdEventSeat aria-hidden="true" />
+              { seats }
+            </SeatsCompact>
+          ) }
         </Company>
 
         <Location $side="from">

package/Found/Route/styles.ts

@@ -157,6 +157,18 @@ export const Company = styled.div`
     flex-wrap: wrap;
     gap: 8px;
     margin-bottom: 4px;
+
+    /*
+     * Claude - 2026-09-27: the operator's rating as ONE star and the number
+     * ("★ 4.3 (3)") on a phone. Measured at 375px: logo 96 + five stars and
+     * the score 120 + route code 77 + the seats count 48 is 365px on a 315px
+     * row, so the seats count wrapped to a line of its own. The full five
+     * stars stay on wider screens, and the whole summary is the tooltip
+     * (Rating's title). The rating is the only span before the seats count.
+     */
+    & > span:first-of-type svg:not(:first-child) {
+      display: none;
+    }
   }
 
   /**
@@ -1051,7 +1063,41 @@ export const SeatsLeft = styled.span<{ $low: boolean }>`
   font-weight: ${ props => (props.$low ? 700 : 400) };
   color: ${ props => (props.$low ? props.theme.font.error : props.theme.font.faded) };
 
+  // Claude - 2026-09-27: on a phone the count moves up to the operator row
+  // (SeatsCompact) - one place to read it, not two
+  @media (max-width: 639px) {
+    display: none;
+  }
+
   @media (min-width: 768px) {
     text-align: center;
   }
 `;
+
+/*
+ * Claude - 2026-09-27 (Ferjolt): the seats count on a phone - a seat and the
+ * number, pushed to the right end of the operator row (logo, rating, route
+ * code). Same emphasis as SeatsLeft when few are left.
+ */
+export const SeatsCompact = styled.span<{ $low: boolean }>`
+  display: none;
+
+  @media (max-width: 639px) {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: auto;
+    padding: 2px 8px;
+    border-radius: 100px;
+    background: ${ props => (props.$low ? 'rgba(204, 51, 51, .1)' : props.theme.background.neutral) };
+    color: ${ props => (props.$low ? props.theme.font.error : props.theme.font.faded) };
+    font-size: ${ props => props.theme.size.xs };
+    font-weight: 700;
+    line-height: 1.4;
+    white-space: nowrap;
+
+    svg {
+      font-size: 1.15em;
+    }
+  }
+`;

package/RoutesOrder.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useMemo, useRef } from 'react';
 import { useParams, useSearchParams, useNavigate, useLocation } from 'react-router-dom';
+import { rememberLocalCurrency } from './Checkout/LocalPrice';
 import { TFunction } from 'i18next';
 import { AiOutlineSearch, AiOutlineCaretDown, AiOutlineCaretUp } from 'react-icons/ai';
 import { Meta, PageBreadcrumbs } from '@autobusal/common';
@@ -109,6 +110,10 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
    */
   const [ searchParams, setSearchParams ] = useSearchParams();
 
+  // Claude - 2026-09-26: a Google Travel arrival names the currency Google
+  // quoted (`local=ALL`); the checkout shows the price in it too
+  rememberLocalCurrency(searchParams);
+
   const navigate = useNavigate();
 
   const location = useLocation();

package/package.json

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