@autobusal/order-process 1.5.0 → 1.5.1

package/Content.tsx

@@ -5,6 +5,7 @@ import Stripe from './Stripe/Stripe';
 import Mollie from './Mollie/Mollie';
 import Raiffeisen from './Reiffeisen/Raiffeisen';
 import Nexi from './Nexi/Nexi';
+import Mgpay from './Mgpay/Mgpay';
 
 interface Props {
   type?: string
@@ -28,6 +29,8 @@ const Content = ({ type, hash, t }: Props): JSX.Element => {
 
     case 'nexi':
       return <Nexi hash={ hash } t={ t } />;
+    case 'mgpay':
+      return <Mgpay hash={ hash } t={ t } />;
 
     default:
       return <Standard type={ type } hash={ hash } t={ t } />;

package/Mgpay/Mgpay.tsx

@@ -0,0 +1,49 @@
+import { useEffect } from 'react';
+import { TFunction } from 'i18next';
+import { useNavigate } from 'react-router-dom';
+import { Inline } from '@autobusal/common';
+import { Container } from '../styles';
+import { useMakeMgpay } from '../services';
+
+interface Props {
+  hash?: string
+  t: TFunction<'common'>
+}
+
+/**
+ * The Magus Pay Hub - Claude, 2026-09-07.
+ *
+ * Same shape as Raiffeisen: one call to obtapi registers the order with the
+ * hub and answers with its pay_url; the browser goes there and comes back
+ * to /orders/purchased or /orders/cancelled, which are hints - the booking
+ * is marked paid only by the hub's signed notification to obtapi.
+ */
+const Mgpay = ({ hash, t }: Props): JSX.Element => {
+  const { data, isSuccess, isError, error } = useMakeMgpay(String(hash));
+
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (isSuccess) {
+      window.location.href = data.redirect;
+    }
+  }, [data, isSuccess]);
+
+  useEffect(() => {
+    if (isError) {
+      const message = (error as { response?: { data?: { message?: string } } })?.response?.data?.message;
+
+      const reason = message ?? t('order_process.error', { ns: 'common', defaultValue: 'We could not complete your payment. Please try again.' });
+
+      navigate(hash ? `/orders/cancelled/${ hash }?msg=${ encodeURIComponent(reason) }` : '/', { replace: true });
+    }
+  }, [isError, error, hash, navigate, t]);
+
+  return (
+    <Container>
+      <Inline text={ t('order_process.mgpay', { defaultValue: t('order_process.raiffeisen') }) } />
+    </Container>
+  );
+};
+
+export default Mgpay;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/order-process",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "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, NexiData } from './types';
+import { BKTData, StripeData, MollieData, RaiffeisenData, NexiData, MgpayData } from './types';
 
 /**
  * Starting a payment must happen EXACTLY ONCE per attempt.
@@ -116,4 +116,18 @@ export const useMakeNexi = (hash: string): UseQueryResult<NexiData> => (
         ))
     )
   })
-);
+);
+
+export const useMakeMgpay = (hash: string): UseQueryResult<MgpayData> => (
+  useQuery({
+    queryKey: ['process-payment-mgpay', { hash }],
+    ...ONCE,
+    queryFn: async () => (
+      await apiClient
+        .post('/api/payment/mgpay', { hash })
+        .then(response => (
+          response?.data ?? ''
+        ))
+    )
+  })
+);

package/types.ts

@@ -77,4 +77,8 @@ export interface RaiffeisenData {
 
 export interface NexiData {
   redirect: string
-}
+}
+
+export interface MgpayData {
+  redirect: string
+}