@autobusal/order-confirm 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.2.1
+
+### Fixed
+
+- **The cancelled-payment page tells the truth.** It used to say "your order has been cancelled" while the reservation kept holding its seats for two more hours - and the gateway's failUrl lands on the same page, so auto-cancelling would kill declined-card retries. New copy (payment not completed, nothing charged, reservation still held), a Try-again action, and a real "Release my reservation" button through the hash-authorised cancel endpoint. (Audit BOOK-11-b.)
+
 ## 1.2.0
 
 - Announces `purchase` on arrival, for a **purchased** order only — a reservation is not revenue and a cancelled attempt certainly is not. Cleared as it fires, so refreshing this page (a plain URL with the buyer's order number on it) cannot report the same sale twice.

package/OrderConfirm.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { TFunction } from 'i18next';
 import { useSearchParams, useParams, useNavigate, Navigate } from 'react-router-dom';
 import { AiOutlineCheck } from 'react-icons/ai';
@@ -9,6 +9,7 @@ import Reason from './Reason';
 import Telegram from './Telegram/Telegram';
 import { Title, Actions } from './styles';
 import { useUserStore } from '@autobusal/providers/stores/user';
+import { useReleaseOrder } from './services';
 import { flush } from '@autobusal/providers/Setup/commerce';
 
 interface Props {
@@ -39,6 +40,30 @@ const OrderConfirm = ({ t }: Props): (JSX.Element | null) => {
 
   const { data: UserData } = useUserStore();
 
+  /*
+   * Claude - 2026-08-22 (audit finding BOOK-11-b): this page is where the
+   * gateway's cancelUrl AND failUrl land, and it used to say "your order
+   * has been cancelled" while the reservation kept holding its seats for
+   * two more hours. Auto-cancelling here would be wrong too - a declined
+   * card lands on the same URL and the buyer may want to retry - so the
+   * copy now tells the truth (payment not completed, reservation still
+   * held) and the buyer chooses: retry through the order page, or release
+   * the hold for real with this.
+   */
+  const [ released, setReleased ] = useState<boolean>(false);
+
+  const { mutate: Release, isPending: releasing } = useReleaseOrder();
+
+  const onRelease = (): void => {
+    if (!hash) {
+      return;
+    }
+
+    Release({ hash }, {
+      onSuccess: () => setReleased(true)
+    });
+  };
+
   /**
    * Edited: Ferjolt Ozuni - Date: 2026-08-05
    *
@@ -107,7 +132,7 @@ const OrderConfirm = ({ t }: Props): (JSX.Element | null) => {
       </Title>
 
       <div className="box" dangerouslySetInnerHTML={{
-        __html: t(`order_confirm.content.${ type}`, { order: `<strong>${ escapeHtml(String(hash ?? '')) }</strong>` })
+        __html: t(`order_confirm.content.${ type === 'cancelled' && released ? 'released' : type }`, { order: `<strong>${ escapeHtml(String(hash ?? '')) }</strong>` })
       }} />
 
       <>
@@ -118,11 +143,22 @@ const OrderConfirm = ({ t }: Props): (JSX.Element | null) => {
       <Actions>
         <Button
           type="button"
-          text={ t('order_confirm.manage') }
+          text={ t(type === 'cancelled' ? 'order_confirm.retry' : 'order_confirm.manage') }
           noMargin
           onClick={ onManage }
         />
 
+        { (type === 'cancelled' && !released) && (
+          <Button
+            type="button"
+            subtype="delete"
+            text={ t('order_confirm.release') }
+            loading={ releasing }
+            noMargin
+            onClick={ onRelease }
+          />
+        ) }
+
         <Button
           type="button"
           subtype="secondary"

package/package.json

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

package/services.ts

@@ -1,4 +1,4 @@
-import { useQuery, UseQueryResult } from '@tanstack/react-query';
+import { useMutation, useQuery, UseMutationResult, UseQueryResult } from '@tanstack/react-query';
 import { apiClient } from '@autobusal/providers';
 
 export interface OrderTelegramStatus {
@@ -35,3 +35,20 @@ export const useGetOrderTelegramStatus = (hash: string): UseQueryResult<OrderTel
     refetchIntervalInBackground: true
   })
 );
+
+/*
+ * Claude - 2026-08-22 (audit finding BOOK-11-b): the "cancelled" return
+ * page used to claim the order was cancelled while the reservation kept
+ * holding its seats for two more hours. The page now tells the truth and
+ * offers this - the real cancellation, through the same endpoint the order
+ * page uses, hash-authorised so a guest checkout can release its own hold.
+ */
+export const useReleaseOrder = (): UseMutationResult<void, Error, { hash: string }, unknown> => (
+  useMutation({
+    mutationFn: async ({ hash }: { hash: string }) => {
+      await apiClient.delete('/api/orders/cancel', {
+        data: { order_hash: hash, note: 'payment_cancelled' }
+      });
+    }
+  })
+);