@autobusal/routes-order 1.34.0 → 1.34.1

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, getAvailablePayments, currencyOf } from '../Step5/utilities';
+import { getTotal, convertCoupon, getAvailablePayments, currencyOf, surchargeOf } 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';
@@ -264,6 +264,35 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
     value: total.value + addonsValue
   };
 
+  /*
+   * Claude - 2026-08-29 (ruling by Ferjolt)
+   *
+   * THE CARD SURCHARGE, shown the moment a card method is picked rather
+   * than sprung on the buyer at the bank's own page: "Once selected a
+   * payment method, will show at it +{real value}, and not showing it only
+   * on the card filling details."
+   *
+   * Zero until a method is chosen, and zero forever for funds, cash,
+   * reserve and complimentary - see surchargeOf, which only recognises the
+   * five gateways obtapi actually surcharges.
+   */
+  const surcharge = surchargeOf(grandTotal.value, action, paymentsData);
+
+  /*
+   * What the buyer is actually asked for. Rounded rather than summed
+   * straight into the template: 19.90 + 1.00 is not 20.90 in IEEE-754, and
+   * a total rendering as 20.900000000000002 is the sort of thing that
+   * reaches a screenshot before it reaches a test.
+   *
+   * The un-surcharged `grandTotal` is what still goes to GA4 below - the
+   * value of the SALE is the tickets and the add-ons, and folding a card
+   * fee into it would quietly inflate revenue for anyone paying by card.
+   */
+  const payable: TotalData = surcharge > 0 ? {
+    display: `${ Math.round((grandTotal.value + surcharge) * 100) / 100 } ${ currency }`,
+    value: Math.round((grandTotal.value + surcharge) * 100) / 100
+  } : grandTotal;
+
   /**
    * Edited: Ferjolt Ozuni - Date: 2026-08-05
    *
@@ -469,7 +498,8 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
           fare={ getTotal(step2, step3).display }
           addons={ addonItems.map(item => ({ label: item.label, value: `${ item.price } ${ currency }` })) }
           coupon={ coupon }
-          total={ grandTotal }
+          total={ payable }
+          surcharge={ surcharge > 0 ? `${ surcharge } ${ currency }` : undefined }
           action={ action }
           single={ singleMethod }
           pending={ isPending }
@@ -480,6 +510,8 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
               selected={ action ?? '' }
               isPartner={ isPartner ?? false }
               routeId={ step2.id }
+              total={ grandTotal.value }
+              currency={ currency }
               t={ t }
               onChange={ onAction }
             />

package/Checkout/Sidebar/Sidebar.tsx

@@ -25,6 +25,15 @@ interface Props {
   addons: AddonItem[]
   coupon?: CouponData
   total: TotalData
+  /**
+   * The card surcharge already included in `total`, formatted with its
+   * currency - undefined when the chosen method carries none.
+   *
+   * Claude - 2026-08-29 (ruling by Ferjolt): the fee is stated as its own
+   * line rather than folded silently into the total, so the buyer can see
+   * what changed when they picked a card.
+   */
+  surcharge?: string
   action?: string
   single?: boolean
   pending: boolean
