25fff9b1c3
- Added `useUserStatus` hook to manage user status fetching and state. - Integrated user status in Quick Action Dashboard and related pages. - Enhanced error handling and loading states for user status. - Updated profile completion and document upload flows to refresh user status after actions. - Created a centralized API utility for handling requests and responses. - Refactored authentication token management to use session storage.
368 lines
14 KiB
TypeScript
368 lines
14 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import PageLayout from '../../../components/PageLayout'
|
|
import useAuthStore from '../../../store/authStore'
|
|
import { useUserStatus } from '../../../hooks/useUserStatus'
|
|
|
|
interface CompanyProfileData {
|
|
companyName: string
|
|
vatNumber: string
|
|
street: string
|
|
postalCode: string
|
|
city: string
|
|
country: string
|
|
accountHolder: string
|
|
iban: string
|
|
bic: string
|
|
secondPhone: string
|
|
emergencyName: string
|
|
emergencyPhone: string
|
|
}
|
|
|
|
const init: CompanyProfileData = {
|
|
companyName: '',
|
|
vatNumber: '',
|
|
street: '',
|
|
postalCode: '',
|
|
city: '',
|
|
country: '',
|
|
accountHolder: '',
|
|
iban: '',
|
|
bic: '',
|
|
secondPhone: '',
|
|
emergencyName: '',
|
|
emergencyPhone: ''
|
|
}
|
|
|
|
export default function CompanyAdditionalInformationPage() {
|
|
const router = useRouter()
|
|
const { accessToken } = useAuthStore()
|
|
const { refreshStatus } = useUserStatus()
|
|
|
|
const [form, setForm] = useState(init)
|
|
const [loading, setLoading] = useState(false)
|
|
const [success, setSuccess] = useState(false)
|
|
const [error, setError] = useState('')
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { name, value } = e.target
|
|
setForm(p => ({ ...p, [name]: value }))
|
|
setError('')
|
|
}
|
|
|
|
const validate = () => {
|
|
const required: (keyof CompanyProfileData)[] = [
|
|
'companyName','vatNumber','street','postalCode','city','country','accountHolder','iban'
|
|
]
|
|
for (const k of required) {
|
|
if (!form[k].trim()) {
|
|
setError('Bitte alle Pflichtfelder ausfüllen.')
|
|
return false
|
|
}
|
|
}
|
|
if (!/^([A-Z]{2}\d{2}[A-Z0-9]{10,30})$/i.test(form.iban.replace(/\s+/g,''))) {
|
|
setError('Ungültige IBAN.')
|
|
return false
|
|
}
|
|
setError('')
|
|
return true
|
|
}
|
|
|
|
const submit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (loading || success) return
|
|
if (!validate()) return
|
|
|
|
if (!accessToken) {
|
|
setError('Not authenticated. Please log in again.')
|
|
return
|
|
}
|
|
|
|
setLoading(true)
|
|
|
|
try {
|
|
// Prepare data for backend with correct field names
|
|
const profileData = {
|
|
address: form.street, // Backend expects 'address', not nested object
|
|
zip_code: form.postalCode, // Backend expects 'zip_code'
|
|
city: form.city,
|
|
country: form.country,
|
|
registrationNumber: form.vatNumber, // Map VAT number to registration number
|
|
businessType: 'company', // Default business type
|
|
branch: null, // Not collected in form, set to null
|
|
numberOfEmployees: null, // Not collected in form, set to 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/company/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: 'Save failed' }))
|
|
throw new Error(errorData.message || 'Save failed')
|
|
}
|
|
|
|
setSuccess(true)
|
|
|
|
// Refresh user status to update profile completion state
|
|
await refreshStatus()
|
|
|
|
// Redirect to next step after short delay
|
|
setTimeout(() => {
|
|
router.push('/quickaction-dashboard/register-sign-contract/company')
|
|
}, 1500)
|
|
|
|
} catch (error: any) {
|
|
console.error('Company profile save error:', error)
|
|
setError(error.message || 'Speichern fehlgeschlagen.')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<PageLayout>
|
|
<div className="relative flex flex-col flex-1 w-full px-5 sm:px-8 lg:px-12 py-12">
|
|
{/* Background */}
|
|
<div className="fixed inset-0 -z-10">
|
|
<div className="absolute inset-0 -z-20 bg-gradient-to-b from-gray-900/95 via-gray-900/80 to-gray-900" />
|
|
<svg aria-hidden="true" className="absolute inset-0 -z-10 h-full w-full stroke-white/10">
|
|
<defs>
|
|
<pattern id="company-additional-pattern" x="50%" y={-1} width={200} height={200} patternUnits="userSpaceOnUse">
|
|
<path d="M.5 200V.5H200" fill="none" stroke="rgba(255,255,255,0.05)" />
|
|
</pattern>
|
|
</defs>
|
|
<rect fill="url(#company-additional-pattern)" width="100%" height="100%" strokeWidth={0} />
|
|
</svg>
|
|
<div aria-hidden="true" className="absolute top-0 right-0 left-1/2 -ml-24 blur-3xl transform-gpu overflow-hidden lg:ml-24 xl:ml-48">
|
|
<div
|
|
className="aspect-[801/1036] w-[50.0625rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-50"
|
|
style={{ clipPath: 'polygon(63.1% 29.5%,100% 17.1%,76.6% 3%,48.4% 0%,44.6% 4.7%,54.5% 25.3%,59.8% 49%,55.2% 57.8%,44.4% 57.2%,27.8% 47.9%,35.1% 81.5%,0% 97.7%,39.2% 100%,35.2% 81.4%,97.2% 52.8%,63.1% 29.5%)' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<form
|
|
onSubmit={submit}
|
|
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">
|
|
Complete Company Profile
|
|
</h1>
|
|
|
|
{/* Company Details */}
|
|
<section>
|
|
<h2 className="text-sm font-semibold text-[#0F2460] mb-4">
|
|
Company Details
|
|
</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">
|
|
Company Name *
|
|
</label>
|
|
<input
|
|
name="companyName"
|
|
value={form.companyName}
|
|
onChange={handleChange}
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
VAT / Reg No. *
|
|
</label>
|
|
<input
|
|
name="vatNumber"
|
|
value={form.vatNumber}
|
|
onChange={handleChange}
|
|
placeholder="e.g. DE123456789"
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm uppercase focus:ring-2 focus:ring-indigo-500 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">
|
|
Street & Number *
|
|
</label>
|
|
<input
|
|
name="street"
|
|
value={form.street}
|
|
onChange={handleChange}
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Postal Code *
|
|
</label>
|
|
<input
|
|
name="postalCode"
|
|
value={form.postalCode}
|
|
onChange={handleChange}
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
City *
|
|
</label>
|
|
<input
|
|
name="city"
|
|
value={form.city}
|
|
onChange={handleChange}
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Country *
|
|
</label>
|
|
<input
|
|
name="country"
|
|
value={form.country}
|
|
onChange={handleChange}
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<hr className="my-8 border-gray-200" />
|
|
|
|
{/* Bank Details */}
|
|
<section>
|
|
<h2 className="text-sm font-semibold text-[#0F2460] mb-4">
|
|
Bank Details
|
|
</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">
|
|
Account Holder *
|
|
</label>
|
|
<input
|
|
name="accountHolder"
|
|
value={form.accountHolder}
|
|
onChange={handleChange}
|
|
placeholder="Company / Holder name"
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="sm:col-span-2 lg:col-span-2">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
IBAN *
|
|
</label>
|
|
<input
|
|
name="iban"
|
|
value={form.iban}
|
|
onChange={handleChange}
|
|
placeholder="DE89 3704 0044 0532 0130 00"
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm tracking-wide uppercase focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
BIC (optional)
|
|
</label>
|
|
<input
|
|
name="bic"
|
|
value={form.bic}
|
|
onChange={handleChange}
|
|
placeholder="GENODEF1XXX"
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm uppercase focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<hr className="my-8 border-gray-200" />
|
|
|
|
{/* Additional Information */}
|
|
<section>
|
|
<h2 className="text-sm font-semibold text-[#0F2460] mb-4">
|
|
Additional Information
|
|
</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">
|
|
Second Phone (optional)
|
|
</label>
|
|
<input
|
|
name="secondPhone"
|
|
value={form.secondPhone}
|
|
onChange={handleChange}
|
|
placeholder="+49 123 456 7890"
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Emergency Contact Name
|
|
</label>
|
|
<input
|
|
name="emergencyName"
|
|
value={form.emergencyName}
|
|
onChange={handleChange}
|
|
placeholder="Contact name"
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Emergency Contact Phone
|
|
</label>
|
|
<input
|
|
name="emergencyPhone"
|
|
value={form.emergencyPhone}
|
|
onChange={handleChange}
|
|
placeholder="+49 123 456 7890"
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
|
/>
|
|
</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">
|
|
Daten gespeichert.
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-10 flex justify-end">
|
|
<button
|
|
type="submit"
|
|
disabled={loading || success}
|
|
className="inline-flex items-center rounded-md bg-indigo-600 px-6 py-2.5 text-sm font-semibold text-white shadow hover:bg-indigo-500 disabled:bg-gray-400 disabled:cursor-not-allowed"
|
|
>
|
|
{loading ? 'Speichern…' : success ? 'Gespeichert' : 'Save & Continue'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</PageLayout>
|
|
)
|
|
}
|