@autobusal/routes-order 1.11.1 → 1.11.3

package/Checkout/Sidebar/styles.ts

@@ -11,10 +11,18 @@ import styled from 'styled-components';
 export const Container = styled.aside`
   min-width: 0;
 
-  // 1280 to match Results in ../../styles.ts, which is where the row
-  // layout actually starts
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-01
+   *
+   * 5/12 of the row rather than a fixed 340px, so on a wide screen the
+   * summary grows with the page instead of staying a narrow strip beside a
+   * very wide form. A proportion also keeps the payment options on one
+   * line at every width above the breakpoint.
+   *
+   * 1280 matches Results in ../../styles.ts, where the row layout starts.
+   */
   @media (min-width: 1280px) {
-    flex: 0 0 340px;
+    flex: 0 0 calc((5 / 12) * 100% - 20px);
     position: sticky;
     top: 15px;
     max-height: calc(100vh - 30px);

package/Found/Found.tsx

@@ -2,7 +2,6 @@ import { useMemo, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { TFunction } from 'i18next';
 import Dates from './Dates/Dates';
-import Booking from './Booking/Booking';
 import Header from './Header/Header';
 import Orders from './Orders/Orders';
 import Sort from './Sort/Sort';
@@ -90,7 +89,13 @@ const Found = ({ type, loading, data, step1, preferredStop, t, onSearch, onSave
     <>
       <Dates type={ type } step1={ step1 } t={ t } onSearch={ onSearch } />
 
-      { (data !== undefined && data.length > 0) && <Booking data={ data } step1={ step1 } t={ t } /> }
+      { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
+           The Booking.com banner is gone from the results. It sat between
+           the date strip and the trips, pushing the actual results below
+           it and advertising a hotel to somebody still deciding whether
+           they can travel at all. The component is kept, unused, so the
+           affiliate placement can be reinstated somewhere it does not
+           interrupt the search. */ }
 
       { showControls && (
         <>

package/RoutesOrder.tsx

@@ -1,10 +1,13 @@
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { TFunction } from 'i18next';
+import { AiOutlineSearch, AiOutlineCaretDown, AiOutlineCaretUp } from 'react-icons/ai';
 import { Meta } from '@autobusal/common';
+import { useSystemTheme } from '@autobusal/hooks';
+import { useGetSettings } from '@autobusal/providers/services';
 import RoutesSearch from '@autobusal/routes-search';
 import { useGetSuggestions } from '@autobusal/routes-search/services';
-import { SearchAgain } from './styles';
+import { SearchAgain, SearchInner, SearchToggle, SearchSummary, SearchPanel } from './styles';
 import Step1 from './Step1/Step1';
 import Step2 from './Step2';
 import Step3 from './Step3';
@@ -31,6 +34,12 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
   // search form (no :from/:to params yet) or if a slug doesn't resolve.
   const { data: cities } = useGetSuggestions();
 
+  const { data: settings } = useGetSettings();
+
+  // same artwork the homepage hero uses, so the results page reads as the
+  // same site rather than a bare form on a white band
+  const mode = useSystemTheme();
+
   const fromCity = cities.find(city => city.slug === params.from);
   const toCity = cities.find(city => city.slug === params.to);
 
@@ -42,6 +51,7 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
     ? t('routes_order.meta.description_pair', { from: fromCity.name, to: toCity.name })
     : t('routes_order.meta.description');
 
+  const [ searchOpen, setSearchOpen ] = useState<boolean>(false);
   const [ redirected, setRedirected ] = useState<boolean>(false);
   const [ current, setCurrent ] = useState<number>(1);
   const [ step1, setStep1 ] = useState<RoutesSearchForm | undefined>(undefined);
@@ -114,19 +124,33 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
   return (
     <Meta title={ title } description={ description }>
       { showSearchAgain && step1 !== undefined && (
-        <SearchAgain className="box">
-          <RoutesSearch
-            type={ step1.type ?? 'departure' }
-            from={ `${ step1.from }${ step1.stop_from ? `:${ step1.stop_from }` : '' }` }
-            to={ `${ step1.to }${ step1.stop_to ? `:${ step1.stop_to }` : '' }` }
-            departure={ step1.departure }
-            _return={ step1._return ?? '' }
-            adultsNo={ step1.adults }
-            childrenNo={ step1.children }
-            babiesNo={ step1.babies }
-            t={ t }
-            onSearch={ onStep1 }
-          />
+        <SearchAgain $background={ `${ settings.url }/home/background-${ mode }.jpg` }>
+          <SearchInner>
+            <SearchToggle type="button" aria-expanded={ searchOpen } onClick={ () => setSearchOpen(!searchOpen) }>
+              <AiOutlineSearch />
+
+              <SearchSummary>
+                { fromCity?.name ?? step1.from } → { toCity?.name ?? step1.to } · { step1.departure }
+              </SearchSummary>
+
+              { searchOpen ? <AiOutlineCaretUp /> : <AiOutlineCaretDown /> }
+            </SearchToggle>
+
+            <SearchPanel $open={ searchOpen }>
+              <RoutesSearch
+                type={ step1.type ?? 'departure' }
+                from={ `${ step1.from }${ step1.stop_from ? `:${ step1.stop_from }` : '' }` }
+                to={ `${ step1.to }${ step1.stop_to ? `:${ step1.stop_to }` : '' }` }
+                departure={ step1.departure }
+                _return={ step1._return ?? '' }
+                adultsNo={ step1.adults }
+                childrenNo={ step1.children }
+                babiesNo={ step1.babies }
+                t={ t }
+                onSearch={ data => { setSearchOpen(false); onStep1(data); } }
+              />
+            </SearchPanel>
+          </SearchInner>
         </SearchAgain>
       ) }
 

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,35 @@ 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) }
+
+            <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

@@ -4,24 +4,50 @@ export const Container = styled.div`
   margin-top: 0;
 `;
 
+export const ContainerForm = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
 /**
  * Edited: Ferjolt Ozuni - Date: 2026-08-01
  *
- * Wraps on its OWN width rather than switching layout at a viewport
- * breakpoint. This now sits in a ~290px sidebar on a 1440px screen, so the
- * old `@media (min-width: 480px)` put the field and the button side by side
- * in a column too narrow for either - the input came out 86px wide.
- *
- * flex-basis plus wrap is container-responsive without container queries:
- * they sit side by side where there is room and stack where there is not.
+ * 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 ContainerForm = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  max-width: 450px;
+export const ContainerInput = styled.div`
+  position: relative;
+
+  & > input {
+    width: 100%;
+    padding-right: 42px;
+  }
 `;
 
-export const ContainerInput = styled.div`
-  flex: 1 1 165px;
+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

