codex has reworked checkout, but frontend doesnt work

2025-10-05 20:39:30 +02:00
parent fdaa2bec62
commit d70faf7a9d
35 changed files with 2105 additions and 430 deletions
--- a/resources/js/pages/marketing/checkout/CheckoutWizard.tsx
+++ b/resources/js/pages/marketing/checkout/CheckoutWizard.tsx
@@ -0,0 +1,89 @@
+import React, { useMemo } from "react";
+import { Steps } from "@/components/ui/Steps";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import { CheckoutWizardProvider, useCheckoutWizard } from "./WizardContext";
+import type { CheckoutPackage, CheckoutStepId } from "./types";
+import { PackageStep } from "./steps/PackageStep";
+import { AuthStep } from "./steps/AuthStep";
+import { PaymentStep } from "./steps/PaymentStep";
+import { ConfirmationStep } from "./steps/ConfirmationStep";
+
+interface CheckoutWizardProps {
+  initialPackage: CheckoutPackage;
+  packageOptions: CheckoutPackage[];
+  stripePublishableKey: string;
+  privacyHtml: string;
+  initialAuthUser?: {
+    id: number;
+    email: string;
+    name?: string;
+    pending_purchase?: boolean;
+  } | null;
+  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 WizardBody: React.FC<{ stripePublishableKey: string; privacyHtml: string }> = ({ stripePublishableKey, privacyHtml }) => {
+  const { currentStep, nextStep, previousStep } = useCheckoutWizard();
+
+  const currentIndex = useMemo(() => stepConfig.findIndex((step) => step.id === currentStep), [currentStep]);
+  const progress = useMemo(() => {
+    if (currentIndex < 0) {
+      return 0;
+    }
+    return (currentIndex / (stepConfig.length - 1)) * 100;
+  }, [currentIndex]);
+
+  return (
+    <div className="space-y-8">
+      <div className="space-y-4">
+        <Progress value={progress} />
+        <Steps steps={stepConfig} currentStep={currentIndex >= 0 ? currentIndex : 0} />
+      </div>
+
+      <div className="space-y-6">
+        {currentStep === "package" && <PackageStep />}
+        {currentStep === "auth" && <AuthStep privacyHtml={privacyHtml} />}
+        {currentStep === "payment" && <PaymentStep stripePublishableKey={stripePublishableKey} />}
+        {currentStep === "confirmation" && <ConfirmationStep />}
+      </div>
+
+      <div className="flex items-center justify-between">
+        <Button variant="ghost" onClick={previousStep} disabled={currentIndex <= 0}>
+          Zurueck
+        </Button>
+        <Button onClick={nextStep} disabled={currentIndex >= stepConfig.length - 1}>
+          Weiter
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export const CheckoutWizard: React.FC<CheckoutWizardProps> = ({
+  initialPackage,
+  packageOptions,
+  stripePublishableKey,
+  privacyHtml,
+  initialAuthUser,
+  initialStep,
+}) => {
+  return (
+    <CheckoutWizardProvider
+      initialPackage={initialPackage}
+      packageOptions={packageOptions}
+      initialStep={initialStep}
+      initialAuthUser={initialAuthUser ?? undefined}
+      initialIsAuthenticated={Boolean(initialAuthUser)}
+    >
+      <WizardBody stripePublishableKey={stripePublishableKey} privacyHtml={privacyHtml} />
+    </CheckoutWizardProvider>
+  );
+};