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

checkout: buttons verbessert, paddle zahlungsschritt schicker gemacht, schritt 4 optimiert+schick gemacht. Dashboard: translations ergänzt. Startseite vom Event Admin optimiert.

Browse Source
This commit is contained in:
Codex Agent
2025-11-17 11:06:46 +01:00
parent 5290072ffe
commit 167734f87a
25 changed files with 1981 additions and 1002 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,10 @@
import React from "react";
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { useCheckoutWizard } from "../WizardContext";
import { Trans, useTranslation } from 'react-i18next';
import { Badge } from "@/components/ui/badge";
import { CalendarDays, QrCode, ClipboardList, Smartphone, Sparkles } from "lucide-react";
import { cn } from "@/lib/utils";
interface ConfirmationStepProps {
onViewProfile?: () => void;
@@ -30,29 +32,99 @@ export const ConfirmationStep: React.FC<ConfirmationStepProps> = ({ onViewProfil
const packageName = selectedPackage?.name ?? '';
const onboardingItems = [
{
key: 'event',
icon: CalendarDays,
},
{
key: 'invites',
icon: QrCode,
},
{
key: 'tasks',
icon: ClipboardList,
},
] as const;
return (
<div className="space-y-6">
<Alert className="border-primary/40 bg-primary/5">
<AlertTitle className="text-xl font-semibold">
{t('checkout.confirmation_step.welcome')}
</AlertTitle>
<AlertDescription className="space-y-2 text-base leading-relaxed">
<Trans
t={t}
i18nKey="checkout.confirmation_step.package_summary"
components={{ strong: <span className="font-semibold" /> }}
values={{ name: packageName }}
/>
<p className="text-sm text-muted-foreground">
{t('checkout.confirmation_step.email_followup')}
</p>
</AlertDescription>
</Alert>
<div className="overflow-hidden rounded-2xl border bg-gradient-to-br from-primary via-primary/70 to-primary/60 p-6 text-primary-foreground shadow-lg">
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
<div className="space-y-3">
<Badge variant="secondary" className="bg-white/15 text-white shadow-sm ring-1 ring-white/30 backdrop-blur">
<Sparkles className="mr-1 h-3.5 w-3.5" />
{t('checkout.confirmation_step.hero_badge')}
</Badge>
<div className="space-y-2">
<h3 className="text-2xl font-semibold">{t('checkout.confirmation_step.hero_title')}</h3>
<p className="text-sm text-white/80">
<Trans
t={t}
i18nKey="checkout.confirmation_step.package_summary"
components={{ strong: <span className="font-semibold" /> }}
values={{ name: packageName }}
/>
</p>
<p className="text-sm text-white/80">{t('checkout.confirmation_step.hero_body')}</p>
</div>
</div>
<div className="rounded-xl border border-white/30 bg-white/10 px-5 py-4 text-sm text-white/90 shadow-inner backdrop-blur lg:max-w-sm">
<p>{t('checkout.confirmation_step.hero_next')}</p>
</div>
</div>
</div>
<div className="rounded-xl border bg-card/60 p-6 shadow-sm">
<div className="flex flex-wrap items-baseline justify-between gap-3">
<div>
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
{t('checkout.confirmation_step.onboarding_title')}
</p>
<p className="text-sm text-muted-foreground">{t('checkout.confirmation_step.onboarding_subtitle')}</p>
</div>
<Badge variant="outline" className="text-xs font-medium">
{t('checkout.confirmation_step.onboarding_badge')}
</Badge>
</div>
<div className="mt-4 grid gap-4 md:grid-cols-3">
{onboardingItems.map(({ key, icon: Icon }) => (
<div key={key} className="rounded-lg border bg-background/60 p-4 shadow-inner">
<div className={cn("mb-3 inline-flex rounded-full bg-primary/10 p-2 text-primary")}>
<Icon className="h-4 w-4" />
</div>
<p className="text-sm font-semibold">
{t(`checkout.confirmation_step.onboarding_items.${key}.title`)}
</p>
<p className="mt-1 text-xs text-muted-foreground">
{t(`checkout.confirmation_step.onboarding_items.${key}.body`)}
</p>
</div>
))}
</div>
</div>
<div className="rounded-xl border bg-muted/30 p-6 shadow-inner">
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
<div className="space-y-1">
<p className="text-sm font-semibold text-foreground">
{t('checkout.confirmation_step.control_center_title')}
</p>
<p className="text-xs text-muted-foreground">
{t('checkout.confirmation_step.control_center_body')}
</p>
</div>
<div className="inline-flex items-center gap-2 text-xs text-muted-foreground">
<Smartphone className="h-4 w-4" />
{t('checkout.confirmation_step.control_center_hint')}
</div>
</div>
</div>
<div className="flex flex-wrap gap-3 justify-end">
<Button variant="outline" onClick={handleProfile}>
{t('checkout.confirmation_step.open_profile')}
</Button>
<Button onClick={handleAdmin}>{t('checkout.confirmation_step.to_admin')}</Button>
</div>
</div>
);