@autobusal/order-confirm 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,35 @@
+# Changelog
+
+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.1.0] - 2026-07-25
+
+### Added
+
+- **Post-purchase Telegram addon binding.** When a purchased order has a
+  Telegram notification addon still awaiting binding, the "purchased"
+  confirmation page now shows a "Connect Telegram" deep link (polls obtapi's
+  `GET /api/orders/telegram/status?hash=...` every 4s until bound). Mirrors
+  magus's account-level `AccountTelegram` binding flow, but order-scoped
+  since a guest checkout has no account to bind against.
+
+## [1.0.1] - 2026-07-19
+
+### Security
+
+- `OrderConfirm.tsx`: fixed an HTML-injection (XSS) vector. The `hash` segment
+  comes straight from the URL (`/orders/:type/:hash`) and was interpolated into
+  markup rendered via `dangerouslySetInnerHTML`. Added an `escapeHtml` helper
+  that encodes `& < > " '` and applied it to the hash before interpolation
+  (`<strong>${ escapeHtml(String(hash ?? '')) }</strong>`), so a crafted hash
+  (e.g. containing `<img onerror=...>`) can no longer inject markup.
+
+### Fixed
+
+- `OrderConfirm.tsx`: the "Manage order" action now routes based on auth state.
+  A logged-in user is sent to `/account/orders` (where the order is listed)
+  instead of the public `/viewtrip/:hash` lookup form that email-gates access to
+  their own order; guests still use the public `/viewtrip/:hash` lookup.
+
+Authored by Ferjolt Ozuni. Consolidated from the magus and alvavel whitelabel patch sets into canonical @autobusal source (eliminates per-repo patch-package divergence).

package/OrderConfirm.tsx

@@ -5,6 +5,7 @@ import { BiErrorAlt } from 'react-icons/bi';
 import { IoReturnUpBackOutline } from 'react-icons/io5';
 import { Meta, Button } from '@autobusal/common';
 import Reason from './Reason';
+import Telegram from './Telegram/Telegram';
 import { Title, Actions } from './styles';
 import { useUserStore } from '@autobusal/providers/stores/user';
 
@@ -12,6 +13,15 @@ interface Props {
   t: TFunction<'common'>
 }
 
+// hash comes straight from the URL (/orders/:type/:hash) and is interpolated into
+// HTML that gets rendered via dangerouslySetInnerHTML below - escape it so a
+// crafted hash segment (e.g. containing <img onerror=...>) can't inject markup.
+const escapeHtml = (value: string): string => (
+  value.replace(/[&<>"']/g, char => ({
+    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', '\'': '&#39;'
+  }[char] as string))
+);
+
 const OrderConfirm = ({ t }: Props): (JSX.Element | null) => {
   const [ searchParams ] = useSearchParams();
 
@@ -30,7 +40,10 @@ const OrderConfirm = ({ t }: Props): (JSX.Element | null) => {
   }
 
   const onManage = (): void => {
-    navigate(`/viewtrip/${ hash }`);
+    // a logged-in user shouldn't be sent to the public order-lookup form (which
+    // email-gates access to their OWN order) - send them into their account
+    // orders where the order is listed. Guests use the public lookup.
+    navigate(UserData ? '/account/orders' : `/viewtrip/${ hash }`);
   };
 
   const onBack = (): void => {
@@ -45,11 +58,12 @@ const OrderConfirm = ({ t }: Props): (JSX.Element | null) => {
       </Title>
 
       <div className="box" dangerouslySetInnerHTML={{
-        __html: t(`order_confirm.content.${ type}`, { order: `<strong>${ hash }</strong>` })
+        __html: t(`order_confirm.content.${ type}`, { order: `<strong>${ escapeHtml(String(hash ?? '')) }</strong>` })
       }} />
 
       <>
         { (type === 'cancelled' && message !== '') && <Reason message={ message } t={ t } /> }
+        { (type === 'purchased' && hash) && <Telegram hash={ hash } t={ t } /> }
       </>
 
       <Actions>

package/Telegram/Telegram.tsx

@@ -0,0 +1,43 @@
+import { TFunction } from 'i18next';
+import { Button } from '@autobusal/common';
+import { useGetOrderTelegramStatus } from '../services';
+import { Container } from './styles';
+
+interface Props {
+  hash: string
+  t: TFunction<'common'>
+}
+
+// Edited: Ferjolt Ozuni - Date: 2026-07-25
+// Mirrors magus's account-level AccountTelegram.tsx, but order-scoped: a
+// guest checkout has no account to bind against, so this reflects the
+// order_addons row's own pending-token/chat_id state instead (see
+// obtapi's Orders\AddonsController::telegram()). Renders nothing if the
+// Telegram addon wasn't purchased on this order, or once bound - the
+// binding is a one-time step, not something to keep displaying.
+const Telegram = ({ hash, t }: Props): (JSX.Element | null) => {
+  const { data, isFetching } = useGetOrderTelegramStatus(hash);
+
+  if (isFetching || !data?.purchased || data.bound) {
+    return null;
+  }
+
+  if (!data.link) {
+    return null;
+  }
+
+  return (
+    <Container className="box">
+      <p>{ t('order_confirm.telegram.instructions') }</p>
+
+      <a href={ data.link } target="_blank" rel="noreferrer">
+        <Button
+          type="button"
+          text={ t('order_confirm.telegram.connect') }
+        />
+      </a>
+    </Container>
+  );
+};
+
+export default Telegram;

package/Telegram/styles.ts

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  margin-top: 15px;
+  text-align: center;
+
+  p {
+    margin-bottom: 10px;
+  }
+`;

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@autobusal/order-confirm",
-  "version": "1.0.0",
+  "version": "1.1.0",
+  "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"
 }

package/services.ts

@@ -0,0 +1,37 @@
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+
+export interface OrderTelegramStatus {
+  purchased: boolean
+  available?: boolean
+  bound?: boolean
+  link?: string
+}
+
+// Edited: Ferjolt Ozuni - Date: 2026-07-25
+// Order-scoped equivalent of magus's Account/Telegram/services.ts
+// useGetTelegramStatus - a guest checkout has no account to bind against,
+// so the pending token/chat_id live on the order_addons row instead (see
+// obtapi's Orders\AddonsController::telegram()).
+export const useGetOrderTelegramStatus = (hash: string): UseQueryResult<OrderTelegramStatus> => (
+  useQuery({
+    queryKey: ['order-telegram-status', hash],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/orders/telegram/status', {
+          params: { hash }
+        })
+        .then(response => (
+          response.data
+        ))
+    ),
+    // Poll while unbound, so "bound" flips true right after the buyer taps
+    // the deep link and messages the bot - no manual refresh needed.
+    // refetchIntervalInBackground is required: tapping the link backgrounds
+    // this tab (switching to the Telegram app/site), which is exactly when
+    // the poll needs to keep running - react-query pauses refetchInterval
+    // on a hidden tab by default.
+    refetchInterval: (query) => (query.state.data?.bound ? false : 4000),
+    refetchIntervalInBackground: true
+  })
+);