import React, { useMemo } from 'react'; import { Head, Link, useForm, usePage } from '@inertiajs/react'; import { useTranslation } from 'react-i18next'; import MarketingLayout from '@/layouts/mainWebsite'; import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes'; import { Button } from '@/components/ui/button'; type EligiblePurchase = { id: number; package_name: string; purchased_at: string; expires_at: string; price: number | string; currency: string; }; type WithdrawalConfirmProps = { eligiblePurchases: EligiblePurchase[]; windowDays: number; }; const WithdrawalConfirm: React.FC = ({ eligiblePurchases, windowDays }) => { const { t, i18n } = useTranslation('marketing'); const { localizedPath } = useLocalizedRoutes(); const { flash } = usePage<{ flash?: { success?: string; error?: string } }>().props; const initialPurchaseId = eligiblePurchases[0]?.id ?? null; const { data, setData, post, processing, errors } = useForm<{ purchase_id: number | null }>({ purchase_id: initialPurchaseId, }); const formatDate = (value: string) => new Date(value).toLocaleDateString(i18n.language); const formatDateTime = (value: string) => new Date(value).toLocaleString(i18n.language); const formattedPurchases = useMemo( () => eligiblePurchases.map((purchase) => ({ ...purchase, purchasedLabel: formatDateTime(purchase.purchased_at), expiresLabel: formatDate(purchase.expires_at), })), [eligiblePurchases, i18n.language], ); const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); post(localizedPath('/widerruf'), { preserveScroll: true }); }; const hasEligible = formattedPurchases.length > 0; return (

Die Fotospiel App

{t('withdrawal.title')}

{t('withdrawal.subtitle', { days: windowDays })}

{flash?.success && (
{flash.success}
)} {flash?.error && (
{flash.error}
)} {!hasEligible ? (

{t('withdrawal.empty_title')}

{t('withdrawal.empty_body')}

{t('withdrawal.empty_cta')}
) : (

{t('withdrawal.selection_title')}

{t('withdrawal.selection_body')}

{formattedPurchases.map((purchase) => ( ))}
{errors.purchase_id && (

{errors.purchase_id}

)}

{t('withdrawal.confirm_title')}

{t('withdrawal.confirm_body')}

)}
); }; WithdrawalConfirm.layout = (page: React.ReactNode) => page; export default WithdrawalConfirm;