@autobusal/routes-order 1.40.1 → 1.40.2

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/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.2",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts",