soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implementierung des Checkout-Logins mit E-Mail/Username-Support

Browse Source
This commit is contained in:
Codex Agent
2025-10-08 21:57:46 +02:00
parent cee279cbab
commit 417b1da484
25 changed files with 730 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
resources/js/pages/marketing/checkout/CheckoutWizard.tsx
View File

@@ -1,4 +1,5 @@
import React, { useMemo } from "react";
import { useTranslation } from 'react-i18next';
import { Steps } from "@/components/ui/Steps";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
@@ -23,36 +24,45 @@ interface CheckoutWizardProps {
initialStep?: CheckoutStepId;
}
const stepConfig: { id: CheckoutStepId; title: string; description: string; details: string }[] = [
const baseStepConfig: { id: CheckoutStepId; titleKey: string; descriptionKey: string; detailsKey: string }[] = [
{
id: "package",
title: "Paket wählen",
description: "Auswahl und Vergleich",
details: "Wähle das passende Paket für deine Bedürfnisse"
titleKey: 'checkout.package_step.title',
descriptionKey: 'checkout.package_step.subtitle',
detailsKey: 'checkout.package_step.description'
},
{
id: "auth",
title: "Konto einrichten",
description: "Login oder Registrierung",
details: "Erstelle ein Konto oder melde dich an"
titleKey: 'checkout.auth_step.title',
descriptionKey: 'checkout.auth_step.subtitle',
detailsKey: 'checkout.auth_step.description'
},
{
id: "payment",
title: "Bezahlung",
description: "Sichere Zahlung",
details: "Gib deine Zahlungsdaten ein"
titleKey: 'checkout.payment_step.title',
descriptionKey: 'checkout.payment_step.subtitle',
detailsKey: 'checkout.payment_step.description'
},
{
id: "confirmation",
title: "Fertig!",
description: "Zugang aktiv",
details: "Dein Paket ist aktiviert"
titleKey: 'checkout.confirmation_step.title',
descriptionKey: 'checkout.confirmation_step.subtitle',
detailsKey: 'checkout.confirmation_step.description'
},
];
const WizardBody: React.FC<{ stripePublishableKey: string; privacyHtml: string }> = ({ stripePublishableKey, privacyHtml }) => {
const { t } = useTranslation('marketing');
const { currentStep, nextStep, previousStep } = useCheckoutWizard();
const stepConfig = useMemo(() =>
baseStepConfig.map(step => ({
id: step.id,
title: t(step.titleKey),
description: t(step.descriptionKey),
details: t(step.detailsKey),
})),
[t]
);
const currentIndex = useMemo(() => stepConfig.findIndex((step) => step.id === currentStep), [currentStep]);
const progress = useMemo(() => {
@@ -60,7 +70,7 @@ const WizardBody: React.FC<{ stripePublishableKey: string; privacyHtml: string }
return 0;
}
return (currentIndex / (stepConfig.length - 1)) * 100;
}, [currentIndex]);
}, [currentIndex, stepConfig]);
return (
<div className="space-y-8">
@@ -78,10 +88,10 @@ const WizardBody: React.FC<{ stripePublishableKey: string; privacyHtml: string }
<div className="flex items-center justify-between">
<Button variant="ghost" onClick={previousStep} disabled={currentIndex <= 0}>
Zurueck
{t('checkout.back')}
</Button>
<Button onClick={nextStep} disabled={currentIndex >= stepConfig.length - 1}>
Weiter
{t('checkout.next')}
</Button>
</div>
</div>

19
resources/js/pages/marketing/checkout/WizardContext.tsx
View File

@@ -124,14 +124,18 @@ export function CheckoutWizardProvider({
if (savedState) {
try {
const parsed = JSON.parse(savedState);
// Restore state selectively
if (parsed.selectedPackage) dispatch({ type: 'SELECT_PACKAGE', payload: parsed.selectedPackage });
if (parsed.currentStep) dispatch({ type: 'GO_TO_STEP', payload: parsed.currentStep });
if (parsed.selectedPackage && initialPackage && parsed.selectedPackage.id === initialPackage.id && parsed.currentStep !== 'confirmation') {
// Restore state selectively
if (parsed.selectedPackage) dispatch({ type: 'SELECT_PACKAGE', payload: parsed.selectedPackage });
if (parsed.currentStep) dispatch({ type: 'GO_TO_STEP', payload: parsed.currentStep });
} else {
localStorage.removeItem('checkout-wizard-state');
}
} catch (error) {
console.error('Failed to restore checkout state:', error);
}
}
}, []);
}, [initialPackage]);
// Save state to localStorage whenever it changes
useEffect(() => {
@@ -141,6 +145,13 @@ export function CheckoutWizardProvider({
}));
}, [state.selectedPackage, state.currentStep]);
// Clear localStorage when confirmation step is reached
useEffect(() => {
if (state.currentStep === 'confirmation') {
localStorage.removeItem('checkout-wizard-state');
}
}, [state.currentStep]);
const selectPackage = useCallback((pkg: CheckoutPackage) => {
dispatch({ type: 'SELECT_PACKAGE', payload: pkg });
}, []);

