https://paintcostpro.com/_next/static/chunks/248.7ec4a9485e04b128.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[248],{70248:function(e,t,r){r.r(t),r.d(t,{default:function(){return l}});var n=r(57437),s=r(2265);function l(e){let{onSign:t,onClear:r,existingSignature:l,signedAt:i,primaryColor:a="#4f46e5"}=e,o=(0,s.useRef)(null),c=(0,s.useRef)(!1),[u,d]=(0,s.useState)(!1),[x,h]=(0,s.useState)(!!l);(0,s.useEffect)(()=>{let e=o.current;if(!e)return;let t=e.getContext("2d");t&&(t.strokeStyle="#1e293b",t.lineWidth=2.5,t.lineCap="round",t.lineJoin="round",t.fillStyle="#ffffff",t.fillRect(0,0,e.width,e.height))},[x]);let f=(e,t)=>{let r=t.getBoundingClientRect(),n=t.width/r.width,s=t.height/r.height;if("touches"in e){let t=e.touches[0];return{x:(t.clientX-r.left)*n,y:(t.clientY-r.top)*s}}return{x:(e.clientX-r.left)*n,y:(e.clientY-r.top)*s}},g=(0,s.useCallback)(e=>{let t=o.current;if(!t)return;e.preventDefault(),c.current=!0;let r=t.getContext("2d");if(!r)return;let n=f(e,t);r.beginPath(),r.moveTo(n.x,n.y)},[]),m=(0,s.useCallback)(e=>{if(!c.current)return;e.preventDefault();let t=o.current;if(!t)return;let r=t.getContext("2d");if(!r)return;let n=f(e,t);r.lineTo(n.x,n.y),r.stroke(),d(!0)},[]),b=(0,s.useCallback)(()=>{c.current=!1;let e=o.current;e&&t(e.toDataURL("image/png"))},[t]),p=()=>{let e=o.current;if(!e)return;let t=e.getContext("2d");t&&(t.fillStyle="#ffffff",t.fillRect(0,0,e.width,e.height),d(!1),x&&(h(!1),r()))};return x&&l?(0,n.jsxs)("div",{className:"border border-green-500/30 rounded-xl p-4 bg-green-500/5",children:[(0,n.jsxs)("div",{className:"flex items-center justify-between mb-3",children:[(0,n.jsxs)("div",{className:"flex items-center gap-2",children:[(0,n.jsx)("span",{className:"text-green-400 text-lg",children:"✓"}),(0,n.jsx)("span",{className:"font-bold text-green-400 text-sm",children:"Signed"})]}),i&&(0,n.jsx)("span",{className:"text-xs text-green-400/70",children:new Date(i).toLocaleDateString("en-US",{month:"short",day:"numeric",year:"numeric",hour:"2-digit",minute:"2-digit"})})]}),(0,n.jsx)("img",{src:l,alt:"Signature",className:"w-full max-w-xs h-16 object-contain border border-gray-200 rounded-lg bg-white"}),(0,n.jsx)("button",{onClick:p,className:"mt-2 text-xs text-red-400 hover:text-red-300 underline",children:"Clear signature"})]}):(0,n.jsxs)("div",{children:[(0,n.jsx)("p",{className:"text-xs font-semibold uppercase tracking-wider text-gray-400 mb-3",children:"Sign to Accept Proposal"}),(0,n.jsxs)("div",{className:"border-2 border-dashed border-gray-300 rounded-xl overflow-hidden mb-3 relative",children:[(0,n.jsx)("canvas",{ref:o,width:600,height:150,className:"w-full touch-none cursor-crosshair",style:{display:"block"},onMouseDown:g,onMouseMove:m,onMouseUp:b,onMouseLeave:b,onTouchStart:g,onTouchMove:m,onTouchEnd:b}),!u&&(0,n.jsx)("div",{className:"absolute inset-0 flex items-center justify-center pointer-events-none",children:(0,n.jsx)("p",{className:"text-gray-400 text-sm",children:"Sign here"})})]}),(0,n.jsxs)("div",{className:"flex items-center justify-between",children:[(0,n.jsx)("p",{className:"text-xs text-gray-400",children:"Draw your signature above using mouse or touch"}),u&&(0,n.jsx)("button",{type:"button",onClick:p,className:"text-xs text-gray-400 hover:text-red-400 underline transition-colors",children:"Clear"})]})]})}}}]);