-
- {item.title}
-{item.description}
-
-
);
}
diff --git a/resources/js/admin/pages/__tests__/WelcomeTeaserPage.test.tsx b/resources/js/admin/pages/__tests__/WelcomeTeaserPage.test.tsx
new file mode 100644
index 0000000..5a2da08
--- /dev/null
+++ b/resources/js/admin/pages/__tests__/WelcomeTeaserPage.test.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { describe, expect, it, afterEach, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import WelcomeTeaserPage from '../WelcomeTeaserPage';
+
+const navigateMock = vi.fn();
+
+vi.mock('../../components/LanguageSwitcher', () => ({
+ LanguageSwitcher: () => ,
+}));
+
+vi.mock('../../lib/navigation', () => ({
+ navigateToHref: (href: string) => navigateMock(href),
+}));
+
+describe('WelcomeTeaserPage', () => {
+ afterEach(() => {
+ document.body.classList.remove('tenant-admin-theme', 'tenant-admin-welcome-theme');
+ vi.clearAllMocks();
+ navigateMock.mockReset();
+ });
+
+ it('applies the tenant admin theme classes while mounted', () => {
+ const { unmount } = render(
-
- In drei Schritten zu eurer Story
--
-
- - 1. Aufgaben entdecken - Stellt euer erstes Aufgabenpaket zusammen, das zu eurer Feier passt. - -
- - 2. Event anlegen - Benennt euer Event, legt Farben fest und erstellt den QR-Einladungslink. - -
- - 3. Link teilen - Gäste scannen, laden Fotos hoch und ihr entscheidet, was in euer Album kommt. - -
+
+
-
+
+
+
+
+
+ {featureCards.map((feature) => (
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Event Admin · Fotospiel
+
+
-
-
-
+ + Euer mobiles Kontrollzentrum für Events, Workshops und Feiern +
+
+
+
+
+
+
+
+ + Willkommen im Event-Kontrollzentrum +
++ Alles für eure Gästegeschichte in einer App +
++ Der neue Startscreen begrüßt euch wie eine mobile App, führt euch in den Welcome Flow und lässt euch + jederzeit zurück ins Dashboard springen, sobald ihr bereit seid. +
+
+
+
+
+
+
+ {heroStats.map((stat) => (
+
+
+ ))}
+
+ {stat.value}
++ {stat.label} +
+
+
+
+
+
+
+ Fotospiel
+ Event Admin
+
+
+
+
+ Heute
+ Live
+
+
+ {['Mission Pack auswählen', 'Event Branding finalisieren', 'Einladungslink teilen'].map((item) => (
+
+
+
+ ))}
+
+
+ {item}
+Welcome Flow
+
+
+
+ Live Moments
+ +28
+
+
+ {[
+ { title: 'Anna lädt 6 Fotos hoch', subtitle: 'Event · Gartenpalast' },
+ { title: 'Max reagiert auf Mission „Emotionen“', subtitle: 'Tasks · Emotion Board' },
+ { title: 'QR-Link 124x gescannt', subtitle: 'Einladungen · Photobooth' },
+ ].map((entry) => (
+
+
+
+ ))}
+ {entry.title}
+{entry.subtitle}
+
+
+ + {feature.title} +
++ {feature.description} +
++ Guided Journey +
++ So leitet euch der Welcome Flow +
+
+ {timelineSteps.map((step, index) => (
+
+
+
+ ))}
+
+ {index + 1}
+
+
+
+ + {step.title} +
+{step.description}
+
+
+
+
+
+
+ Mobile Greeting
+ Neu
+
+ Fühlt sich an wie eine native App
++ Mit großen Touch-Flächen, Animationen und frosted Cards wirkt der Startscreen wie die mobile Version + des Event Admins – perfekt für TWA und Capacitor Builds. +
+
+
+
+
+ CTA
+Event Admin öffnen
+Leitet direkt zum OAuth Login
+
+
+ Scroll Action
+Journey ansehen
+Smooth Scroll bis zur Timeline
+
+ {supportHighlights.map((support) => (
+
+
+ ))}
+
+ + {support.title} +
+{support.description}
+
+
+
+ Bereit?
++ Wechselt ins Dashboard, sobald euer Flow steht. +
++ Alle Schritte lassen sich später direkt aus dem Event Admin wieder öffnen. +
+{errors.password_confirmation}
} @@ -442,7 +442,7 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml, locale onClick={() => setPrivacyOpen(true)} className="text-[#FFB6C1] hover:underline inline bg-transparent border-none cursor-pointer p-0 font-medium" > - {t('register.privacy_policy')} + {t('register.privacy_policy_link')} . {errors.privacy_consent &&{errors.privacy_consent}
} @@ -485,5 +485,3 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml, locale{errors.password_confirmation}
} @@ -313,7 +313,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis onClick={() => setPrivacyOpen(true)} className="text-[#FFB6C1] hover:underline inline bg-transparent border-none cursor-pointer p-0 font-medium" > - {t('register.privacy_policy')} + {t('register.privacy_policy_link')} . {errors.privacy_consent &&{errors.privacy_consent}
} diff --git a/resources/js/pages/marketing/CheckoutWizardPage.tsx b/resources/js/pages/marketing/CheckoutWizardPage.tsx index 07d5f18..27f4266 100644 --- a/resources/js/pages/marketing/CheckoutWizardPage.tsx +++ b/resources/js/pages/marketing/CheckoutWizardPage.tsx @@ -3,8 +3,6 @@ import { Head, usePage } from "@inertiajs/react"; import MarketingLayout from "@/layouts/mainWebsite"; import type { CheckoutPackage, GoogleProfilePrefill } from "./checkout/types"; import { CheckoutWizard } from "./checkout/CheckoutWizard"; -import { Button } from "@/components/ui/button"; -import { X } from "lucide-react"; interface CheckoutWizardPageProps { package: CheckoutPackage; @@ -50,19 +48,6 @@ const CheckoutWizardPage: React.FC
- {/* Abbruch-Button oben rechts */}
-
+ pkg.price === 0 ? t('packages.free') : `${pkg.price.toLocaleString()} ${t('packages.currency.euro')}`;
+
+ const limits =
+ variant === 'endcustomer'
+ ? [
+ {
+ key: 'price',
+ label: t('packages.price'),
+ value: (pkg: Package) => `${formatPrice(pkg)} / ${t('packages.billing_per_event')}`,
+ },
+ {
+ key: 'max_photos',
+ label: t('packages.max_photos_label'),
+ value: (pkg: Package) => pkg.limits?.max_photos?.toLocaleString() ?? tCommon('unlimited'),
+ },
+ {
+ key: 'max_guests',
+ label: t('packages.max_guests_label'),
+ value: (pkg: Package) => pkg.limits?.max_guests?.toLocaleString() ?? tCommon('unlimited'),
+ },
+ {
+ key: 'gallery_days',
+ label: t('packages.gallery_days_label'),
+ value: (pkg: Package) =>
+ pkg.gallery_duration_label ??
+ pkg.limits?.gallery_days?.toLocaleString() ??
+ tCommon('unlimited'),
+ },
+ ]
+ : [
+ {
+ key: 'price',
+ label: t('packages.price'),
+ value: (pkg: Package) => `${formatPrice(pkg)} / ${t('packages.billing_per_year')}`,
+ },
+ {
+ key: 'max_tenants',
+ label: t('packages.max_tenants'),
+ value: (pkg: Package) => pkg.limits?.max_tenants?.toLocaleString() ?? tCommon('unlimited'),
+ },
+ {
+ key: 'max_events_per_year',
+ label: t('packages.max_events_year'),
+ value: (pkg: Package) =>
+ pkg.limits?.max_events_per_year?.toLocaleString() ?? tCommon('unlimited'),
+ },
+ ];
+
+ const features = [
+ {
+ key: 'watermark',
+ label: t('packages.watermark_label'),
+ value: (pkg: Package) =>
+ pkg.watermark_allowed === false ? t('packages.no_watermark') : t('packages.feature_watermark'),
+ },
+ {
+ key: 'branding',
+ label: t('packages.feature_custom_branding'),
+ value: (pkg: Package) => (pkg.branding_allowed ? t('packages.available') : t('packages.not_available')),
+ },
+ {
+ key: 'support',
+ label: t('packages.feature_support'),
+ value: (pkg: Package) =>
+ pkg.features.includes('priority_support') ? t('packages.priority_support') : t('packages.standard_support'),
+ },
+ ];
+
+ return (
+ = ({ endcustomerPackages, resellerPackages }) => {
const [open, setOpen] = useState(false);
const [selectedPackage, setSelectedPackage] = useState(null);
- const [currentStep, setCurrentStep] = useState<'overview' | 'deep' | 'testimonials'>('overview');
- const [couponCode, setCouponCode] = useState('');
- const [couponPreview, setCouponPreview] = useState(null);
- const [couponError, setCouponError] = useState(null);
- const [couponLoading, setCouponLoading] = useState(false);
+ const [currentStep, setCurrentStep] = useState<'overview' | 'testimonials'>('overview');
const { props } = usePage();
const { auth } = props as any;
const { t } = useTranslation('marketing');
@@ -82,18 +233,6 @@ const Packages: React.FC = ({ endcustomerPackages, resellerPackag
}
}, [endcustomerPackages, resellerPackages]);
- useEffect(() => {
- const couponParam = new URLSearchParams(window.location.search).get('coupon');
- if (couponParam) {
- setCouponCode(couponParam.toUpperCase());
- }
- }, []);
-
- useEffect(() => {
- setCouponPreview(null);
- setCouponError(null);
- setCouponLoading(false);
- }, [selectedPackage?.id]);
const testimonials = [
{ name: tCommon('testimonials.anna.name'), text: t('packages.testimonials.anna'), rating: 5 },
@@ -145,10 +284,7 @@ const Packages: React.FC = ({ endcustomerPackages, resellerPackag
? isHighlightedPackage(selectedPackage, selectedVariant)
: false;
- const appliedCouponCode = couponPreview?.coupon.code ?? null;
- const purchaseUrl = selectedPackage
- ? `/purchase-wizard/${selectedPackage.id}${appliedCouponCode ? `?coupon=${appliedCouponCode}` : ''}`
- : '#';
+ const purchaseUrl = selectedPackage ? `/purchase-wizard/${selectedPackage.id}` : '#';
const { trackEvent } = useAnalytics();
@@ -173,40 +309,6 @@ const Packages: React.FC = ({ endcustomerPackages, resellerPackag
});
};
- const handleCouponSubmit = async (event: FormEvent) => {
- event.preventDefault();
-
- if (!selectedPackage) {
- return;
- }
-
- const trimmed = couponCode.trim();
- if (!trimmed) {
- setCouponPreview(null);
- setCouponError(t('coupon.errors.required'));
- return;
- }
-
- setCouponLoading(true);
- setCouponError(null);
-
- try {
- const preview = await requestCouponPreview(selectedPackage.id, trimmed);
- setCouponPreview(preview);
- } catch (error) {
- setCouponPreview(null);
- setCouponError(error instanceof Error ? error.message : t('coupon.errors.generic'));
- } finally {
- setCouponLoading(false);
- }
- };
-
- const handleRemoveCoupon = () => {
- setCouponPreview(null);
- setCouponError(null);
- setCouponCode('');
- };
-
// nextStep entfernt, da Tabs nun parallel sind
const getFeatureIcon = (feature: string) => {
@@ -223,31 +325,24 @@ const getFeatureIcon = (feature: string) => {
}
};
-const getAccentTheme = (variant: 'endcustomer' | 'reseller') => (
+const getAccentTheme = (variant: 'endcustomer' | 'reseller') =>
variant === 'reseller'
? {
- gradient: 'from-amber-100/80 via-white to-white',
- ring: 'ring-amber-200 dark:ring-amber-500/40',
- badge: 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-100',
- price: 'text-amber-500 dark:text-amber-300',
- buttonHighlight: 'bg-gradient-to-r from-amber-500 via-rose-400 to-pink-500 text-white hover:from-amber-500/95 hover:via-rose-400/95 hover:to-pink-500/95',
- buttonDefault: 'bg-gradient-to-r from-amber-50 via-white to-rose-50 text-amber-600 border border-amber-100/80 shadow-sm hover:from-amber-100 hover:via-rose-50 hover:to-white hover:text-amber-600 dark:from-amber-500/20 dark:via-amber-500/10 dark:to-rose-500/20 dark:text-amber-200 dark:border-amber-500/30',
- highlightShadow: 'shadow-[0_28px_65px_-20px_rgba(245,158,11,0.55)]',
- topBar: 'from-amber-400 via-rose-300 to-pink-400',
- ctaShadow: 'shadow-lg shadow-amber-500/25',
+ badge: 'bg-amber-50 text-amber-700',
+ price: 'text-amber-600',
+ buttonHighlight: 'bg-gray-900 text-white hover:bg-gray-800',
+ buttonDefault: 'border border-amber-200 text-amber-700 hover:bg-amber-50',
+ cardBorder: 'border border-amber-100',
+ highlightShadow: 'shadow-lg shadow-amber-100/60',
}
: {
- gradient: 'from-rose-100/80 via-white to-white',
- ring: 'ring-rose-200 dark:ring-rose-500/40',
- badge: 'bg-rose-100 text-rose-700 dark:bg-rose-500/20 dark:text-rose-100',
- price: 'text-rose-500 dark:text-rose-300',
- buttonHighlight: 'bg-gradient-to-r from-rose-500 via-pink-500 to-amber-400 text-white hover:from-rose-500/95 hover:via-pink-500/95 hover:to-amber-400/95',
- buttonDefault: 'bg-gradient-to-r from-rose-50 via-white to-pink-50 text-rose-600 border border-rose-100/80 shadow-sm hover:from-rose-100 hover:via-white hover:to-pink-100 hover:text-rose-600 dark:from-rose-500/15 dark:via-rose-500/10 dark:to-rose-500/20 dark:text-rose-200 dark:border-rose-500/30',
- highlightShadow: 'shadow-[0_28px_70px_-25px_rgba(244,63,94,0.55)]',
- topBar: 'from-rose-500 via-pink-400 to-amber-300',
- ctaShadow: 'shadow-lg shadow-rose-500/30',
- }
-);
+ badge: 'bg-rose-50 text-rose-700',
+ price: 'text-rose-600',
+ buttonHighlight: 'bg-gray-900 text-white hover:bg-gray-800',
+ buttonDefault: 'border border-rose-100 text-rose-700 hover:bg-rose-50',
+ cardBorder: 'border border-rose-100',
+ highlightShadow: 'shadow-lg shadow-rose-100/60',
+ };
type PackageMetric = {
key: string;
@@ -337,10 +432,11 @@ function PackageCard({
const accent = getAccentTheme(variant);
+ const numericPrice = Number(pkg.price);
const priceLabel =
- pkg.price === 0
+ numericPrice === 0
? t('packages.free')
- : `${pkg.price.toLocaleString()} ${t('packages.currency.euro')}`;
+ : `${numericPrice.toLocaleString()} ${t('packages.currency.euro')}`;
const cadenceLabel =
variant === 'reseller'
? t('packages.billing_per_year')
@@ -356,149 +452,88 @@ function PackageCard({
? t('packages.badge_starter')
: null;
- const featureBadges = pkg.features.slice(0, 4);
- const extraFeatureCount = Math.max(pkg.features.length - featureBadges.length, 0);
-
+ const keyFeatures = pkg.features.slice(0, 3);
const metrics = resolvePackageMetrics(pkg, variant, t, tCommon);
return (
-
-
-
-
-
-
+
+
+ {t('packages.comparison_limits')}
+ {t('packages.comparison_features')}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
type DescriptionEntry = {
title?: string | null;
value: string;
@@ -54,11 +209,7 @@ interface PackagesProps {
const Packages: React.FC
+
+ {t('packages.comparison_title')}
+{t('packages.comparison_subtitle')}
+
-
- {typeLabel}
-
+
+
- {pkg.name}
-
-
- {pkg.description}
-
-
-
+
-
-
+ {typeLabel}
{badgeLabel && (
-
- {highlight &&
+
)}
-
+ {pkg.name}
+ {pkg.description}
+
+
+
- {priceLabel}
+ {priceLabel}
{pkg.price !== 0 && (
-
- / {cadenceLabel}
-
+ / {cadenceLabel}
)}
{variant === 'endcustomer' && (
- +
{pkg.events} × {t('packages.one_time')}
)}
- {featureBadges.map((feature) => (
-
- {getFeatureIcon(feature)}
- {t(`packages.feature_${feature}`)}
-
- ))}
- {pkg.watermark_allowed === false && (
-
-
- )}
- {pkg.branding_allowed && (
-
-
- )}
- {extraFeatureCount > 0 && (
-
- {t('packages.more_features', { count: extraFeatureCount })}
-
- )}
-
-
-
+
{metrics.map((metric) => (
-
+
-
+ - {metric.value} -
-- {metric.label} -
+
+
))}
{metric.value}
+{metric.label}
-
+ {keyFeatures.map((feature) => (
+
-
+
+ {t(`packages.feature_${feature}`)} +
+ ))}
+ {pkg.watermark_allowed === false && (
+ -
+
+ {t('packages.no_watermark')} +
+ )}
+ {pkg.branding_allowed && (
+ -
+
+ {t('packages.custom_branding')} +
+ )}
+