115 lines
5.8 KiB
TypeScript
115 lines
5.8 KiB
TypeScript
import { useState } from "react";
|
|
import { FiLock } from "react-icons/fi";
|
|
|
|
export default function AdvancedOptions({setShowAdvancedOptions}) {
|
|
const [autoReminders, setAutoReminders] = useState(false);
|
|
const [expireDays, setExpireDays] = useState(120);
|
|
const [alertDays, setAlertDays] = useState(0);
|
|
|
|
return (
|
|
<div className="w-full h-screen bg-white flex flex-col">
|
|
{/* Header */}
|
|
<div className="flex justify-between items-center border-b px-6 py-4">
|
|
<h2 className="text-xl font-semibold">Advanced Options</h2>
|
|
<button
|
|
onClick={() => setShowAdvancedOptions(false)}
|
|
className="text-gray-500 hover:text-black">✕</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex flex-1 overflow-hidden">
|
|
{/* Sidebar */}
|
|
<div className="w-60 border-r px-6 py-4 space-y-4 text-sm font-medium text-gray-700">
|
|
<div className="cursor-pointer hover:text-black">Recipient Privileges</div>
|
|
<div className="cursor-pointer hover:text-black">Reminders</div>
|
|
<div className="cursor-pointer hover:text-black">Expiration</div>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className="flex-1 px-8 py-6 overflow-y-auto space-y-10">
|
|
{/* Recipient Privileges */}
|
|
<div>
|
|
<h3 className="text-lg font-semibold mb-3">Recipient Privileges</h3>
|
|
<p className="text-sm text-gray-600 mb-4">Give recipients options for how they sign.</p>
|
|
<div className="flex flex-col gap-2">
|
|
{/* <label className="flex items-center gap-2 text-gray-700">
|
|
<input type="checkbox" checked readOnly className="accent-purple-600" />
|
|
Recipients can sign on paper
|
|
</label> */}
|
|
<label className="flex items-center gap-2 text-gray-400">
|
|
<input type="checkbox" disabled className="accent-purple-600" />
|
|
Recipients can change signing responsibility or assign a delegate
|
|
</label>
|
|
</div>
|
|
<FiLock className="text-gray-400 mt-2" />
|
|
</div>
|
|
|
|
{/* Reminders */}
|
|
<div>
|
|
<h3 className="text-lg font-semibold mb-3">Reminders</h3>
|
|
<p className="text-sm text-gray-600 mb-4">
|
|
Follow up with automatic reminders. Signers will receive emails until they sign or decline the envelope.
|
|
</p>
|
|
<div>
|
|
<button
|
|
onClick={() => setAutoReminders(!autoReminders)}
|
|
className={`relative w-14 h-7 flex items-center rounded-full p-1 transition-colors duration-200 ${autoReminders ? "bg-purple-600" : "bg-gray-300"
|
|
}`}
|
|
>
|
|
<span
|
|
className={`bg-white w-5 h-5 rounded-full shadow-md transform transition-transform duration-200 ${autoReminders ? "translate-x-7" : "translate-x-0"
|
|
}`}
|
|
/>
|
|
</button>
|
|
<span className="ml-3 text-sm">Turn on auto reminders</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Expiration */}
|
|
<div>
|
|
<h3 className="text-lg font-semibold mb-3">Expiration</h3>
|
|
<p className="text-sm text-gray-600 mb-4">
|
|
By default, envelopes expire after 120 days. Recipients can no longer view or sign an envelope after it expires.
|
|
</p>
|
|
|
|
<div className="flex items-center gap-4 mb-3">
|
|
<select className="border rounded px-3 py-2 text-sm">
|
|
<option>Custom days</option>
|
|
</select>
|
|
<input
|
|
type="number"
|
|
value={expireDays}
|
|
onChange={(e) => setExpireDays(Number(e.target.value))}
|
|
className="border rounded px-3 py-2 text-sm w-20"
|
|
/>
|
|
</div>
|
|
|
|
<p className="text-sm text-gray-600 mb-6">
|
|
Envelopes will expire on: <span className="font-medium">1/3/2026</span>
|
|
</p>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<select className="border rounded px-3 py-2 text-sm">
|
|
<option>Custom days</option>
|
|
</select>
|
|
<input
|
|
type="number"
|
|
value={alertDays}
|
|
onChange={(e) => setAlertDays(Number(e.target.value))}
|
|
className="border rounded px-3 py-2 text-sm w-20"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="border-t p-4 flex justify-end">
|
|
<button className="bg-purple-600 text-white px-6 py-2 rounded hover:bg-purple-700 transition">
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|