123 lines
4.8 KiB
TypeScript
123 lines
4.8 KiB
TypeScript
import React from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
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;
|
|
}
|
|
|
|
export const ConfirmationStep: React.FC<ConfirmationStepProps> = ({ onViewProfile }) => {
|
|
const { t } = useTranslation('marketing');
|
|
const { selectedPackage } = useCheckoutWizard();
|
|
const handleProfile = React.useCallback(() => {
|
|
if (typeof onViewProfile === 'function') {
|
|
onViewProfile();
|
|
return;
|
|
}
|
|
window.location.href = '/settings/profile';
|
|
}, [onViewProfile]);
|
|
|
|
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">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|