@autobusal/routes-order 1.33.0 → 1.33.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 1.33.2
+
+### Fixed
+
+- **A signed-in customer with an incomplete profile is now asked for what is missing**, in the same billing fields a guest already fills, instead of reaching an API that had nothing to put in three NOT NULL columns. Only the gaps are asked for: a complete profile sees no change at all.
+
+  This is not a rare state. A self-registered visitor has a name and nothing else, and the form that collects phone, address and city is reachable only by admin-created accounts — so the customer could not have completed it in advance even if asked to.
+
+- `Billing` takes an optional `only` list; undefined keeps the whole guest block exactly as it was. Field rules follow whichever profile the value will be stored on, so the form never accepts more than the API will keep.
+
+- Checkout treats "profile not loaded yet" as unknown rather than empty — the user store persists a redacted stub and re-fetches on mount, so the other reading would flash required fields at customers whose profile is complete.
+
+## 1.33.1
+
+### Added
+
+- **A pair with no future scheduled service says so**, with the date it last ran, instead of showing a facts block that quietly omits frequency and a departure list that is empty on every date the visitor tries. The links to journeys that do run stay prominent, so the page converts rather than dead-ends. No `noindex`: an honest page about a seasonal route is not thin content, and a route that stopped in December will want its ranking back in June.
+
 ## 1.33.0
 
 ### Added

package/Checkout/Checkout.tsx

