862 lines
36 KiB
TypeScript
862 lines
36 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useMemo, useRef, useState, useCallback } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import PageLayout from '../../../components/PageLayout'
|
|
import useAuthStore from '../../../store/authStore'
|
|
import { useUserStatus } from '../../../hooks/useUserStatus'
|
|
import { useToast } from '../../../components/toast/toastComponent'
|
|
import { useTranslation } from '../../../i18n/useTranslation'
|
|
import { ChevronDownIcon } from '@heroicons/react/20/solid'
|
|
import TelephoneInput, { TelephoneInputHandle } from '../../../components/phone/telephoneInput'
|
|
|
|
interface PersonalProfileData {
|
|
firstName: string
|
|
lastName: string
|
|
email: string
|
|
phone: string
|
|
dob: string
|
|
nationality: string
|
|
street: string
|
|
postalCode: string
|
|
city: string
|
|
country: string
|
|
accountHolder: string
|
|
iban: string
|
|
secondPhone: string
|
|
emergencyName: string
|
|
emergencyPhone: string
|
|
}
|
|
|
|
const NATIONALITY_CODES = [
|
|
'german', 'austrian', 'swiss', 'italian', 'french', 'spanish', 'portuguese', 'dutch',
|
|
'belgian', 'polish', 'czech', 'hungarian', 'croatian', 'slovenian', 'slovak',
|
|
'british', 'irish', 'swedish', 'norwegian', 'danish', 'finnish', 'russian',
|
|
'turkish', 'greek', 'romanian', 'bulgarian', 'serbian', 'albanian', 'bosnian',
|
|
'american', 'canadian', 'brazilian', 'argentinian', 'mexican', 'chinese',
|
|
'japanese', 'indian', 'pakistani', 'australian', 'southAfrican', 'other'
|
|
] as const
|
|
|
|
const COUNTRY_CODES = [
|
|
'germany', 'austria', 'switzerland', 'italy', 'france', 'spain', 'portugal', 'netherlands',
|
|
'belgium', 'poland', 'czechRepublic', 'hungary', 'croatia', 'slovenia', 'slovakia',
|
|
'unitedKingdom', 'ireland', 'sweden', 'norway', 'denmark', 'finland', 'russia',
|
|
'turkey', 'greece', 'romania', 'bulgaria', 'serbia', 'albania', 'bosniaHerzegovina',
|
|
'unitedStates', 'canada', 'brazil', 'argentina', 'mexico', 'china', 'japan',
|
|
'india', 'pakistan', 'australia', 'southAfrica', 'other'
|
|
] as const
|
|
|
|
const NATIONALITY_VALUE_BY_CODE: Record<(typeof NATIONALITY_CODES)[number], string> = {
|
|
german: 'German', austrian: 'Austrian', swiss: 'Swiss', italian: 'Italian', french: 'French', spanish: 'Spanish', portuguese: 'Portuguese', dutch: 'Dutch', belgian: 'Belgian', polish: 'Polish', czech: 'Czech', hungarian: 'Hungarian', croatian: 'Croatian', slovenian: 'Slovenian', slovak: 'Slovak', british: 'British', irish: 'Irish', swedish: 'Swedish', norwegian: 'Norwegian', danish: 'Danish', finnish: 'Finnish', russian: 'Russian', turkish: 'Turkish', greek: 'Greek', romanian: 'Romanian', bulgarian: 'Bulgarian', serbian: 'Serbian', albanian: 'Albanian', bosnian: 'Bosnian', american: 'American', canadian: 'Canadian', brazilian: 'Brazilian', argentinian: 'Argentinian', mexican: 'Mexican', chinese: 'Chinese', japanese: 'Japanese', indian: 'Indian', pakistani: 'Pakistani', australian: 'Australian', southAfrican: 'South African', other: 'Other'
|
|
}
|
|
|
|
const COUNTRY_VALUE_BY_CODE: Record<(typeof COUNTRY_CODES)[number], string> = {
|
|
germany: 'Germany', austria: 'Austria', switzerland: 'Switzerland', italy: 'Italy', france: 'France', spain: 'Spain', portugal: 'Portugal', netherlands: 'Netherlands', belgium: 'Belgium', poland: 'Poland', czechRepublic: 'Czech Republic', hungary: 'Hungary', croatia: 'Croatia', slovenia: 'Slovenia', slovakia: 'Slovakia', unitedKingdom: 'United Kingdom', ireland: 'Ireland', sweden: 'Sweden', norway: 'Norway', denmark: 'Denmark', finland: 'Finland', russia: 'Russia', turkey: 'Turkey', greece: 'Greece', romania: 'Romania', bulgaria: 'Bulgaria', serbia: 'Serbia', albania: 'Albania', bosniaHerzegovina: 'Bosnia and Herzegovina', unitedStates: 'United States', canada: 'Canada', brazil: 'Brazil', argentina: 'Argentina', mexico: 'Mexico', china: 'China', japan: 'Japan', india: 'India', pakistan: 'Pakistan', australia: 'Australia', southAfrica: 'South Africa', other: 'Other'
|
|
}
|
|
|
|
const NATIONALITIES = NATIONALITY_CODES.map(code => NATIONALITY_VALUE_BY_CODE[code])
|
|
const COUNTRIES = COUNTRY_CODES.map(code => COUNTRY_VALUE_BY_CODE[code])
|
|
const normalizeOptionValue = (value: string) => value.toLowerCase().replace(/[^a-z]/g, '')
|
|
|
|
const initialData: PersonalProfileData = {
|
|
firstName: '',
|
|
lastName: '',
|
|
email: '',
|
|
phone: '',
|
|
dob: '',
|
|
nationality: '',
|
|
street: '',
|
|
postalCode: '',
|
|
city: '',
|
|
country: '',
|
|
accountHolder: '',
|
|
iban: '',
|
|
secondPhone: '',
|
|
emergencyName: '',
|
|
emergencyPhone: ''
|
|
}
|
|
|
|
type SelectOption = { value: string; label: string }
|
|
|
|
function ModernSelect({
|
|
label,
|
|
placeholder,
|
|
searchPlaceholder = 'Search…',
|
|
noResults = 'No results',
|
|
value,
|
|
onChange,
|
|
options,
|
|
}: {
|
|
label: string
|
|
placeholder?: string
|
|
searchPlaceholder?: string
|
|
noResults?: string
|
|
value: string
|
|
onChange: (next: string) => void
|
|
options: SelectOption[]
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [open, setOpen] = useState(false)
|
|
const [query, setQuery] = useState('')
|
|
const btnRef = useRef<HTMLButtonElement | null>(null)
|
|
const [pos, setPos] = useState({ left: 16, top: 0, width: 320 })
|
|
const resolvedPlaceholder = placeholder ?? t('autofix.ka5bf342b')
|
|
|
|
const selected = useMemo(
|
|
() => options.find(o => o.value === value) || null,
|
|
[options, value]
|
|
)
|
|
|
|
const filtered = useMemo(() => {
|
|
const q = query.trim().toLowerCase()
|
|
if (!q) return options
|
|
return options.filter(o => o.label.toLowerCase().includes(q))
|
|
}, [options, query])
|
|
|
|
useEffect(() => {
|
|
if (!open) return
|
|
|
|
const update = () => {
|
|
const el = btnRef.current
|
|
if (!el) return
|
|
const r = el.getBoundingClientRect()
|
|
|
|
const padding = 16
|
|
const width = Math.min(r.width, window.innerWidth - padding * 2)
|
|
const left = Math.max(padding, Math.min(r.left, window.innerWidth - width - padding))
|
|
const top = r.bottom + 8
|
|
|
|
setPos({ left, top, width })
|
|
}
|
|
|
|
update()
|
|
window.addEventListener('resize', update)
|
|
window.addEventListener('scroll', update, true)
|
|
return () => {
|
|
window.removeEventListener('resize', update)
|
|
window.removeEventListener('scroll', update, true)
|
|
}
|
|
}, [open])
|
|
|
|
// close on escape
|
|
useEffect(() => {
|
|
if (!open) return
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') setOpen(false)
|
|
}
|
|
window.addEventListener('keydown', onKey)
|
|
return () => window.removeEventListener('keydown', onKey)
|
|
}, [open])
|
|
|
|
return (
|
|
<div className="relative">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">{label} *</label>
|
|
|
|
<button
|
|
ref={btnRef}
|
|
type="button"
|
|
onClick={() => setOpen(v => !v)}
|
|
className="w-full rounded-lg border border-gray-300 bg-white/70 px-3 py-2 text-sm text-left
|
|
shadow-sm hover:border-gray-400
|
|
focus:outline-none focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent
|
|
inline-flex items-center justify-between gap-3"
|
|
aria-haspopup="listbox"
|
|
aria-expanded={open}
|
|
>
|
|
<span className={selected ? 'text-gray-900' : 'text-gray-500'}>
|
|
{selected ? selected.label : resolvedPlaceholder}
|
|
</span>
|
|
<ChevronDownIcon className={`h-5 w-5 text-gray-500 transition-transform ${open ? 'rotate-180' : ''}`} />
|
|
</button>
|
|
|
|
{open && (
|
|
<>
|
|
{/* click-away overlay */}
|
|
<div className="fixed inset-0 z-[90]" onClick={() => setOpen(false)} aria-hidden />
|
|
|
|
{/* dropdown (fixed so it “pops out under” even on mobile) */}
|
|
<div
|
|
className="fixed z-[100] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-2xl"
|
|
style={{ left: pos.left, top: pos.top, width: pos.width }}
|
|
>
|
|
<div className="p-2 border-b border-gray-100">
|
|
<input
|
|
value={query}
|
|
onChange={e => setQuery(e.target.value)}
|
|
placeholder={searchPlaceholder}
|
|
className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm
|
|
focus:outline-none focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent"
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
|
|
<div className="max-h-[42vh] overflow-auto p-1">
|
|
{filtered.length === 0 ? (
|
|
<div className="px-3 py-2 text-sm text-gray-500">{noResults}</div>
|
|
) : (
|
|
filtered.map(o => {
|
|
const active = o.value === value
|
|
return (
|
|
<button
|
|
key={o.value}
|
|
type="button"
|
|
onClick={() => {
|
|
onChange(o.value)
|
|
setQuery('')
|
|
setOpen(false)
|
|
}}
|
|
className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors
|
|
${active ? 'bg-[#8D6B1D]/10 text-[#7A5E1A] font-semibold' : 'text-gray-800 hover:bg-gray-50'}`}
|
|
role="option"
|
|
aria-selected={active}
|
|
>
|
|
{o.label}
|
|
</button>
|
|
)
|
|
})
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function PersonalAdditionalInformationPage() {
|
|
const { t } = useTranslation();
|
|
const router = useRouter()
|
|
const user = useAuthStore(s => s.user) // NEW
|
|
const isAuthReady = useAuthStore(s => (s as any).isAuthReady) // NEW
|
|
const { accessToken } = useAuthStore()
|
|
const { userStatus, loading: statusLoading, refreshStatus } = useUserStatus()
|
|
const { showToast } = useToast()
|
|
const phoneRef = useRef<TelephoneInputHandle | null>(null)
|
|
const secondPhoneRef = useRef<TelephoneInputHandle | null>(null)
|
|
const emergencyPhoneRef = useRef<TelephoneInputHandle | null>(null)
|
|
|
|
const [form, setForm] = useState(initialData)
|
|
const [loading, setLoading] = useState(false)
|
|
const [success, setSuccess] = useState(false)
|
|
const [error, setError] = useState('')
|
|
const nationalityOptions = useMemo(
|
|
() => NATIONALITY_CODES.map(code => ({ value: code, label: t(`quickactionDashboard.additionalInfo.nationalities.${code}`) })),
|
|
[t]
|
|
)
|
|
const countryOptions = useMemo(
|
|
() => COUNTRY_CODES.map(code => ({ value: code, label: t(`quickactionDashboard.additionalInfo.countries.${code}`) })),
|
|
[t]
|
|
)
|
|
|
|
// Prefill form if profile already exists
|
|
useEffect(() => {
|
|
let abort = false
|
|
async function loadProfile() {
|
|
if (!accessToken) return
|
|
try {
|
|
const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/me`, {
|
|
method: 'GET',
|
|
headers: { Authorization: `Bearer ${accessToken}` }
|
|
})
|
|
if (!res.ok) return
|
|
const data = await res.json().catch(() => null)
|
|
const profile = data?.profile
|
|
const user = data?.user
|
|
if ((!profile && !user) || abort) return
|
|
const toDateInput = (d?: string) => {
|
|
if (!d) return ''
|
|
const dt = new Date(d)
|
|
if (Number.isNaN(dt.getTime())) return ''
|
|
return dt.toISOString().split('T')[0]
|
|
}
|
|
setForm(prev => ({
|
|
...prev,
|
|
firstName: user?.firstName || profile?.first_name || prev.firstName,
|
|
lastName: user?.lastName || profile?.last_name || prev.lastName,
|
|
email: user?.email || prev.email,
|
|
phone: user?.phone || profile?.phone || prev.phone,
|
|
dob: toDateInput(profile?.date_of_birth || profile?.dateOfBirth),
|
|
nationality: Object.entries(NATIONALITY_VALUE_BY_CODE).find(([, label]) => normalizeOptionValue(label) === normalizeOptionValue(profile?.nationality || ''))?.[0] || prev.nationality,
|
|
street: profile?.address || prev.street,
|
|
postalCode: profile?.zip_code || profile?.zipCode || prev.postalCode,
|
|
city: profile?.city || prev.city,
|
|
country: Object.entries(COUNTRY_VALUE_BY_CODE).find(([, label]) => normalizeOptionValue(label) === normalizeOptionValue(profile?.country || ''))?.[0] || prev.country,
|
|
accountHolder: profile?.account_holder_name || profile?.accountHolderName || prev.accountHolder,
|
|
// Prefer IBAN from users table (data.user.iban), fallback to profile if any
|
|
iban: (user?.iban ?? profile?.iban ?? prev.iban) as string,
|
|
secondPhone: profile?.phone_secondary || profile?.phoneSecondary || prev.secondPhone,
|
|
emergencyName: profile?.emergency_contact_name || profile?.emergencyContactName || prev.emergencyName,
|
|
emergencyPhone: profile?.emergency_contact_phone || profile?.emergencyContactPhone || prev.emergencyPhone,
|
|
}))
|
|
} catch (_) {
|
|
// ignore prefill errors; user can still fill manually
|
|
}
|
|
}
|
|
loadProfile()
|
|
return () => { abort = true }
|
|
}, [accessToken])
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
|
const { name, value } = e.target
|
|
setForm(p => ({ ...p, [name]: value }))
|
|
setError('')
|
|
}
|
|
|
|
const handlePhoneInput = (e: React.FormEvent<HTMLInputElement>) => {
|
|
const { name, value } = e.currentTarget
|
|
setForm(p => ({ ...p, [name]: value }))
|
|
setError('')
|
|
}
|
|
|
|
const validateDateOfBirth = (dob: string) => {
|
|
if (!dob) return false
|
|
|
|
const birthDate = new Date(dob)
|
|
const today = new Date()
|
|
|
|
// Check if date is valid
|
|
if (isNaN(birthDate.getTime())) return false
|
|
|
|
// Check if birth date is not in the future
|
|
if (birthDate > today) return false
|
|
|
|
// Check minimum age (18 years)
|
|
const minDate = new Date()
|
|
minDate.setFullYear(today.getFullYear() - 18)
|
|
if (birthDate > minDate) return false
|
|
|
|
// Check maximum age (120 years)
|
|
const maxDate = new Date()
|
|
maxDate.setFullYear(today.getFullYear() - 120)
|
|
if (birthDate < maxDate) return false
|
|
|
|
return true
|
|
}
|
|
|
|
const validate = () => {
|
|
const requiredKeys: (keyof PersonalProfileData)[] = [
|
|
'firstName','lastName','email','phone',
|
|
'dob','nationality','street','postalCode','city','country','accountHolder','iban'
|
|
]
|
|
for (const k of requiredKeys) {
|
|
if (!form[k].trim()) {
|
|
const msg = t('quickactionDashboard.additionalInfo.fillRequiredFields')
|
|
setError(msg)
|
|
showToast({
|
|
variant: 'error',
|
|
title: t('quickactionDashboard.uploadId.missingInfoTitle'),
|
|
message: msg,
|
|
})
|
|
return false
|
|
}
|
|
}
|
|
|
|
// Date of birth validation
|
|
if (!validateDateOfBirth(form.dob)) {
|
|
const msg = t('quickactionDashboard.additionalInfo.invalidDateOfBirthMessage')
|
|
setError(msg)
|
|
showToast({
|
|
variant: 'error',
|
|
title: t('quickactionDashboard.additionalInfo.invalidDateOfBirthTitle'),
|
|
message: msg,
|
|
})
|
|
return false
|
|
}
|
|
|
|
// very loose IBAN check
|
|
if (!/^([A-Z]{2}\d{2}[A-Z0-9]{10,30})$/i.test(form.iban.replace(/\s+/g,''))) {
|
|
const msg = t('quickactionDashboard.additionalInfo.invalidIbanMessage')
|
|
setError(msg)
|
|
showToast({
|
|
variant: 'error',
|
|
title: t('quickactionDashboard.additionalInfo.invalidIbanTitle'),
|
|
message: msg,
|
|
})
|
|
return false
|
|
}
|
|
|
|
const phoneApi = phoneRef.current
|
|
const dialCode = phoneApi?.getDialCode?.()
|
|
const intlNumber = phoneApi?.getNumber() || ''
|
|
const valid = phoneApi?.isValid() ?? false
|
|
if (!dialCode) {
|
|
const msg = t('quickactionDashboard.additionalInfo.missingCountryCodeMessage')
|
|
setError(msg)
|
|
showToast({
|
|
variant: 'error',
|
|
title: t('quickactionDashboard.additionalInfo.missingCountryCodeTitle'),
|
|
message: msg,
|
|
})
|
|
return false
|
|
}
|
|
if (!intlNumber) {
|
|
const msg = t('quickactionDashboard.additionalInfo.phoneNumberMissingMessage')
|
|
setError(msg)
|
|
showToast({
|
|
variant: 'error',
|
|
title: t('quickactionDashboard.additionalInfo.missingPhoneNumberTitle'),
|
|
message: msg,
|
|
})
|
|
return false
|
|
}
|
|
if (!valid) {
|
|
const msg = t('quickactionDashboard.additionalInfo.validPhoneNumberMessage')
|
|
setError(msg)
|
|
showToast({
|
|
variant: 'error',
|
|
title: t('quickactionDashboard.additionalInfo.invalidPhoneNumberTitle'),
|
|
message: msg,
|
|
})
|
|
return false
|
|
}
|
|
|
|
const optionalSecond = form.secondPhone.trim()
|
|
if (optionalSecond) {
|
|
const secondApi = secondPhoneRef.current
|
|
const ok = secondApi?.isValid?.() ?? false
|
|
if (!ok) {
|
|
const msg = t('quickactionDashboard.additionalInfo.validSecondPhoneNumberMessage')
|
|
setError(msg)
|
|
showToast({
|
|
variant: 'error',
|
|
title: t('quickactionDashboard.additionalInfo.invalidPhoneNumberTitle'),
|
|
message: msg,
|
|
})
|
|
return false
|
|
}
|
|
}
|
|
const optionalEmergency = form.emergencyPhone.trim()
|
|
if (optionalEmergency) {
|
|
const emergencyApi = emergencyPhoneRef.current
|
|
const ok = emergencyApi?.isValid?.() ?? false
|
|
if (!ok) {
|
|
const msg = t('quickactionDashboard.additionalInfo.validEmergencyPhoneNumberMessage')
|
|
setError(msg)
|
|
showToast({
|
|
variant: 'error',
|
|
title: t('quickactionDashboard.additionalInfo.invalidPhoneNumberTitle'),
|
|
message: msg,
|
|
})
|
|
return false
|
|
}
|
|
}
|
|
setError('')
|
|
return true
|
|
}
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (loading || success) return
|
|
if (!validate()) return
|
|
|
|
if (!accessToken) {
|
|
const msg = t('quickactionDashboard.additionalInfo.authErrorMessage')
|
|
setError(msg)
|
|
showToast({
|
|
variant: 'error',
|
|
title: t('quickactionDashboard.additionalInfo.authErrorTitle'),
|
|
message: msg,
|
|
})
|
|
return
|
|
}
|
|
|
|
setLoading(true)
|
|
|
|
try {
|
|
const normalizedPhone = phoneRef.current?.getNumber() || form.phone
|
|
const normalizedSecondPhone = secondPhoneRef.current?.getNumber() || form.secondPhone
|
|
const normalizedEmergencyPhone = emergencyPhoneRef.current?.getNumber() || form.emergencyPhone
|
|
|
|
// Prepare data for backend with correct field names
|
|
const profileData = {
|
|
firstName: form.firstName,
|
|
lastName: form.lastName,
|
|
phone: normalizedPhone,
|
|
dateOfBirth: form.dob,
|
|
nationality: NATIONALITY_VALUE_BY_CODE[form.nationality as keyof typeof NATIONALITY_VALUE_BY_CODE] || form.nationality,
|
|
address: form.street, // Backend expects 'address', not nested object
|
|
zip_code: form.postalCode, // Backend expects 'zip_code'
|
|
city: form.city,
|
|
country: COUNTRY_VALUE_BY_CODE[form.country as keyof typeof COUNTRY_VALUE_BY_CODE] || form.country,
|
|
phoneSecondary: normalizedSecondPhone || null, // Backend expects 'phoneSecondary'
|
|
emergencyContactName: form.emergencyName || null,
|
|
emergencyContactPhone: normalizedEmergencyPhone || null,
|
|
accountHolderName: form.accountHolder, // Backend expects 'accountHolderName'
|
|
iban: form.iban.replace(/\s+/g, '') // Remove spaces from IBAN
|
|
}
|
|
|
|
const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/profile/personal/complete`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${accessToken}`,
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(profileData)
|
|
})
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json().catch(() => ({ message: t('autofix.k481c2be7') }))
|
|
throw new Error(errorData.message || 'Save failed')
|
|
}
|
|
|
|
setSuccess(true)
|
|
showToast({
|
|
variant: 'success',
|
|
title: t('quickactionDashboard.additionalInfo.additionalInfoSuccessTitle'),
|
|
message: t('quickactionDashboard.additionalInfo.personalSuccessMessage'),
|
|
})
|
|
|
|
// Refresh user status to update profile completion state
|
|
suppressAutoRedirectRef.current = true
|
|
await refreshStatus()
|
|
|
|
// Redirect back to tutorial modal after short delay
|
|
setTimeout(() => {
|
|
smoothReplace('/quickaction-dashboard?tutorial=true')
|
|
}, 1500)
|
|
|
|
} catch (error: any) {
|
|
console.error('Personal profile save error:', error)
|
|
const msg = error.message || t('quickactionDashboard.additionalInfo.saveFailedMessage')
|
|
setError(msg)
|
|
showToast({
|
|
variant: 'error',
|
|
title: t('quickactionDashboard.additionalInfo.saveFailedTitle'),
|
|
message: msg,
|
|
})
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const setField = (name: keyof PersonalProfileData, value: string) => {
|
|
setForm(p => ({ ...p, [name]: value }))
|
|
setError('')
|
|
}
|
|
|
|
// NEW: smooth redirect
|
|
const [redirectTo, setRedirectTo] = useState<string | null>(null)
|
|
const redirectOnceRef = useRef(false)
|
|
const suppressAutoRedirectRef = useRef(false)
|
|
const smoothReplace = useCallback((to: string) => {
|
|
if (redirectOnceRef.current) return
|
|
redirectOnceRef.current = true
|
|
setRedirectTo(to)
|
|
window.setTimeout(() => router.replace(to), 200)
|
|
}, [router])
|
|
|
|
// NEW: hard block if step already done OR all steps done
|
|
useEffect(() => {
|
|
if (statusLoading || !userStatus) return
|
|
if (suppressAutoRedirectRef.current) return
|
|
const allDone =
|
|
!!userStatus.email_verified &&
|
|
!!userStatus.documents_uploaded &&
|
|
!!userStatus.profile_completed &&
|
|
!!userStatus.contract_signed
|
|
|
|
if (allDone) {
|
|
smoothReplace('/dashboard') // CHANGED
|
|
} else if (userStatus.profile_completed) {
|
|
smoothReplace('/quickaction-dashboard') // CHANGED
|
|
}
|
|
}, [statusLoading, userStatus, smoothReplace])
|
|
|
|
// NEW: must be logged in
|
|
useEffect(() => {
|
|
if (!isAuthReady) return
|
|
if (!user || !accessToken) smoothReplace('/login')
|
|
}, [isAuthReady, user, accessToken, smoothReplace])
|
|
|
|
return (
|
|
<PageLayout>
|
|
{/* NEW: smooth redirect overlay */}
|
|
{redirectTo && (
|
|
<div className="fixed inset-0 z-[200] flex items-center justify-center bg-white/70 backdrop-blur-sm transition-opacity duration-200 opacity-100">
|
|
<div className="rounded-xl bg-white px-5 py-4 shadow ring-1 ring-black/5">
|
|
<div className="text-sm font-medium text-gray-900">{t('quickactionDashboard.redirecting')}</div>
|
|
<div className="mt-1 text-xs text-gray-600">{t('quickactionDashboard.pleaseWait')}</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="relative min-h-screen overflow-hidden bg-slate-50">
|
|
{/* Animated background (same as dashboard) */}
|
|
<div className="pointer-events-none absolute inset-0 z-0">
|
|
{/* Soft gradient blobs */}
|
|
<div className="absolute -top-32 -left-20 h-80 w-80 rounded-full bg-blue-400/25 blur-3xl animate-pulse" />
|
|
<div className="absolute top-1/4 -right-24 h-96 w-96 rounded-full bg-emerald-400/20 blur-3xl animate-pulse" />
|
|
<div className="absolute bottom-[-6rem] left-1/4 h-96 w-96 rounded-full bg-indigo-400/20 blur-3xl animate-pulse" />
|
|
{/* Subtle radial highlight */}
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(59,130,246,0.14),transparent_60%)]" />
|
|
</div>
|
|
|
|
<main className="relative z-10 flex flex-col flex-1 w-full px-5 sm:px-8 lg:px-12 py-12">
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
className="relative max-w-6xl w-full mx-auto bg-white rounded-2xl shadow-xl ring-1 ring-black/10"
|
|
>
|
|
<div className="px-6 py-8 sm:px-10 lg:px-16">
|
|
<h1 className="text-center text-xl sm:text-2xl font-semibold text-[#0F172A] mb-6">
|
|
{t('quickactionDashboard.additionalInfo.title')}
|
|
</h1>
|
|
|
|
{/* Personal Information */}
|
|
<section>
|
|
<h2 className="text-sm font-semibold text-[#0F2460] mb-4">
|
|
{t('quickactionDashboard.additionalInfo.personalInformation')}
|
|
</h2>
|
|
<div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{t('quickactionDashboard.additionalInfo.firstName')}
|
|
</label>
|
|
<input
|
|
name="firstName"
|
|
value={form.firstName}
|
|
onChange={handleChange}
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{t('quickactionDashboard.additionalInfo.lastName')}
|
|
</label>
|
|
<input
|
|
name="lastName"
|
|
value={form.lastName}
|
|
onChange={handleChange}
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="sm:col-span-2 lg:col-span-3">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{t('quickactionDashboard.additionalInfo.email')}
|
|
</label>
|
|
<input
|
|
name="email"
|
|
value={form.email}
|
|
onChange={handleChange}
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm bg-gray-50 text-gray-700 focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent"
|
|
readOnly
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="sm:col-span-2 lg:col-span-3">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{t('quickactionDashboard.additionalInfo.phoneNumber')}
|
|
</label>
|
|
<TelephoneInput
|
|
name="phone"
|
|
value={form.phone}
|
|
onChange={handleChange}
|
|
onInput={handlePhoneInput}
|
|
placeholder={t('autofix.k9f56d4ac')}
|
|
ref={phoneRef}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{t('quickactionDashboard.additionalInfo.dateOfBirth')}
|
|
</label>
|
|
<input
|
|
type="date"
|
|
name="dob"
|
|
value={form.dob}
|
|
onChange={handleChange}
|
|
min={new Date(new Date().getFullYear() - 120, 0, 1).toISOString().split('T')[0]}
|
|
max={new Date(new Date().getFullYear() - 18, 11, 31).toISOString().split('T')[0]}
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<ModernSelect
|
|
label={t('quickactionDashboard.additionalInfo.nationality')}
|
|
placeholder={t('quickactionDashboard.additionalInfo.selectNationality')}
|
|
searchPlaceholder={t('quickactionDashboard.additionalInfo.searchPlaceholder')}
|
|
noResults={t('quickactionDashboard.additionalInfo.noResults')}
|
|
value={form.nationality}
|
|
onChange={(v) => setField('nationality', v)}
|
|
options={NATIONALITIES.map(n => ({ value: n, label: n }))}
|
|
/>
|
|
</div>
|
|
<div className="sm:col-span-2 lg:col-span-3">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{t('quickactionDashboard.additionalInfo.streetHouseNumber')}
|
|
</label>
|
|
<input
|
|
name="street"
|
|
value={form.street}
|
|
onChange={handleChange}
|
|
placeholder={t('autofix.k96dbbe05')}
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{t('quickactionDashboard.additionalInfo.postalCode')}
|
|
</label>
|
|
<input
|
|
name="postalCode"
|
|
value={form.postalCode}
|
|
onChange={handleChange}
|
|
placeholder={t('autofix.kf70b9896')}
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{t('quickactionDashboard.additionalInfo.city')}
|
|
</label>
|
|
<input
|
|
name="city"
|
|
value={form.city}
|
|
onChange={handleChange}
|
|
placeholder={t('autofix.k62bc3c59')}
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<ModernSelect
|
|
label={t('quickactionDashboard.additionalInfo.country')}
|
|
placeholder={t('quickactionDashboard.additionalInfo.selectCountry')}
|
|
searchPlaceholder={t('quickactionDashboard.additionalInfo.searchPlaceholder')}
|
|
noResults={t('quickactionDashboard.additionalInfo.noResults')}
|
|
value={form.country}
|
|
onChange={(v) => setField('country', v)}
|
|
options={COUNTRIES.map(c => ({ value: c, label: c }))}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<hr className="my-8 border-gray-200" />
|
|
|
|
{/* Bank Details */}
|
|
<section>
|
|
<h2 className="text-sm font-semibold text-[#0F2460] mb-4">
|
|
{t('quickactionDashboard.additionalInfo.bankDetails')}
|
|
</h2>
|
|
<div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{t('quickactionDashboard.additionalInfo.accountHolder')}
|
|
</label>
|
|
<input
|
|
name="accountHolder"
|
|
value={form.accountHolder}
|
|
onChange={handleChange}
|
|
placeholder={t('autofix.k28f1a9b1')}
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="sm:col-span-1 lg:col-span-2">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{t('quickactionDashboard.additionalInfo.iban')}
|
|
</label>
|
|
<input
|
|
name="iban"
|
|
value={form.iban}
|
|
onChange={handleChange}
|
|
placeholder={t('autofix.k1a1ca621')}
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm tracking-wide uppercase focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<hr className="my-8 border-gray-200" />
|
|
|
|
{/* Additional Information */}
|
|
<section>
|
|
<h2 className="text-sm font-semibold text-[#0F2460] mb-4">
|
|
{t('quickactionDashboard.additionalInfo.additionalInformation')}
|
|
</h2>
|
|
<div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
|
|
<div className="sm:col-span-2 lg:col-span-3">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{t('quickactionDashboard.additionalInfo.secondPhoneOptional')}
|
|
</label>
|
|
<TelephoneInput
|
|
name="secondPhone"
|
|
value={form.secondPhone}
|
|
onChange={handleChange}
|
|
onInput={handlePhoneInput}
|
|
placeholder="+43 660 1234567"
|
|
ref={secondPhoneRef}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{t('quickactionDashboard.additionalInfo.emergencyContactName')}
|
|
</label>
|
|
<input
|
|
name="emergencyName"
|
|
value={form.emergencyName}
|
|
onChange={handleChange}
|
|
placeholder={t('autofix.k67dd8a82')}
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{t('quickactionDashboard.additionalInfo.emergencyContactPhone')}
|
|
</label>
|
|
<TelephoneInput
|
|
name="emergencyPhone"
|
|
value={form.emergencyPhone}
|
|
onChange={handleChange}
|
|
onInput={handlePhoneInput}
|
|
placeholder="+43 660 1234567"
|
|
ref={emergencyPhoneRef}
|
|
/>
|
|
</div>
|
|
<div className="hidden lg:block" />
|
|
</div>
|
|
</section>
|
|
|
|
{error && (
|
|
<div className="mt-6 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-xs text-red-600">
|
|
{error}
|
|
</div>
|
|
)}
|
|
{success && (
|
|
<div className="mt-6 rounded-md border border-green-300 bg-green-50 px-4 py-3 text-xs text-green-700">
|
|
{t('quickactionDashboard.additionalInfo.dataSavedRedirecting')}
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-10 flex items-center justify-between">
|
|
<button
|
|
type="button"
|
|
onClick={() => router.push('/quickaction-dashboard')}
|
|
className="inline-flex items-center rounded-md border border-[#8D6B1D]/40 px-4 py-2 text-sm font-semibold text-[#8D6B1D] bg-white hover:bg-[#8D6B1D]/10"
|
|
>
|
|
{t('quickactionDashboard.backToDashboard')}
|
|
</button>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading || success}
|
|
className="inline-flex items-center rounded-md bg-[#8D6B1D] px-6 py-2.5 text-sm font-semibold text-white shadow hover:bg-[#7A5E1A] focus:outline-none focus:ring-2 focus:ring-[#8D6B1D] focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed"
|
|
>
|
|
{loading ? t('common.saving') : success ? t('common.saved') : t('quickactionDashboard.additionalInfo.saveContinue')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</main>
|
|
</div>
|
|
</PageLayout>
|
|
)
|
|
}
|