codex has reworked checkout, but frontend doesnt work
This commit is contained in:
Codex Agent
@@ -1,259 +1,51 @@
|
||||
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'; // 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';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
|
||||
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
|
||||
import React from "react";
|
||||
import { Head, usePage } from "@inertiajs/react";
|
||||
import MarketingLayout from "@/layouts/marketing/MarketingLayout";
|
||||
import type { CheckoutPackage } from "./checkout/types";
|
||||
import { CheckoutWizard } from "./checkout/CheckoutWizard";
|
||||
|
||||
interface Package {
|
||||
id: number;
|
||||
name: string;
|
||||
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;
|
||||
interface PurchaseWizardPageProps {
|
||||
package: CheckoutPackage;
|
||||
packageOptions: CheckoutPackage[];
|
||||
stripePublishableKey: string;
|
||||
privacyHtml: string;
|
||||
}
|
||||
|
||||
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 PurchaseWizardPage({
|
||||
package: initialPackage,
|
||||
packageOptions,
|
||||
stripePublishableKey,
|
||||
privacyHtml,
|
||||
}: PurchaseWizardPageProps) {
|
||||
const page = usePage<{ auth?: { user?: { id: number; email: string; name?: string } | null } }>();
|
||||
const currentUser = page.props.auth?.user ?? null;
|
||||
|
||||
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: 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);
|
||||
const dedupedOptions = React.useMemo(() => {
|
||||
const ids = new Set<number>();
|
||||
const list = [initialPackage, ...packageOptions];
|
||||
return list.filter((pkg) => {
|
||||
if (ids.has(pkg.id)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}, [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);
|
||||
// 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]);
|
||||
|
||||
const stripePromise = loadStripe(stripePublishableKey);
|
||||
|
||||
const nextStep = () => {
|
||||
if (currentStep < steps.length - 1) {
|
||||
setCurrentStep((prev) => prev + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const prevStep = () => {
|
||||
if (currentStep > 0) {
|
||||
setCurrentStep((prev) => prev - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAuthSuccess = (userData: any) => {
|
||||
setWizardData((prev) => ({ ...prev, user: userData }));
|
||||
setIsAuthenticated(true);
|
||||
setAuthCompleted(true);
|
||||
// Show success message briefly then proceed
|
||||
setTimeout(() => {
|
||||
nextStep();
|
||||
setAuthCompleted(false);
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
const handlePaymentSuccess = () => {
|
||||
// Call API to assign package
|
||||
router.post('/api/purchase/complete', { package_id: initialPackage.id }, {
|
||||
onSuccess: () => nextStep(),
|
||||
ids.add(pkg.id);
|
||||
return true;
|
||||
});
|
||||
};
|
||||
|
||||
const renderStepContent = () => {
|
||||
switch (steps[currentStep].id) {
|
||||
case 'package':
|
||||
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':
|
||||
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">
|
||||
<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':
|
||||
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} packagePrice={initialPackage.price} onSuccess={handlePaymentSuccess} />
|
||||
</Elements>
|
||||
);
|
||||
case 'success':
|
||||
return <SuccessStep package={initialPackage} />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
}, [initialPackage, packageOptions]);
|
||||
|
||||
return (
|
||||
<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={(currentStep / (steps.length - 1)) * 100} className="mb-6" />
|
||||
<Steps steps={steps} currentStep={currentStep} />
|
||||
{renderStepContent()}
|
||||
{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>
|
||||
)}
|
||||
<MarketingLayout title="Checkout Wizard">
|
||||
<Head title="Checkout Wizard" />
|
||||
<div className="min-h-screen bg-muted/20 py-12">
|
||||
<div className="mx-auto w-full max-w-4xl px-4">
|
||||
<CheckoutWizard
|
||||
initialPackage={initialPackage}
|
||||
packageOptions={dedupedOptions}
|
||||
stripePublishableKey={stripePublishableKey}
|
||||
privacyHtml={privacyHtml}
|
||||
initialAuthUser={currentUser ? { id: currentUser.id, email: currentUser.email ?? '', name: currentUser.name ?? undefined } : null}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</MarketingLayout>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user