@autobusal/routes-order 1.8.0 → 1.9.1

package/Found/Orders/Orders.tsx

@@ -1,20 +1,33 @@
 import { TFunction } from 'i18next';
 import { Inline } from '@autobusal/common';
 import Route from '../Route/Route';
+import Group from '../Group/Group';
+import Empty from '../Empty/Empty';
 import { getFavorites, getNormal } from './utilities';
-import { Container, ContainerNotFound } from './styles';
+import { sortItems, groupItems, SortKey } from '../refine';
+import { Container, ContainerNotFound, Reset } from './styles';
 import { FoundData } from '@autobusal/providers/types/routes';
+import { RoutesSearchForm } from '@autobusal/routes-search/types';
+import { AlternativesData } from '../../types';
 
 interface Props {
   loading: boolean
-  data?: FoundData[]
+  data: FoundData[]
+  empty: boolean
+  refined: boolean
+  sort: SortKey
   type: 'departure' | '_return'
+  passengers: number
   preferredStop?: number
+  step1: RoutesSearchForm
+  alternatives?: AlternativesData
+  alternativesLoading: boolean
   t: TFunction<'common'>
+  onReset: () => void
   onSave: (data: FoundData) => void
 }
 
-const Orders = ({ loading, data, type, preferredStop, t, onSave }: Props): JSX.Element => {
+const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferredStop, step1, alternatives, alternativesLoading, t, onReset, onSave }: Props): JSX.Element => {
   if (loading) {
     return (
       <div className="box">
@@ -23,33 +36,82 @@ const Orders = ({ loading, data, type, preferredStop, t, onSave }: Props): JSX.E
     );
   }
 
-  // undefined means the search errored (e.g. same origin and destination) -
-  // show the not-found message instead of an empty shell
-  if (data === undefined || data.length === 0) {
+  // Edited: Ferjolt Ozuni - Date: 2026-08-01
+  // No results at all - the search itself found nothing (or errored, e.g.
+  // same origin and destination). Rather than a bare apology, offer the
+  // nearby origins, nearby destinations and other dates that obtapi has
+  // confirmed actually have seats.
+  if (empty) {
     return (
-      <ContainerNotFound className="box">{ t('routes_order.step2.not_found') }</ContainerNotFound>
+      <Empty type={ type } step1={ step1 } data={ alternatives } loading={ alternativesLoading } t={ t } />
     );
   }
 
-  const favorites = getFavorites(type, data, preferredStop).map(item => (
-    <Route
-      key={ item.id }
-      type="favorite"
-      data={ item }
-      t={ t }
-      onSave={ onSave }
-    />
-  ));
-
-  const items = getNormal(type, data, preferredStop).map(item => (
-    <Route
-      key={ item.id }
-      type="normal"
-      data={ item }
-      t={ t }
-      onSave={ onSave }
-    />
-  ));
+  // Edited: Ferjolt Ozuni - Date: 2026-08-01
+  // Results exist but the user's own filters hid all of them. Saying
+  // "we couldn't find any tickets" there would be a lie that sends people
+  // away from a page that does have inventory - offer the way out instead.
+  if (data.length === 0 && refined) {
+    return (
+      <ContainerNotFound className="box">
+        { t('routes_order.step2.filters.empty') }
+
+        <Reset type="button" onClick={ onReset }>{ t('routes_order.step2.filters.reset') }</Reset>
+      </ContainerNotFound>
+    );
+  }
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-01
+   *
+   * Preferred-stop pinning stays the OUTER partition and each side is
+   * sorted within itself. Sorting the whole list first would have let
+   * "cheapest" quietly un-pin a stop the user deliberately saved.
+   *
+   * Grouping runs AFTER sorting: groupItems keeps input order, so a
+   * collapsed set of shuttles lands wherever its best member sorted to.
+   */
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-05
+   *
+   * The day these results board on, for the cards that arrive on a later
+   * one. It is the date that was SEARCHED - the same value the strip above
+   * highlights - rather than anything the server sends back, so the two can
+   * never disagree about which day a card is for.
+   */
+  const date = step1[type];
+
+  const render = (list: FoundData[], kind: 'favorite' | 'normal'): JSX.Element[] => (
+    groupItems(sortItems(list, sort)).map(group => (
+      group.length > 1
+        ? (
+          <Group
+            key={ group[0].id }
+            items={ group }
+            type={ kind }
+            date={ date }
+            passengers={ passengers }
+            t={ t }
+            onSave={ onSave }
+          />
+        )
+        : (
+          <Route
+            key={ group[0].id }
+            type={ kind }
+            data={ group[0] }
+            date={ date }
+            passengers={ passengers }
+            t={ t }
+            onSave={ onSave }
+          />
+        )
+    ))
+  );
+
+  const favorites = render(getFavorites(type, data, preferredStop), 'favorite');
+
+  const items = render(getNormal(type, data, preferredStop), 'normal');
 
   return (
     <Container>
@@ -59,4 +121,4 @@ const Orders = ({ loading, data, type, preferredStop, t, onSave }: Props): JSX.E
   );
 };
 
-export default Orders;
+export default Orders;

package/Found/Orders/styles.ts

@@ -7,6 +7,20 @@ export const Container = styled.div`
 `;
 
 export const ContainerNotFound = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
   text-align: center;
   color: ${ props => props.theme.font.faded };
+`;
+
+export const Reset = styled.button`
+  font-weight: 700;
+  color: ${ props => props.theme.primary.normal };
+  transition: all 0.2s ease;
+
+  &:hover {
+    opacity: .8;
+  }
 `;

package/Found/Picks/Picks.tsx

@@ -0,0 +1,75 @@
+import { TFunction } from 'i18next';
+import { Container, Pick, Label, Value, Meta, Company } from './styles';
+import { SortKey, sortItems } from '../refine';
+import { FoundData } from '@autobusal/providers/types/routes';
+
+interface Props {
+  items: FoundData[]
+  sort: SortKey
+  t: TFunction<'common'>
+  onSelect: (sort: SortKey) => void
+}
+
+const OFFERED: SortKey[] = [ 'cheapest', 'fastest', 'recommended' ];
+
+/**
+ * Three cards naming the best trip on each axis.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * They answer "what are my options here" before anyone reads a single row,
+ * and clicking one applies that ordering to the list below - so the card is
+ * both an answer and a control.
+ *
+ * Computed from the FILTERED list, so a pick never advertises a trip the
+ * user's own filters have hidden.
+ *
+ * "Recommended" is merit-first - price rank plus duration rank, with paid
+ * subscription priority only breaking ties. See `recommend` in refine.ts.
+ */
+const Picks = ({ items, sort, t, onSelect }: Props): JSX.Element | null => {
+  // below a handful of results the cards just restate the list underneath
+  if (items.length < 3) {
+    return null;
+  }
+
+  return (
+    <Container>
+      { OFFERED.map(key => {
+        const best = sortItems(items, key)[0];
+
+        if (best === undefined) {
+          return null;
+        }
+
+        return (
+          <Pick
+            key={ key }
+            type="button"
+            $active={ sort === key }
+            aria-pressed={ sort === key }
+            onClick={ () => onSelect(key) }
+          >
+            <Label>{ t(`routes_order.step2.sort.${ key }`) }</Label>
+
+            <Value>{ best.price.display }</Value>
+
+            <Meta>
+              { best.duration !== '-' && best.duration }
+
+              { /* The operator's name is hidden on a phone - see Company in
+                   styles. The separator goes with it, or a card reads
+                   "4h ·" with nothing after the dot. */ }
+              <Company>
+                { best.duration !== '-' && ' · ' }
+                { best.operator.company }
+              </Company>
+            </Meta>
+          </Pick>
+        );
+      }) }
+    </Container>
+  );
+};
+
+export default Picks;

package/Found/Picks/styles.ts

@@ -0,0 +1,106 @@
+import styled, { css } from 'styled-components';
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Three across at every width, including phones, where these used to stack.
+ * Stacked, they cost three full bands of vertical space before a single
+ * result - so the thing that exists to summarise the list was pushing the
+ * list itself off the screen. Side by side they are a strip, and comparing
+ * three numbers is what they are for; a column of three is a list to read.
+ */
+export const Container = styled.div`
+  display: grid;
+  gap: 6px;
+  margin-bottom: 15px;
+  grid-template-columns: repeat(3, 1fr);
+
+  @media (min-width: 640px) {
+    gap: 10px;
+  }
+`;
+
+export const Pick = styled.button<{ $active: boolean }>`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  padding: 8px 9px;
+  text-align: left;
+  min-width: 0;
+
+  @media (min-width: 640px) {
+    gap: 4px;
+    padding: 12px 15px;
+  }
+  border-radius: ${ props => props.theme.borderRadius };
+  border: 1px solid ${ props => props.theme.inputs.border };
+  background: ${ props => props.theme.background.normal };
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: ${ props => props.theme.primary.normal };
+  }
+
+  ${ props => props.$active && css`
+    border-color: ${ props => props.theme.primary.normal };
+    box-shadow: inset 0 0 0 1px ${ props => props.theme.primary.normal };
+  ` }
+`;
+
+export const Label = styled.span`
+  max-width: 100%;
+  overflow: hidden;
+  font-size: calc(${ props => props.theme.size.xs } - 1px);
+  text-transform: uppercase;
+  letter-spacing: 0;
+  font-weight: 700;
+  color: ${ props => props.theme.font.faded };
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  @media (min-width: 640px) {
+    font-size: ${ props => props.theme.size.xs };
+    letter-spacing: .5px;
+  }
+`;
+
+export const Value = styled.strong`
+  font-size: ${ props => props.theme.size.m };
+
+  @media (min-width: 640px) {
+    font-size: ${ props => props.theme.size.l };
+  }
+`;
+
+export const Meta = styled.span`
+  overflow: hidden;
+  max-width: 100%;
+  font-size: calc(${ props => props.theme.size.xs } - 1px);
+  color: ${ props => props.theme.font.faded };
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  @media (min-width: 640px) {
+    font-size: ${ props => props.theme.size.xs };
+  }
+`;
+
+/**
+ * The operator's name, dropped on a phone.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * At a third of a 375px screen each card gets about 110px, and a company
+ * name is the one thing here that will not fit in it - it would ellipsis to
+ * two or three characters, which is noise rather than information. The
+ * duration stays, because it is short and it is the number being compared;
+ * the name is one line down in the results anyway.
+ */
+export const Company = styled.span`
+  display: none;
+
+  @media (min-width: 640px) {
+    display: inline;
+  }
+`;

package/Found/Route/Route.tsx

@@ -1,9 +1,13 @@
 import { useState } from 'react';
 import { TFunction } from 'i18next';
-import { HiOutlineArrowNarrowRight, HiOutlineDocumentText } from 'react-icons/hi';
+import { HiOutlineArrowNarrowRight, HiOutlineDocumentText, HiChevronDown, HiChevronUp } from 'react-icons/hi';
+import { BiHourglass } from 'react-icons/bi';
 import { RiBus2Line } from 'react-icons/ri';
-import { Button, RouteFeature, Policy } from '@autobusal/common';
-import { Container, SpecialOffer, FavoriteStop, Trip, Company, Location, Time, Price, LinkCompany, Details, Detail, ButtonPolicy, TitleDetail, LinkRoute, Features, TitleFeatures, FeaturesItems } from './styles';
+import { MdOutlineAltRoute } from 'react-icons/md';
+import { formatDuration, splitPrice } from '../refine';
+import { Button, RouteFeature, Information, Rating } from '@autobusal/common';
+import { createDate, getDayParts } from '@autobusal/utilities';
+import { Container, ButtonDetails, SpecialOffer, FavoriteStop, Trip, Company, Location, Stop, Iso, Time, Price, Amount, Decimals, Currency, PriceNotice, LinkCompany, CodeCompany, Details, Detail, ButtonPolicy, TitleDetail, FeaturesItems, Leaves, Day, NextDay } from './styles';
 import { FoundData } from '@autobusal/providers/types/routes';
 
 // neutral placeholder so a missing/broken operator logo doesn't render the
@@ -13,18 +17,38 @@ const LOGO_FALLBACK = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s
 interface Props {
   data: FoundData
   type: 'favorite' | 'normal'
+  // Edited: Ferjolt Ozuni - Date: 2026-08-05
+  // The searched boarding day, dd/mm/yyyy. Only used to print the two dates
+  // on an overnight trip - a card that arrives the same day says nothing
+  // about days at all, which is why this can be absent.
+  date?: string
+  passengers: number
   t: TFunction<'common'>
   onSave: (data: FoundData) => void
+  // Edited: Ferjolt Ozuni - Date: 2026-08-01
+  // Slot under the trip row, used by Group to hang a departure-time picker
+  // on a card that stands for several interchangeable departures.
+  children?: React.ReactNode
 }
 
-const Route = ({ data, type, t, onSave }: Props): JSX.Element => {
-  const [ policy, setPolicy ] = useState<boolean>(false);
+const Route = ({ data, type, date, passengers, t, onSave, children }: Props): JSX.Element => {
+  const [ information, setInformation ] = useState<boolean>(false);
+
+  // Edited: Ferjolt Ozuni - Date: 2026-08-03
+  // Closed to begin with. Amenities, route code, transit and policies are
+  // supporting detail on a row somebody is scanning, and four bands of it
+  // per result pushed the next result off a phone screen. The content stays
+  // in the DOM either way (see Details in styles) so the prerendered
+  // snapshot a crawler reads is unchanged.
+  const [ details, setDetails ] = useState<boolean>(false);
 
   const customs = Object.values(data.customs).join(', ');
   const transiting = Object.values(data.transiting).join(', ');
 
+  const price = splitPrice(data.price.display);
+
   const features = data.trip.features_data.map((item, index) => (
-    <RouteFeature key={ index } item={ item } />
+    <RouteFeature key={ index } item={ item } compact />
   ));
 
   // Edited: Ferjolt Ozuni - Date: 2026-07-27
@@ -38,33 +62,176 @@ const Route = ({ data, type, t, onSave }: Props): JSX.Element => {
     ? `${ import.meta.env.VITE_API_OBT }/api/external/go/${ data.external.offer_id }`
     : undefined;
 
+  // Edited: Ferjolt Ozuni - Date: 2026-08-03
+  // Only today's results carry this - obtapi sends null on every other date,
+  // so there is no "in 26 days" badge to suppress here.
+  const leaves = data.departs_in ?? null;
+
+  const soon = leaves !== null && leaves < 60;
+
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-05
+   *
+   * Overnight trips. "22:30 -> 06:00" is the one thing on this card that
+   * can be read as the exact opposite of what it means - a seven-and-a-half
+   * hour journey looks like a sixteen-hour one run backwards - and the
+   * duration beside it does not fix that, because nobody reads a duration
+   * to work out a date. So when the coach arrives on a later day, BOTH ends
+   * print their day and the arrival carries a +1.
+   *
+   * Nothing is added to a same-day card: a date under every arrival on a
+   * page of same-day results is noise that makes the overnight ones stop
+   * standing out, which is the only reason any of this is here.
+   *
+   * The offset comes from the timetable's own midnight markers, computed
+   * server-side (Libraries\Routes\Search\Locations::offset) - it is not
+   * inferred from "arrival looks earlier than departure", which is wrong
+   * for exactly the cross-border journeys where the two ends keep
+   * different clocks.
+   */
+  const offset = data.arrival_offset ?? 0;
+
+  const days = ((): { departure: string, arrival: string } | null => {
+    if (offset <= 0 || !date) {
+      return null;
+    }
+
+    const departs = createDate(date);
+
+    // an invalid or unexpected date string must not print "NaN Invalid" on
+    // a result card - showing no day is better than showing a wrong one
+    if (Number.isNaN(departs.getTime())) {
+      return null;
+    }
+
+    const arrives = new Date(departs);
+    arrives.setUTCDate(arrives.getUTCDate() + offset);
+
+    const format = (value: Date): string => {
+      const parts = getDayParts(value, t as any);
+
+      return `${ parts.day } ${ parts.month }`;
+    };
+
+    return { departure: format(departs), arrival: format(arrives) };
+  })();
+
   return (
     <Container className="box" $type={ type }>
       { data.price.offer === true && <SpecialOffer>{ t('routes_order.step2.route.offer') }</SpecialOffer> }
       { type === 'favorite' && <FavoriteStop>{ t('routes_order.step2.route.preferred_stop') }</FavoriteStop> }
 
+      { leaves !== null && (
+        <Leaves $soon={ soon }>
+          { leaves < 60
+            ? t('routes_order.step2.route.leaves_minutes', { minutes: leaves })
+            : t('routes_order.step2.route.leaves_hours', { hours: Math.floor(leaves / 60), minutes: leaves % 60 }) }
+        </Leaves>
+      ) }
+
       <Trip>
         <Company>
-          <LinkCompany to={ bookOnUrl ?? data.operator.link } target="_blank" rel="noopener noreferrer" title={ data.operator.company }><img src={ data.operator.logo_url || LOGO_FALLBACK } onError={ (e) => { e.currentTarget.onerror = null; e.currentTarget.src = LOGO_FALLBACK; } } alt={ data.operator.company } /></LinkCompany>
+          <LinkCompany to={ bookOnUrl ?? data.operator.link } target="_blank" rel="noopener noreferrer" title={ data.operator.display_name }><img src={ data.operator.logo_url || LOGO_FALLBACK } onError={ (e) => { e.currentTarget.onerror = null; e.currentTarget.src = LOGO_FALLBACK; } } alt={ data.operator.display_name } /></LinkCompany>
+
+          { /* Edited: Ferjolt Ozuni - Date: 2026-08-03
+               The OPERATOR's rating rather than this route's: a single route
+               rarely has enough published reviews to clear the display
+               threshold, and a card with a rating beats one without. Renders
+               nothing when there is no rating yet, which is why a brand-new
+               operator does not look like a badly rated one. */ }
+          <Rating rating={ data.operator.rating } size="small" t={ t } />
+
+          { /* Edited: Ferjolt Ozuni - Date: 2026-08-03
+               The route code, moved up out of the collapsed details. It is an
+               identifier of the same kind as the logo above it, and moving it
+               here frees a slot in the details row for things that actually
+               need explaining - customs on a cross-border run, for one. */ }
+          <CodeCompany to={ bookOnUrl ?? data.link } target="_blank" rel="noopener noreferrer" title={ t('routes_order.step2.route.name') }>
+            <MdOutlineAltRoute />
+            { data.code }
+          </CodeCompany>
         </Company>
 
         <Location>
-          <h2>{ data.locations.from.city.name } ({ data.locations.from.city.country?.iso_code }) { data.locations.from.departure }</h2>
-          <span>{ data.locations.from.stop?.name }</span>
+          <h2>
+            { data.locations.from.city.name }
+            { /* Edited: Ferjolt Ozuni - Date: 2026-08-03
+                 REAL SPACES, and they are load-bearing. JSX drops the
+                 whitespace around a newline, so city, country and time were
+                 concatenated into one unbreakable token - "Thessaloniki(GRC)
+                 06:00" measured 215px inside a 165px column and painted 50px
+                 into the price beside it. Nothing about the widths could fix
+                 that on its own: with nowhere to wrap, text will always
+                 overflow eventually. */ }
+            { ' ' }
+            <Iso>({ data.locations.from.city.country?.iso_code })</Iso>
+            { ' ' }
+            { data.locations.from.departure }
+          </h2>
+
+          { days && <Day>{ days.departure }</Day> }
+
+          <Stop>{ data.locations.from.stop?.name }</Stop>
         </Location>
 
         <Time>
           <HiOutlineArrowNarrowRight />
-          <span>{ data.duration }</span>
+
+          { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
+               The clock is the point: this number sits between two real
+               departure times, and "08:30" gave nothing to distinguish a
+               trip length from a time of day. */ }
+          <span><BiHourglass />{ formatDuration(data.duration, t) }</span>
         </Time>
 
         <Location>
-          <h2>{ data.locations.to.city.name } ({ data.locations.to.city.country?.iso_code }) { data.locations.to.arrival }</h2>
-          <span>{ data.locations.to.stop?.name }</span>
+          <h2>
+            { data.locations.to.city.name }
+            { /* Edited: Ferjolt Ozuni - Date: 2026-08-03
+                 REAL SPACES, and they are load-bearing. JSX drops the
+                 whitespace around a newline, so city, country and time were
+                 concatenated into one unbreakable token - "Thessaloniki(GRC)
+                 06:00" measured 215px inside a 165px column and painted 50px
+                 into the price beside it. Nothing about the widths could fix
+                 that on its own: with nowhere to wrap, text will always
+                 overflow eventually. */ }
+            { ' ' }
+            <Iso>({ data.locations.to.city.country?.iso_code })</Iso>
+            { ' ' }
+            { data.locations.to.arrival }
+            { offset > 0 && (
+              <NextDay title={ t('routes_order.step2.route.next_day', { count: offset }) }>
+                +{ offset }
+              </NextDay>
+            ) }
+          </h2>
+
+          { days && <Day>{ days.arrival }</Day> }
+
+          <Stop>{ data.locations.to.stop?.name }</Stop>
         </Location>
 
         <Price>
-          <strong>{ data.price.display }</strong>
+          <Amount>
+            { price.whole }
+            { price.decimals !== null && <Decimals>{ price.decimals }</Decimals> }
+            { price.currency !== null && <Currency>{ price.currency }</Currency> }
+          </Amount>
+
+          { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
+               obtapi's price.value is the total for the WHOLE party
+               (adult * adults + child * children + baby * babies), not a
+               per-person fare - so this says how many people it covers
+               rather than the "per adult" line the competitors use, which
+               would be wrong here for any multi-passenger search. */ }
+          <PriceNotice>
+            { t(
+              passengers === 1
+                ? 'routes_order.step2.route.price_notice_single'
+                : 'routes_order.step2.route.price_notice_multiple',
+              { total: passengers }
+            ) }
+          </PriceNotice>
 
           <Button
             type="button"
@@ -73,7 +240,7 @@ const Route = ({ data, type, t, onSave }: Props): JSX.Element => {
             text={
               <>
                 <RiBus2Line />
-                { isExternalRedirect ? t('routes_order.step2.route.book_on', { provider: data.operator.company }) : t('routes_order.step2.route.select') }
+                { isExternalRedirect ? t('routes_order.step2.route.book_on', { provider: data.operator.display_name }) : t('routes_order.step2.route.select') }
               </>
             }
             onClick={ () => (isExternalRedirect && bookOnUrl ? window.open(bookOnUrl, '_blank', 'noopener,noreferrer') : onSave(data)) }
@@ -81,11 +248,32 @@ const Route = ({ data, type, t, onSave }: Props): JSX.Element => {
         </Price>
       </Trip>
 
-      <Details>
-        <Detail>
-          <TitleDetail>{ t('routes_order.step2.route.name') }</TitleDetail>
-          <LinkRoute to={ bookOnUrl ?? data.link } target="_blank" rel="noopener noreferrer">{ data.code }</LinkRoute>
-        </Detail>
+      { children }
+
+      <ButtonDetails
+        type="button"
+        aria-expanded={ details }
+        onClick={ () => setDetails(!details) }
+      >
+        { details ? <HiChevronUp /> : <HiChevronDown /> }
+        { t('routes_order.step2.route.details') }
+      </ButtonDetails>
+
+      <Details $open={ details }>
+        { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
+             Amenities were a separate full-width block under the card.
+             They are the same kind of thing as route, transit and policies
+             - supporting detail - so they join that row as the first
+             column, which is one fewer band of vertical space per result. */ }
+        { data.trip.features_data.length > 0 && (
+          <Detail>
+            <TitleDetail>{ t('routes_order.step2.route.features') }</TitleDetail>
+
+            <FeaturesItems>
+              { features }
+            </FeaturesItems>
+          </Detail>
+        ) }
 
         { customs && (
           <Detail>
@@ -103,27 +291,17 @@ const Route = ({ data, type, t, onSave }: Props): JSX.Element => {
 
         { !data.external && (
           <Detail>
-            <TitleDetail>{ t('routes_order.step2.route.policies.title') }</TitleDetail>
+            <TitleDetail>{ t('routes_order.step2.route.information.title') }</TitleDetail>
 
-            <ButtonPolicy type="button" onClick={ () => setPolicy(true) }>
+            <ButtonPolicy type="button" onClick={ () => setInformation(true) }>
               <HiOutlineDocumentText />
-              { t('routes_order.step2.route.policies.view') }
+              { t('routes_order.step2.route.information.view') }
             </ButtonPolicy>
           </Detail>
         ) }
       </Details>
 
-      { data.trip.features_data.length > 0 && (
-        <Features>
-          <TitleFeatures>{ t('routes_order.step2.route.features') }</TitleFeatures>
-
-          <FeaturesItems>
-            { features }
-          </FeaturesItems>
-        </Features>
-      ) }
-
-      { policy && typeof data.id === 'number' && <Policy id={ data.id } t={ t } onClose={ () => setPolicy(false) } /> }
+      { information && typeof data.id === 'number' && <Information id={ data.id } t={ t } onClose={ () => setInformation(false) } /> }
     </Container>
   );
 };