@autobusal/routes-order 1.9.0 → 1.9.1

package/Checkout/Checkout.tsx

@@ -0,0 +1,519 @@
+import { useCallback, useState, useEffect } from 'react';
+import { TFunction } from 'i18next';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { RiShoppingCartLine } from 'react-icons/ri';
+import { AiOutlineCaretLeft } from 'react-icons/ai';
+import { useBusOccupied } from '@autobusal/hooks';
+import { Button } from '@autobusal/common';
+import Steps from '../Steps/Steps';
+import Loading from '../Step4/Loading';
+import Passengers from '../Step4/Passengers/Passengers';
+import checkAge from '../Step4/checkAge';
+import Coupons from '../Step5/Coupons/Coupons';
+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 { Title, Actions, Results, Listing } from '../styles';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+import { PersonData, BillingData } from '@autobusal/providers/types/persons';
+import { FoundData } from '@autobusal/providers/types/routes';
+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, useGetPayments, useGetSavedPassengers } from '../services';
+import { addon as commerceAddon, beginCheckout, stash } from '@autobusal/providers/Setup/commerce';
+import { item as commerceItem } from '../commerce';
+import { error as notifyError } from '@autobusal/utilities';
+
+interface Props {
+  values?: PersonData
+  step1: RoutesSearchForm
+  step2: FoundData
+  step3?: FoundData
+  isPartner?: boolean
+  t: TFunction<'common'>
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-01
+   * Hands the typed passenger details back up before leaving, so going
+   * back to change a route and returning does not wipe the form. Step4
+   * used to get this for free by only ever leaving via a successful
+   * submit; this screen can be left mid-edit.
+   */
+  onStore: (data: PersonData) => void
+  onBack: (step: number) => void
+}
+
+// Routes without a passenger_fields config keep the pre-feature form
+const DEFAULT_FIELDS = ['sex', 'passport'];
+
+/**
+ * Edited: Claude - Date: 2026-08-21
+ *
+ * THE THREE COLUMNS A REGISTERED CUSTOMER CAN ARRIVE HERE UNABLE TO FILL,
+ * as `checkout field => the profile field that answers it`.
+ *
+ * `orders_contact`.`phone`/`address`/`city` are NOT NULL with no default;
+ * the same three on `visitors` are nullable, and registration collects a
+ * name, an email and a password and nothing else. So an incomplete profile
+ * is the ORDINARY state of a self-registered customer rather than an edge
+ * case - and until today it meant a 500 fired after the seats had already
+ * been held, and then (once that was patched) a booking handed to the
+ * operator with no phone number for the passenger.
+ *
+ * The customer is asked here instead, in the guest form's own fields, for
+ * the gaps and nothing else. Mirrors Orders\Make\Contact::BILLING and
+ * Orders\Make\Rules on the API side, which make exactly this set required
+ * for exactly this case.
+ */
+const PROFILE_BILLING: Record<string, 'phone' | 'address' | 'city'> = {
+  bill_phone: 'phone',
+  bill_address: 'address',
+  bill_city: 'city'
+};
+
+const empty = (value?: string | null): boolean => (
+  value === undefined || value === null || String(value).trim() === ''
+);
+
+/**
+ * Passenger details and payment on one screen.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * These were two steps. Splitting them meant the buyer typed passenger
+ * details with no sight of the price, then saw the price on a screen where
+ * they could no longer check what they had typed - and add-ons changed the
+ * total on a page whose total had already scrolled away.
+ *
+ * The two forms stay separate react-hook-form instances rather than being
+ * merged into one. They validate different things under different rules,
+ * and billing is not even rendered for a signed-in user; one combined form
+ * would have to reproduce that conditionality itself. Paying validates them
+ * in order and stops at the first failure, so the buyer is taken to the
+ * first thing that needs fixing rather than the last.
+ */
+const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }: Props): JSX.Element => {
+  const passenger = useForm<PersonData>();
+  const billing = useForm<BillingData>();
+
+  const [ coupon, setCoupon ] = useState<CouponData | undefined>(undefined);
+  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(step2.id);
+
+  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);
+  const [ addonSms, setAddonSms ] = useState<boolean>(false);
+  const [ addonSmsNumber, setAddonSmsNumber ] = useState<string>('');
+  const [ addonFlex, setAddonFlex ] = useState<boolean>(false);
+
+  /*
+   * Edited: Claude - Date: 2026-08-26
+   *
+   * The seat-selection add-on. Unlike the checkbox add-ons above there is
+   * nothing to tick: wanting it IS picking a seat. `seatsPicked` is the
+   * live hand-picked count, reported up by Passengers as choices are made
+   * and taken back, and it prices the summary line; the server recomputes
+   * the real charge from its own count (Buses\Assign) regardless.
+   */
+  const [ seatsPicked, setSeatsPicked ] = useState<number>(0);
+
+  const { data: UserData } = useUserStore();
+  const { data: SettingsData } = useGetSettings();
+
+  /*
+   * Edited: Claude - Date: 2026-08-21
+   *
+   * WHAT THE BILLING BLOCK ASKS THIS BUYER FOR.
+   *
+   * A guest is asked for the whole thing, as always (`gaps` stays
+   * undefined, which is what Billing reads as "the whole form").
+   *
+   * A signed-in CUSTOMER is asked only for the profile columns that cannot
+   * answer for themselves - see PROFILE_BILLING above. Only a customer: an
+   * agent or an operator selling at the counter writes no `orders_contact`
+   * row at all, so there is nothing to ask them for.
+   *
+   * Gated on the profile actually being loaded. The user store persists
+   * only a display-only stub to localStorage (see stores/user.ts) and
+   * re-fetches the rest on mount, so `visitor` is briefly absent on a cold
+   * start - and treating "not loaded yet" as "empty" would flash three
+   * required fields at customers whose profile is complete. The wizard
+   * reaches this screen several navigations after the app mounts, by which
+   * time the bootstrap has long since landed.
+   */
+  const gaps = (UserData !== undefined && UserData.type === 'visitor' && UserData.visitor !== undefined)
+    ? Object.keys(PROFILE_BILLING).filter(field => empty(UserData.visitor?.[PROFILE_BILLING[field]]))
+    : undefined;
+
+  // the guest form, or a customer with something still to fill in
+  const askBilling = UserData === undefined || (gaps !== undefined && gaps.length > 0);
+
+  const navigate = useNavigate();
+
+  // one form serves both legs of a return trip, so it collects the UNION of
+  // what either route requires (mirrored by the backend rules)
+  const fields = Array.from(new Set([
+    ...(step2.trip?.passenger_fields ?? DEFAULT_FIELDS),
+    ...(step3 !== undefined ? (step3.trip?.passenger_fields ?? DEFAULT_FIELDS) : [])
+  ]));
+
+  const busFrom = useBusOccupied(step1.departure, step2.id as number);
+  const busTo = useBusOccupied(step1._return, step3?.id as (number | undefined));
+
+  // Edited: Claude - Date: 2026-08-28 (sweep, low): the currency is the
+  // LAST token - split(' ')[1] read '250.00' out of '1 250.00 EUR'
+  const currency = currencyOf(total.display);
+
+  // the brand sells seat choice: picking turns optional (auto-assign is the
+  // free default) and each hand-picked seat costs this
+  const seatsOffer = SettingsData?.addons?.seats?.available ? SettingsData.addons.seats : undefined;
+
+  // Edited: Ferjolt Ozuni - Date: 2026-08-03
+  // Flexible Ticket, for the routes actually chosen. Asked for BOTH legs at
+  // once: the price is computed on the combined fare and an operator who
+  // will not amend one half removes the offer from the whole booking, so a
+  // per-leg question could not be answered honestly.
+  const { data: FlexData } = useGetFlex(
+    step2.price.id as number,
+    step3?.price.id as (number | undefined),
+    step1.adults ?? 1,
+    step1.children ?? 0,
+    step1.babies ?? 0,
+    // the coupon-adjusted fare, so the quote and the charge share a base
+    total.value
+  );
+
+  /**
+   * "Book somebody you have booked before" - saved passengers.
+   *
+   * Edited: Claude - Date: 2026-08-20
+   *
+   * Fetched ONCE here and drilled down rather than asked for inside each
+   * passenger block: a family of five would otherwise be five requests for
+   * one list, and the list is the same list.
+   *
+   * ONLY FOR A SIGNED-IN CUSTOMER. The endpoint is `role:visitor`, so a
+   * guest and a member of staff both get a 404 - a deliberate refusal that
+   * confirms nothing (see obtapi's Account\PassengersController). Deciding
+   * that here, from a fact the app already knows, means the request is never
+   * made for them and there is no failed query on a checkout screen to
+   * accidentally surface.
+   *
+   * The price ids go with it so every row comes back saying what THIS
+   * journey would still have to ask for - see the chooser.
+   */
+  const isCustomer = UserData?.type === 'visitor';
+
+  const { data: SavedData } = useGetSavedPassengers(
+    step2.price.id as number,
+    step3?.price.id as (number | undefined),
+    isCustomer
+  );
+
+  // undefined until the list has landed, which is also what a guest gets and
+  // is exactly the right answer for both: nothing about the feature renders
+  // until there is an account behind it with an answer
+  const saved = isCustomer ? (SavedData?.data ?? []) : undefined;
+
+  const addonItems = [
+    addonWhatsapp && SettingsData?.addons?.whatsapp.available ? {
+      label: t('routes_order.step5.addons.whatsapp.label'),
+      price: SettingsData.addons.whatsapp.price
+    } : null,
+    addonTelegram && SettingsData?.addons?.telegram.available ? {
+      label: t('routes_order.step5.addons.telegram.label'),
+      price: SettingsData.addons.telegram.price
+    } : null,
+    addonSms && SettingsData?.addons?.sms?.available ? {
+      label: t('routes_order.step5.addons.sms.label'),
+      price: SettingsData.addons.sms.price
+    } : null,
+    addonFlex && FlexData?.available && FlexData.price !== undefined ? {
+      label: t('routes_order.step5.flex.title'),
+      price: FlexData.price
+    } : null,
+    seatsOffer && seatsPicked > 0 ? {
+      label: `${ t('seats.fee_line', { ns: 'common' }) } (${ seatsPicked })`,
+      price: seatsOffer.price * seatsPicked
+    } : null
+  ].filter((item): item is { label: string, price: number } => item !== null);
+
+  const addonsValue = addonItems.reduce((sum, item) => sum + item.price, 0);
+
+  const grandTotal: TotalData = {
+    display: `${ total.value + addonsValue } ${ currency }`,
+    value: total.value + addonsValue
+  };
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-05
+   *
+   * Here rather than in RoutesOrder because this screen already derives the
+   * currency from its own formatted total - the public settings payload
+   * carries none - and because it mounts exactly once per arrival at
+   * checkout, which is the cadence this event wants.
+   */
+  useEffect(() => {
+    const items = [commerceItem(step2), ...(step3 ? [commerceItem(step3)] : [])];
+
+    beginCheckout(total.value, items, currency);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const { mutate: OrderSend, isPending } = usePostOrder(step1, step2, step3, coupon, action, {
+    whatsapp: addonWhatsapp,
+    whatsappNumber: addonWhatsappNumber,
+    telegram: addonTelegram,
+    sms: addonSms,
+    seats: seatsOffer !== undefined,
+    smsNumber: addonSmsNumber,
+    flex: addonFlex
+  });
+
+  const onApplyCoupon = (data: CouponData): void => {
+    setTotal(convertCoupon(data));
+    setCoupon(data);
+  };
+
+  const onAction = useCallback((action: string): void => {
+    setAction(action);
+  }, []);
+
+  const onUpdate = (name: string, value: (string | number)): void => {
+    passenger.setValue(name, value);
+    passenger.setError(name, {});
+  };
+
+  /**
+   * Validate everything, then send. Each stage returns the data it
+   * collected or undefined, so a failure stops the chain with the offending
+   * form's own error messages already on screen.
+   */
+  const onPay = async (): Promise<void> => {
+    if (action === undefined) {
+      alert(t('routes_order.step5.choose_payment'));
+
+      return;
+    }
+
+    if (addonWhatsapp && addonWhatsappNumber.trim().length < 5) {
+      alert(t('routes_order.step5.addons.whatsapp.phone_error'));
+
+      return;
+    }
+
+    let person: PersonData | undefined;
+
+    await passenger.handleSubmit((data) => { person = data; })();
+
+    if (person === undefined || !checkAge(step1, person, t)) {
+      return;
+    }
+
+    /*
+     * Edited: Claude - Date: 2026-08-21
+     * The billing form is rendered for a guest (all of it) and for a
+     * customer whose profile has gaps (only those) - so it is validated
+     * whenever it was drawn, and skipped when it was not. It used to be
+     * skipped for every signed-in buyer, which is the assumption that let
+     * an incomplete profile reach the API with nothing to fill three NOT
+     * NULL columns with.
+     */
+    let details = {} as BillingData;
+
+    if (askBilling) {
+      let collected: BillingData | undefined;
+
+      await billing.handleSubmit((data) => { collected = data; })();
+
+      if (collected === undefined) {
+        return;
+      }
+
+      details = collected;
+    }
+
+    OrderSend({ billing: details, person }, {
+      onSuccess: (data) => {
+        if (data === undefined) {
+          return;
+        }
+
+        const hash = step1.type === 'return' ? data.return : data.departure;
+
+        // Edited: Ferjolt Ozuni - Date: 2026-08-05
+        //
+        // Remembered here because the confirmation page cannot work it out.
+        // A card payment leaves the site for the bank and returns on a URL
+        // carrying nothing but this hash, and most buyers are guests with no
+        // account the order could be read back from. Keyed on the SAME hash
+        // the confirmation is reached with, so it cannot be attributed to a
+        // different order.
+        stash(
+          String(hash),
+          grandTotal.value,
+          [commerceItem(step2), ...(step3 ? [commerceItem(step3)] : [])],
+          currency
+        );
+
+        navigate(`/orders/process/${ action }/${ hash }`);
+      },
+      /*
+       * Edited: Claude - Date: 2026-08-22 (audit finding BOOK-13-c)
+       *
+       * Surface why the booking was refused. Every 4xx from order creation -
+       * a seat taken while the form was open, the unpaid-hold limit, a route
+       * that just went unavailable - left the buyer on the filled form with
+       * no message, clicking Pay again. The API's own message says exactly
+       * what happened.
+       */
+      onError: (submitError: unknown) => {
+        const message = (submitError as { response?: { data?: { message?: string } } })?.response?.data?.message;
+
+        notifyError(message ?? t('routes_order.checkout.error', { ns: 'common', defaultValue: 'We could not complete your booking. Please try again.' }));
+      }
+    });
+  };
+
+  if (busFrom === undefined || busTo === undefined) {
+    return <Loading t={ t } />;
+  }
+
+  return (
+    <>
+      <Title>
+        <RiShoppingCartLine />
+        { t('routes_order.step5.title') }
+      </Title>
+
+      <Steps value={ 4 } />
+
+      <Results>
+        <Listing>
+          <Passengers
+            values={ values }
+            step1={ step1 }
+            fields={ fields }
+            busFrom={ busFrom }
+            busTo={ busTo }
+            saved={ saved }
+            savedMax={ SavedData?.max }
+            seatsOptional={ seatsOffer !== undefined }
+            seatsFee={ seatsOffer && seatsOffer.price > 0 ? `${ seatsOffer.price } ${ currency }` : undefined }
+            onPickedCount={ setSeatsPicked }
+            t={ t }
+            errors={ passenger.formState.errors }
+            refs={ passenger.register }
+            onUpdate={ onUpdate }
+          />
+
+          <Addons
+            data={ SettingsData?.addons }
+            flexOffer={ FlexData }
+            currency={ currency }
+            whatsapp={ addonWhatsapp }
+            whatsappNumber={ addonWhatsappNumber }
+            telegram={ addonTelegram }
+            sms={ addonSms }
+            smsNumber={ addonSmsNumber }
+            flex={ addonFlex }
+            t={ t }
+            onChangeWhatsapp={ setAddonWhatsapp }
+            onChangeWhatsappNumber={ setAddonWhatsappNumber }
+            onChangeTelegram={ setAddonTelegram }
+            onChangeSms={ setAddonSms }
+            onChangeSmsNumber={ setAddonSmsNumber }
+            onChangeFlex={ (value) => {
+              setAddonFlex(value);
+
+              // The attach rate this records is the one input the Flexible
+              // Ticket pricing decision is waiting on - it cannot be banded
+              // by window without knowing how often each is actually bought.
+              commerceAddon(value, 'Flexible Ticket', FlexData?.price ?? 0, currency);
+            } }
+          />
+
+          { askBilling && (
+            <Billing t={ t } errors={ billing.formState.errors } refs={ billing.register } only={ gaps } />
+          ) }
+        </Listing>
+
+        <Sidebar
+          step1={ step1 }
+          step2={ step2 }
+          step3={ step3 }
+          /* Claude - 2026-08-22 (audit finding BOOK-09-b): the GROSS
+             fare, not the coupon-adjusted `total` - with a coupon the
+             summary used to read "TICKET 40 / DISCOUNT -5 / TOTAL 40",
+             arithmetic that does not add up on screen. Gross minus the
+             discount line now equals the total the buyer pays. */
+          fare={ getTotal(step2, step3).display }
+          addons={ addonItems.map(item => ({ label: item.label, value: `${ item.price } ${ currency }` })) }
+          coupon={ coupon }
+          total={ grandTotal }
+          action={ action }
+          single={ singleMethod }
+          pending={ isPending }
+          t={ t }
+          onPay={ onPay }
+          payments={ (
+            <Payments
+              selected={ action ?? '' }
+              isPartner={ isPartner ?? false }
+              routeId={ step2.id }
+              t={ t }
+              onChange={ onAction }
+            />
+          ) }
+        >
+          <Coupons current={ coupon } step2={ step2 } total={ total } t={ t } onApplied={ onApplyCoupon } />
+        </Sidebar>
+      </Results>
+
+      { isPartner === undefined && (
+        <Actions>
+          <Button
+            type="button"
+            subtype="secondary"
+            text={ <><AiOutlineCaretLeft /> { t('routes_order.step4.back') }</> }
+            noMargin
+            onClick={ () => {
+              // keep whatever has been typed, even though it has not been
+              // validated - coming back to a half-filled form is far better
+              // than coming back to an empty one
+              onStore(passenger.getValues());
+
+              // Edited: Ferjolt Ozuni - Date: 2026-08-03
+              // `type`, not `_return`. On the 9-segment search URL a one-way
+              // trip carries the literal segment "none" as its return date,
+              // which is a truthy string - so this always chose the
+              // return-leg step, even for a booking that has no return leg.
+              onBack(step1.type === 'return' ? 3 : 2);
+            } }
+          />
+        </Actions>
+      ) }
+    </>
+  );
+};
+
+export default Checkout;

package/Checkout/Sidebar/Sidebar.tsx

@@ -0,0 +1,124 @@
+import { TFunction } from 'i18next';
+import { MdDone } from 'react-icons/md';
+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 { SubTitle } from '../../styles';
+import { Information } from '../../Step5/Summary/styles';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+import { FoundData } from '@autobusal/providers/types/routes';
+import { CouponData } from '@autobusal/providers/types/orders';
+import { TotalData } from '../../types';
+
+interface AddonItem {
+  label: string
+  value: string
+}
+
+interface Props {
+  step1: RoutesSearchForm
+  step2: FoundData
+  step3?: FoundData
+  fare: string
+  addons: AddonItem[]
+  coupon?: CouponData
+  total: TotalData
+  action?: string
+  single?: boolean
+  pending: boolean
+  t: TFunction<'common'>
+  onPay: () => void
+  /** coupon form, rendered directly above the totals it affects */
+  children?: React.ReactNode
+  /** payment-method picker, rendered directly above the button that uses it */
+  payments?: React.ReactNode
+}
+
+/**
+ * The money, the trip, and the button that commits to both.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Everything a buyer needs to check before paying, kept beside the form
+ * rather than above it. Previously the total lived at the top of a long
+ * 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 => (
+  <Container>
+    <Panel className="box">
+      <SubTitle>
+        <AiOutlineInfoCircle />
+        { 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 } 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
+           Coupon sits ABOVE the total, where its effect is visible the
+           moment it applies. In the main column it was several sections
+           away from the number it changes. */ }
+      { children }
+
+      <div>
+        <Amount type="addon" label={ t('routes_order.step5.summary.fare') } value={ fare } t={ t } />
+
+        { addons.map(item => (
+          <Amount key={ item.label } type="addon" label={ item.label } value={ item.value } t={ t } />
+        )) }
+
+        { coupon && <Amount type="discount" code={ coupon.code } value={ coupon.discount } t={ t } /> }
+
+        <Amount type="total" value={ total.display } t={ t } />
+      </div>
+
+      <Actions>
+        { /* the method picker belongs next to the button that acts on it,
+             not at the far end of a long form */ }
+        { payments }
+
+        { /* 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.
+
+             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
+          text={ (
+            <>
+              <MdDone />
+              { action === 'reserve'
+                ? t('routes_order.step5.reserve')
+                : single
+                  ? t('routes_order.step5.pay_now')
+                  : t('routes_order.step5.next') }
+            </>
+          ) }
+          onClick={ onPay }
+        />
+
+        { action === undefined && (
+          <Notice>{ t('routes_order.step5.choose_payment') }</Notice>
+        ) }
+      </Actions>
+    </Panel>
+  </Container>
+);
+
+export default Sidebar;

package/Checkout/Sidebar/styles.ts

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Sticky, so the trip, the running total and the pay button stay in view
+ * for the whole length of the passenger form. The point of merging the two
+ * steps was that somebody filling in four passengers can still see what
+ * they are about to be charged.
+ */
+export const Container = styled.aside`
+  min-width: 0;
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-01
+   *
+   * 5/12 of the row rather than a fixed 340px, so on a wide screen the
+   * summary grows with the page instead of staying a narrow strip beside a
+   * very wide form. A proportion also keeps the payment options on one
+   * line at every width above the breakpoint.
+   *
+   * 1280 matches Results in ../../styles.ts, where the row layout starts.
+   */
+  @media (min-width: 1280px) {
+    flex: 0 0 calc((5 / 12) * 100% - 20px);
+    position: sticky;
+    top: 15px;
+    max-height: calc(100vh - 30px);
+    overflow-y: auto;
+  }
+`;
+
+export const Panel = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+export const Actions = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-top: 12px;
+  border-top: 1px solid ${ props => props.theme.background.neutral };
+`;
+
+export const Notice = styled.p`
+  margin: 0;
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.faded };
+  text-align: center;
+`;