@autobusal/routes-order 1.34.5 → 1.36.0

package/Checkout/Checkout.tsx

@@ -27,7 +27,7 @@ import { useUserStore } from '@autobusal/providers/stores/user';
 import { useGetSettings } from '@autobusal/providers/services';
 import { usePostOrder, useGetFlex, useGetPayments, useGetSavedPassengers, useGetComission } from '../services';
 import { addon as commerceAddon, beginCheckout, stash } from '@autobusal/providers/Setup/commerce';
-import { item as commerceItem } from '../commerce';
+import { item as commerceItem, isCounterSale } from '../commerce';
 import { error as notifyError } from '@autobusal/utilities';
 
 interface Props {
@@ -572,7 +572,11 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
              * counter-sold ticket reaches the passenger directly instead of
              * landing solely with the agent and the operator.
              */
-            askEmail={ UserData !== undefined && ['agent', 'subagent', 'operator', 'employee', 'admin'].includes(UserData.type) }
+            askEmail={ isCounterSale(UserData?.type) }
+            /* same population, second reason: a walk-in often has no number
+               to give either, and a clerk forced to fill the box types a
+               placeholder that looks real to everyone downstream */
+            phoneOptional={ isCounterSale(UserData?.type) }
             busFrom={ busFrom }
             busTo={ busTo }
             saved={ saved }
@@ -654,7 +658,18 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
             />
           ) }
         >
-          <Coupons current={ coupon } step2={ step2 } total={ total } t={ t } onApplied={ onApplyCoupon } />
+          {/* Claude - 2026-08-30 (raised by Ferjolt: "why should an operator
+              have a coupon code while they do not pay for their own
+              tickets?"). A complimentary ticket costs nothing, so there is no
+              total for a discount to come off - the box was asking for a code
+              that could not do anything.
+
+              Only the FREE case is hidden, not coupons for operators. On
+              another operator's route an operator is an ordinary paying buyer
+              and a coupon applies to them like anyone else. */}
+          { action !== 'complimentary' && (
+            <Coupons current={ coupon } step2={ step2 } total={ total } t={ t } onApplied={ onApplyCoupon } />
+          ) }
         </Sidebar>
       </Results>
 

package/Found/Found.tsx

@@ -182,7 +182,9 @@ const Found = ({ type, loading, data, step1, preferredStop, t, onSearch, onSave
         ) }
 
         <Listing>
-          <Header t={ t } />
+          {/* the same refinement the Sort dropdown drives, so the two stay
+              in step and the URL keeps carrying the choice (refine.ts) */}
+          <Header sort={ refinement.sort } t={ t } onSort={ sort => onRefine({ ...refinement, sort }) } />
 
           <Orders
             loading={ loading }

package/Found/Header/Header.tsx

@@ -2,20 +2,81 @@ import { TFunction } from 'i18next';
 import { RiBus2Line } from 'react-icons/ri';
 import { BiArrowFromLeft, BiHourglass } from 'react-icons/bi';
 import { FaFlagCheckered, FaCoins } from 'react-icons/fa';
-import { Container, Company, Location, Time, Price } from './styles';
+import { SortKey } from '../refine';
+import { Container, Company, Location, Time, Price, Direction } from './styles';
 
 interface Props {
+  sort: SortKey
   t: TFunction<'public'>
+  onSort: (sort: SortKey) => void
 }
 
