@autobusal/routes-order 1.9.0 → 1.9.1

package/Step5/Billing/Billing.tsx

@@ -1,5 +1,6 @@
-import { useState } from 'react';
+import { useState, useId } from 'react';
 import { TFunction } from 'i18next';
+import { Required } from '@autobusal/common';
 import { UseFormRegister, FieldErrors } from 'react-hook-form';
 import { RiPencilFill } from 'react-icons/ri';
 import { AiOutlineInfoCircle } from 'react-icons/ai';
@@ -14,11 +15,58 @@ 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
+   * beside the field rather than attached to it, so the billing form - the
+   * last thing between a buyer and paying - announced as unnamed edit
+   * boxes. Prefixed with useId rather than using the field name directly,
+   * because ids are page-global and these names are not guaranteed to be.
+   */
+  const uid = useId();
+
+  const id = (field: string): string => `${ uid }${ field }`;
+
   const countries = useCountries('all');
 
   if (countries.isLoading) {
@@ -40,120 +88,140 @@ const Billing = ({ errors, t, refs }: Props): JSX.Element => {
         { t('routes_order.step5.billing.title') }
       </SubTitle>
 
-      <div className="column">
-        <div className="row">
-          { t('routes_order.step5.billing.first_name') }
+      { 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" { ...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">
-          { t('routes_order.step5.billing.last_name') }
+          <div className="row">
+            <Required htmlFor={ id('bill_ln') }>{ t('routes_order.step5.billing.last_name') }</Required>
 
-          <input type="text" { ...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">
-          { t('routes_order.step5.billing.email') }
-          
-          <input type="email" { ...refs('email', Validate('required|email|max_length:255', t)) } />
+        { asked('email') && (
+          <div className="row">
+            <Required htmlFor={ id('email') }>{ t('routes_order.step5.billing.email') }</Required>
 
-          { Display(errors.email) }
+            <input type="email" id={ id('email') } { ...refs('email', Validate('required|email|max_length:255', t)) } />
 
-          <NoticeEmail>
-            <AiOutlineInfoCircle /> { t('routes_order.step5.billing.email_info') }
-          </NoticeEmail>
-        </div>
+            { Display(errors.email) }
 
-        <div className="row">
-          { t('routes_order.step5.billing.phone') }
+            <NoticeEmail>
+              <AiOutlineInfoCircle /> { t('routes_order.step5.billing.email_info') }
+            </NoticeEmail>
+          </div>
+        ) }
 
-          <input type="text" { ...refs('bill_phone', Validate('required|min_length:10|max_length:20', t)) } />
+        { asked('bill_phone') && (
+          <div className="row">
+            <Required htmlFor={ id('bill_phone') }>{ t('routes_order.step5.billing.phone') }</Required>
 
-          { Display(errors.bill_phone) }
-        </div>
+            <input type="text" id={ id('bill_phone') } { ...refs('bill_phone', Validate('required|min_length:10|max_length:20', t)) } />
+
+            { Display(errors.bill_phone) }
+          </div>
+        ) }
       </div>
 
-      <div className="row">
-        { t('routes_order.step5.billing.address') }
+      { asked('bill_address') && (
+        <div className="row">
+          <Required htmlFor={ id('bill_address') }>{ t('routes_order.step5.billing.address') }</Required>
 
-        <textarea { ...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">
-          { t('routes_order.step5.billing.city') }
+        { asked('bill_city') && (
+          <div className="row">
+            <Required htmlFor={ id('bill_city') }>{ t('routes_order.step5.billing.city') }</Required>
 
-          <input type="text" { ...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">
-          { t('routes_order.step5.billing.country') }
+        { asked('bill_country') && (
+          <div className="row">
+            <Required htmlFor={ id('bill_country') }>{ t('routes_order.step5.billing.country') }</Required>
 
-          <select { ...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">
-            { t('routes_order.step5.billing.company') }
+            { /* not Required - these are optional, so a plain <label>
+                 rather than the asterisked one, but still associated */ }
+            <label htmlFor={ id('bill_company') }>{ t('routes_order.step5.billing.company') }</label>
 
-            <input type="text" { ...refs('bill_company') } />
+            <input type="text" id={ id('bill_company') } { ...refs('bill_company') } />
 
             { Display(errors.bill_company) }
           </div>
 
           <div className="row">
-            { t('routes_order.step5.billing.nipt') }
+            <label htmlFor={ id('bill_nipt') }>{ t('routes_order.step5.billing.nipt') }</label>
 
-            <input type="text" { ...refs('bill_nipt') } />
+            <input type="text" id={ id('bill_nipt') } { ...refs('bill_nipt') } />
 
             { Display(errors.bill_nipt) }
           </div>
         </div>
       ) }
 
-      <div className="row">
-        { t('routes_order.step5.billing.comments') }
+      { asked('comments') && (
+        <div className="row">
+          <label htmlFor={ id('comments') }>{ t('routes_order.step5.billing.comments') }</label>
 
-        <textarea { ...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/Step5/Coupons/Coupons.tsx

@@ -1,10 +1,8 @@
 import { TFunction } from 'i18next';
 import { useForm } from 'react-hook-form';
 import { RiCoupon3Line } from 'react-icons/ri';
-import { Button } from '@autobusal/common';
 import { Validate, Display } from '@autobusal/utilities';
-import { SubTitle } from '../../styles';
-import { Container, ContainerForm, ContainerInput } from './styles';
+import { Container, ContainerForm, ContainerInput, Apply } from './styles';
 import { CouponData } from '@autobusal/providers/types/orders';
 import { FoundData } from '@autobusal/providers/types/routes';
 import { TotalData, CouponForm } from '../../types';
@@ -46,27 +44,39 @@ const Coupons = ({ current, step2, t, total, onApplied }: Props): (JSX.Element |
     return null;
   }
 
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-01
+   *
+   * One field with the apply control tucked inside it. In the checkout
+   * sidebar this used to be a card of its own, with a heading and a
+   * full-width button, taking more room than the totals it exists to
+   * change - for something most buyers do not have.
+   *
+   * The button keeps its accessible name via aria-label and title, so
+   * dropping the visible text costs a screen reader nothing.
+   */
   return (
-    <Container className="box">
-      <SubTitle>
-        <RiCoupon3Line />
-        { t('routes_order.step5.coupon.title') }
-      </SubTitle>
-
+    <Container>
       <form onSubmit={ handleSubmit(onSubmit) }>
         <ContainerForm>
           <ContainerInput>
-            <input type="text" placeholder={ t('routes_order.step5.coupon.code') } { ...register('code', Validate('required|min_length:4', t)) } />
-            { Display(errors.code) }
+            { /* Edited: Claude - Date: 2026-08-19
+                 aria-label rather than a <label for>, because this field has
+                 no visible label to attach - the placeholder is the only
+                 wording, and a placeholder disappears the moment you type. */ }
+            <input type="text" aria-label={ t('routes_order.step5.coupon.code') } placeholder={ t('routes_order.step5.coupon.code') } { ...register('code', Validate('required|min_length:4', t)) } />
+
+            <Apply
+              type="submit"
+              disabled={ isPending }
+              aria-label={ t('routes_order.step5.coupon.apply') }
+              title={ t('routes_order.step5.coupon.apply') }
+            >
+              <RiCoupon3Line />
+            </Apply>
           </ContainerInput>
 
-          <Button
-            type="submit"
-            loading={ isPending }
-            text={ t('routes_order.step5.coupon.apply') }
-            noMargin
-            maxWidth={ 175 }
-          />
+          { Display(errors.code) }
         </ContainerForm>
       </form>
     </Container>

package/Step5/Coupons/styles.ts

@@ -1,20 +1,53 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
-  margin-top: 25px;
+  margin-top: 0;
 `;
 
 export const ContainerForm = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 15px;
-  max-width: 450px;
+  gap: 4px;
+`;
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * The apply control sits INSIDE the field rather than beside it. Beside it
+ * in a narrow sidebar, the two either fought for width or stacked into two
+ * full-width rows for something most buyers never use.
+ */
+export const ContainerInput = styled.div`
+  position: relative;
 
-  @media (min-width: 480px) {
-    flex-direction: row;
+  & > input {
+    width: 100%;
+    padding-right: 42px;
   }
 `;
 
-export const ContainerInput = styled.div`
-  flex: 1;
-`;
+export const Apply = styled.button`
+  position: absolute;
+  top: 50%;
+  right: 6px;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  font-size: ${ props => props.theme.size.l };
+  color: ${ props => props.theme.primary.contrast };
+  background: ${ props => props.theme.primary.normal };
+  border-radius: ${ props => props.theme.borderRadius };
+  transition: all 0.2s ease;
+
+  &:hover {
+    opacity: .85;
+  }
+
+  &:disabled {
+    opacity: .5;
+    cursor: default;
+  }
+`;

package/Step5/Payments/Payments.tsx

@@ -1,22 +1,26 @@
 import { useEffect } from 'react';
 import { TFunction } from 'i18next';
 import { RiSecurePaymentLine } from 'react-icons/ri';
-import { FaRegHandPaper, FaMoneyBill } from 'react-icons/fa';
+import { FaRegHandPaper, FaMoneyBill, FaGift } from 'react-icons/fa';
 import { AiOutlineCreditCard } from 'react-icons/ai';
 import { Inline } from '@autobusal/common';
 import { SubTitle } from '../../styles';
 import { Container, ContainerPayments, ButtonPayment } from './styles';
 import { useGetPayments } from '../../services';
+import { getAvailablePayments } from '../utilities';
 
 interface Props {
   selected: string
   isPartner: boolean
+  routeId?: number | string
   t: TFunction<'common'>
   onChange: (action: string) => void
 }
 
-const Payments = ({ selected, isPartner, t, onChange }: Props): JSX.Element => {
-  const { data, isLoading, isSuccess } = useGetPayments();
+const Payments = ({ selected, isPartner, routeId, t, onChange }: Props): JSX.Element | null => {
+  const { data, isLoading, isSuccess } = useGetPayments(routeId);
+
+  const available = getAvailablePayments(data, isPartner);
 
   useEffect(() => {
     if (isSuccess) {
@@ -31,15 +35,35 @@ const Payments = ({ selected, isPartner, t, onChange }: Props): JSX.Element => {
 
   if (isLoading) {
     return (
-      <Container className="box">
+      <Container>
         <Inline text={ t('routes_order.step5.actions.loading') } />
       </Container>
     );
   }
 
+  /*
+   * Edited: Ferjolt Ozuni - Date: 2026-08-07
+   *
+   * One method is not a choice, so there is nothing to draw.
+   *
+   * A heading reading "Payment Method" over a single button the buyer must
+   * press before pressing the real one is a step that only ever has one
+   * answer - and it is the last screen before paying, which is the worst
+   * place to spend a click. The effect above has already selected it, so the
+   * button beside this can simply say "Pay Now".
+   *
+   * Rendering nothing rather than hiding with CSS: the picker is a control,
+   * and a control nobody can act on should not be in the page at all - it
+   * would still be reachable by keyboard and still announced by a screen
+   * reader as a thing to decide.
+   */
+  if (available.length <= 1) {
+    return null;
+  }
+
   return (
     <>
-      <Container className="box">
+      <Container>
         <SubTitle>
           <RiSecurePaymentLine />
           { t('routes_order.step5.actions.title') }
@@ -67,6 +91,13 @@ const Payments = ({ selected, isPartner, t, onChange }: Props): JSX.Element => {
             </ButtonPayment>
           ) }
 
+          { (data?.complimentary && !isPartner) && (
+            <ButtonPayment type="button" $selected={ selected === 'complimentary' } onClick={ () => onChange('complimentary') }>
+              <FaGift />
+              { t('routes_order.step5.actions.complimentary') }
+            </ButtonPayment>
+          ) }
+
           { (data?.bkt || isPartner) && (
             <ButtonPayment type="button" $selected={ selected === 'bkt' } onClick={ () => onChange('bkt') }>
               <AiOutlineCreditCard />

package/Step5/Payments/styles.ts

@@ -1,14 +1,20 @@
 import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
-  margin-top: 25px;
+  margin-top: 0;
 `;
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * All options on one row inside the checkout sidebar. They are a choice of
+ * three short labels, not three products, so stacking them into tall cards
+ * gave a minor decision more visual weight than the total above it.
+ */
 export const ContainerPayments = styled.div`
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
-  gap: 15px;
+  gap: 6px;
   justify-content: center;
 `;
 
@@ -17,9 +23,12 @@ export const ButtonPayment = styled.button<{ $selected: boolean }>`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 10px;
-  flex-basis: 150px;
-  padding: 10px;
+  gap: 4px;
+  // equal shares of one row, never wrapping - min-width:0 lets them shrink
+  // below their label width instead of pushing each other onto new lines
+  flex: 1 1 0;
+  min-width: 0;
+  padding: 8px 4px;
   text-align: center;
   font-weight: 700;
   border: 1px solid ${ props => props.theme.background.neutral };
@@ -27,7 +36,7 @@ export const ButtonPayment = styled.button<{ $selected: boolean }>`
   transition: all 0.3s ease;
 
   & > svg {
-    font-size: 35px;
+    font-size: 22px;
   }
 
   &:hover {