funktionierender stand, purchasewizard noch nicht optimiert.

resources/js/pages/auth/LoginForm.tsx

@@ -1,109 +1,41 @@
-
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useForm } from '@inertiajs/react';
 import { useTranslation } from 'react-i18next';
-import { LoaderCircle } from 'lucide-react';
+import { LoaderCircle, Mail, Lock } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import InputError from '@/components/input-error';
 import TextLink from '@/components/text-link';
-import { Alert, AlertDescription } from '@/components/ui/alert';
 
 interface LoginFormProps {
-  onSuccess?: (payload: any) => void;
+  onSuccess?: (userData: any) => void;
   canResetPassword?: boolean;
 }
 
-const getCsrfToken = () =>
-  (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement | null)?.content ?? '';
-
-const parseJson = async (response: Response) => {
-  if (response.headers.get('Content-Type')?.includes('application/json')) {
-    const json = await response.json().catch(() => null);
-    if (json) return json;
-  }
-
-  const text = await response.text();
-  throw new Error(text || 'Invalid server response (unexpected end of data or non-JSON).');
-};
-
 export default function LoginForm({ onSuccess, canResetPassword = true }: LoginFormProps) {
+  const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
   const { t } = useTranslation('auth');
-  const csrfToken = useMemo(getCsrfToken, []);
 
-  const { data, setData, errors, setError, clearErrors, reset } = useForm({
-    login: '',
+  const { data, setData, post, processing, errors, clearErrors, reset } = useForm({
+    email: '',
     password: '',
     remember: false,
   });
 
-  const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
-  const [submitting, setSubmitting] = useState(false);
-  const [formError, setFormError] = useState<string | null>(null);
-
-  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
+  const submit = (e: React.FormEvent) => {
+    e.preventDefault();
     setHasTriedSubmit(true);
-    setSubmitting(true);
-    setFormError(null);
-    clearErrors();
-
-    try {
-      const response = await fetch('/purchase/auth/login', {
-        method: 'POST',
-        credentials: 'same-origin',
-        headers: {
-          'Content-Type': 'application/json',
-          Accept: 'application/json',
-          'X-CSRF-TOKEN': csrfToken,
-          'X-Requested-With': 'XMLHttpRequest',
-        },
-        body: JSON.stringify({
-          login: data.login,
-          password: data.password,
-          remember: data.remember,
-        }),
-      });
-
-      if (response.ok) {
-        const payload = await parseJson(response);
-        reset({ login: payload?.user?.email ?? data.login, password: '', remember: false });
-        setHasTriedSubmit(false);
+    post('/login', {
+      preserveScroll: true,
+      onSuccess: () => {
         if (onSuccess) {
-          onSuccess(payload);
+          onSuccess({ user: { email: data.email } }); // Pass basic user info; full user from props in parent
         }
-        return;
-      }
-
-      if (response.status === 422) {
-        const body = await parseJson(response);
-        const validationErrors = body.errors ?? {};
-        let fallbackMessage: string | null = body.message ?? null;
-
-        Object.entries(validationErrors as Record<string, string | string[]>).forEach(([key, value]) => {
-          const message = Array.isArray(value) ? value[0] : value;
-          if (typeof message === 'string') {
-            setError(key as keyof typeof data, message);
-            if (!fallbackMessage) {
-              fallbackMessage = message;
-            }
-          }
-        });
-
-        if (fallbackMessage) {
-          setFormError(fallbackMessage);
-        }
-        return;
-      }
-
-      setFormError(t('login.generic_error', { defaultValue: 'Login failed. Please try again.' }));
-    } catch (error) {
-      setFormError(t('login.generic_error', { defaultValue: 'Login failed. Please try again.' }));
-    } finally {
-      setSubmitting(false);
-    }
+        reset();
+      },
+    });
   };
 
   useEffect(() => {
@@ -125,27 +57,26 @@ export default function LoginForm({ onSuccess, canResetPassword = true }: LoginF
   }, [errors, hasTriedSubmit]);
 
   return (
-    <form className="flex flex-col gap-6" onSubmit={handleSubmit} noValidate>
+    <div className="flex flex-col gap-6">
       <div className="grid gap-6">
         <div className="grid gap-2">
-          <Label htmlFor="login">{t('login.email')}</Label>
+          <Label htmlFor="email">{t('login.email')}</Label>
           <Input
-            id="login"
-            type="text"
-            name="login"
-            autoComplete="username"
+            id="email"
+            type="email"
+            name="email"
             required
             autoFocus
             placeholder={t('login.email_placeholder')}
-            value={data.login}
-            onChange={(event) => {
-              setData('login', event.target.value);
-              if (errors.login) {
-                clearErrors('login');
+            value={data.email}
+            onChange={(e) => {
+              setData('email', e.target.value);
+              if (errors.email) {
+                clearErrors('email');
               }
             }}
           />
-          <InputError message={errors.login} />
+          <InputError message={errors.email} />
         </div>
 
         <div className="grid gap-2">
@@ -161,12 +92,11 @@ export default function LoginForm({ onSuccess, canResetPassword = true }: LoginF
             id="password"
             type="password"
             name="password"
-            autoComplete="current-password"
             required
             placeholder={t('login.password_placeholder')}
             value={data.password}
-            onChange={(event) => {
-              setData('password', event.target.value);
+            onChange={(e) => {
+              setData('password', e.target.value);
               if (errors.password) {
                 clearErrors('password');
               }
@@ -185,19 +115,19 @@ export default function LoginForm({ onSuccess, canResetPassword = true }: LoginF
           <Label htmlFor="remember">{t('login.remember')}</Label>
         </div>
 
-        <Button type="submit" className="w-full" disabled={submitting}>
-          {submitting && <LoaderCircle className="h-4 w-4 animate-spin mr-2" />}
+        <Button type="button" onClick={submit} className="w-full" disabled={processing}>
+          {processing && <LoaderCircle className="h-4 w-4 animate-spin mr-2" />}
           {t('login.submit')}
         </Button>
       </div>
 
-      {(formError || Object.keys(errors).length > 0) && (
-        <Alert variant="destructive">
-          <AlertDescription>
-            {formError || Object.values(errors).join(' ')}
-          </AlertDescription>
-        </Alert>
+      {Object.keys(errors).length > 0 && (
+        <div className="p-4 bg-red-50 border border-red-200 rounded-md">
+          <p className="text-sm text-red-800">
+            {Object.values(errors).join(' ')}
+          </p>
+        </div>
       )}
-    </form>
+    </div>
   );
-}
+}

resources/js/pages/auth/RegisterForm.tsx

@@ -1,25 +1,21 @@
-
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useForm } from '@inertiajs/react';
 import { useTranslation } from 'react-i18next';
 import { LoaderCircle, User, Mail, Phone, Lock, MapPin } from 'lucide-react';
-import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/components/ui/dialog';
-import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Dialog, DialogContent, DialogTitle, DialogDescription } from '@/components/ui/dialog';
 
 interface RegisterFormProps {
   packageId?: number;
-  onSuccess?: (payload: any) => void;
+  onSuccess?: (userData: any) => void;
   privacyHtml: string;
 }
 
-const getCsrfToken = () =>
-  (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement | null)?.content ?? '';
-
 export default function RegisterForm({ packageId, onSuccess, privacyHtml }: RegisterFormProps) {
+  const [privacyOpen, setPrivacyOpen] = useState(false);
+  const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
   const { t } = useTranslation(['auth', 'common']);
-  const csrfToken = useMemo(getCsrfToken, []);
 
-  const { data, setData, errors, setError, clearErrors, reset } = useForm({
+  const { data, setData, post, processing, errors, clearErrors, reset } = useForm({
     username: '',
     email: '',
     password: '',
@@ -29,17 +25,22 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
     address: '',
     phone: '',
     privacy_consent: false,
-    package_id: packageId ?? null,
+    package_id: packageId || null,
   });
 
-  const [privacyOpen, setPrivacyOpen] = useState(false);
-  const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
-  const [submitting, setSubmitting] = useState(false);
-  const [formError, setFormError] = useState<string | null>(null);
-
-  useEffect(() => {
-    setData('package_id', packageId ?? null);
-  }, [packageId]);
+  const submit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setHasTriedSubmit(true);
+    post('/register', {
+      preserveScroll: true,
+      onSuccess: (page) => {
+        if (onSuccess) {
+          onSuccess((page as any).props.auth.user);
+        }
+        reset();
+      },
+    });
+  };
 
   useEffect(() => {
     if (!hasTriedSubmit) {
@@ -60,91 +61,8 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
     }
   }, [errors, hasTriedSubmit]);
 
-  const parseJson = async (response: Response) => {
-    if (response.headers.get('Content-Type')?.includes('application/json')) {
-      const json = await response.json().catch(() => null);
-      if (json) return json;
-    }
-  
-    const text = await response.text();
-    throw new Error(text || 'Invalid server response (unexpected end of data or non-JSON).');
-  };
-  
-  const submit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    setHasTriedSubmit(true);
-    setSubmitting(true);
-    setFormError(null);
-    clearErrors();
-  
-    try {
-      const response = await fetch('/purchase/auth/register', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Accept: 'application/json',
-          'X-CSRF-TOKEN': csrfToken,
-          'X-Requested-With': 'XMLHttpRequest',
-        },
-        body: JSON.stringify({
-          ...data,
-          privacy_consent: Boolean(data.privacy_consent),
-        }),
-      });
-  
-      if (response.ok) {
-        const payload = await parseJson(response);
-        reset({
-          username: '',
-          email: '',
-          password: '',
-          password_confirmation: '',
-          first_name: '',
-          last_name: '',
-          address: '',
-          phone: '',
-          privacy_consent: false,
-          package_id: packageId ?? null,
-        });
-        setHasTriedSubmit(false);
-        if (onSuccess) {
-          onSuccess(payload);
-        }
-        return;
-      }
-  
-      if (response.status === 422) {
-        const body = await parseJson(response);
-        const validationErrors = body.errors ?? {};
-        let fallbackMessage: string | null = body.message ?? null;
-  
-        Object.entries(validationErrors).forEach(([key, value]) => {
-          const message = Array.isArray(value) ? value[0] : value;
-          if (typeof message === 'string') {
-            setError(key, message);
-            if (!fallbackMessage) {
-              fallbackMessage = message;
-            }
-          }
-        });
-  
-        if (fallbackMessage) {
-          setFormError(fallbackMessage);
-        }
-        return;
-      }
-  
-      setFormError(t('register.generic_error', { defaultValue: 'Registrierung fehlgeschlagen. Bitte versuche es erneut.' }));
-    } catch (error) {
-      const message = (error as Error).message || t('register.generic_error', { defaultValue: 'Registrierung fehlgeschlagen. Bitte versuche es erneut.' });
-      setFormError(message);
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
   return (
-    <form className="space-y-6" onSubmit={submit} noValidate>
+    <div className="space-y-6">
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
         <div className="md:col-span-1">
           <label htmlFor="first_name" className="block text-sm font-medium text-gray-700 mb-1">
@@ -158,9 +76,9 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
               type="text"
               required
               value={data.first_name}
-              onChange={(event) => {
-                setData('first_name', event.target.value);
-                if (errors.first_name) {
+              onChange={(e) => {
+                setData('first_name', e.target.value);
+                if (e.target.value.trim() && errors.first_name) {
                   clearErrors('first_name');
                 }
               }}
@@ -183,9 +101,9 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
               type="text"
               required
               value={data.last_name}
-              onChange={(event) => {
-                setData('last_name', event.target.value);
-                if (errors.last_name) {
+              onChange={(e) => {
+                setData('last_name', e.target.value);
+                if (e.target.value.trim() && errors.last_name) {
                   clearErrors('last_name');
                 }
               }}
@@ -208,9 +126,9 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
               type="email"
               required
               value={data.email}
-              onChange={(event) => {
-                setData('email', event.target.value);
-                if (errors.email) {
+              onChange={(e) => {
+                setData('email', e.target.value);
+                if (e.target.value.trim() && errors.email) {
                   clearErrors('email');
                 }
               }}
@@ -221,29 +139,29 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
           {errors.email && <p className="text-sm text-red-600 mt-1">{errors.email}</p>}
         </div>
 
-        <div className="md:col-span-1">
-          <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-1">
-            {t('register.username')} {t('common:required')}
+        <div className="md:col-span-2">
+          <label htmlFor="address" className="block text-sm font-medium text-gray-700 mb-1">
+            {t('register.address')} {t('common:required')}
           </label>
           <div className="relative">
-            <User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
+            <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
             <input
-              id="username"
-              name="username"
+              id="address"
+              name="address"
               type="text"
               required
-              value={data.username}
-              onChange={(event) => {
-                setData('username', event.target.value);
-                if (errors.username) {
-                  clearErrors('username');
+              value={data.address}
+              onChange={(e) => {
+                setData('address', e.target.value);
+                if (e.target.value.trim() && errors.address) {
+                  clearErrors('address');
                 }
               }}
-              className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.username ? 'border-red-500' : 'border-gray-300'}`}
-              placeholder={t('register.username_placeholder')}
+              className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.address ? 'border-red-500' : 'border-gray-300'}`}
+              placeholder={t('register.address_placeholder')}
             />
           </div>
-          {errors.username && <p className="text-sm text-red-600 mt-1">{errors.username}</p>}
+          {errors.address && <p className="text-sm text-red-600 mt-1">{errors.address}</p>}
         </div>
 
         <div className="md:col-span-1">
@@ -258,9 +176,9 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
               type="tel"
               required
               value={data.phone}
-              onChange={(event) => {
-                setData('phone', event.target.value);
-                if (errors.phone) {
+              onChange={(e) => {
+                setData('phone', e.target.value);
+                if (e.target.value.trim() && errors.phone) {
                   clearErrors('phone');
                 }
               }}
@@ -271,28 +189,29 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
           {errors.phone && <p className="text-sm text-red-600 mt-1">{errors.phone}</p>}
         </div>
 
-        <div className="md:col-span-2">
-          <label htmlFor="address" className="block text-sm font-medium text-gray-700 mb-1">
-            {t('register.address')} {t('common:required')}
+        <div className="md:col-span-1">
+          <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-1">
+            {t('register.username')} {t('common:required')}
           </label>
           <div className="relative">
-            <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
-            <textarea
-              id="address"
-              name="address"
+            <User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
+            <input
+              id="username"
+              name="username"
+              type="text"
               required
-              value={data.address}
-              onChange={(event) => {
-                setData('address', event.target.value);
-                if (errors.address) {
-                  clearErrors('address');
+              value={data.username}
+              onChange={(e) => {
+                setData('username', e.target.value);
+                if (e.target.value.trim() && errors.username) {
+                  clearErrors('username');
                 }
               }}
-              className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.address ? 'border-red-500' : 'border-gray-300'}`}
-              placeholder={t('register.address_placeholder')}
+              className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.username ? 'border-red-500' : 'border-gray-300'}`}
+              placeholder={t('register.username_placeholder')}
             />
           </div>
-          {errors.address && <p className="text-sm text-red-600 mt-1">{errors.address}</p>}
+          {errors.username && <p className="text-sm text-red-600 mt-1">{errors.username}</p>}
         </div>
 
         <div className="md:col-span-1">
@@ -307,12 +226,12 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
               type="password"
               required
               value={data.password}
-              onChange={(event) => {
-                setData('password', event.target.value);
-                if (errors.password) {
+              onChange={(e) => {
+                setData('password', e.target.value);
+                if (e.target.value.trim() && errors.password) {
                   clearErrors('password');
                 }
-                if (data.password_confirmation && event.target.value === data.password_confirmation) {
+                if (data.password_confirmation && e.target.value === data.password_confirmation) {
                   clearErrors('password_confirmation');
                 }
               }}
@@ -335,12 +254,12 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
               type="password"
               required
               value={data.password_confirmation}
-              onChange={(event) => {
-                setData('password_confirmation', event.target.value);
-                if (errors.password_confirmation) {
+              onChange={(e) => {
+                setData('password_confirmation', e.target.value);
+                if (e.target.value.trim() && errors.password_confirmation) {
                   clearErrors('password_confirmation');
                 }
-                if (data.password && event.target.value === data.password) {
+                if (data.password && e.target.value === data.password) {
                   clearErrors('password_confirmation');
                 }
               }}
@@ -358,9 +277,9 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
             type="checkbox"
             required
             checked={data.privacy_consent}
-            onChange={(event) => {
-              setData('privacy_consent', event.target.checked);
-              if (event.target.checked && errors.privacy_consent) {
+            onChange={(e) => {
+              setData('privacy_consent', e.target.checked);
+              if (e.target.checked && errors.privacy_consent) {
                 clearErrors('privacy_consent');
               }
             }}
@@ -380,33 +299,38 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
         </div>
       </div>
 
-      {(formError || Object.keys(errors).length > 0) && (
-        <Alert>
-          {formError && <AlertDescription>{formError}</AlertDescription>}
-          {Object.keys(errors).length > 0 && !formError && (
-            <AlertDescription>{Object.values(errors).join(' ')}</AlertDescription>
-          )}
-        </Alert>
+      {Object.keys(errors).length > 0 && (
+        <div className="p-4 bg-red-50 border border-red-200 rounded-md mb-6">
+          <h4 className="text-sm font-medium text-red-800 mb-2">{t('register.errors_title')}</h4>
+          <ul className="text-sm text-red-800 space-y-1">
+            {Object.entries(errors).map(([key, value]) => (
+              <li key={key} className="flex items-start">
+                <span className="font-medium">{t(`register.errors.${key}`)}:</span> {value}
+              </li>
+            ))}
+          </ul>
+        </div>
       )}
 
       <button
-        type="submit"
-        disabled={submitting}
+        type="button"
+        onClick={submit}
+        disabled={processing}
         className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-[#FFB6C1] hover:bg-[#FF69B4] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#FFB6C1] transition duration-300 disabled:opacity-50"
       >
-        {submitting && <LoaderCircle className="h-4 w-4 animate-spin mr-2" />}
+        {processing && <LoaderCircle className="h-4 w-4 animate-spin mr-2" />}
         {t('register.submit')}
       </button>
 
       <Dialog open={privacyOpen} onOpenChange={setPrivacyOpen}>
         <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto p-0">
-          <DialogTitle className="sr-only">Datenschutzerkl<EFBFBD>rung</DialogTitle>
-          <DialogDescription className="sr-only">Lesen Sie unsere Datenschutzerkl<EFBFBD>rung.</DialogDescription>
+          <DialogTitle className="sr-only">Datenschutzerklärung</DialogTitle>
+          <DialogDescription className="sr-only">Lesen Sie unsere Datenschutzerklärung.</DialogDescription>
           <div className="p-6">
             <div dangerouslySetInnerHTML={{ __html: privacyHtml }} />
           </div>
         </DialogContent>
       </Dialog>
-    </form>
+    </div>
   );
-}
+}

resources/js/pages/marketing/PaymentForm.tsx

@@ -1,450 +1,112 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Elements, CardElement, useElements, useStripe } from '@stripe/react-stripe-js';
-import type { Stripe as StripeInstance } from '@stripe/stripe-js';
+import React from 'react';
+import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';
+import { useForm } from '@inertiajs/react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Loader2 } from 'lucide-react';
-
- type StripePromise = Promise<StripeInstance | null>;
+import { Alert, AlertDescription } from '@/components/ui/alert';
 
 interface PaymentFormProps {
   packageId: number;
-  packageName: string;
-  price: number;
-  currency?: string;
-  stripePromise: StripePromise;
-  paypalClientId?: string | null;
-  onSuccess: () => void;
+  onSuccess?: () => void;
 }
 
-declare global {
-  interface Window {
-    paypal?: any;
-  }
-}
-
-const formatCurrency = (value: number, currency = 'EUR') =>
-  new Intl.NumberFormat('de-DE', {
-    style: 'currency',
-    currency,
-  }).format(value);
-
-const getCsrfToken = () =>
-  (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement | null)?.content ?? '';
-
-async function postJson<T>(url: string, body: unknown, csrfToken: string): Promise<T> {
-  const response = await fetch(url, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      'Accept': 'application/json',
-      'X-CSRF-TOKEN': csrfToken,
-    },
-    body: JSON.stringify(body),
-  });
-
-  if (response.status === 204) {
-    return {} as T;
-  }
-
-  const data = await response.json().catch(() => ({}));
-
-  if (!response.ok) {
-    const message = (data as { message?: string; error?: string }).message ?? (data as { message?: string; error?: string }).error ?? 'Request failed.';
-    throw new Error(message);
-  }
-
-  return data as T;
-}
-
-export default function PaymentForm({
-  packageId,
-  packageName,
-  price,
-  currency = 'EUR',
-  stripePromise,
-  paypalClientId,
-  onSuccess,
-}: PaymentFormProps) {
-  const { t } = useTranslation('marketing');
-  const csrfToken = useMemo(getCsrfToken, []);
-  const [provider, setProvider] = useState<'stripe' | 'paypal'>('stripe');
-  const [statusMessage, setStatusMessage] = useState<string | null>(null);
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const [freeStatus, setFreeStatus] = useState<'idle' | 'loading' | 'done' | 'error'>('idle');
-
-  useEffect(() => {
-    setErrorMessage(null);
-    setStatusMessage(null);
-  }, [provider]);
-
-  useEffect(() => {
-    if (price === 0 && freeStatus === 'idle') {
-      const assignFree = async () => {
-        try {
-          setFreeStatus('loading');
-          await postJson<{ status: string }>('/purchase/free', { package_id: packageId }, csrfToken);
-          setFreeStatus('done');
-          setStatusMessage(
-            t('payment.free_assigned', {
-              defaultValue: 'Kostenloses Paket wurde zugewiesen.',
-              package: packageName,
-            })
-          );
-          onSuccess();
-        } catch (error) {
-          setFreeStatus('error');
-          setErrorMessage((error as Error).message ?? 'Free package assignment failed.');
-        }
-      };
-
-      assignFree();
-    }
-  }, [csrfToken, freeStatus, onSuccess, packageId, packageName, price, t]);
-
-  if (price === 0) {
-    return (
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('payment.title', { defaultValue: 'Zahlung' })}</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          {freeStatus === 'loading' && (
-            <div className="flex items-center space-x-2 text-sm text-gray-600">
-              <Loader2 className="h-4 w-4 animate-spin" />
-              <span>{t('payment.processing_free', { defaultValue: 'Paket wird freigeschaltet <20>' })}</span>
-            </div>
-          )}
-          {statusMessage && (
-            <Alert variant="success">
-              <AlertDescription>{statusMessage}</AlertDescription>
-            </Alert>
-          )}
-          {errorMessage && (
-            <Alert variant="destructive">
-              <AlertDescription>{errorMessage}</AlertDescription>
-            </Alert>
-          )}
-        </CardContent>
-      </Card>
-    );
-  }
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t('payment.title', { defaultValue: 'Zahlung' })}</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-6">
-        <div className="flex items-center justify-between flex-wrap gap-3">
-          <div>
-            <p className="text-sm text-gray-500">{t('payment.total_due', { defaultValue: 'Gesamtbetrag' })}</p>
-            <p className="text-lg font-semibold">{formatCurrency(price, currency)}</p>
-          </div>
-          <div className="inline-flex rounded-md shadow-sm" role="group">
-            <Button
-              type="button"
-              variant={provider === 'stripe' ? 'default' : 'outline'}
-              onClick={() => setProvider('stripe')}
-            >
-              Stripe
-            </Button>
-            <Button
-              type="button"
-              variant={provider === 'paypal' ? 'default' : 'outline'}
-              onClick={() => setProvider('paypal')}
-            >
-              PayPal
-            </Button>
-          </div>
-        </div>
-
-        {provider === 'stripe' ? (
-          <Elements stripe={stripePromise} options={{ appearance: { theme: 'stripe' } }}>
-            <StripeCardForm
-              packageId={packageId}
-              csrfToken={csrfToken}
-              amountLabel={formatCurrency(price, currency)}
-              onSuccess={() => {
-                setStatusMessage(t('payment.success_stripe', { defaultValue: 'Stripe-Zahlung erfolgreich.' }));
-                onSuccess();
-              }}
-              onError={(message) => setErrorMessage(message)}
-            />
-          </Elements>
-        ) : (
-          <PayPalSection
-            packageId={packageId}
-            amount={price}
-            currency={currency}
-            clientId={paypalClientId}
-            csrfToken={csrfToken}
-            onSuccess={() => {
-              setStatusMessage(t('payment.success_paypal', { defaultValue: 'PayPal-Zahlung erfolgreich.' }));
-              onSuccess();
-            }}
-            onError={(message) => setErrorMessage(message)}
-          />
-        )}
-
-        {statusMessage && (
-          <Alert variant="success">
-            <AlertDescription>{statusMessage}</AlertDescription>
-          </Alert>
-        )}
-
-        {errorMessage && (
-          <Alert variant="destructive">
-            <AlertDescription>{errorMessage}</AlertDescription>
-          </Alert>
-        )}
-      </CardContent>
-    </Card>
-  );
-}
-
-interface StripeCardFormProps {
-  packageId: number;
-  csrfToken: string;
-  amountLabel: string;
-  onSuccess: () => void;
-  onError: (message: string) => void;
-}
-
-const StripeCardForm: React.FC<StripeCardFormProps> = ({ packageId, csrfToken, amountLabel, onSuccess, onError }) => {
-  const { t } = useTranslation('marketing');
+export default function PaymentForm({ packageId, onSuccess }: PaymentFormProps) {
   const stripe = useStripe();
   const elements = useElements();
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [localError, setLocalError] = useState<string | null>(null);
+  const { t } = useTranslation('marketing');
+  const { data, setData, post, processing, errors, setError } = useForm({
+    package_id: packageId,
+    payment_method_id: '',
+  });
 
-  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
 
     if (!stripe || !elements) {
       return;
     }
 
     const cardElement = elements.getElement(CardElement);
+
     if (!cardElement) {
-      setLocalError('Card element not found.');
       return;
     }
 
-    try {
-      setIsSubmitting(true);
-      setLocalError(null);
-
-      const { client_secret: clientSecret, payment_intent_id: paymentIntentId } = await postJson<{
-        client_secret: string;
-        payment_intent_id: string;
-      }>('/purchase/stripe/intent', { package_id: packageId }, csrfToken);
-
-      const confirmation = await stripe.confirmCardPayment(clientSecret, {
-        payment_method: {
-          card: cardElement,
-        },
-      });
-
-      if (confirmation.error) {
-        throw new Error(confirmation.error.message || 'Card confirmation failed.');
-      }
-
-      if (confirmation.paymentIntent?.status !== 'succeeded') {
-        throw new Error('Stripe did not confirm the payment.');
-      }
-
-      await postJson('/purchase/stripe/complete', {
-        package_id: packageId,
-        payment_intent_id: confirmation.paymentIntent.id || paymentIntentId,
-      }, csrfToken);
-
-      onSuccess();
-    } catch (error) {
-      const message = (error as Error).message || 'Stripe payment failed.';
-      setLocalError(message);
-      onError(message);
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  return (
-    <form onSubmit={handleSubmit} className="space-y-4">
-      <div className="space-y-2">
-        <label htmlFor="card-element" className="text-sm font-medium">
-          {t('payment.card_details', { defaultValue: 'Kartendaten' })}
-        </label>
-        <div className="p-3 border border-gray-300 rounded-md">
-          <CardElement
-            options={{
-              hidePostalCode: true,
-              style: {
-                base: {
-                  fontSize: '16px',
-                  color: '#424770',
-                  '::placeholder': {
-                    color: '#aab7c4',
-                  },
-                },
-              },
-            }}
-          />
-        </div>
-        {localError && (
-          <Alert variant="destructive">
-            <AlertDescription>{localError}</AlertDescription>
-          </Alert>
-        )}
-      </div>
-      <Button type="submit" className="w-full" disabled={!stripe || isSubmitting}>
-        {isSubmitting && <Loader2 className="h-4 w-4 animate-spin mr-2" />}
-        {t('payment.submit', {
-          defaultValue: 'Jetzt bezahlen',
-          price: amountLabel,
-        })}
-      </Button>
-    </form>
-  );
-};
-
-interface PayPalSectionProps {
-  packageId: number;
-  amount: number;
-  currency: string;
-  clientId?: string | null;
-  csrfToken: string;
-  onSuccess: () => void;
-  onError: (message: string) => void;
-}
-
-const PayPalSection: React.FC<PayPalSectionProps> = ({
-  packageId,
-  amount,
-  currency,
-  clientId,
-  csrfToken,
-  onSuccess,
-  onError,
-}) => {
-  const { t } = useTranslation('marketing');
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const [isSdkReady, setIsSdkReady] = useState(false);
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [localError, setLocalError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (!clientId) {
-      const message = t('payment.paypal_missing_key', { defaultValue: 'PayPal ist derzeit nicht konfiguriert.' });
-      setLocalError(message);
-      onError(message);
-      return;
-    }
-
-    if (window.paypal) {
-      setIsSdkReady(true);
-      return;
-    }
-
-    const script = document.createElement('script');
-    script.src = `https://www.paypal.com/sdk/js?client-id=${clientId}&currency=${currency}&intent=capture&components=buttons`;
-    script.async = true;
-    script.onload = () => setIsSdkReady(true);
-    script.onerror = () => {
-      const message = t('payment.paypal_sdk_failed', { defaultValue: 'PayPal-SDK konnte nicht geladen werden.' });
-      setLocalError(message);
-      onError(message);
-    };
-    document.body.appendChild(script);
-
-    return () => {
-      script.remove();
-    };
-  }, [clientId, currency, onError, t]);
-
-  useEffect(() => {
-    if (!isSdkReady || !window.paypal || !containerRef.current) {
-      return;
-    }
-
-    const buttons = window.paypal.Buttons({
-      style: {
-        layout: 'vertical',
-        color: 'gold',
-        shape: 'rect',
-      },
-      createOrder: async () => {
-        try {
-          setIsProcessing(true);
-          const { order_id: orderId } = await postJson<{ order_id: string }>('/purchase/paypal/order', {
-            package_id: packageId,
-          }, csrfToken);
-          return orderId;
-        } catch (error) {
-          const message = (error as Error).message || 'PayPal order creation failed.';
-          setLocalError(message);
-          onError(message);
-          setIsProcessing(false);
-          throw error;
-        }
-      },
-      onApprove: async (data: { orderID: string }) => {
-        try {
-          await postJson('/purchase/paypal/capture', {
-            order_id: data.orderID,
-            package_id: packageId,
-          }, csrfToken);
-          setIsProcessing(false);
-          setLocalError(null);
-          onSuccess();
-        } catch (error) {
-          const message = (error as Error).message || 'PayPal capture failed.';
-          setLocalError(message);
-          onError(message);
-          setIsProcessing(false);
-        }
-      },
-      onError: (error: Error) => {
-        const message = error?.message || 'PayPal payment failed.';
-        setLocalError(message);
-        onError(message);
-        setIsProcessing(false);
-      },
+    const { error, paymentMethod } = await stripe.createPaymentMethod({
+      type: 'card',
+      card: cardElement,
     });
 
-    buttons.render(containerRef.current);
+    if (error) {
+      setError('payment', error.message || 'Payment failed');
+      return;
+    }
 
-    return () => {
-      try {
-        buttons.close();
-      } catch (error) {
-        // ignore close errors
-      }
-    };
-  }, [csrfToken, isSdkReady, onError, onSuccess, packageId]);
+    setData('payment_method_id', paymentMethod.id);
+
+    const { error: confirmError } = await stripe.confirmCardPayment('/api/purchase/payment-intent', {
+      payment_method: paymentMethod.id,
+    });
+
+    if (confirmError) {
+      setError('payment', confirmError.message || 'Payment confirmation failed');
+      return;
+    }
+
+    post('/api/purchase/complete', {
+      package_id: packageId,
+      preserveScroll: true,
+      onSuccess: () => {
+        if (onSuccess) {
+          onSuccess();
+        }
+      },
+      onError: (err) => {
+        setError('payment', err.payment || 'Payment error');
+      },
+    });
+  };
+
+  if (!stripe || !elements) {
+    return <div>Loading Stripe...</div>;
+  }
 
   return (
-    <div className="space-y-4">
-      <div ref={containerRef} />
-      {isProcessing && (
-        <div className="flex items-center space-x-2 text-sm text-gray-600">
-          <Loader2 className="h-4 w-4 animate-spin" />
-          <span>{t('payment.processing_paypal', { defaultValue: 'PayPal-Zahlung wird verarbeitet <20>' })}</span>
-        </div>
-      )}
-      {localError && (
-        <Alert variant="destructive">
-          <AlertDescription>{localError}</AlertDescription>
-        </Alert>
-      )}
-      <p className="text-xs text-gray-500">
-        {t('payment.paypal_hint', {
-          defaultValue: 'Der Betrag von {{amount}} wird bei PayPal angezeigt.',
-          amount: formatCurrency(amount, currency),
-        })}
-      </p>
-    </div>
+    <Card>
+      <CardHeader>
+        <CardTitle>{t('payment.title')}</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <label htmlFor="card-element" className="text-sm font-medium">
+              {t('payment.card_details')}
+            </label>
+            <div className="p-3 border border-gray-300 rounded-md">
+              <CardElement
+                options={{
+                  style: {
+                    base: {
+                      fontSize: '16px',
+                      color: '#424770',
+                      '::placeholder': {
+                        color: '#aab7c4',
+                      },
+                    },
+                  },
+                }}
+              />
+            </div>
+            {errors.payment && <Alert variant="destructive"><AlertDescription>{errors.payment}</AlertDescription></Alert>}
+          </div>
+          <Button type="submit" className="w-full" disabled={!stripe || processing}>
+            {processing ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : null}
+            {t('payment.submit', { price: 'XX €' })} {/* Replace with actual price */}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
   );
-};
+}

resources/js/pages/marketing/PurchaseWizard.tsx

@@ -1,17 +1,18 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Head, usePage } from '@inertiajs/react';
+import React, { useState, useEffect } from 'react';
+import { Head, useForm, usePage, router } from '@inertiajs/react';
 import { useTranslation } from 'react-i18next';
+import { Elements } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
-import { Steps } from '@/components/ui/steps';
+import { Steps } from '@/components/ui/steps'; // Assume Shadcn Steps component; add if needed via shadcn
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Progress } from '@/components/ui/progress';
-import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Loader2 } from 'lucide-react';
 import MarketingLayout from '@/layouts/marketing/MarketingLayout';
-import RegisterForm from '../auth/RegisterForm';
-import LoginForm from '../auth/LoginForm';
-import PaymentForm from './PaymentForm';
-import SuccessStep from './SuccessStep';
+import RegisterForm from '../auth/RegisterForm'; // Extract Register form to separate component
+import LoginForm from '../auth/LoginForm'; // Extract Login form
+import PaymentForm from './PaymentForm'; // New component for Stripe payment
+import SuccessStep from './SuccessStep'; // New component for success
 
 interface Package {
   id: number;
@@ -19,279 +20,144 @@ interface Package {
   description: string;
   price: number;
   features: string[];
+  // Add other fields as needed
 }
 
 interface PurchaseWizardProps {
   package: Package;
   stripePublishableKey: string;
-  paypalClientId?: string | null;
   privacyHtml: string;
 }
 
-type StepId = 'package' | 'auth' | 'payment' | 'success';
-
-interface WizardUser {
-  id: number;
-  email: string;
-  name?: string;
-  pending_purchase?: boolean;
-  email_verified?: boolean;
-}
-
-interface AuthSuccessPayload {
-  status: 'authenticated' | 'registered';
-  user?: WizardUser;
-  next_step?: StepId | 'verification';
-  needs_verification?: boolean;
-  package?: {
-    id: number;
-    name: string;
-    price: number;
-    type: string;
-  } | null;
-}
-
-const steps: Array<{ id: StepId; title: string; description: string }> = [
-  { id: 'package', title: 'Paket ausw<73>hlen', description: 'Best<73>tigen Sie Ihr gew<65>hltes Paket' },
+const steps = [
+  { id: 'package', title: 'Paket auswählen', description: 'Bestätigen Sie Ihr gewähltes Paket' },
   { id: 'auth', title: 'Anmelden oder Registrieren', description: 'Erstellen oder melden Sie sich an' },
   { id: 'payment', title: 'Zahlung', description: 'Sichern Sie Ihr Paket ab' },
   { id: 'success', title: 'Erfolg', description: 'Willkommen!' },
 ];
 
-export default function PurchaseWizard({
-  package: initialPackage,
-  stripePublishableKey,
-  paypalClientId,
-  privacyHtml,
-}: PurchaseWizardProps) {
+export default function PurchaseWizard({ package: initialPackage, stripePublishableKey, privacyHtml }: PurchaseWizardProps) {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [authType, setAuthType] = useState<'register' | 'login'>('register'); // Toggle for auth step
+  const [wizardData, setWizardData] = useState({ package: initialPackage, user: null });
   const { t } = useTranslation(['marketing', 'auth']);
   const { props } = usePage();
-  const serverUser = (props as any)?.auth?.user ?? null;
-
-  const [currentStepIndex, setCurrentStepIndex] = useState(0);
-  const [authType, setAuthType] = useState<'register' | 'login'>('register');
-  const [wizardUser, setWizardUser] = useState<WizardUser | null>(serverUser);
-  const [authNotice, setAuthNotice] = useState<string | null>(null);
-
-  const isAuthenticated = Boolean(wizardUser);
+  const { auth } = props as any;
 
   useEffect(() => {
-    if (serverUser) {
-      setWizardUser(serverUser);
+    if (auth.user) {
+      setIsAuthenticated(true);
+      setCurrentStep(2); // Skip to payment if already logged in
     }
-  }, [serverUser ? serverUser.id : null]);
+  }, [auth]);
 
-  const stripePromise = useMemo(() => loadStripe(stripePublishableKey), [stripePublishableKey]);
+  const stripePromise = loadStripe(stripePublishableKey);
 
-  const goToStep = useCallback((stepId: StepId) => {
-    const idx = steps.findIndex((step) => step.id === stepId);
-    if (idx >= 0) {
-      setCurrentStepIndex(idx);
+  const nextStep = () => {
+    if (currentStep < steps.length - 1) {
+      setCurrentStep((prev) => prev + 1);
     }
-  }, []);
-
-  const handleContinue = useCallback(() => {
-    let nextIndex = Math.min(currentStepIndex + 1, steps.length - 1);
-    if (steps[nextIndex]?.id === 'auth' && isAuthenticated) {
-      nextIndex = Math.min(nextIndex + 1, steps.length - 1);
-    }
-    setCurrentStepIndex(nextIndex);
-  }, [currentStepIndex, isAuthenticated]);
-
-  const handleBack = useCallback(() => {
-    let nextIndex = Math.max(currentStepIndex - 1, 0);
-    if (steps[nextIndex]?.id === 'auth' && isAuthenticated) {
-      nextIndex = Math.max(nextIndex - 1, 0);
-    }
-    setCurrentStepIndex(nextIndex);
-  }, [currentStepIndex, isAuthenticated]);
-
-  const handleAuthSuccess = useCallback(
-    (payload: AuthSuccessPayload) => {
-      if (payload?.user) {
-        setWizardUser(payload.user);
-      }
-
-      if (payload?.needs_verification) {
-        setAuthNotice(t('auth:verify_notice', { defaultValue: 'Bitte best<73>tige deine E-Mail-Adresse, um fortzufahren.' }));
-      } else {
-        setAuthNotice(null);
-      }
-
-      const next = payload?.next_step;
-      if (next === 'success') {
-        goToStep('success');
-      } else {
-        goToStep('payment');
-      }
-    },
-    [goToStep, t],
-  );
-
-  const handlePaymentSuccess = useCallback(() => {
-    goToStep('success');
-  }, [goToStep]);
-
-  const renderPackageStep = () => (
-    <Card>
-      <CardHeader>
-        <CardTitle>{initialPackage.name}</CardTitle>
-        <CardDescription>{initialPackage.description}</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <p>
-          {t('marketing:payment.price_label', { defaultValue: 'Preis' })}:
-          {' '}
-          {initialPackage.price === 0
-            ? t('marketing:payment.free', { defaultValue: 'Kostenlos' })
-            : new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(initialPackage.price)}
-        </p>
-        <ul className="list-disc pl-5 mt-4 space-y-1">
-          {initialPackage.features.map((feature, index) => (
-            <li key={index}>{feature}</li>
-          ))}
-        </ul>
-        <Button onClick={handleContinue} className="w-full mt-6">
-          {t('marketing:payment.continue', { defaultValue: 'Weiter' })}
-        </Button>
-      </CardContent>
-    </Card>
-  );
-
-  const renderAuthStep = () => {
-    if (isAuthenticated) {
-      return (
-        <Card>
-          <CardHeader>
-            <CardTitle>{t('auth:already_authenticated', { defaultValue: 'Bereits angemeldet' })}</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <Alert>
-              <AlertDescription>
-                {t('auth:logged_in_as', {
-                  defaultValue: 'Du bist angemeldet als {{email}}.',
-                  email: wizardUser?.email ?? wizardUser?.name ?? t('auth:user', { defaultValue: 'aktueller Nutzer' }),
-                })}
-              </AlertDescription>
-            </Alert>
-            {authNotice && (
-              <Alert>
-                <AlertDescription>{authNotice}</AlertDescription>
-              </Alert>
-            )}
-            <Button onClick={() => goToStep('payment')} className="w-full">
-              {t('auth:skip_to_payment', { defaultValue: 'Weiter zur Zahlung' })}
-            </Button>
-          </CardContent>
-        </Card>
-      );
-    }
-
-    return (
-      <div className="space-y-6">
-        <div className="flex justify-center gap-3">
-          <Button
-            variant={authType === 'register' ? 'default' : 'outline'}
-            onClick={() => {
-              setAuthType('register');
-              setAuthNotice(null);
-            }}
-          >
-            {t('auth:register.title', { defaultValue: 'Registrieren' })}
-          </Button>
-          <Button
-            variant={authType === 'login' ? 'default' : 'outline'}
-            onClick={() => {
-              setAuthType('login');
-              setAuthNotice(null);
-            }}
-          >
-            {t('auth:login.title', { defaultValue: 'Anmelden' })}
-          </Button>
-        </div>
-        {authNotice && (
-          <Alert>
-            <AlertDescription>{authNotice}</AlertDescription>
-          </Alert>
-        )}
-        {authType === 'register' ? (
-          <RegisterForm
-            packageId={initialPackage.id}
-            privacyHtml={privacyHtml}
-            onSuccess={handleAuthSuccess}
-          />
-        ) : (
-          <LoginForm onSuccess={handleAuthSuccess} />
-        )}
-      </div>
-    );
   };
 
-  const renderPaymentStep = () => (
-    <div className="space-y-4">
-      {isAuthenticated && (
-        <Alert>
-          <AlertDescription>
-            {t('marketing:payment.authenticated_notice', {
-              defaultValue: 'Angemeldet als {{email}}. Zahlungsmethode ausw<73>hlen.',
-              email: wizardUser?.email ?? wizardUser?.name ?? t('auth:user', { defaultValue: 'aktueller Nutzer' }),
-            })}
-          </AlertDescription>
-        </Alert>
-      )}
-      {authNotice && (
-        <Alert>
-          <AlertDescription>{authNotice}</AlertDescription>
-        </Alert>
-      )}
-      <PaymentForm
-        packageId={initialPackage.id}
-        packageName={initialPackage.name}
-        price={initialPackage.price}
-        currency="EUR"
-        stripePromise={stripePromise}
-        paypalClientId={paypalClientId}
-        onSuccess={handlePaymentSuccess}
-      />
-    </div>
-  );
+  const prevStep = () => {
+    if (currentStep > 0) {
+      setCurrentStep((prev) => prev - 1);
+    }
+  };
 
-  const renderSuccessStep = () => <SuccessStep package={initialPackage} />;
+  const handleAuthSuccess = (userData: any) => {
+    setWizardData((prev) => ({ ...prev, user: userData }));
+    setIsAuthenticated(true);
+    nextStep(); // Proceed to payment or success
+  };
 
-  const currentStep = steps[currentStepIndex];
+  const handlePaymentSuccess = () => {
+    // Call API to assign package
+    router.post('/api/purchase/complete', { package_id: initialPackage.id }, {
+      onSuccess: () => nextStep(),
+    });
+  };
 
   const renderStepContent = () => {
-    switch (currentStep.id) {
+    switch (steps[currentStep].id) {
       case 'package':
-        return renderPackageStep();
+        return (
+          <Card>
+            <CardHeader>
+              <CardTitle>{initialPackage.name}</CardTitle>
+              <CardDescription>{initialPackage.description}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <p>Preis: {initialPackage.price === 0 ? 'Kostenlos' : `${initialPackage.price} €`}</p>
+              <ul>
+                {initialPackage.features.map((feature, index) => (
+                  <li key={index}>{feature}</li>
+                ))}
+              </ul>
+              <Button onClick={nextStep} className="w-full mt-4">Weiter</Button>
+            </CardContent>
+          </Card>
+        );
       case 'auth':
-        return renderAuthStep();
+        return (
+          <div>
+            <div className="flex justify-center mb-4">
+              <Button
+                variant={authType === 'register' ? 'default' : 'outline'}
+                onClick={() => setAuthType('register')}
+              >
+                Registrieren
+              </Button>
+              <Button
+                variant={authType === 'login' ? 'default' : 'outline'}
+                onClick={() => setAuthType('login')}
+                className="ml-2"
+              >
+                Anmelden
+              </Button>
+            </div>
+            {authType === 'register' ? (
+              <RegisterForm onSuccess={handleAuthSuccess} packageId={initialPackage.id} privacyHtml={privacyHtml} />
+            ) : (
+              <LoginForm onSuccess={handleAuthSuccess} />
+            )}
+          </div>
+        );
       case 'payment':
-        return renderPaymentStep();
+        if (initialPackage.price === 0) {
+          // Skip for free, assign directly
+          router.post('/api/purchase/free', { package_id: initialPackage.id });
+          return <div>Free package assigned! Redirecting...</div>;
+        }
+        return (
+          <Elements stripe={stripePromise}>
+            <PaymentForm packageId={initialPackage.id} onSuccess={handlePaymentSuccess} />
+          </Elements>
+        );
       case 'success':
-        return renderSuccessStep();
+        return <SuccessStep package={initialPackage} />;
       default:
         return null;
     }
   };
 
   return (
-    <MarketingLayout title={t('marketing:payment.wizard_title', { defaultValue: 'Kauf-Wizard' })}>
-      <Head title={t('marketing:payment.wizard_title', { defaultValue: 'Kauf-Wizard' })} />
+    <MarketingLayout title="Kauf-Wizard">
+      <Head title="Kauf-Wizard" />
       <div className="min-h-screen bg-gray-50 py-12">
         <div className="max-w-2xl mx-auto px-4">
-          <Progress value={(currentStepIndex / (steps.length - 1)) * 100} className="mb-6" />
-          <Steps steps={steps} currentStep={currentStepIndex} />
+          <Progress value={(currentStep / (steps.length - 1)) * 100} className="mb-6" />
+          <Steps steps={steps} currentStep={currentStep} />
           {renderStepContent()}
-          {currentStep.id !== 'success' && currentStep.id !== 'package' && (
-            <div className="mt-6">
-              <Button variant="outline" onClick={handleBack}>
-                {t('marketing:payment.back', { defaultValue: 'Zur<75>ck' })}
-              </Button>
+          {currentStep > 0 && currentStep < 3 && (
+            <div className="flex justify-between mt-6">
+              <Button variant="outline" onClick={prevStep}>Zurück</Button>
+              {currentStep < 3 && <Button onClick={nextStep}>Weiter</Button>}
             </div>
           )}
         </div>
       </div>
     </MarketingLayout>
   );
-}
+}

resources/lang/de/auth.php

@@ -11,15 +11,8 @@ return [
         'password' => 'Passwort',
         'remember' => 'Angemeldet bleiben',
         'submit' => 'Anmelden',
-        'generic_error' => 'Anmeldung fehlgeschlagen. Bitte versuche es erneut.',
     ],
 
-    'already_authenticated' => 'Bereits angemeldet',
-    'logged_in_as' => 'Du bist angemeldet als :email.',
-    'skip_to_payment' => 'Weiter zur Zahlung',
-    'verify_notice' => 'Bitte bestätige deine E-Mail-Adresse, um fortzufahren.',
-    'user' => 'aktueller Nutzer',
-
     'register' => [
         'title' => 'Registrieren',
         'name' => 'Vollständiger Name',
@@ -33,11 +26,10 @@ return [
         'phone' => 'Telefonnummer',
         'privacy_consent' => 'Ich stimme der Datenschutzerklärung zu und akzeptiere die Verarbeitung meiner persönlichen Daten.',
         'submit' => 'Registrieren',
-        'generic_error' => 'Registrierung fehlgeschlagen. Bitte versuche es erneut.',
     ],
 
     'verification' => [
         'notice' => 'Bitte bestätigen Sie Ihre E-Mail-Adresse.',
         'resend' => 'E-Mail erneut senden',
     ],
-];
+];

resources/lang/de/marketing.php

@@ -51,24 +51,6 @@ return [
         'feature_custom_branding' => 'Benutzerdefiniertes Branding',
         'feature_advanced_reporting' => 'Erweiterte Berichterstattung',
     ],
-    'payment' => [
-        'wizard_title' => 'Kauf-Wizard',
-        'title' => 'Zahlung',
-        'price_label' => 'Preis',
-        'free' => 'Kostenlos',
-        'continue' => 'Weiter',
-        'back' => 'Zurück',
-        'total_due' => 'Gesamtbetrag',
-        'success_stripe' => 'Stripe-Zahlung erfolgreich.',
-        'success_paypal' => 'PayPal-Zahlung erfolgreich.',
-        'free_assigned' => 'Kostenloses Paket wurde zugewiesen.',
-        'processing_free' => 'Paket wird freigeschaltet ...',
-        'processing_paypal' => 'PayPal-Zahlung wird verarbeitet ...',
-        'paypal_hint' => 'Der Betrag von {{amount}} wird bei PayPal angezeigt.',
-        'paypal_missing_key' => 'PayPal ist derzeit nicht konfiguriert.',
-        'paypal_sdk_failed' => 'PayPal-SDK konnte nicht geladen werden.',
-        'authenticated_notice' => 'Angemeldet als {{email}}. Zahlungsmethode auswählen.',
-    ],
     'nav' => [
         'home' => 'Startseite',
         'how_it_works' => 'So funktioniert\'s',
@@ -157,10 +139,6 @@ return [
         'complete_purchase' => 'Kauf abschließen',
         'login_to_continue' => 'Melden Sie sich an, um fortzufahren.',
         'loading' => 'Laden...',
-        'message' => 'Danke! Paket :package ist bereit.',
-        'free_assigned' => 'Kostenloses Paket wurde aktiviert.',
-        'paid_assigned' => 'Zahlung erfolgreich verarbeitet.',
-        'go_to_dashboard' => 'Zum Dashboard',
     ],
     'register' => [
         'free' => 'Kostenlos',

resources/lang/en/auth.php

@@ -1,43 +0,0 @@
-<?php
-
-return [
-    'failed' => 'These credentials do not match our records.',
-    'password' => 'The provided password is incorrect.',
-    'throttle' => 'Too many login attempts. Please try again in :seconds seconds.',
-
-    'login' => [
-        'title' => 'Log in',
-        'username_or_email' => 'Username or email',
-        'password' => 'Password',
-        'remember' => 'Remember me',
-        'submit' => 'Log in',
-        'generic_error' => 'Login failed. Please try again.',
-    ],
-
-    'already_authenticated' => 'Already signed in',
-    'logged_in_as' => 'You are signed in as :email.',
-    'skip_to_payment' => 'Continue to payment',
-    'verify_notice' => 'Please verify your email address to continue.',
-    'user' => 'current user',
-
-    'register' => [
-        'title' => 'Register',
-        'name' => 'Full name',
-        'username' => 'Username',
-        'email' => 'Email address',
-        'password' => 'Password',
-        'password_confirmation' => 'Confirm password',
-        'first_name' => 'First name',
-        'last_name' => 'Last name',
-        'address' => 'Address',
-        'phone' => 'Phone number',
-        'privacy_consent' => 'I agree to the privacy policy and consent to the processing of my personal data.',
-        'submit' => 'Sign up',
-        'generic_error' => 'Registration failed. Please try again.',
-    ],
-
-    'verification' => [
-        'notice' => 'Please verify your email address.',
-        'resend' => 'Resend email',
-    ],
-];

resources/lang/en/marketing.php

@@ -51,24 +51,6 @@ return [
         'feature_custom_branding' => 'Custom Branding',
         'feature_advanced_reporting' => 'Advanced Reporting',
     ],
-    'payment' => [
-        'wizard_title' => 'Purchase Wizard',
-        'title' => 'Payment',
-        'price_label' => 'Price',
-        'free' => 'Free',
-        'continue' => 'Continue',
-        'back' => 'Back',
-        'total_due' => 'Total due',
-        'success_stripe' => 'Stripe payment successful.',
-        'success_paypal' => 'PayPal payment successful.',
-        'free_assigned' => 'Free package has been assigned.',
-        'processing_free' => 'Assigning free package ...',
-        'processing_paypal' => 'Processing PayPal payment ...',
-        'paypal_hint' => 'The amount of {{amount}} will be shown in PayPal.',
-        'paypal_missing_key' => 'PayPal is not configured right now.',
-        'paypal_sdk_failed' => 'Failed to load the PayPal SDK.',
-        'authenticated_notice' => 'Signed in as {{email}}. Choose your payment method.',
-    ],
     'nav' => [
         'home' => 'Home',
         'how_it_works' => 'How it works',
@@ -151,16 +133,12 @@ return [
     ],
     'success' => [
         'title' => 'Success',
-        'verify_email' => 'Verify email',
-        'check_email' => 'Check your inbox for the verification link.',
-        'redirecting' => 'Redirecting to the admin area...',
-        'complete_purchase' => 'Complete purchase',
-        'login_to_continue' => 'Please sign in to continue.',
+        'verify_email' => 'Verify Email',
+        'check_email' => 'Check your email for the verification link.',
+        'redirecting' => 'Redirecting to admin area...',
+        'complete_purchase' => 'Complete Purchase',
+        'login_to_continue' => 'Log in to continue.',
         'loading' => 'Loading...',
-        'message' => 'Thank you! Package :package is ready.',
-        'free_assigned' => 'Free package has been activated.',
-        'paid_assigned' => 'Payment processed successfully.',
-        'go_to_dashboard' => 'Go to dashboard',
     ],
     'register' => [
         'free' => 'Free',