-const Header = ({ t }: Props): JSX.Element => (
-  <Container className="box">
-    <Company><RiBus2Line /> { t('routes_order.step2.header.company') }</Company>
-    <Location><BiArrowFromLeft /> { t('routes_order.step2.header.departs') }</Location>
-    <Time><BiHourglass /> { t('routes_order.step2.header.duration') }</Time>
-    <Location><FaFlagCheckered /> { t('routes_order.step2.header.arrives') }</Location>
-    <Price><FaCoins /> { t('routes_order.step2.header.price') }</Price>
-  </Container>
-);
-
-export default Header;
+/**
+ * Claude - 2026-08-30 (asked for by Ferjolt): "the results header should be
+ * sortable on click".
+ *
+ * Each column owns a PAIR of sorts and clicking it walks between them, which
+ * is what a header that can only sort one way gets wrong - the second click
+ * looks broken. Landing on a column always starts with the direction people
+ * actually want (cheapest, fastest, earliest, first to arrive, A-Z); the
+ * reverse is only ever reached deliberately.
+ *
+ * `recommended` is not in any pair on purpose. It is the merit ordering the
+ * page opens with and it belongs to no single column, so clicking a header
+ * always leaves it - which is correct, the user just asked for something
+ * more specific.
+ */
+const COLUMNS: Record<string, [SortKey, SortKey]> = {
+  company: [ 'company', 'company_desc' ],
+  departs: [ 'earliest', 'latest' ],
+  duration: [ 'fastest', 'slowest' ],
+  arrives: [ 'arrives_first', 'arrives_last' ],
+  price: [ 'cheapest', 'dearest' ]
+};
+
+const Header = ({ sort, t, onSort }: Props): JSX.Element => {
+  const next = (column: keyof typeof COLUMNS): SortKey => {
+    const [ first, second ] = COLUMNS[column];
+
+    // already on this column - flip it; otherwise start at its natural end
+    return sort === first ? second : first;
+  };
+
+  // the arrow shows only on the column in effect, so it says WHICH one it is
+  const arrow = (column: keyof typeof COLUMNS): (JSX.Element | null) => {
+    const [ first, second ] = COLUMNS[column];
+
+    if (sort !== first && sort !== second) {
+      return null;
+    }
+
+    return <Direction>{ sort === first ? '▲' : '▼' }</Direction>;
+  };
+
+
+  return (
+    <Container className="box">
+      <Company type="button" onClick={ () => onSort(next('company')) }>
+        <RiBus2Line /> { t('routes_order.step2.header.company') } { arrow('company') }
+      </Company>
+
+      <Location type="button" onClick={ () => onSort(next('departs')) }>
+        <BiArrowFromLeft /> { t('routes_order.step2.header.departs') } { arrow('departs') }
+      </Location>
+
+      <Time type="button" onClick={ () => onSort(next('duration')) }>
+        <BiHourglass /> { t('routes_order.step2.header.duration') } { arrow('duration') }
+      </Time>
+
+      <Location type="button" onClick={ () => onSort(next('arrives')) }>
+        <FaFlagCheckered /> { t('routes_order.step2.header.arrives') } { arrow('arrives') }
+      </Location>
+
+      <Price type="button" onClick={ () => onSort(next('price')) }>
+        <FaCoins /> { t('routes_order.step2.header.price') } { arrow('price') }
+      </Price>
+    </Container>
+  );
+};
+
+export default Header;

package/Found/Header/styles.ts

@@ -23,7 +23,16 @@ export const Container = styled.div`
   }
 `;
 
-const Item = styled.div`
+/**
+ * Claude - 2026-08-30 (asked for by Ferjolt): each column sorts the list on
+ * click, so these are real <button>s - keyboard reachable and announced as
+ * controls, which a styled <div> with an onClick is not.
+ *
+ * `background: none; border: 0` because a button carries a chrome of its own
+ * that would otherwise break a row whose whole job is to line up invisibly
+ * over the cards below it. The geometry is unchanged.
+ */
+const Item = styled.button`
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -31,11 +40,32 @@ const Item = styled.div`
   align-items: center;
   font-size: ${ props => props.theme.size.s };
 
+  background: none;
+  border: 0;
+  padding: 0;
+  font-family: inherit;
+  color: inherit;
+  cursor: pointer;
+
+  &:hover, &:focus-visible {
+    color: ${ props => props.theme.font.info };
+  }
+
   & > svg {
     font-size: ${ props => props.theme.size.xxl };
   }
 `;
 
