verpfuschter stand von codex
This commit is contained in:
Codex Agent
297
resources/js/pages/marketing/PurchaseWizard.tsx
Normal file
297
resources/js/pages/marketing/PurchaseWizard.tsx
Normal file
@@ -0,0 +1,297 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { Head, usePage } from '@inertiajs/react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { loadStripe } from '@stripe/stripe-js';
|
||||
import { Steps } from '@/components/ui/steps';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
|
||||
import RegisterForm from '../auth/RegisterForm';
|
||||
import LoginForm from '../auth/LoginForm';
|
||||
import PaymentForm from './PaymentForm';
|
||||
import SuccessStep from './SuccessStep';
|
||||
|
||||
interface Package {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string;
|
||||
price: number;
|
||||
features: string[];
|
||||
}
|
||||
|
||||
interface PurchaseWizardProps {
|
||||
package: Package;
|
||||
stripePublishableKey: string;
|
||||
paypalClientId?: string | null;
|
||||
privacyHtml: string;
|
||||
}
|
||||
|
||||
type StepId = 'package' | 'auth' | 'payment' | 'success';
|
||||
|
||||
interface WizardUser {
|
||||
id: number;
|
||||
email: string;
|
||||
name?: string;
|
||||
pending_purchase?: boolean;
|
||||
email_verified?: boolean;
|
||||
}
|
||||
|
||||
interface AuthSuccessPayload {
|
||||
status: 'authenticated' | 'registered';
|
||||
user?: WizardUser;
|
||||
next_step?: StepId | 'verification';
|
||||
needs_verification?: boolean;
|
||||
package?: {
|
||||
id: number;
|
||||
name: string;
|
||||
price: number;
|
||||
type: string;
|
||||
} | null;
|
||||
}
|
||||
|
||||
const steps: Array<{ id: StepId; title: string; description: string }> = [
|
||||
{ id: 'package', title: 'Paket ausw<73>hlen', description: 'Best<73>tigen Sie Ihr gew<65>hltes Paket' },
|
||||
{ id: 'auth', title: 'Anmelden oder Registrieren', description: 'Erstellen oder melden Sie sich an' },
|
||||
{ id: 'payment', title: 'Zahlung', description: 'Sichern Sie Ihr Paket ab' },
|
||||
{ id: 'success', title: 'Erfolg', description: 'Willkommen!' },
|
||||
];
|
||||
|
||||
export default function PurchaseWizard({
|
||||
package: initialPackage,
|
||||
stripePublishableKey,
|
||||
paypalClientId,
|
||||
privacyHtml,
|
||||
}: PurchaseWizardProps) {
|
||||
const { t } = useTranslation(['marketing', 'auth']);
|
||||
const { props } = usePage();
|
||||
const serverUser = (props as any)?.auth?.user ?? null;
|
||||
|
||||
const [currentStepIndex, setCurrentStepIndex] = useState(0);
|
||||
const [authType, setAuthType] = useState<'register' | 'login'>('register');
|
||||
const [wizardUser, setWizardUser] = useState<WizardUser | null>(serverUser);
|
||||
const [authNotice, setAuthNotice] = useState<string | null>(null);
|
||||
|
||||
const isAuthenticated = Boolean(wizardUser);
|
||||
|
||||
useEffect(() => {
|
||||
if (serverUser) {
|
||||
setWizardUser(serverUser);
|
||||
}
|
||||
}, [serverUser ? serverUser.id : null]);
|
||||
|
||||
const stripePromise = useMemo(() => loadStripe(stripePublishableKey), [stripePublishableKey]);
|
||||
|
||||
const goToStep = useCallback((stepId: StepId) => {
|
||||
const idx = steps.findIndex((step) => step.id === stepId);
|
||||
if (idx >= 0) {
|
||||
setCurrentStepIndex(idx);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleContinue = useCallback(() => {
|
||||
let nextIndex = Math.min(currentStepIndex + 1, steps.length - 1);
|
||||
if (steps[nextIndex]?.id === 'auth' && isAuthenticated) {
|
||||
nextIndex = Math.min(nextIndex + 1, steps.length - 1);
|
||||
}
|
||||
setCurrentStepIndex(nextIndex);
|
||||
}, [currentStepIndex, isAuthenticated]);
|
||||
|
||||
const handleBack = useCallback(() => {
|
||||
let nextIndex = Math.max(currentStepIndex - 1, 0);
|
||||
if (steps[nextIndex]?.id === 'auth' && isAuthenticated) {
|
||||
nextIndex = Math.max(nextIndex - 1, 0);
|
||||
}
|
||||
setCurrentStepIndex(nextIndex);
|
||||
}, [currentStepIndex, isAuthenticated]);
|
||||
|
||||
const handleAuthSuccess = useCallback(
|
||||
(payload: AuthSuccessPayload) => {
|
||||
if (payload?.user) {
|
||||
setWizardUser(payload.user);
|
||||
}
|
||||
|
||||
if (payload?.needs_verification) {
|
||||
setAuthNotice(t('auth:verify_notice', { defaultValue: 'Bitte best<73>tige deine E-Mail-Adresse, um fortzufahren.' }));
|
||||
} else {
|
||||
setAuthNotice(null);
|
||||
}
|
||||
|
||||
const next = payload?.next_step;
|
||||
if (next === 'success') {
|
||||
goToStep('success');
|
||||
} else {
|
||||
goToStep('payment');
|
||||
}
|
||||
},
|
||||
[goToStep, t],
|
||||
);
|
||||
|
||||
const handlePaymentSuccess = useCallback(() => {
|
||||
goToStep('success');
|
||||
}, [goToStep]);
|
||||
|
||||
const renderPackageStep = () => (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{initialPackage.name}</CardTitle>
|
||||
<CardDescription>{initialPackage.description}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p>
|
||||
{t('marketing:payment.price_label', { defaultValue: 'Preis' })}:
|
||||
{' '}
|
||||
{initialPackage.price === 0
|
||||
? t('marketing:payment.free', { defaultValue: 'Kostenlos' })
|
||||
: new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(initialPackage.price)}
|
||||
</p>
|
||||
<ul className="list-disc pl-5 mt-4 space-y-1">
|
||||
{initialPackage.features.map((feature, index) => (
|
||||
<li key={index}>{feature}</li>
|
||||
))}
|
||||
</ul>
|
||||
<Button onClick={handleContinue} className="w-full mt-6">
|
||||
{t('marketing:payment.continue', { defaultValue: 'Weiter' })}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
const renderAuthStep = () => {
|
||||
if (isAuthenticated) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('auth:already_authenticated', { defaultValue: 'Bereits angemeldet' })}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Alert>
|
||||
<AlertDescription>
|
||||
{t('auth:logged_in_as', {
|
||||
defaultValue: 'Du bist angemeldet als {{email}}.',
|
||||
email: wizardUser?.email ?? wizardUser?.name ?? t('auth:user', { defaultValue: 'aktueller Nutzer' }),
|
||||
})}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
{authNotice && (
|
||||
<Alert>
|
||||
<AlertDescription>{authNotice}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
<Button onClick={() => goToStep('payment')} className="w-full">
|
||||
{t('auth:skip_to_payment', { defaultValue: 'Weiter zur Zahlung' })}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-center gap-3">
|
||||
<Button
|
||||
variant={authType === 'register' ? 'default' : 'outline'}
|
||||
onClick={() => {
|
||||
setAuthType('register');
|
||||
setAuthNotice(null);
|
||||
}}
|
||||
>
|
||||
{t('auth:register.title', { defaultValue: 'Registrieren' })}
|
||||
</Button>
|
||||
<Button
|
||||
variant={authType === 'login' ? 'default' : 'outline'}
|
||||
onClick={() => {
|
||||
setAuthType('login');
|
||||
setAuthNotice(null);
|
||||
}}
|
||||
>
|
||||
{t('auth:login.title', { defaultValue: 'Anmelden' })}
|
||||
</Button>
|
||||
</div>
|
||||
{authNotice && (
|
||||
<Alert>
|
||||
<AlertDescription>{authNotice}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
{authType === 'register' ? (
|
||||
<RegisterForm
|
||||
packageId={initialPackage.id}
|
||||
privacyHtml={privacyHtml}
|
||||
onSuccess={handleAuthSuccess}
|
||||
/>
|
||||
) : (
|
||||
<LoginForm onSuccess={handleAuthSuccess} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderPaymentStep = () => (
|
||||
<div className="space-y-4">
|
||||
{isAuthenticated && (
|
||||
<Alert>
|
||||
<AlertDescription>
|
||||
{t('marketing:payment.authenticated_notice', {
|
||||
defaultValue: 'Angemeldet als {{email}}. Zahlungsmethode ausw<73>hlen.',
|
||||
email: wizardUser?.email ?? wizardUser?.name ?? t('auth:user', { defaultValue: 'aktueller Nutzer' }),
|
||||
})}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
{authNotice && (
|
||||
<Alert>
|
||||
<AlertDescription>{authNotice}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
<PaymentForm
|
||||
packageId={initialPackage.id}
|
||||
packageName={initialPackage.name}
|
||||
price={initialPackage.price}
|
||||
currency="EUR"
|
||||
stripePromise={stripePromise}
|
||||
paypalClientId={paypalClientId}
|
||||
onSuccess={handlePaymentSuccess}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderSuccessStep = () => <SuccessStep package={initialPackage} />;
|
||||
|
||||
const currentStep = steps[currentStepIndex];
|
||||
|
||||
const renderStepContent = () => {
|
||||
switch (currentStep.id) {
|
||||
case 'package':
|
||||
return renderPackageStep();
|
||||
case 'auth':
|
||||
return renderAuthStep();
|
||||
case 'payment':
|
||||
return renderPaymentStep();
|
||||
case 'success':
|
||||
return renderSuccessStep();
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<MarketingLayout title={t('marketing:payment.wizard_title', { defaultValue: 'Kauf-Wizard' })}>
|
||||
<Head title={t('marketing:payment.wizard_title', { defaultValue: 'Kauf-Wizard' })} />
|
||||
<div className="min-h-screen bg-gray-50 py-12">
|
||||
<div className="max-w-2xl mx-auto px-4">
|
||||
<Progress value={(currentStepIndex / (steps.length - 1)) * 100} className="mb-6" />
|
||||
<Steps steps={steps} currentStep={currentStepIndex} />
|
||||
{renderStepContent()}
|
||||
{currentStep.id !== 'success' && currentStep.id !== 'package' && (
|
||||
<div className="mt-6">
|
||||
<Button variant="outline" onClick={handleBack}>
|
||||
{t('marketing:payment.back', { defaultValue: 'Zur<75>ck' })}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</MarketingLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user