feat: enhance contract signing pages with dynamic document previews and error handling
This commit is contained in:
seaznCode
parent
1045debc32
commit
5871416685
@ -27,9 +27,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 [previewHtml, setPreviewHtml] = useState<string | null>(null)
|
||||
const [previewError, setPreviewError] = useState<string | null>(null)
|
||||
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))
|
||||
@ -117,46 +120,82 @@ export default function CompanySignContractPage() {
|
||||
setSignatureDataUrl('')
|
||||
}
|
||||
|
||||
// Load latest contract preview for company user
|
||||
const loadPreview = async (contractType: 'contract' | 'gdpr') => {
|
||||
if (!accessToken) return
|
||||
setPreviewState((prev) => ({
|
||||
...prev,
|
||||
[contractType]: { ...prev[contractType], loading: true, error: null }
|
||||
}))
|
||||
try {
|
||||
const res = await fetch(`${API_BASE_URL}/api/contracts/preview/latest?contract_type=${contractType}`, {
|
||||
method: 'GET',
|
||||
headers: { Authorization: `Bearer ${accessToken}` },
|
||||
credentials: 'include'
|
||||
})
|
||||
if (!res.ok) {
|
||||
await res.text().catch(() => null)
|
||||
throw new Error('No contract available at this moment, please contact us.')
|
||||
}
|
||||
const html = await res.text()
|
||||
setPreviewState((prev) => ({
|
||||
...prev,
|
||||
[contractType]: { loading: false, html, error: null }
|
||||
}))
|
||||
} catch (e: unknown) {
|
||||
console.error('CompanySignContractPage.loadPreview error:', e)
|
||||
setPreviewState((prev) => ({
|
||||
...prev,
|
||||
[contractType]: { loading: false, html: null, error: 'No contract available at this moment, please contact us.' }
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
// Load latest contract + GDPR previews for company user
|
||||
useEffect(() => {
|
||||
const loadPreview = async () => {
|
||||
if (!accessToken) return
|
||||
setPreviewLoading(true)
|
||||
setPreviewError(null)
|
||||
try {
|
||||
const res = await fetch(`${API_BASE_URL}/api/contracts/preview/latest?contract_type=company`, {
|
||||
method: 'GET',
|
||||
headers: { Authorization: `Bearer ${accessToken}` },
|
||||
credentials: 'include'
|
||||
})
|
||||
if (!res.ok) {
|
||||
const text = await res.text().catch(() => '')
|
||||
throw new Error(text || 'Failed to load contract preview')
|
||||
}
|
||||
const html = await res.text()
|
||||
setPreviewHtml(html)
|
||||
} catch (e: any) {
|
||||
console.error('CompanySignContractPage.loadPreview error:', e)
|
||||
setPreviewError(e?.message || 'Failed to load contract preview')
|
||||
setPreviewHtml(null)
|
||||
} finally {
|
||||
setPreviewLoading(false)
|
||||
if (!accessToken) return
|
||||
loadPreview('contract')
|
||||
loadPreview('gdpr')
|
||||
}, [accessToken])
|
||||
|
||||
useEffect(() => {
|
||||
const doneLoading = !previewState.contract.loading && !previewState.gdpr.loading
|
||||
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')
|
||||
} else if (previewState.contract.html && !previewState.gdpr.html) {
|
||||
setActiveTab('contract')
|
||||
}
|
||||
}
|
||||
loadPreview()
|
||||
}, [accessToken])
|
||||
// Only show a blocking error if BOTH are missing; clear it as soon as one exists.
|
||||
if (doneLoading) {
|
||||
if (anyAvailable) {
|
||||
setError((prev) => (prev === blockingMsg ? '' : prev))
|
||||
} else {
|
||||
setError(blockingMsg)
|
||||
}
|
||||
}
|
||||
}, [previewState])
|
||||
|
||||
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 contractChecked = agreeContract
|
||||
const dataChecked = agreeData
|
||||
const contractAvailable = !!previewState.contract.html
|
||||
const gdprAvailable = !!previewState.gdpr.html
|
||||
|
||||
// Only require acknowledgements for documents that actually exist
|
||||
const contractChecked = contractAvailable ? agreeContract : true
|
||||
const dataChecked = gdprAvailable ? agreeData : true
|
||||
const signatureChecked = confirmSignature
|
||||
const signatureDrawn = !!signatureDataUrl
|
||||
|
||||
return companyValid && repNameValid && repTitleValid && locationValid && contractChecked && dataChecked && signatureChecked && signatureDrawn
|
||||
const anyPreview = contractAvailable || gdprAvailable
|
||||
return companyValid && repNameValid && repTitleValid && locationValid && contractChecked && dataChecked && signatureChecked && signatureDrawn && anyPreview
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
@ -164,12 +203,26 @@ export default function CompanySignContractPage() {
|
||||
if (!valid()) {
|
||||
// Detailed error message to help debug
|
||||
const issues: string[] = []
|
||||
const contractAvailable = !!previewState.contract.html
|
||||
const gdprAvailable = !!previewState.gdpr.html
|
||||
|
||||
if (!contractAvailable && !gdprAvailable) {
|
||||
const msg = 'Temporarily unable to sign contracts. No active documents are available at this moment.'
|
||||
setError(msg)
|
||||
showToast({
|
||||
variant: 'error',
|
||||
title: 'No documents available',
|
||||
message: msg,
|
||||
})
|
||||
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 (!agreeContract) issues.push('Contract read and understood')
|
||||
if (!agreeData) issues.push('Privacy policy accepted')
|
||||
if (contractAvailable && !agreeContract) issues.push('Contract read and understood')
|
||||
if (gdprAvailable && !agreeData) issues.push('Privacy policy accepted')
|
||||
if (!confirmSignature) issues.push('Electronic signature confirmed')
|
||||
if (!signatureDataUrl) issues.push('Signature captured on pad')
|
||||
|
||||
@ -257,9 +310,9 @@ export default function CompanySignContractPage() {
|
||||
}
|
||||
}, 2000)
|
||||
|
||||
} catch (error: any) {
|
||||
} catch (error: unknown) {
|
||||
console.error('Contract signing error:', error)
|
||||
const msg = error.message || 'Signature failed. Please try again.'
|
||||
const msg = error instanceof Error ? (error.message || 'Signature failed. Please try again.') : 'Signature failed. Please try again.'
|
||||
setError(msg)
|
||||
showToast({
|
||||
variant: 'error',
|
||||
@ -297,13 +350,53 @@ export default function CompanySignContractPage() {
|
||||
<section className="grid gap-8 lg:grid-cols-2 mb-10">
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-lg border border-gray-200 p-5 bg-gray-50">
|
||||
<h2 className="text-sm font-semibold text-gray-800 mb-3">Contract Information</h2>
|
||||
<ul className="space-y-2 text-xs sm:text-sm text-gray-600">
|
||||
<li><span className="font-medium text-gray-700">Contract ID:</span> COMP-2024-017</li>
|
||||
<li><span className="font-medium text-gray-700">Version:</span> 2.4 (valid from 01.11.2024)</li>
|
||||
<li><span className="font-medium text-gray-700">Jurisdiction:</span> EU / Germany</li>
|
||||
<li><span className="font-medium text-gray-700">Language:</span> DE (binding)</li>
|
||||
</ul>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h2 className="text-sm font-semibold text-gray-800">Document Information</h2>
|
||||
<div className="flex items-center gap-1 rounded-full border border-gray-200 bg-white px-1">
|
||||
{(['contract','gdpr'] as const).map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
type="button"
|
||||
onClick={() => setActiveTab(tab)}
|
||||
className={`px-2.5 py-1 text-xs rounded-full transition ${activeTab === tab ? 'bg-indigo-600 text-white shadow' : 'text-gray-700 hover:bg-gray-100'}`}
|
||||
>
|
||||
{tab === 'contract' ? 'Contract' : 'GDPR'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{(() => {
|
||||
const meta = activeTab === 'contract'
|
||||
? {
|
||||
id: 'COMP-2025-001',
|
||||
title: 'VERTRIEBSPARTNER / BUSINESSPARTNER / AFFILIATE - VERTRAG',
|
||||
version: 'idF 21.05.2025',
|
||||
jurisdiction: 'EU / Austria (Graz)',
|
||||
language: 'DE (binding)',
|
||||
issuer: 'Profit Planet GmbH',
|
||||
address: 'Liebenauer Hauptstraße 82c, A-8041 Graz'
|
||||
}
|
||||
: {
|
||||
id: 'COMP-GDPR-2025-001',
|
||||
title: 'SUB-AUFTRAGSVERARBEITUNGS-VERTRAG',
|
||||
version: 'Art. 28 Abs. 3 DSGVO',
|
||||
jurisdiction: 'EU / Austria (Graz)',
|
||||
language: 'DE (binding)',
|
||||
issuer: 'Profit Planet GmbH',
|
||||
address: 'Liebenauer Hauptstraße 82c, A-8041 Graz'
|
||||
}
|
||||
return (
|
||||
<ul className="space-y-2 text-xs sm:text-sm text-gray-600">
|
||||
<li><span className="font-medium text-gray-700">Document:</span> {meta.title}</li>
|
||||
<li><span className="font-medium text-gray-700">ID:</span> {meta.id}</li>
|
||||
<li><span className="font-medium text-gray-700">Version / Basis:</span> {meta.version}</li>
|
||||
<li><span className="font-medium text-gray-700">Jurisdiction:</span> {meta.jurisdiction}</li>
|
||||
<li><span className="font-medium text-gray-700">Language:</span> {meta.language}</li>
|
||||
<li><span className="font-medium text-gray-700">Issuer:</span> {meta.issuer}</li>
|
||||
<li><span className="font-medium text-gray-700">Address:</span> {meta.address}</li>
|
||||
</ul>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
<div className="rounded-lg border border-amber-200 bg-amber-50 p-5">
|
||||
<h3 className="text-sm font-semibold text-amber-900 mb-2">Attention</h3>
|
||||
@ -315,60 +408,54 @@ export default function CompanySignContractPage() {
|
||||
<div>
|
||||
<div className="rounded-lg border border-gray-200 bg-white relative overflow-hidden">
|
||||
<div className="flex items-center justify-between p-3 border-b border-gray-200 bg-gray-50">
|
||||
<h3 className="text-sm font-semibold text-gray-900">Company Contract Preview</h3>
|
||||
<div className="flex items-center gap-2 text-sm font-semibold text-gray-900">
|
||||
<span>Document Preview</span>
|
||||
<div className="flex items-center gap-1 rounded-full border border-gray-200 bg-white px-1">
|
||||
{(['contract','gdpr'] as const).map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
type="button"
|
||||
onClick={() => setActiveTab(tab)}
|
||||
className={`px-2.5 py-1 text-xs rounded-full transition ${activeTab === tab ? 'bg-indigo-600 text-white shadow' : 'text-gray-700 hover:bg-gray-100'}`}
|
||||
>
|
||||
{tab === 'contract' ? 'Contract' : 'GDPR'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (!previewHtml) return
|
||||
const blob = new Blob([previewHtml], { type: 'text/html' })
|
||||
const current = previewState[activeTab]
|
||||
if (!current?.html) return
|
||||
const blob = new Blob([current.html], { type: 'text/html' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
window.open(url, '_blank', 'noopener,noreferrer')
|
||||
}}
|
||||
disabled={!previewHtml}
|
||||
disabled={!previewState[activeTab]?.html}
|
||||
className="inline-flex items-center rounded-md bg-gray-100 hover:bg-gray-200 text-gray-900 px-2.5 py-1.5 text-xs disabled:opacity-60"
|
||||
>
|
||||
Open in new tab
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
if (!accessToken) return
|
||||
setPreviewLoading(true)
|
||||
setPreviewError(null)
|
||||
try {
|
||||
const res = await fetch(`${API_BASE_URL}/api/contracts/preview/latest?contract_type=company`, {
|
||||
method: 'GET',
|
||||
headers: { Authorization: `Bearer ${accessToken}` },
|
||||
credentials: 'include'
|
||||
})
|
||||
if (!res.ok) {
|
||||
const text = await res.text().catch(() => '')
|
||||
throw new Error(text || 'Failed to reload preview')
|
||||
}
|
||||
const html = await res.text()
|
||||
setPreviewHtml(html)
|
||||
} catch (e: any) {
|
||||
setPreviewError(e?.message || 'Failed to reload preview')
|
||||
} finally {
|
||||
setPreviewLoading(false)
|
||||
}
|
||||
}}
|
||||
disabled={previewLoading}
|
||||
onClick={() => loadPreview(activeTab)}
|
||||
disabled={previewState[activeTab].loading}
|
||||
className="inline-flex items-center rounded-md bg-indigo-600 hover:bg-indigo-500 text-white px-2.5 py-1.5 text-xs disabled:opacity-60"
|
||||
>
|
||||
{previewLoading ? 'Loading…' : 'Refresh'}
|
||||
{previewState[activeTab].loading ? 'Loading…' : 'Refresh'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{previewLoading ? (
|
||||
{previewState[activeTab].loading ? (
|
||||
<div className="h-72 flex items-center justify-center text-xs text-gray-500">Loading preview…</div>
|
||||
) : previewError ? (
|
||||
<div className="h-72 flex items-center justify-center text-xs text-red-600 px-4 text-center">{previewError}</div>
|
||||
) : previewHtml ? (
|
||||
<iframe title="Company Contract Preview" className="w-full h-72" srcDoc={previewHtml} />
|
||||
) : previewState[activeTab].error ? (
|
||||
<div className="h-72 flex items-center justify-center text-xs text-red-600 px-4 text-center">{previewState[activeTab].error}</div>
|
||||
) : previewState[activeTab].html ? (
|
||||
<iframe title={`Company Document Preview ${activeTab}`} className="w-full h-72" srcDoc={previewState[activeTab].html || ''} />
|
||||
) : (
|
||||
<div className="h-72 flex items-center justify-center text-xs text-gray-500">No preview available.</div>
|
||||
<div className="h-72 flex items-center justify-center text-xs text-gray-500">No contract available at this moment, please contact us.</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -525,7 +612,7 @@ export default function CompanySignContractPage() {
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting || success}
|
||||
disabled={submitting || success || (!previewState.contract.html && !previewState.gdpr.html)}
|
||||
className="inline-flex items-center justify-center rounded-md bg-indigo-600 px-8 py-3 text-sm font-semibold text-white shadow hover:bg-indigo-500 disabled:bg-gray-400 disabled:cursor-not-allowed transition"
|
||||
>
|
||||
{submitting ? 'Signing…' : success ? 'Signed' : 'Sign Now'}
|
||||
|
||||
@ -31,6 +31,7 @@ export default function PersonalSignContractPage() {
|
||||
contract: { loading: false, html: null, error: null },
|
||||
gdpr: { loading: false, html: null, error: null }
|
||||
})
|
||||
const [previewsReady, setPreviewsReady] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setDate(new Date().toISOString().slice(0, 10))
|
||||
@ -133,19 +134,19 @@ export default function PersonalSignContractPage() {
|
||||
credentials: 'include'
|
||||
})
|
||||
if (!res.ok) {
|
||||
const text = await res.text().catch(() => '')
|
||||
throw new Error(text || 'Failed to load contract preview')
|
||||
await res.text().catch(() => null)
|
||||
throw new Error('No contract available at this moment, please contact us.')
|
||||
}
|
||||
const html = await res.text()
|
||||
setPreviewState((prev) => ({
|
||||
...prev,
|
||||
[contractType]: { loading: false, html, error: null }
|
||||
}))
|
||||
} catch (e: any) {
|
||||
} catch (e: unknown) {
|
||||
console.error('PersonalSignContractPage.loadPreview error:', e)
|
||||
setPreviewState((prev) => ({
|
||||
...prev,
|
||||
[contractType]: { loading: false, html: null, error: e?.message || 'Failed to load contract preview' }
|
||||
[contractType]: { loading: false, html: null, error: 'No contract available at this moment, please contact us.' }
|
||||
}))
|
||||
}
|
||||
}
|
||||
@ -160,13 +161,41 @@ export default function PersonalSignContractPage() {
|
||||
]).finally(() => setPreviewLoading(false))
|
||||
}, [accessToken])
|
||||
|
||||
useEffect(() => {
|
||||
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 (doneLoading) {
|
||||
if (anyAvailable) {
|
||||
setError((prev) => (prev === blockingMsg ? '' : prev))
|
||||
} else {
|
||||
setError(blockingMsg)
|
||||
}
|
||||
|
||||
// If one preview is missing, default to showing the available one
|
||||
if (!previewState.contract.html && previewState.gdpr.html) {
|
||||
setActiveTab('gdpr')
|
||||
} else if (previewState.contract.html && !previewState.gdpr.html) {
|
||||
setActiveTab('contract')
|
||||
}
|
||||
}
|
||||
}, [previewState, previewLoading])
|
||||
|
||||
const valid = () => {
|
||||
const contractChecked = agreeContract
|
||||
const dataChecked = agreeData
|
||||
const contractAvailable = !!previewState.contract.html
|
||||
const gdprAvailable = !!previewState.gdpr.html
|
||||
|
||||
// Only require acknowledgements for documents that actually exist
|
||||
const contractChecked = contractAvailable ? agreeContract : true
|
||||
const dataChecked = gdprAvailable ? agreeData : true
|
||||
const signatureChecked = confirmSignature
|
||||
const signatureDrawn = !!signatureDataUrl
|
||||
const anyPreview = contractAvailable || gdprAvailable
|
||||
|
||||
return contractChecked && dataChecked && signatureChecked && signatureDrawn
|
||||
return contractChecked && dataChecked && signatureChecked && signatureDrawn && anyPreview
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
@ -174,8 +203,22 @@ export default function PersonalSignContractPage() {
|
||||
if (!valid()) {
|
||||
// Detailed error message to help debug
|
||||
const issues: string[] = []
|
||||
if (!agreeContract) issues.push('Contract read and understood')
|
||||
if (!agreeData) issues.push('Privacy policy accepted')
|
||||
const contractAvailable = !!previewState.contract.html
|
||||
const gdprAvailable = !!previewState.gdpr.html
|
||||
|
||||
if (!contractAvailable && !gdprAvailable) {
|
||||
const msg = 'Temporarily unable to sign contracts. No active documents are available at this moment.'
|
||||
setError(msg)
|
||||
showToast({
|
||||
variant: 'error',
|
||||
title: 'No documents available',
|
||||
message: msg,
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (contractAvailable && !agreeContract) issues.push('Contract read and understood')
|
||||
if (gdprAvailable && !agreeData) issues.push('Privacy policy accepted')
|
||||
if (!confirmSignature) issues.push('Electronic signature confirmed')
|
||||
if (!signatureDataUrl) issues.push('Signature captured on pad')
|
||||
|
||||
@ -253,9 +296,9 @@ export default function PersonalSignContractPage() {
|
||||
}
|
||||
}, 2000)
|
||||
|
||||
} catch (error: any) {
|
||||
} catch (error: unknown) {
|
||||
console.error('Contract signing error:', error)
|
||||
const msg = error.message || 'Signature failed. Please try again.'
|
||||
const msg = error instanceof Error ? (error.message || 'Signature failed. Please try again.') : 'Signature failed. Please try again.'
|
||||
setError(msg)
|
||||
showToast({
|
||||
variant: 'error',
|
||||
@ -297,13 +340,53 @@ export default function PersonalSignContractPage() {
|
||||
<section className="grid gap-8 lg:grid-cols-2 mb-10">
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-lg border border-gray-200 p-5 bg-gray-50">
|
||||
<h2 className="text-sm font-semibold text-gray-800 mb-3">Contract Information</h2>
|
||||
<ul className="space-y-2 text-xs sm:text-sm text-gray-600">
|
||||
<li><span className="font-medium text-gray-700">Contract ID:</span> PERS-2024-001</li>
|
||||
<li><span className="font-medium text-gray-700">Version:</span> 1.2 (valid from 01.11.2024)</li>
|
||||
<li><span className="font-medium text-gray-700">Jurisdiction:</span> EU / Germany</li>
|
||||
<li><span className="font-medium text-gray-700">Language:</span> EN (binding)</li>
|
||||
</ul>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h2 className="text-sm font-semibold text-gray-800">Document Information</h2>
|
||||
<div className="flex items-center gap-1 rounded-full border border-gray-200 bg-white px-1">
|
||||
{(['contract','gdpr'] as const).map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
type="button"
|
||||
onClick={() => setActiveTab(tab)}
|
||||
className={`px-2.5 py-1 text-xs rounded-full transition ${activeTab === tab ? 'bg-indigo-600 text-white shadow' : 'text-gray-700 hover:bg-gray-100'}`}
|
||||
>
|
||||
{tab === 'contract' ? 'Contract' : 'GDPR'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{(() => {
|
||||
const meta = activeTab === 'contract'
|
||||
? {
|
||||
id: 'PERS-2025-001',
|
||||
title: 'VERTRIEBSPARTNER / BUSINESSPARTNER / AFFILIATE - VERTRAG',
|
||||
version: 'idF 21.05.2025',
|
||||
jurisdiction: 'EU / Austria (Graz)',
|
||||
language: 'DE (binding)',
|
||||
issuer: 'Profit Planet GmbH',
|
||||
address: 'Liebenauer Hauptstraße 82c, A-8041 Graz'
|
||||
}
|
||||
: {
|
||||
id: 'PERS-GDPR-2025-001',
|
||||
title: 'SUB-AUFTRAGSVERARBEITUNGS-VERTRAG',
|
||||
version: 'Art. 28 Abs. 3 DSGVO',
|
||||
jurisdiction: 'EU / Austria (Graz)',
|
||||
language: 'DE (binding)',
|
||||
issuer: 'Profit Planet GmbH',
|
||||
address: 'Liebenauer Hauptstraße 82c, A-8041 Graz'
|
||||
}
|
||||
return (
|
||||
<ul className="space-y-2 text-xs sm:text-sm text-gray-600">
|
||||
<li><span className="font-medium text-gray-700">Document:</span> {meta.title}</li>
|
||||
<li><span className="font-medium text-gray-700">ID:</span> {meta.id}</li>
|
||||
<li><span className="font-medium text-gray-700">Version / Basis:</span> {meta.version}</li>
|
||||
<li><span className="font-medium text-gray-700">Jurisdiction:</span> {meta.jurisdiction}</li>
|
||||
<li><span className="font-medium text-gray-700">Language:</span> {meta.language}</li>
|
||||
<li><span className="font-medium text-gray-700">Issuer:</span> {meta.issuer}</li>
|
||||
<li><span className="font-medium text-gray-700">Address:</span> {meta.address}</li>
|
||||
</ul>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
<div className="rounded-lg border border-indigo-100 bg-indigo-50/60 p-5">
|
||||
<h3 className="text-sm font-semibold text-indigo-900 mb-2">Note</h3>
|
||||
@ -354,7 +437,7 @@ export default function PersonalSignContractPage() {
|
||||
) : previewState[activeTab].html ? (
|
||||
<iframe title={`Contract Preview ${activeTab}`} className="w-full h-72" srcDoc={previewState[activeTab].html || ''} />
|
||||
) : (
|
||||
<div className="h-72 flex items-center justify-center text-xs text-gray-500">No preview available.</div>
|
||||
<div className="h-72 flex items-center justify-center text-xs text-gray-500">No contract available at this moment, please contact us.</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -454,7 +537,7 @@ export default function PersonalSignContractPage() {
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting || success}
|
||||
disabled={submitting || success || (!previewState.contract.html && !previewState.gdpr.html)}
|
||||
className="inline-flex items-center justify-center rounded-md bg-indigo-600 px-8 py-3 text-sm font-semibold text-white shadow hover:bg-indigo-500 disabled:bg-gray-400 disabled:cursor-not-allowed transition"
|
||||
>
|
||||
{submitting ? 'Signing…' : success ? 'Signed' : 'Sign Now'}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user