+/**
+ * The arrow marking the column the list is currently sorted by, and which
+ * way. Only ever rendered on the active column - an arrow on every header
+ * says nothing about which one is in effect.
+ */
+export const Direction = styled.span`
+  font-size: ${ props => props.theme.size.xs };
+  line-height: 1;
+`;
+
 // these five must stay identical to their counterparts in
 // Found/Route/styles.ts, or the labels stop sitting over their columns
 export const Company = styled(Item)`

package/Found/refine.ts

@@ -18,12 +18,37 @@ import { FoundData } from '@autobusal/providers/types/routes';
  * answer this question" as a pass, not a fail.
  */
 
-export type SortKey = 'recommended' | 'cheapest' | 'fastest' | 'earliest' | 'latest';
+/**
+ * Claude - 2026-08-30 (asked for by Ferjolt): the results header is
+ * clickable, and a column header that sorts one way only is a header people
+ * click twice and think is broken. So every axis the header offers now has
+ * both directions.
+ *
+ * SORTS below is deliberately NOT extended - it drives the sort dropdown,
+ * and "Dearest first" is not something to offer as a considered choice. The
+ * reverse directions exist to serve a second click on a column, nothing else.
+ */
+export type SortKey = 'recommended' | 'cheapest' | 'fastest' | 'earliest' | 'latest'
+  | 'dearest' | 'slowest' | 'arrives_first' | 'arrives_last' | 'company' | 'company_desc';
 
 export type BucketKey = '0' | '6' | '12' | '18';
 
 export const SORTS: SortKey[] = [ 'recommended', 'cheapest', 'fastest', 'earliest', 'latest' ];
 
+/**
+ * Every sort the URL may legally carry - the dropdown's five plus the
+ * reverse directions the column headers reach.
+ *
+ * THIS IS A SEPARATE LIST ON PURPOSE, and getting it wrong is not visible
+ * from the code. Validation used to run against SORTS, so `?sort=dearest`
+ * parsed straight back to 'recommended': the header highlighted, the URL
+ * updated, and the list did not move. Found by clicking Price twice in a
+ * browser - a typecheck cannot see it, because both lists are SortKey[].
+ */
+export const VALID_SORTS: SortKey[] = [
+  ...SORTS, 'dearest', 'slowest', 'arrives_first', 'arrives_last', 'company', 'company_desc'
+];
+
 export const BUCKETS: BucketKey[] = [ '0', '6', '12', '18' ];
 
 export interface Refinement {
@@ -82,6 +107,25 @@ export const departureOf = (item: FoundData): number => (
   minutesOf(item.locations.from.departure)
 );
 
+/**
+ * Arrival as minutes from the DEPARTURE day's midnight, so an overnight trip
+ * landing at 06:00 tomorrow sorts after one landing at 23:00 tonight rather
+ * than before it. `arrival_offset` is the midnight count the timetable
+ * already carries - reading the clock face alone is exactly the mistake that
+ * made overnight routes look like the earliest arrivals on the page.
+ */
+export const arrivalOf = (item: FoundData): number => (
+  minutesOf(item.locations.to.arrival) + (item.arrival_offset ?? 0) * 1440
+);
+
+/**
+ * Operator name, case-insensitive and locale-aware, so 'Ç' lands where an
+ * Albanian reader expects rather than after 'Z'.
+ */
+const byCompany = (a: FoundData, b: FoundData): number => (
+  (a.operator?.name ?? '').localeCompare(b.operator?.name ?? '', undefined, { sensitivity: 'base' })
+);
+
 /**
  * Trip length in minutes, or null when obtapi could not compute one.
  *
@@ -208,7 +252,7 @@ export const fromParams = (params: URLSearchParams): Refinement => {
   const maxPrice = Number(params.get('max_price'));
 
   return {
-    sort: sort && SORTS.includes(sort) ? sort : 'recommended',
+    sort: sort && VALID_SORTS.includes(sort) ? sort : 'recommended',
     operators: numbers('operators'),
     buckets: (params.get('times') ?? '').split(',').filter(value => BUCKETS.includes(value as BucketKey)) as BucketKey[],
     direct: params.get('direct') === '1',
@@ -351,6 +395,31 @@ const byDuration = (a: FoundData, b: FoundData): number => {
   return first - second;
 };
 
+/**
+ * Longest first - but a route with NO computable duration still sinks to the
+ * bottom. Negating byDuration would have floated those to the top instead,
+ * which is the same "-" sentinel bug byDuration exists to prevent, just at
+ * the other end of the list.
+ */
+const byDurationDesc = (a: FoundData, b: FoundData): number => {
+  const first = durationOf(a);
+  const second = durationOf(b);
+
+  if (first === null && second === null) {
+    return 0;
+  }
+
+  if (first === null) {
+    return 1;
+  }
+
+  if (second === null) {
+    return -1;
+  }
+
+  return second - first;
+};
+
 /**
  * Edited: Ferjolt Ozuni - Date: 2026-08-01
  *
@@ -373,6 +442,25 @@ const compare = (sort: SortKey) => (a: FoundData, b: FoundData): number => {
     case 'fastest':
       return byDuration(a, b) || (a.price.value - b.price.value);
 
+    // the reverse directions, reached by clicking a column header twice
+    case 'dearest':
+      return (b.price.value - a.price.value) || byDuration(a, b);
+
+    case 'slowest':
+      return byDurationDesc(a, b) || (a.price.value - b.price.value);
+
+    case 'arrives_first':
+      return (arrivalOf(a) - arrivalOf(b)) || (a.price.value - b.price.value);
+
+    case 'arrives_last':
+      return (arrivalOf(b) - arrivalOf(a)) || (a.price.value - b.price.value);
+
+    case 'company':
+      return byCompany(a, b) || (a.price.value - b.price.value);
+
+    case 'company_desc':
+      return -byCompany(a, b) || (a.price.value - b.price.value);
+
     default:
       return 0;
   }

package/Step2.tsx

@@ -48,8 +48,17 @@ const Step2 = ({ step1, t, onSearch, onSave, onBack }: Props): JSX.Element => {
     ? t('routes_order.step2.title_pair', {
         from: from.name,
         to: to.name,
-        from_country: sameCountry ? '' : ` ${ from.country?.name ?? '' }`,
-        to_country: sameCountry ? '' : ` ${ to.country?.name ?? '' }`
+        /*
+         * Claude - 2026-08-30 (reported by Ferjolt): a COMMA before the
+         * country - "Tirana, Albania", not "Tirana Albania".
+         *
+         * The separator lives here rather than in the template because the
+         * country is dropped entirely when both cities share one, and a
+         * `{{from}}, {{from_country}}` template would leave the comma
+         * stranded on a domestic route.
+         */
+        from_country: sameCountry ? '' : `, ${ from.country?.name ?? '' }`,
+        to_country: sameCountry ? '' : `, ${ to.country?.name ?? '' }`
       })
     : t('routes_order.step2.title');
 

package/Step4/Passenger/Passenger.tsx

@@ -24,6 +24,16 @@ interface Props {
    * on purpose: a counter sale often has no email to give.
    */
   askEmail?: boolean
+  /**
+   * Claude - 2026-08-30 (ruled by Ferjolt): the same counter sale may leave
+   * the passenger PHONE blank too. A walk-in often has no number to give,
+   * and a clerk forced to fill the box types a placeholder - which is worse
+   * than a blank, because it looks like a real number to everyone
+   * downstream. obtapi relaxes the matching rule for exactly this set of
+   * roles (RulesGeneral::COUNTER_SELLERS); if the two ever disagree the form
+   * stops asking for something the server still rejects.
+   */
+  phoneOptional?: boolean
   withReturn: boolean
   busFrom: OccupiedData
   busTo: OccupiedData
@@ -56,7 +66,7 @@ interface Props {
 // telegram render ONLY when the route requires them - and are then
 // required. Name and date of birth stay mandatory always. `fields` is the
 // union of both legs on a return trip (see Step4).
-const Passenger = ({ type, number, values, fields, askEmail, withReturn, busFrom, busTo, pickedFrom, pickedTo, saved, savedMax, seatsOptional, seatsFee, t, errors, refs, onSeatSelect, onUpdate }: Props): JSX.Element => {
+const Passenger = ({ type, number, values, fields, askEmail, phoneOptional, withReturn, busFrom, busTo, pickedFrom, pickedTo, saved, savedMax, seatsOptional, seatsFee, t, errors, refs, onSeatSelect, onUpdate }: Props): JSX.Element => {
   const name = `${ type }${ number }`;
 
   const names = {
@@ -331,14 +341,16 @@ const Passenger = ({ type, number, values, fields, askEmail, withReturn, busFrom
 
           { has('phone') && (
             <div className="row">
-              <Required htmlFor={ id(names.phone) }>{ t('routes_order.step4.phone') }</Required>
+              { phoneOptional
+                ? <label htmlFor={ id(names.phone) }>{ t('routes_order.step4.phone') }</label>
+                : <Required htmlFor={ id(names.phone) }>{ t('routes_order.step4.phone') }</Required> }
 
               <input
                 type="text"
                 key={ `${ names.phone }-${ applied }` }
                 id={ id(names.phone) }
                 defaultValue={ start(names.phone, record?.phone) }
-                { ...refs(names.phone, Validate('required|min_length:5|max_length:50', t)) }
+                { ...refs(names.phone, Validate(phoneOptional ? 'min_length:5|max_length:50' : 'required|min_length:5|max_length:50', t)) }
               />
 
               { Display(errors[names.phone]) }

package/Step4/Passengers/Display.tsx

@@ -10,6 +10,7 @@ interface Props {
   fields: string[]
   /** staff sellers are offered an optional passenger email (audit A4-05) */
   askEmail?: boolean
+  phoneOptional?: boolean
   withReturn: boolean
   values?: PersonData
   busFrom: OccupiedData
@@ -27,7 +28,7 @@ interface Props {
   onUpdate: (name: string, value: (string | number)) => void
 }
 
-const Display = ({ type, amount, fields, askEmail, withReturn, values, busFrom, busTo, pickedFrom, pickedTo, saved, savedMax, seatsOptional, seatsFee, t, errors, refs, onSeatSelect, onUpdate }: Props): JSX.Element[] => {
+const Display = ({ type, amount, fields, askEmail, phoneOptional, withReturn, values, busFrom, busTo, pickedFrom, pickedTo, saved, savedMax, seatsOptional, seatsFee, t, errors, refs, onSeatSelect, onUpdate }: Props): JSX.Element[] => {
   const passengers: JSX.Element[] = [];
 
   for (let i = 1; i <= amount; i++) {
@@ -38,6 +39,7 @@ const Display = ({ type, amount, fields, askEmail, withReturn, values, busFrom,
         number={ i }
         fields={ fields }
         askEmail={ askEmail }
+        phoneOptional={ phoneOptional }
         withReturn={ withReturn }
         values={ values }
         busFrom={ busFrom }

package/Step4/Passengers/Passengers.tsx

@@ -13,6 +13,7 @@ interface Props {
   fields: string[]
   /** staff sellers are offered an optional passenger email (audit A4-05) */
   askEmail?: boolean
+  phoneOptional?: boolean
   busFrom: OccupiedData
   busTo: OccupiedData
   /**
@@ -40,7 +41,7 @@ interface Props {
   onUpdate: (name: string, value: (string | number)) => void
 }
 
-const Passengers = ({ values, step1, fields, askEmail, busFrom, busTo, saved, savedMax, seatsOptional, seatsFee, onPickedCount, t, errors, refs, onUpdate }: Props): JSX.Element => {
+const Passengers = ({ values, step1, fields, askEmail, phoneOptional, busFrom, busTo, saved, savedMax, seatsOptional, seatsFee, onPickedCount, t, errors, refs, onUpdate }: Props): JSX.Element => {
   const [ pickedFrom, setPickedFrom ] = useState<number[]>([]);
   const [ pickedTo, setPickedTo ] = useState<number[]>([]);
 
@@ -87,6 +88,7 @@ const Passengers = ({ values, step1, fields, askEmail, busFrom, busTo, saved, sa
         amount={ step1.adults }
         fields={ fields }
         askEmail={ askEmail }
+        phoneOptional={ phoneOptional }
         withReturn={ step1.type === 'return' }
         values={ values }
         busFrom={ busFrom }
@@ -109,6 +111,7 @@ const Passengers = ({ values, step1, fields, askEmail, busFrom, busTo, saved, sa
         amount={ step1.children }
         fields={ fields }
         askEmail={ askEmail }
+        phoneOptional={ phoneOptional }
         withReturn={ step1.type === 'return' }
         values={ values }
         busFrom={ busFrom }
@@ -131,6 +134,7 @@ const Passengers = ({ values, step1, fields, askEmail, busFrom, busTo, saved, sa
         amount={ step1.babies }
         fields={ fields }
         askEmail={ askEmail }
+        phoneOptional={ phoneOptional }
         withReturn={ step1.type === 'return' }
         values={ values }
         busFrom={ busFrom }

package/Step5/Payments/Payments.tsx

@@ -66,11 +66,31 @@ const Payments = ({ selected, isPartner, routeId, total, currency, t, onChange }
 
   useEffect(() => {
     if (isSuccess) {
-      const found = Object.keys(data).find(item => {
-        return data[item as keyof typeof data] === true;
-      });
+      /*
+       * Claude - 2026-08-30 (raised by Ferjolt: "why should an operator have
+       * to pay for its own routes?").
+       *
+       * IT NEVER HAD TO - BUT THE CHECKOUT PRESELECTED A PAID METHOD ANYWAY.
+       * This used to take the first key in the server's object that was
+       * true, and `funds` is written before `complimentary`, so an operator
+       * opening a ticket on their OWN route arrived with Funds (Online)
+       * already highlighted. One click on Make Payment and they had bought a
+       * seat on their own coach - the free option was sitting right there,
+       * looking like just another of four equal tiles.
+       *
+       * `complimentary` is only ever offered when the route really does
+       * belong to this operator (Actions::get re-checks that against the
+       * real order row, never the request), so whenever it is on the list it
+       * is the right default. Ruling BOOK-07: "Operators do not pay anything
+       * for their own routes - we do not charge them."
+       *
+       * The paid methods stay on the list on purpose: an operator also SELLS
+       * seats on its own routes, and those are real sales that have to be
+       * settled and recorded.
+       */
+      const available = Object.keys(data).filter(item => data[item as keyof typeof data] === true);
+      const found = available.includes('complimentary') ? 'complimentary' : available[0];
 
-      // we assign the first available action
       onChange(found ?? '');
     }
   }, [isSuccess, data, onChange]);

package/commerce.ts

@@ -22,3 +22,23 @@ export const item = (route: FoundData): CommerceItem => ({
   quantity: 1
 });
 
+
+/**
+ * Staff selling over a counter, as opposed to a customer buying for
+ * themselves.
+ *
+ * Claude - 2026-08-30. This list was written inline at the askEmail prop and
+ * is now needed twice - the optional passenger email and, from today, the
+ * optional passenger phone. Two copies of it would drift, and drifting here
+ * is not a cosmetic bug: the form would stop requiring a field the server
+ * still rejects, so the sale fails at submit with an error pointing at a box
+ * the seller was told they could leave blank.
+ *
+ * Must stay in step with RulesGeneral::COUNTER_SELLERS in obtapi, which is
+ * the half that actually decides.
+ */
+export const COUNTER_SELLERS = [ 'agent', 'subagent', 'operator', 'employee', 'admin' ];
+
+export const isCounterSale = (type?: string): boolean => (
+  type !== undefined && COUNTER_SELLERS.includes(type)
+);

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@autobusal/routes-order",
-  "version": "1.34.5",
+  "version": "1.36.0",
   "author": "Ferjolt Ozuni",
   "type": "module",
-  "main": "index.ts"
+  "main": "index.ts",
+  "publishConfig": {
+    "access": "public"
+  }
 }