diff --git a/src/components/ConfirmButton.css b/src/components/ConfirmButton.css index 285492b..22c2b6f 100644 --- a/src/components/ConfirmButton.css +++ b/src/components/ConfirmButton.css @@ -32,4 +32,20 @@ text-align: center; white-space: nowrap; line-height: 51px; +} + +.confirm-button--disabled { + filter: grayscale(1); + opacity: 0.5; + cursor: not-allowed; + pointer-events: none; +} + +.confirm-button--disabled:hover { + transform: none; + opacity: 0.5; +} + +.confirm-button--disabled:active { + transform: none; } \ No newline at end of file diff --git a/src/components/ConfirmButton.tsx b/src/components/ConfirmButton.tsx index e3844da..722964c 100644 --- a/src/components/ConfirmButton.tsx +++ b/src/components/ConfirmButton.tsx @@ -4,11 +4,26 @@ import "./ConfirmButton.css"; interface ConfirmButtonProps { text: string; onClick?: () => void; + disabled?: boolean; } -const ConfirmButton: React.FC = ({ text, onClick }) => { +const ConfirmButton: React.FC = ({ + text, + onClick, + disabled = false, +}) => { + const handleClick = () => { + if (!disabled && onClick) { + onClick(); + } + }; + return ( -
+
{text}
); diff --git a/src/pages/UI7/UI7.tsx b/src/pages/UI7/UI7.tsx index ee317a0..e87b9fc 100644 --- a/src/pages/UI7/UI7.tsx +++ b/src/pages/UI7/UI7.tsx @@ -101,6 +101,7 @@ const UI7: React.FC = () => { const [isDrawing, setIsDrawing] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false); const [currentStep, setCurrentStep] = useState(0); + const [hasSignature, setHasSignature] = useState(false); const [currentPdfPageCount, setCurrentPdfPageCount] = useState(0); const totalRequiredSignatures = pdfInfoList.length + 1; @@ -240,6 +241,10 @@ const UI7: React.FC = () => { setCurrentPdfPageCount(0); }, [currentStep, currentPdfFile]); + useEffect(() => { + setHasSignature(false); + }, [currentStep]); + const resetCountdown = useCallback(() => { setCountdown(5); setShowWaitButton(true); @@ -327,6 +332,7 @@ const UI7: React.FC = () => { ctx.quadraticCurveTo(lastPoint.x, lastPoint.y, midX, midY); ctx.stroke(); lastPointRef.current = { x, y }; + setHasSignature(true); }, [getCoordinates, isDrawing] ); @@ -355,6 +361,7 @@ const UI7: React.FC = () => { ctx.lineWidth = 10; ctx.lineCap = "round"; ctx.lineJoin = "round"; + setHasSignature(false); }, []); const isCanvasBlank = useCallback(() => { @@ -586,6 +593,7 @@ const UI7: React.FC = () => { )}