104 lines
4.0 KiB
TypeScript
104 lines
4.0 KiB
TypeScript
import React from 'react';
|
|
import { usePage, router } from '@inertiajs/react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import MarketingLayout from '@/layouts/mainWebsite';
|
|
import { Loader, CheckCircle } from 'lucide-react';
|
|
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
|
|
import { useLocale } from '@/hooks/useLocale';
|
|
import { ADMIN_HOME_PATH } from '@/admin/constants';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
type SuccessProps = {
|
|
type?: string;
|
|
};
|
|
|
|
const GiftSuccess: React.FC = () => {
|
|
const { t } = useTranslation('marketing');
|
|
const { localizedPath } = useLocalizedRoutes();
|
|
const locale = useLocale();
|
|
|
|
return (
|
|
<MarketingLayout title={t('success.gift_title')}>
|
|
<div className="min-h-screen bg-gradient-to-b from-background via-muted/30 to-background py-16">
|
|
<div className="mx-auto max-w-3xl space-y-6 px-4 text-center sm:px-6">
|
|
<CheckCircle className="mx-auto h-12 w-12 text-green-500" />
|
|
<h1 className="text-3xl font-bold text-foreground">{t('success.gift_title')}</h1>
|
|
<p className="text-muted-foreground">{t('success.gift_description')}</p>
|
|
<div className="rounded-xl border bg-card p-6 text-left shadow-sm">
|
|
<h2 className="text-lg font-semibold">{t('success.gift_bullets_title')}</h2>
|
|
<ul className="mt-3 list-disc space-y-2 pl-5 text-muted-foreground">
|
|
<li>{t('success.gift_bullet_email')}</li>
|
|
<li>{t('success.gift_bullet_validity')}</li>
|
|
<li>{t('success.gift_bullet_redeem')}</li>
|
|
</ul>
|
|
</div>
|
|
<div className="flex justify-center">
|
|
<Button asChild size="lg">
|
|
<a href={localizedPath('/', locale || undefined)}>{t('success.gift_cta_home')}</a>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</MarketingLayout>
|
|
);
|
|
};
|
|
|
|
const AuthRedirectSuccess: React.FC<{ emailVerified?: boolean | null }> = ({ emailVerified }) => {
|
|
const { t } = useTranslation('success');
|
|
const { localizedPath } = useLocalizedRoutes();
|
|
|
|
if (emailVerified) {
|
|
router.visit(ADMIN_HOME_PATH, { preserveState: false });
|
|
|
|
return (
|
|
<div className="flex min-h-screen items-center justify-center bg-gray-50">
|
|
<div className="text-center">
|
|
<Loader className="mx-auto mb-2 inline-block h-8 w-8 animate-spin rounded-full border border-2 border-blue-600 border-t-transparent" />
|
|
<p className="text-gray-600">{t('redirecting')}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<MarketingLayout title={t('complete_purchase')}>
|
|
<div className="flex min-h-screen items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
|
<div className="w-full max-w-md rounded-lg bg-white p-8 shadow-md">
|
|
<div className="text-center">
|
|
<h2 className="mb-4 text-2xl font-bold text-gray-900">{t('complete_purchase')}</h2>
|
|
<p className="mb-6 text-gray-600">{t('login_to_continue')}</p>
|
|
<a
|
|
href={localizedPath('/login')}
|
|
className="mb-2 block rounded-md bg-blue-600 px-6 py-2 font-medium text-white transition duration-300 hover:bg-blue-700"
|
|
>
|
|
{t('login')}
|
|
</a>
|
|
<p className="text-sm text-gray-600">
|
|
{t('no_account')}{' '}
|
|
<a href={localizedPath('/register')} className="text-blue-600 hover:text-blue-500">
|
|
{t('register')}
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</MarketingLayout>
|
|
);
|
|
};
|
|
|
|
const Success: React.FC<SuccessProps> = () => {
|
|
const { auth } = usePage<{ auth: { user?: { email_verified_at?: string | null } } }>().props;
|
|
const searchParams = typeof window !== 'undefined' ? new URLSearchParams(window.location.search) : new URLSearchParams();
|
|
const type = searchParams.get('type');
|
|
|
|
if (type === 'gift') {
|
|
return <GiftSuccess />;
|
|
}
|
|
|
|
return <AuthRedirectSuccess emailVerified={auth.user?.email_verified_at} />;
|
|
};
|
|
|
|
Success.layout = (page: React.ReactNode) => page;
|
|
|
|
export default Success;
|