funktionierender stand, purchasewizard noch nicht optimiert.

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>
   );
-}
+}