@@ -46,7 +55,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, single, pending, t, onPay, children, payments }: Props): JSX.Element => (
+const Sidebar = ({ step1, step2, step3, fare, addons, coupon, total, surcharge, action, single, pending, t, onPay, children, payments }: Props): JSX.Element => (
   <Container>
     <Panel className="box">
       <SubTitle>
@@ -79,6 +88,15 @@ const Sidebar = ({ step1, step2, step3, fare, addons, coupon, total, action, sin
 
         { coupon && <Amount type="discount" code={ coupon.code } value={ coupon.discount } t={ t } /> }
 
+        { /* Claude - 2026-08-29: below the discount and above the total,
+             because it is the last thing added to what is owed - and it is
+             the only line here that appears and disappears as the payment
+             method changes, which reads as cause and effect when it sits
+             directly under the picker's own effect on the total. */ }
+        { surcharge && (
+          <Amount type="addon" label={ t('routes_order.step5.summary.surcharge') } value={ surcharge } t={ t } />
+        ) }
+
         <Amount type="total" value={ total.display } t={ t } />
       </div>
 

package/Step5/Payments/Payments.tsx

@@ -7,19 +7,39 @@ import { Inline } from '@autobusal/common';
 import { SubTitle } from '../../styles';
 import { Container, ContainerPayments, ButtonPayment } from './styles';
 import { useGetPayments } from '../../services';
-import { getAvailablePayments } from '../utilities';
+import { getAvailablePayments, surchargeOf } from '../utilities';
 
 interface Props {
   selected: string
   isPartner: boolean
   routeId?: number | string
+  /**
+   * The checkout total the surcharge is drawn against, and its currency.
+   *
+   * Claude - 2026-08-29 (ruling by Ferjolt): each card button says what it
+   * adds, so the cost of choosing a card is visible BEFORE it is chosen -
+   * the summary line can only ever explain the method already picked.
+   */
+  total?: number
+  currency?: string
   t: TFunction<'common'>
   onChange: (action: string) => void
 }
 
-const Payments = ({ selected, isPartner, routeId, t, onChange }: Props): JSX.Element | null => {
+const Payments = ({ selected, isPartner, routeId, total, currency, t, onChange }: Props): JSX.Element | null => {
   const { data, isLoading, isSuccess } = useGetPayments(routeId);
 
+  /*
+   * What a given card gateway would add to this basket, as a "+1.00 EUR"
+   * suffix - or nothing at all when the brand charges no surcharge on it,
+   * which is every gateway until somebody configures one.
+   */
+  const fee = (method: string): string => {
+    const value = surchargeOf(total ?? 0, method, data);
+
+    return value > 0 ? ` +${ value }${ currency ? ` ${ currency }` : '' }` : '';
+  };
+
   const available = getAvailablePayments(data, isPartner);
 
   useEffect(() => {
@@ -101,35 +121,35 @@ const Payments = ({ selected, isPartner, routeId, t, onChange }: Props): JSX.Ele
           { (data?.bkt || isPartner) && (
             <ButtonPayment type="button" $selected={ selected === 'bkt' } onClick={ () => onChange('bkt') }>
               <AiOutlineCreditCard />
-              { t('routes_order.step5.actions.card') }
+              { t('routes_order.step5.actions.card') }{ fee('bkt') }
             </ButtonPayment>
           ) }
 
           { (data?.stripe || isPartner) && (
             <ButtonPayment type="button" $selected={ selected === 'stripe' } onClick={ () => onChange('stripe') }>
               <AiOutlineCreditCard />
-              { t('routes_order.step5.actions.card') }
+              { t('routes_order.step5.actions.card') }{ fee('stripe') }
             </ButtonPayment>
           ) }
 
           { (data?.mollie || isPartner) && (
             <ButtonPayment type="button" $selected={ selected === 'mollie' } onClick={ () => onChange('mollie') }>
               <AiOutlineCreditCard />
-              { t('routes_order.step5.actions.card') }
+              { t('routes_order.step5.actions.card') }{ fee('mollie') }
             </ButtonPayment>
           ) }
 
           { (data?.raiffeisen || isPartner) && (
             <ButtonPayment type="button" $selected={ selected === 'raiffeisen' } onClick={ () => onChange('raiffeisen') }>
               <AiOutlineCreditCard />
-              { t('routes_order.step5.actions.card') }
+              { t('routes_order.step5.actions.card') }{ fee('raiffeisen') }
             </ButtonPayment>
           ) }
 
           { (data?.nexi || isPartner) && (
             <ButtonPayment type="button" $selected={ selected === 'nexi' } onClick={ () => onChange('nexi') }>
               <AiOutlineCreditCard />
-              { t('routes_order.step5.actions.card') }
+              { t('routes_order.step5.actions.card') }{ fee('nexi') }
             </ButtonPayment>
           ) }
         </ContainerPayments>

package/Step5/utilities.ts

@@ -77,3 +77,42 @@ export const getAvailablePayments = (data?: ActionData, isPartner = false): stri
 
   return available;
 };
+
+/**
+ * The card surcharge on a checkout total, for the method the buyer picked.
+ *
+ * Claude - 2026-08-29 (ruling by Ferjolt)
+ *
+ * Settling by card costs us the gateway's cut, and that cut is the payer's
+ * rather than ours - "We do not have to support from our fund the payment
+ * gateway fees". So the moment a card method is selected, the checkout says
+ * what it adds, instead of the buyer meeting a bigger number on the bank's
+ * own page.
+ *
+ * ZERO FOR EVERYTHING THAT IS NOT A CARD. `funds`, `cash`, `reserve` and
+ * `complimentary` move no card money, and the map the server sends only ever
+ * contains the five gateways - the same allowlist obtapi surcharges on, so
+ * an unrecognised method here answers 0 rather than guessing.
+ *
+ * ROUNDED TO THE CENT, the same round-half-up on the same base the server
+ * charges, so the figure the buyer agreed to on this screen is the figure
+ * the gateway asks for. Money that disagrees between the two by a cent is
+ * a support ticket, and it is the kind nobody can ever reproduce.
+ */
+export const surchargeOf = (total: number, method?: string, data?: ActionData): number => {
+  if (!method || !data?.surcharges) {
+    return 0;
+  }
+
+  const percent = data.surcharges[method as keyof typeof data.surcharges] ?? 0;
+
+  if (!(percent > 0) || !(total > 0)) {
+    return 0;
+  }
+
+  // total * percent / 100, to the cent. Written as ONE rounding of
+  // (total * percent) because dividing first introduces a binary
+  // fraction the server's own round() never sees - 19.90 at 5% has to
+  // land on 1.00 in both languages, not 0.99 in one of them.
+  return Math.round(total * percent) / 100;
+};

package/package.json

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

package/types.ts

@@ -48,6 +48,15 @@ export interface ActionData {
   mollie: boolean
   raiffeisen: boolean
   nexi: boolean
+  /**
+   * The card surcharge each gateway carries on this brand, as a PERCENTAGE
+   * (5 means 5%) - see obtapi Payments\Surcharge.
+   *
+   * Claude - 2026-08-29 (ruling by Ferjolt). Optional because an older
+   * obtapi does not send it, and a brand on a mixed deploy must show no
+   * surcharge rather than NaN.
+   */
+  surcharges?: Partial<Record<'bkt' | 'stripe' | 'mollie' | 'raiffeisen' | 'nexi', number>>
 }
 
 export interface SaveData {