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

vor marketing zu website umbenennung. stripe ist lauffähig

Browse Source
This commit is contained in:
Codex Agent
2025-10-08 11:20:00 +02:00
parent aa8c6c67c5
commit b3e6b6b597
11 changed files with 597 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,7 +13,7 @@ interface AuthStepProps {
export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml }) => {
const page = usePage<{ locale?: string }>();
const locale = page.props.locale ?? "de";
const { isAuthenticated, authUser, markAuthenticated, nextStep, selectedPackage } = useCheckoutWizard();
const { isAuthenticated, authUser, setAuthUser, nextStep, selectedPackage } = useCheckoutWizard();
const [mode, setMode] = useState<'login' | 'register'>('register');
const handleLoginSuccess = (payload: AuthUserPayload | null) => {
@@ -21,7 +21,7 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml }) => {
return;
}
markAuthenticated({
setAuthUser({
id: payload.id ?? 0,
email: payload.email ?? "",
name: payload.name ?? undefined,
@@ -33,7 +33,7 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml }) => {
const handleRegisterSuccess = (result: RegisterSuccessPayload) => {
const nextUser = result?.user ?? null;
if (nextUser) {
markAuthenticated({
setAuthUser({
id: nextUser.id ?? 0,
email: nextUser.email ?? "",
name: nextUser.name ?? undefined,
@@ -84,12 +84,14 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml }) => {
<div className="rounded-lg border bg-card p-6 shadow-sm">
{mode === 'register' ? (
<RegisterForm
packageId={selectedPackage.id}
privacyHtml={privacyHtml}
locale={locale}
onSuccess={handleRegisterSuccess}
/>
selectedPackage && (
<RegisterForm
packageId={selectedPackage.id}
privacyHtml={privacyHtml}
locale={locale}
onSuccess={handleRegisterSuccess}
/>
)
) : (
<LoginForm
locale={locale}

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

@@ -13,11 +13,13 @@ const currencyFormatter = new Intl.NumberFormat("de-DE", {
});
function PackageSummary({ pkg }: { pkg: CheckoutPackage }) {
const isFree = pkg.price === 0;
return (
<Card className="shadow-sm">
<Card className={`shadow-sm ${isFree ? "opacity-75" : ""}`}>
<CardHeader className="space-y-1">
<CardTitle className="flex items-center gap-3 text-2xl">
<PackageIcon className="h-6 w-6 text-primary" />
<CardTitle className={`flex items-center gap-3 text-2xl ${isFree ? "text-muted-foreground" : ""}`}>
<PackageIcon className={`h-6 w-6 ${isFree ? "text-muted-foreground" : "text-primary"}`} />
{pkg.name}
</CardTitle>
<CardDescription className="text-base text-muted-foreground">
@@ -26,10 +28,10 @@ function PackageSummary({ pkg }: { pkg: CheckoutPackage }) {
</CardHeader>
<CardContent className="space-y-6">
<div className="flex items-baseline gap-2">
<span className="text-3xl font-semibold">
<span className={`text-3xl font-semibold ${isFree ? "text-muted-foreground" : ""}`}>
{pkg.price === 0 ? "Kostenlos" : currencyFormatter.format(pkg.price)}
</span>
<Badge variant="secondary" className="uppercase tracking-wider text-xs">
<Badge variant={isFree ? "outline" : "secondary"} className="uppercase tracking-wider text-xs">
{pkg.type === "reseller" ? "Reseller" : "Endkunde"}
</Badge>
</div>
@@ -37,7 +39,7 @@ function PackageSummary({ pkg }: { pkg: CheckoutPackage }) {
<ul className="space-y-3">
{pkg.features.map((feature, index) => (
<li key={index} className="flex items-start gap-3 text-sm text-muted-foreground">
<Check className="mt-0.5 h-4 w-4 text-primary" />
<Check className={`mt-0.5 h-4 w-4 ${isFree ? "text-muted-foreground" : "text-primary"}`} />
<span>{feature}</span>
</li>
))}
@@ -49,17 +51,23 @@ function PackageSummary({ pkg }: { pkg: CheckoutPackage }) {
}
function PackageOption({ pkg, isActive, onSelect }: { pkg: CheckoutPackage; isActive: boolean; onSelect: () => void }) {
const isFree = pkg.price === 0;
return (
<button
type="button"
onClick={onSelect}
className={`w-full rounded-md border bg-background p-4 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 ${
isActive ? "border-primary shadow-sm" : "border-border hover:border-primary/40"
isActive
? "border-primary shadow-sm"
: isFree
? "border-border hover:border-primary/40 opacity-75 hover:opacity-100"
: "border-border hover:border-primary/40"
}`}
>
<div className="flex items-center justify-between text-sm font-medium">
<span>{pkg.name}</span>
<span className="text-muted-foreground">
<span className={isFree ? "text-muted-foreground" : ""}>{pkg.name}</span>
<span className={isFree ? "text-muted-foreground font-normal" : "text-muted-foreground"}>
{pkg.price === 0 ? "Kostenlos" : currencyFormatter.format(pkg.price)}
</span>
</div>
@@ -72,9 +80,28 @@ export const PackageStep: React.FC = () => {
const { selectedPackage, packageOptions, setSelectedPackage, resetPaymentState, nextStep } = useCheckoutWizard();
const [isLoading, setIsLoading] = useState(false);
// Early return if no package is selected
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>
</div>
);
}
const comparablePackages = useMemo(() => {
return packageOptions.filter((pkg) => pkg.type === selectedPackage.type);
}, [packageOptions, selectedPackage.type]);
// Filter by type and sort: free packages first, then by price ascending
return packageOptions
.filter((pkg: CheckoutPackage) => pkg.type === selectedPackage.type)
.sort((a: CheckoutPackage, b: CheckoutPackage) => {
// Free packages first
if (a.price === 0 && b.price > 0) return -1;
if (a.price > 0 && b.price === 0) return 1;
// Then sort by price ascending
return a.price - b.price;
});
}, [packageOptions, selectedPackage]);
const handlePackageChange = (pkg: CheckoutPackage) => {
if (pkg.id === selectedPackage.id) {

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

@@ -1,62 +1,27 @@
import { useState, useEffect } from "react";
import { useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js';
import { useStripe, useElements, PaymentElement, Elements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useCheckoutWizard } from "../WizardContext";
interface PaymentStepProps {
stripePublishableKey: string;
}
export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }) => {
// Komponente für kostenpflichtige Zahlungen (immer innerhalb Elements Provider)
const PaymentForm: React.FC = () => {
const stripe = useStripe();
const elements = useElements();
const { selectedPackage, authUser, paymentProvider, setPaymentProvider, resetPaymentState, nextStep } = useCheckoutWizard();
const { selectedPackage, resetPaymentState, nextStep } = useCheckoutWizard();
const [clientSecret, setClientSecret] = useState<string>('');
const [isProcessing, setIsProcessing] = useState(false);
const [error, setError] = useState<string>('');
const [paymentStatus, setPaymentStatus] = useState<'idle' | 'processing' | 'succeeded' | 'failed'>('idle');
useEffect(() => {
resetPaymentState();
}, [selectedPackage.id, resetPaymentState]);
const isFree = selectedPackage.price <= 0;
// Payment Intent für kostenpflichtige Pakete laden
useEffect(() => {
if (isFree || !authUser) return;
const loadPaymentIntent = async () => {
try {
const response = await fetch('/stripe/create-payment-intent', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
},
body: JSON.stringify({
package_id: selectedPackage.id,
}),
});
const data = await response.json();
if (response.ok && data.clientSecret) {
setClientSecret(data.clientSecret);
setError('');
} else {
setError(data.error || 'Fehler beim Laden der Zahlungsdaten');
}
} catch (err) {
setError('Netzwerkfehler beim Laden der Zahlungsdaten');
}
};
loadPaymentIntent();
}, [selectedPackage.id, authUser, isFree]);
}, [selectedPackage?.id, resetPaymentState]);
const handleSubmit = async (event: React.FormEvent) => {
event.preventDefault();
@@ -66,11 +31,6 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }
return;
}
if (!clientSecret) {
setError('Zahlungsdaten konnten nicht geladen werden. Bitte erneut versuchen.');
return;
}
setIsProcessing(true);
setError('');
setPaymentStatus('processing');
@@ -143,6 +103,84 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }
}
};
return (
<div className="space-y-6">
<form onSubmit={handleSubmit} className="space-y-4">
{error && (
<Alert variant="destructive">
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
<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.
</p>
<PaymentElement />
<Button
type="submit"
disabled={!stripe || isProcessing}
size="lg"
className="w-full"
>
{isProcessing ? 'Verarbeitung...' : `Jetzt bezahlen (€${selectedPackage?.price || 0})`}
</Button>
</div>
</form>
</div>
);
};
// Wrapper-Komponente mit eigenem Elements Provider
export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }) => {
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
useEffect(() => {
if (isFree || !authUser || !selectedPackage) return;
const loadPaymentIntent = async () => {
try {
const response = await fetch('/stripe/create-payment-intent', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
},
body: JSON.stringify({
package_id: selectedPackage.id,
}),
});
const data = await response.json();
console.log('Payment Intent Response:', {
ok: response.ok,
status: response.status,
data: data
});
if (response.ok && data.client_secret) {
setClientSecret(data.client_secret);
setError('');
} else {
const errorMsg = data.error || 'Fehler beim Laden der Zahlungsdaten';
console.error('Payment Intent Error:', errorMsg);
setError(errorMsg);
}
} catch (err) {
setError('Netzwerkfehler beim Laden der Zahlungsdaten');
}
};
loadPaymentIntent();
}, [selectedPackage?.id, authUser, isFree]);
// Für kostenlose Pakete: Direkte Aktivierung ohne Stripe
if (isFree) {
return (
<div className="space-y-6">
@@ -161,69 +199,30 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }
);
}
// Für kostenpflichtige Pakete: Warten auf clientSecret
if (!clientSecret) {
return (
<div className="space-y-6">
{error && (
<Alert variant="destructive">
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
<div className="rounded-lg border bg-card p-6 shadow-sm">
<p className="text-sm text-muted-foreground">
Zahlungsdaten werden geladen...
</p>
</div>
</div>
);
}
// Eigener Elements Provider mit clientSecret für kostenpflichtige Pakete
const stripePromise = loadStripe(stripePublishableKey);
return (
<div className="space-y-6">
<Tabs value={paymentProvider ?? 'stripe'} onValueChange={(value) => setPaymentProvider(value as 'stripe' | 'paypal')}>
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="stripe">Stripe</TabsTrigger>
<TabsTrigger value="paypal">PayPal</TabsTrigger>
</TabsList>
<TabsContent value="stripe" className="mt-4">
<form onSubmit={handleSubmit} className="space-y-4">
{error && (
<Alert variant="destructive">
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
{clientSecret ? (
<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.
</p>
<PaymentElement />
<Button
type="submit"
disabled={!stripe || isProcessing}
size="lg"
className="w-full"
>
{isProcessing ? 'Verarbeitung...' : `Jetzt bezahlen (€${selectedPackage.price})`}
</Button>
</div>
) : (
<div className="rounded-lg border bg-card p-6 shadow-sm">
<Alert>
<AlertTitle>Lade Zahlungsdaten...</AlertTitle>
<AlertDescription>
Bitte warten Sie, während wir die Zahlungsdaten vorbereiten.
</AlertDescription>
</Alert>
</div>
)}
</form>
</TabsContent>
<TabsContent value="paypal" className="mt-4">
<div className="rounded-lg border bg-card p-6 shadow-sm space-y-4">
<p className="text-sm text-muted-foreground">
PayPal Express Checkout mit Rückleitung zur Bestätigung.
</p>
<Alert>
<AlertTitle>PayPal Integration</AlertTitle>
<AlertDescription>
PayPal wird in einem späteren Schritt implementiert. Aktuell nur Stripe verfügbar.
</AlertDescription>
</Alert>
<div className="flex justify-end">
<Button disabled size="lg">
PayPal (bald verfügbar)
</Button>
</div>
</div>
</TabsContent>
</Tabs>
</div>
<Elements stripe={stripePromise} options={{ clientSecret }}>
<PaymentForm />
</Elements>
);
};