@autobusal/routes-order 1.9.3 → 1.11.1

package/CHANGELOG.md

@@ -6,6 +6,128 @@ All notable changes to this package are documented here. This project follows
 > Note: 1.8.0 was published without a changelog entry. The gap is left as-is
 > rather than reconstructed after the fact.
 
+## [1.11.1] - 2026-08-01
+
+### Changed
+
+- **Coupon and payment method moved into the sidebar**, coupon directly
+  above the totals it changes and the method picker directly above the
+  button that acts on it. Both sat several sections away in the main
+  column, so applying a coupon changed a number that was off screen.
+- **The results heading names the trip** - "Online Bus tickets from Tirana
+  Albania to Thessaloniki Greece" instead of "Select a Departure Schedule".
+  Countries are dropped when both ends share one, since "from Tirana
+  Albania to Korca Albania" is noise. Read from the city list rather than
+  from the results, so the heading is right even when the search finds
+  nothing - which is exactly when knowing what was searched for matters.
+- **Order summary**: the operator's logo under the route name, departure
+  and arrival icons sitting on the connecting line, and the departure date
+  and time in bold - the two things a buyer checks before paying.
+
+### Fixed
+
+- The coupon and payment blocks switched layout at a VIEWPORT breakpoint,
+  so in the ~290px sidebar they used the wide arrangement and the coupon
+  input came out 86px wide. They now wrap on their own width.
+
+## [1.11.0] - 2026-08-01
+
+### Changed
+
+- **Passenger details and checkout are one screen.** Split across two
+  steps, 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 ticking an add-on changed a total that had already scrolled
+  away. The wizard is four steps now, not five.
+- **A sticky sidebar** carries the trip, the ticket price, each add-on, any
+  discount, the total due, and the button that commits to it. The button
+  follows the chosen method, so it reads "Reserve" for a reservation rather
+  than claiming to take a payment.
+- **The trip summary states both ends of each leg**, city and country in
+  full, origin above destination. It previously showed one end only - the
+  departure point outbound, the arrival point on the return - so a one-way
+  buyer reached payment having never been shown where the bus drops them.
+- **Required fields are marked.** The form validated them but never said
+  which they were, so the first a buyer heard of it was an error message
+  after pressing pay.
+
+`usePostOrder` now takes the passenger details in its mutation variables
+rather than as a hook argument: on one screen they are only known at the
+moment pay is pressed, so a closure captured at render time would have sent
+stale state. The two forms stay separate react-hook-form instances - they
+validate different things, and billing is not rendered at all for a
+signed-in buyer - and paying validates them in order, stopping at the first
+failure so the buyer lands on the thing that needs fixing.
+
+Verified by completing a real reservation end to end: order 61 / ticket 75
+carried every entered value, seat included.
+
+## [1.10.0] - 2026-08-01
+
+### Added
+
+- **A search that finds nothing now answers instead of apologising.** In
+  place of the bare "we couldn't find any tickets", the page offers nearby
+  departure cities, nearby arrival cities and other dates that have seats.
+  Every suggestion is a search obtapi has already confirmed returns
+  results on the requested date, quoted with its fare, so a click is never
+  a second dead end. Nearby cities are ordered by real distance from the
+  city that was asked for - the passenger's problem is getting to the bus,
+  not saving two euros.
+- Fetched only once the departure search has come back empty, so a search
+  that succeeded never pays for it.
+
+Suggestion links do a full page load on purpose: RoutesOrder holds the
+search in component state and Step1 only starts a search when it has not
+already redirected, so a client-side navigation would change the URL and
+leave the empty result set on screen.
+
+## [1.9.6] - 2026-08-01
+
+### Added
+
+- **The search form stays on screen while choosing a route.** Adjusting a
+  date, a city or the passenger count used to mean "Back to Search", which
+  threw the results away along with any filters. Shown only on the
+  route-selection screens: past that point the passenger has committed to a
+  specific trip, and re-running the search under them would discard details
+  they had already typed.
+
+## [1.9.5] - 2026-08-01
+
+### Fixed
+
+- **The column header row now lines up with the result cards** - 0px drift
+  on all five columns, and content-independent. It had 4px horizontal
+  padding against the card's 15px and no column gap against the card's
+  15px, which pushed every label right of the data it named (Duration was
+  out by 34px).
+- **The card's two location columns are now equal width.** `flex: 1` with
+  the default `min-width: auto` meant they sized to their content, so the
+  arrival column (long city plus long stop name) took 215px while the
+  departure column got 155px. Beyond breaking any header alignment, this
+  let one long stop name steal width from the other side of the card.
+
+## [1.9.4] - 2026-08-01
+
+### Changed
+
+- **Fare decimals ride as superscript** and the currency is set smaller.
+  On a fare board the cents are almost never what anyone is comparing, and
+  at full size they took a third of the width of the widest thing on the
+  card. Split from obtapi's already-formatted string rather than
+  re-formatted from `price.value`, so the label's own currency and number
+  formatting stay the single source of truth - an unexpected format falls
+  back to rendering the string whole.
+- **The taxes/passenger line is smaller and tucked against the price**,
+  which reads as one unit and frees the room the Select button needed.
+- **Amenities moved into the details row** as its first column, so route,
+  transit and policies sit beside them - four columns instead of a separate
+  full-width band under every card.
+- **Amenities are icon-only on this page**, with the name as a hover
+  tooltip (`compact` on `RouteFeature`). Eight amenities spelled out took
+  more width than everything else in that row put together.
+
 ## [1.9.3] - 2026-08-01
 
 ### Changed

