- Tenant-Admin-PWA: Neues /event-admin/welcome Onboarding mit WelcomeHero, Packages-, Order-Summary- und Event-Setup-Pages, Zustandsspeicher, Routing-Guard und Dashboard-CTA für Erstnutzer; Filament-/admin-Login via Custom-View behoben.

- Brand/Theming: Marketing-Farb- und Typographievariablen in `resources/css/app.css` eingeführt, AdminLayout, Dashboardkarten und Onboarding-Komponenten entsprechend angepasst; Dokumentation (`docs/todo/tenant-admin-onboarding-fusion.md`, `docs/changes/...`) aktualisiert.
- Checkout & Payments: Checkout-, PayPal-Controller und Tests für integrierte Stripe/PayPal-Flows sowie Paket-Billing-Abläufe überarbeitet; neue PayPal SDK-Factory und Admin-API-Helper (`resources/js/admin/api.ts`) schaffen Grundlage für Billing/Members/Tasks-Seiten.
- DX & Tests: Neue Playwright/E2E-Struktur (docs/testing/e2e.md, `tests/e2e/tenant-onboarding-flow.test.ts`, Utilities), E2E-Tenant-Seeder und zusätzliche Übersetzungen/Factories zur Unterstützung der neuen Flows.
- Marketing-Kommunikation: Automatische Kontakt-Bestätigungsmail (`ContactConfirmation` + Blade-Template) implementiert; Guest-PWA unter `/event` erreichbar.
- Nebensitzung: Blogsystem gefixt und umfassenden BlogPostSeeder für Beispielinhalte angelegt.

resources/js/pages/marketing/checkout/steps/PaymentStep.tsx

@@ -2,40 +2,34 @@ import { useState, useEffect } from "react";
 import { useTranslation } from 'react-i18next';
 import { useStripe, useElements, PaymentElement, Elements } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
+import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { useCheckoutWizard } from "../WizardContext";
 
 interface PaymentStepProps {
   stripePublishableKey: string;
+  paypalClientId: string;
 }
 
