@autobusal/order-process 1.3.0 → 1.3.2

package/BKT/Bkt.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { TFunction } from 'i18next';
 import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
 import { Inline } from '@autobusal/common';
 import { Container } from '../styles';
 import { BKTFormData } from '../types';
@@ -16,7 +17,9 @@ const Bkt = ({ hash, t }: Props): JSX.Element => {
 
   const ref = useRef<HTMLFormElement>(null);
 
-  const { data, isLoading, isSuccess } = useMakeBkt(String(hash));
+  const { data, isLoading, isSuccess, isError } = useMakeBkt(String(hash));
+
+  const navigate = useNavigate();
 
   const onSubmit = (): void => {
     ref.current?.submit();
@@ -28,6 +31,18 @@ const Bkt = ({ hash, t }: Props): JSX.Element => {
     }
   }, [isSuccess, handleSubmit]);
 
+  // Edited: Ferjolt Ozuni - Date: 2026-07-18
+  // Bug: unlike the other 4 gateways, BKT never even reached an isSuccess
+  // state on failure (isLoading just stayed true), so this stuck on the
+  // loading text forever with no way out. Fix: navigate back so they can
+  // retry. Same fix as Raiffeisen/Stripe/Mollie/Nexi (see Raiffeisen.tsx for
+  // the full explanation, including why there's no toast() call here).
+  useEffect(() => {
+    if (isError) {
+      navigate(-1);
+    }
+  }, [isError, navigate]);
+
   if (isLoading) {
     return (
       <Container>

package/CHANGELOG.md

@@ -0,0 +1,30 @@
+# Changelog
+
+All notable changes to `@autobusal/order-process` are documented here. This
+project adheres to [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and
+[Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.3.2] - 2026-07-19
+
+### Fixed
+
+- **Payment-initiation failures no longer strand the user on a spinner.** The
+  five gateway components — `Reiffeisen/Raiffeisen.tsx`, `Stripe/Stripe.tsx`,
+  `Mollie/Mollie.tsx`, `Nexi/Nexi.tsx`, and `BKT/Bkt.tsx` — previously only
+  reacted to `isSuccess`. When the `useMake*` payment-initiation request
+  failed (gateway auth failure, no funds, etc.), the component sat on
+  "Preparing to take you to the payment portal…" indefinitely with no feedback
+  and no way out except leaving the page. Each now also consumes `isError`
+  from its query and, in an effect, calls `navigate(-1)` to return the user so
+  they can retry. No local `toast()`/`error()` is raised on purpose: the
+  `@autobusal/providers` Axios response interceptor already surfaces one toast
+  per 422/500, and adding another here stacked a duplicate.
+- **BKT loading state could never resolve on failure (`BKT/Bkt.tsx`).** Unlike
+  the other four gateways, BKT never reached an `isSuccess` state on failure —
+  `isLoading` simply stayed `true` — so it was stuck on the loading text
+  forever. The new `isError` → `navigate(-1)` handling gives it the same exit
+  path as the others.
+
+Authored by Ferjolt Ozuni. Consolidated from the magus and alvavel whitelabel
+patch sets into canonical @autobusal source (eliminates per-repo patch-package
+divergence).

package/Content.tsx

@@ -4,6 +4,7 @@ import Bkt from './BKT/Bkt';
 import Stripe from './Stripe/Stripe';
 import Mollie from './Mollie/Mollie';
 import Raiffeisen from './Reiffeisen/Raiffeisen';
+import Nexi from './Nexi/Nexi';
 
 interface Props {
   type?: string
@@ -25,6 +26,9 @@ const Content = ({ type, hash, t }: Props): JSX.Element => {
     case 'raiffeisen':
       return <Raiffeisen hash={ hash } t={ t } />;
 
+    case 'nexi':
+      return <Nexi hash={ hash } t={ t } />;
+
     default:
       return <Standard type={ type } hash={ hash } t={ t } />;
   }

package/Mollie/Mollie.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { TFunction } from 'i18next';
+import { useNavigate } from 'react-router-dom';
 import { Inline } from '@autobusal/common';
 import { Container } from '../styles';
 import { useMakeMollie } from '../services';
@@ -10,7 +11,9 @@ interface Props {
 }
 
 const Mollie = ({ hash, t }: Props): JSX.Element => {
-  const { data, isSuccess } = useMakeMollie(String(hash));
+  const { data, isSuccess, isError } = useMakeMollie(String(hash));
+
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (isSuccess) {
@@ -18,6 +21,19 @@ const Mollie = ({ hash, t }: Props): JSX.Element => {
     }
   }, [data, isSuccess]);
 
+  // Edited: Ferjolt Ozuni - Date: 2026-07-18
+  // Bug: this only ever checked isSuccess - a failed payment-initiation
+  // request left the user staring at "Preparing to take you to the payment
+  // portal..." forever with no feedback at all. Fix: navigate back so they
+  // can retry. Same fix applied identically to Raiffeisen/Stripe/Nexi/Bkt
+  // (see Raiffeisen.tsx for the full explanation, including why there's no
+  // toast() call here).
+  useEffect(() => {
+    if (isError) {
+      navigate(-1);
+    }
+  }, [isError, navigate]);
+
   return (
     <Container>
       <Inline text={ t('order_process.mollie') } />

package/Nexi/Nexi.tsx

@@ -0,0 +1,44 @@
+import { useEffect } from 'react';
+import { TFunction } from 'i18next';
+import { useNavigate } from 'react-router-dom';
+import { Inline } from '@autobusal/common';
+import { Container } from '../styles';
+import { useMakeNexi } from '../services';
+
+interface Props {
+  hash?: string
+  t: TFunction<'common'>
+}
+
+const Nexi = ({ hash, t }: Props): JSX.Element => {
+  const { data, isSuccess, isError } = useMakeNexi(String(hash));
+
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (isSuccess) {
+      window.location.href = data.redirect;
+    }
+  }, [data, isSuccess]);
+
+  // Edited: Ferjolt Ozuni - Date: 2026-07-18
+  // Bug: this only ever checked isSuccess - a failed payment-initiation
+  // request left the user staring at "Preparing to take you to the payment
+  // portal..." forever with no feedback at all. Fix: navigate back so they
+  // can retry. Same fix applied identically to Raiffeisen/Stripe/Mollie/Bkt
+  // (see Raiffeisen.tsx for the full explanation, including why there's no
+  // toast() call here).
+  useEffect(() => {
+    if (isError) {
+      navigate(-1);
+    }
+  }, [isError, navigate]);
+
+  return (
+    <Container>
+      <Inline text={ t('order_process.nexi') } />
+    </Container>
+  );
+};
+
+export default Nexi;

package/Reiffeisen/Raiffeisen.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { TFunction } from 'i18next';
+import { useNavigate } from 'react-router-dom';
 import { Inline } from '@autobusal/common';
 import { Container } from '../styles';
 import { useMakeRaiffeisen } from '../services';
@@ -10,7 +11,9 @@ interface Props {
 }
 
 const Raiffeisen = ({ hash, t }: Props): JSX.Element => {
-  const { data, isSuccess } = useMakeRaiffeisen(String(hash));
+  const { data, isSuccess, isError } = useMakeRaiffeisen(String(hash));
+
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (isSuccess) {
@@ -18,6 +21,22 @@ const Raiffeisen = ({ hash, t }: Props): JSX.Element => {
     }
   }, [data, isSuccess]);
 
+  // Edited: Ferjolt Ozuni - Date: 2026-07-18
+  // Bug: this only ever checked isSuccess - a failed payment-initiation
+  // request (gateway auth failure, no funds, etc) left the user staring
+  // at "Preparing to take you to the payment portal..." forever with no
+  // feedback at all and no way out except leaving the page. Fix: navigate
+  // them back so they can retry. No toast() call here - apiClient's Axios
+  // response interceptor (@autobusal/providers/Queries/apiClient.ts)
+  // already shows one for every 422/500, and calling error() again here
+  // stacked a second, duplicate toast on top of it (caught in browser
+  // testing against the Raiffeisen sandbox).
+  useEffect(() => {
+    if (isError) {
+      navigate(-1);
+    }
+  }, [isError, navigate]);
+
   return (
     <Container>
       <Inline text={ t('order_process.raiffeisen') } />

package/Stripe/Stripe.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { TFunction } from 'i18next';
+import { useNavigate } from 'react-router-dom';
 import { Inline } from '@autobusal/common';
 import { Container } from '../styles';
 import { useMakeStripe } from '../services';
@@ -10,7 +11,9 @@ interface Props {
 }
 
 const Stripe = ({ hash, t }: Props): JSX.Element => {
-  const { data, isSuccess } = useMakeStripe(String(hash));
+  const { data, isSuccess, isError } = useMakeStripe(String(hash));
+
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (isSuccess) {
@@ -18,6 +21,19 @@ const Stripe = ({ hash, t }: Props): JSX.Element => {
     }
   }, [data, isSuccess]);
 
+  // Edited: Ferjolt Ozuni - Date: 2026-07-18
+  // Bug: this only ever checked isSuccess - a failed payment-initiation
+  // request left the user staring at "Preparing to take you to the payment
+  // portal..." forever with no feedback at all. Fix: navigate back so they
+  // can retry. Same fix applied identically to Raiffeisen/Mollie/Nexi/Bkt
+  // (see Raiffeisen.tsx for the full explanation, including why there's no
+  // toast() call here).
+  useEffect(() => {
+    if (isError) {
+      navigate(-1);
+    }
+  }, [isError, navigate]);
+
   return (
     <Container>
       <Inline text={ t('order_process.stripe') } />

package/package.json

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

package/services.ts

@@ -1,6 +1,6 @@
 import { useQuery, UseQueryResult } from '@tanstack/react-query';
 import { apiClient } from '@autobusal/providers';
-import { BKTData, StripeData, MollieData, RaiffeisenData } from './types';
+import { BKTData, StripeData, MollieData, RaiffeisenData, NexiData } from './types';
 
 export const useMakeStandard = (type: string, hash: string): UseQueryResult<string> => (
   useQuery({
@@ -68,4 +68,17 @@ export const useMakeRaiffeisen = (hash: string): UseQueryResult<RaiffeisenData>
         ))
     )
   })
+);
+
+export const useMakeNexi = (hash: string): UseQueryResult<NexiData> => (
+  useQuery({
+    queryKey: ['process-payment-nexi', { hash }],
+    queryFn: async () => (
+      await apiClient
+        .post('/api/payment/nexi', { hash })
+        .then(response => (
+          response?.data ?? ''
+        ))
+    )
+  })
 );

package/types.ts

@@ -72,4 +72,8 @@ export interface MollieData {
 
 export interface RaiffeisenData {
   redirect: string
+}
+
+export interface NexiData {
+  redirect: string
 }