feat: Complete checkout overhaul with Stripe PaymentIntent integration and abandoned cart recovery

2025-10-07 22:25:03 +02:00
parent dd5545605c
commit aa8c6c67c5
38 changed files with 1848 additions and 878 deletions
--- a/resources/js/pages/auth/LoginForm.tsx
+++ b/resources/js/pages/auth/LoginForm.tsx
@@ -40,18 +40,8 @@ export default function LoginForm({ onSuccess, canResetPassword = true, locale }
  const { t } = useTranslation("auth");
  const resolvedLocale = locale ?? page.props.locale ?? "de";

-  const loginEndpoint = useMemo(() => {
-    if (typeof route === "function") {
-      try {
-        return route("checkout.login");
-      } catch (error) {
-        // Ziggy might not be booted yet; fall back to locale-aware path.
-      }
-    }
-
-    return fallbackRoute(resolvedLocale);
-  }, [resolvedLocale]);
-
+  const loginEndpoint = '/checkout/login';
+      
  const [values, setValues] = useState({
    email: "",
    password: "",
--- a/resources/js/pages/auth/RegisterForm.tsx
+++ b/resources/js/pages/auth/RegisterForm.tsx
@@ -23,6 +23,7 @@ interface RegisterFormProps {
 export default function RegisterForm({ packageId, onSuccess, privacyHtml, locale }: RegisterFormProps) {
  const [privacyOpen, setPrivacyOpen] = useState(false);
  const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
  const { t } = useTranslation(['auth', 'common']);
  const page = usePage<{ errors: Record<string, string>; locale?: string; auth?: { user?: any | null } }>();
  const resolvedLocale = locale ?? page.props.locale ?? 'de';
@@ -46,18 +47,8 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml, locale
    }
  }, [errors, hasTriedSubmit]);

-  const registerEndpoint = useMemo(() => {
-    if (typeof route === 'function') {
-      try {
-        return route('checkout.register');
-      } catch (error) {
-        // ignore ziggy errors and fall back
-      }
-    }
-
-    return `/${resolvedLocale}/register`;
-  }, [resolvedLocale]);
-
+  const registerEndpoint = '/checkout/register';
+      
  const submit = async (event: React.FormEvent) => {
    event.preventDefault();
    setHasTriedSubmit(true);
@@ -71,6 +62,7 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml, locale
    };

    try {
+      
      const response = await fetch(registerEndpoint, {
        method: 'POST',
        headers: {
--- a/resources/js/pages/marketing/CheckoutWizardPage.tsx
+++ b/resources/js/pages/marketing/CheckoutWizardPage.tsx
@@ -3,20 +3,22 @@ import { Head, usePage } from "@inertiajs/react";
 import MarketingLayout from "@/layouts/marketing/MarketingLayout";
 import type { CheckoutPackage } from "./checkout/types";
 import { CheckoutWizard } from "./checkout/CheckoutWizard";
+import { Button } from "@/components/ui/button";
+import { X } from "lucide-react";

-interface PurchaseWizardPageProps {
+interface CheckoutWizardPageProps {
  package: CheckoutPackage;
  packageOptions: CheckoutPackage[];
  stripePublishableKey: string;
  privacyHtml: string;
 }

-export default function PurchaseWizardPage({
+export default function CheckoutWizardPage({
  package: initialPackage,
  packageOptions,
  stripePublishableKey,
  privacyHtml,
-}: PurchaseWizardPageProps) {
+}: CheckoutWizardPageProps) {
  const page = usePage<{ auth?: { user?: { id: number; email: string; name?: string } | null } }>();
  const currentUser = page.props.auth?.user ?? null;

@@ -37,6 +39,19 @@ export default function PurchaseWizardPage({
      <Head title="Checkout Wizard" />
      <div className="min-h-screen bg-muted/20 py-12">
        <div className="mx-auto w-full max-w-4xl px-4">
+          {/* Abbruch-Button oben rechts */}
+          <div className="flex justify-end mb-4">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => window.location.href = '/packages'}
+              className="text-muted-foreground hover:text-foreground"
+            >
+              <X className="h-4 w-4 mr-2" />
+              Abbrechen
+            </Button>
+          </div>
+
          <CheckoutWizard
            initialPackage={initialPackage}
            packageOptions={dedupedOptions}
--- a/resources/js/pages/marketing/checkout/CheckoutWizard.tsx
+++ b/resources/js/pages/marketing/checkout/CheckoutWizard.tsx
@@ -23,11 +23,31 @@ interface CheckoutWizardProps {
  initialStep?: CheckoutStepId;
 }

-const stepConfig: { id: CheckoutStepId; title: string; description: string }[] = [
-  { id: "package", title: "Paket", description: "Auswahl und Vergleich" },
-  { id: "auth", title: "Konto", description: "Login oder Registrierung" },
-  { id: "payment", title: "Zahlung", description: "Stripe oder PayPal" },
-  { id: "confirmation", title: "Fertig", description: "Zugang aktiv" },
+const stepConfig: { id: CheckoutStepId; title: string; description: string; details: string }[] = [
+  {
+    id: "package",
+    title: "Paket wählen",
+    description: "Auswahl und Vergleich",
+    details: "Wähle das passende Paket für deine Bedürfnisse"
+  },
+  {
+    id: "auth",
+    title: "Konto einrichten",
+    description: "Login oder Registrierung",
+    details: "Erstelle ein Konto oder melde dich an"
+  },
+  {
+    id: "payment",
+    title: "Bezahlung",
+    description: "Sichere Zahlung",
+    details: "Gib deine Zahlungsdaten ein"
+  },
+  {
+    id: "confirmation",
+    title: "Fertig!",
+    description: "Zugang aktiv",
+    details: "Dein Paket ist aktiviert"
+  },
 ];

 const WizardBody: React.FC<{ stripePublishableKey: string; privacyHtml: string }> = ({ stripePublishableKey, privacyHtml }) => {
--- a/resources/js/pages/marketing/checkout/WizardContext.tsx
+++ b/resources/js/pages/marketing/checkout/WizardContext.tsx
@@ -1,110 +1,25 @@
-import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
-import type { CheckoutPackage, CheckoutStepId, CheckoutWizardContextValue, CheckoutWizardState } from "./types";
+  const cancelCheckout = useCallback(() => {
+    // Track abandoned checkout (fire and forget)
+    if (state.authUser || state.selectedPackage) {
+      fetch('/checkout/track-abandoned', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+        },
+        body: JSON.stringify({
+          package_id: state.selectedPackage.id,
+          last_step: ['package', 'auth', 'payment', 'confirmation'].indexOf(state.currentStep) + 1,
+          user_id: state.authUser?.id,
+          email: state.authUser?.email,
+        }),
+      }).catch(error => {
+        console.error('Failed to track abandoned checkout:', error);
+      });
+    }

-interface CheckoutWizardProviderProps {
-  initialPackage: CheckoutPackage;
-  packageOptions: CheckoutPackage[];
-  initialStep?: CheckoutStepId;
-  initialAuthUser?: CheckoutWizardState['authUser'];
-  initialIsAuthenticated?: boolean;
-  children: React.ReactNode;
-}
-
-const CheckoutWizardContext = createContext<CheckoutWizardContextValue | undefined>(undefined);
-
-export const CheckoutWizardProvider: React.FC<CheckoutWizardProviderProps> = ({
-  initialPackage,
-  packageOptions,
-  initialStep = 'package',
-  initialAuthUser = null,
-  initialIsAuthenticated,
-  children,
-}) => {
-  const [state, setState] = useState<CheckoutWizardState>(() => ({
-    currentStep: initialStep,
-    selectedPackage: initialPackage,
-    packageOptions,
-    isAuthenticated: Boolean(initialIsAuthenticated || initialAuthUser),
-    authUser: initialAuthUser ?? null,
-    paymentProvider: undefined,
-    isProcessing: false,
-  }));
-
-  const setStep = useCallback((step: CheckoutStepId) => {
-    setState((prev) => ({ ...prev, currentStep: step }));
-  }, []);
-
-  const nextStep = useCallback(() => {
-    setState((prev) => {
-      const order: CheckoutStepId[] = ['package', 'auth', 'payment', 'confirmation'];
-      const currentIndex = order.indexOf(prev.currentStep);
-      const nextIndex = currentIndex === -1 ? 0 : Math.min(order.length - 1, currentIndex + 1);
-      return { ...prev, currentStep: order[nextIndex] };
-    });
-  }, []);
-
-  const previousStep = useCallback(() => {
-    setState((prev) => {
-      const order: CheckoutStepId[] = ['package', 'auth', 'payment', 'confirmation'];
-      const currentIndex = order.indexOf(prev.currentStep);
-      const nextIndex = currentIndex <= 0 ? 0 : currentIndex - 1;
-      return { ...prev, currentStep: order[nextIndex] };
-    });
-  }, []);
-
-  const setSelectedPackage = useCallback((pkg: CheckoutPackage) => {
-    setState((prev) => ({
-      ...prev,
-      selectedPackage: pkg,
-      paymentProvider: undefined,
-    }));
-  }, []);
-
-  const markAuthenticated = useCallback<CheckoutWizardContextValue['markAuthenticated']>((user) => {
-    setState((prev) => ({
-      ...prev,
-      isAuthenticated: Boolean(user),
-      authUser: user ?? null,
-    }));
-  }, []);
-
-  const setPaymentProvider = useCallback<CheckoutWizardContextValue['setPaymentProvider']>((provider) => {
-    setState((prev) => ({
-      ...prev,
-      paymentProvider: provider,
-    }));
-  }, []);
-
-  const resetPaymentState = useCallback(() => {
-    setState((prev) => ({
-      ...prev,
-      paymentProvider: undefined,
-      isProcessing: false,
-    }));
-  }, []);
-
-  const value = useMemo<CheckoutWizardContextValue>(() => ({
-    ...state,
-    setStep,
-    nextStep,
-    previousStep,
-    setSelectedPackage,
-    markAuthenticated,
-    setPaymentProvider,
-    resetPaymentState,
-  }), [state, setStep, nextStep, previousStep, setSelectedPackage, markAuthenticated, setPaymentProvider, resetPaymentState]);
-
-  return (
-    <CheckoutWizardContext.Provider value={value}>
-      {children}
-    </CheckoutWizardContext.Provider>
-  );
-};
-
-export const useCheckoutWizard = () => {
-  const context = useContext(CheckoutWizardContext);
-  if (!context) {
-    throw new Error('useCheckoutWizard must be used within CheckoutWizardProvider');
-  }
-  return context;
-};
+    // State aus localStorage entfernen
+    localStorage.removeItem('checkout-wizard-state');
+    // Zur Package-Übersicht zurückleiten
+    window.location.href = '/packages';
+  }, [state]);
--- a/resources/js/pages/marketing/checkout/steps/AuthStep.tsx
+++ b/resources/js/pages/marketing/checkout/steps/AuthStep.tsx
@@ -3,8 +3,8 @@ import { usePage } from "@inertiajs/react";
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { useCheckoutWizard } from "../WizardContext";
-import LoginForm, { AuthUserPayload } from "../../auth/LoginForm";
-import RegisterForm, { RegisterSuccessPayload } from "../../auth/RegisterForm";
+import LoginForm, { AuthUserPayload } from "../../../auth/LoginForm";
+import RegisterForm, { RegisterSuccessPayload } from "../../../auth/RegisterForm";

 interface AuthStepProps {
  privacyHtml: string;
--- a/resources/js/pages/marketing/checkout/steps/ConfirmationStep.tsx
+++ b/resources/js/pages/marketing/checkout/steps/ConfirmationStep.tsx
@@ -15,7 +15,7 @@ export const ConfirmationStep: React.FC<ConfirmationStepProps> = ({ onViewProfil
      <Alert>
        <AlertTitle>Willkommen bei FotoSpiel</AlertTitle>
        <AlertDescription>
-          {Ihr Paket "" ist aktiviert. Wir haben Ihnen eine Bestaetigung per E-Mail gesendet.}
+          Ihr Paket "{selectedPackage.name}" ist aktiviert. Wir haben Ihnen eine Bestätigung per E-Mail gesendet.
        </AlertDescription>
      </Alert>
      <div className="flex flex-wrap gap-3 justify-end">
--- a/resources/js/pages/marketing/checkout/steps/PackageStep.tsx
+++ b/resources/js/pages/marketing/checkout/steps/PackageStep.tsx
@@ -1,5 +1,5 @@
-import React, { useMemo } from "react";
-import { Check, Package as PackageIcon } from "lucide-react";
+import React, { useMemo, useState } from "react";
+import { Check, Package as PackageIcon, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
@@ -70,6 +70,7 @@ function PackageOption({ pkg, isActive, onSelect }: { pkg: CheckoutPackage; isAc

 export const PackageStep: React.FC = () => {
  const { selectedPackage, packageOptions, setSelectedPackage, resetPaymentState, nextStep } = useCheckoutWizard();
+  const [isLoading, setIsLoading] = useState(false);

  const comparablePackages = useMemo(() => {
    return packageOptions.filter((pkg) => pkg.type === selectedPackage.type);
@@ -83,13 +84,29 @@ export const PackageStep: React.FC = () => {
    resetPaymentState();
  };

+  const handleNextStep = async () => {
+    setIsLoading(true);
+    // Kleine Verzögerung für bessere UX
+    setTimeout(() => {
+      nextStep();
+      setIsLoading(false);
+    }, 300);
+  };
+
  return (
    <div className="grid gap-8 lg:grid-cols-[2fr_1fr]">
      <div className="space-y-6">
        <PackageSummary pkg={selectedPackage} />
        <div className="flex justify-end">
-          <Button size="lg" onClick={nextStep}>
-            Weiter zum Konto
+          <Button size="lg" onClick={handleNextStep} disabled={isLoading}>
+            {isLoading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Wird geladen...
+              </>
+            ) : (
+              "Weiter zum Konto"
+            )}
          </Button>
        </div>
      </div>
--- a/resources/js/pages/marketing/checkout/steps/PaymentStep.tsx
+++ b/resources/js/pages/marketing/checkout/steps/PaymentStep.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect } from "react";
+import { useState, useEffect } from "react";
+import { useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js';
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -9,13 +10,138 @@ interface PaymentStepProps {
 }

 export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }) => {
-  const { selectedPackage, paymentProvider, setPaymentProvider, resetPaymentState, nextStep } = useCheckoutWizard();
+  const stripe = useStripe();
+  const elements = useElements();
+  const { selectedPackage, authUser, paymentProvider, setPaymentProvider, resetPaymentState, nextStep } = useCheckoutWizard();
+
+  const [clientSecret, setClientSecret] = useState<string>('');
+  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 isFree = selectedPackage.price === 0;
+  const isFree = selectedPackage.price <= 0;
+
+  // Payment Intent für kostenpflichtige Pakete laden
+  useEffect(() => {
+    if (isFree || !authUser) 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,
+          }),
+        });
+
+        const data = await response.json();
+
+        if (response.ok && data.clientSecret) {
+          setClientSecret(data.clientSecret);
+          setError('');
+        } else {
+          setError(data.error || 'Fehler beim Laden der Zahlungsdaten');
+        }
+      } catch (err) {
+        setError('Netzwerkfehler beim Laden der Zahlungsdaten');
+      }
+    };
+
+    loadPaymentIntent();
+  }, [selectedPackage.id, authUser, isFree]);
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+
+    if (!stripe || !elements) {
+      setError('Stripe ist nicht initialisiert. Bitte Seite neu laden.');
+      return;
+    }
+
+    if (!clientSecret) {
+      setError('Zahlungsdaten konnten nicht geladen werden. Bitte erneut versuchen.');
+      return;
+    }
+
+    setIsProcessing(true);
+    setError('');
+    setPaymentStatus('processing');
+
+    try {
+      const { error: stripeError, paymentIntent } = await stripe.confirmPayment({
+        elements,
+        confirmParams: {
+          return_url: `${window.location.origin}/checkout/success`,
+        },
+        redirect: 'if_required', // Wichtig für SCA
+      });
+
+      if (stripeError) {
+        console.error('Stripe Payment Error:', stripeError);
+        let errorMessage = 'Zahlung fehlgeschlagen. ';
+
+        switch (stripeError.type) {
+          case 'card_error':
+            errorMessage += stripeError.message || 'Kartenfehler aufgetreten.';
+            break;
+          case 'validation_error':
+            errorMessage += 'Eingabedaten sind ungültig.';
+            break;
+          case 'api_connection_error':
+            errorMessage += 'Verbindungsfehler. Bitte Internetverbindung prüfen.';
+            break;
+          case 'api_error':
+            errorMessage += 'Serverfehler. Bitte später erneut versuchen.';
+            break;
+          case 'authentication_error':
+            errorMessage += 'Authentifizierungsfehler. Bitte Seite neu laden.';
+            break;
+          default:
+            errorMessage += stripeError.message || 'Unbekannter Fehler aufgetreten.';
+        }
+
+        setError(errorMessage);
+        setPaymentStatus('failed');
+      } else if (paymentIntent) {
+        switch (paymentIntent.status) {
+          case 'succeeded':
+            setPaymentStatus('succeeded');
+            // Kleiner Delay für bessere UX
+            setTimeout(() => nextStep(), 1000);
+            break;
+          case 'processing':
+            setError('Zahlung wird verarbeitet. Bitte warten...');
+            setPaymentStatus('processing');
+            break;
+          case 'requires_payment_method':
+            setError('Zahlungsmethode wird benötigt. Bitte Kartendaten überprüfen.');
+            setPaymentStatus('failed');
+            break;
+          case 'requires_confirmation':
+            setError('Zahlung muss bestätigt werden.');
+            setPaymentStatus('failed');
+            break;
+          default:
+            setError(`Unerwarteter Zahlungsstatus: ${paymentIntent.status}`);
+            setPaymentStatus('failed');
+        }
+      }
+    } catch (err) {
+      console.error('Unexpected payment error:', err);
+      setError('Unerwarteter Fehler aufgetreten. Bitte später erneut versuchen.');
+      setPaymentStatus('failed');
+    } finally {
+      setIsProcessing(false);
+    }
+  };

  if (isFree) {
    return (
@@ -23,7 +149,7 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }
        <Alert>
          <AlertTitle>Kostenloses Paket</AlertTitle>
          <AlertDescription>
-            Dieses Paket ist kostenlos. Wir aktivieren es direkt nach der Bestaetigung.
+            Dieses Paket ist kostenlos. Wir aktivieren es direkt nach der Bestätigung.
          </AlertDescription>
        </Alert>
        <div className="flex justify-end">
@@ -42,35 +168,58 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }
          <TabsTrigger value="stripe">Stripe</TabsTrigger>
          <TabsTrigger value="paypal">PayPal</TabsTrigger>
        </TabsList>
+
        <TabsContent value="stripe" className="mt-4">
-          <div className="rounded-lg border bg-card p-6 shadow-sm space-y-4">
-            <p className="text-sm text-muted-foreground">
-              Karten- oder SEPA-Zahlung via Stripe Elements. Wir erzeugen beim Fortfahren einen Payment Intent.
-            </p>
-            <Alert variant="secondary">
-              <AlertTitle>Integration folgt</AlertTitle>
-              <AlertDescription>
-                Stripe Elements wird im naechsten Schritt integriert. Aktuell dient dieser Block als Platzhalter fuer UI und API Hooks.
-              </AlertDescription>
-            </Alert>
-            <div className="flex justify-end">
-              <Button disabled>Stripe Zahlung starten</Button>
-            </div>
-          </div>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {error && (
+              <Alert variant="destructive">
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+
+            {clientSecret ? (
+              <div className="rounded-lg border bg-card p-6 shadow-sm space-y-4">
+                <p className="text-sm text-muted-foreground">
+                  Sichere Zahlung mit Kreditkarte, Debitkarte oder SEPA-Lastschrift.
+                </p>
+                <PaymentElement />
+                <Button
+                  type="submit"
+                  disabled={!stripe || isProcessing}
+                  size="lg"
+                  className="w-full"
+                >
+                  {isProcessing ? 'Verarbeitung...' : `Jetzt bezahlen (€${selectedPackage.price})`}
+                </Button>
+              </div>
+            ) : (
+              <div className="rounded-lg border bg-card p-6 shadow-sm">
+                <Alert>
+                  <AlertTitle>Lade Zahlungsdaten...</AlertTitle>
+                  <AlertDescription>
+                    Bitte warten Sie, während wir die Zahlungsdaten vorbereiten.
+                  </AlertDescription>
+                </Alert>
+              </div>
+            )}
+          </form>
        </TabsContent>
+
        <TabsContent value="paypal" className="mt-4">
          <div className="rounded-lg border bg-card p-6 shadow-sm space-y-4">
            <p className="text-sm text-muted-foreground">
-              PayPal Express Checkout mit Rueckleitung zur Bestaetigung. Wir hinterlegen Paket- und Tenant-Daten im Order-Metadata.
+              PayPal Express Checkout mit Rückleitung zur Bestätigung.
            </p>
-            <Alert variant="secondary">
-              <AlertTitle>Integration folgt</AlertTitle>
+            <Alert>
+              <AlertTitle>PayPal Integration</AlertTitle>
              <AlertDescription>
-                PayPal Buttons werden im Folge-PR angebunden. Dieser Platzhalter zeigt den spaeteren Container fuer die Buttons.
+                PayPal wird in einem späteren Schritt implementiert. Aktuell nur Stripe verfügbar.
              </AlertDescription>
            </Alert>
            <div className="flex justify-end">
-              <Button disabled>PayPal Bestellung anlegen</Button>
+              <Button disabled size="lg">
+                PayPal (bald verfügbar)
+              </Button>
            </div>
          </div>
        </TabsContent>
--- a/resources/js/pages/marketing/checkout/types.ts
+++ b/resources/js/pages/marketing/checkout/types.ts
@@ -35,5 +35,6 @@ export interface CheckoutWizardContextValue extends CheckoutWizardState {
  markAuthenticated: (user: CheckoutWizardState['authUser']) => void;
  setPaymentProvider: (provider: CheckoutWizardState['paymentProvider']) => void;
  resetPaymentState: () => void;
+  cancelCheckout: () => void;
 }