package/Checkout/Checkout.tsx

@@ -0,0 +1,280 @@
+import { useCallback, useState } 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 } 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 } from '../services';
+
+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'];
+
+/**
+ * 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);
+
+  const [ addonWhatsapp, setAddonWhatsapp ] = useState<boolean>(false);
+  const [ addonWhatsappNumber, setAddonWhatsappNumber ] = useState<string>('');
+  const [ addonTelegram, setAddonTelegram ] = useState<boolean>(false);
+
+  const { data: UserData } = useUserStore();
+  const { data: SettingsData } = useGetSettings();
+
+  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));
+
+  const currency = total.display.split(' ')[1] ?? '';
+
+  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
+  ].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
+  };
+
+  const { mutate: OrderSend, isPending } = usePostOrder(step1, step2, step3, coupon, action, {
+    whatsapp: addonWhatsapp,
+    whatsappNumber: addonWhatsappNumber,
+    telegram: addonTelegram
+  });
+
+  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;
+    }
+
+    // billing is only rendered for a guest, so there is nothing to validate
+    // for a signed-in buyer - the API fills it from the account
+    let details = {} as BillingData;
+
+    if (UserData === undefined) {
+      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;
+
+        navigate(`/orders/process/${ action }/${ hash }`);
+      }
+    });
+  };
+
+  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 }
+            t={ t }
+            errors={ passenger.formState.errors }
+            refs={ passenger.register }
+            onUpdate={ onUpdate }
+          />
+
+          <Addons
+            data={ SettingsData?.addons }
+            currency={ currency }
+            whatsapp={ addonWhatsapp }
+            whatsappNumber={ addonWhatsappNumber }
+            telegram={ addonTelegram }
+            t={ t }
+            onChangeWhatsapp={ setAddonWhatsapp }
+            onChangeWhatsappNumber={ setAddonWhatsappNumber }
+            onChangeTelegram={ setAddonTelegram }
+          />
+
+          { UserData === undefined && (
+            <Billing t={ t } errors={ billing.formState.errors } refs={ billing.register } />
+          ) }
+        </Listing>
+
+        <Sidebar
+          step1={ step1 }
+          step2={ step2 }
+          step3={ step3 }
+          fare={ total.display }
+          addons={ addonItems.map(item => ({ label: item.label, value: `${ item.price } ${ currency }` })) }
+          coupon={ coupon }
+          total={ grandTotal }
+          action={ action }
+          pending={ isPending }
+          t={ t }
+          onPay={ onPay }
+          payments={ (
+            <Payments
+              selected={ action ?? '' }
+              isPartner={ isPartner ?? false }
+              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());
+
+              onBack(step1._return ? 3 : 2);
+            } }
+          />
+        </Actions>
+      ) }
+    </>
+  );
+};
+
+export default Checkout;

package/Checkout/Sidebar/Sidebar.tsx

@@ -0,0 +1,110 @@
+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
+  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, pending, t, onPay, children, payments }: Props): JSX.Element => (
+  <Container>
+    <Panel className="box">
+      <SubTitle>
+        <AiOutlineInfoCircle />
+        { t('routes_order.step5.summary.title') }
+      </SubTitle>
+
+      <Information>
+        <About type="departure" step1={ step1 } data={ step2 } t={ t } />
+        <About type="return" step1={ step1 } data={ step3 } 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. */ }
+        <Button
+          loading={ pending }
+          noMargin
+          text={ (
+            <>
+              <MdDone />
+              { action === 'reserve'
+                ? t('routes_order.step5.reserve')
+                : 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,44 @@
+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;
+
+  // 1280 to match Results in ../../styles.ts, which is where the row
+  // layout actually starts
+  @media (min-width: 1280px) {
+    flex: 0 0 340px;
+    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;
+`;

package/Found/Empty/Empty.tsx

@@ -0,0 +1,109 @@
+import { TFunction } from 'i18next';
+import { Container, Headline, Title, Lead, Group, GroupTitle, Options, Option, OptionName, OptionMeta, OptionPrice } from './styles';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+import { AlternativesData, NearbyCity, FoundDay } from '../../types';
+
+interface Props {
+  step1: RoutesSearchForm
+  data?: AlternativesData
+  loading: boolean
+  t: TFunction<'common'>
+}
+
+/**
+ * A search that found nothing, answered rather than apologised for.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * "We couldn't find any tickets" is where people leave. Every suggestion
+ * here is a real search that obtapi has already confirmed returns seats on
+ * the requested date, with the fare it would cost - so a click is never a
+ * second dead end.
+ *
+ * Nearby cities are ordered by actual distance from the city that was
+ * asked for, which is why a 29km alternative is offered before a 73km one
+ * even when the further city is cheaper: the passenger's problem here is
+ * getting to the bus, not saving two euros.
+ */
+const Empty = ({ step1, data, loading, t }: Props): JSX.Element => {
+  // obtapi wants DD/MM/YYYY, the URL carries DD-MM-YYYY
+  const asPath = (date: string): string => date.replace(/\//g, '-');
+
+  const link = (from: string, to: string, departure: string): string => ([
+    '/bus-lines',
+    from,
+    to,
+    asPath(departure),
+    step1._return ? asPath(step1._return) : 'none',
+    step1.type ?? 'departure',
+    String(step1.adults),
+    String(step1.children),
+    String(step1.babies)
+  ].join('/'));
+
+  const city = (item: NearbyCity, side: 'from' | 'to'): JSX.Element => (
+    <Option
+      key={ item.city.id }
+      reloadDocument
+      to={ side === 'from'
+        ? link(item.city.slug, step1.to, step1.departure)
+        : link(step1.from, item.city.slug, step1.departure) }
+    >
+      <OptionName title={ item.city.name }>{ item.city.name }</OptionName>
+      <OptionMeta>{ t('routes_order.step2.empty.distance', { km: item.distance }) }</OptionMeta>
+      <OptionPrice>{ item.from_price_display }</OptionPrice>
+    </Option>
+  );
+
+  const day = (item: FoundDay): JSX.Element => (
+    <Option key={ item.id } reloadDocument to={ link(step1.from, step1.to, item.day) }>
+      <OptionName>{ item.day }</OptionName>
+      <OptionMeta>{ t('routes_order.step2.empty.available') }</OptionMeta>
+      { item.from_price_display && <OptionPrice>{ item.from_price_display }</OptionPrice> }
+    </Option>
+  );
+
+  const hasFrom = (data?.from.length ?? 0) > 0;
+  const hasTo = (data?.to.length ?? 0) > 0;
+  const hasDates = (data?.dates.length ?? 0) > 0;
+
+  return (
+    <Container className="box">
+      <Headline>
+        <Title>{ t('routes_order.step2.empty.title') }</Title>
+
+        { /* while the alternatives are still being fetched, say nothing
+             about them - promising suggestions that then turn out not to
+             exist is worse than the plain message */ }
+        <Lead>
+          { loading || hasFrom || hasTo || hasDates
+            ? t('routes_order.step2.empty.lead')
+            : t('routes_order.step2.empty.lead_none') }
+        </Lead>
+      </Headline>
+
+      { hasDates && (
+        <Group>
+          <GroupTitle>{ t('routes_order.step2.empty.dates') }</GroupTitle>
+          <Options>{ data?.dates.map(day) }</Options>
+        </Group>
+      ) }
+
+      { hasFrom && (
+        <Group>
+          <GroupTitle>{ t('routes_order.step2.empty.from') }</GroupTitle>
+          <Options>{ data?.from.map(item => city(item, 'from')) }</Options>
+        </Group>
+      ) }
+
+      { hasTo && (
+        <Group>
+          <GroupTitle>{ t('routes_order.step2.empty.to') }</GroupTitle>
+          <Options>{ data?.to.map(item => city(item, 'to')) }</Options>
+        </Group>
+      ) }
+    </Container>
+  );
+};
+
+export default Empty;