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

feat: integrate login/registration into PurchaseWizard

Browse Source
This commit is contained in:
Codex Agent
2025-10-04 21:38:03 +02:00
parent 3c0bbb688b
commit fdaa2bec62
52 changed files with 1477 additions and 732 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
resources/js/pages/auth/LoginForm.tsx
View File

@@ -1,6 +1,7 @@
import React, { useEffect, useState } from 'react';
import { useForm } from '@inertiajs/react';
import { useForm, usePage } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import toast from 'react-hot-toast';
import { LoaderCircle, Mail, Lock } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
@@ -17,6 +18,7 @@ interface LoginFormProps {
export default function LoginForm({ onSuccess, canResetPassword = true }: LoginFormProps) {
const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
const { t } = useTranslation('auth');
const { props } = usePage<{ errors: Record<string, string> }>();
const { data, setData, post, processing, errors, clearErrors, reset } = useForm({
email: '',
@@ -24,6 +26,12 @@ export default function LoginForm({ onSuccess, canResetPassword = true }: LoginF
remember: false,
});
useEffect(() => {
if (hasTriedSubmit && Object.keys(errors).length > 0) {
toast.error(Object.values(errors).join(' '));
}
}, [errors, hasTriedSubmit]);
const submit = (e: React.FormEvent) => {
e.preventDefault();
setHasTriedSubmit(true);

10
resources/js/pages/auth/RegisterForm.tsx
View File

@@ -1,6 +1,7 @@
import React, { useEffect, useState } from 'react';
import { useForm } from '@inertiajs/react';
import { useForm, usePage } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import toast from 'react-hot-toast';
import { LoaderCircle, User, Mail, Phone, Lock, MapPin } from 'lucide-react';
import { Dialog, DialogContent, DialogTitle, DialogDescription } from '@/components/ui/dialog';
@@ -14,6 +15,7 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
const [privacyOpen, setPrivacyOpen] = useState(false);
const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
const { t } = useTranslation(['auth', 'common']);
const { props } = usePage<{ errors: Record<string, string> }>();
const { data, setData, post, processing, errors, clearErrors, reset } = useForm({
username: '',
@@ -28,6 +30,12 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
package_id: packageId || null,
});
useEffect(() => {
if (hasTriedSubmit && Object.keys(errors).length > 0) {
toast.error(Object.values(errors).join(' '));
}
}, [errors, hasTriedSubmit]);
const submit = (e: React.FormEvent) => {
e.preventDefault();
setHasTriedSubmit(true);

2
resources/js/pages/auth/login.tsx
View File

@@ -30,7 +30,7 @@ export default function Login({ status, canResetPassword }: LoginProps) {
const submit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
setHasTriedSubmit(true);
post('/login', {
post(window.location.pathname, {
preserveScroll: true,
});
};

94
resources/js/pages/marketing/PaymentForm.tsx
View File

@@ -1,109 +1,45 @@
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 { Loader2 } from 'lucide-react';
import { Alert, AlertDescription } from '@/components/ui/alert';
interface PaymentFormProps {
packageId: number;
packagePrice: number; // Add price as prop
onSuccess?: () => void;
}
export default function PaymentForm({ packageId, onSuccess }: PaymentFormProps) {
const stripe = useStripe();
const elements = useElements();
export default function PaymentForm({ packageId, packagePrice, onSuccess }: PaymentFormProps) {
const { t } = useTranslation('marketing');
const { data, setData, post, processing, errors, setError } = useForm({
package_id: packageId,
payment_method_id: '',
payment: '', // For error messages
});
const handleSubmit = async (e: React.FormEvent) => {
const handlePaymentSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (!stripe || !elements) {
return;
}
const cardElement = elements.getElement(CardElement);
if (!cardElement) {
return;
}
const { error, paymentMethod } = await stripe.createPaymentMethod({
type: 'card',
card: cardElement,
});
if (error) {
setError('payment', error.message || 'Payment failed');
return;
}
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');
},
});
setError('payment', t('payment.coming_soon') || 'Zahlungssystem wird bald verfügbar sein. Kontaktieren Sie uns für weitere Details.');
};
if (!stripe || !elements) {
return <div>Loading Stripe...</div>;
}
return (
<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>}
<form onSubmit={handlePaymentSubmit} className="space-y-4">
<div className="text-center text-sm text-muted-foreground">
{t('payment.placeholder') || 'Das Zahlungssystem wird bald eingerichtet. Bitte kontaktieren Sie uns für den Kauf des Pakets.'}
</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 */}
<Alert>
<AlertDescription>
{t('payment.contact_us') || 'Kontaktieren Sie uns unter support@fotospiel.de für den Kauf.'}
</AlertDescription>
</Alert>
<Button type="submit" className="w-full" disabled={processing}>
{processing ? 'Wird verarbeitet...' : t('payment.contact') || 'Kontaktieren'}
</Button>
</form>
</CardContent>

108
resources/js/pages/marketing/PurchaseWizard.tsx
View File

@@ -1,9 +1,10 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useCallback } 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'; // Assume Shadcn Steps component; add if needed via shadcn
import { Steps } from '@/components/ui/Steps'; // Correct casing for Shadcn Steps
import { Check } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
@@ -20,9 +21,17 @@ interface Package {
description: string;
price: number;
features: string[];
type?: 'endcustomer' | 'reseller';
trial_days?: number;
// Add other fields as needed
}
interface UserData {
id: number;
email: string;
pending_purchase?: boolean;
}
interface PurchaseWizardProps {
package: Package;
stripePublishableKey: string;
@@ -37,18 +46,80 @@ const steps = [
];
export default function PurchaseWizard({ package: initialPackage, stripePublishableKey, privacyHtml }: PurchaseWizardProps) {
const STORAGE_KEY = 'fotospiel_wizard_state';
const STORAGE_TTL = 30 * 60 * 1000; // 30 minutes in ms
const [currentStep, setCurrentStep] = useState(0);
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [authCompleted, setAuthCompleted] = useState(false);
const [authType, setAuthType] = useState<'register' | 'login'>('register'); // Toggle for auth step
const [wizardData, setWizardData] = useState({ package: initialPackage, user: null });
const [wizardData, setWizardData] = useState<{ package: Package; user: UserData | null }>({ package: initialPackage, user: null });
const { t } = useTranslation(['marketing', 'auth']);
const { props } = usePage();
const { auth } = props as any;
// Load state from sessionStorage on mount
useEffect(() => {
const saved = sessionStorage.getItem(STORAGE_KEY);
if (saved) {
try {
const parsed = JSON.parse(saved);
const { currentStep: savedCurrentStep, wizardData: savedWizardData, isAuthenticated: savedIsAuthenticated, authType: savedAuthType, timestamp } = parsed;
if (Date.now() - timestamp < STORAGE_TTL && savedWizardData?.package?.id === initialPackage.id) {
setCurrentStep(savedCurrentStep || 0);
setWizardData(savedWizardData || { package: initialPackage, user: null });
setIsAuthenticated(savedIsAuthenticated || false);
setAuthType(savedAuthType || 'register');
// If in payment step and pending purchase, reload client_secret if needed
if ((savedCurrentStep || 0) === 2 && savedWizardData?.user?.pending_purchase) {
// Optional: router.reload() or API call to refresh payment intent
}
} else {
sessionStorage.removeItem(STORAGE_KEY);
}
} catch (e) {
console.error('Failed to load wizard state:', e);
sessionStorage.removeItem(STORAGE_KEY);
}
}
}, [initialPackage.id]);
// Save state to sessionStorage on changes
const saveState = useCallback(() => {
const state = {
currentStep,
wizardData: {
package: wizardData.package,
user: wizardData.user ? { id: wizardData.user.id, email: wizardData.user.email, pending_purchase: wizardData.user.pending_purchase } : null,
},
isAuthenticated,
authType,
timestamp: Date.now(),
};
sessionStorage.setItem(STORAGE_KEY, JSON.stringify(state));
}, [currentStep, wizardData, isAuthenticated, authType]);
useEffect(() => {
saveState();
}, [saveState]);
// Cleanup on unmount or success
useEffect(() => {
return () => {
if (currentStep === 3) {
sessionStorage.removeItem(STORAGE_KEY);
}
};
}, [currentStep]);
useEffect(() => {
if (auth.user) {
setIsAuthenticated(true);
setCurrentStep(2); // Skip to payment if already logged in
// Do not skip step, handle in render
// Update wizardData with auth.user if pending_purchase
if (auth.user.pending_purchase) {
setWizardData(prev => ({ ...prev, user: auth.user }));
}
}
}, [auth]);
@@ -69,7 +140,12 @@ export default function PurchaseWizard({ package: initialPackage, stripePublisha
const handleAuthSuccess = (userData: any) => {
setWizardData((prev) => ({ ...prev, user: userData }));
setIsAuthenticated(true);
nextStep(); // Proceed to payment or success
setAuthCompleted(true);
// Show success message briefly then proceed
setTimeout(() => {
nextStep();
setAuthCompleted(false);
}, 2000);
};
const handlePaymentSuccess = () => {
@@ -100,6 +176,26 @@ export default function PurchaseWizard({ package: initialPackage, stripePublisha
</Card>
);
case 'auth':
if (isAuthenticated) {
if (authCompleted) {
return (
<div className="text-center py-8">
<h2 className="text-2xl font-bold mb-4">{t('auth.login_success')}</h2>
<p className="text-gray-600 mb-6">Sie sind nun eingeloggt und werden weitergeleitet...</p>
<Loader2 className="h-6 w-6 animate-spin mx-auto" />
</div>
);
} else {
return (
<div className="text-center py-8">
<h2 className="text-2xl font-bold mb-4">{t('auth.already_logged_in')}</h2>
<Button onClick={nextStep} className="w-full">
Weiter zum Zahlungsschritt
</Button>
</div>
);
}
}
return (
<div>
<div className="flex justify-center mb-4">
@@ -132,7 +228,7 @@ export default function PurchaseWizard({ package: initialPackage, stripePublisha
}
return (
<Elements stripe={stripePromise}>
<PaymentForm packageId={initialPackage.id} onSuccess={handlePaymentSuccess} />
<PaymentForm packageId={initialPackage.id} packagePrice={initialPackage.price} onSuccess={handlePaymentSuccess} />
</Elements>
);
case 'success':