feat: integrate login/registration into PurchaseWizard

resources/js/pages/marketing/PurchaseWizard.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } 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'; // Assume Shadcn Steps component; add if needed via shadcn
+import { Steps } from '@/components/ui/Steps'; // Correct casing for Shadcn Steps
+import { Check } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Progress } from '@/components/ui/progress';
@@ -20,9 +21,17 @@ interface Package {
   description: string;
   price: number;
   features: string[];
+  type?: 'endcustomer' | 'reseller';
+  trial_days?: number;
   // Add other fields as needed
 }
 
+interface UserData {
+  id: number;
+  email: string;
+  pending_purchase?: boolean;
+}
+
 interface PurchaseWizardProps {
   package: Package;
   stripePublishableKey: string;
@@ -37,18 +46,80 @@ const steps = [
 ];
 
 export default function PurchaseWizard({ package: initialPackage, stripePublishableKey, privacyHtml }: PurchaseWizardProps) {
+  const STORAGE_KEY = 'fotospiel_wizard_state';
+  const STORAGE_TTL = 30 * 60 * 1000; // 30 minutes in ms
+
   const [currentStep, setCurrentStep] = useState(0);
   const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [authCompleted, setAuthCompleted] = useState(false);
   const [authType, setAuthType] = useState<'register' | 'login'>('register'); // Toggle for auth step
-  const [wizardData, setWizardData] = useState({ package: initialPackage, user: null });
+  const [wizardData, setWizardData] = useState<{ package: Package; user: UserData | null }>({ package: initialPackage, user: null });
   const { t } = useTranslation(['marketing', 'auth']);
   const { props } = usePage();
   const { auth } = props as any;
 
+  // Load state from sessionStorage on mount
+  useEffect(() => {
+    const saved = sessionStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      try {
+        const parsed = JSON.parse(saved);
+        const { currentStep: savedCurrentStep, wizardData: savedWizardData, isAuthenticated: savedIsAuthenticated, authType: savedAuthType, timestamp } = parsed;
+        if (Date.now() - timestamp < STORAGE_TTL && savedWizardData?.package?.id === initialPackage.id) {
+          setCurrentStep(savedCurrentStep || 0);
+          setWizardData(savedWizardData || { package: initialPackage, user: null });
+          setIsAuthenticated(savedIsAuthenticated || false);
+          setAuthType(savedAuthType || 'register');
+          // If in payment step and pending purchase, reload client_secret if needed
+          if ((savedCurrentStep || 0) === 2 && savedWizardData?.user?.pending_purchase) {
+            // Optional: router.reload() or API call to refresh payment intent
+          }
+        } else {
+          sessionStorage.removeItem(STORAGE_KEY);
+        }
+      } catch (e) {
+        console.error('Failed to load wizard state:', e);
+        sessionStorage.removeItem(STORAGE_KEY);
+      }
+    }
+  }, [initialPackage.id]);
+
+  // Save state to sessionStorage on changes
+  const saveState = useCallback(() => {
+    const state = {
+      currentStep,
+      wizardData: {
+        package: wizardData.package,
+        user: wizardData.user ? { id: wizardData.user.id, email: wizardData.user.email, pending_purchase: wizardData.user.pending_purchase } : null,
+      },
+      isAuthenticated,
+      authType,
+      timestamp: Date.now(),
+    };
+    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  }, [currentStep, wizardData, isAuthenticated, authType]);
+
+  useEffect(() => {
+    saveState();
+  }, [saveState]);
+
+  // Cleanup on unmount or success
+  useEffect(() => {
+    return () => {
+      if (currentStep === 3) {
+        sessionStorage.removeItem(STORAGE_KEY);
+      }
+    };
+  }, [currentStep]);
+
   useEffect(() => {
     if (auth.user) {
       setIsAuthenticated(true);
-      setCurrentStep(2); // Skip to payment if already logged in
+      // Do not skip step, handle in render
+      // Update wizardData with auth.user if pending_purchase
+      if (auth.user.pending_purchase) {
+        setWizardData(prev => ({ ...prev, user: auth.user }));
+      }
     }
   }, [auth]);
 
@@ -69,7 +140,12 @@ export default function PurchaseWizard({ package: initialPackage, stripePublisha
   const handleAuthSuccess = (userData: any) => {
     setWizardData((prev) => ({ ...prev, user: userData }));
     setIsAuthenticated(true);
-    nextStep(); // Proceed to payment or success
+    setAuthCompleted(true);
+    // Show success message briefly then proceed
+    setTimeout(() => {
+      nextStep();
+      setAuthCompleted(false);
+    }, 2000);
   };
 
   const handlePaymentSuccess = () => {
@@ -100,6 +176,26 @@ export default function PurchaseWizard({ package: initialPackage, stripePublisha
           </Card>
         );
       case 'auth':
+        if (isAuthenticated) {
+          if (authCompleted) {
+            return (
+              <div className="text-center py-8">
+                <h2 className="text-2xl font-bold mb-4">{t('auth.login_success')}</h2>
+                <p className="text-gray-600 mb-6">Sie sind nun eingeloggt und werden weitergeleitet...</p>
+                <Loader2 className="h-6 w-6 animate-spin mx-auto" />
+              </div>
+            );
+          } else {
+            return (
+              <div className="text-center py-8">
+                <h2 className="text-2xl font-bold mb-4">{t('auth.already_logged_in')}</h2>
+                <Button onClick={nextStep} className="w-full">
+                  Weiter zum Zahlungsschritt
+                </Button>
+              </div>
+            );
+          }
+        }
         return (
           <div>
             <div className="flex justify-center mb-4">
@@ -132,7 +228,7 @@ export default function PurchaseWizard({ package: initialPackage, stripePublisha
         }
         return (
           <Elements stripe={stripePromise}>
-            <PaymentForm packageId={initialPackage.id} onSuccess={handlePaymentSuccess} />
+            <PaymentForm packageId={initialPackage.id} packagePrice={initialPackage.price} onSuccess={handlePaymentSuccess} />
           </Elements>
         );
       case 'success':