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

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>