78 lines
3.4 KiB
TypeScript
78 lines
3.4 KiB
TypeScript
import { useState } from "react";
|
|
import { FaSignature, FaCheckCircle } from "react-icons/fa";
|
|
import { MdOutlinePrivacyTip } from "react-icons/md";
|
|
|
|
interface ConsentScreenProps {
|
|
onConsent: () => void;
|
|
onDecline?: () => void;
|
|
}
|
|
|
|
export default function ConsentScreen({ onConsent, onDecline }: ConsentScreenProps) {
|
|
const [accepted, setAccepted] = useState(false);
|
|
|
|
console.log("USER ACCEPTED CALLED")
|
|
|
|
return (
|
|
<>
|
|
<div className="absolute top-0 left-0 w-[100vw] h-[100vh] bg-slate-100 opacity-50 backdrop-filter backdrop-blur-2xl z-50"></div>
|
|
<div className="absolute top-0 left-0 w-full h-screen flex items-center justify-center p-6 z-50">
|
|
<div className="bg-white shadow-xl rounded-2xl p-8 max-w-lg w-full border border-gray-200">
|
|
{/* Header */}
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<FaSignature className="text-blue-600 text-3xl" />
|
|
<h2 className="text-2xl font-semibold text-gray-800">
|
|
Consent for E-Signature
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Info */}
|
|
<div className="flex items-start gap-3 mb-6 text-gray-600">
|
|
<MdOutlinePrivacyTip className="text-xl text-blue-500 mt-1" />
|
|
<p className="text-sm leading-relaxed">
|
|
By providing your electronic signature, you agree that it is the legal
|
|
equivalent of your manual signature on this document. Please review the
|
|
agreement carefully before proceeding.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Checkbox */}
|
|
<label className="flex items-center gap-3 mb-6 cursor-pointer select-none">
|
|
<input
|
|
type="checkbox"
|
|
checked={accepted}
|
|
onChange={(e) => setAccepted(e.target.checked)}
|
|
className="w-5 h-5 accent-blue-600 border-gray-300 rounded"
|
|
/>
|
|
<span className="text-sm text-gray-700">
|
|
I agree to sign electronically
|
|
</span>
|
|
</label>
|
|
|
|
{/* Buttons */}
|
|
<div className="flex gap-4 flex-row-reverse">
|
|
<button
|
|
className={`flex-1 cursor-pointer flex items-center justify-center gap-2 rounded-xl py-2 font-medium transition-colors
|
|
${accepted ? "bg-blue-600 text-white hover:bg-blue-700" : "bg-gray-300 text-gray-500 cursor-not-allowed"}
|
|
`}
|
|
disabled={!accepted}
|
|
onClick={onConsent}
|
|
>
|
|
<FaCheckCircle /> Continue
|
|
</button>
|
|
|
|
{/* {onDecline && (
|
|
<button
|
|
className="flex-1 border border-red-500 text-red-500 hover:bg-red-50 rounded-xl py-2 font-medium transition-colors"
|
|
onClick={onDecline}
|
|
>
|
|
Decline
|
|
</button>
|
|
)} */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
|
|
);
|
|
}
|