-// Komponente für kostenpflichtige Zahlungen (immer innerhalb Elements Provider)
-const PaymentForm: React.FC = () => {
+// Komponente für Stripe-Zahlungen
+const StripePaymentForm: React.FC<{ onError: (error: string) => void; onSuccess: () => void; selectedPackage: any; t: any }> = ({ onError, onSuccess, selectedPackage, t }) => {
   const stripe = useStripe();
   const elements = useElements();
-  const { selectedPackage, resetPaymentState, nextStep } = useCheckoutWizard();
-    const { t } = useTranslation('marketing');
 
   const [isProcessing, setIsProcessing] = useState(false);
   const [error, setError] = useState<string>('');
-  const [paymentStatus, setPaymentStatus] = useState<'idle' | 'processing' | 'succeeded' | 'failed'>('idle');
-
-  useEffect(() => {
-    resetPaymentState();
-  }, [selectedPackage?.id, resetPaymentState]);
 
   const handleSubmit = async (event: React.FormEvent) => {
     event.preventDefault();
 
     if (!stripe || !elements) {
-      setError(t('checkout.payment_step.stripe_not_loaded'));
+      onError(t('checkout.payment_step.stripe_not_loaded'));
       return;
     }
 
     setIsProcessing(true);
     setError('');
-    setPaymentStatus('processing');
 
     try {
       const { error: stripeError, paymentIntent } = await stripe.confirmPayment({
@@ -43,7 +37,7 @@ const PaymentForm: React.FC = () => {
         confirmParams: {
           return_url: `${window.location.origin}/checkout/success`,
         },
-        redirect: 'if_required', // Wichtig für SCA
+        redirect: 'if_required',
       });
 
       if (stripeError) {
@@ -71,119 +65,186 @@ const PaymentForm: React.FC = () => {
         }
 
         setError(errorMessage);
-        setPaymentStatus('failed');
+        onError(errorMessage);
+      } else if (paymentIntent && paymentIntent.status === 'succeeded') {
+        onSuccess();
       } else if (paymentIntent) {
-        switch (paymentIntent.status) {
-          case 'succeeded':
-            setPaymentStatus('succeeded');
-            // Kleiner Delay für bessere UX
-            setTimeout(() => nextStep(), 1000);
-            break;
-          case 'processing':
-            setError(t('checkout.payment_step.processing'));
-            setPaymentStatus('processing');
-            break;
-          case 'requires_payment_method':
-            setError(t('checkout.payment_step.needs_method'));
-            setPaymentStatus('failed');
-            break;
-          case 'requires_confirmation':
-            setError(t('checkout.payment_step.needs_confirm'));
-            setPaymentStatus('failed');
-            break;
-          default:
-            setError(t('checkout.payment_step.unexpected_status', { status: paymentIntent.status }));
-            setPaymentStatus('failed');
-        }
+        onError(t('checkout.payment_step.unexpected_status', { status: paymentIntent.status }));
       }
     } catch (err) {
       console.error('Unexpected payment error:', err);
-      setError(t('checkout.payment_step.error_unknown'));
-      setPaymentStatus('failed');
+      onError(t('checkout.payment_step.error_unknown'));
     } finally {
       setIsProcessing(false);
     }
   };
 
   return (
-    <div className="space-y-6">
-      <form onSubmit={handleSubmit} className="space-y-4">
-        {error && (
-          <Alert variant="destructive">
-            <AlertDescription>{error}</AlertDescription>
-          </Alert>
-        )}
+    <form onSubmit={handleSubmit} className="space-y-4">
+      {error && (
+        <Alert variant="destructive">
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+      <div className="rounded-lg border bg-card p-6 shadow-sm space-y-4">
+        <p className="text-sm text-muted-foreground">
+          {t('checkout.payment_step.secure_payment_desc')}
+        </p>
+        <PaymentElement />
+        <Button
+          type="submit"
+          disabled={!stripe || isProcessing}
+          size="lg"
+          className="w-full"
+        >
+          {isProcessing ? t('checkout.payment_step.processing_btn') : t('checkout.payment_step.pay_now', { price: selectedPackage?.price || 0 })}
+        </Button>
+      </div>
+    </form>
+  );
+};
 
-        <div className="rounded-lg border bg-card p-6 shadow-sm space-y-4">
-          <p className="text-sm text-muted-foreground">
-            {t('checkout.payment_step.secure_payment_desc')}
-          </p>
-          <PaymentElement />
-          <Button
-            type="submit"
-            disabled={!stripe || isProcessing}
-            size="lg"
-            className="w-full"
-          >
-            {isProcessing ? t('checkout.payment_step.processing_btn') : t('checkout.payment_step.pay_now', { price: selectedPackage?.price || 0 })}
-          </Button>
-        </div>
-      </form>
+// Komponente für PayPal-Zahlungen
+const PayPalPaymentForm: React.FC<{ onError: (error: string) => void; onSuccess: () => void; selectedPackage: any; t: any; authUser: any; paypalClientId: string }> = ({ onError, onSuccess, selectedPackage, t, authUser, paypalClientId }) => {
+  const createOrder = async () => {
+    try {
+      const response = await fetch('/paypal/create-order', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+        },
+        body: JSON.stringify({
+          tenant_id: authUser?.tenant_id || authUser?.id, // Annahme: tenant_id verfügbar
+          package_id: selectedPackage?.id,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok && data.id) {
+        return data.id;
+      } else {
+        onError(data.error || t('checkout.payment_step.paypal_order_error'));
+        throw new Error('Failed to create order');
+      }
+    } catch (err) {
+      onError(t('checkout.payment_step.network_error'));
+      throw err;
+    }
+  };
+
+  const onApprove = async (data: any) => {
+    try {
+      const response = await fetch('/paypal/capture-order', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+        },
+        body: JSON.stringify({
+          order_id: data.orderID,
+        }),
+      });
+
+      const result = await response.json();
+
+      if (response.ok && result.status === 'captured') {
+        onSuccess();
+      } else {
+        onError(result.error || t('checkout.payment_step.paypal_capture_error'));
+      }
+    } catch (err) {
+      onError(t('checkout.payment_step.network_error'));
+    }
+  };
+
+  const onErrorHandler = (error: any) => {
+    console.error('PayPal Error:', error);
+    onError(t('checkout.payment_step.paypal_error'));
+  };
+
+  const onCancel = () => {
+    onError(t('checkout.payment_step.paypal_cancelled'));
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded-lg border bg-card p-6 shadow-sm space-y-4">
+        <p className="text-sm text-muted-foreground">
+          {t('checkout.payment_step.secure_paypal_desc') || 'Bezahlen Sie sicher mit PayPal.'}
+        </p>
+        <PayPalButtons
+          style={{ layout: 'vertical' }}
+          createOrder={createOrder}
+          onApprove={onApprove}
+          onError={onErrorHandler}
+          onCancel={onCancel}
+        />
+      </div>
     </div>
   );
 };
 
-// Wrapper-Komponente mit eigenem Elements Provider
-export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }) => {
+// Wrapper-Komponente
+export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey, paypalClientId }) => {
   const { t } = useTranslation('marketing');
-  const { selectedPackage, authUser, nextStep } = useCheckoutWizard();
+  const { selectedPackage, authUser, nextStep, resetPaymentState } = useCheckoutWizard();
   const [clientSecret, setClientSecret] = useState<string>('');
+  const [paymentMethod, setPaymentMethod] = useState<'stripe' | 'paypal'>('stripe');
   const [error, setError] = useState<string>('');
+  const [isFree, setIsFree] = useState(false);
 
-  const isFree = selectedPackage ? selectedPackage.price <= 0 : false;
-
-// Payment Intent für kostenpflichtige Pakete laden
   useEffect(() => {
-    if (isFree || !authUser || !selectedPackage) return;
+    const free = selectedPackage ? selectedPackage.price <= 0 : false;
+    setIsFree(free);
+    if (free) {
+      resetPaymentState();
+      return;
+    }
 
-    const loadPaymentIntent = async () => {
-      try {
-        const response = await fetch('/stripe/create-payment-intent', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
-          },
-          body: JSON.stringify({
-            package_id: selectedPackage.id,
-          }),
-        });
+    if (paymentMethod === 'stripe' && authUser && selectedPackage) {
+      const loadPaymentIntent = async () => {
+        try {
+          const response = await fetch('/stripe/create-payment-intent', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+            },
+            body: JSON.stringify({
+              package_id: selectedPackage.id,
+            }),
+          });
 
-        const data = await response.json();
+          const data = await response.json();
 
-        console.log('Payment Intent Response:', {
-          ok: response.ok,
-          status: response.status,
-          data: data
-        });
-
-        if (response.ok && data.client_secret) {
-          setClientSecret(data.client_secret);
-          setError('');
-        } else {
-          const errorMsg = data.error || t('checkout.payment_step.payment_intent_error');
-          console.error('Payment Intent Error:', errorMsg);
-          setError(errorMsg);
+          if (response.ok && data.client_secret) {
+            setClientSecret(data.client_secret);
+            setError('');
+          } else {
+            setError(data.error || t('checkout.payment_step.payment_intent_error'));
+          }
+        } catch (err) {
+          setError(t('checkout.payment_step.network_error'));
         }
-      } catch (err) {
-        setError(t('checkout.payment_step.network_error'));
-      }
-    };
+      };
 
-    loadPaymentIntent();
-  }, [selectedPackage?.id, authUser, isFree, t]);
+      loadPaymentIntent();
+    } else {
+      setClientSecret('');
+    }
+  }, [selectedPackage?.id, authUser, paymentMethod, isFree, t, resetPaymentState]);
 
