checkout: buttons verbessert, paddle zahlungsschritt schicker gemacht, schritt 4 optimiert+schick gemacht. Dashboard: translations ergänzt. Startseite vom Event Admin optimiert.

resources/js/pages/marketing/checkout/CheckoutWizard.tsx

@@ -9,6 +9,7 @@ import { PackageStep } from "./steps/PackageStep";
 import { AuthStep } from "./steps/AuthStep";
 import { ConfirmationStep } from "./steps/ConfirmationStep";
 import { useAnalytics } from '@/hooks/useAnalytics';
+import { cn } from "@/lib/utils";
 
 const PaymentStep = lazy(() => import('./steps/PaymentStep').then((module) => ({ default: module.PaymentStep })));
 
@@ -69,6 +70,7 @@ const WizardBody: React.FC<{
   googleProfile?: GoogleProfilePrefill | null;
   onClearGoogleProfile?: () => void;
 }> = ({ privacyHtml, googleProfile, onClearGoogleProfile }) => {
+  const primaryCtaClassName = "min-w-[160px] disabled:bg-muted disabled:text-muted-foreground disabled:hover:bg-muted disabled:hover:text-muted-foreground";
   const { t } = useTranslation('marketing');
   const {
     currentStep,
@@ -160,13 +162,8 @@ const WizardBody: React.FC<{
     return true;
   }, [atLastStep, authUser, currentStep, isAuthenticated, isFreeSelected, paymentCompleted, selectedPackage]);
 
-  const shouldShowNextButton = useMemo(() => {
-    if (currentStep !== 'payment') {
-      return true;
-    }
-
-    return isFreeSelected || paymentCompleted;
-  }, [currentStep, isFreeSelected, paymentCompleted]);
+  const shouldShowNextButton = useMemo(() => currentStep !== 'confirmation', [currentStep]);
+  const highlightNextCta = currentStep === 'payment' && paymentCompleted;
 
   const handleNext = useCallback(() => {
     if (!canProceedToNextStep) {
@@ -200,8 +197,42 @@ const WizardBody: React.FC<{
     window.location.href = '/event-admin';
   }, []);
 
+  const primaryCta = useMemo(() => {
+    if (currentStep === 'confirmation') {
+      return {
+        label: t('checkout.confirmation_step.to_admin'),
+        onClick: handleGoToAdmin,
+        disabled: false,
+      };
+    }
+
+    if (!shouldShowNextButton) {
+      return null;
+    }
+
+    return {
+      label: t('checkout.next'),
+      onClick: handleNext,
+      disabled: !canProceedToNextStep,
+    };
+  }, [currentStep, handleGoToAdmin, handleNext, shouldShowNextButton, t, canProceedToNextStep]);
+  const ctaClassName = cn(primaryCtaClassName, highlightNextCta && 'animate-pulse ring-2 ring-primary/50 ring-offset-2 ring-offset-background');
+
   return (
     <div className="space-y-8">
+      {primaryCta && (
+        <div className="flex justify-end">
+          <Button
+            size="lg"
+            className={ctaClassName}
+            onClick={primaryCta.onClick}
+            disabled={primaryCta.disabled}
+          >
+            {primaryCta.label}
+          </Button>
+        </div>
+      )}
+
       <div ref={progressRef} className="space-y-4">
         <Progress value={progress} />
         <Steps steps={stepConfig} currentStep={currentIndex >= 0 ? currentIndex : 0} />
@@ -226,13 +257,18 @@ const WizardBody: React.FC<{
         )}
       </div>
 
-      <div className="flex items-center justify-between gap-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <Button variant="ghost" onClick={handlePrevious} disabled={currentIndex <= 0}>
           {t('checkout.back')}
         </Button>
-        {shouldShowNextButton ? (
-          <Button onClick={handleNext} disabled={!canProceedToNextStep}>
-            {t('checkout.next')}
+        {primaryCta ? (
+          <Button
+            size="lg"
+            className={ctaClassName}
+            onClick={primaryCta.onClick}
+            disabled={primaryCta.disabled}
+          >
+            {primaryCta.label}
           </Button>
         ) : (
           <div className="h-10 min-w-[128px]" aria-hidden="true" />