112 lines
3.4 KiB
TypeScript
112 lines
3.4 KiB
TypeScript
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; 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 }) => {
|
|
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>
|
|
);
|
|
};
|