import { Head, router, useForm } from '@inertiajs/react'; import type { FormEvent } from 'react'; import InputError from '@/components/input-error'; import PasswordInput from '@/components/password-input'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Progress } from '@/components/ui/progress'; import { creditsLabel } from '@/lib/credits'; import { formatEuro } from '@/lib/format'; import { cn } from '@/lib/utils'; import onboarding from '@/routes/onboarding'; import type { Package } from '@/types'; type Step = 'company' | 'formatemp' | 'package'; type CompanyProfile = { name: string; vat_number: string | null; fiscal_code: string | null; address: string | null; city: string | null; zip: string | null; province: string | null; billing_email: string | null; sdi_code: string | null; pec: string | null; formatemp_username: string | null; formatemp_entity_code: string | null; }; type Props = { step: Step; company: CompanyProfile; packages: Package[]; selectedPackage: string | null; formatempConfigured: boolean; }; const STEP_ORDER: Step[] = ['company', 'formatemp', 'package']; const STEP_TITLES: Record = { company: "Profilo dell'ente", formatemp: 'Credenziali Forma.Temp', package: 'Scegli il piano', }; const STEP_DESCRIPTIONS: Record = { company: 'Dati anagrafici e di fatturazione del tuo ente di formazione. Potrai modificarli in qualsiasi momento dalle impostazioni.', formatemp: 'Credenziali per inviare in automatico i dati delle aule a Forma.Temp. Puoi configurarle in un secondo momento.', package: 'Il piano accredita i suoi crediti a ogni fattura pagata. 1 credito vale 4 ore d\u2019aula fino a 30 discenti: un corso da 8 ore costa 2 crediti.', }; function SkipWizardLink() { return ( ); } function WizardShell({ step, children, }: { step: Step; children: React.ReactNode; }) { const stepIndex = STEP_ORDER.indexOf(step); return ( <>

Passo {stepIndex + 1} di {STEP_ORDER.length}

{STEP_TITLES[step]} {STEP_DESCRIPTIONS[step]} {children}
); } function CompanyStep({ company }: { company: CompanyProfile }) { const form = useForm({ step: 'company' as const, name: company.name ?? '', vat_number: company.vat_number ?? '', fiscal_code: company.fiscal_code ?? '', address: company.address ?? '', city: company.city ?? '', zip: company.zip ?? '', province: company.province ?? '', billing_email: company.billing_email ?? '', sdi_code: company.sdi_code ?? '', pec: company.pec ?? '', }); function submit(e: FormEvent) { e.preventDefault(); form.post(onboarding.store().url); } return (
form.setData('name', e.target.value)} placeholder="Nome ente / azienda" />
form.setData('vat_number', e.target.value) } />
form.setData('fiscal_code', e.target.value) } />
form.setData('address', e.target.value) } />
form.setData('city', e.target.value) } />
form.setData('zip', e.target.value) } />
form.setData('province', e.target.value) } />
form.setData('billing_email', e.target.value) } />
form.setData('sdi_code', e.target.value) } />
form.setData('pec', e.target.value)} />
); } function FormatempStep({ company, formatempConfigured, }: { company: CompanyProfile; formatempConfigured: boolean; }) { const form = useForm({ step: 'formatemp' as const, formatemp_username: company.formatemp_username ?? '', formatemp_password: '', formatemp_entity_code: company.formatemp_entity_code ?? '', }); function submit(e: FormEvent) { e.preventDefault(); form.post(onboarding.store().url); } function later() { router.post(onboarding.store().url, { step: 'formatemp' }); } return (
{formatempConfigured && ( Credenziali già configurate )}
form.setData('formatemp_username', e.target.value) } />
form.setData('formatemp_password', e.target.value) } placeholder={ formatempConfigured ? '••••••• (lascia vuoto per non modificare)' : '' } />
form.setData( 'formatemp_entity_code', e.target.value, ) } />
); } /** "40 crediti al mese", con periodo corretto. */ function planCreditsLine(pkg: Package): string { const period = pkg.interval === 'year' ? "all'anno" : 'al mese'; return `${creditsLabel(pkg.credits)} ${period}`; } function PackageStep({ packages, selectedPackage, }: { packages: Package[]; selectedPackage: string | null; }) { function choose(slug: string) { router.post(onboarding.store().url, { step: 'package', slug }); } return ( <> {packages.length === 0 ? (

Nessun piano disponibile al momento. Potrai attivarne uno in seguito dalla sezione piano e crediti.

) : (
{packages.map((pkg) => { const isSelected = selectedPackage === pkg.slug; return (
{pkg.name} {isSelected && ( Selezionato )}

{formatEuro(pkg.price_cents)} {pkg.interval === 'year' ? '/anno' : '/mese'}

{!pkg.description?.startsWith( creditsLabel(pkg.credits), ) && (

{planCreditsLine(pkg)}

)} {pkg.description && (

{pkg.description}

)} ); })}
)} ); } export default function OnboardingIndex({ step, company, packages, selectedPackage, formatempConfigured, }: Props) { return ( {step === 'company' && } {step === 'formatemp' && ( )} {step === 'package' && ( )} ); }