feat: Implementierung des Checkout-Logins mit E-Mail/Username-Support

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

@@ -1,4 +1,5 @@
 import React, { useMemo } from "react";
+import { useTranslation } from 'react-i18next';
 import { Steps } from "@/components/ui/Steps";
 import { Button } from "@/components/ui/button";
 import { Progress } from "@/components/ui/progress";
@@ -23,36 +24,45 @@ interface CheckoutWizardProps {
   initialStep?: CheckoutStepId;
 }
 
-const stepConfig: { id: CheckoutStepId; title: string; description: string; details: string }[] = [
+const baseStepConfig: { id: CheckoutStepId; titleKey: string; descriptionKey: string; detailsKey: string }[] = [
   {
     id: "package",
-    title: "Paket wählen",
-    description: "Auswahl und Vergleich",
-    details: "Wähle das passende Paket für deine Bedürfnisse"
+    titleKey: 'checkout.package_step.title',
+    descriptionKey: 'checkout.package_step.subtitle',
+    detailsKey: 'checkout.package_step.description'
   },
   {
     id: "auth",
-    title: "Konto einrichten",
-    description: "Login oder Registrierung",
-    details: "Erstelle ein Konto oder melde dich an"
+    titleKey: 'checkout.auth_step.title',
+    descriptionKey: 'checkout.auth_step.subtitle',
+    detailsKey: 'checkout.auth_step.description'
   },
   {
     id: "payment",
-    title: "Bezahlung",
-    description: "Sichere Zahlung",
-    details: "Gib deine Zahlungsdaten ein"
+    titleKey: 'checkout.payment_step.title',
+    descriptionKey: 'checkout.payment_step.subtitle',
+    detailsKey: 'checkout.payment_step.description'
   },
   {
     id: "confirmation",
-    title: "Fertig!",
-    description: "Zugang aktiv",
-    details: "Dein Paket ist aktiviert"
+    titleKey: 'checkout.confirmation_step.title',
+    descriptionKey: 'checkout.confirmation_step.subtitle',
+    detailsKey: 'checkout.confirmation_step.description'
   },
 ];
-
 const WizardBody: React.FC<{ stripePublishableKey: string; privacyHtml: string }> = ({ stripePublishableKey, privacyHtml }) => {
+  const { t } = useTranslation('marketing');
   const { currentStep, nextStep, previousStep } = useCheckoutWizard();
 
+  const stepConfig = useMemo(() =>
+    baseStepConfig.map(step => ({
+      id: step.id,
+      title: t(step.titleKey),
+      description: t(step.descriptionKey),
+      details: t(step.detailsKey),
+    })),
+    [t]
+  );
 
   const currentIndex = useMemo(() => stepConfig.findIndex((step) => step.id === currentStep), [currentStep]);
   const progress = useMemo(() => {
@@ -60,7 +70,7 @@ const WizardBody: React.FC<{ stripePublishableKey: string; privacyHtml: string }
       return 0;
     }
     return (currentIndex / (stepConfig.length - 1)) * 100;
-  }, [currentIndex]);
+  }, [currentIndex, stepConfig]);
 
   return (
     <div className="space-y-8">
@@ -78,10 +88,10 @@ const WizardBody: React.FC<{ stripePublishableKey: string; privacyHtml: string }
 
       <div className="flex items-center justify-between">
         <Button variant="ghost" onClick={previousStep} disabled={currentIndex <= 0}>
-          Zurueck
+          {t('checkout.back')}
         </Button>
         <Button onClick={nextStep} disabled={currentIndex >= stepConfig.length - 1}>
-          Weiter
+          {t('checkout.next')}
         </Button>
       </div>
     </div>