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

- Wired the checkout wizard for Google “comfort login”: added Socialite controller + dependency, new Google env

Browse Source 
hooks in config/services.php/.env.example, and updated wizard steps/controllers to store session payloads,
attach packages, and surface localized success/error states.
- Retooled payment handling for both Stripe and PayPal, adding richer status management in CheckoutController/
PayPalController, fallback flows in the wizard’s PaymentStep.tsx, and fresh feature tests for intent
creation, webhooks, and the wizard CTA.
- Introduced a consent-aware Matomo analytics stack: new consent context, cookie-banner UI, useAnalytics/
useCtaExperiment hooks, and MatomoTracker component, then instrumented marketing pages (Home, Packages,
Checkout) with localized copy and experiment tracking.
- Polished package presentation across marketing UIs by centralizing formatting in PresentsPackages, surfacing
localized description tables/placeholders, tuning badges/layouts, and syncing guest/marketing translations.
- Expanded docs & reference material (docs/prp/*, TODOs, public gallery overview) and added a Playwright smoke
test for the hero CTA while reconciling outstanding checklist items.
This commit is contained in:
Codex Agent
2025-10-19 11:41:03 +02:00
parent ae9b9160ac
commit a949c8d3af
113 changed files with 5169 additions and 712 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
resources/js/pages/marketing/Home.tsx
View File

@@ -3,6 +3,8 @@ import { Head, Link, useForm } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
import MarketingLayout from '@/layouts/mainWebsite';
import { useAnalytics } from '@/hooks/useAnalytics';
import { useCtaExperiment } from '@/hooks/useCtaExperiment';
interface Package {
id: number;
@@ -18,6 +20,11 @@ interface Props {
const Home: React.FC<Props> = ({ packages }) => {
const { t } = useTranslation('marketing');
const { localizedPath } = useLocalizedRoutes();
const { trackEvent } = useAnalytics();
const {
variant: heroCtaVariant,
trackClick: trackHeroCtaClick,
} = useCtaExperiment('home_hero_cta');
const { data, setData, post, processing, errors, reset } = useForm({
name: '',
email: '',
@@ -27,7 +34,13 @@ const Home: React.FC<Props> = ({ packages }) => {
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
post(localizedPath('/kontakt'), {
onSuccess: () => reset(),
onSuccess: () => {
trackEvent({
category: 'marketing_home',
action: 'contact_submit',
});
reset();
},
});
};
@@ -49,9 +62,22 @@ const Home: React.FC<Props> = ({ packages }) => {
<p className="text-xl md:text-2xl mb-8 font-sans-marketing">{t('home.hero_description')}</p>
<Link
href={localizedPath('/packages')}
className="bg-white dark:bg-gray-800 text-[#FFB6C1] px-8 py-4 rounded-full font-bold hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-300 inline-block"
onClick={() => {
trackHeroCtaClick();
trackEvent({
category: 'marketing_home',
action: 'hero_cta',
name: `packages:${heroCtaVariant}`,
});
}}
className={[
'inline-block rounded-full px-8 py-4 font-bold transition duration-300',
heroCtaVariant === 'gradient'
? 'bg-gradient-to-r from-rose-500 via-pink-500 to-amber-400 text-white shadow-lg shadow-rose-500/40 hover:from-rose-500/95 hover:via-pink-500/95 hover:to-amber-400/95'
: 'bg-white text-[#FFB6C1] hover:bg-gray-100 dark:bg-gray-800 dark:text-rose-200 dark:hover:bg-gray-700',
].join(' ')}
>
{t('home.cta_explore')}
{heroCtaVariant === 'gradient' ? t('home.cta_explore_highlight') : t('home.cta_explore')}
</Link>
</div>
<div className="md:w-1/2">
@@ -125,14 +151,34 @@ const Home: React.FC<Props> = ({ packages }) => {
<h3 className="text-2xl font-bold mb-2">{pkg.name}</h3>
<p className="text-gray-600 dark:text-gray-300 mb-4">{pkg.description}</p>
<p className="text-3xl font-bold text-[#FFB6C1]">{pkg.price} {t('currency.euro')}</p>
<Link href={`${localizedPath('/register')}?package_id=${pkg.id}`} className="mt-4 inline-block bg-[#FFB6C1] text-white px-6 py-2 rounded-full hover:bg-pink-600">
<Link
href={`${localizedPath('/packages')}?package_id=${pkg.id}`}
onClick={() =>
trackEvent({
category: 'marketing_home',
action: 'package_teaser_cta',
name: pkg.name,
value: pkg.price,
})
}
className="mt-4 inline-block bg-[#FFB6C1] text-white px-6 py-2 rounded-full hover:bg-pink-600"
>
{t('home.view_details')}
</Link>
</div>
))}
</div>
<div className="text-center">
<Link href={localizedPath('/packages')} className="bg-[#FFB6C1] text-white px-8 py-4 rounded-full font-bold hover:bg-pink-600 transition">
<Link
href={localizedPath('/packages')}
onClick={() =>
trackEvent({
category: 'marketing_home',
action: 'all_packages_cta',
})
}
className="bg-[#FFB6C1] text-white px-8 py-4 rounded-full font-bold hover:bg-pink-600 transition"
>
{t('home.all_packages')}
</Link>
</div>
@@ -235,4 +281,4 @@ const Home: React.FC<Props> = ({ packages }) => {
);
};
export default Home;
export default Home;

398
resources/js/pages/marketing/Packages.tsx
View File

@@ -13,6 +13,8 @@ import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
import { Separator } from '@/components/ui/separator';
import { cn } from '@/lib/utils';
import MarketingLayout from '@/layouts/mainWebsite';
import { useAnalytics } from '@/hooks/useAnalytics';
import { useCtaExperiment } from '@/hooks/useCtaExperiment';
import { ArrowRight, ShoppingCart, Check, X, Users, Image, Shield, Star, Sparkles } from 'lucide-react';
interface Package {
@@ -50,11 +52,15 @@ interface PackagesProps {
const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackages }) => {
const [open, setOpen] = useState(false);
const [selectedPackage, setSelectedPackage] = useState<Package | null>(null);
const [currentStep, setCurrentStep] = useState('step1');
const [currentStep, setCurrentStep] = useState<'overview' | 'deep' | 'testimonials'>('overview');
const { props } = usePage();
const { auth } = props as any;
const { t } = useTranslation('marketing');
const { t: tCommon } = useTranslation('common');
const {
variant: packagesHeroVariant,
trackClick: trackPackagesHeroClick,
} = useCtaExperiment('packages_hero_cta');
useEffect(() => {
const urlParams = new URLSearchParams(window.location.search);
@@ -65,7 +71,7 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
if (pkg) {
setSelectedPackage(pkg);
setOpen(true);
setCurrentStep('step1');
setCurrentStep('overview');
}
}
}, [endcustomerPackages, resellerPackages]);
@@ -78,27 +84,34 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
const allPackages = [...endcustomerPackages, ...resellerPackages];
const highlightEndcustomerId = useMemo(() => {
if (!endcustomerPackages.length) {
const selectHighlightPackageId = (packages: Package[]): number | null => {
const count = packages.length;
if (count <= 1) {
return null;
}
const best = endcustomerPackages.reduce((prev, current) => {
if (!prev) return current;
return current.price > prev.price ? current : prev;
}, null as Package | null);
return best?.id ?? endcustomerPackages[0].id;
}, [endcustomerPackages]);
const highlightResellerId = useMemo(() => {
if (!resellerPackages.length) {
return null;
const sortedByPrice = [...packages].sort((a, b) => a.price - b.price);
if (count === 2) {
return sortedByPrice[1]?.id ?? null;
}
const best = resellerPackages.reduce((prev, current) => {
if (!prev) return current;
return current.price > prev.price ? current : prev;
}, null as Package | null);
return best?.id ?? resellerPackages[0].id;
}, [resellerPackages]);
if (count === 3) {
return sortedByPrice[1]?.id ?? null;
}
return sortedByPrice[count - 2]?.id ?? null;
};
const highlightEndcustomerId = useMemo(
() => selectHighlightPackageId(endcustomerPackages),
[endcustomerPackages],
);
const highlightResellerId = useMemo(
() => selectHighlightPackageId(resellerPackages),
[resellerPackages],
);
function isHighlightedPackage(pkg: Package, variant: 'endcustomer' | 'reseller') {
return variant === 'reseller' ? pkg.id === highlightResellerId : pkg.id === highlightEndcustomerId;
@@ -113,12 +126,29 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
? isHighlightedPackage(selectedPackage, selectedVariant)
: false;
const handleCardClick = (pkg: Package) => {
const { trackEvent } = useAnalytics();
const handleCardClick = (pkg: Package, variant: 'endcustomer' | 'reseller') => {
trackEvent({
category: 'marketing_packages',
action: 'open_dialog',
name: `${variant}:${pkg.name}`,
value: pkg.price,
});
setSelectedPackage(pkg);
setCurrentStep('step1');
setCurrentStep('overview');
setOpen(true);
};
const handleCtaClick = (pkg: Package, variant: 'endcustomer' | 'reseller') => {
trackEvent({
category: 'marketing_packages',
action: 'cta_dialog',
name: `${variant}:${pkg.name}`,
value: pkg.price,
});
};
// nextStep entfernt, da Tabs nun parallel sind
const getFeatureIcon = (feature: string) => {
@@ -428,8 +458,24 @@ function PackageCard({
<div className="container mx-auto text-center">
<h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">{t('packages.hero_title')}</h1>
<p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-sans-marketing">{t('packages.hero_description')}</p>
<Link href="#endcustomer" className="bg-white dark:bg-gray-800 text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg font-sans-marketing hover:bg-gray-100 dark:hover:bg-gray-700 transition">
{t('packages.cta_explore')}
<Link
href="#endcustomer"
onClick={() => {
trackPackagesHeroClick();
trackEvent({
category: 'marketing_packages',
action: 'hero_cta',
name: `endcustomer:${packagesHeroVariant}`,
});
}}
className={cn(
'rounded-full px-8 py-4 text-lg font-semibold font-sans-marketing transition duration-300',
packagesHeroVariant === 'gradient'
? 'bg-gradient-to-r from-rose-500 via-pink-500 to-amber-400 text-white shadow-lg shadow-rose-500/40 hover:from-rose-500/95 hover:via-pink-500/95 hover:to-amber-400/95'
: 'bg-white text-[#FFB6C1] hover:bg-gray-100 dark:bg-gray-800 dark:text-rose-200 dark:hover:bg-gray-700',
)}
>
{packagesHeroVariant === 'gradient' ? t('packages.cta_explore_highlight') : t('packages.cta_explore')}
</Link>
</div>
</section>
@@ -447,7 +493,7 @@ function PackageCard({
pkg={pkg}
variant="endcustomer"
highlight={pkg.id === highlightEndcustomerId}
onSelect={handleCardClick}
onSelect={(pkg) => handleCardClick(pkg, 'endcustomer')}
className="h-full"
/>
</CarouselItem>
@@ -465,7 +511,7 @@ function PackageCard({
pkg={pkg}
variant="endcustomer"
highlight={pkg.id === highlightEndcustomerId}
onSelect={handleCardClick}
onSelect={(pkg) => handleCardClick(pkg, 'endcustomer')}
/>
))}
</div>
@@ -615,7 +661,7 @@ function PackageCard({
pkg={pkg}
variant="reseller"
highlight={pkg.id === highlightResellerId}
onSelect={handleCardClick}
onSelect={(pkg) => handleCardClick(pkg, 'reseller')}
className="h-full"
/>
</CarouselItem>
@@ -633,7 +679,7 @@ function PackageCard({
pkg={pkg}
variant="reseller"
highlight={pkg.id === highlightResellerId}
onSelect={handleCardClick}
onSelect={(pkg) => handleCardClick(pkg, 'reseller')}
/>
))}
</div>
@@ -715,15 +761,20 @@ function PackageCard({
</div>
</DialogHeader>
<Tabs value={currentStep} onValueChange={setCurrentStep} className="w-full">
<TabsList className="grid w-full grid-cols-2 rounded-full bg-white/60 p-1 text-sm shadow-sm dark:bg-gray-900/60">
<TabsTrigger className="rounded-full" value="step1">{t('packages.details')}</TabsTrigger>
<TabsTrigger className="rounded-full" value="step2">{t('packages.customer_opinions')}</TabsTrigger>
<TabsList className="grid w-full grid-cols-3 rounded-full bg-white/60 p-1 text-sm shadow-sm dark:bg-gray-900/60">
<TabsTrigger className="rounded-full" value="overview">{t('packages.details')}</TabsTrigger>
<TabsTrigger className="rounded-full" value="deep">{t('packages.more_details_tab')}</TabsTrigger>
<TabsTrigger className="rounded-full" value="testimonials">{t('packages.customer_opinions')}</TabsTrigger>
</TabsList>
<TabsContent value="step1" className="mt-6 space-y-6">
<TabsContent value="overview" className="mt-6 space-y-6">
{(() => {
const accent = getAccentTheme(selectedVariant);
const metrics = resolvePackageMetrics(selectedPackage, selectedVariant, t, tCommon);
const descriptionEntries = selectedPackage.description_breakdown ?? [];
const topFeatureBadges = selectedPackage.features.slice(0, 3);
const hasMoreFeatures = selectedPackage.features.length > topFeatureBadges.length;
const quickFacts = metrics.slice(0, 2);
const showDeepLink =
hasMoreFeatures || (selectedPackage.description_breakdown?.length ?? 0) > 0;
return (
<div className="grid gap-6 lg:grid-cols-[minmax(0,1.2fr),minmax(0,0.8fr)]">
@@ -740,64 +791,177 @@ function PackageCard({
'radial-gradient(circle at top left, rgba(255,182,193,0.45), transparent 55%), radial-gradient(circle at bottom right, rgba(250,204,21,0.35), transparent 55%)',
}}
/>
<div className="relative space-y-4">
<Badge className="inline-flex w-fit items-center gap-1 rounded-full bg-gray-900/90 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-white shadow-md dark:bg-white/90 dark:text-gray-900">
<Sparkles className="h-3.5 w-3.5" />
{t('packages.features_label')}
</Badge>
<div className="flex flex-wrap gap-2">
{selectedPackage.features.map((feature) => (
<Badge
key={feature}
variant="outline"
className="flex items-center gap-1 rounded-full border-transparent bg-white/80 px-3 py-1 text-xs font-medium text-gray-700 shadow-sm dark:bg-gray-800/70 dark:text-gray-200"
<div className="relative flex h-full flex-col justify-between gap-5">
<div className="space-y-5">
<Badge className="inline-flex w-fit items-center gap-1 rounded-full bg-gray-900/90 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-white shadow-md dark:bg-white/90 dark:text-gray-900">
<Sparkles className="h-3.5 w-3.5" />
{t('packages.feature_highlights')}
</Badge>
<div className="flex flex-wrap gap-2">
{topFeatureBadges.map((feature) => (
<Badge
key={feature}
variant="outline"
className={cn(
'flex items-center gap-1 rounded-full border-transparent bg-white/80 px-3 py-1 text-xs font-medium text-gray-700 shadow-sm transition-colors hover:bg-white dark:bg-gray-800/70 dark:text-gray-200',
selectedHighlight && 'bg-white/85 dark:bg-white/10',
)}
>
{getFeatureIcon(feature)}
<span>{t(`packages.feature_${feature}`)}</span>
</Badge>
))}
{selectedPackage.watermark_allowed === false && (
<Badge className="flex items-center gap-1 rounded-full bg-emerald-100/80 px-3 py-1 text-xs font-medium text-emerald-700 shadow-sm dark:bg-emerald-500/20 dark:text-emerald-100">
<Shield className="h-3.5 w-3.5" />
{t('packages.no_watermark')}
</Badge>
)}
{selectedPackage.branding_allowed && (
<Badge className="flex items-center gap-1 rounded-full bg-sky-100/80 px-3 py-1 text-xs font-medium text-sky-700 shadow-sm dark:bg-sky-500/20 dark:text-sky-100">
<Sparkles className="h-3.5 w-3.5" />
{t('packages.custom_branding')}
</Badge>
)}
</div>
</div>
<div className="space-y-3">
{showDeepLink && (
<button
type="button"
onClick={() => setCurrentStep('deep')}
className="inline-flex items-center gap-2 text-sm font-semibold text-rose-500 transition-colors hover:text-rose-600 dark:text-rose-300 dark:hover:text-rose-200"
>
{getFeatureIcon(feature)}
<span>{t(`packages.feature_${feature}`)}</span>
</Badge>
))}
{selectedPackage.watermark_allowed === false && (
<Badge className="flex items-center gap-1 rounded-full bg-emerald-100/80 px-3 py-1 text-xs font-medium text-emerald-700 shadow-sm dark:bg-emerald-500/20 dark:text-emerald-100">
<Shield className="h-3.5 w-3.5" />
{t('packages.no_watermark')}
</Badge>
)}
{selectedPackage.branding_allowed && (
<Badge className="flex items-center gap-1 rounded-full bg-sky-100/80 px-3 py-1 text-xs font-medium text-sky-700 shadow-sm dark:bg-sky-500/20 dark:text-sky-100">
<Sparkles className="h-3.5 w-3.5" />
{t('packages.custom_branding')}
</Badge>
{t('packages.more_details_link')}
<ArrowRight className="h-4 w-4" />
</button>
)}
<Button
asChild
className={cn(
'w-full justify-center gap-2 rounded-full py-3 text-base font-semibold transition-all duration-300',
accent.ctaShadow,
selectedHighlight ? accent.buttonHighlight : accent.buttonDefault,
)}
>
<Link
href={`/purchase-wizard/${selectedPackage.id}`}
onClick={() => {
if (selectedPackage) {
handleCtaClick(selectedPackage, selectedVariant);
}
localStorage.setItem('preferred_package', JSON.stringify(selectedPackage));
}}
>
{t('packages.to_order')}
<ArrowRight className="ml-2 h-4 w-4" />
</Link>
</Button>
<p className="text-xs text-center text-gray-500 dark:text-gray-400">
{t('packages.order_hint')}
</p>
</div>
</div>
</div>
<div className="space-y-6">
{descriptionEntries.length > 0 && (
<div className="rounded-3xl border border-gray-200/80 bg-white/90 p-6 shadow-xl dark:border-gray-700/70 dark:bg-gray-900/90">
<h3 className="text-sm font-semibold uppercase tracking-[0.3em] text-gray-400 dark:text-gray-500">
{t('packages.breakdown_label')}
</h3>
<div className="mt-4 grid gap-3">
{descriptionEntries.map((entry, index) => (
<div
key={`${entry.title}-${index}`}
className="rounded-2xl bg-gradient-to-r from-rose-50/90 via-white to-white p-4 shadow-sm dark:from-gray-800 dark:via-gray-900 dark:to-gray-900"
>
{entry.title && (
<p className="text-xs font-semibold uppercase tracking-wide text-rose-500 dark:text-rose-200">
{entry.title}
</p>
)}
<p className="mt-1 text-sm text-gray-700 dark:text-gray-300">{entry.value}</p>
</div>
))}
</div>
</div>
<div className="flex h-full flex-col gap-4 rounded-3xl border border-gray-200/70 bg-white/90 p-6 shadow-lg dark:border-gray-700/70 dark:bg-gray-900/85">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
{t('packages.quick_facts')}
</h3>
<p className="text-sm text-gray-600 dark:text-gray-300">
{t('packages.quick_facts_hint')}
</p>
<ul className="space-y-3">
{quickFacts.map((metric) => (
<li
key={metric.key}
className="rounded-2xl border border-gray-200/70 bg-white/80 p-4 dark:border-gray-700/70 dark:bg-gray-800/70"
>
<p className="text-lg font-semibold text-gray-900 dark:text-white">{metric.value}</p>
<p className="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
{metric.label}
</p>
</li>
))}
</ul>
{showDeepLink && (
<Button
variant="outline"
className="mt-auto w-full justify-center rounded-full border-rose-200/70 text-rose-600 hover:bg-rose-50 dark:border-rose-500/40 dark:text-rose-200 dark:hover:bg-rose-500/10"
onClick={() => setCurrentStep('deep')}
>
{t('packages.more_details_link')}
<ArrowRight className="ml-2 h-4 w-4" />
</Button>
)}
<div className="rounded-3xl border border-gray-200/80 bg-white/90 p-6 shadow-xl dark:border-gray-700/70 dark:bg-gray-900/90">
<h3 className="text-sm font-semibold uppercase tracking-[0.3em] text-gray-400 dark:text-gray-500">
</div>
</div>
);
})()}
</TabsContent>
<TabsContent value="deep" className="mt-6 space-y-6">
{(() => {
const accent = getAccentTheme(selectedVariant);
const metrics = resolvePackageMetrics(selectedPackage, selectedVariant, t, tCommon);
const descriptionEntries = selectedPackage.description_breakdown ?? [];
const entriesWithTitle = descriptionEntries.filter((entry) => entry.title);
const entriesWithoutTitle = descriptionEntries.filter((entry) => !entry.title);
return (
<div className="space-y-6">
<section className="rounded-3xl border border-gray-200/70 bg-white/95 p-6 shadow-lg dark:border-gray-700/70 dark:bg-gray-900/85">
<div className="flex items-center gap-3">
<Badge className="rounded-full bg-gray-900/90 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-white shadow-md dark:bg-white/90 dark:text-gray-900">
{t('packages.features_label')}
</Badge>
{selectedHighlight && (
<Badge className="rounded-full bg-gradient-to-r from-rose-500 via-pink-500 to-amber-400 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-white shadow-sm">
{t('packages.badge_deep_dive')}
</Badge>
)}
</div>
<div className="mt-4 flex flex-wrap gap-2">
{selectedPackage.features.map((feature) => (
<Badge
key={feature}
variant="outline"
className={cn(
'flex items-center gap-1 rounded-full border-transparent bg-white/85 px-3 py-1 text-xs font-medium text-gray-700 shadow-sm transition-colors hover:bg-white dark:bg-gray-800/70 dark:text-gray-200',
selectedHighlight && 'bg-white/85 dark:bg-white/10',
)}
>
{getFeatureIcon(feature)}
<span>{t(`packages.feature_${feature}`)}</span>
</Badge>
))}
{selectedPackage.watermark_allowed === false && (
<Badge className="flex items-center gap-1 rounded-full bg-emerald-100/80 px-3 py-1 text-xs font-medium text-emerald-700 shadow-sm dark:bg-emerald-500/20 dark:text-emerald-100">
<Shield className="h-3.5 w-3.5" />
{t('packages.no_watermark')}
</Badge>
)}
{selectedPackage.branding_allowed && (
<Badge className="flex items-center gap-1 rounded-full bg-sky-100/80 px-3 py-1 text-xs font-medium text-sky-700 shadow-sm dark:bg-sky-500/20 dark:text-sky-100">
<Sparkles className="h-3.5 w-3.5" />
{t('packages.custom_branding')}
</Badge>
)}
</div>
</section>
{metrics.length > 0 && (
<section
className={cn(
'rounded-3xl border border-gray-200/70 bg-white/95 p-6 shadow-lg dark:border-gray-700/70 dark:bg-gray-900/85',
selectedHighlight && `ring-2 ${accent.ring}`,
)}
>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
{t('packages.limits_label')}
</h3>
<p className="mt-1 text-sm text-gray-600 dark:text-gray-300">
{t('packages.limits_label_hint')}
</p>
<div className="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-3">
{metrics.map((metric) => (
<div
@@ -811,41 +975,59 @@ function PackageCard({
</div>
))}
</div>
</div>
<div className="space-y-3">
<Button
asChild
className={cn(
'w-full justify-center gap-2 rounded-full py-3 text-base font-semibold transition-all duration-300',
accent.ctaShadow,
selectedHighlight ? accent.buttonHighlight : accent.buttonDefault,
)}
>
<Link
href={`/purchase-wizard/${selectedPackage.id}`}
onClick={() => {
localStorage.setItem('preferred_package', JSON.stringify(selectedPackage));
}}
>
{t('packages.to_order')}
<ArrowRight className="ml-2 h-4 w-4" aria-hidden />
</Link>
</Button>
<p className="text-xs text-center text-gray-500 dark:text-gray-400">
{t('packages.order_hint')}
</section>
)}
{descriptionEntries.length > 0 && (
<section className="rounded-3xl border border-gray-200/70 bg-white/95 p-6 shadow-lg dark:border-gray-700/70 dark:bg-gray-900/85">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
{t('packages.breakdown_label')}
</h3>
<p className="mt-1 text-sm text-gray-600 dark:text-gray-300">
{t('packages.breakdown_label_hint')}
</p>
</div>
</div>
{entriesWithTitle.length > 0 && (
<Accordion type="single" collapsible className="mt-4 space-y-3">
{entriesWithTitle.map((entry, index) => (
<AccordionItem
key={`${entry.title}-${index}`}
value={`entry-${index}`}
className="overflow-hidden rounded-2xl border border-gray-200/70 bg-white/85 shadow-sm dark:border-gray-700/70 dark:bg-gray-900/80"
>
<AccordionTrigger className="px-4 text-left text-sm font-semibold text-gray-900 hover:no-underline dark:text-white">
{entry.title}
</AccordionTrigger>
<AccordionContent className="px-4 pb-4 text-sm text-gray-600 dark:text-gray-300 whitespace-pre-line">
{entry.value}
</AccordionContent>
</AccordionItem>
))}
</Accordion>
)}
{entriesWithoutTitle.length > 0 && (
<div className="mt-4 space-y-3">
{entriesWithoutTitle.map((entry, index) => (
<div
key={`plain-${index}`}
className="rounded-2xl border border-gray-200/70 bg-white/85 p-4 text-sm text-gray-600 shadow-sm dark:border-gray-700/70 dark:bg-gray-900/80 dark:text-gray-300 whitespace-pre-line"
>
{entry.value}
</div>
))}
</div>
)}
</section>
)}
</div>
);
})()}
</TabsContent>
<TabsContent value="step2" className="mt-6">
<TabsContent value="testimonials" className="mt-6">
<div className="space-y-6">
<h3 className="text-xl font-semibold font-display text-gray-900 dark:text-white">
{t('packages.what_customers_say')}
</h3>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<div className="flex flex-col gap-4">
{testimonials.map((testimonial, index) => (
<div
key={index}

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

@@ -1,4 +1,4 @@
import React, { useMemo, useRef, useEffect } from "react";
import React, { useMemo, useRef, useEffect, useCallback } from "react";
import { useTranslation } from 'react-i18next';
import { Steps } from "@/components/ui/Steps";
import { Button } from "@/components/ui/button";
@@ -9,6 +9,7 @@ import { PackageStep } from "./steps/PackageStep";
import { AuthStep } from "./steps/AuthStep";
import { PaymentStep } from "./steps/PaymentStep";
import { ConfirmationStep } from "./steps/ConfirmationStep";
import { useAnalytics } from '@/hooks/useAnalytics';
interface CheckoutWizardProps {
initialPackage: CheckoutPackage;
@@ -56,6 +57,7 @@ const WizardBody: React.FC<{ stripePublishableKey: string; paypalClientId: strin
const { currentStep, nextStep, previousStep } = useCheckoutWizard();
const progressRef = useRef<HTMLDivElement | null>(null);
const hasMountedRef = useRef(false);
const { trackEvent } = useAnalytics();
const stepConfig = useMemo(() =>
baseStepConfig.map(step => ({
@@ -75,6 +77,14 @@ const WizardBody: React.FC<{ stripePublishableKey: string; paypalClientId: strin
return (currentIndex / (stepConfig.length - 1)) * 100;
}, [currentIndex, stepConfig]);
useEffect(() => {
trackEvent({
category: 'marketing_checkout',
action: 'step_view',
name: currentStep,
});
}, [currentStep, trackEvent]);
useEffect(() => {
if (typeof window === 'undefined' || !progressRef.current) {
return;
@@ -95,6 +105,34 @@ const WizardBody: React.FC<{ stripePublishableKey: string; paypalClientId: strin
});
}, [currentStep]);
const handleNext = useCallback(() => {
const targetStep = stepConfig[currentIndex + 1]?.id ?? 'end';
trackEvent({
category: 'marketing_checkout',
action: 'step_next',
name: `${currentStep}->${targetStep}`,
});
nextStep();
}, [currentIndex, currentStep, nextStep, stepConfig, trackEvent]);
const handlePrevious = useCallback(() => {
const targetStep = stepConfig[currentIndex - 1]?.id ?? 'start';
trackEvent({
category: 'marketing_checkout',
action: 'step_previous',
name: `${currentStep}->${targetStep}`,
});
previousStep();
}, [currentIndex, currentStep, previousStep, stepConfig, trackEvent]);
const handleViewProfile = useCallback(() => {
window.location.href = '/settings/profile';
}, []);
const handleGoToAdmin = useCallback(() => {
window.location.href = '/event-admin';
}, []);
return (
<div className="space-y-8">
<div ref={progressRef} className="space-y-4">
@@ -108,14 +146,16 @@ const WizardBody: React.FC<{ stripePublishableKey: string; paypalClientId: strin
{currentStep === "payment" && (
<PaymentStep stripePublishableKey={stripePublishableKey} paypalClientId={paypalClientId} />
)}
{currentStep === "confirmation" && <ConfirmationStep />}
{currentStep === "confirmation" && (
<ConfirmationStep onViewProfile={handleViewProfile} onGoToAdmin={handleGoToAdmin} />
)}
</div>
<div className="flex items-center justify-between">
<Button variant="ghost" onClick={previousStep} disabled={currentIndex <= 0}>
<Button variant="ghost" onClick={handlePrevious} disabled={currentIndex <= 0}>
{t('checkout.back')}
</Button>
<Button onClick={nextStep} disabled={currentIndex >= stepConfig.length - 1}>
<Button onClick={handleNext} disabled={currentIndex >= stepConfig.length - 1}>
{t('checkout.next')}
</Button>
</div>

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

@@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { usePage } from "@inertiajs/react";
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
@@ -6,17 +6,52 @@ import { useCheckoutWizard } from "../WizardContext";
import LoginForm, { AuthUserPayload } from "../../../auth/LoginForm";
import RegisterForm, { RegisterSuccessPayload } from "../../../auth/RegisterForm";
import { useTranslation } from 'react-i18next';
import toast from 'react-hot-toast';
import { LoaderCircle } from "lucide-react";
interface AuthStepProps {
privacyHtml: string;
}
type GoogleAuthFlash = {
status?: string | null;
error?: string | null;
};
const GoogleIcon: React.FC<{ className?: string }> = ({ className }) => (
<svg
className={className}
viewBox="0 0 24 24"
aria-hidden="true"
focusable="false"
>
<path fill="#EA4335" d="M12 11.999v4.8h6.7c-.3 1.7-2 4.9-6.7 4.9-4 0-7.4-3.3-7.4-7.4S8 6 12 6c2.3 0 3.9 1 4.8 1.9l3.3-3.2C18.1 2.6 15.3 1 12 1 5.9 1 1 5.9 1 12s4.9 11 11 11c6.3 0 10.5-4.4 10.5-10.6 0-.7-.1-1.2-.2-1.8H12z" />
</svg>
);
export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml }) => {
const { t } = useTranslation('marketing');
const page = usePage<{ locale?: string }>();
const locale = page.props.locale ?? "de";
const googleAuth = useMemo<GoogleAuthFlash>(() => {
const props = page.props as Record<string, any>;
return props.googleAuth ?? {};
}, [page.props]);
const { isAuthenticated, authUser, setAuthUser, nextStep, selectedPackage } = useCheckoutWizard();
const [mode, setMode] = useState<'login' | 'register'>('register');
const [isRedirectingToGoogle, setIsRedirectingToGoogle] = useState(false);
useEffect(() => {
if (googleAuth?.status === 'success') {
toast.success(t('checkout.auth_step.google_success_toast'));
}
}, [googleAuth?.status, t]);
useEffect(() => {
if (googleAuth?.error) {
toast.error(googleAuth.error);
}
}, [googleAuth?.error]);
const handleLoginSuccess = (payload: AuthUserPayload | null) => {
if (!payload) {
@@ -46,6 +81,20 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml }) => {
nextStep();
};
const handleGoogleLogin = useCallback(() => {
if (!selectedPackage) {
toast.error(t('checkout.auth_step.google_missing_package'));
return;
}
setIsRedirectingToGoogle(true);
const params = new URLSearchParams({
package_id: String(selectedPackage.id),
locale,
});
window.location.href = `/checkout/auth/google?${params.toString()}`;
}, [locale, selectedPackage, t]);
if (isAuthenticated && authUser) {
return (
<div className="space-y-6">
@@ -79,11 +128,28 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml }) => {
>
{t('checkout.auth_step.switch_to_login')}
</Button>
<span className="text-xs text-muted-foreground">
{t('checkout.auth_step.google_coming_soon')}
</span>
<Button
variant="outline"
onClick={handleGoogleLogin}
disabled={isRedirectingToGoogle}
className="flex items-center gap-2"
>
{isRedirectingToGoogle ? (
<LoaderCircle className="h-4 w-4 animate-spin" />
) : (
<GoogleIcon className="h-4 w-4" />
)}
{t('checkout.auth_step.continue_with_google')}
</Button>
</div>
{googleAuth?.error && (
<Alert variant="destructive">
<AlertTitle>{t('checkout.auth_step.google_error_title')}</AlertTitle>
<AlertDescription>{googleAuth.error}</AlertDescription>
</Alert>
)}
<div className="rounded-lg border bg-card p-6 shadow-sm">
{mode === 'register' ? (
selectedPackage && (

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

@@ -6,11 +6,27 @@ import { useTranslation } from 'react-i18next';
interface ConfirmationStepProps {
onViewProfile?: () => void;
onGoToAdmin?: () => void;
}
export const ConfirmationStep: React.FC<ConfirmationStepProps> = ({ onViewProfile }) => {
export const ConfirmationStep: React.FC<ConfirmationStepProps> = ({ onViewProfile, onGoToAdmin }) => {
const { t } = useTranslation('marketing');
const { selectedPackage } = useCheckoutWizard();
const handleProfile = React.useCallback(() => {
if (typeof onViewProfile === 'function') {
onViewProfile();
return;
}
window.location.href = '/settings/profile';
}, [onViewProfile]);
const handleAdmin = React.useCallback(() => {
if (typeof onGoToAdmin === 'function') {
onGoToAdmin();
return;
}
window.location.href = '/event-admin';
}, [onGoToAdmin]);
return (
<div className="space-y-6">
@@ -22,10 +38,10 @@ export const ConfirmationStep: React.FC<ConfirmationStepProps> = ({ onViewProfil
</AlertDescription>
</Alert>
<div className="flex flex-wrap gap-3 justify-end">
<Button variant="outline" onClick={onViewProfile}>
<Button variant="outline" onClick={handleProfile}>
{t('checkout.confirmation_step.open_profile')}
</Button>
<Button>{t('checkout.confirmation_step.to_admin')}</Button>
<Button onClick={handleAdmin}>{t('checkout.confirmation_step.to_admin')}</Button>
</div>
</div>
);

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

@@ -1,5 +1,6 @@
import React, { useMemo, useState } from "react";
import { useTranslation } from 'react-i18next';
import type { TFunction } from '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";
@@ -13,14 +14,19 @@ const currencyFormatter = new Intl.NumberFormat("de-DE", {
minimumFractionDigits: 2,
});
function PackageSummary({ pkg }: { pkg: CheckoutPackage }) {
function translateFeature(feature: string, t: TFunction<'marketing'>) {
const fallback = feature.replace(/_/g, ' ');
return t(`packages.feature_${feature}`, { defaultValue: fallback });
}
function PackageSummary({ pkg, t }: { pkg: CheckoutPackage; t: TFunction<'marketing'> }) {
const isFree = pkg.price === 0;
return (
<Card className={`shadow-sm ${isFree ? "opacity-75" : ""}`}>
<Card className={`shadow-sm ${isFree ? 'opacity-75' : ''}`}>
<CardHeader className="space-y-1">
<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"}`} />
<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">
@@ -29,19 +35,41 @@ function PackageSummary({ pkg }: { pkg: CheckoutPackage }) {
</CardHeader>
<CardContent className="space-y-6">
<div className="flex items-baseline gap-2">
<span className={`text-3xl font-semibold ${isFree ? "text-muted-foreground" : ""}`}>
{pkg.price === 0 ? "Kostenlos" : currencyFormatter.format(pkg.price)}
<span className={`text-3xl font-semibold ${isFree ? 'text-muted-foreground' : ''}`}>
{pkg.price === 0 ? t('packages.free') : currencyFormatter.format(pkg.price)}
</span>
<Badge variant={isFree ? "outline" : "secondary"} className="uppercase tracking-wider text-xs">
{pkg.type === "reseller" ? "Reseller" : "Endkunde"}
<Badge variant={isFree ? 'outline' : 'secondary'} className="uppercase tracking-wider text-xs">
{pkg.type === 'reseller' ? t('packages.subscription') : t('packages.one_time')}
</Badge>
</div>
{pkg.gallery_duration_label && (
<div className="rounded-md border border-dashed border-muted px-3 py-2 text-sm text-muted-foreground">
{t('packages.gallery_days_label')}: {pkg.gallery_duration_label}
</div>
)}
{Array.isArray(pkg.description_breakdown) && pkg.description_breakdown.length > 0 && (
<div className="space-y-3">
<h4 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
{t('packages.breakdown_label')}
</h4>
<div className="grid gap-3 md:grid-cols-2">
{pkg.description_breakdown.map((row, index) => (
<div key={index} className="rounded-lg border border-muted/40 bg-muted/20 px-3 py-2">
{row.title && (
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{row.title}</p>
)}
<p className="text-sm text-muted-foreground">{row.value}</p>
</div>
))}
</div>
</div>
)}
{Array.isArray(pkg.features) && pkg.features.length > 0 && (
<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 ${isFree ? "text-muted-foreground" : "text-primary"}`} />
<span>{feature}</span>
<Check className={`mt-0.5 h-4 w-4 ${isFree ? 'text-muted-foreground' : 'text-primary'}`} />
<span>{translateFeature(feature, t)}</span>
</li>
))}
</ul>
@@ -51,7 +79,7 @@ function PackageSummary({ pkg }: { pkg: CheckoutPackage }) {
);
}
function PackageOption({ pkg, isActive, onSelect }: { pkg: CheckoutPackage; isActive: boolean; onSelect: () => void }) {
function PackageOption({ pkg, isActive, onSelect, t }: { pkg: CheckoutPackage; isActive: boolean; onSelect: () => void; t: TFunction<'marketing'> }) {
const isFree = pkg.price === 0;
return (
@@ -69,7 +97,7 @@ function PackageOption({ pkg, isActive, onSelect }: { pkg: CheckoutPackage; isAc
<div className="flex items-center justify-between text-sm font-medium">
<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)}
{pkg.price === 0 ? t('packages.free') : currencyFormatter.format(pkg.price)}
</span>
</div>
<p className="mt-1 line-clamp-2 text-xs text-muted-foreground">{pkg.description}</p>
@@ -125,7 +153,7 @@ export const PackageStep: React.FC = () => {
return (
<div className="grid gap-8 lg:grid-cols-[2fr_1fr]">
<div className="space-y-6">
<PackageSummary pkg={selectedPackage} />
<PackageSummary pkg={selectedPackage} t={t} />
<div className="flex justify-end">
<Button size="lg" onClick={handleNextStep} disabled={isLoading}>
{isLoading ? (
@@ -150,6 +178,7 @@ export const PackageStep: React.FC = () => {
pkg={pkg}
isActive={pkg.id === selectedPackage.id}
onSelect={() => handlePackageChange(pkg)}
t={t}
/>
))}
{comparablePackages.length === 0 && (

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

@@ -1,35 +1,47 @@
import { useState, useEffect } from "react";
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useStripe, useElements, PaymentElement, Elements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { useCheckoutWizard } from "../WizardContext";
import { PayPalButtons, PayPalScriptProvider } from '@paypal/react-paypal-js';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import { LoaderCircle } from 'lucide-react';
import { useCheckoutWizard } from '../WizardContext';
interface PaymentStepProps {
stripePublishableKey: string;
paypalClientId: string;
}
// Komponente für Stripe-Zahlungen
const StripePaymentForm: React.FC<{ onError: (error: string) => void; onSuccess: () => void; selectedPackage: any; t: any }> = ({ onError, onSuccess, selectedPackage, t }) => {
type Provider = 'stripe' | 'paypal';
type PaymentStatus = 'idle' | 'loading' | 'ready' | 'processing' | 'error' | 'success';
interface StripePaymentFormProps {
onProcessing: () => void;
onSuccess: () => void;
onError: (message: string) => void;
selectedPackage: any;
t: (key: string, options?: Record<string, unknown>) => string;
}
const StripePaymentForm: React.FC<StripePaymentFormProps> = ({ onProcessing, onSuccess, onError, selectedPackage, t }) => {
const stripe = useStripe();
const elements = useElements();
const [isProcessing, setIsProcessing] = useState(false);
const [error, setError] = useState<string>('');
const [errorMessage, setErrorMessage] = useState<string>('');
const handleSubmit = async (event: React.FormEvent) => {
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
if (!stripe || !elements) {
onError(t('checkout.payment_step.stripe_not_loaded'));
const message = t('checkout.payment_step.stripe_not_loaded');
onError(message);
return;
}
onProcessing();
setIsProcessing(true);
setError('');
setErrorMessage('');
try {
const { error: stripeError, paymentIntent } = await stripe.confirmPayment({
@@ -41,38 +53,41 @@ const StripePaymentForm: React.FC<{ onError: (error: string) => void; onSuccess:
});
if (stripeError) {
console.error('Stripe Payment Error:', stripeError);
let errorMessage = t('checkout.payment_step.payment_failed');
let message = t('checkout.payment_step.payment_failed');
switch (stripeError.type) {
case 'card_error':
errorMessage += stripeError.message || t('checkout.payment_step.error_card');
message += stripeError.message || t('checkout.payment_step.error_card');
break;
case 'validation_error':
errorMessage += t('checkout.payment_step.error_validation');
message += t('checkout.payment_step.error_validation');
break;
case 'api_connection_error':
errorMessage += t('checkout.payment_step.error_connection');
message += t('checkout.payment_step.error_connection');
break;
case 'api_error':
errorMessage += t('checkout.payment_step.error_server');
message += t('checkout.payment_step.error_server');
break;
case 'authentication_error':
errorMessage += t('checkout.payment_step.error_auth');
message += t('checkout.payment_step.error_auth');
break;
default:
errorMessage += stripeError.message || t('checkout.payment_step.error_unknown');
message += stripeError.message || t('checkout.payment_step.error_unknown');
}
setError(errorMessage);
onError(errorMessage);
} else if (paymentIntent && paymentIntent.status === 'succeeded') {
onSuccess();
} else if (paymentIntent) {
onError(t('checkout.payment_step.unexpected_status', { status: paymentIntent.status }));
setErrorMessage(message);
onError(message);
return;
}
} catch (err) {
console.error('Unexpected payment error:', err);
if (paymentIntent && paymentIntent.status === 'succeeded') {
onSuccess();
return;
}
onError(t('checkout.payment_step.unexpected_status', { status: paymentIntent?.status }));
} catch (error) {
console.error('Stripe payment failed', error);
onError(t('checkout.payment_step.error_unknown'));
} finally {
setIsProcessing(false);
@@ -81,56 +96,83 @@ const StripePaymentForm: React.FC<{ onError: (error: string) => void; onSuccess:
return (
<form onSubmit={handleSubmit} className="space-y-4">
{error && (
{errorMessage && (
<Alert variant="destructive">
<AlertDescription>{error}</AlertDescription>
<AlertDescription>{errorMessage}</AlertDescription>
</Alert>
)}
<div className="rounded-lg border bg-card p-6 shadow-sm space-y-4">
<p className="text-sm text-muted-foreground">
{t('checkout.payment_step.secure_payment_desc')}
</p>
<p className="text-sm text-muted-foreground">{t('checkout.payment_step.secure_payment_desc')}</p>
<PaymentElement />
<Button
type="submit"
disabled={!stripe || isProcessing}
size="lg"
className="w-full"
>
{isProcessing ? t('checkout.payment_step.processing_btn') : t('checkout.payment_step.pay_now', { price: selectedPackage?.price || 0 })}
<Button type="submit" disabled={!stripe || isProcessing} size="lg" className="w-full">
{isProcessing && <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />}
{t('checkout.payment_step.pay_now', { price: selectedPackage?.price || 0 })}
</Button>
</div>
</form>
);
};
// Komponente für PayPal-Zahlungen
const PayPalPaymentForm: React.FC<{ onError: (error: string) => void; onSuccess: () => void; selectedPackage: any; t: any; authUser: any; paypalClientId: string }> = ({ onError, onSuccess, selectedPackage, t, authUser, paypalClientId }) => {
interface PayPalPaymentFormProps {
onProcessing: () => void;
onSuccess: () => void;
onError: (message: string) => void;
selectedPackage: any;
isReseller: boolean;
paypalPlanId?: string | null;
t: (key: string, options?: Record<string, unknown>) => string;
}
const PayPalPaymentForm: React.FC<PayPalPaymentFormProps> = ({ onProcessing, onSuccess, onError, selectedPackage, isReseller, paypalPlanId, t }) => {
const createOrder = async () => {
if (!selectedPackage?.id) {
const message = t('checkout.payment_step.paypal_order_error');
onError(message);
throw new Error(message);
}
try {
const response = await fetch('/paypal/create-order', {
onProcessing();
const endpoint = isReseller ? '/paypal/create-subscription' : '/paypal/create-order';
const payload: Record<string, unknown> = {
package_id: selectedPackage.id,
};
if (isReseller) {
if (!paypalPlanId) {
const message = t('checkout.payment_step.paypal_missing_plan');
onError(message);
throw new Error(message);
}
payload.plan_id = paypalPlanId;
}
const response = await fetch(endpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
},
body: JSON.stringify({
tenant_id: authUser?.tenant_id || authUser?.id, // Annahme: tenant_id verfügbar
package_id: selectedPackage?.id,
}),
body: JSON.stringify(payload),
});
const data = await response.json();
if (response.ok && data.id) {
return data.id;
if (response.ok) {
const orderId = isReseller ? data.order_id : data.id;
if (typeof orderId === 'string' && orderId.length > 0) {
return orderId;
}
} else {
onError(data.error || t('checkout.payment_step.paypal_order_error'));
throw new Error('Failed to create order');
}
} catch (err) {
throw new Error('Failed to create PayPal order');
} catch (error) {
console.error('PayPal create order failed', error);
onError(t('checkout.payment_step.network_error'));
throw err;
throw error;
}
};
@@ -142,9 +184,7 @@ const PayPalPaymentForm: React.FC<{ onError: (error: string) => void; onSuccess:
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
},
body: JSON.stringify({
order_id: data.orderID,
}),
body: JSON.stringify({ order_id: data.orderID }),
});
const result = await response.json();
@@ -154,105 +194,209 @@ const PayPalPaymentForm: React.FC<{ onError: (error: string) => void; onSuccess:
} else {
onError(result.error || t('checkout.payment_step.paypal_capture_error'));
}
} catch (err) {
} catch (error) {
console.error('PayPal capture failed', error);
onError(t('checkout.payment_step.network_error'));
}
};
const onErrorHandler = (error: any) => {
console.error('PayPal Error:', error);
const handleError = (error: unknown) => {
console.error('PayPal error', error);
onError(t('checkout.payment_step.paypal_error'));
};
const onCancel = () => {
const handleCancel = () => {
onError(t('checkout.payment_step.paypal_cancelled'));
};
return (
<div className="space-y-4">
<div className="rounded-lg border bg-card p-6 shadow-sm space-y-4">
<p className="text-sm text-muted-foreground">
{t('checkout.payment_step.secure_paypal_desc') || 'Bezahlen Sie sicher mit PayPal.'}
</p>
<PayPalButtons
style={{ layout: 'vertical' }}
createOrder={createOrder}
onApprove={onApprove}
onError={onErrorHandler}
onCancel={onCancel}
/>
</div>
<div className="rounded-lg border bg-card p-6 shadow-sm">
<p className="text-sm text-muted-foreground">{t('checkout.payment_step.secure_paypal_desc') || 'Bezahlen Sie sicher mit PayPal.'}</p>
<PayPalButtons
style={{ layout: 'vertical' }}
createOrder={async () => createOrder()}
onApprove={onApprove}
onError={handleError}
onCancel={handleCancel}
/>
</div>
);
};
// Wrapper-Komponente
const statusVariantMap: Record<PaymentStatus, 'default' | 'destructive' | 'success' | 'secondary'> = {
idle: 'secondary',
loading: 'secondary',
ready: 'secondary',
processing: 'secondary',
error: 'destructive',
success: 'success',
};
export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey, paypalClientId }) => {
const { t } = useTranslation('marketing');
const { selectedPackage, authUser, nextStep, resetPaymentState } = useCheckoutWizard();
const [clientSecret, setClientSecret] = useState<string>('');
const [paymentMethod, setPaymentMethod] = useState<'stripe' | 'paypal'>('stripe');
const [error, setError] = useState<string>('');
const [isFree, setIsFree] = useState(false);
const [paymentMethod, setPaymentMethod] = useState<Provider>('stripe');
const [clientSecret, setClientSecret] = useState('');
const [status, setStatus] = useState<PaymentStatus>('idle');
const [statusDetail, setStatusDetail] = useState<string>('');
const [intentRefreshKey, setIntentRefreshKey] = useState(0);
const [processingProvider, setProcessingProvider] = useState<Provider | null>(null);
const stripePromise = useMemo(() => loadStripe(stripePublishableKey), [stripePublishableKey]);
const isFree = useMemo(() => (selectedPackage ? selectedPackage.price <= 0 : false), [selectedPackage]);
const isReseller = selectedPackage?.type === 'reseller';
const paypalPlanId = useMemo(() => {
if (!selectedPackage) {
return null;
}
if (typeof selectedPackage.paypal_plan_id === 'string' && selectedPackage.paypal_plan_id.trim().length > 0) {
return selectedPackage.paypal_plan_id;
}
const metadata = (selectedPackage as Record<string, unknown>)?.metadata;
if (metadata && typeof metadata === 'object') {
const value = (metadata as Record<string, unknown>).paypal_plan_id;
if (typeof value === 'string' && value.trim().length > 0) {
return value;
}
}
return null;
}, [selectedPackage]);
const paypalDisabled = isReseller && !paypalPlanId;
useEffect(() => {
const free = selectedPackage ? selectedPackage.price <= 0 : false;
setIsFree(free);
if (free) {
setStatus('idle');
setStatusDetail('');
setClientSecret('');
setProcessingProvider(null);
}, [selectedPackage?.id]);
useEffect(() => {
if (isFree) {
resetPaymentState();
setStatus('ready');
setStatusDetail('');
return;
}
if (paymentMethod === 'stripe' && authUser && selectedPackage) {
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.client_secret) {
setClientSecret(data.client_secret);
setError('');
} else {
setError(data.error || t('checkout.payment_step.payment_intent_error'));
}
} catch (err) {
setError(t('checkout.payment_step.network_error'));
}
};
loadPaymentIntent();
} else {
setClientSecret('');
if (!selectedPackage) {
return;
}
}, [selectedPackage?.id, authUser, paymentMethod, isFree, t, resetPaymentState]);
const handlePaymentError = (errorMsg: string) => {
setError(errorMsg);
if (paymentMethod === 'paypal') {
if (paypalDisabled) {
setStatus('error');
setStatusDetail(t('checkout.payment_step.paypal_missing_plan'));
} else {
setStatus('ready');
setStatusDetail('');
}
return;
}
if (!authUser) {
setStatus('error');
setStatusDetail(t('checkout.payment_step.auth_required'));
return;
}
let cancelled = false;
setStatus('loading');
setStatusDetail(t('checkout.payment_step.status_loading'));
setClientSecret('');
const loadIntent = 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.client_secret) {
const message = data.error || t('checkout.payment_step.payment_intent_error');
if (!cancelled) {
setStatus('error');
setStatusDetail(message);
}
return;
}
if (!cancelled) {
setClientSecret(data.client_secret);
setStatus('ready');
setStatusDetail(t('checkout.payment_step.status_ready'));
}
} catch (error) {
if (!cancelled) {
console.error('Failed to load payment intent', error);
setStatus('error');
setStatusDetail(t('checkout.payment_step.network_error'));
}
}
};
loadIntent();
return () => {
cancelled = true;
};
}, [authUser, intentRefreshKey, isFree, paymentMethod, paypalDisabled, resetPaymentState, selectedPackage, t]);
const providerLabel = useCallback((provider: Provider) => {
switch (provider) {
case 'paypal':
return 'PayPal';
default:
return 'Stripe';
}
}, []);
const handleProcessing = useCallback((provider: Provider) => {
setProcessingProvider(provider);
setStatus('processing');
setStatusDetail(t('checkout.payment_step.status_processing', { provider: providerLabel(provider) }));
}, [providerLabel, t]);
const handleSuccess = useCallback((provider: Provider) => {
setProcessingProvider(provider);
setStatus('success');
setStatusDetail(t('checkout.payment_step.status_success'));
setTimeout(() => nextStep(), 600);
}, [nextStep, t]);
const handleError = useCallback((provider: Provider, message: string) => {
setProcessingProvider(provider);
setStatus('error');
setStatusDetail(message);
}, []);
const handleRetry = () => {
if (paymentMethod === 'stripe') {
setIntentRefreshKey((key) => key + 1);
}
setStatus('idle');
setStatusDetail('');
setProcessingProvider(null);
};
const handlePaymentSuccess = () => {
setTimeout(() => nextStep(), 1000);
};
// Für kostenlose Pakete
if (isFree) {
return (
<div className="space-y-6">
<Alert>
<AlertTitle>{t('checkout.payment_step.free_package_title')}</AlertTitle>
<AlertDescription>
{t('checkout.payment_step.free_package_desc')}
</AlertDescription>
<AlertDescription>{t('checkout.payment_step.free_package_desc')}</AlertDescription>
</Alert>
<div className="flex justify-end">
<Button size="lg" onClick={nextStep}>
@@ -263,78 +407,93 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey,
);
}
// Fehler anzeigen
if (error && !clientSecret) {
return (
<div className="space-y-6">
<Alert variant="destructive">
<AlertDescription>{error}</AlertDescription>
</Alert>
<div className="flex justify-end">
<Button onClick={() => setError('')}>Versuchen Sie es erneut</Button>
</div>
</div>
);
}
const renderStatusAlert = () => {
if (status === 'idle') {
return null;
}
const stripePromise = loadStripe(stripePublishableKey);
const variant = statusVariantMap[status];
return (
<Alert variant={variant}>
<AlertTitle>
{status === 'error'
? t('checkout.payment_step.status_error_title')
: status === 'success'
? t('checkout.payment_step.status_success_title')
: t('checkout.payment_step.status_info_title')}
</AlertTitle>
<AlertDescription className="flex items-center justify-between gap-4">
<span>{statusDetail}</span>
{status === 'processing' && <LoaderCircle className="h-4 w-4 animate-spin" />}
{status === 'error' && (
<Button size="sm" variant="outline" onClick={handleRetry}>
{t('checkout.payment_step.status_retry')}
</Button>
)}
</AlertDescription>
</Alert>
);
};
return (
<div className="space-y-6">
{/* Zahlungsmethode Auswahl */}
<div className="flex space-x-4">
<div className="flex flex-wrap gap-3">
<Button
variant={paymentMethod === 'stripe' ? 'default' : 'outline'}
onClick={() => setPaymentMethod('stripe')}
className="flex-1"
disabled={paymentMethod === 'stripe'}
>
Kreditkarte (Stripe)
{t('checkout.payment_step.method_stripe')}
</Button>
<Button
variant={paymentMethod === 'paypal' ? 'default' : 'outline'}
onClick={() => setPaymentMethod('paypal')}
className="flex-1"
disabled={paypalDisabled || paymentMethod === 'paypal'}
>
PayPal
{t('checkout.payment_step.method_paypal')}
</Button>
</div>
{error && (
<Alert variant="destructive">
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
{renderStatusAlert()}
{paymentMethod === 'stripe' && (
{paymentMethod === 'stripe' && clientSecret && (
<Elements stripe={stripePromise} options={{ clientSecret }}>
<StripePaymentForm
onError={handlePaymentError}
onSuccess={handlePaymentSuccess}
selectedPackage={selectedPackage}
onProcessing={() => handleProcessing('stripe')}
onSuccess={() => handleSuccess('stripe')}
onError={(message) => handleError('stripe', message)}
t={t}
/>
</Elements>
)}
{paymentMethod === 'paypal' && (
{paymentMethod === 'stripe' && !clientSecret && status === 'loading' && (
<div className="rounded-lg border bg-card p-6 text-sm text-muted-foreground shadow-sm">
<LoaderCircle className="mb-3 h-4 w-4 animate-spin" />
{t('checkout.payment_step.status_loading')}
</div>
)}
{paymentMethod === 'paypal' && !paypalDisabled && (
<PayPalScriptProvider options={{ clientId: paypalClientId, currency: 'EUR' }}>
<PayPalPaymentForm
onError={handlePaymentError}
onSuccess={handlePaymentSuccess}
isReseller={Boolean(isReseller)}
onProcessing={() => handleProcessing('paypal')}
onSuccess={() => handleSuccess('paypal')}
onError={(message) => handleError('paypal', message)}
paypalPlanId={paypalPlanId}
selectedPackage={selectedPackage}
t={t}
authUser={authUser}
paypalClientId={paypalClientId}
/>
</PayPalScriptProvider>
)}
{!clientSecret && paymentMethod === 'stripe' && (
<div className="rounded-lg border bg-card p-6 shadow-sm">
<p className="text-sm text-muted-foreground">
{t('checkout.payment_step.loading_payment')}
</p>
</div>
{paymentMethod === 'paypal' && paypalDisabled && (
<Alert variant="destructive">
<AlertDescription>{t('checkout.payment_step.paypal_missing_plan')}</AlertDescription>
</Alert>
)}
</div>
);

8
resources/js/pages/marketing/checkout/types.ts
View File

@@ -5,10 +5,17 @@ export interface CheckoutPackage {
name: string;
description: string;
price: number;
description_breakdown?: Array<{
title?: string | null;
value: string;
}>;
gallery_duration_label?: string | null;
events?: number | null;
currency?: string;
type: 'endcustomer' | 'reseller';
features: string[];
limits?: Record<string, unknown>;
paypal_plan_id?: string | null;
[key: string]: unknown;
}
@@ -37,4 +44,3 @@ export interface CheckoutWizardContextValue extends CheckoutWizardState {
resetPaymentState: () => void;
cancelCheckout: () => void;
}