14
resources/js/pages/marketing/checkout/steps/AuthStep.tsx
View File

@@ -5,12 +5,14 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { useCheckoutWizard } from "../WizardContext";
import LoginForm, { AuthUserPayload } from "../../../auth/LoginForm";
import RegisterForm, { RegisterSuccessPayload } from "../../../auth/RegisterForm";
import { useTranslation } from 'react-i18next';
interface AuthStepProps {
privacyHtml: string;
}
export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml }) => {
const { t } = useTranslation('marketing');
const page = usePage<{ locale?: string }>();
const locale = page.props.locale ?? "de";
const { isAuthenticated, authUser, setAuthUser, nextStep, selectedPackage } = useCheckoutWizard();
@@ -48,14 +50,14 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml }) => {
return (
<div className="space-y-6">
<Alert>
<AlertTitle>Bereits eingeloggt</AlertTitle>
<AlertTitle>{t('checkout.auth_step.already_logged_in_title')}</AlertTitle>
<AlertDescription>
{authUser.email ? `Sie sind als ${authUser.email} angemeldet.` : "Sie sind bereits angemeldet."}
{t('checkout.auth_step.already_logged_in_desc', { email: authUser?.email || '' })}
</AlertDescription>
</Alert>
<div className="flex justify-end">
<Button size="lg" onClick={nextStep}>
Weiter zur Zahlung
{t('checkout.auth_step.next_to_payment')}
</Button>
</div>
</div>
@@ -69,16 +71,16 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml }) => {
variant={mode === 'register' ? 'default' : 'outline'}
onClick={() => setMode('register')}
>
Registrieren
{t('checkout.auth_step.switch_to_register')}
</Button>
<Button
variant={mode === 'login' ? 'default' : 'outline'}
onClick={() => setMode('login')}
>
Anmelden
{t('checkout.auth_step.switch_to_login')}
</Button>
<span className="text-xs text-muted-foreground">
Google Login folgt im Komfort-Delta.
{t('checkout.auth_step.google_coming_soon')}
</span>
</div>

11
resources/js/pages/marketing/checkout/steps/ConfirmationStep.tsx
View File

@@ -2,27 +2,30 @@ import React from "react";
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { useCheckoutWizard } from "../WizardContext";
import { useTranslation } from 'react-i18next';
interface ConfirmationStepProps {
onViewProfile?: () => void;
}
export const ConfirmationStep: React.FC<ConfirmationStepProps> = ({ onViewProfile }) => {
const { t } = useTranslation('marketing');
const { selectedPackage } = useCheckoutWizard();
return (
<div className="space-y-6">
<Alert>
<AlertTitle>Willkommen bei FotoSpiel</AlertTitle>
<AlertTitle>{t('checkout.confirmation_step.welcome')}</AlertTitle>
<AlertDescription>
Ihr Paket "{selectedPackage.name}" ist aktiviert. Wir haben Ihnen eine Bestätigung per E-Mail gesendet.
{t('checkout.confirmation_step.package_activated', { name: selectedPackage?.name || '' })}
{t('checkout.confirmation_step.email_sent')}
</AlertDescription>
</Alert>
<div className="flex flex-wrap gap-3 justify-end">
<Button variant="outline" onClick={onViewProfile}>
Profil oeffnen
{t('checkout.confirmation_step.open_profile')}
</Button>
<Button>Zum Admin-Bereich</Button>
<Button>{t('checkout.confirmation_step.to_admin')}</Button>
</div>
</div>
);

12
resources/js/pages/marketing/checkout/steps/PackageStep.tsx
View File

@@ -1,4 +1,5 @@
import React, { useMemo, useState } from "react";
import { useTranslation } from 'react-i18next';
import { Check, Package as PackageIcon, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -77,6 +78,7 @@ function PackageOption({ pkg, isActive, onSelect }: { pkg: CheckoutPackage; isAc
}
export const PackageStep: React.FC = () => {
const { t } = useTranslation('marketing');
const { selectedPackage, packageOptions, setSelectedPackage, resetPaymentState, nextStep } = useCheckoutWizard();
const [isLoading, setIsLoading] = useState(false);
@@ -85,7 +87,7 @@ export const PackageStep: React.FC = () => {
if (!selectedPackage) {
return (
<div className="text-center py-8">
<p className="text-muted-foreground">Kein Paket ausgewählt. Bitte wähle ein Paket aus der Paketübersicht.</p>
<p className="text-muted-foreground">{t('checkout.package_step.no_package_selected')}</p>
</div>
);
}
@@ -129,17 +131,17 @@ export const PackageStep: React.FC = () => {
{isLoading ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Wird geladen...
{t('checkout.package_step.loading')}
</>
) : (
"Weiter zum Konto"
t('checkout.package_step.next_to_account')
)}
</Button>
</div>
</div>
<aside className="space-y-4">
<h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
Alternative Pakete
{t('checkout.package_step.alternatives_title')}
</h3>
<div className="space-y-3">
{comparablePackages.map((pkg) => (
@@ -152,7 +154,7 @@ export const PackageStep: React.FC = () => {
))}
{comparablePackages.length === 0 && (
<p className="text-xs text-muted-foreground">
Keine weiteren Pakete in dieser Kategorie verfuegbar.
{t('checkout.package_step.no_alternatives')}
</p>
)}
</div>

49
resources/js/pages/marketing/checkout/steps/PaymentStep.tsx
View File

@@ -1,4 +1,5 @@
import { useState, useEffect } from "react";
import { useTranslation } from 'react-i18next';
import { useStripe, useElements, PaymentElement, Elements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
import { Button } from "@/components/ui/button";
@@ -14,6 +15,7 @@ const PaymentForm: React.FC = () => {
const stripe = useStripe();
const elements = useElements();
const { selectedPackage, resetPaymentState, nextStep } = useCheckoutWizard();
const { t } = useTranslation('marketing');
const [isProcessing, setIsProcessing] = useState(false);
const [error, setError] = useState<string>('');
@@ -27,7 +29,7 @@ const PaymentForm: React.FC = () => {
event.preventDefault();
if (!stripe || !elements) {
setError('Stripe ist nicht initialisiert. Bitte Seite neu laden.');
setError(t('checkout.payment_step.stripe_not_loaded'));
return;
}
@@ -46,26 +48,26 @@ const PaymentForm: React.FC = () => {
if (stripeError) {
console.error('Stripe Payment Error:', stripeError);
let errorMessage = 'Zahlung fehlgeschlagen. ';
let errorMessage = t('checkout.payment_step.payment_failed');
switch (stripeError.type) {
case 'card_error':
errorMessage += stripeError.message || 'Kartenfehler aufgetreten.';
errorMessage += stripeError.message || t('checkout.payment_step.error_card');
break;
case 'validation_error':
errorMessage += 'Eingabedaten sind ungültig.';
errorMessage += t('checkout.payment_step.error_validation');
break;
case 'api_connection_error':
errorMessage += 'Verbindungsfehler. Bitte Internetverbindung prüfen.';
errorMessage += t('checkout.payment_step.error_connection');
break;
case 'api_error':
errorMessage += 'Serverfehler. Bitte später erneut versuchen.';
errorMessage += t('checkout.payment_step.error_server');
break;
case 'authentication_error':
errorMessage += 'Authentifizierungsfehler. Bitte Seite neu laden.';
errorMessage += t('checkout.payment_step.error_auth');
break;
default:
errorMessage += stripeError.message || 'Unbekannter Fehler aufgetreten.';
errorMessage += stripeError.message || t('checkout.payment_step.error_unknown');
}
setError(errorMessage);
@@ -78,25 +80,25 @@ const PaymentForm: React.FC = () => {
setTimeout(() => nextStep(), 1000);
break;
case 'processing':
setError('Zahlung wird verarbeitet. Bitte warten...');
setError(t('checkout.payment_step.processing'));
setPaymentStatus('processing');
break;
case 'requires_payment_method':
setError('Zahlungsmethode wird benötigt. Bitte Kartendaten überprüfen.');
setError(t('checkout.payment_step.needs_method'));
setPaymentStatus('failed');
break;
case 'requires_confirmation':
setError('Zahlung muss bestätigt werden.');
setError(t('checkout.payment_step.needs_confirm'));
setPaymentStatus('failed');
break;
default:
setError(`Unerwarteter Zahlungsstatus: ${paymentIntent.status}`);
setError(t('checkout.payment_step.unexpected_status', { status: paymentIntent.status }));
setPaymentStatus('failed');
}
}
} catch (err) {
console.error('Unexpected payment error:', err);
setError('Unerwarteter Fehler aufgetreten. Bitte später erneut versuchen.');
setError(t('checkout.payment_step.error_unknown'));
setPaymentStatus('failed');
} finally {
setIsProcessing(false);
@@ -114,7 +116,7 @@ const PaymentForm: React.FC = () => {
<div className="rounded-lg border bg-card p-6 shadow-sm space-y-4">
<p className="text-sm text-muted-foreground">
Sichere Zahlung mit Kreditkarte, Debitkarte oder SEPA-Lastschrift.
{t('checkout.payment_step.secure_payment_desc')}
</p>
<PaymentElement />
<Button
@@ -123,7 +125,7 @@ const PaymentForm: React.FC = () => {
size="lg"
className="w-full"
>
{isProcessing ? 'Verarbeitung...' : `Jetzt bezahlen (€${selectedPackage?.price || 0})`}
{isProcessing ? t('checkout.payment_step.processing_btn') : t('checkout.payment_step.pay_now', { price: selectedPackage?.price || 0 })}
</Button>
</div>
</form>
@@ -133,13 +135,14 @@ const PaymentForm: React.FC = () => {
// Wrapper-Komponente mit eigenem Elements Provider
export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }) => {
const { t } = useTranslation('marketing');
const { selectedPackage, authUser, nextStep } = useCheckoutWizard();
const [clientSecret, setClientSecret] = useState<string>('');
const [error, setError] = useState<string>('');
const isFree = selectedPackage ? selectedPackage.price <= 0 : false;
// Payment Intent für kostenpflichtige Pakete laden
// Payment Intent für kostenpflichtige Pakete laden
useEffect(() => {
if (isFree || !authUser || !selectedPackage) return;
@@ -168,31 +171,31 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }
setClientSecret(data.client_secret);
setError('');
} else {
const errorMsg = data.error || 'Fehler beim Laden der Zahlungsdaten';
const errorMsg = data.error || t('checkout.payment_step.payment_intent_error');
console.error('Payment Intent Error:', errorMsg);
setError(errorMsg);
}
} catch (err) {
setError('Netzwerkfehler beim Laden der Zahlungsdaten');
setError(t('checkout.payment_step.network_error'));
}
};
loadPaymentIntent();
}, [selectedPackage?.id, authUser, isFree]);
}, [selectedPackage?.id, authUser, isFree, t]);
// Für kostenlose Pakete: Direkte Aktivierung ohne Stripe
if (isFree) {
return (
<div className="space-y-6">
<Alert>
<AlertTitle>Kostenloses Paket</AlertTitle>
<AlertTitle>{t('checkout.payment_step.free_package_title')}</AlertTitle>
<AlertDescription>
Dieses Paket ist kostenlos. Wir aktivieren es direkt nach der Bestätigung.
{t('checkout.payment_step.free_package_desc')}
</AlertDescription>
</Alert>
<div className="flex justify-end">
<Button size="lg" onClick={nextStep}>
Paket aktivieren
{t('checkout.payment_step.activate_package')}
</Button>
</div>
</div>
@@ -210,7 +213,7 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }
)}
<div className="rounded-lg border bg-card p-6 shadow-sm">
<p className="text-sm text-muted-foreground">
Zahlungsdaten werden geladen...
{t('checkout.payment_step.loading_payment')}
</p>
</div>
</div>