@autobusal/routes-order 1.5.0 → 1.6.1

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this package are documented here. This project follows
 [Keep a Changelog](https://keepachangelog.com/) and [Semantic Versioning](https://semver.org/).
 
+## [1.6.1] - 2026-07-27
+
+### Added
+
+- **External-provider "Book on {provider}" redirect (Mode A: search +
+  redirect).** `Found/Route/Route.tsx` now detects `data.external?.mode ===
+  'redirect'` (obtapi's `Libraries\External\Search\Merge`) and swaps the
+  usual "Select Route" button for a `t('routes_order.step2.route.book_on')`
+  button that opens the click-out endpoint
+  (`{VITE_API_OBT}/api/external/go/{offer_id}`) in a new tab instead of
+  calling `onSave` - external offers use a synthetic id the local checkout
+  pipeline can't resolve, so "select" is never wired for them. The operator
+  logo and route-code links are also repointed to the same click-out URL
+  (not the raw provider deep link) so every outbound path is logged for the
+  search->click funnel, and the local-only "Read Operator Policy" button is
+  hidden for external rows (no local policy content exists for them).
+  Requires `@autobusal/providers` ^1.3.7.
+
+## [1.6.0] - 2026-07-25
+
+### Added
+
+- **Checkout addon selection (Step5).** Buyers can now add WhatsApp and/or
+  Telegram notification addons at checkout, if the label has them enabled
+  (`SettingsData.addons` from `@autobusal/providers`). WhatsApp collects a
+  phone number inline; Telegram is a "connect after purchase" flow (a bot
+  can't message a bare phone number cold). Selected addons render as line
+  items in the order summary and are folded into the grand total shown
+  before payment - pricing/availability is re-verified server-side, this is
+  only what the buyer requests. `usePostOrder` now takes an `AddonsSelection`
+  and posts `addon_whatsapp`/`addon_whatsapp_number`/`addon_telegram`.
+
 ## [1.5.0] - 2026-07-25
 
 ### Added

package/Found/Route/Route.tsx

@@ -27,6 +27,17 @@ const Route = ({ data, type, t, onSave }: Props): JSX.Element => {
     <RouteFeature key={ index } item={ item } />
   ));
 
+  // Edited: Ferjolt Ozuni - Date: 2026-07-27
+  // Mode A (search + redirect): this row is an external-provider offer,
+  // not a local route - "select" would try to check out with a synthetic
+  // "ext:..." id, which the local pipeline can't resolve. Every outbound
+  // click goes through the click-out endpoint (not the raw deep link
+  // directly) so it's logged for the search->click funnel.
+  const isExternalRedirect = data.external?.mode === 'redirect';
+  const bookOnUrl = data.external
+    ? `${ import.meta.env.VITE_API_OBT }/api/external/go/${ data.external.offer_id }`
+    : undefined;
+
   return (
     <Container className="box" $type={ type }>
       { data.price.offer === true && <SpecialOffer>{ t('routes_order.step2.route.offer') }</SpecialOffer> }
@@ -34,7 +45,7 @@ const Route = ({ data, type, t, onSave }: Props): JSX.Element => {
 
       <Trip>
         <Company>
-          <LinkCompany to={ 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.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>
         </Company>
 
         <Location>
@@ -62,10 +73,10 @@ const Route = ({ data, type, t, onSave }: Props): JSX.Element => {
             text={
               <>
                 <RiBus2Line />
-                { t('routes_order.step2.route.select') }
+                { isExternalRedirect ? t('routes_order.step2.route.book_on', { provider: data.operator.company }) : t('routes_order.step2.route.select') }
               </>
             }
-            onClick={ () => onSave(data) }
+            onClick={ () => (isExternalRedirect && bookOnUrl ? window.open(bookOnUrl, '_blank', 'noopener,noreferrer') : onSave(data)) }
           />
         </Price>
       </Trip>
@@ -73,7 +84,7 @@ const Route = ({ data, type, t, onSave }: Props): JSX.Element => {
       <Details>
         <Detail>
           <TitleDetail>{ t('routes_order.step2.route.name') }</TitleDetail>
-          <LinkRoute to={ data.link } target="_blank" rel="noopener noreferrer">{ data.code }</LinkRoute>
+          <LinkRoute to={ bookOnUrl ?? data.link } target="_blank" rel="noopener noreferrer">{ data.code }</LinkRoute>
         </Detail>
 
         { customs && (
@@ -90,14 +101,16 @@ const Route = ({ data, type, t, onSave }: Props): JSX.Element => {
           </Detail>
         ) }
 
-        <Detail>
-          <TitleDetail>{ t('routes_order.step2.route.policies.title') }</TitleDetail>
+        { !data.external && (
+          <Detail>
+            <TitleDetail>{ t('routes_order.step2.route.policies.title') }</TitleDetail>
 
-          <ButtonPolicy type="button" onClick={ () => setPolicy(true) }>
-            <HiOutlineDocumentText />
-            { t('routes_order.step2.route.policies.view') }
-          </ButtonPolicy>
-        </Detail>
+            <ButtonPolicy type="button" onClick={ () => setPolicy(true) }>
+              <HiOutlineDocumentText />
+              { t('routes_order.step2.route.policies.view') }
+            </ButtonPolicy>
+          </Detail>
+        ) }
       </Details>
 
       { data.trip.features_data.length > 0 && (
@@ -110,7 +123,7 @@ const Route = ({ data, type, t, onSave }: Props): JSX.Element => {
         </Features>
       ) }
 
-      { policy && <Policy id={ data.id } t={ t } onClose={ () => setPolicy(false) } /> }
+      { policy && typeof data.id === 'number' && <Policy id={ data.id } t={ t } onClose={ () => setPolicy(false) } /> }
     </Container>
   );
 };

package/Step4/Step4.tsx

@@ -40,8 +40,13 @@ const Step4 = ({ values, step1, step2, step3, isPartner, t, onSave, onBack }: Pr
     ...(step3 !== undefined ? (step3.trip?.passenger_fields ?? DEFAULT_FIELDS) : [])
   ]));
 
-  const busFrom = useBusOccupied(step1.departure, step2.id);
-  const busTo = useBusOccupied(step1._return, step3?.id);
+  // Edited: Ferjolt Ozuni - Date: 2026-07-27
+  // FoundData.id is widened to (number | string) for external-provider
+  // offers (Mode A: search + redirect), but those never reach Step4 -
+  // Found/Route.tsx's CTA opens the provider's click-out link for them
+  // instead of calling onSave, so a real local numeric id is guaranteed here.
+  const busFrom = useBusOccupied(step1.departure, step2.id as number);
+  const busTo = useBusOccupied(step1._return, step3?.id as (number | undefined));
 
   if (busFrom === undefined || busTo === undefined) {
     return <Loading t={ t } />;

package/Step5/Addons/Addons.tsx

@@ -0,0 +1,87 @@
+import { TFunction } from 'i18next';
+import { RiWhatsappLine, RiTelegramLine } from 'react-icons/ri';
+import { SubTitle } from '../../styles';
+import { Container, Option, Notice } from './styles';
+
+interface AddonsData {
+  whatsapp: { available: boolean, price: number }
+  telegram: { available: boolean, price: number }
+}
+
+interface Props {
+  data?: AddonsData
+  currency: string
+  whatsapp: boolean
+  whatsappNumber: string
+  telegram: boolean
+  t: TFunction<'common'>
+  onChangeWhatsapp: (value: boolean) => void
+  onChangeWhatsappNumber: (value: string) => void
+  onChangeTelegram: (value: boolean) => void
+}
+
+// Edited: Ferjolt Ozuni - Date: 2026-07-25
+// Paid checkout addons - hidden entirely if the label has neither channel
+// 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)) {
+    return null;
+  }
+
+  return (
+    <Container className="box">
+      <SubTitle>
+        { t('routes_order.step5.addons.title') }
+      </SubTitle>
+
+      { data.whatsapp.available && (
+        <Option>
+          <label>
+            <input
+              type="checkbox"
+              checked={ whatsapp }
+              onChange={ (event) => onChangeWhatsapp(event.target.checked) }
+            />
+
+            <RiWhatsappLine />
+
+            { t('routes_order.step5.addons.whatsapp.label') } (+{ data.whatsapp.price } { currency })
+          </label>
+
+          <Notice>{ t('routes_order.step5.addons.whatsapp.description') }</Notice>
+
+          { whatsapp && (
+            <input
+              type="text"
+              placeholder={ t('routes_order.step5.addons.whatsapp.phone_placeholder') }
+              value={ whatsappNumber }
+              onChange={ (event) => onChangeWhatsappNumber(event.target.value) }
+            />
+          ) }
+        </Option>
+      ) }
+
+      { data.telegram.available && (
+        <Option>
+          <label>
+            <input
+              type="checkbox"
+              checked={ telegram }
+              onChange={ (event) => onChangeTelegram(event.target.checked) }
+            />
+
+            <RiTelegramLine />
+
+            { t('routes_order.step5.addons.telegram.label') } (+{ data.telegram.price } { currency })
+          </label>
+
+          <Notice>{ t('routes_order.step5.addons.telegram.description') }</Notice>
+        </Option>
+      ) }
+    </Container>
+  );
+};
+
+export default Addons;

package/Step5/Addons/styles.ts

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  margin-top: 25px;
+`;
+
+export const Option = styled.div`
+  margin-top: 15px;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    font-weight: 700;
+  }
+
+  input[type="text"] {
+    margin-top: 10px;
+  }
+`;
+
+export const Notice = styled.div`
+  margin-top: 4px;
+  margin-left: 22px;
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.faded };
+`;

package/Step5/Coupons/Coupons.tsx

@@ -21,7 +21,12 @@ interface Props {
 const Coupons = ({ current, step2, t, total, onApplied }: Props): (JSX.Element | null) => {
   const { register, handleSubmit, formState: { errors } } = useForm<CouponForm>();
 
-  const { mutate: SearchCoupons, isPending } = useGetCoupon(step2.id, total.value);
+  // Edited: Ferjolt Ozuni - Date: 2026-07-27
+  // step2.id is only a synthetic string for external-provider offers
+  // (Mode A: search + redirect), and those never reach Step5/checkout -
+  // Found/Route.tsx's CTA redirects to the provider instead of calling
+  // onSave, so a real local numeric id is guaranteed here.
+  const { mutate: SearchCoupons, isPending } = useGetCoupon(step2.id as number, total.value);
 
   const onSubmit = (data: CouponForm): void => {
     SearchCoupons(data, {

package/Step5/Step5.tsx

@@ -9,6 +9,7 @@ import { Button } from '@autobusal/common';
 import Steps from '../Steps/Steps';
 import Summary from './Summary/Summary';
 import Coupons from './Coupons/Coupons';
+import Addons from './Addons/Addons';
 import Billing from './Billing/Billing';
 import Payments from './Payments/Payments';
 import { getTotal, convertCoupon } from './utilities';
@@ -19,6 +20,7 @@ import { CouponData } from '@autobusal/providers/types/orders';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { TotalData } from '../types';
 import { useUserStore } from '@autobusal/providers/stores/user';
+import { useGetSettings } from '@autobusal/providers/services';
 import { usePostOrder } from '../services';
 
 interface Props {
@@ -38,13 +40,46 @@ const Step5 = ({ step1, step2, step3, step4, isPartner, t, onBack }: Props): JSX
   );
   const [ action, setAction ] = useState<string | undefined>(undefined);
 
+  const [ addonWhatsapp, setAddonWhatsapp ] = useState<boolean>(false);
+  const [ addonWhatsappNumber, setAddonWhatsappNumber ] = useState<string>('');
+  const [ addonTelegram, setAddonTelegram ] = useState<boolean>(false);
+
   const { data: UserData } = useUserStore();
+  const { data: SettingsData } = useGetSettings();
 
   const navigate = useNavigate();
 
   const { register, handleSubmit, formState: { errors } } = useForm<BillingData>();
 
-  const { mutate: OrderSend, isPending } = usePostOrder(step1, step2, step3, step4, coupon, action);
+  // Edited: Ferjolt Ozuni - Date: 2026-07-25
+  // Paid addons are priced/verified server-side (see obtapi's
+  // App\Libraries\Orders\Make\Addons) - this is only for the checkout
+  // summary display and the grand total shown before payment.
+  const currency = total.display.split(' ')[1] ?? '';
+
+  const addonItems = [
+    addonWhatsapp && SettingsData?.addons?.whatsapp.available ? {
+      label: t('routes_order.step5.addons.whatsapp.label'),
+      price: SettingsData.addons.whatsapp.price
+    } : null,
+    addonTelegram && SettingsData?.addons?.telegram.available ? {
+      label: t('routes_order.step5.addons.telegram.label'),
+      price: SettingsData.addons.telegram.price
+    } : null
+  ].filter((item): item is { label: string, price: number } => item !== null);
+
+  const addonsValue = addonItems.reduce((sum, item) => sum + item.price, 0);
+
+  const grandTotal: TotalData = {
+    display: `${ total.value + addonsValue } ${ currency }`,
+    value: total.value + addonsValue
+  };
+
+  const { mutate: OrderSend, isPending } = usePostOrder(step1, step2, step3, step4, coupon, action, {
+    whatsapp: addonWhatsapp,
+    whatsappNumber: addonWhatsappNumber,
+    telegram: addonTelegram
+  });
 
   const onApplyCoupon = (data: CouponData): void => {
     setTotal(
@@ -59,6 +94,12 @@ const Step5 = ({ step1, step2, step3, step4, isPartner, t, onBack }: Props): JSX
   }, []);
 
   const onSendForm = async (): Promise<void> => {
+    if (addonWhatsapp && addonWhatsappNumber.trim().length < 5) {
+      alert(t('routes_order.step5.addons.whatsapp.phone_error'));
+
+      return;
+    }
+
     await handleSubmit(onSubmit)();
   };
 
@@ -91,12 +132,25 @@ const Step5 = ({ step1, step2, step3, step4, isPartner, t, onBack }: Props): JSX
         step3={ step3 }
         step4={ step4 }
         coupon={ coupon }
-        total={ total }
+        addons={ addonItems.map(item => ({ label: item.label, value: `${ item.price } ${ currency }` })) }
+        total={ grandTotal }
         t={ t }
       />
 
       <Coupons current={ coupon } step2={ step2 } total={ total } t={ t } onApplied={ onApplyCoupon } />
 
+      <Addons
+        data={ SettingsData?.addons }
+        currency={ currency }
+        whatsapp={ addonWhatsapp }
+        whatsappNumber={ addonWhatsappNumber }
+        telegram={ addonTelegram }
+        t={ t }
+        onChangeWhatsapp={ setAddonWhatsapp }
+        onChangeWhatsappNumber={ setAddonWhatsappNumber }
+        onChangeTelegram={ setAddonTelegram }
+      />
+
       { UserData === undefined && <Billing t={ t } errors={ errors } refs={ register } /> }
 
       <Payments

package/Step5/Summary/Amount/Amount.tsx

@@ -2,15 +2,16 @@ import { TFunction } from 'i18next';
 import { Container, Value, Code } from './styles';
 
 interface Props {
-  type: 'total' | 'discount'
+  type: 'total' | 'discount' | 'addon'
   value: string
   code?: string
+  label?: string
   t: TFunction<'common'>
 }
 
-const Amount = ({ type, value, code, t }: Props): JSX.Element => (
+const Amount = ({ type, value, code, label, t }: Props): JSX.Element => (
   <Container $type={ type }>
-    { t(`routes_order.step5.summary.${ type }`) }
+    { label ?? t(`routes_order.step5.summary.${ type }`) }
 
     { code && <Code>{ code }</Code> }
 

package/Step5/Summary/Amount/styles.ts

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 
-export const Container = styled.div<{ $type: 'total' | 'discount' }>`
+export const Container = styled.div<{ $type: 'total' | 'discount' | 'addon' }>`
   display: flex;
   align-items: center;
   padding: 10px 15px;

package/Step5/Summary/Summary.tsx

@@ -11,17 +11,23 @@ import { PersonData } from '@autobusal/providers/types/persons';
 import { CouponData } from '@autobusal/providers/types/orders';
 import { TotalData } from '../../types';
 
+interface AddonItem {
+  label: string
+  value: string
+}
+
 interface Props {
   step1: RoutesSearchForm
   step2: FoundData
   step3?: FoundData
   step4: PersonData
   coupon?: CouponData
+  addons?: AddonItem[]
   total: TotalData
   t: TFunction<'common'>
 }
 
-const Summary = ({ step1, step2, step3, step4, coupon, total, t }: Props): JSX.Element => (
+const Summary = ({ step1, step2, step3, step4, coupon, addons, total, t }: Props): JSX.Element => (
   <div className="box">
     <SubTitle>
       <AiOutlineInfoCircle />
@@ -35,6 +41,10 @@ const Summary = ({ step1, step2, step3, step4, coupon, total, t }: Props): JSX.E
 
     <Tickets step1={ step1 } step4={ step4 } t={ t } />
 
+    { addons?.map(item => (
+      <Amount key={ item.label } type="addon" label={ item.label } value={ item.value } t={ t } />
+    )) }
+
     { coupon && <Amount type="discount" code={ coupon.code } value={ coupon.discount } t={ t } /> }
 
     <Amount type="total" value={ total.display } t={ t } />

package/package.json

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

package/services.ts

@@ -4,7 +4,7 @@ import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { FoundData } 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 } from './types';
+import { FoundDay, ActionData, SaveData, OrderedData, CouponForm, AddonsSelection } from './types';
 
 export const useGetDepartures = (data: RoutesSearchForm): UseQueryResult<FoundData[]> => (
   useQuery({
@@ -74,7 +74,8 @@ export const usePostOrder = (
   step3: (FoundData | undefined),
   step4: PersonData,
   coupon: (CouponData | undefined),
-  action: (string | undefined)
+  action: (string | undefined),
+  addons: AddonsSelection
 ): UseMutationResult<OrderedData, Error, BillingData, unknown> => (
   useMutation({
     mutationKey: ['save-order'],
@@ -95,6 +96,18 @@ export const usePostOrder = (
         order.coupon = coupon.code;
       }
 
+      // Edited: Ferjolt Ozuni - Date: 2026-07-25
+      // Paid addons - obtapi re-verifies availability/price server-side
+      // against the label's own settings, this is just the buyer's request
+      if (addons.whatsapp && addons.whatsappNumber) {
+        order.addon_whatsapp = '1';
+        order.addon_whatsapp_number = addons.whatsappNumber;
+      }
+
+      if (addons.telegram) {
+        order.addon_telegram = '1';
+      }
+
       Object.keys(step4).forEach(index => {
         order[index] = step4[index];
       });

package/types.ts

@@ -33,4 +33,12 @@ export interface OrderedData {
 export interface TotalData {
   display: string
   value: number
+}
+
+// Edited: Ferjolt Ozuni - Date: 2026-07-25
+// The buyer's paid-addon selection at checkout - see Step5/Addons/Addons.tsx
+export interface AddonsSelection {
+  whatsapp: boolean
+  whatsappNumber: string
+  telegram: boolean
 }