diff --git a/src/app/quickaction-dashboard/register-sign-contract/company/page.tsx b/src/app/quickaction-dashboard/register-sign-contract/company/page.tsx index c177770..75e0427 100644 --- a/src/app/quickaction-dashboard/register-sign-contract/company/page.tsx +++ b/src/app/quickaction-dashboard/register-sign-contract/company/page.tsx @@ -16,11 +16,6 @@ export default function CompanySignContractPage() { const { userStatus, loading: statusLoading, refreshStatus } = useUserStatus() const { showToast } = useToast() - const [companyName, setCompanyName] = useState('') - const [repName, setRepName] = useState('') - const [repTitle, setRepTitle] = useState('') - const [location, setLocation] = useState('') - const [note, setNote] = useState('') const [date, setDate] = useState('') const [signatureDataUrl, setSignatureDataUrl] = useState('') const [agreeContract, setAgreeContract] = useState(false) @@ -29,12 +24,12 @@ export default function CompanySignContractPage() { const [submitting, setSubmitting] = useState(false) const [success, setSuccess] = useState(false) const [error, setError] = useState('') + const [previewLoading, setPreviewLoading] = useState(false) const [activeTab, setActiveTab] = useState<'contract' | 'gdpr'>('contract') const [previewState, setPreviewState] = useState({ contract: { loading: false, html: null as string | null, error: null as string | null }, gdpr: { loading: false, html: null as string | null, error: null as string | null } }) - const [previewsReady, setPreviewsReady] = useState(false) useEffect(() => { setDate(new Date().toISOString().slice(0, 10)) @@ -42,7 +37,6 @@ export default function CompanySignContractPage() { const canvasRef = useRef(null) const isDrawing = useRef(false) - const scaleRef = useRef(1) const getPos = (e: React.MouseEvent | React.TouchEvent) => { const canvas = canvasRef.current @@ -50,8 +44,9 @@ export default function CompanySignContractPage() { const rect = canvas.getBoundingClientRect() const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY - const x = (clientX - rect.left) * scaleRef.current - const y = (clientY - rect.top) * scaleRef.current + // Coordinates should be in CSS pixels. The canvas context is already DPR-scaled via setTransform. + const x = clientX - rect.left + const y = clientY - rect.top return { x, y } } @@ -70,7 +65,6 @@ export default function CompanySignContractPage() { ctx.lineCap = 'round' ctx.strokeStyle = '#0f172a' } - scaleRef.current = dpr } resize() window.addEventListener('resize', resize) @@ -155,16 +149,18 @@ export default function CompanySignContractPage() { // Load latest contract + GDPR previews for company user useEffect(() => { if (!accessToken) return - loadPreview('contract') - loadPreview('gdpr') + setPreviewLoading(true) + Promise.all([ + loadPreview('contract'), + loadPreview('gdpr') + ]).finally(() => setPreviewLoading(false)) }, [accessToken]) useEffect(() => { - const doneLoading = !previewState.contract.loading && !previewState.gdpr.loading + const doneLoading = !previewState.contract.loading && !previewState.gdpr.loading && !previewLoading const anyAvailable = !!previewState.contract.html || !!previewState.gdpr.html const blockingMsg = 'Temporarily unable to sign contracts. No active documents are available at this moment.' if (doneLoading) { - setPreviewsReady(true) // If one preview is missing, default to showing the available one if (!previewState.contract.html && previewState.gdpr.html) { setActiveTab('gdpr') @@ -180,13 +176,9 @@ export default function CompanySignContractPage() { setError(blockingMsg) } } - }, [previewState]) + }, [previewState, previewLoading]) const valid = () => { - const companyValid = companyName.trim().length >= 3 - const repNameValid = repName.trim().length >= 3 - const repTitleValid = repTitle.trim().length >= 2 - const locationValid = location.trim().length >= 2 const contractAvailable = !!previewState.contract.html const gdprAvailable = !!previewState.gdpr.html @@ -197,7 +189,7 @@ export default function CompanySignContractPage() { const signatureDrawn = !!signatureDataUrl const anyPreview = contractAvailable || gdprAvailable - return companyValid && repNameValid && repTitleValid && locationValid && contractChecked && dataChecked && signatureChecked && signatureDrawn && anyPreview + return contractChecked && dataChecked && signatureChecked && signatureDrawn && anyPreview } const handleSubmit = async (e: React.FormEvent) => { @@ -219,10 +211,6 @@ export default function CompanySignContractPage() { return } - if (companyName.trim().length < 3) issues.push('Company name (min 3 characters)') - if (repName.trim().length < 3) issues.push('Representative name (min 3 characters)') - if (repTitle.trim().length < 2) issues.push('Representative title (min 2 characters)') - if (location.trim().length < 2) issues.push('Location (min 2 characters)') if (contractAvailable && !agreeContract) issues.push('Contract read and understood') if (gdprAvailable && !agreeData) issues.push('Privacy policy accepted') if (!confirmSignature) issues.push('Electronic signature confirmed') @@ -254,18 +242,8 @@ export default function CompanySignContractPage() { try { const contractData = { - companyName: companyName.trim(), - representativeName: repName.trim(), - representativeTitle: repTitle.trim(), date, - location: location.trim(), - note: note.trim(), contractType: 'company', - confirmations: { - agreeContract, - agreeData, - confirmSignature - } } // Create FormData for the existing backend endpoint @@ -483,7 +461,7 @@ export default function CompanySignContractPage() { - {previewState[activeTab].loading ? ( + {previewLoading || previewState[activeTab].loading ? (
Loading preview…
) : previewState[activeTab].error ? (
{previewState[activeTab].error}
@@ -499,71 +477,12 @@ export default function CompanySignContractPage() {
-

Company & Representative

-
-
- - { setCompanyName(e.target.value); setError('') }} - placeholder="Firmenname offiziell" - className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent" - required - /> -
-
- - setDate(e.target.value)} - className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent" - required - /> -
-
- - { setLocation(e.target.value); setError('') }} - placeholder="z.B. München" - className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent" - required - /> -
-
- - { setRepName(e.target.value); setError('') }} - placeholder="Vor- und Nachname" - className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent" - required - /> -
-
- - { setRepTitle(e.target.value); setError('') }} - placeholder="z.B. Geschäftsführer, Authorized Signatory" - className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent" - required - /> -
-
- - setNote(e.target.value)} - placeholder="Interne Referenz / Zusatz" - className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent" - /> -
-
+

Signature

-
- +
+
(null) const isDrawing = useRef(false) - const scaleRef = useRef(1) const getPos = (e: React.MouseEvent | React.TouchEvent) => { const canvas = canvasRef.current @@ -49,8 +48,9 @@ export default function PersonalSignContractPage() { const rect = canvas.getBoundingClientRect() const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY - const x = (clientX - rect.left) * scaleRef.current - const y = (clientY - rect.top) * scaleRef.current + // Coordinates should be in CSS pixels. The canvas context is already DPR-scaled via setTransform. + const x = clientX - rect.left + const y = clientY - rect.top return { x, y } } @@ -70,7 +70,6 @@ export default function PersonalSignContractPage() { ctx.lineCap = 'round' ctx.strokeStyle = '#0f172a' } - scaleRef.current = dpr } resize() window.addEventListener('resize', resize)