@autobusal/routes-order 1.22.0 → 1.23.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 1.23.1
+
+**Flexible Ticket as a title, a price and an Add button, with the detail collapsed.**
+
+A button rather than a checkbox, because this is not the same kind of choice as the notification add-ons beside it — those are a cheap tick, this one changes what the ticket *is*. The toggle and the Add button are separate controls on purpose: reading the terms must never be a way to accidentally buy them.
+
+One line stays **outside** the collapse — "without it, this ticket cannot be cancelled or changed". Everything else is detail somebody can choose to read, but that is the material fact, and hiding what a buyer gets for nothing behind a toggle is the shape of a dark pattern rather than a tidy layout.
+
+## 1.23.0
+
+**Flexible Ticket at checkout.**
+
+- New `useGetFlex(departurePriceId, returnPriceId, adults, children)`. Its own request rather than a field on the search result, because the answer depends on **both legs at once**: an operator who will not amend one half removes the add-on from the whole booking, and the price is computed on the combined fare.
+- `Addons` renders the option below passenger details, where it already sat. It shows the **default first** — "without it, this ticket cannot be cancelled or changed" — then only the capabilities this booking actually includes, then that the fee itself is not refunded, then that statutory rights when the *operator* cancels are untouched. Nothing renders at all when the offer is unavailable: a checkbox that unlocks nothing is worse than no checkbox.
+- `AddonsSelection` gains `flex`; the order payload gains `addon_flex`.
+- `Found/Route` reads `routes_order.step2.route.information.*` after the `policies` rename.
+
+Copy is **Flexible Ticket** / **Biletë Fleksibël**, never insurance — the distinction decides how the line is taxed and whether selling it needs a licence.
+
 All notable changes to this package are documented here. This project follows
 [Keep a Changelog](https://keepachangelog.com/) and [Semantic Versioning](https://semver.org/).
 

package/Checkout/Checkout.tsx

@@ -24,7 +24,7 @@ import { CouponData } from '@autobusal/providers/types/orders';
 import { TotalData } from '../types';
 import { useUserStore } from '@autobusal/providers/stores/user';
 import { useGetSettings } from '@autobusal/providers/services';
-import { usePostOrder } from '../services';
+import { usePostOrder, useGetFlex } from '../services';
 
 interface Props {
   values?: PersonData
@@ -75,6 +75,7 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
   const [ addonWhatsapp, setAddonWhatsapp ] = useState<boolean>(false);
   const [ addonWhatsappNumber, setAddonWhatsappNumber ] = useState<string>('');
   const [ addonTelegram, setAddonTelegram ] = useState<boolean>(false);
+  const [ addonFlex, setAddonFlex ] = useState<boolean>(false);
 
   const { data: UserData } = useUserStore();
   const { data: SettingsData } = useGetSettings();
@@ -93,6 +94,19 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
 
   const currency = total.display.split(' ')[1] ?? '';
 
+  // Edited: Ferjolt Ozuni - Date: 2026-08-03
+  // Flexible Ticket, for the routes actually chosen. Asked for BOTH legs at
+  // once: the price is computed on the combined fare and an operator who
+  // will not amend one half removes the offer from the whole booking, so a
+  // per-leg question could not be answered honestly.
+  const { data: FlexData } = useGetFlex(
+    step2.price.id as number,
+    step3?.price.id as (number | undefined),
+    step1.adults ?? 1,
+    step1.children ?? 0,
+    step1.babies ?? 0
+  );
+
   const addonItems = [
     addonWhatsapp && SettingsData?.addons?.whatsapp.available ? {
       label: t('routes_order.step5.addons.whatsapp.label'),
@@ -101,6 +115,10 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
     addonTelegram && SettingsData?.addons?.telegram.available ? {
       label: t('routes_order.step5.addons.telegram.label'),
       price: SettingsData.addons.telegram.price
+    } : null,
+    addonFlex && FlexData?.available && FlexData.price !== undefined ? {
+      label: t('routes_order.step5.flex.title'),
+      price: FlexData.price
     } : null
   ].filter((item): item is { label: string, price: number } => item !== null);
 
@@ -114,7 +132,8 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
   const { mutate: OrderSend, isPending } = usePostOrder(step1, step2, step3, coupon, action, {
     whatsapp: addonWhatsapp,
     whatsappNumber: addonWhatsappNumber,
-    telegram: addonTelegram
+    telegram: addonTelegram,
+    flex: addonFlex
   });
 
   const onApplyCoupon = (data: CouponData): void => {
@@ -215,14 +234,17 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
 
           <Addons
             data={ SettingsData?.addons }
+            flexOffer={ FlexData }
             currency={ currency }
             whatsapp={ addonWhatsapp }
             whatsappNumber={ addonWhatsappNumber }
             telegram={ addonTelegram }
+            flex={ addonFlex }
             t={ t }
             onChangeWhatsapp={ setAddonWhatsapp }
             onChangeWhatsappNumber={ setAddonWhatsappNumber }
             onChangeTelegram={ setAddonTelegram }
+            onChangeFlex={ setAddonFlex }
           />
 
           { UserData === undefined && (

package/Found/Route/Route.tsx

@@ -4,7 +4,7 @@ import { HiOutlineArrowNarrowRight, HiOutlineDocumentText, HiChevronDown, HiChev
 import { BiHourglass } from 'react-icons/bi';
 import { RiBus2Line } from 'react-icons/ri';
 import { formatDuration, splitPrice } from '../refine';
-import { Button, RouteFeature, Policy, Rating } from '@autobusal/common';
+import { Button, RouteFeature, Information, Rating } from '@autobusal/common';
 import { Container, ButtonDetails, SpecialOffer, FavoriteStop, Trip, Company, Location, Stop, Iso, Time, Price, Amount, Decimals, Currency, PriceNotice, LinkCompany, Details, Detail, ButtonPolicy, TitleDetail, LinkRoute, FeaturesItems, Leaves } from './styles';
 import { FoundData } from '@autobusal/providers/types/routes';
 
@@ -25,7 +25,7 @@ interface Props {
 }
 
 const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Element => {
-  const [ policy, setPolicy ] = useState<boolean>(false);
+  const [ information, setInformation ] = useState<boolean>(false);
 
   // Edited: Ferjolt Ozuni - Date: 2026-08-03
   // Closed to begin with. Amenities, route code, transit and policies are
@@ -203,17 +203,17 @@ const Route = ({ data, type, passengers, t, onSave, children }: Props): JSX.Elem
 
         { !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>
 
-      { 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>
   );
 };

package/Step5/Addons/Addons.tsx

@@ -1,7 +1,9 @@
 import { TFunction } from 'i18next';
-import { RiWhatsappLine, RiTelegramLine } from 'react-icons/ri';
+import { useState } from 'react';
+import { RiWhatsappLine, RiTelegramLine, RiCalendarCheckLine, RiArrowUpSLine, RiArrowDownSLine } from 'react-icons/ri';
+import { FlexOffer } from '@autobusal/providers/types/routes';
 import { SubTitle } from '../../styles';
-import { Container, Option, Notice } from './styles';
+import { Container, Option, Notice, Terms, Term, FlexHeader, FlexToggle, FlexPrice, FlexAdd, FlexDetails } from './styles';
 
 interface AddonsData {
   whatsapp: { available: boolean, price: number }
@@ -10,14 +12,17 @@ interface AddonsData {
 
 interface Props {
   data?: AddonsData
+  flexOffer?: FlexOffer
   currency: string
   whatsapp: boolean
   whatsappNumber: string
   telegram: boolean
+  flex: boolean
   t: TFunction<'common'>
   onChangeWhatsapp: (value: boolean) => void
   onChangeWhatsappNumber: (value: string) => void
   onChangeTelegram: (value: boolean) => void
+  onChangeFlex: (value: boolean) => void
 }
 
 // Edited: Ferjolt Ozuni - Date: 2026-07-25
@@ -25,8 +30,22 @@ interface Props {
 // enabled (an empty box would be confusing). The WhatsApp addon collects
 // the number here; Telegram is a "connect after purchase" flow (a bot
 // can't message a bare phone number cold), so it's just a checkbox.
-const Addons = ({ data, currency, whatsapp, whatsappNumber, telegram, t, onChangeWhatsapp, onChangeWhatsappNumber, onChangeTelegram }: Props): (JSX.Element | null) => {
-  if (!data || (!data.whatsapp.available && !data.telegram.available)) {
+const Addons = ({ data, flexOffer, currency, whatsapp, whatsappNumber, telegram, flex, t, onChangeWhatsapp, onChangeWhatsappNumber, onChangeTelegram, onChangeFlex }: Props): (JSX.Element | null) => {
+  // Edited: Ferjolt Ozuni - Date: 2026-08-03
+  // Flexible Ticket is only on offer where the operators behind the chosen
+  // routes have agreed to honour it, which is a per-booking answer the
+  // settings payload cannot give - hence the separate offer (see
+  // useGetFlex). When it is unavailable nothing renders for it at all,
+  // rather than a disabled row: a checkbox that unlocks nothing is worse
+  // than no checkbox.
+  const hasFlex = flexOffer?.available === true;
+
+  // Closed to begin with. The title, the price and the Add button are the
+  // decision; the windows and the small print are for somebody who wants to
+  // check before making it.
+  const [ open, setOpen ] = useState<boolean>(false);
+
+  if (!data || (!data.whatsapp.available && !data.telegram.available && !hasFlex)) {
     return null;
   }
 
@@ -80,6 +99,67 @@ const Addons = ({ data, currency, whatsapp, whatsappNumber, telegram, t, onChang
           <Notice>{ t('routes_order.step5.addons.telegram.description') }</Notice>
         </Option>
       ) }
+
+      { hasFlex && (
+        <Option>
+          <FlexHeader>
+            <FlexToggle type="button" aria-expanded={ open } onClick={ () => setOpen(!open) }>
+              <RiCalendarCheckLine />
+
+              { t('routes_order.step5.flex.title') }
+
+              <FlexPrice>{ flexOffer?.price_display }</FlexPrice>
+
+              { open ? <RiArrowUpSLine /> : <RiArrowDownSLine /> }
+            </FlexToggle>
+
+            <FlexAdd type="button" $added={ flex } onClick={ () => onChangeFlex(!flex) }>
+              { flex ? t('routes_order.step5.flex.remove') : t('routes_order.step5.flex.add') }
+            </FlexAdd>
+          </FlexHeader>
+
+          {/*
+            * Deliberately OUTSIDE the collapse. Everything else here is
+            * detail somebody can choose to read, but this one line is the
+            * material fact - a buyer is being asked to pay for a right they
+            * would otherwise not have, and hiding what they get for nothing
+            * behind a toggle is the shape of a dark pattern rather than a
+            * tidy layout.
+            */}
+          <Notice>{ t('routes_order.step5.flex.default') }</Notice>
+
+          { open && (
+            <FlexDetails>
+              <Terms>
+                { flexOffer?.refund_hours != null && (
+                  <Term>{ t('routes_order.step5.flex.refund', { hours: flexOffer.refund_hours }) }</Term>
+                ) }
+
+                {/*
+                  * Either half can be absent on its own. An operator who
+                  * will move a booking but not refund it is a real case, and
+                  * listing only what this booking actually includes is the
+                  * difference between an offer and a misrepresentation.
+                  */}
+                { flexOffer?.reschedule_hours != null && (
+                  <Term>{ t('routes_order.step5.flex.reschedule', { hours: flexOffer.reschedule_hours }) }</Term>
+                ) }
+              </Terms>
+
+              <Notice>{ t('routes_order.step5.flex.nonrefundable') }</Notice>
+
+              {/*
+                * Statutory rights when the OPERATOR cancels are untouched by
+                * this and by anything else sold here. Saying so is both
+                * accurate and reassuring; leaving it out would imply the
+                * add-on is what grants them.
+                */}
+              <Notice>{ t('routes_order.step5.flex.carrier') }</Notice>
+            </FlexDetails>
+          ) }
+        </Option>
+      ) }
+
     </Container>
   );
 };

package/Step5/Addons/styles.ts

@@ -30,3 +30,82 @@ export const Notice = styled.div`
   font-size: ${ props => props.theme.size.xs };
   color: ${ props => props.theme.font.faded };
 `;
+
+/**
+ * What the add-on actually unlocks, as a short list.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ * A list rather than a sentence because the two windows can differ, and
+ * because either can be absent - prose would have to be rewritten for each
+ * combination, a list simply gets shorter.
+ */
+export const Terms = styled.ul`
+  margin: 8px 0 10px;
+  padding: 0 0 0 18px;
+  list-style: disc;
+`;
+
+export const Term = styled.li`
+  margin: 2px 0;
+  font-size: 14px;
+  line-height: 1.5;
+`;
+
+/**
+ * The Flexible Ticket row: what it is and its price on the left, the
+ * decision on the right.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * A button rather than a checkbox, because this is not the same kind of
+ * choice as the notification add-ons beside it - those are a cheap tick, this
+ * one changes what the ticket IS. The two halves are separate controls on
+ * purpose: reading the terms must never be a way to accidentally buy them.
+ */
+export const FlexHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+`;
+
+export const FlexToggle = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: 700;
+  cursor: pointer;
+  text-align: left;
+`;
+
+export const FlexPrice = styled.span`
+  font-weight: 700;
+  white-space: nowrap;
+`;
+
+export const FlexAdd = styled.button<{ $added: boolean }>`
+  flex: 0 0 auto;
+  padding: 6px 16px;
+  border-radius: 4px;
+  border: 1px solid ${ props => props.theme.primary.normal };
+  background: ${ props => props.$added ? 'transparent' : props.theme.primary.normal };
+  color: ${ props => props.$added ? props.theme.primary.normal : props.theme.primary.contrast };
+  font-family: inherit;
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: 700;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.85;
+  }
+`;
+
+export const FlexDetails = styled.div`
+  margin-left: 22px;
+`;

package/package.json

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

package/services.ts

@@ -1,7 +1,7 @@
 import { useMutation, UseMutationResult, useQuery, UseQueryResult } from '@tanstack/react-query';
 import { apiClient } from '@autobusal/providers';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
-import { FoundData } from '@autobusal/providers/types/routes';
+import { FoundData, FlexOffer } from '@autobusal/providers/types/routes';
 import { CouponData } from '@autobusal/providers/types/orders';
 import { BillingData, PersonData } from '@autobusal/providers/types/persons';
 import { FoundDay, ActionData, SaveData, OrderedData, CouponForm, AddonsSelection, AlternativesData } from './types';
@@ -156,6 +156,10 @@ export const usePostOrder = (
         order.addon_telegram = '1';
       }
 
+      if (addons.flex) {
+        order.addon_flex = '1';
+      }
+
       Object.keys(step4).forEach(index => {
         order[index] = step4[index];
       });
@@ -207,4 +211,44 @@ export const useGetPayments = (): UseQueryResult<ActionData> => (
         ))
     )
   })
-);
+);
+
+/**
+ * The Flexible Ticket offer for the routes actually chosen.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * Its own request rather than a field on the search result, because the
+ * answer depends on BOTH legs of a return trip at once: an operator who will
+ * not amend one half removes the add-on from the whole booking, and the
+ * price is computed on the combined fare. A per-route field could not say
+ * either of those things.
+ *
+ * Disabled until there is a departure price to ask about, so it never fires
+ * on a half-built booking.
+ */
+export const useGetFlex = (
+  departurePriceId: (number | undefined),
+  returnPriceId: (number | undefined),
+  adults: number,
+  children: number,
+  babies: number
+): UseQueryResult<FlexOffer> => (
+  useQuery({
+    queryKey: ['flex-offer', { departurePriceId, returnPriceId, adults, children, babies }],
+    enabled: departurePriceId !== undefined,
+    queryFn: async () => (
+      await apiClient
+        .get('/api/orders/flex', {
+          params: {
+            departure_price_id: departurePriceId,
+            return_price_id: returnPriceId,
+            adults,
+            children,
+            babies
+          }
+        })
+        .then(response => response.data)
+    )
+  })
+);

package/types.ts

@@ -71,4 +71,10 @@ export interface AddonsSelection {
   whatsapp: boolean
   whatsappNumber: string
   telegram: boolean
+
+  // Edited: Ferjolt Ozuni - Date: 2026-08-03
+  // Flexible Ticket. A bare boolean, like Telegram - the window and the
+  // price are the server's to decide (Libraries\Orders\Flex), and a client
+  // that sent either would be ignored.
+  flex: boolean
 }