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

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>