ccopeland/red
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: client-text and client-checkbox field types — signer fills text/checks boxes on signing page

Browse Source
This commit is contained in:
Chandler Copeland
2026-04-06 11:35:30 -06:00
parent 116fa2bdfb
commit 6013dfe89f
6 changed files with 212 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
teressa-copeland-homes/src/app/sign/[token]/_components/SigningProgressBar.tsx
View File

@@ -3,6 +3,7 @@
interface SigningProgressBarProps {
total: number;
signed: number;
extraRequired?: number; // unfilled client-text + unchecked client-checkbox fields
onJumpToNext: () => void;
onSubmit: () => void;
submitting: boolean;
@@ -11,64 +12,43 @@ interface SigningProgressBarProps {
export function SigningProgressBar({
total,
signed,
extraRequired = 0,
onJumpToNext,
onSubmit,
submitting,
}: SigningProgressBarProps) {
const allSigned = signed >= total;
const sigsDone = signed >= total;
const allDone = sigsDone && extraRequired === 0;
let statusText = `${signed} of ${total} signature${total !== 1 ? 's' : ''} complete`;
if (sigsDone && extraRequired > 0) {
statusText = `${extraRequired} field${extraRequired !== 1 ? 's' : ''} still need${extraRequired === 1 ? 's' : ''} to be filled`;
}
return (
<div
style={{
position: 'fixed',
bottom: 0,
left: 0,
right: 0,
zIndex: 50,
backgroundColor: '#1B2B4B',
color: '#fff',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '12px 24px',
boxShadow: '0 -2px 8px rgba(0,0,0,0.15)',
}}
>
<span style={{ fontSize: '15px' }}>
{signed} of {total} signature{total !== 1 ? 's' : ''} complete
</span>
<div style={{
position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 50,
backgroundColor: '#1B2B4B', color: '#fff',
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
padding: '12px 24px', boxShadow: '0 -2px 8px rgba(0,0,0,0.15)',
}}>
<span style={{ fontSize: '15px' }}>{statusText}</span>
<div style={{ display: 'flex', gap: '12px' }}>
{!allSigned && (
<button
onClick={onJumpToNext}
style={{
backgroundColor: 'transparent',
border: '1px solid #C9A84C',
color: '#C9A84C',
padding: '8px 18px',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '14px',
}}
>
{!sigsDone && (
<button onClick={onJumpToNext} style={{
backgroundColor: 'transparent', border: '1px solid #C9A84C', color: '#C9A84C',
padding: '8px 18px', borderRadius: '4px', cursor: 'pointer', fontSize: '14px',
}}>
Jump to Next
</button>
)}
<button
onClick={onSubmit}
disabled={!allSigned || submitting}
style={{
backgroundColor: allSigned ? '#C9A84C' : '#555',
color: '#fff',
border: 'none',
padding: '8px 22px',
borderRadius: '4px',
cursor: allSigned ? 'pointer' : 'not-allowed',
fontSize: '14px',
fontWeight: 'bold',
opacity: submitting ? 0.7 : 1,
}}
>
{submitting ? 'Submitting...' : 'Submit Signature'}
<button onClick={onSubmit} disabled={!allDone || submitting} style={{
backgroundColor: allDone ? '#C9A84C' : '#555', color: '#fff', border: 'none',
padding: '8px 22px', borderRadius: '4px',
cursor: allDone ? 'pointer' : 'not-allowed', fontSize: '14px', fontWeight: 'bold',
opacity: submitting ? 0.7 : 1,
}}>
{submitting ? 'Submitting...' : 'Submit'}
</button>
</div>
</div>