-  // Für kostenlose Pakete: Direkte Aktivierung ohne Stripe
+  const handlePaymentError = (errorMsg: string) => {
+    setError(errorMsg);
+  };
+
+  const handlePaymentSuccess = () => {
+    setTimeout(() => nextStep(), 1000);
+  };
+
+  // Für kostenlose Pakete
   if (isFree) {
     return (
       <div className="space-y-6">
@@ -202,30 +263,79 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }
     );
   }
 
-  // Für kostenpflichtige Pakete: Warten auf clientSecret
-  if (!clientSecret) {
+  // Fehler anzeigen
+  if (error && !clientSecret) {
     return (
       <div className="space-y-6">
-        {error && (
-          <Alert variant="destructive">
-            <AlertDescription>{error}</AlertDescription>
-          </Alert>
-        )}
-        <div className="rounded-lg border bg-card p-6 shadow-sm">
-          <p className="text-sm text-muted-foreground">
-            {t('checkout.payment_step.loading_payment')}
-          </p>
+        <Alert variant="destructive">
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+        <div className="flex justify-end">
+          <Button onClick={() => setError('')}>Versuchen Sie es erneut</Button>
         </div>
       </div>
     );
   }
 
-  // Eigener Elements Provider mit clientSecret für kostenpflichtige Pakete
   const stripePromise = loadStripe(stripePublishableKey);
 
   return (
-    <Elements stripe={stripePromise} options={{ clientSecret }}>
-      <PaymentForm />
-    </Elements>
+    <div className="space-y-6">
+      {/* Zahlungsmethode Auswahl */}
+      <div className="flex space-x-4">
+        <Button
+          variant={paymentMethod === 'stripe' ? 'default' : 'outline'}
+          onClick={() => setPaymentMethod('stripe')}
+          className="flex-1"
+        >
+          Kreditkarte (Stripe)
+        </Button>
+        <Button
+          variant={paymentMethod === 'paypal' ? 'default' : 'outline'}
+          onClick={() => setPaymentMethod('paypal')}
+          className="flex-1"
+        >
+          PayPal
+        </Button>
+      </div>
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {paymentMethod === 'stripe' && (
+        <Elements stripe={stripePromise} options={{ clientSecret }}>
+          <StripePaymentForm
+            onError={handlePaymentError}
+            onSuccess={handlePaymentSuccess}
+            selectedPackage={selectedPackage}
+            t={t}
+          />
+        </Elements>
+      )}
+
+      {paymentMethod === 'paypal' && (
+        <PayPalScriptProvider options={{ clientId: paypalClientId, currency: 'EUR' }}>
+          <PayPalPaymentForm
+            onError={handlePaymentError}
+            onSuccess={handlePaymentSuccess}
+            selectedPackage={selectedPackage}
+            t={t}
+            authUser={authUser}
+            paypalClientId={paypalClientId}
+          />
+        </PayPalScriptProvider>
+      )}
+
+      {!clientSecret && paymentMethod === 'stripe' && (
+        <div className="rounded-lg border bg-card p-6 shadow-sm">
+          <p className="text-sm text-muted-foreground">
+            {t('checkout.payment_step.loading_payment')}
+          </p>
+        </div>
+      )}
+    </div>
   );
 };