68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import React from "react";
|
|
import { Head, usePage } from "@inertiajs/react";
|
|
import MarketingLayout from "@/layouts/mainWebsite";
|
|
import type { CheckoutPackage, GoogleProfilePrefill } from "./checkout/types";
|
|
import { CheckoutWizard } from "./checkout/CheckoutWizard";
|
|
|
|
interface CheckoutWizardPageProps {
|
|
package: CheckoutPackage;
|
|
packageOptions: CheckoutPackage[];
|
|
privacyHtml: string;
|
|
googleAuth?: {
|
|
status?: string | null;
|
|
error?: string | null;
|
|
profile?: GoogleProfilePrefill | null;
|
|
};
|
|
paddle?: {
|
|
environment?: string | null;
|
|
client_token?: string | null;
|
|
};
|
|
}
|
|
|
|
const CheckoutWizardPage: React.FC<CheckoutWizardPageProps> = ({
|
|
package: initialPackage,
|
|
packageOptions,
|
|
privacyHtml,
|
|
googleAuth,
|
|
paddle,
|
|
}) => {
|
|
const page = usePage<{ auth?: { user?: { id: number; email: string; name?: string; pending_purchase?: boolean } | null } }>();
|
|
const currentUser = page.props.auth?.user ?? null;
|
|
const googleProfile = googleAuth?.profile ?? 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">
|
|
<CheckoutWizard
|
|
initialPackage={initialPackage}
|
|
packageOptions={dedupedOptions}
|
|
privacyHtml={privacyHtml}
|
|
initialAuthUser={currentUser ? { id: currentUser.id, email: currentUser.email ?? '', name: currentUser.name ?? undefined, pending_purchase: Boolean(currentUser.pending_purchase) } : null}
|
|
googleProfile={googleProfile}
|
|
paddle={paddle ?? null}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</MarketingLayout>
|
|
);
|
|
};
|
|
|
|
CheckoutWizardPage.layout = (page: React.ReactNode) => page;
|
|
|
|
export default CheckoutWizardPage;
|