// FRM-PROC-10 · Digital agreement sign — read → sign → confirm const SignaturePad = ({ onChange }) => { const canvasRef = useRef(null); const drawing = useRef(false); const last = useRef(null); useEffect(() => { const cv = canvasRef.current; if (!cv) return; const rect = cv.getBoundingClientRect(); cv.width = rect.width * 2; cv.height = rect.height * 2; const ctx = cv.getContext("2d"); ctx.scale(2, 2); ctx.lineWidth = 2.4; ctx.lineCap = "round"; ctx.lineJoin = "round"; ctx.strokeStyle = getComputedStyle(document.documentElement).getPropertyValue("--foreground") || "#222"; const pos = (e) => { const r = cv.getBoundingClientRect(); const p = e.touches ? e.touches[0] : e; return { x: p.clientX - r.left, y: p.clientY - r.top }; }; const start = (e) => { e.preventDefault(); drawing.current = true; last.current = pos(e); }; const move = (e) => { if (!drawing.current) return; e.preventDefault(); const p = pos(e); ctx.beginPath(); ctx.moveTo(last.current.x, last.current.y); ctx.lineTo(p.x, p.y); ctx.stroke(); last.current = p; onChange?.(true); }; const end = () => { drawing.current = false; }; cv.addEventListener("mousedown", start); cv.addEventListener("mousemove", move); window.addEventListener("mouseup", end); cv.addEventListener("touchstart", start, { passive: false }); cv.addEventListener("touchmove", move, { passive: false }); window.addEventListener("touchend", end); cv._clear = () => { ctx.clearRect(0, 0, cv.width, cv.height); onChange?.(false); }; return () => { cv.removeEventListener("mousedown", start); cv.removeEventListener("mousemove", move); window.removeEventListener("mouseup", end); cv.removeEventListener("touchstart", start); cv.removeEventListener("touchmove", move); window.removeEventListener("touchend", end); }; }, []); return (
✕
Sign above the line
); }; const SignAgreementScreen = ({ nav, t, setTweak, params }) => { const { AppBar, Btn } = window.Fm; const Ic = window.Icons, FD = window.FD; const step = t.signStep; // read | sign | confirm const [read, setRead] = useState(false); const [scrolled, setScrolled] = useState(false); const [hasSig, setHasSig] = useState(false); const stepIdx = step === "read" ? 0 : step === "sign" ? 1 : 2; const onScroll = (e) => { const el = e.target; if (el.scrollTop + el.clientHeight >= el.scrollHeight - 30) setScrolled(true); }; return ( <> step === "read" ? nav.back() : setTweak("signStep", step === "confirm" ? "sign" : "read")} title="Sign agreement" align="left" right={Step {stepIdx + 1} of 3}/>
{[0, 1, 2].map(i =>
)}
{step === "read" && ( <>
Supply Agreement · {FD.RESP_BY_ID[params.id]?.po || "PO-2026-0461"}
This agreement is made between AMOMS (the Buyer) and {FD.ME.name} (the Supplier) for the supply of avocados as specified in the accepted purchase order.
{Array.from({ length: 9 }).map((_, i) =>
)}
Terms of delivery & payment
{Array.from({ length: 8 }).map((_, i) =>
)}
setTweak("signStep", "sign")}>Continue
)} {step === "sign" && ( <>
Turn your phone sideways for more room to sign.
{FD.ME.name}
setHasSig(e.target.value.length > 1)}/>
setTweak("signStep", "confirm")}>Continue
)} {step === "confirm" && ( <>
Review & submit
Your signature
{FD.ME.name}
Buyer signature
AMOMS Signed
By submitting, you agree to be legally bound by this supply agreement. A copy will be saved to your profile.
{ setTweak("acceptedState", "both"); nav.replace("responseAccepted", { id: params.id }); }}>Submit signature
)} ); }; window.FarmerPages = Object.assign(window.FarmerPages || {}, { signAgreement: { brandStatus: false, render: (ctx) => }, });