@@ -49,6 +49,35 @@ interface Props {
 // 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.
  *
@@ -98,6 +127,34 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
   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
@@ -247,11 +304,18 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
       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
+    /*
+     * 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 (UserData === undefined) {
+    if (askBilling) {
       let collected: BillingData | undefined;
 
       await billing.handleSubmit((data) => { collected = data; })();
@@ -346,8 +410,8 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
             } }
           />
 
-          { UserData === undefined && (
-            <Billing t={ t } errors={ billing.formState.errors } refs={ billing.register } />
+          { askBilling && (
+            <Billing t={ t } errors={ billing.formState.errors } refs={ billing.register } only={ gaps } />
           ) }
         </Listing>
 

package/Facts/Facts.tsx

@@ -1,7 +1,8 @@
 import { TFunction } from 'i18next';
-import { Container, Grid, Fact, Label, Value, Note, Operators, Prose } from './styles';
+import { Container, Grid, Fact, Label, Value, Note, Notice, Operators, Prose } from './styles';
 import { FactsData } from './types';
 import { DAYS, duration } from './questions';
+import { stopped, detail } from './service';
 
 interface Props {
   id: string
@@ -81,10 +82,46 @@ const Facts = ({ id, facts, t }: Props): JSX.Element => {
         : `${ duration(facts.duration_min, t) } – ${ duration(facts.duration_max, t) }`)
     : null;
 
+  /**
+   * Edited: Claude - Date: 2026-08-21
+   *
+   * SAY IT, rather than leaving a reader to work it out. A route is
+   * published to the sitemap on a flag nothing re-checks, so a season
+   * ending never un-publishes its page - and the page's only tell was a
+   * missing frequency tile and a booking wizard that came back empty on
+   * every date tried. That is a visitor doing our diagnostics for us and
+   * concluding the site is broken.
+   *
+   * DORMANT NAMES THE DATE. "Not currently scheduled" alone reads as a
+   * fault; "the last service ran on 30 September 2024" reads as a season,
+   * which is what it usually is, and tells a traveller whether to come back
+   * in the summer or give up. A route that never had a timetable has no
+   * such date and gets the sentence that says so instead of a borrowed one.
+   *
+   * AND IT POINTS ONWARD in the same breath. The nearby-pair links below
+   * are live journeys on live routes; somebody who came here for a bus is
+   * one click from one, and the whole reason this page keeps its ranking
+   * rather than being de-listed is that it can make that click happen.
+   */
+  const dead = stopped(facts);
+
+  const said = dead ? detail(dead, t) : null;
+
   return (
     <Container id={ id } className="box">
       <h2>{ t('routes_order.facts.title', { from: facts.from, to: facts.to }) }</h2>
 
+      { dead && (
+        <Notice>
+          <strong>{ t('routes_order.facts.not_scheduled') }</strong>
+
+          <p>
+            { said && `${ said } ` }
+            { t('routes_order.facts.not_scheduled_links') }
+          </p>
+        </Notice>
+      ) }
+
       <Grid>
         { facts.price_from_display && (
           <Fact>

package/Facts/questions.ts

@@ -1,5 +1,6 @@
 import { TFunction } from 'i18next';
 import { FactsData } from './types';
+import { stopped, sentence } from './service';
 
 export interface Question {
   // stable enough to key a list on, and never rendered
@@ -66,6 +67,40 @@ const questions = (facts: FactsData, t: TFunction<'common'>): Question[] => {
 
   const cities = { from: facts.from, to: facts.to };
 
+  /**
+   * Edited: Claude - Date: 2026-08-21
+   *
+   * THE FIRST QUESTION, WHEN THE ANSWER IS NO. "Is there a bus from Tirana
+   * to Prizren?" is the question a pair page exists to answer, and on a
+   * pair whose every timetable window has closed the honest answer is not
+   * currently, with the day it last ran.
+   *
+   * It also dictates which of the questions BELOW may be asked, which is
+   * the part that matters more than the extra entry. Every answer here is
+   * a standalone sentence that Google may lift into a rich result with no
+   * page around it, so "There are 4 scheduled services from Tirana to
+   * Prizren" quoted on its own about a route that stopped in 2025 is a
+   * claim we published, not a nuance a reader will supply. The four
+   * present-tense SERVICE COUNTS - how many run, what time they leave,
+   * how many are direct, how many are overnight - are dropped there.
+   * (Frequency drops itself: obtapi already sends null for it.)
+   *
+   * What stays is what remains true of the journey as published: how long
+   * it takes, what it cost, where it calls, what is on board, who runs it,
+   * how far it is. Those describe the route rather than assert this
+   * morning's departures, and each of them sits under an answer that has
+   * already said the route is not running.
+   */
+  const dead = stopped(facts);
+
+  if (dead) {
+    all.push({
+      id: 'service',
+      q: t('routes_order.schema.service_q', cities),
+      a: sentence(dead, t)
+    });
+  }
+
   if (facts.duration_min !== null && facts.duration_max !== null) {
     all.push({
       id: 'duration',
@@ -104,7 +139,7 @@ const questions = (facts: FactsData, t: TFunction<'common'>): Question[] => {
     });
   }
 
-  if (facts.departures > 0) {
+  if (facts.departures > 0 && !dead) {
     all.push({
       id: 'departures',
       q: t('routes_order.schema.departures_q', cities),
@@ -127,7 +162,7 @@ const questions = (facts: FactsData, t: TFunction<'common'>): Question[] => {
     });
   }
 
-  if (facts.departure_first && facts.departure_last) {
+  if (facts.departure_first && facts.departure_last && !dead) {
     all.push({
       id: 'times',
       q: t('routes_order.schema.times_q', cities),
@@ -137,7 +172,7 @@ const questions = (facts: FactsData, t: TFunction<'common'>): Question[] => {
 
   // Asked only where the answer is a real count. `direct` is meaningless
   // without a total to read it against, and `departures` is that total.
-  if (facts.departures > 0) {
+  if (facts.departures > 0 && !dead) {
     all.push({
       id: 'direct',
       q: t('routes_order.schema.direct_q', cities),
@@ -151,7 +186,7 @@ const questions = (facts: FactsData, t: TFunction<'common'>): Question[] => {
 
   // Only when there IS a night service. "No, none of these run overnight" is
   // a question asked to be answered no, which is padding.
-  if (facts.overnight > 0) {
+  if (facts.overnight > 0 && !dead) {
     all.push({
       id: 'overnight',
       q: t('routes_order.schema.overnight_q', cities),

package/Facts/service.ts

@@ -0,0 +1,111 @@
+import { TFunction } from 'i18next';
+import { FactsData } from './types';
+
+/**
+ * A pair that is published but has nothing left to sell.
+ *
+ * Edited: Claude - Date: 2026-08-21
+ *
+ * ONE READING OF THE FLAG, shared by everything that reacts to it - the
+ * notice in the facts block, the FAQ answer that a search engine quotes,
+ * and the schema.org availability. Three separate `facts.service?.scheduled
+ * === false` checks would be three chances for the page to say one thing
+ * and its own structured data to say another, which is the exact mismatch
+ * that gets a site's rich results pulled.
+ *
+ * `dormant` is a pair that RAN and stopped, and `last` is the day it last
+ * ran. `never` is a route published before anybody gave it a timetable -
+ * there is no last day to name, and the copy must not imply there was one.
+ *
+ * NULL for a live pair AND for an old cached payload with no `service` key
+ * at all (obtapi caches these for six hours, so the field is missing from
+ * warm entries for six hours after a deploy). Both mean "say nothing",
+ * which is right: an absent field is not evidence that a route is dead.
+ */
+export interface Stopped {
+  state: 'dormant' | 'never'
+  last: string | null
+}
+
+export const stopped = (facts: FactsData): (Stopped | null) => {
+  if (!facts.service || facts.service.scheduled !== false) {
+    return null;
+  }
+
+  return facts.service.last
+    ? { state: 'dormant', last: facts.service.last }
+    : { state: 'never', last: null };
+};
+
+/**
+ * ISO month index to the month names the site already ships in all fifteen
+ * languages (`data.months.*`), rather than a new set nobody would have
+ * translated for one sentence.
+ */
+const MONTHS = [
+  'january', 'february', 'march', 'april', 'may', 'june',
+  'july', 'august', 'september', 'october', 'november', 'december'
+];
+
+/**
+ * "The last service ran on 30 September 2024", in the reader's language.
+ *
+ * Edited: Claude - Date: 2026-08-21
+ *
+ * The day, month and year go in as THREE interpolations rather than one
+ * pre-joined string, so a locale that orders them differently can. obtapi
+ * sends the date as ISO precisely because it is the one format that does
+ * not already contain somebody's opinion about that ordering.
+ *
+ * Returns null on anything that is not an ISO date rather than printing a
+ * half-parsed one. A malformed date here would be printed as fact in a
+ * sentence about when a bus last ran, and no date at all is better than a
+ * wrong one - the headline above it already carries the actual message.
+ */
+export const ran = (iso: string, t: TFunction<'common'>): (string | null) => {
+  const parts = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
+
+  if (!parts) {
+    return null;
+  }
+
+  const month = MONTHS[Number(parts[2]) - 1];
+
+  if (!month) {
+    return null;
+  }
+
+  return t('routes_order.facts.not_scheduled_last', {
+    day: String(Number(parts[3])),
+    month: t(`data.months.${ month }`),
+    year: parts[1]
+  });
+};
+
+/**
+ * The second sentence: when it last ran, or that it never has.
+ *
+ * Null rather than the never-scheduled wording when a DORMANT pair's date
+ * fails to parse - "a timetable has not been published yet" about a coach
+ * that ran for two years is a different false statement, not a graceful
+ * fallback. The headline carries the message on its own there.
+ */
+export const detail = (item: Stopped, t: TFunction<'common'>): (string | null) => (
+  item.last ? ran(item.last, t) : (item.state === 'never' ? t('routes_order.facts.not_scheduled_never') : null)
+);
+
+/**
+ * The whole message as one paragraph of running text.
+ *
+ * Shared with the FAQ answer for the same reason the flag is: Google
+ * requires the `acceptedAnswer` in the markup to be the text on the page,
+ * and the only way to guarantee that across fifteen languages is for there
+ * to be one string rather than two that agree today.
+ */
+export const sentence = (item: Stopped, t: TFunction<'common'>): string => {
+  const second = detail(item, t);
+
+  return second
+    ? `${ t('routes_order.facts.not_scheduled') } ${ second }`
+    : t('routes_order.facts.not_scheduled');
+};

package/Facts/styles.ts

@@ -72,3 +72,41 @@ export const Prose = styled.div`
     line-height: 1.6;
   }
 `;
+
+/**
+ * The pair is published but nothing on it runs.
+ *
+ * Edited: Claude - Date: 2026-08-21
+ *
+ * ABOVE the grid and inside the same box, because it changes how every
+ * number below it is to be read: those fares and times are what the
+ * operator last published, not what is on sale this morning. A banner
+ * floating outside the block would leave the grid looking like a live
+ * offer with a disclaimer somewhere else on the page.
+ *
+ * Informational, not an error - `font.info` rather than `font.error`. A
+ * seasonal coach is a normal thing that has happened, and dressing it as a
+ * fault would push a reader to leave rather than to look at the routes that
+ * ARE running a few hundred pixels down.
+ */
+export const Notice = styled.div`
+  margin: 0 0 22px;
+  padding: 14px 16px;
+  border-left: 3px solid ${ props => props.theme.font.info };
+  border-radius: ${ props => props.theme.borderRadius };
+  background: ${ props => props.theme.background.neutral };
+  line-height: 1.6;
+
+  p {
+    margin: 0;
+  }
+
+  /* The headline claim, in the reader's weight rather than a heading level:
+     the block already owns an <h2> and a second one here would put "not
+     currently scheduled" into the document outline above the facts it
+     qualifies. */
+  strong {
+    display: block;
+    font-weight: 700;
+  }
+`;

package/Facts/types.ts

@@ -59,6 +59,36 @@ export interface FactsData {
    * and obtapi withholds the whole object rather than counting it.
    */
   frequency: { days: number[], weekly: number, daily: boolean } | null
+  /**
+   * Edited: Claude - Date: 2026-08-21
+   *
+   * WHETHER ANY OF THIS IS STILL ON OFFER. A route is published to the
+   * sitemap on a `searchable` flag that nothing re-checks, so a season
+   * ending never un-publishes the page - and the page had no way to know.
+   * It rendered a facts block quietly missing its frequency and a departure
+   * list that came back empty for every date the visitor tried.
+   *
+   * `scheduled` false means NO leg on this pair has a timetable window that
+   * is still open, which is the same test the search applies - so nothing
+   * can be bought here on any date. `last` is then the day the last of them
+   * ran, or NULL when no leg ever had a window at all (a route published
+   * before anybody gave it a timetable). Those two want different
+   * sentences: one has a date to name and the other does not, and inventing
+   * one would be a lie.
+   *
+   * `last` is deliberately null while `scheduled` is true - there it would
+   * be some other leg's season ending, printed where a reader reads "the
+   * last day this ran".
+   *
+   * OPTIONAL, and that is not laziness: obtapi caches this payload for six
+   * hours, so for six hours after a deploy the field is simply absent from
+   * warm entries. Absent means WE DID NOT COMPUTE IT and the page says
+   * nothing - which is also the honest reading of `frequency: null` with
+   * `scheduled: true`, a pair whose windows are open but whose operators
+   * never listed their days. "We cannot say how often" and "it does not
+   * run" are different claims and only the second one gets the notice.
+   */
+  service?: { scheduled: boolean, last: string | null }
   // how many of the `departures` run non-stop, and how many are still
   // rolling the next morning - counted out of the total rather than reported
   // as a yes/no, because "one of ten is direct" is the honest version

package/Sections/Schema.tsx

@@ -2,6 +2,7 @@ import { TFunction } from 'i18next';
 import { JsonLd } from '@autobusal/common';
 import { FactsData } from '../Facts/types';
 import { Question } from '../Facts/questions';
+import { stopped } from '../Facts/service';
 
 interface Props {
   facts: FactsData
@@ -144,7 +145,19 @@ const Schema = ({ facts, questions, t }: Props): (JSX.Element | null) => {
         '@type': 'Offer',
         price: facts.price_from,
         priceCurrency: facts.currency,
-        availability: 'https://schema.org/InStock'
+
+        // Edited: Claude - Date: 2026-08-21
+        // The availability is now READ rather than asserted. This said
+        // InStock on every pair it was ever emitted for, including the
+        // ones whose every timetable window had closed - a machine-readable
+        // claim that a ticket could be bought, published about journeys
+        // that sell on no date a visitor can pick. OutOfStock is the same
+        // thing the page itself now says above the fare, which is the
+        // whole rule this file opens with: never state here what the page
+        // does not show.
+        availability: stopped(facts)
+          ? 'https://schema.org/OutOfStock'
+          : 'https://schema.org/InStock'
       }
     } : {})
   };

package/Sections/Sections.tsx

@@ -6,6 +6,7 @@ import Links from '../Links/Links';
 import Schema from './Schema';
 import { useGetFacts } from '../Facts/services';
 import buildQuestions from '../Facts/questions';
+import { stopped } from '../Facts/service';
 import { Nav, Anchor, Anchored } from './styles';
 
 interface Props {
@@ -65,6 +66,42 @@ const Sections = ({ from, to, t }: Props): (JSX.Element | null) => {
   // that happen to agree today.
   const questions = buildQuestions(facts, t);
 
+  /**
+   * Edited: Claude - Date: 2026-08-21
+   *
+   * ON A PAIR THAT HAS STOPPED RUNNING, THE WAY OUT COMES FIRST. The facts
+   * block now says plainly that the route is not currently scheduled - and
+   * the moment it does, the most useful thing on the page is the list of
+   * nearby pairs that ARE running, not four hundred pixels of timetable
+   * the reader has just been told they cannot travel on.
+   *
+   * Hoisted rather than duplicated: it is the same <Links> element, moved,
+   * so a crawler still finds exactly one copy of each internal link. That
+   * is the whole reason this page keeps its ranking instead of being
+   * de-listed - an honest seasonal page that converts to a live journey is
+   * worth more than a 404, and it only converts if the link is where the
+   * reader is looking.
+   *
+   * Everything below stays exactly where it was. The timetable is still
+   * what the operator published and the FAQ still answers the questions
+   * this journey raises; neither is hidden, because a page that hides its
+   * content to admit a problem is thin content, which is what noindex is
+   * for and what this deliberately is not.
+   */
+  const onward = (
+    <Links
+      id={ LINKS }
+      from={ links.from }
+      to={ links.to }
+      reverse={ links.reverse }
+      fromName={ facts.from }
+      toName={ facts.to }
+      t={ t }
+    />
+  );
+
+  const dead = Boolean(stopped(facts));
+
   return (
     <>
       <Nav aria-label={ t('routes_order.sections.label') }>
@@ -89,6 +126,8 @@ const Sections = ({ from, to, t }: Props): (JSX.Element | null) => {
         <Facts id={ FACTS } facts={ facts } t={ t } />
       </Anchored>
 
+      { dead && onward }
+
       <Anchored>
         <Schedule id={ SCHEDULE } from={ facts.from } to={ facts.to } rows={ schedule } t={ t } />
       </Anchored>
@@ -113,15 +152,7 @@ const Sections = ({ from, to, t }: Props): (JSX.Element | null) => {
            The `pair` mode of Reviews\BrowseController is untouched and
            still works; nothing calls it from here. */ }
 
-      <Links
-        id={ LINKS }
-        from={ links.from }
-        to={ links.to }
-        reverse={ links.reverse }
-        fromName={ facts.from }
-        toName={ facts.to }
-        t={ t }
-      />
+      { !dead && onward }
     </>
   );
 };

package/Step5/Billing/Billing.tsx

@@ -15,11 +15,46 @@ interface Props {
   t: TFunction<'common'>
   errors: FieldErrors
   refs: UseFormRegister<BillingData>
+  /**
+   * Edited: Claude - Date: 2026-08-21
+   *
+   * Which fields to ask for. Undefined is the whole block, which is what a
+   * guest has always been shown and stays the default.
+   *
+   * A SIGNED-IN CUSTOMER gets a list instead, holding only the fields their
+   * profile cannot answer. `orders_contact`.`phone`/`address`/`city` are
+   * NOT NULL, the same three on `visitors` are nullable, and registration
+   * never collects them - so a customer could reach this screen unable to
+   * fill three columns that refuse to be empty, which the API used to
+   * answer with a 500 and then with a booking carrying no phone number.
+   * They are asked here instead, in the same boxes and under the same
+   * labels a guest sees, rather than being sent out of the checkout to
+   * their account page and back.
+   */
+  only?: string[]
 }
 
-const Billing = ({ errors, t, refs }: Props): JSX.Element => {
+const Billing = ({ errors, t, refs, only }: Props): JSX.Element => {
   const [ company, setCompany ] = useState<boolean>(false);
 
+  // A field is asked for when nothing narrowed the block, or when it is on
+  // the list of gaps.
+  const asked = (field: string): boolean => only === undefined || only.includes(field);
+
+  /**
+   * Edited: Claude - Date: 2026-08-21
+   *
+   * Two of these fields are validated differently depending on WHO is
+   * filling them in, and the difference is not cosmetic - it mirrors the
+   * two sets of rules the API applies. A guest's answers go to
+   * `orders_contact` and nowhere else; a signed-in customer's are also
+   * written back onto their `visitors` profile, whose `city` column holds
+   * 40 characters and whose address rule has always asked for 5. A form
+   * that accepted more than the API will store would just move the refusal
+   * to after the pay button.
+   */
+  const gaps = only !== undefined;
+
   /**
    * Edited: Claude - Date: 2026-08-19
    * Same fix as the passenger block: the labels here were text sitting
@@ -53,82 +88,96 @@ const Billing = ({ errors, t, refs }: Props): JSX.Element => {
         { t('routes_order.step5.billing.title') }
       </SubTitle>
 
-      <div className="column">
-        <div className="row">
-          <Required htmlFor={ id('bill_fn') }>{ t('routes_order.step5.billing.first_name') }</Required>
+      { asked('bill_fn') && (
+        <div className="column">
+          <div className="row">
+            <Required htmlFor={ id('bill_fn') }>{ t('routes_order.step5.billing.first_name') }</Required>
 
-          <input type="text" id={ id('bill_fn') } { ...refs('bill_fn', Validate('required|min_length:2|max_length:100', t)) } />
+            <input type="text" id={ id('bill_fn') } { ...refs('bill_fn', Validate('required|min_length:2|max_length:100', t)) } />
 
-          { Display(errors.bill_fn) }
-        </div>
+            { Display(errors.bill_fn) }
+          </div>
 
-        <div className="row">
-          <Required htmlFor={ id('bill_ln') }>{ t('routes_order.step5.billing.last_name') }</Required>
+          <div className="row">
+            <Required htmlFor={ id('bill_ln') }>{ t('routes_order.step5.billing.last_name') }</Required>
 
-          <input type="text" id={ id('bill_ln') } { ...refs('bill_ln', Validate('required|min_length:2|max_length:100', t)) } />
+            <input type="text" id={ id('bill_ln') } { ...refs('bill_ln', Validate('required|min_length:2|max_length:100', t)) } />
 
-          { Display(errors.bill_ln) }
+            { Display(errors.bill_ln) }
+          </div>
         </div>
-      </div>
+      ) }
 
       <div className="column">
-        <div className="row">
-          <Required htmlFor={ id('email') }>{ t('routes_order.step5.billing.email') }</Required>
+        { asked('email') && (
+          <div className="row">
+            <Required htmlFor={ id('email') }>{ t('routes_order.step5.billing.email') }</Required>
 
-          <input type="email" id={ id('email') } { ...refs('email', Validate('required|email|max_length:255', t)) } />
+            <input type="email" id={ id('email') } { ...refs('email', Validate('required|email|max_length:255', t)) } />
 
-          { Display(errors.email) }
+            { Display(errors.email) }
 
-          <NoticeEmail>
-            <AiOutlineInfoCircle /> { t('routes_order.step5.billing.email_info') }
-          </NoticeEmail>
-        </div>
+            <NoticeEmail>
+              <AiOutlineInfoCircle /> { t('routes_order.step5.billing.email_info') }
+            </NoticeEmail>
+          </div>
+        ) }
 
-        <div className="row">
-          <Required htmlFor={ id('bill_phone') }>{ t('routes_order.step5.billing.phone') }</Required>
+        { asked('bill_phone') && (
+          <div className="row">
+            <Required htmlFor={ id('bill_phone') }>{ t('routes_order.step5.billing.phone') }</Required>
 
-          <input type="text" id={ id('bill_phone') } { ...refs('bill_phone', Validate('required|min_length:10|max_length:20', t)) } />
+            <input type="text" id={ id('bill_phone') } { ...refs('bill_phone', Validate('required|min_length:10|max_length:20', t)) } />
 
-          { Display(errors.bill_phone) }
-        </div>
+            { Display(errors.bill_phone) }
+          </div>
+        ) }
       </div>
 
-      <div className="row">
-        <Required htmlFor={ id('bill_address') }>{ t('routes_order.step5.billing.address') }</Required>
+      { asked('bill_address') && (
+        <div className="row">
+          <Required htmlFor={ id('bill_address') }>{ t('routes_order.step5.billing.address') }</Required>
 
-        <textarea id={ id('bill_address') } { ...refs('bill_address', Validate('required|min_length:2', t)) }></textarea>
+          <textarea id={ id('bill_address') } { ...refs('bill_address', Validate(`required|min_length:${ gaps ? 5 : 2 }`, t)) }></textarea>
 
-        { Display(errors.bill_address) }
-      </div>
+          { Display(errors.bill_address) }
+        </div>
+      ) }
 
       <div className="column">
-        <div className="row">
-          <Required htmlFor={ id('bill_city') }>{ t('routes_order.step5.billing.city') }</Required>
+        { asked('bill_city') && (
+          <div className="row">
+            <Required htmlFor={ id('bill_city') }>{ t('routes_order.step5.billing.city') }</Required>
 
-          <input type="text" id={ id('bill_city') } { ...refs('bill_city', Validate('required|min_length:2|max_length:100', t)) } />
+            <input type="text" id={ id('bill_city') } { ...refs('bill_city', Validate(`required|min_length:2|max_length:${ gaps ? 40 : 100 }`, t)) } />
 
-          { Display(errors.bill_city) }
-        </div>
+            { Display(errors.bill_city) }
+          </div>
+        ) }
 
-        <div className="row">
-          <Required htmlFor={ id('bill_country') }>{ t('routes_order.step5.billing.country') }</Required>
+        { asked('bill_country') && (
+          <div className="row">
+            <Required htmlFor={ id('bill_country') }>{ t('routes_order.step5.billing.country') }</Required>
 
-          <select id={ id('bill_country') } { ...refs('bill_country', Validate('required|min:1', t)) }>
-            <option value={ 0 }>{ t('routes_order.step5.billing.country_choose') }</option>
-            { items }
-          </select>
+            <select id={ id('bill_country') } { ...refs('bill_country', Validate('required|min:1', t)) }>
+              <option value={ 0 }>{ t('routes_order.step5.billing.country_choose') }</option>
+              { items }
+            </select>
 
-          { Display(errors.bill_country) }
-        </div>
+            { Display(errors.bill_country) }
+          </div>
+        ) }
       </div>
 
-      <div className="row">
-        <label>
-          <input type="checkbox" defaultChecked={ false } onClick={ (event: React.MouseEvent<HTMLInputElement>) => onAddCompany(event) } /> { t('routes_order.step5.billing.ask_company') }
-        </label>
-      </div>
+      { asked('bill_company') && (
+        <div className="row">
+          <label>
+            <input type="checkbox" defaultChecked={ false } onClick={ (event: React.MouseEvent<HTMLInputElement>) => onAddCompany(event) } /> { t('routes_order.step5.billing.ask_company') }
+          </label>
+        </div>
+      ) }
 
-      { company && (
+      { asked('bill_company') && company && (
         <div className="column">
           <div className="row">
             { /* not Required - these are optional, so a plain <label>
@@ -150,25 +199,29 @@ const Billing = ({ errors, t, refs }: Props): JSX.Element => {
         </div>
       ) }
 
-      <div className="row">
-        <label htmlFor={ id('comments') }>{ t('routes_order.step5.billing.comments') }</label>
+      { asked('comments') && (
+        <div className="row">
+          <label htmlFor={ id('comments') }>{ t('routes_order.step5.billing.comments') }</label>
 
-        <textarea id={ id('comments') } { ...refs('comments') }></textarea>
-      </div>
+          <textarea id={ id('comments') } { ...refs('comments') }></textarea>
+        </div>
+      ) }
 
-      <div className="row row-nomargin">
-        <label className="single">
-          <input type="checkbox" value="1" { ...refs('terms', Validate('required', t)) } />&nbsp;
+      { asked('terms') && (
+        <div className="row row-nomargin">
+          <label className="single">
+            <input type="checkbox" value="1" { ...refs('terms', Validate('required', t)) } />&nbsp;
 
-          <span dangerouslySetInnerHTML={{
-            __html: t('routes_order.step5.billing.terms', {
-              terms: `<a href="/page/terms" target="_blank">${ t('routes_order.step5.billing.terms_name') }</a>`
-            })
-          }} />
-        </label>
+            <span dangerouslySetInnerHTML={{
+              __html: t('routes_order.step5.billing.terms', {
+                terms: `<a href="/page/terms" target="_blank">${ t('routes_order.step5.billing.terms_name') }</a>`
+              })
+            }} />
+          </label>
 
-        { Display(errors.terms) }
-      </div>
+          { Display(errors.terms) }
+        </div>
+      ) }
     </Container>
   );
 };

package/package.json

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