@autobusal/routes-order 1.5.0 → 1.6.0

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 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.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/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/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.0",
   "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
 }