@@ -31,7 +31,7 @@ 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>
     );
@@ -39,7 +39,7 @@ const Payments = ({ selected, isPartner, t, onChange }: Props): JSX.Element => {
 
   return (
     <>
-      <Container className="box">
+      <Container>
         <SubTitle>
           <RiSecurePaymentLine />
           { t('routes_order.step5.actions.title') }

package/Step5/Payments/styles.ts

@@ -4,11 +4,17 @@ export const Container = styled.div`
   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: 10px;
+  gap: 6px;
   justify-content: center;
 `;
 
@@ -17,12 +23,12 @@ export const ButtonPayment = styled.button<{ $selected: boolean }>`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 8px;
-  // Edited: Ferjolt Ozuni - Date: 2026-08-01
-  // grow-and-wrap rather than a fixed 150px basis, so two fit per row in
-  // the checkout sidebar instead of one card per line down a tall column
-  flex: 1 1 110px;
-  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 };
@@ -30,7 +36,7 @@ export const ButtonPayment = styled.button<{ $selected: boolean }>`
   transition: all 0.3s ease;
 
   & > svg {
-    font-size: 35px;
+    font-size: 22px;
   }
 
   &:hover {

package/Step5/Summary/About/About.tsx

@@ -1,7 +1,7 @@
 import { TFunction } from 'i18next';
 import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
 import { FaCircleDot, FaLocationDot } from 'react-icons/fa6';
-import { Container, ContainerIcon, Icon, Information, Title, Operator, Logo, Leg, Point, PointIcon, PointCity, Country, PointMeta } from './styles';
+import { Container, ContainerIcon, Icon, Information, Title, Operator, Carrier, Logo, Leg, Point, PointIcon, PointCity, Country, PointMeta } from './styles';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { FoundData } from '@autobusal/providers/types/routes';
 
@@ -44,9 +44,17 @@ const About = ({ type, step1, data, t }: Props): (JSX.Element | null) => {
       <Information>
         <Title>{ data.name } ({ data.code })</Title>
 
-        { data.operator.logo_url && (
-          <Logo src={ data.operator.logo_url } alt={ data.operator.company } />
-        ) }
+        { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
+             Mark and name together, ranged right. The name used to sit
+             alone at the foot of the block, so the logo read as decoration
+             rather than as the operator being identified. */ }
+        <Carrier>
+          { data.operator.logo_url && (
+            <Logo src={ data.operator.logo_url } alt={ data.operator.company } />
+          ) }
+
+          <Operator>{ data.operator.company }</Operator>
+        </Carrier>
 
         <Leg>
           <Point>
@@ -88,8 +96,6 @@ const About = ({ type, step1, data, t }: Props): (JSX.Element | null) => {
             </PointMeta>
           </Point>
         </Leg>
-
-        <Operator>{ data.operator.company }</Operator>
       </Information>
     </Container>
   );

package/Step5/Summary/About/styles.ts

@@ -114,17 +114,24 @@ export const PointMeta = styled.div<{ $strong?: boolean }>`
 // Edited: Ferjolt Ozuni - Date: 2026-08-01
 // The operator's mark under the route name - who the buyer is actually
 // travelling with, which a company name alone conveys less quickly.
+export const Carrier = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  margin: 6px 0;
+`;
+
 export const Logo = styled.img`
   display: block;
-  max-width: 110px;
-  max-height: 34px;
+  max-width: 90px;
+  max-height: 30px;
   object-fit: contain;
-  object-position: left;
-  margin: 6px 0;
 `;
 
 export const Operator = styled.div`
-  padding-left: 10px;
   font-size: calc(${ props => props.theme.size.s } - 1px);
+  font-weight: 700;
+  text-align: right;
   color: ${ props => props.theme.font.faded };
 `;

package/package.json

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

package/styles.ts

@@ -32,8 +32,72 @@ export const Actions = styled.div`
  * your place. The form stays available above the results so an adjustment
  * is one edit rather than a round trip.
  */
-export const SearchAgain = styled.div`
-  margin-bottom: 20px;
+export const SearchAgain = styled.div<{ $background: string }>`
+  position: relative;
+  margin: -35px calc(50% - 50vw) 20px;
+  padding: 18px calc(50vw - 50%);
+  background-image: url('${ props => props.$background }');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+
+  /**
+   * Same scrim as the homepage hero, for the same reason: the artwork a
+   * brand supplies may be light or dark, and the controls on top of it must
+   * read either way.
+   */
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: rgba(0, 0, 0, .45);
+  }
+`;
+
+export const SearchInner = styled.div`
+  position: relative;
+`;
+
+export const SearchToggle = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 14px;
+  font-size: ${ props => props.theme.size.s };
+  font-weight: 700;
+  color: #FFF;
+  border: 1px solid rgba(255, 255, 255, .45);
+  border-radius: 100px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: #FFF;
+    background: rgba(255, 255, 255, .12);
+  }
+`;
+
+export const SearchSummary = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Collapsed by default: the form is there for the minority who want to
+ * change something, and left open it pushed the results themselves below
+ * the fold on the page whose whole job is showing results.
+ */
+export const SearchPanel = styled.div<{ $open: boolean }>`
+  display: ${ props => props.$open ? 'block' : 'none' };
+  margin-top: 14px;
+  padding: 20px;
+  background: ${ props => props.theme.header.transparent };
+  backdrop-filter: blur(25px);
+  -webkit-backdrop-filter: blur(25px);
+  border-radius: ${ props => props.theme.borderRadius };
 `;
 
 /**