funktionierender stand, purchasewizard noch nicht optimiert.
This commit is contained in:
Codex Agent
@@ -1,450 +1,112 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { Elements, CardElement, useElements, useStripe } from '@stripe/react-stripe-js';
|
||||
import type { Stripe as StripeInstance } from '@stripe/stripe-js';
|
||||
import React from 'react';
|
||||
import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';
|
||||
import { useForm } from '@inertiajs/react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
|
||||
type StripePromise = Promise<StripeInstance | null>;
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
|
||||
interface PaymentFormProps {
|
||||
packageId: number;
|
||||
packageName: string;
|
||||
price: number;
|
||||
currency?: string;
|
||||
stripePromise: StripePromise;
|
||||
paypalClientId?: string | null;
|
||||
onSuccess: () => void;
|
||||
onSuccess?: () => void;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
paypal?: any;
|
||||
}
|
||||
}
|
||||
|
||||
const formatCurrency = (value: number, currency = 'EUR') =>
|
||||
new Intl.NumberFormat('de-DE', {
|
||||
style: 'currency',
|
||||
currency,
|
||||
}).format(value);
|
||||
|
||||
const getCsrfToken = () =>
|
||||
(document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement | null)?.content ?? '';
|
||||
|
||||
async function postJson<T>(url: string, body: unknown, csrfToken: string): Promise<T> {
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
'X-CSRF-TOKEN': csrfToken,
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
if (response.status === 204) {
|
||||
return {} as T;
|
||||
}
|
||||
|
||||
const data = await response.json().catch(() => ({}));
|
||||
|
||||
if (!response.ok) {
|
||||
const message = (data as { message?: string; error?: string }).message ?? (data as { message?: string; error?: string }).error ?? 'Request failed.';
|
||||
throw new Error(message);
|
||||
}
|
||||
|
||||
return data as T;
|
||||
}
|
||||
|
||||
export default function PaymentForm({
|
||||
packageId,
|
||||
packageName,
|
||||
price,
|
||||
currency = 'EUR',
|
||||
stripePromise,
|
||||
paypalClientId,
|
||||
onSuccess,
|
||||
}: PaymentFormProps) {
|
||||
const { t } = useTranslation('marketing');
|
||||
const csrfToken = useMemo(getCsrfToken, []);
|
||||
const [provider, setProvider] = useState<'stripe' | 'paypal'>('stripe');
|
||||
const [statusMessage, setStatusMessage] = useState<string | null>(null);
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
const [freeStatus, setFreeStatus] = useState<'idle' | 'loading' | 'done' | 'error'>('idle');
|
||||
|
||||
useEffect(() => {
|
||||
setErrorMessage(null);
|
||||
setStatusMessage(null);
|
||||
}, [provider]);
|
||||
|
||||
useEffect(() => {
|
||||
if (price === 0 && freeStatus === 'idle') {
|
||||
const assignFree = async () => {
|
||||
try {
|
||||
setFreeStatus('loading');
|
||||
await postJson<{ status: string }>('/purchase/free', { package_id: packageId }, csrfToken);
|
||||
setFreeStatus('done');
|
||||
setStatusMessage(
|
||||
t('payment.free_assigned', {
|
||||
defaultValue: 'Kostenloses Paket wurde zugewiesen.',
|
||||
package: packageName,
|
||||
})
|
||||
);
|
||||
onSuccess();
|
||||
} catch (error) {
|
||||
setFreeStatus('error');
|
||||
setErrorMessage((error as Error).message ?? 'Free package assignment failed.');
|
||||
}
|
||||
};
|
||||
|
||||
assignFree();
|
||||
}
|
||||
}, [csrfToken, freeStatus, onSuccess, packageId, packageName, price, t]);
|
||||
|
||||
if (price === 0) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('payment.title', { defaultValue: 'Zahlung' })}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{freeStatus === 'loading' && (
|
||||
<div className="flex items-center space-x-2 text-sm text-gray-600">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<span>{t('payment.processing_free', { defaultValue: 'Paket wird freigeschaltet <20>' })}</span>
|
||||
</div>
|
||||
)}
|
||||
{statusMessage && (
|
||||
<Alert variant="success">
|
||||
<AlertDescription>{statusMessage}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
{errorMessage && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>{errorMessage}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('payment.title', { defaultValue: 'Zahlung' })}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="flex items-center justify-between flex-wrap gap-3">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">{t('payment.total_due', { defaultValue: 'Gesamtbetrag' })}</p>
|
||||
<p className="text-lg font-semibold">{formatCurrency(price, currency)}</p>
|
||||
</div>
|
||||
<div className="inline-flex rounded-md shadow-sm" role="group">
|
||||
<Button
|
||||
type="button"
|
||||
variant={provider === 'stripe' ? 'default' : 'outline'}
|
||||
onClick={() => setProvider('stripe')}
|
||||
>
|
||||
Stripe
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant={provider === 'paypal' ? 'default' : 'outline'}
|
||||
onClick={() => setProvider('paypal')}
|
||||
>
|
||||
PayPal
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{provider === 'stripe' ? (
|
||||
<Elements stripe={stripePromise} options={{ appearance: { theme: 'stripe' } }}>
|
||||
<StripeCardForm
|
||||
packageId={packageId}
|
||||
csrfToken={csrfToken}
|
||||
amountLabel={formatCurrency(price, currency)}
|
||||
onSuccess={() => {
|
||||
setStatusMessage(t('payment.success_stripe', { defaultValue: 'Stripe-Zahlung erfolgreich.' }));
|
||||
onSuccess();
|
||||
}}
|
||||
onError={(message) => setErrorMessage(message)}
|
||||
/>
|
||||
</Elements>
|
||||
) : (
|
||||
<PayPalSection
|
||||
packageId={packageId}
|
||||
amount={price}
|
||||
currency={currency}
|
||||
clientId={paypalClientId}
|
||||
csrfToken={csrfToken}
|
||||
onSuccess={() => {
|
||||
setStatusMessage(t('payment.success_paypal', { defaultValue: 'PayPal-Zahlung erfolgreich.' }));
|
||||
onSuccess();
|
||||
}}
|
||||
onError={(message) => setErrorMessage(message)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{statusMessage && (
|
||||
<Alert variant="success">
|
||||
<AlertDescription>{statusMessage}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{errorMessage && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>{errorMessage}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
interface StripeCardFormProps {
|
||||
packageId: number;
|
||||
csrfToken: string;
|
||||
amountLabel: string;
|
||||
onSuccess: () => void;
|
||||
onError: (message: string) => void;
|
||||
}
|
||||
|
||||
const StripeCardForm: React.FC<StripeCardFormProps> = ({ packageId, csrfToken, amountLabel, onSuccess, onError }) => {
|
||||
const { t } = useTranslation('marketing');
|
||||
export default function PaymentForm({ packageId, onSuccess }: PaymentFormProps) {
|
||||
const stripe = useStripe();
|
||||
const elements = useElements();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [localError, setLocalError] = useState<string | null>(null);
|
||||
const { t } = useTranslation('marketing');
|
||||
const { data, setData, post, processing, errors, setError } = useForm({
|
||||
package_id: packageId,
|
||||
payment_method_id: '',
|
||||
});
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!stripe || !elements) {
|
||||
return;
|
||||
}
|
||||
|
||||
const cardElement = elements.getElement(CardElement);
|
||||
|
||||
if (!cardElement) {
|
||||
setLocalError('Card element not found.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
setLocalError(null);
|
||||
|
||||
const { client_secret: clientSecret, payment_intent_id: paymentIntentId } = await postJson<{
|
||||
client_secret: string;
|
||||
payment_intent_id: string;
|
||||
}>('/purchase/stripe/intent', { package_id: packageId }, csrfToken);
|
||||
|
||||
const confirmation = await stripe.confirmCardPayment(clientSecret, {
|
||||
payment_method: {
|
||||
card: cardElement,
|
||||
},
|
||||
});
|
||||
|
||||
if (confirmation.error) {
|
||||
throw new Error(confirmation.error.message || 'Card confirmation failed.');
|
||||
}
|
||||
|
||||
if (confirmation.paymentIntent?.status !== 'succeeded') {
|
||||
throw new Error('Stripe did not confirm the payment.');
|
||||
}
|
||||
|
||||
await postJson('/purchase/stripe/complete', {
|
||||
package_id: packageId,
|
||||
payment_intent_id: confirmation.paymentIntent.id || paymentIntentId,
|
||||
}, csrfToken);
|
||||
|
||||
onSuccess();
|
||||
} catch (error) {
|
||||
const message = (error as Error).message || 'Stripe payment failed.';
|
||||
setLocalError(message);
|
||||
onError(message);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="card-element" className="text-sm font-medium">
|
||||
{t('payment.card_details', { defaultValue: 'Kartendaten' })}
|
||||
</label>
|
||||
<div className="p-3 border border-gray-300 rounded-md">
|
||||
<CardElement
|
||||
options={{
|
||||
hidePostalCode: true,
|
||||
style: {
|
||||
base: {
|
||||
fontSize: '16px',
|
||||
color: '#424770',
|
||||
'::placeholder': {
|
||||
color: '#aab7c4',
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{localError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>{localError}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
<Button type="submit" className="w-full" disabled={!stripe || isSubmitting}>
|
||||
{isSubmitting && <Loader2 className="h-4 w-4 animate-spin mr-2" />}
|
||||
{t('payment.submit', {
|
||||
defaultValue: 'Jetzt bezahlen',
|
||||
price: amountLabel,
|
||||
})}
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
interface PayPalSectionProps {
|
||||
packageId: number;
|
||||
amount: number;
|
||||
currency: string;
|
||||
clientId?: string | null;
|
||||
csrfToken: string;
|
||||
onSuccess: () => void;
|
||||
onError: (message: string) => void;
|
||||
}
|
||||
|
||||
const PayPalSection: React.FC<PayPalSectionProps> = ({
|
||||
packageId,
|
||||
amount,
|
||||
currency,
|
||||
clientId,
|
||||
csrfToken,
|
||||
onSuccess,
|
||||
onError,
|
||||
}) => {
|
||||
const { t } = useTranslation('marketing');
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
const [isSdkReady, setIsSdkReady] = useState(false);
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
const [localError, setLocalError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!clientId) {
|
||||
const message = t('payment.paypal_missing_key', { defaultValue: 'PayPal ist derzeit nicht konfiguriert.' });
|
||||
setLocalError(message);
|
||||
onError(message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (window.paypal) {
|
||||
setIsSdkReady(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const script = document.createElement('script');
|
||||
script.src = `https://www.paypal.com/sdk/js?client-id=${clientId}¤cy=${currency}&intent=capture&components=buttons`;
|
||||
script.async = true;
|
||||
script.onload = () => setIsSdkReady(true);
|
||||
script.onerror = () => {
|
||||
const message = t('payment.paypal_sdk_failed', { defaultValue: 'PayPal-SDK konnte nicht geladen werden.' });
|
||||
setLocalError(message);
|
||||
onError(message);
|
||||
};
|
||||
document.body.appendChild(script);
|
||||
|
||||
return () => {
|
||||
script.remove();
|
||||
};
|
||||
}, [clientId, currency, onError, t]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isSdkReady || !window.paypal || !containerRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
const buttons = window.paypal.Buttons({
|
||||
style: {
|
||||
layout: 'vertical',
|
||||
color: 'gold',
|
||||
shape: 'rect',
|
||||
},
|
||||
createOrder: async () => {
|
||||
try {
|
||||
setIsProcessing(true);
|
||||
const { order_id: orderId } = await postJson<{ order_id: string }>('/purchase/paypal/order', {
|
||||
package_id: packageId,
|
||||
}, csrfToken);
|
||||
return orderId;
|
||||
} catch (error) {
|
||||
const message = (error as Error).message || 'PayPal order creation failed.';
|
||||
setLocalError(message);
|
||||
onError(message);
|
||||
setIsProcessing(false);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
onApprove: async (data: { orderID: string }) => {
|
||||
try {
|
||||
await postJson('/purchase/paypal/capture', {
|
||||
order_id: data.orderID,
|
||||
package_id: packageId,
|
||||
}, csrfToken);
|
||||
setIsProcessing(false);
|
||||
setLocalError(null);
|
||||
onSuccess();
|
||||
} catch (error) {
|
||||
const message = (error as Error).message || 'PayPal capture failed.';
|
||||
setLocalError(message);
|
||||
onError(message);
|
||||
setIsProcessing(false);
|
||||
}
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
const message = error?.message || 'PayPal payment failed.';
|
||||
setLocalError(message);
|
||||
onError(message);
|
||||
setIsProcessing(false);
|
||||
},
|
||||
const { error, paymentMethod } = await stripe.createPaymentMethod({
|
||||
type: 'card',
|
||||
card: cardElement,
|
||||
});
|
||||
|
||||
buttons.render(containerRef.current);
|
||||
if (error) {
|
||||
setError('payment', error.message || 'Payment failed');
|
||||
return;
|
||||
}
|
||||
|
||||
return () => {
|
||||
try {
|
||||
buttons.close();
|
||||
} catch (error) {
|
||||
// ignore close errors
|
||||
}
|
||||
};
|
||||
}, [csrfToken, isSdkReady, onError, onSuccess, packageId]);
|
||||
setData('payment_method_id', paymentMethod.id);
|
||||
|
||||
const { error: confirmError } = await stripe.confirmCardPayment('/api/purchase/payment-intent', {
|
||||
payment_method: paymentMethod.id,
|
||||
});
|
||||
|
||||
if (confirmError) {
|
||||
setError('payment', confirmError.message || 'Payment confirmation failed');
|
||||
return;
|
||||
}
|
||||
|
||||
post('/api/purchase/complete', {
|
||||
package_id: packageId,
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
if (onSuccess) {
|
||||
onSuccess();
|
||||
}
|
||||
},
|
||||
onError: (err) => {
|
||||
setError('payment', err.payment || 'Payment error');
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
if (!stripe || !elements) {
|
||||
return <div>Loading Stripe...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div ref={containerRef} />
|
||||
{isProcessing && (
|
||||
<div className="flex items-center space-x-2 text-sm text-gray-600">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<span>{t('payment.processing_paypal', { defaultValue: 'PayPal-Zahlung wird verarbeitet <20>' })}</span>
|
||||
</div>
|
||||
)}
|
||||
{localError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>{localError}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
<p className="text-xs text-gray-500">
|
||||
{t('payment.paypal_hint', {
|
||||
defaultValue: 'Der Betrag von {{amount}} wird bei PayPal angezeigt.',
|
||||
amount: formatCurrency(amount, currency),
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('payment.title')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="card-element" className="text-sm font-medium">
|
||||
{t('payment.card_details')}
|
||||
</label>
|
||||
<div className="p-3 border border-gray-300 rounded-md">
|
||||
<CardElement
|
||||
options={{
|
||||
style: {
|
||||
base: {
|
||||
fontSize: '16px',
|
||||
color: '#424770',
|
||||
'::placeholder': {
|
||||
color: '#aab7c4',
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{errors.payment && <Alert variant="destructive"><AlertDescription>{errors.payment}</AlertDescription></Alert>}
|
||||
</div>
|
||||
<Button type="submit" className="w-full" disabled={!stripe || processing}>
|
||||
{processing ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : null}
|
||||
{t('payment.submit', { price: 'XX €' })} {/* Replace with actual price */}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
}
|
||||
@@ -1,17 +1,18 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { Head, usePage } from '@inertiajs/react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Head, useForm, usePage, router } from '@inertiajs/react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Elements } from '@stripe/react-stripe-js';
|
||||
import { loadStripe } from '@stripe/stripe-js';
|
||||
import { Steps } from '@/components/ui/steps';
|
||||
import { Steps } from '@/components/ui/steps'; // Assume Shadcn Steps component; add if needed via shadcn
|
||||
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 { Loader2 } from 'lucide-react';
|
||||
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
|
||||
import RegisterForm from '../auth/RegisterForm';
|
||||
import LoginForm from '../auth/LoginForm';
|
||||
import PaymentForm from './PaymentForm';
|
||||
import SuccessStep from './SuccessStep';
|
||||
import RegisterForm from '../auth/RegisterForm'; // Extract Register form to separate component
|
||||
import LoginForm from '../auth/LoginForm'; // Extract Login form
|
||||
import PaymentForm from './PaymentForm'; // New component for Stripe payment
|
||||
import SuccessStep from './SuccessStep'; // New component for success
|
||||
|
||||
interface Package {
|
||||
id: number;
|
||||
@@ -19,279 +20,144 @@ interface Package {
|
||||
description: string;
|
||||
price: number;
|
||||
features: string[];
|
||||
// Add other fields as needed
|
||||
}
|
||||
|
||||
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' },
|
||||
const steps = [
|
||||
{ id: 'package', title: 'Paket auswählen', description: 'Bestätigen Sie Ihr gewä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) {
|
||||
export default function PurchaseWizard({ package: initialPackage, stripePublishableKey, privacyHtml }: PurchaseWizardProps) {
|
||||
const [currentStep, setCurrentStep] = useState(0);
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||
const [authType, setAuthType] = useState<'register' | 'login'>('register'); // Toggle for auth step
|
||||
const [wizardData, setWizardData] = useState({ package: initialPackage, user: null });
|
||||
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);
|
||||
const { auth } = props as any;
|
||||
|
||||
useEffect(() => {
|
||||
if (serverUser) {
|
||||
setWizardUser(serverUser);
|
||||
if (auth.user) {
|
||||
setIsAuthenticated(true);
|
||||
setCurrentStep(2); // Skip to payment if already logged in
|
||||
}
|
||||
}, [serverUser ? serverUser.id : null]);
|
||||
}, [auth]);
|
||||
|
||||
const stripePromise = useMemo(() => loadStripe(stripePublishableKey), [stripePublishableKey]);
|
||||
const stripePromise = loadStripe(stripePublishableKey);
|
||||
|
||||
const goToStep = useCallback((stepId: StepId) => {
|
||||
const idx = steps.findIndex((step) => step.id === stepId);
|
||||
if (idx >= 0) {
|
||||
setCurrentStepIndex(idx);
|
||||
const nextStep = () => {
|
||||
if (currentStep < steps.length - 1) {
|
||||
setCurrentStep((prev) => prev + 1);
|
||||
}
|
||||
}, []);
|
||||
|
||||
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 prevStep = () => {
|
||||
if (currentStep > 0) {
|
||||
setCurrentStep((prev) => prev - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const renderSuccessStep = () => <SuccessStep package={initialPackage} />;
|
||||
const handleAuthSuccess = (userData: any) => {
|
||||
setWizardData((prev) => ({ ...prev, user: userData }));
|
||||
setIsAuthenticated(true);
|
||||
nextStep(); // Proceed to payment or success
|
||||
};
|
||||
|
||||
const currentStep = steps[currentStepIndex];
|
||||
const handlePaymentSuccess = () => {
|
||||
// Call API to assign package
|
||||
router.post('/api/purchase/complete', { package_id: initialPackage.id }, {
|
||||
onSuccess: () => nextStep(),
|
||||
});
|
||||
};
|
||||
|
||||
const renderStepContent = () => {
|
||||
switch (currentStep.id) {
|
||||
switch (steps[currentStep].id) {
|
||||
case 'package':
|
||||
return renderPackageStep();
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{initialPackage.name}</CardTitle>
|
||||
<CardDescription>{initialPackage.description}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p>Preis: {initialPackage.price === 0 ? 'Kostenlos' : `${initialPackage.price} €`}</p>
|
||||
<ul>
|
||||
{initialPackage.features.map((feature, index) => (
|
||||
<li key={index}>{feature}</li>
|
||||
))}
|
||||
</ul>
|
||||
<Button onClick={nextStep} className="w-full mt-4">Weiter</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
case 'auth':
|
||||
return renderAuthStep();
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-center mb-4">
|
||||
<Button
|
||||
variant={authType === 'register' ? 'default' : 'outline'}
|
||||
onClick={() => setAuthType('register')}
|
||||
>
|
||||
Registrieren
|
||||
</Button>
|
||||
<Button
|
||||
variant={authType === 'login' ? 'default' : 'outline'}
|
||||
onClick={() => setAuthType('login')}
|
||||
className="ml-2"
|
||||
>
|
||||
Anmelden
|
||||
</Button>
|
||||
</div>
|
||||
{authType === 'register' ? (
|
||||
<RegisterForm onSuccess={handleAuthSuccess} packageId={initialPackage.id} privacyHtml={privacyHtml} />
|
||||
) : (
|
||||
<LoginForm onSuccess={handleAuthSuccess} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
case 'payment':
|
||||
return renderPaymentStep();
|
||||
if (initialPackage.price === 0) {
|
||||
// Skip for free, assign directly
|
||||
router.post('/api/purchase/free', { package_id: initialPackage.id });
|
||||
return <div>Free package assigned! Redirecting...</div>;
|
||||
}
|
||||
return (
|
||||
<Elements stripe={stripePromise}>
|
||||
<PaymentForm packageId={initialPackage.id} onSuccess={handlePaymentSuccess} />
|
||||
</Elements>
|
||||
);
|
||||
case 'success':
|
||||
return renderSuccessStep();
|
||||
return <SuccessStep package={initialPackage} />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<MarketingLayout title={t('marketing:payment.wizard_title', { defaultValue: 'Kauf-Wizard' })}>
|
||||
<Head title={t('marketing:payment.wizard_title', { defaultValue: 'Kauf-Wizard' })} />
|
||||
<MarketingLayout title="Kauf-Wizard">
|
||||
<Head title="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} />
|
||||
<Progress value={(currentStep / (steps.length - 1)) * 100} className="mb-6" />
|
||||
<Steps steps={steps} currentStep={currentStep} />
|
||||
{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>
|
||||
{currentStep > 0 && currentStep < 3 && (
|
||||
<div className="flex justify-between mt-6">
|
||||
<Button variant="outline" onClick={prevStep}>Zurück</Button>
|
||||
{currentStep < 3 && <Button onClick={nextStep}>Weiter</Button>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</MarketingLayout>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user