68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
import React from "react";
|
|
import { Head, usePage } from "@inertiajs/react";
|
|
import MarketingLayout from "@/layouts/marketing/MarketingLayout";
|
|
import type { CheckoutPackage } from "./checkout/types";
|
|
import { CheckoutWizard } from "./checkout/CheckoutWizard";
|
|
import { Button } from "@/components/ui/button";
|
|
import { X } from "lucide-react";
|
|
|
|
interface CheckoutWizardPageProps {
|
|
package: CheckoutPackage;
|
|
packageOptions: CheckoutPackage[];
|
|
stripePublishableKey: string;
|
|
privacyHtml: string;
|
|
}
|
|
|
|
export default function CheckoutWizardPage({
|
|
package: initialPackage,
|
|
packageOptions,
|
|
stripePublishableKey,
|
|
privacyHtml,
|
|
}: CheckoutWizardPageProps) {
|
|
const page = usePage<{ auth?: { user?: { id: number; email: string; name?: string; pending_purchase?: boolean } | null } }>();
|
|
const currentUser = page.props.auth?.user ?? null;
|
|
|
|
|
|
const dedupedOptions = React.useMemo(() => {
|
|
const ids = new Set<number>();
|
|
const list = [initialPackage, ...packageOptions];
|
|
return list.filter((pkg) => {
|
|
if (ids.has(pkg.id)) {
|
|
return false;
|
|
}
|
|
ids.add(pkg.id);
|
|
return true;
|
|
});
|
|
}, [initialPackage, packageOptions]);
|
|
|
|
return (
|
|
<MarketingLayout title="Checkout Wizard">
|
|
<Head title="Checkout Wizard" />
|
|
<div className="min-h-screen bg-muted/20 py-12">
|
|
<div className="mx-auto w-full max-w-4xl px-4">
|
|
{/* Abbruch-Button oben rechts */}
|
|
<div className="flex justify-end mb-4">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => window.location.href = '/packages'}
|
|
className="text-muted-foreground hover:text-foreground"
|
|
>
|
|
<X className="h-4 w-4 mr-2" />
|
|
Abbrechen
|
|
</Button>
|
|
</div>
|
|
|
|
<CheckoutWizard
|
|
initialPackage={initialPackage}
|
|
packageOptions={dedupedOptions}
|
|
stripePublishableKey={stripePublishableKey}
|
|
privacyHtml={privacyHtml}
|
|
initialAuthUser={currentUser ? { id: currentUser.id, email: currentUser.email ?? '', name: currentUser.name ?? undefined, pending_purchase: Boolean(currentUser.pending_purchase) } : null}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</MarketingLayout>
|
|
);
|
|
}
|