@autobusal/routes-order 1.11.1 → 1.12.0

package/CHANGELOG.md

@@ -6,6 +6,19 @@ All notable changes to this package are documented here. This project follows
 > Note: 1.8.0 was published without a changelog entry. The gap is left as-is
 > rather than reconstructed after the fact.
 
+## [1.12.0] - 2026-08-01
+
+### Removed
+
+- **The Booking.com hotel banner.** It was unmounted from `Found` earlier on
+  2026-08-01 for sitting between the date strip and the trips - advertising a
+  hotel to somebody still deciding whether they can travel at all - and the
+  component is now deleted rather than kept dormant. It was never an
+  integration, only a hand-built `searchresults.xu.html` link built from
+  `city.booking_id`; leaving the component, the column and its admin field in
+  place made it look like one. The `routes_order.step2.booking` strings and
+  the `s-ec.bstatic.com` CSP entry go with it.
+
 ## [1.11.1] - 2026-08-01
 
 ### Changed

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,15 @@ 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 used to sit here, between the date strip
+           and the trips, pushing the actual results below it to advertise a
+           hotel to somebody still deciding whether they can travel at all.
+           It was unmounted earlier today and the component is now removed
+           outright, along with cities.booking_id - it was never really an
+           integration, just a hand-built searchresults.xu.html link, and
+           leaving the column and its admin field behind made it look like
+           one. */ }
 
       { 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.12.0",
   "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 };
 `;
 
 /**

package/Found/Booking/Booking.tsx

@@ -1,61 +0,0 @@
-import { TFunction } from 'i18next';
-import { createDate } from '@autobusal/utilities';
-import { Container, About, LinkBooking } from './styles';
-import { RoutesSearchForm } from '@autobusal/routes-search/types';
-import { FoundData } from '@autobusal/providers/types/routes';
-import { useGetSettings } from '@autobusal/providers/services';
-
-interface Props {
-  data?: FoundData[]
-  step1: RoutesSearchForm
-  t: TFunction<'public'>
-}
-
-const Booking = ({ data, step1, t }: Props): (JSX.Element | null) => {
-  const { data: settings } = useGetSettings();
-
-  if (data === undefined || data?.length === 0) {
-    return null;
-  }
-
-  const destination = data[0].locations.to;
-
-  // stop if no booking city
-  if (destination.city.booking_id === undefined) {
-    return null;
-  }
-
-  // stop if no booking id
-  if (settings.preferences.bookingID === undefined) {
-    return null;
-  }
-
-  const from = createDate(step1.departure);
-  const to = getReturnDate(step1._return, from);
-
-  const location = `https://www.booking.com/searchresults.xu.html?city=${ destination.city.booking_id }&aid=&checkin_monthday=${ from.getDate() }&checkin_month=${ from.getMonth() + 1 }&checkin_year=${ from.getFullYear() }&checkout_monthday=${ to.getDate() }&checkout_month=${ to.getMonth() + 1 }&checkout_year=${ to.getFullYear() }&no_rooms=1&group_adults=2&room1=A%2CA`;
-
-  return (
-    <Container>
-      <About>
-        { t('routes_order.step2.booking.title', { location: destination.city.name }) }
-        <img src="https://s-ec.bstatic.com/static/img/b26logo/booking_logo_retina/22615963add19ac6b6d715a97c8d477e8b95b7ea.png" alt="Booking.com" />
-      </About>
-
-      <LinkBooking to={ location } target="_blank" rel="noopener noreferrer">{ t('routes_order.step2.booking.search') }</LinkBooking>
-    </Container>
-  );
-};
-
-const getReturnDate = (_return: (string | undefined), from: Date): Date => {
-  if (_return !== undefined) {
-    return createDate(_return);
-  }
-
-  const to = new Date(from);
-  to.setDate(to.getDate() + 2);
-
-  return to;
-};
-
-export default Booking;

package/Found/Booking/styles.ts

@@ -1,50 +0,0 @@
-import { Link } from 'react-router-dom';
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-  margin-bottom: 15px;
-  padding: 15px;
-  background: #003580;
-  border-radius: ${ props => props.theme.borderRadius };
-
-  @media (min-width: 480px) {
-    flex-direction: row;
-    align-items: center;
-  }
-`;
-
-export const About = styled.div`
-  color: #FFFFFF;
-  font-weight: 700;
-
-  > img {
-    display: block;
-    width: 110px;
-    margin-top: 6px;
-  }
-`;
-
-export const LinkBooking = styled(Link)`
-  display: inline-block;
-  max-width: 150px;
-  padding: 6px 0;
-  text-align: center;
-  font-weight: 700;
-  color: #333333;
-  background: #FFFFFF;
-  border-radius: 100px;
-  transition: all 0.3s ease;
-
-  &:hover {
-    text-decoration: none;
-    box-shadow: 0 4px 24px 0 rgba(255, 255, 255, 0.5);
-  }
-
-  @media (min-width: 480px) {
-    flex-basis: 150px;
-    margin-left: auto;
-  }
-`;